From 9ed41c9ee43cd9d558c94df55f43baa02fbb5d3b Mon Sep 17 00:00:00 2001
From: ronalds <ronalds@rshtech.com.py>
Date: Thu, 4 Dec 2025 11:28:03 -0300
Subject: [PATCH] =?UTF-8?q?v1.2.4=20-=20Lightbox=20para=20visualizar=20im?=
 =?UTF-8?q?=C3=A1genes=20en=20Chat=20Assistant?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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)
---
 frontend/package.json             |  2 +-
 frontend/public/service-worker.js |  2 +-
 frontend/src/App.jsx              | 34 +++++++++++++++++++++++++++++--
 frontend/src/Sidebar.jsx          |  2 +-
 4 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index c5ef6ca..9a195c5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "checklist-frontend",
   "private": true,
-  "version": "1.2.3",
+  "version": "1.2.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/frontend/public/service-worker.js b/frontend/public/service-worker.js
index 35efd75..c6f001a 100644
--- a/frontend/public/service-worker.js
+++ b/frontend/public/service-worker.js
@@ -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.3';
+const CACHE_NAME = 'ayutec-v1.2.4';
 const urlsToCache = [
   '/',
   '/index.html'
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index d1a78b9..44ac903 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -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>
   )
diff --git a/frontend/src/Sidebar.jsx b/frontend/src/Sidebar.jsx
index 4380914..05ee169 100644
--- a/frontend/src/Sidebar.jsx
+++ b/frontend/src/Sidebar.jsx
@@ -153,7 +153,7 @@ export default function Sidebar({ user, activeTab, setActiveTab, sidebarOpen, se
                 className="w-10 h-10 object-contain bg-white rounded p-1"
               />
               <p className="text-xs text-indigo-300 font-medium hover:text-indigo-200">
-                Ayutec v1.2.3
+                Ayutec v1.2.4
               </p>
             </a>
           </div>