Update app.py

app.py

@@ -1,424 +1,885 @@
-from flask import Flask, request, send_file, abort, jsonify, url_for, render_template, Response
-from flask_cors import CORS
-import pandas as pd
-from sentence_transformers import SentenceTransformer, util
-import torch
-from dataclasses import dataclass
-from typing import List, Dict, Tuple, Optional, Any, Iterator
-from collections import deque
-import os
-import logging
-import atexit
-from threading import Thread, Lock
-import time
-from datetime import datetime
-from uuid import uuid4 as generate_uuid
-import csv as csv_lib
-import functools
-import json
-import re
-import subprocess
-import sys
-import sqlite3
-import io
-from dotenv import load_dotenv
-
-# Cargar variables de entorno (API Keys, etc.)
-load_dotenv()
-
-# Importaciones de tus módulos de lógica de IA (deben estar en la misma carpeta)
-try:
-    from llm_handling import (
-        initialize_and_get_rag_system,
-        KnowledgeRAG,
-        groq_bot_instance,
-        RAG_SOURCES_DIR,
-        RAG_STORAGE_PARENT_DIR,
-        RAG_CHUNKED_SOURCES_FILENAME,
-        get_answer_from_context
-    )
-    from system_prompts import QA_FORMATTER_PROMPT
-except ImportError:
-    logging.error("No se pudieron importar los módulos llm_handling.py o system_prompts.py")
-
-# Configuración de Logs
-logging.basicConfig(
-    level=logging.INFO,
-    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',
-    handlers=[
-        logging.FileHandler("app_hybrid_rag.log"),
-        logging.StreamHandler()
-    ]
-)
-logger = logging.getLogger(__name__)
-
-# --- Configuración de la Aplicación ---
-ADMIN_USERNAME = os.getenv('FLASK_ADMIN_USERNAME', 'admin')
-ADMIN_PASSWORD = os.getenv('FLASK_ADMIN_PASSWORD', 'admin')
-FLASK_APP_HOST = os.getenv("FLASK_HOST", "0.0.0.0")
-FLASK_APP_PORT = int(os.getenv("FLASK_PORT", "7860"))
-FLASK_DEBUG_MODE = os.getenv("FLASK_DEBUG", "True").lower() == "true"
-_APP_BASE_DIR = os.path.dirname(os.path.abspath(__file__))
-TEXT_EXTRACTIONS_DIR = os.path.join(_APP_BASE_DIR, 'text_extractions')
-
-RELATED_QUESTIONS_TO_SHOW = 10
-QUESTIONS_TO_SEND_TO_GROQ_QA = 3
-LLM_FORMATTER_CONFIDENCE_THRESHOLD = int(os.getenv("LLM_FORMATTER_CONFIDENCE_THRESHOLD", "95"))
-HIGH_CONFIDENCE_THRESHOLD = 90
-CHAT_HISTORY_TO_SEND = int(os.getenv("CHAT_HISTORY_TO_SEND", "5"))
-
-rag_system: Optional[Any] = None
-
-# --- Utilidad de Limpieza de Texto (Evita exceso de asteriscos) ---
-def sanitize_llm_output(text: str) -> str:
-    """
-    Limpia el texto para que el renderizado de Markdown sea profesional.
-    Evita artefactos como triples asteriscos o espacios excesivos,
-    pero preserva el formato de tablas de Markdown.
-    """
-    if not text or not isinstance(text, str):
-        return text
-    
-    # 1. Corregir errores de formato (Ej: '***' -> '**')
-    text = text.replace('***', '**')
-    
-    # 2. Asegurar que las listas tengan espacio (Ej: '*item' -> '* item')
-    text = re.sub(r'(^|\n)\s*\*\s*(\w)', r'\1* \2', text)
-    
-    # 3. Eliminar saltos de línea excesivos (más de 2)
-    text = re.sub(r'\n{3,}', '\n\n', text)
-    
-    # 4. Eliminar espacios múltiples SOLO si no parecen ser parte de una tabla
-    # Las tablas de Markdown suelen usar '|' y '-'
-    lines = text.split('\n')
-    sanitized_lines = []
-    for line in lines:
-        if '|' in line or (line.strip().startswith('|-') or line.strip().startswith('-|')):
-            # Es una línea de tabla, preservamos espacios
-            sanitized_lines.append(line)
-        else:
-            # No es tabla, podemos normalizar espacios
-            sanitized_lines.append(re.sub(r' +', ' ', line))
-    
-    return "\n".join(sanitized_lines).strip()
-
-# --- Gestión de Historial con SQLite ---
-class ChatHistoryManager:
-    def __init__(self, db_path):
-        self.db_path = db_path
-        self.lock = Lock()
-        self._create_table()
-        logger.info(f"SQLite chat history manager initialized at: {self.db_path}")
-
-    def _get_connection(self):
-        return sqlite3.connect(self.db_path, timeout=10)
-
-    def _create_table(self):
-        with self.lock:
-            with self._get_connection() as conn:
-                cursor = conn.cursor()
-                cursor.execute("""
-                    CREATE TABLE IF NOT EXISTS chat_histories (
-                        session_id TEXT PRIMARY KEY,
-                        history TEXT NOT NULL
-                    )
-                """)
-                conn.commit()
-
-    def get_history(self, session_id: str, limit_turns: int = 5) -> list:
-        try:
-            with self._get_connection() as conn:
-                cursor = conn.cursor()
-                cursor.execute("SELECT history FROM chat_histories WHERE session_id = ?", (session_id,))
-                row = cursor.fetchone()
-                if row:
-                    history_list = json.loads(row[0])
-                    return history_list[-(limit_turns * 2):]
-                return []
-        except Exception as e:
-            logger.error(f"Error fetching history para {session_id}: {e}")
-            return []
-
-    def update_history(self, session_id: str, query: str, answer: str):
-        with self.lock:
-            try:
-                with self._get_connection() as conn:
-                    cursor = conn.cursor()
-                    cursor.execute("SELECT history FROM chat_histories WHERE session_id = ?", (session_id,))
-                    row = cursor.fetchone()
-                    
-                    history = json.loads(row[0]) if row else []
-                    history.append({'role': 'user', 'content': query})
-                    history.append({'role': 'assistant', 'content': answer})
-                    
-                    updated_history_json = json.dumps(history)
-                    cursor.execute("""
-                        INSERT OR REPLACE INTO chat_histories (session_id, history)
-                        VALUES (?, ?)
-                    """, (session_id, updated_history_json))
-                    conn.commit()
-            except Exception as e:
-                logger.error(f"Error updating history para {session_id}: {e}")
-
-    def clear_history(self, session_id: str):
-        with self.lock:
-            try:
-                with self._get_connection() as conn:
-                    cursor = conn.cursor()
-                    cursor.execute("""
-                        INSERT OR REPLACE INTO chat_histories (session_id, history)
-                        VALUES (?, ?)
-                    """, (session_id, json.dumps([])))
-                    conn.commit()
-            except Exception as e:
-                 logger.error(f"Error clearing history para {session_id}: {e}")
-
-# --- EmbeddingManager para QA en CSV ---
-@dataclass
-class QAEmbeddings:
-    questions: List[str]
-    question_map: List[int]
-    embeddings: torch.Tensor
-    df_qa: pd.DataFrame
-    original_questions: List[str]
-
-class EmbeddingManager:
-    def __init__(self, model_name='all-MiniLM-L6-v2'):
-        self.model = SentenceTransformer(model_name)
-        self.embeddings = {'general': None, 'personal': None, 'greetings': None}
-        logger.info(f"EmbeddingManager initialized with model: {model_name}")
-
-    def _process_questions(self, df: pd.DataFrame) -> Tuple[List[str], List[int], List[str]]:
-        questions, question_map, original_questions = [], [], []
-        if 'Question' not in df.columns:
-            return questions, question_map, original_questions
-            
-        for idx, question_text_raw in enumerate(df['Question']):
-            if pd.isna(question_text_raw): continue
-            question_text_cleaned = str(question_text_raw).strip()
-            if not question_text_cleaned or question_text_cleaned.lower() == "nan": continue
-            questions.append(question_text_cleaned)
-            question_map.append(idx)
-            original_questions.append(question_text_cleaned)
-            
-        return questions, question_map, original_questions
-
-    def update_embeddings(self, general_qa: pd.DataFrame, personal_qa: pd.DataFrame, greetings_qa: pd.DataFrame):
-        for name, df in [('general', general_qa), ('personal', personal_qa), ('greetings', greetings_qa)]:
-            qs, qmap, orig = self._process_questions(df)
-            embs = self.model.encode(qs, convert_to_tensor=True, show_progress_bar=False) if qs else None
-            self.embeddings[name] = QAEmbeddings(qs, qmap, embs, df, orig)
-        logger.info("CSV QA embeddings updated.")
-
-    def find_best_answers(self, user_query: str, qa_type: str, top_n: int = 5):
-        qa_data = self.embeddings.get(qa_type)
-        if not qa_data or qa_data.embeddings is None or len(qa_data.embeddings) == 0:
-            return [], [], [], [], []
-            
-        query_embedding_tensor = self.model.encode([user_query], convert_to_tensor=True, show_progress_bar=False)
-        cos_scores = util.cos_sim(query_embedding_tensor, qa_data.embeddings)[0]
-        top_k = min(top_n, len(cos_scores))
-        
-        if top_k == 0: return [], [], [], [], []
-        
-        top_scores_tensor, indices_tensor = torch.topk(cos_scores, k=top_k)
-        top_confidences = [score.item() * 100 for score in top_scores_tensor]
-        
-        top_indices_mapped, top_questions, top_answers, top_images = [], [], [], []
-        answer_col = 'Respuesta' if 'Respuesta' in qa_data.df_qa.columns else 'Answer'
-        
-        for score_idx, idx_tensor in enumerate(indices_tensor):
-            item_idx = idx_tensor.item()
-            original_df_idx = qa_data.question_map[item_idx]
-            
-            top_indices_mapped.append(original_df_idx)
-            top_questions.append(qa_data.original_questions[item_idx])
-            top_answers.append(str(qa_data.df_qa[answer_col].iloc[original_df_idx]))
-            
-            img = qa_data.df_qa['Image'].iloc[original_df_idx] if 'Image' in qa_data.df_qa.columns else None
-            top_images.append(str(img) if pd.notna(img) else None)
-            
-        return top_confidences, top_questions, top_answers, top_images, top_indices_mapped
-
-# --- Inicialización de Flask ---
-app = Flask(__name__)
-CORS(app, resources={r"/*": {"origins": "*"}}, supports_credentials=True)
-
-embedding_manager = EmbeddingManager()
-history_manager = ChatHistoryManager(os.path.join(_APP_BASE_DIR, 'chat_history.db'))
-
-def clean_html_from_text(text: str) -> str:
-    if not isinstance(text, str): return text
-    return re.sub(r'<[^>]+>', '', text).strip()
-
-def replace_placeholders_in_answer(answer, db_data=None):
-    if pd.isna(answer) or str(answer).strip() == '':
-        return "Sorry, this information is not available yet"
-    answer_str = str(answer)
-    placeholders = re.findall(r'\{(\w+)\}', answer_str)
-    if not placeholders: return answer_str
-    
-    # Lógica simplificada de reemplazo para evitar errores si db_data es None
-    for placeholder in set(placeholders):
-        key = placeholder.strip()
-        val = db_data.get(key) if db_data else "no disponible"
-        answer_str = answer_str.replace(f'{{{key}}}', str(val))
-    return answer_str
-
-# --- Lógica Principal del Chatbot ---
-def get_hybrid_response_logic_non_streaming(user_query: str, session_id: str, user_id: Optional[str], chat_history=None) -> Dict[str, Any]:
-    global rag_system
-    
-    if not user_query: return {'error': 'No query provided'}
-    if not session_id: return {'error': 'session_id is required'}
-
-    # 1. Búsqueda en Saludos
-    conf_greet, q_greet, a_greet, img_greet, idx_greet = embedding_manager.find_best_answers(user_query, 'greetings', top_n=1)
-    if conf_greet and conf_greet[0] >= HIGH_CONFIDENCE_THRESHOLD:
-        ans = sanitize_llm_output(a_greet[0])
-        history_manager.update_history(session_id, user_query, ans)
-        return {'query': user_query, 'answer': ans, 'confidence': conf_greet[0], 'source': 'greetings'}
-
-    # 2. Búsqueda en CSV/Excel (Personal y General)
-    conf_pers, q_pers, a_pers, img_pers, idx_pers = embedding_manager.find_best_answers(user_query, 'personal', top_n=1)
-    conf_gen, q_gen, a_gen, img_gen, idx_gen = embedding_manager.find_best_answers(user_query, 'general', top_n=1)
-    
-    candidates = []
-    if conf_pers: candidates.append({'ans': a_pers[0], 'conf': conf_pers[0], 'type': 'personal', 'idx': idx_pers[0], 'q': q_pers[0]})
-    if conf_gen: candidates.append({'ans': a_gen[0], 'conf': conf_gen[0], 'type': 'general', 'idx': idx_gen[0], 'q': q_gen[0]})
-    
-    if candidates:
-        best_candidate = max(candidates, key=lambda x: x['conf'])
-        if best_candidate['conf'] >= LLM_FORMATTER_CONFIDENCE_THRESHOLD:
-            # Formatear la respuesta usando el LLM a partir del contexto del Excel
-            source_type = best_candidate['type']
-            original_df = embedding_manager.embeddings[source_type].df_qa
-            matched_row_data = original_df.iloc[best_candidate['idx']]
-            
-            context_dict = matched_row_data.drop('Question', errors='ignore').to_dict()
-            context_str = "\n".join([f"'{k}': '{v}'" for k, v in context_dict.items() if pd.notna(v) and str(v).strip() != ''])
-            
-            try:
-                final_answer = get_answer_from_context(question=user_query, context=context_str, system_prompt=QA_FORMATTER_PROMPT)
-                # Aplicamos el filtro de limpieza para quitar los asteriscos feos
-                final_answer = sanitize_llm_output(final_answer)
-            except Exception as e:
-                logger.error(f"Error formating with LLM: {e}")
-                final_answer = sanitize_llm_output(best_candidate['ans'])
-                
-            history_manager.update_history(session_id, user_query, final_answer)
-            return {'query': user_query, 'answer': final_answer, 'confidence': best_candidate['conf'], 'source': f'{source_type}_qa_formatted'}
-
-    # 3. Búsqueda RAG (FAISS)
-    if rag_system and hasattr(rag_system, 'retriever') and rag_system.retriever:
-        logger.info(f"Attempting FAISS RAG query for: {user_query[:50]}...")
-        rag_result = rag_system.invoke(user_query)
-        rag_answer = rag_result.get("answer")
-        
-        if rag_answer and "does not contain specific information" not in rag_answer.lower() and "no contiene" not in rag_answer.lower():
-            rag_answer = sanitize_llm_output(rag_answer)
-            history_manager.update_history(session_id, user_query, rag_answer)
-            return {'query': user_query, 'answer': rag_answer, 'confidence': 85, 'source': 'document_rag_faiss'}
-
-    # 4. Fallback Groq (Memoria general)
-    logger.info(f"No high-confidence answer. Using Groq fallback.")
-    chat_hist = chat_history if chat_history is not None else history_manager.get_history(session_id)
-    
-    try:
-        groq_stream = groq_bot_instance.stream_response({'current_query': user_query, 'chat_history': chat_hist, 'qa_related_info': ""})
-        groq_answer = "".join([chunk for chunk in groq_stream])
-        groq_answer = sanitize_llm_output(groq_answer)
-    except Exception as e:
-        logger.error(f"Groq fallback failed: {e}")
-        groq_answer = "Lo siento, estoy teniendo problemas de conexión. Por favor intenta de nuevo más tarde."
-
-    history_manager.update_history(session_id, user_query, groq_answer)
-    return {'query': user_query, 'answer': groq_answer, 'confidence': 75, 'source': 'groq_general_fallback'}
-
-
-# --- Endpoints de la API ---
-@app.route('/')
-def index_route():
-    return render_template('chat-bot.html')
-
-@app.route('/create-session', methods=['POST', 'GET'])
-def create_session_route():
-    try:
-        session_id = str(generate_uuid())
-        logger.info(f"New session created: {session_id}")
-        return jsonify({'status': 'success', 'session_id': session_id}), 200
-    except Exception as e:
-        logger.error(f"Session creation error: {e}", exc_info=True)
-        return jsonify({'status': 'error', 'message': str(e)}), 500
-
-@app.route('/version', methods=['GET'])
-def get_version_route():
-    return jsonify({'version': '3.9.9-Clean-Output'}), 200
-
-@app.route('/chat-bot', methods=['POST'])
-def get_answer_hybrid():
-    data = request.json
-    user_query = clean_html_from_text(data.get('query', ''))
-    user_id = data.get('user_id')
-    session_id = data.get('session_id')
-    
-    if not user_query or not session_id:
-        return jsonify({'error': 'query and session_id are required'}), 400
-        
-    response_data = get_hybrid_response_logic_non_streaming(user_query, session_id, user_id, None)
-    return jsonify(response_data)
-
-@app.route('/clear-history', methods=['POST'])
-def clear_session_history_route():
-    data = request.json
-    session_id = data.get('session_id')
-    if not session_id: 
-         return jsonify({'status': 'error', 'message': 'session_id is required'}), 400
-    history_manager.clear_history(session_id)
-    return jsonify({'status': 'success', 'message': f'History cleared for session {session_id}'})
-
-
-# --- Startup ---
-def load_qa_data_on_startup():
-    global embedding_manager
-    logger.info("Cargando archivos CSV de origen...")
-    try:
-        # Aseguramos de que RAG_SOURCES_DIR exista o usamos una carpeta temporal
-        sources_dir = globals().get('RAG_SOURCES_DIR', os.path.join(_APP_BASE_DIR, 'sources'))
-        general_qa_df = pd.DataFrame(columns=['Question', 'Answer', 'Image'])
-        personal_qa_df = pd.DataFrame(columns=['Question', 'Answer', 'Image'])
-        greetings_qa_df = pd.DataFrame(columns=['Question', 'Answer', 'Image'])
-        
-        gen_path = os.path.join(sources_dir, 'general_qa.csv')
-        pers_path = os.path.join(sources_dir, 'personal_qa.csv')
-        greet_path = os.path.join(sources_dir, 'greetings.csv')
-
-        if os.path.exists(gen_path): general_qa_df = pd.read_csv(gen_path, encoding='cp1252')
-        if os.path.exists(pers_path): personal_qa_df = pd.read_csv(pers_path, encoding='cp1252')
-        if os.path.exists(greet_path): greetings_qa_df = pd.read_csv(greet_path, encoding='cp1252')
-
-        # Estandarizamos los nombres de columnas
-        for df in [general_qa_df, personal_qa_df, greetings_qa_df]:
-            if 'Pregunta' in df.columns and 'Question' not in df.columns:
-                df['Question'] = df['Pregunta']
-
-        embedding_manager.update_embeddings(general_qa_df, personal_qa_df, greetings_qa_df)
-        logger.info("Bases de datos cargadas y vectorizadas correctamente.")
-    except Exception as e:
-        logger.error(f"Error cargando bases de datos CSV: {e}", exc_info=True)
-
-
-if __name__ == '__main__':
-    # Crear carpetas necesarias
-    for folder_path in [os.path.join(_APP_BASE_DIR, 'templates'), os.path.join(_APP_BASE_DIR, 'static')]:
-        os.makedirs(folder_path, exist_ok=True)
-        
-    load_qa_data_on_startup()
-    
-    try:
-        rag_system = initialize_and_get_rag_system()
-        logger.info("RAG system initialized.")
-    except Exception as e:
-        logger.warning(f"RAG system no pudo inicializarse: {e}")
-
-    app.run(host=FLASK_APP_HOST, port=FLASK_APP_PORT, debug=FLASK_DEBUG_MODE, use_reloader=False)
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FarmaBot - Endocaser | Bilingual Dental Pharmacology Assistant</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* Estilos para tablas Markdown */
+        .message-content table {
+            border-collapse: collapse;
+            width: 100%;
+            margin: 12px 0;
+            font-size: 13px;
+            background: #fff;
+            border-radius: 8px;
+            overflow-x: auto;
+            border: 1px solid var(--border);
+            display: table;
+        }
+        .message-content table tbody, .message-content table thead {
+            display: table-row-group;
+            width: 100%;
+        }
+        .message-content th, .message-content td {
+            padding: 10px 12px;
+            text-align: left;
+            border: 1px solid var(--border);
+            word-break: break-word;
+        }
+        .message-content th {
+            background-color: var(--primary-surface);
+            color: var(--primary-dark);
+            font-weight: 600;
+            white-space: normal;
+        }
+        .message-content tr:nth-child(even) {
+            background-color: #f9fafb;
+        }
+        /* Modo tarjetas para móvil */
+        @media (max-width: 480px) {
+            .message-content table {
+                display: block;
+                border: none;
+                margin: 8px 0;
+            }
+            .message-content table thead {
+                display: none;
+            }
+            .message-content table tbody {
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+            }
+            .message-content table tr {
+                display: flex;
+                flex-direction: column;
+                border: 1px solid var(--border);
+                border-radius: 8px;
+                padding: 12px;
+                background: #fff;
+                margin-bottom: 0;
+            }
+            .message-content table tr:nth-child(even) {
+                background-color: #fff;
+            }
+            .message-content table td {
+                display: flex;
+                justify-content: space-between;
+                align-items: flex-start;
+                border: none;
+                padding: 8px 0;
+                border-bottom: 1px solid var(--border);
+            }
+            .message-content table td:last-child {
+                border-bottom: none;
+            }
+            .message-content table td::before {
+                content: attr(data-label);
+                font-weight: 600;
+                color: var(--primary-dark);
+                margin-right: 12px;
+                flex-shrink: 0;
+            }
+        }
+        .message-content ul, .message-content ol {
+            padding-left: 20px;
+            margin: 8px 0;
+        }
+        .message-content li {
+            margin-bottom: 4px;
+        }
+        .message-content strong {
+            color: var(--primary-dark);
+        }
+        .message-content p {
+            margin: 0 0 8px 0;
+            word-wrap: break-word;
+            overflow-wrap: break-word;
+        }
+        :root {
+            --primary: #4574E8;
+            --primary-light: #6B93F2;
+            --primary-dark: #2B4FAD;
+            --primary-surface: #EEF2FD;
+            --bg: #F7F8FC;
+            --surface: #FFFFFF;
+            --text-primary: #1A1D26;
+            --text-secondary: #6B7280;
+            --border: #E5E7EB;
+            --hint: #9CA3AF;
+            --success: #10B981;
+            --error: #EF4444;
+            --bot-bg: #F3F4F6;
+            --user-bg: #EEF2FD;
+            --sidebar-bg: #1A2332;
+        }
+
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            background: var(--bg);
+            color: var(--text-primary);
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        .chat-container {
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* Header */
+        .chat-header {
+            background: linear-gradient(135deg, var(--primary), var(--primary-light));
+            color: #fff;
+            padding: 16px 24px;
+            display: flex;
+            align-items: center;
+            gap: 14px;
+            flex-shrink: 0;
+            box-shadow: 0 4px 20px rgba(69, 116, 232, 0.25);
+        }
+
+        .header-logo {
+            width: 40px;
+            height: 40px;
+            background: rgba(255,255,255,0.2);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+        }
+
+        .header-info { flex: 1; }
+        .header-info h2 {
+            font-size: 18px;
+            font-weight: 700;
+            letter-spacing: -0.3px;
+        }
+        .header-info span {
+            font-size: 12px;
+            opacity: 0.75;
+            font-weight: 400;
+        }
+
+        .header-buttons { display: flex; gap: 8px; }
+        .icon-btn {
+            background: rgba(255,255,255,0.15);
+            border: none;
+            color: #fff;
+            width: 36px;
+            height: 36px;
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .icon-btn:hover { background: rgba(255,255,255,0.25); transform: translateY(-1px); }
+
+        /* Messages */
+        .chat-messages {
+            flex: 1;
+            padding: 24px;
+            overflow-y: auto;
+            background: var(--bg);
+        }
+
+        .message {
+            margin-bottom: 16px;
+            display: flex;
+            max-width: 85%;
+            animation: fadeIn 0.3s ease;
+            word-wrap: break-word;
+            overflow-wrap: break-word;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(8px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .message.user { margin-left: auto; }
+        .message.bot { margin-right: auto; }
+
+        .bot-avatar {
+            width: 32px;
+            height: 32px;
+            background: var(--primary);
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+            font-size: 14px;
+            margin-right: 10px;
+            flex-shrink: 0;
+            margin-top: 2px;
+        }
+
+        .message-content {
+            padding: 12px 16px;
+            border-radius: 16px;
+            line-height: 1.6;
+            font-size: 14px;
+            min-width: 0;
+            word-wrap: break-word;
+            overflow-wrap: break-word;
+        }
+
+        .message.user .message-content {
+            background: var(--primary);
+            color: #fff;
+            border-bottom-right-radius: 4px;
+            box-shadow: 0 2px 8px rgba(69, 116, 232, 0.2);
+            word-wrap: break-word;
+            overflow-wrap: break-word;
+        }
+
+        .message.bot .message-content {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-bottom-left-radius: 4px;
+            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
+            word-wrap: break-word;
+            overflow-wrap: break-word;
+        }
+
+        .message-content p { margin: 0; }
+        .message-content p + p { margin-top: 8px; }
+
+        /* Typing indicator */
+        .typing-indicator {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            padding: 4px 0;
+        }
+        .typing-indicator span {
+            width: 7px;
+            height: 7px;
+            background: var(--primary);
+            border-radius: 50%;
+            animation: bounce 1.3s linear infinite;
+        }
+        @keyframes bounce {
+            0%, 60%, 100% { transform: translateY(0); }
+            30% { transform: translateY(-6px); }
+        }
+
+        /* Welcome message */
+        .welcome-card {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            padding: 24px;
+            text-align: center;
+            max-width: 400px;
+            margin: 40px auto;
+            box-shadow: 0 2px 12px rgba(0,0,0,0.04);
+        }
+        .welcome-card .icon {
+            width: 56px;
+            height: 56px;
+            background: var(--primary-surface);
+            border-radius: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 16px;
+            font-size: 24px;
+            color: var(--primary);
+        }
+        .welcome-card h3 {
+            font-size: 18px;
+            font-weight: 700;
+            margin-bottom: 6px;
+            color: var(--text-primary);
+        }
+        .welcome-card p {
+            font-size: 13px;
+            color: var(--text-secondary);
+            line-height: 1.5;
+        }
+        .language-selector {
+            display: flex;
+            gap: 8px;
+            justify-content: center;
+            margin-top: 16px;
+        }
+        .lang-btn {
+            padding: 8px 16px;
+            border: 1px solid var(--primary);
+            background: transparent;
+            color: var(--primary);
+            border-radius: 20px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 12px;
+            transition: all 0.2s;
+        }
+        .lang-btn.active {
+            background: var(--primary);
+            color: #fff;
+        }
+        .lang-btn:hover {
+            background: var(--primary);
+            color: #fff;
+        }
+        .quick-actions {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            justify-content: center;
+            margin-top: 16px;
+        }
+        .quick-action {
+            background: var(--primary-surface);
+            color: var(--primary);
+            border: 1px solid rgba(69, 116, 232, 0.15);
+            padding: 8px 14px;
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .quick-action:hover {
+            background: var(--primary);
+            color: #fff;
+            transform: translateY(-1px);
+        }
+
+        /* Input area */
+        .chat-input {
+            padding: 16px 24px;
+            background: var(--surface);
+            border-top: 1px solid var(--border);
+            display: flex;
+            align-items: flex-end;
+            gap: 10px;
+            flex-shrink: 0;
+        }
+
+        .chat-input textarea {
+            flex: 1;
+            padding: 12px 16px;
+            border: 1px solid var(--border);
+            border-radius: 24px;
+            resize: none;
+            font-size: 14px;
+            font-family: 'Inter', sans-serif;
+            background: var(--bg);
+            color: var(--text-primary);
+            transition: border-color 0.2s;
+            max-height: 120px;
+            min-width: 0;
+        }
+
+        /* Media queries para responsividad */
+        @media (max-width: 768px) {
+            .chat-header {
+                padding: 12px 16px;
+            }
+            .header-info h2 {
+                font-size: 16px;
+            }
+            .header-info span {
+                font-size: 11px;
+            }
+            .chat-messages {
+                padding: 16px;
+            }
+            .message {
+                max-width: 90%;
+                margin-bottom: 12px;
+            }
+            .message-content {
+                padding: 10px 14px;
+                font-size: 13px;
+            }
+            .message-content th, .message-content td {
+                padding: 8px 10px;
+                font-size: 12px;
+            }
+            .chat-input {
+                padding: 12px 16px;
+                gap: 8px;
+            }
+            .chat-input textarea {
+                padding: 10px 14px;
+                font-size: 13px;
+            }
+            .send-btn {
+                width: 40px;
+                height: 40px;
+                font-size: 14px;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .chat-header {
+                padding: 10px 12px;
+            }
+            .header-logo {
+                width: 32px;
+                height: 32px;
+                font-size: 16px;
+            }
+            .header-info h2 {
+                font-size: 14px;
+            }
+            .header-info span {
+                font-size: 10px;
+            }
+            .chat-messages {
+                padding: 12px;
+            }
+            .message {
+                max-width: 95%;
+                margin-bottom: 10px;
+            }
+            .bot-avatar {
+                width: 28px;
+                height: 28px;
+                font-size: 12px;
+                margin-right: 8px;
+            }
+            .message-content {
+                padding: 8px 12px;
+                font-size: 12px;
+                border-radius: 12px;
+            }
+            .message-content ul, .message-content ol {
+                padding-left: 16px;
+                margin: 6px 0;
+            }
+            .chat-input {
+                padding: 10px 12px;
+                gap: 6px;
+            }
+            .chat-input textarea {
+                padding: 8px 12px;
+                font-size: 12px;
+                border-radius: 20px;
+            }
+            .send-btn {
+                width: 36px;
+                height: 36px;
+                font-size: 12px;
+                border-radius: 10px;
+            }
+            .welcome-card {
+                max-width: 90%;
+                padding: 16px;
+                margin: 20px auto;
+            }
+            .welcome-card .icon {
+                width: 48px;
+                height: 48px;
+                font-size: 20px;
+            }
+            .welcome-card h3 {
+                font-size: 16px;
+            }
+            .welcome-card p {
+                font-size: 12px;
+            }
+            .quick-action {
+                padding: 6px 12px;
+                font-size: 11px;
+            }
+        }
+        .chat-input textarea:focus {
+            border-color: var(--primary);
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(69, 116, 232, 0.1);
+        }
+        .chat-input textarea::placeholder { color: var(--hint); }
+
+        .send-btn {
+            background: var(--primary);
+            color: #fff;
+            border: none;
+            width: 44px;
+            height: 44px;
+            border-radius: 14px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 2px 8px rgba(69, 116, 232, 0.3);
+        }
+        .send-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
+        .send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+
+        /* Modal */
+        .modal-overlay {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
+            display: flex; justify-content: center; align-items: center;
+            z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s;
+        }
+        .modal-overlay.visible { opacity: 1; visibility: visible; }
+
+        .modal-content {
+            background: var(--surface);
+            padding: 28px;
+            border-radius: 20px;
+            width: 90%; max-width: 600px; max-height: 85vh; overflow-y: auto;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.15);
+            transform: scale(0.95); transition: transform 0.3s;
+        }
+        .modal-overlay.visible .modal-content { transform: scale(1); }
+
+        .modal-content h3 {
+            margin-bottom: 20px;
+            font-size: 18px;
+            font-weight: 700;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .modal-content h3 i { color: var(--primary); }
+
+        .modal-close {
+            position: absolute; top: 16px; right: 16px;
+            background: var(--bg); border: none; width: 32px; height: 32px;
+            border-radius: 8px; font-size: 16px; color: var(--text-secondary);
+            cursor: pointer; display: flex; align-items: center; justify-content: center;
+        }
+        .modal-close:hover { background: var(--border); }
+
+        .admin-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+
+        .admin-btn {
+            background: var(--bg);
+            border: 1px solid var(--border);
+            color: var(--text-primary);
+            padding: 14px;
+            border-radius: 12px;
+            cursor: pointer;
+            font-size: 13px;
+            font-weight: 500;
+            font-family: 'Inter', sans-serif;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            transition: all 0.2s;
+        }
+        .admin-btn:hover {
+            background: var(--primary);
+            color: #fff;
+            border-color: var(--primary);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(69, 116, 232, 0.25);
+        }
+        .admin-btn i { font-size: 16px; width: 20px; text-align: center; }
+
+        .status-box {
+            background: var(--bg);
+            padding: 14px;
+            border-radius: 10px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 12px;
+            white-space: pre-wrap;
+            border: 1px solid var(--border);
+            color: var(--text-secondary);
+        }
+
+        .form-group { margin-bottom: 14px; }
+        .form-group label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 13px; }
+        .form-group input {
+            width: 100%; padding: 10px 14px;
+            border: 1px solid var(--border); border-radius: 10px;
+            background: var(--bg); color: var(--text-primary);
+            font-family: 'Inter', sans-serif; font-size: 14px;
+        }
+        .form-group input:focus { border-color: var(--primary); outline: none; }
+
+        .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
+        .btn {
+            padding: 10px 20px; border-radius: 10px; border: none;
+            cursor: pointer; font-weight: 600; font-size: 13px;
+            font-family: 'Inter', sans-serif; transition: all 0.2s;
+        }
+        .btn-primary { background: var(--primary); color: #fff; }
+        .btn-primary:hover { background: var(--primary-dark); }
+        .btn-secondary { background: var(--bg); color: var(--text-primary); border: 1px solid var(--border); }
+
+        /* Scrollbar */
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+        ::-webkit-scrollbar-thumb:hover { background: var(--hint); }
+
+        /* Responsive */
+        @media (max-width: 600px) {
+            .chat-header { padding: 12px 16px; }
+            .chat-messages { padding: 16px; }
+            .chat-input { padding: 12px 16px; }
+            .message { max-width: 90%; }
+            .welcome-card { margin: 20px 16px; }
+        }
+    </style>
+</head>
+<body>
+
+<div class="chat-container">
+    <div class="chat-header">
+        <div class="header-logo"><i class="fas fa-pills"></i></div>
+        <div class="header-info">
+            <h2>FarmaBot</h2>
+            <span id="header-subtitle">Asistente de farmacología dental - Endocaser</span>
+        </div>
+        <div class="header-buttons">
+        </div>
+    </div>
+
+    <div class="chat-messages" id="chat-messages">
+        <div class="welcome-card">
+            <div class="icon"><i class="fas fa-capsules"></i></div>
+            <h3>FarmaBot</h3>
+            <p id="welcome-text">Tu asistente de farmacología dental. Consulta interacciones, dosis, protocolos de medicación y más.</p>
+            <div class="language-selector">
+                <button class="lang-btn active" id="lang-es" onclick="setLanguage('es')">Español</button>
+                <button class="lang-btn" id="lang-en" onclick="setLanguage('en')">English</button>
+            </div>
+            <div class="quick-actions" id="quick-actions-container">
+                <button class="quick-action" onclick="sendQuickAction(this)">Interacciones medicamentosas</button>
+                <button class="quick-action" onclick="sendQuickAction(this)">Dosis de amoxicilina</button>
+                <button class="quick-action" onclick="sendQuickAction(this)">Analgesia post-endo</button>
+                <button class="quick-action" onclick="sendQuickAction(this)">Paciente alérgico a penicilina</button>
+            </div>
+        </div>
+    </div>
+
+    <div class="chat-input">
+        <textarea id="user-input" placeholder="Escribe tu consulta farmacológica... / Write your pharmacological query..." rows="1" disabled></textarea>
+        <button id="send-button" class="send-btn" disabled><i class="fas fa-paper-plane"></i></button>
+    </div>
+</div>
+
+
+
+<div class="modal-overlay" id="credentials-modal">
+    <div class="modal-content" style="max-width: 380px; position: relative;">
+        <h3 id="credentials-title"><i class="fas fa-lock"></i> Autenticación</h3>
+        <div class="form-group">
+            <label for="username-input">Usuario</label>
+            <input type="text" id="username-input" autocomplete="username">
+        </div>
+        <div class="form-group">
+            <label for="password-input">Contraseña</label>
+            <input type="password" id="password-input" autocomplete="current-password">
+        </div>
+        <div class="modal-actions">
+            <button id="credentials-cancel-btn" class="btn btn-secondary">Cancelar</button>
+            <button id="credentials-submit-btn" class="btn btn-primary">Acceder</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 src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script>
+    // Configurar marked para saltos de línea automáticos
+    marked.setOptions({
+        breaks: true,
+        gfm: true
+    });
+
+    // Traducciónes para soporte bilingüe
+    const translations = {
+        es: {
+            welcomeText: 'Tu asistente de farmacología dental. Consulta interacciones, dosis, protocolos de medicación y más.',
+            quickActions: [
+                'Interacciones medicamentosas',
+                'Dosis de amoxicilina',
+                'Analgesia post-endo',
+                'Paciente alérgico a penicilina'
+            ],
+            headerSubtitle: 'Asistente de farmacología dental - Endocaser',
+            placeholder: 'Escribe tu consulta farmacológica...'
+        },
+        en: {
+            welcomeText: 'Your dental pharmacology assistant. Consult drug interactions, dosages, medication protocols and more.',
+            quickActions: [
+                'Drug interactions',
+                'Amoxicillin dosage',
+                'Post-endo analgesia',
+                'Penicillin-allergic patient'
+            ],
+            headerSubtitle: 'Dental Pharmacology Assistant - Endocaser',
+            placeholder: 'Write your pharmacological query...'
+        }
+    };
+
+    let currentLanguage = 'es';
+
+    function setLanguage(lang) {
+        currentLanguage = lang;
+        const t = translations[lang];
+
+        // Actualizar UI
+        document.getElementById('welcome-text').textContent = t.welcomeText;
+        document.getElementById('header-subtitle').textContent = t.headerSubtitle;
+        document.getElementById('user-input').placeholder = t.placeholder;
+
+        // Actualizar botones de acción rápida
+        const quickActionButtons = document.querySelectorAll('#quick-actions-container .quick-action');
+        quickActionButtons.forEach((btn, index) => {
+            if (index < t.quickActions.length) {
+                btn.textContent = t.quickActions[index];
+            }
+        });
+
+        // Actualizar botones de idioma
+        document.getElementById('lang-es').classList.toggle('active', lang === 'es');
+        document.getElementById('lang-en').classList.toggle('active', lang === 'en');
+    }
+
+    function sendQuickAction(btn) {
+        const input = document.getElementById('user-input');
+        input.value = btn.textContent;
+        document.getElementById('send-button').click();
+    }
+
+    document.addEventListener('DOMContentLoaded', () => {
+        let sessionId = null;
+        let sessionAuth = { admin: null, report: null };
+
+        const ui = {
+            sendButton: document.getElementById('send-button'),
+            userInput: document.getElementById('user-input'),
+            chatMessages: document.getElementById('chat-messages'),
+            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);
+
+        const toggleModal = (modal, show) => modal.classList.toggle('visible', show);
+
+        const initializeChat = async () => {
+            try {
+                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: 'Error al iniciar la sesión. Recarga la página.'});
+            }
+        };
+
+        const appendMessage = ({ sender, text, isHtml = false }) => {
+            // Remove welcome card on first message
+            const welcome = ui.chatMessages.querySelector('.welcome-card');
+            if (welcome) welcome.remove();
+
+            const typing = ui.chatMessages.querySelector('.typing-indicator-wrapper');
+            if (typing) typing.remove();
+
+            const el = document.createElement('div');
+            el.className = `message ${sender}`;
+
+            let content = '';
+            if (isHtml) {
+                content = text;
+            } else if (sender === 'bot') {
+                // Renderizar Markdown para el bot
+                content = marked.parse(text);
+            } else {
+                // Escapar HTML para el usuario y envolver en párrafo
+                content = `<p>${text.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</p>`;
+            }
+
+            if (sender === 'bot') {
+                el.innerHTML = `<div class="bot-avatar"><i class="fas fa-pills"></i></div><div class="message-content">${content}</div>`;
+            } else {
+                el.innerHTML = `<div class="message-content">${content}</div>`;
+            }
+
+            ui.chatMessages.appendChild(el);
+            ui.chatMessages.scrollTop = ui.chatMessages.scrollHeight;
+        };
+
+        const showTypingIndicator = () => {
+            if (ui.chatMessages.querySelector('.typing-indicator-wrapper')) return;
+            const el = document.createElement('div');
+            el.className = 'message bot typing-indicator-wrapper';
+            el.innerHTML = `<div class="bot-avatar"><i class="fas fa-pills"></i></div><div class="message-content"><div class="typing-indicator"><span></span><span style="animation-delay:0.2s"></span><span style="animation-delay:0.4s"></span></div></div>`;
+            ui.chatMessages.appendChild(el);
+            ui.chatMessages.scrollTop = ui.chatMessages.scrollHeight;
+        };
+
+        const sendMessage = async () => {
+            if (!sessionId) return;
+            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 raw = response.data?.answer || 'Lo siento, no pude procesar la consulta.';
+                const clean = raw.replace(/<think>[\s\S]*?<\/think>/, '').trim();
+                appendMessage({sender: 'bot', text: clean || 'Respuesta vacía.'});
+            } catch (error) {
+                appendMessage({sender: 'bot', text: 'Error al procesar. Revisa los logs del servidor.'});
+            }
+        };
+
+        const getCredentials = (type) => {
+            return new Promise((resolve, reject) => {
+                if (sessionAuth[type]) return resolve(sessionAuth[type]);
+                ui.credsModal.usernameInput.value = '';
+                ui.credsModal.passwordInput.value = '';
+                toggleModal(ui.credsModal.overlay, true);
+                ui.credsModal.usernameInput.focus();
+                const submit = () => { cleanup(); const u = ui.credsModal.usernameInput.value, p = ui.credsModal.passwordInput.value; u && p ? resolve({username:u,password:p}) : reject(new Error('No credentials')); };
+                const cancel = () => { cleanup(); reject(new Error('Cancelled')); };
+                const cleanup = () => { ui.credsModal.submitBtn.removeEventListener('click', submit); ui.credsModal.cancelBtn.removeEventListener('click', cancel); toggleModal(ui.credsModal.overlay, false); };
+                ui.credsModal.submitBtn.addEventListener('click', submit);
+                ui.credsModal.cancelBtn.addEventListener('click', cancel);
+            });
+        };
+
+
+
+        // Events
+        ui.sendButton.addEventListener('click', sendMessage);
+        ui.userInput.addEventListener('keypress', e => e.key==='Enter' && !e.shiftKey && (e.preventDefault(), sendMessage()));
+
+        initializeChat();
+    });
+</script>
+</body>
+</html>