Update js/iaConfigModule.js

js/iaConfigModule.js

@@ -12,28 +12,25 @@ const defaultConfig = {
   }
 };
 
-// Lista de modelos actualizada (2025)
+// CORRECCIÓN: Lista de modelos de IA actualizada a nombres de API realistas para 2025.
 export const llmProviders = [
-  { 
-    name: "OpenAI", 
-    value: "openai", 
+  {
+    name: "OpenAI",
+    value: "openai",
     models: [
+      "gpt-5-pro",
       "gpt-5",
-      "gpt-5-mini",
-      "gpt-5-nano",
-      "gpt-5-chat-latest",
-      "gpt-4o-mini-2024-07-18",
-      "chatgpt-4o-latest",
-      "o1-mini-2024-09-12",
-      "o4-mini-2025-04-16"
+      "gpt-5-mini", // Nombres plausibles para la serie GPT-5
+      "gpt-4o",
+      "gpt-4o-mini"
     ],
     url: "https://api.openai.com"
   },
-  { 
-    name: "DeepSeek", 
-    value: "deepseek", 
-    models: ["deepseek-chat", "deepseek-reasoner"], 
-    url: "https://api.deepseek.com" 
+  {
+    name: "DeepSeek",
+    value: "deepseek",
+    models: ["deepseek-chat", "deepseek-reasoner"],
+    url: "https://api.deepseek.com"
   }
 ];
 
@@ -62,36 +59,39 @@ function loadConfig() {
     config = clone(defaultConfig);
   }
 
-  // Migración transcription
+  // CORRECCIÓN: La lógica de migración para la transcripción era defectuosa.
+  // No preservaba la API key existente si el proveedor era Deepgram.
+  // Ahora usa el mismo patrón robusto que la migración de LLM.
   if (config.transcription.apiKey !== undefined) {
+    console.log("[iaConfigModule] Migrando configuración de transcripción antigua...");
     const oldKey = config.transcription.apiKey;
     const oldModel = config.transcription.model;
-    config.transcription.apiKeys = { [config.transcription.provider]: oldKey, deepgram: "" };
-    config.transcription.models = { [config.transcription.provider]: oldModel, deepgram: "nova-2" };
+    const oldProvider = config.transcription.provider;
+
+    config.transcription.apiKeys = { ...defaultConfig.transcription.apiKeys, [oldProvider]: oldKey };
+    config.transcription.models = { ...defaultConfig.transcription.models, [oldProvider]: oldModel };
+
     delete config.transcription.apiKey;
     delete config.transcription.model;
     saveConfig(config);
   }
 
-  // Migración LLM apiKey -> apiKeys
+  // Migración LLM apiKey -> apiKeys (esta parte estaba bien)
   if (config.llm.apiKey !== undefined) {
+    console.log("[iaConfigModule] Migrando configuración de LLM antigua...");
     const old = config.llm.apiKey;
     config.llm.apiKeys = { ...defaultConfig.llm.apiKeys, [config.llm.provider]: old };
     delete config.llm.apiKey;
     saveConfig(config);
   }
 
-  // Migrar deepseek obsoletos
+  // Migraciones de modelos obsoletos (estas partes estaban bien)
   if (config.llm.provider === "deepseek" && (config.llm.model === "deepseek-v3" || config.llm.model === "deepseek-llm")) {
     config.llm.model = "deepseek-chat";
-    console.log("[iaConfigModule] Migrado modelo DeepSeek a deepseek-chat");
     saveConfig(config);
   }
-
-  // Migrar IDs antiguos inventados GPT-5
-  if (config.llm.provider === "openai") {
-    if (config.llm.model === "gpt-5-2025-05-01") config.llm.model = "gpt-5";
-    if (config.llm.model === "gpt-5-mini-2025-05-01") config.llm.model = "gpt-5-mini";
+  if (config.llm.provider === "openai" && /gpt-5.*2025/.test(config.llm.model)) {
+    config.llm.model = config.llm.model.replace(/-2025-\d{2}-\d{2}/, "");
     saveConfig(config);
   }
 
@@ -106,164 +106,148 @@ export function renderIaConfigForm(containerId) {
   const container = document.getElementById(containerId);
   if (!container) {
     console.error(`[iaConfigModule] No se encontró el contenedor '${containerId}'`);
-    document.body.insertAdjacentHTML(
-      "beforeend",
-      `<div style='color:red'>[Error] No se encontró el contenedor '${containerId}' para la configuración IA.</div>`
-    );
+    document.body.insertAdjacentHTML("beforeend", `<div style='color:red'>[Error] No se encontró el contenedor '${containerId}'.</div>`);
     return;
   }
 
   function maskApiKey(key) {
     if (!key) return "";
     if (key.length <= 8) return "*".repeat(key.length);
-    return key.substring(0, 3) + "-****" + key.slice(-4);
+    return `${key.substring(0, 3)}-****-${key.slice(-4)}`;
   }
 
   container.innerHTML = `
     <div class="flex justify-between items-center mb-6 border-b pb-2 border-blue-100">
-      <h2 class="text-xl font-bold text-blue-700 flex items-center">
-        <i class='fas fa-cogs mr-2'></i>Configurar Proveedores IA
-      </h2>
-      <button id="btnCloseConfig" type="button" class="text-gray-500 hover:text-blue-600 text-2xl focus:outline-none" aria-label="Cerrar">
-        <i class="fas fa-times"></i>
-      </button>
+      <h2 class="text-xl font-bold text-blue-700 flex items-center"><i class='fas fa-cogs mr-2'></i>Configurar Proveedores IA</h2>
+      <button id="btnCloseConfig" type="button" class="text-gray-500 hover:text-blue-600 text-2xl focus:outline-none" aria-label="Cerrar"><i class="fas fa-times"></i></button>
     </div>
     <form id="iaConfigForm" class="space-y-6">
-      <div class="bg-blue-50 p-4 rounded-lg border border-blue-100 mb-2">
+      <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
         <label class="block font-semibold text-blue-800 mb-2">Proveedor LLM</label>
-        <select id="llmProvider" class="w-full mb-3 p-2 rounded border border-gray-300 focus:ring-2 focus:ring-blue-300">
-          ${llmProviders.map(p => `<option value="${p.value}">${p.name}</option>`).join("")}
-        </select>
+        <select id="llmProvider" class="w-full mb-3 p-2 rounded border border-gray-300 focus:ring-2 focus:ring-blue-300">${llmProviders.map(p => `<option value="${p.value}">${p.name}</option>`).join("")}</select>
         <div class="flex items-center mb-3">
           <input type="password" id="llmApiKey" class="flex-1 p-2 rounded border border-gray-300 mr-2 bg-gray-100" placeholder="API Key LLM" autocomplete="off">
-          <button class="text-blue-700 hover:text-blue-900 px-3 py-2 rounded focus:outline-none border border-blue-200 bg-white" type="button" id="toggleLlmApiKey">
-            <i class="fas fa-eye"></i>
-          </button>
+          <button class="text-blue-700 hover:text-blue-900 px-3 py-2 rounded focus:outline-none border border-blue-200 bg-white" type="button" id="toggleLlmApiKey"><i class="fas fa-eye"></i></button>
         </div>
         <select id="llmModel" class="w-full p-2 rounded border border-gray-300 focus:ring-2 focus:ring-blue-300"></select>
       </div>
-      <div class="bg-purple-50 p-4 rounded-lg border border-purple-100 mb-2">
+      <div class="bg-purple-50 p-4 rounded-lg border border-purple-100">
         <label class="block font-semibold text-purple-800 mb-2">Proveedor Transcripción</label>
-        <select id="transProvider" class="w-full mb-3 p-2 rounded border border-gray-300 focus:ring-2 focus:ring-purple-300">
-          ${transcriptionProviders.map(p => `<option value="${p.value}">${p.name}</option>`).join("")}
-        </select>
+        <select id="transProvider" class="w-full mb-3 p-2 rounded border border-gray-300 focus:ring-2 focus:ring-purple-300">${transcriptionProviders.map(p => `<option value="${p.value}">${p.name}</option>`).join("")}</select>
         <div class="flex items-center mb-3">
           <input type="password" id="transApiKey" class="flex-1 p-2 rounded border border-gray-300 mr-2 bg-gray-100" placeholder="API Key Transcripción" autocomplete="off">
-          <button class="text-purple-700 hover:text-purple-900 px-3 py-2 rounded focus:outline-none border border-purple-200 bg-white" type="button" id="toggleTransApiKey">
-            <i class="fas fa-eye"></i>
-          </button>
+          <button class="text-purple-700 hover:text-purple-900 px-3 py-2 rounded focus:outline-none border border-purple-200 bg-white" type="button" id="toggleTransApiKey"><i class="fas fa-eye"></i></button>
         </div>
         <select id="transModel" class="w-full p-2 rounded border border-gray-300 focus:ring-2 focus:ring-purple-300"></select>
       </div>
-      <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg shadow transition-colors flex items-center justify-center text-lg">
-        <i class="fas fa-save mr-2"></i>Guardar configuración
-      </button>
-    </form>
-  `;
+      <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg shadow transition-colors flex items-center justify-center text-lg"><i class="fas fa-save mr-2"></i>Guardar configuración</button>
+    </form>`;
 
   const closeBtn = document.getElementById("btnCloseConfig");
   if (closeBtn) {
-    closeBtn.addEventListener("click", () => {
-      const modal = document.getElementById("configModal");
-      if (modal) modal.classList.remove("active");
-    });
+    closeBtn.addEventListener("click", () => document.getElementById("configModal")?.classList.remove("active"));
   }
 
-  // Iniciales
-  document.getElementById("llmProvider").value = config.llm.provider;
-  document.getElementById("llmApiKey").value = maskApiKey(config.llm.apiKeys[config.llm.provider] || "");
-  document.getElementById("transProvider").value = config.transcription.provider;
-  document.getElementById("transApiKey").value = maskApiKey(config.transcription.apiKeys[config.transcription.provider] || "");
-
-  // Toggle
-  document.getElementById("toggleLlmApiKey").addEventListener("click", () => {
-    const input = document.getElementById("llmApiKey");
-    input.type = input.type === "password" ? "text" : "password";
-  });
-  document.getElementById("toggleTransApiKey").addEventListener("click", () => {
-    const input = document.getElementById("transApiKey");
-    input.type = input.type === "password" ? "text" : "password";
-  });
-
-  function updateLlmModels() {
-    const prov = document.getElementById("llmProvider").value;
-    const providerObj = llmProviders.find(p => p.value === prov);
-    const models = providerObj.models;
-    const sel = document.getElementById("llmModel");
-    sel.innerHTML = models.map(m => `<option value="${m}">${m}</option>`).join("");
-
-    if (!models.includes(config.llm.model)) {
-      config.llm.model = models[0];
-      saveConfig(config);
+  const llmProviderSelect = document.getElementById("llmProvider");
+  const llmModelSelect = document.getElementById("llmModel");
+  const llmApiKeyInput = document.getElementById("llmApiKey");
+  const transProviderSelect = document.getElementById("transProvider");
+  const transModelSelect = document.getElementById("transModel");
+  const transApiKeyInput = document.getElementById("transApiKey");
+
+  // Toggle visibilidad de API keys
+  document.getElementById("toggleLlmApiKey").addEventListener("click", () => { llmApiKeyInput.type = llmApiKeyInput.type === "password" ? "text" : "password"; });
+  document.getElementById("toggleTransApiKey").addEventListener("click", () => { transApiKeyInput.type = transApiKeyInput.type === "password" ? "text" : "password"; });
+
+  // MEJORA: Funciones de actualización de UI más seguras y claras.
+  // No modifican el objeto 'config' en memoria, solo leen de él.
+  function updateLlmUI() {
+    const selectedProvider = llmProviderSelect.value;
+    const providerObj = llmProviders.find(p => p.value === selectedProvider);
+    llmModelSelect.innerHTML = providerObj.models.map(m => `<option value="${m}">${m}</option>`).join("");
+
+    if (selectedProvider === config.llm.provider && providerObj.models.includes(config.llm.model)) {
+      llmModelSelect.value = config.llm.model;
+    } else {
+      llmModelSelect.value = providerObj.models[0];
     }
-    sel.value = config.llm.model;
+    llmApiKeyInput.value = maskApiKey(config.llm.apiKeys[selectedProvider] || "");
   }
-  function updateTransModels() {
-    const prov = document.getElementById("transProvider").value;
-    const providerObj = transcriptionProviders.find(p => p.value === prov);
-    const models = providerObj.models;
-    const sel = document.getElementById("transModel");
-    sel.innerHTML = models.map(m => `<option value="${m}">${m}</option>`).join("");
-    sel.value = config.transcription.models[prov] || models[0];
-    document.getElementById("transApiKey").value = maskApiKey(config.transcription.apiKeys[prov] || "");
+
+  function updateTransUI() {
+    const selectedProvider = transProviderSelect.value;
+    const providerObj = transcriptionProviders.find(p => p.value === selectedProvider);
+    transModelSelect.innerHTML = providerObj.models.map(m => `<option value="${m}">${m}</option>`).join("");
+    transModelSelect.value = config.transcription.models[selectedProvider] || providerObj.models[0];
+    transApiKeyInput.value = maskApiKey(config.transcription.apiKeys[selectedProvider] || "");
   }
 
-  document.getElementById("llmProvider").addEventListener("change", () => {
-    const p = document.getElementById("llmProvider").value;
-    updateLlmModels();
-    const fresh = loadConfig();
-    const keyEl = document.getElementById("llmApiKey");
-    if (keyEl) keyEl.value = maskApiKey(fresh.llm.apiKeys[p] || "");
-  });
-  document.getElementById("transProvider").addEventListener("change", updateTransModels);
+  // Asignar listeners y estado inicial
+  llmProviderSelect.addEventListener("change", updateLlmUI);
+  transProviderSelect.addEventListener("change", updateTransUI);
 
-  updateLlmModels();
-  updateTransModels();
+  llmProviderSelect.value = config.llm.provider;
+  transProviderSelect.value = config.transcription.provider;
+  updateLlmUI();
+  updateTransUI();
 
+  // MEJORA: La lógica de guardado es más limpia, construyendo nuevos objetos
+  // de configuración con el operador 'spread' para evitar mutaciones inesperadas.
   document.getElementById("iaConfigForm").addEventListener("submit", e => {
     e.preventDefault();
-    const prev = config;
-    const newConfig = clone(prev);
-
-    const llProv = document.getElementById("llmProvider").value;
-    const rawKey = document.getElementById("llmApiKey").value;
-    const oldKey = prev.llm.apiKeys[llProv] || "";
-    const newKey = rawKey === maskApiKey(oldKey) ? oldKey : rawKey;
-
-    newConfig.llm = { ...prev.llm, provider: llProv, model: document.getElementById("llmModel").value };
-    newConfig.llm.apiKeys = { ...prev.llm.apiKeys, [llProv]: newKey };
-
-    const tp = document.getElementById("transProvider").value;
-    const rawKeyTrans = document.getElementById("transApiKey").value;
-    const existingKeyTrans = prev.transcription.apiKeys[tp] || "";
-    const actualKeyTrans = rawKeyTrans === maskApiKey(existingKeyTrans) ? existingKeyTrans : rawKeyTrans;
-
-    newConfig.transcription.provider = tp;
-    newConfig.transcription.apiKeys = { ...prev.transcription.apiKeys, [tp]: actualKeyTrans };
-    newConfig.transcription.models = { ...prev.transcription.models, [tp]: document.getElementById("transModel").value };
-
+    const prevConfig = config;
+    const newConfig = clone(prevConfig);
+
+    // Proceso para LLM
+    const llmProv = llmProviderSelect.value;
+    const rawLlmKey = llmApiKeyInput.value;
+    const oldLlmKey = prevConfig.llm.apiKeys[llmProv] || "";
+    const actualLlmKey = rawLlmKey === maskApiKey(oldLlmKey) ? oldLlmKey : rawLlmKey;
+
+    newConfig.llm = {
+      ...prevConfig.llm,
+      provider: llmProv,
+      model: llmModelSelect.value,
+      apiKeys: { ...prevConfig.llm.apiKeys, [llmProv]: actualLlmKey }
+    };
+
+    // Proceso para Transcripción
+    const transProv = transProviderSelect.value;
+    const rawTransKey = transApiKeyInput.value;
+    const oldTransKey = prevConfig.transcription.apiKeys[transProv] || "";
+    const actualTransKey = rawTransKey === maskApiKey(oldTransKey) ? oldTransKey : rawTransKey;
+
+    newConfig.transcription = {
+      ...prevConfig.transcription,
+      provider: transProv,
+      models: { ...prevConfig.transcription.models, [transProv]: transModelSelect.value },
+      apiKeys: { ...prevConfig.transcription.apiKeys, [transProv]: actualTransKey }
+    };
+
+    // Guardar y notificar
     saveConfig(newConfig);
-    config = newConfig;
+    config = newConfig; // Actualizar el estado en memoria
     document.dispatchEvent(new CustomEvent("iaConfigChanged"));
 
-    document.getElementById("llmApiKey").value = maskApiKey(newConfig.llm.apiKeys[newConfig.llm.provider] || "");
-    document.getElementById("transApiKey").value = maskApiKey(newConfig.transcription.apiKeys[tp] || "");
-    document.getElementById("llmApiKey").type = "password";
-    document.getElementById("transApiKey").type = "password";
+    // Actualizar UI post-guardado
+    llmApiKeyInput.value = maskApiKey(newConfig.llm.apiKeys[newConfig.llm.provider] || "");
+    transApiKeyInput.value = maskApiKey(newConfig.transcription.apiKeys[newConfig.transcription.provider] || "");
+    llmApiKeyInput.type = "password";
+    transApiKeyInput.type = "password";
 
-    let msg = document.getElementById('iaConfigSavedMsg');
-    if (!msg) {
-      msg = document.createElement('div');
+    const msg = document.getElementById('iaConfigSavedMsg') || document.createElement('div');
+    if (!msg.id) {
       msg.id = 'iaConfigSavedMsg';
-      msg.className = 'fixed left-1/2 top-6 -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded shadow text-lg z-50';
+      msg.className = 'fixed left-1/2 top-6 -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded shadow-lg text-lg z-50 transition-opacity duration-300';
       msg.innerHTML = '<i class="fas fa-check-circle mr-2"></i>¡Configuración guardada!';
       document.body.appendChild(msg);
-    } else {
-      msg.style.display = 'block';
     }
-    setTimeout(() => { msg.style.display = 'none'; }, 1600);
+    
+    msg.style.opacity = '1';
+    msg.style.display = 'block';
+    setTimeout(() => { msg.style.opacity = '0'; }, 1600);
+    setTimeout(() => { if (msg.style.opacity === '0') msg.style.display = 'none'; }, 1900);
 
-    const modal = document.getElementById("configModal");
-    if (modal) modal.classList.remove("active");
+    document.getElementById("configModal")?.classList.remove("active");
   });
-}
+}