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

[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

[dosubot]

你遇到的滚动位置跳动，主要原因是 Bubble.List 的滚动锁定逻辑和 Think 组件本身不处理滚动。Bubble.List 用了自定义的 useCompatibleScroll 钩子，通过底部哨兵和 MutationObserver 检测内容变化，只有在用户未主动滚动时才锁定滚动条，否则内容高度变化（比如 Think 折叠/展开）会导致滚动位置跳变，标题跟着移动[源码分析]。

实现你期望的行为有两种思路：

1. 点击时让标题不动（即“锚定”点击位置）

   • 在点击展开/折叠前，记录当前标题的相对位置（比如 getBoundingClientRect().top）。
   • 展开/折叠动画结束后，计算标题的新位置，手动调整 scrollTop，使标题回到原来的位置。
   • 可以通过 Bubble.List 的 ref 暴露的 scrollTo 方法或直接操作 scrollBoxDom 实现。

2. 始终保持底部（自动滚动到底）

   • 在每次内容变化（比如 Think 展开/折叠）后，判断是否处于底部，如果是则调用 scrollTo({ top: 'bottom' }) 保持底部。
   • 你可以监听 Think 的展开/折叠事件，在动画结束后触发 scrollTo。

代码示例（锚定标题位置）：

const listRef = useRef();

const handleExpand = (key) => {
  const dom = document.querySelector(`[data-key="${key}"] .think-title`);
  const prevTop = dom.getBoundingClientRect().top;
  // 触发展开/折叠
  setExpand((prev) => !prev);
  setTimeout(() => {
    const newTop = dom.getBoundingClientRect().top;
    const delta = newTop - prevTop;
    listRef.current.scrollBoxNativeElement.scrollTop += delta;
  }, 300); // 300ms为动画时长
};

注意事项：

• 如果你想“始终保持底部”，只需在内容变化后调用 listRef.current.scrollTo({ top: 'bottom' })。
• 如果要“锚定标题”，需要自己计算偏移量并调整 scrollTop。
• Think 组件本身不处理滚动，所有滚动控制都要在 Bubble.List 层面做。
• 目前没有内置 prop 能直接实现“标题不动”，只能通过上述手动方式[源码参考]。

如果需要更细致的实现建议，可以补充你的具体交互需求。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[anxLiang]

感谢反馈，我们会尽快修复这个问题。