205 lines
4.1 KiB
Markdown
205 lines
4.1 KiB
Markdown
# 🚀 Quick Start - Nexus AI Chat
|
||
|
||
## Inicio en 3 Pasos
|
||
|
||
### 1️⃣ Instalar Dependencias
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 2️⃣ Compilar y Ejecutar
|
||
```bash
|
||
npm run build && npm start
|
||
```
|
||
|
||
### 3️⃣ Abrir en el Navegador
|
||
```
|
||
http://localhost:3000
|
||
```
|
||
|
||
## 💡 Modo Desarrollo (Recomendado)
|
||
|
||
```bash
|
||
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
|
||
```bash
|
||
tail -f logs/combined.log
|
||
```
|
||
|
||
### Ver Solo Errores
|
||
```bash
|
||
tail -f logs/error.log
|
||
```
|
||
|
||
### Limpiar y Recompilar
|
||
```bash
|
||
npm run clean && npm run build
|
||
```
|
||
|
||
### Formatear Código
|
||
```bash
|
||
npm run format
|
||
```
|
||
|
||
### Verificar Código
|
||
```bash
|
||
npm run lint
|
||
```
|
||
|
||
## 🐛 Troubleshooting
|
||
|
||
### Puerto 3000 ya en uso
|
||
```bash
|
||
# 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
|
||
```bash
|
||
# 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 ✅
|
||
```bash
|
||
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 ✅
|
||
```bash
|
||
# 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](./README.md) - Información general
|
||
- 🎨 [UI-GUIDE.md](./UI-GUIDE.md) - Guía de UI
|
||
- 📊 [COMPARISON.md](./COMPARISON.md) - Antes vs Después
|
||
- 🎯 [UI-VISUAL.md](./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)
|
||
|