Repository navigation
fix(studio): give the chat transcript and composer distinct React keys - #74
Open
mhmdjaouhari wants to merge 1 commit into
Open
mhmdjaouhari wants to merge 1 commit into
mhmdjaouhari wants to merge 1 commit into
Conversation
ChatPanel keyed both ChatMessages and ChatComposer with chat.id under the same parent. With duplicate sibling keys, React's reconciler drops one of the old fibers from its key map without deleting its DOM node, so every render of a chat with history left an orphaned transcript in the page. The stale copies scrolled independently, kept "Thinking through your request…" rows that never cleared, and pushed the composer off-screen. The behaviour is the same in React's development and production builds; only the "two children with the same key" warning differs. It affects every place Studio runs: the hosted Worker/container, `astro-studio dev`, and the local Studio that Desktop opens in the browser. The Desktop renderer has no chat panel of its own. Prefixing the keys keeps the intended reset-on-chat-switch behaviour and makes the siblings distinct. The browser suite now seeds a saved chat, types six characters, and asserts a single transcript; without the fix it finds ten.
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.
Found this bug while experimenting with the Studio. The chat history gets duplicated infinitely after a while making the UI unusable. See image at the bottom of the description.
A test has been added but maybe it's not necessary.
More details below generated by Opus 5.5:
fix(studio): give the chat transcript and composer distinct React keys
Problem
ChatPanelrendered<ChatMessages key={chat.id}>and<ChatComposer key={chat.id}>as siblings. Duplicate sibling keys make React's reconciler drop one old fiber from its key map without removing its DOM node. In a chat with history, every render (every keystroke, every streamed update) left an orphaned transcript in the page. The result was stacked, separately scrolling copies of the conversation, "Thinking through your request…" rows that never cleared, and a composer pushed off-screen.Scope
astro-studio dev, and the local Studio that Desktop opens in the browser. All of them serve the sameChatPanel. The Desktop (Electron) renderer has no AI chat panel.Fix
The keys are now
messages-${chat.id}andcomposer-${chat.id}. They still reset each part's local state when the user switches chats, and they no longer collide.Tests
test/ai.browser.ts: newverifySingleTranscriptseeds a saved chat with two messages in IndexedDB, reloads, types six characters, and asserts exactly one.chat-transcript.verifyImagesalready times out waiting for the "Choose PNG" alert onmain, so the fullai.browser.tsrun stops before reaching the new check. The new check was run on its own against the fixture site.npm run check, ESLint and Prettier pass for Studio.