wip

Author: justinmk3

chat-client/src/client/mynahUi.ts

@@ -57,7 +57,7 @@ import {
 } from './utils'
 import { ChatHistory, ChatHistoryList } from './features/history'
 import { pairProgrammingModeOff, pairProgrammingModeOn, programmerModeCard } from './texts/pairProgramming'
-import { paidTierSuccessCard, freeTierLimitReachedCard, upgradeQButton } from './texts/paidTier'
+import { paidTierSuccessCard, freeTierLimitCard, freeTierLimitStickyCard } from './texts/paidTier'
 
 export interface InboundChatApi {
     addChatResponse(params: ChatResult, tabId: string, isPartialResult: boolean): void
@@ -827,34 +827,65 @@ export const createMynahUi = (
      * Shows a message if the user reaches free-tier limit.
      * Shows a message if the user just upgraded to paid-tier.
      */
-    const onPaidTierModeChange = (
-        tabId: string,
-        mode: 'paidtier' | 'paidtier-success' | 'freetier' | 'freetier-limit'
-    ) => {
-        if (!['paidtier', 'paidtier-success', 'freetier', 'freetier-limit'].includes(mode)) {
-            return // invalid mode
+    const onPaidTierModeChange = (tabId: string, mode: string | undefined) => {
+        if (!mode || !['freetier', 'freetier-limit', 'freetier-upgrade-pending', 'paidtier'].includes(mode)) {
+            return false // invalid mode
         }
 
         tabId = tabId !== '' ? tabId : getOrCreateTabId()!
 
-        // Detect if the tab is already showing the "Upgrade Q" calls-to-action.
-        const didShowLimitReached = mynahUi.getTabData(tabId)?.getStore()?.promptInputButtons?.[0] === upgradeQButton
-        if (mode === 'freetier-limit' && !didShowLimitReached) {
-            mynahUi.addChatItem(tabId, freeTierLimitReachedCard)
-        } else if (mode === 'paidtier-success') {
-            mynahUi.addChatItem(tabId, paidTierSuccessCard)
+        // Detect if the tab is already showing the "Upgrade Q" UI.
+        const isFreeTierLimitUi =
+            mynahUi.getTabData(tabId)?.getStore()?.promptInputStickyCard?.messageId ===
+            freeTierLimitStickyCard.messageId
+
+        if (mode === 'freetier-limit') {
+            mynahUi.updateStore(tabId, {
+                promptInputStickyCard: freeTierLimitStickyCard,
+            })
+
+            if (!isFreeTierLimitUi) {
+                // Avoid duplicate "limit reached" cards.
+                mynahUi.addChatItem(tabId, freeTierLimitCard)
+            }
+        } else if (mode === 'freetier-upgrade-pending') {
+            // Change the sticky banner to show a progress spinner.
+            const card: typeof freeTierLimitStickyCard = {
+                ...freeTierLimitStickyCard,
+                icon: 'progress',
+            }
+            mynahUi.updateStore(tabId, {
+                // Show a progress ribbon.
+                promptInputProgress: {
+                    status: 'default',
+                    text: 'Waiting for subscription status...',
+                    value: -1, // infinite
+                    // valueText: 'Waiting 2...',
+                },
+                promptInputStickyCard: card,
+            })
+        } else if (mode === 'paidtier') {
+            mynahUi.updateStore(tabId, {
+                promptInputStickyCard: null,
+                promptInputProgress: null,
+            })
+            if (isFreeTierLimitUi) {
+                // Avoid duplicate "success" cards.
+                mynahUi.addChatItem(tabId, paidTierSuccessCard)
+            }
         }
 
         mynahUi.updateStore(tabId, {
-            promptInputButtons: mode === 'freetier-limit' ? [upgradeQButton] : [],
+            // promptInputButtons: mode === 'freetier-limit' ? [upgradeQButton] : [],
             promptInputDisabledState: mode === 'freetier-limit',
         })
+
+        return true
     }
 
     const updateChat = (params: ChatUpdateParams) => {
         // HACK: Special field sent by `agenticChatController.ts:setPaidTierMode()`.
-        if ((params as any).paidTierMode) {
-            onPaidTierModeChange(params.tabId, (params as any).paidTierMode as any)
+        if (onPaidTierModeChange(params.tabId, (params as any).paidTierMode as string)) {
             return
         }
 

chat-client/src/client/texts/paidTier.ts

@@ -1,6 +1,19 @@
 import { ChatItem, ChatItemButton, ChatItemFormItem, ChatItemType, TextBasedFormItem } from '@aws/mynah-ui'
 
-export const freeTierLimitReachedCard: ChatItem = {
+export const upgradeQButton: ChatItemButton = {
+    flash: 'once',
+    fillState: 'hover',
+    position: 'outside',
+    id: 'paidtier-upgrade-q',
+    // https://github.com/aws/mynah-ui/blob/main/src/components/icon/icons/q.svg
+    // https://github.com/aws/mynah-ui/blob/main/src/components/icon/icons/rocket.svg
+    // icon: MynahIcons.Q,
+    description: 'Upgrade to Amazon Q Pro',
+    text: 'Upgrade Q',
+    status: 'info',
+}
+
+export const freeTierLimitCard: ChatItem = {
     type: ChatItemType.ANSWER,
     title: 'FREE TIER LIMIT REACHED',
     header: {
@@ -14,6 +27,13 @@ export const freeTierLimitReachedCard: ChatItem = {
     body: 'You have reached the free tier limit. Upgrade to Amazon Q Pro.\n\n[Learn More...](https://aws.amazon.com/q/pricing/)',
 }
 
+/** "Banner" (sticky card) shown above the chat prompt. */
+export const freeTierLimitStickyCard: Partial<ChatItem> = {
+    messageId: 'freetier-limit-banner',
+    body: 'You have reached the free tier limit. Upgrade to Amazon Q Pro. [Learn More...](https://aws.amazon.com/q/pricing/)',
+    buttons: [upgradeQButton],
+}
+
 export const paidTierSuccessCard: ChatItem = {
     type: ChatItemType.ANSWER,
     title: 'UPGRADED TO AMAZON Q PRO',
@@ -51,16 +71,3 @@ export const paidTierStep1: ChatItem = {
     type: ChatItemType.DIRECTIVE,
     body: 'You have upgraded to Amazon Q Pro',
 }
-
-export const upgradeQButton: ChatItemButton = {
-    flash: 'once',
-    fillState: 'hover',
-    position: 'outside',
-    id: 'upgrade-q',
-    // https://github.com/aws/mynah-ui/blob/main/src/components/icon/icons/q.svg
-    // https://github.com/aws/mynah-ui/blob/main/src/components/icon/icons/rocket.svg
-    // icon: MynahIcons.Q,
-    description: 'Upgrade to Amazon Q Pro',
-    text: 'Upgrade Q',
-    status: 'info',
-}