@thoughtspot/visual-embed-sdk 1.36.2 → 1.36.4

package/src/embed/app.ts

@@ -137,6 +137,20 @@ export interface AppViewConfig extends Omit<ViewConfig, 'visibleTabs'> {
      * ```
      */
     disableProfileAndHelp?: boolean;
+    /**
+     * @version SDK: 1.36.3 | ThoughtSpot: 10.1.0.cl
+     * @default true
+     * Whether the help menu in the top nav bar should be served
+     * from Pendo or ThoughtSpot's internal help items.
+     * @example
+     * ```js
+     * const embed = new AppEmbed('#tsEmbed', {
+     *   ... // other options
+     *  enablePendoHelp: false,
+     * });
+     * ```
+     */
+    enablePendoHelp?: boolean
     /**
      * Control the visibility of the application switcher button on the nav-bar.
      * By default, the application switcher is shown.
@@ -526,6 +540,7 @@ export class AppEmbed extends V1Embed {
             hideIrrelevantChipsInLiveboardTabs = false,
             homePageSearchBarMode,
             isUnifiedSearchExperienceEnabled = true,
+            enablePendoHelp = true,
         } = this.viewConfig;
 
         let params = {};
@@ -583,6 +598,10 @@ export class AppEmbed extends V1Embed {
             params[Param.HomePageSearchBarMode] = homePageSearchBarMode;
         }
 
+        if (enablePendoHelp !== undefined) {
+            params[Param.EnablePendoHelp] = enablePendoHelp;
+        }
+
         params[Param.DataPanelV2Enabled] = dataPanelV2;
         params[Param.HideHomepageLeftNav] = hideHomepageLeftNav;
         params[Param.ModularHomeExperienceEnabled] = modularHomeExperience;
@@ -742,7 +761,8 @@ export class AppEmbed extends V1Embed {
      * to be embedded.
      */
     public async render(): Promise<AppEmbed> {
-        super.render();
+        await super.render();
+
         const src = this.getIFrameSrc();
         await this.renderV1Embed(src);
 

package/src/embed/base.ts

@@ -30,9 +30,10 @@ import {
     AuthEventEmitter,
     postLoginService,
 } from '../auth';
+import '../utils/with-resolvers-polyfill';
 import { uploadMixpanelEvent, MIXPANEL_EVENT } from '../mixpanel-service';
 import { getEmbedConfig, setEmbedConfig } from './embedConfig';
-import { getQueryParamString } from '../utils';
+import { getQueryParamString, getValueFromWindow, storeValueInWindow } from '../utils';
 import { resetAllCachedServices } from '../utils/resetServices';
 
 const CONFIG_DEFAULTS: Partial<EmbedConfig> = {
@@ -171,6 +172,40 @@ function backwardCompat(embedConfig: EmbedConfig): EmbedConfig {
     return newConfig;
 }
 
+type InitFlagStore = {
+  initPromise: Promise<ReturnType<typeof init>>;
+  isInitCalled: boolean;
+  initPromiseResolve: (value: ReturnType<typeof init>) => void;
+}
+const initFlagKey = 'initFlagKey';
+
+export const createAndSetInitPromise = (): void => {
+    const {
+        promise: initPromise,
+        resolve: initPromiseResolve,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+    } = Promise.withResolvers<AuthEventEmitter>();
+    const initFlagStore: InitFlagStore = {
+        initPromise,
+        isInitCalled: false,
+        initPromiseResolve,
+    };
+    storeValueInWindow(initFlagKey, initFlagStore, {
+        // In case of diff imports the promise might be already set
+        ignoreIfAlreadyExists: true,
+    });
+};
+
+createAndSetInitPromise();
+
+export const getInitPromise = ():
+    Promise<
+      ReturnType<typeof init>
+    > => getValueFromWindow<InitFlagStore>(initFlagKey)?.initPromise;
+
+export const getIsInitCalled = (): boolean => !!getValueFromWindow(initFlagKey)?.isInitCalled;
+
 /**
  * Initializes the Visual Embed SDK globally and perform
  * authentication if applicable. This function needs to be called before any ThoughtSpot
@@ -223,6 +258,11 @@ export const init = (embedConfig: EmbedConfig): AuthEventEmitter => {
     if (getEmbedConfig().callPrefetch) {
         prefetch(getEmbedConfig().thoughtSpotHost);
     }
+
+    // Resolves the promise created in the initPromiseKey
+    getValueFromWindow<InitFlagStore>(initFlagKey).initPromiseResolve(authEE);
+    getValueFromWindow<InitFlagStore>(initFlagKey).isInitCalled = true;
+
     return authEE as AuthEventEmitter;
 };
 

package/src/embed/bodyless-conversation.ts

@@ -55,7 +55,8 @@ class ConversationMessage extends TsEmbed {
     }
 
     public async render(): Promise<ConversationMessage> {
-        super.render();
+        await super.render();
+
         const src = this.getIframeSrc();
         await this.renderIFrame(src);
         return this;

package/src/embed/conversation.ts

@@ -164,7 +164,8 @@ export class ConversationEmbed extends TsEmbed {
     }
 
     public async render(): Promise<ConversationEmbed> {
-        super.render();
+        await super.render();
+
         const src = this.getIframeSrc();
         await this.renderIFrame(src);
         return this;

package/src/embed/embedConfig.ts

@@ -1,6 +1,7 @@
+import { getValueFromWindow, storeValueInWindow } from '../utils';
 import { EmbedConfig } from '../types';
 
-let config = {} as EmbedConfig;
+const configKey = 'embedConfig';
 
 /**
  * Gets the configuration embed was initialized with.
@@ -8,7 +9,7 @@ let config = {} as EmbedConfig;
  * @version SDK: 1.19.0 | ThoughtSpot: *
  * @group Global methods
  */
-export const getEmbedConfig = (): EmbedConfig => config;
+export const getEmbedConfig = (): EmbedConfig => getValueFromWindow(configKey) || ({} as any);
 
 /**
  * Sets the configuration embed was initialized with.
@@ -18,6 +19,6 @@ export const getEmbedConfig = (): EmbedConfig => config;
  * @group Global methods
  */
 export const setEmbedConfig = (newConfig: EmbedConfig) => {
-    config = newConfig;
-    return newConfig;
+    storeValueInWindow(configKey, newConfig);
+    return getValueFromWindow(configKey);
 };

package/src/embed/liveboard.spec.ts

@@ -553,13 +553,13 @@ describe('Liveboard/viz embed tests', () => {
         });
     });
 
-    test('navigateToLiveboard should trigger the navigate event with the correct path', (done) => {
+    test('navigateToLiveboard should trigger the navigate event with the correct path', async (done) => {
         mockMessageChannel();
         const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
             ...defaultViewConfig,
         } as LiveboardViewConfig);
         const onSpy = jest.spyOn(liveboardEmbed, 'trigger');
-        liveboardEmbed.prerenderGeneric();
+        await liveboardEmbed.prerenderGeneric();
         executeAfterWait(() => {
             const iframe = getIFrameEl();
             postMessageToParent(iframe.contentWindow, {
@@ -573,14 +573,14 @@ describe('Liveboard/viz embed tests', () => {
         });
     });
 
-    test('navigateToLiveboard with preRender', (done) => {
+    test('navigateToLiveboard with preRender', async (done) => {
         mockMessageChannel();
         const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
             ...defaultViewConfig,
             preRenderId: 'test',
         } as LiveboardViewConfig);
         const onSpy = jest.spyOn(liveboardEmbed, 'trigger');
-        liveboardEmbed.prerenderGeneric();
+        await liveboardEmbed.prerenderGeneric();
         executeAfterWait(() => {
             const iframe = getIFrameEl();
             postMessageToParent(iframe.contentWindow, {
@@ -604,7 +604,7 @@ describe('Liveboard/viz embed tests', () => {
                 },
             ],
         } as LiveboardViewConfig);
-        liveboardEmbed.render();
+        await liveboardEmbed.render();
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
@@ -637,7 +637,7 @@ describe('Liveboard/viz embed tests', () => {
             ...defaultViewConfig,
             liveboardId,
         } as LiveboardViewConfig);
-        liveboardEmbed.render();
+        await liveboardEmbed.render();
         await executeAfterWait(() => {
             const result = liveboardEmbed.trigger(HostEvent.SetActiveTab, {
                 tabId: newActiveTabId,
@@ -650,13 +650,13 @@ describe('Liveboard/viz embed tests', () => {
     });
 
     describe('PreRender flow for liveboard embed', () => {
-        test('it should preRender generic with liveboard id is not passed', (done) => {
+        test('it should preRender generic with liveboard id is not passed', async (done) => {
             const consoleSpy = jest.spyOn(console, 'error');
             const libEmbed = new LiveboardEmbed(getRootEl(), {
                 preRenderId: 'testPreRender',
             });
             const prerenderGenericSpy = jest.spyOn(libEmbed, 'prerenderGeneric');
-            libEmbed.preRender();
+            await libEmbed.preRender();
             executeAfterWait(() => {
                 const iFrame = document.getElementById(
                     libEmbed.getPreRenderIds().child,
@@ -735,7 +735,7 @@ describe('Liveboard/viz embed tests', () => {
                     };
                 });
 
-            libEmbed.preRender();
+            await libEmbed.preRender();
 
             await waitFor(() => !!getIFrameEl());
 
@@ -750,7 +750,7 @@ describe('Liveboard/viz embed tests', () => {
                 liveboardId: testLiveboardId,
             });
             const navigateToLiveboardSpy = jest.spyOn(newLibEmbed, 'navigateToLiveboard');
-            newLibEmbed.showPreRender();
+            await newLibEmbed.showPreRender();
 
             executeAfterWait(() => {
                 const iFrame = document.getElementById(
@@ -776,7 +776,7 @@ describe('Liveboard/viz embed tests', () => {
                 ...defaultViewConfig,
                 vizId: 'testViz',
             });
-            liveboardEmbed.render();
+            await liveboardEmbed.render();
             mockProcessTrigger.mockResolvedValue({ session: 'test' });
             await executeAfterWait(async () => {
                 await liveboardEmbed.trigger(

package/src/embed/liveboard.ts

@@ -21,7 +21,7 @@ import {
 } from '../types';
 import { getQueryParamString, isUndefined } from '../utils';
 import { getAuthPromise } from './base';
-import { V1Embed } from './ts-embed';
+import { TsEmbed, V1Embed } from './ts-embed';
 import { addPreviewStylesIfNotPresent } from '../utils/global-styles';
 import { TriggerPayload, TriggerResponse } from './hostEventClient/contracts';
 
@@ -293,7 +293,10 @@ export interface LiveboardViewConfig
      */
     showPreviewLoader?: boolean;
     /**
-     * This flag is used to enable the compact header on a Liveboard
+     * Enables or disables the compact header feature on a Liveboard.
+     * Compact Liveboard header is turned off by default on Liveboards in
+     * ThoughtSpot Embedded apps.
+     *
      * @type {boolean}
      * @default false
      * @version SDK: 1.35.0 | ThoughtSpot:10.3.0.cl
@@ -632,12 +635,11 @@ export class LiveboardEmbed extends V1Embed {
         }
     }
 
-    protected handleRenderForPrerender(): void {
+    protected async handleRenderForPrerender(): Promise<TsEmbed> {
         if (isUndefined(this.viewConfig.liveboardId)) {
-            this.prerenderGeneric();
-            return;
+            return this.prerenderGeneric();
         }
-        super.handleRenderForPrerender();
+        return super.handleRenderForPrerender();
     }
 
     /**
@@ -667,7 +669,7 @@ export class LiveboardEmbed extends V1Embed {
      * visualization ID and the runtime filters.
      */
     public async render(): Promise<LiveboardEmbed> {
-        super.render();
+        await super.render();
 
         const src = this.getIFrameSrc();
         await this.renderV1Embed(src);

package/src/embed/sage.ts

@@ -206,8 +206,7 @@ export class SageEmbed extends V1Embed {
      * @returns {SageEmbed} Eureka/Sage embed
      */
     public async render(): Promise<SageEmbed> {
-        super.render();
-
+        await super.render();
         const src = this.getIFrameSrc();
         await this.renderV1Embed(src);
 

package/src/embed/search-bar.tsx

@@ -174,8 +174,7 @@ export class SearchBarEmbed extends TsEmbed {
      * Render the embedded ThoughtSpot search
      */
     public async render(): Promise<SearchBarEmbed> {
-        super.render();
-
+        await super.render();
         const src = this.getIFrameSrc();
         await this.renderIFrame(src);
         return this;

package/src/embed/search.ts

@@ -482,9 +482,8 @@ export class SearchEmbed extends TsEmbed {
      * Render the embedded ThoughtSpot search
      */
     public async render(): Promise<SearchEmbed> {
-        super.render();
+        await super.render();
         const { answerId } = this.viewConfig;
-
         const src = this.getIFrameSrc();
         await this.renderIFrame(src);
         getAuthPromise().then(() => {

package/src/embed/ts-embed.spec.ts

@@ -1,4 +1,6 @@
 /* eslint-disable dot-notation */
+import { resetValueFromWindow } from '../utils';
+import { ERROR_MESSAGE } from '../errors';
 import { resetCachedAuthToken } from '../authToken';
 import {
     AuthType,
@@ -1249,14 +1251,14 @@ describe('Unit test case for ts embed', () => {
             });
         });
 
-        beforeEach(() => {
+        beforeEach(async () => {
             jest.spyOn(baseInstance, 'getAuthPromise').mockRejectedValueOnce(false);
             const tsEmbed = new SearchEmbed(getRootEl(), {});
             const iFrame: any = document.createElement('div');
             iFrame.contentWindow = null;
             jest.spyOn(document, 'createElement').mockReturnValueOnce(iFrame);
             spyOn(logger, 'error');
-            tsEmbed.render();
+            await tsEmbed.render();
         });
 
         test('mixpanel should call with VISUAL_SDK_RENDER_FAILED', () => {
@@ -1433,7 +1435,7 @@ describe('Unit test case for ts embed', () => {
         test('Error should be true', async () => {
             spyOn(logger, 'error');
             const tsEmbed = new SearchEmbed(getRootEl(), {});
-            tsEmbed.render();
+            await tsEmbed.render();
             expect(tsEmbed['isError']).toBe(true);
             expect(logger.error).toHaveBeenCalledWith(
                 'You need to init the ThoughtSpot SDK module first',
@@ -1446,11 +1448,11 @@ describe('Unit test case for ts embed', () => {
             jest.spyOn(config, 'getThoughtSpotHost').mockImplementation(() => 'http://tshost');
         });
 
-        test('when isRendered is true than isError will be true', () => {
+        test('when isRendered is true than isError will be true', async () => {
             spyOn(logger, 'warn');
             const viEmbedIns = new tsEmbedInstance.V1Embed(getRootEl(), defaultViewConfig);
             expect(viEmbedIns['isError']).toBe(false);
-            viEmbedIns.render();
+            await viEmbedIns.render();
             viEmbedIns.on(EmbedEvent.CustomAction, jest.fn()).render();
             expect(logger.warn).toHaveBeenCalledWith(
                 'Please register event handlers before calling render',
@@ -2382,4 +2384,80 @@ describe('Unit test case for ts embed', () => {
             jest.spyOn(baseInstance, 'notifyAuthFailure').mockClear();
         });
     });
+
+    describe('Renders should wait for init to completed', () => {
+        const errorSpy = jest.spyOn(logger, 'error').mockResolvedValue(true);
+        beforeEach(() => {
+            errorSpy.mockClear();
+            resetValueFromWindow('initFlagKey');
+            baseInstance.createAndSetInitPromise();
+            document.body.innerHTML = getDocumentBody();
+        });
+        test('Pre-render should wait for init to complete', async () => {
+            const lib = new LiveboardEmbed(getRootEl(), { preRenderId: 'test', liveboardId: 'test' });
+            lib.preRender();
+            await executeAfterWait(() => {
+                expect(errorSpy).toHaveBeenCalledWith(ERROR_MESSAGE.RENDER_CALLED_BEFORE_INIT);
+                expect(getRootEl().innerHTML).toContain('');
+            });
+
+            const iframeBeforeInit = getIFrameEl();
+            expect(iframeBeforeInit).toBe(null);
+
+            init({
+                thoughtSpotHost: 'tshost',
+                authType: AuthType.None,
+            });
+
+            await waitFor(() => !!getIFrameEl());
+            const preRenderId = lib.getPreRenderIds().wrapper;
+            expect(document.getElementById(preRenderId)).not.toBe(null);
+            const iframeAfterInit = getIFrameEl();
+            expect(iframeAfterInit).not.toBe(null);
+        });
+
+        test('Render should wait for init to complete', async () => {
+            const lib = new LiveboardEmbed(getRootEl(), { liveboardId: 'test' });
+            lib.render();
+            await executeAfterWait(() => {
+                expect(errorSpy).toHaveBeenCalledWith(ERROR_MESSAGE.RENDER_CALLED_BEFORE_INIT);
+                expect(getRootEl().innerHTML).toContain('');
+            });
+
+            const iframeBeforeInit = getIFrameEl();
+            expect(iframeBeforeInit).toBe(null);
+
+            init({
+                thoughtSpotHost: 'tshost',
+                authType: AuthType.None,
+            });
+
+            await waitFor(() => !!getIFrameEl());
+            expect(getRootEl()).not.toBe(null);
+            const iframeAfterInit = getIFrameEl();
+            expect(iframeAfterInit).not.toBe(null);
+        });
+
+        test('Pre Render Generic should wait for init to complete', async () => {
+            const lib = new LiveboardEmbed(getRootEl(), {});
+            lib.prerenderGeneric();
+            await executeAfterWait(() => {
+                expect(errorSpy).toHaveBeenCalledWith(ERROR_MESSAGE.RENDER_CALLED_BEFORE_INIT);
+                expect(getRootEl().innerHTML).toContain('');
+            });
+
+            const iframeBeforeInit = getIFrameEl();
+            expect(iframeBeforeInit).toBe(null);
+
+            init({
+                thoughtSpotHost: 'tshost',
+                authType: AuthType.None,
+            });
+
+            await waitFor(() => !!getIFrameEl());
+            expect(getRootEl()).not.toBe(null);
+            const iframeAfterInit = getIFrameEl();
+            expect(iframeAfterInit).not.toBe(null);
+        });
+    });
 });

package/src/embed/ts-embed.ts

@@ -66,6 +66,8 @@ import { processTrigger } from '../utils/processTrigger';
 import pkgInfo from '../../package.json';
 import {
     getAuthPromise, renderInQueue, handleAuth, notifyAuthFailure,
+    getInitPromise,
+    getIsInitCalled,
 } from './base';
 import { AuthFailureType } from '../auth';
 import { getEmbedConfig } from './embedConfig';
@@ -180,15 +182,10 @@ export class TsEmbed {
 
     protected hostEventClient: HostEventClient;
 
+    protected isReadyForRenderPromise;
+
     constructor(domSelector: DOMSelector, viewConfig?: ViewConfig) {
         this.el = getDOMNode(domSelector);
-        // TODO: handle error
-        this.embedConfig = getEmbedConfig();
-        if (!this.embedConfig.authTriggerContainer && !this.embedConfig.useEventForSAMLPopup) {
-            this.embedConfig.authTriggerContainer = domSelector;
-        }
-        this.thoughtSpotHost = getThoughtSpotHost(this.embedConfig);
-        this.thoughtSpotV2Base = getV2BasePath(this.embedConfig);
         this.eventHandlerMap = new Map();
         this.isError = false;
         this.viewConfig = {
@@ -196,12 +193,22 @@ export class TsEmbed {
             excludeRuntimeParametersfromURL: false,
             ...viewConfig,
         };
-        this.shouldEncodeUrlQueryParams = this.embedConfig.shouldEncodeUrlQueryParams;
         this.registerAppInit();
         uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_EMBED_CREATE, {
             ...viewConfig,
         });
         this.hostEventClient = new HostEventClient(this.iFrame);
+
+        this.isReadyForRenderPromise = getInitPromise().then(async () => {
+            const embedConfig = getEmbedConfig();
+            this.embedConfig = embedConfig;
+            if (!embedConfig.authTriggerContainer && !embedConfig.useEventForSAMLPopup) {
+                this.embedConfig.authTriggerContainer = domSelector;
+            }
+            this.thoughtSpotHost = getThoughtSpotHost(embedConfig);
+            this.thoughtSpotV2Base = getV2BasePath(embedConfig);
+            this.shouldEncodeUrlQueryParams = embedConfig.shouldEncodeUrlQueryParams;
+        });
     }
 
     /**
@@ -723,6 +730,7 @@ export class TsEmbed {
             });
 
             uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_RENDER_START);
+
             return getAuthPromise()
                 ?.then((isLoggedIn: boolean) => {
                     if (!isLoggedIn) {
@@ -1119,8 +1127,11 @@ export class TsEmbed {
      * @param args
      */
     public async render(): Promise<TsEmbed> {
+        if (!getIsInitCalled()) {
+            logger.error(ERROR_MESSAGE.RENDER_CALLED_BEFORE_INIT);
+        }
+        await this.isReadyForRenderPromise;
         this.isRendered = true;
-
         return this;
     }
 
@@ -1129,22 +1140,21 @@ export class TsEmbed {
     }
 
     protected handleRenderForPrerender() {
-        this.render();
+        return this.render();
     }
 
     /**
      * Creates the preRender shell
      * @param showPreRenderByDefault - Show the preRender after render, hidden by default
      */
-    public preRender(showPreRenderByDefault = false): TsEmbed {
+    public async preRender(showPreRenderByDefault = false): Promise<TsEmbed> {
         if (!this.viewConfig.preRenderId) {
             logger.error(ERROR_MESSAGE.PRERENDER_ID_MISSING);
             return this;
         }
         this.isPreRendered = true;
         this.showPreRenderByDefault = showPreRenderByDefault;
-        this.handleRenderForPrerender();
-        return this;
+        return this.handleRenderForPrerender();
     }
 
     /**
@@ -1204,6 +1214,11 @@ export class TsEmbed {
      * @returns
      */
     public async prerenderGeneric(): Promise<any> {
+        if (!getIsInitCalled()) {
+            logger.error(ERROR_MESSAGE.RENDER_CALLED_BEFORE_INIT);
+        }
+        await this.isReadyForRenderPromise;
+
         const prerenderFrameSrc = this.getRootIframeSrc();
         this.isRendered = true;
         return this.renderIFrame(prerenderFrameSrc);
@@ -1246,18 +1261,17 @@ export class TsEmbed {
      * Also, synchronizes the style of the PreRender component with the embedding
      * element.
      */
-    public showPreRender(): void {
+    public async showPreRender(): Promise<TsEmbed> {
         if (!this.viewConfig.preRenderId) {
             logger.error(ERROR_MESSAGE.PRERENDER_ID_MISSING);
-            return;
+            return this;
         }
         if (!this.isPreRenderAvailable()) {
             const isAvailable = this.connectPreRendered();
 
             if (!isAvailable) {
                 // if the Embed component is not preRendered , Render it now and
-                this.preRender(true);
-                return;
+                return this.preRender(true);
             }
             this.validatePreRenderViewConfig(this.viewConfig);
         }
@@ -1284,6 +1298,8 @@ export class TsEmbed {
         removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events']);
 
         this.subscribeToEvents();
+
+        return this;
     }
 
     /**

package/src/errors.ts

@@ -16,4 +16,5 @@ export const ERROR_MESSAGE = {
     CSP_VIOLATION_ALERT: 'CSP violation detected. Please check the console errors for more details.',
     CSP_FRAME_HOST_VIOLATION_LOG_MESSAGE: 'Please set up CSP correctly for the application to start working. For more information, see https://developers.thoughtspot.com/docs/security-settings#csp-viz-embed-hosts. \n If the issue persists, refer to https://developers.thoughtspot.com/docs/security-settings#csp-viz-embed-hosts',
     MISSING_REPORTING_OBSERVER: 'ReportingObserver not supported',
+    RENDER_CALLED_BEFORE_INIT: 'Looks like render was called before calling init, the render won\'t start until init is called.\nFor more info check\n1. https://developers.thoughtspot.com/docs/Function_init#_init\n2.https://developers.thoughtspot.com/docs/getting-started#initSdk',
 };

package/src/react/all-types-export.ts

@@ -12,6 +12,7 @@ export {
     ConversationEmbed,
     PreRenderedConversationEmbed,
     useEmbedRef,
+    useInit,
 } from './index';
 
 export {

package/src/react/index.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
+import { AuthEventEmitter } from '../auth';
 import { deepMerge } from '../utils';
 import { SearchBarEmbed as _SearchBarEmbed, SearchBarViewConfig } from '../embed/search-bar';
 import { SageEmbed as _SageEmbed, SageViewConfig } from '../embed/sage';
@@ -8,9 +9,10 @@ import { AppEmbed as _AppEmbed, AppViewConfig } from '../embed/app';
 import { LiveboardEmbed as _LiveboardEmbed, LiveboardViewConfig } from '../embed/liveboard';
 import { TsEmbed } from '../embed/ts-embed';
 
-import { EmbedEvent, ViewConfig } from '../types';
+import { EmbedConfig, EmbedEvent, ViewConfig } from '../types';
 import { EmbedProps, getViewPropsAndListeners } from './util';
 import { ConversationEmbed as _ConversationEmbed, ConversationViewConfig } from '../embed/conversation';
+import { init } from '../embed/base';
 
 const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V extends ViewConfig>(
     EmbedConstructor: T,
@@ -404,6 +406,29 @@ export function useEmbedRef<T extends EmbedComponent>():
     return React.useRef<React.ComponentRef<T>>(null);
 }
 
+/**
+ *
+ * @param config - EmbedConfig
+ * @returns AuthEventEmitter
+ * @example
+ * ```
+ * function Component() {
+ *  const authEE = useInit({ ...initConfig });
+ *  return <LiveboardEmbed ref={ref} liveboardId={<id>} />
+ * }
+ * ```
+ * @version SDK: 1.36.2 | ThoughtSpot: *
+ */
+export function useInit(config: EmbedConfig) {
+    const ref = useRef<AuthEventEmitter | null>(null);
+    useDeepCompareEffect(() => {
+        const authEE = init(config);
+        ref.current = authEE;
+    }, [config]);
+
+    return ref;
+}
+
 export {
     LiveboardViewConfig,
     SearchViewConfig,