Add a button to delete user messages

webview-ui/src/components/chat/ChatRow.tsx

@@ -1,4 +1,4 @@
-import { VSCodeBadge, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeBadge, VSCodeButton, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react"
 import deepEqual from "fast-deep-equal"
 import React, { memo, useEffect, useMemo, useRef } from "react"
 import { useSize } from "react-use"
@@ -27,6 +27,7 @@ interface ChatRowProps {
 	lastModifiedMessage?: ClineMessage
 	isLast: boolean
 	onHeightChange: (isTaller: boolean) => void
+	isStreaming: boolean
 }
 
 interface ChatRowContentProps extends Omit<ChatRowProps, "onHeightChange"> {}
@@ -75,6 +76,7 @@ export const ChatRowContent = ({
 	onToggleExpand,
 	lastModifiedMessage,
 	isLast,
+	isStreaming,
 }: ChatRowContentProps) => {
 	const { mcpServers } = useExtensionState()
 	const [cost, apiReqCancelReason, apiReqStreamingFailedMessage] = useMemo(() => {
@@ -475,10 +477,9 @@ export const ChatRowContent = ({
 									msUserSelect: "none",
 								}}
 								onClick={onToggleExpand}>
-								<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+								<div style={{ display: "flex", alignItems: "center", gap: "10px", flexGrow: 1 }}>
 									{icon}
 									{title}
-									{/* Need to render this everytime since it affects height of row by 2px */}
 									<VSCodeBadge style={{ opacity: cost != null && cost > 0 ? 1 : 0 }}>
 										${Number(cost || 0)?.toFixed(4)}
 									</VSCodeBadge>
@@ -570,7 +571,29 @@ export const ChatRowContent = ({
 								whiteSpace: "pre-line",
 								wordWrap: "break-word",
 							}}>
-							<span style={{ display: "block" }}>{highlightMentions(message.text)}</span>
+							<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "10px" }}>
+								<span style={{ display: "block", flexGrow: 1 }}>{highlightMentions(message.text)}</span>
+								<VSCodeButton
+									appearance="icon"
+									style={{
+										padding: "3px",
+										flexShrink: 0,
+										height: "24px",
+										marginTop: "-6px",
+										marginRight: "-6px"
+									}}
+									disabled={isStreaming}
+									onClick={(e) => {
+										e.stopPropagation();
+										vscode.postMessage({
+											type: "deleteMessage",
+											value: message.ts
+										});
+									}}
+								>
+									<span className="codicon codicon-trash"></span>
+								</VSCodeButton>
+							</div>
 							{message.images && message.images.length > 0 && (
 								<Thumbnails images={message.images} style={{ marginTop: "8px" }} />
 							)}