[Remove] Remove MessageFormat.

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

@@ -16,7 +16,6 @@ export const Appearance = () => {
         // ThresholdContainer,
         // RadioButtonContainer,
         // DeeplAuthKeyContainer,
-        // MessageFormatContainer,
         // WordFilterContainer,
         // ActionButtonContainer,
     } = useSettingBox();
@@ -54,16 +53,6 @@ export const Appearance = () => {
 
             <DeeplAuthKeyContainer label={t(`config_page.deepl_auth_key.label`)} desc={t(`config_page.deepl_auth_key.desc`)}/>
 
-
-            <MessageFormatContainer label={t(`config_page.send_message_format.label`)} desc={t(`config_page.send_message_format.desc`)} id="send"/>
-
-            <MessageFormatContainer label={t(`config_page.send_message_format_with_t.label`)} desc={t(`config_page.send_message_format_with_t.desc`)} id="send_with_t"/>
-
-
-            <MessageFormatContainer label={t(`config_page.send_message_format.label`)} desc={t(`config_page.send_message_format.desc`)} id="received"/>
-
-            <MessageFormatContainer label={t(`config_page.send_message_format_with_t.label`)} desc={t(`config_page.send_message_format_with_t.desc`)} id="received_with_t"/>
-
             <WordFilterContainer label={t(`config_page.mic_word_filter.label`)} desc={t(`config_page.mic_word_filter.desc`)}/>
 
             <ActionButtonContainer label={t(`config_page.open_config_filepath.label`)} IconComponent={FolderOpenSvg} OnclickFunction={()=>{}}/> */}

src-ui/app/config_page/setting_section/setting_box/components/message_format/MessageFormat.jsx

@@ -1,180 +0,0 @@
-import styles from "./MessageFormat.module.scss";
-import { useTranslation } from "react-i18next";
-import {
-    useStore_UiLanguage,
-    useStore_SendMessageFormat,
-    useStore_SendMessageFormatWithT,
-    useStore_ReceivedMessageFormat,
-    useStore_ReceivedMessageFormatWithT,
-} from "@store";
-import { _Entry } from "../_atoms/_entry/_Entry";
-import SwapImg from "@images/swap_icon.png";
-
-export const MessageFormat = (props) => {
-    const { currentSendMessageFormat, updateSendMessageFormat } = useStore_SendMessageFormat();
-    const { currentSendMessageFormatWithT, updateSendMessageFormatWithT } = useStore_SendMessageFormatWithT();
-    const { currentReceivedMessageFormat, updateReceivedMessageFormat } = useStore_ReceivedMessageFormat();
-    const { currentReceivedMessageFormatWithT, updateReceivedMessageFormatWithT } = useStore_ReceivedMessageFormatWithT();
-
-    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} current_format={atoms[0]} />
-            <InputComponent {...props} atoms={atoms} />
-            {["send_with_t", "received_with_t"].includes(props.id) && <SwapButton atoms={atoms} />}
-        </div>
-    );
-};
-
-const ExampleComponent = ({ id, current_format }) => {
-    const { t } = useTranslation();
-    const { currentUiLanguage } = useStore_UiLanguage();
-
-    const createExampleMessage = () => {
-        const originalLangMessage = t("config_page.send_message_format.example_text");
-        let format = current_format;
-
-        if (["send_with_t", "received_with_t"].includes(id)) {
-            const translationLocale = currentUiLanguage.data === "en" ? "ja" : "en";
-            const translatedLangMessage = t("config_page.send_message_format.example_text", { lng: translationLocale });
-
-            return format.is_message_first
-                ? `${format.before}${originalLangMessage}${format.between}${translatedLangMessage}${format.after}`
-                : `${format.before}${translatedLangMessage}${format.between}${originalLangMessage}${format.after}`;
-        } else {
-            return `${format.before}${originalLangMessage}${format.after}`;
-        }
-    };
-
-    return (
-        <div className={styles.example_container}>
-            <p className={styles.example_text}>{createExampleMessage()}</p>
-        </div>
-    );
-};
-
-const InputComponent = ({ id, atoms }) => {
-    const [current, updater] = atoms;
-
-    const handleChange = (key) => (e) => {
-        updater({ ...current, [key]: e.target.value });
-    };
-
-    return (
-        <div className={styles.input_wrapper}>
-            <_Entry width="100%" onChange={handleChange("before")} />
-            {["send_with_t", "received_with_t"].includes(id) ? (
-                <>
-                    <p className={styles.preset_text}>{current.is_message_first ? "[message]" : "[translation]"}</p>
-                    <_Entry width="100%" onChange={handleChange("between")} />
-                    <p className={styles.preset_text}>{current.is_message_first ? "[translation]" : "[message]"}</p>
-                </>
-            ) : (
-                <p className={styles.preset_text}>[message]</p>
-            )}
-            <_Entry width="100%" onChange={handleChange("after")} />
-        </div>
-    );
-};
-
-const SwapButton = ({ atoms }) => {
-    const [current, updater] = atoms;
-
-    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}>{current.is_message_first ? "[message]" : "[translation]"}</p>
-                <img className={styles.swap_img} src={SwapImg} alt="Swap Icon" />
-                <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;
-// };

src-ui/app/config_page/setting_section/setting_box/components/message_format/MessageFormat.module.scss

@@ -1,65 +0,0 @@
-.container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    gap: 1.6rem;
-}
-
-.example_container {
-    padding: 1rem;
-    background-color: #3A4554;
-    border-radius: 1.4rem;
-    max-width: 30rem;
-    text-align: center;
-}
-
-.example_text {
-    font-size: 1.4rem;
-}
-
-.input_wrapper {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.preset_text {
-    font-size: 1.6rem;
-    width: 40rem;
-    text-align: center;
-}
-
-
-.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;
-}

src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx

@@ -8,10 +8,8 @@ import { Slider } from "./slider/Slider";
 import { Checkbox } from "./checkbox/Checkbox";
 import { Switchbox } from "./switchbox/Switchbox";
 import { Entry } from "./entry/Entry";
-import { ThresholdComponent } from "./threshold_component/ThresholdComponent";
 import { RadioButton } from "./radio_button/RadioButton";
 import { OpenWebpage_DeeplAuthKey, DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
-import { MessageFormat } from "./message_format/MessageFormat";
 import { ActionButton } from "./action_button/ActionButton";
 import { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter";
 
@@ -38,21 +36,6 @@ export const DropdownMenuContainer = (props) => {
 };
 
 
-// export const ThresholdContainer = (props) => {
-//     return (
-//         <div className={styles.threshold_container}>
-//             <div className={styles.threshold_switch_section}>
-//                 <LabelComponent label={props.label} desc={props.desc} />
-//                 <Switchbox {...props}/>
-//             </div>
-//             <div className={styles.threshold_section}>
-//                 <ThresholdComponent {...props}/>
-//             </div>
-//         </div>
-//     );
-// };
-
-
 export const useSettingBox = () => {
     const SliderContainer = (props) => {
         return (
@@ -111,21 +94,6 @@ export const useSettingBox = () => {
         );
     };
 
-
-    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>
-        );
-    };
-
-
     const ActionButtonContainer = (props) => {
         return (
             <div className={styles.container}>
@@ -159,7 +127,6 @@ export const useSettingBox = () => {
         EntryContainer,
         RadioButtonContainer,
         DeeplAuthKeyContainer,
-        MessageFormatContainer,
         WordFilterContainer,
         ActionButtonContainer,
     };

src-ui/store.js

@@ -27,76 +27,6 @@ const generatePropertyNames = (base_ame) => ({
     async_add: `asyncAdd${base_ame}`,
 });
 
-const createAtomWithHook = (initialValue, base_ame) => {
-    const property_names = generatePropertyNames(base_ame);
-    const atomInstance = atom(initialValue);
-
-    const useHook = () => {
-        const currentAtom = useAtomValue(atomInstance);
-        const setAtom = useSetAtom(atomInstance);
-
-        const updateAtom = (value) => {
-            setAtom(value);
-        };
-
-        const addAtom = (value) => {
-            setAtom((old_value) => [...old_value, value]);
-        };
-
-        return {
-            [property_names.current]: currentAtom,
-            [property_names.update]: updateAtom,
-            [property_names.add]: addAtom,
-        };
-    };
-
-    return { atomInstance, useHook };
-};
-
-import { loadable } from "jotai/utils";
-const createAsyncAtomWithHook = (initialValue, base_ame) => {
-    const property_names = generatePropertyNames(base_ame);
-    const atomInstance = atom(initialValue);
-    const asyncAtom = atom(async (get) => get(atomInstance));
-    const loadableAtom = loadable(asyncAtom);
-
-    const useHook = () => {
-        const asyncCurrentAtom = useAtomValue(loadableAtom);
-        const setAtom = useSetAtom(atomInstance);
-
-        const updateAtom = (value) => {
-            setAtom(value);
-        };
-
-        const asyncSetAtom = useSetAtom(atom(null, async (get, set, payloadAsyncFunc, ...args) => {
-            set(atomInstance, payloadAsyncFunc(...args));
-        }));
-
-        const asyncUpdateAtom = async (asyncFunction, ...args) => {
-            asyncSetAtom(asyncFunction, ...args);
-        };
-
-        const addAtom = (value) => {
-            setAtom((old_value) => [...old_value, value]);
-        };
-
-        const asyncAddAtom = useSetAtom(atom(null, async (get, set, payloadAsyncFunc, ...args) => {
-            const old_value = await get(atomInstance);
-            set(atomInstance, payloadAsyncFunc([...old_value, ...args]));
-        }));
-
-        return {
-            [property_names.current]: asyncCurrentAtom,
-            [property_names.update]: updateAtom,
-            [property_names.async_update]: asyncUpdateAtom,
-            [property_names.add]: addAtom,
-            [property_names.async_add]: asyncAddAtom,
-        };
-    };
-
-    return { atomInstance, useHook };
-};
-
 
 const createAtomWithHook_WIP = (initialValue, base_ame, options) => {
     const property_names = generatePropertyNames(base_ame);
@@ -229,33 +159,6 @@ export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useS
 export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook_WIP("en", "UiLanguage");
 
 
-
-
-
-
-
-
-export const { atomInstance: Atom_SendMessageFormat, useHook: useStore_SendMessageFormat } = createAtomWithHook({
-    before: "",
-    after: "",
-}, "SendMessageFormat");
-export const { atomInstance: Atom_SendMessageFormatWithT, useHook: useStore_SendMessageFormatWithT } = createAtomWithHook({
-    before: "",
-    between: "",
-    after: "",
-    is_message_first: true,
-}, "SendMessageFormatWithT");
-export const { atomInstance: Atom_ReceivedMessageFormat, useHook: useStore_ReceivedMessageFormat } = createAtomWithHook({
-    before: "",
-    after: "",
-}, "ReceivedMessageFormat");
-export const { atomInstance: Atom_ReceivedMessageFormatWithT, useHook: useStore_ReceivedMessageFormatWithT } = createAtomWithHook({
-    before: "",
-    between: "",
-    after: "",
-    is_message_first: true,
-}, "ReceivedMessageFormatWithT");
-
 export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useStore_IsOpenedWordFilterList } = createAtomWithHook_WIP(false, "IsOpenedWordFilterList");
 export const { atomInstance: Atom_WordFilterList, useHook: useStore_WordFilterList } = createAtomWithHook_WIP(word_filter_list, "WordFilterList");