make it interactive, add an ai agent. take grok 4 for that

components/ai-agent.js

@@ -0,0 +1,403 @@
+class AIAgent extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.isOpen = false;
+    this.conversation = [
+      {
+        role: 'assistant',
+        content: 'Hello! I\'m your AI coding assistant powered by Grok-4. How can I help you with your project today?'
+      }
+    ];
+  }
+
+  connectedCallback() {
+    this.render();
+    this.setupEventListeners();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          position: fixed;
+          bottom: 20px;
+          right: 20px;
+          z-index: 1000;
+          font-family: 'Inter', sans-serif;
+        }
+        
+        .chat-container {
+          position: absolute;
+          bottom: 70px;
+          right: 0;
+          width: 400px;
+          height: 500px;
+          background: white;
+          border-radius: 12px;
+          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          transform: translateY(20px);
+          opacity: 0;
+          visibility: hidden;
+          transition: all 0.3s ease;
+        }
+        
+        .chat-container.open {
+          transform: translateY(0);
+          opacity: 1;
+          visibility: visible;
+        }
+        
+        .chat-header {
+          background: #0088CC;
+          color: white;
+          padding: 16px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        
+        .chat-title {
+          font-weight: 600;
+          font-size: 16px;
+        }
+        
+        .close-btn {
+          background: none;
+          border: none;
+          color: white;
+          cursor: pointer;
+          font-size: 20px;
+        }
+        
+        .chat-messages {
+          flex: 1;
+          padding: 16px;
+          overflow-y: auto;
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+        }
+        
+        .message {
+          max-width: 80%;
+          padding: 12px 16px;
+          border-radius: 18px;
+          font-size: 14px;
+          line-height: 1.4;
+        }
+        
+        .user-message {
+          align-self: flex-end;
+          background: #0088CC;
+          color: white;
+          border-bottom-right-radius: 4px;
+        }
+        
+        .assistant-message {
+          align-self: flex-start;
+          background: #f1f5f9;
+          color: #334155;
+          border-bottom-left-radius: 4px;
+        }
+        
+        .chat-input {
+          display: flex;
+          padding: 16px;
+          border-top: 1px solid #e2e8f0;
+          background: white;
+        }
+        
+        .chat-input input {
+          flex: 1;
+          padding: 12px 16px;
+          border: 1px solid #cbd5e1;
+          border-radius: 24px;
+          outline: none;
+          font-size: 14px;
+        }
+        
+        .chat-input input:focus {
+          border-color: #0088CC;
+        }
+        
+        .send-btn {
+          background: #0088CC;
+          color: white;
+          border: none;
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          margin-left: 10px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        
+        .send-btn:hover {
+          background: #0077b3;
+        }
+        
+        .agent-button {
+          width: 60px;
+          height: 60px;
+          border-radius: 50%;
+          background: #0088CC;
+          color: white;
+          border: none;
+          cursor: pointer;
+          box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 24px;
+          transition: all 0.2s ease;
+        }
+        
+        .agent-button:hover {
+          transform: scale(1.05);
+          box-shadow: 0 6px 16px rgba(0, 136, 204, 0.4);
+        }
+        
+        .typing-indicator {
+          align-self: flex-start;
+          background: #f1f5f9;
+          padding: 12px 16px;
+          border-radius: 18px;
+          display: none;
+        }
+        
+        .typing-indicator span {
+          height: 8px;
+          width: 8px;
+          background: #94a3b8;
+          border-radius: 50%;
+          display: inline-block;
+          margin: 0 2px;
+          animation: bounce 1.3s linear infinite;
+        }
+        
+        .typing-indicator span:nth-child(2) {
+          animation-delay: 0.15s;
+        }
+        
+        .typing-indicator span:nth-child(3) {
+          animation-delay: 0.3s;
+        }
+        
+        @keyframes bounce {
+          0%, 60%, 100% {
+            transform: translateY(0);
+          }
+          30% {
+            transform: translateY(-5px);
+          }
+        }
+        
+        @media (max-width: 480px) {
+          .chat-container {
+            width: calc(100vw - 40px);
+            height: 70vh;
+          }
+        }
+      </style>
+      
+      <div class="chat-container" id="chatContainer">
+        <div class="chat-header">
+          <div class="chat-title">AI Coding Assistant</div>
+          <button class="close-btn" id="closeBtn">×</button>
+        </div>
+        <div class="chat-messages" id="chatMessages">
+          ${this.renderMessages()}
+          <div class="typing-indicator" id="typingIndicator">
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+        </div>
+        <div class="chat-input">
+          <input type="text" id="messageInput" placeholder="Ask about coding, debugging, or best practices..." />
+          <button class="send-btn" id="sendBtn">
+            <i data-feather="send"></i>
+          </button>
+        </div>
+      </div>
+      <button class="agent-button" id="agentButton">
+        <i data-feather="message-square"></i>
+      </button>
+    `;
+    
+    // Initialize feather icons
+    import('https://unpkg.com/feather-icons').then(() => {
+      feather.replace();
+    });
+  }
+
+  renderMessages() {
+    return this.conversation.map(msg => `
+      <div class="message ${msg.role}-message">
+        ${msg.content}
+      </div>
+    `).join('');
+  }
+
+  setupEventListeners() {
+    const agentButton = this.shadowRoot.getElementById('agentButton');
+    const closeBtn = this.shadowRoot.getElementById('closeBtn');
+    const chatContainer = this.shadowRoot.getElementById('chatContainer');
+    const messageInput = this.shadowRoot.getElementById('messageInput');
+    const sendBtn = this.shadowRoot.getElementById('sendBtn');
+    const chatMessages = this.shadowRoot.getElementById('chatMessages');
+    const typingIndicator = this.shadowRoot.getElementById('typingIndicator');
+
+    agentButton.addEventListener('click', () => {
+      this.isOpen = !this.isOpen;
+      chatContainer.classList.toggle('open', this.isOpen);
+    });
+
+    closeBtn.addEventListener('click', () => {
+      this.isOpen = false;
+      chatContainer.classList.remove('open');
+    });
+
+    sendBtn.addEventListener('click', () => this.sendMessage());
+    
+    messageInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        this.sendMessage();
+      }
+    });
+
+    // Auto-scroll to bottom of messages
+    const observer = new MutationObserver(() => {
+      chatMessages.scrollTop = chatMessages.scrollHeight;
+    });
+    
+    observer.observe(chatMessages, { childList: true, subtree: true });
+  }
+
+  async sendMessage() {
+    const messageInput = this.shadowRoot.getElementById('messageInput');
+    const chatMessages = this.shadowRoot.getElementById('chatMessages');
+    const typingIndicator = this.shadowRoot.getElementById('typingIndicator');
+    
+    const message = messageInput.value.trim();
+    if (!message) return;
+
+    // Add user message to conversation
+    this.conversation.push({
+      role: 'user',
+      content: message
+    });
+    
+    // Clear input
+    messageInput.value = '';
+    
+    // Re-render messages
+    const messagesContainer = this.shadowRoot.getElementById('chatMessages');
+    messagesContainer.innerHTML = this.renderMessages() + `
+      <div class="typing-indicator" id="typingIndicator">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    `;
+    
+    // Show typing indicator
+    typingIndicator.style.display = 'block';
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+    
+    try {
+      // Call Grok API
+      const response = await this.callGrokAPI(message);
+      
+      // Hide typing indicator
+      typingIndicator.style.display = 'none';
+      
+      // Add assistant response to conversation
+      this.conversation.push({
+        role: 'assistant',
+        content: response
+      });
+      
+      // Re-render messages
+      messagesContainer.innerHTML = this.renderMessages() + `
+        <div class="typing-indicator" id="typingIndicator">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      `;
+      
+    } catch (error) {
+      // Hide typing indicator
+      typingIndicator.style.display = 'none';
+      
+      // Show error message
+      this.conversation.push({
+        role: 'assistant',
+        content: 'Sorry, I encountered an error. Please try again.'
+      });
+      
+      // Re-render messages
+      messagesContainer.innerHTML = this.renderMessages() + `
+        <div class="typing-indicator" id="typingIndicator">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      `;
+    }
+    
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+  }
+
+  async callGrokAPI(message) {
+    // In a real implementation, you would call the Grok API here
+    // This is a simulation for demonstration purposes
+    
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        const responses = [
+          "I can help you with that! Based on your project structure, I recommend organizing your code into modules for better maintainability.",
+          "That's a great question! For this scenario, you might want to consider using a design pattern like Observer or Factory depending on your specific needs.",
+          "I see you're working with JavaScript. Have you considered using modern ES6+ features like arrow functions and destructuring to make your code more concise?",
+          "Debugging tip: Try using console.log statements strategically placed in your code to trace the execution flow and variable values.",
+          "For performance optimization, consider lazy loading components that aren't immediately visible to the user.",
+          "Security best practice: Always validate and sanitize user inputs on both client and server sides to prevent injection attacks."
+        ];
+        
+        resolve(responses[Math.floor(Math.random() * responses.length)]);
+      }, 1500);
+    });
+    
+    /*
+    // Real API call example (uncomment and configure with actual credentials):
+    const response = await fetch('https://api.x.ai/v1/chat/completions', {
+      method: 'POST',
+      headers: {
+        'Authorization': 'Bearer YOUR_API_KEY_HERE',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        model: 'grok-4',
+        messages: [
+          ...this.conversation,
+          { role: 'user', content: message }
+        ],
+        temperature: 0.7,
+        max_tokens: 500
+      })
+    });
+    
+    const data = await response.json();
+    return data.choices[0].message.content;
+    */
+  }
+}
+
+customElements.define('ai-agent', AIAgent);

index.html

@@ -190,15 +190,17 @@
             </div>
         </div>
     </div>
-    
     <custom-footer></custom-footer>
     
+    <ai-agent></ai-agent>
+    
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
+    <script src="components/ai-agent.js"></script>
     <script src="script.js"></script>
     <script>
         feather.replace();
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
-</html>
+</html>