18 | {showComponent && (
19 | {
25 | const response = await fetch('/api/openai', {
26 | method: 'POST',
27 | body: JSON.stringify({ messages: messages }),
28 | });
29 | return response;
30 | }}
31 | />
32 | )}
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/demos/chatgpt-nextjs/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from 'next';
2 | import { Inter } from 'next/font/google';
3 | import './globals.css';
4 |
5 | const inter = Inter({ subsets: ['latin'] });
6 |
7 | export const metadata: Metadata = {
8 | title: 'Create Next App',
9 | description: 'Generated by create next app',
10 | };
11 |
12 | export default function RootLayout({ children }: { children: React.ReactNode }) {
13 | return (
14 |
15 | {children}
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/demos/chatgpt-nextjs/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import Page from './chatgpt';
2 |
3 | const Index = () => (
4 | <>
5 |
19 | {
20 | showComponent && {
26 | const response = await fetch('/api/qwen', {
27 | method: 'POST',
28 | body: JSON.stringify({ messages: messages }),
29 | });
30 | const data = await response.json();
31 | return new Response(data.output?.text);
32 | }}
33 | />
34 | }
35 |
36 | );
37 | }
38 |
39 |
--------------------------------------------------------------------------------
/demos/qwen-nextjs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "noEmit": true,
9 | "esModuleInterop": true,
10 | "module": "esnext",
11 | "moduleResolution": "bundler",
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "jsx": "preserve",
15 | "incremental": true,
16 | "plugins": [
17 | {
18 | "name": "next"
19 | }
20 | ],
21 | "paths": {
22 | "@/*": ["./src/*"]
23 | }
24 | },
25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 | "exclude": ["node_modules"]
27 | }
28 |
--------------------------------------------------------------------------------
/docs/changelog.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Changelog
3 | nav:
4 | title: Changelog
5 | order: 999
6 | ---
7 |
8 |
9 |
--------------------------------------------------------------------------------
/docs/changelog.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 更新日志
3 | nav:
4 | title: 更新日志
5 | order: 999
6 | ---
7 |
8 |
9 |
--------------------------------------------------------------------------------
/docs/guide/chatItemRenderConfig.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 深度自定义对话内容
3 | order: 21
4 | group:
5 | title: 使用案例
6 | nav:
7 | title: 文档
8 | order: 0
9 | ---
10 |
11 | ## 深度自定义对话内容
12 |
13 | 很多时候业务场景下并不会那么理想，永远返回一些数据。
14 |
15 | 他可能会想要展示一个图表、甚至是一个表单，或者任意一个带有业务属性的 React 组件，这个时候该怎么办？
16 |
17 | 我们提供了一个 `chatItemRenderConfig` 的 api 来帮助你解决这一类问题。
18 |
19 | ## chatItemRenderConfig 参数说明
20 |
21 | 这个 `api` 包含 5 个参数
22 |
23 | - `titleRender`: 标题渲染函数
24 | - `contentRender`: 内容渲染函数
25 | - `actionsRender`: 操作渲染函数
26 | - `avatarRender`: 头像渲染函数
27 | - `render`: 自定义渲染函数
28 |
29 | ## 使用案例
30 |
31 | 以下是如何在ProChat组件中使用 `chatItemRenderConfig` 的示例：
32 |
33 | ### 特殊通知
34 |
35 |
12 | {
17 | const mockedData: string = `这是一段模拟的对话数据。本次会话传入了${messages.length}条消息`;
18 | return new Response(mockedData);
19 | }}
20 | />
21 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/docs/guide/demos/controled-servers-push.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | */
4 | import { ChatMessage, ProChat } from '@ant-design/pro-chat';
5 |
6 | import { Alert } from 'antd';
7 | import { useTheme } from 'antd-style';
8 | import { useEffect, useState } from 'react';
9 |
10 | import { example } from './mocks/fullFeature';
11 | import { MockResponse } from './mocks/streamResponse';
12 |
13 | export default () => {
14 | const theme = useTheme();
15 | const [chats, setChats] = useState
33 | {
36 | setChats(chats);
37 | }}
38 | chatItemRenderConfig={{
39 | render: (item, dom, defaultDom) => {
40 | if (item?.originData?.role === 'notification') {
41 | return (
42 |
65 | );
66 | };
67 |
--------------------------------------------------------------------------------
/docs/guide/demos/doc-mode.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * iframe: 800
3 | */
4 | import { ProChat } from '@ant-design/pro-chat';
5 | import { useTheme } from 'antd-style';
6 |
7 | import { example } from './mocks/fullFeature';
8 | import { MockResponse } from './mocks/streamResponse';
9 |
10 | export default () => {
11 | const theme = useTheme();
12 | return (
13 |
49 |
51 | );
52 | }
53 | return defaultDom;
54 | },
55 | }}
56 | request={async (messages) => {
57 | const mockedData: string = `这是一段模拟的流式字符串数据。本次会话传入了${messages.length}条消息`;
58 |
59 | const mockResponse = new MockResponse(mockedData, 100);
60 |
61 | return mockResponse.getResponse();
62 | }}
63 | />
64 |
14 | {
18 | const mockedData: string = `这是一段模拟的流式字符串数据。本次会话传入了${messages.length}条消息`;
19 |
20 | const mockResponse = new MockResponse(mockedData, 100);
21 |
22 | return mockResponse.getResponse();
23 | }}
24 | chats={example.chats}
25 | config={example.config}
26 | />
27 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/docs/guide/demos/error-custom.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | * iframe: 1000
4 | */
5 | import { ProChat, ProChatInstance } from '@ant-design/pro-chat';
6 | import { Button, Card, Result } from 'antd';
7 | import { useTheme } from 'antd-style';
8 | import { useEffect, useRef } from 'react';
9 | import { MockResponse } from './mocks/streamResponse';
10 |
11 | export default () => {
12 | const theme = useTheme();
13 |
14 | const chatRef1 = useRef
25 | {
27 | const mockResponse = new MockResponse('', 1000, true);
28 | return mockResponse.getResponse();
29 | }}
30 | chatRef={chatRef1}
31 | style={{ height: 500 }}
32 | renderErrorMessages={(errorResponse) => {
33 | return (
34 |
35 |
41 | Try Again
42 | ,
43 | ,
44 | ]}
45 | />
46 |
47 | );
48 | }}
49 | />
50 |
51 |
52 | );
53 | };
54 |
--------------------------------------------------------------------------------
/docs/guide/demos/error.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | */
4 | import { ProChat, ProChatInstance } from '@ant-design/pro-chat';
5 | import { useTheme } from 'antd-style';
6 | import { useEffect, useRef } from 'react';
7 |
8 | export default () => {
9 | const theme = useTheme();
10 |
11 | const chatRef1 = useRef
20 | {
23 | return new Response('token 长度超限', { status: 500, statusText: 'limited of token' });
24 | }}
25 | />
26 |
27 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/docs/guide/demos/mocks/streamResponse.ts:
--------------------------------------------------------------------------------
1 | export class MockResponse {
2 | private controller!: ReadableStreamDefaultController
79 |
81 | );
82 | };
83 |
--------------------------------------------------------------------------------
/docs/guide/demos/styles-chatitem.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | */
4 | import { ChatMessage, ProChat } from '@ant-design/pro-chat';
5 | import { useTheme } from 'antd-style';
6 | import { useState } from 'react';
7 | import { example } from './mocks/fullFeature';
8 |
9 | export default () => {
10 | const theme = useTheme();
11 | const [chats, setChats] = useState
15 | {
18 | setChats(chats);
19 | }}
20 | chatItemRenderConfig={{
21 | contentRender: (_, defaultContent) => {
22 | return (
23 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/docs/guide/demos/styles-className.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | */
4 | import { ChatMessage, ProChat } from '@ant-design/pro-chat';
5 | import { css, cx, useTheme } from 'antd-style';
6 | import { useState } from 'react';
7 | import { example } from './mocks/fullFeature';
8 |
9 | export default () => {
10 | const theme = useTheme();
11 | const [chats, setChats] = useState
29 | {defaultContent}
30 |
31 | );
32 | },
33 | }}
34 | request={async (messages) => {
35 | const mockedData: string = `这是一段模拟的对话数据。本次会话传入了${messages.length}条消息`;
36 | return new Response(mockedData);
37 | }}
38 | />
39 |
23 | {
26 | setChats(chats);
27 | }}
28 | chatItemRenderConfig={{
29 | contentRender: (_, defaultContent) => {
30 | return (
31 |
48 | );
49 | };
50 |
--------------------------------------------------------------------------------
/docs/guide/demos/styles-darkmode.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | */
4 | import { ChatMessage, ProChat } from '@ant-design/pro-chat';
5 | import { theme } from 'antd';
6 | import { ThemeProvider } from 'antd-style';
7 | import { useState } from 'react';
8 | import { example } from './mocks/fullFeature';
9 |
10 | export default () => {
11 | const [chats, setChats] = useState
37 | {defaultContent}
38 |
39 | );
40 | },
41 | }}
42 | request={async (messages) => {
43 | const mockedData: string = `这是一段模拟的对话数据。本次会话传入了${messages.length}条消息`;
44 | return new Response(mockedData);
45 | }}
46 | />
47 |
26 | {
29 | setChats(chats);
30 | }}
31 | request={async (messages) => {
32 | const mockedData: string = `这是一段模拟的对话数据。本次会话传入了${messages.length}条消息`;
33 | return new Response(mockedData);
34 | }}
35 | />
36 |
37 |
12 | {
24 | const mockedData: string = `这是一段模拟的对话数据。本次会话传入了${messages.length}条消息`;
25 | return new Response(mockedData);
26 | }}
27 | />
28 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/docs/guide/docs.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Details of Document Mode and Normal Mode
3 | order: 25
4 | group:
5 | title: Use Cases
6 | nav:
7 | title: Documents
8 | order: 0
9 | ---
10 |
11 | # Details of Document Mode and Normal Mode
12 |
13 | > Working on Progress
14 |
--------------------------------------------------------------------------------
/docs/guide/docs.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 文档模式和普通模式的细节
3 | order: 25
4 | group:
5 | title: 使用案例
6 | nav:
7 | title: 文档
8 | order: 0
9 | ---
10 |
11 | # 文档模式和普通模式的细节
12 |
13 | > Working on Progress
14 |
--------------------------------------------------------------------------------
/docs/guide/error.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Error handling
3 | order: 99
4 | group:
5 | title: Get Started
6 | order: 2
7 | ---
8 |
9 | # Error handling
10 |
11 | > Working on Progress
12 |
--------------------------------------------------------------------------------
/docs/guide/error.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 错误处理
3 | order: 99
4 | group:
5 | title: 快速上手
6 | order: 2
7 | ---
8 |
9 | # 错误处理
10 |
11 | > Working on Progress
12 |
--------------------------------------------------------------------------------
/docs/guide/intro-start.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Get Started
3 | group:
4 | title: Get Started
5 | order: 0
6 | nav:
7 | title: Documents
8 | order: 0
9 | ---
10 |
11 | # Get started
12 |
13 | ProEditor is positioned as a component library for the front-end to quickly build dialogue content in Chat conversation mode
14 |
15 | ## Install
16 |
17 | ```bash
18 | # @ant-design/pro-editor based on antd and antd-style，which need to be installed in the project
19 | $ npm install antd antd-style -S
20 | $ npm install @ant-design/pro-chat -S
21 | ```
22 |
23 | Due to the underlying dependency on antd, there are version requirements
24 |
25 | ```json
26 | "peerDependencies": {
27 | "antd": "^5",
28 | "antd-style": "^3",
29 | "react": "^18"
30 | },
31 | ```
32 |
33 | ### Using ProChat components
34 |
35 | The most critical component provided by ProChat is the ProChat component, which you can easily use.
36 |
37 | 
35 |
36 | 而同样的，ProChat 的 request api 也兼容传统的非流式请求：
37 |
38 | ```js
39 | import { ProChat } from '@ant-design/pro-chat';
40 | import { useTheme } from 'antd-style';
41 |
42 | const delay = (text: string) =>
43 | new Promise
53 | {
55 | const text = await delay(
56 | `这是一条模拟非流式输出的消息的消息。本次会话传入了${messages.length}条消息`,
57 | );
58 | return new Response(text);
59 | }}
60 | style={{ height: '300px' }}
61 | />
62 |
63 | );
64 | };
65 |
66 | ```
67 |
68 | ### 多种渲染支持
69 |
70 | 还有一点对前端来说比较头疼的在于「解析 - 渲染」
71 |
72 | 像是下面这种，如果你自己写，你需要对 String 部分的内容解析，然后决定哪些用什么渲染，我们已经帮你内置好了一些渲染器：Markdown 渲染、终端命令拼接、跳转链接等等常用的渲染器
73 |
74 | 
79 |
80 | ### 快速编辑、重试、更多能力
81 |
82 | 如果问错了问题？我想从某个地方开始，修改我之前的问题呢？或者我觉得他回复的不太好，后续的问题我希望帮他修改一下他的回答？
83 |
84 | 我们支持快速编辑、删除、重新生成这些能力，这些都是集成在 `ProChat` 这个组件中，开发者完全不需要有心智负担如何去实现这些能力，因为我们把这套数据流给你维护好啦！
85 |
--------------------------------------------------------------------------------
/docs/index.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | hero:
3 | title: ProChat
4 | description: 🤖 use Chat Components like Pro!
5 | actions:
6 | - text: 'Quick Start →'
7 | link: /en-US/guide/intro-start
8 | - text: 'Github'
9 | link: 'https://github.com/ant-design/pro-chat'
10 | features:
11 | - image: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/q48YQ5X4ytAAAAAAAAAAAAAAFl94AQBr'
12 | title: 'Simple and easy-to-use'
13 | description: 'Encapsulated on Ant Design, making it easier to use'
14 | - image: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
15 | title: 'Ant Design'
16 | description: 'Consistent with the Ant Design design system, seamlessly integrating with ant projects'
17 | - image: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/UKqDTIp55HYAAAAAAAAAAAAAFl94AQBr'
18 | title: 'Large model dialogue component'
19 | description: 'Common default basic operations of built-in dialogue models include data editing, resending, deleting conversations, etc'
20 | - image: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/Y_NMQKxw7OgAAAAAAAAAAAAAFl94AQBr'
21 | title: 'Preset styles'
22 | description: 'The style and style are in line with Antd, without the need for magic modification, and are naturally created. Default and user-friendly theme system'
23 | - image: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/U3XjS5IA1tUAAAAAAAAAAAAAFl94AQBr'
24 | title: 'The data structure of AI Friendly'
25 | description: 'Referring to mainstream large models such as ChatGPT, GLM, and Tongyi Qianwen on the market for input and output parameters, reduce the processing of these input and output parameters by front-end developers'
26 | - image: 'https://gw.alipayobjects.com/zos/antfincdn/Eb8IHpb9jE/Typescript_logo_2020.svg'
27 | title: 'TypeScript'
28 | description: 'Developed using TypeScript, providing complete type definition files without frequent opening of official websites'
29 | ---
30 |
--------------------------------------------------------------------------------
/docs/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | hero:
3 | title: ProChat
4 | description: 🤖 use Chat Components like Pro!
5 | actions:
6 | - text: '快速开始 →'
7 | link: /guide/intro-start
8 | - text: 'Github'
9 | link: 'https://github.com/ant-design/pro-chat'
10 | features:
11 | - image: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/q48YQ5X4ytAAAAAAAAAAAAAAFl94AQBr'
12 | title: '简单易用'
13 | description: '在 Ant Design 上进行了自己的封装，更加易用'
14 | - image: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
15 | title: 'Ant Design'
16 | description: '与 Ant Design 设计体系一脉相承，无缝对接 antd 项目'
17 | - image: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/UKqDTIp55HYAAAAAAAAAAAAAFl94AQBr'
18 | title: '大模型对话组件'
19 | description: '内置对话模型常用的：数据编辑、重新发送、删除对话等这些默认的基本操作'
20 | - image: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/Y_NMQKxw7OgAAAAAAAAAAAAAFl94AQBr'
21 | title: '预设样式'
22 | description: '样式风格与 antd 一脉相承，无需魔改，浑然天成。默认好用的主题系统'
23 | - image: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/U3XjS5IA1tUAAAAAAAAAAAAAFl94AQBr'
24 | title: 'AI Friendly 的数据结构'
25 | description: '参照 ChatGPT、GLM、通义千问等市面上主流的大模型入参出参，减少前端开发者对这些入参和出参的处理'
26 | - image: 'https://gw.alipayobjects.com/zos/antfincdn/Eb8IHpb9jE/Typescript_logo_2020.svg'
27 | title: 'TypeScript'
28 | description: '使用 TypeScript 开发，提供完整的类型定义文件，无需频繁打开官网'
29 | ---
30 |
--------------------------------------------------------------------------------
/src/ActionIcon/style.ts:
--------------------------------------------------------------------------------
1 | import { createStyles } from 'antd-style';
2 |
3 | export const useStyles = createStyles(
4 | ({ css, stylish, cx }, { glass }: { active: boolean; glass: boolean }) => {
5 | return {
6 | block: cx(
7 | glass && stylish?.blur,
8 | css`
9 | cursor: pointer;
10 |
11 | position: relative;
12 |
13 | display: flex;
14 | flex: none;
15 | align-items: center;
16 | justify-content: center;
17 | `,
18 | ),
19 | };
20 | },
21 | );
22 |
--------------------------------------------------------------------------------
/src/BackBottom/demos/index.tsx:
--------------------------------------------------------------------------------
1 | import { BackBottom } from '@ant-design/pro-chat';
2 | import { useRef } from 'react';
3 |
4 | export default () => {
5 | const ref = useRef(null);
6 | return (
7 |
8 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/src/BackBottom/index.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | nav: Components
3 | group: Chat
4 | title: BackBottom
5 | order: 10
6 | ---
7 |
8 | ## Default
9 |
10 |
9 | {Array.from({ length: 40 })
10 | .fill('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
11 | .map((item: any, index) => (
12 |
15 | {item}
13 | ))} 14 |
24 |
34 | );
35 |
36 | if (!addon) return avatarContent;
37 | return (
38 |
30 |
31 |
33 |
34 | );
35 | });
36 |
37 | export default HistoryDivider;
38 |
--------------------------------------------------------------------------------
/src/ChatList/ShouldUpdateItem.tsx:
--------------------------------------------------------------------------------
1 | import isEqual from 'fast-deep-equal';
2 | import { Component } from 'react';
3 | /**
4 | * 组件用于判断是否需要更新的辅助类。
5 | */
6 | class ShouldUpdateItem extends Component<
7 | {
8 | shouldUpdate?: (prevProps: any, nextProps: any) => boolean;
9 | children: React.ReactNode;
10 | [key: string]: any;
11 | },
12 | any
13 | > {
14 | /**
15 | * 判断组件是否需要更新。
16 | * @param nextProps - 下一个属性对象。
17 | * @returns 如果需要更新则返回 true，否则返回 false。
18 | */
19 | shouldComponentUpdate(nextProps: any) {
20 | if (nextProps.shouldUpdate) {
21 | return nextProps.shouldUpdate(this.props, nextProps);
22 | }
23 | try {
24 | return (
25 | !isEqual(this.props.content, nextProps?.content) ||
26 | !isEqual(this.props.loading, nextProps?.loading) ||
27 | !isEqual(this.props.chatItemRenderConfig, nextProps?.chatItemRenderConfig) ||
28 | !isEqual(this.props.meta, nextProps?.meta)
29 | );
30 | } catch (error) {
31 | return true;
32 | }
33 | }
34 |
35 | render() {
36 | return this.props.children;
37 | }
38 | }
39 |
40 | export default ShouldUpdateItem;
41 |
--------------------------------------------------------------------------------
/src/ChatList/style.ts:
--------------------------------------------------------------------------------
1 | import { createStyles } from 'antd-style';
2 |
3 | export const useStyles = createStyles(({ css }) => {
4 | return {
5 | container: css`
6 | position: relative;
7 | `,
8 | };
9 | });
10 |
--------------------------------------------------------------------------------
/src/EditableMessage/index.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | nav: Components
3 | group: Message
4 | title: EditableMessage
5 | description: The EditableMessage component is used to display a message that can be edited by the user. It consists of a Markdown component and an optional modal for editing the message. When the user clicks on the message, it enters editing mode and displays an input field for editing the message.
6 | ---
7 |
8 | ## Default
9 |
10 |
27 | {emoji}
28 |
29 | );
30 | });
31 |
32 | export default Emoji;
33 |
--------------------------------------------------------------------------------
/src/Emoji/style.ts:
--------------------------------------------------------------------------------
1 | import { createStyles } from 'antd-style';
2 |
3 | export const useStyles = createStyles(({ css, token }) => {
4 | return {
5 | container: css`
6 | position: relative;
7 |
8 | display: flex;
9 | align-items: center;
10 | justify-content: center;
11 |
12 | line-height: 1;
13 | text-align: center;
14 | `,
15 | loading: css`
16 | position: absolute;
17 | inset: 0;
18 |
19 | display: flex;
20 | align-items: center;
21 | justify-content: center;
22 |
23 | width: 100%;
24 | height: 100%;
25 |
26 | color: ${token.colorText};
27 | `,
28 | };
29 | });
30 |
--------------------------------------------------------------------------------
/src/Icon/index.tsx:
--------------------------------------------------------------------------------
1 | import { LucideIcon } from 'lucide-react';
2 | import { memo, useMemo } from 'react';
3 |
4 | import { DivProps } from '@/types';
5 |
6 | import { useStyles } from './style';
7 |
8 | export type IconSize =
9 | | 'large'
10 | | 'normal'
11 | | 'small'
12 | | {
13 | fontSize?: number;
14 | strokeWidth?: number;
15 | };
16 |
17 | const calcSize = (size?: IconSize) => {
18 | let fontSize: number | string;
19 | let strokeWidth: number;
20 |
21 | switch (size) {
22 | case 'large': {
23 | fontSize = 24;
24 | strokeWidth = 2;
25 | break;
26 | }
27 | case 'normal': {
28 | fontSize = 20;
29 | strokeWidth = 2;
30 | break;
31 | }
32 | case 'small': {
33 | fontSize = 14;
34 | strokeWidth = 1.5;
35 | break;
36 | }
37 | default: {
38 | if (size) {
39 | fontSize = size?.fontSize || 24;
40 | strokeWidth = size?.strokeWidth || 2;
41 | } else {
42 | fontSize = '1em';
43 | strokeWidth = 2;
44 | }
45 | break;
46 | }
47 | }
48 | return { fontSize, strokeWidth };
49 | };
50 |
51 | export interface IconProps extends DivProps {
52 | color?: string;
53 | fill?: string;
54 | /**
55 | * @description The icon element to be rendered
56 | * @type LucideIcon
57 | */
58 | icon: LucideIcon;
59 | /**
60 | * @description Size of the icon
61 | * @default 'normal'
62 | */
63 | size?: IconSize;
64 | /**
65 | * @description Rotate icon with animation
66 | * @default false
67 | */
68 | spin?: boolean;
69 | }
70 |
71 | const Icon = memo
27 | {/*TODO: need a model icons */}
28 | {extra?.fromModel as string}
29 |
30 | )}
31 | {dom}
32 |
20 |
22 | )}
23 | {dom}
24 |
48 |
49 |
50 | );
51 | };
52 |
53 | export default BubblesLoading;
54 |
--------------------------------------------------------------------------------
/src/ProChat/components/ChatList/Messages/Assistant.tsx:
--------------------------------------------------------------------------------
1 | import { RenderMessage } from '@/ChatList';
2 | import { memo } from 'react';
3 |
4 | import { DefaultMessage } from './Default';
5 |
6 | export const AssistantMessage: RenderMessage = memo(({ id, content, ...props }) => {
7 | // todo: need a custom render
8 | return {editableContent}
;
12 | });
13 |
--------------------------------------------------------------------------------
/src/ProChat/components/ChatList/Messages/Hello.tsx:
--------------------------------------------------------------------------------
1 | import { RenderMessage } from '@/ChatList';
2 | import { memo } from 'react';
3 | import { DefaultMessage } from './Default';
4 |
5 | export const HelloMessage: RenderMessage = memo((props) => {
6 | const { content } = props;
7 | if (typeof content === 'string') return
15 | {
18 | if (props?.editing) {
19 | return null;
20 | }
21 | return (
22 |
30 | );
31 | },
32 | }}
33 | request={async (messages) => {
34 | const mockedData: string = `这是一段模拟的流式字符串数据。本次会话传入了${messages.length}条消息`;
35 |
36 | const mockResponse = new MockResponse(mockedData);
37 |
38 | return mockResponse.getResponse();
39 | }}
40 | />
41 |
42 | );
43 | };
44 |
--------------------------------------------------------------------------------
/src/ProChat/demos/actions.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | */
4 | import { ProChat } from '@ant-design/pro-chat';
5 | import { useTheme } from 'antd-style';
6 |
7 | import { MockResponse } from '../mocks/streamResponse';
8 |
9 | export default () => {
10 | const theme = useTheme();
11 |
12 | return (
13 |
14 | {
25 | return [
26 | {
29 | window.open('https://github.com/ant-design/pro-chat');
30 | }}
31 | >
32 | 人工服务
33 | ,
34 | ...defaultDoms,
35 | ];
36 | },
37 | flexConfig: {
38 | gap: 24,
39 | direction: 'horizontal',
40 | justify: 'space-between',
41 | },
42 | }}
43 | request={async (messages) => {
44 | const mockedData: string = `这是一段模拟的流式字符串数据。本次会话传入了${messages.length}条消息`;
45 |
46 | const mockResponse = new MockResponse(mockedData);
47 |
48 | return mockResponse.getResponse();
49 | }}
50 | />
51 |
52 | );
53 | };
54 |
--------------------------------------------------------------------------------
/src/ProChat/demos/callbacks.tsx:
--------------------------------------------------------------------------------
1 | import { ProChat, ProChatInstance } from '@ant-design/pro-chat';
2 | import { message } from 'antd';
3 | import React from 'react';
4 |
5 | const Callbacks: React.FC = () => {
6 | const chatRef = React.useRef
19 | {
22 | setChats(chats);
23 | }}
24 | request={async (messages) => {
25 | const mockedData: string = `这是一段模拟的流式字符串数据。本次会话传入了${messages.length}条消息`;
26 |
27 | const mockResponse = new MockResponse(mockedData, 100);
28 |
29 | return mockResponse.getResponse();
30 | }}
31 | />
32 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/src/ProChat/demos/customeClassName.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | */
4 | import { example } from '@/ProChat/mocks/customeClassName';
5 | import { ProChat } from '@ant-design/pro-chat';
6 | import { useTheme } from 'antd-style';
7 |
8 | export default () => {
9 | const theme = useTheme();
10 |
11 | return (
12 |
13 |
23 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/src/ProChat/demos/default.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | */
4 | import { ProChat } from '@ant-design/pro-chat';
5 |
6 | import { useTheme } from 'antd-style';
7 | import { example } from '../mocks/basic';
8 |
9 | export default () => {
10 | const theme = useTheme();
11 | return (
12 |
13 | {
24 | if (value === '/') {
25 | return [{ value: '你可以帮助我列出问题吗？', label: '你可以帮助我列出问题吗？' }];
26 | }
27 | return [];
28 | }}
29 | inputAreaProps={{
30 | autoCompleteProps: {
31 | placement: 'topRight',
32 | },
33 | }}
34 | userMeta={{
35 | extra: 'extra',
36 | }}
37 | messageItemExtraRender={(_, type) => {
38 | if (type === 'user') return 🦐;
39 | return 👍;
40 | }}
41 | placeholder="输入 / 查看推荐问题，或者直接输入你的问题"
42 | onResetMessage={async () => {
43 | console.log('数据清空');
44 | }}
45 | />
46 |
47 | );
48 | };
49 |
--------------------------------------------------------------------------------
/src/ProChat/demos/doc-mode.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * iframe: 1000
3 | * compact: true
4 | */
5 | import { ProChat } from '@ant-design/pro-chat';
6 | import { useTheme } from 'antd-style';
7 |
8 | import { example } from '../mocks/fullFeature';
9 | import { MockResponse } from '../mocks/streamResponse';
10 |
11 | export default () => {
12 | const theme = useTheme();
13 | return (
14 |
15 | {
19 | console.log('chat start', chat);
20 | }}
21 | onChatEnd={(id, type) => {
22 | console.log('chat end', id);
23 | console.log('chat end type', type);
24 | }}
25 | onChatGenerate={(chunkText) => {
26 | console.log('chat generate', chunkText);
27 | }}
28 | request={async (messages) => {
29 | const mockedData: string = `这是一段模拟的流式字符串数据。本次会话传入了${messages.length}条消息`;
30 |
31 | const mockResponse = new MockResponse(mockedData, 100);
32 |
33 | return mockResponse.getResponse();
34 | }}
35 | chats={example.chats}
36 | config={example.config}
37 | />
38 |
39 | );
40 | };
41 |
--------------------------------------------------------------------------------
/src/ProChat/demos/error.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | * iframe: 1000
4 | */
5 | import { ProChat, ProChatInstance } from '@ant-design/pro-chat';
6 | import { Button, Card, Result } from 'antd';
7 | import { useTheme } from 'antd-style';
8 | import { useEffect, useRef } from 'react';
9 | import { MockResponse } from '../mocks/streamResponse';
10 |
11 | export default () => {
12 | const theme = useTheme();
13 |
14 | const chatRef1 = useRef
29 | {
33 | const mockResponse = new MockResponse('', 1000, true);
34 | return mockResponse.getResponse();
35 | }}
36 | />
37 |
38 |
39 | {
41 | const mockResponse = new MockResponse('', 1000, true);
42 | return mockResponse.getResponse();
43 | }}
44 | chatRef={chatRef2}
45 | style={{ height: 500 }}
46 | renderErrorMessages={(errorResponse) => {
47 | return (
48 |
49 |
55 | Try Again
56 | ,
57 | ,
58 | ]}
59 | />
60 |
61 | );
62 | }}
63 | />
64 |
65 |
66 | );
67 | };
68 |
--------------------------------------------------------------------------------
/src/ProChat/demos/float-drawer.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * iframe: 500
3 | */
4 | import { MockResponse } from '@/ProChat/mocks/streamResponse';
5 | import { QuestionCircleOutlined } from '@ant-design/icons';
6 | import { ProChat } from '@ant-design/pro-chat';
7 | import { Drawer, FloatButton } from 'antd';
8 | import { useTheme } from 'antd-style';
9 | import { useState } from 'react';
10 |
11 | export default () => {
12 | const theme = useTheme();
13 |
14 | const [open, setOpen] = useState(true);
15 |
16 | const showDrawer = () => {
17 | setOpen(true);
18 | };
19 |
20 | const onClose = () => {
21 | setOpen(false);
22 | };
23 |
24 | return (
25 | <>
26 |
12 | {'这是一条自定义 ReactNode 消息'}
} />
13 |
11 |
12 | options={['en-US', 'zh-CN', 'zh-HK', 'cs-CZ', 'de-DE', 'hu-HU', 'pl-PL', 'sk-SK']}
13 | defaultValue="en-US"
14 | onChange={(v) => {
15 | setLanguage(v);
16 | }}
17 | />
18 | {
21 | return new Response('this is mock data');
22 | }}
23 | />
24 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/src/ProChat/demos/initialChats.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | */
4 | import { ProChat } from '@ant-design/pro-chat';
5 |
6 | import { useTheme } from 'antd-style';
7 | import { example } from '../mocks/basic';
8 |
9 | export default () => {
10 | const theme = useTheme();
11 | return (
12 |
13 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/src/ProChat/demos/listener.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * iframe: 300
3 | * compact: true
4 | */
5 | import { ProChat } from '@ant-design/pro-chat';
6 |
7 | import { useTheme } from 'antd-style';
8 |
9 | export default () => {
10 | const theme = useTheme();
11 | return (
12 |
13 | {
18 | console.log('chat start', chat);
19 | }}
20 | onChatEnd={(id, type) => {
21 | console.log('chat end', id);
22 | console.log('chat end type', type);
23 | }}
24 | onChatGenerate={(chunkText) => {
25 | console.log('chat generate', chunkText);
26 | }}
27 | request={async (messages) => {
28 | const mockedData: string = `这是一段模拟的对话数据。本次会话传入了${messages.length}条消息`;
29 | return new Response(mockedData);
30 | }}
31 | />
32 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/src/ProChat/demos/loading.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | */
4 | import { ProChat } from '@ant-design/pro-chat';
5 | import { Button, Divider } from 'antd';
6 | import { useTheme } from 'antd-style';
7 | import { useState } from 'react';
8 | import { Flexbox } from 'react-layout-kit';
9 |
10 | export default () => {
11 | const [loading, setLoading] = useState(true);
12 | const theme = useTheme();
13 |
14 | return (
15 |
13 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/src/ProChat/demos/modal.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * iframe
3 | */
4 | import { ProChat } from '@ant-design/pro-chat';
5 |
6 | export default () => {
7 | return
19 | {
21 | const text = await delay(
22 | `这是一条模拟非流式输出的消息的消息。本次会话传入了${messages.length}条消息`,
23 | );
24 |
25 | return new Response(text);
26 | }}
27 | style={{ height: '100vh' }}
28 | />
29 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/src/ProChat/demos/request.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | */
4 | import { ProChat } from '@ant-design/pro-chat';
5 | import { useTheme } from 'antd-style';
6 | import { useState } from 'react';
7 |
8 | export default () => {
9 | const theme = useTheme();
10 | const [value, setValue] = useState();
11 | return (
12 |
13 | {
18 | setValue(e);
19 | },
20 | }}
21 | />
22 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/src/ProChat/demos/toBottomConfig.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | */
4 | import { ProChat } from '@ant-design/pro-chat';
5 | import { useTheme } from 'antd-style';
6 |
7 | import { Button } from 'antd';
8 | import { example } from '../mocks/fullFeature';
9 |
10 | export default () => {
11 | const theme = useTheme();
12 | return (
13 | <>
14 |
15 | {
22 | return (
23 |
34 | );
35 | },
36 | }}
37 | />
38 |
39 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/ProChat/demos/use-ref.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | */
4 | import { ProChat, ProChatInstance } from '@ant-design/pro-chat';
5 | import { useTheme } from 'antd-style';
6 | import { useRef } from 'react';
7 |
8 | import { MockResponse } from '@/ProChat/mocks/streamResponse';
9 | import { Button } from 'antd';
10 | import { example } from '../mocks/basic';
11 |
12 | export default () => {
13 | const theme = useTheme();
14 | const proChatRef = useRef
18 |
31 | {
35 | const mockedData: string = `这是一段模拟的流式字符串数据。本次会话传入了${messages.length}条消息`;
36 |
37 | const mockResponse = new MockResponse(mockedData, 100);
38 |
39 | return mockResponse.getResponse();
40 | }}
41 | />
42 |
43 | );
44 | };
45 |
--------------------------------------------------------------------------------
/src/ProChat/hooks/useProChatLocale.ts:
--------------------------------------------------------------------------------
1 | import { Locale, gLocaleObject } from '@/locale';
2 | import { useMemo } from 'react';
3 | import { useStore } from '../store';
4 |
5 | const useProChatLocale = () => {
6 | const locale = useStore((s) => s.locale);
7 |
8 | const localeObject = useMemo(() => {
9 | return gLocaleObject(locale as Locale);
10 | }, [locale]);
11 |
12 | return {
13 | locale,
14 | localeObject,
15 | };
16 | };
17 |
18 | export default useProChatLocale;
19 |
--------------------------------------------------------------------------------
/src/ProChat/hooks/useRefFunction.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useRef } from 'react';
2 |
3 | const useRefFunction =
56 |
68 | );
69 | },
70 | );
71 |
72 | export default TokenTag;
73 |
--------------------------------------------------------------------------------
/src/TokenTag/style.ts:
--------------------------------------------------------------------------------
1 | import { createStyles } from 'antd-style';
2 |
3 | const HEIGHT = 28;
4 | export const ICON_SIZE = 20;
5 |
6 | export const useStyles = createStyles(
7 | (
8 | { cx, css, token, isDarkMode },
9 | { type, shape }: { shape: 'round' | 'square'; type: 'normal' | 'low' | 'overload' },
10 | ) => {
11 | let percentStyle;
12 |
13 | switch (type) {
14 | case 'normal': {
15 | percentStyle = css`
16 | color: ${token.colorSuccessText};
17 | `;
18 | break;
19 | }
20 | case 'low': {
21 | percentStyle = css`
22 | color: ${token.colorWarningText};
23 | `;
24 | break;
25 | }
26 | case 'overload': {
27 | percentStyle = css`
28 | color: ${token.colorErrorText};
29 | `;
30 | break;
31 | }
32 | }
33 |
34 | const roundStylish = css`
35 | padding: 0 ${(HEIGHT - ICON_SIZE) * 1.2}px 0 ${(HEIGHT - ICON_SIZE) / 2}px;
36 | background: ${isDarkMode ? token.colorFillSecondary : token.colorFillTertiary};
37 | border-radius: ${HEIGHT / 2}px;
38 | `;
39 |
40 | const squareStylish = css`
41 | border-radius: ${token.borderRadiusSM}px;
42 | `;
43 |
44 | return {
45 | container: cx(
46 | percentStyle,
47 | shape === 'round' ? roundStylish : squareStylish,
48 | css`
49 | user-select: none;
50 |
51 | overflow: hidden;
52 | display: flex;
53 | flex: 0;
54 | gap: 4px;
55 | align-items: center;
56 |
57 | min-width: fit-content;
58 | height: ${HEIGHT}px;
59 |
60 | font-family: ${token.fontFamilyCode};
61 | font-size: 13px;
62 | line-height: 1;
63 | `,
64 | ),
65 | };
66 | },
67 | );
68 |
--------------------------------------------------------------------------------
/src/components/Avatar/getEmojiByCharacter.ts:
--------------------------------------------------------------------------------
1 | import emojiRegex from 'emoji-regex';
2 |
3 | export const getEmoji = (emoji: string): string | undefined => {
4 | const regex = emojiRegex();
5 | return emoji.match(regex)?.[0];
6 | };
7 |
--------------------------------------------------------------------------------
/src/components/Avatar/style.ts:
--------------------------------------------------------------------------------
1 | import { createStyles } from 'antd-style';
2 | import { readableColor } from 'polished';
3 |
4 | export const useStyles = createStyles(
5 | (
6 | { css, token, prefixCls },
7 | { background, size, isEmoji }: { background?: string; isEmoji?: boolean; size: number },
8 | ) => {
9 | const backgroundColor = background ?? token.colorBgContainer;
10 | const color = readableColor(backgroundColor);
11 |
12 | return {
13 | avatar: css`
14 | cursor: pointer;
15 |
16 | display: flex;
17 | align-items: center;
18 | justify-content: center;
19 |
20 | background: ${backgroundColor};
21 | border: 1px solid ${background ? 'transparent' : token.colorSplit};
22 |
23 | > .${prefixCls}-avatar-string {
24 | font-size: ${size * (isEmoji ? 0.7 : 0.5)}px;
25 | font-weight: 700;
26 | line-height: 1 !important;
27 | color: ${color};
28 | }
29 |
30 | > * {
31 | cursor: pointer;
32 | }
33 | `,
34 | };
35 | },
36 | );
37 |
--------------------------------------------------------------------------------
/src/components/CopyButton/index.tsx:
--------------------------------------------------------------------------------
1 | import copy from 'copy-to-clipboard';
2 | import { Copy } from 'lucide-react';
3 | import { memo } from 'react';
4 |
5 | import ActionIcon, { type ActionIconSize } from '@/ActionIcon';
6 | import { useCopied } from '@/hooks/useCopied';
7 | import { DivProps } from '@/types';
8 | import { type TooltipProps } from 'antd';
9 |
10 | export interface CopyButtonProps extends DivProps {
11 | /**
12 | * @description Additional class name
13 | */
14 | className?: string;
15 | /**
16 | * @description The text content to be copied
17 | */
18 | content: string;
19 | /**
20 | * @description The placement of the tooltip
21 | * @enum ['top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom']
22 | * @default 'right'
23 | */
24 | placement?: TooltipProps['placement'];
25 | /**
26 | * @description The size of the icon
27 | * @enum ['large', 'normal', 'small', 'site']
28 | * @default 'site'
29 | */
30 | size?: ActionIconSize;
31 | }
32 |
33 | const CopyButton = memo
13 | {children}
14 |
15 | );
16 | });
17 |
18 | export default FormFooter;
19 |
--------------------------------------------------------------------------------
/src/components/Form/components/FormGroup.tsx:
--------------------------------------------------------------------------------
1 | import Icon, { type IconProps } from '@/Icon';
2 | import { Collapse, type CollapseProps } from 'antd';
3 | import { useResponsive } from 'antd-style';
4 | import { ChevronDown } from 'lucide-react';
5 | import { memo, type ReactNode } from 'react';
6 | import { Flexbox } from 'react-layout-kit';
7 |
8 | import { useStyles } from './style';
9 |
10 | export interface FormGroupProps extends CollapseProps {
11 | children: ReactNode;
12 | extra?: ReactNode;
13 | icon?: IconProps['icon'];
14 | title: string;
15 | }
16 |
17 | const FormGroup = memo
23 | {icon &&
26 | );
27 |
28 | if (mobile)
29 | return (
30 | {children}
36 |
20 |
21 | {title}
22 | {tag && {tag} }
23 |
24 | {desc && {desc}}
25 |
26 | );
27 |
28 | if (avatar) {
29 | return (
30 |