Add helper functions for updating tabs and set loading state.

src/main.ts

@@ -111,13 +111,13 @@ export class MynahUI {
       this.feedbackForm = new FeedbackForm();
     }
 
-    this.tabsWrapper = (new Tabs({
+    this.tabsWrapper = new Tabs({
       onChange: (selectedTabId: string) => {
         if (this.props.onTabChange !== undefined) {
           this.props.onTabChange(selectedTabId);
         }
       }
-    })).render;
+    }).render;
 
     this.tabsWrapper.setAttribute('selected-tab', MynahUITabsStore.getInstance().getSelectedTabId());
 
@@ -266,6 +266,36 @@ export class MynahUI {
     });
   };
 
+  /**
+   * Create a new tab and set it to the currently-selected tab
+   * @param initialTabData Data used to initialize the new tab.
+   * @returns The tab ID of the created tab.
+   */
+  public createNewTab = (initialTabData: MynahUIDataModel): string => {
+    return MynahUITabsStore.getInstance().addTab({ store: { ...initialTabData } });
+  };
+
+  /**
+   * Update a tab's data
+   * @param tabData Tab data to update to.
+   */
+  public updateTab = (tabId: string, tabData: MynahUIDataModel): void => {
+    MynahUITabsStore.getInstance().updateTab(tabId, { store: { ...tabData } });
+  };
+
+  /**
+   * Set the loading state for chat window. When loading, a loading bubble will show
+   * and user input will be disabled
+   * @param tabId Corresponding tab ID.
+   * @param isLoading True if is loading, false otherwise.
+   */
+  public setChatLoadingState = (tabId: string, isLoading: boolean): void => {
+    MynahUITabsStore.getInstance().getTabDataStore(tabId).updateStore({
+      loadingChat: isLoading,
+      promptInputDisabledState: isLoading,
+    });
+  };
+
   /**
    * Adds a new user prompt in the chat window
    * @param tabId Corresponding tab ID.
@@ -357,7 +387,7 @@ export class MynahUI {
   }): void => {
     new Notification({
       ...props,
-      onNotificationClick: () => { }
+      onNotificationClick: () => {},
     }).notify();
   };
 }