fix: an issue in the HistoryView component where keywords in copied content contain html code

Author: im47cn

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

@@ -14,7 +14,10 @@ export const CopyButton = ({ itemTask }: CopyButtonProps) => {
 	const onCopy = useCallback(
 		(e: React.MouseEvent) => {
 			e.stopPropagation()
-			!isCopied && copy(itemTask)
+			const tempDiv = document.createElement('div');
+			tempDiv.innerHTML = itemTask;
+			const text = tempDiv.textContent || tempDiv.innerText || "";
+			!isCopied && copy(text)
 		},
 		[isCopied, copy, itemTask],
 	)

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

@@ -92,6 +92,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 					}}
 					data={tasks}
 					data-testid="virtuoso-container"
+					initialTopMostItemIndex={0}
 					components={{
 						List: React.forwardRef((props, ref) => (
 							<div {...props} ref={ref} data-testid="virtuoso-item-list" />
@@ -159,6 +160,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 										wordBreak: "break-word",
 										overflowWrap: "anywhere",
 									}}
+									data-testid="task-content"
 									dangerouslySetInnerHTML={{ __html: item.task }}
 								/>
 								<div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
@@ -304,8 +306,8 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 												</span>
 											</div>
 											<div className="flex flex-row gap-1">
-												<CopyButton itemTask={item.task} />
-												<ExportButton itemId={item.id} />
+											  <CopyButton itemTask={item.task} />
+											  <ExportButton itemId={item.id} />
 											</div>
 										</div>
 									)}

webview-ui/src/components/history/__tests__/HistoryView.test.tsx

@@ -7,7 +7,7 @@ import { vscode } from "../../../utils/vscode"
 
 jest.mock("../../../context/ExtensionStateContext")
 jest.mock("../../../utils/vscode")
-
+  
 jest.mock("react-virtuoso", () => ({
 	Virtuoso: ({ data, itemContent }: any) => (
 		<div data-testid="virtuoso-container">
@@ -70,6 +70,12 @@ describe("HistoryView", () => {
 	})
 
 	it("handles search functionality", () => {
+		// Setup clipboard mock that resolves immediately
+		const mockClipboard = {
+			writeText: jest.fn().mockResolvedValue(undefined),
+		}
+		Object.assign(navigator, { clipboard: mockClipboard })
+
 		const onDone = jest.fn()
 		render(<HistoryView onDone={onDone} />)
 
@@ -96,6 +102,14 @@ describe("HistoryView", () => {
 		// Verify radio button is checked
 		const updatedRadio = within(radioGroup).getByRole("radio", { name: "Most Relevant", checked: true })
 		expect(updatedRadio).toBeInTheDocument()
+
+		// Verify copy the plain text content of the task when the copy button is clicked
+		const taskContainer = screen.getByTestId("virtuoso-item-1")
+		fireEvent.mouseEnter(taskContainer)
+		const copyButton = within(taskContainer).getByTitle("Copy Prompt");
+		fireEvent.click(copyButton);
+		const taskContent = within(taskContainer).getByTestId("task-content");
+		expect(navigator.clipboard.writeText).toHaveBeenCalledWith(taskContent.textContent);
 	})
 
 	it("handles sort options correctly", async () => {