Spaces:

ChatbotDental
/

EndoBot

Sleeping

App Files Files Community

SergioI1991 commited on Aug 5, 2025

Commit

9bbad38

verified ·

1 Parent(s): b5bef06

Update templates/chat-bot.html

Browse files

Files changed (1) hide show

templates/chat-bot.html +229 -77

templates/chat-bot.html CHANGED Viewed

@@ -1,88 +1,240 @@
 <!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">
-  <!-- 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>
-  <!-- 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>
-    <!-- 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>
-  <!-- Admin Button -->
-  <button id="admin-panel-button" class="mt-4 text-sm text-gray-500 hover:underline">Panel de administración</button>
-  <!-- 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>
-  <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>
-  <!-- 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>
-  <!-- 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>

 <!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 - Asistente Dental</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <style>
+        /* Estilos base para scrollbar y compatibilidad */
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+        body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
+        #chat-messages::-webkit-scrollbar { width: 8px; }
+        #chat-messages::-webkit-scrollbar-track { background: #f1f5f9; }
+        #chat-messages::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+        #chat-messages::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+        /* Variables para los modales y tema oscuro */
+        :root {
+            --bg-secondary: #ffffff;
+            --text-primary: #2c3e50;
+            --text-secondary: #6c757d;
+            --accent-color: #3498db;
+            --border-color: #dee2e6;
+        }
+        [data-theme="dark"] {
+            --bg-secondary: #2c2c2c;
+            --text-primary: #e0e0e0;
+            --text-secondary: #a0a0a0;
+            --accent-color: #87CEEB;
+            --border-color: #444;
+        }
+        .modal-overlay {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px);
+            display: flex; justify-content: center; align-items: center; z-index: 1000;
+            opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
+        }
+        .modal-overlay.visible { opacity: 1; visibility: visible; }
+        .modal-content {
+            background: var(--bg-secondary); padding: 2rem; border-radius: 16px;
+            width: 90%; max-width: 700px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            transform: scale(0.95); transition: transform 0.3s ease-out;
+            position: relative;
+        }
+        .modal-overlay.visible .modal-content { transform: scale(1); }
+        .modal-close-button {
+            position: absolute; top: 1rem; right: 1rem; background: none; border: none;
+            font-size: 1.5rem; color: var(--text-secondary); cursor: pointer;
+            width: 40px; height: 40px; border-radius: 50%;
+            display: flex; align-items: center; justify-content: center;
+            transition: background-color 0.2s, color 0.2s, transform 0.2s;
+        }
+        .modal-close-button:hover { background-color: #e5e7eb; transform: rotate(90deg); }
+        .admin-section { margin-bottom: 25px; }
+        .admin-buttons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
+        .form-group { margin-bottom: 15px; }
+        .form-group label { display: block; margin-bottom: 5px; font-weight: 500; }
+        .form-group input { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 6px; }
+        .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
+        .modal-button { padding: 10px 20px; border-radius: 6px; border: none; cursor: pointer; }
+    </style>
 </head>
+<body class="bg-slate-100">
+<template id="user-message-template">
+    <div class="message-wrapper flex items-start gap-3 justify-end">
+        <div class="bg-blue-500 text-white p-4 rounded-xl rounded-br-none shadow-md max-w-lg">
+            <p class="text-sm message-text-placeholder"></p>
+        </div>
+        <div class="w-10 h-10 bg-slate-300 text-slate-600 rounded-full flex items-center justify-center flex-shrink-0"><i class="fas fa-user"></i></div>
     </div>
+</template>
+<template id="assistant-message-template">
+     <div class="message-wrapper 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-md max-w-2xl border border-slate-200">
+            <p class="text-sm text-slate-700 message-text-placeholder"></p>
+        </div>
     </div>
+</template>
+<div class="relative w-full h-screen flex flex-col">
+    <header class="bg-blue-600 text-white shadow-md w-full flex-shrink-0 z-10 p-4 flex justify-between items-center">
+        <div class="flex items-center gap-3">
+            <i class="fas fa-tooth text-2xl"></i>
+            <h2 class="font-bold text-xl">EndoBot Asistente</h2>
+        </div>
+        <div class="flex items-center gap-2">
+            <button id="admin-panel-button" class="text-white hover:bg-blue-700 p-2 rounded-full transition-colors" title="Admin Panel"><i class="fas fa-shield-halved"></i></button>
+            <button id="theme-toggle" class="text-white hover:bg-blue-700 p-2 rounded-full transition-colors" title="Toggle Theme"><i class="fas fa-moon"></i></button>
+        </div>
+    </header>
+    <main class="w-full flex-1 flex flex-col overflow-hidden">
+        <div id="chat-messages" class="flex-1 p-6 overflow-y-auto space-y-6">
+            </div>
+        <div class="bg-white p-4 border-t border-slate-200 flex-shrink-0">
+            <form id="chat-form" class="flex items-center gap-3">
+                <textarea id="user-input" class="flex-1 bg-slate-100 rounded-lg p-3 border border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 transition" placeholder="Escribe tu consulta aquí..." rows="1" disabled></textarea>
+                <button type="submit" id="send-button" class="bg-blue-500 hover:bg-blue-600 text-white rounded-full w-12 h-12 flex items-center justify-center flex-shrink-0 transition-colors shadow-md hover:shadow-lg disabled:bg-slate-400" disabled><i class="fas fa-paper-plane"></i></button>
+            </form>
+        </div>
+    </main>
+</div>
+<div class="modal-overlay" id="admin-modal-overlay">
+    <div class="modal-content">
+        <button class="modal-close-button" id="modal-close-btn">&times;</button>
+        <h3><i class="fas fa-cogs"></i> System Control Panel</h3>
+        <div class="admin-section">
+            <div class="admin-buttons-grid">
+                <button class="admin-button" id="rebuild-index-button">Rebuild Index</button>
+                <button class="admin-button" id="clear-history-button">Clear Chat</button>
+                 </div>
+        </div>
     </div>
+</div>
+<div class="modal-overlay" id="credentials-modal">
+    <div class="modal-content" style="max-width: 400px;">
+        <h3 id="credentials-title">Authentication Required</h3>
+        <div class="form-group">
+            <label for="username-input">Username</label>
+            <input type="text" id="username-input">
+        </div>
+        <div class="form-group">
+            <label for="password-input">Password</label>
+            <input type="password" id="password-input">
+        </div>
+        <div class="modal-actions">
+            <button id="credentials-cancel-btn" class="modal-button secondary">Cancel</button>
+            <button id="credentials-submit-btn" class="modal-button primary">Submit</button>
+        </div>
     </div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+<script src="https://unpkg.com/autosize@4.0.2/dist/autosize.min.js"></script>
+<script>
+    // --- CÓDIGO A PRUEBA DE FALLOS ---
+    // 1. Encontrar los Elementos
+    console.log("Buscando elementos del DOM...");
+    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'),
+        chatForm: document.getElementById('chat-form'),
+        adminModal: {
+            overlay: document.getElementById('admin-modal-overlay'),
+            closeBtn: document.getElementById('modal-close-btn'),
+        }
+        // Añade aquí los demás selectores si es necesario
+    };
+    console.log("Botón de tema encontrado:", ui.themeToggle);
+    console.log("Botón de admin encontrado:", ui.adminPanelButton);
+    // 2. Lógica del Chat
+    const appendMessage = ({ sender, text }) => {
+        const templateId = sender === 'bot' ? 'assistant-message-template' : 'user-message-template';
+        const template = document.getElementById(templateId);
+        if (!template) return;
+        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 sendMessage = () => {
+        const message = ui.userInput.value.trim();
+        if (message === '') return;
+        appendMessage({ sender: 'user', text: message });
+        ui.userInput.value = '';
+        autosize.update(ui.userInput);
+        // Aquí iría tu llamada a axios a '/chat-bot'
+    };
+    // 3. Lógica del Tema
+    const applyTheme = (theme) => {
+        document.documentElement.setAttribute('data-theme', theme);
+        localStorage.setItem('chatTheme', theme);
+        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');
+    // 4. Lógica de los Modales
+    const toggleModal = (modalOverlay, show) => {
+        if (modalOverlay) modalOverlay.classList.toggle('visible', show);
+    };
+    // 5. Conectar los Eventos
+    if (ui.chatForm) {
+        ui.chatForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            sendMessage();
+        });
+    }
+    if (ui.themeToggle) {
+        ui.themeToggle.addEventListener('click', toggleTheme);
+    }
+    if (ui.adminPanelButton) {
+        ui.adminPanelButton.addEventListener('click', () => toggleModal(ui.adminModal.overlay, true));
+    }
+    if (ui.adminModal.closeBtn) {
+        ui.adminModal.closeBtn.addEventListener('click', () => toggleModal(ui.adminModal.overlay, false));
+    }
+    if (ui.adminModal.overlay) {
+        ui.adminModal.overlay.addEventListener('click', (e) => {
+            if (e.target === ui.adminModal.overlay) toggleModal(ui.adminModal.overlay, false);
+        });
+    }
+    // 6. Inicialización
+    function initializeApp() {
+        console.log("Inicializando la aplicación...");
+        autosize(ui.userInput);
+        applyTheme(localStorage.getItem('chatTheme') || 'light');
+        ui.userInput.disabled = false;
+        ui.sendButton.disabled = false;
+        appendMessage({ sender: 'bot', text: 'Hola! Soy tu asistente personal experto en endodoncia. ¿En qué te puedo ayudar hoy?' });
+    }
+    initializeApp();
+</script>
 </body>
+</html>