Skip to content

Commit 04e6ea7

Browse files
ch-liuzhidech-liuzhide
authored
refactor: Use Ant Design X instead (#530)
2 parents 6f2bb56 + c00c955 commit 04e6ea7

File tree

23 files changed

+5618
-4304
lines changed

23 files changed

+5618
-4304
lines changed

‎assistant/docs/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ $ yarn run doctor
2828
```
2929

3030

31-
## How to integrate PertercatLUI by UMD way?
31+
## How to integrate PeterCatLUI by UMD way?
3232

3333
Step 1, externalize the following dependencies for your project **if you already used them in your project**:
3434

‎assistant/package.json‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
{
22
"name": "@petercatai/assistant",
3-
"version": "1.0.22",
3+
"version": "2.0.7",
44
"description": "PeterCat Assistant Application",
5-
"module": "dist/esm/index.js",
6-
"types": "dist/esm/index.d.ts",
7-
"style": "dist/esm/style.css",
8-
"browser": "dist/umd/assistant.min.js",
5+
"repository": "https://github.com/petercat-ai/petercat.git",
6+
"license": "MIT",
7+
"sideEffects": [
8+
"**/*.css"
9+
],
910
"exports": {
1011
".": {
1112
"import": "./dist/esm/index.js"
@@ -14,25 +15,24 @@
1415
"import": "./dist/esm/style.css"
1516
}
1617
},
18+
"module": "dist/esm/index.js",
19+
"browser": "dist/umd/assistant.min.js",
20+
"types": "dist/esm/index.d.ts",
21+
"style": "dist/esm/style.css",
1722
"scripts": {
18-
"start": "npm run dev",
19-
"dev": "dumi dev",
20-
"build:css": "tailwindcss -i tailwind.css -o ./src/style.css",
2123
"build": "npm run build:css && cp ./src/style.css ./.dumi/tmp/style.css && father build",
24+
"build:css": "tailwindcss -i tailwind.css -o ./src/style.css",
2225
"build:watch": "father dev",
26+
"dev": "dumi dev",
2327
"docs:build": "dumi build",
24-
"prepare": "dumi setup",
2528
"doctor": "father doctor",
2629
"lint": "npm run lint:es && npm run lint:css",
2730
"lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
2831
"lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
29-
"prepublishOnly": "father doctor && npm run build"
32+
"prepare": "dumi setup",
33+
"prepublishOnly": "father doctor && npm run build",
34+
"start": "npm run dev"
3035
},
31-
"authors": [],
32-
"license": "MIT",
33-
"sideEffects": [
34-
"**/*.css"
35-
],
3636
"commitlint": {
3737
"extends": [
3838
"@commitlint/config-conventional"
@@ -55,17 +55,10 @@
5555
"prettier --parser=typescript --write"
5656
]
5757
},
58-
"publishConfig": {
59-
"access": "public"
60-
},
61-
"peerDependencies": {
62-
"react": ">=16.9.0 <19.0.0",
63-
"react-dom": ">=16.9.0 <19.0.0"
64-
},
6558
"dependencies": {
6659
"@ant-design/icons": "^5.3.5",
67-
"@ant-design/pro-chat": "^1.9.0",
6860
"@ant-design/pro-editor": "^1.1.1",
61+
"@ant-design/x": "^1.0.0",
6962
"@babel/runtime": "^7.18.0",
7063
"antd": "^5.15.3",
7164
"antd-style": "^3.6.1",
@@ -81,7 +74,7 @@
8174
"devDependencies": {
8275
"@commitlint/cli": "^17.1.2",
8376
"@commitlint/config-conventional": "^17.1.0",
84-
"@types/lodash": "^4.14.202",
77+
"@types/lodash": "^4.17.13",
8578
"@types/react": "^18.0.0",
8679
"@types/react-dom": "^18.0.0",
8780
"@umijs/lint": "^4.0.0",
@@ -97,5 +90,12 @@
9790
"react-dom": "^18.0.0",
9891
"stylelint": "^14.9.1"
9992
},
100-
"repository": "https://github.com/petercat-ai/petercat.git"
93+
"peerDependencies": {
94+
"react": ">=16.9.0 <19.0.0",
95+
"react-dom": ">=16.9.0 <19.0.0"
96+
},
97+
"publishConfig": {
98+
"access": "public"
99+
},
100+
"authors": []
101101
}

‎assistant/src/Assistant/index.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ export default () => {
3131
apiUrl='/api/chat/stream_builder'
3232
token='0553365a-edb1-435c-b69c-4c645290b86e'
3333
clearMessage={true}
34-
apiUr
3534
/>
3635
</div>
3736
);
@@ -53,4 +52,4 @@ export default () => {
5352
| `disabled` | `boolean` | `false` | 是否禁用聊天输入区域，禁用后用户无法输入消息。 |
5453
| `disabledPlaceholder` | `string` | `undefined` | 当聊天输入区域被禁用时显示的占位符文本。 |
5554
| `getToolsResult` | `(response: any) => void` | `undefined` | 用于接收工具处理结果的回调函数。 |
56-
55+
| `bottom` | `number` | `120` | 聊天助手距离底部的距离，单位为像素。 |

‎assistant/src/Assistant/index.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,19 @@ export interface AssistantProps extends ChatProps {
1010
showBubble: boolean;
1111
isVisible: boolean;
1212
onClose?: () => void;
13+
bottom?: number;
1314
}
1415

1516
const Assistant = (props: AssistantProps) => {
16-
const { showBubble = true, isVisible, onClose, drawerWidth = 500 } = props;
17+
const {
18+
showBubble = true,
19+
isVisible,
20+
onClose,
21+
drawerWidth = 500,
22+
bottom = 120,
23+
} = props;
1724
const [chatVisible, setChatVisible] = useState(isVisible);
18-
const [position, setPosition] = useState({ bottom: 120 });
25+
const [position, setPosition] = useState({ bottom: bottom });
1926

2027
const toggleDrawer = () => {
2128
setChatVisible(!chatVisible);

‎assistant/src/Chat/components/InputAreaRender.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ const InputAreaRender = (props: {
157157
return (
158158
<Form
159159
form={form}
160-
className="relative px-[12px] py-[10px] m-[12px] rounded-[10px] lui-input-area bg-[#f1f1f1]"
160+
className="relative px-[12px] py-[10px] rounded-[10px] lui-input-area bg-[#f1f1f1]"
161161
style={{ opacity: disabled ? 0.6 : 1 }}
162162
>
163163
{disabled && disabledPlaceholder && (
@@ -181,6 +181,7 @@ const InputAreaRender = (props: {
181181
border: 'none',
182182
resize: 'none',
183183
backgroundColor: '#F1F1F1',
184+
color: 'rgba(0, 0, 0, 0.88)',
184185
}}
185186
onKeyDown={handleKeyDown}
186187
/>

‎assistant/src/Chat/components/LoadingStart.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@ const LoadingAnimationStart = require('../../assets/bubble-start.json');
55
interface LoadingStartProps {
66
loop?: boolean;
77
onComplete?: () => void;
8+
className?: string;
89
}
910

1011
const LoadingStart: React.FC<LoadingStartProps> = (props) => {
1112
const { onComplete, loop = true } = props;
1213

1314
return (
14-
<div className="loading">
15+
<div className={`loading ${props.className || ''}`}>
1516
<Lottie
1617
animationData={LoadingAnimationStart}
1718
loop={loop}

‎assistant/src/Chat/components/MarkdownRender.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/* eslint-disable react/no-danger */
2+
import { Markdown } from '@ant-design/pro-editor';
3+
import React from 'react';
4+
5+
interface IProps {
6+
className?: string;
7+
content: string;
8+
}
9+
10+
const MarkdownRender = (props: IProps) => (
11+
<Markdown
12+
className="ant-pro-chat-list-item-message-content"
13+
style={{ overflowX: 'hidden', overflowY: 'auto' }}
14+
>
15+
{props.content}
16+
</Markdown>
17+
);
18+
export default MarkdownRender;

‎assistant/src/Chat/components/MySpinner.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
'use client';
2+
import { Spin } from 'antd';
3+
import React from 'react';
4+
5+
export interface ISpinnerProps {
6+
loading?: boolean;
7+
spinner?: React.ReactNode;
8+
children?: React.ReactNode;
9+
}
10+
11+
const MySpinner = (props: ISpinnerProps) => {
12+
const { loading } = props;
13+
if (loading) {
14+
return (
15+
<div className="relative w-full h-full">
16+
<div className="absolute top-0 left-0 w-full h-full pointer-events-none flex justify-center items-center bg-white bg-opacity-75">
17+
{props.spinner ?? <Spin />}
18+
</div>
19+
{props.children}
20+
</div>
21+
);
22+
}
23+
return props.children;
24+
};
25+
26+
export default MySpinner;

‎assistant/src/Chat/index.css‎

Lines changed: 36 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,37 @@
1-
.chat_item_container{
1+
.chat_item_container {
22
position: relative;
3-
width: 100%;
4-
max-width: 100vw;
5-
padding: 16px;
6-
content-visibility: auto;
7-
contain-intrinsic-size: 100px;
8-
}
3+
width: 100%;
4+
max-width: 100vw;
5+
padding: 16px;
6+
content-visibility: auto;
7+
contain-intrinsic-size: 100px;
8+
}
9+
.petercat-avatar {
10+
flex: 0 0 40px;
11+
}
12+
.petercat-avatar .ant-avatar {
13+
width: 40px;
14+
height: 40px;
15+
border-radius: 50%;
16+
}
17+
.petercat-header {
18+
font-size: 12px !important;
19+
line-height: 1 !important;
20+
color: rgba(0, 0, 0, 0.45) !important;
21+
}
22+
23+
.petercat-content-start {
24+
padding: 8px 16px 8px 16px !important;
25+
border-radius: 16px !important;
26+
background: rgba(241, 241, 241, 1) !important;
27+
}
28+
29+
.petercat-content-end {
30+
padding: 8px 16px 8px 16px !important;
31+
border-radius: 16px !important;
32+
background: rgba(250, 228, 203, 1) !important;
33+
}
34+
35+
.petercat-lui .ant-bubble-content {
36+
min-height: 0 !important;
37+
}

‎assistant/src/Chat/index.md‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ atomId: Chat
44

55
# Chat
66

7-
Chat 是一个基于 @ant-design/pro-chat 和 @ant-design/pro-editor 构建的聊天组件，提供了丰富的功能和配置选项。它支持与一个基于API的聊天服务进行交互，并且可以渲染多种消息类型。
7+
Chat 是一个基于 @ant-design/x 和 @ant-design/pro-editor 构建的聊天组件，提供了丰富的功能和配置选项。它支持与一个基于 @ant-design/x 的聊天服务进行交互，并且可以渲染多种消息类型。
88

99
## 安装
1010

@@ -16,6 +16,7 @@ npm install @petercatai/assistant
1616

1717
## 使用示例
1818

19+
1920
```jsx
2021
import React, { useEffect, useState } from 'react';
2122
import { Chat } from '@petercatai/assistant';
@@ -26,16 +27,25 @@ export default () => {
2627
useEffect(() => {
2728
console.log('res', res);
2829
}, [res]);
29-
30+
const meta = {
31+
avatar: `https://mdn.alipayobjects.com/huamei_j8gzmo/afts/img/A*YAP3SI7MMHQAAAAAAAAAAAAADrPSAQ/original`,
32+
title: 'PeterCat',
33+
}
3034
return (
3135
<div style={{ height: '100vh' }}>
3236
<Chat
3337
disabled={false}
34-
disabledPlaceholder="`机器人尚未配置任何内容 请在完成配置后进行对话测试`"
35-
starters={['介绍下xxx这个项目', '查看xxx的贡献指南', '我该怎样快速上手']}
36-
apiUrl="/api/chat/stream_builder"
38+
helloMessage={"hello"}
39+
disabledPlaceholder="`机器人尚未配置任何内容 ,请在完成配置后进行对话测试`"
40+
starters={[
41+
'介绍下xxx这个项目',
42+
'查看xxx的贡献指南',
43+
'我该怎样快速上手',
44+
]}
45+
apiUrl="/api/chat/stream_qa"
3746
hideLogo="true"
3847
getToolsResult={setRes}
48+
assistantMeta={meta}
3949
/>
4050
</div>
4151
);
@@ -44,19 +54,18 @@ export default () => {
4454

4555
## API
4656

47-
48-
| 属性名 | 类型 | 默认值 | 描述 |
49-
| -------------------- | -------------------------------- | ------------------------- | ------------------------------------------------------------------------------------- |
50-
| `apiDomain` | `string` | `'http://api.petercat.ai'` | API域名地址，组件将通过此域名与后端服务进行通信。 |
51-
| `apiUrl` | `string` | `undefined` | 指定聊天API的URL路径，如果未指定，将使用默认路径。 |
52-
| `drawerWidth` | `number` | `500` | 控制聊天窗口的宽度。 |
53-
| `assistantMeta` | `MetaData` | `{}` | 设置聊天助手的元数据信息，包括头像、标题和背景颜色。 |
54-
| `helloMessage` | `string` | `undefined` | 设定聊天窗口打开时的欢迎消息。 |
55-
| `starters` | `string[]` | `[]` | 聊天启动器消息的数组，用户可以选择这些消息来快速开始对话。 |
56-
| `prompt` | `string` | `undefined` | 指定聊天的提示内容，用于指导对话的进行。 |
57-
| `token` | `string` | `undefined` | 用于验证聊天服务的令牌。 |
58-
| `style` | `React.CSSProperties` | `{}` | 自定义聊天组件的内联样式。 |
59-
| `hideLogo` | `boolean` | `false` | 是否隐藏聊天窗口顶部的Logo。 |
60-
| `disabled` | `boolean` | `false` | 是否禁用聊天输入区域，禁用后用户无法输入消息。 |
61-
| `disabledPlaceholder`| `string` | `undefined` | 当聊天输入区域被禁用时显示的占位符文本。 |
62-
| `getToolsResult` | `(response: any) => void` | `undefined` | 用于接收工具处理结果的回调函数。 |
57+
| 属性名 | 类型 | 默认值 | 描述 |
58+
| --- | --- | --- | --- |
59+
| `apiDomain` | `string` | `'http://api.petercat.ai'` | API 域名地址，组件将通过此域名与后端服务进行通信。 |
60+
| `apiUrl` | `string` | `undefined` | 指定聊天 API 的 URL 路径，如果未指定，将使用默认路径。 |
61+
| `drawerWidth` | `number` | `500` | 控制聊天窗口的宽度。 |
62+
| `assistantMeta` | `MetaData` | `{}` | 设置聊天助手的元数据信息，包括头像、标题和背景颜色。 |
63+
| `helloMessage` | `string` | `undefined` | 设定聊天窗口打开时的欢迎消息。 |
64+
| `starters` | `string[]` | `[]` | 聊天启动器消息的数组，用户可以选择这些消息来快速开始对话。 |
65+
| `prompt` | `string` | `undefined` | 指定聊天的提示内容，用于指导对话的进行。 |
66+
| `token` | `string` | `undefined` | 用于验证聊天服务的令牌。 |
67+
| `style` | `React.CSSProperties` | `{}` | 自定义聊天组件的内联样式。 |
68+
| `hideLogo` | `boolean` | `false` | 是否隐藏聊天窗口顶部的 Logo。 |
69+
| `disabled` | `boolean` | `false` | 是否禁用聊天输入区域，禁用后用户无法输入消息。 |
70+
| `disabledPlaceholder` | `string` | `undefined` | 当聊天输入区域被禁用时显示的占位符文本。 |
71+
| `getToolsResult` | `(response: any) => void` | `undefined` | 用于接收工具处理结果的回调函数。 |

0 commit comments

Comments
 (0)