feat(chat): Grouping read and list directory messages UX (aws#7006)

### Problem:

We identified and fixed an issue where the IDE's UI would prematurely
stop displaying when executing certain commands. This occurred
specifically when the Language Model (LLM) attempted to run the
executeBash command before the Read/List Directory tools.

### Example:

When a user asks "write a script that tells me whoami", the operation
only requires the fsWrite command and not any directory reading tools.
In such cases, the IDE would execute fsWrite but fail to display the
executeBash tool in the chat interface. This[ UI behavior has been
corrected
](https://github.com/aws/aws-toolkit-vscode/blob/2028754f3d933909f86bb65f18f06dab526d2708/packages/core/src/codewhispererChat/tools/chatStream.ts#L43-L47)in
this PR, along with improvements to the Reading File user experience.
- Major changes lies in this
[commit](https://github.com/aws/aws-toolkit-vscode/blob/2028754f3d933909f86bb65f18f06dab526d2708/packages/core/src/codewhispererChat/tools/chatStream.ts#L43-L47)
in `ChatStream.ts`
```
        // For FsRead and ListDirectory tools If messageIdToUpdate is undefined, we need to first create an empty message with messageId so it can be updated later
        if (isReadorList && !messageIdToUpdate) {
            this.messenger.sendInitialToolMessage(tabID, triggerID, toolUse?.toolUseId)
        } else {
            this.messenger.sendInitalStream(tabID, triggerID)
        }
```

---

- 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.

Author: laileni-aws

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

@@ -179,6 +179,33 @@ export class Connector extends BaseConnector {
         }
     }
 
+    private processToolMessage = async (messageData: any): Promise<void> => {
+        if (this.onChatAnswerUpdated === undefined) {
+            return
+        }
+        const answer: CWCChatItem = {
+            type: messageData.messageType,
+            messageId: messageData.messageID ?? messageData.triggerID,
+            body: messageData.message,
+            followUp: messageData.followUps,
+            canBeVoted: messageData.canBeVoted ?? false,
+            codeReference: messageData.codeReference,
+            userIntent: messageData.contextList,
+            codeBlockLanguage: messageData.codeBlockLanguage,
+            contextList: messageData.contextList,
+            title: messageData.title,
+            buttons: messageData.buttons,
+            fileList: messageData.fileList,
+            header: messageData.header ?? undefined,
+            padding: messageData.padding ?? undefined,
+            fullWidth: messageData.fullWidth ?? undefined,
+            codeBlockActions: messageData.codeBlockActions ?? undefined,
+            rootFolderTitle: messageData.rootFolderTitle,
+        }
+        this.onChatAnswerUpdated(messageData.tabID, answer)
+        return
+    }
+
     private storeChatItem(tabId: string, messageId: string, item: ChatItem): void {
         if (!this.chatItems.has(tabId)) {
             this.chatItems.set(tabId, new Map())
@@ -238,6 +265,11 @@ export class Connector extends BaseConnector {
             return
         }
 
+        if (messageData.type === 'toolMessage') {
+            await this.processToolMessage(messageData)
+            return
+        }
+
         if (messageData.type === 'editorContextCommandMessage') {
             await this.processEditorContextCommandMessage(messageData)
             return
@@ -369,45 +401,43 @@ export class Connector extends BaseConnector {
                 }
                 break
             case 'run-shell-command':
-                answer.header = {
-                    body: 'shell',
-                    status: {
+                if (answer.header) {
+                    answer.header.status = {
                         icon: 'ok' as MynahIconsType,
                         text: 'Accepted',
                         status: 'success',
-                    },
+                    }
+                    answer.header.buttons = []
                 }
                 break
             case 'reject-shell-command':
-                answer.header = {
-                    body: 'shell',
-                    status: {
+                if (answer.header) {
+                    answer.header.status = {
                         icon: 'cancel' as MynahIconsType,
                         text: 'Rejected',
                         status: 'error',
-                    },
+                    }
+                    answer.header.buttons = []
                 }
                 break
             case 'confirm-tool-use':
-                answer.header = {
-                    icon: 'shell' as MynahIconsType,
-                    body: 'shell',
-                    status: {
+                if (answer.header) {
+                    answer.header.status = {
                         icon: 'ok' as MynahIconsType,
                         text: 'Accepted',
                         status: 'success',
-                    },
+                    }
+                    answer.header.buttons = []
                 }
                 break
             case 'reject-tool-use':
-                answer.header = {
-                    icon: 'shell' as MynahIconsType,
-                    body: 'shell',
-                    status: {
+                if (answer.header) {
+                    answer.header.status = {
                         icon: 'cancel' as MynahIconsType,
                         text: 'Rejected',
                         status: 'error',
-                    },
+                    }
+                    answer.header.buttons = []
                 }
                 break
             default:

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

@@ -78,7 +78,7 @@ export interface ConnectorProps {
     sendMessageToExtension: (message: ExtensionMessage) => void
     onMessageReceived?: (tabID: string, messageData: any, needToShowAPIDocsTab: boolean) => void
     onRunTestMessageReceived?: (tabID: string, showRunTestMessage: boolean) => void
-    onChatAnswerUpdated?: (tabID: string, message: ChatItem) => void
+    onChatAnswerUpdated?: (tabID: string, message: CWCChatItem) => void
     onChatAnswerReceived?: (tabID: string, message: ChatItem, messageData: any) => void
     onWelcomeFollowUpClicked: (tabID: string, welcomeFollowUpType: WelcomeFollowupType) => void
     onAsyncEventProgress: (tabID: string, inProgress: boolean, message: string | undefined) => void

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

@@ -100,6 +100,41 @@ export const createMynahUI = (
         welcomeCount += 1
     }
 
+    /**
+     * Creates a file list header from context list
+     * @param contextList List of file contexts
+     * @param rootFolderTitle Title for the root folder
+     * @returns Header object with file list
+     */
+    const createFileListHeader = (contextList: any[], rootFolderTitle?: string) => {
+        return {
+            fileList: {
+                fileTreeTitle: '',
+                filePaths: contextList.map((file) => file.relativeFilePath),
+                rootFolderTitle: rootFolderTitle,
+                flatList: true,
+                collapsed: true,
+                hideFileCount: true,
+                details: Object.fromEntries(
+                    contextList.map((file) => [
+                        file.relativeFilePath,
+                        {
+                            label: file.lineRanges
+                                .map((range: { first: number; second: number }) =>
+                                    range.first === -1 || range.second === -1
+                                        ? ''
+                                        : `line ${range.first} - ${range.second}`
+                                )
+                                .join(', '),
+                            description: file.relativeFilePath,
+                            clickable: true,
+                        },
+                    ])
+                ),
+            },
+        }
+    }
+
     // Adding the first tab as CWC tab
     tabsStorage.addTab({
         id: 'tab-1',
@@ -346,8 +381,11 @@ export const createMynahUI = (
         sendMessageToExtension: (message) => {
             ideApi.postMessage(message)
         },
-        onChatAnswerUpdated: (tabID: string, item: ChatItem) => {
+        onChatAnswerUpdated: (tabID: string, item: CWCChatItem) => {
             if (item.messageId !== undefined) {
+                if (item.contextList !== undefined && item.contextList.length > 0) {
+                    item.header = createFileListHeader(item.contextList, item.rootFolderTitle)
+                }
                 mynahUI.updateChatAnswerWithMessageId(tabID, item.messageId, {
                     ...(item.body !== undefined ? { body: item.body } : {}),
                     ...(item.buttons !== undefined ? { buttons: item.buttons } : {}),
@@ -409,32 +447,7 @@ export const createMynahUI = (
             }
 
             if (item.contextList !== undefined && item.contextList.length > 0) {
-                item.header = {
-                    fileList: {
-                        fileTreeTitle: '',
-                        filePaths: item.contextList.map((file) => file.relativeFilePath),
-                        rootFolderTitle: item.rootFolderTitle,
-                        flatList: true,
-                        collapsed: true,
-                        hideFileCount: true,
-                        details: Object.fromEntries(
-                            item.contextList.map((file) => [
-                                file.relativeFilePath,
-                                {
-                                    label: file.lineRanges
-                                        .map((range) =>
-                                            range.first === -1 || range.second === -1
-                                                ? ''
-                                                : `line ${range.first} - ${range.second}`
-                                        )
-                                        .join(', '),
-                                    description: file.relativeFilePath,
-                                    clickable: true,
-                                },
-                            ])
-                        ),
-                    },
-                }
+                item.header = createFileListHeader(item.contextList, item.rootFolderTitle)
             }
 
             if (

packages/core/src/codewhispererChat/clients/chat/v0/chat.ts

@@ -14,7 +14,7 @@ import { ToolkitError } from '../../../../shared/errors'
 import { createCodeWhispererChatStreamingClient } from '../../../../shared/clients/codewhispererChatClient'
 import { createQDeveloperStreamingClient } from '../../../../shared/clients/qDeveloperChatClient'
 import { UserWrittenCodeTracker } from '../../../../codewhisperer/tracker/userWrittenCodeTracker'
-import { PromptMessage } from '../../../controllers/chat/model'
+import { DocumentReference, PromptMessage } from '../../../controllers/chat/model'
 import { FsWriteBackup } from '../../../../codewhispererChat/tools/fsWrite'
 
 export type ToolUseWithError = {
@@ -30,8 +30,10 @@ export class ChatSession {
      * _readFiles = list of files read from the project to gather context before generating response.
      * _showDiffOnFileWrite = Controls whether to show diff view (true) or file context view (false) to the user
      * _context = Additional context to be passed to the LLM for generating the response
+     * _messageIdToUpdate = messageId of a chat message to be updated, used for reducing consecutive tool messages
      */
-    private _readFiles: string[] = []
+    private _readFiles: DocumentReference[] = []
+    private _readFolders: DocumentReference[] = []
     private _toolUseWithError: ToolUseWithError | undefined
     private _showDiffOnFileWrite: boolean = false
     private _context: PromptMessage['context']
@@ -41,6 +43,8 @@ export class ChatSession {
      * True if messages from local history have been sent to session.
      */
     localHistoryHydrated: boolean = false
+    private _messageIdToUpdate: string | undefined
+    private _messageIdToUpdateListDirectory: string | undefined
 
     contexts: Map<string, { first: number; second: number }[]> = new Map()
     // TODO: doesn't handle the edge case when two files share the same relativePath string but from different root
@@ -49,6 +53,21 @@ export class ChatSession {
     public get sessionIdentifier(): string | undefined {
         return this.sessionId
     }
+    public get messageIdToUpdate(): string | undefined {
+        return this._messageIdToUpdate
+    }
+
+    public setMessageIdToUpdate(messageId: string | undefined) {
+        this._messageIdToUpdate = messageId
+    }
+
+    public get messageIdToUpdateListDirectory(): string | undefined {
+        return this._messageIdToUpdateListDirectory
+    }
+
+    public setMessageIdToUpdateListDirectory(messageId: string | undefined) {
+        this._messageIdToUpdateListDirectory = messageId
+    }
 
     public get pairProgrammingModeOn(): boolean {
         return this._pairProgrammingModeOn
@@ -95,21 +114,30 @@ export class ChatSession {
     public setSessionID(id?: string) {
         this.sessionId = id
     }
-    public get readFiles(): string[] {
+    public get readFiles(): DocumentReference[] {
         return this._readFiles
     }
+    public get readFolders(): DocumentReference[] {
+        return this._readFolders
+    }
     public get showDiffOnFileWrite(): boolean {
         return this._showDiffOnFileWrite
     }
     public setShowDiffOnFileWrite(value: boolean) {
         this._showDiffOnFileWrite = value
     }
-    public addToReadFiles(filePath: string) {
+    public addToReadFiles(filePath: DocumentReference) {
         this._readFiles.push(filePath)
     }
     public clearListOfReadFiles() {
         this._readFiles = []
     }
+    public setReadFolders(folder: DocumentReference) {
+        this._readFolders.push(folder)
+    }
+    public clearListOfReadFolders() {
+        this._readFolders = []
+    }
     async chatIam(chatRequest: SendMessageRequest): Promise<SendMessageCommandOutput> {
         const client = await createQDeveloperStreamingClient()
 

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

@@ -728,9 +728,19 @@ export class ChatController {
                         try {
                             await ToolUtils.validate(tool)
 
-                            const chatStream = new ChatStream(this.messenger, tabID, triggerID, toolUse, {
-                                requiresAcceptance: false,
-                            })
+                            const chatStream = new ChatStream(
+                                this.messenger,
+                                tabID,
+                                triggerID,
+                                toolUse,
+                                session,
+                                undefined,
+                                false,
+                                {
+                                    requiresAcceptance: false,
+                                },
+                                false
+                            )
                             if (tool.type === ToolType.FsWrite && toolUse.toolUseId) {
                                 const backup = await tool.tool.getBackup()
                                 session.setFsWriteBackup(toolUse.toolUseId, backup)
@@ -1221,6 +1231,7 @@ export class ChatController {
     private async processPromptMessageAsNewThread(message: PromptMessage) {
         const session = this.sessionStorage.getSession(message.tabID)
         session.clearListOfReadFiles()
+        session.clearListOfReadFolders()
         session.setShowDiffOnFileWrite(false)
         this.editorContextExtractor
             .extractContextForTrigger('ChatMessage')