feat(site): improve edit-message UX with dedicated button and confirmation#23172
Merged
DanielleMaywood merged 1 commit intomainfrom Mar 17, 2026
Merged
feat(site): improve edit-message UX with dedicated button and confirmation#23172DanielleMaywood merged 1 commit intomainfrom
DanielleMaywood merged 1 commit intomainfrom
Conversation
DanielleMaywood
changed the title
DanielleMaywood
force-pushed
the
dm/edit-message-chatbox
branch
9 times, most recently
from
5dd9e91 to
faf32c8
Compare
DanielleMaywood
commented
Mar 17, 2026
Comment on lines
+562
to
578
| // | ||
| // However, if the fetched set is missing message IDs the store | ||
| // already has (e.g. after an edit truncation), a full replace | ||
| // is needed because upsert can only add/update, not remove. | ||
| if (chatMessages) { | ||
| for (const message of chatMessages) { | ||
| store.upsertDurableMessage(message); | ||
| const fetchedIDs = new Set(chatMessages.map((m) => m.id)); | ||
| const storeSnap = store.getSnapshot(); | ||
| const hasStaleEntries = storeSnap.orderedMessageIDs.some( | ||
| (id) => !fetchedIDs.has(id), | ||
| ); | ||
| if (hasStaleEntries) { | ||
| store.replaceMessages(chatMessages); | ||
| } else { | ||
| for (const message of chatMessages) { | ||
| store.upsertDurableMessage(message); | ||
| } | ||
| } |
Contributor
Author
There was a problem hiding this comment.
Without this change it'd require a page reload to remove the later messages
…rmation Replace click-to-edit on user messages with a dedicated pencil button that appears on hover, so message text can be freely selected and copied. Key changes: - Add hover-visible pencil edit button on user message bubbles with tooltip, replacing the click-anywhere-to-edit behavior - Make the editing banner in AgentChatInput a lightweight border separator with warning-colored text instead of a heavy colored block - Add a two-step confirmation flow: first submit shows a warning banner, second submit sends the edit - Send button label changes to 'Save Edit' when editing - Visually fade (opacity-40) all messages after the one being edited to signal they will be deleted - Highlight the edited message and chatbox with a matching box-shadow outline in border-warning color - Reset the Lexical editor text on edit cancel - Pass isAfterEditingMessage through StickyUserMessage and ChatMessageItem for the fading effect
DanielleMaywood
force-pushed
the
dm/edit-message-chatbox
branch
from
faf32c8 to
59462fd
Compare
kylecarbs
approved these changes
Mar 17, 2026
Comment on lines
+920
to
+921
| // Build a set of message IDs that appear after the message | ||
| // currently being edited so they can be visually faded. |
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.
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.
Summary
Replace click-to-edit on user messages with a dedicated pencil button that appears on hover, so message text can be freely selected and copied.
Changes
Files changed
AgentChatInput.tsx— editing banner, confirmation flow, chatbox outline, send button labelConversationTimeline.tsx— pencil edit button, message highlight, after-editing fadingAgentDetail.tsx— reset editor on cancel