components/ai-chat.js

class AiChat extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          max-width: 720px;
          margin: 0 auto;
          padding: 20px;
          border: 1px solid #e5e7eb;
          border-radius: 12px;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
          font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
        }
        .header {
          font-size: 16px;
          margin-top: 0;
          margin-bottom: 10px;
        }
        .description {
          color: rgb(107, 114, 128);
          font-size: 15px;
          margin-bottom: 20px;
        }
        .context-buttons {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-bottom: 16px;
        }
        .context-button {
          padding: 6px 12px;
          border: none;
          border-radius: 6px;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s;
        }
        .context-button:hover {
          opacity: 0.9;
        }
        .chat-container {
          margin-bottom: 16px;
          padding: 16px;
          border: 1px solid #e5e7eb;
          border-radius: 8px;
          background: #f9fafb;
          height: 384px;
          overflow-y: auto;
          font-family: 'SF Mono', 'Roboto Mono', monospace;
          font-size: 14px;
        }
        .message {
          margin-bottom: 8px;
          max-width: 80%;
        }
        .user-message {
          margin-left: auto;
          text-align: right;
        }
        .ai-message {
          margin-right: auto;
          text-align: left;
        }
        .message-content {
          display: inline-block;
          padding: 10px 12px;
          border-radius: 8px;
        }
        .user-message .message-content {
          background: #ebf5ff;
          border-right: 3px solid #2563eb;
        }
        .ai-message .message-content {
          background: #f3f4f6;
          border-left: 3px solid #3b82f6;
        }
        .input-area {
          display: flex;
        }
        .message-input {
          flex: 1;
          padding: 8px 12px;
          border: 1px solid #e5e7eb;
          border-radius: 8px 0 0 8px;
          font-size: 14px;
        }
        .send-button {
          padding: 8px 16px;
          background: #3b82f6;
          color: white;
          border: none;
          border-radius: 0 8px 8px 0;
          cursor: pointer;
        }
        .send-button:hover {
          background: #2563eb;
        }
        .command-buttons {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 8px;
          margin-top: 16px;
        }
        .command-button {
          padding: 8px 12px;
          background: #f3f4f6;
          border: none;
          border-radius: 6px;
          font-size: 14px;
          cursor: pointer;
        }
        .command-button:hover {
          background: #e5e7eb;
        }
        .typing-indicator {
          text-align: left;
          margin-bottom: 8px;
        }
        .typing-indicator .message-content {
          background: #f3f4f6;
          border-left: 3px solid #3b82f6;
        }
      </style>
      <h1 class="header">AI Development Assistant</h1>
      <p class="description">Smart coding help and automation</p>
      
      <div class="context-buttons">
        <button class="context-button" style="background: #374151; color: white;" data-context="hacking">Hacking</button>
        <button class="context-button" style="background: #3b82f6; color: white;" data-context="integration">Integration</button>
        <button class="context-button" style="background: #10b981; color: white;" data-context="debugging">Debugging</button>
        <button class="context-button" style="background: #8b5cf6; color: white;" data-context="automation">Automation</button>
      </div>
      
      <div class="chat-container" id="chatContainer">
        <!-- Messages will be added here -->
      </div>
      
      <div class="input-area">
        <input type="text" class="message-input" id="messageInput" placeholder="Type your message or command...">
        <button class="send-button" id="sendButton">Send</button>
      </div>
      
      <div class="command-buttons">
        <button class="command-button" data-command="/explain">/explain</button>
        <button class="command-button" data-command="/code">/code</button>
        <button class="command-button" data-command="/api">/api</button>
        <button class="command-button" data-command="/fix">/fix</button>
      </div>
    `;

    this.initializeChat();
  }

  initializeChat() {
    this.currentContext = 'general';
    this.chatContainer = this.shadowRoot.getElementById('chatContainer');
    this.messageInput = this.shadowRoot.getElementById('messageInput');
    this.sendButton = this.shadowRoot.getElementById('sendButton');
    
    // Add event listeners
    this.sendButton.addEventListener('click', () => this.sendMessage());
    this.messageInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        this.sendMessage();
      }
    });
    
    // Context buttons
    const contextButtons = this.shadowRoot.querySelectorAll('.context-button');
    contextButtons.forEach(button => {
      button.addEventListener('click', () => {
        this.setContext(button.dataset.context);
      });
    });
    
    // Command buttons
    const commandButtons = this.shadowRoot.querySelectorAll('.command-button');
    commandButtons.forEach(button => {
      button.addEventListener('click', () => {
        this.insertCommand(button.dataset.command);
      });
    });
    
    // Initial welcome message
    this.addMessage('ai', `👋 Welcome to DevAssistant!
I can help with:
- API Integrations (REST, GraphQL, WebSockets)
- Debugging (Chrome DevTools, Wireshark)
- Security (Burp Suite, OWASP ZAP)
- Automation (Selenium, Puppeteer)

Try commands like:
• /explain [concept] - Get detailed explanations
• /code [language] - Generate code samples
• /api [service] - Get API integration help
• /fix [error] - Debug and fix issues

Or click the context buttons above!`);
  }

  addMessage(sender, text) {
    const messageDiv = document.createElement('div');
    messageDiv.classList.add('message');
    
    if (sender === 'user') {
      messageDiv.classList.add('user-message');
      messageDiv.innerHTML = `<div class="message-content">${this.escapeHtml(text)}</div>`;
    } else {
      messageDiv.classList.add('ai-message');
      messageDiv.innerHTML = `<div class="message-content">${this.formatMessage(text)}</div>`;
    }
    
    this.chatContainer.appendChild(messageDiv);
    this.chatContainer.scrollTop = this.chatContainer.scrollHeight;
  }

  formatMessage(text) {
    // Simple formatting for code blocks
    return text.replace(/