feat: allow editing the last user message#703
Conversation
Add an edit button (pencil icon) to the last user message bubble that appears on hover. Clicking it switches the message to an inline textarea. Enter saves and resends the edited content to get a new agent response. Escape cancels without changes. Changes: - MessageRow: add onEditMessage prop, edit state with auto-resize textarea, edit button in .chat-bubble-actions (hover-visible) - MessageList: pass onEditMessage through to MessageRow - Chat: handleEditMessage updates the message in state and resends - main.css: .chat-bubble gets position:relative, .chat-bubble-actions (hover reveal), .chat-bubble-edit-btn, .chat-bubble-edit textarea - i18n: add editMessage string to all 10 locales
Greptile SummaryThis PR adds inline editing of the last user message: a hover-revealed pencil button turns the bubble into an auto-resizing textarea, with Enter to commit and Escape to cancel, wired through
Confidence Score: 2/5The core editing feature does not work as described: the edit button will not appear during a normal completed conversation, and when triggered it would corrupt the message list with a duplicate entry. Two independent defects affect the central user-facing path: the visibility condition is wrong so the button is never shown in normal use, and the send handler appends a duplicate user message instead of replacing the existing one. The CSS and i18n changes are solid, but the feature itself is broken end-to-end. Chat.tsx (handleEditMessage logic) and MessageList.tsx (isLast vs last-user-message propagation) both need attention before this is functional. Important Files Changed
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| // Edit the last user message and resend | ||
| const handleEditMessage = useCallback( | ||
| (msgId: string, newContent: string) => { | ||
| setMessages((prev) => | ||
| prev.map((m) => | ||
| m.id === msgId ? { ...m, content: newContent } : m, | ||
| ), | ||
| ); | ||
| void handleSendRef.current(newContent, []); | ||
| }, | ||
| [], | ||
| ); |
There was a problem hiding this comment.
handleEditMessage does two things in sequence: it patches the existing message via setMessages, then immediately calls handleSendRef.current(newContent, []). handleSend unconditionally calls pushUser, which appends a brand-new user message. The result is that after committing an edit the conversation contains both the in-place updated message and a duplicate user message with identical content.
On top of that, sendToAgent reads messagesRef.current (a ref that is only synced after the next render via useEffect), so the history passed to the gateway is the snapshot from before the edit — the agent still sees the original, unedited user message in its context.
The intended behaviour (edit in-place then regenerate) requires truncating the conversation to just before the agent response that followed the edited message and using a dedicated send path that does not call pushUser.
| )} | ||
| </div> | ||
| ); | ||
| }); | ||
| }); No newline at end of file |
There was a problem hiding this comment.
\ No newline at end of file, which will produce noisy future diffs and may trigger linter warnings.
| )} | |
| </div> | |
| ); | |
| }); | |
| }); | |
| </div> | |
| ); | |
| }); |
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
1 participant
Feature
Allow editing the last user message and regenerating the agent response. An edit button (pencil icon) appears on hover over the last user message. Clicking it turns the message into an inline textarea. Enter saves and resends, Escape cancels.
Changes