v1.2.4 - Lightbox para visualizar imágenes en Chat Assistant

FRONTEND:
- Implementado visor de imágenes (lightbox) dentro del modal de chat
- Click en imagen abre pantalla completa en lugar de nueva pestaña
- Fondo negro translúcido (95%) con z-index 200
- Botón de cerrar (×) en esquina superior derecha
- Click en imagen/fondo cierra el lightbox
- Etiqueta flotante con nombre de archivo
- Cursor zoom-in en miniaturas para indicar ampliación
- Responsive: max 95vw/95vh con scroll automático
- Frontend v1.2.4

BACKEND:
- Sin cambios (v1.1.1)
This commit is contained in:
2025-12-04 11:28:03 -03:00
parent b191030321
commit 9ed41c9ee4
4 changed files with 35 additions and 5 deletions

View File

@@ -5457,6 +5457,7 @@ function InspectionModal({ checklist, existingInspection, user, onClose, onCompl
function AIAssistantChatModal({ question, inspection, allAnswers, messages, setMessages, loading, setLoading, onClose }) {
const [inputMessage, setInputMessage] = useState('')
const [attachedFiles, setAttachedFiles] = useState([])
const [selectedImage, setSelectedImage] = useState(null) // Para lightbox
const chatEndRef = useRef(null)
const fileInputRef = useRef(null)
const config = question.options || {}
@@ -5715,8 +5716,8 @@ function AIAssistantChatModal({ question, inspection, allAnswers, messages, setM
<img
src={file.preview}
alt={file.name}
className="rounded-lg max-w-full h-auto max-h-64 object-contain cursor-pointer hover:opacity-90 transition"
onClick={() => window.open(file.preview, '_blank')}
className="rounded-lg max-w-full h-auto max-h-64 object-contain cursor-zoom-in hover:opacity-90 transition"
onClick={() => setSelectedImage({ url: file.preview, name: file.name })}
/>
<div className={`text-xs flex items-center gap-1 ${msg.role === 'user' ? 'text-blue-100' : 'text-gray-500'}`}>
<span>🖼</span>
@@ -5850,6 +5851,35 @@ function AIAssistantChatModal({ question, inspection, allAnswers, messages, setM
</p>
)}
</div>
{/* Lightbox para visualizar imágenes */}
{selectedImage && (
<div
className="fixed inset-0 bg-black/95 z-[200] flex items-center justify-center p-4"
onClick={() => setSelectedImage(null)}
>
<button
onClick={() => setSelectedImage(null)}
className="absolute top-4 right-4 text-white/80 hover:text-white text-4xl font-bold z-10 bg-black/50 rounded-full w-12 h-12 flex items-center justify-center"
>
×
</button>
<div className="relative max-w-[95vw] max-h-[95vh] overflow-auto">
<img
src={selectedImage.url}
alt={selectedImage.name}
className="max-w-full max-h-[95vh] object-contain cursor-zoom-out"
onClick={(e) => {
e.stopPropagation()
setSelectedImage(null)
}}
/>
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black/70 text-white px-4 py-2 rounded-lg text-sm">
🖼 {selectedImage.name}
</div>
</div>
</div>
)}
</div>
</div>
)