@thoughtspot/visual-embed-sdk 1.45.1 → 1.45.3

package/src/embed/liveboard.spec.ts

@@ -855,6 +855,187 @@ describe('Liveboard/viz embed tests', () => {
         });
     });
 
+    describe('personalizedViewId functionality', () => {
+        const personalizedViewId = 'view-456-guid';
+
+        test('should render liveboard with personalizedViewId', async () => {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                personalizedViewId,
+            } as LiveboardViewConfig);
+            liveboardEmbed.render();
+            await executeAfterWait(() => {
+                expectUrlToHaveParamsWithValues(getIFrameSrc(), { view: personalizedViewId });
+            });
+        });
+
+        test('should render liveboard with personalizedViewId and activeTabId together', async () => {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                personalizedViewId,
+                activeTabId,
+            } as LiveboardViewConfig);
+            liveboardEmbed.render();
+            await executeAfterWait(() => {
+                // URL should be: #/embed/viz/{id}/tab/{tabId}?view={viewId}
+                expect(getIFrameSrc()).toMatch(
+                    new RegExp(
+                        `#/embed/viz/${liveboardId}/tab/${activeTabId}\\?view=${personalizedViewId}`,
+                    ),
+                );
+            });
+        });
+
+        test('should render liveboard with personalizedViewId and vizId together', async () => {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                personalizedViewId,
+                vizId,
+            } as LiveboardViewConfig);
+            liveboardEmbed.render();
+            await executeAfterWait(() => {
+                // URL should be: #/embed/viz/{id}/{vizId}?view={viewId}
+                expect(getIFrameSrc()).toMatch(
+                    new RegExp(`#/embed/viz/${liveboardId}/${vizId}\\?view=${personalizedViewId}`),
+                );
+            });
+        });
+
+        test('should render liveboard with personalizedViewId, activeTabId, and vizId together', async () => {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                personalizedViewId,
+                activeTabId,
+                vizId,
+            } as LiveboardViewConfig);
+            liveboardEmbed.render();
+            await executeAfterWait(() => {
+                // URL should be: #/embed/viz/{id}/tab/{tabId}/{vizId}?view={viewId}
+                expect(getIFrameSrc()).toMatch(
+                    new RegExp(
+                        `#/embed/viz/${liveboardId}/tab/${activeTabId}/${vizId}\\?view=${personalizedViewId}`,
+                    ),
+                );
+            });
+        });
+
+        test('should not include view param when personalizedViewId is not provided', async () => {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+            } as LiveboardViewConfig);
+            liveboardEmbed.render();
+            await executeAfterWait(() => {
+                expect(getIFrameSrc()).not.toContain('view=');
+            });
+        });
+
+        test('should include personalizedViewId in getLiveboardUrl', async () => {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                personalizedViewId,
+            } as LiveboardViewConfig);
+            await liveboardEmbed.render();
+            expect(liveboardEmbed.getLiveboardUrl()).toBe(
+                `http://${thoughtSpotHost}/#/pinboard/${liveboardId}?view=${personalizedViewId}`,
+            );
+        });
+
+        test('should include personalizedViewId with activeTabId in getLiveboardUrl', async () => {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                personalizedViewId,
+                activeTabId,
+            } as LiveboardViewConfig);
+            await liveboardEmbed.render();
+            expect(liveboardEmbed.getLiveboardUrl()).toBe(
+                `http://${thoughtSpotHost}/#/pinboard/${liveboardId}/tab/${activeTabId}?view=${personalizedViewId}`,
+            );
+        });
+
+        test('personalizedViewId should work with runtime filters', async () => {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                personalizedViewId,
+                runtimeFilters: [
+                    {
+                        columnName: 'sales',
+                        operator: RuntimeFilterOp.EQ,
+                        values: [1000],
+                    },
+                ],
+                excludeRuntimeFiltersfromURL: false,
+            } as LiveboardViewConfig);
+            liveboardEmbed.render();
+            await executeAfterWait(() => {
+                expectUrlToHaveParamsWithValues(getIFrameSrc(), {
+                    view: personalizedViewId,
+                    col1: 'sales',
+                    op1: 'EQ',
+                    val1: '1000',
+                });
+            });
+        });
+
+        describe('backward compatibility with liveboardId?view= workaround', () => {
+            const workaroundViewId = 'workaround-view-id';
+            const liveboardIdWithView = `${liveboardId}?view=${workaroundViewId}`;
+
+            test('should extract view from workaround and add at end of URL', async () => {
+                const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                    ...defaultViewConfig,
+                    liveboardId: liveboardIdWithView,
+                } as LiveboardViewConfig);
+                liveboardEmbed.render();
+                await executeAfterWait(() => {
+                    // URL: #/embed/viz/{cleanId}?view={workaroundViewId}
+                    expect(getIFrameSrc()).toMatch(
+                        new RegExp(`#/embed/viz/${liveboardId}\\?view=${workaroundViewId}`),
+                    );
+                });
+            });
+
+            test('should extract view and place after tab when activeTabId is provided', async () => {
+                const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                    ...defaultViewConfig,
+                    liveboardId: liveboardIdWithView,
+                    activeTabId,
+                } as LiveboardViewConfig);
+                liveboardEmbed.render();
+                await executeAfterWait(() => {
+                    // URL: #/embed/viz/{id}/tab/{tabId}?view={viewId} (view at END, not middle)
+                    expect(getIFrameSrc()).toMatch(
+                        new RegExp(
+                            `#/embed/viz/${liveboardId}/tab/${activeTabId}\\?view=${workaroundViewId}`,
+                        ),
+                    );
+                });
+            });
+
+            test('should use personalizedViewId over workaround when both provided', async () => {
+                const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                    ...defaultViewConfig,
+                    liveboardId: liveboardIdWithView,
+                    personalizedViewId,
+                } as LiveboardViewConfig);
+                liveboardEmbed.render();
+                await executeAfterWait(() => {
+                    // personalizedViewId wins, workaround stripped
+                    expect(getIFrameSrc()).toMatch(
+                        new RegExp(`#/embed/viz/${liveboardId}\\?view=${personalizedViewId}`),
+                    );
+                });
+            });
+        });
+    });
+
     test('navigateToLiveboard should trigger the navigate event with the correct path', async () => {
         mockMessageChannel();
         // mock getSessionInfo
@@ -979,6 +1160,40 @@ describe('Liveboard/viz embed tests', () => {
         });
     });
 
+    test('should set hideToolResponseCardBranding parameter in url params via spotterChatConfig', async () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            liveboardId,
+            spotterChatConfig: {
+                hideToolResponseCardBranding: true,
+            },
+        } as LiveboardViewConfig);
+        await liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}${prefixParams}&hideToolResponseCardBranding=true#/embed/viz/${liveboardId}`,
+            );
+        });
+    });
+
+    test('should set toolResponseCardBrandingLabel parameter in url params via spotterChatConfig', async () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            liveboardId,
+            spotterChatConfig: {
+                toolResponseCardBrandingLabel: 'MyBrand',
+            },
+        } as LiveboardViewConfig);
+        await liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}${prefixParams}&toolResponseCardBrandingLabel=MyBrand#/embed/viz/${liveboardId}`,
+            );
+        });
+    });
+
     test('SetActiveTab Hostevent should not trigger the navigate event with the correct path, for vizEmbed', async () => {
         const mockProcessTrigger = jest.spyOn(tsEmbed.TsEmbed.prototype, 'trigger');
         const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
@@ -1137,7 +1352,12 @@ describe('Liveboard/viz embed tests', () => {
                 ) as HTMLIFrameElement;
 
                 // should render the generic link
-                expect(navigateToLiveboardSpy).toHaveBeenCalledWith(testLiveboardId, 'testVizId', 'testActiveTabId');
+                expect(navigateToLiveboardSpy).toHaveBeenCalledWith(
+                    testLiveboardId,
+                    'testVizId',
+                    'testActiveTabId',
+                    undefined,
+                );
                 expect(iFrame.src).toMatch(/http:\/\/tshost\/.*&isLiveboardEmbed=true.*#$/);
 
                 expect(consoleSpy).toHaveBeenCalledTimes(0);
@@ -1195,7 +1415,12 @@ describe('Liveboard/viz embed tests', () => {
                     libEmbed.getPreRenderIds().child,
                 ) as HTMLIFrameElement;
                 // should render the generic link
-                expect(navigateToLiveboardSpy).toHaveBeenCalledWith(testLiveboardId, 'testVizId', 'testActiveTabId');
+                expect(navigateToLiveboardSpy).toHaveBeenCalledWith(
+                    testLiveboardId,
+                    'testVizId',
+                    'testActiveTabId',
+                    undefined,
+                );
                 expect(iFrame.src).toMatch(/http:\/\/tshost\/.*&isLiveboardEmbed=true.*#$/);
                 expect(consoleSpy).toHaveBeenCalledTimes(0);
             }, 1005);
@@ -1528,9 +1753,13 @@ describe('Liveboard/viz embed tests', () => {
             mockProcessTrigger.mockResolvedValue({ session: 'test' });
             await executeAfterWait(async () => {
                 await liveboardEmbed.trigger(HostEvent.Save);
-                expect(mockProcessTrigger).toHaveBeenCalledWith(HostEvent.Save, {
-                    vizId: 'testViz',
-                });
+                expect(mockProcessTrigger).toHaveBeenCalledWith(
+                    HostEvent.Save,
+                    {
+                        vizId: 'testViz',
+                    },
+                    undefined,
+                );
             });
         });
     });
@@ -1564,7 +1793,12 @@ describe('Liveboard/viz embed tests', () => {
             liveboardEmbed['executeEmbedContainerReadyCallbacks']();
 
             // Now navigateToLiveboard should be called
-            expect(navigateToLiveboardSpy).toHaveBeenCalledWith(liveboardId, vizId, activeTabId);
+            expect(navigateToLiveboardSpy).toHaveBeenCalledWith(
+                liveboardId,
+                vizId,
+                activeTabId,
+                undefined,
+            );
         });
 
         test('should update currentLiveboardState for prerender object when embed container loads', async () => {
@@ -1617,7 +1851,12 @@ describe('Liveboard/viz embed tests', () => {
             liveboardEmbed['beforePrerenderVisible']();
 
             // navigateToLiveboard should be called immediately
-            expect(navigateToLiveboardSpy).toHaveBeenCalledWith(liveboardId, vizId, activeTabId);
+            expect(navigateToLiveboardSpy).toHaveBeenCalledWith(
+                liveboardId,
+                vizId,
+                activeTabId,
+                undefined,
+            );
         });
 
         test('should handle beforePrerenderVisible without prerender object', async () => {
@@ -1642,7 +1881,12 @@ describe('Liveboard/viz embed tests', () => {
             liveboardEmbed['executeEmbedContainerReadyCallbacks']();
 
             // navigateToLiveboard should still be called
-            expect(navigateToLiveboardSpy).toHaveBeenCalledWith(liveboardId, vizId, activeTabId);
+            expect(navigateToLiveboardSpy).toHaveBeenCalledWith(
+                liveboardId,
+                vizId,
+                activeTabId,
+                undefined,
+            );
         });
 
         test('should work with all liveboard parameters', async () => {
@@ -1666,7 +1910,12 @@ describe('Liveboard/viz embed tests', () => {
             liveboardEmbed['beforePrerenderVisible']();
 
             // Check that all parameters are passed correctly
-            expect(navigateToLiveboardSpy).toHaveBeenCalledWith(customLiveboardId, customVizId, customActiveTabId);
+            expect(navigateToLiveboardSpy).toHaveBeenCalledWith(
+                customLiveboardId,
+                customVizId,
+                customActiveTabId,
+                undefined,
+            );
         });
 
         test('should work with minimal liveboard parameters', async () => {
@@ -1684,7 +1933,12 @@ describe('Liveboard/viz embed tests', () => {
             liveboardEmbed['beforePrerenderVisible']();
 
             // Check that undefined parameters are passed correctly
-            expect(navigateToLiveboardSpy).toHaveBeenCalledWith(liveboardId, undefined, undefined);
+            expect(navigateToLiveboardSpy).toHaveBeenCalledWith(
+                liveboardId,
+                undefined,
+                undefined,
+                undefined,
+            );
         });
     });
 

package/src/embed/liveboard.ts

@@ -22,13 +22,15 @@ import {
     LiveboardAppEmbedViewConfig,
     ErrorDetailsTypes,
     EmbedErrorCodes,
+    ContextType,
 } from '../types';
-import { calculateVisibleElementData, getQueryParamString, isUndefined, isValidCssMargin } from '../utils';
+import { calculateVisibleElementData, getQueryParamString, isUndefined, isValidCssMargin, setParamIfDefined } from '../utils';
 import { getAuthPromise } from './base';
 import { TsEmbed, V1Embed } from './ts-embed';
 import { addPreviewStylesIfNotPresent } from '../utils/global-styles';
 import { TriggerPayload, TriggerResponse } from './hostEventClient/contracts';
 import { logger } from '../utils/logger';
+import { SpotterChatViewConfig } from './conversation';
 
 
 /**
@@ -208,6 +210,23 @@ export interface LiveboardViewConfig extends BaseViewConfig, LiveboardOtherViewC
      * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1-sw
      */
     activeTabId?: string;
+    /**
+     * The GUID of a saved personalized view to load.
+     * A personalized view is a saved configuration of a Liveboard
+     * that includes specific filter selections.
+     *
+     * Supported embed types: `LiveboardEmbed`
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#tsEmbed', {
+     *    liveboardId: 'liveboard-guid',
+     *    personalizedViewId: 'view-guid',
+     *    activeTabId: 'tab-guid',
+     * })
+     * ```
+     * @version SDK: 1.46.0 | ThoughtSpot: 26.4.0.cl
+     */
+    personalizedViewId?: string;
     /**
      * Show or hide the tab panel of the embedded Liveboard.
      *
@@ -463,6 +482,24 @@ export interface LiveboardViewConfig extends BaseViewConfig, LiveboardOtherViewC
      * @version SDK: 1.45.0 | ThoughtSpot: 26.2.0.cl
      */
     updatedSpotterChatPrompt?: boolean;
+    /**
+     * Configuration for customizing Spotter chat UI
+     * branding in tool response cards.
+     *
+     * Supported embed types: `LiveboardEmbed`
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#tsEmbed', {
+     *    ... //other embed view config
+     *    spotterChatConfig: {
+     *        hideToolResponseCardBranding: true,
+     *        toolResponseCardBrandingLabel: 'MyBrand',
+     *    },
+     * })
+     * ```
+     * @version SDK: 1.46.0 | ThoughtSpot: 26.4.0.cl
+     */
+    spotterChatConfig?: SpotterChatViewConfig;
 }
 
 /**
@@ -552,6 +589,7 @@ export class LiveboardEmbed extends V1Embed {
             isCentralizedLiveboardFilterUXEnabled = false,
             isLinkParametersEnabled,
             updatedSpotterChatPrompt,
+            spotterChatConfig,
             isThisPeriodInDateFiltersEnabled,
         } = this.viewConfig;
 
@@ -618,7 +656,6 @@ export class LiveboardEmbed extends V1Embed {
             params[Param.DataSourceId] = dataSourceId;
         }
 
-
         if (isLiveboardStylingAndGroupingEnabled !== undefined) {
             params[Param.IsLiveboardStylingAndGroupingEnabled] = isLiveboardStylingAndGroupingEnabled;
         }
@@ -639,6 +676,17 @@ export class LiveboardEmbed extends V1Embed {
             params[Param.ShowSpotterLimitations] = showSpotterLimitations;
         }
 
+        // Handle spotterChatConfig params
+        if (spotterChatConfig) {
+            const {
+                hideToolResponseCardBranding,
+                toolResponseCardBrandingLabel,
+            } = spotterChatConfig;
+
+            setParamIfDefined(params, Param.HideToolResponseCardBranding, hideToolResponseCardBranding, true);
+            setParamIfDefined(params, Param.ToolResponseCardBrandingLabel, toolResponseCardBrandingLabel);
+        }
+
         if (isLinkParametersEnabled !== undefined) {
             params[Param.isLinkParametersEnabled] = isLinkParametersEnabled;
         }
@@ -670,15 +718,39 @@ export class LiveboardEmbed extends V1Embed {
         return params;
     }
 
-    private getIframeSuffixSrc(liveboardId: string, vizId: string, activeTabId: string) {
-        let suffix = `/embed/viz/${liveboardId}`;
+    private getIframeSuffixSrc(
+        liveboardId: string,
+        vizId: string,
+        activeTabId: string,
+        personalizedViewId?: string,
+    ) {
+        // Extract view from liveboardId if passed along with it (legacy approach)
+        // View must be appended as query param at the end, not embedded in path
+        let liveboardGuid = liveboardId;
+        let legacyViewId: string | undefined;
+
+        if (liveboardId?.includes('?')) {
+            const [id, query] = liveboardId.split('?');
+            liveboardGuid = id;
+            const params = new URLSearchParams(query);
+            legacyViewId = params.get('view') || undefined;
+        }
+
+        // personalizedViewId takes precedence over legacyViewId (when passed as part of liveboardId)
+        const effectiveViewId = personalizedViewId || legacyViewId;
+
+        let suffix = `/embed/viz/${liveboardGuid}`;
         if (activeTabId) {
-            suffix = `${suffix}/tab/${activeTabId} `;
+            suffix = `${suffix}/tab/${activeTabId}`;
         }
         if (vizId) {
             suffix = `${suffix}/${vizId}`;
         }
-        const tsPostHashParams = this.getThoughtSpotPostUrlParams();
+        const additionalParams: { [key: string]: string } = {};
+        if (effectiveViewId) {
+            additionalParams.view = effectiveViewId;
+        }
+        const tsPostHashParams = this.getThoughtSpotPostUrlParams(additionalParams);
         suffix = `${suffix}${tsPostHashParams}`;
         return suffix;
     }
@@ -686,7 +758,7 @@ export class LiveboardEmbed extends V1Embed {
     private sendFullHeightLazyLoadData = () => {
         const data = calculateVisibleElementData(this.iFrame);
         this.trigger(HostEvent.VisibleEmbedCoordinates, data);
-    }
+    };
 
     /**
      * This is a handler for the RequestVisibleEmbedCoordinates event.
@@ -705,7 +777,7 @@ export class LiveboardEmbed extends V1Embed {
      * to be loaded within the iFrame.
      */
     private getIFrameSrc(): string {
-        const { vizId, activeTabId } = this.viewConfig;
+        const { vizId, activeTabId, personalizedViewId } = this.viewConfig;
         const liveboardId = this.viewConfig.liveboardId ?? this.viewConfig.pinboardId;
 
         if (!liveboardId) {
@@ -720,6 +792,7 @@ export class LiveboardEmbed extends V1Embed {
             liveboardId,
             vizId,
             activeTabId,
+            personalizedViewId,
         )}`;
     }
 
@@ -812,18 +885,25 @@ export class LiveboardEmbed extends V1Embed {
         liveboardId: this.viewConfig.liveboardId,
         vizId: this.viewConfig.vizId,
         activeTabId: this.viewConfig.activeTabId,
+        personalizedViewId: this.viewConfig.personalizedViewId,
     };
 
     protected beforePrerenderVisible(): void {
         const embedObj = this.getPreRenderObj<LiveboardEmbed>();
 
         this.executeAfterEmbedContainerLoaded(() => {
-            this.navigateToLiveboard(this.viewConfig.liveboardId, this.viewConfig.vizId, this.viewConfig.activeTabId);
+            this.navigateToLiveboard(
+                this.viewConfig.liveboardId,
+                this.viewConfig.vizId,
+                this.viewConfig.activeTabId,
+                this.viewConfig.personalizedViewId,
+            );
             if (embedObj) {
                 embedObj.currentLiveboardState = {
                     liveboardId: this.viewConfig.liveboardId,
                     vizId: this.viewConfig.vizId,
                     activeTabId: this.viewConfig.activeTabId,
+                    personalizedViewId: this.viewConfig.personalizedViewId,
                 };
             }
         });
@@ -842,10 +922,11 @@ export class LiveboardEmbed extends V1Embed {
      * @param {any} data The payload to send with the message
      * @returns A promise that resolves with the response from the embedded app
      */
-    public trigger<HostEventT extends HostEvent, PayloadT>(
+    public trigger<HostEventT extends HostEvent, PayloadT, ContextT extends ContextType>(
         messageType: HostEventT,
         data: TriggerPayload<PayloadT, HostEventT> = ({} as any),
-    ): Promise<TriggerResponse<PayloadT, HostEventT>> {
+        context?: ContextT,
+    ): Promise<TriggerResponse<PayloadT, HostEventT, ContextT>> {
         const dataWithVizId: any = data;
         if (messageType === HostEvent.SetActiveTab) {
             this.setActiveTab(data as { tabId: string });
@@ -854,7 +935,7 @@ export class LiveboardEmbed extends V1Embed {
         if (typeof dataWithVizId === 'object' && this.viewConfig.vizId) {
             dataWithVizId.vizId = this.viewConfig.vizId;
         }
-        return super.trigger(messageType, dataWithVizId);
+        return super.trigger(messageType, dataWithVizId, context);
     }
     /**
      * Destroys the ThoughtSpot embed, and remove any nodes from the DOM.
@@ -900,11 +981,17 @@ export class LiveboardEmbed extends V1Embed {
         return this;
     }
 
-    public navigateToLiveboard(liveboardId: string, vizId?: string, activeTabId?: string) {
-        const path = this.getIframeSuffixSrc(liveboardId, vizId, activeTabId);
+    public navigateToLiveboard(
+        liveboardId: string,
+        vizId?: string,
+        activeTabId?: string,
+        personalizedViewId?: string,
+    ) {
+        const path = this.getIframeSuffixSrc(liveboardId, vizId, activeTabId, personalizedViewId);
         this.viewConfig.liveboardId = liveboardId;
         this.viewConfig.activeTabId = activeTabId;
         this.viewConfig.vizId = vizId;
+        this.viewConfig.personalizedViewId = personalizedViewId;
         if (this.isRendered) {
             this.trigger(HostEvent.Navigate, path.substring(1));
         } else if (this.viewConfig.preRenderId) {
@@ -929,6 +1016,10 @@ export class LiveboardEmbed extends V1Embed {
             url = `${url}/${this.viewConfig.vizId}`;
         }
 
+        if (this.viewConfig.personalizedViewId) {
+            url = `${url}?view=${this.viewConfig.personalizedViewId}`;
+        }
+
         return url;
     }
 }