feat(amazonq): Add new Preview UX for code diff in agenti chat (aws#6932)

## Problem
- In existing UX, user can not see the changes preview.

## Solution
- In this updated UI, user can see the code changes and can click on
accept/reject accordingly.

![image](https://github.com/user-attachments/assets/6fa769b1-1214-4c1a-8b8e-ec836db72786)


- UI view after click on accept/reject accordingly:

![Screenshot 2025-04-03 at 11 31
15 AM](https://github.com/user-attachments/assets/b1c00661-e670-4ac1-80e6-6d853595671a)
![Screenshot 2025-04-03 at 11 29
44 AM](https://github.com/user-attachments/assets/8a492ea8-ec0d-4010-a6f8-0c292350a5d1)


## TODO:
- Quickly try to raise a followup PR to Refactor the `fsWrite.ts` file
`queueDescription` method to use existing diffLines and [diff
library](https://www.npmjs.com/package/diff) to get the diff preview. or
reuse existing diff view logic in cwc.
- Add number of chars and lines generated/removed  in code diff preview.
- Adding "void" to some tests in toolSHared.test.ts file for the current
implementation but in the next followup PR I will fix this issue.

---

- Treat all work as PUBLIC. Private `feature/x` branches will not be
squash-merged at release time.
- Your code changes must meet the guidelines in
[CONTRIBUTING.md](https://github.com/aws/aws-toolkit-vscode/blob/master/CONTRIBUTING.md#guidelines).
- License: I confirm that my contribution is made under the terms of the
Apache 2.0 license.

---------

Co-authored-by: Tyrone Smith <[email protected]>

Author: laileni-aws

packages/core/src/amazonq/webview/ui/apps/cwChatConnector.ts

@@ -8,6 +8,7 @@ import {
     ChatItemButton,
     ChatItemFormItem,
     ChatItemType,
+    MynahIconsType,
     MynahUIDataModel,
     QuickActionCommand,
 } from '@aws/mynah-ui'
@@ -33,6 +34,7 @@ export class Connector extends BaseConnector {
     private readonly onContextCommandDataReceived
     private readonly onShowCustomForm
     private readonly onChatAnswerUpdated
+    private chatItems: Map<string, Map<string, ChatItem>> = new Map() // tabId -> messageId -> ChatItem
 
     override getTabType(): TabType {
         return 'cwc'
@@ -109,6 +111,10 @@ export class Connector extends BaseConnector {
                 title: messageData.title,
                 buttons: messageData.buttons ?? undefined,
                 fileList: messageData.fileList ?? undefined,
+                header: messageData.header ?? undefined,
+                padding: messageData.padding ?? undefined,
+                fullWidth: messageData.fullWidth ?? undefined,
+                codeBlockActions: messageData.codeBlockActions ?? undefined,
             }
 
             if (messageData.relatedSuggestions !== undefined) {
@@ -117,6 +123,10 @@ export class Connector extends BaseConnector {
                     content: messageData.relatedSuggestions,
                 }
             }
+
+            if (answer.messageId) {
+                this.storeChatItem(messageData.tabID, answer.messageId, answer)
+            }
             this.onChatAnswerReceived(messageData.tabID, answer, messageData)
 
             // Exit the function if we received an answer from AI
@@ -147,13 +157,28 @@ export class Connector extends BaseConnector {
                         : undefined,
                 buttons: messageData.buttons ?? undefined,
                 canBeVoted: messageData.canBeVoted ?? false,
+                header: messageData.header ?? undefined,
+                padding: messageData.padding ?? undefined,
+                fullWidth: messageData.fullWidth ?? undefined,
+                codeBlockActions: messageData.codeBlockActions ?? undefined,
             }
             this.onChatAnswerReceived(messageData.tabID, answer, messageData)
 
             return
         }
     }
 
+    private storeChatItem(tabId: string, messageId: string, item: ChatItem): void {
+        if (!this.chatItems.has(tabId)) {
+            this.chatItems.set(tabId, new Map())
+        }
+        this.chatItems.get(tabId)?.set(messageId, { ...item })
+    }
+
+    private getCurrentChatItem(tabId: string, messageId: string): ChatItem | undefined {
+        return this.chatItems.get(tabId)?.get(messageId)
+    }
+
     processContextCommandData(messageData: any) {
         if (messageData.data) {
             this.onContextCommandDataReceived(messageData.data)
@@ -270,35 +295,39 @@ export class Connector extends BaseConnector {
         ) {
             return
         }
+
+        // Can not assign body as "undefined" or "null" because both of these values will be overriden at main.ts in onChatAnswerUpdated
+        // TODO: Refactor in next PR if necessary.
+        const currentChatItem = this.getCurrentChatItem(tabId, messageId)
         const answer: ChatItem = {
             type: ChatItemType.ANSWER,
             messageId: messageId,
             buttons: [],
+            body: undefined,
+            header: currentChatItem?.header ? { ...currentChatItem.header } : {},
         }
         switch (action.id) {
             case 'accept-code-diff':
-                answer.buttons = [
-                    {
-                        keepCardAfterClick: true,
-                        text: 'Accepted code',
-                        id: 'accepted-code-diff',
+                if (answer.header) {
+                    answer.header.status = {
+                        icon: 'ok' as MynahIconsType,
+                        text: 'Accepted',
                         status: 'success',
-                        position: 'outside',
-                        disabled: true,
-                    },
-                ]
+                    }
+                    answer.header.buttons = []
+                    answer.body = ' '
+                }
                 break
             case 'reject-code-diff':
-                answer.buttons = [
-                    {
-                        keepCardAfterClick: true,
-                        text: 'Rejected code',
-                        id: 'rejected-code-diff',
+                if (answer.header) {
+                    answer.header.status = {
+                        icon: 'cancel' as MynahIconsType,
+                        text: 'Rejected',
                         status: 'error',
-                        position: 'outside',
-                        disabled: true,
-                    },
-                ]
+                    }
+                    answer.header.buttons = []
+                    answer.body = ' '
+                }
                 break
             case 'confirm-tool-use':
                 answer.buttons = [
@@ -315,6 +344,12 @@ export class Connector extends BaseConnector {
             default:
                 break
         }
+
+        if (currentChatItem && answer.messageId) {
+            const updatedItem = { ...currentChatItem, ...answer }
+            this.storeChatItem(tabId, answer.messageId, updatedItem)
+        }
+
         this.onChatAnswerUpdated(tabId, answer)
     }
 

packages/core/src/amazonq/webview/ui/main.ts

@@ -331,6 +331,7 @@ export const createMynahUI = (
                     ...(item.followUp !== undefined ? { followUp: item.followUp } : {}),
                     ...(item.footer !== undefined ? { footer: item.footer } : {}),
                     ...(item.canBeVoted !== undefined ? { canBeVoted: item.canBeVoted } : {}),
+                    ...(item.header !== undefined ? { header: item.header } : {}),
                 })
             } else {
                 mynahUI.updateLastChatAnswer(tabID, {
@@ -339,6 +340,7 @@ export const createMynahUI = (
                     ...(item.followUp !== undefined ? { followUp: item.followUp } : {}),
                     ...(item.footer !== undefined ? { footer: item.footer } : {}),
                     ...(item.canBeVoted !== undefined ? { canBeVoted: item.canBeVoted } : {}),
+                    ...(item.header !== undefined ? { header: item.header } : {}),
                 })
             }
         },
@@ -352,8 +354,11 @@ export const createMynahUI = (
                     ...(item.relatedContent !== undefined ? { relatedContent: item.relatedContent } : {}),
                     ...(item.followUp !== undefined ? { followUp: item.followUp } : {}),
                     ...(item.fileList !== undefined ? { fileList: item.fileList } : {}),
-                    ...(item.header !== undefined ? { header: item.header } : { header: undefined }),
-                    ...(item.buttons !== undefined ? { buttons: item.buttons } : { buttons: undefined }),
+                    ...(item.header !== undefined ? { header: item.header } : {}),
+                    ...(item.buttons !== undefined ? { buttons: item.buttons } : {}),
+                    ...(item.fullWidth !== undefined ? { fullWidth: item.fullWidth } : {}),
+                    ...(item.padding !== undefined ? { padding: item.padding } : {}),
+                    ...(item.codeBlockActions !== undefined ? { codeBlockActions: item.codeBlockActions } : {}),
                 })
                 if (
                     item.messageId !== undefined &&

packages/core/src/codewhispererChat/controllers/chat/messenger/messenger.ts

@@ -39,12 +39,12 @@ import { LspController } from '../../../../amazonq/lsp/lspController'
 import { extractCodeBlockLanguage } from '../../../../shared/markdown'
 import { extractAuthFollowUp } from '../../../../amazonq/util/authUtils'
 import { helpMessage } from '../../../../amazonq/webview/ui/texts/constants'
-import { ChatItemButton, ChatItemContent, ChatItemFormItem, MynahUIDataModel } from '@aws/mynah-ui'
+import { ChatItemButton, ChatItemContent, ChatItemFormItem, MynahIconsType, MynahUIDataModel } from '@aws/mynah-ui'
 import { ChatHistoryManager } from '../../../storages/chatHistory'
 import { ToolType, ToolUtils } from '../../../tools/toolUtils'
 import { ChatStream } from '../../../tools/chatStream'
-import path from 'path'
 import { getWorkspaceForFile } from '../../../../shared/utilities/workspaceUtils'
+import path from 'path'
 import { CommandValidation } from '../../../tools/executeBash'
 
 export type StaticTextResponseType = 'quick-action-help' | 'onboarding-help' | 'transform' | 'help'
@@ -224,7 +224,7 @@ export class Messenger {
                             const validation = ToolUtils.requiresAcceptance(tool)
 
                             const chatStream = new ChatStream(this, tabID, triggerID, toolUse, validation)
-                            ToolUtils.queueDescription(tool, chatStream)
+                            await ToolUtils.queueDescription(tool, chatStream)
 
                             if (!validation.requiresAcceptance) {
                                 // Need separate id for read tool and safe bash command execution as 'confirm-tool-use' id is required to change button status from `Confirm` to `Confirmed` state in cwChatConnector.ts which will impact generic tool execution.
@@ -442,35 +442,44 @@ export class Messenger {
             buttons.push({
                 id: 'confirm-tool-use',
                 text: 'Confirm',
-                position: 'outside',
                 status: 'info',
             })
 
             if (validation.warning) {
                 message = validation.warning + message
             }
         } else if (toolUse?.name === ToolType.FsWrite) {
-            // FileList
             const absoluteFilePath = (toolUse?.input as any).path
             const projectPath = getWorkspaceForFile(absoluteFilePath)
             const relativePath = projectPath ? path.relative(projectPath, absoluteFilePath) : absoluteFilePath
+            // FileList
             fileList = {
-                fileTreeTitle: 'Code suggestions',
-                rootFolderTitle: path.basename(projectPath ?? 'Default'),
+                fileTreeTitle: '',
+                hideFileCount: true,
                 filePaths: [relativePath],
+                details: {
+                    [relativePath]: {
+                        // eslint-disable-next-line unicorn/no-null
+                        icon: null,
+                        label: 'Created',
+                        changes: {
+                            added: 36,
+                            deleted: 0,
+                            total: 36,
+                        },
+                    },
+                },
             }
             // Buttons
             buttons.push({
                 id: 'reject-code-diff',
-                text: 'Reject',
-                position: 'outside',
-                status: 'error',
+                status: 'clear',
+                icon: 'cancel' as MynahIconsType,
             })
             buttons.push({
                 id: 'accept-code-diff',
-                text: 'Accept',
-                position: 'outside',
-                status: 'success',
+                status: 'clear',
+                icon: 'ok' as MynahIconsType,
             })
         }
 
@@ -488,8 +497,16 @@ export class Messenger {
                     codeBlockLanguage: undefined,
                     contextList: undefined,
                     canBeVoted: false,
-                    buttons,
-                    fileList,
+                    buttons: toolUse?.name === ToolType.FsWrite ? undefined : buttons,
+                    fullWidth: toolUse?.name === ToolType.FsWrite,
+                    padding: !(toolUse?.name === ToolType.FsWrite),
+                    header:
+                        toolUse?.name === ToolType.FsWrite
+                            ? { icon: 'code-block' as MynahIconsType, buttons: buttons, fileList: fileList }
+                            : undefined,
+                    codeBlockActions:
+                        // eslint-disable-next-line unicorn/no-null, prettier/prettier
+                        toolUse?.name === ToolType.FsWrite ? { 'insert-to-cursor': null, copy: null } : undefined,
                 },
                 tabID
             )

packages/core/src/codewhispererChat/tools/fsWrite.ts

@@ -8,7 +8,6 @@ import { getLogger } from '../../shared/logger/logger'
 import vscode from 'vscode'
 import { fs } from '../../shared/fs/fs'
 import { Writable } from 'stream'
-import path from 'path'
 
 interface BaseParams {
     path: string
@@ -70,11 +69,113 @@ export class FsWrite {
         }
     }
 
-    public queueDescription(updates: Writable): void {
-        const fileName = path.basename(this.params.path)
-        updates.write(
-            `Please see the generated code below for \`${fileName}\`. Click on the file to review the changes in the code editor and select Accept or Reject.`
-        )
+    // TODO:  Refactor the fsWrite.ts file "queueDescription" method to use existing diffLines and diff library to get the diff preview. or reuse existing diff view logic in cwchat. This will be part of next PR.
+    private showStrReplacePreview(oldStr: string, newStr: string): string {
+        // Split both strings into arrays of lines
+        const oldStrLines = oldStr.split('\n')
+        const newStrLines = newStr.split('\n')
+        let result = ''
+
+        // If strings are identical, return empty string
+        if (oldStr === newStr) {
+            return result
+        }
+
+        let oldLineIndex = 0
+        let newLineIndex = 0
+        // Loop through both arrays until we've processed all lines
+        while (oldLineIndex < oldStrLines.length || newLineIndex < newStrLines.length) {
+            if (
+                oldLineIndex < oldStrLines.length &&
+                newLineIndex < newStrLines.length &&
+                oldStrLines[oldLineIndex] === newStrLines[newLineIndex]
+            ) {
+                // Line is unchanged - prefix with space
+                result += ` ${oldStrLines[oldLineIndex]}\n`
+                oldLineIndex++
+                newLineIndex++
+            } else {
+                // Line is different
+                if (oldLineIndex < oldStrLines.length) {
+                    // Remove line - prefix with minus
+                    result += `- ${oldStrLines[oldLineIndex]}\n`
+                    oldLineIndex++
+                }
+                if (newLineIndex < newStrLines.length) {
+                    // Add line - prefix with plus
+                    result += `+ ${newStrLines[newLineIndex]}\n`
+                    newLineIndex++
+                }
+            }
+        }
+
+        return result
+    }
+
+    private async showInsertPreview(path: string, insertLine: number, newStr: string): Promise<string> {
+        const fileContent = await fs.readFileText(path)
+        const lines = fileContent.split('\n')
+        const startLine = Math.max(0, insertLine - 2)
+        const endLine = Math.min(lines.length, insertLine + 3)
+
+        const contextLines: string[] = []
+
+        // Add lines before insertion point
+        for (let index = startLine; index < insertLine; index++) {
+            contextLines.push(` ${lines[index]}`)
+        }
+
+        // Add the new line with a '+' prefix
+        contextLines.push(`+ ${newStr}`)
+
+        // Add lines after insertion point
+        for (let index = insertLine; index < endLine; index++) {
+            contextLines.push(` ${lines[index]}`)
+        }
+
+        return contextLines.join('\n')
+    }
+
+    private async showAppendPreview(sanitizedPath: string, newStr: string) {
+        const fileContent = await fs.readFileText(sanitizedPath)
+        const needsNewline = fileContent.length !== 0 && !fileContent.endsWith('\n')
+
+        let contentToAppend = newStr
+        if (needsNewline) {
+            contentToAppend = '\n' + contentToAppend
+        }
+
+        // Get the last 3 lines from existing content for better UX
+        const lines = fileContent.split('\n')
+        const linesForContext = lines.slice(-3)
+
+        return `${linesForContext.join('\n')}\n+ ${contentToAppend.trim()}`
+    }
+
+    public async queueDescription(updates: Writable): Promise<void> {
+        switch (this.params.command) {
+            case 'create':
+                updates.write(`\`\`\`diff-typescript
+${'+' + this.params.fileText?.replace(/\n/g, '\n+')}
+                    `)
+                break
+            case 'strReplace':
+                updates.write(`\`\`\`diff-typescript
+${this.showStrReplacePreview(this.params.oldStr, this.params.newStr)}
+\`\`\`
+`)
+                break
+            case 'insert':
+                updates.write(`\`\`\`diff-typescript
+${await this.showInsertPreview(this.params.path, this.params.insertLine, this.params.newStr)}
+\`\`\``)
+                break
+            case 'append':
+                updates.write(`\`\`\`diff-typescript
+${await this.showAppendPreview(this.params.path, this.params.newStr)}
+\`\`\``)
+                break
+        }
         updates.end()
     }