🔀 fix: merge main

ant-design · Jan 19, 2024 · 6aabaa6 · 6aabaa6
2 parents cffbbbf + 8e59984
commit 6aabaa6
Show file tree

Hide file tree

Showing 11 changed files with 209 additions and 90 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,80 @@
 # Changelog
 
+### [Version&nbsp;1.4.4](https://github.com/ant-design/pro-chat/compare/v1.4.3...v1.4.4)
+
+<sup>Released on **2024-01-19**</sup>
+
+#### 🐛 修复
+
+- Slove Editable Button was not work.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- Slove Editable Button was not work, closes [#50](https://github.com/ant-design/pro-chat/issues/50) ([e77c39e](https://github.com/ant-design/pro-chat/commit/e77c39e))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version&nbsp;1.4.3](https://github.com/ant-design/pro-chat/compare/v1.4.2...v1.4.3)
+
+<sup>Released on **2024-01-18**</sup>
+
+#### 🐛 修复
+
+- ChatItem support originData.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- ChatItem support originData ([0e04f7a](https://github.com/ant-design/pro-chat/commit/0e04f7a))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version&nbsp;1.4.2](https://github.com/ant-design/pro-chat/compare/v1.4.1...v1.4.2)
+
+<sup>Released on **2024-01-17**</sup>
+
+#### 🐛 修复
+
+- Stream was done but loading icon is show.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- Stream was done but loading icon is show, closes [#45](https://github.com/ant-design/pro-chat/issues/45) ([e76c4cd](https://github.com/ant-design/pro-chat/commit/e76c4cd))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version&nbsp;1.4.1](https://github.com/ant-design/pro-chat/compare/v1.4.0...v1.4.1)
 
 <sup>Released on **2024-01-17**</sup>

diff --git a/demos/chatgpt-nextjs/src/app/chatgpt/index.tsx b/demos/chatgpt-nextjs/src/app/chatgpt/index.tsx
@@ -1,30 +1,36 @@
 'use client';
-
 import { ProChat } from '@ant-design/pro-chat';
 import { useTheme } from 'antd-style';
+import { useEffect, useState } from 'react';
 
 export default function Home() {
   const theme = useTheme();
+  const [showComponent, setShowComponent] = useState(false);
+
+  useEffect(() => setShowComponent(true), []);
+
   return (
     <div
       style={{
         backgroundColor: theme.colorBgLayout,
       }}
     >
-      <ProChat
-        style={{
-          height: '100vh',
-          width: '100vw',
-        }}
-        request={async (messages: Array<any>) => {
-          const response = await fetch('/api/openai', {
-            method: 'POST',
-            body: JSON.stringify({ messages: messages }),
-          });
-
-          return response;
-        }}
-      />
+      {showComponent && (
+        <ProChat
+          style={{
+            height: '100vh',
+            width: '100vw',
+          }}
+          request={async (messages) => {
+            const response = await fetch('/api/qwen', {
+              method: 'POST',
+              body: JSON.stringify({ messages: messages }),
+            });
+            const data = await response.json();
+            return new Response(data.output?.text);
+          }}
+        />
+      )}
     </div>
   );
 }
diff --git a/demos/qwen-nextjs/src/app/page.tsx b/demos/qwen-nextjs/src/app/page.tsx
@@ -1,30 +1,36 @@
 'use client';
-
 import { ProChat } from '@ant-design/pro-chat';
 import { useTheme } from 'antd-style';
+import { useEffect, useState } from 'react';
 
 export default function Home() {
   const theme = useTheme();
+  const [showComponent, setShowComponent] = useState(false);
+
+  useEffect(() => setShowComponent(true), []);
+
   return (
     <div
       style={{
         backgroundColor: theme.colorBgLayout,
       }}
     >
-      <ProChat
-        style={{
-          height: '100vh',
-          width: '100vw',
-        }}
-        request={async (messages) => {
-          const response = await fetch('/api/qwen', {
-            method: 'POST',
-            body: JSON.stringify({ messages: messages }),
-          });
-          const data = await response.json();
-          return new Response(data.output?.text);
-        }}
-      />
+      {showComponent && (
+        <ProChat
+          style={{
+            height: '100vh',
+            width: '100vw',
+          }}
+          request={async (messages) => {
+            const response = await fetch('/api/qwen', {
+              method: 'POST',
+              body: JSON.stringify({ messages: messages }),
+            });
+            const data = await response.json();
+            return new Response(data.output?.text);
+          }}
+        />
+      )}
     </div>
   );
 }
diff --git a/docs/guide/chatgpt.md b/docs/guide/chatgpt.md
@@ -59,36 +59,44 @@ export const POST = async (request: Request) => {
 ## 界面
 
 ```ts
-"use client";
-
-import { ProChat } from "@ant-design/pro-chat";
-import { useTheme } from "antd-style";
+'use client';
+import { useState, useEffect } from 'react'
+import { ProChat } from '@ant-design/pro-chat';
+import { useTheme } from 'antd-style';
 
 export default function Home() {
+
   const theme = useTheme();
+  const [showComponent, setShowComponent] = useState(false)
+
+  useEffect(() => setShowComponent(true), [])
+
   return (
     <div
       style={{
         backgroundColor: theme.colorBgLayout,
       }}
     >
-      <ProChat
-        style={{
-          height: "100vh",
-          width: "100vw",
-        }}
-        request={async (messages: Array<any>) => {
-          const response = await fetch("/api/openai", {
-            method: "POST",
-            body: JSON.stringify({ messages: messages }),
-          });
-
-          return response;
-        }}
-      />
+      {
+        showComponent && <ProChat
+          style={{
+            height: '100vh',
+            width: '100vw',
+          }}
+          request={async (messages) => {
+            const response = await fetch('/api/qwen', {
+              method: 'POST',
+              body: JSON.stringify({ messages: messages }),
+            });
+            const data = await response.json();
+            return new Response(data.output?.text);
+          }}
+        />
+      }
     </div>
   );
 }
+
 ```
 
 ### 完整的代码

diff --git a/docs/guide/qwen.md b/docs/guide/qwen.md
@@ -89,33 +89,40 @@ export async function POST(request: Request) {
 在你想要编写的页面上写入 ProChat 并拼接对应内容
 
 ```ts
-"use client";
-
-import { useTheme } from "antd-style";
-import { ProChat } from "@ant-design/pro-chat";
+'use client';
+import { useState, useEffect } from 'react'
+import { ProChat } from '@ant-design/pro-chat';
+import { useTheme } from 'antd-style';
 
 export default function Home() {
+
   const theme = useTheme();
+  const [showComponent, setShowComponent] = useState(false)
+
+  useEffect(() => setShowComponent(true), [])
+
   return (
     <div
       style={{
         backgroundColor: theme.colorBgLayout,
       }}
     >
-      <ProChat
-        style={{
-          height: "100vh",
-          width: "100vw",
-        }}
-        request={async (messages) => {
-          const response = await fetch("/api/qwen", {
-            method: "POST",
-            body: JSON.stringify({ messages: messages }),
-          });
-          const data = await response.json();
-          return new Response(data.output?.text);
-        }}
-      />
+      {
+        showComponent && <ProChat
+          style={{
+            height: '100vh',
+            width: '100vw',
+          }}
+          request={async (messages) => {
+            const response = await fetch('/api/qwen', {
+              method: 'POST',
+              body: JSON.stringify({ messages: messages }),
+            });
+            const data = await response.json();
+            return new Response(data.output?.text);
+          }}
+        />
+      }
     </div>
   );
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/pro-chat",
-  "version": "1.4.1",
+  "version": "1.4.4",
   "description": "a solution for ai chat",
   "keywords": [
     "ai",

diff --git a/src/ChatItem/index.tsx b/src/ChatItem/index.tsx
@@ -85,7 +85,6 @@ const ChatItem = memo<ChatItemProps>((props) => {
       />
     );
     return chatItemRenderConfig?.contentRender?.(props, dom) || dom;
-    return;
   }, [
     error,
     message,

diff --git a/src/ChatItem/type.ts b/src/ChatItem/type.ts
@@ -6,7 +6,7 @@ import { DivProps, MetaData } from '@/types';
 
 export type WithFalse<T> = T | false;
 
-export interface ChatItemProps {
+export interface ChatItemProps<T = Record<string, any>> {
   /**
    * @description Actions to be displayed in the chat item
    */
@@ -97,4 +97,6 @@ export interface ChatItemProps {
       ) => ReactNode
     >;
   };
+
+  originData?: T;
 }
diff --git a/src/ChatList/ChatListItem.tsx b/src/ChatList/ChatListItem.tsx
@@ -19,7 +19,7 @@ export type RenderMessageExtra = FC<ChatMessage>;
 export type RenderErrorMessage = FC<ChatMessage>;
 export type RenderAction = FC<ActionsBarProps & ChatMessage>;
 
-export interface ListItemProps {
+export interface ListItemProps<T = Record<string, any>> {
   groupNav?: ChatItemProps['avatarAddon'];
   loading?: boolean;
   /**
@@ -85,16 +85,19 @@ export interface ListItemProps {
    * @description 聊天项的渲染函数
    */
   chatItemRenderConfig?: ChatItemProps['chatItemRenderConfig'];
+
+  originData?: ChatItemProps<T>['originData'];
 }
 
-export type ChatListItemProps = ChatMessage & ListItemProps;
+export type ChatListItemProps<T = Record<string, any>> = ChatMessage & ListItemProps<T>;
 
-const Item = (props: ChatListItemProps) => {
+const ChatListItem = (props: ChatListItemProps) => {
   const {
     renderMessagesExtra,
     showTitle,
     onActionsClick,
     onMessageChange,
+    originData,
     type,
     text,
     renderMessages,
@@ -204,6 +207,7 @@ const Item = (props: ChatListItemProps) => {
         avatar={(item as any).meta}
         avatarAddon={groupNav}
         editing={editing}
+        originData={originData}
         error={error}
         errorMessage={<ErrorMessage data={item} />}
         loading={loading}
@@ -230,11 +234,18 @@ const Item = (props: ChatListItemProps) => {
       />
     );
     return dom;
-  }, [props.content, props.loading, props.id, (item as any).meta, item.updateAt || item.createAt]);
+  }, [
+    props.content,
+    props.loading,
+    props.id,
+    (item as any).meta,
+    item.updateAt || item.createAt,
+    editing,
+  ]);
 
   if (RenderItem) return <RenderItem key={item.id} {...props} />;
 
   return memoItem;
 };
 
-export default Item;
+export default ChatListItem;
-Original file line number
+Diff line change
@@ Expand Up / @@ -85,7 +85,6 @@ const ChatItem = memo<ChatItemProps>((props) => { @@
           />
         );
         return chatItemRenderConfig?.contentRender?.(props, dom) || dom;
-        return;
       }, [
         error,
         message,
@@ Expand Down @@