<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP - Análise de Dados Automotivos</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div class="container">
<header>
<h1>MCP - Análise de Dados Automotivos</h1>
<p>Converse com seus dados usando linguagem natural, com a ajuda do Google Gemini.</p>
</header>
<div class="chat-window" id="chat-window">
<!-- As mensagens aparecerão aqui -->
</div>
<div class="loader" id="loader">
<div class="dot-flashing"></div>
</div>
<form id="ask-form" class="input-area">
<input type="text" id="question-input" placeholder="Faça sua pergunta..." autocomplete="off">
<button type="submit" id="ask-button">Enviar</button>
</form>
</div>
<script>
const form = document.getElementById('ask-form');
const input = document.getElementById('question-input');
const button = document.getElementById('ask-button');
const chatWindow = document.getElementById('chat-window');
const loader = document.getElementById('loader');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const question = input.value.trim();
if (!question) return;
addMessage(question, 'user-message');
input.value = '';
button.disabled = true;
loader.style.display = 'block';
try {
const response = await fetch('/api/ask', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ question: question })
});
const data = await response.json();
if (data.success) {
addMessage(data.response, 'mcp-response', true);
} else {
addMessage(`Erro: ${data.error}`, 'mcp-response', true);
}
} catch (error) {
addMessage(`Erro de conexão: ${error.message}`, 'mcp-response', true);
} finally {
button.disabled = false;
loader.style.display = 'none';
}
});
function addMessage(content, className, isHtml = false) {
const messageDiv = document.createElement('div');
messageDiv.className = `message ${className}`;
if (isHtml) {
// Usamos <pre> para preservar a formatação do backend
const pre = document.createElement('pre');
pre.textContent = content;
messageDiv.appendChild(pre);
} else {
messageDiv.textContent = content;
}
chatWindow.appendChild(messageDiv);
chatWindow.scrollTop = chatWindow.scrollHeight; // Rola para a última mensagem
}
</script>
</body>
</html>
