[Update] Config Page: MessageFormat: Add ui, message format.

2025-08-26 17:27:05 +09:00
parent e6bd0e32ed
commit 21e4714658
18 changed files with 784 additions and 46 deletions
--- a/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx
@@ -21,11 +21,11 @@ const _Entry = forwardRef((props, ref) => {
    });

    return (
-        <div className={styles.entry_container}>
-            <div
-                className={input_wrapper_class_names}
-                style={{width: props.width || "20rem" }}
-            >
+        <div
+            className={styles.entry_container}
+            style={{width: props.width || "100%" }}
+        >
+            <div className={input_wrapper_class_names}>
                <input
                    ref={inputRef}
                    text={props.text ? props.text : "text"}
--- a/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss
@@ -3,7 +3,6 @@
 }

 .entry_wrapper {
-    width: 10rem;
    height: 100%;
    padding: 0.6rem;
    background-color: var(--dark_875_color);
@@ -19,6 +18,7 @@
    height: 100%;
    font-size: 1.4rem;
    resize: none;
+    font-family: Arial, sans-serif;
    &.is_disabled {
        color: var(--dark_500_color);
        pointer-events: none;
--- a/src-ui/app/config_page/setting_section/setting_box/_components/index.js
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/index.js
@@ -12,4 +12,5 @@ export { Slider } from "./slider/Slider";
 export { SwitchBox } from "./switch_box/SwitchBox";
 export { ThresholdComponent } from "./threshold_component/ThresholdComponent";
 export { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter";
-export { DownloadModels } from "./download_models/DownloadModels";
+export { DownloadModels } from "./download_models/DownloadModels";
+export { MessageFormat } from "./message_format/MessageFormat";
--- a/src-ui/app/config_page/setting_section/setting_box/_components/message_format/MessageFormat.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/message_format/MessageFormat.jsx
@@ -0,0 +1,295 @@
+import styles from "./MessageFormat.module.scss";
+import { useTranslation } from "react-i18next";
+import { _Entry } from "../_atoms/_entry/_Entry";
+import SwapImg from "@images/swap_icon.png";
+import ArrowLeftSvg from "@images/arrow_left.svg?react";
+import { useStore_IsBreakPoint } from "@store";
+import { useAppearance } from "@logics_configs";
+import { ui_configs } from "@ui_configs";
+import { ResetButton } from "@common_components";
+
+const ENTRY_WIDTH = "8rem";
+
+const EXAMPLE_TEXTS = {
+    en: "Hello",
+    ja: "こんにちは",
+    ko: "안녕하세요",
+    fr: "Bonjour",
+};
+
+export const MessageFormat = (props) => {
+    const { currentIsBreakPoint } = useStore_IsBreakPoint();
+    const message_format_container_class = clsx(styles.container, {
+        [styles.is_break_point]: currentIsBreakPoint.data,
+    });
+
+    return (
+        <div className={message_format_container_class}>
+            <ExampleComponent
+                format={props.variable.data}
+                example_view_filter_variable={props.example_view_filter_variable}
+                exampleViewFilterToggleFunction={props.exampleViewFilterToggleFunction}
+                format_id={props.format_id}
+            />
+            <div className={styles.border}></div>
+            <InputComponent
+                variable={props.variable.data}
+                setFunction={props.setFunction}
+                format_id={props.format_id}
+            />
+        </div>
+    );
+};
+
+const ExampleComponent = ({ format, example_view_filter_variable, exampleViewFilterToggleFunction, format_id }) => {
+    const { currentUiLanguage } = useAppearance();
+    const { t } = useTranslation();
+
+
+    const locale_base_path = "config_page.others.message_format_common.example_view.";
+
+    const label_title = t(locale_base_path + "title");
+
+    const label_original_translated = t(locale_base_path + "original_translated");
+    const label_original_translated_multi = t(locale_base_path + "original_translated_multi");
+    const label_translated_only_multi = t(locale_base_path + "translated_only_multi");
+    const label_translated_only = t(locale_base_path + "translated_only");
+    const label_original_only = t(locale_base_path + "original_only");
+
+    const createExampleMessage = (id) => {
+        // 言語順序を決定
+        let example_text_order = [];
+        switch (currentUiLanguage.data) {
+            case "ja":
+                example_text_order = ["ja", "en", "ko", "fr"];
+                break;
+            case "ko":
+                example_text_order = ["ko", "ja", "en", "fr"];
+                break;
+            default: // en
+                example_text_order = ["en", "ja", "ko", "fr"];
+                break;
+        }
+
+        const original = EXAMPLE_TEXTS[example_text_order[0]];
+        const translations = example_text_order.slice(1).map(lang => EXAMPLE_TEXTS[lang]);
+
+        const originalPart = `${format.message.prefix}${original}${format.message.suffix}`;
+        const translationSingle = `${format.translation.prefix}${translations[0]}${format.translation.suffix}`;
+        const translationMulti = `${format.translation.prefix}${translations.join(format.translation.separator)}${format.translation.suffix}`;
+
+        switch (id) {
+            case "original_translated":
+                return format.translation_first
+                    ? `${translationSingle}${format.separator}${originalPart}`
+                    : `${originalPart}${format.separator}${translationSingle}`;
+
+            case "original_only":
+                return originalPart;
+
+            case "translated_only":
+                return translationSingle;
+
+            case "translated_only_multi":
+                return translationMulti;
+
+            case "original_translated_multi":
+                return format.translation_first
+                    ? `${translationMulti}${format.separator}${originalPart}`
+                    : `${originalPart}${format.separator}${translationMulti}`;
+
+            default:
+                throw new Error(`Unexpected id: ${id}`);
+        }
+    };
+
+    const ExampleBox = ({label, example_text_id}) => {
+        return (
+            <div className={styles.example_wrapper}>
+                <p className={styles.example_label}>{label}</p>
+                <div className={styles.example_chatbox}>
+                    <p className={styles.example_text}>{createExampleMessage(example_text_id)}</p>
+                </div>
+            </div>
+        );
+
+    };
+
+    const svg_class_names = clsx(styles.arrow_left_svg, {
+        [styles.to_down]: example_view_filter_variable[format_id] === "Simplified",
+        [styles.to_up]: example_view_filter_variable[format_id] === "All"
+    });
+
+
+    const FilteredExampleBox = ({format_id, id}) => {
+        if (format_id === "send" && id === "Simplified") {
+            return (
+                <>
+                    <ExampleBox label={label_original_translated} example_text_id="original_translated" />
+                    <ExampleBox label={label_original_translated_multi} example_text_id="original_translated_multi" />
+                </>
+            );
+        } else if ( format_id === "send" && id === "All") {
+            return (
+                <>
+                    <ExampleBox label={label_original_translated} example_text_id="original_translated" />
+                    <ExampleBox label={label_original_translated_multi} example_text_id="original_translated_multi" />
+                    <ExampleBox label={label_translated_only_multi} example_text_id="translated_only_multi" />
+                    <ExampleBox label={label_translated_only} example_text_id="translated_only" />
+                    <ExampleBox label={label_original_only} example_text_id="original_only" />
+                </>
+            );
+
+        } else if (format_id === "received") {
+            return (
+                <>
+                    <ExampleBox label={label_original_translated} example_text_id="original_translated" />
+                    <ExampleBox label={label_original_only} example_text_id="original_only" />
+                    <ExampleBox label={label_translated_only} example_text_id="translated_only" />
+                </>
+            );
+        }
+    };
+
+
+    return (
+        <div className={styles.example_container}>
+            <p className={styles.section_title}>{label_title}</p>
+            <div className={styles.example_view_container}>
+                <FilteredExampleBox format_id={format_id} id={example_view_filter_variable[format_id]} />
+            </div>
+            { format_id === "send" &&
+                <div className={styles.show_more_container} onClick={() => exampleViewFilterToggleFunction(format_id)}>
+                    <ArrowLeftSvg className={svg_class_names}/>
+                </div>
+            }
+        </div>
+    );
+};
+
+
+const InputComponent = ({id, variable, setFunction, format_id }) => {
+    const { t } = useTranslation();
+
+    const locale_base_path = "config_page.others.message_format_common.settings.";
+    const label_title = t(locale_base_path + "title");
+
+    const LABEL_ORIGINAL = t(locale_base_path + "original");
+    const LABEL_TRANSLATED = t(locale_base_path + "translated");
+    const LABEL_FOR_MULTI_TRANSLATION = t(locale_base_path + "for_multi_translation");
+
+    const replaceValue = (value) => {
+        if (value === "") return "";
+
+        const replaced = value.replace(/\\n/g, "\n");
+        return replaced;
+    };
+
+    const handleChange = (parent_key, child_key) => (e) => {
+        const rawValue = e.target.value;
+        const parsedValue = replaceValue(rawValue);
+
+        if (child_key !== undefined) {
+            setFunction({
+                ...variable,
+                [parent_key]: {
+                    ...variable[parent_key],
+                    [child_key]: parsedValue
+                }
+            });
+        } else {
+            setFunction({
+                ...variable,
+                [parent_key]: parsedValue
+            });
+        }
+    };
+
+    const toUiValue = (v) => {
+        if (typeof v === "string") {
+            return v.replace(/\n/g, "\\n");
+        }
+        console.log("Empty");
+
+        return v ?? "";
+    };
+
+    const resetFunction = () => {
+        if (format_id === "send") {
+            setFunction(ui_configs.send_message_format_parts);
+        } else if (format_id === "received") {
+            setFunction(ui_configs.received_message_format_parts);
+        }
+    };
+
+    const SwapButton = ({ variable, setFunction }) => {
+        const swapMessageAndTranslate = () => {
+            setFunction({ ...variable, translation_first: !variable.translation_first });
+        };
+
+        return (
+            <div className={styles.swap_button_wrapper} onClick={swapMessageAndTranslate}>
+                <p className={styles.swap_text}>{variable.translation_first ? LABEL_TRANSLATED : LABEL_ORIGINAL}</p>
+                <img className={styles.swap_img} src={SwapImg} alt="Swap Icon" />
+                <p className={styles.swap_text}>{variable.translation_first ? LABEL_ORIGINAL : LABEL_TRANSLATED}</p>
+            </div>
+        );
+    };
+
+    return (
+        <div className={styles.message_format_settings_container}>
+            <p className={styles.section_title}>{label_title}</p>
+            <div className={styles.message_format_settings_wrapper}>
+                <div className={styles.swap_button_container}>
+                    <SwapButton variable={variable} setFunction={setFunction} />
+                </div>
+                { !variable.translation_first ?
+                <div className={styles.input_wrapper}>
+                    <div className={styles.input_contents}>
+                        <_Entry ui_variable={toUiValue(variable.message.prefix)} width={ENTRY_WIDTH} onChange={handleChange("message", "prefix")} />
+                        <p className={styles.preset_text}>{LABEL_ORIGINAL}</p>
+                        <_Entry ui_variable={toUiValue(variable.message.suffix)} width={ENTRY_WIDTH} onChange={handleChange("message", "suffix")} />
+                    </div>
+                    <div className={styles.input_contents}>
+                        <_Entry ui_variable={toUiValue(variable.separator)} width={ENTRY_WIDTH} onChange={handleChange("separator")} />
+                    </div>
+                    <div className={styles.input_contents}>
+                        <_Entry ui_variable={toUiValue(variable.translation.prefix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "prefix")} />
+                        <p className={styles.preset_text}>{LABEL_TRANSLATED}</p>
+                        <_Entry ui_variable={toUiValue(variable.translation.suffix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "suffix")} />
+                    </div>
+                </div>
+                :
+                <div className={styles.input_wrapper}>
+                    <div className={styles.input_contents}>
+                        <_Entry ui_variable={toUiValue(variable.translation.prefix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "prefix")} />
+                        <p className={styles.preset_text}>{LABEL_TRANSLATED}</p>
+                        <_Entry ui_variable={toUiValue(variable.translation.suffix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "suffix")} />
+                    </div>
+                    <div className={styles.input_contents}>
+                        <_Entry ui_variable={toUiValue(variable.separator)} width={ENTRY_WIDTH} onChange={handleChange("separator")} />
+                    </div>
+                    <div className={styles.input_contents}>
+                        <_Entry ui_variable={toUiValue(variable.message.prefix)} width={ENTRY_WIDTH} onChange={handleChange("message", "prefix")} />
+                        <p className={styles.preset_text}>{LABEL_ORIGINAL}</p>
+                        <_Entry ui_variable={toUiValue(variable.message.suffix)} width={ENTRY_WIDTH} onChange={handleChange("message", "suffix")} />
+                    </div>
+                </div>
+                }
+                { format_id === "send" &&
+                    <div className={styles.multi_translation_input_wrapper}>
+                        <p className={styles.multi_translation_title}>{LABEL_FOR_MULTI_TRANSLATION}</p>
+                        <div className={styles.input_contents}>
+                            <p className={styles.preset_text}>{LABEL_TRANSLATED}</p>
+                            <_Entry ui_variable={toUiValue(variable.translation.separator)} width={ENTRY_WIDTH} onChange={handleChange("translation", "separator")} />
+                            <p className={styles.preset_text}>{LABEL_TRANSLATED}</p>
+                        </div>
+                    </div>
+                }
+                <div className={styles.reset_button_wrapper}>
+                    <ResetButton onClickFunction={resetFunction}/>
+                </div>
+            </div>
+        </div>
+    );
+};
--- a/src-ui/app/config_page/setting_section/setting_box/_components/message_format/MessageFormat.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/message_format/MessageFormat.module.scss
@@ -0,0 +1,200 @@
+.container {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    gap: 2.6rem;
+    padding-bottom: 2rem;
+    margin: 1rem 0;
+    &.is_break_point {
+        flex-direction: column;
+        gap: 2.2rem;
+        align-items: center;
+        .border {
+            height: 0.1rem;
+            width: 60%;
+            margin: 0;
+            flex-shrink: 0;
+        }
+        .show_more_container {
+            margin-top: 2rem;
+        }
+        .example_container {
+            gap: 0;
+        }
+        .message_format_settings_container {
+            gap: 0;
+        }
+    }
+}
+
+.border {
+    height: auto;
+    width: 0.1rem;
+    background-color: var(--dark_800_color);
+    margin: 3.2rem 0;
+    flex-shrink: 0;
+}
+
+.section_title {
+    font-size: 1.4rem;
+    text-align: center;
+    width: 100%;
+}
+
+.example_container {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    min-width: 14rem;
+    max-width: 34rem;
+    width: 100%;
+}
+
+.example_view_container {
+    display: flex;
+    flex-direction: column;
+    gap: 1.2rem;
+}
+
+.example_wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.4rem;
+}
+.example_label {
+    font-size: 1.4rem;
+    text-align: start;
+    width: 100%;
+    color: var(--dark_basic_text_color);
+}
+.example_chatbox {
+    padding: 0.6rem;
+    background-color: #3A4554;
+    border-radius: 1rem;
+    width: 100%;
+    text-align: center;
+}
+
+.example_text {
+    font-size: 1.2rem;
+}
+
+.show_more_container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.6rem 0;
+    cursor: pointer;
+    border-radius: 0.6rem;
+    &:hover {
+        background-color: var(--dark_850_color);
+    }
+    &:active {
+        background-color: var(--dark_875_color);
+    }
+}
+
+.arrow_left_svg {
+    width: 2rem;
+    color: var(--dark_450_color);
+    &.to_down {
+        transform: rotate(-90deg);
+    }
+    &.to_up {
+        transform: rotate(90deg);
+    }
+}
+
+.message_format_settings_container {
+    flex-direction: column;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: 2rem;
+}
+
+.message_format_settings_wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 3.8rem;
+    width: 34rem;
+    flex-shrink: 0;
+}
+
+.swap_button_container {
+    width: 100%;
+    display: flex;
+    justify-content: end;
+}
+
+.swap_button_wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.8rem;
+    padding: 0.6rem 1.2rem;
+    border-radius: 0.4rem;
+    background-color: var(--dark_850_color);
+    cursor: pointer;
+    &:hover {
+        background-color: var(--dark_800_color);
+    }
+    &:active {
+        background-color: var(--dark_900_color);
+    }
+}
+
+.swap_text {
+    font-size: 1.4rem;
+}
+
+.swap_img {
+    width: 2rem;
+}
+
+
+.input_wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1.8rem;
+}
+
+.input_contents {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    color: var(--dark_basic_text_color);
+}
+
+.preset_text {
+    font-size: 1.6rem;
+    text-align: center;
+    flex-shrink: 0;
+    color: var(--dark_basic_text_color);
+}
+
+.multi_translation_input_wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    justify-content: center;
+    color: var(--dark_basic_text_color);
+}
+
+.multi_translation_title {
+    font-size: 1.2rem;
+}
+
+.reset_button_wrapper {
+    width: 100%;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+}
--- a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
@@ -18,6 +18,7 @@ import {
    WordFilter,
    WordFilterListToggleComponent,
    DownloadModels,
+    MessageFormat,
 } from "../_components/";
 import { Checkbox } from "@common_components";

@@ -129,4 +130,17 @@ export const WordFilterContainer = (props) => (

 export const DownloadModelsContainer = (props) => (
    <CommonContainer Component={DownloadModels} {...props} />
-);
+);
+
+export const MessageFormatContainer = (props) => {
+    return (
+        <div className={clsx(styles.container, styles.flex_column)}>
+            <div className={styles.label_only_section}>
+                <LabelComponent label={props.label} desc={props.desc} />
+            </div>
+            <div className={styles.message_format_section}>
+                <MessageFormat {...props}/>
+            </div>
+        </div>
+    );
+};
--- a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
@@ -8,6 +8,7 @@ import {

 import {
    CheckboxContainer,
+    MessageFormatContainer,
 } from "../_templates/Templates";

 import {
@@ -39,6 +40,11 @@ export const Others = () => {
                <SectionLabelComponent label="Speaker2Chatbox" />
                <SendReceivedMessageToVrcContainer />
            </div>
+            <div>
+                <SectionLabelComponent label={t("config_page.others.section_label_message_formats")} />
+                <SendMessageFormatPartsContainer />
+                <ReceivedMessageFormatPartsContainer />
+            </div>
        </div>
    );
 };
@@ -151,4 +157,48 @@ const SendReceivedMessageToVrcContainer = () => {
            toggleFunction={toggleEnableSendReceivedMessageToVrc}
        />
    );
+};
+
+const SendMessageFormatPartsContainer = () => {
+    const { t } = useI18n();
+    const {
+        currentSendMessageFormatParts,
+        setSendMessageFormatParts,
+        currentMessageFormat_ExampleViewFilter,
+        toggleMessageFormat_ExampleViewFilter,
+    } = useOthers();
+
+    return (
+        <MessageFormatContainer
+            label={t("config_page.others.send_message_format.label")}
+            desc={t("config_page.others.send_message_format.desc")}
+            variable={currentSendMessageFormatParts}
+            setFunction={setSendMessageFormatParts}
+            example_view_filter_variable={currentMessageFormat_ExampleViewFilter.data}
+            exampleViewFilterToggleFunction={toggleMessageFormat_ExampleViewFilter}
+            format_id="send"
+        />
+    );
+};
+
+const ReceivedMessageFormatPartsContainer = () => {
+    const { t } = useI18n();
+    const {
+        currentReceivedMessageFormatParts,
+        setReceivedMessageFormatParts,
+        currentMessageFormat_ExampleViewFilter,
+        toggleMessageFormat_ExampleViewFilter,
+    } = useOthers();
+
+    return (
+        <MessageFormatContainer
+            label={t("config_page.others.received_message_format.label")}
+            desc={t("config_page.others.received_message_format.desc")}
+            variable={currentReceivedMessageFormatParts}
+            setFunction={setReceivedMessageFormatParts}
+            example_view_filter_variable={currentMessageFormat_ExampleViewFilter.data}
+            exampleViewFilterToggleFunction={toggleMessageFormat_ExampleViewFilter}
+            format_id="received"
+        />
+    );
 };
--- a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
@@ -14,12 +14,12 @@ import {
    SectionLabelComponent,
 } from "../_components/";

+import { ResetButton } from "@common_components";
+
 import {
    useVr,
 } from "@logics_configs";

-import RedoSvg from "@images/redo.svg?react";
-
 import SquareSvg from "@images/square.svg?react";
 import TriangleSvg from "@images/triangle.svg?react";
 import { randomIntMinMax } from "@utils";
@@ -528,13 +528,6 @@ const CommonSettingsContainer = () => {
    );
 };

-const ResetButton = ({onClickFunction}) => {
-    return (
-        <button className={styles.slider_reset_button} onClick={onClickFunction}>
-            <RedoSvg className={styles.slider_reset_svg}/>
-        </button>
-    );
-};

 const SendSampleTextToggleButton = () => {
    const { t } = useI18n();
--- a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
@@ -301,34 +301,6 @@
    @include variable-button-wrapper(bottom, 50%, right, -60%, -45deg);
 }

-
-
-.slider_reset_button {
-    background-color: var(--dark_875_color);
-    padding: 0.6rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 0.4rem;
-    flex-shrink: 0;
-    &:hover {
-        background-color: var(--dark_825_color);
-        & .slider_reset_svg {
-            color: var(--dark_200_color);
-        }
-    }
-    &:active {
-        background-color: var(--dark_925_color);
-    }
-}
-
-.slider_reset_svg {
-    width: 1.4rem;
-    color: var(--dark_550_color);
-}
-
-
-
 .other_controls {
    margin-top: 6rem;
    display: flex;