[Update] Config Window: Add MessageFormat component.

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

@@ -15,6 +15,7 @@ export const Appearance = () => {
         ThresholdContainer,
         RadioButtonContainer,
         DeeplAuthKeyContainer,
+        MessageFormatContainer,
     } = useSettingBox();
 
     const selectFunction = (selected_data) => {
@@ -44,6 +45,10 @@ export const Appearance = () => {
             <ThresholdContainer label="Transparent" desc="description" id="mic_threshold"  min="0" max="3000"/>
 
             <DeeplAuthKeyContainer label={t(`config_window.deepl_auth_key.label`)} desc={t(`config_window.deepl_auth_key.desc`)}/>
+
+            <MessageFormatContainer label={t(`config_window.send_message_format.label`)} desc={t(`config_window.send_message_format.desc`)}/>
+
+            <MessageFormatContainer label={t(`config_window.send_message_format_with_t.label`)} desc={t(`config_window.send_message_format_with_t.desc`)} with_t={true}/>
         </>
     );
 };

src-ui/windows/config_window/setting_section/setting_box/components/_atoms/_Entry.module.scss

@@ -1,3 +1,7 @@
+.entry_container {
+    width: 100%;
+}
+
 .entry_wrapper {
     width: 10rem;
     height: 100%;

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

@@ -0,0 +1,76 @@
+import styles from "./MessageFormat.module.scss";
+import { useTranslation } from "react-i18next";
+
+export const MessageFormat = (props) => {
+
+    return (
+        <div className={styles.container}>
+            <ExampleComponent {...props}/>
+            <InputComponent {...props}/>
+            {
+                props.with_t
+                ? <SwapButton/>
+                : null
+            }
+        </div>
+    );
+};
+
+const ExampleComponent = (props) => {
+    const { t } = useTranslation();
+
+    const createExampleMessage = () => {
+        return t("config_window.send_message_format.example_text");
+    };
+
+    return (
+        <div className={styles.example_container}>
+            <p className={styles.example_text}>{createExampleMessage()}</p>
+        </div>
+    );
+};
+
+
+import { _Entry } from "../_atoms/_Entry";
+const InputComponent = (props) => {
+    const { t } = useTranslation();
+
+    const onChangeInput = (e) => {
+        console.log(e.target.value);
+    };
+
+    return (
+        <div className={styles.input_wrapper}>
+            <_Entry width="100%" onChange={onChangeInput} />
+            <p className={styles.preset_text}>[message]</p>
+            <_Entry width="100%" onChange={onChangeInput} />
+            {
+                props.with_t
+                ? (<>
+                    <p className={styles.preset_text}>[translation]</p>
+                    <_Entry width="100%" onChange={onChangeInput} />
+                    </>)
+                : null
+            }
+        </div>
+    );
+};
+
+
+import SwapImg from "@images/swap_icon.png";
+const SwapButton = () => {
+    const swapMessageAndTranslate = () => {
+
+    };
+
+    return (
+        <div className={styles.swap_button_container}>
+            <div className={styles.swap_button_wrapper} onClick={swapMessageAndTranslate}>
+                <p className={styles.swap_text}>[message]</p>
+                <img className={styles.swap_img} src={SwapImg} />
+                <p className={styles.swap_text}>[translate]</p>
+            </div>
+        </div>
+
+    );
+};

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

@@ -0,0 +1,65 @@
+.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: 100%;
+    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/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx

@@ -1,5 +1,6 @@
 import styles from "./useSettingBox.module.scss";
 import { useIsOpenedDropdownMenu } from "@store";
+import clsx from "clsx";
 
 import { LabelComponent } from "./label_component/LabelComponent";
 import { DropdownMenu } from "./dropdown_menu/DropdownMenu";
@@ -10,6 +11,7 @@ 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";
 
 export const useSettingBox = () => {
     const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
@@ -98,6 +100,20 @@ 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>
+        );
+    };
+
     return {
         DropdownMenuContainer,
         SliderContainer,
@@ -107,5 +123,6 @@ export const useSettingBox = () => {
         ThresholdContainer,
         RadioButtonContainer,
         DeeplAuthKeyContainer,
+        MessageFormatContainer,
     };
 };

src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.module.scss

@@ -8,6 +8,14 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 2rem;
+    &.flex_column {
+        flex-direction: column;
+    }
+}
+
+.label_only_section {
+    width: 100%;
 }
 
 .threshold_container {
@@ -40,3 +48,7 @@
     align-items: center;
     gap: 1.4rem;
 }
+
+.message_format_section {
+    width: 100%;
+}