✨ feat: 支持非流式请求

ant-design · Oct 22, 2023 · 211fad5 · 211fad5
1 parent ac81b1d
commit 211fad5
Show file tree

Hide file tree

Showing 13 changed files with 74 additions and 28 deletions.
diff --git a/src/ProChat/container/App.tsx b/src/ProChat/container/App.tsx
@@ -1,6 +1,6 @@
 import BackBottom from '@/BackBottom';
 import { createStyles } from 'antd-style';
-import { ReactNode, memo, useRef } from 'react';
+import { CSSProperties, ReactNode, memo, useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import ChatList from '../components/ChatList';
@@ -22,14 +22,16 @@ const useStyles = createStyles(
 interface ConversationProps {
   chatInput?: ReactNode;
   showTitle?: boolean;
+  style?: CSSProperties;
+  className?: string;
 }
 
-const App = memo<ConversationProps>(({ chatInput, showTitle }) => {
+const App = memo<ConversationProps>(({ chatInput, className, style, showTitle }) => {
   const ref = useRef(null);
-  const { styles } = useStyles();
+  const { styles, cx } = useStyles();
   const { styles: override } = useOverrideStyles();
   return (
-    <Flexbox className={override.container} flex={1} style={{ position: 'relative' }}>
+    <Flexbox className={cx(override.container, className)} style={style}>
       <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
         <div className={styles} ref={ref}>
           <ChatList showTitle={showTitle} />

diff --git a/src/ProChat/container/index.tsx b/src/ProChat/container/index.tsx
@@ -1,5 +1,5 @@
 import { App as Container } from 'antd';
-import { ReactNode, memo } from 'react';
+import { CSSProperties, ReactNode, memo } from 'react';
 
 import App from './App';
 
@@ -12,6 +12,8 @@ export interface ProChatProps extends ChatProps {
   renderInput?: ReactNode;
   __PRO_CHAT_STORE_DEVTOOLS__?: boolean | DevtoolsOptions;
   showTitle?: boolean;
+  style?: CSSProperties;
+  className?: string;
 }
 
 export const ProChat = memo<ProChatProps>(
@@ -27,6 +29,8 @@ export const ProChat = memo<ProChatProps>(
     assistantMeta,
     showTitle,
     request,
+    style,
+    className,
     ...props
   }) => {
     return (
@@ -42,7 +46,7 @@ export const ProChat = memo<ProChatProps>(
         devtoolOptions={__PRO_CHAT_STORE_DEVTOOLS__}
       >
         <Container>
-          <App chatInput={renderInput} showTitle={showTitle} />
+          <App chatInput={renderInput} showTitle={showTitle} style={style} className={className} />
         </Container>
         <StoreUpdater
           init={!loading}

diff --git a/src/ProChat/demos/control.tsx b/src/ProChat/demos/control.tsx
@@ -5,7 +5,6 @@ import { ChatMessageMap, ProChat } from '@ant-design/pro-chat';
 
 import { useTheme } from 'antd-style';
 import { useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
 import { MockResponse } from '../mocks/streamResponse';
 
@@ -15,7 +14,7 @@ export default () => {
   const [chats, setChats] = useState<ChatMessageMap>();
 
   return (
-    <Flexbox style={{ background: theme.colorBgLayout }}>
+    <div style={{ background: theme.colorBgLayout }}>
       <ProChat
         chats={chats}
         onChatsChange={(chats) => {
@@ -30,6 +29,6 @@ export default () => {
           return mockResponse.getResponse();
         }}
       />
-    </Flexbox>
+    </div>
   );
 };
diff --git a/src/ProChat/demos/default.tsx b/src/ProChat/demos/default.tsx
@@ -4,14 +4,13 @@
 import { ProChat } from '@ant-design/pro-chat';
 
 import { useTheme } from 'antd-style';
-import { Flexbox } from 'react-layout-kit';
 import { example } from '../mocks/basic';
 
 export default () => {
   const theme = useTheme();
   return (
-    <Flexbox style={{ background: theme.colorBgLayout }}>
+    <div style={{ background: theme.colorBgLayout }}>
       <ProChat request={'/api/chat'} config={example.config} />
-    </Flexbox>
+    </div>
   );
 };
diff --git a/src/ProChat/demos/doc-mode.tsx b/src/ProChat/demos/doc-mode.tsx
@@ -3,15 +3,14 @@
  */
 import { ProChat } from '@ant-design/pro-chat';
 import { useTheme } from 'antd-style';
-import { Flexbox } from 'react-layout-kit';
 
 import { example } from '../mocks/fullFeature';
 import { MockResponse } from '../mocks/streamResponse';
 
 export default () => {
   const theme = useTheme();
   return (
-    <Flexbox style={{ background: theme.colorBgLayout }}>
+    <div style={{ background: theme.colorBgLayout }}>
       <ProChat
         displayMode={'docs'}
         request={async (messages) => {
@@ -24,6 +23,6 @@ export default () => {
         chats={example.chats}
         config={example.config}
       />
-    </Flexbox>
+    </div>
   );
 };
diff --git a/src/ProChat/demos/helloMessage.tsx b/src/ProChat/demos/helloMessage.tsx
@@ -4,17 +4,16 @@
 import { ProChat } from '@ant-design/pro-chat';
 
 import { useTheme } from 'antd-style';
-import { Flexbox } from 'react-layout-kit';
 
 export default () => {
   const theme = useTheme();
   return (
-    <Flexbox style={{ background: theme.colorBgLayout }}>
+    <div style={{ background: theme.colorBgLayout }}>
       <ProChat
         helloMessage={
           '这是一条自定义消息，支持 markdown 消息，例如：[ProChat](https://github.com/ant-design/pro-chat)'
         }
       />
-    </Flexbox>
+    </div>
   );
 };
diff --git a/src/ProChat/demos/initialChats.tsx b/src/ProChat/demos/initialChats.tsx
@@ -4,14 +4,13 @@
 import { ProChat } from '@ant-design/pro-chat';
 
 import { useTheme } from 'antd-style';
-import { Flexbox } from 'react-layout-kit';
 import { example } from '../mocks/basic';
 
 export default () => {
   const theme = useTheme();
   return (
-    <Flexbox style={{ background: theme.colorBgLayout }}>
+    <div style={{ background: theme.colorBgLayout }}>
       <ProChat initialChats={example.chats} config={example.config} />
-    </Flexbox>
+    </div>
   );
 };
diff --git a/src/ProChat/demos/meta.tsx b/src/ProChat/demos/meta.tsx
@@ -1,19 +1,18 @@
 import { chats } from '@/ProChat/mocks/threebody';
 import { ProChat } from '@ant-design/pro-chat';
 import { useTheme } from 'antd-style';
-import { Flexbox } from 'react-layout-kit';
 
 export default () => {
   const theme = useTheme();
 
   return (
-    <Flexbox style={{ background: theme.colorBgLayout }}>
+    <div style={{ background: theme.colorBgLayout }}>
       <ProChat
         showTitle
         userMeta={{ avatar: '🧔', title: '罗辑' }}
         assistantMeta={{ avatar: '🛸', title: '三体世界', backgroundColor: 'blue' }}
         initialChats={chats.chats}
       />
-    </Flexbox>
+    </div>
   );
 };
diff --git a/src/ProChat/demos/no-stream.tsx b/src/ProChat/demos/no-stream.tsx
@@ -0,0 +1,33 @@
+/**
+ * iframe: 500
+ * title: 非流式的请求
+ * description: 消息将在等待 5s 后返回
+ */
+import { ProChat } from '@ant-design/pro-chat';
+import { useTheme } from 'antd-style';
+
+const delay = (text: string) =>
+  new Promise<string>((resolve) => {
+    setTimeout(() => {
+      resolve(text);
+    }, 5000);
+  });
+
+export default () => {
+  const theme = useTheme();
+
+  return (
+    <div style={{ background: theme.colorBgLayout, height: '100vh' }}>
+      <ProChat
+        request={async (messages) => {
+          const text = await delay(
+            `这是一条模拟非流式输出的消息的消息。本次会话传入了${messages.length}条消息`,
+          );
+
+          return new Response(text);
+        }}
+        style={{ height: '100vh' }}
+      />
+    </div>
+  );
+};
diff --git a/src/ProChat/demos/request.tsx b/src/ProChat/demos/request.tsx
@@ -3,15 +3,14 @@
  */
 import { ProChat } from '@ant-design/pro-chat';
 import { useTheme } from 'antd-style';
-import { Flexbox } from 'react-layout-kit';
 
 import { MockResponse } from '../mocks/streamResponse';
 
 export default () => {
   const theme = useTheme();
 
   return (
-    <Flexbox style={{ background: theme.colorBgLayout }}>
+    <div style={{ background: theme.colorBgLayout }}>
       <ProChat
         request={async (messages) => {
           const mockedData: string = `这是一段模拟的流式字符串数据。本次会话传入了${messages.length}条消息`;
@@ -21,6 +20,6 @@ export default () => {
           return mockResponse.getResponse();
         }}
       />
-    </Flexbox>
+    </div>
   );
 };
diff --git a/src/ProChat/index.md b/src/ProChat/index.md
@@ -21,6 +21,12 @@ interface Params {}
 
 <code src="./demos/request.tsx"></code>
 
+### 非流式模式
+
+非流式模式下，会话消息会一次性全部返回，适用于消息量较少的场景。如果消息量较大，可能用户体验较差。
+
+<code src="./demos/no-stream.tsx"></code>
+
 ## 受控模式
 
 使用 `chats` 和 `onChatsChange` 实现 chats 会话消息的受控

diff --git a/src/ProChat/store/action.ts b/src/ProChat/store/action.ts
@@ -96,11 +96,13 @@ export const chatAction: StateCreator<ChatStore, [['zustand/devtools', never]],
   },
 
   dispatchMessage: (payload) => {
-    const { chats } = get();
+    const { chats, onChatsChange } = get();
 
     const nextChats = messagesReducer(chats, payload);
 
     set({ chats: nextChats }, false, t('dispatchMessage'));
+
+    onChatsChange?.(nextChats);
   },
   generateMessage: async (messages, assistantId) => {
     const { dispatchMessage, toggleChatLoading, config, defaultModelFetcher } = get();

diff --git a/src/ProChat/store/initialState.ts b/src/ProChat/store/initialState.ts
@@ -23,6 +23,11 @@ export interface ChatPropsState {
    */
   helloMessage?: string;
   request?: string | ChatRequest;
+  // /**
+  //  * 控制是否流式输出
+  //  * @default true
+  //  */
+  // stream: boolean;
 }
 
 export interface ChatState extends ChatPropsState {
@@ -54,4 +59,5 @@ export const initialState: ChatState = {
     avatar: DEFAULT_AVATAR,
   },
   config: initialModelConfig,
+  // stream: true,
 };