[Update] Config Window: MessageFormat. Sync the data between message format and UI components.

src-ui/store.js

@@ -112,6 +112,28 @@ export const { atomInstance: Atom_SelectedMicDeviceStatus, useHook: useSelectedM
 
 export const { atomInstance: Atom_MicDeviceListStatus, useHook: useMicDeviceListStatus } = createAtomWithHook(test_device_list, "MicDeviceListStatus");
 
+export const { atomInstance: Atom_SendMessageFormat, useHook: useSendMessageFormat } = createAtomWithHook({
+    before: "",
+    after: "",
+}, "SendMessageFormat");
+export const { atomInstance: Atom_SendMessageFormatWithT, useHook: useSendMessageFormatWithT } = createAtomWithHook({
+    before: "",
+    between: "",
+    after: "",
+    is_message_first: true,
+}, "SendMessageFormatWithT");
+export const { atomInstance: Atom_ReceivedMessageFormat, useHook: useReceivedMessageFormat } = createAtomWithHook({
+    before: "",
+    after: "",
+}, "ReceivedMessageFormat");
+export const { atomInstance: Atom_ReceivedMessageFormatWithT, useHook: useReceivedMessageFormatWithT } = createAtomWithHook({
+    before: "",
+    between: "",
+    after: "",
+    is_message_first: true,
+}, "ReceivedMessageFormatWithT");
+
+
 export const { atomInstance: Atom_TranslatorListStatus, useHook: useTranslatorListStatus } = createAtomWithHook(translator_list, "TranslatorListStatus");
 export const { atomInstance: Atom_SelectedTranslatorIdStatus, useHook: useSelectedTranslatorIdStatus } = createAtomWithHook("CTranslate2", "SelectedTranslatorIdStatus");
 export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useIsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");

src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx

@@ -46,9 +46,16 @@ export const Appearance = () => {
 
             <DeeplAuthKeyContainer label={t(`config_window.deepl_auth_key.label`)} desc={t(`config_window.deepl_auth_key.desc`)}/>
 
-            <MessageFormatContainer label={t(`config_window.send_message_format.label`)} desc={t(`config_window.send_message_format.desc`)}/>
 
-            <MessageFormatContainer label={t(`config_window.send_message_format_with_t.label`)} desc={t(`config_window.send_message_format_with_t.desc`)} with_t={true}/>
+            <MessageFormatContainer label={t(`config_window.send_message_format.label`)} desc={t(`config_window.send_message_format.desc`)} id="send"/>
+
+            <MessageFormatContainer label={t(`config_window.send_message_format_with_t.label`)} desc={t(`config_window.send_message_format_with_t.desc`)} id="send_with_t"/>
+
+
+            <MessageFormatContainer label={t(`config_window.send_message_format.label`)} desc={t(`config_window.send_message_format.desc`)} id="received"/>
+
+            <MessageFormatContainer label={t(`config_window.send_message_format_with_t.label`)} desc={t(`config_window.send_message_format_with_t.desc`)} id="received_with_t"/>
+
         </>
     );
 };

src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.jsx

@@ -1,36 +1,69 @@
 import styles from "./MessageFormat.module.scss";
 import { useTranslation } from "react-i18next";
+import {
+    useUiLanguageStatus,
+    useSendMessageFormat,
+    useSendMessageFormatWithT,
+    useReceivedMessageFormat,
+    useReceivedMessageFormatWithT,
+} from "@store";
+import { _Entry } from "../_atoms/_Entry";
+import SwapImg from "@images/swap_icon.png";
 
 export const MessageFormat = (props) => {
+    const { currentSendMessageFormat, updateSendMessageFormat } = useSendMessageFormat();
+    const { currentSendMessageFormatWithT, updateSendMessageFormatWithT } = useSendMessageFormatWithT();
+    const { currentReceivedMessageFormat, updateReceivedMessageFormat } = useReceivedMessageFormat();
+    const { currentReceivedMessageFormatWithT, updateReceivedMessageFormatWithT } = useReceivedMessageFormatWithT();
+
+    let atoms = [];
+    switch (props.id) {
+        case "send":
+            atoms = [currentSendMessageFormat, updateSendMessageFormat];
+            break;
+
+        case "send_with_t":
+            atoms = [currentSendMessageFormatWithT, updateSendMessageFormatWithT];
+            break;
+
+        case "received":
+            atoms = [currentReceivedMessageFormat, updateReceivedMessageFormat];
+            break;
+
+        case "received_with_t":
+            atoms = [currentReceivedMessageFormatWithT, updateReceivedMessageFormatWithT];
+            break;
+
+        default:
+            break;
+    }
 
     return (
         <div className={styles.container}>
-            <ExampleComponent {...props}/>
+            <ExampleComponent {...props} current_format={atoms[0]} />
-            <InputComponent {...props}/>
+            <InputComponent {...props} atoms={atoms} />
-            {
+            {["send_with_t", "received_with_t"].includes(props.id) && <SwapButton atoms={atoms} />}
-                props.with_t === true
-                ? <SwapButton/>
-                : null
-            }
         </div>
     );
 };
 
-import { useUiLanguageStatus } from "@store";
+const ExampleComponent = ({ id, current_format }) => {
-
-const ExampleComponent = (props) => {
     const { t } = useTranslation();
     const { currentUiLanguageStatus } = useUiLanguageStatus();
 
     const createExampleMessage = () => {
-        const original_lang_message = t("config_window.send_message_format.example_text");
+        const originalLangMessage = t("config_window.send_message_format.example_text");
+        let format = current_format;
 
-        if (props.with_t === true) {
+        if (["send_with_t", "received_with_t"].includes(id)) {
-            const translation_locale = currentUiLanguageStatus === "en" ? "ja" : "en";
+            const translationLocale = currentUiLanguageStatus === "en" ? "ja" : "en";
-            const translated_lang_message = t("config_window.send_message_format.example_text", {lng: translation_locale});
+            const translatedLangMessage = t("config_window.send_message_format.example_text", { lng: translationLocale });
-            return original_lang_message + translated_lang_message;
+
+            return format.is_message_first
+                ? `${format.before}${originalLangMessage}${format.between}${translatedLangMessage}${format.after}`
+                : `${format.before}${translatedLangMessage}${format.between}${originalLangMessage}${format.after}`;
         } else {
-            return original_lang_message;
+            return `${format.before}${originalLangMessage}${format.after}`;
         }
     };
 
@@ -41,47 +74,107 @@ const ExampleComponent = (props) => {
     );
 };
 
+const InputComponent = ({ id, atoms }) => {
+    const [current, updater] = atoms;
 
-import { _Entry } from "../_atoms/_Entry";
+    const handleChange = (key) => (e) => {
-const InputComponent = (props) => {
+        updater({ ...current, [key]: e.target.value });
-    const { t } = useTranslation();
-
-    const onChangeInput = (e) => {
-        console.log(e.target.value);
     };
 
     return (
         <div className={styles.input_wrapper}>
-            <_Entry width="100%" onChange={onChangeInput} />
+            <_Entry width="100%" onChange={handleChange("before")} />
-            <p className={styles.preset_text}>[message]</p>
+            {["send_with_t", "received_with_t"].includes(id) ? (
-            <_Entry width="100%" onChange={onChangeInput} />
+                <>
-            {
+                    <p className={styles.preset_text}>{current.is_message_first ? "[message]" : "[translation]"}</p>
-                props.with_t
+                    <_Entry width="100%" onChange={handleChange("between")} />
-                ? (<>
+                    <p className={styles.preset_text}>{current.is_message_first ? "[translation]" : "[message]"}</p>
-                    <p className={styles.preset_text}>[translation]</p>
+                </>
-                    <_Entry width="100%" onChange={onChangeInput} />
+            ) : (
-                    </>)
+                <p className={styles.preset_text}>[message]</p>
-                : null
+            )}
-            }
+            <_Entry width="100%" onChange={handleChange("after")} />
         </div>
     );
 };
 
+const SwapButton = ({ atoms }) => {
+    const [current, updater] = atoms;
 
-import SwapImg from "@images/swap_icon.png";
-const SwapButton = () => {
     const swapMessageAndTranslate = () => {
-
+        updater({ ...current, is_message_first: !current.is_message_first });
     };
 
     return (
         <div className={styles.swap_button_container}>
             <div className={styles.swap_button_wrapper} onClick={swapMessageAndTranslate}>
-                <p className={styles.swap_text}>[message]</p>
+                <p className={styles.swap_text}>{current.is_message_first ? "[message]" : "[translation]"}</p>
-                <img className={styles.swap_img} src={SwapImg} />
+                <img className={styles.swap_img} src={SwapImg} alt="Swap Icon" />
-                <p className={styles.swap_text}>[translate]</p>
+                <p className={styles.swap_text}>{current.is_message_first ? "[translation]" : "[message]"}</p>
             </div>
         </div>
-
     );
-};
+};
+
+
+
+// const extractMessageFormat = (text) => {
+//     const split_result = text.split("[message]");
+//     let result_data = {
+//         before: split_result[0],
+//         after: split_result[1]
+//     };
+//     return result_data;
+// };
+
+
+
+
+// const extractMessageFormatWithT = (text) => {
+//     const message_index = text.indexOf("[message]");
+//     const translation_index = text.indexOf("[translation]");
+
+//     let result_data = {
+//         is_message_first: true,
+//         before: "",
+//         between: "",
+//         after: ""
+//     };
+
+//     if (message_index < translation_index) {
+//         const text_before_message = text.slice(0, message_index);
+//         result_data.before = text_before_message;
+
+//         const match = text.match(/\[message\](.*?)\[translation\]/);
+//         if (match) {
+//             const extracted_text = match[1];
+//             result_data.between = extracted_text;
+//         } else {
+//             throw new Error("Invalid Message Format");
+//         }
+
+//         const text_after_translation = text.slice(translation_index + "[translation]".length);
+//         result_data.after = text_after_translation;
+
+//     } else if (translation_index < message_index) {
+//         result_data.is_message_first = false;
+//         const text_before_translation = text.slice(0, translation_index);
+//         result_data.before = text_before_translation;
+
+//         const match = text.match(/\[translation\](.*?)\[message\]/);
+//         if (match) {
+//             const extracted_text = match[1];
+//             result_data.between = extracted_text;
+//         } else {
+//             throw new Error("Invalid Message Format");
+//         }
+
+//         const text_after_message = text.slice(message_index + "[message]".length);
+//         result_data.after = text_after_message;
+
+//     } else {
+//         throw new Error("Invalid Message Format");
+//     }
+
+//     return result_data;
+// };