✨ feat: 支持自定义 Error 渲染 & 配套文档 (ant-design#155)

* ✨ feat: error support custom

* 💚 fix: ci fixed

docs/guide/demos/error-custom.tsx

@@ -0,0 +1,53 @@
+/**
+ * compact: true
+ * iframe: 1000
+ */
+import { ProChat, ProChatInstance } from '@ant-design/pro-chat';
+import { Button, Card, Result } from 'antd';
+import { useTheme } from 'antd-style';
+import { useEffect, useRef } from 'react';
+import { MockResponse } from './mocks/streamResponse';
+
+export default () => {
+ const theme = useTheme();
+
+ const chatRef1 = useRef<ProChatInstance>();
+
+ useEffect(() => {
+ setTimeout(() => {
+ chatRef1.current.sendMessage('Hello!');
+ }, 500);
+ }, []);
+
+ return (
+ <>
+ <div style={{ background: theme.colorBgLayout }}>
+ <ProChat
+ request={async () => {
+ const mockResponse = new MockResponse('', 1000, true);
+ return mockResponse.getResponse();
+ }}
+ chatRef={chatRef1}
+ style={{ height: 500 }}
+ renderErrorMessages={(errorResponse) => {
+ return (
+ <Card>
+ <Result
+ status="error"
+ title="Something Error"
+ subTitle={errorResponse.message}
+ extra={[
+ <Button type="primary" key="console">
+ Try Again
+ </Button>,
+ <Button key="buy">Buy Token</Button>,
+ ]}
+ />
+ </Card>
+ );
+ }}
+ />
+ </div>
+ </>
+ );
+};

docs/guide/demos/error.tsx

@@ -0,0 +1,29 @@
+/**
+ * compact: true
+ */
+import { ProChat, ProChatInstance } from '@ant-design/pro-chat';
+import { useTheme } from 'antd-style';
+import { useEffect, useRef } from 'react';
+
+export default () => {
+ const theme = useTheme();
+
+ const chatRef1 = useRef<ProChatInstance>();
+
+ useEffect(() => {
+ chatRef1.current.sendMessage('Hello!');
+ });
+
+ return (
+ <>
+ <div style={{ background: theme.colorBgLayout }}>
+ <ProChat
+ chatRef={chatRef1}
+ request={async () => {
+ return new Response('token 长度超限', { status: 500, statusText: 'limited of token' });
+ }}
+ />
+ </div>
+ </>
+ );
+};

docs/guide/demos/mocks/streamResponse.ts

@@ -1,17 +1,26 @@
 export class MockResponse {
  private controller!: ReadableStreamDefaultController<Uint8Array>;
  private encoder = new TextEncoder();
-
  private stream: ReadableStream<Uint8Array>;
+ private error: boolean;
 
  constructor(
  private data: string,
  private delay: number = 300,
+ error: boolean = false, // 新增参数，默认为false
  ) {
+ this.error = error;
+
  this.stream = new ReadableStream({
  start: (controller) => {
  this.controller = controller;
- this.pushData();
+ if (!this.error) {
+ // 如果不是错误情况，则开始推送数据
+ setTimeout(() => this.pushData(), this.delay); // 延迟开始推送数据
+ }
+ },
+ cancel(reason) {
+ console.log('Stream canceled', reason);
  },
  });
  }
@@ -27,10 +36,27 @@ export class MockResponse {
 
  this.controller.enqueue(this.encoder.encode(chunk));
 
- setTimeout(() => this.pushData(), this.delay);
+ if (this.data.length > 0) {
+ setTimeout(() => this.pushData(), this.delay);
+ } else {
+ // 数据全部发送完毕后关闭流
+ setTimeout(() => this.controller.close(), this.delay);
+ }
  }
 
- getResponse() {
- return new Response(this.stream);
+ getResponse(): Promise<Response> {
+ return new Promise((resolve) => {
+ // 使用setTimeout来模拟网络延迟
+ setTimeout(() => {
+ if (this.error) {
+ const errorResponseOptions = { status: 500, statusText: 'Internal Server Error' };
+
+ // 返回模拟的网络错误响应，这里我们使用500状态码作为示例
+ resolve(new Response(null, errorResponseOptions));
+ } else {
+ resolve(new Response(this.stream));
+ }
+ }, this.delay); // 使用构造函数中设置的delay值作为延迟时间
+ });
  }
 }

src/ChatItem/components/ErrorContent.tsx

@@ -7,18 +7,16 @@ import { ChatItemProps } from '@/ChatItem';
 import { useStyles } from '../style';
 
 export interface ErrorContentProps {
- error?: ChatItemProps['error'];
- message?: ChatItemProps['errorMessage'];
+ message?: string;
  placement?: ChatItemProps['placement'];
 }
 
-const ErrorContent = memo<ErrorContentProps>(({ message, error, placement }) => {
+const ErrorContent = memo<ErrorContentProps>(({ message, placement }) => {
  const { styles } = useStyles({ placement });
 
  return (
  <Flexbox gap={8}>
- <Alert className={styles.alert} showIcon type={'error'} {...error} />
- {message}
+ <Alert className={styles.alert} showIcon type={'error'} message={message} />
  </Flexbox>
  );
 });

src/ChatItem/index.tsx

@@ -35,8 +35,8 @@ const ChatItem = memo<ChatItemProps>((props) => {
  messageExtra,
  renderMessage,
  text,
- errorMessage,
  chatItemRenderConfig,
+ renderErrorMessages,
  markdownProps,
  onDoubleClick,
  originData,
@@ -55,6 +55,8 @@ const ChatItem = memo<ChatItemProps>((props) => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixClass = getPrefixCls('pro-chat');
 
+ const errorMessage = error?.message;
+
  const avatarDom = useMemo(() => {
  if (chatItemRenderConfig?.avatarRender === false) return null;
  const dom = (
@@ -73,7 +75,11 @@ const ChatItem = memo<ChatItemProps>((props) => {
  const messageContentDom = useMemo(() => {
  if (chatItemRenderConfig?.contentRender === false) return null;
  const dom = error ? (
- <ErrorContent error={error} message={errorMessage} placement={placement} />
+ renderErrorMessages ? (
+ renderErrorMessages(error)
+ ) : (
+ <ErrorContent message={errorMessage} placement={placement} />
+ )
  ) : (
  <MessageContent
  editing={editing}
@@ -108,6 +114,7 @@ const ChatItem = memo<ChatItemProps>((props) => {
 
  const actionsDom = useMemo(() => {
  if (chatItemRenderConfig?.actionsRender === false) return null;
+ if (error) return null;
  const dom = (
  <Actions
  actions={actions}

src/ChatItem/type.ts

@@ -1,8 +1,7 @@
-import { AlertProps } from 'antd';
 import { ReactNode } from 'react';
 
 import { EditableMessageProps } from '@/EditableMessage';
-import { DivProps, MetaData } from '@/types';
+import { ChatMessageError, DivProps, MetaData } from '@/types';
 import { MarkdownProps } from '@ant-design/pro-editor';
 
 export type WithFalse<T> = T | false;
@@ -28,8 +27,7 @@ export interface ChatItemProps<T = Record<string, any>> {
  /**
  * @description Props for Error render
  */
- error?: AlertProps;
- errorMessage?: ReactNode;
+ error?: ChatMessageError;
  /**
  * @description Whether the chat item is in loading state
  */
@@ -106,5 +104,7 @@ export interface ChatItemProps<T = Record<string, any>> {
  >;
  };
 
+ renderErrorMessages?: (data: ChatMessageError) => ReactNode;
+
  originData?: T;
 }

src/ChatList/ChatListItem.tsx

@@ -5,7 +5,7 @@ import { FC, ReactNode, useMemo, useState } from 'react';
 import { ActionEvent } from '@/ActionIconGroup';
 import ChatItem, { type ChatItemProps } from '@/ChatItem';
 import { LLMRoleType } from '@/types/llm';
-import { ChatMessage } from '@/types/message';
+import { ChatMessage, ChatMessageError } from '@/types/message';
 
 import { useRefFunction } from '@/ProChat/hooks/useRefFunction';
 import { MarkdownProps } from '@ant-design/pro-editor';
@@ -50,9 +50,7 @@ export interface ListItemProps<T = Record<string, any>> {
  /**
  * 渲染错误消息的函数。
  */
- renderErrorMessages?: {
- [errorType: 'default' | string]: RenderErrorMessage;
- };
+ renderErrorMessages?: (data: ChatMessageError) => ReactNode;
  /**
  * 渲染列表项的函数。
  */
@@ -141,7 +139,6 @@ const ChatListItem = (props: ChatListItemProps) => {
  markdownProps,
  ...item
  } = props;
-
  const [editing, setEditing] = useState(false);
 
  const { message } = App.useApp();
@@ -192,22 +189,6 @@ const ChatListItem = (props: ChatListItemProps) => {
  return <RenderFunction {...data} />;
  });
 
- /**
- * 渲染错误消息的函数。
- * @param data 聊天消息的数据。
- * @returns 渲染错误消息的组件。
- */
- const ErrorMessage = useRefFunction(({ data }: { data: ChatMessage }) => {
- if (!renderErrorMessages || !item?.error?.type) return;
- let RenderFunction;
- if (renderErrorMessages?.[item.error.type])
- RenderFunction = renderErrorMessages[item.error.type];
- if (!RenderFunction && renderErrorMessages?.['default'])
- RenderFunction = renderErrorMessages['default'];
- if (!RenderFunction) return;
- return <RenderFunction {...data} />;
- });
-
  /**
  * 渲染操作按钮的函数。
  * @param data 聊天消息的数据。
@@ -250,9 +231,7 @@ const ChatListItem = (props: ChatListItemProps) => {
  */
  const error = useMemo(() => {
  if (!item.error) return;
- return {
- message: item.error?.message,
- };
+ return item.error;
  }, [item.error]);
 
  /**
@@ -269,7 +248,7 @@ const ChatListItem = (props: ChatListItemProps) => {
  editing={editing}
  originData={originData}
  error={error}
- errorMessage={<ErrorMessage data={item} />}
+ renderErrorMessages={renderErrorMessages}
  loading={loading}
  message={item.content}
  messageExtra={<MessageExtra data={item} />}
@@ -300,6 +279,7 @@ const ChatListItem = (props: ChatListItemProps) => {
  props.loading,
  props.id,
  (item as any).meta,
+ item.error,
  item.updateAt || item.createAt,
  editing,
  ]);

src/ProChat/components/ChatList/index.tsx

@@ -19,7 +19,7 @@ interface ListProps extends Partial<ChatListProps> {
 }
 
 const List = memo<ListProps>(
- ({ showTitle, itemShouldUpdate, chatItemRenderConfig, markdownProps }) => {
+ ({ showTitle, itemShouldUpdate, chatItemRenderConfig, renderErrorMessages, markdownProps }) => {
  const data = useStore(chatSelectors.currentChatsWithGuideMessage, isEqual);
  const { localeObject: localeObj } = useProChatLocale();
 
@@ -96,6 +96,7 @@ const List = memo<ListProps>(
  renderActions={renderActions}
  // need support custom Render
  renderMessages={renderMessages}
+ renderErrorMessages={renderErrorMessages}
  renderMessagesExtra={renderMessagesExtra}
  style={{ marginTop: 24 }}
  chatItemRenderConfig={chatItemRenderConfig}

src/ProChat/container/App.tsx

@@ -4,6 +4,7 @@ import RcResizeObserver from 'rc-resize-observer';
 import { CSSProperties, memo, useContext, useEffect, useRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { ChatListItemProps } from '@/ChatList/ChatListItem';
 import { ConfigProvider } from 'antd';
 import ChatList from '../components/ChatList';
 import ChatInputArea, { ChatInputAreaProps } from '../components/InputArea';
@@ -66,6 +67,8 @@ export interface ConversationProps extends ProChatProps<any> {
  * @param defaultProps 默认的属性
  */
  sendButtonRender?: ChatInputAreaProps['sendButtonRender'];
+
+ renderErrorMessages?: ChatListItemProps['renderErrorMessages'];
 }
 
 const App = memo<ConversationProps>(
@@ -80,6 +83,7 @@ const App = memo<ConversationProps>(
  inputRender,
  chatItemRenderConfig,
  backToBottomConfig,
+ renderErrorMessages,
  sendButtonRender,
  markdownProps,
  }) => {
@@ -136,6 +140,7 @@ const App = memo<ConversationProps>(
  itemShouldUpdate={itemShouldUpdate}
  chatItemRenderConfig={chatItemRenderConfig}
  markdownProps={markdownProps}
+ renderErrorMessages={renderErrorMessages}
  />
  <ChatScrollAnchor target={ref} />
  </div>

src/ProChat/container/index.tsx

@@ -40,7 +40,12 @@ export interface ProChatProps<T extends Record<string, any>> extends ChatProps<T
  * @param defaultProps 默认的属性
  */
  sendButtonRender?: ConversationProps['sendButtonRender'];
-
+ /**
+ * 聊天出现 Error 错误时候的自定义渲染
+ * @param defaultDom 默认的 DOM 元素
+ * @param defaultProps 默认的属性
+ */
+ renderErrorMessages?: ConversationProps['renderErrorMessages'];
  /**
  * __PRO_CHAT_STORE_DEVTOOLS__ 是一个可选的布尔值或 DevtoolsOptions 对象，用于开启 ProChat 的开发者工具。
  */
@@ -88,6 +93,7 @@ export function ProChat<T extends Record<string, any> = Record<string, any>>({
  appStyle,
  inputRender,
  markdownProps,
+ renderErrorMessages,
  inputAreaRender,
  sendButtonRender,
  ...props
@@ -111,6 +117,7 @@ export function ProChat<T extends Record<string, any> = Record<string, any>>({
  chatRef={props.chatRef}
  showTitle={showTitle}
  style={style}
+ renderErrorMessages={renderErrorMessages}
  backToBottomConfig={backToBottomConfig}
  className={className}
  markdownProps={markdownProps}

src/ProChat/demos/doc-mode.tsx

@@ -1,5 +1,5 @@
 /**
- * iframe: 800
+ * iframe: 1000
  * compact: true
  */
 import { ProChat } from '@ant-design/pro-chat';