simule o chatbot e adicione os ícones no sidebar

chatbot.html

@@ -47,10 +47,32 @@
                 <div class="grid lg:grid-cols-4 gap-8">
                     <!-- Área do Chat -->
                     <div class="lg:col-span-3">
-                        <div class="bg-gray-900 rounded-2xl p-6 h-96 overflow-y-auto mb-4">
-                            <div class="text-center text-gray-400 py-8">
-                                <i data-feather="message-square" class="w-12 h-12 mx-auto mb-4"></i>
-                                <p>Chat iniciado. Digite comandos em linguagem natural para testar seu aplicativo.</p>
+                        <div class="bg-gray-900 rounded-2xl p-6 h-96 overflow-y-auto mb-4" id="chatContainer">
+                            <div class="chat-message bot-message">
+                                <div class="message-avatar">
+                                    <i data-feather="cpu" class="w-5 h-5"></i>
+                                </div>
+                                <div class="message-content">
+                                    <p>Olá! Sou seu assistente de testes Android. Como posso ajudar você hoje?</p>
+                                    <span class="message-time">Agora</span>
+                                </div>
+                            </div>
+                            
+                            <div class="chat-message bot-message">
+                                <div class="message-avatar">
+                                    <i data-feather="cpu" class="w-5 h-5"></i>
+                                </div>
+                                <div class="message-content">
+                                    <p>Você pode me pedir para:</p>
+                                    <ul class="list-disc list-inside ml-4 text-sm text-gray-300 mt-2">
+                                        <li>Instalar e executar aplicativos</li>
+                                        <li>Navegar pela interface</li>
+                                        <li>Testar funcionalidades específicas</li>
+                                        <li>Capturar screenshots</li>
+                                        <li>Analisar performance</li>
+                                    </ul>
+                                    <span class="message-time">Agora</span>
+                                </div>
                             </div>
                         </div>
                         
@@ -59,13 +81,14 @@
                                 type="text" 
                                 placeholder="Digite seu comando..." 
                                 class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:border-secondary focus:ring-2 focus:ring-secondary focus:ring-opacity-50"
+                                id="chatInput"
                             >
-                            <button class="bg-secondary hover:bg-orange-600 text-white px-6 py-3 rounded-lg flex items-center gap-2">
+                            <button onclick="sendMessage()" class="bg-secondary hover:bg-orange-600 text-white px-6 py-3 rounded-lg flex items-center gap-2">
                                 <i data-feather="send" class="w-4 h-4"></i>
                                 Enviar
                             </button>
                         </div>
-                    </div>
+</div>
 
                     <!-- Painel de Ações Rápidas -->
                     <div class="lg:col-span-1">
@@ -107,11 +130,88 @@
             </div>
         </div>
     </main>
-
     <script src="components/sidebar.js"></script>
     <script src="script.js"></script>
     <script>
         feather.replace();
+        
+        function sendMessage() {
+            const input = document.getElementById('chatInput');
+            const message = input.value.trim();
+            
+            if (message) {
+                // Adicionar mensagem do usuário
+                addUserMessage(message);
+                
+                // Simular resposta do bot após 1 segundo
+                setTimeout(() => {
+                    simulateBotResponse(message);
+                }, 1000);
+                
+                input.value = '';
+            }
+        }
+        
+        function addUserMessage(message) {
+            const chatContainer = document.getElementById('chatContainer');
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'chat-message user-message';
+            messageDiv.innerHTML = `
+                <div class="message-content">
+                    <p>${message}</p>
+                    <span class="message-time">Agora</span>
+                </div>
+                <div class="message-avatar">
+                    <i data-feather="user" class="w-5 h-5"></i>
+                </div>
+            `;
+            chatContainer.appendChild(messageDiv);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+            feather.replace();
+        }
+        
+        function simulateBotResponse(userMessage) {
+            const chatContainer = document.getElementById('chatContainer');
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'chat-message bot-message';
+            
+            let response = '';
+            
+            if (userMessage.toLowerCase().includes('instalar') || userMessage.toLowerCase().includes('install')) {
+                response = 'Instalando o aplicativo no emulador... ✅ Aplicativo instalado com sucesso!';
+            } else if (userMessage.toLowerCase().includes('executar') || userMessage.toLowerCase().includes('abrir') || userMessage.toLowerCase().includes('run')) {
+                response = 'Executando o aplicativo... 🚀 Aplicativo iniciado na tela principal.';
+            } else if (userMessage.toLowerCase().includes('tela') || userMessage.toLowerCase().includes('screen')) {
+                response = 'Capturando screenshot da tela atual... 📸 Screenshot salvo com sucesso!';
+            } else if (userMessage.toLowerCase().includes('performance') || userMessage.toLowerCase().includes('desempenho')) {
+                response = 'Analisando performance do aplicativo... 📊 CPU: 15% | Memória: 128MB | FPS: 60';
+            } else if (userMessage.toLowerCase().includes('navegar') || userMessage.toLowerCase().includes('navigate')) {
+                response = 'Navegando para a próxima tela... 🔄 Navegação concluída com sucesso.';
+            } else {
+                response = 'Comando recebido! Estou processando sua solicitação no emulador Android. ✅';
+            }
+            
+            messageDiv.innerHTML = `
+                <div class="message-avatar">
+                    <i data-feather="cpu" class="w-5 h-5"></i>
+                </div>
+                <div class="message-content">
+                    <p>${response}</p>
+                    <span class="message-time">Agora</span>
+                </div>
+            `;
+            
+            chatContainer.appendChild(messageDiv);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+            feather.replace();
+        }
+        
+        // Permitir enviar com Enter
+        document.getElementById('chatInput').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        });
     </script>
 </body>
 </html>

components/sidebar.js

@@ -159,24 +159,34 @@ class CustomSidebar extends HTMLElement {
           </a>
           
           <a href="#" class="nav-item">
-            <i data-feather="play"></i>
+            <i data-feather="activity"></i>
             <span>Testes Ativos</span>
           </a>
           
           <a href="#" class="nav-item">
-            <i data-feather="archive"></i>
+            <i data-feather="clock"></i>
             <span>Histórico</span>
           </a>
           
           <a href="#" class="nav-item">
-            <i data-feather="bar-chart-2"></i>
+            <i data-feather="pie-chart"></i>
             <span>Relatórios</span>
           </a>
           
           <a href="#" class="nav-item">
-            <i data-feather="settings"></i>
+            <i data-feather="sliders"></i>
             <span>Configurações</span>
           </a>
+          
+          <a href="#" class="nav-item">
+            <i data-feather="help-circle"></i>
+            <span>Ajuda</span>
+          </a>
+          
+          <a href="#" class="nav-item">
+            <i data-feather="book"></i>
+            <span>Documentação</span>
+          </a>
         </nav>
 <div class="sidebar-footer">
           <div class="user-profile">

style.css

@@ -1,3 +1,4 @@
+
 /* Shared styles across all pages */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
@@ -56,10 +57,87 @@ body {
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 
+/* Estilos do Chatbot */
+.chat-message {
+    display: flex;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+    animation: fadeIn 0.3s ease-out;
+}
+
+.chat-message.user-message {
+    justify-content: flex-end;
+}
+
+.chat-message.bot-message {
+    justify-content: flex-start;
+}
+
+.message-avatar {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.user-message .message-avatar {
+    background: linear-gradient(135deg, #ff580f 0%, #ff8c66 100%);
+    order: 2;
+}
+
+.bot-message .message-avatar {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    order: 1;
+}
+
+.message-content {
+    background: #2d3748;
+    padding: 0.75rem 1rem;
+    border-radius: 1rem;
+    max-width: 70%;
+    position: relative;
+}
+
+.user-message .message-content {
+    background: linear-gradient(135deg, #ff580f 0%, #ff8c66 100%);
+    order: 1;
+    border-bottom-right-radius: 0.25rem;
+}
+
+.bot-message .message-content {
+    background: #2d3748;
+    order: 2;
+    border-bottom-left-radius: 0.25rem;
+}
+
+.message-content p {
+    margin: 0;
+    line-height: 1.5;
+}
+
+.message-time {
+    display: block;
+    font-size: 0.75rem;
+    color: #a0aec0;
+    margin-top: 0.25rem;
+    text-align: right;
+}
+
+.bot-message .message-time {
+    text-align: left;
+}
+
 /* Responsividade */
 @media (max-width: 768px) {
     main {
         margin-left: 0 !important;
         padding: 1rem !important;
     }
-}
+    
+    .message-content {
+        max-width: 85%;
+    }
+}