[Update] Main Page: Language Settings. Translation Engines. To selectable.

src-ui/app/App.jsx

@@ -51,7 +51,14 @@ const StartPythonFacadeComponent = () => {
     const { getSendMessageButtonType } = useSendMessageButtonType();
     const { getUiLanguage } = useUiLanguage();
 
-    const { getSelectedPresetTabNumber, getEnableMultiTranslation, getSelectedYourLanguages, getSelectedTargetLanguages } = useLanguageSettings();
+    const {
+        getSelectedPresetTabNumber,
+        getEnableMultiTranslation,
+        getSelectedYourLanguages,
+        getSelectedTargetLanguages,
+        getTranslationEngines,
+        getSelectedTranslationEngines,
+    } = useLanguageSettings();
     const { getSelectableLanguageList } = useSelectableLanguageList();
 
 
@@ -68,6 +75,8 @@ const StartPythonFacadeComponent = () => {
                 getSelectedYourLanguages();
                 getSelectedTargetLanguages();
                 getSelectableLanguageList();
+                getTranslationEngines();
+                getSelectedTranslationEngines();
 
                 getEnableAutoMicSelect();
                 getEnableAutoSpeakerSelect();

src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx

@@ -2,27 +2,45 @@ import { useTranslation } from "react-i18next";
 
 import styles from "./TranslatorSelectorOpenButton.module.scss";
 import { TranslatorSelector } from "./translator_selector/TranslatorSelector";
-import { useStore_TranslatorList, useStore_SelectedTranslatorId, useStore_IsOpenedTranslatorSelector } from "@store";
+import { useStore_IsOpenedTranslatorSelector } from "@store";
+import { useLanguageSettings } from "@logics_main/useLanguageSettings";
 
 export const TranslatorSelectorOpenButton = () => {
     const { t } = useTranslation();
-    const { currentSelectedTranslatorId } = useStore_SelectedTranslatorId();
-    const { currentTranslatorList } = useStore_TranslatorList();
-    const currentTranslator = currentTranslatorList.find(
-        translator_data => translator_data.translator_key === currentSelectedTranslatorId
-    );
+    const {
+        currentSelectedPresetTabNumber,
+        currentTranslationEngines,
+        getTranslationEngines,
+        currentSelectedTranslationEngines,
+    } = useLanguageSettings();
+
+    // console.log(currentTranslationEngines, currentSelectedTranslationEngines);
+    const selected_translator_name = (currentTranslationEngines.state === "loading")
+    ? "Loading..."
+    : currentTranslationEngines.data.find(
+        translator_data => translator_data.translator_id === currentSelectedTranslationEngines[currentSelectedPresetTabNumber.data]
+    )?.translator_name;
+
 
     const { currentIsOpenedTranslatorSelector, updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
 
-    const openTranslatorSelector = () => updateIsOpenedTranslatorSelector(!currentIsOpenedTranslatorSelector);
+    const openTranslatorSelector = () => {
+        getTranslationEngines();
+        updateIsOpenedTranslatorSelector(!currentIsOpenedTranslatorSelector);
+    };
 
     return (
         <div className={styles.container}>
             <div className={styles.translator_selector_button} onClick={openTranslatorSelector}>
-                <p className={styles.label}>{t("main_page.translator")}</p>
-                <p className={styles.label}>{currentTranslator?.translator_name}</p>
+                <p className={styles.label}>{t("main_page.translator")}: </p>
+                <p className={styles.label}>{selected_translator_name}</p>
             </div>
-            {currentIsOpenedTranslatorSelector && <TranslatorSelector />}
+            {currentIsOpenedTranslatorSelector &&
+                <TranslatorSelector
+                    selected_translator_id={currentSelectedTranslationEngines}
+                    translation_engines={currentTranslationEngines}
+                />
+            }
         </div>
     );
 };

src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx

@@ -1,22 +1,24 @@
 import styles from "./TranslatorSelector.module.scss";
 import { chunkArray } from "@utils/chunkArray";
 
-import { useStore_TranslatorList, useStore_SelectedTranslatorId, useStore_IsOpenedTranslatorSelector } from "@store";
-export const TranslatorSelector = () => {
-    const { currentTranslatorList } = useStore_TranslatorList();
-    const columns = chunkArray(currentTranslatorList, 2);
+import { useStore_IsOpenedTranslatorSelector } from "@store";
+import { useLanguageSettings } from "@logics_main/useLanguageSettings";
+
+export const TranslatorSelector = ({selected_translator_id, translation_engines}) => {
+    const columns = (translation_engines.data !== undefined) ? chunkArray(translation_engines.data, 2) : [];
 
     return (
         <div className={styles.container}>
             <div className={styles.wrapper}>
                 {columns.map((column, column_index) => (
                     <div className={styles.column_wrapper} key={`column_${column_index}`}>
-                        {column.map(({ translator_key, translator_name, is_available }) => (
+                        {column.map(({ translator_id, translator_name, is_available }) => (
                             <TranslatorBox
-                                key={translator_key}
-                                translator_id={translator_key}
+                                key={translator_id}
+                                translator_id={translator_id}
                                 translator_name={translator_name}
                                 is_available={is_available}
+                                is_selected={(translator_id === selected_translator_id)}
                             />
                         ))}
                     </div>
@@ -28,17 +30,17 @@ export const TranslatorSelector = () => {
 
 import clsx from "clsx";
 const TranslatorBox = (props) => {
-    const { currentSelectedTranslatorId, updateSelectedTranslatorId} = useStore_SelectedTranslatorId();
+    const { currentSelectedPresetTabNumber, currentSelectedTranslationEngines, setSelectedTranslationEngines} = useLanguageSettings();
     const { updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
 
     const box_class_name = clsx(
         styles.box,
-        { [styles["is_selected"]]: (currentSelectedTranslatorId === props.translator_id) ? true : false },
+        { [styles["is_selected"]]: (currentSelectedTranslationEngines[currentSelectedPresetTabNumber.data] === props.translator_id) ? true : false },
         { [styles["is_available"]]: (props.is_available === true) ? true : false }
     );
 
     const selectTranslator = () => {
-        updateSelectedTranslatorId(props.translator_id);
+        setSelectedTranslationEngines(props.translator_id);
         updateIsOpenedTranslatorSelector(false);
     };
     return (