Merge branch 'ui' into for_webui

data.js

@@ -1,17 +1,12 @@
-export const translator_list = [
+export const translator_status = [
-    { translator_key: "DeepL", translator_name: "DeepL", is_available: true },
+    { translator_id: "DeepL", translator_name: "DeepL", is_available: false },
-    { translator_key: "DeepL_API", translator_name: `DeepL\nAPI`, is_available: false },
+    { translator_id: "DeepL_API", translator_name: `DeepL\nAPI`, is_available: false },
-    { translator_key: "Google", translator_name: "Google", is_available: true },
+    { translator_id: "Google", translator_name: "Google", is_available: false },
-    { translator_key: "Bing", translator_name: "Bing", is_available: true },
+    { translator_id: "Bing", translator_name: "Bing", is_available: false },
-    { translator_key: "Papago", translator_name: "Papago", is_available: true },
+    { translator_id: "Papago", translator_name: "Papago", is_available: false },
-    { translator_key: "CTranslate2", translator_name: `Internal\n(Default)`, is_available: true },
+    { translator_id: "CTranslate2", translator_name: `Internal\n(Default)`, is_available: false },
 ];
 
-export const test_device_list = {
-    a: "Device A",
-    "device b": "Device B",
-};
-
 
 export const generateTestData = (num) => {
     const testDataArray = [];

src-ui/app/App.jsx

@@ -51,7 +51,14 @@ const StartPythonFacadeComponent = () => {
     const { getSendMessageButtonType } = useSendMessageButtonType();
     const { getUiLanguage } = useUiLanguage();
 
-    const { getSelectedPresetTabNumber, getEnableMultiTranslation, getSelectedYourLanguages, getSelectedTargetLanguages } = useLanguageSettings();
+    const {
+        getSelectedPresetTabNumber,
+        getEnableMultiTranslation,
+        getSelectedYourLanguages,
+        getSelectedTargetLanguages,
+        getTranslationEngines,
+        getSelectedTranslationEngines,
+    } = useLanguageSettings();
     const { getSelectableLanguageList } = useSelectableLanguageList();
 
 
@@ -68,6 +75,8 @@ const StartPythonFacadeComponent = () => {
                 getSelectedYourLanguages();
                 getSelectedTargetLanguages();
                 getSelectableLanguageList();
+                getTranslationEngines();
+                getSelectedTranslationEngines();
 
                 getEnableAutoMicSelect();
                 getEnableAutoSpeakerSelect();
@@ -115,7 +124,7 @@ const ConfigPageCloseTrigger = () => {
     } = useVolume();
 
     useEffect(() => {
-        if (currentIsOpenedConfigPage === false) {
+        if (currentIsOpenedConfigPage.data === false) {
             if (currentMicThresholdCheckStatus.data === true) volumeCheckStop_Mic();
             if (currentSpeakerThresholdCheckStatus.data === true) volumeCheckStop_Speaker();
         }

src-ui/app/config_page/ConfigPage.jsx

@@ -21,7 +21,7 @@ export const ConfigPage = () => {
                 </div>
                 <p className={styles.software_version}>
                     {
-                        t("config_page.version", {version: currentSoftwareVersion})
+                        t("config_page.version", {version: currentSoftwareVersion.data})
                     }
                 </p>
             </div>

src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx

@@ -7,7 +7,7 @@ import { Appearance } from "./appearance/Appearance";
 
 export const SettingBox = () => {
     const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
-    switch (currentSelectedConfigTabId) {
+    switch (currentSelectedConfigTabId.data) {
         case "device":
             return <Device />;
         // case "others":

src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.jsx

@@ -74,7 +74,7 @@ export const AboutVrct = () => {
                 <img src={special_thanks_section_title} className={clsx(styles.section_title, styles.special_thanks)} />
                 <img src={special_thanks_members} className={styles.special_thanks_members_img} />
                 {
-                    currentUiLanguage === "ja"
+                    currentUiLanguage.data === "ja"
                     ? <img src={special_thanks_message_ja} className={styles.special_thanks_message_img} />
                     : <img src={special_thanks_message_en} className={styles.special_thanks_message_img} />
                 }

src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx

@@ -19,7 +19,7 @@ export const PosterShowcaseWorldsContents = () => {
     }));
 
     const chunked_poster_showcase_world_images = chunkArray(poster_showcase_world_images, 8);
-    const target_poster_showcase_world_images = chunked_poster_showcase_world_images[currentPosterShowcaseWorldPageIndex];
+    const target_poster_showcase_world_images = chunked_poster_showcase_world_images[currentPosterShowcaseWorldPageIndex.data];
 
 
     return (
@@ -70,7 +70,7 @@ const PosterShowcaseWorldsPagination = ({ page_length }) => {
     };
 
     const getClassNames = (index, baseClass) => clsx(baseClass, {
-        [styles.is_active]: (currentPosterShowcaseWorldPageIndex === index),
+        [styles.is_active]: (currentPosterShowcaseWorldPageIndex.data === index),
     });
 
     return (

src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.jsx

@@ -34,11 +34,11 @@ export const PostersContents = () => {
 
 
     const updateIndex = (delta) => {
-        const newIndex = (currentVrctPosterIndex + delta + poster_images.length) % poster_images.length;
+        const newIndex = (currentVrctPosterIndex.data + delta + poster_images.length) % poster_images.length;
         updateVrctPosterIndex(newIndex);
     };
 
-    const current_poster = poster_images[currentVrctPosterIndex];
+    const current_poster = poster_images[currentVrctPosterIndex.data];
     const current_poster_authors_img_ja = (current_poster.poster_type === "poster") ? poster_images_authors_ja : poster_images_authors_m_ja;
     const current_poster_authors_img_en = (current_poster.poster_type === "poster") ? poster_images_authors_en : poster_images_authors_m_en;
 
@@ -60,7 +60,7 @@ export const PostersContents = () => {
                 </button>
             </div>
             {
-                currentUiLanguage === "ja"
+                currentUiLanguage.data === "ja"
                 ? <img src={current_poster_authors_img_ja} className={styles.poster_authors_img} />
                 : <img src={current_poster_authors_img_en} className={styles.poster_authors_img} />
             }

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={()=>{}}/> */}
@@ -101,7 +90,7 @@ const UiLanguageContainer = () => {
                 }
             </div>
             <div className={styles.ui_language_selector_container}>
-                {currentUiLanguage.state === "loading" && <span className={styles.loader}></span>}
+                {currentUiLanguage.state === "pending" && <span className={styles.loader}></span>}
                 {Object.entries(SELECTABLE_UI_LANGUAGES_DICT).map(([key, value]) => (
                     <label key={key} className={clsx(styles.radio_button_wrapper, { [styles.is_selected]: currentUiLanguage.data === key } )}>
                         <input

src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.jsx

@@ -4,7 +4,7 @@ export const Checkbox = (props) => {
     return (
         <div className={styles.checkbox_container}>
             <label className={styles.checkbox_wrapper} htmlFor={props.checkbox_id}>
-                {(props.state === "loading")
+                {(props.state === "pending")
                     ? <span className={styles.loader}></span>
                     : <input
                         type="checkbox"

src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx

@@ -7,7 +7,7 @@ export const DropdownMenu = (props) => {
     const { updateIsOpenedDropdownMenu, currentIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
 
     const toggleDropdownMenu = () => {
-        if (currentIsOpenedDropdownMenu === props.dropdown_id) {
+        if (currentIsOpenedDropdownMenu.data === props.dropdown_id) {
             updateIsOpenedDropdownMenu("");
         } else {
             if (props.openListFunction !== undefined) props.openListFunction();
@@ -24,21 +24,21 @@ export const DropdownMenu = (props) => {
     };
 
     const dropdown_content_wrapper_class_name = clsx(styles["dropdown_content_wrapper"], {
-        [styles.is_opened]: (currentIsOpenedDropdownMenu === props.dropdown_id) ? true : false,
+        [styles.is_opened]: (currentIsOpenedDropdownMenu.data === props.dropdown_id) ? true : false,
         [styles.is_disabled]: props.is_disabled,
     });
 
     const dropdown_toggle_button_class_name = clsx(styles["dropdown_toggle_button"], {
-        [styles.is_loading]: (props.state === "loading") ? true : false,
+        [styles.is_loading]: (props.state === "pending") ? true : false,
         [styles.is_disabled]: props.is_disabled,
     });
 
     const arrow_class_names = clsx(styles["arrow_left_svg"], {
-        [styles.is_opened]: (currentIsOpenedDropdownMenu === props.dropdown_id) ? true : false
+        [styles.is_opened]: (currentIsOpenedDropdownMenu.data === props.dropdown_id) ? true : false
     });
 
     const getSelectedText = () => {
-        if (props.state !== "hasData") return;
+        if (props.state !== "ok") return;
         return props.selected_id;
     };
     const list = (props.list === undefined) ? {} : props.list;
@@ -46,18 +46,18 @@ export const DropdownMenu = (props) => {
     return (
         <div className={styles.container}>
             <div className={dropdown_toggle_button_class_name} onClick={toggleDropdownMenu} style={props.style}>
-                {(props.state === "loading")
+                {(props.state === "pending")
                     ? <p className={styles.dropdown_selected_text}>Loading...</p>
                     : <p className={styles.dropdown_selected_text}>{getSelectedText()}</p>
                 }
-                {(props.state === "loading")
+                {(props.state === "pending")
                     ? <span className={styles.loader}></span>
                     : <ArrowLeftSvg className={arrow_class_names} />
                 }
             </div>
             <div className={dropdown_content_wrapper_class_name}>
                 <div className={styles.dropdown_content}>
-                    {(props.state === "hasData")
+                    {(props.state === "ok")
                         ? Object.entries(list).map(([key, value]) => {
                             return (
                                 <div key={key} className={styles.value_button} onClick={() => selectValue(key)}>

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 === "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/radio_button/RadioButton.jsx

@@ -7,7 +7,7 @@ export const RadioButton = (props) => {
                 <label key={option.radio_button_id} className={styles.radio_button_wrapper}>
                     {props.checked_variable.data === option.radio_button_id
                         ? <>
-                            { props.checked_variable.state === "loading" && <span className={styles.loader}></span> }
+                            { props.checked_variable.state === "pending" && <span className={styles.loader}></span> }
                             <input
                                 type="radio"
                                 name="radio"

src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx

@@ -6,7 +6,7 @@ export const Switchbox = (props) => {
     const [is_hovered, setIsHovered] = useState(false);
     const [is_mouse_down, setIsMouseDown] = useState(false);
 
-    const is_loading = (props.variable.state === "loading");
+    const is_loading = (props.variable.state === "pending");
 
     const getClassNames = (base_class) => clsx(base_class, {
         [styles.is_active]: (props.variable.data === true),

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx

@@ -22,7 +22,7 @@ const MicComponent = (props) => {
         setMicThreshold,
         currentEnableAutomaticMicThreshold,
     } = useMicThreshold();
-    const [ui_threshold, setUiThreshold] = useState(currentMicThreshold);
+    const [ui_threshold, setUiThreshold] = useState(currentMicThreshold.data);
     const {
         volumeCheckStart_Mic,
         volumeCheckStop_Mic,
@@ -34,9 +34,9 @@ const MicComponent = (props) => {
         if (currentEnableAutomaticMicThreshold.data === true) {
             setUiThreshold("Auto");
         } else {
-            setUiThreshold(currentMicThreshold);
+            setUiThreshold(currentMicThreshold.data);
         }
-    }, [currentMicThreshold, currentEnableAutomaticMicThreshold]);
+    }, [currentMicThreshold.data, currentEnableAutomaticMicThreshold]);
 
     const setUiThresholdFunction = (payload_ui_threshold) => {
         setUiThreshold(payload_ui_threshold);
@@ -80,7 +80,7 @@ const SpeakerComponent = (props) => {
         setSpeakerThreshold,
         currentEnableAutomaticSpeakerThreshold,
     } = useSpeakerThreshold();
-    const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold);
+    const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold.data);
     const {
         volumeCheckStart_Speaker,
         volumeCheckStop_Speaker,
@@ -91,9 +91,9 @@ const SpeakerComponent = (props) => {
         if (currentEnableAutomaticSpeakerThreshold.data === true) {
             setUiThreshold("Auto");
         } else {
-            setUiThreshold(currentSpeakerThreshold);
+            setUiThreshold(currentSpeakerThreshold.data);
         }
-    }, [currentSpeakerThreshold, currentEnableAutomaticSpeakerThreshold]);
+    }, [currentSpeakerThreshold.data, currentEnableAutomaticSpeakerThreshold]);
 
     const setUiThresholdFunction = (payload_ui_threshold) => {
         setUiThreshold(payload_ui_threshold);

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx

@@ -5,7 +5,7 @@ import clsx from "clsx";
 export const VolumeCheckButton = React.memo((props) => {
     const getClassNames = (baseClass) => clsx(baseClass, {
         [styles.is_active]: (props.isChecking?.data === true),
-        [styles.is_loading]: (props.isChecking.state === "loading"),
+        [styles.is_loading]: (props.isChecking.state === "pending"),
     });
 
     const toggleFunction = () => {

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/app/config_page/setting_section/setting_box/components/word_filter/WordFilter.jsx

@@ -15,7 +15,7 @@ export const WordFilter = () => {
         if (input_value === undefined) return;
         const input_value_array = input_value.split(",");
 
-        let updated_list = [...currentWordFilterList];
+        let updated_list = [...currentWordFilterList.data];
 
         for (let each_input_value of input_value_array) {
             each_input_value = each_input_value.trim();
@@ -57,10 +57,10 @@ export const WordFilter = () => {
 
     return (
         <div className={styles.container}>
-            { currentIsOpenedWordFilterList &&
+            { currentIsOpenedWordFilterList.data &&
             <div className={styles.list_section_wrapper}>
                 {
-                    currentWordFilterList.map((item, index) => {
+                    currentWordFilterList.data.map((item, index) => {
                         return <WordFilterItem value={item.value} key={index} is_redoable={item.is_redoable} deleteAction={deleteAction} redoAction={redoAction}/>;
                     })
                 }
@@ -117,15 +117,15 @@ export const WordFilterListToggleComponent = (props) => {
 
 
     const svg_class_names = clsx(styles["arrow_left_svg"], {
-        [styles.to_down]: !currentIsOpenedWordFilterList,
+        [styles.to_down]: !currentIsOpenedWordFilterList.data,
-        [styles.to_up]: currentIsOpenedWordFilterList
+        [styles.to_up]: currentIsOpenedWordFilterList.data
     });
 
     const OnclickFunction = () => {
-        updateIsOpenedWordFilterList(!currentIsOpenedWordFilterList);
+        updateIsOpenedWordFilterList(!currentIsOpenedWordFilterList.data);
     };
 
-    const word_filter_list_length = currentWordFilterList.filter(item => item.is_redoable === false).length;
+    const word_filter_list_length = currentWordFilterList.data.filter(item => item.is_redoable === false).length;
 
 
     return (

src-ui/app/config_page/setting_section/setting_box/device/Device.jsx

@@ -35,11 +35,12 @@ const Mic_Container = () => {
     const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
     const { currentEnableAutomaticMicThreshold, toggleEnableAutomaticMicThreshold } = useMicThreshold();
 
+
     const selectFunction_host = (selected_data) => {
         setSelectedMicHost(selected_data.selected_id);
     };
 
-    const is_disabled_selector = currentEnableAutoMicSelect.data === true || currentEnableAutoMicSelect.data === "loading";
+    const is_disabled_selector = currentEnableAutoMicSelect.data === true || currentEnableAutoMicSelect.data === "pending";
 
     const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice();
     const { currentMicDeviceList, getMicDeviceList } = useMicDeviceList();
@@ -143,7 +144,7 @@ const Speaker_Container = () => {
         setSelectedSpeakerDevice(selected_data.selected_id);
     };
 
-    const is_disabled_selector = currentEnableAutoSpeakerSelect.data === true || currentEnableAutoSpeakerSelect.data === "loading";
+    const is_disabled_selector = currentEnableAutoSpeakerSelect.data === true || currentEnableAutoSpeakerSelect.data === "pending";
 
     const getLabels = () => {
         if (currentEnableAutomaticSpeakerThreshold.data === true) {

src-ui/app/config_page/sidebar_section/SidebarSection.jsx

@@ -32,10 +32,10 @@ const Tab = (props) => {
     };
 
     const tab_container_class_names = clsx(styles["tab_container"], {
-        [styles["is_selected"]]: (currentSelectedConfigTabId === props.tab_id) ? true : false
+        [styles["is_selected"]]: (currentSelectedConfigTabId.data === props.tab_id) ? true : false
     });
     const switch_indicator_class_names = clsx(styles["switch_indicator"], {
-        [styles["is_selected"]]: (currentSelectedConfigTabId === props.tab_id) ? true : false
+        [styles["is_selected"]]: (currentSelectedConfigTabId.data === props.tab_id) ? true : false
     });
 
     return (

src-ui/app/config_page/topbar/Topbar.jsx

@@ -16,8 +16,8 @@ export const Topbar = () => {
 
     return (
         <div className={clsx(styles.container, {
-            [styles.show_config]: currentIsOpenedConfigPage,
+            [styles.show_config]: currentIsOpenedConfigPage.data,
-            [styles.show_main]: !currentIsOpenedConfigPage
+            [styles.show_main]: !currentIsOpenedConfigPage.data
         })}>
             <div className={styles.wrapper} onClick={() => closeConfigPage()}>
                 <div className={styles.go_back_button}>

src-ui/app/config_page/topbar/section_title_box/SectionTitleBox.jsx

@@ -7,7 +7,7 @@ export const SectionTitleBox = () => {
     const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
     return (
         <div className={styles.container}>
-            <p className={styles.title}>{t(`config_page.side_menu_labels.${currentSelectedConfigTabId}`)}</p>
+            <p className={styles.title}>{t(`config_page.side_menu_labels.${currentSelectedConfigTabId.data}`)}</p>
         </div>
     );
 };

src-ui/app/main_page/MainPage.jsx

@@ -9,8 +9,8 @@ export const MainPage = () => {
 
     return (
         <div className={clsx(styles.page, styles.main_page, {
-            [styles.show_config]: currentIsOpenedConfigPage,
+            [styles.show_config]: currentIsOpenedConfigPage.data,
-            [styles.show_main]: !currentIsOpenedConfigPage
+            [styles.show_main]: !currentIsOpenedConfigPage.data
         })}>
             <div className={styles.container}>
                 <SidebarSection />

src-ui/app/main_page/main_section/MainSection.jsx

@@ -28,10 +28,10 @@ const HandleLanguageSelector = () => {
         setSelectedTargetLanguages,
     } = useLanguageSettings();
 
-    if (currentIsOpenedLanguageSelector.your_language === true) {
+    if (currentIsOpenedLanguageSelector.data.your_language === true) {
         const onclickFunction_YourLanguage = (payload) => setSelectedYourLanguages(payload);
         return <LanguageSelector id="your_language" onClickFunction={onclickFunction_YourLanguage}/>;
-    } else if (currentIsOpenedLanguageSelector.target_language === true) {
+    } else if (currentIsOpenedLanguageSelector.data.target_language === true) {
         const onclickFunction_TargetLanguage = (payload) => setSelectedTargetLanguages(payload);
         return <LanguageSelector id="target_language" onClickFunction={onclickFunction_TargetLanguage}/>;
     } else {

src-ui/app/main_page/main_section/language_selector/LanguageSelector.jsx

@@ -27,7 +27,7 @@ export const LanguageSelector = ({ id, onClickFunction }) => {
         }, {});
     };
 
-    const groupedLanguages = groupLanguagesByFirstLetter(currentSelectableLanguageList);
+    const groupedLanguages = groupLanguagesByFirstLetter(currentSelectableLanguageList.data);
 
     return (
         <div className={styles.container}>

src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx

@@ -1,20 +1,22 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import styles from "./LogBox.module.scss";
-import { useStore_MessageLogs, store } from "@store";
+import { store } from "@store";
 import { MessageContainer } from "./message_container/MessageContainer";
 import { scrollToBottom } from "@utils/scrollToBottom";
+import { useMessage } from "@logics_common/useMessage";
 
 export const LogBox = () => {
-    const { currentMessageLogs } = useStore_MessageLogs();
+    const { currentMessageLogs } = useMessage();
     const log_container_ref = useRef(null);
     const [is_scrolling, setIsScrolling] = useState(false);
 
+
     useLayoutEffect(() => {
         store.log_box_ref = log_container_ref;
         if (!is_scrolling) {
             scrollToBottom(store.log_box_ref, true);
         }
-    }, [currentMessageLogs]);
+    }, [currentMessageLogs.data]);
 
     useEffect(() => {
         const handleScroll = () => {
@@ -39,7 +41,7 @@ export const LogBox = () => {
 
     return (
         <div id="log_container" className={styles.container} ref={log_container_ref}>
-            {currentMessageLogs.map(message_data => (
+            {currentMessageLogs.data.map(message_data => (
                 <MessageContainer key={message_data.id} {...message_data} />
             ))}
         </div>

src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx

@@ -8,11 +8,11 @@ export const SidebarCompactModeButton = () => {
     const { updateIsMainPageCompactMode, currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
 
     const toggleCompactMode = () => {
-        updateIsMainPageCompactMode(!currentIsMainPageCompactMode);
+        updateIsMainPageCompactMode(!currentIsMainPageCompactMode.data);
     };
 
     const class_names = clsx(styles["arrow_left_svg"], {
-        [styles["reverse"]]: currentIsMainPageCompactMode
+        [styles["reverse"]]: currentIsMainPageCompactMode.data
     });
 
     return (

src-ui/app/main_page/sidebar_section/SidebarSection.jsx

@@ -11,12 +11,12 @@ import { OpenSettings } from "./open_settings/OpenSettings";
 export const SidebarSection = () => {
     const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
     const container_class_name = clsx(styles.container, {
-        [styles.is_compact_mode]: currentIsMainPageCompactMode
+        [styles.is_compact_mode]: currentIsMainPageCompactMode.data
     });
 
     const { currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
     const scroll_container_class_names = clsx(styles.scroll_container, {
-        [styles.is_opened]: (currentIsOpenedLanguageSelector.your_language === true || currentIsOpenedLanguageSelector.target_language === true)
+        [styles.is_opened]: (currentIsOpenedLanguageSelector.data.your_language === true || currentIsOpenedLanguageSelector.data.target_language === true)
     });
 
     return (
@@ -24,7 +24,7 @@ export const SidebarSection = () => {
             <Logo />
             <div className={scroll_container_class_names}>
                 <MainFunctionSwitch />
-                {!currentIsMainPageCompactMode && <LanguageSettings />}
+                {!currentIsMainPageCompactMode.data && <LanguageSettings />}
             </div>
             <OpenSettings />
         </div>

src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx

@@ -62,8 +62,8 @@ const PresetContainer = () => {
 
     const yourLanguageSettings = {
         title: t("main_page.your_language"),
-        is_opened: currentIsOpenedLanguageSelector.your_language,
+        is_opened: currentIsOpenedLanguageSelector.data.your_language,
-        onClickFunction: () => toggleSelector("your_language", currentIsOpenedLanguageSelector.your_language, updateIsOpenedLanguageSelector),
+        onClickFunction: () => toggleSelector("your_language", currentIsOpenedLanguageSelector.data.your_language, updateIsOpenedLanguageSelector),
         TurnedOnSvgComponent: <MicSvg />,
         is_turned_on: currentTranscriptionSendStatus.data,
         variable: your_language_data?.primary,
@@ -71,8 +71,8 @@ const PresetContainer = () => {
 
     const targetLanguageSettings = {
         title: t("main_page.target_language"),
-        is_opened: currentIsOpenedLanguageSelector.target_language,
+        is_opened: currentIsOpenedLanguageSelector.data.target_language,
-        onClickFunction: () => toggleSelector("target_language", currentIsOpenedLanguageSelector.target_language, updateIsOpenedLanguageSelector),
+        onClickFunction: () => toggleSelector("target_language", currentIsOpenedLanguageSelector.data.target_language, updateIsOpenedLanguageSelector),
         TurnedOnSvgComponent: <HeadphonesSvg />,
         is_turned_on: currentTranscriptionReceiveStatus.data,
         variable: target_language_data?.primary,

src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx

@@ -2,27 +2,44 @@ import { useTranslation } from "react-i18next";
 
 import styles from "./TranslatorSelectorOpenButton.module.scss";
 import { TranslatorSelector } from "./translator_selector/TranslatorSelector";
-import { useStore_TranslatorList, useStore_SelectedTranslatorId, useStore_IsOpenedTranslatorSelector } from "@store";
+import { useStore_IsOpenedTranslatorSelector } from "@store";
+import { useLanguageSettings } from "@logics_main/useLanguageSettings";
 
 export const TranslatorSelectorOpenButton = () => {
     const { t } = useTranslation();
-    const { currentSelectedTranslatorId } = useStore_SelectedTranslatorId();
+    const {
-    const { currentTranslatorList } = useStore_TranslatorList();
+        currentSelectedPresetTabNumber,
-    const currentTranslator = currentTranslatorList.find(
+        currentTranslationEngines,
-        translator_data => translator_data.translator_key === currentSelectedTranslatorId
+        getTranslationEngines,
-    );
+        currentSelectedTranslationEngines,
+    } = useLanguageSettings();
+
+    const selected_translator_name = (currentTranslationEngines.state === "pending")
+    ? "Loading..."
+    : currentTranslationEngines.data.find(
+        translator_data => translator_data.translator_id === currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data]
+    )?.translator_name;
+
 
     const { currentIsOpenedTranslatorSelector, updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
 
-    const openTranslatorSelector = () => updateIsOpenedTranslatorSelector(!currentIsOpenedTranslatorSelector);
+    const openTranslatorSelector = () => {
+        getTranslationEngines();
+        updateIsOpenedTranslatorSelector(!currentIsOpenedTranslatorSelector.data);
+    };
 
     return (
         <div className={styles.container}>
             <div className={styles.translator_selector_button} onClick={openTranslatorSelector}>
-                <p className={styles.label}>{t("main_page.translator")}</p>
+                <p className={styles.label}>{t("main_page.translator")}: </p>
-                <p className={styles.label}>{currentTranslator?.translator_name}</p>
+                <p className={styles.label}>{selected_translator_name}</p>
             </div>
-            {currentIsOpenedTranslatorSelector && <TranslatorSelector />}
+            {currentIsOpenedTranslatorSelector.data &&
+                <TranslatorSelector
+                    selected_translator_id={currentSelectedTranslationEngines}
+                    translation_engines={currentTranslationEngines}
+                />
+            }
         </div>
     );
 };

src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx

@@ -1,22 +1,24 @@
 import styles from "./TranslatorSelector.module.scss";
 import { chunkArray } from "@utils/chunkArray";
 
-import { useStore_TranslatorList, useStore_SelectedTranslatorId, useStore_IsOpenedTranslatorSelector } from "@store";
+import { useStore_IsOpenedTranslatorSelector } from "@store";
-export const TranslatorSelector = () => {
+import { useLanguageSettings } from "@logics_main/useLanguageSettings";
-    const { currentTranslatorList } = useStore_TranslatorList();
+
-    const columns = chunkArray(currentTranslatorList, 2);
+export const TranslatorSelector = ({selected_translator_id, translation_engines}) => {
+    const columns = (translation_engines.data !== undefined) ? chunkArray(translation_engines.data, 2) : [];
 
     return (
         <div className={styles.container}>
             <div className={styles.wrapper}>
                 {columns.map((column, column_index) => (
                     <div className={styles.column_wrapper} key={`column_${column_index}`}>
-                        {column.map(({ translator_key, translator_name, is_available }) => (
+                        {column.map(({ translator_id, translator_name, is_available }) => (
                             <TranslatorBox
-                                key={translator_key}
+                                key={translator_id}
-                                translator_id={translator_key}
+                                translator_id={translator_id}
                                 translator_name={translator_name}
                                 is_available={is_available}
+                                is_selected={(translator_id === selected_translator_id)}
                             />
                         ))}
                     </div>
@@ -28,17 +30,17 @@ export const TranslatorSelector = () => {
 
 import clsx from "clsx";
 const TranslatorBox = (props) => {
-    const { currentSelectedTranslatorId, updateSelectedTranslatorId} = useStore_SelectedTranslatorId();
+    const { currentSelectedPresetTabNumber, currentSelectedTranslationEngines, setSelectedTranslationEngines} = useLanguageSettings();
     const { updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
 
     const box_class_name = clsx(
         styles.box,
-        { [styles["is_selected"]]: (currentSelectedTranslatorId === props.translator_id) ? true : false },
+        { [styles["is_selected"]]: (currentSelectedTranslationEngines[currentSelectedPresetTabNumber.data] === props.translator_id) ? true : false },
         { [styles["is_available"]]: (props.is_available === true) ? true : false }
     );
 
     const selectTranslator = () => {
-        updateSelectedTranslatorId(props.translator_id);
+        setSelectedTranslationEngines(props.translator_id);
         updateIsOpenedTranslatorSelector(false);
     };
     return (

src-ui/app/main_page/sidebar_section/logo/Logo.jsx

@@ -15,7 +15,7 @@ import { useStore_IsMainPageCompactMode } from "@store";
 
 export const LogoBox = () => {
     const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
-    if (currentIsMainPageCompactMode === true) {
+    if (currentIsMainPageCompactMode.data === true) {
         return <img src={chato_img} className={styles.logo_chato} alt="VRCT logo chato" />;
     } else {
         return <img src={vrct_logo} className={styles.logo} alt="VRCT logo" />;

src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.jsx

@@ -77,9 +77,9 @@ export const SwitchContainer = ({ switchLabel, switch_id, children, currentState
     const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
 
     const getClassNames = (baseClass) => clsx(baseClass, {
-        [styles.is_compact_mode]: currentIsMainPageCompactMode,
+        [styles.is_compact_mode]: currentIsMainPageCompactMode.data,
         [styles.is_active]: (currentState.data === true),
-        [styles.is_loading]: (currentState.state === "loading"),
+        [styles.is_loading]: (currentState.state === "pending"),
         [styles.is_hovered]: is_hovered,
         [styles.is_mouse_down]: is_mouse_down,
     });
@@ -108,7 +108,7 @@ export const SwitchContainer = ({ switchLabel, switch_id, children, currentState
             </div>
 
             <div className={getClassNames(styles.switch_indicator)}></div>
-            {(currentState.state === "loading")
+            {(currentState.state === "pending")
                 ? <span className={styles.loader}></span>
                 : null
             }

src-ui/logics/common/useMessage.js

@@ -71,8 +71,8 @@ const generateMessageObject = (data, category) => {
 };
 
 
-const updateItemById = (id, translated_data) => (prev_items) => {
+const updateItemById = (id, translated_data) => (current_items) => {
-    return prev_items.map(item => {
+    return current_items.data.map(item => {
         if (item.id === id) {
             item.status = "ok";
             item.messages.translated = translated_data;

src-ui/logics/common/useVolume.js

@@ -11,17 +11,24 @@ export const useVolume = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
     const { updateMicVolume } = useStore_MicVolume();
     const { updateSpeakerVolume } = useStore_SpeakerVolume();
-    const { currentMicThresholdCheckStatus, updateMicThresholdCheckStatus } = useStore_MicThresholdCheckStatus();
+    const {
-    const { currentSpeakerThresholdCheckStatus, updateSpeakerThresholdCheckStatus } = useStore_SpeakerThresholdCheckStatus();
+        currentMicThresholdCheckStatus,
+        updateMicThresholdCheckStatus,
+        pendingMicThresholdCheckStatus,
+    } = useStore_MicThresholdCheckStatus();
+    const {
+        currentSpeakerThresholdCheckStatus,
+        updateSpeakerThresholdCheckStatus,
+        pendingSpeakerThresholdCheckStatus,
+    } = useStore_SpeakerThresholdCheckStatus();
 
-    const asyncPending = () => new Promise(() => {});
     return {
         volumeCheckStart_Mic: () => {
-            updateMicThresholdCheckStatus(asyncPending);
+            pendingMicThresholdCheckStatus();
             asyncStdoutToPython("/set/enable_check_mic_threshold");
         },
         volumeCheckStop_Mic: () => {
-            updateMicThresholdCheckStatus(asyncPending);
+            pendingMicThresholdCheckStatus();
             asyncStdoutToPython("/set/disable_check_mic_threshold");
         },
         updateVolumeVariable_Mic: (payload) => {
@@ -35,11 +42,11 @@ export const useVolume = () => {
 
         volumeCheckStart_Speaker: () => {
             updateSpeakerVolume("0");
-            updateSpeakerThresholdCheckStatus(asyncPending);
+            pendingSpeakerThresholdCheckStatus();
             asyncStdoutToPython("/set/enable_check_speaker_threshold");
         },
         volumeCheckStop_Speaker: () => {
-            updateSpeakerThresholdCheckStatus(asyncPending);
+            pendingSpeakerThresholdCheckStatus();
             asyncStdoutToPython("/set/disable_check_speaker_threshold");
         },
         updateVolumeVariable_Speaker: (payload) => {

src-ui/logics/configs/useEnableAutoClearMessageBox.js

@@ -3,15 +3,15 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useEnableAutoClearMessageBox = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useStore_EnableAutoClearMessageBox();
+    const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox, pendingEnableAutoClearMessageBox } = useStore_EnableAutoClearMessageBox();
 
     const getEnableAutoClearMessageBox = () => {
-        updateEnableAutoClearMessageBox(() => new Promise(() => {}));
+        pendingEnableAutoClearMessageBox();
         asyncStdoutToPython("/get/auto_clear_message_box");
     };
 
     const toggleEnableAutoClearMessageBox = () => {
-        updateEnableAutoClearMessageBox(() => new Promise(() => {}));
+        pendingEnableAutoClearMessageBox();
         if (currentEnableAutoClearMessageBox.data) {
             asyncStdoutToPython("/set/disable_auto_clear_message_box");
         } else {

src-ui/logics/configs/useEnableAutoMicSelect.js

@@ -3,15 +3,15 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useEnableAutoMicSelect = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentEnableAutoMicSelect, updateEnableAutoMicSelect } = useStore_EnableAutoMicSelect();
+    const { currentEnableAutoMicSelect, updateEnableAutoMicSelect, pendingEnableAutoMicSelect } = useStore_EnableAutoMicSelect();
 
     const getEnableAutoMicSelect = () => {
-        updateEnableAutoMicSelect(() => new Promise(() => {}));
+        pendingEnableAutoMicSelect();
         asyncStdoutToPython("/get/auto_mic_select");
     };
 
     const toggleEnableAutoMicSelect = () => {
-        updateEnableAutoMicSelect(() => new Promise(() => {}));
+        pendingEnableAutoMicSelect();
         if (currentEnableAutoMicSelect.data) {
             asyncStdoutToPython("/set/disable_auto_mic_select");
         } else {

src-ui/logics/configs/useEnableAutoSpeakerSelect.js

@@ -3,15 +3,15 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useEnableAutoSpeakerSelect = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentEnableAutoSpeakerSelect, updateEnableAutoSpeakerSelect } = useStore_EnableAutoSpeakerSelect();
+    const { currentEnableAutoSpeakerSelect, updateEnableAutoSpeakerSelect, pendingEnableAutoSpeakerSelect } = useStore_EnableAutoSpeakerSelect();
 
     const getEnableAutoSpeakerSelect = () => {
-        updateEnableAutoSpeakerSelect(() => new Promise(() => {}));
+        pendingEnableAutoSpeakerSelect();
         asyncStdoutToPython("/get/auto_speaker_select");
     };
 
     const toggleEnableAutoSpeakerSelect = () => {
-        updateEnableAutoSpeakerSelect(() => new Promise(() => {}));
+        pendingEnableAutoSpeakerSelect();
         if (currentEnableAutoSpeakerSelect.data) {
             asyncStdoutToPython("/set/disable_auto_speaker_select");
         } else {

src-ui/logics/configs/useMicDeviceList.js

@@ -3,10 +3,10 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useMicDeviceList = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentMicDeviceList, updateMicDeviceList } = useStore_MicDeviceList();
+    const { currentMicDeviceList, updateMicDeviceList, pendingMicDeviceList } = useStore_MicDeviceList();
 
     const getMicDeviceList = () => {
-        updateMicDeviceList(() => new Promise(() => {}));
+        pendingMicDeviceList();
         asyncStdoutToPython("/get/list_mic_device");
     };
 

src-ui/logics/configs/useMicHostList.js

@@ -3,10 +3,10 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useMicHostList = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentMicHostList, updateMicHostList } = useStore_MicHostList();
+    const { currentMicHostList, updateMicHostList, pendingMicHostList } = useStore_MicHostList();
 
     const getMicHostList = () => {
-        updateMicHostList(() => new Promise(() => {}));
+        pendingMicHostList();
         asyncStdoutToPython("/get/list_mic_host");
     };
 

src-ui/logics/configs/useMicThreshold.js

@@ -4,7 +4,7 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 export const useMicThreshold = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
     const { updateMicThreshold, currentMicThreshold } = useStore_MicThreshold();
-    const { updateEnableAutomaticMicThreshold, currentEnableAutomaticMicThreshold } = useStore_EnableAutomaticMicThreshold();
+    const { updateEnableAutomaticMicThreshold, currentEnableAutomaticMicThreshold, pendingEnableAutomaticMicThreshold } = useStore_EnableAutomaticMicThreshold();
 
     const getMicThreshold = () => {
         asyncStdoutToPython("/get/mic_energy_threshold");
@@ -15,12 +15,12 @@ export const useMicThreshold = () => {
     };
 
     const getEnableAutomaticMicThreshold = () => {
-        updateEnableAutomaticMicThreshold(() => new Promise(() => {}));
+        pendingEnableAutomaticMicThreshold();
         asyncStdoutToPython("/get/mic_dynamic_energy_threshold");
     };
 
     const toggleEnableAutomaticMicThreshold = () => {
-        updateEnableAutomaticMicThreshold(() => new Promise(() => {}));
+        pendingEnableAutomaticMicThreshold();
         if (currentEnableAutomaticMicThreshold.data) {
             asyncStdoutToPython("/set/disable_mic_dynamic_energy_threshold");
         } else {

src-ui/logics/configs/useSelectedMicDevice.js

@@ -3,15 +3,15 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useSelectedMicDevice = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectedMicDevice, updateSelectedMicDevice } = useStore_SelectedMicDevice();
+    const { currentSelectedMicDevice, updateSelectedMicDevice, pendingSelectedMicDevice } = useStore_SelectedMicDevice();
 
     const getSelectedMicDevice = () => {
-        updateSelectedMicDevice(() => new Promise(() => {}));
+        pendingSelectedMicDevice();
         asyncStdoutToPython("/get/selected_mic_device");
     };
 
     const setSelectedMicDevice = (selected_mic_device) => {
-        updateSelectedMicDevice(() => new Promise(() => {}));
+        pendingSelectedMicDevice();
         asyncStdoutToPython("/set/selected_mic_device", selected_mic_device);
     };
 

src-ui/logics/configs/useSelectedMicHost.js

@@ -3,15 +3,15 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useSelectedMicHost = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectedMicHost, updateSelectedMicHost } = useStore_SelectedMicHost();
+    const { currentSelectedMicHost, updateSelectedMicHost, pendingSelectedMicHost } = useStore_SelectedMicHost();
 
     const getSelectedMicHost = () => {
-        updateSelectedMicHost(() => new Promise(() => {}));
+        pendingSelectedMicHost();
         asyncStdoutToPython("/get/selected_mic_host");
     };
 
     const setSelectedMicHost = (selected_mic_host) => {
-        updateSelectedMicHost(() => new Promise(() => {}));
+        pendingSelectedMicHost();
         asyncStdoutToPython("/set/selected_mic_host", selected_mic_host);
     };
 

src-ui/logics/configs/useSelectedSpeakerDevice.js

@@ -3,15 +3,15 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useSelectedSpeakerDevice = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectedSpeakerDevice, updateSelectedSpeakerDevice } = useStore_SelectedSpeakerDevice();
+    const { currentSelectedSpeakerDevice, updateSelectedSpeakerDevice, pendingSelectedSpeakerDevice } = useStore_SelectedSpeakerDevice();
 
     const getSelectedSpeakerDevice = () => {
-        updateSelectedSpeakerDevice(() => new Promise(() => {}));
+        pendingSelectedSpeakerDevice();
         asyncStdoutToPython("/get/selected_speaker_device");
     };
 
     const setSelectedSpeakerDevice = (selected_speaker_device) => {
-        updateSelectedSpeakerDevice(() => new Promise(() => {}));
+        pendingSelectedSpeakerDevice();
         asyncStdoutToPython("/set/selected_speaker_device", selected_speaker_device);
     };
 

src-ui/logics/configs/useSendMessageButtonType.js

@@ -3,15 +3,15 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useSendMessageButtonType = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSendMessageButtonType, updateSendMessageButtonType } = useStore_SendMessageButtonType();
+    const { currentSendMessageButtonType, updateSendMessageButtonType, pendingSendMessageButtonType } = useStore_SendMessageButtonType();
 
     const getSendMessageButtonType = () => {
-        updateSendMessageButtonType(() => new Promise(() => {}));
+        pendingSendMessageButtonType();
         asyncStdoutToPython("/get/send_message_button_type");
     };
 
     const setSendMessageButtonType = (selected_type) => {
-        updateSendMessageButtonType(() => new Promise(() => {}));
+        pendingSendMessageButtonType();
         asyncStdoutToPython("/set/send_message_button_type", selected_type);
     };
 

src-ui/logics/configs/useSoftwareVersion.js

@@ -3,10 +3,10 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useSoftwareVersion = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSoftwareVersion, updateSoftwareVersion } = useStore_SoftwareVersion();
+    const { currentSoftwareVersion, updateSoftwareVersion, pendingSoftwareVersion } = useStore_SoftwareVersion();
 
     const getSoftwareVersion = () => {
-        updateSoftwareVersion(() => new Promise(() => {}));
+        pendingSoftwareVersion();
         asyncStdoutToPython("/get/version");
     };
 

src-ui/logics/configs/useSpeakerDeviceList.js

@@ -3,10 +3,10 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useSpeakerDeviceList = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSpeakerDeviceList, updateSpeakerDeviceList } = useStore_SpeakerDeviceList();
+    const { currentSpeakerDeviceList, updateSpeakerDeviceList, pendingSpeakerDeviceList } = useStore_SpeakerDeviceList();
 
     const getSpeakerDeviceList = () => {
-        updateSpeakerDeviceList(() => new Promise(() => {}));
+        pendingSpeakerDeviceList();
         asyncStdoutToPython("/get/list_speaker_device");
     };
 

src-ui/logics/configs/useSpeakerThreshold.js

@@ -4,7 +4,7 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 export const useSpeakerThreshold = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
     const { updateSpeakerThreshold, currentSpeakerThreshold } = useStore_SpeakerThreshold();
-    const { updateEnableAutomaticSpeakerThreshold, currentEnableAutomaticSpeakerThreshold } = useStore_EnableAutomaticSpeakerThreshold();
+    const { updateEnableAutomaticSpeakerThreshold, currentEnableAutomaticSpeakerThreshold, pendingEnableAutomaticSpeakerThreshold } = useStore_EnableAutomaticSpeakerThreshold();
 
     const getSpeakerThreshold = () => {
         asyncStdoutToPython("/get/speaker_energy_threshold");
@@ -15,12 +15,12 @@ export const useSpeakerThreshold = () => {
     };
 
     const getEnableAutomaticSpeakerThreshold = () => {
-        updateEnableAutomaticSpeakerThreshold(() => new Promise(() => {}));
+        pendingEnableAutomaticSpeakerThreshold();
         asyncStdoutToPython("/get/speaker_dynamic_energy_threshold");
     };
 
     const toggleEnableAutomaticSpeakerThreshold = () => {
-        updateEnableAutomaticSpeakerThreshold(() => new Promise(() => {}));
+        pendingEnableAutomaticSpeakerThreshold();
         if (currentEnableAutomaticSpeakerThreshold.data) {
             asyncStdoutToPython("/set/disable_speaker_dynamic_energy_threshold");
         } else {

src-ui/logics/configs/useUiLanguage.js

@@ -3,15 +3,15 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useUiLanguage = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentUiLanguage, updateUiLanguage } = useStore_UiLanguage();
+    const { currentUiLanguage, updateUiLanguage, pendingUiLanguage } = useStore_UiLanguage();
 
     const getUiLanguage = () => {
-        updateUiLanguage(() => new Promise(() => {}));
+        pendingUiLanguage();
         asyncStdoutToPython("/get/ui_language");
     };
 
     const setUiLanguage = (selected_ui_language) => {
-        updateUiLanguage(() => new Promise(() => {}));
+        pendingUiLanguage();
         asyncStdoutToPython("/set/ui_language", selected_ui_language);
     };
 

src-ui/logics/main/useLanguageSettings.js

@@ -1,37 +1,63 @@
-import { useStore_SelectedPresetTabNumber, useStore_EnableMultiTranslation, useStore_SelectedYourLanguages, useStore_SelectedTargetLanguages } from "@store";
+import { useStore_SelectedPresetTabNumber, useStore_EnableMultiTranslation, useStore_SelectedYourLanguages, useStore_SelectedTargetLanguages, useStore_TranslationEngines, useStore_SelectedTranslationEngines } from "@store";
 import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useLanguageSettings = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentEnableMultiTranslation, updateEnableMultiTranslation } = useStore_EnableMultiTranslation();
+    const {
-    const { currentSelectedYourLanguages, updateSelectedYourLanguages } = useStore_SelectedYourLanguages();
+        currentEnableMultiTranslation,
-    const { currentSelectedTargetLanguages, updateSelectedTargetLanguages } = useStore_SelectedTargetLanguages();
+        updateEnableMultiTranslation,
-    const { currentSelectedPresetTabNumber, updateSelectedPresetTabNumber } = useStore_SelectedPresetTabNumber();
+        pendingEnableMultiTranslation,
+    } = useStore_EnableMultiTranslation();
+    const {
+        currentSelectedYourLanguages,
+        updateSelectedYourLanguages,
+        pendingSelectedYourLanguages,
+    } = useStore_SelectedYourLanguages();
+    const {
+        currentSelectedTargetLanguages,
+        updateSelectedTargetLanguages,
+        pendingSelectedTargetLanguages,
+    } = useStore_SelectedTargetLanguages();
+    const {
+        currentSelectedPresetTabNumber,
+        updateSelectedPresetTabNumber,
+        pendingSelectedPresetTabNumber,
+    } = useStore_SelectedPresetTabNumber();
+    const {
+        currentTranslationEngines,
+        updateTranslationEngines,
+        pendingTranslationEngines,
+    } = useStore_TranslationEngines();
+    const {
+        currentSelectedTranslationEngines,
+        updateSelectedTranslationEngines,
+        pendingSelectedTranslationEngines,
+    } = useStore_SelectedTranslationEngines();
 
     const getEnableMultiTranslation = () => {
-        updateEnableMultiTranslation(() => new Promise(() => {}));
+        pendingEnableMultiTranslation();
         asyncStdoutToPython("/get/multi_language_translation");
     };
 
     const getSelectedPresetTabNumber = () => {
-        updateSelectedPresetTabNumber(() => new Promise(() => {}));
+        pendingSelectedPresetTabNumber();
         asyncStdoutToPython("/get/selected_tab_no");
     };
 
     const setSelectedPresetTabNumber = (preset_number) => {
-        updateSelectedPresetTabNumber(() => new Promise(() => {}));
+        pendingSelectedPresetTabNumber();
 
         asyncStdoutToPython("/set/selected_tab_no", preset_number);
     };
 
 
     const getSelectedYourLanguages = () => {
-        updateSelectedYourLanguages(() => new Promise(() => {}));
+        pendingSelectedPresetTabNumber();
         asyncStdoutToPython("/get/selected_your_languages");
     };
 
     const setSelectedYourLanguages = (selected_language_data) => {
-        // updateSelectedYourLanguages(() => new Promise(() => {}));
+        pendingSelectedYourLanguages();
         const send_obj = {
             ...currentSelectedYourLanguages.data,
             [currentSelectedPresetTabNumber.data]: {
@@ -46,12 +72,12 @@ export const useLanguageSettings = () => {
 
 
     const getSelectedTargetLanguages = () => {
-        updateSelectedTargetLanguages(() => new Promise(() => {}));
+        pendingSelectedTargetLanguages();
         asyncStdoutToPython("/get/selected_target_languages");
     };
 
     const setSelectedTargetLanguages = (selected_language_data) => {
-        // updateSelectedTargetLanguages(() => new Promise(() => {}));
+        pendingSelectedTargetLanguages();
         let send_obj = currentSelectedTargetLanguages.data;
 
         send_obj[currentSelectedPresetTabNumber.data].primary.language = selected_language_data.language,
@@ -60,6 +86,25 @@ export const useLanguageSettings = () => {
         asyncStdoutToPython("/set/selected_target_languages", send_obj);
     };
 
+
+    const getTranslationEngines = () => {
+        pendingTranslationEngines();
+        asyncStdoutToPython("/get/list_translation_engines");
+    };
+
+    const getSelectedTranslationEngines = () => {
+        pendingSelectedTranslationEngines();
+        asyncStdoutToPython("/get/selected_translator_engines");
+    };
+
+    const setSelectedTranslationEngines = (selected_translator) => {
+        pendingSelectedTranslationEngines();
+        let send_obj = currentSelectedTranslationEngines.data;
+        send_obj[currentSelectedPresetTabNumber.data] = selected_translator;
+        asyncStdoutToPython("/set/selected_translator_engines", send_obj);
+    };
+
+
     return {
         currentSelectedPresetTabNumber,
         getSelectedPresetTabNumber,
@@ -80,5 +125,14 @@ export const useLanguageSettings = () => {
         getSelectedTargetLanguages,
         updateSelectedTargetLanguages,
         setSelectedTargetLanguages,
+
+        currentTranslationEngines,
+        getTranslationEngines,
+        updateTranslationEngines,
+
+        currentSelectedTranslationEngines,
+        getSelectedTranslationEngines,
+        updateSelectedTranslationEngines,
+        setSelectedTranslationEngines,
     };
 };

src-ui/logics/main/useMainFunction.js

@@ -13,17 +13,17 @@ export const useMainFunction = () => {
     const {
         currentTranslationStatus,
         updateTranslationStatus,
-        asyncUpdateTranslationStatus,
+        pendingTranslationStatus,
     } = useStore_TranslationStatus();
     const {
         currentTranscriptionSendStatus,
         updateTranscriptionSendStatus,
-        asyncUpdateTranscriptionSendStatus,
+        pendingTranscriptionSendStatus,
     } = useStore_TranscriptionSendStatus();
     const {
         currentTranscriptionReceiveStatus,
         updateTranscriptionReceiveStatus,
-        asyncUpdateTranscriptionReceiveStatus,
+        pendingTranscriptionReceiveStatus,
     } = useStore_TranscriptionReceiveStatus();
     const {
         currentForegroundStatus,
@@ -32,9 +32,8 @@ export const useMainFunction = () => {
 
     const { asyncStdoutToPython } = useStdoutToPython();
 
-    const asyncPending = () => new Promise(() => {});
     const toggleTranslation = () => {
-        asyncUpdateTranslationStatus(asyncPending);
+        pendingTranslationStatus();
         if (currentTranslationStatus.data) {
             asyncStdoutToPython("/set/disable_translation");
         } else {
@@ -43,7 +42,7 @@ export const useMainFunction = () => {
     };
 
     const toggleTranscriptionSend = () => {
-        asyncUpdateTranscriptionSendStatus(asyncPending);
+        pendingTranscriptionSendStatus();
         if (currentTranscriptionSendStatus.data) {
             asyncStdoutToPython("/set/disable_transcription_send");
         } else {
@@ -52,7 +51,7 @@ export const useMainFunction = () => {
     };
 
     const toggleTranscriptionReceive = () => {
-        asyncUpdateTranscriptionReceiveStatus(asyncPending);
+        pendingTranscriptionReceiveStatus();
         if (currentTranscriptionReceiveStatus.data) {
             asyncStdoutToPython("/set/disable_transcription_receive");
         } else {

src-ui/logics/useReceiveRoutes.js

@@ -1,3 +1,5 @@
+import { translator_status } from "@data";
+
 import { arrayToObject } from "@utils/arrayToObject";
 import { useMainFunction } from "@logics_main/useMainFunction";
 import { useMessage } from "@logics_common/useMessage";
@@ -31,7 +33,9 @@ export const useReceiveRoutes = () => {
         updateSelectedPresetTabNumber,
         updateEnableMultiTranslation,
         updateSelectedYourLanguages,
-        updateSelectedTargetLanguages
+        updateSelectedTargetLanguages,
+        updateTranslationEngines,
+        updateSelectedTranslationEngines,
     } = useLanguageSettings();
     const { updateSelectableLanguageList } = useSelectableLanguageList();
     const {
@@ -78,6 +82,21 @@ export const useReceiveRoutes = () => {
         "/set/selected_your_languages": updateSelectedYourLanguages,
         "/get/selected_target_languages": updateSelectedTargetLanguages,
         "/set/selected_target_languages": updateSelectedTargetLanguages,
+        "/get/list_translation_engines": (payload) => {
+            const updateTranslatorAvailability = (keys) => {
+                return translator_status.map(translator => ({
+                    ...translator,
+                    is_available: keys.includes(translator.translator_id),
+                }));
+            };
+
+            const updated_list = updateTranslatorAvailability(payload);
+
+            updateTranslationEngines(updated_list);
+        },
+        "/get/selected_translator_engines": updateSelectedTranslationEngines,
+        "/set/selected_translator_engines": updateSelectedTranslationEngines,
+
 
         // Language Selector
         "/get/list_languages": updateSelectableLanguageList,
@@ -155,7 +174,7 @@ export const useReceiveRoutes = () => {
                 break;
 
             case 348:
-                console.log(`from backend: %c ${JSON.stringify(parsed_data)}`, style_348);
+                // console.log(`from backend: %c ${JSON.stringify(parsed_data)}`, style_348);
                 break;
 
             default:

src-ui/store.js

@@ -5,7 +5,7 @@ import {
 } from "jotai";
 
 import {
-    translator_list,
+    translator_status,
     generateTestData,
     word_filter_list,
 } from "@data";
@@ -17,30 +17,77 @@ export const store = {
 };
 
 const generatePropertyNames = (base_ame) => ({
+    error: `error${base_ame}`,
+    pending: `pending${base_ame}`,
     current: `current${base_ame}`,
     update: `update${base_ame}`,
+    updatePart: `updatePart${base_ame}`,
     async_update: `asyncUpdate${base_ame}`,
     add: `add${base_ame}`,
     async_add: `asyncAdd${base_ame}`,
 });
 
-const createAtomWithHook = (initialValue, base_ame) => {
+
+const createAtomWithHook_WIP = (initialValue, base_ame, options) => {
     const property_names = generatePropertyNames(base_ame);
-    const atomInstance = atom(initialValue);
+    const atomInstance = atom({
+        state: (options?.is_state_ok) ? "ok" : "pending",
+        data: initialValue,
+    });
 
     const useHook = () => {
         const currentAtom = useAtomValue(atomInstance);
         const setAtom = useSetAtom(atomInstance);
 
-        const updateAtom = (value) => {
+        const pendingAtom = () => {
-            setAtom(value);
+            setAtom((old_value) => {
+                let new_value = {
+                    state: "pending",
+                    data: old_value.data,
+                };
+                return new_value;
+            });
+        };
+
+        const updateAtom = (payload) => {
+            setAtom((currentValue) => {
+                if (typeof payload === "function") {
+                    const updated_data = payload(currentValue);
+                    return {
+                        state: "ok",
+                        data: updated_data,
+                    };
+                } else {
+                    return {
+                        state: "ok",
+                        data: payload,
+                    };
+                }
+            });
+        };
+
+        const errorAtom = () => {
+            setAtom((old_value) => {
+                let new_value = {
+                    state: "error",
+                    data: old_value.data,
+                };
+                return new_value;
+            });
         };
 
         const addAtom = (value) => {
-            setAtom((old_value) => [...old_value, value]);
+            setAtom((old_value) => {
+                return {
+                    state: "ok",
+                    data: [...old_value.data, value],
+                };
+            });
         };
 
         return {
+            [property_names.error]: errorAtom,
+            [property_names.pending]: pendingAtom,
             [property_names.current]: currentAtom,
             [property_names.update]: updateAtom,
             [property_names.add]: addAtom,
@@ -50,145 +97,78 @@ const createAtomWithHook = (initialValue, base_ame) => {
     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) => {
+export const { atomInstance: Atom_SoftwareVersion, useHook: useStore_SoftwareVersion } = createAtomWithHook_WIP("-", "SoftwareVersion");
-            setAtom(value);
-        };
 
-        const asyncSetAtom = useSetAtom(atom(null, async (get, set, payloadAsyncFunc, ...args) => {
+export const { atomInstance: Atom_TranslationStatus, useHook: useStore_TranslationStatus } = createAtomWithHook_WIP(false, "TranslationStatus", {is_state_ok: true});
-            set(atomInstance, payloadAsyncFunc(...args));
+export const { atomInstance: Atom_TranscriptionSendStatus, useHook: useStore_TranscriptionSendStatus } = createAtomWithHook_WIP(false, "TranscriptionSendStatus", {is_state_ok: true});
-        }));
+export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useStore_TranscriptionReceiveStatus } = createAtomWithHook_WIP(false, "TranscriptionReceiveStatus", {is_state_ok: true});
+export const { atomInstance: Atom_ForegroundStatus, useHook: useStore_ForegroundStatus } = createAtomWithHook_WIP(false, "ForegroundStatus", {is_state_ok: true});
 
-        const asyncUpdateAtom = async (asyncFunction, ...args) => {
+export const { atomInstance: Atom_MessageLogs, useHook: useStore_MessageLogs } = createAtomWithHook_WIP(generateTestData(20), "MessageLogs");
-            asyncSetAtom(asyncFunction, ...args);
+export const { atomInstance: Atom_IsMainPageCompactMode, useHook: useStore_IsMainPageCompactMode } = createAtomWithHook_WIP(false, "IsMainPageCompactMode");
-        };
 
-        const addAtom = (value) => {
+export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_IsOpenedLanguageSelector } = createAtomWithHook_WIP(
-            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 };
-};
-
-export const { atomInstance: Atom_SoftwareVersion, useHook: useStore_SoftwareVersion } = createAtomWithHook("-", "SoftwareVersion");
-
-export const { atomInstance: Atom_TranslationStatus, useHook: useStore_TranslationStatus } = createAsyncAtomWithHook(false, "TranslationStatus");
-export const { atomInstance: Atom_TranscriptionSendStatus, useHook: useStore_TranscriptionSendStatus } = createAsyncAtomWithHook(false, "TranscriptionSendStatus");
-export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useStore_TranscriptionReceiveStatus } = createAsyncAtomWithHook(false, "TranscriptionReceiveStatus");
-export const { atomInstance: Atom_ForegroundStatus, useHook: useStore_ForegroundStatus } = createAsyncAtomWithHook(false, "ForegroundStatus");
-
-export const { atomInstance: Atom_MessageLogs, useHook: useStore_MessageLogs } = createAtomWithHook(generateTestData(20), "MessageLogs");
-export const { atomInstance: Atom_IsMainPageCompactMode, useHook: useStore_IsMainPageCompactMode } = createAtomWithHook(false, "IsMainPageCompactMode");
-
-export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_IsOpenedLanguageSelector } = createAtomWithHook(
     { your_language: false, target_language: false },
     "IsOpenedLanguageSelector"
 );
-export const { atomInstance: Atom_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook([], "SelectableLanguageList");
+export const { atomInstance: Atom_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook_WIP([], "SelectableLanguageList");
 
-export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAsyncAtomWithHook("", "SelectedPresetTabNumber");
+export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAtomWithHook_WIP("", "SelectedPresetTabNumber");
-export const { atomInstance: Atom_EnableMultiTranslation, useHook: useStore_EnableMultiTranslation } = createAsyncAtomWithHook(false, "EnableMultiTranslation");
+export const { atomInstance: Atom_EnableMultiTranslation, useHook: useStore_EnableMultiTranslation } = createAtomWithHook_WIP(false, "EnableMultiTranslation");
-export const { atomInstance: Atom_SelectedYourLanguages, useHook: useStore_SelectedYourLanguages } = createAsyncAtomWithHook({}, "SelectedYourLanguages");
+export const { atomInstance: Atom_SelectedYourLanguages, useHook: useStore_SelectedYourLanguages } = createAtomWithHook_WIP({}, "SelectedYourLanguages");
-export const { atomInstance: Atom_SelectedTargetLanguages, useHook: useStore_SelectedTargetLanguages } = createAsyncAtomWithHook({}, "SelectedTargetLanguages");
+export const { atomInstance: Atom_SelectedTargetLanguages, useHook: useStore_SelectedTargetLanguages } = createAtomWithHook_WIP({}, "SelectedTargetLanguages");
 
 
-export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
+export const { atomInstance: Atom_TranslationEngines, useHook: useStore_TranslationEngines } = createAtomWithHook_WIP(translator_status, "TranslationEngines");
-export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId");
+export const { atomInstance: Atom_SelectedTranslationEngines, useHook: useStore_SelectedTranslationEngines } = createAtomWithHook_WIP({}, "SelectedTranslationEngines");
-export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useStore_IsOpenedDropdownMenu } = createAtomWithHook("", "IsOpenedDropdownMenu");
+
+
+export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook_WIP(false, "IsOpenedConfigPage");
+export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook_WIP("device", "SelectedConfigTabId");
+export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useStore_IsOpenedDropdownMenu } = createAtomWithHook_WIP("", "IsOpenedDropdownMenu");
 
 
 // Config Page
-export const { atomInstance: Atom_EnableAutoMicSelect, useHook: useStore_EnableAutoMicSelect } = createAsyncAtomWithHook(true, "EnableAutoMicSelect");
+export const { atomInstance: Atom_EnableAutoMicSelect, useHook: useStore_EnableAutoMicSelect } = createAtomWithHook_WIP(true, "EnableAutoMicSelect");
-export const { atomInstance: Atom_EnableAutoSpeakerSelect, useHook: useStore_EnableAutoSpeakerSelect } = createAsyncAtomWithHook(true, "EnableAutoSpeakerSelect");
+export const { atomInstance: Atom_EnableAutoSpeakerSelect, useHook: useStore_EnableAutoSpeakerSelect } = createAtomWithHook_WIP(true, "EnableAutoSpeakerSelect");
 
-export const { atomInstance: Atom_MicHostList, useHook: useStore_MicHostList } = createAsyncAtomWithHook({}, "MicHostList");
+export const { atomInstance: Atom_MicHostList, useHook: useStore_MicHostList } = createAtomWithHook_WIP({}, "MicHostList");
-export const { atomInstance: Atom_SelectedMicHost, useHook: useStore_SelectedMicHost } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicHost");
+export const { atomInstance: Atom_SelectedMicHost, useHook: useStore_SelectedMicHost } = createAtomWithHook_WIP("Nothing Selected", "SelectedMicHost");
-export const { atomInstance: Atom_MicDeviceList, useHook: useStore_MicDeviceList } = createAsyncAtomWithHook({}, "MicDeviceList");
+export const { atomInstance: Atom_MicDeviceList, useHook: useStore_MicDeviceList } = createAtomWithHook_WIP({}, "MicDeviceList");
-export const { atomInstance: Atom_SelectedMicDevice, useHook: useStore_SelectedMicDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicDevice");
+export const { atomInstance: Atom_SelectedMicDevice, useHook: useStore_SelectedMicDevice } = createAtomWithHook_WIP("Nothing Selected", "SelectedMicDevice");
 
-export const { atomInstance: Atom_SpeakerDeviceList, useHook: useStore_SpeakerDeviceList } = createAsyncAtomWithHook({}, "SpeakerDeviceList");
+export const { atomInstance: Atom_SpeakerDeviceList, useHook: useStore_SpeakerDeviceList } = createAtomWithHook_WIP({}, "SpeakerDeviceList");
-export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useStore_SelectedSpeakerDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedSpeakerDevice");
+export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useStore_SelectedSpeakerDevice } = createAtomWithHook_WIP("Nothing Selected", "SelectedSpeakerDevice");
 
-export const { atomInstance: Atom_MicVolume, useHook: useStore_MicVolume } = createAsyncAtomWithHook(0, "MicVolume");
+export const { atomInstance: Atom_MicVolume, useHook: useStore_MicVolume } = createAtomWithHook_WIP(0, "MicVolume");
-export const { atomInstance: Atom_SpeakerVolume, useHook: useStore_SpeakerVolume } = createAsyncAtomWithHook(0, "SpeakerVolume");
+export const { atomInstance: Atom_SpeakerVolume, useHook: useStore_SpeakerVolume } = createAtomWithHook_WIP(0, "SpeakerVolume");
 
-export const { atomInstance: Atom_MicThresholdCheckStatus, useHook: useStore_MicThresholdCheckStatus } = createAsyncAtomWithHook(false, "MicThresholdCheckStatus");
+export const { atomInstance: Atom_MicThresholdCheckStatus, useHook: useStore_MicThresholdCheckStatus } = createAtomWithHook_WIP(false, "MicThresholdCheckStatus", {is_state_ok: true});
-export const { atomInstance: Atom_SpeakerThresholdCheckStatus, useHook: useStore_SpeakerThresholdCheckStatus } = createAsyncAtomWithHook(false, "SpeakerThresholdCheckStatus");
+export const { atomInstance: Atom_SpeakerThresholdCheckStatus, useHook: useStore_SpeakerThresholdCheckStatus } = createAtomWithHook_WIP(false, "SpeakerThresholdCheckStatus", {is_state_ok: true});
 
-export const { atomInstance: Atom_MicThreshold, useHook: useStore_MicThreshold } = createAtomWithHook(0, "MicThreshold");
+export const { atomInstance: Atom_MicThreshold, useHook: useStore_MicThreshold } = createAtomWithHook_WIP(0, "MicThreshold");
-export const { atomInstance: Atom_SpeakerThreshold, useHook: useStore_SpeakerThreshold } = createAtomWithHook(0, "SpeakerThreshold");
+export const { atomInstance: Atom_SpeakerThreshold, useHook: useStore_SpeakerThreshold } = createAtomWithHook_WIP(0, "SpeakerThreshold");
 
-export const { atomInstance: Atom_EnableAutomaticMicThreshold, useHook: useStore_EnableAutomaticMicThreshold } = createAsyncAtomWithHook(false, "EnableAutomaticMicThreshold");
+export const { atomInstance: Atom_EnableAutomaticMicThreshold, useHook: useStore_EnableAutomaticMicThreshold } = createAtomWithHook_WIP(false, "EnableAutomaticMicThreshold");
-export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useStore_EnableAutomaticSpeakerThreshold } = createAsyncAtomWithHook(false, "EnableAutomaticSpeakerThreshold");
+export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useStore_EnableAutomaticSpeakerThreshold } = createAtomWithHook_WIP(false, "EnableAutomaticSpeakerThreshold");
 
 
 // Appearance
-export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAsyncAtomWithHook("en", "UiLanguage");
+export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook_WIP("en", "UiLanguage");
 
 
-
+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");
-
-
-
-
-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(false, "IsOpenedWordFilterList");
-export const { atomInstance: Atom_WordFilterList, useHook: useStore_WordFilterList } = createAtomWithHook(word_filter_list, "WordFilterList");
 
 
 // Others
-export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useStore_EnableAutoClearMessageBox } = createAsyncAtomWithHook(true, "EnableAutoClearMessageBox");
+export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useStore_EnableAutoClearMessageBox } = createAtomWithHook_WIP(true, "EnableAutoClearMessageBox");
-export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAsyncAtomWithHook("show", "SendMessageButtonType");
+export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAtomWithHook_WIP("show", "SendMessageButtonType");
 
 
-export const { atomInstance: Atom_TranslatorList, useHook: useStore_TranslatorList } = createAtomWithHook(translator_list, "TranslatorList");
+export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook_WIP(false, "IsOpenedTranslatorSelector");
-export const { atomInstance: Atom_SelectedTranslatorId, useHook: useStore_SelectedTranslatorId } = createAtomWithHook("CTranslate2", "SelectedTranslatorId");
-export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");
 
-export const { atomInstance: Atom_VrctPosterIndex, useHook: useStore_VrctPosterIndex } = createAtomWithHook(0, "VrctPosterIndex");
+export const { atomInstance: Atom_VrctPosterIndex, useHook: useStore_VrctPosterIndex } = createAtomWithHook_WIP(0, "VrctPosterIndex");
-export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: useStore_PosterShowcaseWorldPageIndex } = createAtomWithHook(0, "PosterShowcaseWorldPageIndex");
+export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: useStore_PosterShowcaseWorldPageIndex } = createAtomWithHook_WIP(0, "PosterShowcaseWorldPageIndex");