Merge branch 'ui' into develop

locales/en.yml

@@ -76,6 +76,7 @@ config_page:
     common:
         version: "Version {{version}}"
         model_download_button_label: "Download"
+        correct_auth_key_required: "Correct Auth Key Required"
         compute_device:
             desc: "The accuracy and speed of each processing type may vary depending on your machine specs, and the compatibility with calculation methods may differ from the displayed order. Please use this as a general guideline."
             label_device: "Processing Device"

src-ui/logics/_useBackendErrorHandling.js

@@ -48,7 +48,7 @@ export const _useBackendErrorHandling = () => {
         updateOpenAIAuthKey,
         updateSelectedOpenAIModel,
 
-        updateLMStudioUrl,
+        updateLMStudioURL,
         updateSelectedLMStudioModel,
 
         updateSelectedOllamaModel,
@@ -223,10 +223,10 @@ export const _useBackendErrorHandling = () => {
 
             case "/set/data/lmstudio_url":
                 if (message === "LMStudio URL is not valid") {
-                    updateLMStudioUrl(data);
+                    updateLMStudioURL(data);
                     showNotification_Error(message, { category_id: "lmstudio_url" });
                 } else {
-                    updateLMStudioUrl(data);
+                    updateLMStudioURL(data);
                     showNotification_Error(message, { category_id: "lmstudio_url" });
                 }
                 return;

src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_download_button/_DownloadButton.module.scss

@@ -6,6 +6,7 @@
     justify-content: center;
     width: 100%;
     max-width: 8rem;
+    flex-shrink: 0;
 }
 
 .download_button {

src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.module.scss

@@ -4,6 +4,7 @@
     display: flex;
     flex-direction: row;
     gap: 2.8rem;
+    flex-shrink: 0;
 }
 
 .each_dropdown_menu_wrapper {
@@ -12,6 +13,7 @@
     gap: 0.6rem;
     white-space: nowrap;
     max-width: 24rem;
+    flex-shrink: 0;
     &.is_disabled {
         pointer-events: none;
     }

src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx

@@ -294,22 +294,28 @@ const PlamoModelContainer = () => {
 
         currentSelectedPlamoModel,
         setSelectedPlamoModel,
+
+        currentPlamoAuthKey,
     } = useTranslation();
 
-    if (currentSelectablePlamoModelList.data.length === 0) return null;
 
     const selectFunction = (selected_data) => {
         setSelectedPlamoModel(selected_data.selected_id);
     };
 
+
+    let selected_label = (!currentPlamoAuthKey.data && !currentSelectedPlamoModel.data) ? t("config_page.common.correct_auth_key_required") : currentSelectedPlamoModel.data;
+
+
     return (
         <DropdownMenuContainer
             dropdown_id="select_plamo_model"
             label="Select Plamo Model"
-            selected_id={currentSelectedPlamoModel.data}
+            selected_id={selected_label}
             list={currentSelectablePlamoModelList.data}
             selectFunction={selectFunction}
             state={currentSelectedPlamoModel.state}
+            is_disabled={!currentPlamoAuthKey.data}
         />
     );
 };
@@ -350,22 +356,28 @@ const GeminiModelContainer = () => {
 
         currentSelectedGeminiModel,
         setSelectedGeminiModel,
+
+        currentGeminiAuthKey,
     } = useTranslation();
 
-    if (currentSelectableGeminiModelList.data.length === 0) return null;
 
     const selectFunction = (selected_data) => {
         setSelectedGeminiModel(selected_data.selected_id);
     };
 
+    let selected_label = (!currentGeminiAuthKey.data && !currentSelectedGeminiModel.data)
+        ? t("config_page.common.correct_auth_key_required")
+        : currentSelectedGeminiModel.data;
+
     return (
         <DropdownMenuContainer
             dropdown_id="select_gemini_model"
             label="Select Gemini Model"
-            selected_id={currentSelectedGeminiModel.data}
+            selected_id={selected_label}
             list={currentSelectableGeminiModelList.data}
             selectFunction={selectFunction}
             state={currentSelectedGeminiModel.state}
+            is_disabled={!currentGeminiAuthKey.data}
         />
     );
 };
@@ -405,22 +417,28 @@ const OpenAIModelContainer = () => {
 
         currentSelectedOpenAIModel,
         setSelectedOpenAIModel,
+
+        currentOpenAIAuthKey,
     } = useTranslation();
 
-    if (currentSelectableOpenAIModelList.data.length === 0) return null;
 
     const selectFunction = (selected_data) => {
         setSelectedOpenAIModel(selected_data.selected_id);
     };
 
+    let selected_label = (!currentOpenAIAuthKey.data && !currentSelectedOpenAIModel.data)
+        ? t("config_page.common.correct_auth_key_required")
+        : currentSelectedOpenAIModel.data;
+
     return (
         <DropdownMenuContainer
             dropdown_id="select_openai_model"
             label="Select OpenAI Model"
-            selected_id={currentSelectedOpenAIModel.data}
+            selected_id={selected_label}
             list={currentSelectableOpenAIModelList.data}
             selectFunction={selectFunction}
             state={currentSelectedOpenAIModel.state}
+            is_disabled={!currentOpenAIAuthKey.data}
         />
     );
 };
@@ -479,20 +497,25 @@ const LMStudioModelContainer = () => {
         setSelectedLMStudioModel,
     } = useTranslation();
 
-    if (currentSelectableLMStudioModelList.data.length === 0) return null;
+    const { currentIsLMStudioConnected } = useLLMConnection();
 
     const selectFunction = (selected_data) => {
         setSelectedLMStudioModel(selected_data.selected_id);
     };
 
+    let selected_label = (!currentIsLMStudioConnected.data && !currentSelectedLMStudioModel.data)
+        ? "Connection Required"
+        : currentSelectedLMStudioModel.data;
+
     return (
         <DropdownMenuContainer
             dropdown_id="select_lmstudio_model"
             label="Select LMStudio Model"
-            selected_id={currentSelectedLMStudioModel.data}
+            selected_id={selected_label}
             list={currentSelectableLMStudioModelList.data}
             selectFunction={selectFunction}
             state={currentSelectedLMStudioModel.state}
+            is_disabled={!currentIsLMStudioConnected.data}
         />
     );
 };
@@ -523,20 +546,25 @@ const OllamaModelContainer = () => {
         setSelectedOllamaModel,
     } = useTranslation();
 
-    if (currentSelectableOllamaModelList.data.length === 0) return null;
+    const { currentIsOllamaConnected } = useLLMConnection();
 
     const selectFunction = (selected_data) => {
         setSelectedOllamaModel(selected_data.selected_id);
     };
 
+    let selected_label = (!currentIsOllamaConnected.data && !currentSelectedOllamaModel.data)
+        ? "Connection Required"
+        : currentSelectedOllamaModel.data;
+
     return (
         <DropdownMenuContainer
             dropdown_id="select_ollama_model"
             label="Select Ollama Model"
-            selected_id={currentSelectedOllamaModel.data}
+            selected_id={selected_label}
             list={currentSelectableOllamaModelList.data}
             selectFunction={selectFunction}
             state={currentSelectedOllamaModel.state}
+            is_disabled={!currentIsOllamaConnected.data}
         />
     );
 };