Update templates/chat-bot.html

templates/chat-bot.html

@@ -1,201 +1,88 @@
-<script>
-document.addEventListener('DOMContentLoaded', () => {
-    // --- STATE MANAGEMENT (Sin cambios) ---
-    let sessionId = null;
-    let sessionAuth = { admin: null, report: null };
-
-    // --- ELEMENT SELECTORS (COMPLETO) ---
-    // Ahora incluimos TODOS los selectores de tu JS original
-    const ui = {
-        sendButton: document.getElementById('send-button'),
-        userInput: document.getElementById('user-input'),
-        chatMessages: document.getElementById('chat-messages'),
-        themeToggle: document.getElementById('theme-toggle'),
-        adminPanelButton: document.getElementById('admin-panel-button'),
-        adminModal: {
-            overlay: document.getElementById('admin-modal-overlay'),
-            closeBtn: document.getElementById('modal-close-btn'),
-            rebuildIndexBtn: document.getElementById('rebuild-index-button'),
-            clearHistoryBtn: document.getElementById('clear-history-button'),
-            downloadDbBtn: document.getElementById('download-db-button'),
-            downloadLogBtn: document.getElementById('download-log-button'),
-            refreshStatusBtn: document.getElementById('refresh-status-button'),
-            changeCredsBtn: document.getElementById('change-credentials-button'),
-            statusDisplay: document.getElementById('rag-status-display')
-        },
-        credsModal: {
-            overlay: document.getElementById('credentials-modal'),
-            title: document.getElementById('credentials-title'),
-            usernameInput: document.getElementById('username-input'),
-            passwordInput: document.getElementById('password-input'),
-            cancelBtn: document.getElementById('credentials-cancel-btn'),
-            submitBtn: document.getElementById('credentials-submit-btn')
-        }
-    };
-    autosize(ui.userInput);
-
-    // --- THEME MANAGEMENT (Sin cambios) ---
-    const applyTheme = (theme) => {
-        document.documentElement.setAttribute('data-theme', theme);
-        localStorage.setItem('chatTheme', theme);
-        // Pequeño ajuste para que funcione con la estructura del botón
-        const icon = ui.themeToggle.querySelector('i');
-        if(icon) {
-            icon.className = `fas ${theme === 'dark' ? 'fa-sun' : 'fa-moon'}`;
-        }
-    };
-    const toggleTheme = () => applyTheme(document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
-    
-    // --- MODAL MANAGEMENT (Sin cambios) ---
-    const toggleModal = (modalOverlay, show) => {
-        if (modalOverlay) {
-             modalOverlay.classList.toggle('visible', show);
-        }
-    };
-
-    // --- CHAT MESSAGING (Funcional) ---
-    const initializeChat = async () => {
-        applyTheme(localStorage.getItem('chatTheme') || 'light');
-        try {
-            // Descomenta estas líneas cuando tu backend esté listo
-            // const response = await axios.post('/create-session');
-            // sessionId = response.data.session_id;
-            ui.userInput.disabled = false;
-            ui.sendButton.disabled = false;
-        } catch (error) {
-            console.error('Error creating session:', error);
-            appendMessage({sender: 'bot', text: 'Problema al inicial la sesión. Por favor refresca la pagina.'});
-        }
-    };
-    
-    const appendMessage = ({ sender, text }) => {
-        const typingIndicator = document.getElementById('typing-indicator');
-        if (typingIndicator) typingIndicator.remove();
-        
-        const templateId = sender === 'bot' ? 'assistant-message-template' : 'user-message-template';
-        const template = document.getElementById(templateId);
-        if (!template) return; // Guarda de seguridad
-
-        const messageClone = template.content.cloneNode(true);
-        const messageTextElement = messageClone.querySelector('.message-text-placeholder');
-        if(messageTextElement) messageTextElement.textContent = text;
-        
-        ui.chatMessages.appendChild(messageClone);
-        ui.chatMessages.scrollTop = ui.chatMessages.scrollHeight;
-    };
-
-    const showTypingIndicator = () => {
-        if (document.getElementById('typing-indicator')) return;
-        const indicatorHTML = `
-            <div id="typing-indicator" class="flex items-start gap-3">
-                <div class="w-10 h-10 bg-blue-500 text-white rounded-full flex items-center justify-center flex-shrink-0"><i class="fas fa-tooth"></i></div>
-                <div class="bg-white p-4 rounded-xl rounded-tl-none shadow-sm"><div class="flex items-center space-x-1"><span class="h-2 w-2 bg-slate-300 rounded-full animate-bounce [animation-delay:-0.3s]"></span><span class="h-2 w-2 bg-slate-300 rounded-full animate-bounce [animation-delay:-0.15s]"></span><span class="h-2 w-2 bg-slate-300 rounded-full animate-bounce"></span></div></div>
-            </div>`;
-        ui.chatMessages.insertAdjacentHTML('beforeend', indicatorHTML);
-        ui.chatMessages.scrollTop = ui.chatMessages.scrollHeight;
-    };
-    
-    const sendMessage = async () => {
-        const message = ui.userInput.value.trim();
-        if (message === '') return;
-        
-        appendMessage({sender: 'user', text: message});
-        ui.userInput.value = '';
-        autosize.update(ui.userInput);
-        showTypingIndicator();
-        
-        try {
-            const response = await axios.post('/chat-bot', { query: message, session_id: sessionId });
-            const cleanResponse = response.data?.answer || 'Perdona, no puedo procesar eso.';
-            appendMessage({sender: 'bot', text: cleanResponse});
-        } catch (error) {
-            console.error('Error sending message:', error);
-            appendMessage({sender: 'bot', text: 'Ocurrió un error crítico. Por favor, revisa los logs del servidor.'});
-        }
-    };
+<!DOCTYPE html>
+<html lang="es" data-theme="light">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>EndoBot</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://kit.fontawesome.com/a2e0e6a680.js" crossorigin="anonymous"></script>
+  <style>
+    :root[data-theme='dark'] {
+      --tw-bg-opacity: 1;
+      background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
+      color: white;
+    }
+    .visible { display: flex !important; }
+  </style>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col items-center justify-center p-4 transition-colors">
 
-    // --- CREDENTIALS & ADMIN FUNCTIONS (Toda tu lógica original) ---
-    const getCredentials = (type) => {
-            return new Promise((resolve, reject) => {
-                if (sessionAuth[type]) {
-                    return resolve(sessionAuth[type]);
-                }
-                if (!ui.credsModal.overlay) {
-                    return reject(new Error('Modal de credenciales no encontrado'));
-                }
-                ui.credsModal.title.textContent = `${type.charAt(0).toUpperCase() + type.slice(1)} Authentication`;
-                ui.credsModal.usernameInput.value = '';
-                ui.credsModal.passwordInput.value = '';
-                toggleModal(ui.credsModal.overlay, true);
-                ui.credsModal.usernameInput.focus();
-                
-                const handleSubmit = () => {
-                    const username = ui.credsModal.usernameInput.value;
-                    const password = ui.credsModal.passwordInput.value;
-                    cleanup();
-                    if (username && password) {
-                        resolve({ username, password });
-                    } else {
-                        reject(new Error('Credentials not provided.'));
-                    }
-                };
-                
-                const handleCancel = () => {
-                    cleanup();
-                    reject(new Error('Authentication cancelled.'));
-                };
-                                
-                const cleanup = () => {
-                    ui.credsModal.submitBtn.removeEventListener('click', handleSubmit);
-                    ui.credsModal.cancelBtn.removeEventListener('click', handleCancel);
-                    toggleModal(ui.credsModal.overlay, false);
-                };
-                
-                ui.credsModal.submitBtn.addEventListener('click', handleSubmit);
-                ui.credsModal.cancelBtn.addEventListener('click', handleCancel);
-            });
-        };
-    // ... Aquí irían tus otras funciones de admin como forceRebuildIndex, downloadFile, etc...
+  <!-- Header -->
+  <div class="flex justify-between w-full max-w-2xl mb-4">
+    <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">💬 EndoBot</h1>
+    <button id="theme-toggle" class="text-xl"><i class="fas fa-moon text-gray-700 dark:text-yellow-300"></i></button>
+  </div>
 
-    // --- EVENT LISTENERS (AHORA COMPLETOS) ---
-    const chatForm = document.getElementById('chat-form');
-    if (chatForm) {
-        chatForm.addEventListener('submit', (e) => {
-            e.preventDefault();
-            sendMessage();
-        });
-    }
+  <!-- Chat Container -->
+  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow p-4 flex flex-col gap-3">
+    <div id="chat-messages" class="h-96 overflow-y-auto space-y-3 px-1 scroll-smooth">
+      <!-- Aquí se inyectan los mensajes -->
+    </div>
 
-    if(ui.userInput) {
-        ui.userInput.addEventListener('keypress', (e) => e.key === 'Enter' && !e.shiftKey && (e.preventDefault(), sendMessage()));
-    }
+    <!-- Input -->
+    <form id="chat-form" class="flex gap-2 mt-2">
+      <textarea id="user-input" class="flex-1 rounded-lg border px-3 py-2 resize-none dark:bg-gray-700 dark:text-white" rows="1" placeholder="Escribe tu pregunta..." disabled></textarea>
+      <button id="send-button" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition" disabled>Enviar</button>
+    </form>
+  </div>
 
-    // ¡AQUÍ ESTÁ LA MAGIA! Conectamos los botones.
-    if(ui.themeToggle) {
-        ui.themeToggle.addEventListener('click', toggleTheme);
-    }
+  <!-- Admin Button -->
+  <button id="admin-panel-button" class="mt-4 text-sm text-gray-500 hover:underline">Panel de administración</button>
 
-    if(ui.adminPanelButton) {
-        ui.adminPanelButton.addEventListener('click', () => toggleModal(ui.adminModal.overlay, true));
-    }
+  <!-- Modales (Admin y Credenciales) -->
+  <div id="admin-modal-overlay" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
+    <div class="bg-white dark:bg-gray-700 p-6 rounded-lg w-96 space-y-3 relative">
+      <button id="modal-close-btn" class="absolute top-2 right-3 text-gray-500"><i class="fas fa-times"></i></button>
+      <h2 class="text-lg font-bold text-gray-800 dark:text-white">Panel de administración</h2>
+      <button id="rebuild-index-button" class="w-full bg-indigo-600 text-white py-2 rounded">Reconstruir índice</button>
+      <button id="clear-history-button" class="w-full bg-red-500 text-white py-2 rounded">Borrar historial</button>
+      <button id="download-db-button" class="w-full bg-green-500 text-white py-2 rounded">Descargar DB</button>
+      <button id="download-log-button" class="w-full bg-yellow-500 text-white py-2 rounded">Descargar logs</button>
+      <button id="refresh-status-button" class="w-full bg-blue-500 text-white py-2 rounded">Estado del sistema</button>
+      <button id="change-credentials-button" class="w-full bg-gray-500 text-white py-2 rounded">Cambiar credenciales</button>
+      <div id="rag-status-display" class="mt-2 text-sm text-gray-700 dark:text-gray-300">...</div>
+    </div>
+  </div>
 
-    if(ui.adminModal.closeBtn) {
-        ui.adminModal.closeBtn.addEventListener('click', () => toggleModal(ui.adminModal.overlay, false));
-    }
+  <div id="credentials-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
+    <div class="bg-white dark:bg-gray-700 p-6 rounded-lg w-80 space-y-4">
+      <h2 id="credentials-title" class="text-lg font-bold text-gray-800 dark:text-white">Credenciales</h2>
+      <input id="username-input" type="text" class="w-full px-3 py-2 border rounded dark:bg-gray-600 dark:text-white" placeholder="Usuario">
+      <input id="password-input" type="password" class="w-full px-3 py-2 border rounded dark:bg-gray-600 dark:text-white" placeholder="Contraseña">
+      <div class="flex justify-end gap-2">
+        <button id="credentials-cancel-btn" class="px-4 py-2 text-gray-600">Cancelar</button>
+        <button id="credentials-submit-btn" class="bg-blue-600 text-white px-4 py-2 rounded">Aceptar</button>
+      </div>
+    </div>
+  </div>
 
-    if(ui.adminModal.overlay) {
-        ui.adminModal.overlay.addEventListener('click', (e) => {
-            if (e.target === ui.adminModal.overlay) {
-                toggleModal(ui.adminModal.overlay, false);
-            }
-        });
-    }
+  <!-- Templates para mensajes -->
+  <template id="user-message-template">
+    <div class="flex justify-end">
+      <div class="bg-blue-600 text-white p-3 rounded-xl max-w-xs w-fit message-text-placeholder"></div>
+    </div>
+  </template>
+  <template id="assistant-message-template">
+    <div class="flex justify-start">
+      <div class="bg-gray-200 dark:bg-gray-600 text-black dark:text-white p-3 rounded-xl max-w-xs w-fit message-text-placeholder"></div>
+    </div>
+  </template>
 
-    // ... Aquí irían el resto de tus listeners para los botones del modal de admin ...
-    // ui.adminModal.rebuildIndexBtn.addEventListener(...)
-    // etc.
-    
-    // --- STARTUP ---
-    initializeChat();
-});
-</script>
+  <!-- Tu JS original -->
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/autosize@5.0.1/dist/autosize.min.js"></script>
+  <script>
+    // Aquí va tu script JS completo (el que me pasaste)
+  </script>
+</body>
+</html>