Nexus/QUICKSTART.md

🚀 Quick Start - Nexus AI Chat

Inicio en 3 Pasos

1️⃣ Instalar Dependencias

npm install

2️⃣ Compilar y Ejecutar

npm run build && npm start

3️⃣ Abrir en el Navegador

http://localhost:3000

💡 Modo Desarrollo (Recomendado)

npm run dev

Esto iniciará el servidor con hot-reload. Cualquier cambio en los archivos TypeScript reiniciará automáticamente el servidor.

✅ Verificación Rápida

Una vez iniciado el servidor, deberías ver:

✨ Nexus AI Application iniciada
🌐 Servidor en http://localhost:3000

🎯 Probar la UI

1. Abrir: http://localhost:3000 en tu navegador
2. Escribir: Un mensaje en el input inferior
3. Enviar: Presiona Enter o click en el botón de enviar
4. Esperar: Verás el indicador de escritura (●●●)
5. Recibir: La respuesta de la IA aparecerá

📱 Probar Responsive

Desktop

• Abre en ventana completa
• Sidebar visible a la izquierda
• Chat centrado

Mobile

1. Abre Chrome DevTools (F12)
2. Click en el icono de dispositivo móvil
3. Selecciona un dispositivo (iPhone, iPad, etc.)
4. Recarga la página
5. El sidebar ahora es un overlay con menú hamburguesa

🎨 Características para Probar

✅ Tarjetas de Sugerencias

• Click en cualquiera de las 4 tarjetas de sugerencia
• El texto se copia al input automáticamente

✅ Nuevo Chat

• Click en "Nuevo chat" (sidebar o header móvil)
• La conversación se limpia
• Aparece nuevamente el mensaje de bienvenida

✅ Formateo de Texto

Prueba enviar estos mensajes para ver el formateo:

**texto en negrita**
*texto en cursiva*
`código inline`

✅ Auto-expansión de Input

• Escribe múltiples líneas en el input
• Observa cómo crece automáticamente
• Máximo: 200px de altura

✅ Atajos de Teclado

• Enter: Enviar mensaje
• Shift+Enter: Nueva línea

🛠️ Comandos Útiles

Ver Logs

tail -f logs/combined.log

Ver Solo Errores

tail -f logs/error.log

Limpiar y Recompilar

npm run clean && npm run build

Formatear Código

npm run format

Verificar Código

npm run lint

🐛 Troubleshooting

Puerto 3000 ya en uso

# Ver qué proceso usa el puerto
lsof -i :3000

# Matar el proceso (reemplaza PID)
kill -9 PID

# O cambiar el puerto en .env
PORT=3001

Error de compilación TypeScript

# Limpiar y reinstalar
npm run clean
rm -rf node_modules
npm install
npm run build

Socket.IO no conecta

1. Verifica que el servidor esté corriendo
2. Abre la consola del navegador (F12)
3. Busca errores de conexión
4. Verifica que CORS esté habilitado

UI no se ve correctamente

1. Limpia cache del navegador (Ctrl+Shift+R)
2. Verifica que public/ tenga todos los archivos
3. Verifica la consola por errores 404

📊 Verificar Todo Funciona

Backend ✅

curl http://localhost:3000/health
# Debería retornar: {"status":"ok","timestamp":"..."}

Frontend ✅

1. Abre DevTools (F12)
2. Ve a la pestaña "Network"
3. Filtra por "WS" (WebSocket)
4. Deberías ver conexión a /socket.io/

Logs ✅

# Ver últimas 20 líneas
tail -20 logs/combined.log

# Debería mostrar:
# - Cliente conectado: [socket-id]
# - Mensaje recibido de [socket-id]: [mensaje]
# - Respuesta enviada a [socket-id]

🎉 Todo Listo!

Si todo funciona correctamente:

• ✅ Servidor corriendo en puerto 3000
• ✅ UI carga correctamente
• ✅ Puedes enviar y recibir mensajes
• ✅ Animaciones funcionan suavemente
• ✅ Responsive funciona en móvil

📚 Siguiente Paso

Lee la documentación completa:

• 📖 README.md - Información general
• 🎨 UI-GUIDE.md - Guía de UI
• 📊 COMPARISON.md - Antes vs Después
• 🎯 UI-VISUAL.md - Vista visual

💬 Soporte

Si encuentras problemas:

1. Revisa esta guía
2. Verifica los logs
3. Abre un issue con detalles
4. Incluye screenshots si es posible

---

Tiempo estimado de setup: 2-3 minutos
Node version requerida: >= 18.0.0
Navegadores soportados: Chrome, Firefox, Safari, Edge (últimas versiones)