274 lines
7.3 KiB
Markdown
274 lines
7.3 KiB
Markdown
# 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
|
|
|