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

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;
+    }
 }
 
 /**

package/src/embed/search.ts

@@ -227,19 +227,6 @@ export interface SearchViewConfig
      * ```
      */
     hideSearchBar?: boolean;
-    /**
-     * Flag to control Data panel experience
-     * @default true
-     * @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

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

@@ -454,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;
         }
@@ -500,9 +493,7 @@ 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;
         }
@@ -516,6 +507,13 @@ export class TsEmbed {
         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;
     }
 
@@ -1022,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('?');
@@ -1038,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}` : '';
@@ -1221,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);
     }
@@ -1298,7 +1299,6 @@ export class V1Embed extends TsEmbed {
 
     /**
      * Only for testing purposes.
-     *
      * @hidden
      */
     // eslint-disable-next-line camelcase

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

@@ -11,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',