fix(transcript): scroll to latest message on first open#134
Open
mpmisha wants to merge 1 commit into
Open
Conversation
Opening the transcript on a long conversation used to land at the very first message instead of the most recent one. The initial fetch called scrollToBottom() inside a single requestAnimationFrame right after setMsgs(next), but React hadn't rendered the new bubbles yet so scrollHeight was still ~clientHeight and scrollTop = scrollHeight effectively landed at the top. Move the first-render jump into a useLayoutEffect keyed on the session id, which fires after the DOM is laid out (scrollHeight is correct) but before paint (no visible flicker). A ref tracks which session has already had its initial scroll done, so the jump runs exactly once per session/open cycle and live polls don't re-trigger it. The live-poll glue-to-bottom path is preserved for follow-up updates when the user is already at the bottom. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
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.
What
Opening the Transcript panel (⌘+⌥+T / title-bar button) on a long conversation used to dump you at the very first message instead of jumping to the most recent one.
Why
The initial fetch in
TranscriptPanel.tsxcalledscrollToBottom()inside a singlerequestAnimationFrameimmediately aftersetMsgs(next). React hadn't actually rendered the new bubbles yet at that point, soscrollHeight ≈ clientHeightandscrollTop = scrollHeighteffectively landed at the top. After the real render committed, the view stayed parked at message #1.How
useLayoutEffectkeyed on[open, aiSessionId, msgs]that performs the first-render jump. It runs after layout (soscrollHeightis correct) but before paint (no visible flicker / jump).initialScrolledForReftracks which session id has already had its initial scroll-to-bottom done, so the jump fires exactly once per session/open cycle and live polls don't re-trigger it.initial ||short-circuit in the fetch path was removed.Testing
Manual:
npx tsc --noEmitshows no new errors in the touched file (a handful of pre-existing errors in unrelated files are untouched).