Merge branch 'ui' into for_webui

src-ui/app/App.jsx

@@ -20,6 +20,8 @@ export const App = () => {
 
 
 import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
+import { useEnableAutoMicSelect } from "@logics_configs/useEnableAutoMicSelect";
+import { useEnableAutoSpeakerSelect } from "@logics_configs/useEnableAutoSpeakerSelect";
 import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
 import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
 import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
@@ -29,6 +31,7 @@ import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClear
 import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
 import { useUiLanguage } from "@logics_configs/useUiLanguage";
 
+import { useLanguageSettings } from "@logics/useLanguageSettings";
 import { useSelectableLanguageList } from "@logics/useSelectableLanguageList";
 
 const StartPythonFacadeComponent = () => {
@@ -37,6 +40,8 @@ const StartPythonFacadeComponent = () => {
     const main_page = getCurrent();
 
     const { getSoftwareVersion } = useSoftwareVersion();
+    const { getEnableAutoMicSelect } = useEnableAutoMicSelect();
+    const { getEnableAutoSpeakerSelect } = useEnableAutoSpeakerSelect();
     const { getSelectedMicHost } = useSelectedMicHost();
     const { getSelectedMicDevice } = useSelectedMicDevice();
     const { getSelectedSpeakerDevice } = useSelectedSpeakerDevice();
@@ -46,6 +51,7 @@ const StartPythonFacadeComponent = () => {
     const { getSendMessageButtonType } = useSendMessageButtonType();
     const { getUiLanguage } = useUiLanguage();
 
+    const { getSelectedPresetTabNumber, getEnableMultiTranslation, getSelectedYourLanguages, getSelectedTargetLanguages } = useLanguageSettings();
     const { getSelectableLanguageList } = useSelectableLanguageList();
 
 
@@ -57,8 +63,14 @@ const StartPythonFacadeComponent = () => {
 
                 getSoftwareVersion();
 
+                getSelectedPresetTabNumber();
+                getEnableMultiTranslation();
+                getSelectedYourLanguages();
+                getSelectedTargetLanguages();
                 getSelectableLanguageList();
 
+                getEnableAutoMicSelect();
+                getEnableAutoSpeakerSelect();
                 getSelectedMicHost();
                 getSelectedMicDevice();
                 getSelectedSpeakerDevice();

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

@@ -31,6 +31,8 @@
 .dropdown_selected_text {
     font-size: 1.4rem;
     padding-right: 2.8rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .dropdown_content_wrapper {

src-ui/app/config_page/setting_section/setting_box/components/label_component/LabelComponent.module.scss

@@ -2,16 +2,20 @@
     display: flex;
     flex-direction: column;
     gap: 0.2rem;
+    flex-shrink: 0;
 }
 
 .label {
     font-size: 1.6rem;
     font-weight: 400;
     color: var(--dark_basic_text_color);
+    white-space: nowrap;
 }
 
 .desc {
     font-size: 1.4rem;
     font-weight: 300;
     color: var(--dark_500_color);
+    max-width: 38rem;
+    overflow-wrap: break-word;
 }

src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.module.scss

@@ -15,6 +15,7 @@
     cursor: pointer;
     padding: 2rem;
     height: 100%;
+    flex-shrink: 0;
     &.is_loading {
         pointer-events: none;
     }

src-ui/app/config_page/setting_section/setting_box/device/Device.jsx

@@ -77,30 +77,32 @@ const Mic_Container = () => {
                     </div>
 
                     <div className={styles.device_dropdown_wrapper}>
-                        <p className={styles.device_secondary_label}>{t("config_page.mic_host_device.label_host")}</p>
+                        <div className={styles.device_dropdown}>
-                        <DropdownMenu
+                            <p className={styles.device_secondary_label}>{t("config_page.mic_host_device.label_host")}</p>
-                            dropdown_id="mic_host"
+                            <DropdownMenu
-                            selected_id={currentSelectedMicHost.data}
+                                dropdown_id="mic_host"
-                            list={currentMicHostList.data}
+                                selected_id={currentSelectedMicHost.data}
-                            selectFunction={selectFunction_host}
+                                list={currentMicHostList.data}
-                            openListFunction={getMicHostList}
+                                selectFunction={selectFunction_host}
-                            state={currentSelectedMicHost.state}
+                                openListFunction={getMicHostList}
-                            style={{ maxWidth: "20rem", minWidth: "10rem" }}
+                                state={currentSelectedMicHost.state}
-                            is_disabled={is_disabled_selector}
+                                style={{ maxWidth: "20rem", minWidth: "10rem" }}
-                        />
+                                is_disabled={is_disabled_selector}
-                    </div>
+                            />
+                        </div>
 
-                    <div className={styles.device_dropdown_wrapper}>
+                        <div className={styles.device_dropdown}>
-                        <p className={styles.device_secondary_label}>{t("config_page.mic_host_device.label_device")}</p>
+                            <p className={styles.device_secondary_label}>{t("config_page.mic_host_device.label_device")}</p>
-                        <DropdownMenu
+                            <DropdownMenu
-                            dropdown_id="mic_device"
+                                dropdown_id="mic_device"
-                            selected_id={currentSelectedMicDevice.data}
+                                selected_id={currentSelectedMicDevice.data}
-                            list={currentMicDeviceList.data}
+                                list={currentMicDeviceList.data}
-                            selectFunction={selectFunction_device}
+                                selectFunction={selectFunction_device}
-                            openListFunction={getMicDeviceList}
+                                openListFunction={getMicDeviceList}
-                            state={currentSelectedMicDevice.state}
+                                state={currentSelectedMicDevice.state}
-                            is_disabled={is_disabled_selector}
+                                is_disabled={is_disabled_selector}
-                        />
+                            />
+                        </div>
                     </div>
                 </div>
             </div>
@@ -172,7 +174,7 @@ const Speaker_Container = () => {
                         />
                     </div>
 
-                    <div className={styles.device_dropdown_wrapper}>
+                    <div className={styles.device_dropdown}>
                         <p className={styles.device_secondary_label}>{t("config_page.mic_host_device.label_device")}</p>
                         <DropdownMenu
                             dropdown_id="speaker_device"

src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss

@@ -2,11 +2,11 @@
     display: flex;
     flex-direction: column;
     border-bottom: solid 0.1rem var(--dark_800_color);
-    padding-bottom: 2rem;
+    padding-bottom: 1rem;
 }
 
 .speaker_container {
-    padding-top: 2rem;
+    padding-top: 0rem;
 }
 
 .device_container {
@@ -38,6 +38,7 @@
     width: 100%;
     justify-content: space-between;
     align-items: center;
+    flex-shrink: 0;
 }
 
 .threshold_section {
@@ -54,7 +55,10 @@
 
 .device_contents {
     display: flex;
-    gap: 2.8rem;
+    width: 100%;
+    justify-content: end;
+    padding-left: 2rem;
+    gap: 2rem;
 }
 
 .device_auto_select_wrapper {
@@ -64,10 +68,17 @@
 }
 
 .device_dropdown_wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 2.8rem;
+}
+
+.device_dropdown {
     display: flex;
     flex-direction: column;
     gap: 0.6rem;
     white-space: nowrap;
+    max-width: 24rem;
     &.is_disabled {
         pointer-events: none;
     }
@@ -77,4 +88,5 @@
     padding-left: 0.2rem;
     font-size: 1.4rem;
     color: var(--dark_500_color);
+    white-space: nowrap;
 }

src-ui/app/main_page/main_section/MainSection.jsx

@@ -17,13 +17,23 @@ export const MainSection = () => {
     );
 };
 
+
+import { useLanguageSettings } from "@logics/useLanguageSettings";
 const HandleLanguageSelector = () => {
     const { currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
+    const {
+        currentSelectedYourLanguages,
+        setSelectedYourLanguages,
+        currentSelectedTargetLanguages,
+        setSelectedTargetLanguages,
+    } = useLanguageSettings();
 
     if (currentIsOpenedLanguageSelector.your_language === true) {
-        return <LanguageSelector id="your_language"/>;
+        const onclickFunction_YourLanguage = (payload) => setSelectedYourLanguages(payload);
+        return <LanguageSelector id="your_language" onClickFunction={onclickFunction_YourLanguage}/>;
     } else if (currentIsOpenedLanguageSelector.target_language === true) {
-        return <LanguageSelector id="target_language"/>;
+        const onclickFunction_TargetLanguage = (payload) => setSelectedTargetLanguages(payload);
+        return <LanguageSelector id="target_language" onClickFunction={onclickFunction_TargetLanguage}/>;
     } else {
         return null;
     }

src-ui/app/main_page/main_section/language_selector/LanguageSelector.jsx

@@ -4,14 +4,14 @@ import { useSelectableLanguageList } from "@logics/useSelectableLanguageList";
 import styles from "./LanguageSelector.module.scss";
 
 import { LanguageSelectorTopBar } from "./language_selector_top_bar/LanguageSelectorTopBar";
-export const LanguageSelector = ({ id }) => {
+export const LanguageSelector = ({ id, onClickFunction }) => {
     const { t } = useTranslation();
-    const { currentSelectableLanguageList, updateSelectableLanguageList } = useSelectableLanguageList();
+    const { currentSelectableLanguageList } = useSelectableLanguageList();
 
 
     const languageTitles = {
-        "your_language": t("selectable_language_window.title_your_language"),
+        your_language: t("selectable_language_window.title_your_language"),
-        "target_language": t("selectable_language_window.title_target_language")
+        target_language: t("selectable_language_window.title_target_language")
     };
 
     const language_selector_title = languageTitles[id] || "";
@@ -35,7 +35,7 @@ export const LanguageSelector = ({ id }) => {
             <div className={styles.language_list_scroll_wrapper}>
                 <div className={styles.language_list}>
                     {Object.entries(groupedLanguages).map(([letter, languages]) => (
-                        <LanguageGroup key={letter} letter={letter} languages={languages} />
+                        <LanguageGroup key={letter} onClickFunction={onClickFunction} letter={letter} languages={languages} />
                     ))}
                 </div>
             </div>
@@ -43,20 +43,28 @@ export const LanguageSelector = ({ id }) => {
     );
 };
 
-const LanguageGroup = ({ letter, languages }) => {
+const LanguageGroup = ({ onClickFunction, letter, languages }) => {
     return (
         <div className={styles.language_each_letter_box}>
             <p className={styles.language_latter}>{letter}</p>
             {languages.map((languageData, index) => (
-                <LanguageButton key={index} languageData={languageData} />
+                <LanguageButton key={index} onClickFunction={onClickFunction} languageData={languageData} />
             ))}
         </div>
     );
 };
 
-const LanguageButton = ({ languageData }) => {
+const LanguageButton = ({ onClickFunction, languageData }) => {
+
+    const adjustedOnClickFunction = () => {
+        onClickFunction({
+            language: languageData.language,
+            country: languageData.country
+        });
+    };
+
     return (
-        <div className={styles.language_button}>
+        <div className={styles.language_button} onClick={adjustedOnClickFunction}>
             <p className={styles.language_label}>{languageData.language} ({languageData.country})</p>
         </div>
     );

src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx

@@ -1,7 +1,5 @@
 import { useTranslation } from "react-i18next";
-
 import styles from "./LanguageSettings.module.scss";
-
 import { PresetTabSelector } from "./preset_tab_selector/PresetTabSelector";
 import { LanguageSelectorOpenButton } from "./language_selector_open_button/LanguageSelectorOpenButton";
 import { LanguageSwapButton } from "./language_swap_button/LanguageSwapButton";
@@ -9,11 +7,11 @@ import { TranslatorSelectorOpenButton } from "./translator_selector_open_button/
 import { useStore_IsOpenedTranslatorSelector } from "@store";
 
 export const LanguageSettings = () => {
-    const { updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
+    const { updateIsOpenedTranslatorSelector } = useStore_IsOpenedTranslatorSelector();
     const closeTranslatorSelector = () => updateIsOpenedTranslatorSelector(false);
 
     return (
-        <div className={styles.container} onMouseLeave={closeTranslatorSelector} >
+        <div className={styles.container} onMouseLeave={closeTranslatorSelector}>
             <p className={styles.title}>Language Settings</p>
             <PresetTabSelector />
             <PresetContainer />
@@ -21,81 +19,70 @@ export const LanguageSettings = () => {
     );
 };
 
-
 import MicSvg from "@images/mic.svg?react";
 import HeadphonesSvg from "@images/headphones.svg?react";
 import { useStore_IsOpenedLanguageSelector } from "@store";
 import { useMainFunction } from "@logics/useMainFunction";
+import { useLanguageSettings } from "@logics/useLanguageSettings";
+
+// 言語セレクターをトグルする処理を関数化
+const toggleSelector = (selector, currentStatus, updateSelector) => {
+    if (currentStatus) {
+        updateSelector({ your_language: false, target_language: false });
+    } else {
+        updateSelector({
+            your_language: selector === "your_language",
+            target_language: selector === "target_language",
+        });
+    }
+};
+
+// 選択された言語データの取得を関数化
+const getSelectedLanguageData = (presetTabData, languageData) => {
+    return (presetTabData !== undefined && languageData !== undefined)
+        ? languageData[Number(presetTabData)]
+        : undefined;
+};
 
 const PresetContainer = () => {
     const { t } = useTranslation();
     const { updateIsOpenedLanguageSelector, currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
 
+    const { currentTranscriptionSendStatus, currentTranscriptionReceiveStatus } = useMainFunction();
     const {
-        currentTranscriptionSendStatus,
+        currentSelectedPresetTabNumber,
-        currentTranscriptionReceiveStatus,
+        currentSelectedYourLanguages,
-    } = useMainFunction();
+        currentSelectedTargetLanguages,
+    } = useLanguageSettings();
+
+    const your_language_data = getSelectedLanguageData(currentSelectedPresetTabNumber.data, currentSelectedYourLanguages.data);
+    const target_language_data = getSelectedLanguageData(currentSelectedPresetTabNumber.data, currentSelectedTargetLanguages.data);
 
 
-    const closeLanguageSelector = () => {
+    const yourLanguageSettings = {
-        updateIsOpenedLanguageSelector({
-            your_language: false,
-            target_language: false,
-        });
-    };
-
-    const toggleYourLanguageSelector = () => {
-        if (currentIsOpenedLanguageSelector.your_language === true) {
-            closeLanguageSelector();
-        } else {
-            updateIsOpenedLanguageSelector({
-                your_language: true,
-                target_language: false,
-            });
-        }
-    };
-
-    const toggleTargetLanguageSelector = () => {
-        if (currentIsOpenedLanguageSelector.target_language === true) {
-            closeLanguageSelector();
-        } else {
-            updateIsOpenedLanguageSelector({
-                your_language: false,
-                target_language: true,
-            });
-        }
-    };
-
-    const handleLanguageSelectorClick = (selector) => {
-        if (selector === "your_language") {
-            toggleYourLanguageSelector();
-        } else if (selector === "target_language") {
-            toggleTargetLanguageSelector();
-        }
-    };
-
-    const your_language_settings = {
         title: t("main_page.your_language"),
         is_opened: currentIsOpenedLanguageSelector.your_language,
-        onClickFunction: () => handleLanguageSelectorClick("your_language"),
+        onClickFunction: () => toggleSelector("your_language", currentIsOpenedLanguageSelector.your_language, updateIsOpenedLanguageSelector),
         TurnedOnSvgComponent: <MicSvg />,
         is_turned_on: currentTranscriptionSendStatus.data,
+        variable: your_language_data?.primary,
     };
 
-    const target_language_settings = {
+    const targetLanguageSettings = {
         title: t("main_page.target_language"),
         is_opened: currentIsOpenedLanguageSelector.target_language,
-        onClickFunction: () => handleLanguageSelectorClick("target_language"),
+        onClickFunction: () => toggleSelector("target_language", currentIsOpenedLanguageSelector.target_language, updateIsOpenedLanguageSelector),
         TurnedOnSvgComponent: <HeadphonesSvg />,
         is_turned_on: currentTranscriptionReceiveStatus.data,
+        variable: target_language_data?.primary,
     };
 
     return (
         <div className={styles.preset_container}>
-            <LanguageSelectorOpenButton {...your_language_settings} />
+            <LanguageSelectorOpenButton {...yourLanguageSettings} />
             <LanguageSwapButton />
-            <LanguageSelectorOpenButton {...target_language_settings} />
+            <LanguageSelectorOpenButton {...targetLanguageSettings} />
             <TranslatorSelectorOpenButton />
         </div>
     );
-};
+};

src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx

@@ -2,32 +2,31 @@ import clsx from "clsx";
 import styles from "./LanguageSelectorOpenButton.module.scss";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
 import { useSvg } from "@utils/useSvg";
-export const LanguageSelectorOpenButton = (props) => {
 
-    const toggleLanguageSelector = () => {
+export const LanguageSelectorOpenButton = ({ title, onClickFunction, is_opened, TurnedOnSvgComponent, is_turned_on, variable }) => {
-        props.onClickFunction();
+    const classNames = clsx(styles.arrow_left_svg, {
-    };
+        [styles.reverse]: is_opened,
-
-    const class_names = clsx(styles["arrow_left_svg"], {
-        [styles["reverse"]]: props.is_opened
     });
 
-    const SvgComponent = useSvg(props.TurnedOnSvgComponent,
+    const SvgComponent = useSvg(TurnedOnSvgComponent, {
-        {className: clsx(styles["category_svg"], {
+        className: clsx(styles.category_svg, {
-            [styles["is_turned_on"]]: props.is_turned_on
+            [styles.is_turned_on]: is_turned_on,
-        })}
+        }),
-    );
+    });
+
+    const languageText = variable?.language ?? "Loading...";
+    const countryText = variable?.country ?? "Loading...";
 
     return (
         <div className={styles.container}>
             <div className={styles.title_container}>
                 {SvgComponent}
-                <p className={styles.title}>{props.title}</p>
+                <p className={styles.title}>{title}</p>
             </div>
-            <div className={styles.dropdown_menu_container} onClick={toggleLanguageSelector}>
+            <div className={styles.dropdown_menu_container} onClick={onClickFunction}>
-                <p className={styles.selected_language}>Japanese</p>
+                <p className={styles.selected_language}>{languageText}</p>
-                <p className={styles.selected_language}>(Japan)</p>
+                <p className={styles.selected_language}>({countryText})</p>
-                <ArrowLeftSvg className={class_names} />
+                <ArrowLeftSvg className={classNames} />
             </div>
         </div>
     );

src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.jsx

@@ -3,25 +3,25 @@ import styles from "./PresetTabSelector.module.scss";
 export const PresetTabSelector = () => {
     return (
         <div className={styles.container}>
-            <Tab preset_number={1} />
+            <Tab preset_number={"1"} />
-            <Tab preset_number={2} />
+            <Tab preset_number={"2"} />
-            <Tab preset_number={3} />
+            <Tab preset_number={"3"} />
         </div>
     );
 };
 
 import clsx from "clsx";
 
-import { useStore_SelectedPresetTabNumber } from "@store";
+import { useLanguageSettings } from "@logics/useLanguageSettings";
 
 const Tab = (props) => {
-    const { updateSelectedPresetTabNumber, currentSelectedPresetTabNumber } = useStore_SelectedPresetTabNumber();
+    const { currentSelectedPresetTabNumber, setSelectedPresetTabNumber } = useLanguageSettings();
     const onclickFunction = () => {
-        updateSelectedPresetTabNumber(props.preset_number);
+        setSelectedPresetTabNumber(props.preset_number);
     };
 
-    const class_names = clsx(styles["tab_container"], {
+    const class_names = clsx(styles.tab_container, {
-        [styles["is_selected"]]: (currentSelectedPresetTabNumber === props.preset_number) ? true : false
+        [styles.is_selected]: (currentSelectedPresetTabNumber.data === props.preset_number) ? true : false
     });
 
     return (

src-ui/logics/useLanguageSettings.js

@@ -0,0 +1,84 @@
+import { useStore_SelectedPresetTabNumber, useStore_EnableMultiTranslation, useStore_SelectedYourLanguages, useStore_SelectedTargetLanguages } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useLanguageSettings = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentEnableMultiTranslation, updateEnableMultiTranslation } = useStore_EnableMultiTranslation();
+    const { currentSelectedYourLanguages, updateSelectedYourLanguages } = useStore_SelectedYourLanguages();
+    const { currentSelectedTargetLanguages, updateSelectedTargetLanguages } = useStore_SelectedTargetLanguages();
+    const { currentSelectedPresetTabNumber, updateSelectedPresetTabNumber } = useStore_SelectedPresetTabNumber();
+
+    const getEnableMultiTranslation = () => {
+        updateEnableMultiTranslation(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/enable_multi_translation");
+    };
+
+    const getSelectedPresetTabNumber = () => {
+        updateSelectedPresetTabNumber(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/selected_tab_no");
+    };
+
+    const setSelectedPresetTabNumber = (preset_number) => {
+        updateSelectedPresetTabNumber(() => new Promise(() => {}));
+
+        asyncStdoutToPython("/controller/callback_selected_language_preset_tab", preset_number);
+    };
+
+
+    const getSelectedYourLanguages = () => {
+        updateSelectedYourLanguages(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/selected_tab_your_languages");
+    };
+
+    const setSelectedYourLanguages = (selected_language_data) => {
+        // updateSelectedYourLanguages(() => new Promise(() => {}));
+        const send_obj = {
+            ...currentSelectedYourLanguages.data,
+            [currentSelectedPresetTabNumber.data]: {
+                primary: {
+                    language: selected_language_data.language,
+                    country: selected_language_data.country,
+                }
+            }
+        };
+        asyncStdoutToPython("/controller/set_your_language_and_country", send_obj);
+    };
+
+
+    const getSelectedTargetLanguages = () => {
+        updateSelectedTargetLanguages(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/selected_tab_target_languages");
+    };
+
+    const setSelectedTargetLanguages = (selected_language_data) => {
+        // updateSelectedTargetLanguages(() => new Promise(() => {}));
+        let send_obj = currentSelectedTargetLanguages.data;
+
+        send_obj[currentSelectedPresetTabNumber.data].primary.language = selected_language_data.language,
+        send_obj[currentSelectedPresetTabNumber.data].primary.country = selected_language_data.country,
+
+        asyncStdoutToPython("/controller/set_target_language_and_country", send_obj);
+    };
+
+    return {
+        currentSelectedPresetTabNumber,
+        getSelectedPresetTabNumber,
+        updateSelectedPresetTabNumber,
+        setSelectedPresetTabNumber,
+
+        currentEnableMultiTranslation,
+        getEnableMultiTranslation,
+        updateEnableMultiTranslation,
+        // setEnableMultiTranslation,
+
+        currentSelectedYourLanguages,
+        getSelectedYourLanguages,
+        updateSelectedYourLanguages,
+        setSelectedYourLanguages,
+
+        currentSelectedTargetLanguages,
+        getSelectedTargetLanguages,
+        updateSelectedTargetLanguages,
+        setSelectedTargetLanguages,
+    };
+};

src-ui/logics/useReceiveRoutes.js

@@ -2,6 +2,7 @@ import { arrayToObject } from "@utils/arrayToObject";
 import { useMainFunction } from "./useMainFunction";
 import { useMessage } from "./useMessage";
 import { useSelectableLanguageList } from "./useSelectableLanguageList";
+import { useLanguageSettings } from "./useLanguageSettings";
 import { useVolume } from "./useVolume";
 
 import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
@@ -28,6 +29,12 @@ export const useReceiveRoutes = () => {
         updateTranscriptionReceiveStatus,
     } = useMainFunction();
 
+    const {
+        updateSelectedPresetTabNumber,
+        updateEnableMultiTranslation,
+        updateSelectedYourLanguages,
+        updateSelectedTargetLanguages
+    } = useLanguageSettings();
     const { updateSelectableLanguageList } = useSelectableLanguageList();
 
     const {
@@ -72,12 +79,22 @@ export const useReceiveRoutes = () => {
         "/controller/callback_enable_transcription_receive": updateTranscriptionReceiveStatus,
         "/controller/callback_disable_transcription_receive": updateTranscriptionReceiveStatus,
 
+        "/config/selected_tab_no": updateSelectedPresetTabNumber,
+        "/controller/callback_selected_language_preset_tab": updateSelectedPresetTabNumber,
+        "/config/enable_multi_translation": updateEnableMultiTranslation,
+        "/config/selected_tab_your_languages": updateSelectedYourLanguages,
+        "/controller/set_your_language_and_country": updateSelectedYourLanguages,
+        "/config/selected_tab_target_languages": updateSelectedTargetLanguages,
+        "/controller/set_your_language_and_country": updateSelectedTargetLanguages,
+
         "/controller/list_language_and_country": updateSelectableLanguageList,
 
         "/config/version": updateSoftwareVersion,
 
+        "/config/enable_mic_automatic_selection": updateEnableAutoMicSelect,
         "/controller/callback_enable_mic_automatic_selection": updateEnableAutoMicSelect,
         "/controller/callback_disable_mic_automatic_selection": updateEnableAutoMicSelect,
+        "/config/enable_speaker_automatic_selection": updateEnableAutoSpeakerSelect,
         "/controller/callback_enable_speaker_automatic_selection": updateEnableAutoSpeakerSelect,
         "/controller/callback_disable_speaker_automatic_selection": updateEnableAutoSpeakerSelect,
 

src-ui/store.js

@@ -103,14 +103,19 @@ export const { atomInstance: Atom_ForegroundStatus, useHook: useStore_Foreground
 
 export const { atomInstance: Atom_MessageLogs, useHook: useStore_MessageLogs } = createAtomWithHook(generateTestData(20), "MessageLogs");
 export const { atomInstance: Atom_IsMainPageCompactMode, useHook: useStore_IsMainPageCompactMode } = createAtomWithHook(false, "IsMainPageCompactMode");
+
 export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_IsOpenedLanguageSelector } = createAtomWithHook(
     { your_language: false, target_language: false },
     "IsOpenedLanguageSelector"
 );
-
 export const { atomInstance: Atom_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook([], "SelectableLanguageList");
 
-export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAtomWithHook(1, "SelectedPresetTabNumber");
+export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAsyncAtomWithHook("", "SelectedPresetTabNumber");
+export const { atomInstance: Atom_EnableMultiTranslation, useHook: useStore_EnableMultiTranslation } = createAsyncAtomWithHook(false, "EnableMultiTranslation");
+export const { atomInstance: Atom_SelectedYourLanguages, useHook: useStore_SelectedYourLanguages } = createAsyncAtomWithHook({}, "SelectedYourLanguages");
+export const { atomInstance: Atom_SelectedTargetLanguages, useHook: useStore_SelectedTargetLanguages } = createAsyncAtomWithHook({}, "SelectedTargetLanguages");
+
+
 export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
 export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId");
 export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useStore_IsOpenedDropdownMenu } = createAtomWithHook("", "IsOpenedDropdownMenu");