perf(chat): reduce long stream rendering cost#7297
Merged
c121914yu merged 4 commits intoJul 14, 2026
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR reduces ChatBox long-answer streaming rendering cost by switching Markdown stream animation from character-level spans to a bounded “tail” element, and by throttling stream UI flushes to 20Hz with an explicit scheduler that can be force-flushed on completion/error/stop/resume transitions.
Changes:
- Replace per-character streaming animation with a bounded
<stream-tail>wrapper plus a Web Animations API-based fade-in renderer. - Add a 50ms (20Hz) stream render scheduler and integrate it into
useChatGenerate, with explicit flush support for resume/finish/error paths. - Add focused unit/regression tests plus design/analysis docs for the performance work.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| projects/app/src/components/Markdown/rehypeStreamAnimated.ts | Replaces character-span rewriting with bounded tail wrapping and append-length computation. |
| projects/app/src/components/Markdown/index.tsx | Adds <stream-tail> renderer and computes per-commit tail length to animate only the newest append. |
| projects/app/src/components/Markdown/index.module.scss | Updates styling to support the new stream-tail animation approach. |
| projects/app/src/components/core/chat/ChatContainer/ChatBox/utils/streamRenderScheduler.ts | Introduces a 50ms throttled timer+rAF scheduler for stream flushes. |
| projects/app/src/components/core/chat/ChatContainer/ChatBox/hooks/useChatGenerate.ts | Integrates the scheduler, exposes flushGeneratingMessages, and cancels pending work on unmount. |
| projects/app/src/components/core/chat/ChatContainer/ChatBox/hooks/useChatResume.ts | Flushes buffered stream updates before applying final completion/error/stop transitions. |
| projects/app/src/components/core/chat/ChatContainer/ChatBox/index.tsx | Threads flushGeneratingMessages into resume flow wiring. |
| projects/app/test/components/Markdown/rehypeStreamAnimated.test.ts | Adds unit coverage for tail wrapping behavior and append-length edge cases (Unicode/emoji, skip boundaries). |
| projects/app/test/components/core/chat/ChatContainer/ChatBox/streamRenderScheduler.test.ts | Adds deterministic unit tests for scheduler coalescing/flush/cancel semantics and default runtime. |
| .agents/issue/chatbox-long-stream-render-performance-analysis.md | Adds analysis write-up documenting observed bottlenecks and measurement approach. |
| .agents/design/core/chat/chatbox-stream-tail-performance.md | Adds design doc describing the tail-based animation + 20Hz scheduling approach and tests. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+11
to
+17
| const browserRuntime: StreamRenderSchedulerRuntime = { | ||
| now: () => performance.now(), | ||
| setTimer: (callback, delay) => window.setTimeout(callback, delay), | ||
| clearTimer: (id) => window.clearTimeout(id), | ||
| requestFrame: (callback) => window.requestAnimationFrame(callback), | ||
| cancelFrame: (id) => window.cancelAnimationFrame(id) | ||
| }; |
|
✅ Build Successful - Preview fastgpt Image for this PR: 🕒 Time: 2026-07-14 17:00:33 (UTC+8) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This change reduces long-answer streaming cost in ChatBox. It replaces character-level Markdown spans with a bounded tail element that keeps the existing fade-in without a cursor, throttles ordinary stream commits to 50ms (20Hz), flushes buffered updates before completion/error/stop/resume status transitions, and adds the analysis/design docs plus regression coverage. Validation: 28 Markdown/scheduler tests passed; 12 Markdown/ChatBox regression files with 109 tests passed; App typecheck passed; Prettier passed; targeted lint has 0 errors, with 11 existing warnings in ChatBox/index.tsx.