support chat draft

Author: qdaxb

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

@@ -9,6 +9,7 @@ import { ExtensionMessage } from "@roo/ExtensionMessage"
 
 import { vscode } from "@/utils/vscode"
 import { useExtensionState } from "@/context/ExtensionStateContext"
+import { useChatTextDraft } from "./hooks/useChatTextDraft"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import {
 	ContextMenuOptionType,
@@ -69,6 +70,10 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 		ref,
 	) => {
 		const { t } = useAppTranslation()
+
+		// Chat draft persistence
+		const { handleSendAndClearDraft } = useChatTextDraft("chat_textarea_draft", inputValue, setInputValue, onSend)
+
 		const {
 			filePaths,
 			openedTabs,
@@ -389,7 +394,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					if (!sendingDisabled) {
 						// Reset history navigation state when sending
 						resetHistoryNavigation()
-						onSend()
+						handleSendAndClearDraft()
 					}
 				}
 
@@ -438,22 +443,22 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 				}
 			},
 			[
-				sendingDisabled,
-				onSend,
 				showContextMenu,
-				searchQuery,
+				handleHistoryNavigation,
 				selectedMenuIndex,
-				handleMentionSelect,
-				selectedType,
+				searchQuery,
 				inputValue,
-				cursorPosition,
-				setInputValue,
-				justDeletedSpaceAfterMention,
+				selectedType,
 				queryItems,
-				allModes,
 				fileSearchResults,
-				handleHistoryNavigation,
+				allModes,
+				handleMentionSelect,
+				sendingDisabled,
 				resetHistoryNavigation,
+				handleSendAndClearDraft,
+				cursorPosition,
+				justDeletedSpaceAfterMention,
+				setInputValue,
 			],
 		)
 
@@ -1151,7 +1156,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 							iconClass="codicon-send"
 							title={t("chat:sendMessage")}
 							disabled={sendingDisabled}
-							onClick={onSend}
+							onClick={handleSendAndClearDraft}
 						/>
 					</div>
 				</div>

webview-ui/src/components/chat/hooks/useChatTextDraft.ts

@@ -0,0 +1,72 @@
+import { useCallback, useEffect, useRef } from "react"
+
+/**
+ * Hook for chat textarea draft persistence (localStorage).
+ * Handles auto-save, restore on mount, and clear on send.
+ * @param draftKey localStorage key for draft persistence
+ * @param inputValue current textarea value
+ * @param setInputValue setter for textarea value
+ * @param onSend send callback
+ */
+export function useChatTextDraft(
+	draftKey: string,
+	inputValue: string,
+	setInputValue: (value: string) => void,
+	onSend: () => void,
+) {
+	const saveDraftTimerRef = useRef<NodeJS.Timeout | null>(null)
+
+	// Restore draft on mount
+	useEffect(() => {
+		try {
+			const draft = localStorage.getItem(draftKey)
+			if (draft && !inputValue) {
+				setInputValue(draft)
+			}
+		} catch (_) {
+			// ignore
+		}
+		// Only run on initial mount
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [])
+
+	// Periodically save draft
+	useEffect(() => {
+		if (saveDraftTimerRef.current) {
+			clearInterval(saveDraftTimerRef.current)
+		}
+		if (inputValue && inputValue.trim()) {
+			saveDraftTimerRef.current = setInterval(() => {
+				try {
+					localStorage.setItem(draftKey, inputValue)
+				} catch (_) {
+					// ignore
+				}
+			}, 5000)
+		} else {
+			// Remove draft if no content
+			try {
+				localStorage.removeItem(draftKey)
+			} catch (_) {
+				// ignore
+			}
+		}
+		return () => {
+			if (saveDraftTimerRef.current) {
+				clearInterval(saveDraftTimerRef.current)
+			}
+		}
+	}, [inputValue, draftKey])
+
+	// Clear draft after send
+	const handleSendAndClearDraft = useCallback(() => {
+		try {
+			localStorage.removeItem(draftKey)
+		} catch (_) {
+			// ignore
+		}
+		onSend()
+	}, [onSend, draftKey])
+
+	return { handleSendAndClearDraft }
+}