From 474ab3d4b4fbc183eee0e4aaa7e0567907bde1ce Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Mon, 2 Dec 2024 06:39:43 +0900
Subject: [PATCH] =?UTF-8?q?[Update]=20Main=20Page:=20Message=20Input=20Box?=
 =?UTF-8?q?.=20Add=20startTyping=20and=20stopTyping.(send=20backend=20and?=
 =?UTF-8?q?=20show=20=E3=80=8C=E3=83=BB=E3=83=BB=E3=83=BB=E3=80=8D)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../message_input_box/MessageInputBox.jsx              |  7 ++++++-
 src-ui/logics/common/useMessage.js                     | 10 ++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

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 80c5cc83..6aa8a4e6 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
@@ -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}
diff --git a/src-ui/logics/common/useMessage.js b/src-ui/logics/common/useMessage.js
index a951da58..e04352b4 100644
--- a/src-ui/logics/common/useMessage.js
+++ b/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,
     };
 };