[Update] Config Page: Others Tab: Add EnableSendReceivedMessageToVrc(Speaker2Chatbox).

locales/en.json

@@ -270,7 +270,7 @@
         },
         "send_received_message_to_vrc": {
             "label": "Send Received Message To VRChat",
-            "desc": "Send the message you received from the speaker's sound to VRChat's chatbox. However, this feature is intended for users who genuinely need it. Please consult with the developer."
+            "desc": "Send the message you received from the speaker's sound to VRChat's chatbox."
         },
         "osc_ip_address": {
             "label": "OSC IP Address"

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

@@ -8,6 +8,7 @@ import {
     useEnableAutoExportMessageLogs,
     useEnableVrcMicMuteSync,
     useEnableSendMessageToVrc,
+    useEnableSendReceivedMessageToVrc,
 } from "@logics_configs";
 
 import {
@@ -18,19 +19,26 @@ import {
     LabelComponent,
     Checkbox,
     ActionButton,
+    SectionLabelComponent,
 } from "../_components/";
 
 import OpenFolderSvg from "@images/open_folder.svg?react";
 
 export const Others = () => {
     return (
-        <>
+        <div className={styles.container}>
-            <AutoClearMessageInputBoxContainer />
+            <div>
-            <SendOnlyTranslatedMessagesContainer />
+                <AutoClearMessageInputBoxContainer />
-            <AutoExportMessageLogsContainer />
+                <SendOnlyTranslatedMessagesContainer />
-            <VrcMicMuteSyncContainer />
+                <AutoExportMessageLogsContainer />
-            <SendMessageToVrcContainer />
+                <VrcMicMuteSyncContainer />
-        </>
+                <SendMessageToVrcContainer />
+            </div>
+            <div>
+                <SectionLabelComponent label="Speaker2Chatbox" />
+                <SendReceivedMessageToVrcContainer />
+            </div>
+        </div>
     );
 };
 
@@ -64,12 +72,12 @@ const AutoExportMessageLogsContainer = () => {
     const { openFolder_MessageLogs } = useOpenFolder();
 
     return (
-        <div className={styles.container}>
+        <div className={styles.auto_export_message_logs_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}>
+            <div className={styles.auto_export_message_logs_switch_section_container}>
                 <ActionButton
                     IconComponent={OpenFolderSvg}
                     onclickFunction={openFolder_MessageLogs}
@@ -107,4 +115,19 @@ const SendMessageToVrcContainer = () => {
             toggleFunction={toggleEnableSendMessageToVrc}
         />
     );
+};
+
+
+const SendReceivedMessageToVrcContainer = () => {
+    const { t } = useTranslation();
+    const { currentEnableSendReceivedMessageToVrc, toggleEnableSendReceivedMessageToVrc } = useEnableSendReceivedMessageToVrc();
+
+    return (
+        <CheckboxContainer
+            label={t("config_page.send_received_message_to_vrc.label")}
+            desc={t("config_page.send_received_message_to_vrc.desc")}
+            variable={currentEnableSendReceivedMessageToVrc}
+            toggleFunction={toggleEnableSendReceivedMessageToVrc}
+        />
+    );
 };

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

@@ -1,4 +1,10 @@
 .container {
+    display: flex;
+    gap: 6.4rem;
+    flex-direction: column;
+}
+
+.auto_export_message_logs_container {
     display: flex;
     width: 100%;
     justify-content: space-between;
@@ -12,7 +18,7 @@
     border-bottom: solid 0.1rem var(--dark_800_color);
 }
 
-.switch_section_container {
+.auto_export_message_logs_switch_section_container {
     display: flex;
     width: 100%;
     justify-content: space-between;

src-ui/logics/configs/index.js

@@ -19,6 +19,7 @@ export { useUiScaling } from "./appearance/useUiScaling";
 export { useEnableAutoClearMessageInputBox } from "./others/useEnableAutoClearMessageInputBox";
 export { useEnableAutoExportMessageLogs } from "./others/useEnableAutoExportMessageLogs";
 export { useEnableSendMessageToVrc } from "./others/useEnableSendMessageToVrc";
+export { useEnableSendReceivedMessageToVrc } from "./others/useEnableSendReceivedMessageToVrc";
 export { useEnableSendOnlyTranslatedMessages } from "./others/useEnableSendOnlyTranslatedMessages";
 export { useEnableVrcMicMuteSync } from "./others/useEnableVrcMicMuteSync";
 

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

@@ -0,0 +1,28 @@
+import { useStore_EnableSendReceivedMessageToVrc } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useEnableSendReceivedMessageToVrc = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentEnableSendReceivedMessageToVrc, updateEnableSendReceivedMessageToVrc, pendingEnableSendReceivedMessageToVrc } = useStore_EnableSendReceivedMessageToVrc();
+
+    const getEnableSendReceivedMessageToVrc = () => {
+        pendingEnableSendReceivedMessageToVrc();
+        asyncStdoutToPython("/get/data/send_received_message_to_vrc");
+    };
+
+    const toggleEnableSendReceivedMessageToVrc = () => {
+        pendingEnableSendReceivedMessageToVrc();
+        if (currentEnableSendReceivedMessageToVrc.data) {
+            asyncStdoutToPython("/set/disable/send_received_message_to_vrc");
+        } else {
+            asyncStdoutToPython("/set/enable/send_received_message_to_vrc");
+        }
+    };
+
+    return {
+        currentEnableSendReceivedMessageToVrc,
+        getEnableSendReceivedMessageToVrc,
+        toggleEnableSendReceivedMessageToVrc,
+        updateEnableSendReceivedMessageToVrc,
+    };
+};

src-ui/logics/useReceiveRoutes.js

@@ -32,6 +32,7 @@ import {
     useEnableAutoExportMessageLogs,
     useEnableVrcMicMuteSync,
     useEnableSendMessageToVrc,
+    useEnableSendReceivedMessageToVrc,
     useSelectedFontFamily,
     useUiLanguage,
     useUiScaling,
@@ -97,6 +98,7 @@ export const useReceiveRoutes = () => {
     const { updateEnableAutoExportMessageLogs } = useEnableAutoExportMessageLogs();
     const { updateEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
     const { updateEnableSendMessageToVrc } = useEnableSendMessageToVrc();
+    const { updateEnableSendReceivedMessageToVrc } = useEnableSendReceivedMessageToVrc();
 
     const { updateSendMessageButtonType } = useSendMessageButtonType();
     const { updateUiLanguage } = useUiLanguage();
@@ -396,6 +398,10 @@ export const useReceiveRoutes = () => {
         "/set/enable/send_message_to_vrc": updateEnableSendMessageToVrc,
         "/set/disable/send_message_to_vrc": updateEnableSendMessageToVrc,
 
+        "/get/data/send_received_message_to_vrc": updateEnableSendReceivedMessageToVrc,
+        "/set/enable/send_received_message_to_vrc": updateEnableSendReceivedMessageToVrc,
+        "/set/disable/send_received_message_to_vrc": updateEnableSendReceivedMessageToVrc,
+
         // Advanced Settings
         "/get/data/osc_ip_address": updateOscIpAddress,
         "/set/data/osc_ip_address": updateOscIpAddress,

src-ui/store.js

@@ -227,6 +227,7 @@ export const { atomInstance: Atom_EnableSendOnlyTranslatedMessages, useHook: use
 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");
+export const { atomInstance: Atom_EnableSendReceivedMessageToVrc, useHook: useStore_EnableSendReceivedMessageToVrc } = createAtomWithHook(false, "EnableSendReceivedMessageToVrc");
 
 // Advanced Settings
 export const { atomInstance: Atom_OscIpAddress, useHook: useStore_OscIpAddress } = createAtomWithHook("127.0.0.1", "OscIpAddress");