From 74ac4a69aaffad70e0f6c799225383d476a81df5 Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Tue, 10 Sep 2024 21:46:03 -0400
Subject: [PATCH] Use diff to find first changed block

---
 src/ClaudeDev.ts                       | 31 +++++++++++---------------
 webview-ui/src/components/ChatView.tsx |  2 +-
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/ClaudeDev.ts b/src/ClaudeDev.ts
index 4d4f732..8daccf0 100644
--- a/src/ClaudeDev.ts
+++ b/src/ClaudeDev.ts
@@ -847,26 +847,21 @@ export class ClaudeDev {
 			// Apply the edit, but without saving so this doesnt trigger a local save in timeline history
 			await vscode.workspace.applyEdit(edit) // has the added benefit of maintaing the file's original EOLs
 
-			// Find the first position where the content differs and scroll to the first changed line if found
-			let firstDiffPosition: vscode.Position | undefined
-			const originalLines = originalContent.split("\n")
-			const newLines = newContent.split("\n")
-			for (let i = 0; i < Math.max(originalLines.length, newLines.length); i++) {
-				if (i < originalLines.length && i < newLines.length) {
-					if (originalLines[i] !== newLines[i]) {
-						firstDiffPosition = new vscode.Position(i, 0)
-						break
-					}
-				} else {
-					firstDiffPosition = new vscode.Position(i, 0)
+			// Find the first range where the content differs and scroll to it
+			const diffResult = diff.diffLines(originalContent, newContent)
+			for (let i = 0, lineCount = 0; i < diffResult.length; i++) {
+				const part = diffResult[i]
+				if (part.added || part.removed) {
+					const startLine = lineCount + 1
+					const endLine = lineCount + (part.count || 0)
+					vscode.window.activeTextEditor?.revealRange(
+						// + 3 to move the editor up slightly as this looks better
+						new vscode.Range(new vscode.Position(startLine, 0), new vscode.Position(endLine + 3, 0)),
+						vscode.TextEditorRevealType.InCenter
+					)
 					break
 				}
-			}
-			if (firstDiffPosition) {
-				vscode.window.activeTextEditor?.revealRange(
-					new vscode.Range(firstDiffPosition, firstDiffPosition),
-					vscode.TextEditorRevealType.InCenter
-				)
+				lineCount += part.count || 0
 			}
 
 			// remove cursor from the document
diff --git a/webview-ui/src/components/ChatView.tsx b/webview-ui/src/components/ChatView.tsx
index 10b7e00..5cefa5e 100644
--- a/webview-ui/src/components/ChatView.tsx
+++ b/webview-ui/src/components/ChatView.tsx
@@ -607,7 +607,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 						// borderLeft: "9px solid transparent", // NOTE: react-textarea-autosize doesn't calculate correct height when using borderLeft/borderRight so we need to use horizontal padding instead
 						// Instead of using boxShadow, we use a div with a border to better replicate the behavior when the textarea is focused
 						// boxShadow: "0px 0px 0px 1px var(--vscode-input-border)",
-						padding: "0 50px 0 9px",
+						padding: "0 53px 0 9px",
 						cursor: textAreaDisabled ? "not-allowed" : undefined,
 						flex: 1,
 					}}