ICEN UI 设计系统

AI 推理

推理块 .ai-reasoning：流式中 head 显示 shimmer「正在思考…」（--ai-shimmer-duration 变量化时长）；createAiStream 的 done() 自动折叠并回填耗时；head 点击展开 / 折叠（initAiChat 委托）。summary 密度档默认折叠。

上面一块流式结束后自动折叠并回填耗时；下面一块点击 head 展开 / 折叠

<div class="ai-chat" style="height:auto">  <div class="ai-reasoning is-streaming" id="ai-reasoning-live">    <button class="ai-reasoning-head" type="button" aria-expanded="true">      <span class="ai-reasoning-label">思考过程</span><span class="ai-reasoning-time"></span>    </button>    <div class="ai-reasoning-body" id="ai-reasoning-stream"></div>  </div>  <div class="ai-reasoning is-done" style="margin-top:12px">    <button class="ai-reasoning-head" type="button" aria-expanded="false">      <span class="ai-reasoning-label">思考过程</span><span class="ai-reasoning-time">3.4s</span>    </button>    <div class="ai-reasoning-body" hidden>1. 目标函数是凸的，先证存在唯一极小值。2. 对约束求拉格朗日乘子，得到闭式解。3. 回代验证边界条件成立，结论可靠。</div>  </div></div><p class="demo-label" style="margin-top:8px">上面一块流式结束后自动折叠并回填耗时；下面一块点击 head 展开 / 折叠</p>

安装

bun add @icen.ai/ui

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

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

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

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

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

用法

<div class="ai-reasoning is-done">  <button class="ai-reasoning-head" aria-expanded="false">    <span class="ai-reasoning-label">思考过程</span><span class="ai-reasoning-time">3s</span>  </button>  <div class="ai-reasoning-body" hidden>…</div></div> <!-- 流式推理：宿主在 .ai-reasoning 内时 done() 自动折叠 + 回填耗时 -->import { createAiStream, initAiChat } from '@icen.ai/ui/kit/ai-reasoning';initAiChat();   // head 展开/折叠委托const s = createAiStream(document.querySelector('.ai-reasoning-body'));s.append('…');s.done();   // 或 s.cancel()（取消不折叠、不计耗时）