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

npm install

Configuración

1. Copia el archivo de ejemplo de variables de entorno:

cp .env.example .env

2. Edita .env con tus configuraciones.

Desarrollo

# Modo desarrollo con hot reload
npm run dev

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

Producción

# 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 - Guía completa de la interfaz
• 🎨 UI-VISUAL.md - Vista visual y diagramas
• 📊 COMPARISON.md - Antes vs Después
• 📝 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

socket.emit('user_message', { 
  message: string, 
  conversationId?: string 
})

Servidor → Cliente

// Respuesta de AI
socket.emit('ai_response', { 
  content: string, 
  timestamp: Date,
  conversationId: string 
})

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

🎨 Paleta de Colores

/* 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

• Arquitectura TypeScript moderna
• Servidor Express con Socket.IO
• UI moderna inspirada en ChatGPT
• Diseño responsive completo
• Sistema de mensajería en tiempo real
• Tarjetas de sugerencias
• Formateo Markdown básico
• 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