@thoughtspot/visual-embed-sdk 1.49.1 → 1.49.3

package/src/embed/spotter-viz-utils.ts

@@ -32,6 +32,12 @@ export interface SpotterVizStarterPrompt {
  *        customStarterPrompts: [
  *            { id: '1', displayText: 'Top products', fullPrompt: 'What are the top products by revenue?' }
  *        ],
+ *        // loaderHeadline and loaderTips require SDK: 1.51.0 | ThoughtSpot Cloud: 26.8.0.cl
+ *        loaderHeadline: 'Crunching the numbers...',
+ *        loaderTips: [
+ *            { label: 'Tip', text: 'try asking about revenue by region' },
+ *            { label: 'Tip', text: 'use natural language' },
+ *        ],
  *    },
  * })
  * ```
@@ -76,6 +82,30 @@ export interface SpotterVizConfig {
      * @version SDK: 1.50.0 | ThoughtSpot Cloud: 26.7.0.cl
      */
     inputChatPlaceholder?: string;
+    /**
+     * Custom headline text shown in the SpotterViz loading state.
+     * Replaces the default loading headline.
+     * @version SDK: 1.51.0 | ThoughtSpot Cloud: 26.8.0.cl
+     */
+    loaderHeadline?: string;
+    /**
+     * Custom tips shown in the SpotterViz loading state.
+     * Replaces the default loading tips with the provided list.
+     * @version SDK: 1.51.0 | ThoughtSpot Cloud: 26.8.0.cl
+     */
+    loaderTips?: SpotterVizLoaderTip[];
+}
+
+/**
+ * A single tip shown in the SpotterViz loading state.
+ * @version SDK: 1.51.0 | ThoughtSpot Cloud: 26.8.0.cl
+ * @group Embed components
+ */
+export interface SpotterVizLoaderTip {
+    /** Short label rendered alongside the tip (e.g. "Tip"). */
+    label: string;
+    /** Tip body text. */
+    text: string;
 }
 
 export function buildSpotterVizAppInitData<T extends DefaultAppInitData>(

package/src/embed/ts-embed.spec.ts

@@ -2479,6 +2479,10 @@ describe('Unit test case for ts embed', () => {
             // The ResizeObserver now tracks the placeholder inside this.el,
             // not this.el itself, so pass it as the target.
             const preRenderPlaceholder = tsEmbedDiv.firstElementChild as HTMLElement;
+            preRenderPlaceholder.getBoundingClientRect = jest.fn().mockReturnValue({
+                x: 0, y: 0, width: 987, height: 297,
+                top: 0, left: 0, bottom: 297, right: 987,
+            });
             resizeObserverCb([
                 {
                     target: preRenderPlaceholder,
@@ -2660,6 +2664,296 @@ describe('Unit test case for ts embed', () => {
             );
             (logger.error as any).mockClear();
         });
+
+        describe('preRenderContainer', () => {
+            it('should append preRenderWrapper to document.body when preRenderContainer is not set', async () => {
+                createRootEleForEmbed();
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'container-default',
+                    liveboardId: 'myLiveboardId',
+                });
+                await libEmbed.preRender();
+
+                const preRenderIds = libEmbed.getPreRenderIds();
+                const preRenderWrapper = document.getElementById(preRenderIds.wrapper);
+                expect(document.body.contains(preRenderWrapper)).toBe(true);
+            });
+
+            it('should append preRenderWrapper to the element matching a CSS selector string', async () => {
+                createRootEleForEmbed();
+                const customContainer = document.createElement('div');
+                customContainer.id = 'custom-pre-render-container';
+                document.body.appendChild(customContainer);
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'container-selector',
+                    liveboardId: 'myLiveboardId',
+                    preRenderContainer: '#custom-pre-render-container',
+                });
+                await libEmbed.preRender();
+
+                const preRenderIds = libEmbed.getPreRenderIds();
+                const preRenderWrapper = document.getElementById(preRenderIds.wrapper);
+                expect(customContainer.contains(preRenderWrapper)).toBe(true);
+
+                customContainer.remove();
+            });
+
+            it('should fall back to document.body when the CSS selector string matches nothing', async () => {
+                createRootEleForEmbed();
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'container-selector-miss',
+                    liveboardId: 'myLiveboardId',
+                    preRenderContainer: '#does-not-exist',
+                });
+                await libEmbed.preRender();
+
+                const preRenderIds = libEmbed.getPreRenderIds();
+                const preRenderWrapper = document.getElementById(preRenderIds.wrapper);
+                expect(document.body.contains(preRenderWrapper)).toBe(true);
+            });
+
+            it('should fall back to document.body and log an error when the CSS selector is invalid', async () => {
+                createRootEleForEmbed();
+                jest.spyOn(logger, 'error').mockImplementation(jest.fn());
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'container-selector-invalid',
+                    liveboardId: 'myLiveboardId',
+                    preRenderContainer: '###invalid###',
+                });
+                await libEmbed.preRender();
+
+                const preRenderIds = libEmbed.getPreRenderIds();
+                const preRenderWrapper = document.getElementById(preRenderIds.wrapper);
+                expect(document.body.contains(preRenderWrapper)).toBe(true);
+                expect(logger.error).toHaveBeenCalledWith(
+                    expect.stringContaining('Invalid CSS selector for preRenderContainer'),
+                    expect.any(Error),
+                );
+                (logger.error as any).mockClear();
+            });
+
+            it('should append preRenderWrapper to an Element passed directly as preRenderContainer', async () => {
+                createRootEleForEmbed();
+                const customContainer = document.createElement('div');
+                customContainer.id = 'custom-pre-render-element';
+                document.body.appendChild(customContainer);
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'container-element',
+                    liveboardId: 'myLiveboardId',
+                    preRenderContainer: customContainer,
+                });
+                await libEmbed.preRender();
+
+                const preRenderIds = libEmbed.getPreRenderIds();
+                const preRenderWrapper = document.getElementById(preRenderIds.wrapper);
+                expect(customContainer.contains(preRenderWrapper)).toBe(true);
+
+                customContainer.remove();
+            });
+
+            it('should set the container position to relative when it is static', async () => {
+                createRootEleForEmbed();
+                const customContainer = document.createElement('div');
+                customContainer.id = 'custom-pre-render-static';
+                customContainer.style.position = 'static';
+                document.body.appendChild(customContainer);
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'container-position-static',
+                    liveboardId: 'myLiveboardId',
+                    preRenderContainer: customContainer,
+                });
+                await libEmbed.preRender();
+
+                expect(customContainer.style.position).toBe('relative');
+
+                customContainer.remove();
+            });
+
+            it('should restore the original container position on destroy', async () => {
+                createRootEleForEmbed();
+                const customContainer = document.createElement('div');
+                customContainer.id = 'custom-pre-render-restore';
+                customContainer.style.position = 'static';
+                document.body.appendChild(customContainer);
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'container-position-restore',
+                    liveboardId: 'myLiveboardId',
+                    preRenderContainer: customContainer,
+                });
+                await libEmbed.preRender();
+                expect(customContainer.style.position).toBe('relative');
+
+                libEmbed.destroy();
+
+                // Reverts to the exact value the container had before.
+                expect(customContainer.style.position).toBe('static');
+                // The container reference is dropped so a destroyed embed does
+                // not pin the (possibly detached) element in memory.
+                expect((libEmbed as any).preRenderContainerEl).toBeNull();
+
+                customContainer.remove();
+            });
+
+            it('should not touch the container position when it is already positioned', async () => {
+                createRootEleForEmbed();
+                const customContainer = document.createElement('div');
+                customContainer.id = 'custom-pre-render-positioned';
+                customContainer.style.position = 'absolute';
+                document.body.appendChild(customContainer);
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'container-position-positioned',
+                    liveboardId: 'myLiveboardId',
+                    preRenderContainer: customContainer,
+                });
+                await libEmbed.preRender();
+                expect(customContainer.style.position).toBe('absolute');
+
+                libEmbed.destroy();
+                expect(customContainer.style.position).toBe('absolute');
+
+                customContainer.remove();
+            });
+
+            it('should keep the container positioned on destroy while another preRender wrapper remains', async () => {
+                createRootEleForEmbed();
+                const customContainer = document.createElement('div');
+                customContainer.id = 'custom-pre-render-shared';
+                customContainer.style.position = 'static';
+                document.body.appendChild(customContainer);
+
+                const firstEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'container-shared-first',
+                    liveboardId: 'myLiveboardId',
+                    preRenderContainer: customContainer,
+                });
+                await firstEmbed.preRender();
+
+                const secondEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'container-shared-second',
+                    liveboardId: 'myLiveboardId',
+                    preRenderContainer: customContainer,
+                });
+                await secondEmbed.preRender();
+
+                expect(customContainer.style.position).toBe('relative');
+
+                // Destroying the first embed must not strip the positioning
+                // context the second embed still relies on.
+                firstEmbed.destroy();
+                expect(customContainer.style.position).toBe('relative');
+
+                // Once the last embed is destroyed, the override is reverted.
+                secondEmbed.destroy();
+                expect(customContainer.style.position).toBe('static');
+
+                customContainer.remove();
+            });
+
+            it('should resolve a selector container inside the host shadow root', async () => {
+                const host = document.createElement('div');
+                document.body.appendChild(host);
+                const shadow = host.attachShadow({ mode: 'open' });
+                const hostEl = document.createElement('div');
+                const shadowContainer = document.createElement('div');
+                shadowContainer.id = 'shadow-pre-render-container';
+                shadow.appendChild(hostEl);
+                shadow.appendChild(shadowContainer);
+
+                const libEmbed = new LiveboardEmbed(hostEl, {
+                    preRenderId: 'container-shadow',
+                    liveboardId: 'myLiveboardId',
+                    preRenderContainer: '#shadow-pre-render-container',
+                });
+                await libEmbed.preRender();
+
+                const preRenderIds = libEmbed.getPreRenderIds();
+                const preRenderWrapper = shadow.querySelector(`#${preRenderIds.wrapper}`);
+                // The wrapper lands in the shadow container, not the body.
+                expect(shadowContainer.contains(preRenderWrapper)).toBe(true);
+                expect(document.getElementById(preRenderIds.wrapper)).toBeNull();
+
+                host.remove();
+            });
+
+            it('should re-attach the wrapper when a selector container is remounted', async () => {
+                createRootEleForEmbed();
+                const oldContainer = document.createElement('div');
+                oldContainer.id = 'remount-container';
+                document.body.appendChild(oldContainer);
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'container-remount',
+                    liveboardId: 'myLiveboardId',
+                    preRenderContainer: '#remount-container',
+                    doNotTrackPreRenderSize: true,
+                });
+                libEmbed.preRender();
+                await waitFor(() => !!getIFrameEl());
+                await libEmbed.showPreRender();
+
+                const preRenderIds = libEmbed.getPreRenderIds();
+                const wrapper = document.getElementById(preRenderIds.wrapper);
+                expect(oldContainer.contains(wrapper)).toBe(true);
+
+                // Simulate React remounting the container: the old node (with
+                // our wrapper) is detached and a fresh node takes its place.
+                const removeSpy = jest.spyOn(oldContainer, 'removeEventListener');
+                oldContainer.remove();
+                const newContainer = document.createElement('div');
+                newContainer.id = 'remount-container';
+                document.body.appendChild(newContainer);
+                const addSpy = jest.spyOn(newContainer, 'addEventListener');
+
+                // A reposition (scroll/resize/re-show) heals the stale ref.
+                libEmbed.syncPreRenderStyle();
+
+                expect(newContainer.contains(wrapper)).toBe(true);
+                expect(oldContainer.contains(wrapper)).toBe(false);
+                // The scroll listener is migrated to the live container.
+                expect(removeSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
+                expect(addSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
+
+                libEmbed.destroy();
+                newContainer.remove();
+            });
+
+            it('should leave an element-passed container untouched when it is detached', async () => {
+                createRootEleForEmbed();
+                const container = document.createElement('div');
+                document.body.appendChild(container);
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'container-element-remount',
+                    liveboardId: 'myLiveboardId',
+                    preRenderContainer: container,
+                    doNotTrackPreRenderSize: true,
+                });
+                libEmbed.preRender();
+                await waitFor(() => !!getIFrameEl());
+                await libEmbed.showPreRender();
+
+                const preRenderIds = libEmbed.getPreRenderIds();
+                const wrapper = document.getElementById(preRenderIds.wrapper);
+                expect(container.contains(wrapper)).toBe(true);
+
+                // Detach the element container; it cannot be re-resolved, so
+                // the wrapper stays with it (no crash, no body fallback).
+                container.remove();
+                libEmbed.syncPreRenderStyle();
+
+                expect(container.contains(wrapper)).toBe(true);
+
+                libEmbed.destroy();
+            });
+        });
     });
 
     describe('IdleSessionTimeout embedEvent for TrustedAuthTokenCookieless authType with autoLogin true', () => {

package/src/embed/ts-embed.ts

@@ -28,6 +28,7 @@ import {
     getCustomisations,
     getRuntimeFilters,
     getDOMNode,
+    querySelectorAcrossShadowRoot,
     getFilterQuery,
     getQueryParamString,
     getRuntimeParameters,
@@ -95,6 +96,14 @@ import {
  */
 export const THOUGHTSPOT_PARAM_PREFIX = 'ts-';
 const TS_EMBED_ID = '_thoughtspot-embed';
+/**
+ * dataset key used to stash a custom preRenderContainer's original inline
+ * `position` while we override it to `relative`. Stored on the container (not
+ * per-instance) so the override can be reverted on destroy even when multiple
+ * pre-rendered embeds share the same container.
+ */
+const PRERENDER_CONTAINER_ORIGINAL_POSITION_KEY = 'tsEmbedOriginalPosition';
+const PRERENDER_WRAPPER_ID_PREFIX = 'tsEmbed-pre-render-wrapper-';
 
 /**
  * The event id map from v2 event names to v1 event id
@@ -197,6 +206,10 @@ export class TsEmbed {
 
     private resizeObserver: ResizeObserver;
 
+    private preRenderContainerEl: HTMLElement | null = null;
+
+    private containerScrollListener: (() => void) | null = null;
+
     protected hostEventClient: HostEventClient;
 
     protected isReadyForRenderPromise;
@@ -1152,6 +1165,91 @@ export class TsEmbed {
         return placeholder;
     }
 
+    /**
+     * Resolves the configured preRenderContainer to a live element, falling
+     * back to `document.body`. A string selector is re-queried on every call so
+     * a remounted container (E.g.: React replacing the node) resolves to the
+     * fresh element; an element passed directly cannot be re-resolved.
+     */
+    private resolvePreRenderContainerTarget(): HTMLElement {
+        const containerConfig = this.viewConfig.preRenderContainer;
+        let container: Element | null = null;
+        if (typeof containerConfig === 'string') {
+            try {
+                // Resolve against the host's shadow root too, so a selector can
+                // target a container inside the same shadow DOM as the embed —
+                // document.querySelector alone cannot pierce shadow boundaries.
+                container = querySelectorAcrossShadowRoot(containerConfig, this.hostElement);
+            } catch (e) {
+                logger.error(`Invalid CSS selector for preRenderContainer: ${containerConfig}`, e);
+            }
+        } else if (containerConfig) {
+            container = containerConfig;
+        }
+        return (container as HTMLElement) ?? document.body;
+    }
+
+    /**
+     * Makes the container a positioning context for the absolutely positioned
+     * wrapper, stashing the original inline `position` on the element (once) so
+     * destroy() can restore it exactly, leaving no trace. Recording it on the
+     * element rather than per-instance lets the override be reverted even when
+     * embeds share the same container.
+     */
+    private applyPreRenderContainerPositioning(container: HTMLElement): void {
+        if (container === document.body) {
+            return;
+        }
+        const pos = window.getComputedStyle(container).position;
+        if (pos === 'static') {
+            if (container.dataset[PRERENDER_CONTAINER_ORIGINAL_POSITION_KEY] === undefined) {
+                container.dataset[
+                    PRERENDER_CONTAINER_ORIGINAL_POSITION_KEY
+                ] = container.style.position;
+            }
+            container.style.position = 'relative';
+        }
+    }
+
+    /**
+     * Re-attaches the wrapper to a live container when the previously resolved
+     * one has been detached or no longer holds the wrapper — e.g. the host app
+     * remounted a custom preRenderContainer, which would otherwise leave a stale
+     * reference and collapse the wrapper. Only string selectors can be
+     * re-resolved; a container passed as an element is left untouched.
+     */
+    private reconcilePreRenderContainer(): void {
+        const wrapper = this.preRenderWrapper;
+        const stored = this.preRenderContainerEl;
+        // Nothing to reconcile until this instance resolved its container.
+        if (!wrapper || !stored) {
+            return;
+        }
+        const storedIsLive = stored === document.body || document.contains(stored);
+        if (storedIsLive && stored.contains(wrapper)) {
+            return;
+        }
+        const resolved = this.resolvePreRenderContainerTarget();
+        // Re-resolution yielded the same (still stale) element — nothing we can
+        // do, e.g. a detached container passed as an HTMLElement.
+        if (resolved === stored && stored.contains(wrapper)) {
+            return;
+        }
+        if (this.containerScrollListener && stored !== resolved) {
+            if (stored !== document.body) {
+                stored.removeEventListener('scroll', this.containerScrollListener);
+            }
+            if (resolved !== document.body) {
+                resolved.addEventListener('scroll', this.containerScrollListener);
+            }
+        }
+        this.applyPreRenderContainerPositioning(resolved);
+        if (wrapper.parentNode !== resolved) {
+            resolved.appendChild(wrapper);
+        }
+        this.preRenderContainerEl = resolved;
+    }
+
     protected insertIntoDOMForPreRender(child: string | Node): void {
         const preRenderChild = this.createPreRenderChild(child);
         const preRenderWrapper = this.createPreRenderWrapper();
@@ -1175,7 +1273,10 @@ export class TsEmbed {
             this.hidePreRender();
         }
 
-        document.body.appendChild(preRenderWrapper);
+        const targetContainer = this.resolvePreRenderContainerTarget();
+        this.preRenderContainerEl = targetContainer;
+        this.applyPreRenderContainerPositioning(targetContainer);
+        targetContainer.appendChild(preRenderWrapper);
     }
 
     private showPreRenderByDefault = false;
@@ -1735,6 +1836,55 @@ export class TsEmbed {
         return tsParams;
     }
 
+    /**
+     * Reverts the custom preRenderContainer's `position` to the value it had
+     * before we overrode it to `relative` (see insertIntoDOMForPreRender).
+     *
+     * We restore the original inline value rather than forcing `static`, and we
+     * skip the restore if another preRender wrapper is still mounted inside the
+     * same container — a shared container still needs the positioning context.
+     */
+    private restorePreRenderContainerPosition(): void {
+        const container = this.preRenderContainerEl as HTMLElement | null;
+        if (!container || container === document.body) {
+            return;
+        }
+        // Drop our reference up front so a destroyed embed never pins a
+        // detached container in memory; restoration uses the local handle.
+        this.preRenderContainerEl = null;
+        const originalPosition = container.dataset[PRERENDER_CONTAINER_ORIGINAL_POSITION_KEY];
+        if (originalPosition === undefined) {
+            // We never overrode this container's position; nothing to restore.
+            return;
+        }
+        // This instance's own wrapper has already been removed by now, so any
+        // match here belongs to another embed still sharing the container — it
+        // continues to rely on the positioning context, so leave it in place.
+        const hasOtherWrapper = container.querySelector(
+            `[id^="${PRERENDER_WRAPPER_ID_PREFIX}"]`,
+        );
+        if (hasOtherWrapper) {
+            return;
+        }
+        container.style.position = originalPosition;
+        delete container.dataset[PRERENDER_CONTAINER_ORIGINAL_POSITION_KEY];
+    }
+
+    /**
+     * Detaches and clears the container scroll listener, if one is attached.
+     */
+    private removeContainerScrollListener(): void {
+        if (!this.containerScrollListener) {
+            return;
+        }
+        const customContainer = 
+            this.preRenderContainerEl && this.preRenderContainerEl !== document.body
+                ? this.preRenderContainerEl
+                : null;
+        customContainer?.removeEventListener('scroll', this.containerScrollListener);
+        this.containerScrollListener = null;
+    }
+
     /**
      * Destroys the ThoughtSpot embed, and remove any nodes from the DOM.
      * @version SDK: 1.19.1 | ThoughtSpot: *
@@ -1742,8 +1892,10 @@ export class TsEmbed {
     public destroy(): void {
         try {
             this.removeFullscreenChangeHandler();
+            this.removeContainerScrollListener();
             this.unsubscribeToEvents();
             this.preRenderWrapper?.remove();
+            this.restorePreRenderContainerPosition();
             if (!this.isRendered) {
                 return;
             }
@@ -1856,15 +2008,21 @@ export class TsEmbed {
 
             this.syncPreRenderStyle();
 
+            const customContainer =
+                this.preRenderContainerEl && this.preRenderContainerEl !== document.body
+                    ? this.preRenderContainerEl
+                    : null;
+            if (customContainer && !this.containerScrollListener) {
+                this.containerScrollListener = () => this.syncPreRenderStyle();
+                customContainer.addEventListener('scroll', this.containerScrollListener);
+            }
+
             if (!this.viewConfig.doNotTrackPreRenderSize) {
                 const observeTarget = (this.insertedDomEl as HTMLElement) ?? this.hostElement;
                 this.resizeObserver = new ResizeObserver((entries) => {
                     entries.forEach((entry) => {
-                        if (entry.contentRect && entry.target === observeTarget) {
-                            setStyleProperties(this.preRenderWrapper, {
-                                width: `${entry.contentRect.width}px`,
-                                height: `${entry.contentRect.height}px`,
-                            });
+                        if (entry.target === observeTarget) {
+                            this.syncPreRenderStyle();
                         }
                     });
                 });
@@ -1905,11 +2063,22 @@ export class TsEmbed {
             logger.error(ERROR_MESSAGE.SYNC_STYLE_CALLED_BEFORE_RENDER);
             return;
         }
+        // Self-heal if the resolved container was remounted/detached, so we
+        // never measure a stale node (which would collapse the wrapper).
+        this.reconcilePreRenderContainer();
         const elBoundingClient = this.getPreRenderPlaceHolderElement().getBoundingClientRect();
 
+        const containerEl =
+            this.preRenderContainerEl && this.preRenderContainerEl !== document.body
+                ? this.preRenderContainerEl
+                : null;
+        const containerRect = containerEl?.getBoundingClientRect() ?? { x: 0, y: 0 };
+        const scrollX = containerEl ? containerEl.scrollLeft : window.scrollX;
+        const scrollY = containerEl ? containerEl.scrollTop : window.scrollY;
+
         setStyleProperties(this.preRenderWrapper, {
-            top: `${elBoundingClient.y + window.scrollY}px`,
-            left: `${elBoundingClient.x + window.scrollX}px`,
+            top: `${elBoundingClient.y - containerRect.y + scrollY}px`,
+            left: `${elBoundingClient.x - containerRect.x + scrollX}px`,
             width: `${elBoundingClient.width}px`,
             height: `${elBoundingClient.height}px`,
             position: 'absolute',
@@ -1938,6 +2107,8 @@ export class TsEmbed {
         };
         setStyleProperties(this.preRenderWrapper, preRenderHideStyles);
 
+        this.removeContainerScrollListener();
+
         if (this.resizeObserver) {
             this.resizeObserver.disconnect();
         }
@@ -1959,7 +2130,7 @@ export class TsEmbed {
      */
     public getPreRenderIds() {
         return {
-            wrapper: `tsEmbed-pre-render-wrapper-${this.viewConfig.preRenderId}`,
+            wrapper: `${PRERENDER_WRAPPER_ID_PREFIX}${this.viewConfig.preRenderId}`,
             child: `tsEmbed-pre-render-child-${this.viewConfig.preRenderId}`,
             placeHolder: `tsEmbed-pre-render-placeholder-${this.viewConfig.preRenderId}`,
         };

package/src/index.ts

@@ -33,7 +33,7 @@ import { SearchEmbed, SearchViewConfig } from './embed/search';
 import { SearchBarEmbed, SearchBarViewConfig } from './embed/search-bar';
 import { SpotterAgentEmbed, SpotterAgentEmbedViewConfig, BodylessConversation, BodylessConversationViewConfig} from './embed/bodyless-conversation';
 import { SpotterEmbed, SpotterEmbedViewConfig, SpotterChatViewConfig, SpotterSidebarViewConfig, ConversationEmbed, ConversationViewConfig } from './embed/conversation';
-import { SpotterVizConfig, SpotterVizStarterPrompt } from './embed/spotter-viz-utils';
+import { SpotterVizConfig, SpotterVizStarterPrompt, SpotterVizLoaderTip } from './embed/spotter-viz-utils';
 import {
     AuthFailureType, AuthStatus, AuthEvent, AuthEventEmitter,
 } from './auth';
@@ -143,6 +143,7 @@ export {
     LiveboardViewConfig,
     SpotterVizConfig,
     SpotterVizStarterPrompt,
+    SpotterVizLoaderTip,
     AppViewConfig,
     PrefetchFeatures,
     FrameParams,