Nexus/UI-GUIDE.md

Guía de la Interfaz de Usuario - Nexus AI

🎨 Diseño Moderno Inspirado en ChatGPT

La interfaz de usuario de Nexus AI ha sido diseñada siguiendo las mejores prácticas de UI/UX modernas, inspirada en el diseño limpio y funcional de ChatGPT.

📋 Características Principales

1. Diseño Responsive

• ✅ Sidebar colapsable en dispositivos móviles
• ✅ Diseño adaptativo para tablets y móviles
• ✅ Navegación optimizada para touch

2. Componentes Principales

Sidebar (Barra Lateral)

• Nueva conversación: Botón para iniciar un chat nuevo
• Historial de chats: Lista de conversaciones recientes
• Perfil de usuario: Información del usuario y configuración
• Diseño colapsable: Se oculta automáticamente en móviles

Área de Chat

• Mensajes del usuario: Fondo distinguible con avatar personalizado
• Respuestas de IA: Estilo limpio con avatar del asistente
• Indicador de escritura: Animación de puntos mientras la IA responde
• Auto-scroll: Desplazamiento automático a mensajes nuevos

Área de Input

• Textarea expandible: Se ajusta automáticamente al contenido
• Botón de adjuntar: Para futuras funcionalidades de archivos
• Botón de envío: Se activa/desactiva según el contenido
• Soporte para Shift+Enter: Para saltos de línea

Tarjetas de Sugerencias

• Ideas creativas: Ayuda con brainstorming
• Escribir código: Asistencia de programación
• Resolver problemas: Análisis y soluciones
• Aprender: Explicaciones de conceptos

3. Paleta de Colores

/* Colores Principales */
--bg-primary: #0f0f0f        /* Fondo oscuro principal */
--bg-secondary: #171717      /* Fondo oscuro secundario */
--bg-tertiary: #2f2f2f       /* Fondo terciario */

/* Textos */
--text-primary: #ececec      /* Texto principal */
--text-secondary: #b4b4b4    /* Texto secundario */
--text-tertiary: #8e8e8e     /* Texto terciario */

/* Acentos */
--accent-primary: #19c37d    /* Verde principal (botones) */
--accent-hover: #1aa874      /* Verde hover */
--accent-active: #148f5f     /* Verde activo */

4. Tipografía

• Familia: Inter, -apple-system, BlinkMacSystemFont
• Peso: 300 (light) a 700 (bold)
• Anti-aliasing: Optimizado para pantallas retina

5. Animaciones y Transiciones

• ✅ Transiciones suaves (150ms - 300ms)
• ✅ Animación de aparición de mensajes (fadeIn)
• ✅ Animación del indicador de escritura
• ✅ Hover effects en todos los elementos interactivos
• ✅ Efectos de scale en botones al hacer click

6. Accesibilidad

• ✅ Etiquetas ARIA para lectores de pantalla
• ✅ Contraste de colores cumple con WCAG AA
• ✅ Navegación por teclado optimizada
• ✅ Focus visible en elementos interactivos

🚀 Características Técnicas

Responsive Breakpoints

/* Tablet y móvil */
@media (max-width: 768px) {
  - Sidebar fijo con overlay
  - Header móvil visible
  - Grid de sugerencias en 1 columna
}

/* Móvil pequeño */
@media (max-width: 480px) {
  - Padding reducido
  - Fuentes ajustadas
}

Optimizaciones de Performance

• CSS Variables: Para cambios de tema dinámicos
• GPU Acceleration: Transform para animaciones suaves
• Lazy Loading: Carga progresiva de mensajes
• Request Animation Frame: Para scroll suave

📱 Funcionalidades JavaScript

Gestión de Estado

- isTyping: Control del estado de escritura
- conversationId: ID de la conversación actual
- Socket.IO: Comunicación en tiempo real

Eventos Principales

• handleSubmit: Envío de mensajes
• handleInputChange: Actualización del textarea
• toggleSidebar: Control del sidebar móvil
• setupSuggestionCards: Interacción con sugerencias
• formatMessage: Markdown básico (bold, italic, code, links)

Persistencia

• LocalStorage para última conversación
• Auto-guardado antes de cerrar ventana
• Recuperación de conversación al recargar

🎯 Mejoras Futuras Sugeridas

1. Temas: Modo claro/oscuro
2. Personalización: Colores y avatares personalizados
3. Markdown Completo: Soporte para listas, tablas, etc.
4. Archivos: Subida y visualización de archivos
5. Voice Input: Entrada por voz
6. Shortcuts: Atajos de teclado personalizables
7. Exportar Chat: Guardar conversaciones en diferentes formatos
8. Búsqueda: Buscar en el historial de conversaciones

🛠️ Desarrollo

Estructura de Archivos

public/
├── index.html      # Estructura HTML principal
├── css/
│   └── styles.css  # Estilos CSS con variables
└── js/
    └── app.js      # Lógica de la aplicación

Guía de Estilos

• Usar variables CSS para colores y espaciados
• Seguir nomenclatura BEM para clases
• Comentar secciones principales
• Mantener selectores específicos y no anidados

📝 Notas de Implementación

Compatibilidad

• ✅ Chrome 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Edge 90+

Dependencias

• Socket.IO (cliente): Para comunicación en tiempo real
• Google Fonts (Inter): Tipografía moderna
• Sin frameworks adicionales (Vanilla JS)

---

Versión: 1.0.0
Última actualización: 2026-02-13
Diseño inspirado en: ChatGPT UI Kit