Merge branch 'ui' into for_webui

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

@@ -5,6 +5,7 @@ export { DropdownMenu } from "./dropdown_menu/DropdownMenu";
 export { Entry } from "./entry/Entry";
 export { LabelComponent } from "./label_component/LabelComponent";
 export { RadioButton } from "./radio_button/RadioButton";
+export { SectionLabelComponent } from "./section_label_component/SectionLabelComponent";
 export { Slider } from "./slider/Slider";
 export { SwitchBox } from "./switch_box/SwitchBox";
 export { ThresholdComponent } from "./threshold_component/ThresholdComponent";

src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.jsx

@@ -0,0 +1,11 @@
+import styles from "./SectionLabelComponent.module.scss";
+import clsx from "clsx";
+
+export const SectionLabelComponent = (props) => {
+    return (
+        <div className={styles.container}>
+            <label className={styles.section_label}>{props.label}</label>
+            <div className={styles.section_line}></div>
+        </div>
+    );
+};

src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.module.scss

@@ -0,0 +1,16 @@
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
+    padding-bottom: 2rem;
+}
+.section_label {
+    font-size: 2rem;
+    flex-shrink: 0;
+}
+.section_line {
+    width: 100%;
+    height: 0.1rem;
+    background: linear-gradient(90deg, var(--dark_400_color) 0%, var(--dark_600_color) 35%, var(--dark_800_color) 100%);
+}

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}
@@ -108,3 +116,18 @@ const SendMessageToVrcContainer = () => {
         />
     );
 };
+
+
+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/app/config_page/setting_section/setting_box/transcription/Transcription.jsx

@@ -24,25 +24,30 @@ import {
     RadioButtonContainer,
 } from "../_templates/Templates";
 
+import {
+    SectionLabelComponent,
+} from "../_components/";
+
 export const Transcription = () => {
     return (
-        <>
+        <div className={styles.container}>
             <Mic_Container />
             <Speaker_Container />
             <TranscriptionEngine_Container />
-        </>
+        </div>
     );
 };
 
 
 const Mic_Container = () => {
     return (
-        <>
+        <div>
+            <SectionLabelComponent label="Mic" />
             <MicRecordTimeout_Box />
             <MicPhraseTimeout_Box />
             <MicMaxWords_Box />
             <MicWordFilter_Box />
-        </>
+        </div>
     );
 };
 
@@ -144,11 +149,12 @@ const MicWordFilter_Box = () => {
 
 const Speaker_Container = () => {
     return (
-        <>
+        <div>
+            <SectionLabelComponent label="Speaker" />
             <SpeakerRecordTimeout_Box />
             <SpeakerPhraseTimeout_Box />
             <SpeakerMaxWords_Box />
-        </>
+        </div>
     );
 };
 
@@ -238,10 +244,11 @@ const SpeakerMaxWords_Box = () => {
 
 const TranscriptionEngine_Container = () => {
     return (
-        <>
+        <div>
+            <SectionLabelComponent label="Transcription Engines" />
             <TranscriptionEngine_Box />
             <WhisperWeightType_Box />
-        </>
+        </div>
     );
 };
 

src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss

@@ -0,0 +1,5 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 6.4rem;
+}

src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx

@@ -1,8 +1,10 @@
 import { useTranslation } from "react-i18next";
 import styles from "./RightSideComponents.module.scss";
+import RefreshSvg from "@images/refresh.svg?react";
 import HelpSvg from "@images/help.svg?react";
 
 import { useStore_OpenedQuickSetting } from "@store";
+import { useIsSoftwareUpdateAvailable } from "@logics_common";
 import { useIsEnabledOverlaySmallLog, useEnableVrcMicMuteSync } from "@logics_configs";
 import { OpenQuickSettingButton } from "./_buttons/OpenQuickSettingButton";
 
@@ -11,6 +13,7 @@ export const RightSideComponents = () => {
         <div className={styles.container}>
             <OpenVrcMicMuteSyncQuickSetting />
             <OpenOverlayQuickSetting />
+            <SoftwareUpdateAvailableButton />
             <a
             className={styles.help_and_info_button}
             href="https://mzsoftware.notion.site/VRCT-Documents-be79b7a165f64442ad8f326d86c22246"
@@ -58,3 +61,16 @@ const OpenVrcMicMuteSyncQuickSetting = () => {
         />
     );
 };
+
+const SoftwareUpdateAvailableButton = () => {
+    const { currentIsSoftwareUpdateAvailable } = useIsSoftwareUpdateAvailable();
+    const { t } = useTranslation();
+    if (currentIsSoftwareUpdateAvailable.data === false) return null;
+
+    return (
+        <button className={styles.software_update_button}>
+            <RefreshSvg className={styles.refresh_svg}/>
+            <p className={styles.software_update_label}>{t("main_page.update_available")}</p>
+        </button>
+    );
+};

src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.module.scss

@@ -22,3 +22,28 @@
     width: 2.4rem;
     color: var(--dark_400_color);
 }
+
+.software_update_button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.4rem;
+    color: var(--primary_300_color);
+    padding: 1rem 0.4rem;
+    cursor: pointer;
+    &:hover {
+        background-color: var(--dark_800_color);
+    }
+    &:active {
+        background-color: var(--dark_900_color);
+    }
+}
+
+.refresh_svg {
+    width: 1.8rem;
+    transform: rotate(-30deg);
+}
+
+.software_update_label {
+    font-size: 1.2rem;
+}

src-ui/assets/refresh.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.944 12.979c-.489 4.509-4.306 8.021-8.944 8.021-2.698 0-5.112-1.194-6.763-3.075l1.245-1.633c1.283 1.645 3.276 2.708 5.518 2.708 3.526 0 6.444-2.624 6.923-6.021h-2.923l4-5.25 4 5.25h-3.056zm-15.864-1.979c.487-3.387 3.4-6 6.92-6 2.237 0 4.228 1.059 5.51 2.698l1.244-1.632c-1.65-1.876-4.061-3.066-6.754-3.066-4.632 0-8.443 3.501-8.941 8h-3.059l4 5.25 4-5.25h-2.92z"/></svg>

src-ui/logics/common/index.js

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

src-ui/logics/common/useIsSoftwareUpdateAvailable.js

@@ -0,0 +1,10 @@
+import { useStore_IsSoftwareUpdateAvailable } from "@store";
+
+export const useIsSoftwareUpdateAvailable = () => {
+    const { currentIsSoftwareUpdateAvailable, updateIsSoftwareUpdateAvailable } = useStore_IsSoftwareUpdateAvailable();
+
+    return {
+        currentIsSoftwareUpdateAvailable,
+        updateIsSoftwareUpdateAvailable,
+    };
+};

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

@@ -5,6 +5,7 @@ import {
     useWindow,
     useMessage,
     useVolume,
+    useIsSoftwareUpdateAvailable,
 } from "@logics_common";
 
 import {
@@ -32,6 +33,7 @@ import {
     useEnableAutoExportMessageLogs,
     useEnableVrcMicMuteSync,
     useEnableSendMessageToVrc,
+    useEnableSendReceivedMessageToVrc,
     useSelectedFontFamily,
     useUiLanguage,
     useUiScaling,
@@ -80,6 +82,7 @@ export const useReceiveRoutes = () => {
         addSentMessageLog,
         addReceivedMessageLog,
     } = useMessage();
+    const { updateIsSoftwareUpdateAvailable } = useIsSoftwareUpdateAvailable();
     const { updateSoftwareVersion } = useSoftwareVersion();
     const { updateEnableAutoMicSelect } = useEnableAutoMicSelect();
     const { updateEnableAutoSpeakerSelect } = useEnableAutoSpeakerSelect();
@@ -97,6 +100,7 @@ export const useReceiveRoutes = () => {
     const { updateEnableAutoExportMessageLogs } = useEnableAutoExportMessageLogs();
     const { updateEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
     const { updateEnableSendMessageToVrc } = useEnableSendMessageToVrc();
+    const { updateEnableSendReceivedMessageToVrc } = useEnableSendReceivedMessageToVrc();
 
     const { updateSendMessageButtonType } = useSendMessageButtonType();
     const { updateUiLanguage } = useUiLanguage();
@@ -152,6 +156,7 @@ export const useReceiveRoutes = () => {
         "/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"),
+        "/run/update_software_flag": updateIsSoftwareUpdateAvailable,
 
         // Main Page
         // Page Controls
@@ -396,6 +401,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,
@@ -421,7 +430,7 @@ export const useReceiveRoutes = () => {
         const initDataSyncProcess = (payload) => {
             for (const [endpoint, value] of Object.entries(payload)) {
                 const route = routes[endpoint];
-                (route) ? route(value) : console.error(`Invalid endpoint: ${endpoint}\vvalue: ${JSON.stringify(value)}`);
+                (route) ? route(value) : console.error(`Invalid endpoint: ${endpoint}\nvalue: ${JSON.stringify(value)}`);
             }
         };
 

src-ui/store.js

@@ -108,6 +108,7 @@ export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_Ma
     transcription_receive: false,
 }, "MainFunctionsStateMemory");
 export const { atomInstance: Atom_OpenedQuickSetting, useHook: useStore_OpenedQuickSetting } = createAtomWithHook("", "OpenedQuickSetting");
+export const { atomInstance: Atom_IsSoftwareUpdateAvailable, useHook: useStore_IsSoftwareUpdateAvailable } = createAtomWithHook(false, "IsSoftwareUpdateAvailable");
 
 // Main Page
 // Functions
@@ -227,6 +228,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");