@thoughtspot/visual-embed-sdk 1.45.2 → 1.45.3-mcp.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thoughtspot/visual-embed-sdk",
-    "version": "1.45.2",
+    "version": "1.45.3-mcp.2",
     "description": "ThoughtSpot Embed SDK",
     "module": "lib/src/index.js",
     "main": "dist/tsembed.js",
@@ -57,7 +57,7 @@
         "test": "npm run test-sdk",
         "posttest": "cat ./coverage/sdk/lcov.info | npx coveralls-next",
         "is-publish-allowed": "node scripts/is-publish-allowed.js",
-        "prepublishOnly": "npm run is-publish-allowed && npm run test && npm run tsc && npm run bundle-dts-file && npm run bundle-dts && npm run bundle-dts-react && npm run bundle-dts-react-full && npm run build",
+        "prepublishOnly": "npm run is-publish-allowed && npm run tsc && npm run bundle-dts-file && npm run bundle-dts && npm run bundle-dts-react && npm run bundle-dts-react-full && npm run build",
         "check-size": "npm run build && size-limit",
         "publish-dev": "npm publish --tag dev",
         "publish-prod": "npm publish --tag latest",
@@ -173,4 +173,4 @@
     "globals": {
         "window": {}
     }
-}
+}

package/src/css-variables.ts

@@ -852,4 +852,64 @@ export interface CustomCssVariables {
      * Width of the Spotter chat window.
      */
     '--ts-var-spotter-chat-width'?: string;
+
+    /**
+     * Border color for the saved chats sidebar container.
+     */
+    '--ts-var-saved-chats-border-color'?: string;
+
+    /**
+     * Background color for the saved chats sidebar container.
+     */
+    '--ts-var-saved-chats-bg'?: string;
+
+    /**
+     * Text color for the saved chats sidebar container.
+     */
+    '--ts-var-saved-chats-text-color'?: string;
+
+    /**
+     * Border color for the saved chats sidebar header.
+     */
+    '--ts-var-saved-chats-header-border'?: string;
+
+    /**
+     * Color for the saved chats sidebar title text.
+     */
+    '--ts-var-saved-chats-title-color'?: string;
+
+    /**
+     * Background color for buttons (new chat, toggle, footer) in the saved chats sidebar.
+     */
+    '--ts-var-saved-chats-btn-bg'?: string;
+
+    /**
+     * Hover background color for buttons in the saved chats sidebar.
+     */
+    '--ts-var-saved-chats-btn-hover-bg'?: string;
+
+    /**
+     * Text color for conversation items in the saved chats sidebar.
+     */
+    '--ts-var-saved-chats-conv-text-color'?: string;
+
+    /**
+     * Background color for conversation items on hover in the saved chats sidebar.
+     */
+    '--ts-var-saved-chats-conv-hover-bg'?: string;
+
+    /**
+     * Background color for the active/selected conversation in the saved chats sidebar.
+     */
+    '--ts-var-saved-chats-conv-active-bg'?: string;
+
+    /**
+     * Border color for the saved chats sidebar footer.
+     */
+    '--ts-var-saved-chats-footer-border'?: string;
+
+    /**
+     * Color for section title text (e.g., "Recent", "Older") in the saved chats sidebar.
+     */
+    '--ts-var-saved-chats-section-title-color'?: string;
   }

package/src/embed/app.spec.ts

@@ -443,6 +443,38 @@ describe('App embed tests', () => {
         });
     });
 
+    test('should set hideToolResponseCardBranding to true in url via spotterChatConfig', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            spotterChatConfig: {
+                hideToolResponseCardBranding: true,
+            },
+        } as AppViewConfig);
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&profileAndHelpInNavBarHidden=false&hideToolResponseCardBranding=true${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('should set toolResponseCardBrandingLabel in url via spotterChatConfig', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            spotterChatConfig: {
+                toolResponseCardBrandingLabel: 'MyBrand',
+            },
+        } as AppViewConfig);
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&profileAndHelpInNavBarHidden=false&toolResponseCardBrandingLabel=MyBrand${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
     test('should set isLiveboardXLSXCSVDownloadEnabled to false in url', async () => {
         const appEmbed = new AppEmbed(getRootEl(), {
             ...defaultViewConfig,

package/src/embed/app.ts

@@ -9,7 +9,7 @@
  */
 
 import { logger } from '../utils/logger';
-import { calculateVisibleElementData, getQueryParamString, isUndefined, isValidCssMargin } from '../utils';
+import { calculateVisibleElementData, getQueryParamString, isUndefined, isValidCssMargin, setParamIfDefined, validateHttpUrl } from '../utils';
 import {
     Param,
     DOMSelector,
@@ -17,8 +17,12 @@ import {
     EmbedEvent,
     MessagePayload,
     AllEmbedViewConfig,
+    ErrorDetailsTypes,
+    EmbedErrorCodes,
 } from '../types';
 import { V1Embed } from './ts-embed';
+import { SpotterChatViewConfig, SpotterSidebarViewConfig } from './conversation';
+import { ERROR_MESSAGE } from '../errors';
 
 /**
  * Pages within the ThoughtSpot app that can be embedded.
@@ -672,6 +676,42 @@ export interface AppViewConfig extends AllEmbedViewConfig {
      * @version SDK: 1.45.0 | ThoughtSpot: 26.2.0.cl
      */
     updatedSpotterChatPrompt?: boolean;
+    /**
+     * Configuration for the Spotter sidebar UI customization.
+     * Only applicable when navigating to Spotter within the app.
+     *
+     * Supported embed types: `AppEmbed`
+     * @example
+     * ```js
+     * const embed = new AppEmbed('#tsEmbed', {
+     *    ... //other embed view config
+     *    spotterSidebarConfig: {
+     *        enablePastConversationsSidebar: true,
+     *        spotterSidebarTitle: 'My Conversations',
+     *    },
+     * })
+     * ```
+     * @version SDK: 1.46.0 | ThoughtSpot: 26.3.0.cl
+     */
+    spotterSidebarConfig?: SpotterSidebarViewConfig;
+    /**
+     * Configuration for customizing Spotter chat UI
+     * branding in tool response cards.
+     *
+     * Supported embed types: `AppEmbed`
+     * @example
+     * ```js
+     * const embed = new AppEmbed('#tsEmbed', {
+     *    ... //other embed view config
+     *    spotterChatConfig: {
+     *        hideToolResponseCardBranding: true,
+     *        toolResponseCardBrandingLabel: 'MyBrand',
+     *    },
+     * })
+     * ```
+     * @version SDK: 1.46.0 | ThoughtSpot: 26.4.0.cl
+     */
+    spotterChatConfig?: SpotterChatViewConfig;
     /**
      * This is the minimum height (in pixels) for a full-height App.
      * Setting this height helps resolve issues with empty Apps and
@@ -763,6 +803,8 @@ export class AppEmbed extends V1Embed {
             isCentralizedLiveboardFilterUXEnabled = false,
             isLinkParametersEnabled,
             updatedSpotterChatPrompt,
+            spotterSidebarConfig,
+            spotterChatConfig,
             minimumHeight,
             isThisPeriodInDateFiltersEnabled,
         } = this.viewConfig;
@@ -793,6 +835,60 @@ export class AppEmbed extends V1Embed {
             params[Param.UpdatedSpotterChatPrompt] = !!updatedSpotterChatPrompt;
         }
 
+        // Handle spotterSidebarConfig params
+        if (spotterSidebarConfig) {
+            const {
+                enablePastConversationsSidebar,
+                spotterSidebarTitle,
+                spotterSidebarDefaultExpanded,
+                spotterChatRenameLabel,
+                spotterChatDeleteLabel,
+                spotterDeleteConversationModalTitle,
+                spotterPastConversationAlertMessage,
+                spotterDocumentationUrl,
+                spotterBestPracticesLabel,
+                spotterConversationsBatchSize,
+                spotterNewChatButtonTitle,
+            } = spotterSidebarConfig;
+
+            setParamIfDefined(params, Param.EnablePastConversationsSidebar, enablePastConversationsSidebar, true);
+            setParamIfDefined(params, Param.SpotterSidebarDefaultExpanded, spotterSidebarDefaultExpanded, true);
+            setParamIfDefined(params, Param.SpotterSidebarTitle, spotterSidebarTitle);
+            setParamIfDefined(params, Param.SpotterChatRenameLabel, spotterChatRenameLabel);
+            setParamIfDefined(params, Param.SpotterChatDeleteLabel, spotterChatDeleteLabel);
+            setParamIfDefined(params, Param.SpotterDeleteConversationModalTitle, spotterDeleteConversationModalTitle);
+            setParamIfDefined(params, Param.SpotterPastConversationAlertMessage, spotterPastConversationAlertMessage);
+            setParamIfDefined(params, Param.SpotterBestPracticesLabel, spotterBestPracticesLabel);
+            setParamIfDefined(params, Param.SpotterConversationsBatchSize, spotterConversationsBatchSize);
+            setParamIfDefined(params, Param.SpotterNewChatButtonTitle, spotterNewChatButtonTitle);
+
+            // URL param with validation
+            if (spotterDocumentationUrl !== undefined) {
+                const [isValid, validationError] = validateHttpUrl(spotterDocumentationUrl);
+                if (isValid) {
+                    params[Param.SpotterDocumentationUrl] = spotterDocumentationUrl;
+                } else {
+                    this.handleError({
+                        errorType: ErrorDetailsTypes.VALIDATION_ERROR,
+                        message: ERROR_MESSAGE.INVALID_SPOTTER_DOCUMENTATION_URL,
+                        code: EmbedErrorCodes.INVALID_URL,
+                        error: validationError?.message || ERROR_MESSAGE.INVALID_SPOTTER_DOCUMENTATION_URL,
+                    });
+                }
+            }
+        }
+
+        // Handle spotterChatConfig params
+        if (spotterChatConfig) {
+            const {
+                hideToolResponseCardBranding,
+                toolResponseCardBrandingLabel,
+            } = spotterChatConfig;
+
+            setParamIfDefined(params, Param.HideToolResponseCardBranding, hideToolResponseCardBranding, true);
+            setParamIfDefined(params, Param.ToolResponseCardBrandingLabel, toolResponseCardBrandingLabel);
+        }
+
         if (hideObjectSearch) {
             params[Param.HideObjectSearch] = !!hideObjectSearch;
         }

package/src/embed/auto-frame-renderer.ts

@@ -0,0 +1,78 @@
+import { AutoMCPFrameRendererViewConfig, Param } from "../types";
+import { TsEmbed } from "./ts-embed";
+import { getQueryParamString } from "../utils";
+
+
+export function startAutoMCPFrameRenderer(viewConfig: AutoMCPFrameRendererViewConfig = {}) {
+
+    const replaceWithMCPIframe = (iframe: HTMLIFrameElement) => {
+        const autoMCPFrameRenderer = new AutoFrameRenderer(viewConfig);
+        autoMCPFrameRenderer.replaceIframe(iframe);
+    };
+
+    const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+            for (const node of Array.from(mutation.addedNodes)) {
+                if (node instanceof HTMLIFrameElement && isTSMCPIframe(node)) {
+                    replaceWithMCPIframe(node);
+                }
+                if (node instanceof HTMLElement) {
+                    node.querySelectorAll('iframe').forEach((iframe) => {
+                        if (isTSMCPIframe(iframe)) {
+                            replaceWithMCPIframe(iframe);
+                        }
+                    });
+                }
+            }
+        }
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    return observer;
+}
+
+function isTSMCPIframe(iframe: HTMLIFrameElement) {
+    const src = iframe.src;
+    return src.includes(`${Param.Tsmcp}=true`);
+}
+
+class AutoFrameRenderer extends TsEmbed {
+    private frameToReplace: HTMLIFrameElement;
+
+    constructor(protected viewConfig: AutoMCPFrameRendererViewConfig) {
+        viewConfig.embedComponentType = 'auto-frame-renderer';
+        const container = document.createElement('div');
+        super(container, viewConfig);
+    }
+
+    private getMCPIframeSrc(sourceSrc: string) {
+        const queryParams = this.getEmbedParamsObject();
+        const sourceURL = new URL(sourceSrc);
+        const existingQueryParams = sourceURL.searchParams;
+        // convert existing query params to an object
+        const existingQueryParamsObject = Object.fromEntries(existingQueryParams);
+        delete existingQueryParamsObject[Param.Tsmcp];
+
+        // merge the existing query params with the new query params
+        const mergedQueryParams = { ...queryParams, ...existingQueryParamsObject };
+        const mergedQueryParamsString = getQueryParamString(mergedQueryParams);
+        const frameSrc = `${sourceURL.origin}${sourceURL.pathname}?${mergedQueryParamsString}/${sourceURL.hash}`;
+        return frameSrc;
+    }
+
+    protected handleInsertionIntoDOM(child: string | Node): void {
+        if (this.frameToReplace) {
+            this.frameToReplace.replaceWith(child);
+        } else {
+            super.handleInsertionIntoDOM(child);
+        }
+    }
+
+    public async replaceIframe(iframe: HTMLIFrameElement): Promise<void> {
+        this.frameToReplace = iframe;
+        const src = this.getMCPIframeSrc(iframe.src);
+        await this.renderIFrame(src);
+    }
+}
+

package/src/embed/base.ts

@@ -37,6 +37,7 @@ import { getQueryParamString, getValueFromWindow, isWindowUndefined, storeValueI
 import { resetAllCachedServices } from '../utils/resetServices';
 import { reload } from '../utils/processTrigger';
 import { ERROR_MESSAGE } from '../errors';
+import { startAutoMCPFrameRenderer } from './auto-frame-renderer';
 
 const CONFIG_DEFAULTS: Partial<EmbedConfig> = {
     loginFailedMessage: 'Not logged in',

package/src/embed/conversation.spec.ts

@@ -295,7 +295,9 @@ describe('ConversationEmbed', () => {
             searchOptions: {
                 searchQuery: 'searchQuery',
             },
-            enablePastConversationsSidebar: true,
+            spotterSidebarConfig: {
+                enablePastConversationsSidebar: true,
+            },
         };
 
         const conversationEmbed = new SpotterEmbed(getRootEl(), viewConfig);
@@ -312,7 +314,9 @@ describe('ConversationEmbed', () => {
             searchOptions: {
                 searchQuery: 'searchQuery',
             },
-            enablePastConversationsSidebar: false,
+            spotterSidebarConfig: {
+                enablePastConversationsSidebar: false,
+            },
         };
 
         const conversationEmbed = new SpotterEmbed(getRootEl(), viewConfig);
@@ -334,7 +338,9 @@ describe('ConversationEmbed', () => {
             dataPanelV2: true,
             showSpotterLimitations: true,
             hideSampleQuestions: true,
-            enablePastConversationsSidebar: true,
+            spotterSidebarConfig: {
+                enablePastConversationsSidebar: true,
+            },
         };
 
         const conversationEmbed = new SpotterEmbed(getRootEl(), viewConfig);
@@ -345,6 +351,44 @@ describe('ConversationEmbed', () => {
         );
     });
 
+    it('should render the conversation embed with tool response card branding hidden', async () => {
+        const viewConfig: SpotterEmbedViewConfig = {
+            worksheetId: 'worksheetId',
+            searchOptions: {
+                searchQuery: 'searchQuery',
+            },
+            spotterChatConfig: {
+                hideToolResponseCardBranding: true,
+            },
+        };
+
+        const conversationEmbed = new SpotterEmbed(getRootEl(), viewConfig);
+        await conversationEmbed.render();
+        expectUrlMatchesWithParams(
+            getIFrameSrc(),
+            `http://${thoughtSpotHost}/v2/?${defaultParams}&isSpotterExperienceEnabled=true&hideToolResponseCardBranding=true#/embed/insights/conv-assist?worksheet=worksheetId&query=searchQuery`,
+        );
+    });
+
+    it('should render the conversation embed with custom tool response card branding label', async () => {
+        const viewConfig: SpotterEmbedViewConfig = {
+            worksheetId: 'worksheetId',
+            searchOptions: {
+                searchQuery: 'searchQuery',
+            },
+            spotterChatConfig: {
+                toolResponseCardBrandingLabel: 'MyBrand',
+            },
+        };
+
+        const conversationEmbed = new SpotterEmbed(getRootEl(), viewConfig);
+        await conversationEmbed.render();
+        expectUrlMatchesWithParams(
+            getIFrameSrc(),
+            `http://${thoughtSpotHost}/v2/?${defaultParams}&isSpotterExperienceEnabled=true&toolResponseCardBrandingLabel=MyBrand#/embed/insights/conv-assist?worksheet=worksheetId&query=searchQuery`,
+        );
+    });
+
     it('should ensure deprecated ConversationEmbed class maintains same functionality as SpotterEmbed', async () => {
         const viewConfig: SpotterEmbedViewConfig = {
             worksheetId: 'worksheetId',
@@ -402,4 +446,74 @@ describe('ConversationEmbed', () => {
             `http://${thoughtSpotHost}/v2/?${defaultParams}&isSpotterExperienceEnabled=true&updatedSpotterChatPrompt=false#/embed/insights/conv-assist?worksheet=worksheetId&query=searchQuery`,
         );
     });
+
+    describe('spotter sidebar config params', () => {
+        it.each([
+            ['enablePastConversationsSidebar', true, 'enablePastConversationsSidebar=true'],
+            ['spotterSidebarTitle', 'My Conversations', 'spotterSidebarTitle=My%20Conversations'],
+            ['spotterSidebarDefaultExpanded', true, 'spotterSidebarDefaultExpanded=true'],
+            ['spotterChatRenameLabel', 'Edit Name', 'spotterChatRenameLabel=Edit%20Name'],
+            ['spotterChatDeleteLabel', 'Remove', 'spotterChatDeleteLabel=Remove'],
+            ['spotterDeleteConversationModalTitle', 'Remove Conversation', 'spotterDeleteConversationModalTitle=Remove%20Conversation'],
+            ['spotterPastConversationAlertMessage', 'Viewing past conversation', 'spotterPastConversationAlertMessage=Viewing%20past%20conversation'],
+            ['spotterBestPracticesLabel', 'Help Tips', 'spotterBestPracticesLabel=Help%20Tips'],
+            ['spotterConversationsBatchSize', 50, 'spotterConversationsBatchSize=50'],
+            ['spotterNewChatButtonTitle', 'Start New Conversation', 'spotterNewChatButtonTitle=Start%20New%20Conversation'],
+            ['spotterDocumentationUrl', 'https://docs.example.com/spotter', 'spotterDocumentationUrl=https%3A%2F%2Fdocs.example.com%2Fspotter'],
+        ])('should render with spotterSidebarConfig.%s', async (configKey, configValue, expectedParam) => {
+            const viewConfig: SpotterEmbedViewConfig = {
+                worksheetId: 'worksheetId',
+                spotterSidebarConfig: {
+                    [configKey]: configValue,
+                },
+            };
+            const conversationEmbed = new SpotterEmbed(getRootEl(), viewConfig);
+            await conversationEmbed.render();
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/v2/?${defaultParams}&isSpotterExperienceEnabled=true&${expectedParam}#/embed/insights/conv-assist?worksheet=worksheetId&query=`,
+            );
+        });
+
+        it.each([
+            ['invalid URL format', 'invalid-url'],
+            ['invalid protocol (ftp)', 'ftp://docs.example.com/spotter'],
+        ])('should handle error for spotterSidebarConfig.spotterDocumentationUrl with %s', async (_, invalidUrl) => {
+            const viewConfig: SpotterEmbedViewConfig = {
+                worksheetId: 'worksheetId',
+                spotterSidebarConfig: {
+                    spotterDocumentationUrl: invalidUrl,
+                },
+            };
+            const conversationEmbed = new SpotterEmbed(getRootEl(), viewConfig);
+            (conversationEmbed as any).handleError = jest.fn();
+            await conversationEmbed.render();
+            expect((conversationEmbed as any).handleError).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    errorType: ErrorDetailsTypes.VALIDATION_ERROR,
+                    message: ERROR_MESSAGE.INVALID_SPOTTER_DOCUMENTATION_URL,
+                    code: EmbedErrorCodes.INVALID_URL,
+                }),
+            );
+        });
+
+        it('should render with multiple spotterSidebarConfig options', async () => {
+            const viewConfig: SpotterEmbedViewConfig = {
+                worksheetId: 'worksheetId',
+                spotterSidebarConfig: {
+                    enablePastConversationsSidebar: true,
+                    spotterSidebarTitle: 'Chats',
+                    spotterSidebarDefaultExpanded: true,
+                    spotterNewChatButtonTitle: 'New',
+                    spotterConversationsBatchSize: 25,
+                },
+            };
+            const conversationEmbed = new SpotterEmbed(getRootEl(), viewConfig);
+            await conversationEmbed.render();
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/v2/?${defaultParams}&isSpotterExperienceEnabled=true&enablePastConversationsSidebar=true&spotterSidebarDefaultExpanded=true&spotterSidebarTitle=Chats&spotterConversationsBatchSize=25&spotterNewChatButtonTitle=New#/embed/insights/conv-assist?worksheet=worksheetId&query=`,
+            );
+        });
+    });
 });