304 lines
17 KiB
Markdown
304 lines
17 KiB
Markdown
# 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
|
|
|