From 150ab9c6a4e69f732aa2e279d0a41203b81ddb24 Mon Sep 17 00:00:00 2001
From: James Chiang <74387204+jabee0228@users.noreply.github.com>
Date: Tue, 25 Feb 2025 18:49:08 +0800
Subject: [PATCH] Fix: Prevent message sending during IME composition and block
 new submissions while waiting for a response (#5331)

### What problem does this PR solve?

This pull request addresses an issue where the "Enter" key would send
the message prematurely while using Input Method Editor (IME) for text
composition. This problem occurs when users are typing with a non-Latin
input method, such as Chinese(Zhuyin), and press "Enter" to confirm
their selection, which unintentionally triggers message submission. Also
fixed the issue of blocking new submissions while waiting for a response

Before:


https://github.com/user-attachments/assets/233f3ac9-4b4b-4424-b4ab-ea2e31bb0663

After:


https://github.com/user-attachments/assets/f1c01af6-d1d7-4a79-9e81-5bdf3c0b3529

Block new submissions while waiting for a response:



https://github.com/user-attachments/assets/10a45b5f-44b9-4e36-9342-b1bbb4096312


### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 web/src/components/message-input/index.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/web/src/components/message-input/index.tsx b/web/src/components/message-input/index.tsx
index 751c1f4a75a..4f3de100d24 100644
--- a/web/src/components/message-input/index.tsx
+++ b/web/src/components/message-input/index.tsx
@@ -156,8 +156,14 @@ const MessageInput = ({
     setFileList([]);
   }, [fileList, onPressEnter, isUploadingFile]);
 
+  const [isComposing, setIsComposing] = useState(false);
+
+  const handleCompositionStart = () => setIsComposing(true);
+  const handleCompositionEnd = () => setIsComposing(false);
+
   const handleInputKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
     if (e.key === 'Enter' && !e.nativeEvent.shiftKey) {
+      if (isComposing || sendLoading) return;
       e.preventDefault();
       handlePressEnter();
     }
@@ -221,6 +227,8 @@ const MessageInput = ({
           })}
           onKeyDown={handleInputKeyDown}
           onChange={onInputChange}
+          onCompositionStart={handleCompositionStart}
+          onCompositionEnd={handleCompositionEnd}
           autoSize={{ minRows: 1, maxRows: 6 }}
         />
         <Space>