super-agent-sdk 1.0.8 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +169 -81
- package/dist/widget.cjs +108 -681
- package/dist/widget.d.ts +117 -10
- package/dist/widget.mjs +1869 -1985
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -24,10 +24,10 @@ Super Agent Web SDK —— 为 `super-agent-service` 提供的一站式浏览器
|
|
|
24
24
|
|
|
25
25
|
`super-agent-sdk` 提供两个入口:
|
|
26
26
|
|
|
27
|
-
| 入口
|
|
28
|
-
|
|
|
29
|
-
| `super-agent-sdk` | 纯 JS API 调用层,封装鉴权、SSE 流式解析、会话与消息接口
|
|
30
|
-
| `super-agent-sdk/widget` | 可嵌入式 React 聊天组件
|
|
27
|
+
| 入口 | 说明 | 依赖 |
|
|
28
|
+
| ------------------------ | -------------------------------------------------------- | ---------- |
|
|
29
|
+
| `super-agent-sdk` | 纯 JS API 调用层,封装鉴权、SSE 流式解析、会话与消息接口 | 无 UI 依赖 |
|
|
30
|
+
| `super-agent-sdk/widget` | 可嵌入式 React 聊天组件 | React 18+ |
|
|
31
31
|
|
|
32
32
|
核心能力:
|
|
33
33
|
|
|
@@ -83,11 +83,11 @@ function createSuperAgent(config: SDKConfig): SuperAgentSDK;
|
|
|
83
83
|
|
|
84
84
|
```ts
|
|
85
85
|
export interface SDKConfig {
|
|
86
|
-
botId: number;
|
|
87
|
-
tokenGateway: string;
|
|
88
|
-
baseUrl?: string;
|
|
89
|
-
appId?: string;
|
|
90
|
-
token?: string;
|
|
86
|
+
botId: number; // Bot ID(必填)
|
|
87
|
+
tokenGateway: string; // Token 网关前缀(必填,不带 host),如 "/api/gateway";token URL = {origin}{tokenGateway}/v1/token
|
|
88
|
+
baseUrl?: string; // 业务接口前缀(可选,默认 "/api/agent/runtime/v1"),不带 host
|
|
89
|
+
appId?: string; // 可选,不传则从 token 接口响应自动获取
|
|
90
|
+
token?: string; // 可选,不传则自动调 token 接口获取
|
|
91
91
|
}
|
|
92
92
|
```
|
|
93
93
|
|
|
@@ -142,9 +142,19 @@ export interface SuperAgentSDK {
|
|
|
142
142
|
getMessages(sessionId: string): Promise<UIMessage[]>;
|
|
143
143
|
getToken(): Promise<string>;
|
|
144
144
|
setToken(token: string): void;
|
|
145
|
-
feedback(
|
|
145
|
+
feedback(
|
|
146
|
+
messageId: string,
|
|
147
|
+
type: "like" | "dislike",
|
|
148
|
+
options?: { reason?: number; remark?: string },
|
|
149
|
+
): Promise<void>;
|
|
146
150
|
cancelFeedback(messageId: string): Promise<void>;
|
|
147
|
-
respondInterrupt(
|
|
151
|
+
respondInterrupt(
|
|
152
|
+
interruptId: string,
|
|
153
|
+
sessionId: string,
|
|
154
|
+
response: InterruptResponse,
|
|
155
|
+
onMessage?: (event: ChatEvent) => void,
|
|
156
|
+
onError?: (error: Error) => void,
|
|
157
|
+
): Promise<void>;
|
|
148
158
|
listSkills(): Promise<SkillInfo[]>;
|
|
149
159
|
stopGeneration(sessionId: string): Promise<void>;
|
|
150
160
|
}
|
|
@@ -176,7 +186,11 @@ export interface ChatOptions {
|
|
|
176
186
|
stream?: boolean; // 默认 true
|
|
177
187
|
onMessage?: (event: ChatEvent) => void;
|
|
178
188
|
onError?: (error: Error) => void;
|
|
179
|
-
onDone?: (result: {
|
|
189
|
+
onDone?: (result: {
|
|
190
|
+
sessionId: string;
|
|
191
|
+
content: string;
|
|
192
|
+
messageId?: string;
|
|
193
|
+
}) => void; // messageId:后端在 done 事件返回的消息标识(存在时 SDK Widget 用其启用消息反馈,若返回可据此判断该消息可 feedback)
|
|
180
194
|
signal?: AbortSignal;
|
|
181
195
|
}
|
|
182
196
|
```
|
|
@@ -315,7 +329,7 @@ await sdk.feedback(aiMsg.id, "like");
|
|
|
315
329
|
|
|
316
330
|
// 踩(可附原因 + 备注)
|
|
317
331
|
await sdk.feedback(aiMsg.id, "dislike", {
|
|
318
|
-
reason: 1,
|
|
332
|
+
reason: 1, // 1=事实错误 2=逻辑问题 3=不相关 4=信息过时 5=冗长啰嗦 6=难以理解
|
|
319
333
|
remark: "时间描述有误",
|
|
320
334
|
});
|
|
321
335
|
|
|
@@ -324,6 +338,7 @@ await sdk.cancelFeedback(aiMsg.id);
|
|
|
324
338
|
```
|
|
325
339
|
|
|
326
340
|
组件内置的点赞/踩按钮已自动调用 `feedback()`/`cancelFeedback()`:
|
|
341
|
+
|
|
327
342
|
- 点击已选中的按钮 → 取消(DELETE)
|
|
328
343
|
- 点击另一个按钮 → 切换(POST)
|
|
329
344
|
- 点踩时弹出原因选择面板(可选填原因 + 备注后提交)
|
|
@@ -360,17 +375,17 @@ SDK 方法 → 后端接口的完整映射:
|
|
|
360
375
|
|
|
361
376
|
> 除 `getToken()` 外,其余接口请求均携带 `X-App-Id` 与 `X-Token` 请求头进行鉴权。
|
|
362
377
|
|
|
363
|
-
| SDK 方法 | HTTP 请求
|
|
364
|
-
| --------------------- |
|
|
365
|
-
| `getToken()` | `POST {gateway}/v1/token`
|
|
366
|
-
| `createSession()` | `POST /chat/sessions`
|
|
367
|
-
| `chat()` | `POST /chat`
|
|
368
|
-
| `listConversations()` | `GET /chat/conversations`
|
|
369
|
-
| `feedback()` | `POST /chat/messages/{messageId}/feedback`
|
|
370
|
-
| `cancelFeedback()` | `DELETE /chat/messages/{messageId}/feedback` | 无 body
|
|
371
|
-
| `respondInterrupt()` | `POST /chat/interrupt/{interruptId}/respond` | `{ sessionId, action, value? }`
|
|
372
|
-
| `stopGeneration()` | `POST /chat/stop`
|
|
373
|
-
| `listSkills()` | `GET /chat/bots/{botId}/skills`
|
|
378
|
+
| SDK 方法 | HTTP 请求 | 请求体 | 后端返回 |
|
|
379
|
+
| --------------------- | -------------------------------------------- | --------------------------------------- | ----------------------------------------------- |
|
|
380
|
+
| `getToken()` | `POST {gateway}/v1/token` | `{ botId }` | `{ token, appId }` |
|
|
381
|
+
| `createSession()` | `POST /chat/sessions` | `{ botId }` | `{ sessionId }` |
|
|
382
|
+
| `chat()` | `POST /chat` | `{ botId, sessionId, message, stream }` | SSE 流,`done`/`stop` 事件含 `sessionId` |
|
|
383
|
+
| `listConversations()` | `GET /chat/conversations` | 查询参数 `botId`、`page`、`size` | `{ items: [{ sessionId, botId, ... }], total }` |
|
|
384
|
+
| `feedback()` | `POST /chat/messages/{messageId}/feedback` | `{ type, reason?, remark? }` | `null` |
|
|
385
|
+
| `cancelFeedback()` | `DELETE /chat/messages/{messageId}/feedback` | 无 body | `null` |
|
|
386
|
+
| `respondInterrupt()` | `POST /chat/interrupt/{interruptId}/respond` | `{ sessionId, action, value? }` | SSE 流(后续事件) |
|
|
387
|
+
| `stopGeneration()` | `POST /chat/stop` | `{ sessionId }` | `{ stopped: "pending", sessionId }` |
|
|
388
|
+
| `listSkills()` | `GET /chat/bots/{botId}/skills` | — | `[{ code, name, displayName, description }]` |
|
|
374
389
|
|
|
375
390
|
---
|
|
376
391
|
|
|
@@ -396,8 +411,26 @@ export interface MountOptions {
|
|
|
396
411
|
suggestedPrompts?: string[];
|
|
397
412
|
title?: string; // 标题,默认 "AI Assistant"
|
|
398
413
|
sidebarDefaultOpen?: boolean; // fullpage 模式:侧边栏初始展开(默认 true)
|
|
399
|
-
avatar?: AvatarConfig; //
|
|
414
|
+
avatar?: AvatarConfig; // 自定义头像(AI 消息始终有内置默认头像;用户头像未配置则不显示)
|
|
400
415
|
artifactPreview?: boolean; // 产物预览总开关(html/pdf/docx 预览 + 下载 + 全屏),默认 false
|
|
416
|
+
capabilities?: CapabilityItem[]; // floating 首页:能力清单(icon + 标签 + 描述)
|
|
417
|
+
quickLinks?: QuickLinkItem[]; // floating 首页:快速入口
|
|
418
|
+
logo?: string; // floating 首页居中 Logo(URL),默认 SDK 内置 Logo
|
|
419
|
+
triggerLogo?: string; // floating 触发按钮 Logo(URL),默认 SDK 内置 Logo
|
|
420
|
+
showTimestamp?: boolean; // 显示消息时间戳,默认 false 不显示
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
export interface CapabilityItem {
|
|
424
|
+
icon?: string; // 图标 URL
|
|
425
|
+
label: string; // 能力名称
|
|
426
|
+
desc?: string; // 能力描述(超长自动省略)
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
export interface QuickLinkItem {
|
|
430
|
+
icon?: string; // 图标 URL
|
|
431
|
+
label: string; // 入口名称
|
|
432
|
+
prompt?: string; // 点击后发送的消息
|
|
433
|
+
onClick?: () => void; // 自定义点击行为(优先于 prompt)
|
|
401
434
|
}
|
|
402
435
|
|
|
403
436
|
export interface WidgetInstance {
|
|
@@ -432,16 +465,38 @@ widget.destroy(); // 卸载并移除 DOM
|
|
|
432
465
|
|
|
433
466
|
> 挂载后默认是收起状态,需调用 `widget.open()` 展开。
|
|
434
467
|
|
|
468
|
+
### 6.2 源码接入(monorepo alias)注意事项
|
|
469
|
+
|
|
470
|
+
Widget 内部使用 **Tailwind CSS**(utility 全部限定在 `[data-super-agent-widget]` 宿主选择器内、禁用 preflight,不影响宿主页样式)。分发包(`dist`)已内联全部样式;内置图片资产(Logo/图标/头像等)走 CDN 绝对路径(`src/widget/assets/index.ts` 的 `BASE_URL`),**npm 引入无需任何配置**(需能访问 CDN)。
|
|
471
|
+
|
|
472
|
+
若宿主工程通过 vite alias 直接引用 SDK **源码**(如本仓库 frontend 的做法),则 SDK 的样式会由宿主自己的 PostCSS/Tailwind 管线处理,需要满足:
|
|
473
|
+
|
|
474
|
+
1. 宿主 `tailwind.config` 的 `content` 包含 SDK 源码路径,否则 widget 的 utility 类不会生成:
|
|
475
|
+
|
|
476
|
+
```ts
|
|
477
|
+
// frontend/tailwind.config.ts
|
|
478
|
+
export default {
|
|
479
|
+
content: [
|
|
480
|
+
'./index.html',
|
|
481
|
+
'./src/**/*.{js,jsx,ts,tsx}',
|
|
482
|
+
'../sdk/src/**/*.{ts,tsx}', // SDK 源码
|
|
483
|
+
],
|
|
484
|
+
// ...
|
|
485
|
+
};
|
|
486
|
+
```
|
|
487
|
+
|
|
488
|
+
2. 无需在宿主 config 中镜像 SDK 的 `important: '[data-super-agent-widget]'`(那会把宿主自己的 utility 也锁进 widget 容器内);宿主管线生成的 utility 为普通类,widget DOM 照常命中,动画/自定义类由 SDK 自带的 `tailwind.css`(运行时注入)保证。
|
|
489
|
+
|
|
435
490
|
---
|
|
436
491
|
|
|
437
492
|
## 7. 展示模式
|
|
438
493
|
|
|
439
494
|
通过 `mode` 切换两种展示模式:
|
|
440
495
|
|
|
441
|
-
| 模式 | 说明
|
|
442
|
-
| ------------------ |
|
|
443
|
-
| `floating`(默认) |
|
|
444
|
-
| `fullpage` |
|
|
496
|
+
| 模式 | 说明 |
|
|
497
|
+
| ------------------ | ---------------------------------------------------------- |
|
|
498
|
+
| `floating`(默认) | 右下角 Logo 触发按钮 + 可拖拽/拉伸/最大化的浮窗聊天窗口 |
|
|
499
|
+
| `fullpage` | 整页布局,左侧会话栏(hr-for-help 风格)+ 右侧聊天区 |
|
|
445
500
|
|
|
446
501
|
```ts
|
|
447
502
|
mount("#chat-root", { sdk, mode: "fullpage" });
|
|
@@ -453,6 +508,21 @@ mount("#chat-root", { sdk, mode: "fullpage" });
|
|
|
453
508
|
mount("#chat-root", { sdk, mode: "fullpage", sidebarDefaultOpen: false });
|
|
454
509
|
```
|
|
455
510
|
|
|
511
|
+
### 7.1 浮窗模式(floating)交互
|
|
512
|
+
|
|
513
|
+
浮窗窗口对齐 hr-for-help 设计,开箱具备以下交互能力:
|
|
514
|
+
|
|
515
|
+
- **标题栏拖拽**:按住顶部导航栏移动窗口(视口内钳制,按钮区域不触发)
|
|
516
|
+
- **左右拉伸调宽**:窗口左右两侧 6px 手柄拖拽,宽度范围 360 ~ 800 px,拖超过 800 自动进入大窗
|
|
517
|
+
- **大窗/小窗切换**:header 右侧「大窗」按钮切换;大窗为底部弹出的近全屏 overlay(内容区 800px 居中),回小窗时宽度重置为默认值
|
|
518
|
+
- **内容自适应高度**:聊天内容增长时窗口自动变高(默认 648px,上限 95% 视口,超出后消息区滚动),回到首页恢复默认高度
|
|
519
|
+
- **内嵌会话侧边栏**:header「历史记录」按钮开合;小窗展开时窗口自动加宽 200px;大窗模式自动展开(220px),大窗/小窗各自记住用户偏好
|
|
520
|
+
- **关闭即还原**:关闭窗口后几何状态(位置/宽度/大窗态/高度)全部重置
|
|
521
|
+
|
|
522
|
+
浮窗消息展示对齐 hr-for-help:AI 头像独占一行(无背景色,生成中切换动效头像)、气泡白底描边、用户气泡浅蓝右对齐;`fullpage` 模式保持横排头像 + 经典气泡,两者互不影响。
|
|
523
|
+
|
|
524
|
+
首页(无消息时)包含:居中 Logo(浮动动画)+ 流光渐变标题 + 能力清单 + 建议词 chips + 快速入口,内容通过 `capabilities` / `suggestedPrompts` / `quickLinks` / `logo` 配置(见 6.1;icon 可复用 `super-agent-sdk/widget` 导出的内置 `ASSETS`)。
|
|
525
|
+
|
|
456
526
|
---
|
|
457
527
|
|
|
458
528
|
## 8. 定制化
|
|
@@ -467,8 +537,8 @@ export interface ThemeConfig {
|
|
|
467
537
|
backgroundColor?: string; // 默认 #ffffff
|
|
468
538
|
fontFamily?: string; // 默认 system-ui, -apple-system, sans-serif
|
|
469
539
|
borderRadius?: number; // 默认 16 (px)
|
|
470
|
-
panelWidth?: number; //
|
|
471
|
-
panelHeight?: number; //
|
|
540
|
+
panelWidth?: number; // floating 初始宽度,默认 400 (px)
|
|
541
|
+
panelHeight?: number; // floating 初始高度,默认 648 (px)
|
|
472
542
|
zIndex?: number; // 默认 9999
|
|
473
543
|
}
|
|
474
544
|
```
|
|
@@ -481,8 +551,8 @@ export interface ThemeConfig {
|
|
|
481
551
|
| `--sa-bg` | `#ffffff` | `backgroundColor` |
|
|
482
552
|
| `--sa-font` | `system-ui, -apple-system, sans-serif` | `fontFamily` |
|
|
483
553
|
| `--sa-radius` | `16px` | `borderRadius` |
|
|
484
|
-
| `--sa-panel-width` | `
|
|
485
|
-
| `--sa-panel-height` | `
|
|
554
|
+
| `--sa-panel-width` | `400px` | `panelWidth` |
|
|
555
|
+
| `--sa-panel-height` | `648px` | `panelHeight` |
|
|
486
556
|
| `--sa-z-index` | `9999` | `zIndex` |
|
|
487
557
|
|
|
488
558
|
```ts
|
|
@@ -502,12 +572,12 @@ mount("#chat-root", {
|
|
|
502
572
|
|
|
503
573
|
### 8.2 头像定制
|
|
504
574
|
|
|
505
|
-
通过 `avatar`
|
|
575
|
+
通过 `avatar` 配置助手与用户的头像,支持图片 URL、emoji 或文本。以 `http(s)://`、`data:`、`blob:`、`/`、`./`、`../`、`//` 开头的字符串渲染为图片,其余作为 emoji/文本展示(无背景色):
|
|
506
576
|
|
|
507
577
|
```ts
|
|
508
578
|
export interface AvatarConfig {
|
|
509
|
-
assistant?: string; // URL、emoji
|
|
510
|
-
user?: string;
|
|
579
|
+
assistant?: string; // 图片 URL、emoji 或文本;默认 SDK 内置头像(生成中显示动效头像)
|
|
580
|
+
user?: string; // 图片 URL、emoji 或文本;未配置则不显示用户头像
|
|
511
581
|
}
|
|
512
582
|
```
|
|
513
583
|
|
|
@@ -515,7 +585,7 @@ export interface AvatarConfig {
|
|
|
515
585
|
mount("#chat-root", {
|
|
516
586
|
sdk,
|
|
517
587
|
avatar: {
|
|
518
|
-
assistant: "🤖",
|
|
588
|
+
assistant: "🤖", // 配置后覆盖内置默认头像
|
|
519
589
|
user: "https://cdn.example.com/user-avatar.png",
|
|
520
590
|
},
|
|
521
591
|
});
|
|
@@ -543,20 +613,20 @@ export interface Slots {
|
|
|
543
613
|
}
|
|
544
614
|
```
|
|
545
615
|
|
|
546
|
-
| 插槽 | Props 接口 | 说明
|
|
547
|
-
| ---------------- | --------------------- |
|
|
548
|
-
| `Trigger` | `TriggerProps` | 悬浮触发按钮
|
|
549
|
-
| `Header` | `HeaderProps` | 面板标题栏
|
|
550
|
-
| `Message` | `MessageProps` | 单条消息容器(完整自定义消息渲染)
|
|
551
|
-
| `Composer` | `ComposerProps` | 输入框 / 发送栏
|
|
552
|
-
| `ActionBar` | `ActionBarProps` | 消息操作栏(复制 / 重试 / 反馈)
|
|
553
|
-
| `ThreadList` | `ThreadListProps` | 会话列表(浮窗模式覆盖层 / 全屏模式侧边栏)
|
|
554
|
-
| `ThinkingPart` | `ThinkingPartProps` | 思考过程块
|
|
555
|
-
| `TextPart` | `TextPartProps` | 文本块
|
|
556
|
-
| `ToolCallPart` | `ToolCallPartProps` | 工具调用卡片(可折叠 + 展开后复制参数)
|
|
616
|
+
| 插槽 | Props 接口 | 说明 |
|
|
617
|
+
| ---------------- | --------------------- | -------------------------------------------------------------------------------------------------- |
|
|
618
|
+
| `Trigger` | `TriggerProps` | 悬浮触发按钮 |
|
|
619
|
+
| `Header` | `HeaderProps` | 面板标题栏 |
|
|
620
|
+
| `Message` | `MessageProps` | 单条消息容器(完整自定义消息渲染) |
|
|
621
|
+
| `Composer` | `ComposerProps` | 输入框 / 发送栏 |
|
|
622
|
+
| `ActionBar` | `ActionBarProps` | 消息操作栏(复制 / 重试 / 反馈) |
|
|
623
|
+
| `ThreadList` | `ThreadListProps` | 会话列表(浮窗模式覆盖层 / 全屏模式侧边栏) |
|
|
624
|
+
| `ThinkingPart` | `ThinkingPartProps` | 思考过程块 |
|
|
625
|
+
| `TextPart` | `TextPartProps` | 文本块 |
|
|
626
|
+
| `ToolCallPart` | `ToolCallPartProps` | 工具调用卡片(可折叠 + 展开后复制参数) |
|
|
557
627
|
| `ToolResultPart` | `ToolResultPartProps` | 工具返回卡片(pre 滚动 + 复制;`renderMode==="html"` 时 DOMPurify 清洗后直接渲染,最高 60vh 滚动) |
|
|
558
|
-
| `ErrorPart` | `ErrorPartProps` | 错误提示块
|
|
559
|
-
| `WelcomeScreen` | `WelcomeScreenProps` | 空会话欢迎页
|
|
628
|
+
| `ErrorPart` | `ErrorPartProps` | 错误提示块 |
|
|
629
|
+
| `WelcomeScreen` | `WelcomeScreenProps` | 空会话欢迎页 |
|
|
560
630
|
|
|
561
631
|
#### Trigger
|
|
562
632
|
|
|
@@ -565,6 +635,7 @@ export interface TriggerProps {
|
|
|
565
635
|
isOpen: boolean;
|
|
566
636
|
onClick: () => void;
|
|
567
637
|
unreadCount?: number;
|
|
638
|
+
triggerLogo?: string; // 触发按钮 Logo(URL)
|
|
568
639
|
}
|
|
569
640
|
```
|
|
570
641
|
|
|
@@ -584,11 +655,21 @@ function MyTrigger({ isOpen, onClick, unreadCount }: TriggerProps) {
|
|
|
584
655
|
|
|
585
656
|
#### Header
|
|
586
657
|
|
|
658
|
+
floating 与 fullpage 模式均支持替换;`onToggleThreadList` 在 floating 下切换内嵌会话侧边栏、在 fullpage 下切换左侧边栏;开启 `artifactPreview` 后额外提供产物入口字段。
|
|
659
|
+
|
|
660
|
+
> 注:fullpage 内置 Header 只有标题与产物入口(无关闭按钮);需要关闭入口时通过自定义 Header 的 `onClose` 自行渲染。floating 内置 Header 含历史/回首页/大窗/关闭按钮。
|
|
661
|
+
|
|
587
662
|
```ts
|
|
588
663
|
export interface HeaderProps {
|
|
589
664
|
title: string;
|
|
590
665
|
onClose: () => void;
|
|
591
666
|
onToggleThreadList: () => void;
|
|
667
|
+
isMaximized?: boolean; // floating:大窗状态
|
|
668
|
+
onToggleMaximize?: () => void; // floating:大窗/小窗切换
|
|
669
|
+
showHome?: boolean; // floating:聊天态显示回到首页
|
|
670
|
+
onHome?: () => void; // floating:回到首页(新会话)
|
|
671
|
+
artifactCount?: number; // 会话产物数量(artifactPreview 开启时提供)
|
|
672
|
+
onToggleArtifactDrawer?: () => void; // 打开/关闭产物预览抽屉
|
|
592
673
|
}
|
|
593
674
|
```
|
|
594
675
|
|
|
@@ -733,7 +814,11 @@ export interface ActionBarProps {
|
|
|
733
814
|
message: UIMessage;
|
|
734
815
|
onCopy: () => void;
|
|
735
816
|
onRegenerate?: () => void;
|
|
736
|
-
onFeedback?: (
|
|
817
|
+
onFeedback?: (
|
|
818
|
+
messageId: string,
|
|
819
|
+
feedback: "like" | "dislike",
|
|
820
|
+
options?: { reason?: number; remark?: string },
|
|
821
|
+
) => void;
|
|
737
822
|
}
|
|
738
823
|
```
|
|
739
824
|
|
|
@@ -755,9 +840,9 @@ function MyActionBar({
|
|
|
755
840
|
}
|
|
756
841
|
```
|
|
757
842
|
|
|
758
|
-
#### ThreadList
|
|
843
|
+
#### ThreadList(浮窗内嵌会话侧边栏 + 全屏模式侧边栏)
|
|
759
844
|
|
|
760
|
-
在 `floating`
|
|
845
|
+
在 `floating` 模式下作为窗口内嵌侧边栏渲染(小窗 200px / 大窗 220px,随「历史记录」按钮开合);在 `fullpage` 模式下作为左侧侧边栏渲染(220px,可收起为图标栏)。
|
|
761
846
|
|
|
762
847
|
```ts
|
|
763
848
|
export interface ThreadListProps {
|
|
@@ -1175,7 +1260,7 @@ const controller = sdk.chat({
|
|
|
1175
1260
|
message: "...",
|
|
1176
1261
|
stream: true,
|
|
1177
1262
|
onMessage: (event) => {
|
|
1178
|
-
if (event.type ===
|
|
1263
|
+
if (event.type === "stop") {
|
|
1179
1264
|
// 用户主动停止,event.content 为已生成的半截回复全文
|
|
1180
1265
|
console.log("已停止,半截回复:", event.content);
|
|
1181
1266
|
}
|
|
@@ -1270,14 +1355,14 @@ export type MessagePart =
|
|
|
1270
1355
|
};
|
|
1271
1356
|
```
|
|
1272
1357
|
|
|
1273
|
-
| type | 字段
|
|
1274
|
-
| ------------- |
|
|
1275
|
-
| `text` | `content`
|
|
1276
|
-
| `thinking` | `content`
|
|
1277
|
-
| `tool_call` | `toolName`, `toolCallId`, `args`
|
|
1278
|
-
| `tool_result` | `toolName`, `toolCallId`, `content`, `artifacts?`, `renderMode?`, `html?` | 工具返回结果
|
|
1279
|
-
| `error` | `content`
|
|
1280
|
-
| `interrupt` | `interrupt`, `resolved?`, `response?`
|
|
1358
|
+
| type | 字段 | 说明 |
|
|
1359
|
+
| ------------- | ------------------------------------------------------------------------- | ------------------------------- |
|
|
1360
|
+
| `text` | `content` | 文本 / Markdown 内容 |
|
|
1361
|
+
| `thinking` | `content` | 思考过程(reasoning) |
|
|
1362
|
+
| `tool_call` | `toolName`, `toolCallId`, `args` | 工具调用,`args` 为 JSON 字符串 |
|
|
1363
|
+
| `tool_result` | `toolName`, `toolCallId`, `content`, `artifacts?`, `renderMode?`, `html?` | 工具返回结果 |
|
|
1364
|
+
| `error` | `content` | 错误信息 |
|
|
1365
|
+
| `interrupt` | `interrupt`, `resolved?`, `response?` | 中断交互卡片(HITL) |
|
|
1281
1366
|
|
|
1282
1367
|
### 11.3 ChatEvent(流式事件)
|
|
1283
1368
|
|
|
@@ -1358,7 +1443,7 @@ mount("#chat", { sdk }).open();
|
|
|
1358
1443
|
mount("#chat", {
|
|
1359
1444
|
sdk,
|
|
1360
1445
|
slots: {
|
|
1361
|
-
InterruptCard: MyInterruptCard,
|
|
1446
|
+
InterruptCard: MyInterruptCard, // 自定义全部类型
|
|
1362
1447
|
},
|
|
1363
1448
|
});
|
|
1364
1449
|
```
|
|
@@ -1383,23 +1468,23 @@ sdk.chat({
|
|
|
1383
1468
|
|
|
1384
1469
|
### 12.6 interruptType 一览
|
|
1385
1470
|
|
|
1386
|
-
| interruptType | 交互
|
|
1387
|
-
|
|
1388
|
-
| `confirm`
|
|
1389
|
-
| `select`
|
|
1390
|
-
| `multiSelect` | 多选
|
|
1391
|
-
| `input`
|
|
1392
|
-
| `form`
|
|
1393
|
-
| `review`
|
|
1394
|
-
| `approve`
|
|
1395
|
-
| `upload`
|
|
1396
|
-
| `image`
|
|
1397
|
-
| `auth`
|
|
1398
|
-
| `captcha`
|
|
1399
|
-
| `decision`
|
|
1400
|
-
| `rating`
|
|
1401
|
-
| `date`
|
|
1402
|
-
| `location`
|
|
1471
|
+
| interruptType | 交互 | action | value 示例 |
|
|
1472
|
+
| ------------- | -------- | --------------------- | ----------------------- |
|
|
1473
|
+
| `confirm` | 二次确认 | `confirm` / `cancel` | — |
|
|
1474
|
+
| `select` | 单选 | `select` | `"flight_a"` |
|
|
1475
|
+
| `multiSelect` | 多选 | `submit` | `["name", "phone"]` |
|
|
1476
|
+
| `input` | 文本输入 | `submit` | `"123456"` |
|
|
1477
|
+
| `form` | 表单 | `submit` | `{ name: "张三" }` |
|
|
1478
|
+
| `review` | 内容审阅 | `approve` / `reject` | 修改后内容 |
|
|
1479
|
+
| `approve` | 审批流 | `approve` / `reject` | 驳回原因 |
|
|
1480
|
+
| `upload` | 文件上传 | `submit` | `{ fileId, fileName }` |
|
|
1481
|
+
| `image` | 图片选择 | `select` / `reject` | 图片索引 |
|
|
1482
|
+
| `auth` | 授权请求 | `authorized` / `skip` | — |
|
|
1483
|
+
| `captcha` | 人机验证 | `verified` | `"captcha_token"` |
|
|
1484
|
+
| `decision` | 流程分支 | `decide` | `"retry"` 等 |
|
|
1485
|
+
| `rating` | 评分 | `rate` | `4` |
|
|
1486
|
+
| `date` | 日期选择 | `submit` | `"2026-08-21T14:00:00"` |
|
|
1487
|
+
| `location` | 位置选择 | `submit` | `{ address, lat, lng }` |
|
|
1403
1488
|
|
|
1404
1489
|
> `form` 的字段定义见 `FormField`(`types.ts`):`type` 支持 `text` / `number` / `password` / `textarea` / `select` / `multiSelect` / `date`;`options` 支持字符串数组或 `{ value, label }` 数组。已回答的历史 interrupt 以禁用态回显用户答案。
|
|
1405
1490
|
|
|
@@ -1461,7 +1546,10 @@ interface UseChatReturn {
|
|
|
1461
1546
|
stop: () => void;
|
|
1462
1547
|
regenerate: () => void;
|
|
1463
1548
|
setMessages: (messages: UIMessage[]) => void;
|
|
1464
|
-
respondToInterrupt: (
|
|
1549
|
+
respondToInterrupt: (
|
|
1550
|
+
interruptId: string,
|
|
1551
|
+
response: InterruptResponse,
|
|
1552
|
+
) => void;
|
|
1465
1553
|
}
|
|
1466
1554
|
```
|
|
1467
1555
|
|