@thoughtspot/visual-embed-sdk 1.33.0-alpha.1 → 1.33.0-dc.1

package/src/embed/search.spec.ts

@@ -52,7 +52,7 @@ describe('Search embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&enableDataPanelV2=false&dataSourceMode=expand&useLastSelectedSources=false${prefixParams}#/embed/answer`,
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&enableDataPanelV2=true&dataSourceMode=expand&useLastSelectedSources=false${prefixParams}#/embed/answer`,
             );
         });
     });
@@ -416,16 +416,16 @@ describe('Search embed tests', () => {
         });
     });
 
-    test('should set enableDataPanelV2 to true if data panel v2 flag is true', async () => {
+    test('should set enableDataPanelV2 to false if data panel v2 flag is false', async () => {
         const searchEmbed = new SearchEmbed(getRootEl(), {
             ...defaultViewConfig,
-            dataPanelV2: true,
+            dataPanelV2: false,
         });
         searchEmbed.render();
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=true&useLastSelectedSources=false${prefixParams}#/embed/saved-answer/${answerId}`,
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=false&useLastSelectedSources=false${prefixParams}#/embed/saved-answer/${answerId}`,
             );
         });
     });
@@ -438,7 +438,7 @@ describe('Search embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=false&useLastSelectedSources=true${prefixParams}#/embed/saved-answer/${answerId}`,
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=true&useLastSelectedSources=true${prefixParams}#/embed/saved-answer/${answerId}`,
             );
         });
     });
@@ -453,7 +453,7 @@ describe('Search embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSources=[%22data-source-1%22]&dataSourceMode=expand&enableDataPanelV2=false&useLastSelectedSources=false${prefixParams}#/embed/saved-answer/${answerId}`,
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSources=[%22data-source-1%22]&dataSourceMode=expand&enableDataPanelV2=true&useLastSelectedSources=false${prefixParams}#/embed/saved-answer/${answerId}`,
             );
         });
     });
@@ -468,7 +468,7 @@ describe('Search embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSources=[%22data-source-1%22]&dataSourceMode=expand&enableDataPanelV2=false&useLastSelectedSources=false${prefixParams}#/embed/saved-answer/${answerId}`,
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSources=[%22data-source-1%22]&dataSourceMode=expand&enableDataPanelV2=true&useLastSelectedSources=false${prefixParams}#/embed/saved-answer/${answerId}`,
             );
         });
     });
@@ -499,7 +499,7 @@ describe('Search embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=false&useLastSelectedSources=false&hideSearchBar=true${prefixParams}#/embed/saved-answer/${answerId}`,
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=true&useLastSelectedSources=false&hideSearchBar=true${prefixParams}#/embed/saved-answer/${answerId}`,
             );
         });
     });
@@ -514,7 +514,7 @@ describe('Search embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=false&useLastSelectedSources=false&dataPanelCustomGroupsAccordionInitialState=EXPAND_FIRST${prefixParams}#/embed/saved-answer/${answerId}`,
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=true&useLastSelectedSources=false&dataPanelCustomGroupsAccordionInitialState=EXPAND_FIRST${prefixParams}#/embed/saved-answer/${answerId}`,
             );
         });
     });

package/src/embed/search.ts

@@ -88,6 +88,19 @@ export interface SearchViewConfig
      * ```
      */
     collapseDataSources?: boolean;
+    /**
+     * If set to true, the data panel is collapsed on load,
+     * but can be expanded manually.
+     * @version: SDK: 1.34.0 | ThoughtSpot: 10.3.0.cl
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    collapseDataPanel:true,
+     * })
+     * ```
+     */
+    collapseDataPanel?: boolean;
     /**
      * Show or hide the data sources panel.
      * @version: SDK: 1.2.0 | ThoughtSpot: 9.1.0.sw
@@ -214,19 +227,6 @@ export interface SearchViewConfig
      * ```
      */
     hideSearchBar?: boolean;
-    /**
-     * Flag to control Data panel experience
-     * @default false
-     * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
-     * @example
-     * ```js
-     * const embed = new SearchEmbed('#tsEmbed', {
-     *    ... // other options
-     *    dataPanelV2:false,
-     * })
-     * ```
-     */
-    dataPanelV2?: boolean;
     /**
      * Flag to set if last selected dataSource should be used
      * @version: SDK: 1.24.0
@@ -236,6 +236,7 @@ export interface SearchViewConfig
      * To set the initial state of the search bar in case of saved-answers.
      * @default false
      * @version SDK: 1.32.0 | Thoughtspot: 10.0.0.cl
+     * @deprecated Use {@link collapseSearchBar} instead
      */
     collapseSearchBarInitially?: boolean;
     /**
@@ -320,7 +321,8 @@ export class SearchEmbed extends TsEmbed {
      */
     private getDataSourceMode() {
         let dataSourceMode = DataSourceVisualMode.Expanded;
-        if (this.viewConfig.collapseDataSources === true) {
+        if (this.viewConfig.collapseDataSources === true
+            || this.viewConfig.collapseDataPanel === true) {
             dataSourceMode = DataSourceVisualMode.Collapsed;
         }
         if (this.viewConfig.hideDataSources === true) {
@@ -341,7 +343,7 @@ export class SearchEmbed extends TsEmbed {
             dataSources,
             excludeRuntimeFiltersfromURL,
             hideSearchBar,
-            dataPanelV2 = false,
+            dataPanelV2 = true,
             useLastSelectedSources = false,
             runtimeParameters,
             collapseSearchBarInitially = false,
@@ -351,6 +353,7 @@ export class SearchEmbed extends TsEmbed {
             dataPanelCustomGroupsAccordionInitialState = DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL,
             focusSearchBarOnRender = true,
             excludeRuntimeParametersfromURL,
+            collapseSearchBar = true,
         } = this.viewConfig;
         const queryParams = this.getBaseQueryParams();
 
@@ -406,7 +409,8 @@ export class SearchEmbed extends TsEmbed {
         }
 
         queryParams[Param.searchEmbed] = true;
-        queryParams[Param.CollapseSearchBarInitially] = collapseSearchBarInitially;
+        /* eslint-disable-next-line max-len */
+        queryParams[Param.CollapseSearchBarInitially] = collapseSearchBarInitially || collapseSearchBar;
         queryParams[Param.EnableCustomColumnGroups] = enableCustomColumnGroups;
         if (dataPanelCustomGroupsAccordionInitialState
             === DataPanelCustomColumnGroupsAccordionState.COLLAPSE_ALL

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

@@ -56,7 +56,6 @@ beforeAll(() => {
 const customisations = {
     style: {
         customCSS: {},
-        customCSSUrl: 'http://localhost:3000',
     },
     content: {},
 };
@@ -64,7 +63,6 @@ const customisations = {
 const customisationsView = {
     style: {
         customCSS: {},
-        customCSSUrl: 'http://localhost:8000',
     },
     content: {
         strings: {
@@ -95,7 +93,6 @@ describe('Unit test case for ts embed', () => {
             init({
                 thoughtSpotHost: 'tshost',
                 customizations: customisations,
-                customCssUrl: 'http://localhost:5000',
                 authType: AuthType.TrustedAuthTokenCookieless,
                 getAuthToken: () => Promise.resolve('test_auth_token2'),
             });
@@ -136,7 +133,6 @@ describe('Unit test case for ts embed', () => {
                 thoughtSpotHost: 'tshost',
                 authType: AuthType.None,
                 customizations: customisations,
-                customCssUrl: 'http://localhost:5000',
             });
         });
 
@@ -199,9 +195,6 @@ describe('Unit test case for ts embed', () => {
                     reorderedHomepageModules: [],
                 },
             });
-            expect(getIFrameSrc()).toContain(
-                `customCssUrl=${customisationsView.style.customCSSUrl}`,
-            );
         });
 
         test('hide home page modules from view Config should be part of app_init payload', async () => {
@@ -601,7 +594,6 @@ describe('Unit test case for ts embed', () => {
             init({
                 thoughtSpotHost: 'tshost',
                 customizations: customisations,
-                customCssUrl: 'http://localhost:5000',
                 authType: AuthType.TrustedAuthTokenCookieless,
                 getAuthToken: () => Promise.resolve('test_auth_token1'),
             });
@@ -655,7 +647,6 @@ describe('Unit test case for ts embed', () => {
             init({
                 thoughtSpotHost: 'tshost',
                 customizations: customisations,
-                customCssUrl: 'http://localhost:5000',
                 authType: AuthType.TrustedAuthTokenCookieless,
                 getAuthToken: () => Promise.reject(),
             });
@@ -790,7 +781,6 @@ describe('Unit test case for ts embed', () => {
             init({
                 thoughtSpotHost: 'tshost',
                 customizations: customisations,
-                customCssUrl: 'http://localhost:5000',
                 authType: AuthType.TrustedAuthToken,
                 username: 'tsadmin',
                 getAuthToken: () => Promise.resolve('test_auth_token3'),
@@ -819,7 +809,6 @@ describe('Unit test case for ts embed', () => {
             init({
                 thoughtSpotHost: 'tshost',
                 customizations: customisations,
-                customCssUrl: 'http://localhost:5000',
                 authType: AuthType.TrustedAuthToken,
                 username: 'tsadmin',
                 getAuthToken: () => Promise.resolve('test_auth_token4'),

package/src/embed/ts-embed.ts

@@ -59,6 +59,7 @@ import {
 } from './base';
 import { AuthFailureType } from '../auth';
 import { getEmbedConfig } from './embedConfig';
+import { ERROR_MESSAGE } from '../errors';
 
 const { version } = pkgInfo;
 
@@ -347,7 +348,7 @@ export class TsEmbed {
                     data: { authToken },
                 });
             } catch (e) {
-                logger.error(`Received invalid token. Error : ${e?.message}`);
+                logger.error(`${ERROR_MESSAGE.INVALID_TOKEN_ERROR} Error : ${e?.message}`);
                 processAuthFailure(e, this.isPreRendered ? this.preRenderWrapper : this.el);
             }
         } else if (autoLogin) {
@@ -387,7 +388,9 @@ export class TsEmbed {
      * @param queryParams
      * @returns queryParams
      */
-    protected getBaseQueryParams(queryParams = {}) {
+    protected getBaseQueryParams(
+        queryParams: Record<any, any> = {},
+    ) {
         let hostAppUrl = window?.location?.host || '';
 
         // The below check is needed because TS Cloud firewall, blocks
@@ -438,6 +441,7 @@ export class TsEmbed {
             contextMenuTrigger,
             linkOverride,
             insertInToSlide,
+            disableRedirectionLinksInNewTab,
         } = this.viewConfig;
 
         if (Array.isArray(visibleActions) && Array.isArray(hiddenActions)) {
@@ -450,13 +454,6 @@ export class TsEmbed {
             return queryParams;
         }
 
-        // TODO remove embedConfig.customCssUrl
-        const cssUrlParam = customizations?.style?.customCSSUrl || this.embedConfig.customCssUrl;
-
-        if (cssUrlParam) {
-            queryParams[Param.CustomCSSUrl] = cssUrlParam;
-        }
-
         if (disabledActions?.length) {
             queryParams[Param.DisableActions] = disabledActions;
         }
@@ -496,19 +493,27 @@ export class TsEmbed {
         if (locale !== undefined) {
             queryParams[Param.Locale] = locale;
         }
-        if (additionalFlags && additionalFlags.constructor.name === 'Object') {
-            Object.assign(queryParams, additionalFlags);
-        }
+
         if (linkOverride) {
             queryParams[Param.LinkOverride] = linkOverride;
         }
         if (insertInToSlide) {
             queryParams[Param.ShowInsertToSlide] = insertInToSlide;
         }
+        if (disableRedirectionLinksInNewTab) {
+            queryParams[Param.DisableRedirectionLinksInNewTab] = disableRedirectionLinksInNewTab;
+        }
 
         queryParams[Param.OverrideNativeConsole] = true;
         queryParams[Param.ClientLogLevel] = this.embedConfig.logLevel;
 
+        if (additionalFlags && additionalFlags.constructor.name === 'Object') {
+            Object.assign(queryParams, additionalFlags);
+        }
+
+        // Do not add any flags below this, as we want additional flags to
+        // override other flags
+
         return queryParams;
     }
 
@@ -557,7 +562,7 @@ export class TsEmbed {
         iFrame.mozallowfullscreen = true;
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        iFrame.allow = 'clipboard-read; clipboard-write';
+        iFrame.allow = 'clipboard-read; clipboard-write fullscreen';
 
         const {
             height: frameHeight,
@@ -1000,7 +1005,7 @@ export class TsEmbed {
      */
     public preRender(showPreRenderByDefault = false): TsEmbed {
         if (!this.viewConfig.preRenderId) {
-            logger.error('PreRender id is required for preRender');
+            logger.error(ERROR_MESSAGE.PRERENDER_ID_MISSING);
             return this;
         }
         this.isPreRendered = true;
@@ -1015,7 +1020,9 @@ export class TsEmbed {
      * THOUGHTSPOT URL params starts with a prefix "ts-"
      * @version SDK: 1.14.0 | ThoughtSpot: 8.4.0.cl, 8.4.1-sw
      */
-    public getThoughtSpotPostUrlParams(): string {
+    public getThoughtSpotPostUrlParams(
+        additionalParams: { [key: string]: string | number } = {},
+    ): string {
         const urlHash = window.location.hash;
         const queryParams = window.location.search;
         const postHashParams = urlHash.split('?');
@@ -1031,6 +1038,7 @@ export class TsEmbed {
         };
         queryParamsObj.forEach(addKeyValuePairCb);
         postURLParamsObj.forEach(addKeyValuePairCb);
+        Object.entries(additionalParams).forEach(([k, v]) => params.append(k, v as string));
 
         let tsParams = params.toString();
         tsParams = tsParams ? `?${tsParams}` : '';
@@ -1107,7 +1115,7 @@ export class TsEmbed {
      */
     public showPreRender(): void {
         if (!this.viewConfig.preRenderId) {
-            logger.error('PreRender id is required for preRender');
+            logger.error(ERROR_MESSAGE.PRERENDER_ID_MISSING);
             return;
         }
         if (!this.isPreRenderAvailable()) {
@@ -1155,7 +1163,7 @@ export class TsEmbed {
      */
     public syncPreRenderStyle(): void {
         if (!this.isPreRenderAvailable() || !this.el) {
-            logger.error('PreRender should be called before using syncPreRenderStyle');
+            logger.error(ERROR_MESSAGE.SYNC_STYLE_CALLED_BEFORE_RENDER);
             return;
         }
         const elBoundingClient = this.el.getBoundingClientRect();
@@ -1214,7 +1222,7 @@ export class TsEmbed {
      * @version SDK: 1.25.0 / ThoughtSpot 9.10.0
      */
     public async getAnswerService(vizId?: string): Promise<AnswerService> {
-        const { session } = await this.trigger(HostEvent.GetAnswerSession, vizId);
+        const { session } = await this.trigger(HostEvent.GetAnswerSession, vizId ? { vizId } : {});
 
         return new AnswerService(session, null, this.embedConfig.thoughtSpotHost);
     }
@@ -1291,7 +1299,6 @@ export class V1Embed extends TsEmbed {
 
     /**
      * Only for testing purposes.
-     *
      * @hidden
      */
     // eslint-disable-next-line camelcase

package/src/errors.ts

@@ -4,4 +4,15 @@ export const ERROR_MESSAGE = {
     TRIGGER_TIMED_OUT: 'Trigger timedout in getting response',
     SEARCHEMBED_BETA_WRANING_MESSAGE: 'Search Embed is in Beta in this release.',
     SAGE_EMBED_BETA_WARNING_MESSAGE: 'Sage Embed is in Beta in this release.',
+    THIRD_PARTY_COOKIE_BLOCKED_ALERT: 'Third party cookie access is blocked on this browser, please allow third party cookies for this to work properly. \nYou can use `suppressNoCookieAccessAlert` to suppress this message.',
+    DUPLICATE_TOKEN_ERR: 'Duplicate token, please issue a new token every time getAuthToken callback is called. See https://developers.thoughtspot.com/docs/?pageid=embed-auth#trusted-auth-embed for more details.',
+    SDK_NOT_INITIALIZED: 'SDK not initialized',
+    SESSION_INFO_FAILED: 'Failed to get session info',
+    INVALID_TOKEN_ERROR: 'Received invalid token from getAuthToken callback or authToken endpoint.',
+    MIXPANEL_TOKEN_NOT_FOUND: 'Mixpanel token not found in session info',
+    PRERENDER_ID_MISSING: 'PreRender id is required for preRender',
+    SYNC_STYLE_CALLED_BEFORE_RENDER: 'PreRender should be called before using syncPreRenderStyle',
+    CSP_VIOLATION_ALERT: 'CSP violation detected. Please check the console errors for more details.',
+    CSP_FRAME_HOST_VIOLATION_LOG_MESSAGE: 'Please setup CSP Correctly for the Application to start working. You can know more about setting CSP Correctly here: https://developers.thoughtspot.com/docs/security-settings#csp-viz-embed-hosts. \n In case you are still facing error, please read: https://developers.thoughtspot.com/docs/security-settings#csp-viz-embed-hosts',
+    MISSING_REPORTING_OBSERVER: 'ReportingObserver not supported',
 };

package/src/index.ts

@@ -19,6 +19,7 @@ import {
 import { PinboardEmbed, LiveboardViewConfig, LiveboardEmbed } from './embed/liveboard';
 import { SearchEmbed, SearchViewConfig } from './embed/search';
 import { SearchBarEmbed, SearchBarViewConfig } from './embed/search-bar';
+import { BodylessConversation, BodylessConversationViewConfig } from './embed/bodyless-conversation';
 import {
     AuthFailureType, AuthStatus, AuthEvent, AuthEventEmitter,
 } from './auth';
@@ -55,6 +56,8 @@ import { AnswerService, SessionInterface, UnderlyingDataPoint } from './utils/gr
 import { getEmbedConfig } from './embed/embedConfig';
 import { uploadMixpanelEvent, MIXPANEL_EVENT } from './mixpanel-service';
 import { tokenizedFetch } from './tokenizedFetch';
+import { getAnswerFromQuery } from './utils/graphql/nlsService/nls-answer-service';
+import { createLiveboardWithAnswers } from './utils/liveboardService/liveboardService';
 
 export {
     init,
@@ -67,12 +70,16 @@ export {
     getEmbedConfig as getInitConfig,
     getSessionInfo,
     tokenizedFetch,
+    getAnswerFromQuery,
+    createLiveboardWithAnswers,
     SearchEmbed,
     SearchBarEmbed,
     PinboardEmbed,
     LiveboardEmbed,
     SageEmbed,
     AppEmbed,
+    BodylessConversation,
+    BodylessConversationViewConfig,
     AuthFailureType,
     AuthStatus,
     AuthEvent,

package/src/mixpanel-service.ts

@@ -1,6 +1,7 @@
 import * as mixpanel from 'mixpanel-browser';
 import { logger } from './utils/logger';
 import { SessionInfo } from './utils/sessionInfoService';
+import { ERROR_MESSAGE } from './errors';
 
 export const EndPoints = {
     CONFIG: '/callosum/v1/system/config',
@@ -10,6 +11,10 @@ export const EndPoints = {
 const mixpanelLib = mixpanel.default || mixpanel;
 let mixpanelInstance: mixpanel.Mixpanel;
 
+/**
+ * Enum of mixpanel events
+ * @hidden
+ */
 export const MIXPANEL_EVENT = {
     VISUAL_SDK_RENDER_START: 'visual-sdk-render-start',
     VISUAL_SDK_CALLED_INIT: 'visual-sdk-called-init',
@@ -57,7 +62,7 @@ function emptyQueue() {
  */
 export function initMixpanel(sessionInfo: SessionInfo): void {
     if (!sessionInfo || !sessionInfo.mixpanelToken) {
-        logger.error('Mixpanel token not found in session info');
+        logger.error(ERROR_MESSAGE.MIXPANEL_TOKEN_NOT_FOUND);
         return;
     }
     // On a public cluster the user is anonymous, so don't set the identify to

package/src/react/index.spec.tsx

@@ -56,7 +56,7 @@ describe('React Components', () => {
                 ),
             ).toBe(true);
             expect(getIFrameSrc(container)).toBe(
-                `http://${thoughtSpotHost}/?hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}&authType=None&blockNonEmbedFullAppAccess=true&hideAction=[%22${Action.ReportError}%22,%22editACopy%22,%22saveAsView%22,%22updateTSL%22,%22editTSL%22,%22onDeleteAnswer%22]&overrideConsoleLogs=true&clientLogLevel=ERROR&enableDataPanelV2=false&dataSourceMode=hide&useLastSelectedSources=false&isSearchEmbed=true&collapseSearchBarInitially=false&enableCustomColumnGroups=false&dataPanelCustomGroupsAccordionInitialState=EXPAND_ALL#/embed/answer`,
+                `http://${thoughtSpotHost}/?hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}&authType=None&blockNonEmbedFullAppAccess=true&hideAction=[%22${Action.ReportError}%22,%22editACopy%22,%22saveAsView%22,%22updateTSL%22,%22editTSL%22,%22onDeleteAnswer%22]&overrideConsoleLogs=true&clientLogLevel=ERROR&enableDataPanelV2=true&dataSourceMode=hide&useLastSelectedSources=false&isSearchEmbed=true&collapseSearchBarInitially=true&enableCustomColumnGroups=false&dataPanelCustomGroupsAccordionInitialState=EXPAND_ALL#/embed/answer`,
             );
         });
 

package/src/react/index.tsx

@@ -10,6 +10,7 @@ import { TsEmbed } from '../embed/ts-embed';
 
 import { EmbedEvent, ViewConfig } from '../types';
 import { EmbedProps, getViewPropsAndListeners } from './util';
+import { ConversationEmbed as _ConversationEmbed, ConversationViewConfig } from '../embed/conversation';
 
 const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V extends ViewConfig>(
     EmbedConstructor: T,
@@ -39,11 +40,11 @@ const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V exte
             tsEmbed.destroy();
         };
 
-        const handlePreRenderRendering = (tsEmbed : InstanceType<T>) => {
+        const handlePreRenderRendering = (tsEmbed: InstanceType<T>) => {
             tsEmbed.preRender();
         };
 
-        const handleDefaultRendering = (tsEmbed : InstanceType<T>) => {
+        const handleDefaultRendering = (tsEmbed: InstanceType<T>) => {
             // if component is connected to a preRendered component
             if (props.preRenderId) {
                 tsEmbed.showPreRender();
@@ -53,7 +54,7 @@ const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V exte
             tsEmbed.render();
         };
 
-        const handleRendering = (tsEmbed : InstanceType<T>) => {
+        const handleRendering = (tsEmbed: InstanceType<T>) => {
             if (isPreRenderedComponent) {
                 handlePreRenderRendering(tsEmbed);
                 return;
@@ -63,16 +64,16 @@ const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V exte
 
         useDeepCompareEffect(() => {
             const tsEmbed = new EmbedConstructor(
-                    ref!.current,
-                    deepMerge(
-                        {
-                            insertAsSibling: viewConfig.insertAsSibling,
-                            frameParams: {
-                                class: viewConfig.insertAsSibling ? className || '' : '',
-                            },
+                ref!.current,
+                deepMerge(
+                    {
+                        insertAsSibling: viewConfig.insertAsSibling,
+                        frameParams: {
+                            class: viewConfig.insertAsSibling ? className || '' : '',
                         },
-                        viewConfig,
-                    ),
+                    },
+                    viewConfig,
+                ),
             ) as InstanceType<T>;
             Object.keys(listeners).forEach((eventName) => {
                 tsEmbed.on(eventName as EmbedEvent, listeners[eventName as EmbedEvent]);
@@ -98,33 +99,33 @@ const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V exte
 interface SearchProps extends EmbedProps, SearchViewConfig { }
 
 interface PreRenderProps {
-   /**
-    * PreRender id to be used for PreRendering the embed.
-    * Use PreRender to render the embed in the background and then
-    * show or hide the rendered embed using showPreRender or hidePreRender respectively.
-    * @example
-    * ```js
-    * const embed = new LiveboardEmbed('#embed', {
-    *   ... // other liveboard view config
-    *   preRenderId: "preRenderId-123"
-    * });
-    * embed.showPreRender();
-    * ```
-    *
-    * Use PreRendered react component for pre rendering embed components.
-    * @example
-    * ```tsx
-    * function LandingPageComponent() {
-    *  return <PreRenderedLiveboardEmbed preRenderId="someId" liveboardId="libId" />
-    * }
-    * ```
-    * function MyComponent() {
-    *  return <LiveboardEmbed preRenderId="someId" liveboardId="libId" />
-    * }
-    * ```
-    * @version SDK: 1.25.0 | Thoughtspot: 9.6.0.cl
-    */
-  preRenderId: string;
+    /**
+     * PreRender id to be used for PreRendering the embed.
+     * Use PreRender to render the embed in the background and then
+     * show or hide the rendered embed using showPreRender or hidePreRender respectively.
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed', {
+     *   ... // other liveboard view config
+     *   preRenderId: "preRenderId-123"
+     * });
+     * embed.showPreRender();
+     * ```
+     *
+     * Use PreRendered react component for pre rendering embed components.
+     * @example
+     * ```tsx
+     * function LandingPageComponent() {
+     *  return <PreRenderedLiveboardEmbed preRenderId="someId" liveboardId="libId" />
+     * }
+     * ```
+     * function MyComponent() {
+     *  return <LiveboardEmbed preRenderId="someId" liveboardId="libId" />
+     * }
+     * ```
+     * @version SDK: 1.25.0 | Thoughtspot: 9.6.0.cl
+     */
+    preRenderId: string;
 }
 
 /**
@@ -329,11 +330,58 @@ export const PreRenderedSageEmbed = componentFactory<
     SageViewConfig
 >(_SageEmbed, true);
 
+interface ConversationEmbedProps extends EmbedProps, ConversationViewConfig { }
+
+/**
+ * React component for LLM based conversation BI.
+ * @example
+ * ```tsx
+ * function Sage() {
+ *  return <ConversationEmbed
+ *      worksheetId="<worksheet-id-here>"
+ *      searchOptions={{
+ *          searchQuery: "<search query to start with>"
+ *      }}
+ *      ... other view config props or event listeners.
+ *  />
+ * }
+ * ```
+ */
+export const ConversationEmbed = componentFactory<
+    typeof _ConversationEmbed, ConversationEmbedProps, ConversationViewConfig>(
+        _ConversationEmbed,
+    );
+
+/**
+ * React component for PreRendered Conversation embed.
+ *
+ * PreRenderedConversationEmbed will preRender the ConversationEmbed and will be hidden by
+ * default.
+ *
+ * SageEmbed with preRenderId passed will call showPreRender on the embed.
+ * @example
+ * ```tsx
+ * function LandingPageComponent() {
+ *  return <PreRenderedConversationEmbed preRenderId="someId" worksheetId={"id-"} />
+ * }
+ * ```
+ * function MyComponent() {
+ *  return <ConversationEmbed preRenderId="someId" worksheetId="id" />
+ * }
+ * ```
+ */
+export const PreRenderedConversationEmbed = componentFactory<
+    typeof _ConversationEmbed,
+    SageEmbedProps & PreRenderProps,
+    ConversationViewConfig
+>(_ConversationEmbed, true);
+
 type EmbedComponent = typeof SearchEmbed
     | typeof AppEmbed
     | typeof LiveboardEmbed
     | typeof SearchBarEmbed
-    | typeof SageEmbed;
+    | typeof SageEmbed
+    | typeof ConversationEmbed;
 
 /**
  * Get a reference to the embed component to trigger events on the component.
@@ -352,7 +400,7 @@ type EmbedComponent = typeof SearchEmbed
  * @returns {React.MutableRefObject<T extends TsEmbed>} ref
  */
 export function useEmbedRef<T extends EmbedComponent>():
-  React.MutableRefObject<React.ComponentRef<T>> {
+    React.MutableRefObject<React.ComponentRef<T>> {
     return React.useRef<React.ComponentRef<T>>(null);
 }