perf: 在中文输入法的情况下,正在输入的过程中按下回车导致消息直接发送 (#1933)

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);
                 }

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 };
+};