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

```css
/* 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
```css
/* 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
```javascript
- 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