Fix bubble auto scroll #327
Conversation
📝 WalkthroughWalkthrough此次更改涉及 Changes
Possibly related PRs
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
|
Bundle ReportChanges will increase total bundle size by 487 bytes (0.31%) ⬆️. This is within the configured threshold ✅ Detailed changes
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (6)
components/bubble/hooks/useAutoScrollToBottom.ts (4)
8-13: 建议完善文档注释建议在文档注释中补充以下内容：
- 返回值的说明
- 具体的使用示例
- 自动滚动的触发条件
27-44: 建议优化 MutationObserver 的性能当前实现在每次 DOM 变化时都会触发回调。建议：
- 使用防抖（debounce）来减少频繁触发
- 考虑使用
requestIdleCallback在浏览器空闲时执行滚动+ import { debounce } from 'lodash'; - const mutationObserver = new MutationObserver(() => { + const handleMutation = debounce(() => { const currentScrollHeight = container.scrollHeight; if (currentScrollHeight > prevScrollHeightRef.current) { if (shouldAutoScrollRef.current) { isAutoScrollingRef.current = true; - requestAnimationFrame(() => { + requestIdleCallback(() => { container.scrollTop = container.scrollHeight; - requestAnimationFrame(() => { + requestIdleCallback(() => { isAutoScrollingRef.current = false; }); }); } prevScrollHeightRef.current = currentScrollHeight; } - }); + }, 100); + const mutationObserver = new MutationObserver(handleMutation);
47-58: 建议添加滚动阈值配置当前实现使用固定的 1px 误差值判断是否滚动到底部。建议：
- 将阈值作为可配置参数
- 添加注释说明为什么选择 1px 作为默认值
79-89: 建议增强手动滚动的错误处理当前实现在 container 为空时直接返回。建议：
- 添加错误边界处理
- 考虑添加回调函数通知调用方滚动状态
- const manualScrollToBottom = () => { + const manualScrollToBottom = (callback?: (success: boolean) => void) => { if (container) { try { isAutoScrollingRef.current = true; container.scrollTop = container.scrollHeight; shouldAutoScrollRef.current = true; requestAnimationFrame(() => { isAutoScrollingRef.current = false; + callback?.(true); }); + } catch (error) { + console.error('Failed to scroll to bottom:', error); + callback?.(false); } + } else { + callback?.(false); } };components/bubble/BubbleList.tsx (2)
94-97: 建议增加错误处理和加载状态在使用 useAutoScrollToBottom hook 时，建议：
- 处理 container 为 null 的情况
- 考虑添加加载状态指示器
133-133: 建议优化上下文更新逻辑当前实现在每次气泡更新时都会触发滚动。建议：
- 添加条件判断，只在需要时触发滚动
- 考虑使用 useCallback 优化性能
const context = React.useMemo( () => ({ - onUpdate: manualScrollToBottom, + onUpdate: React.useCallback(() => { + if (scrollReachEnd) { + manualScrollToBottom(); + } + }, [scrollReachEnd]), }), - [], + [scrollReachEnd], );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
components/bubble/BubbleList.tsx(3 hunks)components/bubble/hooks/useAutoScrollToBottom.ts(1 hunks)
🔇 Additional comments (2)
components/bubble/hooks/useAutoScrollToBottom.ts (1)
72-76: 清理逻辑实现完善
清理函数正确处理了 MutationObserver 和事件监听器的销毁，值得肯定。
components/bubble/BubbleList.tsx (1)
90-91: 滚动检测逻辑与 hook 保持一致
使用 1px 误差值判断滚动位置的实现与 hook 保持一致，这是个好的做法。
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #327 +/- ##
==========================================
- Coverage 91.13% 90.45% -0.69%
==========================================
Files 66 67 +1
Lines 1421 1466 +45
Branches 378 382 +4
==========================================
+ Hits 1295 1326 +31
- Misses 126 140 +14 ☔ View full report in Codecov by Sentry. |
|
非常感谢您的贡献～ 由于前置的 issue 不是一个 bug ，这个 PR 我暂时不打算做处理～ 或者有其他的说明，证明这是个 bug ，您可以随时留言，非常感谢～ |
原Bubble.List中的autoScroll逻辑异常：无法正常自动滚动到新消息最底部（关联issue：https://github.com/ant-design/x/issues/317）。
解决方案: 使用MutationObserver机制，重写了滚动逻辑代码
原代码表现：
现代码表现：
Summary by CodeRabbit
新功能
manualScrollToBottom方法，以便用户可以程序化地滚动到容器底部。改进