From 22e6af860daded3b1fd9a431e27fa927a50c99cc Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Mon, 22 Dec 2025 15:18:30 +0900
Subject: [PATCH] [Update] UI: Add Groq and OpenRouter components.

---
 .../config_page_setter/ui_config_setter.js    |  56 ++++++++
 src-ui/logics/ui_configs.js                   |   2 +
 .../setting_box/translation/Translation.jsx   | 126 ++++++++++++++++++
 3 files changed, 184 insertions(+)

diff --git a/src-ui/logics/configs/config_page_setter/ui_config_setter.js b/src-ui/logics/configs/config_page_setter/ui_config_setter.js
index f3790a6c..0ffb7a89 100644
--- a/src-ui/logics/configs/config_page_setter/ui_config_setter.js
+++ b/src-ui/logics/configs/config_page_setter/ui_config_setter.js
@@ -314,6 +314,62 @@ export const SETTINGS_ARRAY = [
         add_endpoint_run_array: ["from_backend"],
         base_endpoint_name: "selected_openai_model",
     },
+    // Groq
+    {
+        Category: "Translation",
+        Base_Name: "GroqAuthKey",
+        default_value: "",
+        ui_template_id: "input",
+        logics_template_id: "get_set_delete",
+        base_endpoint_name: "groq_auth_key",
+    },
+    {
+        Category: "Translation",
+        Base_Name: "SelectableGroqModelList",
+        default_value: [],
+        ui_template_id: "list",
+        logics_template_id: "get_set",
+        add_endpoint_run_array: ["from_backend"],
+        base_endpoint_name: "selectable_groq_model_list",
+        response_transform: "arrayToObject",
+    },
+    {
+        Category: "Translation",
+        Base_Name: "SelectedGroqModel",
+        default_value: "",
+        ui_template_id: "select",
+        logics_template_id: "get_set",
+        add_endpoint_run_array: ["from_backend"],
+        base_endpoint_name: "selected_groq_model",
+    },
+    // Open Router
+    {
+        Category: "Translation",
+        Base_Name: "OpenRouterAuthKey",
+        default_value: "",
+        ui_template_id: "input",
+        logics_template_id: "get_set_delete",
+        base_endpoint_name: "openrouter_auth_key",
+    },
+    {
+        Category: "Translation",
+        Base_Name: "SelectableOpenRouterModelList",
+        default_value: [],
+        ui_template_id: "list",
+        logics_template_id: "get_set",
+        add_endpoint_run_array: ["from_backend"],
+        base_endpoint_name: "selectable_openrouter_model_list",
+        response_transform: "arrayToObject",
+    },
+    {
+        Category: "Translation",
+        Base_Name: "SelectedOpenRouterModel",
+        default_value: "",
+        ui_template_id: "select",
+        logics_template_id: "get_set",
+        add_endpoint_run_array: ["from_backend"],
+        base_endpoint_name: "selected_openrouter_model",
+    },
     // LM Studio
     {
         Category: "Translation",
diff --git a/src-ui/logics/ui_configs.js b/src-ui/logics/ui_configs.js
index 49b4239f..be6eb194 100644
--- a/src-ui/logics/ui_configs.js
+++ b/src-ui/logics/ui_configs.js
@@ -110,6 +110,8 @@ export const translator_status = [
     { id: "Plamo_API", label: `Plamo API`, is_available: false },
     { id: "Gemini_API", label: `Gemini API`, is_available: false },
     { id: "OpenAI_API", label: `OpenAI API`, is_available: false },
+    { id: "Groq_API", label: `Groq API`, is_available: false },
+    { id: "OpenRouter_API", label: `OpenRouter API`, is_available: false },
     { id: "LMStudio", label: `LMStudio`, is_available: false },
     { id: "Ollama", label: `Ollama`, is_available: false },
 ];
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx b/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx
index c4bef2fb..b7e3b91e 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx
@@ -49,6 +49,12 @@ export const Translation = () => {
             <OpenAIAuthKey_Box />
             <OpenAIModelContainer />
 
+            <GroqAuthKey_Box />
+            <GroqModelContainer />
+
+            <OpenRouterAuthKey_Box />
+            <OpenRouterModelContainer />
+
             <LMStudioConnectionCheck_Box />
             <LMStudioURL_Box />
             <LMStudioModelContainer />
@@ -444,6 +450,126 @@ const OpenAIModelContainer = () => {
 };
 
 
+const GroqAuthKey_Box = () => {
+    const { t } = useI18n();
+    const { currentGroqAuthKey, setGroqAuthKey, deleteGroqAuthKey } = useTranslation();
+
+    const { variable, onChangeFunction, saveFunction } = useSaveButtonLogic({
+        variable: currentGroqAuthKey.data,
+        state: currentGroqAuthKey.state,
+        setFunction: setGroqAuthKey,
+        deleteFunction: deleteGroqAuthKey,
+    });
+
+    return (
+        <>
+            <AuthKeyContainer
+                label="Groq Auth Key"
+                desc="Groq Auth Desc"
+                // webpage_url={deepl_auth_key_url}
+                // open_webpage_label={t("config_page.translation.deepl_auth_key.open_auth_key_webpage")}
+                variable={variable}
+                state={currentGroqAuthKey.state}
+                onChangeFunction={onChangeFunction}
+                saveFunction={saveFunction}
+                remove_border_bottom={true}
+            />
+        </>
+    );
+};
+const GroqModelContainer = () => {
+    const { t } = useI18n();
+    const {
+        currentSelectableGroqModelList,
+
+        currentSelectedGroqModel,
+        setSelectedGroqModel,
+
+        currentGroqAuthKey,
+    } = useTranslation();
+
+
+    const selectFunction = (selected_data) => {
+        setSelectedGroqModel(selected_data.selected_id);
+    };
+
+    let selected_label = (!currentGroqAuthKey.data && !currentSelectedGroqModel.data)
+        ? t("config_page.common.correct_auth_key_required")
+        : currentSelectedGroqModel.data;
+
+    return (
+        <DropdownMenuContainer
+            dropdown_id="select_groq_model"
+            label="Select Groq Model"
+            selected_id={selected_label}
+            list={currentSelectableGroqModelList.data}
+            selectFunction={selectFunction}
+            state={currentSelectedGroqModel.state}
+            is_disabled={!currentGroqAuthKey.data}
+        />
+    );
+};
+
+
+const OpenRouterAuthKey_Box = () => {
+    const { t } = useI18n();
+    const { currentOpenRouterAuthKey, setOpenRouterAuthKey, deleteOpenRouterAuthKey } = useTranslation();
+
+    const { variable, onChangeFunction, saveFunction } = useSaveButtonLogic({
+        variable: currentOpenRouterAuthKey.data,
+        state: currentOpenRouterAuthKey.state,
+        setFunction: setOpenRouterAuthKey,
+        deleteFunction: deleteOpenRouterAuthKey,
+    });
+
+    return (
+        <>
+            <AuthKeyContainer
+                label="OpenRouter Auth Key"
+                desc="OpenRouter Auth Desc"
+                // webpage_url={deepl_auth_key_url}
+                // open_webpage_label={t("config_page.translation.deepl_auth_key.open_auth_key_webpage")}
+                variable={variable}
+                state={currentOpenRouterAuthKey.state}
+                onChangeFunction={onChangeFunction}
+                saveFunction={saveFunction}
+                remove_border_bottom={true}
+            />
+        </>
+    );
+};
+const OpenRouterModelContainer = () => {
+    const { t } = useI18n();
+    const {
+        currentSelectableOpenRouterModelList,
+
+        currentSelectedOpenRouterModel,
+        setSelectedOpenRouterModel,
+
+        currentOpenRouterAuthKey,
+    } = useTranslation();
+
+
+    const selectFunction = (selected_data) => {
+        setSelectedOpenRouterModel(selected_data.selected_id);
+    };
+
+    let selected_label = (!currentOpenRouterAuthKey.data && !currentSelectedOpenRouterModel.data)
+        ? t("config_page.common.correct_auth_key_required")
+        : currentSelectedOpenRouterModel.data;
+
+    return (
+        <DropdownMenuContainer
+            dropdown_id="select_openrouter_model"
+            label="Select OpenRouter Model"
+            selected_id={selected_label}
+            list={currentSelectableOpenRouterModelList.data}
+            selectFunction={selectFunction}
+            state={currentSelectedOpenRouterModel.state}
+            is_disabled={!currentOpenRouterAuthKey.data}
+        />
+    );
+};
 
 const LMStudioConnectionCheck_Box = () => {
     const { t } = useI18n();