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] [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,