Add revert button to user messages

- Add revert icon (↶) button in message header for all user messages
- Clicking revert button reverts session to that specific message
- Restores the message text back to the prompt input
- Style revert button with hover effects and border highlight
- Revert action updates UI automatically via SSE session.updated event
This commit is contained in:
Shantur Rathore
2025-10-24 17:44:19 +01:00
parent 3edd852ee2
commit 1362a5872a
4 changed files with 89 additions and 1 deletions

View File

@@ -6,6 +6,7 @@ interface MessageItemProps {
message: Message
messageInfo?: any
isQueued?: boolean
onRevert?: (messageId: string) => void
}
export default function MessageItem(props: MessageItemProps) {
@@ -42,11 +43,27 @@ export default function MessageItem(props: MessageItemProps) {
return !hasContent() && props.messageInfo?.time?.completed === 0
}
const handleRevert = () => {
if (props.onRevert && isUser()) {
props.onRevert(props.message.id)
}
}
return (
<div class={`message-item ${isUser() ? "user" : "assistant"}`}>
<div class="message-header">
<span class="message-sender">{isUser() ? "You" : "Assistant"}</span>
<span class="message-timestamp">{timestamp()}</span>
<Show when={isUser() && props.onRevert}>
<button
class="message-revert-button"
onClick={handleRevert}
title="Revert to this message"
aria-label="Revert to this message"
>
</button>
</Show>
</div>
<div class="message-content">

View File

@@ -17,6 +17,7 @@ interface MessageStreamProps {
diff?: string
}
loading?: boolean
onRevert?: (messageId: string) => void
}
interface DisplayItem {
@@ -179,7 +180,12 @@ export default function MessageStream(props: MessageStreamProps) {
</div>
}
>
<MessageItem message={item.data} messageInfo={item.messageInfo} isQueued={item.data.isQueued} />
<MessageItem
message={item.data}
messageInfo={item.messageInfo}
isQueued={item.data.isQueued}
onRevert={props.onRevert}
/>
</Show>
)
}}