梧桐设计语言v0.4.1

思考与流式Thinking

AI 回答的三个状态:在想、思考过程、流式输出。


  • 在想:三个 foreground 呼吸点(1.4s、错相 0.2s)+ 一行 meta 说在做什么。不用转圈。
  • 思考过程:默认折叠成「思考了 12 秒 ›」,meta + muted-foreground;展开是缩进的步骤,字号比正文小一级。思考永远比结论退后一层。
  • 流式文本body 逐字出现,末尾 foreground 竖线光标 1s 闪烁;来源引用是内联 chip 尺寸小标签(muted 底、radius-chip),点开走侧滑面板。

写操作的回答形态是「预览 · 未执行」:同一套组件套一层 info-soft 底,人确认才执行。

消费者提供:状态、思考步骤、流式文本、引用列表。

示例

import
import { Thinking, Reasoning, StreamText, Source } from "@wutong/ui";

在想 → 思考过程 → 流式回答

呼吸点不用转圈;思考默认折叠;引用是内联小标签

正在读取 3 张表的结构
,与经验库里「叶片结冰导致变桨卡滞」的处理经验吻合

API

属性类型默认说明
Thinking.childrenReactNode一行说在做什么
Reasoning.seconds / defaultOpennumber / boolean「思考了 N 秒」,默认折叠
StreamText.text / speed / donestring / ms / boolean逐字出现;done 直接显示全文
Source.onClick() => void点开走侧滑面板