| 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> |
| `; |
|
|
| |
| feather.replace(); |
| |
| |
| 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'; |
| }); |
| |
| |
| 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 = ''; |
| |
| |
| 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; |
| |
| |
| feather.replace(); |
| } |
| } |
|
|
| customElements.define('custom-chatbot', ChatbotComponent); |
