Update js/iaConfigModule.js

js/iaConfigModule.js

@@ -1,5 +1,4 @@
 // js/iaConfigModule.js
-
 const defaultConfig = {
   llm: {
     provider: "deepseek",
@@ -13,244 +12,72 @@ const defaultConfig = {
   }
 };
 
-// Lista de modelos actualizada y corregida (2025)
+// Lista de modelos actualizada (2024)
 export const llmProviders = [
-  { 
-    name: "OpenAI", 
-    value: "openai", 
-    models: [
-      "gpt-4o",
-      "gpt-4o-mini",
-      "gpt-4-turbo",
-      "gpt-4",
-      "gpt-3.5-turbo",
-      "o1-preview",
-      "o1-mini"
-    ],
-    url: "https://api.openai.com/v1"
-  },
-  { 
-    name: "DeepSeek", 
-    value: "deepseek", 
-    models: ["deepseek-chat", "deepseek-reasoner"], 
-    url: "https://api.deepseek.com/v1" 
-  }
+  { name: "OpenAI", value: "openai", models: ["gpt-4o-mini-2024-07-18","chatgpt-4o-latest","o1-mini-2024-09-12","o4-mini-2025-04-16"], url: "https://api.openai.com" },
+  // { name: "Gemini", value: "gemini", models: [
+  //   "gemini-2.5-flash-preview-04-17",    // Versión preliminar de Gemini 2.5 Flash 04-17
+  //   "gemini-2.0-flash",                  // Gemini 2.0 Flash
+  //   "gemini-2.0-flash-lite",             // Gemini 2.0 Flash-Lite
+  //   "gemini-1.5-flash"                   // Gemini 1.5 Flash
+  // ], url: "https://generativelanguage.googleapis.com" },
+  { name: "DeepSeek", value: "deepseek", models: ["deepseek-chat", "deepseek-reasoner"], url: "https://api.deepseek.com" }
 ];
-
 export const transcriptionProviders = [
-  { 
-    name: "OpenAI Whisper", 
-    value: "openai", 
-    models: ["whisper-1"], 
-    url: "https://api.openai.com/v1/audio/transcriptions" 
-  },
-  { 
-    name: "Deepgram", 
-    value: "deepgram", 
-    models: ["nova-2", "nova", "enhanced", "base"], 
-    url: "https://api.deepgram.com/v1/listen" 
-  }
+  { name: "OpenAI Whisper", value: "openai", models: ["whisper-1"], url: "https://api.openai.com" },
+  { name: "Deepgram", value: "deepgram", models: ["nova-2", "whisper-large"], url: "https://api.deepgram.com" }
 ];
 
 function saveConfig(config) {
-  try {
-    // Validar que tenemos un objeto válido antes de guardar
-    if (!config || typeof config !== 'object') {
-      console.error("[iaConfigModule] Configuración inválida para guardar");
-      return false;
-    }
-    
-    // Verificar si localStorage está disponible
-    if (typeof Storage === "undefined") {
-      console.error("[iaConfigModule] LocalStorage no disponible");
-      return false;
-    }
-    
-    localStorage.setItem("iaConfig", JSON.stringify(config));
-    console.log("[iaConfigModule] Configuración guardada correctamente");
-    return true;
-  } catch (e) {
-    console.error("[iaConfigModule] Error guardando config:", e);
-    return false;
-  }
+  localStorage.setItem("iaConfig", JSON.stringify(config));
 }
-
-function clone(obj) {
-  if (!obj) return null;
-  try { 
-    return structuredClone(obj); 
-  } catch { 
-    return JSON.parse(JSON.stringify(obj)); 
-  }
-}
-
 function loadConfig() {
-  let config;
-  try {
-    const stored = localStorage.getItem("iaConfig");
-    if (stored) {
-      config = JSON.parse(stored);
-      // Validar estructura básica
-      if (!config.llm || !config.transcription) {
-        throw new Error("Estructura de configuración inválida");
-      }
-    } else {
-      config = clone(defaultConfig);
-    }
-  } catch (error) {
-    console.warn("[iaConfigModule] Error cargando config, usando default:", error);
-    config = clone(defaultConfig);
-  }
-
-  // Asegurar estructura completa
-  config = {
-    ...clone(defaultConfig),
-    ...config,
-    llm: {
-      ...defaultConfig.llm,
-      ...config.llm,
-      apiKeys: {
-        ...defaultConfig.llm.apiKeys,
-        ...(config.llm?.apiKeys || {})
-      }
-    },
-    transcription: {
-      ...defaultConfig.transcription,
-      ...config.transcription,
-      apiKeys: {
-        ...defaultConfig.transcription.apiKeys,
-        ...(config.transcription?.apiKeys || {})
-      },
-      models: {
-        ...defaultConfig.transcription.models,
-        ...(config.transcription?.models || {})
-      }
-    }
-  };
-
-  // Migración: transcription apiKey único -> apiKeys
+  const config = JSON.parse(localStorage.getItem("iaConfig")) || defaultConfig;
+  // Migrar configuración antigua de transcription
   if (config.transcription.apiKey !== undefined) {
     const oldKey = config.transcription.apiKey;
-    const provider = config.transcription.provider || "openai";
-    config.transcription.apiKeys = { 
-      ...config.transcription.apiKeys,
-      [provider]: oldKey 
-    };
+    const oldModel = config.transcription.model;
+    config.transcription.apiKeys = { [config.transcription.provider]: oldKey, deepgram: "" };
+    config.transcription.models = { [config.transcription.provider]: oldModel, deepgram: "nova-2" };
     delete config.transcription.apiKey;
-    delete config.transcription.model; // También eliminar model único si existe
+    delete config.transcription.model;
     saveConfig(config);
-    console.log("[iaConfigModule] Migrado transcription.apiKey a apiKeys");
   }
-
-  // Migración: LLM apiKey único -> apiKeys
+  // Migrar configuración antigua de LLM apiKey a apiKeys
   if (config.llm.apiKey !== undefined) {
-    const oldKey = config.llm.apiKey;
-    const provider = config.llm.provider || "deepseek";
-    config.llm.apiKeys = { 
-      ...config.llm.apiKeys,
-      [provider]: oldKey 
-    };
+    const old = config.llm.apiKey;
+    config.llm.apiKeys = { ...defaultConfig.llm.apiKeys, [config.llm.provider]: old };
     delete config.llm.apiKey;
     saveConfig(config);
-    console.log("[iaConfigModule] Migrado llm.apiKey a apiKeys");
-  }
-
-  // Corregir modelos obsoletos o inexistentes de DeepSeek
-  if (config.llm.provider === "deepseek") {
-    const validDeepSeekModels = ["deepseek-chat", "deepseek-reasoner"];
-    if (!validDeepSeekModels.includes(config.llm.model)) {
-      config.llm.model = "deepseek-chat";
-      console.log("[iaConfigModule] Corregido modelo DeepSeek a deepseek-chat");
-      saveConfig(config);
-    }
-  }
-
-  // Corregir modelos inexistentes de OpenAI (GPT-5 no existe aún)
-  if (config.llm.provider === "openai") {
-    const validOpenAIModels = [
-      "gpt-4o", "gpt-4o-mini", "gpt-4-turbo", "gpt-4", 
-      "gpt-3.5-turbo", "o1-preview", "o1-mini"
-    ];
-    
-    // Lista de modelos fictícios a corregir
-    const fakeModels = [
-      "gpt-5", "gpt-5-mini", "gpt-5-nano", "gpt-5-chat-latest",
-      "gpt-5-2025-05-01", "gpt-5-mini-2025-05-01", "chatgpt-4o-latest",
-      "o4-mini-2025-04-16"
-    ];
-    
-    if (fakeModels.includes(config.llm.model) || !validOpenAIModels.includes(config.llm.model)) {
-      config.llm.model = "gpt-4o"; // Usar el mejor modelo disponible real
-      console.log("[iaConfigModule] Corregido modelo OpenAI fictício a gpt-4o");
-      saveConfig(config);
-    }
   }
-
-  // Validar modelos de transcripción
-  if (config.transcription.provider === "deepgram") {
-    const validDeepgramModels = ["nova-2", "nova", "enhanced", "base"];
-    const currentModel = config.transcription.models?.deepgram;
-    if (!validDeepgramModels.includes(currentModel)) {
-      config.transcription.models.deepgram = "nova-2";
-      console.log("[iaConfigModule] Corregido modelo Deepgram a nova-2");
-      saveConfig(config);
-    }
+  // Migrar modelos obsoletos de DeepSeek a 'deepseek-chat'
+  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);
   }
-
   return config;
 }
-
 export function getIaConfig() {
   return loadConfig();
 }
 
-export function validateApiKey(provider, apiKey) {
-  if (!apiKey || apiKey.trim() === '') return false;
-  
-  switch (provider) {
-    case 'openai':
-      return apiKey.startsWith('sk-') && apiKey.length >= 20;
-    case 'deepseek':
-      return apiKey.startsWith('sk-') && apiKey.length >= 20;
-    case 'deepgram':
-      return apiKey.length >= 30; // Deepgram keys son más largas
-    default:
-      return apiKey.length >= 10;
-  }
-}
-
 export function renderIaConfigForm(containerId) {
   let config = loadConfig();
   const container = document.getElementById(containerId);
-  
   if (!container) {
-    console.error(`[iaConfigModule] No se encontró el contenedor '${containerId}'`);
-    const errorDiv = document.createElement('div');
-    errorDiv.style.cssText = 'color:red; padding:10px; border:1px solid red; margin:10px; border-radius:5px;';
-    errorDiv.innerHTML = `[Error] No se encontró el contenedor '${containerId}' para la configuración IA.`;
-    document.body.appendChild(errorDiv);
+    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>);
     return;
   }
 
   function maskApiKey(key) {
-    if (!key || key.trim() === '') return '';
+    if (!key) return '';
     if (key.length <= 8) return '*'.repeat(key.length);
-    return key.substring(0, 4) + '-****-' + key.slice(-4);
+    return key.substring(0, 3) + '-****' + key.slice(-4);
   }
 
-  function showError(message) {
-    const existingError = container.querySelector('.config-error');
-    if (existingError) existingError.remove();
-    
-    const errorDiv = document.createElement('div');
-    errorDiv.className = 'config-error bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4';
-    errorDiv.innerHTML = `<i class="fas fa-exclamation-triangle mr-2"></i>${message}`;
-    container.insertBefore(errorDiv, container.firstChild);
-    
-    setTimeout(() => errorDiv.remove(), 5000);
-  }
-
-  container.innerHTML = `
+  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
@@ -259,277 +86,141 @@ export function renderIaConfigForm(containerId) {
         <i class="fas fa-times"></i>
       </button>
     </div>
-
     <form id="iaConfigForm" class="space-y-6">
-      <!-- Sección LLM -->
-      <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
-        <label class="block font-semibold text-blue-800 mb-2">
-          <i class="fas fa-brain mr-2"></i>Proveedor LLM
-        </label>
+      <div class="bg-blue-50 p-4 rounded-lg border border-blue-100 mb-2">
+        <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('')}
+          ${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 focus:ring-2 focus:ring-blue-300" 
-                 placeholder="API Key LLM (requerida)" 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 hover:bg-blue-50" 
-                  type="button" id="toggleLlmApiKey">
+          <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>
         </div>
         <select id="llmModel" class="w-full p-2 rounded border border-gray-300 focus:ring-2 focus:ring-blue-300"></select>
-        <div id="llmKeyStatus" class="text-xs mt-2 hidden"></div>
       </div>
-
-      <!-- Sección Transcripción -->
-      <div class="bg-purple-50 p-4 rounded-lg border border-purple-100">
-        <label class="block font-semibold text-purple-800 mb-2">
-          <i class="fas fa-microphone mr-2"></i>Proveedor Transcripción
-        </label>
+      <div class="bg-purple-50 p-4 rounded-lg border border-purple-100 mb-2">
+        <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('')}
+          ${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 focus:ring-2 focus:ring-purple-300" 
-                 placeholder="API Key Transcripción (requerida)" 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 hover:bg-purple-50" 
-                  type="button" id="toggleTransApiKey">
+          <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>
         </div>
         <select id="transModel" class="w-full p-2 rounded border border-gray-300 focus:ring-2 focus:ring-purple-300"></select>
-        <div id="transKeyStatus" class="text-xs mt-2 hidden"></div>
       </div>
-
-      <button type="submit" id="saveConfigBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg shadow transition-all duration-200 flex items-center justify-center text-lg">
+      <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>
-  `;
-
-  // Event listeners
-  const closeBtn = document.getElementById('btnCloseConfig');
-  closeBtn?.addEventListener('click', () => {
-    const modal = document.getElementById('configModal');
-    modal?.classList.remove('active');
-  });
+  ;
+
+  // Botón de cerrar modal
+  const closeBtn = document.getElementById("btnCloseConfig");
+  if (closeBtn) {
+    closeBtn.addEventListener("click", () => {
+      const modal = document.getElementById("configModal");
+      if (modal) modal.classList.remove("active");
+    });
+  }
 
-  // Valores 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] || '');
+  // Set initial values
+  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 password visibility
-  document.getElementById('toggleLlmApiKey').addEventListener('click', () => {
-    const input = document.getElementById('llmApiKey');
-    const icon = document.querySelector('#toggleLlmApiKey i');
-    if (input.type === 'password') {
-      input.type = 'text';
-      icon.className = 'fas fa-eye-slash';
-    } else {
-      input.type = 'password';
-      icon.className = 'fas fa-eye';
-    }
+  // API Key toggle (ver/ocultar)
+  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');
-    const icon = document.querySelector('#toggleTransApiKey i');
-    if (input.type === 'password') {
-      input.type = 'text';
-      icon.className = 'fas fa-eye-slash';
-    } else {
-      input.type = 'password';
-      icon.className = 'fas fa-eye';
-    }
+  document.getElementById("toggleTransApiKey").addEventListener("click", () => {
+    const input = document.getElementById("transApiKey");
+    input.type = input.type === "password" ? "text" : "password";
   });
 
+  // Populate models
   function updateLlmModels() {
-    const provider = document.getElementById('llmProvider').value;
-    const providerObj = llmProviders.find(p => p.value === provider);
-    if (!providerObj) {
-      console.error('[iaConfigModule] Proveedor LLM no encontrado:', provider);
-      return;
-    }
-
+    const prov = document.getElementById("llmProvider").value;
+    const providerObj = llmProviders.find(p => p.value === prov);
     const models = providerObj.models;
-    const modelSelect = document.getElementById('llmModel');
-    modelSelect.innerHTML = models.map(m => `<option value="${m}">${m}</option>`).join('');
-
-    // Seleccionar modelo actual o el primero si no es válido
-    const currentModel = config.llm.model;
-    if (models.includes(currentModel)) {
-      modelSelect.value = currentModel;
-    } else {
-      modelSelect.value = models[0];
-      config.llm.model = models[0];
-    }
+    const sel = document.getElementById("llmModel");
+    sel.innerHTML = models.map(m => <option value="${m}">${m}</option>).join("");
+    sel.value = config.llm.model;
   }
-
   function updateTransModels() {
-    const provider = document.getElementById('transProvider').value;
-    const providerObj = transcriptionProviders.find(p => p.value === provider);
-    if (!providerObj) {
-      console.error('[iaConfigModule] Proveedor de transcripción no encontrado:', provider);
-      return;
-    }
-
+    const prov = document.getElementById("transProvider").value;
+    const providerObj = transcriptionProviders.find(p => p.value === prov);
     const models = providerObj.models;
-    const modelSelect = document.getElementById('transModel');
-    modelSelect.innerHTML = models.map(m => `<option value="${m}">${m}</option>`).join('');
-
-    // Seleccionar modelo actual o el primero
-    const currentModel = config.transcription.models[provider];
-    if (models.includes(currentModel)) {
-      modelSelect.value = currentModel;
-    } else {
-      modelSelect.value = models[0];
-    }
-
-    // Actualizar API key mostrada
-    const apiKey = config.transcription.apiKeys[provider] || '';
-    document.getElementById('transApiKey').value = maskApiKey(apiKey);
-  }
-
-  // Event listeners para cambios de proveedor
-  document.getElementById('llmProvider').addEventListener('change', () => {
-    const provider = document.getElementById('llmProvider').value;
+    const sel = document.getElementById("transModel");
+    sel.innerHTML = models.map(m => <option value="${m}">${m}</option>).join("");
+    sel.value = config.transcription.models[prov] || models[0];
+    // Actualizar API Key input al cambiar proveedor
+    document.getElementById("transApiKey").value = maskApiKey(config.transcription.apiKeys[prov] || '');
+  }
+  document.getElementById("llmProvider").addEventListener("change", () => {
+    const p = document.getElementById("llmProvider").value;
     updateLlmModels();
-    
-    // Mostrar la API key correspondiente
-    const apiKey = config.llm.apiKeys[provider] || '';
-    document.getElementById('llmApiKey').value = maskApiKey(apiKey);
+    // Refrescar config con todas las llaves y mostrar la del proveedor seleccionado
+    const fresh = loadConfig();
+    const keyEl = document.getElementById("llmApiKey");
+    if (keyEl) keyEl.value = maskApiKey(fresh.llm.apiKeys[p] || '');
   });
-
-  document.getElementById('transProvider').addEventListener('change', updateTransModels);
-
-  // Inicializar modelos
+  document.getElementById("transProvider").addEventListener("change", updateTransModels);
   updateLlmModels();
   updateTransModels();
 
-  // Validación en tiempo real
-  function validateKeyInput(inputId, provider, statusId) {
-    const input = document.getElementById(inputId);
-    const status = document.getElementById(statusId);
-    
-    input.addEventListener('input', () => {
-      const key = input.value.trim();
-      if (key === '' || key.includes('*')) {
-        status.classList.add('hidden');
-        return;
-      }
-      
-      const isValid = validateApiKey(provider, key);
-      status.classList.remove('hidden');
-      
-      if (isValid) {
-        status.className = 'text-xs mt-2 text-green-600';
-        status.innerHTML = '<i class="fas fa-check mr-1"></i>Formato válido';
-      } else {
-        status.className = 'text-xs mt-2 text-red-600';
-        status.innerHTML = '<i class="fas fa-exclamation-triangle mr-1"></i>Formato inválido';
-      }
-    });
-  }
-
-  // No podemos validar dinámicamente porque el provider puede cambiar
-  // Validaremos en el submit
-
-  // Submit form
-  document.getElementById('iaConfigForm').addEventListener('submit', (e) => {
+  // Save on submit
+  document.getElementById("iaConfigForm").addEventListener("submit", e => {
     e.preventDefault();
-    
-    try {
-      const prevConfig = config;
-      const newConfig = clone(prevConfig);
-
-      // Procesar LLM
-      const llmProvider = document.getElementById('llmProvider').value;
-      const llmModelValue = document.getElementById('llmModel').value;
-      const rawLlmKey = document.getElementById('llmApiKey').value.trim();
-      
-      const oldLlmKey = prevConfig.llm.apiKeys[llmProvider] || '';
-      const newLlmKey = (rawLlmKey === maskApiKey(oldLlmKey)) ? oldLlmKey : rawLlmKey;
-
-      // Validar LLM API key
-      if (!newLlmKey || !validateApiKey(llmProvider, newLlmKey)) {
-        showError(`API Key de ${llmProvider.toUpperCase()} inválida o faltante`);
-        return;
-      }
-
-      newConfig.llm = {
-        provider: llmProvider,
-        model: llmModelValue,
-        apiKeys: { ...prevConfig.llm.apiKeys, [llmProvider]: newLlmKey }
-      };
-
-      // Procesar Transcripción
-      const transProvider = document.getElementById('transProvider').value;
-      const transModelValue = document.getElementById('transModel').value;
-      const rawTransKey = document.getElementById('transApiKey').value.trim();
-      
-      const oldTransKey = prevConfig.transcription.apiKeys[transProvider] || '';
-      const newTransKey = (rawTransKey === maskApiKey(oldTransKey)) ? oldTransKey : rawTransKey;
-
-      // Validar transcription API key
-      if (!newTransKey || !validateApiKey(transProvider, newTransKey)) {
-        showError(`API Key de ${transProvider === 'openai' ? 'OpenAI' : 'Deepgram'} inválida o faltante`);
-        return;
-      }
-
-      newConfig.transcription = {
-        provider: transProvider,
-        apiKeys: { ...prevConfig.transcription.apiKeys, [transProvider]: newTransKey },
-        models: { ...prevConfig.transcription.models, [transProvider]: transModelValue }
-      };
-
-      // Guardar configuración
-      if (!saveConfig(newConfig)) {
-        showError('Error guardando la configuración. Intente nuevamente.');
-        return;
-      }
-
-      config = newConfig;
-
-      // Disparar evento de cambio
-      document.dispatchEvent(new CustomEvent('iaConfigChanged', { detail: newConfig }));
-
-      // Actualizar campos con valores enmascarados
-      document.getElementById('llmApiKey').value = maskApiKey(newLlmKey);
-      document.getElementById('transApiKey').value = maskApiKey(newTransKey);
-      document.getElementById('llmApiKey').type = 'password';
-      document.getElementById('transApiKey').type = 'password';
-
-      // Resetear iconos de visibilidad
-      document.querySelector('#toggleLlmApiKey i').className = 'fas fa-eye';
-      document.querySelector('#toggleTransApiKey i').className = 'fas fa-eye';
-
-      // Mostrar mensaje de éxito
-      let successMsg = document.getElementById('iaConfigSavedMsg');
-      if (!successMsg) {
-        successMsg = document.createElement('div');
-        successMsg.id = 'iaConfigSavedMsg';
-        successMsg.className = 'fixed left-1/2 top-6 -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg text-lg z-50 transform transition-all duration-300';
-        successMsg.innerHTML = '<i class="fas fa-check-circle mr-2"></i>¡Configuración guardada correctamente!';
-        document.body.appendChild(successMsg);
-      } else {
-        successMsg.style.display = 'block';
-      }
-
-      setTimeout(() => {
-        if (successMsg) successMsg.style.display = 'none';
-      }, 3000);
-
-      // Cerrar modal
-      const modal = document.getElementById('configModal');
-      if (modal) {
-        modal.classList.remove('active');
-      }
-
-    } catch (error) {
-      console.error('[iaConfigModule] Error en submit:', error);
-      showError('Error inesperado guardando la configuración');
+    // Persistir configuración por proveedor
+    const prev = config;
+    const newConfig = { ...prev };
+    // LLM: provider, apiKeys y model
+    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 };
+    // Transcription: provider, apiKeys y models por proveedor
+    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 };
+    console.log('[iaConfigModule] Configuración guardada:', newConfig);
+    saveConfig(newConfig);
+    // Actualizar config local después de guardar
+    config = newConfig;
+    // Actualizar labels de modelo en la UI
+    document.dispatchEvent(new CustomEvent('iaConfigChanged'));
+    // Ofusca los campos API Key
+    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";
+    // Mensaje de éxito discreto
+    let msg = document.getElementById('iaConfigSavedMsg');
+    if (!msg) {
+      msg = document.createElement('div');
+      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.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'; }, 2000);
+    // Cierra el modal
+    const modal = document.getElementById("configModal");
+    if (modal) modal.classList.remove("active");
   });
 }