perf(webui): fix streaming first-part display lag and optimize render…#4
Merged
duguwanglong merged 1 commit intomainfrom Mar 30, 2026
Merged
Conversation
… pipeline Problem: - "Thinking" and "streaming" indicators appeared with noticeable delay because startTransition deferred even structural state changes (new part creation), pushing parts.length 0→1 flip to an idle frame - flushSync on every SSE chunk blocked the main thread - ReactMarkdown was re-parsed on every chunk with visual plain-text→MD jump - Verbose console.log and info-level backend logs added overhead Changes: webui/src/hooks/useSessions.ts - Extract applyMessagePartUpdate as a testable pure function - Add knownPartIdsRef to distinguish new-part creation from content deltas - New parts (first appearance): direct setMessages — renders immediately - Known-part deltas: startTransition — allows React to batch low-priority - Evict part IDs from registry on message finish to prevent memory leak - Clear registry on session change via useLayoutEffect webui/src/components/common/SessionChat.tsx - Wrap ChatMessageBubble with React.memo + O(1) comparator (aligned with Open WebUI fast-path): skips re-render when isActive, parts.length, finish, and last-part text/thinking/state are unchanged - Replace ReactMarkdown + rehype imports with StreamingMarkdown component - Switch scrollIntoView from 'smooth' to 'instant' (eliminates queuing) webui/src/components/common/StreamingMarkdown.tsx (new) - rAF-throttled Markdown rendering: same-frame deltas coalesce into one ReactMarkdown parse, matching Open WebUI's Markdown.svelte mechanism - On streaming=false: cancel pending rAF and flush final content immediately webui/src/hooks/useSSE.ts - Guard all console.log/warn with import.meta.env.DEV flocks/session/streaming/stream_processor.py flocks/server/routes/event.py - Downgrade hot-path log calls from info to debug Tests: - webui/src/hooks/useSessions.test.ts (new): 13 tests covering applyMessagePartUpdate edge cases and updateMessagePart behaviour - webui/src/components/common/StreamingMarkdown.test.tsx (new): 6 tests covering rAF throttling and streaming-complete flush Made-with: Cursor
duguwanglong
approved these changes
Mar 30, 2026
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
2 participants
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.
Changes:
webui/src/hooks/useSessions.ts
webui/src/components/common/SessionChat.tsx
webui/src/components/common/StreamingMarkdown.tsx (new)
webui/src/hooks/useSSE.ts
flocks/session/streaming/stream_processor.py
flocks/server/routes/event.py
Tests: