# 💬 WebChat Widget - Widget de Chat Embebible con RAG y OpenAI
Widget de chat completo y embebible que se integra en cualquier sitio web con una sola línea de código. Incluye captura de leads conversacional, integración con OpenAI GPT-4o-mini y sistema RAG (Retrieval Augmented Generation) para respuestas basadas en documentos.
## 🚀 Características
- ✅ **Interfaz Natural y Humana**: Botón flotante moderno, animaciones suaves, mensajes con avatares
- ✅ **Captura Conversacional de Datos**: Recolecta nombre, edad, correo y teléfono sin formularios
- ✅ **Integración OpenAI**: Usa GPT-4o-mini para respuestas inteligentes y contextuales
- ✅ **Sistema RAG**: Busca en documentos locales antes de consultar OpenAI
- ✅ **Backend Node.js/Express**: API completa con rate limiting y seguridad
- ✅ **Responsive**: Funciona perfectamente en móviles y tablets
- ✅ **Fácil Integración**: Solo necesitas un `
```
**Ejemplo completo:**
```html
Mi Sitio Web
Bienvenido
```
### Parámetros del Script
- `data-app-id`: ID único de tu aplicación (requerido)
- `data-api-base`: URL base de la API (opcional, por defecto usa la misma URL del script)
**Ejemplo con parámetros:**
```html
```
## 📁 Estructura del Proyecto
```
WebChat/
├── public/
│ ├── chat-widget.js # Widget principal
│ ├── chat-widget.css # Estilos del widget
│ └── docs/ # Documentos para RAG
│ └── {appId}/
│ ├── manual.pdf
│ ├── faq.txt
│ └── ...
├── server.js # Backend Express
├── package.json # Dependencias
├── .env.example # Ejemplo de configuración
└── README.md # Este archivo
```
## 🔌 API Endpoints
### `POST /api/chat/:appId`
Envía un mensaje y recibe respuesta con RAG.
**Request:**
```json
{
"message": "¿Cuánto cuesta el plan básico?",
"userData": {
"nombre": "Juan",
"edad": 35
},
"conversationHistory": [...]
}
```
**Response:**
```json
{
"response": "El plan básico cuesta $29/mes...",
"source": "manual-producto.txt",
"hasContext": true
}
```
### `POST /api/lead/:appId`
Guarda un lead capturado.
**Request:**
```json
{
"nombre": "Juan",
"edad": 35,
"correo": "juan@example.com",
"telefono": "123456789"
}
```
### `GET /api/docs/:appId`
Lista documentos indexados para un appId.
**Response:**
```json
{
"documents": [...],
"count": 3
}
```
### `GET /api/leads/:appId`
Obtiene todos los leads capturados (para admin).
## 🎨 Personalización
### Colores del Widget
Edita `public/chat-widget.css` para cambiar colores:
```css
#webchat-button {
background: #10B981; /* Color del botón */
}
```
### Mensajes Iniciales
Edita `public/chat-widget.js` en la función `toggleChat()` para cambiar el mensaje inicial.
### System Prompt de OpenAI
Edita `server.js` en la variable `systemPrompt` para personalizar el comportamiento del asistente.
## 🔒 Seguridad
- ✅ Rate limiting: 5 mensajes por minuto por IP
- ✅ Validación de appId en todos los endpoints
- ✅ Sanitización de inputs
- ✅ Manejo de errores graceful
## 📊 Monitoreo
Los leads capturados se muestran en la consola del servidor:
```
✅ Lead capturado para default: {
nombre: 'Juan',
edad: 35,
correo: 'juan@example.com',
telefono: '123456789'
}
```
## 🐛 Solución de Problemas
### El widget no aparece
1. Verifica que el script esté cargando correctamente
2. Revisa la consola del navegador por errores
3. Asegúrate de que el servidor esté corriendo
### No se cargan los documentos
1. Verifica que los documentos estén en `public/docs/{appId}/`
2. Revisa los permisos de archivos
3. Verifica los logs del servidor
### Errores de OpenAI
1. Verifica que `OPENAI_API_KEY` esté configurada correctamente
2. Revisa que tengas créditos disponibles en tu cuenta de OpenAI
3. Verifica los logs del servidor para más detalles
## 📝 Licencia
MIT
## 🤝 Contribuciones
Las contribuciones son bienvenidas. Por favor:
1. Fork el proyecto
2. Crea una rama para tu feature
3. Commit tus cambios
4. Push a la rama
5. Abre un Pull Request
## 📧 Soporte
Para soporte, abre un issue en el repositorio o contacta al equipo de desarrollo.
---
**Desarrollado con ❤️ para facilitar la comunicación con tus usuarios**