Update js/iaConfigModule.js

js/iaConfigModule.js

@@ -1,225 +1,269 @@
-// js/llmClient.js
-import { getIaConfig, llmProviders } from "./iaConfigModule.js";
-
-/** Detecta familia GPT-5 (incluye submodelos y alias) */
-function isGpt5(model = "") {
-  const m = String(model || "").toLowerCase();
-  return m.startsWith("gpt-5");
-}
-
-/** Borrado profundo de claves en cualquier nivel */
-function deepDeleteKeys(obj, keys = []) {
-  if (!obj || typeof obj !== "object") return;
-  for (const k of Object.keys(obj)) {
-    if (keys.includes(k)) {
-      delete obj[k];
-      continue;
-    }
-    const val = obj[k];
-    if (Array.isArray(val)) {
-      for (const item of val) deepDeleteKeys(item, keys);
-    } else if (val && typeof val === "object") {
-      deepDeleteKeys(val, keys);
-    }
+// js/iaConfigModule.js
+const defaultConfig = {
+  llm: {
+    provider: "deepseek",
+    apiKeys: { deepseek: "", openai: "" },
+    model: "deepseek-chat"
+  },
+  transcription: {
+    provider: "openai",
+    apiKeys: { openai: "", deepgram: "" },
+    models: { openai: "whisper-1", deepgram: "nova-2" }
+  }
+};
+
+// Lista de modelos actualizada (2025)
+export const llmProviders = [
+  { 
+    name: "OpenAI", 
+    value: "openai", 
+    models: [
+      "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"
+    ],
+    url: "https://api.openai.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" },
+  { name: "Deepgram", value: "deepgram", models: ["nova-2", "whisper-large"], url: "https://api.deepgram.com" }
+];
+
+function saveConfig(config) {
+  try {
+    localStorage.setItem("iaConfig", JSON.stringify(config));
+  } catch (e) {
+    console.error("[iaConfigModule] Error guardando config:", e);
   }
 }
 
-/** Sanea el payload para modelos GPT-5: elimina params no soportados */
-function sanitizeForGpt5(payload) {
-  // Claves creativas y afines que algunos SDKs/flows reinyectan
-  const toStrip = [
-    "temperature",
-    "top_p",
-    "frequency_penalty",
-    "presence_penalty",
-    "best_of",
-    "n",
-    "logit_bias",
-    // Algunas libs anidan config aquí:
-    "generation_config"
-  ];
-  deepDeleteKeys(payload, toStrip);
-
-  // Si existía generation_config, asegúrate de borrarlo entero
-  if (payload.generation_config) delete payload.generation_config;
-
-  return payload;
+function clone(obj) {
+  try { return structuredClone(obj); } catch { return JSON.parse(JSON.stringify(obj)); }
 }
 
-/** Construye body para Chat Completions (OpenAI) */
-function buildOpenAIChatBody(model, messages, options = {}) {
-  const body = { model, messages };
-
-  if (!isGpt5(model)) {
-    if (typeof options.temperature === "number") body.temperature = options.temperature;
-    if (typeof options.top_p === "number") body.top_p = options.top_p;
-    if (typeof options.frequency_penalty === "number") body.frequency_penalty = options.frequency_penalty;
-    if (typeof options.presence_penalty === "number") body.presence_penalty = options.presence_penalty;
+function loadConfig() {
+  let config;
+  try {
+    config = JSON.parse(localStorage.getItem("iaConfig")) || clone(defaultConfig);
+  } catch {
+    config = clone(defaultConfig);
   }
 
-  if (options.response_format) body.response_format = options.response_format;
-  if (options.tools) body.tools = options.tools;
-  if (options.tool_choice) body.tool_choice = options.tool_choice;
-
-  return isGpt5(model) ? sanitizeForGpt5(body) : body;
-}
+  // Migración transcription
+  if (config.transcription.apiKey !== undefined) {
+    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" };
+    delete config.transcription.apiKey;
+    delete config.transcription.model;
+    saveConfig(config);
+  }
 
-/** Construye body para Responses API (por si la usas en otro flujo) */
-function buildOpenAIResponsesBody(model, input, options = {}) {
-  const body = { model, input };
+  // Migración LLM apiKey -> apiKeys
+  if (config.llm.apiKey !== undefined) {
+    const old = config.llm.apiKey;
+    config.llm.apiKeys = { ...defaultConfig.llm.apiKeys, [config.llm.provider]: old };
+    delete config.llm.apiKey;
+    saveConfig(config);
+  }
 
-  if (!isGpt5(model)) {
-    if (typeof options.temperature === "number") body.temperature = options.temperature;
-    if (typeof options.top_p === "number") body.top_p = options.top_p;
-    if (typeof options.frequency_penalty === "number") body.frequency_penalty = options.frequency_penalty;
-    if (typeof options.presence_penalty === "number") body.presence_penalty = options.presence_penalty;
+  // Migrar deepseek obsoletos
+  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);
   }
 
-  if (options.response_format) body.response_format = options.response_format;
-  if (options.tools) body.tools = options.tools;
-  if (options.tool_choice) body.tool_choice = options.tool_choice;
+  // 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";
+    saveConfig(config);
+  }
 
-  return isGpt5(model) ? sanitizeForGpt5(body) : body;
+  return config;
+}
+export function getIaConfig() {
+  return loadConfig();
 }
 
-/** POST con reintento si hay error de parámetros no soportados */
-async function hardenedPost(url, apiKey, body, model) {
-  // Sanea una vez más justo antes de enviar
-  if (isGpt5(model)) sanitizeForGpt5(body);
-
-  let res = await fetch(url, {
-    method: "POST",
-    headers: {
-      "Authorization": `Bearer ${apiKey}`,
-      "Content-Type": "application/json"
-    },
-    body: JSON.stringify(body)
-  });
-
-  if (!res.ok) {
-    let errJson = null, txt = "";
-    try { errJson = await res.json(); } catch { txt = await res.text(); }
-
-    const msg = errJson?.error?.message || txt || "";
-    const code = errJson?.error?.code || "";
-    const unsupported =
-      msg.includes("Unsupported value") ||
-      msg.includes("does not support") ||
-      code === "unsupported_value";
-
-    if (unsupported) {
-      // Reintento: payload mínimo (sin ningún creativo), ultra-saneado
-      const minimal = isGpt5(model)
-        ? sanitizeForGpt5({ ...body, model })
-        : { ...body, model };
-      delete minimal.temperature;
-      delete minimal.top_p;
-      delete minimal.frequency_penalty;
-      delete minimal.presence_penalty;
-      delete minimal.best_of;
-      delete minimal.n;
-      delete minimal.logit_bias;
-      delete minimal.generation_config;
-
-      res = await fetch(url, {
-        method: "POST",
-        headers: {
-          "Authorization": `Bearer ${apiKey}`,
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify(minimal)
-      });
-    }
-
-    if (!res.ok) {
-      const finalTxt = await res.text();
-      throw new Error(`OpenAI error ${res.status}: ${finalTxt}`);
-    }
+export function renderIaConfigForm(containerId) {
+  let config = loadConfig();
+  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>`
+    );
+    return;
   }
 
-  return res.json();
-}
-
-/** Chat Completions */
-async function callOpenAIChat({ apiKey, model, messages, options }) {
-  const providerInfo = llmProviders.find(p => p.value === "openai");
-  const base = providerInfo?.url || "https://api.openai.com";
-  const url = `${base}/v1/chat/completions`;
+  function maskApiKey(key) {
+    if (!key) return "";
+    if (key.length <= 8) return "*".repeat(key.length);
+    return key.substring(0, 3) + "-****" + key.slice(-4);
+  }
 
-  const body = buildOpenAIChatBody(model, messages, options);
-  const data = await hardenedPost(url, apiKey, body, model);
-  const text = data?.choices?.[0]?.message?.content ?? "";
-  return { text, raw: data };
-}
+  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 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("")}
+        </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 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("")}
+        </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 closeBtn = document.getElementById("btnCloseConfig");
+  if (closeBtn) {
+    closeBtn.addEventListener("click", () => {
+      const modal = document.getElementById("configModal");
+      if (modal) modal.classList.remove("active");
+    });
+  }
 
-/** Responses API (por si alguna parte de tu app la usa) */
-async function callOpenAIResponses({ apiKey, model, input, options }) {
-  const providerInfo = llmProviders.find(p => p.value === "openai");
-  const base = providerInfo?.url || "https://api.openai.com";
-  const url = `${base}/v1/responses`;
-
-  const body = buildOpenAIResponsesBody(model, input, options);
-  const data = await hardenedPost(url, apiKey, body, model);
-  // Normalizamos a "text"
-  const outMsg =
-    data?.output?.[0]?.content?.[0]?.text ??
-    data?.content?.[0]?.text ??
-    data?.choices?.[0]?.message?.content ??
-    "";
-  return { text: outMsg, raw: data };
-}
+  // 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] || "");
 
-/** DeepSeek */
-async function callDeepSeekChat({ apiKey, model, messages, options }) {
-  const providerInfo = llmProviders.find(p => p.value === "deepseek");
-  const base = providerInfo?.url || "https://api.deepseek.com";
-  const url = `${base}/chat/completions`;
-
-  const body = { model, messages };
-  if (typeof options?.temperature === "number") body.temperature = options.temperature;
-  if (typeof options?.top_p === "number") body.top_p = options.top_p;
-  if (typeof options?.frequency_penalty === "number") body.frequency_penalty = options.frequency_penalty;
-  if (typeof options?.presence_penalty === "number") body.presence_penalty = options.presence_penalty;
-
-  const res = await fetch(url, {
-    method: "POST",
-    headers: {
-      "Authorization": `Bearer ${apiKey}`,
-      "Content-Type": "application/json"
-    },
-    body: JSON.stringify(body)
+  // 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";
   });
 
-  if (!res.ok) {
-    const txt = await res.text();
-    throw new Error(`DeepSeek error ${res.status}: ${txt}`);
-  }
-
-  const data = await res.json();
-  const text = data?.choices?.[0]?.message?.content ?? "";
-  return { text, raw: data };
-}
+  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("");
 
-/** Punto único */
-export async function callLLM(messages, options = {}) {
-  const cfg = getIaConfig();
-  const provider = cfg.llm.provider;
-  const model = cfg.llm.model;
-  if (!provider) throw new Error("Proveedor LLM no configurado.");
-  const apiKey = cfg.llm.apiKeys?.[provider];
-  if (!apiKey) throw new Error(`API Key no configurada para proveedor '${provider}'.`);
-
-  if (provider === "openai") {
-    // Si en algún lugar pasan "input" en vez de "messages", usa Responses API
-    if (options && Object.prototype.hasOwnProperty.call(options, "input")) {
-      return await callOpenAIResponses({ apiKey, model, input: options.input, options });
+    if (!models.includes(config.llm.model)) {
+      config.llm.model = models[0];
+      saveConfig(config);
     }
-    return await callOpenAIChat({ apiKey, model, messages, options });
+    sel.value = config.llm.model;
   }
-
-  if (provider === "deepseek") {
-    return await callDeepSeekChat({ apiKey, model, messages, options });
+  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] || "");
   }
 
-  throw new Error(`Proveedor no soportado: ${provider}`);
+  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);
+
+  updateLlmModels();
+  updateTransModels();
+
+  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 };
+
+    saveConfig(newConfig);
+    config = newConfig;
+    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";
+
+    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'; }, 1600);
+
+    const modal = document.getElementById("configModal");
+    if (modal) modal.classList.remove("active");
+  });
 }