🚀 Chatbot Widget Frontend v2.0.0

✨ Descripción

Widget de chat embebible desarrollado con React y TypeScript, con sistema avanzado de testing y debugging para el Gateway de Mindlab AI. Incluye conexión estable al backend, herramientas de desarrollo integradas y monitoreo en tiempo real.

Instrucciones de Uso

1. Clona el Repositorio

Clona el proyecto en tu máquina local:

git clone <URL_DEL_REPOSITORIO>
cd chatbot-widget-front

2. Instala las Dependencias

Asegúrate de tener Node.js y npm instalados. Luego, instala las dependencias del proyecto:

npm install

3. Entorno de Desarrollo

Para iniciar el servidor de desarrollo, usa el siguiente comando:

npm run dev

Esto abrirá el proyecto en tu navegador predeterminado en http://localhost:3005 con el Gateway Test Center activado.

4. Construcción para Producción

Para construir la aplicación completa:

npm run build

El proyecto compilado estará disponible en la carpeta dist.

5. Construcción del Widget UMD

Para generar el widget en formato UMD (Universal Module Definition), ejecuta:

npm run build:widget

El archivo resultante estará en la carpeta dist y se llamará mindlab-chat-widget.umd.js.

6. Vista Previa de Producción

Para hacer una vista previa de la versión de producción construida:

npm run preview

Esto iniciará un servidor local para ver la versión optimizada en http://localhost:4173.

7. Linter de Código

Para ejecutar el linter y revisar el código:

npm run lint

Dependencias Principales

• react & react-dom: Librerías principales de React.
• react-icons: Biblioteca de iconos para React.
• react-router-dom: Enrutador para aplicaciones React.
• socket.io-client: Cliente de Socket.io para comunicación en tiempo real.
• date-fns: Biblioteca para la manipulación de fechas.

Dependencias de Desarrollo

• vite: Bundler moderno y rápido.
• typescript: Soporte para TypeScript.
• eslint: Herramienta para analizar el código y mantener la calidad.
• tailwindcss: Framework de CSS para diseño y estilo.
• terser: Herramienta para la minificación de código.
• @vitejs/plugin-react: Plugin de Vite para React.

🔧 Gateway Test Center

Centro de Testing Integrado

El proyecto incluye un sistema completo de testing y debugging:

HomeDev (http://localhost:3005)

• Configuración rápida de agentes y gateway
• Estados en tiempo real de conexión
• Controles de reset y reload
• Vista minimal y completa

Gateway Debug Center

• Connection Tab: Testing de conectividad y configuración
• Chat Tab: Testing en tiempo real del chat
• Diagnostics Tab: Resultados detallados de pruebas automatizadas
• Logs Tab: Monitoreo en tiempo real con interfaz tipo terminal

Tests Automatizados

# El sistema ejecuta automáticamente:
✅ Validación de URL del gateway
✅ Test de conectividad básica HTTP
✅ Validación y decodificación de JWT tokens
✅ Test de conexión Socket.IO
✅ Verificación de respuesta del gateway
✅ Test del hook de chat en tiempo real

Funciones de Debug

// Disponibles en modo debug
debugFunctions.testMessageDelivery('Test message');
debugFunctions.debugConversation();
debugFunctions.checkMessageDelivery();
debugFunctions.forceReconnect();

📖 Documentación Avanzada

Para guía completa de testing y debugging, consulta:

• GATEWAY_TESTING_GUIDE.md - Guía completa de testing
• README_DETALLADO.md - Documentación técnica detallada

🐛 Troubleshooting

Problemas Comunes

• Widget no conecta: Verificar URL del gateway y ejecutar diagnóstico completo
• Mensajes no se envían: Comprobar eventos y formato de datos
• No recibe respuestas: Debug de conversación y verificar listeners

Herramientas de Debug

• Export de diagnósticos en formato JSON
• Logs en tiempo real con timestamps
• Testing automatizado con resultados detallados
• Monitoreo de performance y latencia