Chatbot El Día 🤖

Chatbot El Día es un asistente conversacional inteligente diseñado para integrarse en el sitio web del periódico eldia.com. Su objetivo es proporcionar a los usuarios respuestas rápidas y contextualizadas, mejorando la experiencia de usuario y la accesibilidad a la información.

El sistema se compone de tres partes principales:

1. Un backend RESTful API desarrollado en ASP.NET Core, que contiene toda la lógica de IA.
2. Un frontend para el widget del chat construido con React, TypeScript y Vite.
3. Un frontend para el panel de administración también con React, TypeScript y Vite, para gestionar el conocimiento del bot.

Todo el sistema está diseñado para ser desplegado como un conjunto de microservicios utilizando Docker y Docker Compose.

---

🧠 Funcionalidades Principales

El chatbot está construido sobre una arquitectura de "Router de IA" que le permite entender la intención del usuario y utilizar la herramienta adecuada para cada pregunta.

🤖 Arquitectura de IA Conversacional

• Router de Intenciones: Cada pregunta del usuario pasa primero por un "Router de IA" que, basándose en la conversación actual, determina la intención del usuario (Artículo, Base de Conocimiento o Noticias de Portada). Esto permite al bot decidir si debe continuar una conversación, buscar en su conocimiento interno o buscar noticias de última hora.
• Memoria Conversacional (Resumen Dinámico): Para seguir el hilo de la conversación y entender preguntas de seguimiento (ej: "¿y con Google?"), el sistema utiliza a la IA para generar y mantener un resumen conciso de la conversación. Este resumen se envía en cada petición, dándole al bot una "memoria" a corto plazo eficiente y a bajo coste.
• Base de Conocimiento Unificada: El conocimiento del bot se obtiene de múltiples fuentes y se unifica en un solo contexto para la IA:
  • Contexto de Base de Datos (ContextoItems): Información estática y clave-valor (ej: teléfonos, direcciones) gestionada desde el panel de admin.
  • Fuentes de Contexto Dinámicas (FuentesDeContexto): Permite a los administradores añadir cualquier URL (ej: la página de FAQs o de precios de suscripción) como una fuente de conocimiento. El bot scrapea estas páginas en tiempo real para obtener respuestas.
• Contexto Espacio-Temporal: El bot está "consciente" de su ubicación (La Plata, Argentina) y de la fecha y hora actuales, lo que le permite entender preguntas como "¿qué pasó hoy?" o "¿dónde es el evento?".
• Búsqueda y Síntesis en Noticias: Cuando se pregunta por una noticia de portada, el bot utiliza un proceso de dos pasos: 1) Una IA de búsqueda encuentra el artículo más relevante. 2) Una IA de síntesis lee el artículo y genera un resumen conciso y útil, invitando al usuario a continuar la conversación.

⚙️ Panel de Administración

• Autenticación Segura con JWT: Acceso protegido para la gestión del conocimiento del bot.
• Gestor de Contexto: Un CRUD completo para la información estática del bot (tabla ContextoItems).
• Gestor de Fuentes: 🚀 Potente interfaz para añadir, editar y eliminar fuentes de conocimiento dinámicas (URLs). Permite especificar un selector CSS/XPath para un scraping más preciso.
• Visor de Logs de Conversación: Una tabla que muestra las últimas 200 interacciones de los usuarios con el bot, ordenadas por fecha, para análisis y mejora continua.

💬 Interfaz de Usuario (Widget)

• Interfaz Moderna y Fluida: Construida con Vite, React y TypeScript.
• Streaming de Respuestas: El texto del bot aparece progresivamente, simulando una experiencia de escritura en tiempo real.
• Indicador de "Escribiendo...": Una animación de puntos sutil que proporciona feedback visual mientras el bot procesa la respuesta.
• Indicador de Contexto de Artículo: Cuando la conversación se centra en una noticia, una barra informativa muestra el título del artículo, que además es un hipervínculo a la nota original.
• Persistencia Completa: El historial de mensajes, el resumen de la conversación y el contexto del artículo activo se guardan en localStorage, por lo que la conversación sobrevive a recargas del navegador.
• Renderizado de Markdown: Las respuestas del bot que contienen enlaces son renderizadas como hipervínculos clickeables.

---

🛠️ Stack Tecnológico

Backend (ChatbotApi/)

• Framework: ASP.NET Core 10
• Lenguaje: C#
• Acceso a Datos: Entity Framework Core
• Base de Datos: Microsoft SQL Server
• Autenticación: JWT Bearer Token
• Web Scraping: HtmlAgilityPack
• Modelo de IA: Google Gemini

Frontend (Widget y Admin)

• Framework/Librería: React 19
• Lenguaje: TypeScript
• Componentes UI (Admin): Material-UI
• Comunicación API: Axios
• Build Tool: Vite

Despliegue y Orquestación

• Contenerización: Docker
• Orquestación: Docker Compose
• Proxy Inverso y Servidor Estático: Nginx

---

🚀 Puesta en Marcha (Getting Started)

Siga estos pasos para configurar y ejecutar el proyecto en un entorno de desarrollo o producción.

Prerrequisitos

• .NET SDK 8.0 o superior.
• Node.js v24.x (LTS) o superior.
• Microsoft SQL Server (2019 o superior).
• Docker y Docker Compose (para despliegue en producción).

1. Clonar el Repositorio

git clone https://repo.eldiaservicios.com/dmolinari/Chatbot-ElDia.git
cd Chatbot-ElDia

2. Configuración de la Base de Datos

1. Cree una nueva base de datos en su instancia de SQL Server (ej: ChatbotDB).
2. Navegue a la carpeta del backend: cd ChatbotApi.
3. Modifique la ConnectionString en el archivo appsettings.Development.json para que apunte a su base de datos.
4. Ejecute las migraciones de Entity Framework para crear todas las tablas:

   dotnet ef database update
   

3. Configuración del Backend (Desarrollo Local)

1. En la carpeta ChatbotApi/, cree un archivo .env.
2. Añada sus secretos y configuraciones:

   Gemini__GeminiApiKey="SU_API_KEY_DE_GEMINI"
   ConnectionStrings__DefaultConnection="Server=...;Database=...;User Id=...;Password=...;TrustServerCertificate=True"
   Jwt__Key="SU_CLAVE_SECRETA_LARGA_Y_COMPLEJA"
   Jwt__Issuer="ChatbotApi"
   Jwt__Audience="ChatbotAdmin"
   

3. Ejecute el backend:

   dotnet run
   

   La API estará disponible en la URL que indique la consola (ej: http://localhost:5126).

4. Configuración de los Frontends (Desarrollo Local)

El proceso es el mismo para chatbot-widget y chatbot-admin.

1. Navegue a la carpeta del frontend (ej: cd ../chatbot-widget).
2. Instale las dependencias: npm install.
3. Cree un archivo .env.local con la URL de su API local:

   VITE_API_BASE_URL=http://localhost:5126
   

4. Ejecute el frontend: npm run dev.

5. Despliegue con Docker (Producción)

1. Copie toda la carpeta del proyecto a su servidor Docker.
2. En la raíz del proyecto, cree el archivo .env con las configuraciones de producción (ver docker-compose.yml para las variables requeridas).
3. Ejecute Docker Compose:

   docker compose up -d --build
   

   Los servicios estarán disponibles en los puertos configurados en el proxy (por defecto, 8081 para el widget y 8082 para el admin).

---