Update js/iaConfigModule.js

js/iaConfigModule.js

@@ -1,277 +1,254 @@
-// ==============================
-// File: js/iaConfigModule.js
-// ==============================
-
-/**
- * Gestión de configuración de IA en localStorage + UI.
- * - Proveedores soportados: OpenAI, DeepSeek
- * - Modelos OpenAI incluyen GPT‑5 / GPT‑5 mini y 4o / 4o‑mini
- */
-
-export const llmProviders = [
-  {
-    name: "OpenAI",
-    value: "openai",
-    models: ["gpt-5", "gpt-5-mini", "gpt-4o", "gpt-4o-mini"],
-    url: "https://api.openai.com"
+// js/iaConfigModule.js
+const defaultConfig = {
+  llm: {
+    provider: "deepseek",
+    apiKeys: { deepseek: "", openai: "" },
+    model: "deepseek-chat"
   },
-  {
-    name: "DeepSeek",
-    value: "deepseek",
-    models: ["deepseek-chat", "deepseek-reasoner"],
-    url: "https://api.deepseek.com"
+  transcription: {
+    provider: "openai",
+    apiKeys: { openai: "", deepgram: "" },
+    models: { openai: "whisper-1", deepgram: "nova-2" }
   }
+};
+// CORRECCIÓN: Nombres de modelos de OpenAI actualizados a versiones canónicas y estables.
+export const llmProviders = [
+  { name: "OpenAI", value: "openai", models: ["gpt-4o", "gpt-4o-mini"], url: "https://api.openai.com" },
+  { name: "DeepSeek", value: "deepseek", models: ["deepseek-chat", "deepseek-reasoner"], url: "https://api.deepseek.com" }
 ];
-
-const STORAGE_KEY = "iaConfig";
-
-export function loadConfig() {
+export const transcriptionProviders = [
+  { 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 {
-    const raw = localStorage.getItem(STORAGE_KEY);
-    if (!raw) return defaultConfig();
-    const parsed = JSON.parse(raw);
-    return normalizeConfig(parsed);
-  } catch {
-    return defaultConfig();
+    localStorage.setItem("iaConfig", JSON.stringify(config));
+  } catch (e) {
+    console.error("[iaConfigModule] Error guardando la configuración:", e);
   }
 }
 
-export function saveIaConfig(cfg) {
-  const normalized = normalizeConfig(cfg);
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(normalized));
-  return normalized;
+function clone(obj) {
+  // structuredClone es moderno y robusto, con un fallback seguro.
+  try {
+    return structuredClone(obj);
+  } catch (e) {
+    return JSON.parse(JSON.stringify(obj));
+  }
 }
 
-export function getIaConfig() {
-  return loadConfig();
-}
+function loadConfig() {
+  let config;
+  try {
+    const storedConfig = localStorage.getItem("iaConfig");
+    config = storedConfig ?
+      JSON.parse(storedConfig) : clone(defaultConfig);
+  } catch (error) {
+    console.error("[iaConfigModule] Error al parsear config, usando defaults.", error);
+    config = clone(defaultConfig);
+  }
 
-function defaultConfig() {
-  return {
-    llm: {
-      provider: "openai",
-      model: "gpt-4o",
-      apiKey: "",
-      baseUrl: providerBaseUrl("openai")
-    }
-  };
-}
+  let needsSave = false;
+
+  // CORRECCIÓN: La lógica de migración para 'transcription' era defectuosa.
+  // Podía borrar la API key de Deepgram si era el proveedor antiguo.
+  if (config.transcription.apiKey !== undefined) {
+    console.log("[iaConfigModule] Migrando config antigua de transcripción...");
+    const oldKey = config.transcription.apiKey;
+    const oldModel = config.transcription.model;
+    const oldProvider = config.transcription.provider;
+    // Se usa el spread operator para no perder las keys de otros proveedores.
+    config.transcription.apiKeys = { ...defaultConfig.transcription.apiKeys, [oldProvider]: oldKey };
+    config.transcription.models = { ...defaultConfig.transcription.models, [oldProvider]: oldModel };
+    delete config.transcription.apiKey;
+    delete config.transcription.model;
+    needsSave = true;
+  }
 
-function providerBaseUrl(provider) {
-  const p = llmProviders.find(p => p.value === provider);
-  return p?.url || "";
-}
+  if (config.llm.apiKey !== undefined) {
+    console.log("[iaConfigModule] Migrando config antigua de LLM...");
+    const old = config.llm.apiKey;
+    config.llm.apiKeys = { ...defaultConfig.llm.apiKeys, [config.llm.provider]: old };
+    delete config.llm.apiKey;
+    needsSave = true;
+  }
 
-function normalizeConfig(cfg) {
-  const provider = cfg?.llm?.provider || "openai";
-  const baseUrl = cfg?.llm?.baseUrl || providerBaseUrl(provider);
-  const model = cfg?.llm?.model || (provider === "openai" ? "gpt-4o" : "deepseek-chat");
-  const apiKey = cfg?.llm?.apiKey || "";
-  return { llm: { provider, model, apiKey, baseUrl } };
+  if (config.llm.provider === 'deepseek' && (config.llm.model === 'deepseek-v3' || config.llm.model === 'deepseek-llm')) {
+    config.llm.model = 'deepseek-chat';
+    needsSave = true;
+  }
+  
+  if (needsSave) {
+    saveConfig(config);
+  }
+  
+  return config;
 }
 
-/**
- * Prepara parámetros por defecto sin cambiar el shape específico
- * del payload (no convierte `input`↔`messages`).
- */
-export function prepareLlmApiParams(userPayload = {}) {
-  const cfg = loadConfig();
-  const model = cfg?.llm?.model || "gpt-4o";
-  return { model, ...userPayload };
+export function getIaConfig() {
+  return loadConfig();
 }
 
-/**
- * Renderiza un formulario simple para seleccionar proveedor/modelo/apiKey.
- * containerId debe ser un <div id="..."> existente.
- */
 export function renderIaConfigForm(containerId) {
-  const root = document.getElementById(containerId);
-  if (!root) return;
+  let config = loadConfig();
+  const container = document.getElementById(containerId);
+  // CORRECCIÓN: Errores de sintaxis en el manejo de errores.
+  if (!container) {
+    console.error(`[iaConfigModule] No se encontró el contenedor '${containerId}'`);
+    document.body.insertAdjacentHTML('beforeend', `<div style='color:red; padding: 1rem;'>[Error] No se encontró el contenedor '${containerId}' para la configuración IA.</div>`);
+    return;
+  }
 
-  const cfg = loadConfig();
+  function maskApiKey(key) {
+    if (!key) return '';
+    if (key.length <= 8) return '*'.repeat(key.length);
+    return `${key.substring(0, 3)}-****-${key.slice(-4)}`;
+  }
 
-  root.innerHTML = `
-    <form id="iaCfgForm" class="ia-form" style="display:grid;gap:.5rem;align-items:center;max-width:520px">
-      <label>
-        <span style="display:block;font-weight:600">Proveedor</span>
-        <select id="iaProvider" required>
-          ${llmProviders.map(p => `<option value="${p.value}">${p.name}</option>`).join("")}
-        </select>
-      </label>
-      <label>
-        <span style="display:block;font-weight:600">Modelo</span>
-        <select id="iaModel" required></select>
-      </label>
-      <label>
-        <span style="display:block;font-weight:600">API Key</span>
-        <input id="iaApiKey" type="password" placeholder="sk-..." autocomplete="off" />
-      </label>
-      <label>
-        <span style="display:block;font-weight:600">Base URL</span>
-        <input id="iaBaseUrl" type="text" placeholder="https://api.openai.com" />
-      </label>
-      <div style="display:flex;gap:.5rem">
-        <button type="submit">Guardar</button>
-        <button type="button" id="iaTestBtn">Probar</button>
+  // CORRECCIÓN: Errores de sintaxis en la plantilla HTML (faltaban backticks ``).
+  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>
+    </div>
+    <form id="iaConfigForm" class="space-y-6">
+      <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>
+  
+        <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>
+        </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">
+    
+        <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>
+        <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>
+        </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>
   `;
-
-  const selProvider = root.querySelector('#iaProvider');
-  const selModel = root.querySelector('#iaModel');
-  const inpApiKey = root.querySelector('#iaApiKey');
-  const inpBaseUrl = root.querySelector('#iaBaseUrl');
-  const form = root.querySelector('#iaCfgForm');
-  const btnTest = root.querySelector('#iaTestBtn');
-
-  function refreshModels() {
-    const provider = selProvider.value;
-    const def = llmProviders.find(p => p.value === provider);
-    const models = def?.models || [];
-    selModel.innerHTML = models.map(m => `<option value="${m}">${m}</option>`).join("");
+  // Elementos del DOM
+  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");
+
+  // Listeners
+  document.getElementById("btnCloseConfig")?.addEventListener("click", () => document.getElementById("configModal")?.classList.remove("active"));
+  document.getElementById("toggleLlmApiKey").addEventListener("click", () => { llmApiKeyInput.type = llmApiKeyInput.type === "password" ? "text" : "password"; });
+  document.getElementById("toggleTransApiKey").addEventListener("click", () => { transApiKeyInput.type = transApiKeyInput.type === "password" ? "text" : "password"; });
+  
+  // ===================== INICIO DE LA CORRECCIÓN =====================
+  // CORRECCIÓN: Lógica de actualización de UI refactorizada para ser más clara y correcta.
+  function updateLlmUI() {
+    const selectedProvider = llmProviderSelect.value;
+    const providerObj = llmProviders.find(p => p.value === selectedProvider);
+    if (!providerObj) return;
+
+    // 1. Popular siempre la lista de modelos del proveedor seleccionado
+    llmModelSelect.innerHTML = providerObj.models.map(m => `<option value="${m}">${m}</option>`).join("");
+    
+    // 2. Decidir qué modelo seleccionar
+    let modelToSelect = providerObj.models[0]; // Por defecto, el primero de la lista
+    // Si el proveedor seleccionado es el que ya está guardado en la config...
+    if (selectedProvider === config.llm.provider) {
+        // ...y si el modelo guardado es válido para este proveedor...
+        if (providerObj.models.includes(config.llm.model)) {
+            // ...entonces usamos el modelo guardado.
+            modelToSelect = config.llm.model;
+        }
+    }
+    llmModelSelect.value = modelToSelect;
+    
+    // 3. Actualizar la API Key
+    llmApiKeyInput.value = maskApiKey(config.llm.apiKeys[selectedProvider] || '');
+  }
+  // ===================== FIN DE LA CORRECCIÓN =======================
+
+  function updateTransUI() {
+    const selectedProvider = transProviderSelect.value;
+    const providerObj = transcriptionProviders.find(p => p.value === selectedProvider);
+    if (!providerObj) return;
+    
+    transModelSelect.innerHTML = providerObj.models.map(m => `<option value="${m}">${m}</option>`).join("");
+    // La estructura de 'models' en transcripción permite una búsqueda directa.
+    transModelSelect.value = config.transcription.models[selectedProvider] || providerObj.models[0];
+    transApiKeyInput.value = maskApiKey(config.transcription.apiKeys[selectedProvider] || '');
   }
 
-  // Inicializa
-  selProvider.value = cfg.llm.provider;
-  refreshModels();
-  selModel.value = cfg.llm.model;
-  inpApiKey.value = cfg.llm.apiKey;
-  inpBaseUrl.value = cfg.llm.baseUrl || providerBaseUrl(selProvider.value);
-
-  selProvider.addEventListener('change', () => {
-    refreshModels();
-    inpBaseUrl.value = providerBaseUrl(selProvider.value);
-  });
-
-  form.addEventListener('submit', (e) => {
+  llmProviderSelect.addEventListener("change", updateLlmUI);
+  transProviderSelect.addEventListener("change", updateTransUI);
+  
+  // Estado inicial del formulario
+  llmProviderSelect.value = config.llm.provider;
+  transProviderSelect.value = config.transcription.provider;
+  updateLlmUI();
+  updateTransUI();
+  
+  // Guardar configuración
+  document.getElementById("iaConfigForm").addEventListener("submit", e => {
     e.preventDefault();
-    const newCfg = {
-      llm: {
-        provider: selProvider.value,
-        model: selModel.value,
-        apiKey: inpApiKey.value.trim(),
-        baseUrl: inpBaseUrl.value.trim()
-      }
+    const prevConfig = config;
+    const newConfig = clone(prevConfig);
+
+    // Guardado de 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 }
     };
-    saveIaConfig(newCfg);
-    console.info('[iaConfig] guardado', newCfg);
-    alert('Configuración guardada');
-  });
 
-  btnTest.addEventListener('click', async () => {
-    try {
-      const { callLLM } = await import('./llmClient.js');
-      const msg = [
-        { role: 'system', content: 'Eres un asistente útil y conciso.' },
-        { role: 'user', content: 'Di “ok” si me oyes.' }
-      ];
-      const cfgNow = loadConfig();
-      const { endpoint, payloadKind } = endpointFor(cfgNow.llm.provider, cfgNow.llm.model);
-      const { text } = await callLLM(msg, {
-        provider: cfgNow.llm.provider,
-        baseUrl: cfgNow.llm.baseUrl,
-        apiKey: cfgNow.llm.apiKey,
-        endpoint,
-        model: cfgNow.llm.model,
-        payloadKind
-      });
-      alert('Respuesta de prueba: ' + (text ?? '(vacío)'));
-    } catch (e) {
-      console.error(e);
-      alert('Fallo en prueba: ' + (e?.message || e));
+    // Guardado de 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 }
+    };
+    
+    saveConfig(newConfig);
+    config = newConfig; // Actualizar la config en memoria.
+    
+    document.dispatchEvent(new CustomEvent('iaConfigChanged'));
+
+    // Resetear 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";
+    
+    // Mensaje de éxito
+    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-lg text-lg z-50';
+        msg.innerHTML = '<i class="fas fa-check-circle mr-2"></i>¡Configuración guardada!';
+        document.body.appendChild(msg);
     }
+    msg.style.display = 'block';
+    setTimeout(() => { msg.style.display = 'none'; }, 2000);
+    
+    document.getElementById("configModal")?.classList.remove("active");
   });
-}
-
-/** Devuelve endpoint + payloadKind según proveedor/modelo */
-export function endpointFor(provider, model) {
-  if (provider === 'openai') {
-    const isGpt5 = /^gpt-5/.test(model || '');
-    return { endpoint: isGpt5 ? '/v1/responses' : '/v1/chat/completions', payloadKind: isGpt5 ? 'responses' : 'chat' };
-  }
-  if (provider === 'deepseek') {
-    return { endpoint: '/v1/chat/completions', payloadKind: 'chat' };
-  }
-  return { endpoint: '/v1/chat/completions', payloadKind: 'chat' };
-}
-
-
-// ==============================
-// File: js/analysisModule.js
-// ==============================
-
-import { getIaConfig, prepareLlmApiParams, endpointFor } from "./iaConfigModule.js";
-import { callLLM } from "./llmClient.js";
-
-/**
- * Devuelve true si el modelo suele aceptar temperature != 1
- * (evitamos razonadores / realtime / thinking, etc.)
- */
-export function allowVariableTemperature(model) {
-  if (!model) return true;
-  // Evita familias que ignoran/rechazan temperature
-  return !/(?:\bthinking|\breason|\bo\d|\brealtime|\btranscribe)/i.test(model);
-}
-
-/**
- * Analiza un texto transcrito (resumen clínico, flags, etc.) con el LLM actual.
- * Devuelve el texto del LLM o lanza error.
- */
-export async function analyzeMedical(transcript) {
-  if (!transcript || !transcript.trim()) {
-    throw new Error("Texto vacío para análisis.");
-  }
-
-  const config = getIaConfig();
-  const provider = config?.llm?.provider || 'openai';
-  const model = config?.llm?.model || '';
-  const baseUrl = (config?.llm?.baseUrl || '').replace(/\/$/, '');
-  const apiKey = config?.llm?.apiKey || '';
-
-  const { endpoint, payloadKind } = endpointFor(provider, model);
-
-  // Mensajes
-  const messages = [
-    { role: "system", content: "Eres un médico de urgencias preciso y claro. Resume con puntos clave y un plan." },
-    { role: "user", content: `Analiza la siguiente transcripción clínica y devuelve un informe breve y útil.\n\nTranscripción:\n${transcript}` }
-  ];
-
-  // Parámetros comunes: temperature solo si aplica
-  const useTemp = allowVariableTemperature(model);
-  const temperature = useTemp ? 0.3 : undefined;
-
-  // Construye payload según endpoint
-  let payload;
-  if (provider === 'openai' && payloadKind === 'responses') {
-    // Responses API (GPT‑5, GPT‑5 mini)
-    payload = prepareLlmApiParams({
-      model,
-      input: messages,
-      temperature
-      // puedes añadir max_output_tokens, top_p, etc.
-    });
-  } else {
-    // Chat Completions (OpenAI 4o/mini, DeepSeek, etc.)
-    payload = prepareLlmApiParams({
-      model,
-      messages,
-      temperature
-    });
-  }
-
-  // Llamada: delegamos en llmClient para HTTP real
-  const { text } = await callLLM(messages, {
-    provider,
-    baseUrl,
-    apiKey,
-    endpoint,
-    model,
-    payloadKind,
-    payload
-  });
-
-  if (!text) {
-    throw new Error('La IA no devolvió texto.');
-  }
-  return text;
-}
+}