跳到正文

internal demo

AI 聊天滚动行为

Vercel AI SDK + AI Elements 风格组件。重点测试新消息自动跟随、用户查看历史时保持位置、以及流式回复的滚动体验。

上滑查看历史
位置不会跳走
点击回到最新

下面是一个内部 demo:当 AI 聊天界面收到新消息时,如果用户还在底部,就平滑跟随;如果用户正在上滑查看历史,就保持当前位置,并显示“新消息”按钮。

如果我正在向上滚动看历史,新的 AI 回复来了怎么办?

不要强制滚动。先计算用户距离底部的距离,超过阈值就认为用户正在阅读历史。此时只更新消息列表,不自动跳到底部,并提供一个悬浮按钮让用户手动回到最新消息。

Enter 发送,Shift + Enter 换行