ICEN UI 设计系统

AI 输入台

AI 输入台：autosize（默认 8 行上限后内滚）、Enter 发送 / Shift+Enter 换行、IME 组合态安全、附件 chips；setComposerRunning 切换运行态——发送钮变停止钮（icen:ai-stop），运行中回车转为排队 chip（icen:ai-queue / icen:ai-dequeue，可单个 × 移除）。事件 icen:ai-send {text} / icen:ai-attach {files}。

模型切换 / /命令 / @引用 / 发送事件回显在这里 
<div class="ai-composer" data-ai-composer id="ai-composer-demo">  <div class="ai-composer-queue" hidden></div>  <div class="ai-composer-attach" hidden></div>  <div class="ai-composer-box control">    <textarea class="ai-composer-input" rows="1" placeholder="输入消息，/ 命令 · @ 引用 · Enter 发送"></textarea>    <div class="ai-composer-actions">      <button class="ai-composer-btn" data-ai-attach type="button" aria-label="附件"></button>      <button class="ai-composer-send" data-ai-send type="button" aria-label="发送"></button>    </div>  </div></div><div class="toolbar" style="margin-top:10px">  <button class="btn btn-sm btn-primary" type="button" id="ai-composer-run">模拟运行 / 解除</button>  <span class="toolbar-label" id="ai-composer-log">模型切换 / /命令 / @引用 / 发送事件回显在这里</span></div><div id="ai-composer-out" style="margin-top:10px;display:flex;flex-direction:column;gap:6px"></div>

安装

bun add @icen.ai/ui

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

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

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

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

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

用法

import { initAiComposer, setComposerRunning, setComposerModels, setComposerCommands, setComposerRefs, setComposerUsage } from '@icen.ai/ui/kit/ai-composer';initAiComposer(); <div class="ai-composer" data-ai-composer>  <div class="ai-composer-queue" hidden></div>  <div class="ai-composer-attach" hidden></div>  <div class="ai-composer-box control">    <textarea class="ai-composer-input" rows="1" placeholder="输入消息，/ 命令 · @ 引用 · Enter 发送"></textarea>    <div class="ai-composer-actions">      <button class="ai-composer-btn" data-ai-attach aria-label="附件"></button>      <button class="ai-composer-send" data-ai-send aria-label="发送"></button>    </div>  </div></div> // v2：模型切换（多源 × 多模型，弹层分组+搜索+缓存失效提示）setComposerModels(el, providers, { provider: 'kimi', model: 'kimi-k3' });// / 斜杠命令（拦截执行不进消息流，icen:ai-command {name, args}）setComposerCommands(el, [{ name: 'plan', description: '进入计划模式', argsHint: '[任务]' }]);// @ 引用（file/folder/doc/agent 分组，chip 分离渲染，icen:ai-ref）setComposerRefs(el, [{ kind: 'file', id: 'f1', label: 'src/app.ts', sub: '2.1k tok' }]);// 上下文环（模型 context 自动作 total；icen:ai-usage 事件可驱动实时更新）setComposerUsage(el, usage, { cost: 0.3124 }); // 运行态：发送钮 → 停止钮（icen:ai-stop）；运行中回车排队（icen:ai-queue/dequeue）；// 空输入 ↑ 取回历史；运行中 ↑ 取回排队消息重新编辑