@thoughtspot/visual-embed-sdk 1.39.2-alpha.1 → 1.39.2-alpha.2

package/src/embed/app.ts

@@ -9,7 +9,7 @@
  */
 
 import { logger } from '../utils/logger';
-import { getQueryParamString } from '../utils';
+import { calculateVisibleElementData, getQueryParamString } from '../utils';
 import {
     Param,
     DOMSelector,
@@ -23,7 +23,7 @@ import { V1Embed } from './ts-embed';
 /**
  * Pages within the ThoughtSpot app that can be embedded.
  */
-// eslint-disable-next-line no-shadow
+
 export enum Page {
     /**
      * Home page
@@ -93,7 +93,7 @@ export enum PrimaryNavbarVersion {
      * Sliding (v3) introduces a new left-side navigation hub featuring a tab switcher,
      * along with updates to the top navigation bar.
      * It serves as the foundational version of the PrimaryNavBar.
-     */
+     */
     Sliding = 'v3',
 }
 
@@ -103,12 +103,28 @@ export enum PrimaryNavbarVersion {
  */
 export enum HomePage {
     /**
-     * Modular (v2) introduces the updated Modular Home Experience.
-     * It serves as the foundational version of the home page.
-     */
+     * Modular (v2) introduces the updated Modular Home Experience.
+     * It serves as the foundational version of the home page.
+     */
     Modular = 'v2',
 }
 
+/**
+ * Define the version of the list page
+ * @version SDK: 1.40.0 | ThoughtSpot: 10.12.0.cl
+ */
+export enum ListPage {
+    /**
+     * List (v2) is the traditional List Experience.
+     * It serves as the foundational version of the list page.
+     */
+    List = 'v2',
+    /**
+     * ListWithUXChanges (v3) introduces the new updated list page with UX changes.
+     */
+    ListWithUXChanges = 'v3',
+}
+
 /**
  * Define the discovery experience
  * @version SDK: 1.40.0 | ThoughtSpot: 10.11.0.cl
@@ -122,6 +138,10 @@ export interface DiscoveryExperience {
      * homePage determines the version of the home page.
      */
     homePage?: HomePage;
+    /**
+     * listPageVersion determines the version of the list page.
+     */
+    listPageVersion?: ListPage;
 }
 
 /**
@@ -494,21 +514,7 @@ export interface AppViewConfig extends AllEmbedViewConfig {
      * ```
      */
     isUnifiedSearchExperienceEnabled?: boolean;
-     /**
-     * Show alert messages and toast messages in the embedded
-     * view in full app embed.
-     * 
-     * Supported embed types: `AppEmbed`
-     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl, 8.4.1.sw
-     * @example
-     * ```js
-     * const embed = new AppEmbed('#tsEmbed', {
-     *    ... // other embed view config
-     *    showAlerts:true,
-     * })
-     * ```
-     */
-     showAlerts?: boolean;
+
     /**
      * This flag is used to enable/disable the styling and grouping in a Liveboard
      * 
@@ -525,6 +531,48 @@ export interface AppViewConfig extends AllEmbedViewConfig {
      * ```
      */
     isLiveboardStylingAndGroupingEnabled?: boolean;
+
+    /**
+     * This flag is used to enable the full height lazy load data.
+     * 
+     * @example
+     * ```js
+     * const embed = new AppEmbed('#embed-container', {
+     *    // ...other options
+     *    fullHeight: true,
+     *    lazyLoadingForFullHeight: true,
+     * })
+     * ```
+     * 
+     * @type {boolean}
+     * @default false
+     * @version SDK: 1.39.0 | ThoughtSpot:10.10.0.cl
+     */
+    lazyLoadingForFullHeight?: boolean;
+
+    /**
+     * The margin to be used for lazy loading.
+     * 
+     * For example, if the margin is set to '10px',
+     * the visualization will be loaded 10px before the its top edge is visible in the
+     * viewport.
+     * 
+     * The format is similar to CSS margin.
+     * 
+     * @example
+     * ```js
+     * const embed = new AppEmbed('#embed-container', {
+     *    // ...other options
+     *    fullHeight: true,
+     *    lazyLoadingForFullHeight: true,
+     *   // Using 0px, the visualization will be only loaded when its visible in the viewport.
+     *    lazyLoadingMargin: '0px',
+     * })
+     * ```
+     * @type {string}
+     * @version SDK: 1.39.0 | ThoughtSpot:10.10.0.cl
+     */
+    lazyLoadingMargin?: string;
 }
 
 /**
@@ -536,7 +584,7 @@ export class AppEmbed extends V1Embed {
 
     private defaultHeight = '100%';
 
-    // eslint-disable-next-line no-useless-constructor
+
     constructor(domSelector: DOMSelector, viewConfig: AppViewConfig) {
         viewConfig.embedComponentType = 'AppEmbed';
         super(domSelector, viewConfig);
@@ -544,6 +592,7 @@ export class AppEmbed extends V1Embed {
             this.on(EmbedEvent.RouteChange, this.setIframeHeightForNonEmbedLiveboard);
             this.on(EmbedEvent.EmbedHeight, this.updateIFrameHeight);
             this.on(EmbedEvent.EmbedIframeCenter, this.embedIframeCenter);
+            this.on(EmbedEvent.RequestVisibleEmbedCoordinates, this.requestVisibleEmbedCoordinatesHandler);
         }
     }
 
@@ -577,7 +626,7 @@ export class AppEmbed extends V1Embed {
             enable2ColumnLayout,
             enableCustomColumnGroups = false,
             isOnBeforeGetVizDataInterceptEnabled = false,
-            /* eslint-disable-next-line max-len */
+
             dataPanelCustomGroupsAccordionInitialState = DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL,
             collapseSearchBar = true,
             isLiveboardCompactHeaderEnabled = false,
@@ -592,7 +641,7 @@ export class AppEmbed extends V1Embed {
             isLiveboardStylingAndGroupingEnabled,
         } = this.viewConfig;
 
-        let params = {};
+        let params: any = {};
         params[Param.PrimaryNavHidden] = !showPrimaryNavbar;
         params[Param.HideProfleAndHelp] = !!disableProfileAndHelp;
         params[Param.HideApplicationSwitcher] = !!hideApplicationSwitcher;
@@ -625,6 +674,10 @@ export class AppEmbed extends V1Embed {
 
         if (fullHeight === true) {
             params[Param.fullHeight] = true;
+            if (this.viewConfig.lazyLoadingForFullHeight) {
+                params[Param.IsLazyLoadingForEmbedEnabled] = true;
+                params[Param.RootMarginForLazyLoad] = this.viewConfig.lazyLoadingMargin;
+            }
         }
 
         if (tag) {
@@ -650,7 +703,7 @@ export class AppEmbed extends V1Embed {
         }
 
         if (isOnBeforeGetVizDataInterceptEnabled) {
-            /* eslint-disable-next-line max-len */
+
             params[
                 Param.IsOnBeforeGetVizDataInterceptEnabled
             ] = isOnBeforeGetVizDataInterceptEnabled;
@@ -678,12 +731,12 @@ export class AppEmbed extends V1Embed {
             || dataPanelCustomGroupsAccordionInitialState
             === DataPanelCustomColumnGroupsAccordionState.EXPAND_FIRST
         ) {
-            /* eslint-disable-next-line max-len */
+
             params[
                 Param.DataPanelCustomGroupsAccordionInitialState
             ] = dataPanelCustomGroupsAccordionInitialState;
         } else {
-            /* eslint-disable-next-line max-len */
+
             params[Param.DataPanelCustomGroupsAccordionInitialState] = DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL;
         }
 
@@ -698,6 +751,10 @@ export class AppEmbed extends V1Embed {
             if (discoveryExperience.homePage === HomePage.Modular) {
                 params[Param.ModularHomeExperienceEnabled] = true;
             }
+            // listPageVersion v3 will enable the new list page
+            if (discoveryExperience.listPageVersion === ListPage.ListWithUXChanges) {
+                params[Param.ListPageVersion] = discoveryExperience.listPageVersion;
+            }
         }
 
         const queryParams = getQueryParamString(params, true);
@@ -705,6 +762,23 @@ export class AppEmbed extends V1Embed {
         return queryParams;
     }
 
+    private sendFullHeightLazyLoadData = () => {
+        const data = calculateVisibleElementData(this.iFrame);
+        this.trigger(HostEvent.VisibleEmbedCoordinates, data);
+    }
+
+    /**
+     * This is a handler for the RequestVisibleEmbedCoordinates event.
+     * It is used to send the visible coordinates data to the host application.
+     * @param data The event payload
+     * @param responder The responder function
+     */
+    private requestVisibleEmbedCoordinatesHandler = (data: MessagePayload, responder: any) => {
+        logger.info('Sending RequestVisibleEmbedCoordinates', data);
+        const visibleCoordinatesData = calculateVisibleElementData(this.iFrame);
+        responder({ type: EmbedEvent.RequestVisibleEmbedCoordinates, data: visibleCoordinatesData });
+    }
+
     /**
      * Constructs the URL of the ThoughtSpot app page to be rendered.
      * @param pageId The ID of the page to be embedded.
@@ -727,6 +801,7 @@ export class AppEmbed extends V1Embed {
      */
     protected updateIFrameHeight = (data: MessagePayload) => {
         this.setIFrameHeight(Math.max(data.data, this.iFrame?.scrollHeight));
+        this.sendFullHeightLazyLoadData();
     };
 
     private embedIframeCenter = (data: MessagePayload, responder: any) => {
@@ -835,6 +910,34 @@ export class AppEmbed extends V1Embed {
         }
     }
 
+    /**
+     * Destroys the ThoughtSpot embed, and remove any nodes from the DOM.
+     * @version SDK: 1.39.0 | ThoughtSpot: 10.10.0.cl
+     */
+    public destroy() {
+        super.destroy();
+        this.unregisterLazyLoadEvents();
+    }
+
+    private postRender() {
+        this.registerLazyLoadEvents();
+    }
+
+    private registerLazyLoadEvents() {
+        if (this.viewConfig.fullHeight && this.viewConfig.lazyLoadingForFullHeight) {
+            // TODO: Use passive: true, install modernizr to check for passive
+            window.addEventListener('resize', this.sendFullHeightLazyLoadData);
+            window.addEventListener('scroll', this.sendFullHeightLazyLoadData);
+        }
+    }
+
+    private unregisterLazyLoadEvents() {
+        if (this.viewConfig.fullHeight && this.viewConfig.lazyLoadingForFullHeight) {
+            window.removeEventListener('resize', this.sendFullHeightLazyLoadData);
+            window.removeEventListener('scroll', this.sendFullHeightLazyLoadData);
+        }
+    }
+
     /**
      * Renders the embedded application pages in the ThoughtSpot app.
      * @param renderOptions An object containing the page ID
@@ -846,6 +949,7 @@ export class AppEmbed extends V1Embed {
         const src = this.getIFrameSrc();
         await this.renderV1Embed(src);
 
+        this.postRender();
         return this;
     }
 }

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

@@ -1,5 +1,5 @@
 import 'jest-fetch-mock';
-import { SpotterAgentEmbed, SpotterAgentEmbedViewConfig } from './bodyless-conversation';
+import { SpotterAgentEmbed, SpotterAgentEmbedViewConfig, ConversationMessage } from './bodyless-conversation';
 import * as authInstance from '../auth';
 import { init } from '../index';
 import { Action, AuthType, RuntimeFilterOp } from '../types';
@@ -138,7 +138,7 @@ describe('SpotterAgentEmbed', () => {
         expect(errorResult.error instanceof Error).toBeTruthy();
     });
 
-    test('should apply containerClassName to the container element', async () => {
+    test('should handle hideActions parameter correctly', async () => {
         fetchMock.mockResponses(
             JSON.stringify({
                 data: {
@@ -227,221 +227,27 @@ describe('SpotterAgentEmbed', () => {
 
         const viewConfig: SpotterAgentEmbedViewConfig = {
             worksheetId: 'worksheetId',
-            containerClassName: 'custom-conversation-container',
+            hiddenActions: [Action.Download, Action.Save], // This should trigger the HideActions branch
         };
 
         const spotterAgentEmbed = new SpotterAgentEmbed(viewConfig);
         const result = await spotterAgentEmbed.sendMessage('userMessage');
         
-        // Verify that the container has the custom class name
-        expect(result.container.className).toBe('custom-conversation-container');
-        
-        // Also verify the iframe src is correct
+        // Verify the iframe src contains the hideActions parameter
         const iframeSrc = getIFrameSrc(result.container);
-        expectUrlToHaveParamsWithValues(iframeSrc, {
-            sessionId: 'sessionId',
-            genNo: 2,
-            acSessionId: 'transactionId',
-            acGenNo: 1,
-        });
+        expect(iframeSrc).toContain('hideAction');
     });
 
-    test('should not set className when containerClassName is not provided', async () => {
-        fetchMock.mockResponses(
-            JSON.stringify({
-                data: {
-                    ConvAssist__createConversation: {
-                        convId: 'conversationId',
-                        initialCtx: {
-                            type: 'TS_ANSWER',
-                            tsAnsCtx: {
-                                sessionId: 'sessionId',
-                                genNo: 1,
-                                stateKey: {
-                                    transactionId: 'transactionId',
-                                    generationNumber: 1,
-                                },
-                                worksheet: {
-                                    worksheetId: 'worksheetId',
-                                    worksheetName: 'GTM',
-                                },
-                            },
-                        },
-                    },
-                },
-            }),
-            JSON.stringify({
-                data: {
-                    ConvAssist__sendMessage: {
-                        responses: [
-                            {
-                                msgId: 'msgId',
-                                data: {
-                                    asstRespData: {
-                                        tool: 'TS_NLS',
-                                        asstRespText: '',
-                                        nlsAnsData: {
-                                            sageQuerySuggestions: [
-                                                {
-                                                    llmReasoning: {
-                                                        assumptions: 'You want the total [COL|sales] for [COL|item_type] [VAL|jackets] for [VAL|this year].',
-                                                        clarifications: '',
-                                                        interpretation: '',
-                                                        __typename: 'eureka_SageQuerySuggestion_LLMReasoning',
-                                                    },
-                                                    tokens: [
-                                                        'sum sales',
-                                                        "item type = 'jackets'",
-                                                        "date = 'this year'",
-                                                    ],
-                                                    tmlTokens: [
-                                                        'sum [sales]',
-                                                        "[date] = [date].'this year'",
-                                                        "[item type] = [item type].'jackets'",
-                                                    ],
-                                                    worksheetId: 'worksheetId',
-                                                    description: '',
-                                                    title: '',
-                                                    cached: false,
-                                                    sqlQuery: "SELECT SUM(sales) FROM __Sample_Retail_Apparel WHERE item_type = 'jackets' AND date = _this_year();",
-                                                    sessionId: 'sessionId',
-                                                    genNo: 2,
-                                                    formulaInfo: [],
-                                                    tmlPhrases: [],
-                                                    stateKey: {
-                                                        transactionId: 'transactionId',
-                                                        generationNumber: 1,
-                                                        __typename: 'sage_auto_complete_v2_ACStateKey',
-                                                    },
-                                                    __typename: 'eureka_SageQuerySuggestion',
-                                                },
-                                            ],
-                                            responseType: 'ANSWER',
-                                            __typename: 'convassist_nls_tool_NLSToolAsstRespData',
-                                        },
-                                        __typename: 'convassist_AsstResponseData',
-                                    },
-                                    __typename: 'convassist_MessageData',
-                                },
-                                type: 'ASST_RESPONSE',
-                                __typename: 'convassist_MessagePayload',
-                            },
-                        ],
-                        __typename: 'convassist_SendMessageResponse',
-                    },
-                },
-            }),
-        );
-
+    test('should have sendMessageData method', () => {
         const viewConfig: SpotterAgentEmbedViewConfig = {
             worksheetId: 'worksheetId',
-            // No containerClassName provided
         };
 
         const spotterAgentEmbed = new SpotterAgentEmbed(viewConfig);
-        const result = await spotterAgentEmbed.sendMessage('userMessage');
-        
-        // Verify that the container has no class name (empty string)
-        expect(result.container.className).toBe('');
+        expect(typeof spotterAgentEmbed.sendMessageData).toBe('function');
     });
 
-    test('should handle hideActions parameter correctly', async () => {
-        fetchMock.mockResponses(
-            JSON.stringify({
-                data: {
-                    ConvAssist__createConversation: {
-                        convId: 'conversationId',
-                        initialCtx: {
-                            type: 'TS_ANSWER',
-                            tsAnsCtx: {
-                                sessionId: 'sessionId',
-                                genNo: 1,
-                                stateKey: {
-                                    transactionId: 'transactionId',
-                                    generationNumber: 1,
-                                },
-                                worksheet: {
-                                    worksheetId: 'worksheetId',
-                                    worksheetName: 'GTM',
-                                },
-                            },
-                        },
-                    },
-                },
-            }),
-            JSON.stringify({
-                data: {
-                    ConvAssist__sendMessage: {
-                        responses: [
-                            {
-                                msgId: 'msgId',
-                                data: {
-                                    asstRespData: {
-                                        tool: 'TS_NLS',
-                                        asstRespText: '',
-                                        nlsAnsData: {
-                                            sageQuerySuggestions: [
-                                                {
-                                                    llmReasoning: {
-                                                        assumptions: 'You want the total [COL|sales] for [COL|item_type] [VAL|jackets] for [VAL|this year].',
-                                                        clarifications: '',
-                                                        interpretation: '',
-                                                        __typename: 'eureka_SageQuerySuggestion_LLMReasoning',
-                                                    },
-                                                    tokens: [
-                                                        'sum sales',
-                                                        "item type = 'jackets'",
-                                                        "date = 'this year'",
-                                                    ],
-                                                    tmlTokens: [
-                                                        'sum [sales]',
-                                                        "[date] = [date].'this year'",
-                                                        "[item type] = [item type].'jackets'",
-                                                    ],
-                                                    worksheetId: 'worksheetId',
-                                                    description: '',
-                                                    title: '',
-                                                    cached: false,
-                                                    sqlQuery: "SELECT SUM(sales) FROM __Sample_Retail_Apparel WHERE item_type = 'jackets' AND date = _this_year();",
-                                                    sessionId: 'sessionId',
-                                                    genNo: 2,
-                                                    formulaInfo: [],
-                                                    tmlPhrases: [],
-                                                    stateKey: {
-                                                        transactionId: 'transactionId',
-                                                        generationNumber: 1,
-                                                        __typename: 'sage_auto_complete_v2_ACStateKey',
-                                                    },
-                                                    __typename: 'eureka_SageQuerySuggestion',
-                                                },
-                                            ],
-                                            responseType: 'ANSWER',
-                                            __typename: 'convassist_nls_tool_NLSToolAsstRespData',
-                                        },
-                                        __typename: 'convassist_AsstResponseData',
-                                    },
-                                    __typename: 'convassist_MessageData',
-                                },
-                                type: 'ASST_RESPONSE',
-                                __typename: 'convassist_MessagePayload',
-                            },
-                        ],
-                        __typename: 'convassist_SendMessageResponse',
-                    },
-                },
-            }),
-        );
-
-        const viewConfig: SpotterAgentEmbedViewConfig = {
-            worksheetId: 'worksheetId',
-            hiddenActions: [Action.Download, Action.Save], // This should trigger the HideActions branch
-        };
-
-        const spotterAgentEmbed = new SpotterAgentEmbed(viewConfig);
-        const result = await spotterAgentEmbed.sendMessage('userMessage');
-        
-        // Verify the iframe src contains the hideActions parameter
-        const iframeSrc = getIFrameSrc(result.container);
-        expect(iframeSrc).toContain('hideAction');
+    test('should export ConversationMessage class', () => {
+        expect(typeof ConversationMessage).toBe('function');
     });
 });

package/src/embed/bodyless-conversation.ts

@@ -13,11 +13,6 @@ export interface SpotterAgentEmbedViewConfig extends Omit<BaseViewConfig, 'prima
      * The ID of the worksheet to use for the conversation.
      */
     worksheetId: string;
-    
-    /**
-     * Optional CSS class name to add to the container div.
-     */
-    containerClassName?: string;
 }
 
 /**
@@ -29,14 +24,14 @@ export interface SpotterAgentEmbedViewConfig extends Omit<BaseViewConfig, 'prima
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface BodylessConversationViewConfig extends SpotterAgentEmbedViewConfig {}
 
-interface SpotterAgentMessageViewConfig extends SpotterAgentEmbedViewConfig {
+export interface SpotterAgentMessageViewConfig extends SpotterAgentEmbedViewConfig {
     sessionId: string;
     genNo: number;
     acSessionId: string;
     acGenNo: number;
 }
 
-class ConversationMessage extends TsEmbed {
+export class ConversationMessage extends TsEmbed {
     constructor(container: HTMLElement, protected viewConfig: SpotterAgentMessageViewConfig) {
         viewConfig.embedComponentType = 'bodyless-conversation';
         super(container, viewConfig);
@@ -116,9 +111,6 @@ export class SpotterAgentEmbed {
         }
 
         const container = document.createElement('div');
-        if (this.viewConfig.containerClassName) {
-            container.className = this.viewConfig.containerClassName;
-        }
 
         const embed = new ConversationMessage(container, {
             ...this.viewConfig,
@@ -130,6 +122,28 @@ export class SpotterAgentEmbed {
         await embed.render();
         return { container, viz: embed };
     }
+
+    /**
+     * Send a message to the conversation service and return only the data.
+     * @param userMessage - The message to send to the conversation service.
+     * @returns The data from the conversation service.
+     */
+    public async sendMessageData(userMessage: string) {
+        try {
+            const { data, error } = await this.conversationService.sendMessage(userMessage);
+            if (error) {
+                return { error };
+            }
+            return { data: {
+                sessionId: data.sessionId,
+                genNo: data.genNo,
+                acSessionId: data.stateKey.transactionId,
+                acGenNo: data.stateKey.generationNumber,
+            } };
+        } catch (error) {
+            return { error: error as Error };
+        }
+    }
 }
 
 /**