IMPLEMENTADO - Previsualización de Imágenes en Chat Assistant

📸 Frontend actualizado a v1.2.3
He implementado un sistema completo de previsualización de imágenes en el chat assistant:

🎨 Características Implementadas:
1. Preview Antes de Enviar (Zona de Input)
Miniaturas 20x20px con superposición de nombre
Botón de eliminar en esquina superior derecha (rojo con X)
Fondo oscuro translúcido para nombre del archivo
Hover effects para mejor UX

// Vista previa antes de enviar:
┌─────────────────────────────┐
│  [IMG]  [IMG]  📄 file.pdf  │  ← Miniaturas clickeables
│   ✕      ✕       ✕          │
└─────────────────────────────┘

2. Imágenes en Mensajes del Chat
Renderizado completo de imágenes en mensajes del usuario
Máximo 256px de altura (responsive)
Click para abrir en nueva pestaña (full size)
Metadata bajo la imagen (nombre + tamaño)
Esquina redondeada para mejor diseño
Transición hover (opacity 90%)

// Mensaje del usuario con imagen:
┌────────────────────────────┐
│ [Texto del mensaje]        │
│                            │
│ ┌────────────────────────┐ │
│ │                        │ │
│ │    [IMAGEN PREVIEW]    │ │ ← Click para ampliar
│ │                        │ │
│ └────────────────────────┘ │
│ 🖼️ photo.jpg (128.5 KB)   │
│                            │
│ 10:45                      │
└────────────────────────────┘

3. Gestión de Memoria
URLs temporales con URL.createObjectURL()
Limpieza automática al eliminar archivo
useEffect cleanup al desmontar modal
No memory leaks garantizados
This commit is contained in:
2025-12-04 11:03:19 -03:00
parent 59a0f56b99
commit 023a004c53
4 changed files with 98 additions and 25 deletions

View File

@@ -1,6 +1,6 @@
// Service Worker para PWA con detección de actualizaciones
// IMPORTANTE: Actualizar esta versión cada vez que se despliegue una nueva versión
const CACHE_NAME = 'ayutec-v1.2.2';
const CACHE_NAME = 'ayutec-v1.2.3';
const urlsToCache = [
'/',
'/index.html'