Skip to content

Conversation

@GuoYuefei
Copy link

影响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

@CLAassistant
Copy link

CLAassistant commented Sep 19, 2025

CLA assistant check
All committers have signed the CLA.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

流式传输使用updateMsg更新消息时会强制滚动到最下方,若此时手动向上滚动浏览消息会出现冲突造成页面抖动

2 participants