ThinkingBlock
thinking-block思考折叠块 · dogfood Collapsible(自带chevron+平滑高度) + thinking态(转圈+AnimatedShinyText高光+默认展开) + 耗时标记·收起隐藏 chain-of-thought
用法
基础用法
已完成的推理：点击头部展开/收起思维链。
tsx
<ThinkingBlock duration="思考 3s">
{reasoning}
</ThinkingBlock>思考中
thinking 时标题转圈 + 高光流动，并默认展开。
用户要把首页做成 100% dogfood。先看现有 page.tsx 用了哪些组件，再核对库里有哪些可替换的排版/布局原语，最后逐块替换并补缺口。
tsx
<ThinkingBlock thinking>
{reasoning}
</ThinkingBlock>自定义标题
title 覆盖默认「思考过程」，duration 标记耗时。
tsx
<ThinkingBlock title="规划任务拆解" duration="2.4s">
{reasoning}
</ThinkingBlock>默认展开
defaultOpen 让已完成的块也默认摊开正文。
用户要把首页做成 100% dogfood。先看现有 page.tsx 用了哪些组件，再核对库里有哪些可替换的排版/布局原语，最后逐块替换并补缺口。
tsx
<ThinkingBlock defaultOpen duration="思考 1s">
{reasoning}
</ThinkingBlock>何时用
折叠展示 agent 的 chain-of-thought 推理过程，思考中转圈高光、完成后可收起。结构化的步骤清单用 AgentPlan，单次工具调用用 ToolCall；这里是自由文本推理。
导入
ts
import { ThinkingBlock } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| thinking | boolean | false | 进行态：标题转圈 + 高光流动，且默认展开（agent 正在推理） |
| defaultOpen | boolean | 随 thinking | 非受控初始展开态 |
| open | boolean | — | 受控展开态 |
| className | string | — | 容器类名 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onOpenChange | (open: boolean) => void | 展开态变化回调 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| title | ReactNode | 头部标题（默认「思考过程」） |
| duration | ReactNode | 耗时标记（标题右侧弱化，如「思考 3s」） |
| children | ReactNode | 推理正文（markdown 建议外包 <Prose/>） |
禁忌 / 坑
- 受控/非受控二选一：传
open须配onOpenChange自己管；只想给初值用defaultOpen。 - 不传
defaultOpen/open时展开态默认随thinking（思考中展开、完成收起）。
相关
ToolCall · AgentPlan · Dossier · Artifact · ConfirmCard · ThreadList
Playground
<ThinkingBlock>{reasoning}</ThinkingBlock>