思考与流式Thinking
AI 回答的三个状态:在想、思考过程、流式输出。
- 在想:三个
foreground 呼吸点(1.4s、错相 0.2s)+ 一行 meta 说在做什么。不用转圈。
- 思考过程:默认折叠成「思考了 12 秒 ›」,
meta + muted-foreground;展开是缩进的步骤,字号比正文小一级。思考永远比结论退后一层。
- 流式文本:
body 逐字出现,末尾 foreground 竖线光标 1s 闪烁;来源引用是内联 chip 尺寸小标签(muted 底、radius-chip),点开走侧滑面板。
写操作的回答形态是「预览 · 未执行」:同一套组件套一层 info-soft 底,人确认才执行。
消费者提供:状态、思考步骤、流式文本、引用列表。
示例
import { Thinking, Reasoning, StreamText, Source } from "@wutong/ui";
在想 → 思考过程 → 流式回答
呼吸点不用转圈;思考默认折叠;引用是内联小标签
正在读取 3 张表的结构
,与经验库里「叶片结冰导致变桨卡滞」的处理经验吻合。
API
| 属性 | 类型 | 默认 | 说明 |
|---|
| Thinking.children | ReactNode | — | 一行说在做什么 |
| Reasoning.seconds / defaultOpen | number / boolean | — | 「思考了 N 秒」,默认折叠 |
| StreamText.text / speed / done | string / ms / boolean | — | 逐字出现;done 直接显示全文 |
| Source.onClick | () => void | — | 点开走侧滑面板 |