From a16941858c911f2b4787e07e3c67fbc23dea94bf Mon Sep 17 00:00:00 2001
From: mj <minai621@naver.com>
Date: Wed, 30 Oct 2024 16:37:02 +0900
Subject: [PATCH] feat(MessageInput): add composition event handlers

---
 ui/components/MessageInput.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/components/MessageInput.tsx b/ui/components/MessageInput.tsx
index 05d44a6..88e1c8d 100644
--- a/ui/components/MessageInput.tsx
+++ b/ui/components/MessageInput.tsx
@@ -16,6 +16,7 @@ const MessageInput = ({
   const [message, setMessage] = useState('');
   const [textareaRows, setTextareaRows] = useState(1);
   const [mode, setMode] = useState<'multi' | 'single'>('single');
+  const [isComposing, setIsComposing] = useState(false);
 
   useEffect(() => {
     if (textareaRows >= 2 && message && mode === 'single') {
@@ -58,7 +59,7 @@ const MessageInput = ({
         setMessage('');
       }}
       onKeyDown={(e) => {
-        if (e.key === 'Enter' && !e.shiftKey && !loading) {
+        if (e.key === 'Enter' && !e.shiftKey && !loading && !isComposing) {
           e.preventDefault();
           sendMessage(message);
           setMessage('');
@@ -74,6 +75,8 @@ const MessageInput = ({
         ref={inputRef}
         value={message}
         onChange={(e) => setMessage(e.target.value)}
+        onCompositionStart={() => setIsComposing(true)}
+        onCompositionEnd={() => setIsComposing(false)}
         onHeightChange={(height, props) => {
           setTextareaRows(Math.ceil(height / props.rowHeight));
         }}