ChatUI
ChatUI copied to clipboard
feat: add scroll behavior configuration to MessageContainer and Chat …
影响component
- Chat
- MessageContainer
背景
当前 ChatUI 在消息渲染时,滚动行为是固定的:
- 自己发送消息会始终滚动到底部
- 收到新消息时,如果接近底部则自动滚动,否则更新
newCount -
isNearBottom内部的阈值(屏数)写死为 2
在一些场景下,用户希望能够更灵活地控制滚动逻辑。例如:
- 不希望自己发消息时打断正在查看历史消息的用户
- 不希望不在底部时显示
newCount - 希望自定义多少屏以内算“接近底部”
变更内容
本 PR 增加了一个新的 scrollBehaviorConfig 配置对象,提供如下可选参数:
export interface ScrollBehaviorConfig {
/** 是否跟随自己发的消息,默认 true */
followSelf?: boolean;
/** 是否跟随收到的消息,默认 true */
followIncoming?: boolean;
/** 不在底部时是否显示新消息数量,默认 true */
showNewCount?: boolean;
/** 距离多少屏以内才自动跟随,默认 2 */
followScreen?: number;
}
// 暴露scrollBehaviorConfig配置
scrollBehaviorConfig?: ScrollBehaviorConfig;
- 以上参数全部为可选,未设置时保持现有默认逻辑,完全兼容原有行为。
- 收到的消息处调用
isNearBottom方法的第二个参数不再写死为 2(默认2),而是从scrollBehaviorConfig.followScreen读取。
使用示例
大模型相关可以如下配置,当然也可以使用state控制
<Chat
scrollBehavior={{
followSelf: false,
followIncoming: true,
showNewCount: false,
followScreen: 0.2,
}}
/>
兼容性
- 默认情况下,与当前行为完全一致,不影响现有用户。
- 配置对象仅在需要定制时才生效。
附加
package.json涉及环境变量使用cross-env支持跨平台环境变量设置,否则window执行会报错
fixed #178 #162