Skip to content

Commit caeca16

Browse files
liweijie0812liweijie0812
committed
fix(chat-example): fix the background color in dark mode
1 parent ee925fb commit caeca16

File tree

13 files changed

+289
-183
lines changed

13 files changed

+289
-183
lines changed

‎packages/pro-components/chat/chat-engine/_example/agui-activity-delta-test.tsx‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import type { ActivityComponentProps } from '@tdesign-react/chat';
1414

1515
/**
1616
* Activity 纯增量模式验证示例
17-
*
17+
*
1818
* 验证没有 ACTIVITY_SNAPSHOT，只有 ACTIVITY_DELTA 的情况下的处理逻辑
1919
* 基于 text.txt 中的真实数据进行测试
2020
*/
@@ -107,9 +107,7 @@ const NodeLifecycleActivity: React.FC<ActivityComponentProps<NodeLifecycleConten
107107
{getStatusText(node.phase)}
108108
</Tag>
109109
</div>
110-
<div style={{ fontSize: 12, color: '#666' }}>
111-
阶段: {node.phase}
112-
</div>
110+
<div style={{ fontSize: 12, color: '#666' }}>阶段: {node.phase}</div>
113111
</div>
114112
)}
115113

@@ -123,22 +121,24 @@ const NodeLifecycleActivity: React.FC<ActivityComponentProps<NodeLifecycleConten
123121
需要确认
124122
</Tag>
125123
</div>
126-
<div style={{ fontSize: 12, color: '#666', marginBottom: 4 }}>
127-
键: {interrupt.key}
128-
</div>
129-
<div style={{ fontSize: 12, color: '#666', marginBottom: 4 }}>
130-
检查点ID: {interrupt.checkpointId}
131-
</div>
132-
<div style={{ fontSize: 12, color: '#666', marginBottom: 4 }}>
133-
提示: {interrupt.prompt}
134-
</div>
124+
<div style={{ fontSize: 12, color: '#666', marginBottom: 4 }}>键: {interrupt.key}</div>
125+
<div style={{ fontSize: 12, color: '#666', marginBottom: 4 }}>检查点ID: {interrupt.checkpointId}</div>
126+
<div style={{ fontSize: 12, color: '#666', marginBottom: 4 }}>提示: {interrupt.prompt}</div>
135127
</div>
136128
)}
137129

138130
{/* 调试信息 */}
139131
<details style={{ fontSize: 12, color: '#999' }}>
140132
<summary style={{ cursor: 'pointer', userSelect: 'none' }}>调试信息</summary>
141-
<pre style={{ marginTop: 8, padding: 8, background: '#f5f5f5', borderRadius: 4, overflow: 'auto' }}>
133+
<pre
134+
style={{
135+
marginTop: 8,
136+
padding: 8,
137+
background: 'var(--td-bg-color-secondarycontainer)',
138+
borderRadius: 4,
139+
overflow: 'auto',
140+
}}
141+
>
142142
{JSON.stringify(content, null, 2)}
143143
</pre>
144144
</details>
@@ -227,8 +227,15 @@ const ActivityDeltaTest: React.FC = () => {
227227
};
228228

229229
return (
230-
<Space direction='vertical' style={{ width: '100%' }}>
231-
<div style={{ marginBottom: '16px', padding: '12px', background: '#f5f5f5', borderRadius: '4px' }}>
230+
<Space direction="vertical" style={{ width: '100%' }}>
231+
<div
232+
style={{
233+
marginBottom: '16px',
234+
padding: '12px',
235+
background: 'var(--td-bg-color-secondarycontainer)',
236+
borderRadius: '4px',
237+
}}
238+
>
232239
<div style={{ marginBottom: '8px', fontSize: '14px', fontWeight: 500 }}>纯增量模式验证：</div>
233240
<p style={{ margin: '8px 0', fontSize: '14px', color: '#666' }}>
234241
验证没有 ACTIVITY_SNAPSHOT，只有 ACTIVITY_DELTA 的情况下，event-mapper 是否能正确处理

‎packages/pro-components/chat/chat-engine/_example/agui-activity-test.tsx‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import type { ActivityComponentProps } from '@tdesign-react/chat';
1414

1515
/**
1616
* Activity 示例 - 规划步骤（Plan TodoList）
17-
*
17+
*
1818
* 演示如何使用 Activity 事件展示动态规划步骤，支持：
1919
* 1. 标准模式：后端先发 ACTIVITY_SNAPSHOT，再发 ACTIVITY_DELTA
2020
* 2. 纯增量模式：后端只发 ACTIVITY_DELTA，无 SNAPSHOT（前端自动初始化）
@@ -48,7 +48,7 @@ const PlanTodoActivity: React.FC<ActivityComponentProps<PlanTodoContent>> = ({ c
4848
const { title, description, steps, status } = content;
4949

5050
// 计算完成进度
51-
const completedCount = steps?.filter(s => s.status === 'completed').length || 0;
51+
const completedCount = steps?.filter((s) => s.status === 'completed').length || 0;
5252
const totalCount = steps?.length || 0;
5353
const progress = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;
5454

@@ -104,15 +104,11 @@ const PlanTodoActivity: React.FC<ActivityComponentProps<PlanTodoContent>> = ({ c
104104
{/* 标题和状态 */}
105105
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
106106
<span style={{ fontSize: 16, fontWeight: 600 }}>{title}</span>
107-
<Tag theme={getStatusTheme()}>
108-
{getStatusText()}
109-
</Tag>
107+
<Tag theme={getStatusTheme()}>{getStatusText()}</Tag>
110108
</div>
111109

112110
{/* 描述 */}
113-
{description && (
114-
<div style={{ fontSize: 13, color: '#666' }}>{description}</div>
115-
)}
111+
{description && <div style={{ fontSize: 13, color: '#666' }}>{description}</div>}
116112

117113
{/* 进度条 */}
118114
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
@@ -145,9 +141,7 @@ const PlanTodoActivity: React.FC<ActivityComponentProps<PlanTodoContent>> = ({ c
145141
opacity: step.status === 'pending' ? 0.6 : 1,
146142
}}
147143
>
148-
<div style={{ marginRight: 12, marginTop: 2 }}>
149-
{getStepIcon(step.status)}
150-
</div>
144+
<div style={{ marginRight: 12, marginTop: 2 }}>{getStepIcon(step.status)}</div>
151145
<div style={{ flex: 1 }}>
152146
<div
153147
style={{
@@ -160,9 +154,7 @@ const PlanTodoActivity: React.FC<ActivityComponentProps<PlanTodoContent>> = ({ c
160154
{step.label}
161155
</div>
162156
{step.description && (
163-
<div style={{ fontSize: 12, color: '#999', marginTop: 2 }}>
164-
{step.description}
165-
</div>
157+
<div style={{ fontSize: 12, color: '#999', marginTop: 2 }}>{step.description}</div>
166158
)}
167159
</div>
168160
{step.status === 'running' && (
@@ -254,8 +246,15 @@ const ActivityExample: React.FC = () => {
254246
};
255247

256248
return (
257-
<Space direction='vertical' style={{ width: '100%' }}>
258-
<div style={{ marginBottom: '16px', padding: '12px', background: '#f5f5f5', borderRadius: '4px' }}>
249+
<Space direction="vertical" style={{ width: '100%' }}>
250+
<div
251+
style={{
252+
marginBottom: '16px',
253+
padding: '12px',
254+
background: 'var(--td-bg-color-secondarycontainer)',
255+
borderRadius: '4px',
256+
}}
257+
>
259258
<div style={{ marginBottom: '8px', fontSize: '14px', fontWeight: 500 }}>示例说明：</div>
260259
<p style={{ margin: '8px 0', fontSize: '14px', color: '#666' }}>
261260
演示 Activity 事件的流式更新：先列出规划步骤，然后逐步打钩完成

‎packages/pro-components/chat/chat-engine/_example/agui-activity.tsx‎

Lines changed: 24 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import type { ActivityComponentProps } from '@tdesign-react/chat';
1414

1515
/**
1616
* Activity 示例 - 规划步骤（Plan TodoList）
17-
*
17+
*
1818
* 演示如何使用 Activity 事件展示动态规划步骤，支持：
1919
* 1. 标准模式：后端先发 ACTIVITY_SNAPSHOT，再发 ACTIVITY_DELTA
2020
* 2. 纯增量模式：后端只发 ACTIVITY_DELTA，无 SNAPSHOT（前端自动初始化）
@@ -48,7 +48,7 @@ const PlanTodoActivity: React.FC<ActivityComponentProps<PlanTodoContent>> = ({ c
4848
const { title, description, steps, status } = content;
4949

5050
// 计算完成进度
51-
const completedCount = steps?.filter(s => s.status === 'completed').length || 0;
51+
const completedCount = steps?.filter((s) => s.status === 'completed').length || 0;
5252
const totalCount = steps?.length || 0;
5353
const progress = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;
5454

@@ -104,21 +104,21 @@ const PlanTodoActivity: React.FC<ActivityComponentProps<PlanTodoContent>> = ({ c
104104
{/* 标题和状态 */}
105105
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
106106
<span style={{ fontSize: 16, fontWeight: 600 }}>{title}</span>
107-
<Tag theme={getStatusTheme()}>
108-
{getStatusText()}
109-
</Tag>
107+
<Tag theme={getStatusTheme()}>{getStatusText()}</Tag>
110108
</div>
111109

112110
{/* 描述 */}
113-
{description && (
114-
<div style={{ fontSize: 13, color: '#666' }}>{description}</div>
115-
)}
111+
{description && <div style={{ fontSize: 13, color: '#666' }}>{description}</div>}
116112

117113
{/* 进度条 */}
118-
<Progress
119-
percentage={progress}
114+
<Progress
115+
percentage={progress}
120116
status={status === 'completed' ? 'success' : 'active'}
121-
label={<span style={{ fontSize: 12, color: '#666' }}>{completedCount}/{totalCount} 完成</span>}
117+
label={
118+
<span style={{ fontSize: 12, color: '#666' }}>
119+
{completedCount}/{totalCount} 完成
120+
</span>
121+
}
122122
/>
123123

124124
{/* 步骤列表 */}
@@ -134,9 +134,7 @@ const PlanTodoActivity: React.FC<ActivityComponentProps<PlanTodoContent>> = ({ c
134134
opacity: step.status === 'pending' ? 0.6 : 1,
135135
}}
136136
>
137-
<div style={{ marginRight: 12, marginTop: 2 }}>
138-
{getStepIcon(step.status)}
139-
</div>
137+
<div style={{ marginRight: 12, marginTop: 2 }}>{getStepIcon(step.status)}</div>
140138
<div style={{ flex: 1 }}>
141139
<div
142140
style={{
@@ -149,9 +147,7 @@ const PlanTodoActivity: React.FC<ActivityComponentProps<PlanTodoContent>> = ({ c
149147
{step.label}
150148
</div>
151149
{step.description && (
152-
<div style={{ fontSize: 12, color: '#999', marginTop: 2 }}>
153-
{step.description}
154-
</div>
150+
<div style={{ fontSize: 12, color: '#999', marginTop: 2 }}>{step.description}</div>
155151
)}
156152
</div>
157153
{step.status === 'running' && (
@@ -228,18 +224,11 @@ const TravelProgressActivity: React.FC<ActivityComponentProps<TravelProgressCont
228224
</div>
229225

230226
{/* 进度条 */}
231-
<Progress
232-
theme="plump"
233-
percentage={percentage}
234-
status={getProgressStatus()}
235-
color={getStatusColor()}
236-
/>
227+
<Progress theme="plump" percentage={percentage} status={getProgressStatus()} color={getStatusColor()} />
237228

238229
{/* 当前任务和统计 */}
239230
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
240-
<span style={{ fontSize: 12, color: '#999' }}>
241-
{currentTask}
242-
</span>
231+
<span style={{ fontSize: 12, color: '#999' }}>{currentTask}</span>
243232
<span style={{ fontSize: 12, color: '#666' }}>
244233
{completedTasks}/{totalTasks} 任务
245234
</span>
@@ -330,8 +319,15 @@ const ActivityExample: React.FC = () => {
330319
};
331320

332321
return (
333-
<Space direction='vertical' style={{ width: '100%' }}>
334-
<div style={{ marginBottom: '16px', padding: '12px', background: '#f5f5f5', borderRadius: '4px' }}>
322+
<Space direction="vertical" style={{ width: '100%' }}>
323+
<div
324+
style={{
325+
marginBottom: '16px',
326+
padding: '12px',
327+
background: 'var(--td-bg-color-secondarycontainer)',
328+
borderRadius: '4px',
329+
}}
330+
>
335331
<div style={{ marginBottom: '8px', fontSize: '14px', fontWeight: 500 }}>示例说明：</div>
336332
<p style={{ margin: '8px 0', fontSize: '14px', color: '#666' }}>
337333
演示多个不同 activityType 的 Activity 同时流式更新：

‎packages/pro-components/chat/chat-engine/_example/agui-chunk.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,15 @@ const SearchToolComponent: React.FC<ToolcallComponentProps<SearchArgs>> = ({ arg
7474
</div>
7575

7676
{/* 流式展示参数 */}
77-
<div style={{ marginTop: 8, padding: 12, background: '#f5f5f5', borderRadius: 4, fontFamily: 'monospace' }}>
77+
<div
78+
style={{
79+
marginTop: 8,
80+
padding: 12,
81+
background: 'var(--td-bg-color-secondarycontainer)',
82+
borderRadius: 4,
83+
fontFamily: 'monospace',
84+
}}
85+
>
7886
<div style={{ fontSize: 12, color: '#666', marginBottom: 8 }}>参数 (流式接收中):</div>
7987
<pre style={{ margin: 0, fontSize: 12, whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
8088
{args ? JSON.stringify(args, null, 2) : '等待参数...'}
@@ -130,7 +138,9 @@ const CalculateToolComponent: React.FC<ToolcallComponentProps<CalculateArgs>> =
130138
</Tag>
131139
</div>
132140

133-
<div style={{ marginTop: 8, padding: 12, background: '#f5f5f5', borderRadius: 4 }}>
141+
<div
142+
style={{ marginTop: 8, padding: 12, background: 'var(--td-bg-color-secondarycontainer)', borderRadius: 4 }}
143+
>
134144
<div style={{ fontSize: 13 }}>
135145
<strong>表达式：</strong>
136146
<code style={{ marginLeft: 8, padding: '2px 6px', background: '#e8e8e8', borderRadius: 4 }}>
@@ -378,7 +388,9 @@ const AguiChunkExample: React.FC = () => {
378388
</div>
379389

380390
{/* 模式说明 */}
381-
<div style={{ marginTop: 12, padding: 12, background: '#f5f5f5', borderRadius: 4 }}>
391+
<div
392+
style={{ marginTop: 12, padding: 12, background: 'var(--td-bg-color-secondarycontainer)', borderRadius: 4 }}
393+
>
382394
{mode === 'text' && (
383395
<div style={{ fontSize: 12, color: '#666' }}>
384396
<strong>纯文本 Chunk 模式：</strong>

‎packages/pro-components/chat/chat-engine/_example/agui-history-test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@ const AGUIHistoryTest: React.FC = () => {
226226
<pre
227227
style={{
228228
fontSize: 11,
229-
background: '#f5f5f5',
229+
background: 'var(--td-bg-color-secondarycontainer)',
230230
padding: 8,
231231
borderRadius: 4,
232232
marginTop: 4,

‎packages/pro-components/chat/chat-engine/_example/agui-test.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ const GetAccessServiceComponent = ({ args, status, result, error }) => {
109109
<strong>参数:</strong>
110110
<pre
111111
style={{
112-
background: '#f5f5f5',
112+
background: 'var(--td-bg-color-secondarycontainer)',
113113
padding: '8px',
114114
borderRadius: '4px',
115115
}}
@@ -132,7 +132,7 @@ const GetAccessServiceComponent = ({ args, status, result, error }) => {
132132
<strong>结果:</strong>
133133
<pre
134134
style={{
135-
background: '#f5f5f5',
135+
background: 'var(--td-bg-color-secondarycontainer)',
136136
padding: '8px',
137137
borderRadius: '4px',
138138
maxHeight: '200px',
@@ -192,7 +192,7 @@ const GetAccessUpstreamComponent = ({ args, status, result, error }) => {
192192
<strong>参数:</strong>
193193
<pre
194194
style={{
195-
background: '#f5f5f5',
195+
background: 'var(--td-bg-color-secondarycontainer)',
196196
padding: '8px',
197197
borderRadius: '4px',
198198
}}
@@ -215,7 +215,7 @@ const GetAccessUpstreamComponent = ({ args, status, result, error }) => {
215215
<strong>结果:</strong>
216216
<pre
217217
style={{
218-
background: '#f5f5f5',
218+
background: 'var(--td-bg-color-secondarycontainer)',
219219
padding: '8px',
220220
borderRadius: '4px',
221221
maxHeight: '200px',

‎packages/pro-components/chat/chat-engine/_example/headless-eventbus.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,12 @@ export default function HeadlessEventBusExample() {
272272
<div>
273273
<h4>事件日志（最新20条）</h4>
274274
<List
275-
style={{ maxHeight: 400, overflow: 'auto', background: '#f5f5f5', borderRadius: 4 }}
275+
style={{
276+
maxHeight: 400,
277+
overflow: 'auto',
278+
background: 'var(--td-bg-color-secondarycontainer)',
279+
borderRadius: 4,
280+
}}
276281
size="small"
277282
split
278283
>

‎packages/pro-components/chat/chat-engine/_example/initial-messages.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,14 @@ export default function InitialMessages() {
149149
return (
150150
<div>
151151
{/* 操作按钮 */}
152-
<div style={{ marginBottom: '16px', padding: '12px', background: '#f5f5f5', borderRadius: '4px' }}>
152+
<div
153+
style={{
154+
marginBottom: '16px',
155+
padding: '12px',
156+
background: 'var(--td-bg-color-secondarycontainer)',
157+
borderRadius: '4px',
158+
}}
159+
>
153160
<div style={{ marginBottom: '8px', fontSize: '14px', fontWeight: 500 }}>快捷指令：</div>
154161
<Space>
155162
<Button variant="outline" size="small" onClick={loadHistory} disabled={hasHistory}>

‎packages/pro-components/chat/chat-engine/_example/instance-methods.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,14 @@ export default function InstanceMethods() {
123123
return (
124124
<div>
125125
{/* 操作按钮区域 */}
126-
<div style={{ marginBottom: '16px', padding: '12px', background: '#f5f5f5', borderRadius: '4px' }}>
126+
<div
127+
style={{
128+
marginBottom: '16px',
129+
padding: '12px',
130+
background: 'var(--td-bg-color-secondarycontainer)',
131+
borderRadius: '4px',
132+
}}
133+
>
127134
<div style={{ marginBottom: '8px', fontSize: '14px', fontWeight: 500 }}>快捷指令：</div>
128135
<Space size="small" breakLine>
129136
<Button size="small" variant="outline" onClick={handleSendUserMessage}>

0 commit comments

Comments
 (0)