From 9dcf24019c2f8292eb64295ab71a2c66b4ceef43 Mon Sep 17 00:00:00 2001
From: Shinji-Li <1349021570@qq.com>
Date: Thu, 23 May 2024 11:08:37 +0800
Subject: [PATCH] :bug: fix: slove when input area controlled mode but chinese
 chats not work (#223)

---
 src/ProChat/components/InputArea/index.tsx | 24 +++++++++++++++-------
 src/ProChat/demos/request.tsx              |  2 --
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/ProChat/components/InputArea/index.tsx b/src/ProChat/components/InputArea/index.tsx
index 1d83274..d7543e6 100644
--- a/src/ProChat/components/InputArea/index.tsx
+++ b/src/ProChat/components/InputArea/index.tsx
@@ -1,14 +1,13 @@
 import { SendOutlined } from '@ant-design/icons';
 import { Button, ButtonProps, ConfigProvider } from 'antd';
 import { createStyles, cx } from 'antd-style';
-import { ReactNode, useContext, useMemo, useRef } from 'react';
+import { ReactNode, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { useStore } from '../../store';
 
 import useProChatLocale from '@/ProChat/hooks/useProChatLocale';
 import { TextAreaProps } from 'antd/es/input';
-import { useMergedState } from 'rc-util';
 import ActionBar from './ActionBar';
 import { AutoCompleteTextArea } from './AutoCompleteTextArea';
 import StopLoadingIcon from './StopLoading';
@@ -88,10 +87,20 @@ export const ChatInputArea = (props: ChatInputAreaProps) => {
   const { localeObject } = useProChatLocale();
 
   const { value, onChange } = inputAreaProps || {};
-  const [message, setMessage] = useMergedState('', {
-    onChange: onChange,
-    value: value,
-  });
+  const [message, setMessage] = useState('');
+
+  // 兼容中文的受控输入逻辑
+  useEffect(() => {
+    if (!isChineseInput.current && onChange) {
+      onChange(message);
+    }
+  }, [message]);
+
+  useEffect(() => {
+    if (value) {
+      setMessage(value);
+    }
+  }, [value]);
 
   const send = async () => {
     if (onSend) {
@@ -136,8 +145,9 @@ export const ChatInputArea = (props: ChatInputAreaProps) => {
     onCompositionStart: () => {
       isChineseInput.current = true;
     },
-    onCompositionEnd: () => {
+    onCompositionEnd: (e) => {
       isChineseInput.current = false;
+      setMessage(e.target.value);
     },
     onPressEnter: (e) => {
       if (!isLoading && !e.shiftKey && !isChineseInput.current) {
diff --git a/src/ProChat/demos/request.tsx b/src/ProChat/demos/request.tsx
index d338e62..97760ff 100644
--- a/src/ProChat/demos/request.tsx
+++ b/src/ProChat/demos/request.tsx
@@ -7,9 +7,7 @@ import { useState } from 'react';
 
 export default () => {
   const theme = useTheme();
-
   const [value, setValue] = useState();
-
   return (
     <div style={{ background: theme.colorBgLayout }}>
       <ProChat