fix(amazonq): use diffWordsWithSpace instead of diffChars to calculate highlightedRanges

Author: atonaamz

packages/amazonq/src/app/inline/EditRendering/svgGenerator.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { diffChars } from 'diff'
+import { diffWordsWithSpace } from 'diff'
 import * as vscode from 'vscode'
 import { ToolkitError, getLogger } from 'aws-core-vscode/shared'
 import { diffUtilities } from 'aws-core-vscode/shared'
@@ -413,45 +413,6 @@ export class SvgGenerationService {
         const originalRanges: Range[] = []
         const afterRanges: Range[] = []
 
-        /**
-         * Merges ranges on the same line that are separated by only one character
-         */
-        const mergeAdjacentRanges = (ranges: Range[]): Range[] => {
-            const sortedRanges = [...ranges].sort((a, b) => {
-                if (a.line !== b.line) {
-                    return a.line - b.line
-                }
-                return a.start - b.start
-            })
-
-            const result: Range[] = []
-
-            // Process all ranges
-            for (let i = 0; i < sortedRanges.length; i++) {
-                const current = sortedRanges[i]
-
-                // If this is the last range or ranges are on different lines, add it directly
-                if (i === sortedRanges.length - 1 || current.line !== sortedRanges[i + 1].line) {
-                    result.push(current)
-                    continue
-                }
-
-                // Check if current range and next range can be merged
-                const next = sortedRanges[i + 1]
-                if (current.line === next.line && next.start - current.end <= 1) {
-                    sortedRanges[i + 1] = {
-                        line: current.line,
-                        start: current.start,
-                        end: Math.max(current.end, next.end),
-                    }
-                } else {
-                    result.push(current)
-                }
-            }
-
-            return result
-        }
-
         // Create reverse mapping for quicker lookups
         const reverseMap = new Map<string, string>()
         for (const [original, modified] of modifiedLines.entries()) {
@@ -465,7 +426,7 @@ export class SvgGenerationService {
             // If line exists in modifiedLines as a key, process character diffs
             if (Array.from(modifiedLines.keys()).includes(line)) {
                 const modifiedLine = modifiedLines.get(line)!
-                const changes = diffChars(line, modifiedLine)
+                const changes = diffWordsWithSpace(line, modifiedLine)
 
                 let charPos = 0
                 for (const part of changes) {
@@ -497,7 +458,7 @@ export class SvgGenerationService {
 
             if (reverseMap.has(line)) {
                 const originalLine = reverseMap.get(line)!
-                const changes = diffChars(originalLine, line)
+                const changes = diffWordsWithSpace(originalLine, line)
 
                 let charPos = 0
                 for (const part of changes) {
@@ -522,12 +483,9 @@ export class SvgGenerationService {
             }
         }
 
-        const mergedOriginalRanges = mergeAdjacentRanges(originalRanges)
-        const mergedAfterRanges = mergeAdjacentRanges(afterRanges)
-
         return {
-            removedRanges: mergedOriginalRanges,
-            addedRanges: mergedAfterRanges,
+            removedRanges: originalRanges,
+            addedRanges: afterRanges,
         }
     }
 }

packages/amazonq/test/unit/app/inline/EditRendering/svgGenerator.test.ts

@@ -150,7 +150,7 @@ describe('SvgGenerationService', function () {
     })
 
     describe('highlight ranges', function () {
-        it('should generate highlight ranges for character-level changes', function () {
+        it('should generate highlight ranges for word-level changes', function () {
             const originalCode = ['function test() {', '  return 42;', '}']
             const afterCode = ['function test() {', '  return 100;', '}']
             const modifiedLines = new Map([['  return 42;', '  return 100;']])
@@ -174,32 +174,6 @@ describe('SvgGenerationService', function () {
             assert.ok(addedRange.end > addedRange.start)
         })
 
-        it('should merge adjacent highlight ranges', function () {
-            const originalCode = ['function test() {', '  return 42;', '}']
-            const afterCode = ['function test() {', '  return 100;', '}']
-            const modifiedLines = new Map([['  return 42;', '  return 100;']])
-
-            const generateHighlightRanges = (service as any).generateHighlightRanges.bind(service)
-            const result = generateHighlightRanges(originalCode, afterCode, modifiedLines)
-
-            // Adjacent ranges should be merged
-            const sortedRanges = [...result.addedRanges].sort((a, b) => {
-                if (a.line !== b.line) {
-                    return a.line - b.line
-                }
-                return a.start - b.start
-            })
-
-            // Check that no adjacent ranges exist
-            for (let i = 0; i < sortedRanges.length - 1; i++) {
-                const current = sortedRanges[i]
-                const next = sortedRanges[i + 1]
-                if (current.line === next.line) {
-                    assert.ok(next.start - current.end > 1, 'Adjacent ranges should be merged')
-                }
-            }
-        })
-
         it('should handle HTML escaping in highlight edits', function () {
             const newLines = ['function test() {', '  return "<script>alert(1)</script>";', '}']
             const highlightRanges = [{ line: 1, start: 10, end: 35 }]