@blade-hq/agent-react 2610.0.0-beta.8 → 2610.0.0-beta.81
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 +313 -8
- package/dist/chunk-G3PMV62Z.js +36 -0
- package/dist/components/AgentChat.d.ts +3 -0
- package/dist/components/AgentLoopBlock.d.ts +3 -5
- package/dist/components/AgentTaskCard.d.ts +12 -0
- package/dist/components/AskUserQuestionBlock.d.ts +12 -1
- package/dist/components/AssistantTurnBlock.d.ts +26 -8
- package/dist/components/ChatInput.d.ts +21 -1
- package/dist/components/ChatSurface.d.ts +133 -2
- package/dist/components/ChatView.d.ts +1 -1
- package/dist/components/ConnectorPanel.d.ts +41 -0
- package/dist/components/ContextCard.d.ts +20 -0
- package/dist/components/MarkdownContent.d.ts +17 -0
- package/dist/components/McpAppCard.d.ts +14 -0
- package/dist/components/MessageList.d.ts +38 -4
- package/dist/components/PlanUpdateBlock.d.ts +32 -0
- package/dist/components/PluginConnectorList.d.ts +47 -0
- package/dist/components/PluginTriggerStack.d.ts +22 -0
- package/dist/components/PostChatFollowupBlock.d.ts +5 -1
- package/dist/components/SessionMemoryToggle.d.ts +19 -0
- package/dist/components/SessionPluginConfigDialog.d.ts +10 -0
- package/dist/components/SessionPluginConfigForm.d.ts +14 -0
- package/dist/components/SessionPluginIcon.d.ts +30 -0
- package/dist/components/SessionPluginSelector.d.ts +10 -0
- package/dist/components/SessionQueuePanel.d.ts +74 -0
- package/dist/components/ToolCallBlock.d.ts +9 -3
- package/dist/components/ToolUiCardView.d.ts +9 -0
- package/dist/components/TurnNavRail.d.ts +23 -0
- package/dist/components/UserMessageBubble.d.ts +7 -3
- package/dist/components/WhatIfUserBubble.d.ts +7 -0
- package/dist/components/connector-panel-types.d.ts +37 -0
- package/dist/components/display-utils.d.ts +10 -0
- package/dist/components/markdown/heal-incomplete.d.ts +7 -0
- package/dist/components/markdown/incremental.d.ts +73 -0
- package/dist/components/markdown/index.d.ts +18 -0
- package/dist/components/markdown/parse.d.ts +19 -0
- package/dist/components/markdown/render.d.ts +79 -0
- package/dist/components/markdown/sanitize.d.ts +50 -0
- package/dist/components/markdown/types.d.ts +53 -0
- package/dist/components/plugin-config-draft.d.ts +13 -0
- package/dist/components/plugin-config-schema.d.ts +6 -0
- package/dist/components/plugin-connector.d.ts +40 -0
- package/dist/components/queue-panel-adjacency.d.ts +1 -0
- package/dist/components/use-session-plugin-activation.d.ts +40 -0
- package/dist/context.d.ts +1 -0
- package/dist/embed/blade-chat-element.d.ts +4 -3
- package/dist/embed/entry.d.ts +50 -0
- package/dist/hooks/use-agent-session.d.ts +5 -0
- package/dist/hooks/use-message-pin.d.ts +28 -0
- package/dist/hooks/use-turn-navigation.d.ts +117 -0
- package/dist/hooks/use-typewriter-reveal.d.ts +32 -0
- package/dist/index.d.ts +53 -1
- package/dist/index.js +58276 -2243
- package/dist/index.js.map +1 -1
- package/dist/lib/agent-computer-command.d.ts +34 -0
- package/dist/lib/random-id.d.ts +10 -0
- package/dist/lib/utils.d.ts +17 -2
- package/dist/lib/whatif-prompt.d.ts +18 -0
- package/dist/style.css +506 -401
- package/dist/style.full.css +517 -405
- package/dist/webapi-W3IB5DO4.js +2481 -0
- package/dist/webapi-W3IB5DO4.js.map +1 -0
- package/package.json +2 -2
- package/public-api.md +1762 -67
- package/dist/chunk-ZXXLY4RM.js +0 -28255
- package/dist/chunk-ZXXLY4RM.js.map +0 -1
- package/dist/highlighted-body-B3W2YXNL-YD7FAP6V.js +0 -27
- package/dist/highlighted-body-B3W2YXNL-YD7FAP6V.js.map +0 -1
- package/dist/mermaid-3ZIDBTTL-N7YKJ3SM.js +0 -8
- /package/dist/{mermaid-3ZIDBTTL-N7YKJ3SM.js.map → chunk-G3PMV62Z.js.map} +0 -0
package/README.md
CHANGED
|
@@ -6,6 +6,10 @@ Blade Agent 的 React 绑定:`BladeProvider` + `useAgentSession` + 开箱即
|
|
|
6
6
|
pnpm add @blade-hq/agent-client @blade-hq/agent-react
|
|
7
7
|
```
|
|
8
8
|
|
|
9
|
+
默认装到的是当前长期支持版(LTS),厂内离线交付按它开发。要跟两周一发的公网版本,改用 `@next`。
|
|
10
|
+
|
|
11
|
+
最稳妥的做法是先读目标 Server 的 `GET /api/version`,按返回的版本号在 `package.json` 里钉死——NPM 的 `latest` 不一定和目标环境跑的版本一致。
|
|
12
|
+
|
|
9
13
|
> 注意两个包都要装:`agent-client` 是运行时依赖,只装 `agent-react` 在 pnpm 下会直接报错。
|
|
10
14
|
|
|
11
15
|
## 快速开始
|
|
@@ -28,7 +32,6 @@ export function App() {
|
|
|
28
32
|
|
|
29
33
|
- 不传 `sessionId` 自动创建新会话;未登录时 `ChatView` 自己渲染登录按钮(弹窗授权,见 agent-client 的 `client.auth.login()`)。
|
|
30
34
|
- 同一 `BladeProvider` 下可以放多个 `ChatView`,各自独立会话、互不干扰。
|
|
31
|
-
- 宿主只需要完成态消息时,可在 `BladeClient` 构造参数中传 `streamTokens: false`,不订阅逐 token 增量。
|
|
32
35
|
|
|
33
36
|
## BladeProvider
|
|
34
37
|
|
|
@@ -54,6 +57,7 @@ const client = useBladeClient() // 当前 Provider 的 BladeClient
|
|
|
54
57
|
const { session, state, error } = useAgentSession(sessionId, {
|
|
55
58
|
createOptions, // 不传 sessionId 时的建会话配置(UseAgentSessionOptions)
|
|
56
59
|
onSessionCreated: (id) => saveSomewhere(id),
|
|
60
|
+
onSessionConnected: (session) => session.on("toolResult", handleResult),
|
|
57
61
|
})
|
|
58
62
|
|
|
59
63
|
state?.messages // ChatMessage[],直接渲染
|
|
@@ -67,8 +71,29 @@ await session?.send("你好")
|
|
|
67
71
|
|
|
68
72
|
- 优先级:`sessionId`(连接既有会话)> `createOptions`(按配置新建)> 默认新建。
|
|
69
73
|
- 自动创建只发生一次(含 React StrictMode 双跑);创建出的 id 通过 `onSessionCreated` 交还,重挂载时把它作为 `sessionId` 传回即可复用会话。
|
|
74
|
+
- 必须覆盖连接窗口内事件时,用 `onSessionConnected` 在历史加载和房间订阅开始前完成订阅,并返回取消订阅函数。
|
|
70
75
|
- 同一 `sessionId` 的多次调用复用同一 `AgentSession` 实例(引用计数);卸载后延迟释放,路由抖动不会断连。
|
|
71
76
|
|
|
77
|
+
## SessionMemoryToggle
|
|
78
|
+
|
|
79
|
+
把当前会话是否使用记忆放进宿主自己的会话设置面板:
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
const [memoryEnabled, setMemoryEnabled] = useState(session.memory_enabled !== false)
|
|
83
|
+
|
|
84
|
+
<SessionMemoryToggle
|
|
85
|
+
sessionId={session.id}
|
|
86
|
+
enabled={memoryEnabled}
|
|
87
|
+
onSaved={(_sessionId, enabled) => setMemoryEnabled(enabled)}
|
|
88
|
+
onError={(error) => toast.error(String(error))}
|
|
89
|
+
/>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
组件默认使用 `BladeProvider` 的 client;已有独立 client 装配层的宿主也可以显式传
|
|
93
|
+
`client={client}`。同一 client、同一会话的多个开关共享保存锁,即使切换会话或同时存在多个
|
|
94
|
+
设置入口,也不会并发提交相互覆盖。服务端确认后的权威值通过 `onSaved` 返回。
|
|
95
|
+
全部属性见 `SessionMemoryToggleProps`。
|
|
96
|
+
|
|
72
97
|
## useReplay
|
|
73
98
|
|
|
74
99
|
会话回放(演示 / 彩排):拿一个已经聊完的会话当素材,重现当时的回复和工具调用,
|
|
@@ -133,6 +158,9 @@ await replay.exitToAutonomous() // 退出回放,之后真的运
|
|
|
133
158
|
|
|
134
159
|
完整聊天界面:消息列表(Markdown、代码高亮、工具调用、提问卡片)+ 输入框 + 连接状态条 + 登录引导。
|
|
135
160
|
|
|
161
|
+
`ChatView` 固定使用普通展示模式。产品内置 Web 的精简/开发者模式不属于 SDK 公共能力,
|
|
162
|
+
因此没有 `renderMode` 等切换属性。
|
|
163
|
+
|
|
136
164
|
```tsx
|
|
137
165
|
<ChatView
|
|
138
166
|
sessionId={id} // 可选;不传自动建会话
|
|
@@ -150,11 +178,24 @@ await replay.exitToAutonomous() // 退出回放,之后真的运
|
|
|
150
178
|
|
|
151
179
|
全部 props 见 `ChatViewProps`。样式说明:
|
|
152
180
|
|
|
153
|
-
`
|
|
181
|
+
智能体调用 `update_plan` 新增或更新任务时,`ChatView` 会在输入框上方自动展开最新任务进度,
|
|
182
|
+
5 秒后平滑收起;连续更新会重新计时,用户手动展开或收起后以用户选择为准。自建聊天布局可直接
|
|
183
|
+
使用 `CurrentPlanPanel` / `PlanUpdateBlock`,或用 `getPlanUpdateDisplayState`、
|
|
184
|
+
`parsePlanUpdate` 和 `pickCurrentPlanStep` 复用同一套判定。
|
|
185
|
+
|
|
186
|
+
`ChatView` 的普通展示模式不显示只供诊断的项目说明、可用能力和当前工作环境。需要自建诊断界面时,可直接使用独立的 `ContextCard`,属性见 `ContextCardProps`;状态到文案的映射来自 agent-client 的 `getContextDisplayState`,不需要接入方重复判断。一次输入通常会同时注入十几项上下文,把渲染序列里连续的几项用 `ContextGroupCard`(属性见 `ContextGroupCardProps`)折成一行更合适;哪几项算一组由 agent-client 的 `groupAdjacentContextRuns` 判定,折叠行文案来自 `getContextGroupDisplayState` / `ContextGroupDisplayState`。底层数据类型为 `ContextProjectionData` / `ContextProjectionFields`,展示结果为 `ContextDisplayState`,并保留 `ContextAction`、`ContextSourceInfo` 和 `contextProjectionData` 给 headless 消费方。
|
|
187
|
+
|
|
188
|
+
记忆引用提示可通过 `MemoryRefsHint` 展示,`collectMemoryRefs` 用于从一轮消息中聚合引用,保证宿主自定义消息布局与 SDK 默认界面保持一致。
|
|
189
|
+
|
|
190
|
+
MCP App 卡片(`tool_ui` block)在默认消息流里自动渲染,无需配置;自建消息布局时可用 `ToolUiCardView` 渲染单个卡片,并传入 `sessionId` 启用共享 AppBridge。卡片的实例、内容解析与终态(archived 留档不重放)判定来自 agent-client 的共享层(`collectInlineToolUiCards` / `resolveToolUiCardContent` 等)。preview 卡片不进消息流,由 `toolPreview` 事件推给宿主自建面板。
|
|
191
|
+
|
|
192
|
+
`onFollowupInteraction` 使用 `FollowupInteractionEvent`,覆盖下一步建议展示/采纳、成果展示/打开/下载以及结果评分。SDK 不内置分析服务;宿主回调抛错也不会中断用户点击或下载。
|
|
193
|
+
文件成果以文件名为文本的标准下载链接展示;Vue / 纯 HTML 使用的 `<blade-chat>` 与 `ChatView` 行为一致。
|
|
154
194
|
|
|
155
195
|
- 必须引入一份样式,按宿主有没有 Tailwind 二选一:
|
|
156
|
-
- **`style.full.css
|
|
157
|
-
- **`style.css
|
|
196
|
+
- **`style.full.css`**(默认选它):CSS 变量、容器查询、Markdown 排版等兜底 + 编译好的 Tailwind 产物,自包含,宿主没装 Tailwind 也是完整视觉。
|
|
197
|
+
- **`style.css`**:只有兜底那部分(Tailwind 类表达不了的规则)。宿主自己装了 Tailwind、且 `content` 配了扫描 `node_modules/@blade-hq/agent-react` 时用它,可以少一份重复 CSS。选错不会报错,只是布局、配色、工具块和思考块会退化成裸 HTML——组件的视觉本来就只定义一次,都在它的 Tailwind 类上。
|
|
198
|
+
- 两份都用同一套层序 `@layer properties, theme, base, components, utilities, blade-chat-overrides;`(在 `src/scoped-preflight.css` 里声明一次;`properties` 是 Tailwind 的 `--tw-*` 初始值层,必须排在最前)。兜底规则在 `components` 层;Tailwind 工具类在 `utilities` 层;SDK 里那几条**必须压过自己工具类**的规则(窄容器里放宽用户消息、移动端聚焦不缩放、Markdown 与代码块排版)在最后一层 `blade-chat-overrides`(名字带 SDK 前缀,避免宿主已有的同名层把全局层序定到别处)——放进 `components` 会被同元素的工具类盖掉,等于没写。**宿主写的普通 CSS 不分层,按层序赢过这里所有层,与加载顺序无关,也不需要 `!important`**:这是「接入方覆盖必胜」的实现方式,改 `src/style.css` 时不要把规则挪出这两层。
|
|
158
199
|
- 两份都不含 Tailwind preflight 这类全局 reset,引入后不会影响宿主页面自己的排版;组件需要的那点重置限定在 `.blade-chat` 子树内(见 `src/scoped-preflight.css`)。Shadow DOM 版(`<blade-chat>`)不受此限,它注入的是带 preflight 的完整产物。
|
|
159
200
|
- 颜色走 CSS 变量,可整体换肤;深色页面要在根元素上写 `data-theme="dark"`,否则拿到的是默认的浅色变量。
|
|
160
201
|
- `renderers.toolCall` 返回 `null` 时回落到默认工具卡片。
|
|
@@ -170,6 +211,9 @@ Blade。这时把 `ChatView` 切到 `mode="llm"`,或者直接用下层的 `Llm
|
|
|
170
211
|
<ChatView mode="llm" llm={{ baseURL: "/api/llm", model }} /> // 切成纯 LLM
|
|
171
212
|
<LlmChat baseURL="/api/llm" model={model} /> // 或者直接用(LlmChatProps)
|
|
172
213
|
<AgentChat sessionId={id} /> // 智能体那侧同样可以直接用(AgentChatProps)
|
|
214
|
+
|
|
215
|
+
`AgentChat` 还支持 `sessionPluginControls(sessionId)` 插槽,宿主可复用
|
|
216
|
+
`@blade-hq/agent-client` 的会话插件状态与激活控制。
|
|
173
217
|
```
|
|
174
218
|
|
|
175
219
|
**协议就是 OpenAI 的**:`POST {baseURL}/chat/completions`,`stream: true`,读
|
|
@@ -261,6 +305,43 @@ models.filter((m) => m.serviceModelId)
|
|
|
261
305
|
<MarkdownContent sessionId={sessionId}>{markdownText}</MarkdownContent>
|
|
262
306
|
```
|
|
263
307
|
|
|
308
|
+
`normalizeAdjacentUrlFormatting` 可在复用其他 Markdown 渲染器前,保护紧贴行内格式标记的 URL。
|
|
309
|
+
|
|
310
|
+
## Canonical 引用消息
|
|
311
|
+
|
|
312
|
+
`ChatView` 会自动识别 ship-attack 会话中的 `[引用]` / `[用户输入]` canonical
|
|
313
|
+
消息,并按原顺序展示引用来源、快照和用户输入。自建消息列表时可用
|
|
314
|
+
`parseWhatIfPrompt` 解析同一格式,再交给 `WhatIfUserBubble` 渲染;
|
|
315
|
+
`onQuoteClick` 可接入宿主的步骤跳转。
|
|
316
|
+
|
|
317
|
+
```tsx
|
|
318
|
+
const parsed = parseWhatIfPrompt(messageText)
|
|
319
|
+
return parsed ? (
|
|
320
|
+
<WhatIfUserBubble parsed={parsed} onQuoteClick={jumpToStep} />
|
|
321
|
+
) : null
|
|
322
|
+
```
|
|
323
|
+
|
|
324
|
+
## isAgentComputerCommand / isAgentComputerToolCall / classifyAgentComputerLaunchOutcome
|
|
325
|
+
|
|
326
|
+
判断智能体是否在沙盒里启动了通用 GUI 应用镜像(`computer launch`)——后端 blade-agent 通过 `computer` CLI 驱动一块虚拟屏幕运行任意 GUI 软件,这些函数用于自行接入方判断要不要展示对应的实时画面入口(比如自建一个类似「电脑镜像」的标签页)。当前 SDK 侧还没有内置这块 UI,只导出判定规则,避免各接入方重新猜一遍匹配逻辑。
|
|
327
|
+
|
|
328
|
+
`isAgentComputerCommand`/`isAgentComputerToolCall` 只回答"这条命令是不是一次 launch 尝试",不回答"这次 launch 最终成不成功"——待处理、已失败的 launch 也会命中。要判断真实结果(比如决定要不要展示画面入口),用 `classifyAgentComputerLaunchOutcome`:它会解析工具调用的 `status`/`result`,返回 `"pending" | "succeeded" | "failed" | "unknown"`。`"unknown"` 表示 `status` 已经是终态但 `result` 字段本身缺失(常见于会话整理/compaction 之后的历史投影,归档时不会重新序列化完整 result),跟"result 回来了、里面确实没有成功标记"的 `"failed"` 是两种不同性质的证据——接入方要按自己的场景决定怎么处理(展示类场景可以偏宽松,当作足够展示;自动跳转/替用户做决定的场景应该偏保守,当作跟 `"failed"` 一样处理)。
|
|
329
|
+
|
|
330
|
+
```ts
|
|
331
|
+
import {
|
|
332
|
+
isAgentComputerCommand,
|
|
333
|
+
isAgentComputerToolCall,
|
|
334
|
+
classifyAgentComputerLaunchOutcome,
|
|
335
|
+
} from "@blade-hq/agent-react"
|
|
336
|
+
|
|
337
|
+
isAgentComputerCommand("computer launch --exec /opt/apps/foo/bar") // true
|
|
338
|
+
isAgentComputerCommand("computer status") // false(只认 launch,不认查询类子命令)
|
|
339
|
+
|
|
340
|
+
isAgentComputerToolCall(toolCall.arguments) // 工具调用的 JSON 参数版本
|
|
341
|
+
|
|
342
|
+
classifyAgentComputerLaunchOutcome(toolCall) // "pending" | "succeeded" | "failed" | "unknown"
|
|
343
|
+
```
|
|
344
|
+
|
|
264
345
|
## 选择模型
|
|
265
346
|
|
|
266
347
|
SDK 的 ChatView / `<blade-chat>` 不内置模型选择器(默认用后端配置的模型)。指定模型有两种方式:
|
|
@@ -277,15 +358,28 @@ SDK 的 ChatView / `<blade-chat>` 不内置模型选择器(默认用后端配
|
|
|
277
358
|
|
|
278
359
|
1. **深浅主题**:`<ChatView theme="dark" />` / `<blade-chat theme="dark">` 切内置深色,不传或 `"light"` 为浅色。宿主已经在祖先元素上写了 `data-theme="dark"` 时不用传,`ChatView` 会跟着变。`<blade-chat>` 渲染在 Shadow DOM 内,页面上的 `data-theme` 对它无效,只认 `theme` 属性。
|
|
279
360
|
|
|
280
|
-
2. **CSS 变量换肤**(React 与 `<blade-chat>` 通用):所有颜色走 `--primary`、`--background`、`--muted`
|
|
361
|
+
2. **CSS 变量换肤**(React 与 `<blade-chat>` 通用):所有颜色走 `--primary`、`--background`、`--muted` 等变量(完整清单见下面的「CSS 变量清单」,默认值在 style.css 开头)。页面直接覆盖即可穿透 Shadow DOM:
|
|
281
362
|
|
|
282
363
|
```css
|
|
283
364
|
blade-chat { --primary: 262 83% 58%; height: 640px; }
|
|
284
365
|
```
|
|
285
366
|
|
|
286
|
-
3. **classNames props**(React):`ChatView` 的 `classNames` 把自定义 class(含你自己构建的 Tailwind
|
|
367
|
+
3. **classNames props**(React):`ChatView` 的 `classNames` 把自定义 class(含你自己构建的 Tailwind 工具类)挂到各个区块上,见 `ChatViewClassNames`。SDK 内部用 `cn`(clsx + tailwind-merge)拼接,你传的类在最后一个参数,所以 `classNames={{ chatInput: "p-0" }}` 会直接盖掉组件内部的 `py-3`,与 CSS 加载顺序无关:
|
|
368
|
+
|
|
369
|
+
```tsx
|
|
370
|
+
<ChatView
|
|
371
|
+
sessionId={id}
|
|
372
|
+
classNames={{
|
|
373
|
+
root: "h-[640px] rounded-2xl border",
|
|
374
|
+
userBubble: "bg-sky-100 text-sky-900",
|
|
375
|
+
assistantText: "text-[15px] leading-7",
|
|
376
|
+
chatInput: "px-2",
|
|
377
|
+
inputInner: "bg-white shadow-sm",
|
|
378
|
+
}}
|
|
379
|
+
/>
|
|
380
|
+
```
|
|
287
381
|
|
|
288
|
-
4. **内嵌 `<style
|
|
382
|
+
4. **内嵌 `<style>` 与 `::part`(纯 HTML / Vue)**:`<blade-chat>` 的直接 `<style>` 子元素会被注入 Shadow DOM、排在内置样式之后,可用 `.blade-chat-*` 类名做任意深度定制;每个主要区块同时带一个与锚点同名的 `part`(`blade-chat-user-bubble` → `part="user-bubble"`),页面外层用 `::part()` 也能选到它:
|
|
289
383
|
|
|
290
384
|
```html
|
|
291
385
|
<blade-chat base-url="...">
|
|
@@ -296,12 +390,223 @@ blade-chat { --primary: 262 83% 58%; height: 640px; }
|
|
|
296
390
|
</blade-chat>
|
|
297
391
|
```
|
|
298
392
|
|
|
393
|
+
```css
|
|
394
|
+
blade-chat::part(user-bubble) { background: #eef2ff; }
|
|
395
|
+
blade-chat::part(input-toolbar) { gap: 12px; }
|
|
396
|
+
```
|
|
397
|
+
|
|
398
|
+
### classNames 覆盖哪些区块
|
|
399
|
+
|
|
400
|
+
区块与锚点一一对应(键名 = 锚点名去掉 `blade-chat-` 前缀):
|
|
401
|
+
|
|
402
|
+
| `classNames` 键 | 锚点 | 落点 |
|
|
403
|
+
| --- | --- | --- |
|
|
404
|
+
| `root` | `.blade-chat` | 聊天根容器 |
|
|
405
|
+
| `banner` | `.blade-chat-banner` | 连接状态条 |
|
|
406
|
+
| `errorBar` | `.blade-chat-error-bar` | 顶部出错条 |
|
|
407
|
+
| `messageList` | `.blade-chat-messages` | 消息区 |
|
|
408
|
+
| `messagesScroll` | `.blade-chat-messages-scroll` | 消息区滚动内容(内边距) |
|
|
409
|
+
| `messagesContent` | `.blade-chat-messages-content` | 消息内容列(居中、最大宽度) |
|
|
410
|
+
| `empty` | `.blade-chat-empty` | 空状态 |
|
|
411
|
+
| `scrollToBottom` | `.blade-chat-scroll-bottom` | 「滚动到底部」按钮 |
|
|
412
|
+
| `userMessage` | `.blade-chat-user-row` | 用户消息行 |
|
|
413
|
+
| `userBubble` | `.blade-chat-user-bubble` | 用户气泡 |
|
|
414
|
+
| `fileCard` | `.blade-chat-file-card` | 消息里的文件附件 |
|
|
415
|
+
| `errorMessage` | `.blade-chat-error-row` | 消息流里的出错块 |
|
|
416
|
+
| `assistantTurn` | `.blade-chat-assistant-turn` | 一轮助手回复 |
|
|
417
|
+
| `thinking` | `.blade-chat-thinking` | 思考过程 |
|
|
418
|
+
| `assistantText` | `.blade-chat-assistant-text` | 助手正文 |
|
|
419
|
+
| `memoryRefs` | `.blade-chat-memory-refs` | 记忆引用 |
|
|
420
|
+
| `toolRow` | `.blade-chat-tool-row` | 执行过程里的工具行(智能体模式下工具调用都走这条路径) |
|
|
421
|
+
| `agentLoop` | `.blade-chat-agent-loop` | 子智能体行 |
|
|
422
|
+
| `askCard` | `.blade-chat-ask-card` | 提问卡 |
|
|
423
|
+
| `askOption` | `.blade-chat-ask-option` | 提问卡的每个选项 |
|
|
424
|
+
| `planPanel` | `.blade-chat-plan` | 输入框上方的计划面板 |
|
|
425
|
+
| `queuePanel` | `.blade-chat-queue` | 会话队列面板 |
|
|
426
|
+
| `followup` | `.blade-chat-followup` | 本轮小结与跟进区 |
|
|
427
|
+
| `followupAction` | `.blade-chat-followup-action` | 跟进建议按钮 |
|
|
428
|
+
| `chatInput` | `.blade-chat-input` | 输入区外层 |
|
|
429
|
+
| `inputInner` | `.blade-chat-input-inner` | 输入框卡片(边框、圆角、底色) |
|
|
430
|
+
| `textarea` | `.blade-chat-textarea` | 输入框 |
|
|
431
|
+
| `inputToolbar` | `.blade-chat-input-toolbar` | 输入框右侧按钮组 |
|
|
432
|
+
|
|
433
|
+
同一批锚点也是普通 CSS 的抓手:锚点只负责「可被选中」,视觉规则不在它身上,所以对你的锚点写 `.blade-chat-user-bubble { ... }` 不会被 SDK 的样式盖掉(SDK 的规则都在 `@layer components` / `@layer blade-chat-overrides`,Tailwind 工具类在 `@layer utilities`,你的样式不分层,按 CSS 层序本来就赢)。
|
|
434
|
+
|
|
435
|
+
### 锚点清单
|
|
436
|
+
|
|
437
|
+
每个可见区块的根元素都固定带一个 `blade-chat-*` 类,构成公开契约(`src/style.css` 顶部的登记块是唯一来源,构建会校验它和组件源码、三份 CSS 产物一致):
|
|
438
|
+
|
|
439
|
+
| 区块 | 锚点 |
|
|
440
|
+
| --- | --- |
|
|
441
|
+
| 聊天根容器 | `.blade-chat` |
|
|
442
|
+
| 登录引导 / 连接状态条 / 出错条 / 回放条 | `.blade-chat-login`、`.blade-chat-banner`、`.blade-chat-error-bar`、`.blade-chat-replay-bar` |
|
|
443
|
+
| 消息区 | `.blade-chat-messages`、`.blade-chat-messages-scroll`、`.blade-chat-messages-content`、`.blade-chat-empty`、`.blade-chat-scroll-bottom`、`.blade-chat-scroll-bottom-label` |
|
|
444
|
+
| 用户消息 | `.blade-chat-user-row`、`.blade-chat-user-col`、`.blade-chat-user-bubble`、`.blade-chat-file-card`(+ `-icon` / `-name`) |
|
|
445
|
+
| 助手回复 | `.blade-chat-assistant-turn`、`.blade-chat-assistant-text`、`.blade-chat-thinking`、`.blade-chat-memory-refs`、`.blade-chat-render-error` |
|
|
446
|
+
| 工具调用 | `.blade-chat-tool-row`(执行过程里的工具行)、`.blade-chat-agent-loop`(子智能体行) |
|
|
447
|
+
| 提问卡 | `.blade-chat-ask-card`、`.blade-chat-ask-option` |
|
|
448
|
+
| 计划与队列 | `.blade-chat-plan`、`.blade-chat-plan-block`、`.blade-chat-queue`、`.blade-chat-queue-item`、`.blade-chat-queue-notice` |
|
|
449
|
+
| 跟进区 | `.blade-chat-followup`、`.blade-chat-followup-action` |
|
|
450
|
+
| 输入区 | `.blade-chat-input`、`.blade-chat-input-inner`、`.blade-chat-textarea`、`.blade-chat-input-toolbar` |
|
|
451
|
+
| 上下文卡片 | `.blade-chat-context-card`、`.blade-chat-context-summary`、`.blade-chat-context-icon`、`.blade-chat-context-copy`、`.blade-chat-context-title`、`.blade-chat-context-status`、`.blade-chat-context-chevron`、`.blade-chat-context-detail`、`.blade-chat-context-group-items` |
|
|
452
|
+
| Markdown 与代码块 | `.blade-chat-markdown`、`.blade-chat-prose`、`.blade-chat-codeblock`、`.blade-chat-codeblock-header`、`.blade-chat-codeblock-body` |
|
|
453
|
+
| 其他 | `.blade-chat-host`(`<blade-chat>` 内的挂载点)、`.blade-chat-advanced`、`.blade-chat-mcp-app`、`.blade-chat-error-row`、`.blade-chat-error-block` |
|
|
454
|
+
|
|
455
|
+
### part 清单(`<blade-chat>` 的 Shadow DOM 专用)
|
|
456
|
+
|
|
457
|
+
Shadow DOM 把上面的类名挡在页面之外,所以**主要区块**额外带一个与锚点同名的 `part`(去掉 `blade-chat-` 前缀;根容器的锚点是 `blade-chat`,约定用 `root`),页面外层用 `::part()` 选:
|
|
458
|
+
|
|
459
|
+
```css
|
|
460
|
+
blade-chat::part(user-bubble) { background: #eef2ff; }
|
|
461
|
+
blade-chat::part(input-toolbar) { gap: 12px; }
|
|
462
|
+
```
|
|
463
|
+
|
|
464
|
+
清单(`src` 里每一处 `part` 都由构建校验,必须能对回锚点清单):
|
|
465
|
+
|
|
466
|
+
| 分组 | part |
|
|
467
|
+
| --- | --- |
|
|
468
|
+
| 容器与状态 | `root`、`banner`、`error-bar`、`replay-bar`、`mcp-app` |
|
|
469
|
+
| 消息区 | `messages`、`messages-scroll`、`messages-content`、`empty`、`scroll-bottom` |
|
|
470
|
+
| 用户消息 | `user-row`、`user-bubble`、`file-card`、`error-row` |
|
|
471
|
+
| 助手回复 | `assistant-turn`、`assistant-text`、`thinking`、`memory-refs` |
|
|
472
|
+
| 工具与提问 | `tool-row`、`agent-loop`、`ask-card`、`ask-option` |
|
|
473
|
+
| 计划与队列 | `plan`、`plan-block`、`queue` |
|
|
474
|
+
| 跟进区 | `followup`、`followup-action` |
|
|
475
|
+
| 输入区 | `input`、`input-inner`、`textarea`、`input-toolbar` |
|
|
476
|
+
|
|
477
|
+
外围区块(`.blade-chat-context-*`、`.blade-chat-codeblock-*` 等)只有类名锚点,React 下可以直接选;`<blade-chat>` 下要改它们得用第 4 层的内嵌 `<style>`(那段样式就注入在 Shadow DOM 里)。
|
|
478
|
+
|
|
479
|
+
### CSS 变量清单
|
|
480
|
+
|
|
481
|
+
颜色是 `hsl()` 的三个分量(形如 `223 100% 54%`),几何是长度值。宿主盖掉这些变量即可整体换肤(React 下写在 `.blade-chat` 或祖先元素上;`<blade-chat>` 下写在元素上,变量能穿透 Shadow DOM):
|
|
482
|
+
|
|
483
|
+
| 分组 | 变量 |
|
|
484
|
+
| --- | --- |
|
|
485
|
+
| 基础色 | `--background`、`--foreground`、`--card`、`--card-foreground`、`--popover`、`--popover-foreground` |
|
|
486
|
+
| 语义色 | `--primary`、`--primary-foreground`、`--muted`、`--muted-foreground`、`--accent`、`--accent-foreground`、`--destructive`、`--border`、`--ring` |
|
|
487
|
+
| 用户消息专用 | `--user-msg-bg`、`--user-msg-fg`、`--user-msg-border` |
|
|
488
|
+
| 布局(SDK 按容器宽度推导) | `--blade-chat-gutter`(消息区与输入区的左右留白)、`--blade-chat-turn-gap`(轮次间距)。两个变量声明在 `.blade-chat` 上,**设在祖先元素上不生效**(元素上的声明永远赢过继承值)。React 下直接对 `.blade-chat` 写规则,或用 `classNames.root` 传一个设该变量的工具类(如 `"[--blade-chat-gutter:2rem]"`);`<blade-chat>` 下用第 4 层的内嵌 `<style>` |
|
|
489
|
+
| 布局(接入方按需覆盖) | `--blade-chat-queue-gutter`(队列面板左右留白,默认跟随 gutter)、`--blade-chat-pin-spacer`(消息顶置的底部补白,组件自己写)、`--blade-chat-input-top-border`(输入区上边框,组件自己写) |
|
|
490
|
+
|
|
491
|
+
深色主题的变量挂在 `[data-theme="dark"]` 上,由 `theme` prop / 属性落到聊天根节点,整棵子树继承。
|
|
492
|
+
|
|
493
|
+
上面这些是**会改变 SDK 组件外观**的变量。另外随主题一起声明的还有 `--radius`、`--input`、`--destructive-foreground`:`agent-react` 的默认组件不消费它们(圆角走 Tailwind 自己的 `--radius-*`),宿主在聊天容器里自绘 UI 时可以直接用,改动它们不会影响 SDK 自带的界面。
|
|
494
|
+
|
|
495
|
+
### 区块级渲染器(renderers)
|
|
496
|
+
|
|
497
|
+
`classNames` 换不掉整个区块时用 `renderers`:每个渲染器拿到一个描述该区块的对象,返回 `ReactNode`;返回 `null` 走 SDK 默认渲染。
|
|
498
|
+
|
|
499
|
+
```tsx
|
|
500
|
+
<ChatView
|
|
501
|
+
sessionId={id}
|
|
502
|
+
renderers={{
|
|
503
|
+
toolCall: (toolCall) => <MyToolCard toolCall={toolCall} />,
|
|
504
|
+
userMessage: ({ message }) => <MyBubble message={message} />,
|
|
505
|
+
assistantText: ({ message, streaming, compact }) => (compact ? null : <MyMarkdown text={message.content} />),
|
|
506
|
+
askUserQuestion: ({ data, answered, onAnswer }) => <MyQuestions data={data} answered={answered} onAnswer={onAnswer} />,
|
|
507
|
+
planUpdate: ({ plan, running }) => <MyPlanSteps plan={plan} running={running} />,
|
|
508
|
+
}}
|
|
509
|
+
/>
|
|
510
|
+
```
|
|
511
|
+
|
|
512
|
+
- `toolCall`:`(toolCall: ToolCallInfo) => ReactNode | null`,见 `ToolCallRenderer`。
|
|
513
|
+
- `userMessage`:`UserMessageRendererProps`——只替换用户消息气泡,消息行(`.blade-chat-user-row`)与图片/文件附件仍由 SDK 渲染;消息顶置依赖那个行容器,替换掉它新消息就不会被顶到视口顶部。
|
|
514
|
+
- `assistantText`:`AssistantTextRendererProps`——只替换助手正文,思考块、工具卡、附件照旧。
|
|
515
|
+
- `askUserQuestion`:`AskUserQuestionRendererProps`——`data` 是 `AskUserQuestionData`,`onAnswer` 与默认卡片同一个回调契约;照常作答才算完成这次提问。**提问工具优先走这个渲染器**,只有没配它时才回落到 `toolCall`(避免 `toolCall` 先拿到提问、而它没有作答回调)。
|
|
516
|
+
- `planUpdate`:`PlanUpdateRendererProps`——`plan` 是最近一次成功 `update_plan` 的解析结果;还没有解析出计划时渲染器不会被调用,回落到默认面板的「正在更新任务进度…」。
|
|
517
|
+
|
|
518
|
+
## 自定义消息列表滚动
|
|
519
|
+
|
|
520
|
+
`ChatView`、`AgentChat` 和 `LlmChat` 已经处理好用户发言顶置,不用额外配置。自建消息列表时可用 `useMessagePin` 复用同一套触发、补白、视口 resize 和手动滚动接管逻辑;调用方只需提供滚动容器、目标消息与 spacer 的读写函数。完整参数见 [public-api.md](./public-api.md#usemessagepin-function)。
|
|
521
|
+
|
|
522
|
+
## 打字机式显示节流
|
|
523
|
+
|
|
524
|
+
`ChatView`、`AgentChat` 和 `LlmChat` 已经内置这套节流,不用额外配置。服务端到达速率天然不均匀(一次推 5 个字、一次推 20 个字),直接原样渲染会显得忽快忽慢;`useTypewriterReveal(targetText, isLive, resetKey)` 按估算到达速度、留一个很小的固定滞后量匀速播放,返回 `{ displayedText, isRevealing, flushNow }`——自建消息列表时可以直接复用。`isLive` 传 `false`(历史加载 / 回放)时永远整段直接显示;`resetKey`(比如消息的 `entry_id`)变化时播放状态从头开始;`flushNow()` 用于用户点了停止时立即整段显示已到达内容。完整参数见 [public-api.md](./public-api.md#usetypewriterreveal-function)。
|
|
525
|
+
|
|
526
|
+
## 长会话历史导航(useTurnNavigation / TurnNavRail)
|
|
527
|
+
|
|
528
|
+
`AgentChat` 已经内置这条轨道,不用额外配置:右侧刻度轨列出**整条会话**的用户发言(目录来自服务端
|
|
529
|
+
`/turn-index`,所以窗口外的旧发言也点得到),点已加载的发言直接滚动并短暂高亮,点窗口外的发言发
|
|
530
|
+
一次定位请求(服务端返回「从它到最新」的窗口)后滚动到目标。
|
|
531
|
+
|
|
532
|
+
自建聊天界面时用 `useTurnNavigation` 复用同一套时序(滚动 / 加载态 / 高亮):宿主提供
|
|
533
|
+
`TurnNavigationSource`(目录怎么来、定位怎么发、刷新信号)与 `getLoadedEntryElement` /
|
|
534
|
+
`revealEntry` / `beforeSeek` 三个列表侧回调(合起来就是 `TurnNavigationOptions`),返回
|
|
535
|
+
`TurnNavigationResult`(`items`、`loadingEntryId`、
|
|
536
|
+
`error`、`failedEntryId`、`activeEntryId`、`selectEntry`)。`TurnNavRail` 是配套的刻度轨组件
|
|
537
|
+
(`TurnNavRailProps`),样式与交互可直接用或照抄;定位高亮的类名是 `TURN_NAV_HIGHLIGHT_CLASS`。
|
|
538
|
+
目录刷新信号用 `latestUserSpeechEntryId(turns)` 计算——只认最新一条用户发言,往前翻页补进的更早
|
|
539
|
+
发言不该作废正在进行的定位;没有目录接口的会话(静态历史 / 分享页)用 `turnNavItemsFromMessages`
|
|
540
|
+
把已加载的窗口转成兜底条目。
|
|
541
|
+
|
|
299
542
|
## 纯静态 HTML / Vue?
|
|
300
543
|
|
|
301
544
|
不需要本包——用后端托管的单文件产物 `<script src=".../sdk/blade-agent.js">` + `<blade-chat>` 自定义元素,行为与 `ChatView` 一致;详见 agent-client README 与接入文档。
|
|
302
545
|
|
|
546
|
+
## 附录:连接器与插件选择
|
|
547
|
+
|
|
548
|
+
- **连接器面板**:`ConnectorPanel`、`ConnectorPanelProps`、`PluginConnectorList`、`PluginConnectorListProps`、`ConfiguringPlugin`
|
|
549
|
+
- **插件行与触发器**:`PluginConnectorItem`、`PluginConnectorSelection`、`selectionFromItem`、`triggerSummary`、`TriggerSummary`、`TRIGGER_ICON_LIMIT`、`mergeConnectorItems`、`catalogToConnectorItems`、`filterConnectorItems`
|
|
550
|
+
- **触发器上的头像堆叠**:`PluginTriggerStack`、`PluginTriggerStackProps`(前三枚插件头像 + `+N`,宿主自己画触发器时用它,不要另写一份折叠)
|
|
551
|
+
- **启用时序**:`useSessionPluginActivation`、`UseSessionPluginActivationResult`
|
|
552
|
+
|
|
303
553
|
## 附录:re-export 自 @blade-hq/agent-client
|
|
304
554
|
|
|
305
555
|
为方便单包引入,本包 re-export 了 agent-client 的全部公开声明(`BladeClient`、`AgentSession`、`SessionState`、协议类型等),文档一律见 [agent-client 的 README](../agent-client/README.md)。完整签名见 [public-api.md](./public-api.md)。
|
|
306
556
|
|
|
307
|
-
本包自有声明:`BladeProvider`、`BladeProviderProps`、`useBladeClient`、`useAgentSession`、`UseAgentSessionOptions`、`UseAgentSessionResult`、`useReplay`、`UseReplayResult`、`ReplayMismatch`、`ReplayBar`、`ReplayBarProps`、`ReplayMismatchPrompt`、`ReplayMismatchPromptProps`、`ChatView`、`ChatViewProps`、`ChatViewClassNames`、`ChatViewRenderers`、`ChatViewSlots`、`FollowupInteractionEvent`、`ToolCallRenderer`、`MarkdownContent`、`MarkdownContentProps`。
|
|
557
|
+
本包自有声明:`BladeProvider`、`BladeProviderProps`、`useBladeClient`、`useAgentSession`、`UseAgentSessionOptions`、`UseAgentSessionResult`、`useMessagePin`、`UseMessagePinOptions`、`useTypewriterReveal`、`UseTypewriterRevealResult`、`useReplay`、`UseReplayResult`、`ReplayMismatch`、`ReplayBar`、`ReplayBarProps`、`ReplayMismatchPrompt`、`ReplayMismatchPromptProps`、`ChatView`、`ChatViewProps`、`ChatViewClassNames`、`ChatViewRenderers`、`ChatViewSlots`、`FollowupInteractionEvent`、`ToolCallRenderer`、`CurrentPlanPanel`、`PlanUpdateBlock`、`PlanUpdateData`、`PlanUpdateDisplayState`、`PlanStepStatus`、`getPlanUpdateDisplayState`、`isPlanUpdateTool`、`parsePlanUpdate`、`pickCurrentPlanStep`、`PLAN_AUTO_COLLAPSE_MS`、`MarkdownContent`、`MarkdownContentProps`、`MarkdownRenderer`、`MarkdownRendererProps`、`MarkdownComponents`、`AllowedTags`、`DEFAULT_ALLOWED_TAGS`、`CodeBlockOverrides`、`LinkSafetyConfig`、`RawHtmlPlugin`、`parseWhatIfPrompt`、`ParsedWhatIfPrompt`、`WhatIfQuote`、`WhatIfUserBubble`、`WhatIfUserBubbleProps`、`SessionQueuePanel`、`SessionQueuePanelProps`、`isQueuePanelVisible`、`ExternalAnchor`、`stripSystemReminders`。
|
|
558
|
+
|
|
559
|
+
## 会话消息队列
|
|
560
|
+
|
|
561
|
+
智能体会话的等待消息由服务端持久化,`ChatView` / `AgentChat` 已在输入框上方渲染队列区域(空队列不占位,条目数超过三条可折叠)。输入框不再有「直接插入 / 排队执行」开关:会话空闲时提交直接开始处理,运行中提交默认入队;暂停时在面板上显示原因和「继续执行」。面板数据来自 `useAgentSession` 状态里的 `queue`(`SessionQueueSnapshot`),可编辑/删除/立即补充的判定来自 agent-client 的 `canEditQueuedMessage` / `canCancelQueuedMessage` / `canDeliverQueuedMessage`,文案用 `queuedMessageStatusLabel` / `queuePauseReasonLabel`。
|
|
562
|
+
|
|
563
|
+
自建布局可直接使用 `<SessionQueuePanel>`,属性类型为 `SessionQueuePanelProps`:传 `snapshot`、`canDeliver`、可选的 `pendingItemId`(提交中的条目禁用操作)与 `notice`(冲突/失败说明),以及 `onResume` / `onCancel` / `onEdit` / `onMove` / `onReorder` / `onDeliver` 回调。上移/下移与拖动排序最终都提交当前 pending 条目的完整 id 顺序。冲突时队列由服务端快照刷新,`ChatView` 会把未保存的正文放回输入框,不会静默丢掉用户编辑的内容。
|
|
564
|
+
|
|
565
|
+
面板比输入框窄一圈、贴在它上方,所以宽度必须跟输入框一致:用可选属性 `contentWidthClassName` 传入输入框内层的宽度类(不传则按本包输入框的 `max-w-[748px]`)。左右内边距同理——默认值对应本包输入框的 `--blade-chat-gutter`;如果你给输入框根节点换了左右 padding(例如改成 `px-10`),必须用 `rootClassName` 在面板根节点重设 `--blade-chat-queue-gutter` 成同一个值,否则面板会跟输入框错开一圈、在两者相接的缝上露出来。
|
|
566
|
+
|
|
567
|
+
输入框的 `mergesWithPanelAbove` 为 true 时上两角改直角,跟面板拼成一条完整轮廓;否则输入框的上角圆弧会从较窄的面板两侧露出来,形成两个尖角。**这个值要取面板上报的状态,不要在宿主侧用 `isQueuePanelVisible` 复算**:面板有本地编辑态(编辑到一半、那条等待消息被服务端拿走时仍要留在原地保住草稿,见 `detachedEdit`),这时 snapshot 里没有条目、宿主复算会得到 false,输入框就会在面板还显示着的时候把上角恢复成圆角。用 `onVisibleChange` 拿到面板的真实占位状态,再传给输入框或 `ChatSurface` 的 `queuePanelVisible`。本包的 `AgentChat` 已按这条接好,自建布局照做即可。
|
|
568
|
+
|
|
569
|
+
拼轮廓的前提是两者**真的相邻**。中间夹着别的内容时(本包的 MCP 暂存内容、内置 Web 的 `composerBanner`),面板下两角与输入框上两角都要圆起来——直角是"被对方接住"的表示,露出直角却中间空着一块,看起来像被削掉一角。面板的 `mergesWithInputBelow` 与输入框的 `mergesWithPanelAbove` 要取同一个判据;`ChatSurface` 会用 context 把这一位传给面板,自建布局直接传即可。
|
|
570
|
+
|
|
571
|
+
`PollingBackoff` 从 agent-client 重导出,供自定义只读轮询计算退避时间;它不发送或重放请求。用法见 [agent-client 轮询说明](../agent-client/README.md#只读轮询退避)。
|
|
572
|
+
|
|
573
|
+
### 会话插件
|
|
574
|
+
|
|
575
|
+
默认 `AgentChat` / 智能体模式 `ChatView` 自带会话插件选择器,展开时查询 BH,选择按当前会话保存。准备失败会保留勾选并提供重试。独立嵌入可使用 `<SessionPluginSelector client={client} sessionId={id} />`;`sessionPluginControls` 可覆盖默认控件。组件参数类型为 `SessionPluginSelectorProps`。
|
|
576
|
+
|
|
577
|
+
列表项用插件声明的业务名称与随包本地图标展示(`sessionPluginLabel(plugin)` 与 `<SessionPluginIcon client={client} sessionId={id} plugin={plugin} />`,两者都可单独复用,参数类型为 `SessionPluginLabelProps` / `SessionPluginIconProps`);没有声明或图标不可用时回退技术 ID 与通用占位。授权、缓存、调用一律仍用 `plugin.name`。
|
|
578
|
+
|
|
579
|
+
插件的账号、token 等配置由包内 JSON Schema 声明,选择器就地提供填写入口:首次激活缺配置的插件会直接弹出表单(`<SessionPluginConfigDialog client={client} sessionId={id} plugin={plugin} />`),已配置的插件在行内提供「配置」按钮。表单本体是 `<SessionPluginConfigForm>`,参数与提交类型为 `SessionPluginConfigFormProps` / `SessionPluginConfigDraft`,也可单独嵌入;`SessionPluginConfigDialogProps` 是对话框的参数类型。
|
|
580
|
+
|
|
581
|
+
表单只呈现它确定能呈现的 JSON Schema 构造(字符串/数值/布尔/null、对象与数组、枚举、`properties` 内的 `writeOnly`,以及用同一字段的 `const` 固定的 `oneOf` 分支);遇到无法安全呈现的写法直接说明原因,不降级成手写 JSON、不静默丢字段。`writeOnly` 字段永不回显:留空表示保持不变,输入表示修改,显式「清除」才会删除。
|
|
582
|
+
### 连接器面板
|
|
583
|
+
|
|
584
|
+
首页与对话输入框共用同一个连接器面板:`<ConnectorPanel client={client} sessionId={id} />`,
|
|
585
|
+
参数类型为 `ConnectorPanelProps`。面板本身只管插件分区,电脑与外部账号由宿主通过
|
|
586
|
+
`renderComputerSection` / `renderExternalAccounts` / `renderFooterActions` 注入——那些入口
|
|
587
|
+
要跳宿主自己的路由,SDK 不硬编码内部路径。`sessionId` 传 `null` 表示"首页":此时开关只记录
|
|
588
|
+
本次输入的待选(`PluginConnectorSelection`、`onPendingPluginsChange`),不激活任何东西、
|
|
589
|
+
不建会话、不启沙盒;`pendingDisabledReason` 用于说明该模式下为什么用不了待选。
|
|
590
|
+
|
|
591
|
+
插件行的渲染交给 `<PluginConnectorList>`(`PluginConnectorListProps`),它只负责样式与排版:
|
|
592
|
+
"该显示成什么"全部来自 `PluginConnectorItem`、`mergeConnectorItems`、`catalogToConnectorItems`、
|
|
593
|
+
`filterConnectorItems`,判定不各写一份。`sessionPluginLabel` 决定
|
|
594
|
+
一行读起来是什么名字。
|
|
595
|
+
|
|
596
|
+
启用时序由 `useSessionPluginActivation` 收口(返回值类型 `UseSessionPluginActivationResult`):
|
|
597
|
+
**先准备配置、再提交激活**。缺必填配置时开关不落到已启用、立刻弹表单,保存由服务端确认配置
|
|
598
|
+
完整才提交;取消、校验失败、读取失败都保持关闭,不会先写 `active=true` 再补偿。慢准备/慢激活
|
|
599
|
+
期间开关仍可点,语义是取消这次意图而不是再排一次队。配置弹窗由 `ConfiguringPlugin` 描述。
|
|
600
|
+
|
|
601
|
+
触发器要在不打开面板时就能显示"选了哪几个、几个":用 `selectionFromItem` 把一行转成
|
|
602
|
+
`PluginConnectorSelection`,再用 `triggerSummary` 折成 `TriggerSummary`(最多 `TRIGGER_ICON_LIMIT`
|
|
603
|
+
个图标,其余折成数量;没有图标 token 的项不占图标位但仍计数)。
|
|
604
|
+
|
|
605
|
+
### MCP Apps
|
|
606
|
+
|
|
607
|
+
`McpAppCard` 使用官方 AppBridge 渲染归档卡片,内置 Web 消费同一组件。在 `BladeProvider` 下传入会话 ID 与来源 ID,也可直接提供 `BladeClient`。`McpAppMessage` 表示 App 提供的文本;`McpAppMessageContext` 将其交给当前对话的待发送区。用户可在 `ChatView` 查看、移除并确认发送。`update-model-context` 会把 App 提交的当前状态经 `sessions.updateMcpAppContext` 存为会话上下文:只落库、不追加聊天、不启动 agent turn,正在运行的一轮保持启动时版本,下一个新的运行才读取;冲突(409)时重读最新 revision 后重提同一份状态一次。
|
|
608
|
+
|
|
609
|
+
|
|
610
|
+
### 子智能体卡片
|
|
611
|
+
|
|
612
|
+
`AgentTaskCard` 提供共享的可折叠子智能体卡片,`AgentTaskCardProps` 接受任务 `title`、`status`、最新动作 `activity` 和详情 `children`。`AgentTaskStatus` 包含 `running`、`waiting_input`、`completed`、`failed`、`cancelled`;进入 `waiting_input` 时自动展开,提示图标持续轻缓闪动,并遵守系统减少动态效果设置。回答表单由宿主通过 `children` 提供,回答后应更新状态以停止提示。
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __commonJS = (cb, mod) => function __require() {
|
|
8
|
+
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
9
|
+
};
|
|
10
|
+
var __export = (target, all) => {
|
|
11
|
+
for (var name in all)
|
|
12
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
13
|
+
};
|
|
14
|
+
var __copyProps = (to, from, except, desc) => {
|
|
15
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
16
|
+
for (let key of __getOwnPropNames(from))
|
|
17
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
18
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
19
|
+
}
|
|
20
|
+
return to;
|
|
21
|
+
};
|
|
22
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
23
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
24
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
25
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
26
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
27
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
28
|
+
mod
|
|
29
|
+
));
|
|
30
|
+
|
|
31
|
+
export {
|
|
32
|
+
__commonJS,
|
|
33
|
+
__export,
|
|
34
|
+
__toESM
|
|
35
|
+
};
|
|
36
|
+
//# sourceMappingURL=chunk-G3PMV62Z.js.map
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { AgentSession, CreateSessionRequest } from "@blade-hq/agent-client";
|
|
2
|
+
import { type ReactNode } from "react";
|
|
2
3
|
import { type ChatPresentationProps } from "./ChatSurface";
|
|
3
4
|
import type { FollowupInteractionEvent } from "./PostChatFollowupBlock";
|
|
4
5
|
export interface AgentChatProps extends ChatPresentationProps {
|
|
@@ -13,6 +14,8 @@ export interface AgentChatProps extends ChatPresentationProps {
|
|
|
13
14
|
onSessionReady?: (session: AgentSession) => void;
|
|
14
15
|
/** 智能体下发给宿主页面的指令处理器(action → handler)。 */
|
|
15
16
|
commands?: Record<string, (data: unknown) => void>;
|
|
17
|
+
/** 覆盖默认会话插件选择器。 */
|
|
18
|
+
sessionPluginControls?: (sessionId: string) => ReactNode;
|
|
16
19
|
}
|
|
17
20
|
/**
|
|
18
21
|
* 智能体模式的聊天界面:连接(或新建)一个 Blade 会话,渲染消息流与输入框。
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import type { ToolCallInfo } from "@blade-hq/agent-client";
|
|
2
2
|
interface Props {
|
|
3
3
|
toolCall: ToolCallInfo;
|
|
4
|
+
className?: string;
|
|
4
5
|
}
|
|
5
|
-
/**
|
|
6
|
-
|
|
7
|
-
* 不再嵌套渲染子循环的完整消息流(那是第一方界面的能力)。
|
|
8
|
-
*/
|
|
9
|
-
export declare function AgentLoopBlock({ toolCall }: Props): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
/** SDK receives the parent tool status and result; child-stream hosts supply card content separately. */
|
|
7
|
+
export declare function AgentLoopBlock({ toolCall, className }: Props): import("react/jsx-runtime").JSX.Element;
|
|
10
8
|
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
|
+
export type AgentTaskStatus = "running" | "waiting_input" | "completed" | "failed" | "cancelled";
|
|
3
|
+
export interface AgentTaskCardProps {
|
|
4
|
+
title: string;
|
|
5
|
+
status: AgentTaskStatus;
|
|
6
|
+
activity?: string;
|
|
7
|
+
children?: ReactNode;
|
|
8
|
+
className?: string;
|
|
9
|
+
recordId?: string;
|
|
10
|
+
}
|
|
11
|
+
/** Shared child-agent boundary; activity remains visible while details are collapsed. */
|
|
12
|
+
export declare function AgentTaskCard({ title, status, activity, children, className, recordId }: AgentTaskCardProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -23,9 +23,20 @@ interface Props {
|
|
|
23
23
|
sessionStatus: string;
|
|
24
24
|
answerData?: AskUserAnswerData | undefined;
|
|
25
25
|
onAnswer?: (answer: string, toolCallId: string, answerData: AskUserAnswerData) => void;
|
|
26
|
+
className?: string;
|
|
27
|
+
optionClassName?: string;
|
|
26
28
|
}
|
|
27
29
|
/** 提问选项卡片:单选/多选 + 自定义输入,回答通过 onAnswer 回调交还 ChatView。 */
|
|
28
|
-
export declare function AskUserQuestionBlock({ data, answered, toolCallId, sessionStatus, answerData, onAnswer, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export declare function AskUserQuestionBlock({ data, answered, toolCallId, sessionStatus, answerData, onAnswer, className, optionClassName, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
29
31
|
/** 解析 AskUserQuestion 的工具结果/参数,容错 LLM 把 questions 输出为字符串的情况。 */
|
|
30
32
|
export declare function parseAskUserQuestion(toolResult: string | null | undefined): AskUserQuestionData | null;
|
|
33
|
+
export interface AskUserQuestionError {
|
|
34
|
+
message: string;
|
|
35
|
+
detail: string | null;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Keep this parser synchronized with apps/web/AskUserQuestionBlock.tsx.
|
|
39
|
+
* The built-in Web cannot import agent-react, and this is not a public SDK protocol API.
|
|
40
|
+
*/
|
|
41
|
+
export declare function parseAskUserQuestionError(toolResult: string | null | undefined): AskUserQuestionError | null;
|
|
31
42
|
export {};
|
|
@@ -1,18 +1,36 @@
|
|
|
1
|
-
import type { AskUserAnswerData, ChatMessage } from "@blade-hq/agent-client";
|
|
2
|
-
import {
|
|
1
|
+
import type { AskUserAnswerData, ChatMessage, MemoryRefInfo } from "@blade-hq/agent-client";
|
|
2
|
+
import type { ChatViewClassNames, ChatViewRenderers } from "./ChatSurface";
|
|
3
3
|
interface Props {
|
|
4
4
|
messages: ChatMessage[];
|
|
5
5
|
isStreaming?: boolean;
|
|
6
6
|
askAnswers?: Record<string, AskUserAnswerData>;
|
|
7
7
|
onAnswer?: (answer: string, toolCallId: string, answerData: AskUserAnswerData) => void;
|
|
8
8
|
sessionStatus?: string;
|
|
9
|
-
|
|
9
|
+
/** 各可见区块的 className 落点;键与元素上的 `blade-chat-*` 锚点一一对应。 */
|
|
10
|
+
classNames?: ChatViewClassNames;
|
|
11
|
+
/** 区块级渲染器;返回 null 走默认渲染。 */
|
|
12
|
+
renderers?: ChatViewRenderers;
|
|
13
|
+
/** Agent 模式把 update_plan 收口到输入框上方的任务面板;纯 LLM 同名工具照常展示。 */
|
|
14
|
+
hidePlanUpdateTools?: boolean;
|
|
10
15
|
/** 会话 id;传给 Markdown 渲染的统一上下文。 */
|
|
11
16
|
sessionId?: string;
|
|
12
17
|
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
+
export type TurnDisplayMode = "compact" | "detail";
|
|
19
|
+
export declare function resolveTurnDisplayMode({ isStreaming: _isStreaming, displayMode, }: {
|
|
20
|
+
isStreaming: boolean;
|
|
21
|
+
displayMode: TurnDisplayMode;
|
|
22
|
+
}): TurnDisplayMode;
|
|
23
|
+
export declare function formatExecutionDuration(durationMs: number): string;
|
|
24
|
+
export declare function getExecutionDurationMs({ messages, isStreaming, now, }: {
|
|
25
|
+
messages: ChatMessage[];
|
|
26
|
+
isStreaming: boolean;
|
|
27
|
+
now?: number;
|
|
28
|
+
}): number;
|
|
29
|
+
/** 一轮助手回复:执行过程默认折叠,最终正文始终显示在摘要下方。 */
|
|
30
|
+
export declare function AssistantTurnBlock({ messages, isStreaming, askAnswers, onAnswer, sessionStatus, classNames, renderers, hidePlanUpdateTools, sessionId, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
export declare function collectMemoryRefs(messages: ChatMessage[]): MemoryRefInfo[];
|
|
32
|
+
export declare function MemoryRefsHint({ refs, className }: {
|
|
33
|
+
refs: MemoryRefInfo[];
|
|
34
|
+
className?: string;
|
|
35
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
18
36
|
export {};
|
|
@@ -6,13 +6,33 @@ interface Props {
|
|
|
6
6
|
onStop: () => void;
|
|
7
7
|
isStreaming: boolean;
|
|
8
8
|
isStopping?: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* 宿主是否渲染了队列面板。没有面板时不给"运行中提交"入口:消息进了队列却看不见,
|
|
11
|
+
* 比明确提示用户等一等更糟。ChatSurface 按 queuePanel 是否存在传入。
|
|
12
|
+
*/
|
|
13
|
+
queueWhileRunning?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* 上方紧贴着一个比自己窄的面板(队列面板)时置 true:上两角改直角。
|
|
16
|
+
*
|
|
17
|
+
* 面板比输入框窄一圈,输入框上角留圆弧的话,那两段弧会从面板两侧露出来,
|
|
18
|
+
* 看着就是两个尖角。跟内置 Web 的 ChatInput 是同一个判据。
|
|
19
|
+
*/
|
|
20
|
+
mergesWithPanelAbove?: boolean;
|
|
9
21
|
placeholder?: string;
|
|
10
22
|
className?: string;
|
|
23
|
+
/** 输入框卡片(`.blade-chat-input-inner`):边框、圆角、底色在这里。 */
|
|
24
|
+
innerClassName?: string;
|
|
25
|
+
/** 文本输入框(`.blade-chat-textarea`)。 */
|
|
26
|
+
textareaClassName?: string;
|
|
27
|
+
/** 右侧按钮组(`.blade-chat-input-toolbar`)。 */
|
|
28
|
+
toolbarClassName?: string;
|
|
29
|
+
queueKey?: string;
|
|
30
|
+
hasAttachments?: boolean;
|
|
11
31
|
}
|
|
12
32
|
/**
|
|
13
33
|
* 轻量聊天输入框:textarea(Enter 发送 / Shift+Enter 换行)+ 发送/停止按钮。
|
|
14
34
|
* 不含第一方版本的富文本编辑、@ 补全、技能菜单、语音输入与模型选择。
|
|
15
35
|
* 内容受控,session.attach() / insertText() 通过 ChatView 注入到这里。
|
|
16
36
|
*/
|
|
17
|
-
export declare function ChatInput({ value, onValueChange, onSend, onStop, isStreaming, isStopping, placeholder, className, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
export declare function ChatInput({ value, onValueChange, onSend, onStop, isStreaming, isStopping, queueWhileRunning, mergesWithPanelAbove, placeholder, className, innerClassName, textareaClassName, toolbarClassName, queueKey, hasAttachments, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
18
38
|
export {};
|