feat: Refactors hover event handling and text input updates (#413)

Improves the event listener management for file path highlights by introducing a MutationObserver to dynamically bind events to new elements.

Enhances text input handling to maintain proper spacing when appending new text.

This update addresses potential issues with event listeners not being applied to newly added elements and ensures consistent user input behavior.

Co-authored-by: xjm <[email protected]>

Author: xiaojingming

src/core/webview/ClineProvider.ts

@@ -571,7 +571,7 @@ export class ClineProvider
 		const prompt = supportPrompt.create(promptType as SupportPromptType, params, customSupportPrompts)
 
 		if (command === "addToContext") {
-			const pathWithSelectedTextResult = supportPrompt.createPathWithSelectedText(
+			const { pathOnly, selectedText } = supportPrompt.createPathWithSelectedText(
 				promptType as SupportPromptType,
 				params,
 				customSupportPrompts,
@@ -580,8 +580,8 @@ export class ClineProvider
 			await visibleProvider.postMessageToWebview({
 				type: "invoke",
 				invoke: "setChatBoxMessage",
-				text: pathWithSelectedTextResult.pathOnly,
-				selectText: pathWithSelectedTextResult.selectedText,
+				text: pathOnly.length > 0 ? `${pathOnly} ` : "",
+				selectText: selectedText,
 			})
 			return
 		}

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

@@ -655,16 +655,16 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 			let newValue = text
 
 			if (inputValue !== "") {
-				newValue = inputValue + " " + text
+				newValue = `${inputValue}${inputValue.endsWith(" ") ? "" : " "}${text}`
 			}
-
 			setInputValue(newValue)
 			setSelectedImages([...selectedImages, ...images])
 
 			const filePathMatch = text.match(/\b[\w/\\.-]+:\d+-\d+\b/)
 			if (filePathMatch) {
 				setHoverPreviewMap((prev) => new Map(prev.set(filePathMatch[0], selectText)))
 			}
+			textAreaRef.current?.focus()
 		},
 		[inputValue, selectedImages],
 	)

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

@@ -210,25 +210,49 @@ export const useHoverEvent = (
 		[clearHoverTimeout, customSetHoverPreview],
 	)
 
-	// Use useEffect to manage event listeners
+	// Use useEffect to manage event listeners and MutationObserver
 	useEffect(() => {
 		const highlightLayer = highlightLayerRef.current
 		if (!highlightLayer) return
 
-		const filePathElements = highlightLayer.querySelectorAll(".file-path-highlight")
-		const eventListeners: Array<() => void> = []
+		// Function to bind events to all .file-path-highlight elements
+		const bindEventsToElements = () => {
+			const filePathElements = highlightLayer.querySelectorAll(".file-path-highlight")
+			const eventListeners: Array<() => void> = []
 
-		filePathElements.forEach((element: Element) => {
-			const enterHandler = (event: Event) => handleHighlightMouseEnter(event)
-			const leaveHandler = (event: Event) => handleHighlightMouseLeave(event as MouseEvent)
+			filePathElements.forEach((element: Element) => {
+				const enterHandler = (event: Event) => handleHighlightMouseEnter(event)
+				const leaveHandler = (event: Event) => handleHighlightMouseLeave(event as MouseEvent)
 
-			element.addEventListener("mouseenter", enterHandler)
-			element.addEventListener("mouseleave", leaveHandler)
+				element.addEventListener("mouseenter", enterHandler)
+				element.addEventListener("mouseleave", leaveHandler)
 
-			eventListeners.push(() => {
-				element.removeEventListener("mouseenter", enterHandler)
-				element.removeEventListener("mouseleave", leaveHandler)
+				eventListeners.push(() => {
+					element.removeEventListener("mouseenter", enterHandler)
+					element.removeEventListener("mouseleave", leaveHandler)
+				})
 			})
+
+			return eventListeners
+		}
+
+		// Initial event binding
+		let eventListeners: Array<() => void> = bindEventsToElements()
+
+		// Set up MutationObserver to watch for DOM changes
+		const observer = new MutationObserver(() => {
+			// Clean up existing event listeners
+			eventListeners.forEach((cleanup) => cleanup())
+
+			// Re-bind events to new elements
+			eventListeners = bindEventsToElements()
+		})
+
+		// Start observing the highlight layer for child changes
+		observer.observe(highlightLayer, {
+			childList: true, // Watch for addition/removal of child elements
+			subtree: true, // Watch all descendants
+			characterData: true, // Watch for text content changes
 		})
 
 		// Return cleanup function
@@ -238,6 +262,8 @@ export const useHoverEvent = (
 			// Clean up timers
 			clearHoverTimeout()
 			currentHoverRef.current = null
+			// Disconnect MutationObserver
+			observer.disconnect()
 		}
 	}, [handleHighlightMouseEnter, handleHighlightMouseLeave, clearHoverTimeout, highlightLayerRef])