Skip to content

Commit d5e7c21

Browse files
carolin913carolin913
committed
feat(chatbot): update to 1.2.3
1 parent 37633d1 commit d5e7c21

File tree

5 files changed

+144
-105
lines changed

5 files changed

+144
-105
lines changed

‎packages/pro-components/chat/chat-message/_example/configure.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const messages = {
4949
export default function ChatMessageExample() {
5050
return (
5151
<Space direction="vertical" style={{ width: '100%' }}>
52-
<Divider>可配置角色，头像，昵称，时间</Divider>
52+
<Divider style={{ color: 'var(--td-text-color-placeholder)' }}>发送消息</Divider>
5353
<ChatMessage
5454
avatar="https://tdesign.gtimg.com/site/avatar.jpg"
5555
datetime="今天16:38"
@@ -64,15 +64,15 @@ export default function ChatMessageExample() {
6464
role={messages.ai.role}
6565
content={messages.ai.content}
6666
></ChatMessage>
67-
<Divider>可配置位置</Divider>
67+
<Divider style={{ color: 'var(--td-text-color-placeholder)' }}>可配置位置</Divider>
6868
<ChatMessage
6969
placement="right"
7070
variant="base"
7171
role={messages.user.role}
7272
content={messages.user.content}
7373
></ChatMessage>
7474
<ChatMessage placement="left" role={messages.ai.role} content={messages.ai.content}></ChatMessage>
75-
<Divider>角色为system的系统消息</Divider>
75+
<Divider style={{ color: 'var(--td-text-color-placeholder)' }}>角色为system的系统消息</Divider>
7676
<ChatMessage id={messages.system.id} role={messages.system.role} content={messages.system.content}></ChatMessage>
7777
</Space>
7878
);

‎packages/pro-components/chat/chat-message/_example/content.tsx‎

Lines changed: 109 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Space } from 'tdesign-react';
2+
import { Space, Divider } from 'tdesign-react';
33

44
import { AIMessage, ChatMessage, UserMessage } from '@tdesign-react/chat';
55

@@ -53,58 +53,6 @@ const userMessage2: UserMessage = {
5353
},
5454
],
5555
};
56-
const aiMessages: AIMessage = {
57-
id: '33333',
58-
role: 'assistant',
59-
status: 'complete',
60-
content: [
61-
{
62-
type: 'thinking',
63-
status: 'complete',
64-
data: {
65-
title: '已完成思考（耗时3秒）',
66-
text: '好的，我现在需要回答用户关于对比近3年当代偶像爱情剧并总结创作经验的问题\n查询网络信息中...\n根据网络搜索结果，成功案例包括《春色寄情人》《要久久爱》《你也有今天》等，但缺乏具体播放数据，需要结合行业报告总结共同特征。2022-2024年偶像爱情剧的创作经验主要集中在题材创新、现实元素融入、快节奏叙事等方面。结合行业报告和成功案例，总结出以下创作经验。',
67-
},
68-
},
69-
{
70-
type: 'search',
71-
data: {
72-
title: '搜索到2篇相关内容',
73-
references: [
74-
{
75-
title: '《传媒内参2024剧集市场分析报告》',
76-
url: '',
77-
},
78-
{
79-
title: '2024年国产剧市场分析:优质内容的消失与未来展望_观众_剧集_平台',
80-
url: '',
81-
},
82-
],
83-
},
84-
},
85-
{
86-
type: 'markdown',
87-
data: '**数据支撑：** 据《传媒内参2024报告》，2024年偶像爱情剧完播率`提升12%`，其中“职业创新”类`占比达65%`，豆瓣评分7+作品数量同比`增加40%`。',
88-
},
89-
{
90-
type: 'suggestion',
91-
data: [
92-
{
93-
title: '近3年偶像爱情剧的市场反馈如何',
94-
prompt: '近3年偶像爱情剧的市场反馈如何',
95-
},
96-
{
97-
title: '偶像爱情剧的观众群体分析',
98-
prompt: '偶像爱情剧的观众群体分析',
99-
},
100-
{
101-
title: '偶像爱情剧的创作趋势是什么',
102-
prompt: '偶像爱情剧的创作趋势是什么',
103-
},
104-
],
105-
},
106-
],
107-
};
10856

10957
export default function ChatMessageExample() {
11058
const onActions = {
@@ -119,30 +67,122 @@ export default function ChatMessageExample() {
11967
};
12068
return (
12169
<Space direction="vertical" style={{ width: '100%' }}>
70+
**文本格式内容**，**Markdown格式内容**、**思考过程**、**搜索结果**、**建议问题**、**附件列表**、**图片**
71+
<Divider style={{ color: 'var(--td-text-color-placeholder)' }}>文本格式</Divider>
12272
<ChatMessage
123-
variant="base"
124-
placement="right"
125-
role={userMessage1.role}
126-
content={userMessage1.content}
127-
status={userMessage1.status}
73+
role="user"
74+
content={[
75+
{
76+
type: 'text',
77+
data: '牛顿第一定律是否适用于所有参考系',
78+
},
79+
]}
80+
></ChatMessage>
81+
<Divider style={{ color: 'var(--td-text-color-placeholder)' }}>Markdown格式</Divider>
82+
<ChatMessage
83+
role="assistant"
84+
content={[
85+
{
86+
type: 'markdown',
87+
data: '牛顿第一定律并不适用于所有参考系，它只适用于**惯性参考系**。在`质点不受外力作用`时，能够判断出质点静止或作匀速直线运动的参考系一定是惯性参考系，因此只有在惯性参考系中牛顿第一定律才适用。',
88+
},
89+
]}
12890
></ChatMessage>
91+
<Divider style={{ color: 'var(--td-text-color-placeholder)' }}>思考过程</Divider>
12992
<ChatMessage
130-
role={aiMessages.role}
131-
content={aiMessages.content}
132-
status={aiMessages.status}
133-
animation="gradient"
93+
role={'assistant'}
13494
chatContentProps={{
135-
thinking: { maxHeight: 100, collapsed: true },
136-
search: { expandable: true },
95+
thinking: { maxHeight: 100, collapsed: false },
13796
}}
138-
handleActions={onActions}
97+
content={[
98+
{
99+
type: 'thinking',
100+
status: 'complete',
101+
data: {
102+
title: '已完成思考（耗时3秒）',
103+
text: '好的，我现在需要回答用户关于对比近3年当代偶像爱情剧并总结创作经验的问题结合行业报告和成功案例，总结出以下创作经验。',
104+
},
105+
},
106+
]}
139107
></ChatMessage>
108+
<Divider style={{ color: 'var(--td-text-color-placeholder)' }}>搜索结果</Divider>
140109
<ChatMessage
141110
variant="base"
142-
placement="right"
143-
role={userMessage2.role}
144-
content={userMessage2.content}
145-
status={userMessage2.status}
111+
role={'assistant'}
112+
content={[
113+
{
114+
type: 'search',
115+
data: {
116+
title: '搜索到2篇相关内容',
117+
references: [
118+
{
119+
title: '惯性参考系定义',
120+
url: '',
121+
},
122+
{
123+
title: '牛顿第一定律定义',
124+
url: '',
125+
},
126+
],
127+
},
128+
},
129+
]}
130+
></ChatMessage>
131+
<Divider style={{ color: 'var(--td-text-color-placeholder)' }}>建议问题</Divider>
132+
<ChatMessage
133+
role={'assistant'}
134+
chatContentProps={{
135+
thinking: { maxHeight: 100, collapsed: false },
136+
}}
137+
content={[
138+
{
139+
type: 'suggestion',
140+
data: [
141+
{
142+
title: '近3年偶像爱情剧的市场反馈如何',
143+
prompt: '近3年偶像爱情剧的市场反馈如何',
144+
},
145+
{
146+
title: '偶像爱情剧的观众群体分析',
147+
prompt: '偶像爱情剧的观众群体分析',
148+
},
149+
{
150+
title: '偶像爱情剧的创作趋势是什么',
151+
prompt: '偶像爱情剧的创作趋势是什么',
152+
},
153+
],
154+
},
155+
]}
156+
></ChatMessage>
157+
<Divider style={{ color: 'var(--td-text-color-placeholder)' }}>附件内容</Divider>
158+
<ChatMessage
159+
role={'user'}
160+
chatContentProps={{
161+
thinking: { maxHeight: 100, collapsed: false },
162+
}}
163+
content={[
164+
{
165+
type: 'text',
166+
data: '分析以下内容，总结一篇广告策划方案',
167+
},
168+
{
169+
type: 'attachment',
170+
data: [
171+
{
172+
fileType: 'doc',
173+
name: 'demo.docx',
174+
url: 'https://tdesign.gtimg.com/site/demo.docx',
175+
size: 12312,
176+
},
177+
{
178+
fileType: 'pdf',
179+
name: 'demo2.pdf',
180+
url: 'https://tdesign.gtimg.com/site/demo.pdf',
181+
size: 34333,
182+
},
183+
],
184+
},
185+
]}
146186
></ChatMessage>
147187
</Space>
148188
);

‎packages/pro-components/chat/chat-message/_example/status.tsx‎

Lines changed: 30 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import React from 'react';
22
import { Divider, Space, Select } from 'tdesign-react';
33
import { AIMessage, ChatMessage, TdChatLoadingProps } from '@tdesign-react/chat';
44

@@ -7,6 +7,7 @@ const messages: Record<string, AIMessage> = {
77
id: '11111',
88
role: 'assistant',
99
status: 'pending',
10+
datetime: '今天16:38',
1011
},
1112
error: {
1213
id: '22222',
@@ -15,48 +16,46 @@ const messages: Record<string, AIMessage> = {
1516
content: [
1617
{
1718
type: 'text',
18-
data: '已经输出内容',
19-
},
20-
{
21-
type: 'text',
22-
data: '出错了',
19+
data: '自定义错误文案',
2320
},
2421
],
2522
},
2623
};
2724

2825
export default function ChatMessageExample() {
29-
const [animation, setAnimation] = useState<TdChatLoadingProps['animation']>('skeleton');
30-
3126
return (
3227
<Space direction="vertical" style={{ width: '100%' }}>
33-
<Divider>消息加载状态</Divider>
34-
<Select
35-
value={animation}
36-
onChange={(value: TdChatLoadingProps['animation']) => {
37-
setAnimation(value);
38-
}}
39-
style={{
40-
width: '20%',
41-
}}
42-
options={[
43-
{ label: 'skeleton', value: 'skeleton' },
44-
{ label: 'moving', value: 'moving' },
45-
{ label: 'gradient', value: 'gradient' },
46-
{ label: 'circle', value: 'circle' },
47-
{ label: 'dot', value: 'dot' },
48-
]}
49-
/>
28+
<Divider style={{ color: 'var(--td-text-color-placeholder)' }}>加载状态下的消息</Divider>
5029
<ChatMessage
5130
avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
52-
datetime="今天16:38"
53-
animation={animation}
31+
animation="skeleton"
5432
name="TDesignAI"
55-
id={messages.loading.id}
56-
role={messages.loading.role}
57-
status={messages.loading.status}
33+
{...messages.loading}
34+
></ChatMessage>
35+
<ChatMessage
36+
avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
37+
animation="moving"
38+
name="TDesignAI"
39+
{...messages.loading}
40+
></ChatMessage>
41+
<ChatMessage
42+
avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
43+
animation="gradient"
44+
name="TDesignAI"
45+
{...messages.loading}
46+
></ChatMessage>
47+
<ChatMessage
48+
avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
49+
animation="dot"
50+
name="TDesignAI"
51+
{...messages.loading}
52+
></ChatMessage>
53+
<Divider style={{ color: 'var(--td-text-color-placeholder)' }}>出错状态下的消息</Divider>
54+
<ChatMessage
55+
avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
56+
role="assistant"
57+
status="error"
5858
></ChatMessage>
59-
<Divider>出错状态下的消息</Divider>
6059
<ChatMessage
6160
avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
6261
role="assistant"

‎packages/pro-components/chat/chat-message/chat-message.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ spline: aigc
2121

2222
## 消息内容渲染
2323
### 内置支持的几种消息内容
24-
通过配置 `message type`属性，可以渲染内置的几种消息内容：**Markdown格式内容**、**思考过程**、**搜索结果**、**建议问题**、**附件列表**、**图片**, 通过`chatContentProps`属性来配置对应类型的属性
24+
通过配置 `message type`属性，可以渲染内置的几种消息内容：**文本格式内容**，**Markdown格式内容**、**思考过程**、**搜索结果**、**建议问题**、**附件列表**、**图片**, 通过`chatContentProps`属性来配置对应类型的属性
2525
{{ content }}
2626

2727
### 消息内容自定义

‎packages/tdesign-react-aigc/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
},
5252
"dependencies": {
5353
"@babel/runtime": "~7.26.7",
54-
"tdesign-web-components": "1.2.1",
54+
"tdesign-web-components": "1.2.3",
5555
"classnames": "~2.5.1",
5656
"lodash-es": "^4.17.21",
5757
"zod": "^3.24.2",

0 commit comments

Comments
 (0)