fix(site): skip streaming animation on first engine update#22535
Closed
fix(site): skip streaming animation on first engine update#22535
Conversation
When navigating away from the agents chat page and returning, the smooth text streaming animation replayed all existing text. This happened because the WebSocket reconnects and replays buffered message_part events, rebuilding streamState from scratch. The SmoothTextEngine then animated from visibleLength=0 through all the text via requestAnimationFrame. Fix: add a firstUpdate flag to SmoothTextEngine that snaps to full length on the very first update() call. This means pre-existing text (reconnect snapshot) renders instantly. Subsequent updates animate normally since firstUpdate is already consumed.
c0d06e1 to
b2f7ce1
Compare
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
1 participant
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.
Problem
When navigating away from the agents chat page and returning, the smooth text streaming animation replays all existing text — you see the text animate in as if it's being freshly streamed.
Root Cause
On reconnect, the WebSocket replays all buffered
message_partevents as a snapshot. The client rebuildsstreamStatefrom scratch, soSmoothTextEnginestarts atvisibleLength = 0and usesrequestAnimationFrameto animate through all the text. Even with theMAX_VISUAL_LAG_CHARS(120) cap, the last 120 characters still visibly animate in.Fix
Added a
firstUpdateflag toSmoothTextEngine. On the very firstupdate()call, the engine snaps to the full text length instead of starting the RAF animation loop. This means:The flag resets on
reset()and new engine instances start with it set totrue.Changes
SmoothText.ts: AddedfirstUpdateflag that bypasses animation on firstupdate()callSmoothText.test.ts: Added explicit test for first-update snap behavior; updated existing tests to usecreateStreamingEngine()helper that consumes the first update so they continue testing incremental animation correctly