From 22f337f659309724a9bd3653f9fa03cc23f5841a Mon Sep 17 00:00:00 2001
From: elianiva <51877647+elianiva@users.noreply.github.com>
Date: Fri, 9 May 2025 00:25:58 +0700
Subject: [PATCH 1/2] fix(prompts): save on blur to prevent race condition

---
 .../src/components/prompts/PromptsView.tsx    | 55 ++++++++++++-------
 .../prompts/__tests__/PromptsView.test.tsx    |  4 ++
 2 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/webview-ui/src/components/prompts/PromptsView.tsx b/webview-ui/src/components/prompts/PromptsView.tsx
index b76eebbba0..0e938a3d15 100644
--- a/webview-ui/src/components/prompts/PromptsView.tsx
+++ b/webview-ui/src/components/prompts/PromptsView.tsx
@@ -431,6 +431,21 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 		})
 	}
 
+	// keep track the state of the textareas locally because we sync them with the backend
+	// on separate event
+	const [roleDefinitionValue, setRoleDefinitionValue] = useState(() => {
+		const customMode = findModeBySlug(visualMode, customModes)
+		const prompt = customModePrompts?.[visualMode] as PromptComponent
+		return customMode?.roleDefinition ?? prompt?.roleDefinition ?? getRoleDefinition(visualMode)
+	})
+	const [customInstructionsValue, setCustomInstructionsValue] = useState(customInstructions || "")
+	const [globalCustomInstructionsValue, setGlobalCustomInstructionsValue] = useState(() => {
+		const customMode = findModeBySlug(visualMode, customModes)
+		const prompt = customModePrompts?.[visualMode] as PromptComponent
+		return customMode?.customInstructions ?? prompt?.customInstructions ?? getCustomInstructions(mode, customModes)
+	})
+	const [supportPromptValue, setSupportPromptValue] = useState(getSupportPromptValue(activeSupportOption) || "")
+
 	return (
 		<Tab>
 			<TabHeader className="flex justify-between items-center">
@@ -667,19 +682,15 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 							{t("prompts:roleDefinition.description")}
 						</div>
 						<Textarea
-							value={(() => {
-								const customMode = findModeBySlug(visualMode, customModes)
-								const prompt = customModePrompts?.[visualMode] as PromptComponent
-								return (
-									customMode?.roleDefinition ??
-									prompt?.roleDefinition ??
-									getRoleDefinition(visualMode)
-								)
-							})()}
+							value={roleDefinitionValue}
 							onChange={(e) => {
 								const value =
 									(e as unknown as CustomEvent)?.detail?.target?.value ||
 									((e as any).target as HTMLTextAreaElement).value
+								setRoleDefinitionValue(value)
+							}}
+							onBlur={() => {
+								const value = roleDefinitionValue
 								const customMode = findModeBySlug(visualMode, customModes)
 								if (customMode) {
 									// For custom modes, update the JSON file
@@ -849,19 +860,15 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 							})}
 						</div>
 						<Textarea
-							value={(() => {
-								const customMode = findModeBySlug(visualMode, customModes)
-								const prompt = customModePrompts?.[visualMode] as PromptComponent
-								return (
-									customMode?.customInstructions ??
-									prompt?.customInstructions ??
-									getCustomInstructions(mode, customModes)
-								)
-							})()}
+							value={customInstructionsValue}
 							onChange={(e) => {
 								const value =
 									(e as unknown as CustomEvent)?.detail?.target?.value ||
 									((e as any).target as HTMLTextAreaElement).value
+								setCustomInstructionsValue(value)
+							}}
+							onBlur={() => {
+								const value = customInstructionsValue
 								const customMode = findModeBySlug(visualMode, customModes)
 								if (customMode) {
 									// For custom modes, update the JSON file
@@ -1003,11 +1010,15 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 						})}
 					</div>
 					<Textarea
-						value={customInstructions}
+						value={globalCustomInstructionsValue}
 						onChange={(e) => {
 							const value =
 								(e as unknown as CustomEvent)?.detail?.target?.value ||
 								((e as any).target as HTMLTextAreaElement).value
+							setGlobalCustomInstructionsValue(value)
+						}}
+						onBlur={() => {
+							const value = globalCustomInstructionsValue
 							setCustomInstructions(value || undefined)
 							vscode.postMessage({
 								type: "customInstructions",
@@ -1081,11 +1092,15 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 						</div>
 
 						<Textarea
-							value={getSupportPromptValue(activeSupportOption)}
+							value={supportPromptValue}
 							onChange={(e) => {
 								const value =
 									(e as unknown as CustomEvent)?.detail?.target?.value ||
 									((e as any).target as HTMLTextAreaElement).value
+								setSupportPromptValue(value)
+							}}
+							onBlur={() => {
+								const value = supportPromptValue
 								const trimmedValue = value.trim()
 								updateSupportPrompt(activeSupportOption, trimmedValue || undefined)
 							}}
diff --git a/webview-ui/src/components/prompts/__tests__/PromptsView.test.tsx b/webview-ui/src/components/prompts/__tests__/PromptsView.test.tsx
index e72b369945..674f6cb380 100644
--- a/webview-ui/src/components/prompts/__tests__/PromptsView.test.tsx
+++ b/webview-ui/src/components/prompts/__tests__/PromptsView.test.tsx
@@ -1,3 +1,5 @@
+// npx jest src/components/prompts/__tests__/PromptsView.test.tsx
+
 import { render, screen, fireEvent, waitFor } from "@testing-library/react"
 import PromptsView from "../PromptsView"
 import { ExtensionStateContext } from "@src/context/ExtensionStateContext"
@@ -122,6 +124,7 @@ describe("PromptsView", () => {
 		fireEvent.change(textarea, {
 			target: { value: "New prompt value" },
 		})
+		fireEvent.blur(textarea)
 
 		expect(vscode.postMessage).toHaveBeenCalledWith({
 			type: "updatePrompt",
@@ -203,6 +206,7 @@ describe("PromptsView", () => {
 		fireEvent.change(textarea, {
 			target: { value: "" },
 		})
+		fireEvent.blur(textarea)
 
 		expect(setCustomInstructions).toHaveBeenCalledWith(undefined)
 		expect(vscode.postMessage).toHaveBeenCalledWith({

From 8c332040a33375d2a3cc1933ffea00a41a16403f Mon Sep 17 00:00:00 2001
From: elianiva <51877647+elianiva@users.noreply.github.com>
Date: Fri, 9 May 2025 03:56:09 +0700
Subject: [PATCH 2/2] fix(prompts): revert back to vscode textarea

---
 .../src/components/prompts/PromptsView.tsx    | 76 ++++++++-----------
 .../prompts/__tests__/PromptsView.test.tsx    |  2 -
 2 files changed, 30 insertions(+), 48 deletions(-)

diff --git a/webview-ui/src/components/prompts/PromptsView.tsx b/webview-ui/src/components/prompts/PromptsView.tsx
index 0e938a3d15..de3d364769 100644
--- a/webview-ui/src/components/prompts/PromptsView.tsx
+++ b/webview-ui/src/components/prompts/PromptsView.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo, useCallback, useRef } from "react"
 import { Button } from "@/components/ui/button"
-import { VSCodeCheckbox, VSCodeRadioGroup, VSCodeRadio } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeCheckbox, VSCodeRadioGroup, VSCodeRadio, VSCodeTextArea } from "@vscode/webview-ui-toolkit/react"
 
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import {
@@ -27,7 +27,6 @@ import {
 	SelectItem,
 	SelectTrigger,
 	SelectValue,
-	Textarea,
 	Popover,
 	PopoverContent,
 	PopoverTrigger,
@@ -431,21 +430,6 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 		})
 	}
 
-	// keep track the state of the textareas locally because we sync them with the backend
-	// on separate event
-	const [roleDefinitionValue, setRoleDefinitionValue] = useState(() => {
-		const customMode = findModeBySlug(visualMode, customModes)
-		const prompt = customModePrompts?.[visualMode] as PromptComponent
-		return customMode?.roleDefinition ?? prompt?.roleDefinition ?? getRoleDefinition(visualMode)
-	})
-	const [customInstructionsValue, setCustomInstructionsValue] = useState(customInstructions || "")
-	const [globalCustomInstructionsValue, setGlobalCustomInstructionsValue] = useState(() => {
-		const customMode = findModeBySlug(visualMode, customModes)
-		const prompt = customModePrompts?.[visualMode] as PromptComponent
-		return customMode?.customInstructions ?? prompt?.customInstructions ?? getCustomInstructions(mode, customModes)
-	})
-	const [supportPromptValue, setSupportPromptValue] = useState(getSupportPromptValue(activeSupportOption) || "")
-
 	return (
 		<Tab>
 			<TabHeader className="flex justify-between items-center">
@@ -681,16 +665,20 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 						<div className="text-sm text-vscode-descriptionForeground mb-2">
 							{t("prompts:roleDefinition.description")}
 						</div>
-						<Textarea
-							value={roleDefinitionValue}
+						<VSCodeTextArea
+							value={(() => {
+								const customMode = findModeBySlug(visualMode, customModes)
+								const prompt = customModePrompts?.[visualMode] as PromptComponent
+								return (
+									customMode?.roleDefinition ??
+									prompt?.roleDefinition ??
+									getRoleDefinition(visualMode)
+								)
+							})()}
 							onChange={(e) => {
 								const value =
 									(e as unknown as CustomEvent)?.detail?.target?.value ||
 									((e as any).target as HTMLTextAreaElement).value
-								setRoleDefinitionValue(value)
-							}}
-							onBlur={() => {
-								const value = roleDefinitionValue
 								const customMode = findModeBySlug(visualMode, customModes)
 								if (customMode) {
 									// For custom modes, update the JSON file
@@ -859,16 +847,20 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								modeName: getCurrentMode()?.name || "Code",
 							})}
 						</div>
-						<Textarea
-							value={customInstructionsValue}
+						<VSCodeTextArea
+							value={(() => {
+								const customMode = findModeBySlug(visualMode, customModes)
+								const prompt = customModePrompts?.[visualMode] as PromptComponent
+								return (
+									customMode?.customInstructions ??
+									prompt?.customInstructions ??
+									getCustomInstructions(mode, customModes)
+								)
+							})()}
 							onChange={(e) => {
 								const value =
 									(e as unknown as CustomEvent)?.detail?.target?.value ||
 									((e as any).target as HTMLTextAreaElement).value
-								setCustomInstructionsValue(value)
-							}}
-							onBlur={() => {
-								const value = customInstructionsValue
 								const customMode = findModeBySlug(visualMode, customModes)
 								if (customMode) {
 									// For custom modes, update the JSON file
@@ -1009,16 +1001,12 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 							language: i18next.language,
 						})}
 					</div>
-					<Textarea
-						value={globalCustomInstructionsValue}
+					<VSCodeTextArea
+						value={customInstructions}
 						onChange={(e) => {
 							const value =
 								(e as unknown as CustomEvent)?.detail?.target?.value ||
 								((e as any).target as HTMLTextAreaElement).value
-							setGlobalCustomInstructionsValue(value)
-						}}
-						onBlur={() => {
-							const value = globalCustomInstructionsValue
 							setCustomInstructions(value || undefined)
 							vscode.postMessage({
 								type: "customInstructions",
@@ -1091,16 +1079,12 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 							</Button>
 						</div>
 
-						<Textarea
-							value={supportPromptValue}
+						<VSCodeTextArea
+							value={getSupportPromptValue(activeSupportOption)}
 							onChange={(e) => {
 								const value =
 									(e as unknown as CustomEvent)?.detail?.target?.value ||
 									((e as any).target as HTMLTextAreaElement).value
-								setSupportPromptValue(value)
-							}}
-							onBlur={() => {
-								const value = supportPromptValue
 								const trimmedValue = value.trim()
 								updateSupportPrompt(activeSupportOption, trimmedValue || undefined)
 							}}
@@ -1155,7 +1139,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								</div>
 
 								<div className="mt-4">
-									<Textarea
+									<VSCodeTextArea
 										value={testPrompt}
 										onChange={(e) => setTestPrompt((e.target as HTMLTextAreaElement).value)}
 										placeholder={t("prompts:supportPrompts.enhance.testPromptPlaceholder")}
@@ -1260,10 +1244,10 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 									}}>
 									{t("prompts:createModeDialog.roleDefinition.description")}
 								</div>
-								<Textarea
+								<VSCodeTextArea
 									value={newModeRoleDefinition}
 									onChange={(e) => {
-										setNewModeRoleDefinition(e.target.value)
+										setNewModeRoleDefinition((e.target as HTMLTextAreaElement).value)
 									}}
 									rows={4}
 									className="w-full resize-y"
@@ -1311,10 +1295,10 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								<div className="text-[13px] text-vscode-descriptionForeground mb-2">
 									{t("prompts:createModeDialog.customInstructions.description")}
 								</div>
-								<Textarea
+								<VSCodeTextArea
 									value={newModeCustomInstructions}
 									onChange={(e) => {
-										setNewModeCustomInstructions(e.target.value)
+										setNewModeCustomInstructions((e.target as HTMLTextAreaElement).value)
 									}}
 									rows={4}
 									className="w-full resize-y"
diff --git a/webview-ui/src/components/prompts/__tests__/PromptsView.test.tsx b/webview-ui/src/components/prompts/__tests__/PromptsView.test.tsx
index 674f6cb380..2015ffd0fb 100644
--- a/webview-ui/src/components/prompts/__tests__/PromptsView.test.tsx
+++ b/webview-ui/src/components/prompts/__tests__/PromptsView.test.tsx
@@ -124,7 +124,6 @@ describe("PromptsView", () => {
 		fireEvent.change(textarea, {
 			target: { value: "New prompt value" },
 		})
-		fireEvent.blur(textarea)
 
 		expect(vscode.postMessage).toHaveBeenCalledWith({
 			type: "updatePrompt",
@@ -206,7 +205,6 @@ describe("PromptsView", () => {
 		fireEvent.change(textarea, {
 			target: { value: "" },
 		})
-		fireEvent.blur(textarea)
 
 		expect(setCustomInstructions).toHaveBeenCalledWith(undefined)
 		expect(vscode.postMessage).toHaveBeenCalledWith({