@ burtson-labs/ 代理人 - ii
由"盗贼隐形"网络应用和"VS代码扩展网页视图"共享的UI原始.
主机不可知论 反应组件——它们从运行时间消耗出一个正态的事件流,并且不知道它们是在Vite内部渲染,VS代码的网页视图,还是工作台的吊带.
安装
pnpm add @burtson-labs/agent-ui
Per-dependers on React 19,MUI 7和情感——主机应用程序提供. 运行时侧( 组件所消耗的事件流) 来源于 @burtson-labs/agent-core 或预线 @burtson-labs/stealth-core-runtime。 。 。 .
快开始
组件是纯正的——它们消耗道具而不能接触到任何宿主. 将 CSS 导入到您的应用程序根后, 然后将组件放入 :
import {
MarkdownMessage,
ChatComposer,
ChatConversation,
PlanTree,
DiffStream,
TelemetryPanel,
AgentConsole
} from "@burtson-labs/agent-ui";
import "@burtson-labs/agent-ui/styles/agent-ui.css";
function ChatPanel({ messages, onSend }) {
return (
<>
<ChatConversation messages={messages} />
<ChatComposer onSubmit={onSend} placeholder="Type a message…" />
</>
);
}
从软件包根导入 . import 解析到 ES 模块构建, 包只标记它的样式表作为副作用, 所以捆绑者只保留您使用的组件 : 根的一卡会添加大约 7 KB, 而不是整个库 . require 仍然得到共同JS的建设.
盒子里的东西
| 构成部分 | 它意味着什么 |
|---|---|
ChatComposer | 多行输入 + 提交, 包括取型器、 模式切换和技能芯片 |
ChatConversation | 使用助手 / 用户 / 工具 / 推理块流出信件列表 |
MarkdownMessage | 单信息泡-标记下+语法突出+文件参考链接 |
PlanTree | 计划+步骤树,进展状况 |
PlanActivity | 每步活动种子(工具调用、 diffs 、 日志) |
DiffStream | 用于拟议编辑的 Live 统一动态查看器 |
DiffReview/DiffReviewPanel | 申请前多文件接受/ 拒绝 |
TelemetryPanel | Token 使用量 + 每发时间; 计算一个提供者从未报告过“ 未知” |
UsageMeter 编号 : ContextMeter | 显示未知用途且未取出栏而未报告限额的限用表 |
AgentConsole | 合并聊天+计划+简易驾驶舱 |
PermissionCard | 内置允许/ 拒绝写入工具执行 。 过 status 让主机拥有决定状态( e)pending, (中文(简体) ), submitting, (中文(简体) ), resolved, (中文(简体) ), error, (中文(简体) ), expired请求中从未报告过决定。 在等待时集中注意力(不滚动页面); autoFocus={false} 选择退出 |
QuestionCard | ask_user 问题:无线电选项,打出答案,标签加数个问题的检讨步骤. toUserInputResponse 构建主机 userInputResponse 留言。 在不滚动页面的情况下注重挂载; autoFocus={false} 选择退出( 如折叠下方的演示) |
TaskList | 飞行中和最近代理运行的压缩列表 |
BackgroundTaskTile | 母体转生的副体活瓦 |
状态
稳住 被"盗贼隐形"网络应用,"盗贼VS代码"扩展网页视图所使用,并被模拟驱动dev工作台. 打破变革需要消费者之间协调一致的公关.
撰写新组件
成分生活在 src/components/每一方应:
- 仅控制道具——没有全球状态,没有特定主机的进口
- 从模拟事件源工具中测试
- 匹配现有的视觉语言( MUI 原始语, 暗/ 淡主题意识)
许可证
Apache 许可证 2.0 ——版权2026 Burtson Labs.