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

package/src/embed/base.ts

@@ -8,6 +8,7 @@
  * @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
  */
 import EventEmitter from 'eventemitter3';
+import { registerReportingObserver } from '../utils/reporting';
 import { resetCachedAuthToken } from '../authToken';
 import { logger, setGlobalLogLevelOverride } from '../utils/logger';
 import { tokenizedFetch } from '../tokenizedFetch';
@@ -188,6 +189,7 @@ export const init = (embedConfig: EmbedConfig): AuthEventEmitter => {
     );
 
     setGlobalLogLevelOverride(embedConfig.logLevel);
+    registerReportingObserver();
 
     const authEE = new EventEmitter<AuthStatus | AuthEvent>();
     setAuthEE(authEE);
@@ -252,28 +254,29 @@ export const renderInQueue = (fn: (next?: (val?: any) => void) => Promise<any>):
         return renderQueue;
     }
     // Sending an empty function to keep it consistent with the above usage.
-    return fn(() => { }); // eslint-disable-line @typescript-eslint/no-empty-function
+    return fn(() => {}); // eslint-disable-line @typescript-eslint/no-empty-function
 };
 
 /**
  * Imports TML representation of the metadata objects into ThoughtSpot.
  * @param data
+ * @returns imports TML data into ThoughtSpot
  * @example
  * ```js
- *   executeTML({
- * //Array of metadata Tmls
-    metadata_tmls: [
-      "'\''{\"guid\":\"9bd202f5-d431-44bf-9a07-b4f7be372125\",
-      \"liveboard\":{\"name\":\"Parameters Liveboard\"}}'\''"
-    ],
-    import_policy: 'PARTIAL', // Specifies the import policy for the TML import.
-    create_new: false, // If selected, creates TML objects with new GUIDs.
-  }).then(result => {
-    console.log(result);
-  }).catch(error => {
-    console.error(error);
-  });
- *
+ *  executeTML({
+ * //Array of metadata Tmls in string format
+ *      metadata_tmls: [
+ *          "'\''{\"guid\":\"9bd202f5-d431-44bf-9a07-b4f7be372125\",
+ *          \"liveboard\":{\"name\":\"Parameters Liveboard\"}}'\''"
+ *      ],
+ *      import_policy: 'PARTIAL', // Specifies the import policy for the TML import.
+ *      create_new: false, // If selected, creates TML objects with new GUIDs.
+ *  }).then(result => {
+ *      console.log(result);
+ *  }).catch(error => {
+ *      console.error(error);
+ *  });
+ *```
  * @version SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl
  * @group Global methods
  */
@@ -318,27 +321,28 @@ export const executeTML = async (data: executeTMLInput): Promise<any> => {
  * Exports TML representation of the metadata objects from ThoughtSpot in JSON or YAML
  * format.
  * @param data
+ * @returns exports TML data
  * @example
  * ```js
-  exportTML({
-    metadata: [
-      {
-        type: "LIVEBOARD", //Metadata Type
-        identifier: "9bd202f5-d431-44bf-9a07-b4f7be372125" //Metadata Id
-      }
-    ],
-    export_associated: false,//indicates whether to export associated metadata objects
-    export_fqn: false, //Adds FQNs of the referenced objects.For example, if you are
-                       //exporting a Liveboard and its associated objects, the API
-                       //returns the Liveboard TML data with the FQNs of the referenced
-                       //worksheet. If the exported TML data includes FQNs, you don't need
-                       //to manually add FQNs of the referenced objects during TML import.
-    edoc_format: "JSON" //It takes JSON or YAML value
-  }).then(result => {
-    console.log(result);
-  }).catch(error => {
-    console.error(error);
-  });
+ * exportTML({
+ *   metadata: [
+ *     {
+ *       type: "LIVEBOARD", //Metadata Type
+ *       identifier: "9bd202f5-d431-44bf-9a07-b4f7be372125" //Metadata Id
+ *     }
+ *   ],
+ *   export_associated: false,//indicates whether to export associated metadata objects
+ *   export_fqn: false, //Adds FQNs of the referenced objects.For example, if you are
+ *                      //exporting a Liveboard and its associated objects, the API
+ *                      //returns the Liveboard TML data with the FQNs of the referenced
+ *                      //worksheet. If the exported TML data includes FQNs, you don't need
+ *                      //to manually add FQNs of the referenced objects during TML import.
+ *   edoc_format: "JSON" //It takes JSON or YAML value
+ * }).then(result => {
+ *   console.log(result);
+ * }).catch(error => {
+ *   console.error(error);
+ * });
  * ```
  * @version SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl
  * @group Global methods

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

@@ -0,0 +1,141 @@
+import 'jest-fetch-mock';
+import { BodylessConversation, BodylessConversationViewConfig } from './bodyless-conversation';
+import * as authInstance from '../auth';
+import { init } from '../index';
+import { Action, AuthType, RuntimeFilterOp } from '../types';
+import {
+    executeAfterWait,
+    getDocumentBody,
+    getIFrameSrc,
+    getRootEl,
+    fixedEncodeURI,
+    defaultParamsWithoutHiddenActions as defaultParams,
+    expectUrlMatchesWithParams,
+    expectUrlToHaveParamsWithValues,
+} from '../test/test-utils';
+
+describe('BodylessConversation', () => {
+    const thoughtSpotHost = 'tshost';
+
+    beforeAll(() => {
+        init({
+            thoughtSpotHost,
+            authType: AuthType.None,
+        });
+        jest.spyOn(authInstance, 'postLoginService').mockImplementation(() => Promise.resolve({}));
+        spyOn(window, 'alert');
+        document.body.innerHTML = getDocumentBody();
+    });
+
+    beforeEach(() => {
+        fetchMock.resetMocks();
+    });
+
+    test('should render the bodyless conversation embed', 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: BodylessConversationViewConfig = {
+            worksheetId: 'worksheetId',
+        };
+
+        const conversationEmbed = new BodylessConversation(viewConfig);
+        const result = await conversationEmbed.sendMessage('userMessage');
+        console.log(result.container);
+        const iframeSrc = getIFrameSrc(result.container);
+        expectUrlToHaveParamsWithValues(iframeSrc, {
+            sessionId: 'sessionId',
+            genNo: 2,
+            acSessionId: 'transactionId',
+            acGenNo: 1,
+        });
+
+        fetchMock.mockRejectOnce(
+            new Error('error'),
+        );
+        const errorResult = await conversationEmbed.sendMessage('userMessage');
+        expect(errorResult.error instanceof Error).toBeTruthy();
+    });
+});

package/src/embed/bodyless-conversation.ts

@@ -0,0 +1,95 @@
+import { ViewConfig, Param } from '../types';
+import { TsEmbed } from './ts-embed';
+import { Conversation as ConversationService } from '../utils/graphql/nlsService/conversation-service';
+import { getEmbedConfig } from './embedConfig';
+import { getQueryParamString } from '../utils';
+
+export interface BodylessConversationViewConfig extends ViewConfig {
+    /**
+     * The ID of the worksheet to use for the conversation.
+     */
+    worksheetId: string;
+}
+
+interface ConversationMessageViewConfig extends BodylessConversationViewConfig {
+    sessionId: string;
+    genNo: number;
+    acSessionId: string;
+    acGenNo: number;
+}
+
+class ConversationMessage extends TsEmbed {
+    constructor(container: HTMLElement, protected viewConfig: ConversationMessageViewConfig) {
+        super(container, viewConfig);
+    }
+
+    public getIframeSrc() {
+        const {
+            sessionId,
+            genNo,
+            acSessionId,
+            acGenNo,
+        } = this.viewConfig;
+        const path = 'conv-assist-answer';
+        const queryParams = this.getBaseQueryParams();
+
+        queryParams[Param.HideActions] = [...(queryParams[Param.HideActions] ?? [])];
+        let query = '';
+        const queryParamsString = getQueryParamString(queryParams, true);
+        if (queryParamsString) {
+            query = `?${queryParamsString}`;
+        }
+        const tsPostHashParams = this.getThoughtSpotPostUrlParams({
+            sessionId,
+            genNo,
+            acSessionId,
+            acGenNo,
+        });
+
+        return `${this.getEmbedBasePath(query)}/embed/${path}${tsPostHashParams}`;
+    }
+
+    public async render(): Promise<ConversationMessage> {
+        super.render();
+        const src = this.getIframeSrc();
+        await this.renderIFrame(src);
+        return this;
+    }
+}
+
+/**
+ * Create a conversation embed, which can be integrated inside
+ * chatbots or other conversational interfaces.
+ * @group Embed components
+ * @version SDK: 1.34.0 | ThoughtSpot: 10.3.0.cl
+ */
+export class BodylessConversation {
+    private conversationService: ConversationService;
+
+    constructor(private viewConfig: BodylessConversationViewConfig) {
+        const embedConfig = getEmbedConfig();
+
+        this.conversationService = new ConversationService(
+            embedConfig.thoughtSpotHost,
+            viewConfig.worksheetId,
+        );
+    }
+
+    public async sendMessage(userMessage: string) {
+        const { data, error } = await this.conversationService.sendMessage(userMessage);
+        if (error) {
+            return { error };
+        }
+
+        const container = document.createElement('div');
+        const embed = new ConversationMessage(container, {
+            ...this.viewConfig,
+            sessionId: data.sessionId,
+            genNo: data.genNo,
+            acSessionId: data.stateKey.transactionId,
+            acGenNo: data.stateKey.generationNumber,
+        });
+        await embed.render();
+        return { container };
+    }
+}

package/src/embed/conversation.spec.ts

@@ -0,0 +1,46 @@
+import {
+    ConversationEmbed,
+    ConversationViewConfig,
+} from './conversation';
+import * as authInstance from '../auth';
+import { init } from '../index';
+import { Action, AuthType, RuntimeFilterOp } from '../types';
+import {
+    executeAfterWait,
+    getDocumentBody,
+    getIFrameSrc,
+    getRootEl,
+    fixedEncodeURI,
+    defaultParamsWithoutHiddenActions as defaultParams,
+    expectUrlMatchesWithParams,
+} from '../test/test-utils';
+
+const thoughtSpotHost = 'tshost';
+
+beforeAll(() => {
+    init({
+        thoughtSpotHost,
+        authType: AuthType.None,
+    });
+    jest.spyOn(authInstance, 'postLoginService').mockImplementation(() => Promise.resolve({}));
+    spyOn(window, 'alert');
+    document.body.innerHTML = getDocumentBody();
+});
+
+describe('ConversationEmbed', () => {
+    it('should render the conversation embed', async () => {
+        const viewConfig: ConversationViewConfig = {
+            worksheetId: 'worksheetId',
+            searchOptions: {
+                searchQuery: 'searchQuery',
+            },
+        };
+
+        const conversationEmbed = new ConversationEmbed(getRootEl(), viewConfig);
+        await conversationEmbed.render();
+        expectUrlMatchesWithParams(
+            getIFrameSrc(),
+            `http://${thoughtSpotHost}/v2/?${defaultParams}#/embed/insights/conv-assist?worksheet=worksheetId&query=searchQuery`,
+        );
+    });
+});

package/src/embed/conversation.ts

@@ -0,0 +1,58 @@
+import { ViewConfig, Param } from '../types';
+import { TsEmbed } from './ts-embed';
+import { getQueryParamString } from '../utils';
+
+/**
+ * Configuration for search options
+ */
+export interface SearchOptions {
+    /**
+     * The query string to pass to start the Conversation.
+     */
+    searchQuery: string;
+}
+
+export interface ConversationViewConfig extends ViewConfig {
+    /**
+     * The ID of the worksheet to use for the conversation.
+     */
+    worksheetId: string;
+    /**
+     * Ability to pass a starting search query to the conversation.
+     */
+    searchOptions?: SearchOptions;
+}
+
+export class ConversationEmbed extends TsEmbed {
+    constructor(container: HTMLElement, protected viewConfig: ConversationViewConfig) {
+        super(container, viewConfig);
+    }
+
+    public getIframeSrc() {
+        const {
+            worksheetId,
+            searchOptions,
+        } = this.viewConfig;
+        const path = 'insights/conv-assist';
+        const queryParams = this.getBaseQueryParams();
+
+        let query = '';
+        const queryParamsString = getQueryParamString(queryParams, true);
+        if (queryParamsString) {
+            query = `?${queryParamsString}`;
+        }
+        const tsPostHashParams = this.getThoughtSpotPostUrlParams({
+            worksheet: worksheetId,
+            query: searchOptions.searchQuery,
+        });
+
+        return `${this.getEmbedBasePath(query)}/embed/${path}${tsPostHashParams}`;
+    }
+
+    public async render(): Promise<ConversationEmbed> {
+        super.render();
+        const src = this.getIframeSrc();
+        await this.renderIFrame(src);
+        return this;
+    }
+}

package/src/embed/embed.spec.ts

@@ -53,25 +53,3 @@ describe('test view config', () => {
         });
     });
 });
-
-describe('Custom CSS Url', () => {
-    beforeEach(() => {
-        document.body.innerHTML = getDocumentBody();
-    });
-
-    test('passing customCssUrl should set the correct query params on the iframe', async (done) => {
-        init({
-            thoughtSpotHost,
-            authType: AuthType.None,
-            customCssUrl: 'bla.com/foo.css',
-        });
-
-        const embed = new SearchEmbed(getRootEl(), defaultViewConfig);
-        embed.render();
-        executeAfterWait(() => {
-            const iframe = getIFrameEl();
-            expect(iframe.src.includes('customCssUrl=bla.com/foo.css')).toBe(true);
-            done();
-        });
-    });
-});

package/src/embed/liveboard.spec.ts

@@ -67,6 +67,20 @@ describe('Liveboard/viz embed tests', () => {
         });
     });
 
+    test('should render liveboard with data panel v2 flag set to true by default', async () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            liveboardId,
+        } as LiveboardViewConfig);
+        liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}${prefixParams}&enableDataPanelV2=true#/embed/viz/${liveboardId}`,
+            );
+        });
+    });
+
     test('should set disabled actions', async () => {
         const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
             disabledActions: [Action.DownloadAsCsv, Action.DownloadAsPdf, Action.DownloadAsXlsx],
@@ -227,6 +241,54 @@ describe('Liveboard/viz embed tests', () => {
         });
     });
 
+    test('Should add isLiveboardCompactHeaderEnabled flag to the iframe src', async () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            liveboardId,
+            isLiveboardCompactHeaderEnabled: false,
+        } as LiveboardViewConfig);
+
+        liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}&isLiveboardHeaderV2Enabled=false${prefixParams}#/embed/viz/${liveboardId}`,
+            );
+        });
+    });
+
+    test('Should add showLiveboardReverifyBanner flag to the iframe src', async () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            liveboardId,
+            showLiveboardReverifyBanner: false,
+        } as LiveboardViewConfig);
+
+        liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}&showLiveboardReverifyBanner=false${prefixParams}#/embed/viz/${liveboardId}`,
+            );
+        });
+    });
+
+    test('Should add showLiveboardVerifiedBadge flag to the iframe src', async () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            liveboardId,
+            showLiveboardVerifiedBadge: false,
+        } as LiveboardViewConfig);
+
+        liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}&showLiveboardVerifiedBadge=false${prefixParams}#/embed/viz/${liveboardId}`,
+            );
+        });
+    });
+
     test('should not append runtime filters in URL if excludeRuntimeFiltersfromURL is true', async () => {
         const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
             ...defaultViewConfig,

package/src/embed/liveboard.ts

@@ -284,6 +284,48 @@ export interface LiveboardViewConfig
      * @version SDK: 1.32.0 | ThoughtSpot: 10.0.0.cl
      */
     showPreviewLoader?: boolean;
+    /**
+     * This flag is used to enable the compact header in liveboard
+     * @type {boolean}
+     * @default false
+     * @version SDK: 1.35.0 | ThoughtSpot:10.3.0.cl
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed-container', {
+     *    ... // other options
+     *    isLiveboardCompactHeaderEnabled: true,
+     * })
+     * ```
+     */
+    isLiveboardCompactHeaderEnabled?: boolean;
+    /**
+     * This flag is used to show/hide verified Icon in liveboard compact header
+     * @type {boolean}
+     * @default true
+     * @version SDK: 1.35.0 | ThoughtSpot:10.4.0.cl
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed-container', {
+     *    ... // other options
+     *    showLiveboardVerifiedBadge: true,
+     * })
+     * ```
+     */
+    showLiveboardVerifiedBadge?: boolean;
+    /**
+     * This flag is used to show/hide re-verify banner in liveboard compact header
+     * @type {boolean}
+     * @default true
+     * @version SDK: 1.35.0 | ThoughtSpot:10.4.0.cl
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed-container', {
+     *    ... // other options
+     *    showLiveboardReverifyBanner: true,
+     * })
+     * ```
+     */
+    showLiveboardReverifyBanner?: boolean;
 }
 
 /**
@@ -338,8 +380,12 @@ export class LiveboardEmbed extends V1Embed {
             showLiveboardDescription,
             showLiveboardTitle,
             isLiveboardHeaderSticky = true,
+            isLiveboardCompactHeaderEnabled = false,
+            showLiveboardVerifiedBadge = true,
+            showLiveboardReverifyBanner = true,
             enableAskSage,
             enable2ColumnLayout,
+            dataPanelV2 = true,
         } = this.viewConfig;
 
         const preventLiveboardFilterRemoval = this.viewConfig.preventLiveboardFilterRemoval
@@ -387,7 +433,11 @@ export class LiveboardEmbed extends V1Embed {
         }
 
         params[Param.LiveboardHeaderSticky] = isLiveboardHeaderSticky;
+        params[Param.LiveboardHeaderV2] = isLiveboardCompactHeaderEnabled;
+        params[Param.ShowLiveboardVerifiedBadge] = showLiveboardVerifiedBadge;
+        params[Param.ShowLiveboardReverifyBanner] = showLiveboardReverifyBanner;
 
+        params[Param.DataPanelV2Enabled] = dataPanelV2;
         const queryParams = getQueryParamString(params, true);
 
         return queryParams;
@@ -557,6 +607,25 @@ export class LiveboardEmbed extends V1Embed {
             this.render();
         }
     }
+
+    /**
+     * Returns the full url of the liveboard/viz which can be used to open
+     * this liveboard inside the full Thoughtspot application in a new tab.
+     *
+     * @returns url string
+     */
+    public getLiveboardUrl(): string {
+        let url = `${this.thoughtSpotHost}/#/pinboard/${this.viewConfig.liveboardId}`;
+        if (this.viewConfig.activeTabId) {
+            url = `${url}/tab/${this.viewConfig.activeTabId}`;
+        }
+
+        if (this.viewConfig.vizId) {
+            url = `${url}/${this.viewConfig.vizId}`;
+        }
+
+        return url;
+    }
 }
 
 /**