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 = ( if (modelOptionNodes.length || associateOptionNodes.length) fixWidthBug(); }, [modelOptionNodes.length, associateOptionNodes.length]); + const { isComposing } = useComposing(document.getElementById('chatInput')); + return (
@@ -380,7 +383,7 @@ const ChatFooter: ForwardRefRenderFunction = ( 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 = (value: any): value is MutableRefObject => { + return value !== null && typeof value === 'object' && 'current' in value; +}; + +export const useComposing = (element?: HTMLElement | null | MutableRefObject) => { + 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 }; +};