Update HistoryPreview.tsx

Added a copy button to the history preview view

Author: hannesrudolph

webview-ui/src/components/history/HistoryPreview.tsx

@@ -1,7 +1,7 @@
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
 import { useExtensionState } from "../../context/ExtensionStateContext"
 import { vscode } from "../../utils/vscode"
-import { memo } from "react"
+import { memo, useState } from "react"
 import { formatLargeNumber } from "../../utils/format"
 
 type HistoryPreviewProps = {
@@ -10,6 +10,18 @@ type HistoryPreviewProps = {
 
 const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
 	const { taskHistory } = useExtensionState()
+	const [showCopyModal, setShowCopyModal] = useState(false)
+
+	const handleCopyTask = async (e: React.MouseEvent, task: string) => {
+		e.stopPropagation()
+		try {
+			await navigator.clipboard.writeText(task)
+			setShowCopyModal(true)
+			setTimeout(() => setShowCopyModal(false), 2000)
+		} catch (error) {
+			console.error("Failed to copy to clipboard:", error)
+		}
+	}
 	const handleHistorySelect = (id: string) => {
 		vscode.postMessage({ type: "showTaskWithId", text: id })
 	}
@@ -31,8 +43,30 @@ const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
 
 	return (
 		<div style={{ flexShrink: 0 }}>
+			{showCopyModal && <div className="copy-modal">Prompt Copied to Clipboard</div>}
 			<style>
 				{`
+					.copy-modal {
+						position: fixed;
+						top: 50%;
+						left: 50%;
+						transform: translate(-50%, -50%);
+						background-color: var(--vscode-notifications-background);
+						color: var(--vscode-notifications-foreground);
+						padding: 12px 20px;
+						border-radius: 4px;
+						box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+						z-index: 1000;
+						transition: opacity 0.2s ease-in-out;
+					}
+					.copy-button {
+						opacity: 0;
+						pointer-events: none;
+					}
+					.history-preview-item:hover .copy-button {
+						opacity: 1;
+						pointer-events: auto;
+					}
 					.history-preview-item {
 						background-color: color-mix(in srgb, var(--vscode-toolbar-hoverBackground) 65%, transparent);
 						border-radius: 4px;
@@ -79,8 +113,8 @@ const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
 							key={item.id}
 							className="history-preview-item"
 							onClick={() => handleHistorySelect(item.id)}>
-							<div style={{ padding: "12px" }}>
-								<div style={{ marginBottom: "8px" }}>
+							<div style={{ padding: "12px", position: "relative" }}>
+								<div style={{ marginBottom: "8px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
 									<span
 										style={{
 											color: "var(--vscode-descriptionForeground)",
@@ -90,6 +124,13 @@ const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
 										}}>
 										{formatDate(item.ts)}
 									</span>
+									<button
+										title="Copy Prompt"
+										className="copy-button"
+										data-appearance="icon"
+										onClick={(e) => handleCopyTask(e, item.task)}>
+										<span className="codicon codicon-copy"></span>
+									</button>
 								</div>
 								<div
 									style={{