修改为新的icon

README.md

@@ -74,7 +74,7 @@ const nextConfig = {
 
 ## 🔨 Usage
 
-```jsx
+```tsx
 import { ProChat } from '@ant-design/pro-chat';
 
 export default () => (

README.zh-CN.md

@@ -71,7 +71,7 @@ const nextConfig = {
 
 ## 🔨 使用
 
-```jsx
+```tsx
 import { ProChat } from '@ant-design/pro-chat';
 
 export default () => (

docs/guide/whyUseProChat.en-US.md

@@ -35,7 +35,7 @@ The effect is as follows
 
 Similarly, ProChat's request API is also compatible with traditional non streaming requests:
 
-```jsx
+```tsx
 import { ProChat } from '@ant-design/pro-chat';
 import { useTheme } from 'antd-style';
 

docs/guide/whyUseProChat.md

@@ -35,7 +35,7 @@ ProChat 作为 AI 会话的前端解决方案，自然默认集成了这项流
 
 而同样的，ProChat 的 request api 也兼容传统的非流式请求：
 
-```jsx
+```tsx
 import { ProChat } from '@ant-design/pro-chat';
 import { useTheme } from 'antd-style';
 

src/components/ProChat/demos/request.tsx

@@ -17,6 +17,12 @@ export default () => {
         inputAreaProps={{
           rows: 1,
         }}
+        autocompleteRequest={async () => {
+          return ['table', 'docs', 'tools ', '参数配置', '你是谁', '联系我'].map((item) => ({
+            value: item,
+            label: item,
+          }));
+        }}
         sendMessageRequest={() => {
           return new Promise((resolve) => {
             setTimeout(() => {

src/components/ProChat/index.tsx

@@ -416,28 +416,24 @@ export function ProChat<
     return chatList;
   });
 
-  useImperativeHandle(
-    chatRef,
-    () => {
-      return {
-        stopGenerateMessage,
-        clearMessage,
-        sendMessage,
-        getChatList,
-        getChatLoadingMessage,
-        setMessageItem,
-        genMessageRecord,
-        scrollToBottom: () => {
-          (chatListContainerRef as any)?.current?.scrollTo({
-            behavior: 'smooth',
-            left: 0,
-            top: chatListContainerRef.current?.scrollHeight || 99999,
-          });
-        },
-      } as ProChatInstance<T>;
-    },
-    [chatRef],
-  );
+  useImperativeHandle(chatRef, () => {
+    return {
+      stopGenerateMessage,
+      clearMessage,
+      sendMessage,
+      getChatList,
+      getChatLoadingMessage,
+      setMessageItem,
+      genMessageRecord,
+      scrollToBottom: () => {
+        (chatListContainerRef as any)?.current?.scrollTo({
+          behavior: 'smooth',
+          left: 0,
+          top: chatListContainerRef.current?.scrollHeight || 99999,
+        });
+      },
+    } as ProChatInstance<T>;
+  }, [chatRef]);
 
   const scrollToBottom = useMemo(() => {
     if (chatListContainerRef.current) {
@@ -527,6 +523,7 @@ export function ProChat<
           typing={!!loadingMessage?.id}
           placeholder={placeholder || '请输入消息...'}
           onMessageSend={sendMessage}
+          mentionRequest={props.autocompleteRequest}
           stopGenerateMessage={stopGenerateMessage}
           clearMessage={clearMessage}
           areaRef={areaHtml}

src/components/ProChatInputArea/AutoCompleteTextArea.tsx

@@ -1,10 +1,10 @@
-import { Input } from 'antd';
-import { TextAreaProps } from 'antd/es/input';
+import { Mentions, MentionsProps } from 'antd';
+import { useState } from 'react';
 
 /**
  * Props for the MentionsTextArea component.
  */
-export type MentionsTextAreaProps = TextAreaProps & {
+export type MentionsTextAreaProps = MentionsProps & {
   /**
    * A function that is called when a mention is requested.
    * @param value - The value of the mention.
@@ -33,14 +33,12 @@ export type MentionsTextAreaProps = TextAreaProps & {
 export const MentionsTextArea: React.FC<MentionsTextAreaProps> = (props) => {
   const { disabled, mentionRequest, ...rest } = props;
 
-  // const [options, setOptions] = useState<{ value: string; label: string }[]>([]);
+  const [options, setOptions] = useState<{ value: string; label: string }[]>([]);
   return (
-    <Input.TextArea
+    <Mentions
       className={props.className}
       disabled={disabled}
-      autoSize={{
-        minRows: rest.rows || 5,
-      }}
+      autoSize
       rows={rest.rows || 5}
       {...rest}
       style={{
@@ -54,19 +52,20 @@ export const MentionsTextArea: React.FC<MentionsTextAreaProps> = (props) => {
         height: 'auto',
         ...rest.style,
       }}
-      // options={options}
-      // onSelect={(value) => {
-      //   props.onChange?.({ target: { value } } as any);
-      //   setOptions([]);
-      // }}
-      // prefix="/"
-      // onSearch={async (value, prefix) => {
-      //   const result = await mentionRequest?.(value);
-      //   setOptions((result as any[]) || []);
-      //   rest?.onSearch?.(value, prefix);
-      // }}
+      options={options}
+      onSelect={(value) => {
+        props.onChange?.(value?.value);
+        setOptions([]);
+      }}
+      prefix="/"
+      onSearch={async (value, prefix) => {
+        if (!mentionRequest) return [];
+        const result = await mentionRequest?.(value);
+        setOptions((result as any[]) || []);
+        rest?.onSearch?.(value, prefix);
+      }}
       onPressEnter={(e) => {
-        // if (open && options.length > 0) return;
+        if (options.length > 0) return;
         props.onPressEnter?.(e);
       }}
     />

src/components/ProChatInputArea/index.tsx

@@ -105,6 +105,8 @@ export type ChatInputAreaProps = {
   sendButtonStyle?: React.CSSProperties;
 
   sendAreaStyle?: React.CSSProperties;
+
+  mentionRequest?: (value: string) => Promise<{ value: string; label?: string }[]>;
 };
 
 /**
@@ -131,6 +133,7 @@ export const ChatInputArea = (props: ChatInputAreaProps) => {
     onMessageSend,
     actionStyle,
     locale,
+    mentionRequest,
     actionsRender,
   } = props || {};
 
@@ -160,13 +163,13 @@ export const ChatInputArea = (props: ChatInputAreaProps) => {
    */
   const defaultAutoCompleteTextAreaProps = {
     placeholder: placeholder,
+    mentionRequest,
     ...inputAreaProps,
     className: cx(inputAreaProps?.className, `${prefixClass}-input`, hashId),
     value: message,
     onChange: (value) => {
-      setMessage(value.target.value);
+      setMessage(value);
     },
-    autoSize: { maxRows: 8 },
     onCompositionStart: () => {
       isChineseInput.current = true;
     },