feat: Navigate prompt history in prompt field via arrow up/down (#4139)

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

@@ -27,6 +27,7 @@ import ContextMenu from "./ContextMenu"
 import { VolumeX, Pin, Check } from "lucide-react"
 import { IconButton } from "./IconButton"
 import { cn } from "@/lib/utils"
+import { usePromptHistory } from "./hooks/usePromptHistory"
 
 interface ChatTextAreaProps {
 	inputValue: string
@@ -75,6 +76,8 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			cwd,
 			pinnedApiConfigs,
 			togglePinnedApiConfig,
+			taskHistory,
+			clineMessages,
 		} = useExtensionState()
 
 		// Find the ID and display text for the currently selected API configuration
@@ -153,6 +156,21 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 		const [isEnhancingPrompt, setIsEnhancingPrompt] = useState(false)
 		const [isFocused, setIsFocused] = useState(false)
 
+		// Use custom hook for prompt history navigation
+		const {
+			inputValueWithCursor,
+			setInputValueWithCursor,
+			handleHistoryNavigation,
+			resetHistoryNavigation,
+			resetOnInputChange,
+		} = usePromptHistory({
+			clineMessages,
+			taskHistory,
+			cwd,
+			inputValue,
+			setInputValue,
+		})
+
 		// Fetch git commits when Git is selected or when typing a hash.
 		useEffect(() => {
 			if (selectedType === ContextMenuOptionType.Git || /^[a-f0-9]+$/i.test(searchQuery)) {
@@ -360,10 +378,17 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 
 				const isComposing = event.nativeEvent?.isComposing ?? false
 
+				// Handle prompt history navigation using custom hook
+				if (handleHistoryNavigation(event, showContextMenu, isComposing)) {
+					return
+				}
+
 				if (event.key === "Enter" && !event.shiftKey && !isComposing) {
 					event.preventDefault()
 
 					if (!sendingDisabled) {
+						// Reset history navigation state when sending
+						resetHistoryNavigation()
 						onSend()
 					}
 				}
@@ -427,6 +452,8 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 				queryItems,
 				customModes,
 				fileSearchResults,
+				handleHistoryNavigation,
+				resetHistoryNavigation,
 			],
 		)
 
@@ -437,6 +464,27 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			}
 		}, [inputValue, intendedCursorPosition])
 
+		// Handle cursor positioning after history navigation
+		useLayoutEffect(() => {
+			if (!inputValueWithCursor.afterRender || !textAreaRef.current) return
+
+			if (inputValueWithCursor.afterRender === "SET_CURSOR_FIRST_LINE") {
+				const firstLineEnd =
+					inputValueWithCursor.value.indexOf("\n") === -1
+						? inputValueWithCursor.value.length
+						: inputValueWithCursor.value.indexOf("\n")
+				textAreaRef.current.setSelectionRange(firstLineEnd, firstLineEnd)
+			} else if (inputValueWithCursor.afterRender === "SET_CURSOR_LAST_LINE") {
+				const lines = inputValueWithCursor.value.split("\n")
+				const lastLineStart = inputValueWithCursor.value.length - lines[lines.length - 1].length
+				textAreaRef.current.setSelectionRange(lastLineStart, lastLineStart)
+			} else if (inputValueWithCursor.afterRender === "SET_CURSOR_START") {
+				textAreaRef.current.setSelectionRange(0, 0)
+			}
+
+			setInputValueWithCursor({ value: inputValueWithCursor.value })
+		}, [inputValueWithCursor, setInputValueWithCursor])
+
 		// Ref to store the search timeout.
 		const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
@@ -445,6 +493,9 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 				const newValue = e.target.value
 				setInputValue(newValue)
 
+				// Reset history navigation when user types
+				resetOnInputChange()
+
 				const newCursorPosition = e.target.selectionStart
 				setCursorPosition(newCursorPosition)
 
@@ -499,7 +550,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					setFileSearchResults([]) // Clear file search results.
 				}
 			},
-			[setInputValue, setSearchRequestId, setFileSearchResults, setSearchLoading],
+			[setInputValue, setSearchRequestId, setFileSearchResults, setSearchLoading, resetOnInputChange],
 		)
 
 		useEffect(() => {