@serhii.olishevskyi/docs 1.2.12 → 1.2.13

package/dist/{UserPopoverComponent-K7CJNYYL.mjs → UserPopoverComponent-LI5272PW.mjs}

@@ -1,7 +1,7 @@
 import {
   UserPopoverComponent,
   UserPopoverComponent_default
-} from "./chunk-FRDK4RQX.mjs";
+} from "./chunk-EW4DX6YG.mjs";
 export {
   UserPopoverComponent,
   UserPopoverComponent_default as default

package/dist/{chunk-FRDK4RQX.mjs → chunk-EW4DX6YG.mjs}

@@ -1109,15 +1109,17 @@ import {
   IconButton,
   Tooltip,
   Paper,
-  Alert as Alert2
+  Alert as Alert2,
+  ToggleButtonGroup,
+  ToggleButton
 } from "@mui/material";
 import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
 import TranslateIcon from "@mui/icons-material/Translate";
 import LightbulbIcon from "@mui/icons-material/Lightbulb";
+import SmartToyIcon from "@mui/icons-material/SmartToy";
 
 // src/services/translation.service.ts
 var translationService = {
-  // 1. Принимаем client первым аргументом
   incrementVersion: async (client, namespace, langCodes) => {
     try {
       const { data } = await client.from("translation_versions").select("version, lang_code").eq("namespace", namespace);
@@ -1138,36 +1140,103 @@ var translationService = {
       return null;
     }
   },
-  translateSmart: async (client, aiGenerateFn, params) => {
+  /**
+   * Универсальный метод перевода с поддержкой Gemini, OpenAI и автоматическим fallback
+   */
+  translateSmart: async (client, aiGenerateFn, params, openAiApiKey) => {
     const languagesToTranslate = params.targetLangs || (params.targetLang ? [params.targetLang] : []);
     try {
       const { data, error } = await client.functions.invoke("translate-smart", { body: params });
       if (!error && data) return data;
     } catch {
-      console.warn("Edge Function translate-smart \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C AIProvider...");
+      console.warn("[translationService]: Edge Function translate-smart \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430, \u043F\u0435\u0440\u0435\u0445\u043E\u0434\u0438\u043C \u043A AIProvider...");
     }
-    if (aiGenerateFn) {
-      const prompt = `Translate the source text into language codes: ${JSON.stringify(languagesToTranslate)}.
+    const prompt = `Translate the source text into language codes: ${JSON.stringify(languagesToTranslate)}.
 Source Text: "${params.text}"
 ${params.contextHint ? `Context Hint: "${params.contextHint}"` : ""}`;
-      const translations = await aiGenerateFn({
-        prompt,
-        systemInstruction: 'Respond STRICTLY with a valid JSON mapping lang code to text. Example: {"en": "Hello"}',
-        jsonMode: true
-      });
-      if (translations) {
-        if (params.targetLang) {
-          return { translatedText: translations[params.targetLang] || params.text };
+    const systemInstruction = 'You are a professional translator. Respond STRICTLY with a valid JSON object mapping language code to translated text. Example: {"en": "Hello", "uk": "\u041F\u0440\u0438\u0432\u0456\u0442"}';
+    if (aiGenerateFn) {
+      try {
+        const translations = await aiGenerateFn({
+          prompt,
+          systemInstruction,
+          jsonMode: true,
+          provider: params.provider,
+          modelName: params.modelName
+        });
+        if (translations) {
+          if (params.targetLang) {
+            return { translatedText: translations[params.targetLang] || params.text };
+          }
+          return { translations };
+        }
+      } catch (err) {
+        console.warn(`[translationService]: \u041E\u0448\u0438\u0431\u043A\u0430 \u0433\u0435\u043D\u0435\u0440\u0430\u0446\u0438\u0438 \u0418\u0418 (${params.provider || "default"}), \u043F\u0440\u043E\u0431\u0443\u0435\u043C \u0440\u0435\u0437\u0435\u0440\u0432\u043D\u044B\u0435 \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u044B...`, err);
+      }
+      if (params.provider === "gemini" || !params.provider) {
+        try {
+          console.warn("[translationService]: \u041F\u0440\u043E\u0431\u0443\u0435\u043C \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0438\u0442\u044C\u0441\u044F \u043D\u0430 OpenAI fallback...");
+          const translations = await aiGenerateFn({
+            prompt,
+            systemInstruction,
+            jsonMode: true,
+            provider: "openai"
+          });
+          if (translations) {
+            if (params.targetLang) {
+              return { translatedText: translations[params.targetLang] || params.text };
+            }
+            return { translations };
+          }
+        } catch (fallbackErr) {
+          console.warn("[translationService]: Fallback OpenAI \u0447\u0435\u0440\u0435\u0437 AIProvider \u043D\u0435 \u0443\u0434\u0430\u043B\u0441\u044F", fallbackErr);
+        }
+      }
+    }
+    if (openAiApiKey) {
+      try {
+        const response = await fetch("https://api.openai.com/v1/chat/completions", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${openAiApiKey}`
+          },
+          body: JSON.stringify({
+            model: params.modelName || "gpt-4o-mini",
+            response_format: { type: "json_object" },
+            messages: [
+              { role: "system", content: systemInstruction },
+              { role: "user", content: prompt }
+            ],
+            temperature: 0.3
+          })
+        });
+        if (response.ok) {
+          const result = await response.json();
+          const content = result.choices?.[0]?.message?.content;
+          if (content) {
+            const translations = JSON.parse(content);
+            if (params.targetLang) {
+              return { translatedText: translations[params.targetLang] || params.text };
+            }
+            return { translations };
+          }
         }
-        return { translations };
+      } catch (err) {
+        console.warn("[translationService]: Direct OpenAI API error, fallback to Google Translate", err);
       }
     }
     if (params.targetLang) {
-      const fallbackUrl = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=${params.targetLang}&dt=t&q=${encodeURIComponent(params.text)}`;
-      const res = await fetch(fallbackUrl);
-      if (res.ok) {
-        const data = await res.json();
-        return { translatedText: data[0].map((x) => x[0]).join("") };
+      try {
+        const fallbackUrl = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=${params.targetLang}&dt=t&q=${encodeURIComponent(params.text)}`;
+        const res = await fetch(fallbackUrl);
+        if (res.ok) {
+          const data = await res.json();
+          const translatedText = data[0].map((x) => x[0]).join("");
+          return { translatedText };
+        }
+      } catch (err) {
+        console.error("[translationService]: Google Translate fallback failed:", err);
       }
     }
     throw new Error("All translation strategies failed.");
@@ -1181,32 +1250,48 @@ import { jsx as jsx9 } from "react/jsx-runtime";
 var AIContext = createContext9(null);
 var AIProvider = ({
   children,
-  config,
-  apiKey: directApiKey
+  config = {},
+  apiKey: legacyApiKey,
+  provider: legacyProvider
 }) => {
-  const apiKey = directApiKey || config?.apiKey;
-  const provider = config?.provider || "gemini";
-  const modelName = config?.modelName || (provider === "gemini" ? "gemini-2.5-flash" : "gpt-4o-mini");
+  const activeProvider = config.provider || legacyProvider || "gemini";
+  const geminiConfig = {
+    apiKey: config.gemini?.apiKey || (activeProvider === "gemini" ? legacyApiKey : void 0),
+    modelName: config.gemini?.modelName || "gemini-2.5-flash"
+  };
+  const openaiConfig = {
+    apiKey: config.openai?.apiKey || (activeProvider === "openai" ? legacyApiKey : void 0),
+    modelName: config.openai?.modelName || "gpt-4o-mini"
+  };
   const contextValue = useMemo5(() => {
     return {
-      apiKey,
-      provider,
-      modelName,
+      activeProvider,
+      config: {
+        provider: activeProvider,
+        gemini: geminiConfig,
+        openai: openaiConfig
+      },
       generate: async ({
         prompt,
         systemInstruction,
         jsonMode = false,
-        temperature
+        temperature,
+        provider: overrideProvider,
+        modelName: overrideModelName
       }) => {
-        if (!apiKey) {
-          console.warn("[AIProvider]: API Key \u043D\u0435 \u0437\u0430\u0434\u0430\u043D.");
-          return null;
-        }
-        if (provider === "gemini") {
+        const targetProvider = overrideProvider || activeProvider;
+        if (targetProvider === "gemini") {
+          const key = geminiConfig.apiKey;
+          const model = overrideModelName || geminiConfig.modelName || "gemini-2.5-flash";
+          if (!key) {
+            console.warn("[AIProvider]: API Key \u0434\u043B\u044F Gemini \u043D\u0435 \u0437\u0430\u0434\u0430\u043D.");
+            return null;
+          }
           try {
-            const ai = new GoogleGenAI({ apiKey });
+            const ai = new GoogleGenAI({ apiKey: key });
             const response = await ai.models.generateContent({
-              model: modelName,
+              model,
+              // Теперь гарантированно string
               contents: prompt,
               config: {
                 systemInstruction,
@@ -1225,7 +1310,13 @@ var AIProvider = ({
             return null;
           }
         }
-        if (provider === "openai") {
+        if (targetProvider === "openai") {
+          const key = openaiConfig.apiKey;
+          const model = overrideModelName || openaiConfig.modelName;
+          if (!key) {
+            console.warn("[AIProvider]: API Key \u0434\u043B\u044F OpenAI \u043D\u0435 \u0437\u0430\u0434\u0430\u043D.");
+            return null;
+          }
           try {
             const messages = [];
             if (systemInstruction) {
@@ -1236,15 +1327,19 @@ var AIProvider = ({
               method: "POST",
               headers: {
                 "Content-Type": "application/json",
-                Authorization: `Bearer ${apiKey}`
+                Authorization: `Bearer ${key}`
               },
               body: JSON.stringify({
-                model: modelName,
+                model,
                 messages,
                 temperature,
                 ...jsonMode ? { response_format: { type: "json_object" } } : {}
               })
             });
+            if (!res.ok) {
+              const errData = await res.json().catch(() => ({}));
+              throw new Error(`OpenAI API status ${res.status}: ${JSON.stringify(errData)}`);
+            }
             const data = await res.json();
             const content = data.choices?.[0]?.message?.content?.trim() || "";
             if (jsonMode) {
@@ -1259,7 +1354,13 @@ var AIProvider = ({
         return null;
       }
     };
-  }, [apiKey, provider, modelName]);
+  }, [
+    activeProvider,
+    geminiConfig.apiKey,
+    geminiConfig.modelName,
+    openaiConfig.apiKey,
+    openaiConfig.modelName
+  ]);
   return /* @__PURE__ */ jsx9(AIContext.Provider, { value: contextValue, children });
 };
 var useAI = () => {
@@ -1280,10 +1381,11 @@ var TranslationDialog = ({
   onSave
 }) => {
   const supabase = useSupabase();
-  const { generate } = useAI();
+  const { generate, activeProvider: defaultProvider } = useAI();
   const [languages, setLanguages] = useState7([]);
   const [values, setValues] = useState7({});
   const [contextHint, setContextHint] = useState7("");
+  const [selectedProvider, setSelectedProvider] = useState7("auto");
   const [loading, setLoading] = useState7(false);
   const [saving, setSaving] = useState7(false);
   const [translatingCode, setTranslatingCode] = useState7(null);
@@ -1320,6 +1422,7 @@ var TranslationDialog = ({
     };
     fetchData();
   }, [open, translationKey, namespace]);
+  const effectiveProvider = selectedProvider === "auto" ? void 0 : selectedProvider;
   const handleAutoTranslate = async (e, targetLang) => {
     e.preventDefault();
     e.stopPropagation();
@@ -1329,13 +1432,14 @@ var TranslationDialog = ({
       const res = await translationService.translateSmart(supabase, generate, {
         text: translationKey,
         targetLang,
-        contextHint
+        contextHint,
+        provider: effectiveProvider
       });
       if (res?.translatedText) {
         setValues((prev) => ({ ...prev, [targetLang]: res.translatedText }));
       }
     } catch (err) {
-      console.log(err);
+      console.error(err);
       setError(`Failed to translate into ${targetLang}. ${err?.message || ""}`);
     } finally {
       setTranslatingCode(null);
@@ -1352,7 +1456,8 @@ var TranslationDialog = ({
       const res = await translationService.translateSmart(supabase, generate, {
         text: translationKey,
         targetLangs,
-        contextHint
+        contextHint,
+        provider: effectiveProvider
       });
       if (res?.translations) {
         setValues((prev) => ({ ...prev, ...res.translations }));
@@ -1395,36 +1500,76 @@ var TranslationDialog = ({
       onClick: (e) => e.stopPropagation(),
       onMouseDown: (e) => e.stopPropagation(),
       children: [
-        /* @__PURE__ */ jsxs3(DialogTitle, { sx: { pb: 1, display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
-          /* @__PURE__ */ jsxs3(Box, { children: [
-            "Context Translation",
-            /* @__PURE__ */ jsxs3(Typography, { component: "div", variant: "subtitle2", color: "text.secondary", sx: { wordBreak: "break-all", mt: 0.5 }, children: [
-              "Original: ",
-              /* @__PURE__ */ jsxs3("strong", { children: [
-                '"',
-                translationKey,
-                '"'
-              ] })
-            ] })
-          ] }),
-          !loading && /* @__PURE__ */ jsx10(
-            Button,
-            {
-              type: "button",
-              size: "small",
-              variant: "outlined",
-              color: "secondary",
-              startIcon: isTranslatingAll ? /* @__PURE__ */ jsx10(CircularProgress, { size: 16, color: "inherit" }) : /* @__PURE__ */ jsx10(TranslateIcon, { fontSize: "small" }),
-              onClick: handleTranslateAll,
-              disabled: isBusy,
-              sx: { flexShrink: 0, ml: 2, whiteSpace: "nowrap" },
-              children: isTranslatingAll ? "Translating..." : "Translate All"
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsxs3(
+          DialogTitle,
+          {
+            sx: { pb: 1, display: "flex", justifyContent: "space-between", alignItems: "flex-start" },
+            children: [
+              /* @__PURE__ */ jsxs3(Box, { children: [
+                "Context Translation",
+                /* @__PURE__ */ jsxs3(
+                  Typography,
+                  {
+                    component: "div",
+                    variant: "subtitle2",
+                    color: "text.secondary",
+                    sx: { wordBreak: "break-all", mt: 0.5 },
+                    children: [
+                      "Original: ",
+                      /* @__PURE__ */ jsxs3("strong", { children: [
+                        '"',
+                        translationKey,
+                        '"'
+                      ] })
+                    ]
+                  }
+                )
+              ] }),
+              !loading && /* @__PURE__ */ jsx10(
+                Button,
+                {
+                  type: "button",
+                  size: "small",
+                  variant: "outlined",
+                  color: "secondary",
+                  startIcon: isTranslatingAll ? /* @__PURE__ */ jsx10(CircularProgress, { size: 16, color: "inherit" }) : /* @__PURE__ */ jsx10(TranslateIcon, { fontSize: "small" }),
+                  onClick: handleTranslateAll,
+                  disabled: isBusy,
+                  sx: { flexShrink: 0, ml: 2, whiteSpace: "nowrap" },
+                  children: isTranslatingAll ? "Translating..." : "Translate All"
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxs3(DialogContent, { dividers: true, sx: { pt: 2 }, children: [
           error && /* @__PURE__ */ jsx10(Alert2, { severity: "error", onClose: () => setError(null), sx: { mb: 2 }, children: error }),
           loading ? /* @__PURE__ */ jsx10(Box, { sx: { display: "flex", justifyContent: "center", py: 4 }, children: /* @__PURE__ */ jsx10(CircularProgress, {}) }) : /* @__PURE__ */ jsxs3(Box, { sx: { display: "flex", flexDirection: "column", gap: 2.5 }, children: [
+            /* @__PURE__ */ jsxs3(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ jsxs3(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ jsx10(SmartToyIcon, { fontSize: "small", color: "action" }),
+                /* @__PURE__ */ jsx10(Typography, { variant: "caption", sx: { fontWeight: 600, color: "text.secondary" }, children: "AI Engine:" })
+              ] }),
+              /* @__PURE__ */ jsxs3(
+                ToggleButtonGroup,
+                {
+                  size: "small",
+                  value: selectedProvider,
+                  exclusive: true,
+                  onChange: (_, val) => val && setSelectedProvider(val),
+                  disabled: isBusy,
+                  children: [
+                    /* @__PURE__ */ jsxs3(ToggleButton, { value: "auto", sx: { px: 1.5, py: 0.2, fontSize: "0.75rem" }, children: [
+                      "Auto (",
+                      defaultProvider,
+                      ")"
+                    ] }),
+                    /* @__PURE__ */ jsx10(ToggleButton, { value: "gemini", sx: { px: 1.5, py: 0.2, fontSize: "0.75rem" }, children: "Gemini" }),
+                    /* @__PURE__ */ jsx10(ToggleButton, { value: "openai", sx: { px: 1.5, py: 0.2, fontSize: "0.75rem" }, children: "OpenAI" })
+                  ]
+                }
+              )
+            ] }),
             /* @__PURE__ */ jsxs3(Paper, { variant: "outlined", sx: { p: 2, bgcolor: "action.hover", borderRadius: 2 }, children: [
               /* @__PURE__ */ jsxs3(Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1 }, children: [
                 /* @__PURE__ */ jsx10(LightbulbIcon, { color: "warning", fontSize: "small" }),
@@ -1473,7 +1618,7 @@ var TranslationDialog = ({
                   disabled: isBusy
                 }
               ),
-              /* @__PURE__ */ jsx10(Tooltip, { title: "Translate with context hint", children: /* @__PURE__ */ jsx10("span", { children: /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx10(Tooltip, { title: `Translate using ${selectedProvider === "auto" ? defaultProvider : selectedProvider}`, children: /* @__PURE__ */ jsx10("span", { children: /* @__PURE__ */ jsx10(
                 IconButton,
                 {
                   type: "button",
@@ -1488,16 +1633,7 @@ var TranslationDialog = ({
         ] }),
         /* @__PURE__ */ jsxs3(DialogActions, { sx: { px: 3, py: 2 }, children: [
           /* @__PURE__ */ jsx10(Button, { onClick: onClose, disabled: isBusy, color: "inherit", type: "button", children: "Cancel" }),
-          /* @__PURE__ */ jsx10(
-            Button,
-            {
-              onClick: handleSaveAll,
-              variant: "contained",
-              disabled: isBusy,
-              type: "button",
-              children: saving ? "Saving..." : "Save All"
-            }
-          )
+          /* @__PURE__ */ jsx10(Button, { onClick: handleSaveAll, variant: "contained", disabled: isBusy, type: "button", children: saving ? "Saving..." : "Save All" })
         ] })
       ]
     }

package/dist/index.d.mts

@@ -408,28 +408,41 @@ declare const UI: {
 };
 
 type AIProviderType = 'gemini' | 'openai';
+interface AIServiceConfig {
+    apiKey?: string;
+    modelName?: string;
+}
+interface AIConfig {
+    /** Активный провайдер по умолчанию */
+    provider?: AIProviderType;
+    /** Конфигурация для Gemini */
+    gemini?: AIServiceConfig;
+    /** Конфигурация для OpenAI */
+    openai?: AIServiceConfig;
+}
 interface AIGenerateOptions {
     prompt: string;
     systemInstruction?: string;
     jsonMode?: boolean;
     temperature?: number;
-}
-interface AIConfig {
-    apiKey?: string;
+    /** Возможность переопределить провайдера для конкретного запроса */
     provider?: AIProviderType;
+    /** Возможность переопределить модель для конкретного запроса */
     modelName?: string;
 }
 interface AIContextType {
-    apiKey?: string;
-    provider: AIProviderType;
-    modelName: string;
+    activeProvider: AIProviderType;
+    config: AIConfig;
     /** Универсальный метод генерации (текст или JSON) */
     generate: <T = string>(options: AIGenerateOptions) => Promise<T | null>;
 }
 interface AIProviderProps {
     children: React__default.ReactNode;
     config?: AIConfig;
+    /** Устаревшая прямая передача ключа (для обратной совместимости) */
     apiKey?: string;
+    /** Устаревший выбор провайдера (для обратной совместимости) */
+    provider?: AIProviderType;
 }
 declare const AIProvider: React__default.FC<AIProviderProps>;
 declare const useAI: () => AIContextType;

package/dist/index.d.ts

@@ -408,28 +408,41 @@ declare const UI: {
 };
 
 type AIProviderType = 'gemini' | 'openai';
+interface AIServiceConfig {
+    apiKey?: string;
+    modelName?: string;
+}
+interface AIConfig {
+    /** Активный провайдер по умолчанию */
+    provider?: AIProviderType;
+    /** Конфигурация для Gemini */
+    gemini?: AIServiceConfig;
+    /** Конфигурация для OpenAI */
+    openai?: AIServiceConfig;
+}
 interface AIGenerateOptions {
     prompt: string;
     systemInstruction?: string;
     jsonMode?: boolean;
     temperature?: number;
-}
-interface AIConfig {
-    apiKey?: string;
+    /** Возможность переопределить провайдера для конкретного запроса */
     provider?: AIProviderType;
+    /** Возможность переопределить модель для конкретного запроса */
     modelName?: string;
 }
 interface AIContextType {
-    apiKey?: string;
-    provider: AIProviderType;
-    modelName: string;
+    activeProvider: AIProviderType;
+    config: AIConfig;
     /** Универсальный метод генерации (текст или JSON) */
     generate: <T = string>(options: AIGenerateOptions) => Promise<T | null>;
 }
 interface AIProviderProps {
     children: React__default.ReactNode;
     config?: AIConfig;
+    /** Устаревшая прямая передача ключа (для обратной совместимости) */
     apiKey?: string;
+    /** Устаревший выбор провайдера (для обратной совместимости) */
+    provider?: AIProviderType;
 }
 declare const AIProvider: React__default.FC<AIProviderProps>;
 declare const useAI: () => AIContextType;

package/dist/index.js

@@ -695,7 +695,6 @@ var init_translation_service = __esm({
   "src/services/translation.service.ts"() {
     "use strict";
     translationService = {
-      // 1. Принимаем client первым аргументом
       incrementVersion: async (client, namespace, langCodes) => {
         try {
           const { data } = await client.from("translation_versions").select("version, lang_code").eq("namespace", namespace);
@@ -716,36 +715,103 @@ var init_translation_service = __esm({
           return null;
         }
       },
-      translateSmart: async (client, aiGenerateFn, params) => {
+      /**
+       * Универсальный метод перевода с поддержкой Gemini, OpenAI и автоматическим fallback
+       */
+      translateSmart: async (client, aiGenerateFn, params, openAiApiKey) => {
         const languagesToTranslate = params.targetLangs || (params.targetLang ? [params.targetLang] : []);
         try {
           const { data, error } = await client.functions.invoke("translate-smart", { body: params });
           if (!error && data) return data;
         } catch {
-          console.warn("Edge Function translate-smart \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C AIProvider...");
+          console.warn("[translationService]: Edge Function translate-smart \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430, \u043F\u0435\u0440\u0435\u0445\u043E\u0434\u0438\u043C \u043A AIProvider...");
         }
-        if (aiGenerateFn) {
-          const prompt = `Translate the source text into language codes: ${JSON.stringify(languagesToTranslate)}.
+        const prompt = `Translate the source text into language codes: ${JSON.stringify(languagesToTranslate)}.
 Source Text: "${params.text}"
 ${params.contextHint ? `Context Hint: "${params.contextHint}"` : ""}`;
-          const translations = await aiGenerateFn({
-            prompt,
-            systemInstruction: 'Respond STRICTLY with a valid JSON mapping lang code to text. Example: {"en": "Hello"}',
-            jsonMode: true
-          });
-          if (translations) {
-            if (params.targetLang) {
-              return { translatedText: translations[params.targetLang] || params.text };
+        const systemInstruction = 'You are a professional translator. Respond STRICTLY with a valid JSON object mapping language code to translated text. Example: {"en": "Hello", "uk": "\u041F\u0440\u0438\u0432\u0456\u0442"}';
+        if (aiGenerateFn) {
+          try {
+            const translations = await aiGenerateFn({
+              prompt,
+              systemInstruction,
+              jsonMode: true,
+              provider: params.provider,
+              modelName: params.modelName
+            });
+            if (translations) {
+              if (params.targetLang) {
+                return { translatedText: translations[params.targetLang] || params.text };
+              }
+              return { translations };
+            }
+          } catch (err) {
+            console.warn(`[translationService]: \u041E\u0448\u0438\u0431\u043A\u0430 \u0433\u0435\u043D\u0435\u0440\u0430\u0446\u0438\u0438 \u0418\u0418 (${params.provider || "default"}), \u043F\u0440\u043E\u0431\u0443\u0435\u043C \u0440\u0435\u0437\u0435\u0440\u0432\u043D\u044B\u0435 \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u044B...`, err);
+          }
+          if (params.provider === "gemini" || !params.provider) {
+            try {
+              console.warn("[translationService]: \u041F\u0440\u043E\u0431\u0443\u0435\u043C \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0438\u0442\u044C\u0441\u044F \u043D\u0430 OpenAI fallback...");
+              const translations = await aiGenerateFn({
+                prompt,
+                systemInstruction,
+                jsonMode: true,
+                provider: "openai"
+              });
+              if (translations) {
+                if (params.targetLang) {
+                  return { translatedText: translations[params.targetLang] || params.text };
+                }
+                return { translations };
+              }
+            } catch (fallbackErr) {
+              console.warn("[translationService]: Fallback OpenAI \u0447\u0435\u0440\u0435\u0437 AIProvider \u043D\u0435 \u0443\u0434\u0430\u043B\u0441\u044F", fallbackErr);
+            }
+          }
+        }
+        if (openAiApiKey) {
+          try {
+            const response = await fetch("https://api.openai.com/v1/chat/completions", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${openAiApiKey}`
+              },
+              body: JSON.stringify({
+                model: params.modelName || "gpt-4o-mini",
+                response_format: { type: "json_object" },
+                messages: [
+                  { role: "system", content: systemInstruction },
+                  { role: "user", content: prompt }
+                ],
+                temperature: 0.3
+              })
+            });
+            if (response.ok) {
+              const result = await response.json();
+              const content = result.choices?.[0]?.message?.content;
+              if (content) {
+                const translations = JSON.parse(content);
+                if (params.targetLang) {
+                  return { translatedText: translations[params.targetLang] || params.text };
+                }
+                return { translations };
+              }
             }
-            return { translations };
+          } catch (err) {
+            console.warn("[translationService]: Direct OpenAI API error, fallback to Google Translate", err);
           }
         }
         if (params.targetLang) {
-          const fallbackUrl = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=${params.targetLang}&dt=t&q=${encodeURIComponent(params.text)}`;
-          const res = await fetch(fallbackUrl);
-          if (res.ok) {
-            const data = await res.json();
-            return { translatedText: data[0].map((x) => x[0]).join("") };
+          try {
+            const fallbackUrl = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=${params.targetLang}&dt=t&q=${encodeURIComponent(params.text)}`;
+            const res = await fetch(fallbackUrl);
+            if (res.ok) {
+              const data = await res.json();
+              const translatedText = data[0].map((x) => x[0]).join("");
+              return { translatedText };
+            }
+          } catch (err) {
+            console.error("[translationService]: Google Translate fallback failed:", err);
           }
         }
         throw new Error("All translation strategies failed.");
@@ -765,32 +831,48 @@ var init_AIProvider = __esm({
     AIContext = (0, import_react4.createContext)(null);
     AIProvider = ({
       children,
-      config,
-      apiKey: directApiKey
+      config = {},
+      apiKey: legacyApiKey,
+      provider: legacyProvider
     }) => {
-      const apiKey = directApiKey || config?.apiKey;
-      const provider = config?.provider || "gemini";
-      const modelName = config?.modelName || (provider === "gemini" ? "gemini-2.5-flash" : "gpt-4o-mini");
+      const activeProvider = config.provider || legacyProvider || "gemini";
+      const geminiConfig = {
+        apiKey: config.gemini?.apiKey || (activeProvider === "gemini" ? legacyApiKey : void 0),
+        modelName: config.gemini?.modelName || "gemini-2.5-flash"
+      };
+      const openaiConfig = {
+        apiKey: config.openai?.apiKey || (activeProvider === "openai" ? legacyApiKey : void 0),
+        modelName: config.openai?.modelName || "gpt-4o-mini"
+      };
       const contextValue = (0, import_react4.useMemo)(() => {
         return {
-          apiKey,
-          provider,
-          modelName,
+          activeProvider,
+          config: {
+            provider: activeProvider,
+            gemini: geminiConfig,
+            openai: openaiConfig
+          },
           generate: async ({
             prompt,
             systemInstruction,
             jsonMode = false,
-            temperature
+            temperature,
+            provider: overrideProvider,
+            modelName: overrideModelName
           }) => {
-            if (!apiKey) {
-              console.warn("[AIProvider]: API Key \u043D\u0435 \u0437\u0430\u0434\u0430\u043D.");
-              return null;
-            }
-            if (provider === "gemini") {
+            const targetProvider = overrideProvider || activeProvider;
+            if (targetProvider === "gemini") {
+              const key = geminiConfig.apiKey;
+              const model = overrideModelName || geminiConfig.modelName || "gemini-2.5-flash";
+              if (!key) {
+                console.warn("[AIProvider]: API Key \u0434\u043B\u044F Gemini \u043D\u0435 \u0437\u0430\u0434\u0430\u043D.");
+                return null;
+              }
               try {
-                const ai = new import_genai.GoogleGenAI({ apiKey });
+                const ai = new import_genai.GoogleGenAI({ apiKey: key });
                 const response = await ai.models.generateContent({
-                  model: modelName,
+                  model,
+                  // Теперь гарантированно string
                   contents: prompt,
                   config: {
                     systemInstruction,
@@ -809,7 +891,13 @@ var init_AIProvider = __esm({
                 return null;
               }
             }
-            if (provider === "openai") {
+            if (targetProvider === "openai") {
+              const key = openaiConfig.apiKey;
+              const model = overrideModelName || openaiConfig.modelName;
+              if (!key) {
+                console.warn("[AIProvider]: API Key \u0434\u043B\u044F OpenAI \u043D\u0435 \u0437\u0430\u0434\u0430\u043D.");
+                return null;
+              }
               try {
                 const messages = [];
                 if (systemInstruction) {
@@ -820,15 +908,19 @@ var init_AIProvider = __esm({
                   method: "POST",
                   headers: {
                     "Content-Type": "application/json",
-                    Authorization: `Bearer ${apiKey}`
+                    Authorization: `Bearer ${key}`
                   },
                   body: JSON.stringify({
-                    model: modelName,
+                    model,
                     messages,
                     temperature,
                     ...jsonMode ? { response_format: { type: "json_object" } } : {}
                   })
                 });
+                if (!res.ok) {
+                  const errData = await res.json().catch(() => ({}));
+                  throw new Error(`OpenAI API status ${res.status}: ${JSON.stringify(errData)}`);
+                }
                 const data = await res.json();
                 const content = data.choices?.[0]?.message?.content?.trim() || "";
                 if (jsonMode) {
@@ -843,7 +935,13 @@ var init_AIProvider = __esm({
             return null;
           }
         };
-      }, [apiKey, provider, modelName]);
+      }, [
+        activeProvider,
+        geminiConfig.apiKey,
+        geminiConfig.modelName,
+        openaiConfig.apiKey,
+        openaiConfig.modelName
+      ]);
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AIContext.Provider, { value: contextValue, children });
     };
     useAI = () => {
@@ -857,7 +955,7 @@ var init_AIProvider = __esm({
 });
 
 // src/i18n/TranslationDialog.tsx
-var import_react5, import_material, import_AutoFixHigh, import_Translate, import_Lightbulb, import_jsx_runtime5, TranslationDialog;
+var import_react5, import_material, import_AutoFixHigh, import_Translate, import_Lightbulb, import_SmartToy, import_jsx_runtime5, TranslationDialog;
 var init_TranslationDialog = __esm({
   "src/i18n/TranslationDialog.tsx"() {
     "use strict";
@@ -866,6 +964,7 @@ var init_TranslationDialog = __esm({
     import_AutoFixHigh = __toESM(require("@mui/icons-material/AutoFixHigh"));
     import_Translate = __toESM(require("@mui/icons-material/Translate"));
     import_Lightbulb = __toESM(require("@mui/icons-material/Lightbulb"));
+    import_SmartToy = __toESM(require("@mui/icons-material/SmartToy"));
     init_translation_service();
     init_SupabaseProvider();
     init_AIProvider();
@@ -878,10 +977,11 @@ var init_TranslationDialog = __esm({
       onSave
     }) => {
       const supabase = useSupabase();
-      const { generate } = useAI();
+      const { generate, activeProvider: defaultProvider } = useAI();
       const [languages, setLanguages] = (0, import_react5.useState)([]);
       const [values, setValues] = (0, import_react5.useState)({});
       const [contextHint, setContextHint] = (0, import_react5.useState)("");
+      const [selectedProvider, setSelectedProvider] = (0, import_react5.useState)("auto");
       const [loading, setLoading] = (0, import_react5.useState)(false);
       const [saving, setSaving] = (0, import_react5.useState)(false);
       const [translatingCode, setTranslatingCode] = (0, import_react5.useState)(null);
@@ -918,6 +1018,7 @@ var init_TranslationDialog = __esm({
         };
         fetchData();
       }, [open, translationKey, namespace]);
+      const effectiveProvider = selectedProvider === "auto" ? void 0 : selectedProvider;
       const handleAutoTranslate = async (e, targetLang) => {
         e.preventDefault();
         e.stopPropagation();
@@ -927,13 +1028,14 @@ var init_TranslationDialog = __esm({
           const res = await translationService.translateSmart(supabase, generate, {
             text: translationKey,
             targetLang,
-            contextHint
+            contextHint,
+            provider: effectiveProvider
           });
           if (res?.translatedText) {
             setValues((prev) => ({ ...prev, [targetLang]: res.translatedText }));
           }
         } catch (err) {
-          console.log(err);
+          console.error(err);
           setError(`Failed to translate into ${targetLang}. ${err?.message || ""}`);
         } finally {
           setTranslatingCode(null);
@@ -950,7 +1052,8 @@ var init_TranslationDialog = __esm({
           const res = await translationService.translateSmart(supabase, generate, {
             text: translationKey,
             targetLangs,
-            contextHint
+            contextHint,
+            provider: effectiveProvider
           });
           if (res?.translations) {
             setValues((prev) => ({ ...prev, ...res.translations }));
@@ -993,36 +1096,76 @@ var init_TranslationDialog = __esm({
           onClick: (e) => e.stopPropagation(),
           onMouseDown: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.DialogTitle, { sx: { pb: 1, display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.Box, { children: [
-                "Context Translation",
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.Typography, { component: "div", variant: "subtitle2", color: "text.secondary", sx: { wordBreak: "break-all", mt: 0.5 }, children: [
-                  "Original: ",
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("strong", { children: [
-                    '"',
-                    translationKey,
-                    '"'
-                  ] })
-                ] })
-              ] }),
-              !loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                import_material.Button,
-                {
-                  type: "button",
-                  size: "small",
-                  variant: "outlined",
-                  color: "secondary",
-                  startIcon: isTranslatingAll ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material.CircularProgress, { size: 16, color: "inherit" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Translate.default, { fontSize: "small" }),
-                  onClick: handleTranslateAll,
-                  disabled: isBusy,
-                  sx: { flexShrink: 0, ml: 2, whiteSpace: "nowrap" },
-                  children: isTranslatingAll ? "Translating..." : "Translate All"
-                }
-              )
-            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              import_material.DialogTitle,
+              {
+                sx: { pb: 1, display: "flex", justifyContent: "space-between", alignItems: "flex-start" },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.Box, { children: [
+                    "Context Translation",
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                      import_material.Typography,
+                      {
+                        component: "div",
+                        variant: "subtitle2",
+                        color: "text.secondary",
+                        sx: { wordBreak: "break-all", mt: 0.5 },
+                        children: [
+                          "Original: ",
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("strong", { children: [
+                            '"',
+                            translationKey,
+                            '"'
+                          ] })
+                        ]
+                      }
+                    )
+                  ] }),
+                  !loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    import_material.Button,
+                    {
+                      type: "button",
+                      size: "small",
+                      variant: "outlined",
+                      color: "secondary",
+                      startIcon: isTranslatingAll ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material.CircularProgress, { size: 16, color: "inherit" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Translate.default, { fontSize: "small" }),
+                      onClick: handleTranslateAll,
+                      disabled: isBusy,
+                      sx: { flexShrink: 0, ml: 2, whiteSpace: "nowrap" },
+                      children: isTranslatingAll ? "Translating..." : "Translate All"
+                    }
+                  )
+                ]
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.DialogContent, { dividers: true, sx: { pt: 2 }, children: [
               error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material.Alert, { severity: "error", onClose: () => setError(null), sx: { mb: 2 }, children: error }),
               loading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material.Box, { sx: { display: "flex", justifyContent: "center", py: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material.CircularProgress, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.Box, { sx: { display: "flex", flexDirection: "column", gap: 2.5 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_SmartToy.default, { fontSize: "small", color: "action" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material.Typography, { variant: "caption", sx: { fontWeight: 600, color: "text.secondary" }, children: "AI Engine:" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                    import_material.ToggleButtonGroup,
+                    {
+                      size: "small",
+                      value: selectedProvider,
+                      exclusive: true,
+                      onChange: (_, val) => val && setSelectedProvider(val),
+                      disabled: isBusy,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.ToggleButton, { value: "auto", sx: { px: 1.5, py: 0.2, fontSize: "0.75rem" }, children: [
+                          "Auto (",
+                          defaultProvider,
+                          ")"
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material.ToggleButton, { value: "gemini", sx: { px: 1.5, py: 0.2, fontSize: "0.75rem" }, children: "Gemini" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material.ToggleButton, { value: "openai", sx: { px: 1.5, py: 0.2, fontSize: "0.75rem" }, children: "OpenAI" })
+                      ]
+                    }
+                  )
+                ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.Paper, { variant: "outlined", sx: { p: 2, bgcolor: "action.hover", borderRadius: 2 }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1 }, children: [
                     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Lightbulb.default, { color: "warning", fontSize: "small" }),
@@ -1071,7 +1214,7 @@ var init_TranslationDialog = __esm({
                       disabled: isBusy
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material.Tooltip, { title: "Translate with context hint", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material.Tooltip, { title: `Translate using ${selectedProvider === "auto" ? defaultProvider : selectedProvider}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     import_material.IconButton,
                     {
                       type: "button",
@@ -1086,16 +1229,7 @@ var init_TranslationDialog = __esm({
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.DialogActions, { sx: { px: 3, py: 2 }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material.Button, { onClick: onClose, disabled: isBusy, color: "inherit", type: "button", children: "Cancel" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                import_material.Button,
-                {
-                  onClick: handleSaveAll,
-                  variant: "contained",
-                  disabled: isBusy,
-                  type: "button",
-                  children: saving ? "Saving..." : "Save All"
-                }
-              )
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material.Button, { onClick: handleSaveAll, variant: "contained", disabled: isBusy, type: "button", children: saving ? "Saving..." : "Save All" })
             ] })
           ]
         }
@@ -4542,9 +4676,7 @@ var SwitchComponent = ({
 }) => {
   const currentLabel = label ?? (checked ? checkedLabel : uncheckedLabel);
   const renderLabel = (node) => {
-    console.log(node);
     if (typeof node === "string") {
-      console.log("string");
       return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TranslateText, { overrideNamespace, children: node });
     }
     return node;

package/dist/index.mjs

@@ -43,7 +43,7 @@ import {
   useTranslationEdit,
   useTranslationNamespace,
   useUserSettings
-} from "./chunk-FRDK4RQX.mjs";
+} from "./chunk-EW4DX6YG.mjs";
 
 // src/UI/components/inputs/TextFieldComponent.tsx
 import { useState } from "react";
@@ -741,7 +741,7 @@ var EmailInputComponent = ({
 import { useState as useState5, useEffect as useEffect2, lazy, Suspense } from "react";
 import { Avatar, Tooltip as Tooltip3, Typography as Typography2 } from "@mui/material";
 import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var LazyUserPopover = lazy(() => import("./UserPopoverComponent-K7CJNYYL.mjs"));
+var LazyUserPopover = lazy(() => import("./UserPopoverComponent-LI5272PW.mjs"));
 var getInitials = (name) => {
   if (!name) return "?";
   const parts = name.trim().split(" ");
@@ -1810,9 +1810,7 @@ var SwitchComponent = ({
 }) => {
   const currentLabel = label ?? (checked ? checkedLabel : uncheckedLabel);
   const renderLabel = (node) => {
-    console.log(node);
     if (typeof node === "string") {
-      console.log("string");
       return /* @__PURE__ */ jsx12(TranslateText, { overrideNamespace, children: node });
     }
     return node;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serhii.olishevskyi/docs",
-  "version": "1.2.12",
+  "version": "1.2.13",
   "description": "DOCS.UA react packages",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",