# 🚀 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)