Merge branch 'ui' into for_webui

src-ui/app/App.jsx

@@ -41,7 +41,11 @@ import {
     useSelectedSpeakerDevice,
     useMicThreshold,
     useSpeakerThreshold,
-    useEnableAutoClearMessageBox,
+    useEnableAutoClearMessageInputBox,
+    useEnableSendOnlyTranslatedMessages,
+    useEnableAutoExportMessageLogs,
+    useEnableVrcMicMuteSync,
+    useEnableSendMessageToVrc,
     useSendMessageButtonType,
     useUiLanguage,
     useUiScaling,
@@ -58,6 +62,8 @@ import {
     useSpeakerRecordTimeout,
     useSpeakerPhraseTimeout,
     useSpeakerMaxWords,
+    useOscIpAddress,
+    useOscPort,
 } from "@logics_configs";
 
 import {
@@ -88,7 +94,13 @@ const StartPythonFacadeComponent = () => {
     const { getSelectedSpeakerDevice } = useSelectedSpeakerDevice();
     const { getMicThreshold, getEnableAutomaticMicThreshold } = useMicThreshold();
     const { getSpeakerThreshold, getEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
-    const { getEnableAutoClearMessageBox }  = useEnableAutoClearMessageBox();
+
+    const { getEnableAutoClearMessageInputBox }  = useEnableAutoClearMessageInputBox();
+    const { getEnableSendOnlyTranslatedMessages }  = useEnableSendOnlyTranslatedMessages();
+    const { getEnableAutoExportMessageLogs }  = useEnableAutoExportMessageLogs();
+    const { getEnableVrcMicMuteSync }  = useEnableVrcMicMuteSync();
+    const { getEnableSendMessageToVrc }  = useEnableSendMessageToVrc();
+
     const { getSendMessageButtonType } = useSendMessageButtonType();
     const { getUiLanguage } = useUiLanguage();
     const { getUiScaling } = useUiScaling();
@@ -116,6 +128,8 @@ const StartPythonFacadeComponent = () => {
     const { getSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
     const { getSpeakerMaxWords } = useSpeakerMaxWords();
 
+    const { getOscIpAddress } = useOscIpAddress();
+    const { getOscPort } = useOscPort();
 
     useEffect(() => {
         if (!hasRunRef.current) {
@@ -168,8 +182,16 @@ const StartPythonFacadeComponent = () => {
                 getSpeakerPhraseTimeout();
                 getSpeakerMaxWords();
 
-                getEnableAutoClearMessageBox();
+                getEnableAutoClearMessageInputBox();
                 getSendMessageButtonType();
+
+                getEnableSendOnlyTranslatedMessages();
+                getEnableAutoExportMessageLogs();
+                getEnableVrcMicMuteSync();
+                getEnableSendMessageToVrc();
+
+                getOscIpAddress();
+                getOscPort();
             }).catch((err) => {
                 console.error(err);
             });

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

@@ -3,7 +3,8 @@ 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 { AdvancedSettings } from "./advanced_settings/AdvancedSettings";
 // import { AboutVrct } from "./about_vrct/AboutVrct";
 
 export const SettingBox = () => {
@@ -11,12 +12,14 @@ 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 "advanced_settings":
+            return <AdvancedSettings />;
         // case "about_vrct":
         //     return <AboutVrct />;
 

src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.jsx

@@ -1,9 +1,9 @@
 import styles from "./ActionButton.module.scss";
 
-export const ActionButton = ({IconComponent, OnclickFunction}) => {
+export const ActionButton = ({IconComponent, onclickFunction}) => {
     return (
         <div className={styles.container}>
-            <button className={styles.button_wrapper} onClick={OnclickFunction}>
+            <button className={styles.button_wrapper} onClick={onclickFunction}>
                 <IconComponent className={styles.button_svg}/>
             </button>
         </div>

src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.module.scss

@@ -11,4 +11,5 @@
 
 .button_svg {
     width: 2.4rem;
+    color: var(--dark_400_color);
 }

src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx

@@ -9,16 +9,18 @@ export const RadioButton = (props) => {
                         ? <>
                             { props.checked_variable.state === "pending" && <span className={styles.loader}></span> }
                             <input
+                                className={styles.radio_button_input}
                                 type="radio"
-                                name="radio"
+                                name={props.name}
                                 value={option.radio_button_id}
                                 onChange={() => props.selectFunction(option.radio_button_id)}
                                 checked
                             />
                         </>
                         : <input
+                            className={styles.radio_button_input}
                             type="radio"
-                            name="radio"
+                            name={props.name}
                             value={option.radio_button_id}
                             onChange={() => props.selectFunction(option.radio_button_id)}
                         />

src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss

@@ -23,12 +23,12 @@
     }
 }
 
-input[type="radio"] {
+.radio_button_input {
     appearance: none;
     margin: 0;
-    width: 2.4rem;
+    width: 2rem;
-    height: 2.4rem;
+    height: 2rem;
-    border: 0.3rem solid var(--dark_600_color);
+    border: 0.2rem solid var(--dark_600_color);
     border-radius: 50%;
     transition: border-color .1s ease, border-width .1s ease;
     cursor: inherit;

src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss

@@ -4,8 +4,6 @@
     justify-content: space-between;
     align-items: center;
     padding: 2rem;
-    justify-content: space-between;
-    align-items: center;
     gap: 2rem;
     &.flex_column {
         flex-direction: column;

src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx

@@ -0,0 +1,96 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styles from "./AdvancedSettings.module.scss";
+
+import { useOpenFolder } from "@logics_common";
+import {
+    useOscIpAddress,
+    useOscPort,
+} from "@logics_configs";
+
+import {
+    ActionButtonContainer,
+    EntryContainer,
+} from "../_templates/Templates";
+
+
+import OpenFolderSvg from "@images/open_folder.svg?react";
+
+export const AdvancedSettings = () => {
+    return (
+        <>
+            <OscIpAddressContainer />
+            <OscPortContainer />
+            <OpenConfigFolderContainer />
+        </>
+    );
+};
+
+const OscIpAddressContainer = () => {
+    const { t } = useTranslation();
+    const [ui_variable, setUiVariable] = useState("");
+    const { currentOscIpAddress, setOscIpAddress } = useOscIpAddress();
+    const onChangeFunction = (e) => {
+        const value = e.currentTarget.value;
+        if (value === "") {
+            setUiVariable("");
+        } else {
+            setUiVariable(value);
+            setOscIpAddress(value);
+        }
+    };
+
+    useEffect(()=> {
+        setUiVariable(currentOscIpAddress.data);
+    }, [currentOscIpAddress]);
+
+    return (
+        <EntryContainer
+            label={t("config_page.osc_ip_address.label")}
+            ui_variable={ui_variable}
+            onChange={onChangeFunction}
+        />
+    );
+};
+
+const OscPortContainer = () => {
+    const { t } = useTranslation();
+    const [ui_variable, setUiVariable] = useState("");
+    const { currentOscPort, setOscPort } = useOscPort();
+    const onChangeFunction = (e) => {
+        const value = e.currentTarget.value;
+        if (value === "") {
+            setUiVariable("");
+        } else {
+            setUiVariable(value);
+            setOscPort(value);
+        }
+    };
+
+    useEffect(()=> {
+        setUiVariable(currentOscPort.data);
+    }, [currentOscPort]);
+
+    return (
+        <EntryContainer
+            label={t("config_page.osc_port.label")}
+            ui_variable={ui_variable}
+            onChange={onChangeFunction}
+        />
+    );
+};
+const OpenConfigFolderContainer = () => {
+    const { t } = useTranslation();
+    const { openFolder_ConfigFile } = useOpenFolder();
+
+    return (
+        <>
+            <ActionButtonContainer
+                label={t("config_page.auto_export_message_logs.label")}
+                desc={t("config_page.auto_export_message_logs.desc")}
+                IconComponent={OpenFolderSvg}
+                onclickFunction={openFolder_ConfigFile}
+            />
+        </>
+    );
+};

src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.module.scss

@@ -0,0 +1,22 @@
+.container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2rem;
+    align-items: center;
+    gap: 2rem;
+    &.flex_column {
+        flex-direction: column;
+    }
+    border-bottom: solid 0.1rem var(--dark_800_color);
+}
+
+.switch_section_container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    align-items: center;
+    gap: 2rem;
+}

src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx

@@ -7,6 +7,7 @@ import {
     useUiLanguage,
     useUiScaling,
     useMessageLogUiScaling,
+    useSendMessageButtonType,
     useSelectedFontFamily,
     useTransparency,
 } from "@logics_configs";
@@ -18,6 +19,7 @@ import {
 import {
     SliderContainer,
     DropdownMenuContainer,
+    RadioButtonContainer,
 } from "../_templates/Templates";
 
 export const Appearance = () => {
@@ -26,6 +28,7 @@ export const Appearance = () => {
             <UiLanguageContainer />
             <UiScalingContainer />
             <MessageLogUiScalingContainer />
+            <SendMessageButtonTypeContainer />
             <FontFamilyContainer />
             <TransparencyContainer />
         </>
@@ -60,8 +63,9 @@ const UiLanguageContainer = () => {
                 {Object.entries(SELECTABLE_UI_LANGUAGES_DICT).map(([key, value]) => (
                     <label key={key} className={clsx(styles.radio_button_wrapper, { [styles.is_selected]: currentUiLanguage.data === key } )}>
                         <input
+                            className={styles.radio_button_input}
                             type="radio"
-                            name="radio"
+                            name="ui_language"
                             value={key}
                             onChange={() => setUiLanguage(key)}
                             checked={currentUiLanguage.data === key}
@@ -157,6 +161,25 @@ const MessageLogUiScalingContainer = () => {
     );
 };
 
+const SendMessageButtonTypeContainer = () => {
+    const { t } = useTranslation();
+    const { currentSendMessageButtonType, setSendMessageButtonType } = useSendMessageButtonType();
+
+    return (
+        <RadioButtonContainer
+            label={t("config_page.send_message_button_type.label")}
+            selectFunction={setSendMessageButtonType}
+            name="send_message_button_type"
+            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 FontFamilyContainer = () => {
     const { t } = useTranslation();
     const { currentSelectedFontFamily, setSelectedFontFamily } = useSelectedFontFamily();

src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.module.scss

@@ -41,18 +41,18 @@
     }
 }
 
-input[type="radio"] {
+.radio_button_input {
     appearance: none;
     margin: 0;
-    width: 1.6rem;
+    width: 2rem;
-    height: 1.6rem;
+    height: 2rem;
-    border: 0.2rem solid var(--dark_600_color);
+    border: 0.3rem solid var(--dark_600_color);
     border-radius: 50%;
     transition: border-color .1s ease, border-width .1s ease;
     cursor: inherit;
     &:checked {
         border-color: var(--primary_400_color);
-        border-width: 0.4rem;
+        border-width: 0.6rem;
     }
 }
 

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

@@ -1,36 +1,110 @@
 import { useTranslation } from "react-i18next";
-import { useSettingBox } from "../_components/useSettingBox";
+import styles from "./Others.module.scss";
-import { useConfig } from "@logics/useConfig";
+
+import { useOpenFolder } from "@logics_common";
+import {
+    useEnableAutoClearMessageInputBox,
+    useEnableSendOnlyTranslatedMessages,
+    useEnableAutoExportMessageLogs,
+    useEnableVrcMicMuteSync,
+    useEnableSendMessageToVrc,
+} from "@logics_configs";
+
+import {
+    CheckboxContainer,
+} from "../_templates/Templates";
+
+import {
+    LabelComponent,
+    Checkbox,
+    ActionButton,
+} from "../_components/";
+
+import OpenFolderSvg from "@images/open_folder.svg?react";
 
 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")}
+            <SendOnlyTranslatedMessagesContainer />
-                variable={currentEnableAutoClearMessageBox}
+            <AutoExportMessageLogsContainer />
-                toggleFunction={toggleEnableAutoClearMessageBox}
+            <VrcMicMuteSyncContainer />
-            />
+            <SendMessageToVrcContainer />
-
-            <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 SendOnlyTranslatedMessagesContainer = () => {
+    const { t } = useTranslation();
+    const { currentEnableSendOnlyTranslatedMessages, toggleEnableSendOnlyTranslatedMessages } = useEnableSendOnlyTranslatedMessages();
+
+    return (
+        <CheckboxContainer
+            label={t("config_page.send_only_translated_messages.label")}
+            variable={currentEnableSendOnlyTranslatedMessages}
+            toggleFunction={toggleEnableSendOnlyTranslatedMessages}
+        />
+    );
+};
+const AutoExportMessageLogsContainer = () => {
+    const { t } = useTranslation();
+    const { currentEnableAutoExportMessageLogs, toggleEnableAutoExportMessageLogs } = useEnableAutoExportMessageLogs();
+    const { openFolder_MessageLogs } = useOpenFolder();
+
+    return (
+        <div className={styles.container}>
+            <LabelComponent
+                label={t("config_page.auto_export_message_logs.label")}
+                desc={t("config_page.auto_export_message_logs.desc")}
+                />
+            <div className={styles.switch_section_container}>
+                <ActionButton
+                    IconComponent={OpenFolderSvg}
+                    onclickFunction={openFolder_MessageLogs}
+                />
+                <Checkbox
+                    variable={currentEnableAutoExportMessageLogs}
+                    toggleFunction={toggleEnableAutoExportMessageLogs}
+                />
+            </div>
+        </div>
+    );
+};
+const VrcMicMuteSyncContainer = () => {
+    const { t } = useTranslation();
+    const { currentEnableVrcMicMuteSync, toggleEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
+
+    return (
+        <CheckboxContainer
+            label={t("config_page.vrc_mic_mute_sync.label")}
+            desc={t("config_page.vrc_mic_mute_sync.desc")}
+            variable={currentEnableVrcMicMuteSync}
+            toggleFunction={toggleEnableVrcMicMuteSync}
+        />
+    );
+};
+const SendMessageToVrcContainer = () => {
+    const { t } = useTranslation();
+    const { currentEnableSendMessageToVrc, toggleEnableSendMessageToVrc } = useEnableSendMessageToVrc();
+
+    return (
+        <CheckboxContainer
+            label={t("config_page.send_message_to_vrc.label")}
+            desc={t("config_page.send_message_to_vrc.desc")}
+            variable={currentEnableSendMessageToVrc}
+            toggleFunction={toggleEnableSendMessageToVrc}
+        />
+    );
 };

src-ui/app/config_page/setting_section/setting_box/others/Others.module.scss

@@ -0,0 +1,22 @@
+.container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2rem;
+    align-items: center;
+    gap: 2rem;
+    &.flex_column {
+        flex-direction: column;
+    }
+    border-bottom: solid 0.1rem var(--dark_800_color);
+}
+
+.switch_section_container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    align-items: center;
+    gap: 2rem;
+}

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/common/index.js

@@ -1,4 +1,5 @@
 export { useWindow } from "./useWindow";
 export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage";
+export { useOpenFolder } from "./useOpenFolder";
 export { useMessage } from "./useMessage";
 export { useVolume } from "./useVolume";

src-ui/logics/common/useOpenFolder.js

@@ -0,0 +1,17 @@
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useOpenFolder = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const openFolder_MessageLogs = () => {
+        asyncStdoutToPython("/run/open_filepath_logs");
+    };
+
+    const openFolder_ConfigFile = () => {
+        asyncStdoutToPython("/run/open_filepath_config_file");
+    };
+
+    return {
+        openFolder_MessageLogs,
+        openFolder_ConfigFile,
+    };
+};

src-ui/logics/configs/advanced_settings/useOscIpAddress.js

@@ -0,0 +1,24 @@
+import { useStore_OscIpAddress } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useOscIpAddress = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentOscIpAddress, updateOscIpAddress, pendingOscIpAddress } = useStore_OscIpAddress();
+
+    const getOscIpAddress = () => {
+        pendingOscIpAddress();
+        asyncStdoutToPython("/get/data/osc_ip_address");
+    };
+
+    const setOscIpAddress = (osc_ip_address) => {
+        pendingOscIpAddress();
+        asyncStdoutToPython("/set/data/osc_ip_address", osc_ip_address);
+    };
+
+    return {
+        currentOscIpAddress,
+        getOscIpAddress,
+        updateOscIpAddress,
+        setOscIpAddress,
+    };
+};

src-ui/logics/configs/advanced_settings/useOscPort.js

@@ -0,0 +1,24 @@
+import { useStore_OscPort } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useOscPort = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentOscPort, updateOscPort, pendingOscPort } = useStore_OscPort();
+
+    const getOscPort = () => {
+        pendingOscPort();
+        asyncStdoutToPython("/get/data/osc_port");
+    };
+
+    const setOscPort = (osc_port) => {
+        pendingOscPort();
+        asyncStdoutToPython("/set/data/osc_port", osc_port);
+    };
+
+    return {
+        currentOscPort,
+        getOscPort,
+        updateOscPort,
+        setOscPort,
+    };
+};

src-ui/logics/configs/index.js

@@ -10,14 +10,17 @@ 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 { useSendMessageButtonType } from "./others/useSendMessageButtonType";
 export { useUiLanguage } from "./appearance/useUiLanguage";
 export { useUiScaling } from "./appearance/useUiScaling";
 
-export { useEnableAutoClearMessageBox } from "./others/useEnableAutoClearMessageBox";
+export { useEnableAutoClearMessageInputBox } from "./others/useEnableAutoClearMessageInputBox";
+export { useEnableAutoExportMessageLogs } from "./others/useEnableAutoExportMessageLogs";
+export { useEnableSendMessageToVrc } from "./others/useEnableSendMessageToVrc";
+export { useEnableSendOnlyTranslatedMessages } from "./others/useEnableSendOnlyTranslatedMessages";
+export { useEnableVrcMicMuteSync } from "./others/useEnableVrcMicMuteSync";
 
 export { useMicRecordTimeout } from "./transcription/useMicRecordTimeout";
 export { useMicPhraseTimeout } from "./transcription/useMicPhraseTimeout";
@@ -28,4 +31,7 @@ export { useSpeakerRecordTimeout } from "./transcription/useSpeakerRecordTimeout
 export { useSpeakerPhraseTimeout } from "./transcription/useSpeakerPhraseTimeout";
 export { useSpeakerMaxWords } from "./transcription/useSpeakerMaxWords";
 
+export { useOscIpAddress } from "./advanced_settings/useOscIpAddress";
+export { useOscPort } from "./advanced_settings/useOscPort";
+
 export { useSoftwareVersion } from "./useSoftwareVersion";

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/useEnableAutoExportMessageLogs.js

@@ -0,0 +1,28 @@
+import { useStore_EnableAutoExportMessageLogs } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useEnableAutoExportMessageLogs = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentEnableAutoExportMessageLogs, updateEnableAutoExportMessageLogs, pendingEnableAutoExportMessageLogs } = useStore_EnableAutoExportMessageLogs();
+
+    const getEnableAutoExportMessageLogs = () => {
+        pendingEnableAutoExportMessageLogs();
+        asyncStdoutToPython("/get/data/logger_feature");
+    };
+
+    const toggleEnableAutoExportMessageLogs = () => {
+        pendingEnableAutoExportMessageLogs();
+        if (currentEnableAutoExportMessageLogs.data) {
+            asyncStdoutToPython("/set/disable/logger_feature");
+        } else {
+            asyncStdoutToPython("/set/enable/logger_feature");
+        }
+    };
+
+    return {
+        currentEnableAutoExportMessageLogs,
+        getEnableAutoExportMessageLogs,
+        toggleEnableAutoExportMessageLogs,
+        updateEnableAutoExportMessageLogs,
+    };
+};

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

@@ -0,0 +1,28 @@
+import { useStore_EnableSendMessageToVrc } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useEnableSendMessageToVrc = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentEnableSendMessageToVrc, updateEnableSendMessageToVrc, pendingEnableSendMessageToVrc } = useStore_EnableSendMessageToVrc();
+
+    const getEnableSendMessageToVrc = () => {
+        pendingEnableSendMessageToVrc();
+        asyncStdoutToPython("/get/data/send_message_to_vrc");
+    };
+
+    const toggleEnableSendMessageToVrc = () => {
+        pendingEnableSendMessageToVrc();
+        if (currentEnableSendMessageToVrc.data) {
+            asyncStdoutToPython("/set/disable/send_message_to_vrc");
+        } else {
+            asyncStdoutToPython("/set/enable/send_message_to_vrc");
+        }
+    };
+
+    return {
+        currentEnableSendMessageToVrc,
+        getEnableSendMessageToVrc,
+        toggleEnableSendMessageToVrc,
+        updateEnableSendMessageToVrc,
+    };
+};

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

@@ -0,0 +1,28 @@
+import { useStore_EnableSendOnlyTranslatedMessages } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useEnableSendOnlyTranslatedMessages = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentEnableSendOnlyTranslatedMessages, updateEnableSendOnlyTranslatedMessages, pendingEnableSendOnlyTranslatedMessages } = useStore_EnableSendOnlyTranslatedMessages();
+
+    const getEnableSendOnlyTranslatedMessages = () => {
+        pendingEnableSendOnlyTranslatedMessages();
+        asyncStdoutToPython("/get/data/send_only_translated_messages");
+    };
+
+    const toggleEnableSendOnlyTranslatedMessages = () => {
+        pendingEnableSendOnlyTranslatedMessages();
+        if (currentEnableSendOnlyTranslatedMessages.data) {
+            asyncStdoutToPython("/set/disable/send_only_translated_messages");
+        } else {
+            asyncStdoutToPython("/set/enable/send_only_translated_messages");
+        }
+    };
+
+    return {
+        currentEnableSendOnlyTranslatedMessages,
+        getEnableSendOnlyTranslatedMessages,
+        toggleEnableSendOnlyTranslatedMessages,
+        updateEnableSendOnlyTranslatedMessages,
+    };
+};

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

@@ -0,0 +1,28 @@
+import { useStore_EnableVrcMicMuteSync } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useEnableVrcMicMuteSync = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentEnableVrcMicMuteSync, updateEnableVrcMicMuteSync, pendingEnableVrcMicMuteSync } = useStore_EnableVrcMicMuteSync();
+
+    const getEnableVrcMicMuteSync = () => {
+        pendingEnableVrcMicMuteSync();
+        asyncStdoutToPython("/get/data/vrc_mic_mute_sync");
+    };
+
+    const toggleEnableVrcMicMuteSync = () => {
+        pendingEnableVrcMicMuteSync();
+        if (currentEnableVrcMicMuteSync.data) {
+            asyncStdoutToPython("/set/disable/vrc_mic_mute_sync");
+        } else {
+            asyncStdoutToPython("/set/enable/vrc_mic_mute_sync");
+        }
+    };
+
+    return {
+        currentEnableVrcMicMuteSync,
+        getEnableVrcMicMuteSync,
+        toggleEnableVrcMicMuteSync,
+        updateEnableVrcMicMuteSync,
+    };
+};

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,12 +27,16 @@ import {
     useSelectedSpeakerDevice,
     useMicThreshold,
     useSpeakerThreshold,
-    useEnableAutoClearMessageBox,
+    useEnableAutoClearMessageInputBox,
-    useSendMessageButtonType,
+    useEnableSendOnlyTranslatedMessages,
+    useEnableAutoExportMessageLogs,
+    useEnableVrcMicMuteSync,
+    useEnableSendMessageToVrc,
     useSelectedFontFamily,
     useUiLanguage,
     useUiScaling,
     useMessageLogUiScaling,
+    useSendMessageButtonType,
     useTransparency,
     useMicRecordTimeout,
     useMicPhraseTimeout,
@@ -41,6 +45,8 @@ import {
     useSpeakerRecordTimeout,
     useSpeakerPhraseTimeout,
     useSpeakerMaxWords,
+    useOscIpAddress,
+    useOscPort,
 } from "@logics_configs";
 
 export const useReceiveRoutes = () => {
@@ -76,7 +82,13 @@ export const useReceiveRoutes = () => {
     const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
     const { updateMicThreshold, updateEnableAutomaticMicThreshold } = useMicThreshold();
     const { updateSpeakerThreshold, updateEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
-    const { updateEnableAutoClearMessageBox }  = useEnableAutoClearMessageBox();
+
+    const { updateEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox();
+    const { updateEnableSendOnlyTranslatedMessages } = useEnableSendOnlyTranslatedMessages();
+    const { updateEnableAutoExportMessageLogs } = useEnableAutoExportMessageLogs();
+    const { updateEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
+    const { updateEnableSendMessageToVrc } = useEnableSendMessageToVrc();
+
     const { updateSendMessageButtonType } = useSendMessageButtonType();
     const { updateUiLanguage } = useUiLanguage();
     const { updateUiScaling } = useUiScaling();
@@ -95,17 +107,22 @@ export const useReceiveRoutes = () => {
     const { updateMicRecordTimeout } = useMicRecordTimeout();
     const { updateMicPhraseTimeout } = useMicPhraseTimeout();
     const { updateMicMaxWords } = useMicMaxWords();
-    const { currentMicWordFilterList, updateMicWordFilterList } = useMicWordFilterList();
+    const { updateMicWordFilterList } = useMicWordFilterList();
 
     const { updateSpeakerRecordTimeout } = useSpeakerRecordTimeout();
     const { updateSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
     const { updateSpeakerMaxWords } = useSpeakerMaxWords();
 
+    const { updateOscIpAddress } = useOscIpAddress();
+    const { updateOscPort } = useOscPort();
+
     const routes = {
         // Common
         "/run/feed_watchdog": () => {},
         "/get/data/main_window_geometry": restoreWindowGeometry,
         "/set/data/main_window_geometry": () => {},
+        "/run/open_filepath_logs": () => console.log("Opened Directory, Message Logs"),
+        "/run/open_filepath_config_file": () => console.log("Opened Directory, Config File"),
 
         // Main Page
         // Page Controls
@@ -237,6 +254,9 @@ export const useReceiveRoutes = () => {
         "/get/data/textbox_ui_scaling": updateMessageLogUiScaling,
         "/set/data/textbox_ui_scaling": updateMessageLogUiScaling,
 
+        "/get/data/send_message_button_type": updateSendMessageButtonType,
+        "/set/data/send_message_button_type": updateSendMessageButtonType,
+
         "/get/data/font_family": updateSelectedFontFamily,
         "/set/data/font_family": updateSelectedFontFamily,
 
@@ -292,12 +312,32 @@ 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,
+        "/get/data/send_only_translated_messages": updateEnableSendOnlyTranslatedMessages,
-        "/set/data/send_message_button_type": updateSendMessageButtonType,
+        "/set/enable/send_only_translated_messages": updateEnableSendOnlyTranslatedMessages,
+        "/set/disable/send_only_translated_messages": updateEnableSendOnlyTranslatedMessages,
+
+        "/get/data/logger_feature": updateEnableAutoExportMessageLogs,
+        "/set/enable/logger_feature": updateEnableAutoExportMessageLogs,
+        "/set/disable/logger_feature": updateEnableAutoExportMessageLogs,
+
+        "/get/data/vrc_mic_mute_sync": updateEnableVrcMicMuteSync,
+        "/set/enable/vrc_mic_mute_sync": updateEnableVrcMicMuteSync,
+        "/set/disable/vrc_mic_mute_sync": updateEnableVrcMicMuteSync,
+
+        "/get/data/send_message_to_vrc": updateEnableSendMessageToVrc,
+        "/set/enable/send_message_to_vrc": updateEnableSendMessageToVrc,
+        "/set/disable/send_message_to_vrc": updateEnableSendMessageToVrc,
+
+        // Advanced Settings
+        "/get/data/osc_ip_address": updateOscIpAddress,
+        "/set/data/osc_ip_address": updateOscIpAddress,
+
+        "/get/data/osc_port": updateOscPort,
+        "/set/data/osc_port": updateOscPort,
     };
 
     const error_routes = {

src-ui/store.js

@@ -171,6 +171,7 @@ export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useS
 export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook("en", "UiLanguage");
 export const { atomInstance: Atom_UiScaling, useHook: useStore_UiScaling } = createAtomWithHook(100, "UiScaling");
 export const { atomInstance: Atom_MessageLogUiScaling, useHook: useStore_MessageLogUiScaling } = createAtomWithHook(100, "MessageLogUiScaling");
+export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAtomWithHook("show", "SendMessageButtonType");
 export const { atomInstance: Atom_SelectedFontFamily, useHook: useStore_SelectedFontFamily } = createAtomWithHook("Yu Gothic UI", "SelectedFontFamily");
 export const { atomInstance: Atom_SelectableFontFamilyList, useHook: useStore_SelectableFontFamilyList } = createAtomWithHook({}, "SelectableFontFamilyList");
 export const { atomInstance: Atom_Transparency, useHook: useStore_Transparency } = createAtomWithHook(100, "Transparency");
@@ -189,8 +190,16 @@ 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");
+export const { atomInstance: Atom_EnableSendOnlyTranslatedMessages, useHook: useStore_EnableSendOnlyTranslatedMessages } = createAtomWithHook(false, "EnableSendOnlyTranslatedMessages");
+export const { atomInstance: Atom_EnableAutoExportMessageLogs, useHook: useStore_EnableAutoExportMessageLogs } = createAtomWithHook(false, "EnableAutoExportMessageLogs");
+export const { atomInstance: Atom_EnableVrcMicMuteSync, useHook: useStore_EnableVrcMicMuteSync } = createAtomWithHook(false, "EnableVrcMicMuteSync");
+export const { atomInstance: Atom_EnableSendMessageToVrc, useHook: useStore_EnableSendMessageToVrc } = createAtomWithHook(true, "EnableSendMessageToVrc");
+
+// Advanced Settings
+export const { atomInstance: Atom_OscIpAddress, useHook: useStore_OscIpAddress } = createAtomWithHook("127.0.0.1", "OscIpAddress");
+export const { atomInstance: Atom_OscPort, useHook: useStore_OscPort } = createAtomWithHook("9000", "OscPort");
+
 
 
 export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");