feat(paidtier): detect Free Tier, show "Upgrade" button

- control MynahUI from Flare server

Author: justinmk3

chat-client/src/client/chat.ts

@@ -390,6 +390,10 @@ export const createChat = (
         promptInputOptionChange: (params: PromptInputOptionChangeParams) => {
             sendMessageToClient({ command: PROMPT_INPUT_OPTION_CHANGE_METHOD, params })
         },
+        promptInputButtonClick: params => {
+            // TODO
+            sendMessageToClient({ command: BUTTON_CLICK_REQUEST_METHOD, params })
+        },
         stopChatResponse: (tabId: string) => {
             sendMessageToClient({ command: STOP_CHAT_RESPONSE, params: { tabId } })
         },

chat-client/src/client/messager.ts

@@ -92,6 +92,7 @@ export interface OutboundChatApi {
     tabBarAction(params: TabBarActionParams): void
     onGetSerializedChat(requestId: string, result: GetSerializedChatResult | ErrorResult): void
     promptInputOptionChange(params: PromptInputOptionChangeParams): void
+    promptInputButtonClick(params: ButtonClickParams): void
     stopChatResponse(tabId: string): void
     sendButtonClickEvent(params: ButtonClickParams): void
     onOpenSettings(settingKey: string): void
@@ -229,6 +230,10 @@ export class Messager {
         this.chatApi.promptInputOptionChange(params)
     }
 
+    onPromptInputButtonClick = (params: ButtonClickParams): void => {
+        this.chatApi.promptInputButtonClick(params)
+    }
+
     onStopChatResponse = (tabId: string): void => {
         this.chatApi.stopChatResponse(tabId)
     }

chat-client/src/client/mynahUi.test.ts

@@ -64,6 +64,7 @@ describe('MynahUI', () => {
             tabBarAction: sinon.stub(),
             onGetSerializedChat: sinon.stub(),
             promptInputOptionChange: sinon.stub(),
+            promptInputButtonClick: sinon.stub(),
             stopChatResponse: sinon.stub(),
             sendButtonClickEvent: sinon.stub(),
             onOpenSettings: sinon.stub(),

chat-client/src/client/mynahUi.ts

@@ -58,6 +58,7 @@ import {
 import { ChatHistory, ChatHistoryList } from './features/history'
 import { pairProgrammingModeOff, pairProgrammingModeOn, programmerModeCard } from './texts/pairProgramming'
 import { getModelSelectionChatItem } from './texts/modelSelection'
+import { paidTierSuccessCard, freeTierLimitReachedCard, upgradeQButton } from './texts/paidTier'
 
 export interface InboundChatApi {
     addChatResponse(params: ChatResult, tabId: string, isPartialResult: boolean): void
@@ -488,6 +489,14 @@ export const createMynahUi = (
             }
             messager.onPromptInputOptionChange({ tabId, optionsValues })
         },
+        onPromptInputButtonClick: (tabId, buttonId, eventId) => {
+            const payload: ButtonClickParams = {
+                tabId,
+                messageId: 'not-a-message',
+                buttonId: buttonId,
+            }
+            messager.onPromptInputButtonClick(payload)
+        },
         onMessageDismiss: (tabId, messageId) => {
             if (messageId === programmerModeCard.messageId) {
                 programmingModeCardActive = false
@@ -836,7 +845,42 @@ export const createMynahUi = (
         })
     }
 
+    /**
+     * Adjusts the UI when the user changes to/from free-tier/paid-tier.
+     * 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
+        }
+
+        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)
+        }
+
+        mynahUi.updateStore(tabId, {
+            promptInputButtons: mode === 'freetier-limit' ? [upgradeQButton] : [],
+            promptInputDisabledState: mode === 'freetier-limit',
+        })
+    }
+
     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)
+            return
+        }
+
         const isChatLoading = params.state?.inProgress
         mynahUi.updateStore(params.tabId, {
             loadingChat: isChatLoading,

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

@@ -0,0 +1,66 @@
+import { ChatItem, ChatItemButton, ChatItemFormItem, ChatItemType, TextBasedFormItem } from '@aws/mynah-ui'
+
+export const freeTierLimitReachedCard: ChatItem = {
+    type: ChatItemType.ANSWER,
+    title: 'FREE TIER LIMIT REACHED',
+    header: {
+        icon: 'q',
+        iconStatus: 'primary',
+        body: 'Upgrade to Amazon Q Pro',
+    },
+    messageId: 'freetier-limit',
+    fullWidth: true,
+    canBeDismissed: false,
+    body: 'You have reached the free tier limit. Upgrade to Amazon Q Pro.\n\n[Learn More...](https://aws.amazon.com/q/pricing/)',
+}
+
+export const paidTierSuccessCard: ChatItem = {
+    type: ChatItemType.ANSWER,
+    title: 'UPGRADED TO AMAZON Q PRO',
+    header: {
+        icon: 'q',
+        iconStatus: 'primary',
+        body: 'Welcome to Amazon Q Pro',
+        status: {
+            status: 'success',
+            icon: 'q',
+            text: 'Success',
+        },
+    },
+    messageId: 'paidtier-success',
+    fullWidth: true,
+    canBeDismissed: true,
+    body: 'Upgraded to Amazon Q Pro\n\n[Learn More...](https://aws.amazon.com/q/)',
+}
+
+export const paidTierPromptInput: TextBasedFormItem = {
+    placeholder: '111111111111',
+    type: 'textinput',
+    id: 'paid-tier',
+    tooltip: 'Upgrade to Amazon Q Pro',
+    value: 'true',
+    icon: 'magic',
+}
+
+export const paidTierStep0: ChatItem = {
+    type: ChatItemType.DIRECTIVE,
+    body: 'You have upgraded to Amazon Q Pro',
+}
+
+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',
+}

chat-client/src/client/withAdapter.ts

@@ -57,6 +57,7 @@ export const withAdapter = (
         onChatPromptProgressActionButtonClicked: addDefaultRouting('onChatPromptProgressActionButtonClicked'),
         onTabbedContentTabChange: addDefaultRouting('onTabbedContentTabChange'),
         onPromptInputOptionChange: addDefaultRouting('onPromptInputOptionChange'),
+        onPromptInputButtonClick: addDefaultRouting('onPromptInputButtonClick'),
         onMessageDismiss: addDefaultRouting('onMessageDismiss'),
 
         /**

chat-client/src/contracts/chatClientAdapter.ts

@@ -36,6 +36,7 @@ export interface ChatEventHandler
         | 'onResetStore'
         | 'onReady'
         | 'onPromptInputOptionChange'
+        | 'onPromptInputButtonClick'
         | 'onMessageDismiss'
     > {}