From 28a602e01e9935a55822ca69eaad5fe0c2fdc0ae Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sun, 8 Sep 2024 17:43:54 +0900
Subject: [PATCH 1/5] [Update] Config Page: Add Others Tab. Add section Auto
 Clear Message Box.

---
 .../setting_box/SettingBox.jsx                |  3 ++
 .../components/checkbox/Checkbox.jsx          | 22 ++++++--------
 .../components/checkbox/Checkbox.module.scss  |  9 +++++-
 .../setting_box/others/Others.jsx             | 30 +++++++++++++++++++
 src-ui/logics/useConfig.js                    | 19 ++++++++++++
 src-ui/logics/useReceiveRoutes.js             |  6 ++++
 src-ui/store.js                               |  8 +++++
 7 files changed, 83 insertions(+), 14 deletions(-)
 create mode 100644 src-ui/app/config_page/setting_section/setting_box/others/Others.jsx

diff --git a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
index a38b4f1e..90669da1 100644
--- a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
@@ -2,6 +2,7 @@ import { useSelectedConfigTabId } from "@store";
 
 import { Device } from "./device/Device";
 import { Appearance } from "./appearance/Appearance";
+import { Others } from "./others/Others";
 import { AboutVrct } from "./about_vrct/AboutVrct";
 
 export const SettingBox = () => {
@@ -9,6 +10,8 @@ export const SettingBox = () => {
     switch (currentSelectedConfigTabId) {
         case "device":
             return <Device />;
+        case "others":
+            return <Others />;
         // case "appearance":
         //     return <Appearance />;
         // case "about_vrct":
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.jsx b/src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.jsx
index 8a518eb6..c1916fc8 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.jsx
@@ -1,22 +1,18 @@
-import React, { useState } from 'react';
 import styles from "./Checkbox.module.scss";
 
 export const Checkbox = (props) => {
-    const [isChecked, setIsChecked] = useState(false);
-
-    const handleCheckboxChange = () => {
-        setIsChecked(!isChecked);
-    };
-
     return (
         <div className={styles.checkbox_container}>
             <label className={styles.checkbox_wrapper} htmlFor={props.checkbox_id}>
-                <input
-                    type="checkbox"
-                    id={props.checkbox_id}
-                    checked={isChecked}
-                    onChange={handleCheckboxChange}
-                />
+                {(props.state === "loading")
+                    ? <span className={styles.loader}></span>
+                    : <input
+                        type="checkbox"
+                        id={props.checkbox_id}
+                        checked={props.variable.data}
+                        onChange={props.toggleFunction}
+                    />
+                }
                 <span className={styles.cbx}>
                     <svg viewBox="0 0 12 12">
                         <polyline points="1 6.29411765 4.5 10 11 1"></polyline>
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.module.scss
index 4dc0ba83..a4364962 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.module.scss
@@ -1,5 +1,7 @@
+@import "@scss_mixins";
+
 .checkbox_container {
-    width: 100%;
+    // width: 100%;
     height: 100%;
     display: flex;
     justify-content: end;
@@ -10,6 +12,7 @@
     display: inline-block;
     cursor: pointer;
     padding: 2rem;
+    position: relative;
     &:hover {
         & .cbx {
             border: var(--primary_600_color) solid 0.2rem;
@@ -51,3 +54,7 @@
     stroke-dashoffset: 0;
     transition: all 0.15s ease;
 }
+
+.loader {
+    @include loader(2rem, 0.2rem, right, -2rem);
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
new file mode 100644
index 00000000..4995e6e7
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
@@ -0,0 +1,30 @@
+import { useTranslation } from "react-i18next";
+import { useSettingBox } from "../components/useSettingBox";
+// import {
+//     useEnableAutoClearMessageBox,
+// } from "@store";
+
+import { useConfig } from "@logics/useConfig";
+
+export const Others = () => {
+    const { t } = useTranslation();
+    const {
+        CheckboxContainer,
+        RadioButtonContainer,
+    } = useSettingBox();
+
+    const { currentEnableAutoClearMessageBox, toggleEnableAutoClearMessageBox } = useConfig();
+
+
+    return (
+        <>
+            <CheckboxContainer
+                label={t("config_page.auto_clear_the_message_box.label")}
+                variable={currentEnableAutoClearMessageBox}
+                toggleFunction={toggleEnableAutoClearMessageBox}
+            />
+
+            {/* <RadioButtonContainer label={t("config_page.send_message_button_type.label")} checkbox_id="checkbox_id_1"/> */}
+        </>
+    );
+};
\ No newline at end of file
diff --git a/src-ui/logics/useConfig.js b/src-ui/logics/useConfig.js
index fb7c54fc..f609bebb 100644
--- a/src-ui/logics/useConfig.js
+++ b/src-ui/logics/useConfig.js
@@ -6,6 +6,8 @@ import {
     useSelectedMicDevice,
     useSpeakerDeviceList,
     useSelectedSpeakerDevice,
+
+    useEnableAutoClearMessageBox,
 } from "@store";
 
 import { useStdoutToPython } from "./useStdoutToPython";
@@ -22,6 +24,7 @@ export const useConfig = () => {
     const { updateSelectedMicDevice } = useSelectedMicDevice();
     const { updateSpeakerDeviceList } = useSpeakerDeviceList();
     const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
+    const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
 
 
     const asyncPending = () => new Promise(() => {});
@@ -95,5 +98,21 @@ export const useConfig = () => {
         },
 
 
+
+        // Others
+        toggleEnableAutoClearMessageBox: () => {
+            updateEnableAutoClearMessageBox(asyncPending);
+            if (currentEnableAutoClearMessageBox.data) {
+                asyncStdoutToPython("/controller/callback_disable_auto_clear_chatbox");
+            } else {
+                asyncStdoutToPython("/controller/callback_enable_auto_clear_chatbox");
+            }
+        },
+        currentEnableAutoClearMessageBox: currentEnableAutoClearMessageBox,
+        updateEnableAutoClearMessageBox: (payload) => {
+            updateEnableAutoClearMessageBox(payload.data);
+        },
+
+
     };
 };
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index f624513d..ed751668 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -26,6 +26,8 @@ export const useReceiveRoutes = () => {
 
         updateSpeakerDeviceList,
         updateSelectedSpeakerDevice,
+
+        updateEnableAutoClearMessageBox,
     } = useConfig();
 
     const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume();
@@ -56,6 +58,10 @@ export const useReceiveRoutes = () => {
         "/action/check_mic_threshold_energy": updateVolumeVariable_Mic,
         "/action/check_speaker_threshold_energy": updateVolumeVariable_Speaker,
 
+        "/controller/callback_enable_auto_clear_chatbox": updateEnableAutoClearMessageBox,
+        "/controller/callback_disable_auto_clear_chatbox": updateEnableAutoClearMessageBox,
+
+
 
         "/controller/callback_messagebox_send": updateSentMessageLog,
         "/action/transcription_send_mic_message": addSentMessageLog,
diff --git a/src-ui/store.js b/src-ui/store.js
index 0bafb5d0..e47e40df 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -152,6 +152,14 @@ export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useIsOpenedWo
 export const { atomInstance: Atom_WordFilterList, useHook: useWordFilterList } = createAtomWithHook(word_filter_list, "WordFilterList");
 
 
+
+// Others
+export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useEnableAutoClearMessageBox } = createAsyncAtomWithHook(true, "EnableAutoClearMessageBox");
+
+
+
+
+
 export const { atomInstance: Atom_TranslatorListStatus, useHook: useTranslatorListStatus } = createAtomWithHook(translator_list, "TranslatorListStatus");
 export const { atomInstance: Atom_SelectedTranslatorIdStatus, useHook: useSelectedTranslatorIdStatus } = createAtomWithHook("CTranslate2", "SelectedTranslatorIdStatus");
 export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useIsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");

From 6aa427baec78d56743735ac1976a83c5a5f782d5 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sun, 8 Sep 2024 18:14:58 +0900
Subject: [PATCH 2/5] [Update] Main Page: Message input box. Add function, auto
 clear message box.

---
 src-ui/app/App.jsx                                         | 4 ++++
 .../message_input_box/MessageInputBox.jsx                  | 7 ++++++-
 src-ui/logics/useConfig.js                                 | 4 ++++
 src-ui/logics/useReceiveRoutes.js                          | 1 +
 4 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx
index 03e80cad..b9abafcc 100644
--- a/src-ui/app/App.jsx
+++ b/src-ui/app/App.jsx
@@ -29,6 +29,8 @@ const StartPythonFacadeComponent = () => {
         // getMicDeviceList,
         getSelectedMicDevice,
         getSelectedSpeakerDevice,
+
+        getEnableAutoClearMessageBox,
     } = useConfig();
 
 
@@ -42,6 +44,8 @@ const StartPythonFacadeComponent = () => {
                 // getMicDeviceList();
                 getSelectedMicDevice();
                 getSelectedSpeakerDevice();
+
+                getEnableAutoClearMessageBox();
             }).catch((err) => {
                 console.error(err);
             });
diff --git a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
index 951ec4b8..9664dced 100644
--- a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
+++ b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import styles from "./MessageInputBox.module.scss";
 import SendMessageSvg from "@images/send_message.svg?react";
 import { useMessage } from "@logics/useMessage";
-import { store } from "@store";
+import { store, useEnableAutoClearMessageBox } from "@store";
 import { scrollToBottom } from "@logics/scrollToBottom";
 
 
@@ -10,10 +10,14 @@ export const MessageInputBox = () => {
     const [inputValue, setInputValue] = useState("");
     const { sendMessage } = useMessage();
 
+    const { currentEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
+
     const onSubmitFunction = (e) => {
         e.preventDefault();
         sendMessage(inputValue);
 
+        if (currentEnableAutoClearMessageBox.data) setInputValue("");
+
         setTimeout(() => {
             scrollToBottom(store.log_box_ref);
         }, 10);
@@ -31,6 +35,7 @@ export const MessageInputBox = () => {
                     className={styles.message_box_input_area}
                     onChange={onChangeFunction}
                     placeholder="Input Textfield"
+                    value={inputValue}
                 />
             </div>
             <button
diff --git a/src-ui/logics/useConfig.js b/src-ui/logics/useConfig.js
index f609bebb..1c6e5705 100644
--- a/src-ui/logics/useConfig.js
+++ b/src-ui/logics/useConfig.js
@@ -100,6 +100,10 @@ export const useConfig = () => {
 
 
         // Others
+        getEnableAutoClearMessageBox: () => {
+            updateEnableAutoClearMessageBox(asyncPending);
+            asyncStdoutToPython("/config/enable_auto_clear_message_box");
+        },
         toggleEnableAutoClearMessageBox: () => {
             updateEnableAutoClearMessageBox(asyncPending);
             if (currentEnableAutoClearMessageBox.data) {
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index ed751668..b856d752 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -58,6 +58,7 @@ export const useReceiveRoutes = () => {
         "/action/check_mic_threshold_energy": updateVolumeVariable_Mic,
         "/action/check_speaker_threshold_energy": updateVolumeVariable_Speaker,
 
+        "/config/enable_auto_clear_message_box": updateEnableAutoClearMessageBox,
         "/controller/callback_enable_auto_clear_chatbox": updateEnableAutoClearMessageBox,
         "/controller/callback_disable_auto_clear_chatbox": updateEnableAutoClearMessageBox,
 

From 2b9061d74d205e7911912139b05326a625741060 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sun, 8 Sep 2024 23:13:18 +0900
Subject: [PATCH 3/5] [Update] Config Page: Others Tab. Add section, send
 message button type.

---
 src-ui/app/App.jsx                            |  2 +
 .../components/radio_button/RadioButton.jsx   | 37 ++++++++++---------
 .../radio_button/RadioButton.module.scss      |  7 ++++
 .../setting_box/others/Others.jsx             | 12 +++++-
 src-ui/logics/useConfig.js                    | 16 ++++++++
 src-ui/logics/useReceiveRoutes.js             |  3 ++
 src-ui/store.js                               |  2 +-
 7 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx
index b9abafcc..03ae751f 100644
--- a/src-ui/app/App.jsx
+++ b/src-ui/app/App.jsx
@@ -31,6 +31,7 @@ const StartPythonFacadeComponent = () => {
         getSelectedSpeakerDevice,
 
         getEnableAutoClearMessageBox,
+        getSendMessageButtonType,
     } = useConfig();
 
 
@@ -46,6 +47,7 @@ const StartPythonFacadeComponent = () => {
                 getSelectedSpeakerDevice();
 
                 getEnableAutoClearMessageBox();
+                getSendMessageButtonType();
             }).catch((err) => {
                 console.error(err);
             });
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.jsx b/src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.jsx
index 3a409752..11fcfb83 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.jsx
@@ -1,27 +1,28 @@
-import clsx from "clsx";
-import { useState } from "react";
 import styles from "./RadioButton.module.scss";
 
 export const RadioButton = (props) => {
-    const options = [
-        { radio_button_id: "1", label: "AAAAAAAA" },
-        { radio_button_id: "2", label: "BBBBBB" }
-    ];
-
-    const changeValue = (e) => {
-        console.log(e.target.value);
-    };
-
     return (
         <div className={styles.container}>
-            {options.map((option) => (
+            {props.options.map((option) => (
                 <label key={option.radio_button_id} className={styles.radio_button_wrapper}>
-                    <input
-                        type="radio"
-                        name="radio"
-                        value={option.radio_button_id}
-                        onChange={changeValue}
-                    />
+                    {props.checked_variable.data === option.radio_button_id
+                        ? <>
+                            { props.checked_variable.state === "loading" && <span className={styles.loader}></span> }
+                            <input
+                                type="radio"
+                                name="radio"
+                                value={option.radio_button_id}
+                                onChange={() => props.selectFunction(option.radio_button_id)}
+                                checked
+                            />
+                        </>
+                        : <input
+                            type="radio"
+                            name="radio"
+                            value={option.radio_button_id}
+                            onChange={() => props.selectFunction(option.radio_button_id)}
+                        />
+                    }
                     <p className={styles.radio_button_label}>{option.label}</p>
                 </label>
             ))}
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.module.scss
index ba631f17..b8e82e23 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.module.scss
@@ -1,3 +1,5 @@
+@import "@scss_mixins";
+
 .container {
     display: flex;
     flex-direction: column;
@@ -12,6 +14,7 @@
     gap: 1rem;
     padding: 0.6rem 0.8rem;
     border-radius: 0.4rem;
+    position: relative;
     &:hover {
         background-color: var(--dark_800_color);
     }
@@ -38,4 +41,8 @@ input[type="radio"] {
 .radio_button_label {
     font-size: 1.4rem;
     font-weight: 300;
+}
+
+.loader {
+    @include loader(2rem, 0.2rem, left, -1.6rem);
 }
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
index 4995e6e7..dabb27d1 100644
--- a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
@@ -14,6 +14,7 @@ export const Others = () => {
     } = useSettingBox();
 
     const { currentEnableAutoClearMessageBox, toggleEnableAutoClearMessageBox } = useConfig();
+    const { currentSendMessageButtonType, setSendMessageButtonType } = useConfig();
 
 
     return (
@@ -24,7 +25,16 @@ export const Others = () => {
                 toggleFunction={toggleEnableAutoClearMessageBox}
             />
 
-            {/* <RadioButtonContainer label={t("config_page.send_message_button_type.label")} checkbox_id="checkbox_id_1"/> */}
+            <RadioButtonContainer
+                label={t("config_page.send_message_button_type.label")}
+                selectFunction={setSendMessageButtonType}
+                options={[
+                    { radio_button_id: "hide", label: t("config_page.send_message_button_type.hide") },
+                    { radio_button_id: "show", label: t("config_page.send_message_button_type.show") },
+                    { radio_button_id: "show_and_disable_enter_key", label: t("config_page.send_message_button_type.show_and_disable_enter_key") },
+                ]}
+                checked_variable={currentSendMessageButtonType}
+            />
         </>
     );
 };
\ No newline at end of file
diff --git a/src-ui/logics/useConfig.js b/src-ui/logics/useConfig.js
index 1c6e5705..1557c119 100644
--- a/src-ui/logics/useConfig.js
+++ b/src-ui/logics/useConfig.js
@@ -8,6 +8,7 @@ import {
     useSelectedSpeakerDevice,
 
     useEnableAutoClearMessageBox,
+    useSendMessageButtonType,
 } from "@store";
 
 import { useStdoutToPython } from "./useStdoutToPython";
@@ -25,6 +26,7 @@ export const useConfig = () => {
     const { updateSpeakerDeviceList } = useSpeakerDeviceList();
     const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
     const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
+    const { currentSendMessageButtonType, updateSendMessageButtonType } = useSendMessageButtonType();
 
 
     const asyncPending = () => new Promise(() => {});
@@ -117,6 +119,20 @@ export const useConfig = () => {
             updateEnableAutoClearMessageBox(payload.data);
         },
 
+        getSendMessageButtonType: () => {
+            updateSendMessageButtonType(asyncPending);
+            asyncStdoutToPython("/config/send_message_button_type");
+        },
+        setSendMessageButtonType: (selected_type) => {
+            updateSendMessageButtonType(asyncPending);
+            asyncStdoutToPython("/controller/callback_set_send_message_button_type", selected_type);
+        },
+        currentSendMessageButtonType: currentSendMessageButtonType,
+        updateSendMessageButtonType: (payload) => {
+            updateSendMessageButtonType(payload.data);
+        },
+
+
 
     };
 };
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index b856d752..18d5ecd5 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -28,6 +28,7 @@ export const useReceiveRoutes = () => {
         updateSelectedSpeakerDevice,
 
         updateEnableAutoClearMessageBox,
+        updateSendMessageButtonType,
     } = useConfig();
 
     const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume();
@@ -62,6 +63,8 @@ export const useReceiveRoutes = () => {
         "/controller/callback_enable_auto_clear_chatbox": updateEnableAutoClearMessageBox,
         "/controller/callback_disable_auto_clear_chatbox": updateEnableAutoClearMessageBox,
 
+        "/config/send_message_button_type": updateSendMessageButtonType,
+        "/controller/callback_set_send_message_button_type": updateSendMessageButtonType,
 
 
         "/controller/callback_messagebox_send": updateSentMessageLog,
diff --git a/src-ui/store.js b/src-ui/store.js
index e47e40df..3c57adb4 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -155,7 +155,7 @@ export const { atomInstance: Atom_WordFilterList, useHook: useWordFilterList } =
 
 // Others
 export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useEnableAutoClearMessageBox } = createAsyncAtomWithHook(true, "EnableAutoClearMessageBox");
-
+export const { atomInstance: Atom_SendMessageButtonType, useHook: useSendMessageButtonType } = createAsyncAtomWithHook("show", "SendMessageButtonType");
 
 
 

From a4d7e886d538208a7e75cc256ddfdba35c049183 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sun, 8 Sep 2024 23:52:00 +0900
Subject: [PATCH 4/5] [Update] Main Page: Message Input Box. Add function,
 changeable the send button "hide", "show", "show_and_disable_enter_key".

---
 .../message_input_box/MessageInputBox.jsx     | 32 ++++++++++++++-----
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
index 9664dced..dfffc2cb 100644
--- a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
+++ b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
@@ -4,13 +4,14 @@ import SendMessageSvg from "@images/send_message.svg?react";
 import { useMessage } from "@logics/useMessage";
 import { store, useEnableAutoClearMessageBox } from "@store";
 import { scrollToBottom } from "@logics/scrollToBottom";
-
+import { useConfig } from "@logics/useConfig";
 
 export const MessageInputBox = () => {
     const [inputValue, setInputValue] = useState("");
     const { sendMessage } = useMessage();
 
     const { currentEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
+    const { currentSendMessageButtonType } = useConfig();
 
     const onSubmitFunction = (e) => {
         e.preventDefault();
@@ -28,6 +29,13 @@ export const MessageInputBox = () => {
         setInputValue(e.currentTarget.value);
     };
 
+    const onKeyDownFunction = (e) => {
+        if (currentSendMessageButtonType.data === "show_and_disable_enter_key") return;
+        if (e.keyCode == 13 && e.shiftKey == false) {
+            onSubmitFunction(e);
+        }
+    };
+
     return (
         <div className={styles.container}>
             <div className={styles.message_box_wrapper}>
@@ -36,15 +44,23 @@ export const MessageInputBox = () => {
                     onChange={onChangeFunction}
                     placeholder="Input Textfield"
                     value={inputValue}
+                    onKeyDown={onKeyDownFunction}
                 />
             </div>
-            <button
-                className={styles.message_send_button}
-                type="button"
-                onClick={onSubmitFunction}
-            >
-                <SendMessageSvg className={styles.message_send_icon} />
-            </button>
+            { currentSendMessageButtonType.data !== "hide" && <SendMessageButton onSubmitFunction={onSubmitFunction}/> }
         </div>
     );
 };
+
+
+const SendMessageButton = ({onSubmitFunction}) => {
+    return (
+        <button
+            className={styles.message_send_button}
+            type="button"
+            onClick={onSubmitFunction}
+        >
+            <SendMessageSvg className={styles.message_send_icon} />
+        </button>
+    );
+};
\ No newline at end of file

From 5eaaea535c0fe5f2d3a6e45202fc6eaab36c8b42 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Mon, 9 Sep 2024 12:37:38 +0900
Subject: [PATCH 5/5] =?UTF-8?q?[Update]=20Main=20Page:=20Log=20Box.=20?=
 =?UTF-8?q?=E7=BF=BB=E8=A8=B3=E5=BE=8C=E6=96=87=E7=AB=A0=E8=A1=A8=E7=A4=BA?=
 =?UTF-8?q?=E5=AF=BE=E5=BF=9C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../log_box/message_container/MessageContainer.jsx         | 3 ++-
 src-ui/logics/useMessage.js                                | 7 ++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx
index 7446823b..8ed027d1 100644
--- a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx
+++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx
@@ -33,10 +33,11 @@ export const MessageContainer = ({ messages, status, category, created_at }) =>
 };
 
 const WithTranslatedMessages = ({ messages }) => {
+    const translated_data = Array.isArray(messages.translated) ? messages.translated : [messages.translated];
     return (
         <>
             <p className={styles.message_second}>{messages.original}</p>
-            {messages.translated.map((message, index) => (
+            {translated_data.map((message, index) => (
                 <p key={index} className={styles.message_main}>{message}</p>
             ))}
         </>
diff --git a/src-ui/logics/useMessage.js b/src-ui/logics/useMessage.js
index ebdb1b19..089a72b4 100644
--- a/src-ui/logics/useMessage.js
+++ b/src-ui/logics/useMessage.js
@@ -32,7 +32,7 @@ export const useMessage = () => {
 
         updateSentMessageLog: (payload) => {
             const data = payload.data;
-            updateMessageLogsStatus(updateItemById(data.id));
+            updateMessageLogsStatus(updateItemById(data.id, data.translation));
         },
         addSentMessageLog: (payload) => {
             const data = payload.data;
@@ -63,16 +63,17 @@ const generateMessageObject = (data, category) => {
         status: "ok",
         messages: {
             original: data.message,
-            translated: [],
+            translated: data.translation,
         },
     };
 };
 
 
-const updateItemById = (id) => (prev_items) => {
+const updateItemById = (id, translated_data) => (prev_items) => {
     return prev_items.map(item => {
         if (item.id === id) {
             item.status = "ok";
+            item.messages.translated = translated_data;
         }
         return item;
     });