✨ feat: chats should use array

docs/guide/demos/doc-mode.tsx

@@ -21,7 +21,7 @@ export default () => {
 
           return mockResponse.getResponse();
         }}
-        chats={example.chats}
+        chats={Object.values(example.chats)}
         config={example.config}
       />
     </div>

docs/guide/initial.md

@@ -56,7 +56,7 @@ export default () => {
 };
 ```
 
-上述代码中，我们将 `example.chats` 作为初始聊天数据传递给 ProChat 组件。注意，在使用该属性时需要提供正确格式的初始聊天数据。
+上述代码中，我们将 `Object.values(example.chats)` 作为初始聊天数据传递给 ProChat 组件。注意，在使用该属性时需要提供正确格式的初始聊天数据。
 
 ## 使用骨架屏
 

src/ProChat/container/App.tsx

@@ -44,7 +44,7 @@ const App = memo<ConversationProps>(
     chatRef,
     itemShouldUpdate,
     chatItemRenderConfig,
-    backtoBottomConfig,
+    backToBottomConfig,
   }) => {
     const ref = useRef<HTMLDivElement>(null);
     const areaHtml = useRef<HTMLDivElement>(null);
@@ -106,7 +106,7 @@ const App = memo<ConversationProps>(
                 }}
                 target={ref}
                 text={'返回底部'}
-                {...backtoBottomConfig}
+                {...backToBottomConfig}
               />
             ) : null}
           </>

src/ProChat/container/index.tsx

@@ -21,7 +21,7 @@ export interface ProChatProps<T extends Record<string, any>> extends ChatProps<T
   className?: string;
   chatRef?: ProChatChatReference;
   appStyle?: CSSProperties;
-  backtoBottomConfig?: Omit<BackBottomProps, 'target'>;
+  backToBottomConfig?: Omit<BackBottomProps, 'target'>;
 }
 
 export function ProChat<T extends Record<string, any> = Record<string, any>>({
@@ -31,7 +31,7 @@ export function ProChat<T extends Record<string, any> = Record<string, any>>({
   style,
   className,
   chatItemRenderConfig,
-  backtoBottomConfig,
+  backToBottomConfig,
   appStyle,
   ...props
 }: ProChatProps<T>) {
@@ -52,7 +52,7 @@ export function ProChat<T extends Record<string, any> = Record<string, any>>({
           chatRef={props.chatRef}
           showTitle={showTitle}
           style={style}
-          backtoBottomConfig={backtoBottomConfig}
+          backToBottomConfig={backToBottomConfig}
           className={className}
         />
       </Container>

src/ProChat/demos/backtoBottomConfig.tsx

@@ -15,9 +15,9 @@ export default () => {
         <ProChat
           displayMode={'docs'}
           style={{ height: '100%' }}
-          chats={example.chats}
+          chats={Object.values(example.chats)}
           config={example.config}
-          backtoBottomConfig={{
+          backToBottomConfig={{
             render: (_, scrollToBottom) => {
               return (
                 <Button

src/ProChat/demos/bigData.tsx

@@ -8,35 +8,24 @@ import { useTheme } from 'antd-style';
 import { Alert } from 'antd';
 import { MockResponse } from '../mocks/streamResponse';
 
-const initialChats = new Array(100)
-  .fill(0)
-  .map((_, index) => {
-    return {
-      id: 'chat-' + index,
-      content: '这是一段模拟的流式字符串数据。' + index,
-      role: index % 2 === 1 ? 'user' : 'assistant',
-      updateAt: Date.now(),
-      createAt: Date.now(),
-    };
-  })
-  .reduce(
-    (acc, cur) => {
-      acc[cur.id] = cur;
-      return acc;
-    },
-    {} as Record<string, any>,
-  );
+const initialChats = new Array(100).fill(0).map((_, index) => {
+  return {
+    id: 'chat-' + index,
+    content: '这是一段模拟的流式字符串数据。' + index,
+    role: index % 2 === 1 ? 'user' : 'assistant',
+    updateAt: Date.now(),
+    createAt: Date.now(),
+  };
+});
 
-initialChats['chat-20'] = {
+initialChats[20] = {
   id: 'chat-20',
   content: '这是一条通知消息' + 20,
   role: 'notification',
   updateAt: Date.now(),
   createAt: Date.now(),
 };
 
-console.log(initialChats);
-
 export default () => {
   const theme = useTheme();
 

src/ProChat/demos/control.tsx

@@ -1,7 +1,7 @@
 /**
  * compact: true
  */
-import { ChatMessageMap, ProChat } from '@ant-design/pro-chat';
+import { ChatMessage, ProChat } from '@ant-design/pro-chat';
 
 import { useTheme } from 'antd-style';
 import { useState } from 'react';
@@ -11,14 +11,13 @@ import { MockResponse } from '../mocks/streamResponse';
 export default () => {
   const theme = useTheme();
 
-  const [chats, setChats] = useState<ChatMessageMap>();
+  const [chats, setChats] = useState<ChatMessage<Record<string, any>>[]>();
 
   return (
     <div style={{ background: theme.colorBgLayout }}>
       <ProChat
         chats={chats}
         onChatsChange={(chats) => {
-          console.log(chats);
           setChats(chats);
         }}
         request={async (messages) => {

src/ProChat/demos/doc-mode.tsx

@@ -22,7 +22,7 @@ export default () => {
 
           return mockResponse.getResponse();
         }}
-        chats={example.chats}
+        chats={Object.values(example.chats)}
         config={example.config}
       />
     </div>

src/ProChat/demos/initialChats.tsx

@@ -10,7 +10,7 @@ export default () => {
   const theme = useTheme();
   return (
     <div style={{ background: theme.colorBgLayout }}>
-      <ProChat initialChats={example.chats} />
+      <ProChat initialChats={Object.values(example.chats)} />
     </div>
   );
 };

src/ProChat/demos/use-pro-chat.tsx

@@ -92,7 +92,7 @@ const Control = () => {
 };
 
 export default () => (
-  <ProChatProvider initialChats={example.chats}>
+  <ProChatProvider initialChats={Object.values(example.chats)}>
     <Control />
     <Divider>🔼 程序化控制 | 🔽 用户控制</Divider>
     <Chat />

src/ProChat/demos/use-ref.tsx

@@ -29,7 +29,7 @@ export default () => {
         修改首条消息，添加表情：👋
       </Button>
       <ProChat
-        initialChats={example.chats}
+        initialChats={Object.values(example.chats)}
         chatRef={proChatRef}
         request={async (messages) => {
           const mockedData: string = `这是一段模拟的流式字符串数据。本次会话传入了${messages.length}条消息`;

src/ProChat/index.md

@@ -72,9 +72,9 @@ ProChat 使用 `meta` 来表意会话双方的头像、名称等信息。设定
 
 ## 自定义「回到底部」按钮
 
-你可以通过 backtoBottomConfig 参数对「回到底部」按钮进行不同程度的自定义
+你可以通过 backToBottomConfig 参数对「回到底部」按钮进行不同程度的自定义
 
-<code src="./demos/backtoBottomConfig.tsx"></code>
+<code src="./demos/backToBottomConfig.tsx"></code>
 
 ## 自定义输入区域
 
@@ -129,8 +129,8 @@ useProChat hooks 必须在包裹 `ProChatProvider` 后方可使用。
 | userMeta | 用户元数据 | MetaData | - |
 | assistantMeta | 助手元数据 | MetaData | - |
 | config | 语言模型角色设定 | ModelConfig | - |
-| chats | 聊天记录 | ChatMessageMap | - |
-| onChatsChange | 聊天记录变化回调函数， | (chats: ChatMessageMap) => void | chat |
+| chats | 聊天记录 | ChatMessage[] | - |
+| onChatsChange | 聊天记录变化回调函数， | (chats: ChatMessage[]) => void | chat |
 | displayMode | 显示模式，默认是 chat | 'chat' \| 'docs' | - |
 | helloMessage | 欢迎消息 | string\| ReactNode | - |
 | request | 请求消息 | string \| ChatRequest | - |
@@ -144,7 +144,7 @@ useProChat hooks 必须在包裹 `ProChatProvider` 后方可使用。
 | actions.flexConfig | 控制 input 顶部的操作区域的 flex 布局 | `FlexBasicProps` | - |
 | actions.render | 控制 input 顶部的操作区域的操作按钮 | `(defaultDoms: JSX.Element[]) => JSX.Element[]` | - |
 | chatItemRenderConfig | 聊天项渲染配置 | `ChatItemRenderConfig` | - |
-| backtoBottomConfig | 透传给「回到底部」组件的 api | `BackBottomProps` | - |
+| backToBottomConfig | 透传给「回到底部」组件的 api | `BackBottomProps` | - |
 
 ## ProChatChatReference
 
@@ -171,7 +171,7 @@ useProChat hooks 必须在包裹 `ProChatProvider` 后方可使用。
 | avatarRender | 头像渲染函数 | WithFalse<(props: ChatItemProps, defaultDom: ReactNode) => ReactNode> | - |
 | render | 自定义渲染函数 | WithFalse<(props: ChatItemProps, defaultDom: { avatar: ReactNode; title: ReactNode; messageContent: ReactNode; actions: ReactNode; itemDom: ReactNode; }) => ReactNode> | - |
 
-## backtoBottomConfig
+## backToBottomConfig
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |

src/ProChat/store/initialState.ts

@@ -1,7 +1,7 @@
 import { DEFAULT_AVATAR, DEFAULT_USER_AVATAR } from '@/ProChat/const/meta';
 import { ModelConfig } from '@/ProChat/types/config';
 import { MetaData } from '@/ProChat/types/meta';
-import { ChatMessage, ChatMessageMap } from '@/types/message';
+import { ChatMessage } from '@/types/message';
 import { TextAreaProps } from 'antd/es/input';
 import { ReactNode } from 'react';
 import { FlexBasicProps } from 'react-layout-kit/lib/FlexBasic';
@@ -17,9 +17,9 @@ export interface ChatPropsState<T extends Record<string, any> = Record<string, a
   /**
    * 聊天记录
    */
-  chats: ChatMessageMap<T>;
+  chats: ChatMessage<T>[];
+  onChatsChange?: (chats: ChatMessage<T>[]) => void;
   chatRef?: ProChatChatReference;
-  onChatsChange?: (chats: ChatMessageMap<T>) => void;
   displayMode: 'chat' | 'docs';
   userMeta: MetaData;
   assistantMeta: MetaData;
@@ -105,7 +105,7 @@ export const initialModelConfig: ModelConfig = {
 };
 
 export const initialState: ChatState = {
-  chats: {},
+  chats: [],
   init: true,
   displayMode: 'chat',
   userMeta: {

src/ProChat/store/reducers/message.test.ts

@@ -1,9 +1,9 @@
-import { ChatMessageMap } from '@/types/message';
+import { ChatMessage } from '@/types/message';
 
 import { MessageDispatch, messagesReducer } from './message';
 
 describe('messagesReducer', () => {
-  let initialState: ChatMessageMap;
+  let initialState: ChatMessage[];
 
   beforeEach(() => {
     initialState = {
@@ -21,7 +21,7 @@ describe('messagesReducer', () => {
         updateAt: 1629264000000,
         role: 'system',
       },
-    } as unknown as ChatMessageMap;
+    } as unknown as ChatMessage[];
   });
 
   describe('addMessage', () => {
@@ -39,7 +39,7 @@ describe('messagesReducer', () => {
       expect(newState).toHaveProperty('message1');
       expect(newState).toHaveProperty('message2');
       expect(newState).toHaveProperty('message3');
-      expect(newState.message3).toEqual({
+      expect(newState.find((m) => m.id === 'message3')).toEqual({
         id: 'message3',
         content: 'New Message',
         createAt: expect.any(Number),
@@ -62,7 +62,7 @@ describe('messagesReducer', () => {
       expect(newState).toHaveProperty('message1');
       expect(newState).toHaveProperty('message2');
       expect(newState).toHaveProperty('customId');
-      expect(newState.customId).toEqual({
+      expect(newState.find((m) => m.id === 'customId')).toEqual({
         id: 'customId',
         content: 'New Message',
         createAt: expect.any(Number),
@@ -82,7 +82,7 @@ describe('messagesReducer', () => {
 
       const newState = messagesReducer(initialState, payload);
 
-      expect(newState.message3).toEqual({
+      expect(newState.find((m) => m.id === 'message3')).toEqual({
         id: 'message3',
         content: 'New Message',
         createAt: expect.any(Number),
@@ -103,7 +103,7 @@ describe('messagesReducer', () => {
 
       const newState = messagesReducer(initialState, payload);
 
-      expect(newState.message3).toEqual({
+      expect(newState.find((m) => m.id === 'message3')).toEqual({
         id: 'message3',
         content: 'New Message',
         createAt: expect.any(Number),
@@ -151,8 +151,9 @@ describe('messagesReducer', () => {
 
       const newState = messagesReducer(initialState, payload);
 
-      expect(newState.message1.content).toBe('Updated Message');
-      expect(newState.message1.updateAt).toBeGreaterThan(initialState.message1.updateAt);
+      const message1 = newState.find((m) => m.id === 'message1');
+      expect(message1?.content).toBe('Updated Message');
+      expect(message1?.updateAt).toBeGreaterThan(message1?.updateAt as number);
     });
 
     it('should not modify the state if the specified message does not exist', () => {
@@ -179,9 +180,9 @@ describe('messagesReducer', () => {
       };
 
       const newState = messagesReducer(initialState, payload);
-
-      expect(newState.message1.extra!.translate).toEqual({ target: 'en', to: 'zh' });
-      expect(newState.message1.updateAt).toBeGreaterThan(initialState.message1.updateAt);
+      const message1 = newState.find((m) => m.id === 'message1');
+      expect(message1?.extra!.translate).toEqual({ target: 'en', to: 'zh' });
+      expect(message1?.updateAt).toBeGreaterThan(message1?.updateAt as number);
     });
 
     it('should not modify the state if the specified message does not exist', () => {