[Update] Main Page: Message input box. Add function, auto clear message box.

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);
             });

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

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) {

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,