# 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
```bash
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:
    ```bash
    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:
    ```env
    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:
    ```bash
    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:
    ```env
    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:
    ```bash
    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).

---