From 639d1a78dac8abe43c3cbb85c5d0677dc7237a9a Mon Sep 17 00:00:00 2001
From: pisces <30692337+p1scess@users.noreply.github.com>
Date: Sun, 1 Dec 2024 10:52:28 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=9C=A8=E4=B8=AD=E6=96=87=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E6=B3=95=E7=9A=84=E6=83=85=E5=86=B5=E4=B8=8B,?=
 =?UTF-8?q?=E6=AD=A3=E5=9C=A8=E8=BE=93=E5=85=A5=E7=9A=84=E8=BF=87=E7=A8=8B?=
 =?UTF-8?q?=E4=B8=AD=E6=8C=89=E4=B8=8B=E5=9B=9E=E8=BD=A6=E5=AF=BC=E8=87=B4?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E7=9B=B4=E6=8E=A5=E5=8F=91=E9=80=81=20(#1933?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chat-sdk/src/Chat/ChatFooter/index.tsx    |  5 ++-
 .../chat-sdk/src/hooks/useComposing.ts        | 31 +++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 webapp/packages/chat-sdk/src/hooks/useComposing.ts

diff --git a/webapp/packages/chat-sdk/src/Chat/ChatFooter/index.tsx b/webapp/packages/chat-sdk/src/Chat/ChatFooter/index.tsx
index c81f66536..0bbf34a1c 100644
--- a/webapp/packages/chat-sdk/src/Chat/ChatFooter/index.tsx
+++ b/webapp/packages/chat-sdk/src/Chat/ChatFooter/index.tsx
@@ -9,6 +9,7 @@ import { SemanticTypeEnum, SEMANTIC_TYPE_MAP, HOLDER_TAG } from '../constants';
 import { AgentType, ModelType } from '../type';
 import { searchRecommend } from '../../service';
 import styles from './style.module.less';
+import { useComposing } from '../../hooks/useComposing';
 
 type Props = {
   inputMsg: string;
@@ -319,6 +320,8 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
     if (modelOptionNodes.length || associateOptionNodes.length) fixWidthBug();
   }, [modelOptionNodes.length, associateOptionNodes.length]);
 
+  const { isComposing } = useComposing(document.getElementById('chatInput'));
+
   return (
     <div className={chatFooterClass}>
       <div className={styles.tools}>
@@ -380,7 +383,7 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
                   onInputMsgChange('');
                   return;
                 }
-                if (!isSelect) {
+                if (!isSelect && !isComposing) {
                   sendMsg(chatInputEl.value);
                   setOpen(false);
                 }
diff --git a/webapp/packages/chat-sdk/src/hooks/useComposing.ts b/webapp/packages/chat-sdk/src/hooks/useComposing.ts
new file mode 100644
index 000000000..e320be25a
--- /dev/null
+++ b/webapp/packages/chat-sdk/src/hooks/useComposing.ts
@@ -0,0 +1,31 @@
+import { type MutableRefObject, useEffect, useState } from 'react';
+
+const isRefObject = <T>(value: any): value is MutableRefObject<T> => {
+  return value !== null && typeof value === 'object' && 'current' in value;
+};
+
+export const useComposing = (element?: HTMLElement | null | MutableRefObject<HTMLElement>) => {
+  const [isComposing, setIsComposing] = useState(false);
+
+  useEffect(() => {
+    const handleCompositionStart = (): void => {
+      setIsComposing(true);
+    };
+    const handleCompositionEnd = (): void => {
+      setIsComposing(false);
+    };
+
+    const dom = isRefObject(element) ? element.current : element;
+    const target = dom || window;
+
+    target.addEventListener('compositionstart', handleCompositionStart);
+    target.addEventListener('compositionend', handleCompositionEnd);
+
+    return () => {
+      target.removeEventListener('compositionstart', handleCompositionStart);
+      target.removeEventListener('compositionend', handleCompositionEnd);
+    };
+  }, [element]);
+
+  return { isComposing, setIsComposing };
+};