Skip to content

Thinking 组件在 Bubble.List 里折叠展开会影响滚动位置 #1684

@hyrious

Description

@hyrious

重现步骤

在线示例链接:https://codesandbox.io/p/sandbox/quiet-flower-h9s7sl

步骤:
以下组件即可复现

<Bubble.List
  style={{ height: 400 }}
  items={Array.from({ length: 50 }, (_, i) => ({
    key: i,
    role: "ai",
    content: <Think title="Hello">Hello, world!</Think>,
  }))}
/>
output.mp4

当前行为

折叠展开的时候,thinking 元素的标题没有停留在原地,而是上下移动了一下,实际是滚动位置变动。

预期行为

  1. 优先让鼠标点击位置不动,比如 thinking 标题,其他随便动
  2. 如果当前消息列表触底,以下两种方案任实现其一:
    • Thinking 展开的时候还是标题标题不动,也就是取消触底状态;折叠的时候标题往下拉保持触底
    • Thinking 不管展开还是折叠都保持触底状态

上下文

No response

版本

2.1.3

您在哪些浏览器上遇到了这个问题?

Chrome

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions