feat(amazonq): Add UI Update for Progress bar and New button for Canc…

packages/amazonq/.changes/next-release/Feature-2b91347f-c5e7-4dcd-b902-70467692bafd.json

@@ -0,0 +1,4 @@
+{
+	"type": "Feature",
+	"description": "Add Progress Bar UI changes and new button for cancelling code generation to /dev"
+}

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ChatItem, ChatItemType, FeedbackPayload } from '@aws/mynah-ui'
+import { ChatItem, ChatItemType, FeedbackPayload, ProgressField } from '@aws/mynah-ui'
 import { TabType } from '../storages/tabsStorage'
 import { getActions } from '../diffTree/actions'
 import { DiffTreeFileInfo } from '../diffTree/types'
@@ -31,6 +31,9 @@
     onChatInputEnabled: (tabID: string, enabled: boolean) => void
     onUpdateAuthentication: (featureDevEnabled: boolean, authenticatingTabIDs: string[]) => void
     onNewTab: (tabType: TabType) => void
+    onUpdatePromptProgress: (tabID: string, progressField: ProgressField | null) => void;
+    onCustomFormAction?: (tabID: string, action: any) => void
+
 }
 
 export class Connector extends BaseConnector {
@@ -41,6 +44,8 @@
     private readonly chatInputEnabled
     private readonly onUpdateAuthentication
     private readonly onNewTab
+    private readonly onUpdatePromptProgress
+
 
     override getTabType(): TabType {
         return 'featuredev'
@@ -55,6 +60,12 @@
         this.onUpdateAuthentication = props.onUpdateAuthentication
         this.onNewTab = props.onNewTab
         this.onChatAnswerUpdated = props.onChatAnswerUpdated
+        this.onUpdatePromptProgress = props.onUpdatePromptProgress;
+    }
+
+    sendProgressUpdate(tabID: string, progressField: ProgressField | null): void {
+        this.onUpdatePromptProgress(tabID, progressField);
+
     }
 
     onOpenDiff = (tabID: string, filePath: string, deleted: boolean, messageId?: string): void => {
@@ -199,6 +210,10 @@
             this.onNewTab('featuredev')
             return
         }
+        if (messageData.type === 'updatePromptProgress') {
+            this.sendProgressUpdate(messageData.tabID, messageData.progressField);
+            return;
+        }
 
         // For other message types, call the base class handleMessageReceive
         await this.baseHandleMessageReceive(messageData)

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

@@ -80,7 +80,7 @@
         disableFileActions: boolean
     ) => void
     onUpdatePlaceholder: (tabID: string, newPlaceholder: string) => void
-    onUpdatePromptProgress: (tabID: string, progressField: ProgressField) => void
+    onUpdatePromptProgress: (tabID: string, progressField: ProgressField | null) => void;
     onChatInputEnabled: (tabID: string, enabled: boolean) => void
     onUpdateAuthentication: (featureDevEnabled: boolean, authenticatingTabIDs: string[]) => void
     onNewTab: (tabType: TabType) => void
@@ -129,8 +129,7 @@
                 this.cwChatConnector.onSourceLinkClick(tabID, messageId, link)
                 break
         }
-    }
-
+    }   
     onResponseBodyLinkClick = (tabID: string, messageId: string, link: string): void => {
         switch (this.tabsStorage.getTab(tabID)?.type) {
             case 'cwc':
@@ -625,6 +624,11 @@
         eventId: string | undefined = undefined
     ): void | undefined => {
         switch (this.tabsStorage.getTab(tabId)?.type) {
+            case 'featuredev':
+                if (action.id === 'cancel-running-task') {
+                    this.onStopChatResponse(tabId);
+                }
+                break
             case 'gumby':
                 this.gumbyChatConnector.onCustomFormAction(tabId, action)
                 break

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

@@ -250,7 +250,7 @@ export const createMynahUI = (
                 promptInputDisabledState: tabsStorage.isTabDead(tabID) || !enabled,
             })
         },
-        onUpdatePromptProgress(tabID: string, progressField: ProgressField) {
+        onUpdatePromptProgress(tabID: string, progressField: ProgressField | null) {
             mynahUI.updateStore(tabID, {
                 promptInputProgress: progressField,
             })
@@ -266,7 +266,6 @@ export const createMynahUI = (
                 mynahUI.updateStore(tabID, {
                     loadingChat: true,
                     promptInputDisabledState: true,
-                    cancelButtonWhenLoading: enableStopAction,
                 })
 
                 if (message && messageId) {
@@ -364,7 +363,6 @@ export const createMynahUI = (
             ) {
                 mynahUI.updateStore(tabID, {
                     loadingChat: true,
-                    cancelButtonWhenLoading: false,
                     promptInputDisabledState: true,
                 })
 
@@ -672,11 +670,10 @@ export const createMynahUI = (
                 }
             }
         },
-        onCustomFormAction: (tabId, action, eventId) => {
-            connector.onCustomFormAction(tabId, undefined, action, eventId)
-        },
         onChatPromptProgressActionButtonClicked: (tabID, action) => {
-            connector.onCustomFormAction(tabID, undefined, action)
+            if (action.id === 'cancel-running-task') {
+                connector.onStopChatResponse(tabID);
+            }
         },
         onSendFeedback: (tabId, feedbackPayload) => {
             connector.sendFeedback(tabId, feedbackPayload)

packages/core/src/amazonqFeatureDev/app.ts

@@ -35,6 +35,7 @@ export function init(appContext: AmazonQAppInitContext) {
         insertCodeAtPositionClicked: new vscode.EventEmitter<any>(),
         fileClicked: new vscode.EventEmitter<any>(),
         storeCodeResultMessageId: new vscode.EventEmitter<any>(),
+        processCustomFormAction: new vscode.EventEmitter<any>(),
     }
 
     const messenger = new Messenger(

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { MynahIcons } from '@aws/mynah-ui'
+import { MynahIcons, ProgressField } from '@aws/mynah-ui'
 import * as path from 'path'
 import * as vscode from 'vscode'
 import { EventEmitter } from 'vscode'
@@ -65,6 +65,8 @@ export interface ChatControllerEventEmitters {
     readonly insertCodeAtPositionClicked: EventEmitter<any>
     readonly fileClicked: EventEmitter<any>
     readonly storeCodeResultMessageId: EventEmitter<any>
+    readonly processCustomFormAction: EventEmitter<any>
+
 }
 
 type OpenDiffMessage = {
@@ -116,7 +118,12 @@ export class FeatureDevController {
         onDidChangeAmazonQVisibility((visible) => {
             this.isAmazonQVisible = visible
         })
-
+        this.chatControllerMessageListeners.processCustomFormAction.event((data) => {
+            if (data.action?.id === 'cancel-running-task') {
+                this.stopResponse({ tabID: data.tabID });
+            }
+        });
+
         this.chatControllerMessageListeners.processHumanChatMessage.event((data) => {
             this.processUserChatMessage(data).catch((e) => {
                 getLogger().error('processUserChatMessage failed: %s', (e as Error).message)
@@ -396,7 +403,23 @@ export class FeatureDevController {
      * Handle a regular incoming message when a user is in the code generation phase
      */
     private async onCodeGeneration(session: Session, message: string, tabID: string) {
-        // lock the UI/show loading bubbles
+
+        const updateProgress = (text: string) => {
+            const progressField: ProgressField = {
+                status: 'default',
+                text: text,
+                value: -1,
+                actions: [{
+                    id: 'cancel-running-task',
+                    text: 'Cancel',
+                    icon: 'cancel' as MynahIcons,
+                    disabled: false,
+                }]
+            };
+            this.messenger.sendUpdatePromptProgress(tabID, progressField);
+            this.messenger.sendAsyncEventProgress(tabID, true, text);
+        };
+
         this.messenger.sendAsyncEventProgress(
             tabID,
             true,
@@ -405,13 +428,21 @@ export class FeatureDevController {
                 : i18n('AWS.amazonq.featureDev.pillText.awaitMessageRetry')
         )
 
+        updateProgress(session.retries === codeGenRetryLimit
+            ? i18n('AWS.amazonq.featureDev.pillText.awaitMessage')
+            : i18n('AWS.amazonq.featureDev.pillText.awaitMessageRetry'));
+
         try {
+
+            updateProgress(i18n('AWS.amazonq.featureDev.pillText.requestingChanges'));
             this.messenger.sendAnswer({
                 message: i18n('AWS.amazonq.featureDev.pillText.requestingChanges'),
                 type: 'answer-stream',
                 tabID,
                 canBeVoted: true,
             })
+
+            updateProgress(i18n('AWS.amazonq.featureDev.pillText.generatingCode'));
             this.messenger.sendUpdatePlaceholder(tabID, i18n('AWS.amazonq.featureDev.pillText.generatingCode'))
             await session.send(message)
             const filePaths = session.state.filePaths ?? []
@@ -447,6 +478,7 @@ export class FeatureDevController {
                 return
             }
 
+            updateProgress(i18n('AWS.amazonq.featureDev.pillText.processingChanges'));
             this.messenger.sendCodeResult(
                 filePaths,
                 deletedFiles,
@@ -487,7 +519,7 @@ export class FeatureDevController {
             }
             this.messenger.sendUpdatePlaceholder(tabID, i18n('AWS.amazonq.featureDev.pillText.selectOption'))
         } finally {
-            // Finish processing the event
+            this.hideProgress(tabID);
 
             if (session?.state?.tokenSource?.token.isCancellationRequested) {
                 this.workOnNewTask(
@@ -849,6 +881,7 @@ export class FeatureDevController {
             i18n('AWS.amazonq.featureDev.pillText.stoppingCodeGeneration')
         )
         this.messenger.sendChatInputEnabled(message.tabID, false)
+        this.hideProgress(message.tabID);
 
         const session = await this.sessionStorage.getSession(message.tabID)
         if (session.state?.tokenSource) {
@@ -940,6 +973,11 @@ export class FeatureDevController {
         })
     }
 
+    private hideProgress(tabID: string) {
+        this.messenger.sendUpdatePromptProgress(tabID, null);
+        this.messenger.sendAsyncEventProgress(tabID, false, undefined);
+    }
+
     private sendFeedback() {
         void submitFeedback(placeholder, 'Amazon Q')
     }

packages/core/src/test/amazonqFeatureDev/utils.ts

@@ -41,6 +41,8 @@ export function createMockChatEmitters(): ChatControllerEventEmitters {
         insertCodeAtPositionClicked: new vscode.EventEmitter<any>(),
         fileClicked: new vscode.EventEmitter<any>(),
         storeCodeResultMessageId: new vscode.EventEmitter<any>(),
+        processCustomFormAction: new vscode.EventEmitter<any>(),
+
     }
 }