components/chatbot.js

class ChatbotComponent extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: fixed;
          bottom: 20px;
          right: 20px;
          width: 400px;
          max-height: 600px;
          background: white;
          border-radius: 12px;
          box-shadow: 0 10px 25px rgba(0,0,0,0.1);
          z-index: 1000;
          overflow: hidden;
          font-family: 'Inter', sans-serif;
        }
        
        .chatbot-header {
          background: #21223a;
          color: white;
          padding: 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        
        .chatbot-title {
          font-weight: 600;
          font-size: 18px;
        }
        
        .chatbot-close {
          background: none;
          border: none;
          color: white;
          cursor: pointer;
        }
        
        .chatbot-body {
          padding: 16px;
          height: 400px;
          overflow-y: auto;
        }
        
        .message {
          margin-bottom: 12px;
          max-width: 80%;
          padding: 8px 12px;
          border-radius: 8px;
          font-size: 14px;
        }
        
        .bot-message {
          background: #f3f4f6;
          margin-right: auto;
          border-top-left-radius: 0;
        }
        
        .user-message {
          background: #ff580f;
          color: white;
          margin-left: auto;
          border-top-right-radius: 0;
        }
        
        .chatbot-footer {
          display: flex;
          padding: 16px;
          border-top: 1px solid #e5e7eb;
          background: #f9fafb;
        }
        
        .chatbot-input {
          flex: 1;
          padding: 10px 12px;
          border: 1px solid #e5e7eb;
          border-radius: 8px;
          outline: none;
          margin-right: 8px;
        }
        
        .chatbot-submit {
          background: #21223a;
          color: white;
          border: none;
          border-radius: 8px;
          padding: 0 16px;
          cursor: pointer;
          display: flex;
          align-items: center;
        }
        
        .action-buttons {
          display: flex;
          gap: 8px;
          padding: 8px 16px;
          background: #f9fafb;
          border-top: 1px solid #e5e7eb;
        }
        
        .action-btn {
          background: white;
          border: 1px solid #e5e7eb;
          border-radius: 20px;
          padding: 6px 12px;
          font-size: 12px;
          display: flex;
          align-items: center;
          cursor: pointer;
          transition: all 0.2s;
        }
        
        .action-btn:hover {
          background: #21223a;
          color: white;
        }
        
        .action-btn i {
          margin-right: 4px;
          font-size: 12px;
        }
      </style>
      
      <div class="chatbot-header">
        <div class="chatbot-title">Android Test Assistant</div>
        <button class="chatbot-close" id="closeChatbot">
          <i data-feather="x"></i>
        </button>
      </div>
      
      <div class="chatbot-body" id="chatbotMessages">
        <div class="message bot-message">
          Welcome! How can I help you test your Android application today?
        </div>
      </div>
      
      <div class="action-buttons">
        <button class="action-btn" id="installBtn">
          <i data-feather="download"></i> Install
        </button>
        <button class="action-btn" id="testBtn">
          <i data-feather="activity"></i> Run Tests
        </button>
        <button class="action-btn" id="evidenceBtn">
          <i data-feather="image"></i> Evidence
        </button>
        <button class="action-btn" id="clearBtn">
          <i data-feather="trash-2"></i> Clear
        </button>
        <button class="action-btn" id="settingsBtn">
          <i data-feather="settings"></i> Settings
        </button>
      </div>
      
      <div class="chatbot-footer">
        <input type="text" class="chatbot-input" id="chatbotInput" placeholder="Type your command...">
        <button class="chatbot-submit" id="chatbotSubmit">
          <i data-feather="send"></i>
        </button>
      </div>
    `;

    // Initialize feather icons
    feather.replace();
    
    // Add event listeners
    this.shadowRoot.getElementById('chatbotSubmit').addEventListener('click', this.sendMessage.bind(this));
    this.shadowRoot.getElementById('chatbotInput').addEventListener('keypress', (e) => {
      if (e.key === 'Enter') this.sendMessage();
    });
    
    this.shadowRoot.getElementById('closeChatbot').addEventListener('click', () => {
      this.style.display = 'none';
    });
    
    // Action buttons
    this.shadowRoot.getElementById('installBtn').addEventListener('click', () => {
      this.addMessage('Installing application...', 'bot');
    });
    
    this.shadowRoot.getElementById('testBtn').addEventListener('click', () => {
      this.addMessage('Running automated tests...', 'bot');
    });
    
    this.shadowRoot.getElementById('evidenceBtn').addEventListener('click', () => {
      this.addMessage('Opening test evidence...', 'bot');
    });
    
    this.shadowRoot.getElementById('clearBtn').addEventListener('click', () => {
      this.shadowRoot.getElementById('chatbotMessages').innerHTML = '';
      this.addMessage('Chat cleared. How can I help?', 'bot');
    });
    
    this.shadowRoot.getElementById('settingsBtn').addEventListener('click', () => {
      this.addMessage('Opening settings panel...', 'bot');
    });
  }
  
  sendMessage() {
    const input = this.shadowRoot.getElementById('chatbotInput');
    const message = input.value.trim();
    if (message) {
      this.addMessage(message, 'user');
      input.value = '';
      
      // Simulate bot response
      setTimeout(() => {
        this.addMessage('I can help you with that. What exactly would you like to test?', 'bot');
      }, 1000);
    }
  }
  
  addMessage(text, sender) {
    const messagesDiv = this.shadowRoot.getElementById('chatbotMessages');
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${sender}-message`;
    messageDiv.textContent = text;
    messagesDiv.appendChild(messageDiv);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
    
    // Refresh feather icons
    feather.replace();
  }
}

customElements.define('custom-chatbot', ChatbotComponent);