[Update] Config Page: Add Others Tab. Auto Clear Message Input Box, Send Message Button Type.

src-ui/app/App.jsx

@@ -41,7 +41,7 @@ import {
     useSelectedSpeakerDevice,
     useMicThreshold,
     useSpeakerThreshold,
-    useEnableAutoClearMessageBox,
+    useEnableAutoClearMessageInputBox,
     useSendMessageButtonType,
     useUiLanguage,
     useUiScaling,
@@ -88,7 +88,7 @@ const StartPythonFacadeComponent = () => {
     const { getSelectedSpeakerDevice } = useSelectedSpeakerDevice();
     const { getMicThreshold, getEnableAutomaticMicThreshold } = useMicThreshold();
     const { getSpeakerThreshold, getEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
-    const { getEnableAutoClearMessageBox }  = useEnableAutoClearMessageBox();
+    const { getEnableAutoClearMessageInputBox }  = useEnableAutoClearMessageInputBox();
     const { getSendMessageButtonType } = useSendMessageButtonType();
     const { getUiLanguage } = useUiLanguage();
     const { getUiScaling } = useUiScaling();
@@ -168,7 +168,7 @@ const StartPythonFacadeComponent = () => {
                 getSpeakerPhraseTimeout();
                 getSpeakerMaxWords();
 
-                getEnableAutoClearMessageBox();
+                getEnableAutoClearMessageInputBox();
                 getSendMessageButtonType();
             }).catch((err) => {
                 console.error(err);

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

@@ -3,7 +3,7 @@ import { useStore_SelectedConfigTabId } from "@store";
 import { Device } from "./device/Device";
 import { Appearance } from "./appearance/Appearance";
 import { Transcription } from "./transcription/Transcription";
-// import { Others } from "./others/Others";
+import { Others } from "./others/Others";
 // import { AboutVrct } from "./about_vrct/AboutVrct";
 
 export const SettingBox = () => {
@@ -11,12 +11,12 @@ export const SettingBox = () => {
     switch (currentSelectedConfigTabId.data) {
         case "device":
             return <Device />;
-        // case "others":
-        //     return <Others />;
         case "appearance":
             return <Appearance />;
         case "transcription":
             return <Transcription />;
+        case "others":
+            return <Others />;
         // case "about_vrct":
         //     return <AboutVrct />;
 

src-ui/app/config_page/setting_section/setting_box/others/Others.jsx

@@ -1,36 +1,52 @@
 import { useTranslation } from "react-i18next";
-import { useSettingBox } from "../_components/useSettingBox";
+
-import { useConfig } from "@logics/useConfig";
+import {
+    useEnableAutoClearMessageInputBox,
+    useSendMessageButtonType,
+} from "@logics_configs";
+
+import {
+    CheckboxContainer,
+    RadioButtonContainer,
+} from "../_templates/Templates";
+
 
 export const Others = () => {
-    const { t } = useTranslation();
-    const {
-        CheckboxContainer,
-        RadioButtonContainer,
-    } = useSettingBox();
-
-    const { currentEnableAutoClearMessageBox, toggleEnableAutoClearMessageBox } = useConfig();
-    const { currentSendMessageButtonType, setSendMessageButtonType } = useConfig();
-
-
     return (
         <>
-            <CheckboxContainer
+            <AutoClearMessageInputBoxContainer />
-                label={t("config_page.auto_clear_the_message_box.label")}
+            <SendMessageButtonTypeContainer />
-                variable={currentEnableAutoClearMessageBox}
-                toggleFunction={toggleEnableAutoClearMessageBox}
-            />
-
-            <RadioButtonContainer
-                label={t("config_page.send_message_button_type.label")}
-                selectFunction={setSendMessageButtonType}
-                options={[
-                    { radio_button_id: "hide", label: t("config_page.send_message_button_type.hide") },
-                    { radio_button_id: "show", label: t("config_page.send_message_button_type.show") },
-                    { radio_button_id: "show_and_disable_enter_key", label: t("config_page.send_message_button_type.show_and_disable_enter_key") },
-                ]}
-                checked_variable={currentSendMessageButtonType}
-            />
         </>
     );
 };
+
+const AutoClearMessageInputBoxContainer = () => {
+    const { t } = useTranslation();
+    const { currentEnableAutoClearMessageInputBox, toggleEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox();
+
+    return (
+        <CheckboxContainer
+            label={t("config_page.auto_clear_the_message_box.label")}
+            variable={currentEnableAutoClearMessageInputBox}
+            toggleFunction={toggleEnableAutoClearMessageInputBox}
+        />
+    );
+};
+
+const SendMessageButtonTypeContainer = () => {
+    const { t } = useTranslation();
+    const { currentSendMessageButtonType, setSendMessageButtonType } = useSendMessageButtonType();
+
+    return (
+        <RadioButtonContainer
+            label={t("config_page.send_message_button_type.label")}
+            selectFunction={setSendMessageButtonType}
+            options={[
+                { radio_button_id: "hide", label: t("config_page.send_message_button_type.hide") },
+                { radio_button_id: "show", label: t("config_page.send_message_button_type.show") },
+                { radio_button_id: "show_and_disable_enter_key", label: t("config_page.send_message_button_type.show_and_disable_enter_key") },
+            ]}
+            checked_variable={currentSendMessageButtonType}
+        />
+    );
+};

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

@@ -6,21 +6,21 @@ import { store } from "@store";
 import { scrollToBottom } from "@utils/scrollToBottom";
 import {
     useSendMessageButtonType,
-    useEnableAutoClearMessageBox,
+    useEnableAutoClearMessageInputBox,
 } from "@logics_configs";
 
 export const MessageInputBox = () => {
     const [inputValue, setInputValue] = useState("");
     const { sendMessage } = useMessage();
 
-    const { currentEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
+    const { currentEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox();
     const { currentSendMessageButtonType } = useSendMessageButtonType();
 
     const onSubmitFunction = (e) => {
         e.preventDefault();
         sendMessage(inputValue);
 
-        if (currentEnableAutoClearMessageBox.data) setInputValue("");
+        if (currentEnableAutoClearMessageInputBox.data) setInputValue("");
 
         setTimeout(() => {
             scrollToBottom(store.log_box_ref);

src-ui/logics/configs/index.js

@@ -10,14 +10,13 @@ export { useSpeakerDeviceList } from "./device/useSpeakerDeviceList";
 export { useSpeakerThreshold } from "./device/useSpeakerThreshold";
 
 export { useMessageLogUiScaling } from "./appearance/useMessageLogUiScaling";
-// export { useRestoreWindowGeometry } from "./appearance/useRestoreWindowGeometry";
 export { useSelectedFontFamily } from "./appearance/useSelectedFontFamily";
-export { useSendMessageButtonType } from "./appearance/useSendMessageButtonType";
 export { useTransparency } from "./appearance/useTransparency";
 export { useUiLanguage } from "./appearance/useUiLanguage";
 export { useUiScaling } from "./appearance/useUiScaling";
 
-export { useEnableAutoClearMessageBox } from "./others/useEnableAutoClearMessageBox";
+export { useEnableAutoClearMessageInputBox } from "./others/useEnableAutoClearMessageInputBox";
+export { useSendMessageButtonType } from "./others/useSendMessageButtonType";
 
 export { useMicRecordTimeout } from "./transcription/useMicRecordTimeout";
 export { useMicPhraseTimeout } from "./transcription/useMicPhraseTimeout";

src-ui/logics/configs/others/useEnableAutoClearMessageBox.js

@@ -1,28 +0,0 @@
-import { useStore_EnableAutoClearMessageBox } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
-
-export const useEnableAutoClearMessageBox = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox, pendingEnableAutoClearMessageBox } = useStore_EnableAutoClearMessageBox();
-
-    const getEnableAutoClearMessageBox = () => {
-        pendingEnableAutoClearMessageBox();
-        asyncStdoutToPython("/get/data/auto_clear_message_box");
-    };
-
-    const toggleEnableAutoClearMessageBox = () => {
-        pendingEnableAutoClearMessageBox();
-        if (currentEnableAutoClearMessageBox.data) {
-            asyncStdoutToPython("/set/disable/auto_clear_message_box");
-        } else {
-            asyncStdoutToPython("/set/enable/auto_clear_message_box");
-        }
-    };
-
-    return {
-        currentEnableAutoClearMessageBox,
-        getEnableAutoClearMessageBox,
-        toggleEnableAutoClearMessageBox,
-        updateEnableAutoClearMessageBox,
-    };
-};

src-ui/logics/configs/others/useEnableAutoClearMessageInputBox.js

@@ -0,0 +1,28 @@
+import { useStore_EnableAutoClearMessageInputBox } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useEnableAutoClearMessageInputBox = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentEnableAutoClearMessageInputBox, updateEnableAutoClearMessageInputBox, pendingEnableAutoClearMessageInputBox } = useStore_EnableAutoClearMessageInputBox();
+
+    const getEnableAutoClearMessageInputBox = () => {
+        pendingEnableAutoClearMessageInputBox();
+        asyncStdoutToPython("/get/data/auto_clear_message_box");
+    };
+
+    const toggleEnableAutoClearMessageInputBox = () => {
+        pendingEnableAutoClearMessageInputBox();
+        if (currentEnableAutoClearMessageInputBox.data) {
+            asyncStdoutToPython("/set/disable/auto_clear_message_box");
+        } else {
+            asyncStdoutToPython("/set/enable/auto_clear_message_box");
+        }
+    };
+
+    return {
+        currentEnableAutoClearMessageInputBox,
+        getEnableAutoClearMessageInputBox,
+        toggleEnableAutoClearMessageInputBox,
+        updateEnableAutoClearMessageInputBox,
+    };
+};

src-ui/logics/configs/others/useSendMessageButtonType.js

@@ -0,0 +1,24 @@
+import { useStore_SendMessageButtonType } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSendMessageButtonType = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSendMessageButtonType, updateSendMessageButtonType, pendingSendMessageButtonType } = useStore_SendMessageButtonType();
+
+    const getSendMessageButtonType = () => {
+        pendingSendMessageButtonType();
+        asyncStdoutToPython("/get/data/send_message_button_type");
+    };
+
+    const setSendMessageButtonType = (send_message_button_type) => {
+        pendingSendMessageButtonType();
+        asyncStdoutToPython("/set/data/send_message_button_type", send_message_button_type);
+    };
+
+    return {
+        currentSendMessageButtonType,
+        getSendMessageButtonType,
+        setSendMessageButtonType,
+        updateSendMessageButtonType,
+    };
+};

src-ui/logics/useReceiveRoutes.js

@@ -27,7 +27,7 @@ import {
     useSelectedSpeakerDevice,
     useMicThreshold,
     useSpeakerThreshold,
-    useEnableAutoClearMessageBox,
+    useEnableAutoClearMessageInputBox,
     useSendMessageButtonType,
     useSelectedFontFamily,
     useUiLanguage,
@@ -76,7 +76,7 @@ export const useReceiveRoutes = () => {
     const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
     const { updateMicThreshold, updateEnableAutomaticMicThreshold } = useMicThreshold();
     const { updateSpeakerThreshold, updateEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
-    const { updateEnableAutoClearMessageBox }  = useEnableAutoClearMessageBox();
+    const { updateEnableAutoClearMessageInputBox }  = useEnableAutoClearMessageInputBox();
     const { updateSendMessageButtonType } = useSendMessageButtonType();
     const { updateUiLanguage } = useUiLanguage();
     const { updateUiScaling } = useUiScaling();
@@ -292,9 +292,9 @@ export const useReceiveRoutes = () => {
         "/set/data/speaker_max_phrases": updateSpeakerMaxWords,
 
         // Others Tab
-        "/get/data/auto_clear_message_box": updateEnableAutoClearMessageBox,
+        "/get/data/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
-        "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageBox,
+        "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
-        "/set/disable/auto_clear_message_box": updateEnableAutoClearMessageBox,
+        "/set/disable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
 
         "/get/data/send_message_button_type": updateSendMessageButtonType,
         "/set/data/send_message_button_type": updateSendMessageButtonType,

src-ui/store.js

@@ -189,7 +189,7 @@ export const { atomInstance: Atom_SpeakerPhraseTimeout, useHook: useStore_Speake
 export const { atomInstance: Atom_SpeakerMaxWords, useHook: useStore_SpeakerMaxWords } = createAtomWithHook(0, "SpeakerMaxWords");
 
 // Others
-export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useStore_EnableAutoClearMessageBox } = createAtomWithHook(true, "EnableAutoClearMessageBox");
+export const { atomInstance: Atom_EnableAutoClearMessageInputBox, useHook: useStore_EnableAutoClearMessageInputBox } = createAtomWithHook(true, "EnableAutoClearMessageInputBox");
 export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAtomWithHook("show", "SendMessageButtonType");