From 28cf54b5cca8b73612f2fa1daf87ed7d9ba9cb0a Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Mon, 15 Sep 2025 18:01:03 +0000
Subject: [PATCH] feat: auto-scroll to edit location after user edits in diff
 view

- Added ref to user_feedback_diff element
- Implemented smooth scroll behavior when user edits appear
- Scrolls to center of viewport for better visibility

Fixes #7996
---
 webview-ui/src/components/chat/ChatRow.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx
index 23ec50af37..d66366fd69 100644
--- a/webview-ui/src/components/chat/ChatRow.tsx
+++ b/webview-ui/src/components/chat/ChatRow.tsx
@@ -125,6 +125,7 @@ export const ChatRowContent = ({
 	const [editMode, setEditMode] = useState<Mode>(mode || "code")
 	const [editImages, setEditImages] = useState<string[]>([])
 	const { copyWithFeedback } = useCopyToClipboard()
+	const userEditRef = useRef<HTMLDivElement>(null)
 
 	// Handle message events for image selection during edit mode
 	useEffect(() => {
@@ -351,6 +352,22 @@ export const ChatRowContent = ({
 		return null
 	}, [message.type, message.ask, message.partial, message.text])
 
+	// Scroll to user edits when they appear
+	useEffect(() => {
+		if (message.say === "user_feedback_diff" && userEditRef.current) {
+			const tool = safeJsonParse<ClineSayTool>(message.text)
+			if (tool?.diff) {
+				// Use a small delay to ensure the element is rendered
+				setTimeout(() => {
+					userEditRef.current?.scrollIntoView({
+						behavior: "smooth",
+						block: "center",
+					})
+				}, 100)
+			}
+		}
+	}, [message.say, message.text])
+
 	if (tool) {
 		const toolIcon = (name: string) => (
 			<span
@@ -1241,7 +1258,7 @@ export const ChatRowContent = ({
 				case "user_feedback_diff":
 					const tool = safeJsonParse<ClineSayTool>(message.text)
 					return (
-						<div style={{ marginTop: -10, width: "100%" }}>
+						<div ref={userEditRef} style={{ marginTop: -10, width: "100%" }}>
 							<CodeAccordian
 								code={tool?.diff}
 								language="diff"