From a8afaa044fad2ea5b37abee647926a80b46faf74 Mon Sep 17 00:00:00 2001
From: ronalds <ronalds@rshtech.com.py>
Date: Thu, 4 Dec 2025 11:58:45 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20Frontend=20actualizado=20a=20v1.2.7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cambios en esta versión:

Fix: Selección visual de modelos ahora se muestra inmediatamente al hacer click en un proveedor
Los modelos se muestran seleccionados en el formulario antes de guardar la configuración
---
 frontend/package.json             |  2 +-
 frontend/public/service-worker.js |  2 +-
 frontend/src/App.jsx              | 15 ++++++++-------
 frontend/src/Sidebar.jsx          |  2 +-
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 25d7c97..993eae9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "checklist-frontend",
   "private": true,
-  "version": "1.2.6",
+  "version": "1.2.7",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/frontend/public/service-worker.js b/frontend/public/service-worker.js
index 01e74d1..815bf26 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.6';
+const CACHE_NAME = 'ayutec-v1.2.7';
 const urlsToCache = [
   '/',
   '/index.html'
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index d7d7cec..30fffe1 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -680,7 +680,7 @@ function SettingsTab({ user }) {
           <div className="flex gap-4 mt-4">
             <button
               type="button"
-              onClick={() => setFormData({ ...formData, provider: 'openai' })}
+              onClick={() => setFormData({ ...formData, provider: 'openai', model_name: 'gpt-4o' })}
               className={`p-4 border-2 rounded-lg transition ${formData.provider === 'openai' ? 'border-indigo-500 bg-indigo-50' : 'border-gray-300 hover:border-gray-400'}`}
             >
               <div className="text-4xl mb-2">🤖</div>
@@ -695,7 +695,7 @@ function SettingsTab({ user }) {
             </button>
             <button
               type="button"
-              onClick={() => setFormData({ ...formData, provider: 'anthropic' })}
+              onClick={() => setFormData({ ...formData, provider: 'anthropic', model_name: 'claude-sonnet-4-5' })}
               className={`p-4 border-2 rounded-lg transition ${formData.provider === 'anthropic' ? 'border-purple-500 bg-purple-50' : 'border-gray-300 hover:border-gray-400'}`}
             >
               <div className="text-4xl mb-2">🧠</div>
@@ -710,7 +710,7 @@ function SettingsTab({ user }) {
             </button>
             <button
               type="button"
-              onClick={() => setFormData({ ...formData, provider: 'gemini' })}
+              onClick={() => setFormData({ ...formData, provider: 'gemini', model_name: 'gemini-2.5-pro' })}
               className={`p-4 border-2 rounded-lg transition ${formData.provider === 'gemini' ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-gray-400'}`}
             >
               <div className="text-4xl mb-2">✨</div>
@@ -765,16 +765,17 @@ function SettingsTab({ user }) {
           ) : (
             <div className="space-y-3">
               {filteredModels.map((model) => {
-                // Solo marcar como checked si este proveedor está activo Y es el modelo activo
-                const isActiveModel = activeProvider === formData.provider && formData.model_name === model.id;
+                // Mostrar como seleccionado si coincide con formData.model_name
+                // (independientemente de si el proveedor está activo o no)
+                const isSelected = formData.model_name === model.id;
                 
                 return (
-                  <label key={model.id} className={`flex items-center gap-3 p-3 border rounded-lg cursor-pointer transition ${isActiveModel ? 'border-indigo-500 bg-indigo-50' : 'border-gray-300 hover:border-gray-400'}`}>
+                  <label key={model.id} className={`flex items-center gap-3 p-3 border rounded-lg cursor-pointer transition ${isSelected ? 'border-indigo-500 bg-indigo-50' : 'border-gray-300 hover:border-gray-400'}`}>
                     <input
                       type="radio"
                       name="model_name"
                       value={model.id}
-                      checked={isActiveModel}
+                      checked={isSelected}
                       onChange={() => setFormData({ ...formData, model_name: model.id })}
                       className="form-radio text-indigo-600"
                     />
diff --git a/frontend/src/Sidebar.jsx b/frontend/src/Sidebar.jsx
index 51f0856..be90127 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.6
+                Ayutec v1.2.7
               </p>
             </a>
           </div>