ICEN UI v0.9.0

工具链条

Agent 工具链条横向摘要条（与 ai-tool-call 单卡互补的「一屏看完整个链」视角）：检索 → 重排 → 生成 → 引用核对等步骤，四态状态点（pending 空心 / running accent 脉冲 / done 实心绿 / error 实心红，运动感来自动效不来自颜色）。幂等重渲：同一 el 重复调用只原位更新状态类 / label / title / 可点性，不重建 DOM（流式安全无闪烁）；running（或 error）及之前的步骤可点击 → icen:kb-chain-step { index, step }。

2.6s 后生成完成、引用核对转 running（幂等重渲不重建 DOM）· 点击已到达步骤派发 icen:kb-chain-step · 未到达步骤置灰不可点

<div id="kb-chain-demo"></div><p class="demo-label" id="kb-chain-log" style="margin-top:8px">2.6s 后生成完成、引用核对转 running（幂等重渲不重建 DOM）· 点击已到达步骤派发 icen:kb-chain-step · 未到达步骤置灰不可点</p>

安装

bun add @icen.ai/ui

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

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

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

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

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

用法

import { renderKbChain, initKbChain } from '@icen.ai/ui/kit/kb-chain'; initKbChain();   // 委托点击 + Enter/Space（幂等 + 销毁函数）renderKbChain(el, [  { key: 'retrieve', label: '检索', status: 'done', detail: '3 页 / 2 表 · topK 8' },  { key: 'generate', label: '生成', status: 'running', detail: '流式输出中' },  { key: 'verify', label: '引用核对', status: 'pending' },]);// 流式推进：重复调用只更新状态类与 detail（WeakMap 同步步骤数据），长度变化才增删节点el.addEventListener('icen:kb-chain-step', (e) => jumpTo(e.detail.step.key));