perf: batch reasoning renderer updates - #387
Conversation
WalkthroughReasoning content rendering now uses an animation-frame buffer. Content and open-state changes schedule updates. Expanded details scroll to the bottom after updates. Unmount cleanup cancels pending animation frames. ChangesReasoning rendering
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant ReasoningVue
participant requestAnimationFrame
participant HTMLDetailsElement
ReasoningVue->>requestAnimationFrame: Schedule buffered content update
requestAnimationFrame->>ReasoningVue: Run update
ReasoningVue->>HTMLDetailsElement: Scroll expanded details to bottom
ReasoningVue->>requestAnimationFrame: Cancel pending frame on unmount
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/components/src/bubble/renderers/Reasoning.vue`:
- Around line 39-48: The scheduleDetailUpdate path must not call
requestAnimationFrame during setup or in non-browser environments. Guard the
requestAnimationFrame scheduling with an appropriate browser/runtime check, or
defer the immediate watcher updates until after onMounted, while preserving the
existing displayedReasoningContent update and scroll behavior.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: a4d21da2-e019-498a-9722-fc544278ef31
📒 Files selected for processing (1)
packages/components/src/bubble/renderers/Reasoning.vue
📦 Package Previewpnpm add https://pkg.pr.new/@opentiny/tiny-robot@97cbf32 pnpm add https://pkg.pr.new/@opentiny/tiny-robot-kit@97cbf32 pnpm add https://pkg.pr.new/@opentiny/tiny-robot-svgs@97cbf32 commit: 97cbf32 |
🧹 Preview Cleaned UpThe preview deployment has been removed. |

优化 Reasoning 流式内容渲染,避免大文本场景卡顿
背景
Reasoning 内容持续流式增长时,组件会频繁更新文本并执行自动滚动。原实现每次更新都会触发
nextTick和smooth滚动,内容较大时容易造成主线程阻塞,导致页面卡顿。改动内容
requestAnimationFrame合并高频内容更新scrollTop验证
reasoning_content测试通过pnpm -F @opentiny/tiny-robot build构建通过packages/components/src/bubble/renderers/Reasoning.vueSummary by CodeRabbit