Thinking
表达推理或处理中状态。中文惯用名：思考过程。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.thinking |
| 名称 | Thinking |
| 二级分类 | AI 与会话（ai-chat） |
| 用途 | 表达推理或处理中状态 |
| 描述 | 中文惯用名：思考过程。 |
预览
静态结构：卡片（border bg-muted/50）= 头部按钮（brain 图标 thinking 态脉冲 + 标题（缺省「思考中…/思考完成」）+ chevron）+ 可折叠内容区（whitespace-pre-wrap muted）。展开态非受控（defaultExpanded，缺省 thinking 展开 / done 折叠）或受控（expanded + onToggle）。
DSL 结构
{
"type": "Thinking",
"props": {
"content": "正在拆解任务：读取数据 → 汇总指标 → 生成图表。",
"status": "thinking"
}
}何时用
何时使用
- 表达推理或处理中状态：AI 思考过程的可折叠呈现。
何时不用
- 工具调用的参数与结果：使用 ToolCall。
- 简单的运行状态：使用 AgentStatus。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| thinking | 图标脉冲 + 默认展开 | 推理进行中 |
| done | 默认折叠 | 推理完成可回看 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
content | string | — | 推理内容 |
status | `'thinking' | 'done'` | 'thinking' |
title | string | 按状态 | 标题 |
expanded | boolean | — | 受控展开；提供时切换仅经 onToggle 上报 |
defaultExpanded | boolean | 按状态 | 非受控初始展开 |
onToggle | event | — | 折叠切换，传出目标展开态（${event}） |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式 |
使用规范
- 思考内容与正文分离呈现，不混入 markdown 正文段。
正例
- ✓ 助手回答前：thinking 态卡片实时展示推理，完成自动可折叠。
反例
- ✕ 把 thinking 当普通折叠面板用（应使用 Accordion / Collapsible）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。