Nexus/UI-VISUAL.md

Vista de la Nueva Interfaz

🖥️ Vista Desktop (> 768px)

┌─────────────────────────────────────────────────────────────────────────────┐
│                          NEXUS AI - MODERN CHAT UI                          │
└─────────────────────────────────────────────────────────────────────────────┘

┌──────────────────────┬──────────────────────────────────────────────────────┐
│  ≡  [+ Nuevo chat]   │                                                      │
│──────────────────────│                                                      │
│                      │                    [Logo Nexus]                      │
│  RECIENTES           │           ¿Cómo puedo ayudarte hoy?                 │
│                      │                                                      │
│  💬 Nueva conversa...│  ┌──────────────┐  ┌──────────────┐                │
│                      │  │  💡          │  │  📝          │                │
│                      │  │  Ideas       │  │  Escribir    │                │
│                      │  │  creativas   │  │  código      │                │
│                      │  └──────────────┘  └──────────────┘                │
│                      │                                                      │
│                      │  ┌──────────────┐  ┌──────────────┐                │
│                      │  │  🎯          │  │  📚          │                │
│                      │  │  Resolver    │  │  Aprender    │                │
│                      │  │  problemas   │  │  algo nuevo  │                │
│                      │  └──────────────┘  └──────────────┘                │
│                      │                                                      │
│                      │                                                      │
│                      │                                                      │
│                      │                                                      │
│                      │                                                      │
│ ┌──────────────────┐ │                                                      │
│ │ 👤 Usuario       │ │                                                      │
│ │    Plan gratuito │ │                                                      │
│ └──────────────────┘ │                                                      │
│──────────────────────│──────────────────────────────────────────────────────│
│                      │  ┌────────────────────────────────────────────────┐ │
│                      │  │ 📎  Envía un mensaje...              [Enviar] │ │
│                      │  └────────────────────────────────────────────────┘ │
│                      │  Nexus puede cometer errores. Verifica información. │
└──────────────────────┴──────────────────────────────────────────────────────┘
    280px                               Flexible (resto de pantalla)

📱 Vista Mobile (< 768px)

┌────────────────────────────────────────┐
│  ≡  Nexus AI                      [+] │  ← Header móvil
├────────────────────────────────────────┤
│                                        │
│           [Logo Nexus]                 │
│    ¿Cómo puedo ayudarte hoy?          │
│                                        │
│  ┌────────────────────────────────┐   │
│  │  💡                            │   │
│  │  Ideas creativas               │   │
│  │  Ayúdame con ideas innovadoras │   │
│  └────────────────────────────────┘   │
│                                        │
│  ┌────────────────────────────────┐   │
│  │  📝                            │   │
│  │  Escribir código               │   │
│  │  Ayúdame a programar algo      │   │
│  └────────────────────────────────┘   │
│                                        │
│  ┌────────────────────────────────┐   │
│  │  🎯                            │   │
│  │  Resolver problemas            │   │
│  │  Analiza y encuentra soluciones│   │
│  └────────────────────────────────┘   │
│                                        │
│  ┌────────────────────────────────┐   │
│  │  📚                            │   │
│  │  Aprender algo nuevo           │   │
│  │  Explícame conceptos complejos │   │
│  └────────────────────────────────┘   │
│                                        │
├────────────────────────────────────────┤
│  ┌──────────────────────────────┐     │
│  │ 📎  Envía un mensaje... [➤] │     │
│  └──────────────────────────────┘     │
│  Nexus puede cometer errores...       │
└────────────────────────────────────────┘

💬 Vista Con Conversación Activa

┌──────────────────────┬──────────────────────────────────────────────────────┐
│  ≡  [+ Nuevo chat]   │                                                      │
│──────────────────────│                                                      │
│  RECIENTES           │  ┌────────────────────────────────────────────────┐ │
│                      │  │ 👤  Hola, ¿puedes ayudarme con Python?        │ │
│  💬 Ayuda con Python │  └────────────────────────────────────────────────┘ │
│                      │                                                      │
│                      │  ┌────────────────────────────────────────────────┐ │
│                      │  │ 🤖  ¡Claro! Python es un lenguaje de          │ │
│                      │  │     programación versátil. ¿Qué necesitas     │ │
│                      │  │     aprender específicamente?                  │ │
│                      │  └────────────────────────────────────────────────┘ │
│                      │                                                      │
│                      │  ┌────────────────────────────────────────────────┐ │
│                      │  │ 👤  Necesito crear una función para ordenar   │ │
│                      │  │     una lista                                  │ │
│                      │  └────────────────────────────────────────────────┘ │
│                      │                                                      │
│                      │  ┌────────────────────────────────────────────────┐ │
│                      │  │ 🤖  Typing...                                  │ │
│                      │  │     ● ● ●                                      │ │
│                      │  └────────────────────────────────────────────────┘ │
│                      │                                                      │
│ ┌──────────────────┐ │                                                      │
│ │ 👤 Usuario       │ │                                                      │
│ │    Plan gratuito │ │                                                      │
│ └──────────────────┘ │                                                      │
│──────────────────────│──────────────────────────────────────────────────────│
│                      │  ┌────────────────────────────────────────────────┐ │
│                      │  │ 📎  Envía un mensaje...              [Enviar] │ │
│                      │  └────────────────────────────────────────────────┘ │
│                      │  Nexus puede cometer errores. Verifica información. │
└──────────────────────┴──────────────────────────────────────────────────────┘

🎨 Elementos Visuales Clave

Sidebar

┌─────────────────────┐
│ ≡ [+ Nuevo chat]   │  ← Toggle + Nuevo chat
├─────────────────────┤
│                     │
│ RECIENTES           │  ← Sección título
│                     │
│ 💬 Chat 1           │  ← Item activo (resaltado)
│ 💬 Chat 2           │  ← Items clickeables
│ 💬 Chat 3           │
│                     │
│ ⋮                   │
│                     │
├─────────────────────┤
│ ┌─────────────────┐ │
│ │ 👤 Usuario     ∨│ │  ← Perfil con dropdown
│ │    Plan gratuito│ │
│ └─────────────────┘ │
└─────────────────────┘

Tarjeta de Sugerencia

┌──────────────────────┐
│  💡                  │  ← Emoji grande
│                      │
│  Ideas creativas     │  ← Título
│  Ayúdame con ideas   │  ← Descripción
│  innovadoras         │
│                      │
└──────────────────────┘
   ↑ Hover: sube 2px
   ↑ Sombra más grande

Mensaje del Usuario

┌────────────────────────────────┐
│ 👤  Hola, ¿cómo estás?        │  ← Avatar + mensaje
└────────────────────────────────┘
   ↑ Fondo: #2f2f2f

Mensaje de AI

┌────────────────────────────────┐
│ 🤖  ¡Hola! Estoy muy bien,    │  ← Avatar + mensaje
│     ¿en qué puedo ayudarte?    │
└────────────────────────────────┘
   ↑ Fondo: transparente

Input Area

┌──────────────────────────────────────┐
│ 📎  │ Escribe aquí...        │  [➤] │
└──────────────────────────────────────┘
   ↑    ↑                        ↑
Adjuntar Textarea auto-expand  Enviar

Indicador de Escritura

┌────────────────────────────────┐
│ 🤖  ● ● ●                      │
└────────────────────────────────┘
   ↑ Animación de typing

🎯 Estados Interactivos

Botón Normal

┌──────────────┐
│ + Nuevo chat │
└──────────────┘

Botón Hover

┌──────────────┐
│ + Nuevo chat │  ← Fondo más claro
└──────────────┘     Escala 1.02

Botón Active

┌──────────────┐
│ + Nuevo chat │  ← Fondo aún más claro
└──────────────┘     Escala 0.98

Botón Disabled

┌──────────────┐
│ + Nuevo chat │  ← Opacidad 0.5
└──────────────┘     Cursor: not-allowed

📐 Dimensiones

Desktop

• Sidebar: 280px fijo
• Chat: Flexible (max-width: 780px centrado)
• Input: max-width: 780px centrado
• Padding: 16-24px

Tablet

• Sidebar: 280px overlay
• Chat: 100% - padding
• Input: 100% - padding
• Padding: 12-16px

Mobile

• Sidebar: 280px overlay
• Chat: 100% - padding
• Input: 100% - padding
• Padding: 8-12px

🎨 Paleta de Colores Visual

█████  #0f0f0f  bg-primary (casi negro)
█████  #171717  bg-secondary (gris muy oscuro)
█████  #2f2f2f  bg-tertiary (gris oscuro)
█████  #1e1e1e  bg-hover
█████  #2d2d2d  bg-active

█████  #ececec  text-primary (blanco suave)
█████  #b4b4b4  text-secondary (gris claro)
█████  #8e8e8e  text-tertiary (gris medio)

█████  #19c37d  accent-primary (verde brillante)
█████  #1aa874  accent-hover (verde medio)
█████  #148f5f  accent-active (verde oscuro)

█████  #303030  border-color
█████  #3f3f3f  border-light

✨ Animaciones

fadeIn (mensajes nuevos)

0%   → opacity: 0, transform: translateY(10px)
100% → opacity: 1, transform: translateY(0)
Duración: 300ms

typing (indicador)

0%   → translateY(0), opacity: 0.5
30%  → translateY(-10px), opacity: 1
60%  → translateY(0), opacity: 0.5
100% → translateY(0), opacity: 0.5
Duración: 1.4s infinite

hover (tarjetas)

Normal → Hover
- transform: translateY(0) → translateY(-2px)
- box-shadow: small → medium
Duración: 150ms

---

Nota: Esta es una representación ASCII. La interfaz real incluye:

• Fuente Inter de Google Fonts
• Iconos SVG vectoriales
• Gradientes sutiles
• Sombras multicapa
• Transiciones suaves
• Animaciones de 60fps