127 lines
7.3 KiB
Markdown
127 lines
7.3 KiB
Markdown
# 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).
|
|
|
|
--- |