@pt/react-common组件使用
ScrollToBottom
悬浮的“回到最新”按钮，支持显示生成中的旋转进度环。
ScrollToBottom 是一个常用于聊天界面的功能组件。当用户向上滚动查看历史消息时，它会浮现，并提供一键回到最底部的功能。
核心特性
- 状态反馈：支持
isGenerating模式，在生成回复时显示旋转进度环。 - 平滑动画：内置缩放弹出动画。
- 定位灵活：通常作为
fixed或absolute元素放置在容器右下角。
基本用法
滚动内容区域...
import { ScrollToBottom } from "@pt/react-common/components";
<div className="relative h-[200px] border flex items-center justify-center bg-fd-muted/10 rounded-lg">
<div className="text-fd-muted-foreground">滚动内容区域...</div>
<ScrollToBottom
show={true}
isGenerating={false}
className="absolute bottom-4 right-4"
/>
</div>生成状态
在模型回复生成时显示加载环
<ScrollToBottom
show={true}
isGenerating={true}
/>属性说明 (Props)
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
show | boolean | false | 是否显示按钮 |
isGenerating | boolean | false | 是否处于生成状态（显示旋转环） |
onClick | () => void | - | 点击按钮的回调 |
className | string | - | 自定义类名 |
style | CSSProperties | - | 自定义样式 |
互动演练场
试试直接编辑下方代码，预览区会实时更新：
加载编辑器中…