@pt/react-common组件使用
Thinking
AI 思考过程展示组件，支持自动管理时间显示及折叠状态。
Thinking 组件用于展示 AI 模型在生成回复之前的“思考”或“推理”过程。它内置了计时逻辑，并支持手动/自动折叠。
核心特性
- 自动计时：根据传入的时间戳自动计算并显示思考时长。
- 动态状态：思考中显示流光动画，结束后显示最终时长。
- 自动折叠：可以配置为思考结束后自动折叠内容。
- UI 基座：确保无障碍支持和流畅动画。
基本用法
正在分析用户意图并搜索相关背景资料以提供更准确的回答...
import { Thinking } from "@pt/react-common/components";
const part = {
type: 'thinking',
thinking: '正在搜索相关资料...',
start_timestamp: Math.floor(Date.now() / 1000) - 5,
stop_timestamp: null, // null 表示仍在处理中
};
<Thinking part={part} />已完成状态
搜索完成，分析了 3 篇相关文档。
const completedPart = {
type: 'thinking',
thinking: '搜索完成，分析了 3 篇相关文档。',
start_timestamp: 1712000000,
stop_timestamp: 1712000003.5,
};
<Thinking part={completedPart} />属性说明 (Props)
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
part | ThinkingPart | - | 思考数据对象，包含文本及起止时间戳 |
className | string | - | 容器自定义类名 |
ThinkingPart 定义
export interface ThinkingPart {
type: 'thinking';
thinking: string; // 思考的内容文本
start_timestamp: number; // 开始时间戳（秒）
stop_timestamp: number | null; // 结束时间戳（秒）
}
## 互动演练场
试试直接编辑下方代码，预览区会实时更新：
<ComponentPreview
live={true}
scope={{ Thinking }}
code={`<Thinking
part={{
type: 'thinking',
thinking: '正在思考如何更好地回答您的问题...',
start_timestamp: Math.floor(Date.now() / 1000) - 5,
stop_timestamp: null
}}
/>`}
/>