ICEN UI v0.9.0

会话列表

AI 会话列表：分组模式（今天 / 昨天 / 更早，组头可折叠；archived 项沉底收进「已归档」组并降透明）或平铺模式，activeKey 高亮当前会话（aria-current），每项带「···」动作钮（只做事件挂载点，菜单本体由宿主实现）。initAiThreads 委托选择 / 动作 / 组头折叠；setAiThreadsActive 供外部路由同步激活态，对静态手写 DOM 一视同仁。事件 icen:ai-thread-select { key } / icen:ai-thread-action { action, key }。

今天 / 昨天 / 更早分组（组头可折叠）· 已归档沉底降透明 · 点 ··· 派发动作事件（菜单宿主实现）

<div class="toolbar" style="margin-bottom:10px">  <button class="btn btn-sm" type="button" id="ai-threads-route">模拟外部路由切换激活态</button></div><div id="ai-threads-demo" style="max-width:340px"></div><p class="demo-label" id="ai-threads-log" style="margin-top:8px">今天 / 昨天 / 更早分组（组头可折叠）· 已归档沉底降透明 · 点 ··· 派发动作事件（菜单宿主实现）</p>

安装

bun add @icen.ai/ui

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

import { initAiThreads } from '@icen.ai/ui/kit/ai-threads';initAiThreads();

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

bunx --bun @icen.ai/ui add ai-threads

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

用法

import { renderAiThreads, initAiThreads, setAiThreadsActive } from '@icen.ai/ui/kit/ai-threads'; initAiThreads();   // 委托：选择 / 动作挂载点 / 组头折叠（幂等 + 销毁函数）renderAiThreads(el, {  groups: true,                  // 分组模式（组头可折叠）；缺省/false 平铺  activeKey: 't-2',  items: [    { key: 't-1', label: '差旅报销口径核对', group: '今天' },    { key: 't-6', label: '2026 招聘 JD 草稿', group: '更早', archived: true },   // 归档沉底  ],});setAiThreadsActive(el, 't-4');   // 外部路由同步激活态（key 空串清空全部激活）el.addEventListener('icen:ai-thread-select', (e) => route(e.detail.key));el.addEventListener('icen:ai-thread-action', (e) => openMenu(e.detail.key));     // 菜单本体宿主实现