[Perf/bugfix] Separate custom hooks and prevent re-render issues.

Config Page: Device Tab. threshold component. fix problem that the input component focused out when input something each time.
Set threshold data when started python.

src-ui/app/App.jsx

@@ -1,7 +1,7 @@
 import { getCurrent } from "@tauri-apps/api/window";
 import { useEffect, useRef } from "react";
 import { useStartPython } from "@logics/useStartPython";
-import { useConfig } from "@logics/useConfig";
+// import { useConfig } from "@logics/useConfig";
 import { MainPage } from "./main_page/MainPage";
 import { ConfigPage } from "./config_page/ConfigPage";
 import styles from "./App.module.scss";
@@ -17,22 +17,28 @@ export const App = () => {
 };
 
 
+import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
+import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
+import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
+import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
+import { useMicThreshold } from "@logics_configs/useMicThreshold";
+import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
+import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox";
+import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
+
 const StartPythonFacadeComponent = () => {
     const { asyncStartPython } = useStartPython();
     const hasRunRef = useRef(false);
     const main_page = getCurrent();
 
-    const {
+    const { getSoftwareVersion } = useSoftwareVersion();
-        getSoftwareVersion,
+    const { getSelectedMicHost } = useSelectedMicHost();
-        // getMicHostList,
+    const { getSelectedMicDevice } = useSelectedMicDevice();
-        getSelectedMicHost,
+    const { getSelectedSpeakerDevice } = useSelectedSpeakerDevice();
-        // getMicDeviceList,
+    const { getMicThreshold } = useMicThreshold();
-        getSelectedMicDevice,
+    const { getSpeakerThreshold } = useSpeakerThreshold();
-        getSelectedSpeakerDevice,
+    const { getEnableAutoClearMessageBox }  = useEnableAutoClearMessageBox();
-
+    const { getSendMessageButtonType } = useSendMessageButtonType();
-        getEnableAutoClearMessageBox,
-        getSendMessageButtonType,
-    } = useConfig();
 
 
     useEffect(() => {
@@ -40,12 +46,13 @@ const StartPythonFacadeComponent = () => {
         if (!hasRunRef.current) {
             asyncStartPython().then((result) => {
                 getSoftwareVersion();
-                // getMicHostList();
                 getSelectedMicHost();
-                // getMicDeviceList();
                 getSelectedMicDevice();
                 getSelectedSpeakerDevice();
 
+                getMicThreshold();
+                getSpeakerThreshold();
+
                 getEnableAutoClearMessageBox();
                 getSendMessageButtonType();
             }).catch((err) => {

src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx

@@ -2,16 +2,16 @@ import { useSelectedConfigTabId } from "@store";
 
 import { Device } from "./device/Device";
 import { Appearance } from "./appearance/Appearance";
-import { Others } from "./others/Others";
+// import { Others } from "./others/Others";
-import { AboutVrct } from "./about_vrct/AboutVrct";
+// import { AboutVrct } from "./about_vrct/AboutVrct";
 
 export const SettingBox = () => {
     const { currentSelectedConfigTabId } = useSelectedConfigTabId();
     switch (currentSelectedConfigTabId) {
         case "device":
             return <Device />;
-        case "others":
+        // case "others":
-            return <Others />;
+        //     return <Others />;
         // case "appearance":
         //     return <Appearance />;
         // case "about_vrct":

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx

@@ -1,10 +1,8 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
-
 import styles from "./ThresholdComponent.module.scss";
 import { SliderAndMeter } from "./slider_and_meter/SliderAndMeter";
 import { ThresholdEntry } from "./threshold_entry/ThresholdEntry";
 import { VolumeCheckButton } from "./volume_check_button/VolumeCheckButton";
-import { useConfig } from "@logics/useConfig";
 
 export const ThresholdComponent = (props) => {
     return (
@@ -18,10 +16,15 @@ export const ThresholdComponent = (props) => {
     );
 };
 
+import { useMicThreshold } from "@logics_configs/useMicThreshold";
 const MicComponent = (props) => {
-    const { currentMicThreshold, setMicThreshold } = useConfig();
+    const { currentMicThreshold, setMicThreshold } = useMicThreshold();
     const [ui_threshold, setUiThreshold] = useState(currentMicThreshold);
 
+    useEffect(() => {
+        setUiThreshold(currentMicThreshold);
+    }, [currentMicThreshold]);
+
     const setUiThresholdFunction = (payload_ui_threshold) => {
         setUiThreshold(payload_ui_threshold);
     };
@@ -47,11 +50,15 @@ const MicComponent = (props) => {
     );
 };
 
+import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
 const SpeakerComponent = (props) => {
-
+    const { currentSpeakerThreshold, setSpeakerThreshold } = useSpeakerThreshold();
-    const { currentSpeakerThreshold, setSpeakerThreshold } = useConfig();
     const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold);
 
+    useEffect(() => {
+        setUiThreshold(currentSpeakerThreshold);
+    }, [currentSpeakerThreshold]);
+
     const setUiThresholdFunction = (payload_ui_threshold) => {
         setUiThreshold(payload_ui_threshold);
     };

src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx

@@ -15,22 +15,48 @@ import { MessageFormat } from "./message_format/MessageFormat";
 import { ActionButton } from "./action_button/ActionButton";
 import { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter";
 
-export const useSettingBox = () => {
+
+const useOnMouseLeaveDropdownMenu = () => {
     const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
 
-    const DropdownMenuContainer = (props) => {
+    const onMouseLeaveFunction = () => {
-        const onMouseLeaveFunction = () => {
+        updateIsOpenedDropdownMenu("");
-            updateIsOpenedDropdownMenu("");
-        };
-
-        return (
-            <div className={styles.container} onMouseLeave={onMouseLeaveFunction}>
-                <LabelComponent label={props.label} desc={props.desc} />
-                <DropdownMenu {...props}/>
-            </div>
-        );
     };
 
+    return { onMouseLeaveFunction };
+};
+
+export const DropdownMenuContainer = (props) => {
+    const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
+
+    return (
+        <div className={styles.container} onMouseLeave={onMouseLeaveFunction}>
+            <LabelComponent label={props.label} desc={props.desc} />
+            <DropdownMenu {...props} />
+        </div>
+    );
+};
+
+
+export const ThresholdContainer = (props) => {
+    return (
+        <div className={styles.threshold_container}>
+            <div className={styles.threshold_switch_section}>
+                <LabelComponent label={props.label} desc={props.desc} />
+                <Switchbox {...props}/>
+            </div>
+            <div className={styles.threshold_section}>
+                <ThresholdComponent {...props}/>
+            </div>
+        </div>
+    );
+};
+
+
+export const useSettingBox = () => {
+    console.log("useSettingBox______________");
+
+
     const SliderContainer = (props) => {
         return (
             <div className={styles.container}>
@@ -76,20 +102,6 @@ export const useSettingBox = () => {
         );
     };
 
-    const ThresholdContainer = (props) => {
-        return (
-            <div className={styles.threshold_container}>
-                <div className={styles.threshold_switch_section}>
-                    <LabelComponent label={props.label} desc={props.desc} />
-                    <Switchbox {...props}/>
-                </div>
-                <div className={styles.threshold_section}>
-                    <ThresholdComponent {...props}/>
-                </div>
-            </div>
-        );
-    };
-
     const DeeplAuthKeyContainer = (props) => {
         return (
             <div className={styles.container}>
@@ -144,12 +156,10 @@ export const useSettingBox = () => {
     };
 
     return {
-        DropdownMenuContainer,
         SliderContainer,
         CheckboxContainer,
         SwitchboxContainer,
         EntryContainer,
-        ThresholdContainer,
         RadioButtonContainer,
         DeeplAuthKeyContainer,
         MessageFormatContainer,

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

@@ -1,119 +1,119 @@
 import { useTranslation } from "react-i18next";
-import { useSettingBox } from "../components/useSettingBox";
 import {
-    useMicHostList,
+    DropdownMenuContainer,
-    useSelectedMicHost,
+    ThresholdContainer,
-    useSelectedMicDevice,
+} from "../components/useSettingBox";
-    useMicDeviceList,
-    useSelectedSpeakerDevice,
-    useSpeakerDeviceList,
-} from "@store";
-
-import { useConfig } from "@logics/useConfig";
-
 export const Device = () => {
-    const { t } = useTranslation();
-    const {
-        DropdownMenuContainer,
-        ThresholdContainer,
-    } = useSettingBox();
-
-
-    const { currentMicHostList } = useMicHostList();
-    const { currentSelectedMicHost } = useSelectedMicHost();
-
-    const { currentMicDeviceList } = useMicDeviceList();
-    const { currentSelectedMicDevice } = useSelectedMicDevice();
-
-    const { currentSpeakerDeviceList } = useSpeakerDeviceList();
-    const { currentSelectedSpeakerDevice } = useSelectedSpeakerDevice();
-
-    const {
-        setSelectedMicHost,
-        setSelectedMicDevice,
-        getMicHostList,
-        getMicDeviceList,
-        setSelectedSpeakerDevice,
-        getSpeakerDeviceList,
-    } = useConfig();
-
-    const selectFunction = (selected_data) => {
-        switch (selected_data.dropdown_id) {
-            case "mic_host":
-                setSelectedMicHost(selected_data.selected_id);
-                break;
-
-            case "mic_device":
-                setSelectedMicDevice(selected_data.selected_id);
-                break;
-
-            case "speaker_device":
-                setSelectedSpeakerDevice(selected_data.selected_id);
-                break;
-
-            default:
-                break;
-        }
-    };
-
-    // const volumeCheckStartFunction_Mic = () => {
-    //     volumeCheckStart_Mic();
-    // };
-    // const volumeCheckStopFunction_Mic = () => {
-    //     volumeCheckStop_Mic();
-    // };
-
 
     return (
         <>
-            <DropdownMenuContainer
+            <DropdownMenuContainer_MicHost />
-                dropdown_id="mic_host"
+            <DropdownMenuContainer_MicDevice />
-                label={t("config_page.mic_host.label")}
+            <ThresholdContainer_Mic />
-                selected_id={currentSelectedMicHost.data}
+            <DropdownMenuContainer_SpeakerDevice />
-                list={currentMicHostList.data}
+            <ThresholdContainer_Speaker />
-                selectFunction={selectFunction}
-                openListFunction={getMicHostList}
-                state={currentSelectedMicHost.state}
-            />
-
-            <DropdownMenuContainer
-                dropdown_id="mic_device"
-                label={t("config_page.mic_device.label")}
-                selected_id={currentSelectedMicDevice.data}
-                list={currentMicDeviceList.data}
-                selectFunction={selectFunction}
-                openListFunction={getMicDeviceList}
-                state={currentSelectedMicDevice.state}
-            />
-
-            <ThresholdContainer
-                label={t("config_page.mic_dynamic_energy_threshold.label_for_manual")}
-                desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")}
-                id="mic_threshold"
-                min="0"
-                max="2000"
-                // volumeCheckStartFunction={volumeCheckStartFunction_Mic}
-                // volumeCheckStopFunction={volumeCheckStopFunction_Mic}
-            />
-
-
-            <DropdownMenuContainer
-                dropdown_id="speaker_device"
-                label={t("config_page.speaker_device.label")}
-                selected_id={currentSelectedSpeakerDevice.data}
-                list={currentSpeakerDeviceList.data}
-                selectFunction={selectFunction}
-                openListFunction={getSpeakerDeviceList}
-                state={currentSelectedSpeakerDevice.state}
-            />
-
-            <ThresholdContainer
-                label={t("config_page.speaker_dynamic_energy_threshold.label_for_manual")}
-                desc={t("config_page.speaker_dynamic_energy_threshold.desc_for_manual")}
-                id="speaker_threshold"
-                min="0"
-                max="4000"
-            />
         </>
     );
+};
+
+import { useMicHostList } from "@logics_configs/useMicHostList";
+import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
+const DropdownMenuContainer_MicHost = () => {
+    const { t } = useTranslation();
+    const { currentSelectedMicHost, setSelectedMicHost } = useSelectedMicHost();
+    const { currentMicHostList, getMicHostList } = useMicHostList();
+
+    const selectFunction = (selected_data) => {
+        setSelectedMicHost(selected_data.selected_id);
+    };
+
+    return (
+        <DropdownMenuContainer
+            dropdown_id="mic_host"
+            label={t("config_page.mic_host.label")}
+            selected_id={currentSelectedMicHost.data}
+            list={currentMicHostList.data}
+            selectFunction={selectFunction}
+            openListFunction={getMicHostList}
+            state={currentSelectedMicHost.state}
+        />
+    );
+};
+
+import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
+import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
+const DropdownMenuContainer_MicDevice = () => {
+    const { t } = useTranslation();
+    const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice();
+    const { currentMicDeviceList, getMicDeviceList } = useMicDeviceList();
+
+    const selectFunction = (selected_data) => {
+        setSelectedMicDevice(selected_data.selected_id);
+    };
+
+
+    return (
+        <DropdownMenuContainer
+            dropdown_id="mic_device"
+            label={t("config_page.mic_device.label")}
+            selected_id={currentSelectedMicDevice.data}
+            list={currentMicDeviceList.data}
+            selectFunction={selectFunction}
+            openListFunction={getMicDeviceList}
+            state={currentSelectedMicDevice.state}
+        />
+    );
+};
+
+import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList";
+import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
+const DropdownMenuContainer_SpeakerDevice = () => {
+    const { t } = useTranslation();
+    const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice();
+    const { currentSpeakerDeviceList, getSpeakerDeviceList } = useSpeakerDeviceList();
+
+    const selectFunction = (selected_data) => {
+        setSelectedSpeakerDevice(selected_data.selected_id);
+    };
+
+
+    return (
+        <DropdownMenuContainer
+            dropdown_id="speaker_device"
+            label={t("config_page.speaker_device.label")}
+            selected_id={currentSelectedSpeakerDevice.data}
+            list={currentSpeakerDeviceList.data}
+            selectFunction={selectFunction}
+            openListFunction={getSpeakerDeviceList}
+            state={currentSelectedSpeakerDevice.state}
+        />
+    );
+};
+
+const ThresholdContainer_Mic = () => {
+    const { t } = useTranslation();
+
+    return (
+        <ThresholdContainer
+            label={t("config_page.mic_dynamic_energy_threshold.label_for_manual")}
+            desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")}
+            id="mic_threshold"
+            min="0"
+            max="2000"
+        />
+    );
+};
+
+const ThresholdContainer_Speaker = () => {
+    const { t } = useTranslation();
+
+    return (
+        <ThresholdContainer
+            label={t("config_page.speaker_dynamic_energy_threshold.label_for_manual")}
+            desc={t("config_page.speaker_dynamic_energy_threshold.desc_for_manual")}
+            id="speaker_threshold"
+            min="0"
+            max="4000"
+        />
+    );
 };

src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx

@@ -4,14 +4,14 @@ import SendMessageSvg from "@images/send_message.svg?react";
 import { useMessage } from "@logics/useMessage";
 import { store, useEnableAutoClearMessageBox } from "@store";
 import { scrollToBottom } from "@logics/scrollToBottom";
-import { useConfig } from "@logics/useConfig";
+import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
 
 export const MessageInputBox = () => {
     const [inputValue, setInputValue] = useState("");
     const { sendMessage } = useMessage();
 
     const { currentEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
-    const { currentSendMessageButtonType } = useConfig();
+    const { currentSendMessageButtonType } = useSendMessageButtonType();
 
     const onSubmitFunction = (e) => {
         e.preventDefault();

src-ui/logics/configs/useEnableAutoClearMessageBox.js

@@ -0,0 +1,28 @@
+import { useEnableAutoClearMessageBox as useStoreEnableAutoClearMessageBox } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useEnableAutoClearMessageBox = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useStoreEnableAutoClearMessageBox();
+
+    const getEnableAutoClearMessageBox = () => {
+        updateEnableAutoClearMessageBox(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/enable_auto_clear_message_box");
+    };
+
+    const toggleEnableAutoClearMessageBox = () => {
+        updateEnableAutoClearMessageBox(() => new Promise(() => {}));
+        if (currentEnableAutoClearMessageBox.data) {
+            asyncStdoutToPython("/controller/callback_disable_auto_clear_chatbox");
+        } else {
+            asyncStdoutToPython("/controller/callback_enable_auto_clear_chatbox");
+        }
+    };
+
+    return {
+        getEnableAutoClearMessageBox,
+        toggleEnableAutoClearMessageBox,
+        currentEnableAutoClearMessageBox,
+        updateEnableAutoClearMessageBox
+    };
+};

src-ui/logics/configs/useMicDeviceList.js

@@ -0,0 +1,14 @@
+import { useMicDeviceList as useStoreMicDeviceList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicDeviceList = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentMicDeviceList, updateMicDeviceList } = useStoreMicDeviceList();
+
+    const getMicDeviceList = () => {
+        updateMicDeviceList(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/list_mic_device");
+    };
+
+    return { currentMicDeviceList, getMicDeviceList, updateMicDeviceList };
+};

src-ui/logics/configs/useMicHostList.js

@@ -0,0 +1,14 @@
+import { useMicHostList as useStoreMicHostList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicHostList = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentMicHostList, updateMicHostList } = useStoreMicHostList();
+
+    const getMicHostList = () => {
+        updateMicHostList(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/list_mic_host");
+    };
+
+    return { currentMicHostList, getMicHostList, updateMicHostList };
+};

src-ui/logics/configs/useMicThreshold.js

@@ -0,0 +1,17 @@
+import { useMicThreshold as useStoreMicThreshold } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicThreshold = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { updateMicThreshold, currentMicThreshold } = useStoreMicThreshold();
+
+    const getMicThreshold = () => {
+        asyncStdoutToPython("/config/input_mic_energy_threshold");
+    };
+
+    const setMicThreshold = (mic_threshold) => {
+        asyncStdoutToPython("/controller/callback_set_mic_energy_threshold", mic_threshold);
+    };
+
+    return { getMicThreshold, setMicThreshold, currentMicThreshold, updateMicThreshold };
+};

src-ui/logics/configs/useSelectedMicDevice.js

@@ -0,0 +1,19 @@
+import { useSelectedMicDevice as useStoreSelectedMicDevice } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedMicDevice = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectedMicDevice, updateSelectedMicDevice } = useStoreSelectedMicDevice();
+
+    const getSelectedMicDevice = () => {
+        updateSelectedMicDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/choice_mic_device");
+    };
+
+    const setSelectedMicDevice = (selected_mic_device) => {
+        updateSelectedMicDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_mic_device", selected_mic_device);
+    };
+
+    return { currentSelectedMicDevice, getSelectedMicDevice, updateSelectedMicDevice, setSelectedMicDevice };
+};

src-ui/logics/configs/useSelectedMicHost.js

@@ -0,0 +1,19 @@
+import { useSelectedMicHost as useStoreSelectedMicHost } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedMicHost = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectedMicHost, updateSelectedMicHost } = useStoreSelectedMicHost();
+
+    const getSelectedMicHost = () => {
+        updateSelectedMicHost(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/choice_mic_host");
+    };
+
+    const setSelectedMicHost = (selected_mic_host) => {
+        updateSelectedMicHost(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_mic_host", selected_mic_host);
+    };
+
+    return { currentSelectedMicHost, getSelectedMicHost, updateSelectedMicHost, setSelectedMicHost };
+};

src-ui/logics/configs/useSelectedSpeakerDevice.js

@@ -0,0 +1,19 @@
+import { useSelectedSpeakerDevice as useStoreSelectedSpeakerDevice } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedSpeakerDevice = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectedSpeakerDevice, updateSelectedSpeakerDevice } = useStoreSelectedSpeakerDevice();
+
+    const getSelectedSpeakerDevice = () => {
+        updateSelectedSpeakerDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/choice_speaker_device");
+    };
+
+    const setSelectedSpeakerDevice = (selected_speaker_device) => {
+        updateSelectedSpeakerDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_speaker_device", selected_speaker_device);
+    };
+
+    return { currentSelectedSpeakerDevice, getSelectedSpeakerDevice, updateSelectedSpeakerDevice, setSelectedSpeakerDevice };
+};

src-ui/logics/configs/useSendMessageButtonType.js

@@ -0,0 +1,24 @@
+import { useSendMessageButtonType as useStoreSendMessageButtonType } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSendMessageButtonType = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSendMessageButtonType, updateSendMessageButtonType } = useStoreSendMessageButtonType();
+
+    const getSendMessageButtonType = () => {
+        updateSendMessageButtonType(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/send_message_button_type");
+    };
+
+    const setSendMessageButtonType = (selected_type) => {
+        updateSendMessageButtonType(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_send_message_button_type", selected_type);
+    };
+
+    return {
+        getSendMessageButtonType,
+        setSendMessageButtonType,
+        currentSendMessageButtonType,
+        updateSendMessageButtonType
+    };
+};

src-ui/logics/configs/useSoftwareVersion.js

@@ -0,0 +1,14 @@
+import { useSoftwareVersion as useStoreSoftwareVersion } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSoftwareVersion = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSoftwareVersion, updateSoftwareVersion } = useStoreSoftwareVersion();
+
+    const getSoftwareVersion = () => {
+        updateSoftwareVersion(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/version");
+    };
+
+    return { currentSoftwareVersion, getSoftwareVersion, updateSoftwareVersion };
+};

src-ui/logics/configs/useSpeakerDeviceList.js

@@ -0,0 +1,14 @@
+import { useSpeakerDeviceList as useStoreSpeakerDeviceList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSpeakerDeviceList = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSpeakerDeviceList, updateSpeakerDeviceList } = useStoreSpeakerDeviceList();
+
+    const getSpeakerDeviceList = () => {
+        updateSpeakerDeviceList(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/list_speaker_device");
+    };
+
+    return { currentSpeakerDeviceList, getSpeakerDeviceList, updateSpeakerDeviceList };
+};

src-ui/logics/configs/useSpeakerThreshold.js

@@ -0,0 +1,17 @@
+import { useSpeakerThreshold as useStoreSpeakerThreshold } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSpeakerThreshold = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { updateSpeakerThreshold, currentSpeakerThreshold } = useStoreSpeakerThreshold();
+
+    const getSpeakerThreshold = () => {
+        asyncStdoutToPython("/config/input_speaker_energy_threshold");
+    };
+
+    const setSpeakerThreshold = (speaker_threshold) => {
+        asyncStdoutToPython("/controller/callback_set_speaker_energy_threshold", speaker_threshold);
+    };
+
+    return { getSpeakerThreshold, setSpeakerThreshold, currentSpeakerThreshold, updateSpeakerThreshold };
+};

src-ui/logics/useConfig.js

@@ -1,169 +0,0 @@
-import {
-    useSoftwareVersion,
-    useMicHostList,
-    useSelectedMicHost,
-    useMicDeviceList,
-    useSelectedMicDevice,
-    useSpeakerDeviceList,
-    useSelectedSpeakerDevice,
-
-    useEnableAutoClearMessageBox,
-    useSendMessageButtonType,
-    useMicThreshold,
-    useSpeakerThreshold,
-} from "@store";
-
-import { useStdoutToPython } from "./useStdoutToPython";
-
-import { arrayToObject } from "@utils/arrayToObject";
-
-export const useConfig = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-
-    const { updateSoftwareVersion } = useSoftwareVersion();
-    const { updateMicHostList } = useMicHostList();
-    const { updateSelectedMicHost } = useSelectedMicHost();
-    const { updateMicDeviceList } = useMicDeviceList();
-    const { updateSelectedMicDevice } = useSelectedMicDevice();
-    const { updateSpeakerDeviceList } = useSpeakerDeviceList();
-    const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
-    const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
-    const { currentSendMessageButtonType, updateSendMessageButtonType } = useSendMessageButtonType();
-    const { currentMicThreshold, updateMicThreshold } = useMicThreshold();
-    const { currentSpeakerThreshold, updateSpeakerThreshold } = useSpeakerThreshold();
-
-
-    const asyncPending = () => new Promise(() => {});
-    return {
-        getSoftwareVersion: () => {
-            updateSoftwareVersion(asyncPending);
-            asyncStdoutToPython("/config/version");
-        },
-        updateSoftwareVersion: (payload) => updateSoftwareVersion(payload.data),
-
-        // Device
-        getMicHostList: () => {
-            updateMicHostList(asyncPending);
-            asyncStdoutToPython("/controller/list_mic_host");
-        },
-        updateMicHostList: (payload) => {
-            updateMicHostList(arrayToObject(payload.data));
-        },
-        getSelectedMicHost: () => {
-            updateSelectedMicHost(asyncPending);
-            asyncStdoutToPython("/config/choice_mic_host");
-        },
-        updateSelectedMicHost: (payload) => {
-            updateSelectedMicHost(payload.data);
-        },
-        setSelectedMicHost: (selected_mic_host) => {
-            updateSelectedMicHost(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_mic_host", selected_mic_host);
-        },
-
-        getMicDeviceList: () => {
-            updateMicDeviceList(asyncPending);
-            asyncStdoutToPython("/controller/list_mic_device");
-        },
-        updateMicDeviceList: (payload) => {
-            updateMicDeviceList(arrayToObject(payload.data));
-        },
-        getSelectedMicDevice: () => {
-            updateSelectedMicDevice(asyncPending);
-            asyncStdoutToPython("/config/choice_mic_device");
-        },
-        updateSelectedMicDevice: (payload) => {
-            updateSelectedMicDevice(payload.data);
-        },
-        setSelectedMicDevice: (selected_mic_device) => {
-            updateSelectedMicDevice(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_mic_device", selected_mic_device);
-        },
-
-        getSpeakerDeviceList: () => {
-            updateSpeakerDeviceList(asyncPending);
-            asyncStdoutToPython("/controller/list_speaker_device");
-        },
-        updateSpeakerDeviceList: (payload) => {
-            updateSpeakerDeviceList(arrayToObject(payload.data));
-        },
-        getSelectedSpeakerDevice: () => {
-            updateSelectedSpeakerDevice(asyncPending);
-            asyncStdoutToPython("/config/choice_speaker_device");
-        },
-        updateSelectedSpeakerDevice: (payload) => {
-            updateSelectedSpeakerDevice(payload.data);
-        },
-        setSelectedSpeakerDevice: (selected_speaker_device) => {
-            updateSelectedSpeakerDevice(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_speaker_device", selected_speaker_device);
-        },
-
-        updateMicHostAndDevice: (payload) => {
-            updateSelectedMicHost(payload.data.host);
-            updateSelectedMicDevice(payload.data.device);
-        },
-
-        getMicThreshold: () => {
-            // updateMicThreshold(asyncPending);
-            asyncStdoutToPython("/config/input_mic_energy_threshold");
-        },
-        setMicThreshold: (mic_threshold) => {
-            // updateMicThreshold(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_mic_energy_threshold", mic_threshold);
-        },
-        currentMicThreshold: currentMicThreshold,
-        updateMicThreshold: (payload) => {
-            updateMicThreshold(payload.data);
-        },
-
-        getSpeakerThreshold: () => {
-            // updateSpeakerThreshold(asyncPending);
-            asyncStdoutToPython("/config/input_speaker_energy_threshold");
-        },
-        setSpeakerThreshold: (speaker_threshold) => {
-            // updateSpeakerThreshold(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_speaker_energy_threshold", speaker_threshold);
-        },
-        currentSpeakerThreshold: currentSpeakerThreshold,
-        updateSpeakerThreshold: (payload) => {
-            updateSpeakerThreshold(payload.data);
-        },
-
-
-
-        // Others
-        getEnableAutoClearMessageBox: () => {
-            updateEnableAutoClearMessageBox(asyncPending);
-            asyncStdoutToPython("/config/enable_auto_clear_message_box");
-        },
-        toggleEnableAutoClearMessageBox: () => {
-            updateEnableAutoClearMessageBox(asyncPending);
-            if (currentEnableAutoClearMessageBox.data) {
-                asyncStdoutToPython("/controller/callback_disable_auto_clear_chatbox");
-            } else {
-                asyncStdoutToPython("/controller/callback_enable_auto_clear_chatbox");
-            }
-        },
-        currentEnableAutoClearMessageBox: currentEnableAutoClearMessageBox,
-        updateEnableAutoClearMessageBox: (payload) => {
-            updateEnableAutoClearMessageBox(payload.data);
-        },
-
-        getSendMessageButtonType: () => {
-            updateSendMessageButtonType(asyncPending);
-            asyncStdoutToPython("/config/send_message_button_type");
-        },
-        setSendMessageButtonType: (selected_type) => {
-            updateSendMessageButtonType(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_send_message_button_type", selected_type);
-        },
-        currentSendMessageButtonType: currentSendMessageButtonType,
-        updateSendMessageButtonType: (payload) => {
-            updateSendMessageButtonType(payload.data);
-        },
-
-
-
-    };
-};

src-ui/logics/useMainFunction.js

@@ -7,7 +7,7 @@ import {
     useForegroundStatus,
 } from "@store";
 
-import { useStdoutToPython } from "./useStdoutToPython";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useMainFunction = () => {
     const {
@@ -33,53 +33,56 @@ export const useMainFunction = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
 
     const asyncPending = () => new Promise(() => {});
+    const toggleTranslation = () => {
+        asyncUpdateTranslationStatus(asyncPending);
+        if (currentTranslationStatus.data) {
+            asyncStdoutToPython("/controller/callback_disable_translation");
+        } else {
+            asyncStdoutToPython("/controller/callback_enable_translation");
+        }
+    };
+
+    const toggleTranscriptionSend = () => {
+        asyncUpdateTranscriptionSendStatus(asyncPending);
+        if (currentTranscriptionSendStatus.data) {
+            asyncStdoutToPython("/controller/callback_disable_transcription_send");
+        } else {
+            asyncStdoutToPython("/controller/callback_enable_transcription_send");
+        }
+    };
+
+    const toggleTranscriptionReceive = () => {
+        asyncUpdateTranscriptionReceiveStatus(asyncPending);
+        if (currentTranscriptionReceiveStatus.data) {
+            asyncStdoutToPython("/controller/callback_disable_transcription_receive");
+        } else {
+            asyncStdoutToPython("/controller/callback_enable_transcription_receive");
+        }
+    };
+
+    const toggleForeground = () => {
+        const main_page = getCurrent();
+        const is_foreground_enabled = !currentForegroundStatus.data;
+        main_page.setAlwaysOnTop(is_foreground_enabled);
+        updateForegroundStatus(is_foreground_enabled);
+    };
+
     return {
-        toggleTranslation: () => {
+        currentTranslationStatus,
-            asyncUpdateTranslationStatus(asyncPending);
+        toggleTranslation,
-            if (currentTranslationStatus.data) {
+        updateTranslationStatus,
-                asyncStdoutToPython("/controller/callback_disable_translation");
-            } else {
-                asyncStdoutToPython("/controller/callback_enable_translation");
-            }
-        },
-        currentTranslationStatus: currentTranslationStatus,
-        updateTranslationStatus: (payload) => {
-            updateTranslationStatus(payload.data);
-        },
 
-        toggleTranscriptionSend: () => {
+        currentTranscriptionSendStatus,
-            asyncUpdateTranscriptionSendStatus(asyncPending);
+        toggleTranscriptionSend,
-            if (currentTranscriptionSendStatus.data) {
+        updateTranscriptionSendStatus,
-                asyncStdoutToPython("/controller/callback_disable_transcription_send");
-            } else {
-                asyncStdoutToPython("/controller/callback_enable_transcription_send");
-            }
-        },
-        currentTranscriptionSendStatus: currentTranscriptionSendStatus,
-        updateTranscriptionSendStatus: (payload) => {
-            updateTranscriptionSendStatus(payload.data);
-        },
 
-        toggleTranscriptionReceive: () => {
+        currentTranscriptionReceiveStatus,
-            asyncUpdateTranscriptionReceiveStatus(asyncPending);
+        toggleTranscriptionReceive,
-            if (currentTranscriptionReceiveStatus.data) {
+        updateTranscriptionReceiveStatus,
-                asyncStdoutToPython("/controller/callback_disable_transcription_receive");
-            } else {
-                asyncStdoutToPython("/controller/callback_enable_transcription_receive");
-            }
-        },
-        currentTranscriptionReceiveStatus: currentTranscriptionReceiveStatus,
-        updateTranscriptionReceiveStatus: (payload) => {
-            updateTranscriptionReceiveStatus(payload.data);
-        },
 
-        toggleForeground: () => {
+        currentForegroundStatus,
-            const main_page = getCurrent();
+        toggleForeground,
-            const is_foreground_enabled = !currentForegroundStatus.data;
+        updateForegroundStatus,
-            main_page.setAlwaysOnTop(is_foreground_enabled);
-            updateForegroundStatus(is_foreground_enabled);
 
-        },
-        currentForegroundStatus: currentForegroundStatus,
     };
 };

src-ui/logics/useMessage.js

@@ -2,48 +2,50 @@ import {
     useMessageLogsStatus,
 } from "@store";
 
-import { useStdoutToPython } from "./useStdoutToPython";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useMessage = () => {
     const { currentMessageLogsStatus, addMessageLogsStatus, updateMessageLogsStatus } = useMessageLogsStatus();
     const { asyncStdoutToPython } = useStdoutToPython();
 
+    const sendMessage = (message) => {
+        const uuid = crypto.randomUUID();
+        const send_message_object = {
+            id: uuid,
+            message: message,
+        };
+        asyncStdoutToPython("/controller/callback_messagebox_send", send_message_object);
+
+        addMessageLogsStatus({
+            id: uuid,
+            category: "sent",
+            status: "pending",
+            created_at: generateTimeData(),
+            messages: {
+                original: message,
+                translated: [],
+            },
+        });
+    };
+
+    const updateSentMessageLogById = (payload) => {
+        updateMessageLogsStatus(updateItemById(data.id, payload.translation));
+    };
+    const addSentMessageLog = (payload) => {
+        const message_object = generateMessageObject(payload, "sent");
+        addMessageLogsStatus(message_object);
+    };
+    const addReceivedMessageLog = (payload) => {
+        const message_object = generateMessageObject(payload, "received");
+        addMessageLogsStatus(message_object);
+    };
+
     return {
-        sendMessage: (message) => {
+        currentMessageLogsStatus,
-            const uuid = crypto.randomUUID();
+        sendMessage,
-            const send_message_object = {
+        updateSentMessageLogById,
-                id: uuid,
+        addSentMessageLog,
-                message: message,
+        addReceivedMessageLog,
-            };
-            asyncStdoutToPython("/controller/callback_messagebox_send", send_message_object);
-
-            addMessageLogsStatus({
-                id: uuid,
-                category: "sent",
-                status: "pending",
-                created_at: generateTimeData(),
-                messages: {
-                    original: message,
-                    translated: [],
-                },
-            });
-        },
-        currentMessageLogsStatus: currentMessageLogsStatus,
-
-        updateSentMessageLog: (payload) => {
-            const data = payload.data;
-            updateMessageLogsStatus(updateItemById(data.id, data.translation));
-        },
-        addSentMessageLog: (payload) => {
-            const data = payload.data;
-            const message_object = generateMessageObject(data, "sent");
-            addMessageLogsStatus(message_object);
-        },
-        addReceivedMessageLog: (payload) => {
-            const data = payload.data;
-            const message_object = generateMessageObject(data, "received");
-            addMessageLogsStatus(message_object);
-        },
     };
 };
 

src-ui/logics/useReceiveRoutes.js

@@ -1,8 +1,21 @@
+import { arrayToObject } from "@utils/arrayToObject";
 import { useMainFunction } from "./useMainFunction";
-import { useConfig } from "./useConfig";
 import { useMessage } from "./useMessage";
 import { useVolume } from "./useVolume";
 
+import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
+import { useMicHostList } from "@logics_configs/useMicHostList";
+import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
+import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
+import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
+import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList";
+import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
+import { useMicThreshold } from "@logics_configs/useMicThreshold";
+import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
+import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox";
+import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
+
+
 export const useReceiveRoutes = () => {
     const {
         updateTranslationStatus,
@@ -11,27 +24,23 @@ export const useReceiveRoutes = () => {
     } = useMainFunction();
 
     const {
-        updateSentMessageLog,
+        updateSentMessageLogById,
         addSentMessageLog,
         addReceivedMessageLog,
     } = useMessage();
 
-    const {
+    const { updateSoftwareVersion } = useSoftwareVersion();
-        updateSoftwareVersion,
+    const { updateMicHostList } = useMicHostList();
-        updateMicHostList,
+    const { updateSelectedMicHost } = useSelectedMicHost();
-        updateSelectedMicHost,
+    const { updateMicDeviceList } = useMicDeviceList();
-        updateMicDeviceList,
+    const { updateSelectedMicDevice } = useSelectedMicDevice();
-        updateSelectedMicDevice,
+    const { updateSpeakerDeviceList } = useSpeakerDeviceList();
-        updateMicHostAndDevice,
+    const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
+    const { updateMicThreshold } = useMicThreshold();
+    const { updateSpeakerThreshold } = useSpeakerThreshold();
+    const { updateEnableAutoClearMessageBox }  = useEnableAutoClearMessageBox();
+    const { updateSendMessageButtonType } = useSendMessageButtonType();
 
-        updateSpeakerDeviceList,
-        updateSelectedSpeakerDevice,
-
-        updateEnableAutoClearMessageBox,
-        updateSendMessageButtonType,
-        updateMicThreshold,
-        updateSpeakerThreshold,
-    } = useConfig();
 
     const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume();
 
@@ -46,15 +55,18 @@ export const useReceiveRoutes = () => {
 
         "/config/version": updateSoftwareVersion,
 
-        "/controller/list_mic_host": updateMicHostList,
+        "/controller/list_mic_host": (payload) => updateMicHostList(arrayToObject(payload)),
         "/config/choice_mic_host": updateSelectedMicHost,
-        "/controller/callback_set_mic_host": updateMicHostAndDevice,
+        "/controller/callback_set_mic_host": (payload) => {
+            updateSelectedMicHost(payload.host);
+            updateSelectedMicDevice(payload.device);
+        },
 
-        "/controller/list_mic_device": updateMicDeviceList,
+        "/controller/list_mic_device": (payload) => updateMicDeviceList(arrayToObject(payload)),
         "/config/choice_mic_device": updateSelectedMicDevice,
         "/controller/callback_set_mic_device": updateSelectedMicDevice,
 
-        "/controller/list_speaker_device": updateSpeakerDeviceList,
+        "/controller/list_speaker_device": (payload) => updateSpeakerDeviceList(arrayToObject(payload)),
         "/config/choice_speaker_device": updateSelectedSpeakerDevice,
         "/controller/callback_set_speaker_device": updateSelectedSpeakerDevice,
 
@@ -68,11 +80,13 @@ export const useReceiveRoutes = () => {
         "/config/send_message_button_type": updateSendMessageButtonType,
         "/controller/callback_set_send_message_button_type": updateSendMessageButtonType,
 
+        "/config/input_mic_energy_threshold": updateMicThreshold,
         "/controller/callback_set_mic_energy_threshold": updateMicThreshold,
+        "/config/input_speaker_energy_threshold": updateSpeakerThreshold,
         "/controller/callback_set_speaker_energy_threshold": updateSpeakerThreshold,
 
 
-        "/controller/callback_messagebox_send": updateSentMessageLog,
+        "/controller/callback_messagebox_send": updateSentMessageLogById,
         "/action/transcription_send_mic_message": addSentMessageLog,
         "/action/transcription_receive_speaker_message": addReceivedMessageLog
     };
@@ -81,7 +95,7 @@ export const useReceiveRoutes = () => {
         switch (parsed_data.status) {
             case 200:
                 const route = routes[parsed_data.endpoint];
-                (route) ? route({ data: parsed_data.result }) : console.error(`Invalid endpoint: ${parsed_data.endpoint}`);
+                (route) ? route(parsed_data.result) : console.error(`Invalid endpoint: ${parsed_data.endpoint}`);
                 break;
 
             case 348:

src-ui/logics/useVolume.js

@@ -3,28 +3,25 @@ import {
     useSpeakerVolume,
 } from "@store";
 
-import { useStdoutToPython } from "./useStdoutToPython";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
-
 
 export const useVolume = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
     const { updateMicVolume } = useMicVolume();
     const { updateSpeakerVolume } = useSpeakerVolume();
 
-    // const asyncPending = () => new Promise(() => {});
     return {
         volumeCheckStart_Mic: () => asyncStdoutToPython("/controller/callback_enable_check_mic_threshold"),
         volumeCheckStop_Mic: () => asyncStdoutToPython("/controller/callback_disable_check_mic_threshold"),
         updateVolumeVariable_Mic: (payload) => {
-            updateMicVolume(payload.data);
+            updateMicVolume(payload);
         },
 
         volumeCheckStart_Speaker: () => asyncStdoutToPython("/controller/callback_enable_check_speaker_threshold"),
         volumeCheckStop_Speaker: () => asyncStdoutToPython("/controller/callback_disable_check_speaker_threshold"),
         updateVolumeVariable_Speaker: (payload) => {
-            updateSpeakerVolume(payload.data);
+            updateSpeakerVolume(payload);
-        }
+        },
-
 
     };
 };

vite.config.js

@@ -40,6 +40,7 @@ export default defineConfig(async () => ({
             "@images": path.resolve(__dirname, "src-ui/assets"),
             "@utils": path.resolve(__dirname, "src-ui/utils"),
             "@logics": path.resolve(__dirname, "src-ui/logics"),
+            "@logics_configs": path.resolve(__dirname, "src-ui/logics/configs"),
         },
     },