@thoughtspot/visual-embed-sdk 1.46.1 → 1.46.3

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

@@ -0,0 +1,152 @@
+import { AutoMCPFrameRendererViewConfig, Param } from "../types";
+import { TsEmbed } from "./ts-embed";
+import { getQueryParamString } from "../utils";
+
+
+/**
+ * Starts an automatic renderer that watches the DOM for iframes containing
+ * the `tsmcp=true` query parameter and replaces them with fully configured
+ * ThoughtSpot embed iframes. The query parameter is automatically added by
+ * the ThoughtSpot MCP server.
+ *
+ * A {@link MutationObserver} is set up on `document.body` to detect both
+ * directly added iframes and iframes nested within added container elements.
+ * Each matching iframe is replaced in-place with a new ThoughtSpot embed
+ * iframe that merges the original iframe's query parameters with the SDK
+ * embed parameters.
+ *
+ * Call {@link MutationObserver.disconnect | observer.disconnect()} on the
+ * returned observer to stop monitoring the DOM.
+ *
+ * @param viewConfig - Optional configuration for the auto-rendered embeds.
+ *   Accepts all properties from {@link AutoMCPFrameRendererViewConfig}.
+ *   Defaults to an empty config.
+ * @returns A {@link MutationObserver} instance that is actively observing
+ *   `document.body`. Disconnect it when monitoring is no longer needed.
+ *
+ * @example
+ * ```js
+ * import { startAutoMCPFrameRenderer } from '@thoughtspot/visual-embed-sdk';
+ *
+ * // Start watching the DOM for tsmcp iframes
+ * const observer = startAutoMCPFrameRenderer({
+ *   // optional view config overrides
+ * });
+ *
+ * // Later, stop watching
+ * observer.disconnect();
+ * ```
+ * 
+ * @example
+ * Detailed example of how to use the auto-frame renderer:
+ * [Python React Agent Simple UI](https://github.com/thoughtspot/developer-examples/tree/main/mcp/python-react-agent-simple-ui)
+ */
+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) {
+    try {
+        const url = new URL(iframe.src);
+        return url.searchParams.get(Param.Tsmcp) === 'true';
+    } catch (e) {
+        // The iframe src might not be a valid URL (e.g., 'about:blank').
+        return false;
+    }
+}
+
+/**
+ * Embed component that automatically replaces a plain iframe with a
+ * ThoughtSpot embed iframe. It merges the SDK's embed parameters with
+ * the original iframe's query parameters (stripping the `tsmcp` marker)
+ * and swaps the original iframe element in the DOM.
+ *
+ * This class is used internally by {@link startAutoMCPFrameRenderer} and
+ * is not intended to be instantiated directly.
+ */
+class AutoFrameRenderer extends TsEmbed {
+    private frameToReplace: HTMLIFrameElement;
+
+    constructor(protected viewConfig: AutoMCPFrameRendererViewConfig) {
+        viewConfig.embedComponentType = 'auto-frame-renderer';
+        const container = document.createElement('div');
+        super(container, viewConfig);
+    }
+
+    /**
+     * Builds the final iframe `src` by merging the SDK embed parameters
+     * with the query parameters already present on the source iframe URL.
+     * The `tsmcp` marker param is removed so it does not propagate to the
+     * ThoughtSpot application.
+     *
+     * @param sourceSrc - The original iframe's `src` URL string.
+     * @returns The constructed URL to use for the ThoughtSpot embed iframe.
+     */
+    private getMCPIframeSrc(sourceSrc: string) {
+        const queryParams = this.getEmbedParamsObject();
+        const sourceURL = new URL(sourceSrc);
+        const existingQueryParams = sourceURL.searchParams;
+        const existingQueryParamsObject = Object.fromEntries(existingQueryParams);
+        delete existingQueryParamsObject[Param.Tsmcp];
+
+        const mergedQueryParams = { ...queryParams, ...existingQueryParamsObject };
+        const mergedQueryParamsString = getQueryParamString(mergedQueryParams);
+        const frameSrc = `${this.getEmbedBasePath(mergedQueryParamsString)}${sourceURL.hash.replace('#', '')}`;
+        return frameSrc;
+    }
+
+    /**
+     * Overrides the base insertion behavior so the new embed iframe
+     * replaces the original iframe in-place rather than being appended
+     * to a container element. Falls back to the default behavior when
+     * no iframe has been set for replacement.
+     */
+    protected handleInsertionIntoDOM(child: string | Node): void {
+        if (this.frameToReplace) {
+            this.frameToReplace.replaceWith(child);
+        } else {
+            super.handleInsertionIntoDOM(child);
+        }
+    }
+
+    /**
+     * Replaces the given iframe with a new ThoughtSpot embed iframe.
+     *
+     * The original iframe's `src` is used to derive the embed URL, and
+     * once the new iframe is rendered it takes the original's place in
+     * the DOM tree.
+     *
+     * @param iframe - The existing `<iframe>` element to replace.
+     */
+    public async replaceIframe(iframe: HTMLIFrameElement): Promise<void> {
+        this.frameToReplace = iframe;
+        const src = this.getMCPIframeSrc(iframe.src);
+        await this.renderIFrame(src);
+    }
+}
+

package/src/embed/base.spec.ts

@@ -1,4 +1,4 @@
-/* eslint-disable no-console */
+ 
 /* eslint-disable @typescript-eslint/no-shadow */
 import EventEmitter from 'eventemitter3';
 import { EmbedConfig } from '../index';

package/src/embed/base.ts

@@ -1,5 +1,5 @@
-/* eslint-disable camelcase */
-/* eslint-disable import/no-mutable-exports */
+ 
+ 
 /**
  * Copyright (c) 2022
  *
@@ -36,7 +36,6 @@ import { getEmbedConfig, setEmbedConfig } from './embedConfig';
 import { getQueryParamString, getValueFromWindow, isWindowUndefined, storeValueInWindow } from '../utils';
 import { resetAllCachedServices } from '../utils/resetServices';
 import { reload } from '../utils/processTrigger';
-import { ERROR_MESSAGE } from '../errors';
 
 const CONFIG_DEFAULTS: Partial<EmbedConfig> = {
     loginFailedMessage: 'Not logged in',
@@ -116,7 +115,7 @@ export const prefetch = (
     additionalFlags?: { [key: string]: string | number | boolean },
 ): void => {
     if (url === '') {
-        // eslint-disable-next-line no-console
+         
         logger.warn('The prefetch method does not have a valid URL');
     } else {
         const features = prefetchFeatures || [PrefetchFeatures.FullApp];
@@ -142,9 +141,9 @@ export const prefetch = (
                     iFrame.style.height = '0';
                     iFrame.style.border = '0';
 
-                    // Make it 'fixed' to keep it in a different stacking context.
-                    //   This should solve the focus behaviours inside the iframe from
-                    //   interfering with main body.
+                    // Make it 'fixed' to keep it in a different stacking
+                    // context. This should solve the focus behaviours inside
+                    // the iframe from interfering with main body.
                     iFrame.style.position = 'fixed';
                     // Push it out of viewport.
                     iFrame.style.top = '100vh';
@@ -323,7 +322,7 @@ export const renderInQueue = (fn: (next?: (val?: any) => void) => Promise<any>):
         return renderQueue;
     }
     // Sending an empty function to keep it consistent with the above usage.
-    return fn(() => {}); // eslint-disable-line @typescript-eslint/no-empty-function
+    return fn(() => {});  
 };
 
 /**
@@ -345,7 +344,7 @@ export const renderInQueue = (fn: (next?: (val?: any) => void) => Promise<any>):
  *  }).catch(error => {
  *      console.error(error);
  *  });
- *```
+ * ```
  * @version SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl
  * @group Global methods
  */
@@ -466,9 +465,9 @@ export function reset(): void {
 
 /**
  * Reloads the ThoughtSpot iframe.
+ * @version SDK: 1.43.1
  * @param iFrame
  * @group Global methods
- * @version SDK: 1.43.1
  */
 export const reloadIframe = (iFrame: HTMLIFrameElement) => {
     if (!iFrame) {

package/src/embed/bodyless-conversation.ts

@@ -17,8 +17,8 @@ export interface SpotterAgentEmbedViewConfig extends Omit<BaseViewConfig, 'prima
 
 /**
  * Configuration for conversation options.
- * @deprecated from SDK: 1.39.0 | ThoughtSpot: 10.10.0.cl
  * Use {@link SpotterAgentEmbedViewConfig} instead
+ * @deprecated from SDK: 1.39.0 | ThoughtSpot: 10.10.0.cl
  * @group Embed components
  */
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
@@ -87,6 +87,8 @@ export class ConversationMessage extends TsEmbed {
 /**
  * Create a conversation embed, which can be integrated inside
  * chatbots or other conversational interfaces.
+ * @version SDK: 1.37.0 | ThoughtSpot: 10.9.0.cl
+ * @group Embed components
  * @example
  * ```js
  * import { SpotterAgentEmbed } from '@thoughtspot/visual-embed-sdk';
@@ -100,8 +102,6 @@ export class ConversationMessage extends TsEmbed {
  * // append the container to the DOM
  * document.body.appendChild(container); // or to any other element
  * ```
- * @group Embed components
- * @version SDK: 1.37.0 | ThoughtSpot: 10.9.0.cl
  */
 export class SpotterAgentEmbed {
     private conversationService: ConversationService;
@@ -164,8 +164,9 @@ export class SpotterAgentEmbed {
 /**
  * Create a conversation embed, which can be integrated inside
  * chatbots or other conversational interfaces.
- * @deprecated from SDK: 1.39.0 | ThoughtSpot: 10.10.0.cl
  * Use {@link SpotterAgentEmbed} instead
+ * @deprecated from SDK: 1.39.0 | ThoughtSpot: 10.10.0.cl
+ * @group Embed components
  * @example
  * ```js
  * import { SpotterAgentEmbed } from '@thoughtspot/visual-embed-sdk';
@@ -179,7 +180,6 @@ export class SpotterAgentEmbed {
  * // append the container to the DOM
  * document.body.appendChild(container); // or to any other element
  * ```
- * @group Embed components
  */
 export class BodylessConversation extends SpotterAgentEmbed {
     constructor(viewConfig: BodylessConversationViewConfig) {

package/src/embed/conversation.spec.ts

@@ -327,6 +327,43 @@ describe('ConversationEmbed', () => {
         );
     });
 
+    it('should render the conversation embed with deprecated standalone enablePastConversationsSidebar flag', async () => {
+        const viewConfig: SpotterEmbedViewConfig = {
+            worksheetId: 'worksheetId',
+            searchOptions: {
+                searchQuery: 'searchQuery',
+            },
+            enablePastConversationsSidebar: true,
+        };
+
+        const conversationEmbed = new SpotterEmbed(getRootEl(), viewConfig);
+        await conversationEmbed.render();
+        expectUrlMatchesWithParams(
+            getIFrameSrc(),
+            `http://${thoughtSpotHost}/v2/?${defaultParams}&isSpotterExperienceEnabled=true&enablePastConversationsSidebar=true#/embed/insights/conv-assist?worksheet=worksheetId&query=searchQuery`,
+        );
+    });
+
+    it('should prefer spotterSidebarConfig.enablePastConversationsSidebar over deprecated standalone flag', async () => {
+        const viewConfig: SpotterEmbedViewConfig = {
+            worksheetId: 'worksheetId',
+            searchOptions: {
+                searchQuery: 'searchQuery',
+            },
+            enablePastConversationsSidebar: false,
+            spotterSidebarConfig: {
+                enablePastConversationsSidebar: true,
+            },
+        };
+
+        const conversationEmbed = new SpotterEmbed(getRootEl(), viewConfig);
+        await conversationEmbed.render();
+        expectUrlMatchesWithParams(
+            getIFrameSrc(),
+            `http://${thoughtSpotHost}/v2/?${defaultParams}&isSpotterExperienceEnabled=true&enablePastConversationsSidebar=true#/embed/insights/conv-assist?worksheet=worksheetId&query=searchQuery`,
+        );
+    });
+
     it('should render the conversation embed with all boolean flags set', async () => {
         const viewConfig: SpotterEmbedViewConfig = {
             worksheetId: 'worksheetId',