# Nexus AI Chat 🚀

Aplicación de chat con IA moderna con arquitectura limpia, escalable y una interfaz de usuario profesional inspirada en ChatGPT.

## ✨ Características

- 🎨 **UI Moderna**: Diseño inspirado en ChatGPT con diseño responsivo completo
- 💬 **Chat en Tiempo Real**: Comunicación instantánea mediante WebSockets
- 🌙 **Modo Oscuro**: Paleta de colores profesional optimizada para baja luz
- 📱 **Responsive**: Funciona perfectamente en desktop, tablet y móvil
- ⚡ **Rápido**: Animaciones suaves de 60fps con aceleración GPU
- ♿ **Accesible**: Cumple con estándares WCAG AA
- 🎯 **Sugerencias Inteligentes**: Tarjetas interactivas para comenzar conversaciones
- 💾 **Persistencia**: Guarda conversaciones localmente
- 🔒 **Seguro**: Protección contra XSS y otras vulnerabilidades

## 🚀 Inicio Rápido

### Instalación

```bash
npm install
```

### Configuración

1. Copia el archivo de ejemplo de variables de entorno:
```bash
cp .env.example .env
```

2. Edita `.env` con tus configuraciones.

### Desarrollo

```bash
# Modo desarrollo con hot reload
npm run dev

# En otra terminal, el servidor estará disponible en:
# http://localhost:3000
```

### Producción

```bash
# Compilar
npm run build

# Ejecutar versión compilada
npm start
```

### Scripts Disponibles

- `npm run dev` - Ejecutar en modo desarrollo con hot reload
- `npm run build` - Compilar TypeScript a JavaScript
- `npm start` - Ejecutar la aplicación compilada
- `npm run clean` - Limpiar carpeta dist
- `npm run lint` - Verificar código con ESLint
- `npm run format` - Formatear código con Prettier

## 🎨 Interfaz de Usuario

La nueva interfaz incluye:

### Componentes Principales
- **Sidebar Colapsable**: Historial de conversaciones y perfil de usuario
- **Chat Area**: Mensajes con avatares y formateo Markdown
- **Input Expandible**: Textarea que crece automáticamente
- **Tarjetas de Sugerencias**: 4 categorías predefinidas (Ideas, Código, Problemas, Aprendizaje)
- **Indicador de Escritura**: Animación mientras la IA responde
- **Header Móvil**: Navegación optimizada para dispositivos táctiles

### Documentación UI
- 📖 [**UI-GUIDE.md**](./UI-GUIDE.md) - Guía completa de la interfaz
- 🎨 [**UI-VISUAL.md**](./UI-VISUAL.md) - Vista visual y diagramas
- 📊 [**COMPARISON.md**](./COMPARISON.md) - Antes vs Después
- 📝 [**CHANGELOG.md**](./CHANGELOG.md) - Historial de cambios

## 📁 Estructura del Proyecto

```
Nexus/
├── src/
│   ├── config/          # Configuraciones
│   ├── core/            # Lógica central (Application)
│   ├── server/          # Servidor web y WebSockets
│   ├── services/        # Servicios de negocio
│   ├── utils/           # Utilidades (logger)
│   ├── types/           # Tipos TypeScript
│   └── index.ts         # Punto de entrada
├── public/              # Archivos estáticos
│   ├── index.html       # UI principal (198 líneas)
│   ├── css/
│   │   └── styles.css   # Estilos modernos (520+ líneas)
│   └── js/
│       └── app.js       # Lógica del cliente (430+ líneas)
├── logs/                # Archivos de log
├── dist/                # Código compilado
└── package.json
```

## 🔧 Tecnologías

### Backend
- **TypeScript** - Lenguaje principal con tipos estáticos
- **Express** - Framework web minimalista
- **Socket.IO** - Comunicación en tiempo real
- **Winston** - Sistema de logging profesional
- **CORS** - Control de acceso entre orígenes

### Frontend
- **Vanilla JavaScript** - Sin frameworks, código ligero
- **Socket.IO Client** - Cliente WebSocket
- **Inter Font** - Tipografía moderna de Google Fonts
- **CSS Variables** - Sistema de tematización dinámico

### Desarrollo
- **tsx** - Ejecución de TypeScript con hot reload
- **ESLint** - Linting de código
- **Prettier** - Formateo de código

## 🎯 Características de la UI

### Desktop (> 768px)
- ✅ Sidebar visible de 280px
- ✅ Chat centrado con max-width 780px
- ✅ Grid de sugerencias en 2x2
- ✅ Hover effects avanzados

### Tablet (≤ 768px)
- ✅ Sidebar overlay con toggle
- ✅ Header móvil con menú hamburguesa
- ✅ Layout adaptativo
- ✅ Touch-optimized

### Móvil (≤ 480px)
- ✅ Sugerencias en columna única
- ✅ Padding optimizado
- ✅ Fuentes escaladas
- ✅ Botones más grandes

## 💬 Eventos Socket.IO

### Cliente → Servidor
```javascript
socket.emit('user_message', { 
  message: string, 
  conversationId?: string 
})
```

### Servidor → Cliente
```javascript
// Respuesta de AI
socket.emit('ai_response', { 
  content: string, 
  timestamp: Date,
  conversationId: string 
})

// Error
socket.emit('error', { 
  message: string, 
  timestamp: Date 
})
```

## 🎨 Paleta de Colores

```css
/* Fondos */
--bg-primary: #0f0f0f      /* Casi negro */
--bg-secondary: #171717    /* Gris muy oscuro */
--bg-tertiary: #2f2f2f     /* Gris oscuro */

/* Textos */
--text-primary: #ececec    /* Blanco suave */
--text-secondary: #b4b4b4  /* Gris claro */

/* Acentos */
--accent-primary: #19c37d  /* Verde brillante */
--accent-hover: #1aa874    /* Verde hover */
```

## 📝 Roadmap

### ✅ Completado
- [x] Arquitectura TypeScript moderna
- [x] Servidor Express con Socket.IO
- [x] UI moderna inspirada en ChatGPT
- [x] Diseño responsive completo
- [x] Sistema de mensajería en tiempo real
- [x] Tarjetas de sugerencias
- [x] Formateo Markdown básico
- [x] Logging profesional

### 🚧 En Progreso
- [ ] Integración con modelo de IA real (OpenAI/Claude)
- [ ] Sistema de autenticación
- [ ] Base de datos para historial

### 📅 Próximos Pasos
1. **IA Real**: Conectar con OpenAI API o modelo local
2. **Base de Datos**: PostgreSQL/MongoDB para persistencia
3. **Auth**: Sistema de usuarios y sesiones
4. **Markdown Completo**: Listas, tablas, imágenes
5. **Syntax Highlighting**: Para bloques de código
6. **Tema Claro**: Toggle entre modo claro/oscuro
7. **Adjuntar Archivos**: Subida de imágenes y documentos
8. **Tests**: Cobertura completa con Jest
9. **CI/CD**: Pipeline de despliegue automático
10. **Docker**: Containerización

## 🤝 Contribuir

1. Crea una rama para tu feature
2. Realiza tus cambios
3. Asegúrate de que pasa el linting: `npm run lint`
4. Formatea el código: `npm run format`
5. Crea un Pull Request

### Guía de Estilos

#### CSS
- Usar variables CSS para colores y espaciados
- Seguir nomenclatura BEM para clases
- Comentar secciones principales
- Mobile-first approach

#### JavaScript
- ESLint con configuración estricta
- Funciones pequeñas y reutilizables
- Comentarios para lógica compleja
- Manejo de errores robusto

#### TypeScript
- Tipos explícitos siempre que sea posible
- Interfaces para estructuras de datos
- Evitar `any` a toda costa
- Documentar funciones públicas

## 📊 Métricas

- **Líneas de Código**: ~1,500+
- **Archivos**: 15+
- **Componentes UI**: 12+
- **Variables CSS**: 30+
- **Animaciones**: 6+
- **Cobertura Responsive**: 100%
- **Compatibilidad**: Chrome, Firefox, Safari, Edge (últimas versiones)

## 🐛 Reportar Bugs

Por favor, abre un issue con:
1. Descripción del problema
2. Pasos para reproducir
3. Comportamiento esperado
4. Screenshots si aplica
5. Navegador y versión

## 📄 Licencia

Privado

---

**Versión**: 1.0.0  
**Última actualización**: 13 de Febrero, 2026  
**Diseño inspirado en**: ChatGPT UI Kit  
**Hecho con**: ❤️ y TypeScript