@thoughtspot/visual-embed-sdk 1.33.0 → 1.33.1-dc.3

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.33.1 | ThoughtSpot: 10.5.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}&isSpotterExperienceEnabled=true#/embed/insights/conv-assist?worksheet=worksheetId&query=searchQuery`,
+        );
+    });
+});

package/src/embed/conversation.ts

@@ -0,0 +1,74 @@
+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;
+}
+
+/**
+ * Embed ThoughtSpot AI Conversation.
+ * @group Embed components
+ * @example
+ * ```js
+ * const conversation = new ConversationEmbed('#tsEmbed', {
+ *   worksheetId: 'worksheetId',
+ *   searchOptions: {
+ *     searchQuery: 'searchQuery',
+ *   },
+ * });
+ * conversation.render();
+ * ```
+ * @version SDK: 1.33.1 | ThoughtSpot: 10.5.0.cl
+ */
+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();
+        queryParams[Param.SpotterEnabled] = true;
+
+        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/liveboard.ts

@@ -609,6 +609,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/ts-embed.ts

@@ -1020,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('?');
@@ -1036,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}` : '';

package/src/index.ts

@@ -19,6 +19,8 @@ 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 { ConversationEmbed, ConversationViewConfig } from './embed/conversation';
 import {
     AuthFailureType, AuthStatus, AuthEvent, AuthEventEmitter,
 } from './auth';
@@ -55,6 +57,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 +71,18 @@ export {
     getEmbedConfig as getInitConfig,
     getSessionInfo,
     tokenizedFetch,
+    getAnswerFromQuery,
+    createLiveboardWithAnswers,
     SearchEmbed,
     SearchBarEmbed,
     PinboardEmbed,
     LiveboardEmbed,
     SageEmbed,
     AppEmbed,
+    BodylessConversation,
+    BodylessConversationViewConfig,
+    ConversationEmbed,
+    ConversationViewConfig,
     AuthFailureType,
     AuthStatus,
     AuthEvent,

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);
 }