Spaces:
Running
Running
File size: 22,487 Bytes
bb99454 a3f0dd4 bb99454 a3f0dd4 bb99454 a3f0dd4 bb99454 e5bda5f bb99454 a3f0dd4 bb99454 61c91b5 bb99454 61c91b5 e0ec352 440285d a3f0dd4 440285d bb99454 440285d bb99454 440285d bb99454 58d7eef bb99454 440285d bb99454 61c91b5 bb99454 0bb475f bb99454 0bb475f bb99454 0bb475f bb99454 0bb475f bb99454 0bb475f bb99454 0bb475f bb99454 61c91b5 bb99454 440285d a3f0dd4 440285d a3f0dd4 440285d 58d7eef a3f0dd4 440285d a3f0dd4 440285d a3f0dd4 440285d a3f0dd4 440285d a3f0dd4 440285d a3f0dd4 440285d a3f0dd4 440285d a3f0dd4 440285d a3f0dd4 440285d a3f0dd4 440285d 58d7eef bb99454 61c91b5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 |
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatbot - Mobile Test Pilot</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#21223a',
secondary: '#ff580f',
}
}
}
}
</script>
</head>
<body class="bg-primary min-h-screen text-white">
<custom-sidebar></custom-sidebar>
<main class="ml-64 p-8">
<div class="max-w-6xl mx-auto">
<div class="bg-primary rounded-2xl border border-gray-700 p-8 shadow-2xl">
<div class="flex items-center justify-between mb-8">
<div>
<h1 class="text-3xl font-bold mb-2">Chatbot de Testes</h1>
<p class="text-gray-300">Teste seu aplicativo Android ou iOS usando comandos em linguagem natural</p>
</div>
<div class="flex items-center gap-4">
<span id="platformBadge" class="bg-green-500 text-white px-3 py-1 rounded-full text-sm flex items-center gap-2">
<i data-feather="circle" class="w-3 h-3"></i>
Android Conectado
</span>
<button class="bg-secondary hover:bg-orange-600 text-white px-4 py-2 rounded-lg flex items-center gap-2">
<i data-feather="settings" class="w-4 h-4"></i>
Configurações
</button>
</div>
</div>
<div class="w-full flex gap-6">
<!-- Área do Chat -->
<div class="flex-1">
<div class="bg-gray-900 rounded-2xl p-6 h-[600px] w-full 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 Android/iOS</li>
<li>Navegar pela interface</li>
<li>Testar funcionalidades específicas</li>
<li>Capturar screenshots</li>
<li>Analisar performance</li>
<li>Testar compatibilidade entre plataformas</li>
</ul>
<span class="message-time">Agora</span>
</div>
</div>
</div>
<div class="flex gap-2">
<input
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 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>
<button onclick="document.getElementById('bddUpload').click()" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg flex items-center gap-2">
<i data-feather="upload" class="w-4 h-4"></i>
Importar BDD
</button>
<input type="file" id="bddUpload" class="hidden" accept=".txt" onchange="handleBddUpload(this.files)">
</div>
</div>
<!-- Painel de Ações Rápidas -->
<div class="w-20">
<div class="bg-gray-800 rounded-2xl p-4 border border-gray-700 h-[600px]">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2 justify-center">
</h3>
<div class="space-y-3">
<button class="w-full bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary p-3 rounded-lg flex items-center justify-center transition-all" title="Instalar App">
<i data-feather="download" class="w-5 h-5"></i>
</button>
<button class="w-full bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary p-3 rounded-lg flex items-center justify-center transition-all" title="Executar App">
<i data-feather="play" class="w-5 h-5"></i>
</button>
<button class="w-full bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary p-3 rounded-lg flex items-center justify-center transition-all" title="Capturar Tela">
<i data-feather="camera" class="w-5 h-5"></i>
</button>
<button class="w-full bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary p-3 rounded-lg flex items-center justify-center transition-all" title="Performance">
<i data-feather="bar-chart-2" class="w-5 h-5"></i>
</button>
<button class="w-full bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary p-3 rounded-lg flex items-center justify-center transition-all" title="Logs de Erro">
<i data-feather="alert-circle" class="w-5 h-5"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="components/sidebar.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
// Verificar parâmetros da URL para saber qual plataforma está sendo testada
const urlParams = new URLSearchParams(window.location.search);
const platform = urlParams.get('platform') || 'android';
// Atualizar badge da plataforma
document.getElementById('platformBadge').textContent = platform.charAt(0).toUpperCase() + platform.slice(1) + ' Conectado';
document.getElementById('platformBadge').className = platform === 'android' ?
'bg-green-500 text-white px-3 py-1 rounded-full text-sm flex items-center gap-2' :
'bg-blue-500 text-white px-3 py-1 rounded-full text-sm flex items-center gap-2';
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, platform);
}, 1000);
input.value = '';
}
}
function handleBddUpload(files) {
if (files.length === 0) return;
const file = files[0];
const reader = new FileReader();
reader.onload = function(e) {
const bddContent = e.target.result;
processBddFile(bddContent, platform);
};
reader.readAsText(file);
}
function processBddFile(content, platform) {
const chatContainer = document.getElementById('chatContainer');
// Adicionar mensagem de início do processamento
const processingMessage = document.createElement('div');
processingMessage.className = 'chat-message bot-message';
processingMessage.innerHTML = `
<div class="message-avatar">
<i data-feather="cpu" class="w-5 h-5"></i>
</div>
<div class="message-content">
<p>📁 <strong>BDD importado com sucesso!</strong> Iniciando execução automática dos cenários de teste...</p>
<span class="message-time">Agora</span>
</div>
`;
chatContainer.appendChild(processingMessage);
chatContainer.scrollTop = chatContainer.scrollHeight;
feather.replace();
// Processar linhas do BDD
const lines = content.split('\n').filter(line => line.trim());
let currentScenario = '';
let stepIndex = 0;
function executeNextStep() {
if (stepIndex >= lines.length) {
// Finalizar execução
const completionMessage = document.createElement('div');
completionMessage.className = 'chat-message bot-message';
completionMessage.innerHTML = `
<div class="message-avatar">
<i data-feather="cpu" class="w-5 h-5"></i>
</div>
<div class="message-content">
<p>✅ <strong>Execução do BDD concluída!</strong> Todos os cenários foram testados com sucesso.</p>
<span class="message-time">Agora</span>
</div>
`;
chatContainer.appendChild(completionMessage);
chatContainer.scrollTop = chatContainer.scrollHeight;
feather.replace();
return;
}
const line = lines[stepIndex].trim();
stepIndex++;
// Identificar tipo de linha
if (line.startsWith('Cenário:') || line.startsWith('Scenario:')) {
currentScenario = line;
const scenarioMessage = document.createElement('div');
scenarioMessage.className = 'chat-message bot-message';
scenarioMessage.innerHTML = `
<div class="message-avatar">
<i data-feather="cpu" class="w-5 h-5"></i>
</div>
<div class="message-content">
<p>📋 <strong>Iniciando cenário:</strong> ${line}</p>
<span class="message-time">Agora</span>
</div>
`;
chatContainer.appendChild(scenarioMessage);
chatContainer.scrollTop = chatContainer.scrollHeight;
feather.replace();
setTimeout(executeNextStep, 1500);
}
else if (line.startsWith('Dado') || line.startsWith('Given') ||
line.startsWith('Quando') || line.startsWith('When') ||
line.startsWith('Então') || line.startsWith('Then') ||
line.startsWith('E ') || line.startsWith('And ')) {
// Adicionar passo como mensagem do usuário (simulada)
const userMessageDiv = document.createElement('div');
userMessageDiv.className = 'chat-message user-message';
userMessageDiv.innerHTML = `
<div class="message-content">
<p>${line}</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(userMessageDiv);
chatContainer.scrollTop = chatContainer.scrollHeight;
feather.replace();
// Simular resposta do bot após 1 segundo
setTimeout(() => {
simulateBddStep(line, platform);
setTimeout(executeNextStep, 1000);
}, 1000);
}
else {
// Linha não reconhecida, pular
setTimeout(executeNextStep, 500);
}
}
// Iniciar execução
setTimeout(executeNextStep, 2000);
}
function simulateBddStep(step, platform) {
const chatContainer = document.getElementById('chatContainer');
const platformName = platform === 'android' ? 'Android' : 'iOS';
let response = '';
if (step.includes('instalar') || step.includes('install') ||
step.includes('aplicativo') || step.includes('app')) {
response = `📲 Instalando aplicativo no emulador ${platformName}... ✅ Aplicativo instalado com sucesso!`;
}
else if (step.includes('abrir') || step.includes('open') ||
step.includes('executar') || step.includes('run') ||
step.includes('iniciar') || step.includes('start')) {
response = `🚀 Executando aplicativo no ${platformName}... 📱 Aplicativo iniciado na tela principal.`;
}
else if (step.includes('navegar') || step.includes('navigate') ||
step.includes('clicar') || step.includes('click') ||
step.includes('selecionar') || step.includes('select')) {
response = `🔄 Navegando pela interface do ${platformName}... ✅ Navegação concluída com sucesso.`;
}
else if (step.includes('validar') || step.includes('validate') ||
step.includes('verificar') || step.includes('check')) {
response = `🔍 Validando funcionalidade no ${platformName}... ✅ Validação concluída - tudo OK!`;
}
else if (step.includes('tela') || step.includes('screen') ||
step.includes('capturar') || step.includes('capture')) {
response = `📸 Capturando screenshot da tela do ${platformName}... ✅ Screenshot salvo com sucesso!`;
}
else if (step.includes('dados') || step.includes('data') ||
step.includes('preencher') || step.includes('fill')) {
response = `📝 Preenchendo dados no ${platformName}... ✅ Dados inseridos corretamente.`;
}
else {
response = `✅ Executando passo no emulador ${platformName}... ✅ Ação concluída com sucesso.`;
}
const messageDiv = document.createElement('div');
messageDiv.className = 'chat-message bot-message';
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();
}
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, platform) {
const chatContainer = document.getElementById('chatContainer');
const messageDiv = document.createElement('div');
messageDiv.className = 'chat-message bot-message';
let response = '';
const platformName = platform === 'android' ? 'Android' : 'iOS';
if (userMessage.toLowerCase().includes('instalar') || userMessage.toLowerCase().includes('install')) {
response = `Instalando o aplicativo no emulador ${platformName}... ✅ Aplicativo instalado com sucesso!`;
} else if (userMessage.toLowerCase().includes('executar') || userMessage.toLowerCase().includes('abrir') || userMessage.toLowerCase().includes('run')) {
response = `Executando o aplicativo no ${platformName}... 🚀 Aplicativo iniciado na tela principal.`;
} else if (userMessage.toLowerCase().includes('tela') || userMessage.toLowerCase().includes('screen')) {
response = `Capturando screenshot da tela atual do ${platformName}... 📸 Screenshot salvo com sucesso!`;
} else if (userMessage.toLowerCase().includes('performance') || userMessage.toLowerCase().includes('desempenho')) {
response = `Analisando performance do aplicativo no ${platformName}... 📊 CPU: 15% | Memória: 128MB | FPS: 60`;
} else if (userMessage.toLowerCase().includes('navegar') || userMessage.toLowerCase().includes('navigate')) {
response = `Navegando pela interface do ${platformName}... 🔄 Navegação concluída com sucesso.`;
} else if (userMessage.toLowerCase().includes('compatibilidade') || userMessage.toLowerCase().includes('compatibility')) {
response = `Analisando compatibilidade entre Android e iOS... 🔍 Teste de compatibilidade em andamento.`;
} else {
response = `Comando recebido! Estou processando sua solicitação no emulador ${platformName}. ✅`;
}
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();
}
});
// Drag and drop para BDD
document.addEventListener('DOMContentLoaded', function() {
const chatArea = document.getElementById('chatContainer');
const bddInput = document.getElementById('bddUpload');
if (chatArea && bddInput) {
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
chatArea.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(eventName => {
chatArea.addEventListener(eventName, highlight, false);
});
['dragleave', 'drop'].forEach(eventName => {
chatArea.addEventListener(eventName, unhighlight, false);
});
function highlight() {
chatArea.style.border = '2px dashed #ff580f';
}
function unhighlight() {
chatArea.style.border = 'none';
}
chatArea.addEventListener('drop', handleDrop, false);
function handleDrop(e) {
const dt = e.dataTransfer;
const files = dt.files;
if (files.length > 0 && files[0].name.endsWith('.txt')) {
bddInput.files = files;
handleBddUpload(files);
}
}
}
});
</script>
</body>
</html> |