fix(amazonq): improve welcome page opening detection (#6171)

jpinkney-aws · web-flow · commit 34bc67e14c3d · 2024-12-13T15:14:57.000-05:00
## Problem - the current implementation only opens the first tab as a welcome tab for the next 3 times you open vscode ## Solution - the new implementation shows the welcome tab 3 total times, either when you open a new chat tab or a new vscode window or both --- - 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.
diff --git a/packages/amazonq/.changes/next-release/Bug Fix-49ee4921-044b-48b0-b51c-4e7054e84e6a.json b/packages/amazonq/.changes/next-release/Bug Fix-49ee4921-044b-48b0-b51c-4e7054e84e6a.json
@@ -0,0 +1,4 @@
+{
+	"type": "Bug Fix",
+	"description": "Improve when the welcome page is shown in amazon q chat"
+}
diff --git a/packages/core/src/amazonq/webview/generators/webViewContent.ts b/packages/core/src/amazonq/webview/generators/webViewContent.ts
@@ -23,7 +23,7 @@ export class WebViewContentGenerator {
         return JSON.stringify(Array.from(featureConfigs.entries()))
     }
 
-    public async generate(extensionURI: Uri, webView: Webview, showWelcomePage: boolean): Promise<string> {
+    public async generate(extensionURI: Uri, webView: Webview): Promise<string> {
         const entrypoint = process.env.WEBPACK_DEVELOPER_SERVER
             ? 'http: localhost'
             : 'https: file+.vscode-resources.vscode-cdn.net'
@@ -47,14 +47,14 @@ export class WebViewContentGenerator {
             <head>
                 <meta http-equiv="Content-Security-Policy" content="${contentPolicy}">
                 <title>Amazon Q (Preview)</title>
-                ${await this.generateJS(extensionURI, webView, showWelcomePage)}
+                ${await this.generateJS(extensionURI, webView)}
             </head>
             <body ${featureDataAttributes}>
             </body>
         </html>`
     }
 
-    private async generateJS(extensionURI: Uri, webView: Webview, showWelcomePage: boolean): Promise<string> {
+    private async generateJS(extensionURI: Uri, webView: Webview): Promise<string> {
         const source = path.join('vue', 'src', 'amazonq', 'webview', 'ui', 'amazonq-ui.js') // Sent to dist/vue folder in webpack.
         const assetsPath = Uri.joinPath(extensionURI)
         const javascriptUri = Uri.joinPath(assetsPath, 'dist', source)
@@ -80,14 +80,16 @@ export class WebViewContentGenerator {
         const disabledCommandsString = isSageMaker() ? `['/dev', '/transform']` : '[]'
         const disclaimerAcknowledged = globals.globalState.tryGet('aws.amazonq.disclaimerAcknowledged', Boolean, false)
 
+        const welcomeLoadCount = globals.globalState.tryGet('aws.amazonq.welcomeChatShowCount', Number, 0)
+
         return `
         <script type="text/javascript" src="${javascriptEntrypoint.toString()}" defer onload="init()"></script>
         ${cssLinks}
         <script type="text/javascript">
             const init = () => {
                 createMynahUI(acquireVsCodeApi(), ${
                     (await AuthUtil.instance.getChatAuthState()).amazonQ === 'connected'
-                },${featureConfigsString},${showWelcomePage},${disclaimerAcknowledged},${disabledCommandsString});
+                },${featureConfigsString},${welcomeLoadCount},${disclaimerAcknowledged},${disabledCommandsString});
             }
         </script>
         `
diff --git a/packages/core/src/amazonq/webview/messages/messageDispatcher.ts b/packages/core/src/amazonq/webview/messages/messageDispatcher.ts
@@ -74,6 +74,11 @@ export function dispatchWebViewMessagesToApps(
                 globals.globalState.tryUpdate('aws.amazonq.disclaimerAcknowledged', true)
                 return
             }
+            case 'update-welcome-count': {
+                const currentLoadCount = globals.globalState.tryGet('aws.amazonq.welcomeChatShowCount', Number, 0)
+                void globals.globalState.tryUpdate('aws.amazonq.welcomeChatShowCount', currentLoadCount + 1)
+                return
+            }
         }
 
         if (msg.type === 'error') {
diff --git a/packages/core/src/amazonq/webview/ui/commands.ts b/packages/core/src/amazonq/webview/ui/commands.ts
@@ -41,5 +41,6 @@ type MessageCommand =
     | 'review'
     | 'open-user-guide'
     | 'send-telemetry'
+    | 'update-welcome-count'
 
 export type ExtensionMessage = Record<string, any> & { command: MessageCommand }
diff --git a/packages/core/src/amazonq/webview/ui/main.ts b/packages/core/src/amazonq/webview/ui/main.ts
@@ -33,11 +33,17 @@ import { agentWalkthroughDataModel } from './walkthrough/agent'
 import { createClickTelemetry, createOpenAgentTelemetry } from './telemetry/actions'
 import { disclaimerAcknowledgeButtonId, disclaimerCard } from './texts/disclaimer'
 
+/**
+ * The number of welcome chat tabs that can be opened before the NEXT one will become
+ * a regular chat tab.
+ */
+const welcomeCountThreshold = 3
+
 export const createMynahUI = (
     ideApi: any,
     amazonQEnabled: boolean,
     featureConfigsSerialized: [string, FeatureContext][],
-    showWelcomePage: boolean,
+    welcomeCount: number,
     disclaimerAcknowledged: boolean,
     disabledCommands?: string[]
 ) => {
@@ -70,11 +76,23 @@ export const createMynahUI = (
             })
         },
     })
+
+    const showWelcomePage = () => {
+        return welcomeCount < welcomeCountThreshold
+    }
+
+    const updateWelcomeCount = () => {
+        ideApi.postMessage({
+            command: 'update-welcome-count',
+        })
+        welcomeCount += 1
+    }
+
     // Adding the first tab as CWC tab
     tabsStorage.addTab({
         id: 'tab-1',
         status: 'free',
-        type: showWelcomePage ? 'welcome' : 'cwc',
+        type: showWelcomePage() ? 'welcome' : 'cwc',
         isSelected: true,
     })
 
@@ -541,6 +559,25 @@ export const createMynahUI = (
     mynahUI = new MynahUI({
         onReady: connector.uiReady,
         onTabAdd: (tabID: string) => {
+            /**
+             * If the next tab opening will cross the welcome count threshold then
+             * update the next tabs defaults
+             */
+            if (welcomeCount + 1 >= welcomeCountThreshold) {
+                tabsStorage.updateTabTypeFromUnknown(tabID, 'cwc')
+                mynahUI?.updateTabDefaults({
+                    store: {
+                        ...tabDataGenerator.getTabData('cwc', true),
+                        tabHeaderDetails: void 0,
+                        compactMode: false,
+                        tabBackground: false,
+                    },
+                })
+            } else {
+                // we haven't reached the welcome count limit yet
+                updateWelcomeCount()
+            }
+
             // If featureDev has changed availability inbetween the default store settings and now
             // make sure to show/hide it accordingly
             mynahUI.updateStore(tabID, {
@@ -812,15 +849,17 @@ export const createMynahUI = (
             'tab-1': {
                 isSelected: true,
                 store: {
-                    ...(showWelcomePage
+                    ...(showWelcomePage()
                         ? welcomeScreenTabData(tabDataGenerator).store
                         : tabDataGenerator.getTabData('cwc', true)),
                     ...(disclaimerCardActive ? { promptInputStickyCard: disclaimerCard } : {}),
                 },
             },
         },
         defaults: {
-            store: tabDataGenerator.getTabData('cwc', true),
+            store: showWelcomePage()
+                ? welcomeScreenTabData(tabDataGenerator).store
+                : tabDataGenerator.getTabData('cwc', true),
         },
         config: {
             maxTabs: 10,
@@ -829,6 +868,14 @@ export const createMynahUI = (
         },
     })
 
+    /**
+     * Update the welcome count if we've initially shown
+     * the welcome page
+     */
+    if (showWelcomePage()) {
+        updateWelcomeCount()
+    }
+
     followUpsInteractionHandler = new FollowUpInteractionHandler({
         mynahUI,
         connector,
diff --git a/packages/core/src/amazonq/webview/webView.ts b/packages/core/src/amazonq/webview/webView.ts
@@ -22,11 +22,6 @@ import { TabType } from './ui/storages/tabsStorage'
 import { deactivateInitialViewBadge, shouldShowBadge } from '../util/viewBadgeHandler'
 import { telemetry } from '../../shared/telemetry/telemetry'
 import { amazonqMark } from '../../shared/performance/marks'
-import { globals } from '../../shared'
-import { AuthUtil } from '../../codewhisperer/util/authUtil'
-
-// The max number of times we should show the welcome to q chat panel before moving them to the regular one
-const maxWelcomeWebviewLoads = 3
 
 export class AmazonQChatViewProvider implements WebviewViewProvider {
     public static readonly viewType = 'aws.AmazonQChatView'
@@ -65,33 +60,10 @@ export class AmazonQChatViewProvider implements WebviewViewProvider {
 
         dispatchAppsMessagesToWebView(webviewView.webview, this.appsMessagesListener)
 
-        /**
-         * Show the welcome to q chat ${maxWelcomeWebviewLoads} times before showing the normal panel
-         */
-        const welcomeLoadCount = globals.globalState.tryGet('aws.amazonq.welcomeChatShowCount', Number, 0)
-        if (welcomeLoadCount < maxWelcomeWebviewLoads) {
-            webviewView.webview.html = await this.webViewContentGenerator.generate(
-                this.extensionContext.extensionUri,
-                webviewView.webview,
-                true
-            )
-
-            /**
-             * resolveWebviewView gets called even when the user isn't logged in and the auth page is showing.
-             * We don't want to incremenent the show count until the user has fully logged in and resolveWebviewView
-             * gets called again
-             */
-            const authenticated = (await AuthUtil.instance.getChatAuthState()).amazonQ === 'connected'
-            if (authenticated) {
-                await globals.globalState.update('aws.amazonq.welcomeChatShowCount', welcomeLoadCount + 1)
-            }
-        } else {
-            webviewView.webview.html = await this.webViewContentGenerator.generate(
-                this.extensionContext.extensionUri,
-                webviewView.webview,
-                false
-            )
-        }
+        webviewView.webview.html = await this.webViewContentGenerator.generate(
+            this.extensionContext.extensionUri,
+            webviewView.webview
+        )
 
         performance.mark(amazonqMark.open)
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +	"type": "Bug Fix",
 +	"description": "Improve when the welcome page is shown in amazon q chat"
 +}
Original file line number	Diff line number	Diff line change
`@@ -74,6 +74,11 @@ export function dispatchWebViewMessagesToApps(`
`74`	`74`	`globals.globalState.tryUpdate('aws.amazonq.disclaimerAcknowledged', true)`
`75`	`75`	`return`
`76`	`76`	`}`
	`77`	`+ case 'update-welcome-count': {`
	`78`	`+ const currentLoadCount = globals.globalState.tryGet('aws.amazonq.welcomeChatShowCount', Number, 0)`
	`79`	`+ void globals.globalState.tryUpdate('aws.amazonq.welcomeChatShowCount', currentLoadCount + 1)`
	`80`	`+ return`
	`81`	`+ }`
`77`	`82`	`}`
`78`	`83`
`79`	`84`	`if (msg.type === 'error') {`