ICEN UI v0.9.0

双栏工作台

Agent 双栏工作台画布：左对话流 / 右文档（各自滚动容器，宿主内容经 setChat / setDoc 挂入）+ 6px 比例分隔条（pointer 拖拽 rAF 批处理、←/→ 微调、双击复位 0.42，自实现不依赖 split-pane）+ 右栏内联 diff（复用 ai-diff，addDiff 接 parseUnifiedDiff 产物）+ 底部版本时间轴（addVersion，current 抢占高亮）+ 划词 AI 工具条（setSelectionTools 注入，选中文本浮「改写 / 补引用 / 总结」→ icen:kb-canvas-ai {instruction, selection}）。

拖中间分隔条调比例（双击复位）· 右栏划选文本浮 AI 工具条 · 底部版本轴点击切换 · 右侧 diff 卡可展开并接受 / 拒绝

<div id="kb-canvas-demo"></div><p class="demo-label" id="kb-canvas-log" style="margin-top:8px">拖中间分隔条调比例（双击复位）· 右栏划选文本浮 AI 工具条 · 底部版本轴点击切换 · 右侧 diff 卡可展开并接受 / 拒绝</p>

安装

bun add @icen.ai/ui

一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：

import '@icen.ai/ui/kit/kb-canvas';import { initAiDiff } from '@icen.ai/ui';initAiDiff();

也可以用脚手架直接打印引入行：

bunx --bun @icen.ai/ui add kb-canvas

Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/kb-agent.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。

用法

import { createKbCanvas } from '@icen.ai/ui/kit/kb-canvas';import { parseUnifiedDiff } from '@icen.ai/ui/kit/ai-diff'; const canvas = createKbCanvas(el, {  minRatio: 0.2,                                // 左栏最小占比（同时约束右栏）  onAI: (d) => runInstruction(d.instruction, d.selection),     // 与 icen:kb-canvas-ai 事件双通道  onVersion: (d) => checkout(d.versionId),                     // 与 icen:kb-canvas-version 双通道});canvas.setChat(chatNode);                        // 左栏对话流（Node 或纯文本）canvas.setDoc(docNode);                          // 右栏文档canvas.addDiff(parseUnifiedDiff(diffText));      // 右栏追加 ai-diff 渲染的内联 diffcanvas.addVersion({ id: 'v3', label: '批量改写', at: Date.now(), current: true });canvas.setSelectionTools([                       // 划词工具条（空数组 = 关闭）  { label: '改写', instruction: '改写选中文本，保持口径一致' },  { label: '补引用', instruction: '为选中文本补充引用来源' },  { label: '总结', instruction: '将选中文本总结为三点' },]);canvas.destroy();// 分隔条：拖拽 rAF 批处理 · ←/→ ±0.02 · Home/End 极值 · 双击复位 0.42（split-pane 心智）