[Update] Main Page: Message Input Box. Add startTyping and stopTyping.(send backend and show 「・・・」)

src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx

@@ -14,6 +14,8 @@ export const MessageInputBox = () => {
         currentMessageLogs,
         currentMessageInputValue,
         updateMessageInputValue,
+        startTyping,
+        stopTyping,
     } = useMessage();
 
     const { currentEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox();
@@ -45,7 +47,9 @@ export const MessageInputBox = () => {
     };
 
     const onChangeFunction = (e) => {
-        updateMessageInputValue(e.currentTarget.value);
+        const value = e.currentTarget.value;
+        updateMessageInputValue(value);
+        value.trim() ? startTyping() : stopTyping();
     };
 
     const onKeyDownFunction = (e) => {
@@ -86,6 +90,7 @@ export const MessageInputBox = () => {
                 <textarea
                     className={styles.message_box_input_area}
                     onChange={onChangeFunction}
+                    onBlur={stopTyping}
                     placeholder="Input Textfield"
                     value={currentMessageInputValue.data}
                     onKeyDown={onKeyDownFunction}

src-ui/logics/common/useMessage.js

@@ -42,6 +42,13 @@ export const useMessage = () => {
         addMessageLogs(message_object);
     };
 
+    const startTyping = () => {
+        asyncStdoutToPython("/run/typing_message_box");
+    };
+    const stopTyping = () => {
+        asyncStdoutToPython("/run/stop_typing_message_box");
+    };
+
     return {
         currentMessageLogs,
         sendMessage,
@@ -51,6 +58,9 @@ export const useMessage = () => {
 
         currentMessageInputValue,
         updateMessageInputValue,
+
+        startTyping,
+        stopTyping,
     };
 };