fix: open initial tab using mynahUI defaults instead of waiting for ChatOptions (#1322)

* fix: open initial tab using mynahUI defaults instead of waiting for ChatOptions

* fix: push banner message to initial tab after chat options are received

Author: viktorsaws

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

@@ -69,40 +69,25 @@ describe('Chat', () => {
     })
 
     it('publishes ready event when initialized', () => {
-        assert.calledWithExactly(clientApi.postMessage.firstCall, { command: READY_NOTIFICATION_METHOD })
-    })
-
-    it('creates initial tab when chat options are provided', () => {
-        const bannerText = 'This is a test banner message'
-        const eventParams = {
-            command: CHAT_OPTIONS,
-            params: {
-                chatNotifications: {
-                    bannerText: bannerText,
-                },
-            },
-        }
-        const sendToPromptEvent = createInboundEvent(eventParams)
-        window.dispatchEvent(sendToPromptEvent)
-
-        assert.calledWithExactly(clientApi.postMessage.firstCall, { command: READY_NOTIFICATION_METHOD })
+        assert.callCount(clientApi.postMessage, 4)
 
-        assert.calledWithExactly(clientApi.postMessage.secondCall, {
+        assert.calledWithExactly(clientApi.postMessage.firstCall, {
             command: TELEMETRY,
-            params: { name: ENTER_FOCUS },
+            params: { name: 'enterFocus' },
         })
+        assert.calledWithExactly(clientApi.postMessage.secondCall, { command: READY_NOTIFICATION_METHOD })
 
         assert.calledWithExactly(clientApi.postMessage.thirdCall, {
             command: TAB_ADD_NOTIFICATION_METHOD,
-            params: { tabId: sinon.match.string },
+            params: { tabId: initialTabId },
         })
 
         assert.calledWithExactly(clientApi.postMessage.lastCall, {
             command: TELEMETRY,
             params: {
                 triggerType: 'click',
                 name: TAB_ADD_TELEMETRY_EVENT,
-                tabId: sinon.match.string,
+                tabId: initialTabId,
             },
         })
     })

chat-client/src/client/chat.ts

@@ -41,6 +41,7 @@ import {
     CONTEXT_COMMAND_NOTIFICATION_METHOD,
     CONVERSATION_CLICK_REQUEST_METHOD,
     CREATE_PROMPT_NOTIFICATION_METHOD,
+    ChatMessage,
     ChatOptionsUpdateParams,
     ChatParams,
     ChatUpdateParams,
@@ -216,12 +217,26 @@ export const createChat = (
                     tabFactory.enableExport()
                 }
 
-                const initialTabId = mynahApi.createTabId()
-                if (initialTabId) mynahUi.selectTab(initialTabId)
-
                 const allExistingTabs: MynahUITabStoreModel = mynahUi.getAllTabs()
                 const highlightCommand = featureConfig.get('highlightCommand')
 
+                if (tabFactory.initialTabId && allExistingTabs[tabFactory.initialTabId] && params?.chatNotifications) {
+                    // Edge case: push banner message to initial tab when ChatOptions are received
+                    // Because initial tab is added to MynahUi store at initialisation,
+                    // that tab does not have banner message, which arrives in ChatOptions above.
+                    const store = mynahUi.getTabData(tabFactory.initialTabId)?.getStore() || {}
+                    const chatItems = store.chatItems || []
+                    const updatedInitialItems = tabFactory.getChatItems(false, false, chatItems as ChatMessage[])
+
+                    // First clear the tab, so that messages are not appended https://github.com/aws/mynah-ui/blob/38608dff905b3790d85c73e2911ec7071c8a8cdf/docs/USAGE.md#using-updatestore-function
+                    mynahUi.updateStore(tabFactory.initialTabId, {
+                        chatItems: [],
+                    })
+                    mynahUi.updateStore(tabFactory.initialTabId, {
+                        chatItems: updatedInitialItems,
+                    })
+                }
+
                 for (const tabId in allExistingTabs) {
                     mynahUi.updateStore(tabId, {
                         ...tabFactory.getDefaultTabData(),

chat-client/src/client/mynahUi.ts

@@ -233,6 +233,7 @@ export const createMynahUi = (
         },
         onReady: () => {
             messager.onUiReady()
+            messager.onTabAdd(tabFactory.initialTabId)
         },
         onFileClick: (tabId, filePath, deleted, messageId, eventId, fileDetails) => {
             messager.onFileClick({ tabId, filePath, messageId, fullPath: fileDetails?.data?.['fullPath'] })
@@ -483,7 +484,15 @@ export const createMynahUi = (
     }
 
     const mynahUiProps: MynahUIProps = {
-        tabs: {},
+        tabs: {
+            [tabFactory.initialTabId]: {
+                isSelected: true,
+                store: {
+                    ...tabFactory.createTab(true),
+                    chatItems: tabFactory.getChatItems(true, true),
+                },
+            },
+        },
         defaults: {
             store: tabFactory.createTab(false),
         },

chat-client/src/client/tabs/tabFactory.ts

@@ -19,6 +19,7 @@ export class TabFactory {
     private history: boolean = false
     private export: boolean = false
     private agenticMode: boolean = false
+    initialTabId: string
 
     public static generateUniqueId() {
         // from https://github.com/aws/mynah-ui/blob/a3799f47ca4b7c02850264e328539a40709a6858/src/helper/guid.ts#L6
@@ -31,7 +32,9 @@ export class TabFactory {
         private defaultTabData: DefaultTabData,
         private quickActionCommands?: QuickActionCommandGroup[],
         private bannerMessage?: ChatMessage
-    ) {}
+    ) {
+        this.initialTabId = TabFactory.generateUniqueId()
+    }
 
     public createTab(disclaimerCardActive: boolean): MynahUIDataModel {
         const tabData: MynahUIDataModel = {