@thoughtspot/visual-embed-sdk 1.48.0 → 1.49.0

package/src/embed/app.ts

@@ -9,7 +9,7 @@
  */
 
 import { logger } from '../utils/logger';
-import { calculateVisibleElementData, getQueryParamString, isUndefined, isValidCssMargin, setParamIfDefined } from '../utils';
+import { calculateVisibleElementData, getEffectiveClippingAncestors, getQueryParamString, getScrollableAncestors, isUndefined, isValidCssMargin, setParamIfDefined } from '../utils';
 import {
     Param,
     DOMSelector,
@@ -19,10 +19,12 @@ import {
     AllEmbedViewConfig,
     DefaultAppInitData,
     VisualizationOverrides,
+    SpotterFileUploadFileTypes,
 } from '../types';
 import { V1Embed } from './ts-embed';
 import { SpotterChatViewConfig, SpotterSidebarViewConfig } from './conversation';
 import { buildSpotterSidebarAppInitData } from './spotter-utils';
+import { SpotterVizConfig, buildSpotterVizAppInitData } from './spotter-viz-utils';
 
 /**
  * Pages within the ThoughtSpot app that can be embedded.
@@ -116,6 +118,14 @@ export enum HomePage {
      * with styling changes.
      */
     ModularWithStylingChanges = 'v3',
+    /**
+     * Focused (v4) introduces the V4 homepage experience
+     * in which Watchlist and recents and incorporated together 
+     * to form a more focused homepage.
+     * Pre-requisite : spotter enablement
+     * @version SDK: 1.50.0 | ThoughtSpot Cloud: 26.7.0.cl
+     */
+    Focused = 'v4',
 }
 
 /**
@@ -551,6 +561,22 @@ export interface AppViewConfig extends AllEmbedViewConfig {
      */
     isUnifiedSearchExperienceEnabled?: boolean;
 
+    /**
+     * This flag is used to enable the new connection experience for AppEmbed.
+     *
+     * Supported embed types: `AppEmbed`
+     * @version SDK: 1.51.0 | ThoughtSpot Cloud: 26.8.0.cl
+     * @default false
+     * @example
+     * ```js
+     * const embed = new AppEmbed('#tsEmbed', {
+     *    ... // other embed view config
+     *    newConnectionsExperience: true,
+     * })
+     * ```
+     */
+    newConnectionsExperience?: boolean;
+
     /**
      * This flag is used to enable/disable the styling and grouping in a Liveboard. Use {@link isLiveboardMasterpiecesEnabled} instead.
      * @deprecated This flag is deprecated.
@@ -656,6 +682,17 @@ export interface AppViewConfig extends AllEmbedViewConfig {
      * ```
      */
     lazyLoadingForFullHeight?: boolean;
+    /**
+     * This flag is used to enable container-aware full height lazy loading.
+     *
+     * Use this when the embed is rendered inside a scrollable or clipping
+     * container instead of relying on the browser window as the only viewport.
+     *
+     * @type {boolean}
+     * @default false
+     * @hidden
+     */
+    enableScrollableContainerLazyLoading?: boolean;
 
     /**
      * The margin to be used for lazy loading.
@@ -744,6 +781,29 @@ export interface AppViewConfig extends AllEmbedViewConfig {
      * ```
      */
     spotterChatConfig?: SpotterChatViewConfig;
+    /**
+     * Configuration for the SpotterViz interface shown on the Liveboard.
+     * Customize the brand name, description, chat input placeholder,
+     * starter prompts, and visibility of starter prompts in the SpotterViz panel.
+     *
+     * Supported embed types: `AppEmbed`, `LiveboardEmbed`
+     * @version SDK: 1.50.0 | ThoughtSpot Cloud: 26.7.0.cl
+     * @example
+     * ```js
+     * const embed = new AppEmbed('#embed-container', {
+     *    ... // other options
+     *    spotterViz: {
+     *        brandName: 'MyBrand',
+     *        brandHeadline: 'Hi, there! I\'m',
+     *        description: 'Ask questions about your data',
+     *        inputChatPlaceholder: 'Ask a question...',
+     *        hideStarterPrompts: false,
+     *        customStarterPrompts: [{ id: '1', displayText: 'Top products', fullPrompt: 'What are the top products by revenue?' }]
+     *    },
+     * })
+     * ```
+     */
+    spotterViz?: SpotterVizConfig;
     /**
      * Enables the stop answer generation button in the Spotter embed UI,
      * allowing users to interrupt an ongoing answer generation.
@@ -814,6 +874,7 @@ export interface AppViewConfig extends AllEmbedViewConfig {
 export interface AppEmbedAppInitData extends DefaultAppInitData {
     embedParams?: {
         spotterSidebarConfig?: SpotterSidebarViewConfig;
+        spotterVizConfig?: SpotterVizConfig;
     };
 }
 
@@ -826,6 +887,10 @@ export class AppEmbed extends V1Embed {
 
     private defaultHeight = 500;
 
+    private lazyLoadScrollContainers: HTMLElement[] = [];
+
+    private lazyLoadResizeObserver: ResizeObserver | undefined;
+
     constructor(domSelector: DOMSelector, viewConfig: AppViewConfig) {
         viewConfig.embedComponentType = 'AppEmbed';
         super(domSelector, viewConfig);
@@ -854,7 +919,12 @@ export class AppEmbed extends V1Embed {
      */
     protected async getAppInitData(): Promise<AppEmbedAppInitData> {
         const defaultAppInitData = await super.getAppInitData();
-        return buildSpotterSidebarAppInitData(defaultAppInitData, this.viewConfig, this.handleError.bind(this));
+        const sidebarInitData = buildSpotterSidebarAppInitData(
+            defaultAppInitData,
+            this.viewConfig,
+            this.handleError.bind(this),
+        );
+        return buildSpotterVizAppInitData(sidebarInitData, this.viewConfig);
     }
 
     /**
@@ -875,6 +945,7 @@ export class AppEmbed extends V1Embed {
             hideApplicationSwitcher,
             hideOrgSwitcher,
             enableSearchAssist,
+            newConnectionsExperience,
             fullHeight,
             dataPanelV2 = true,
             hideLiveboardHeader = false,
@@ -957,10 +1028,18 @@ export class AppEmbed extends V1Embed {
             const {
                 hideToolResponseCardBranding,
                 toolResponseCardBrandingLabel,
+                spotterFileUploadEnabled,
+                spotterFileUploadFileTypes,
             } = spotterChatConfig;
 
             setParamIfDefined(params, Param.HideToolResponseCardBranding, hideToolResponseCardBranding, true);
             setParamIfDefined(params, Param.ToolResponseCardBrandingLabel, toolResponseCardBrandingLabel);
+            if (spotterFileUploadEnabled !== undefined) {
+                params[Param.SpotterFileUploadEnabled] = spotterFileUploadEnabled;
+            }
+            if (spotterFileUploadFileTypes !== undefined) {
+                params[Param.SpotterFileUploadFileTypes] = JSON.stringify(spotterFileUploadFileTypes);
+            }
         }
 
         if (hideObjectSearch) {
@@ -999,6 +1078,10 @@ export class AppEmbed extends V1Embed {
             params[Param.EnableSearchAssist] = enableSearchAssist;
         }
 
+        if (newConnectionsExperience !== undefined) {
+            params[Param.EnableConnectionNewExperience] = newConnectionsExperience;
+        }
+
         if (enable2ColumnLayout !== undefined) {
             params[Param.Enable2ColumnLayout] = enable2ColumnLayout;
         }
@@ -1122,6 +1205,10 @@ export class AppEmbed extends V1Embed {
             if (discoveryExperience.listPageVersion !== undefined) {
                 params[Param.ListPageVersion] = discoveryExperience.listPageVersion;
             }
+
+            if (discoveryExperience.homePage === HomePage.Focused) {
+                params[Param.HomepageVersion] = HomePage.Focused;
+            }
         }
 
         const queryParams = getQueryParamString(params, true);
@@ -1130,7 +1217,10 @@ export class AppEmbed extends V1Embed {
     }
 
     private sendFullHeightLazyLoadData = () => {
-        const data = calculateVisibleElementData(this.iFrame);
+        const data = calculateVisibleElementData(
+            this.iFrame,
+            this.viewConfig.enableScrollableContainerLazyLoading,
+        );
         // this should be fired only if the lazyLoadingForFullHeight and fullHeight are true
         if(this.viewConfig.lazyLoadingForFullHeight && this.viewConfig.fullHeight){
             this.trigger(HostEvent.VisibleEmbedCoordinates, data);
@@ -1145,7 +1235,10 @@ export class AppEmbed extends V1Embed {
      */
     private requestVisibleEmbedCoordinatesHandler = (data: MessagePayload, responder: any) => {
         logger.info('Sending RequestVisibleEmbedCoordinates', data);
-        const visibleCoordinatesData = calculateVisibleElementData(this.iFrame);
+        const visibleCoordinatesData = calculateVisibleElementData(
+            this.iFrame,
+            this.viewConfig.enableScrollableContainerLazyLoading,
+        );
         responder({ type: EmbedEvent.RequestVisibleEmbedCoordinates, data: visibleCoordinatesData });
     }
 
@@ -1294,17 +1387,44 @@ export class AppEmbed extends V1Embed {
     }
 
     private registerLazyLoadEvents() {
+        if (!this.iFrame) {
+            return;
+        }
         if (this.viewConfig.fullHeight && this.viewConfig.lazyLoadingForFullHeight) {
+            this.unregisterLazyLoadEvents();
             // TODO: Use passive: true, install modernizr to check for passive
             window.addEventListener('resize', this.sendFullHeightLazyLoadData);
             window.addEventListener('scroll', this.sendFullHeightLazyLoadData, true);
+            if (!this.viewConfig.enableScrollableContainerLazyLoading) {
+                return;
+            }
+            this.lazyLoadScrollContainers = getScrollableAncestors(this.iFrame);
+            this.lazyLoadScrollContainers.forEach((scrollContainer) => {
+                scrollContainer.addEventListener('scroll', this.sendFullHeightLazyLoadData);
+            });
+            if (typeof ResizeObserver !== 'undefined') {
+                const resizeTargets = new Set([
+                    this.iFrame.parentElement,
+                    ...getEffectiveClippingAncestors(this.iFrame),
+                ].filter(Boolean) as HTMLElement[]);
+                this.lazyLoadResizeObserver = new ResizeObserver(this.sendFullHeightLazyLoadData);
+                resizeTargets.forEach((resizeTarget) => {
+                    this.lazyLoadResizeObserver.observe(resizeTarget);
+                });
+            }
         }
     }
 
     private unregisterLazyLoadEvents() {
         if (this.viewConfig.fullHeight && this.viewConfig.lazyLoadingForFullHeight) {
             window.removeEventListener('resize', this.sendFullHeightLazyLoadData);
-            window.removeEventListener('scroll', this.sendFullHeightLazyLoadData);
+            window.removeEventListener('scroll', this.sendFullHeightLazyLoadData, true);
+            this.lazyLoadResizeObserver?.disconnect();
+            this.lazyLoadResizeObserver = undefined;
+            this.lazyLoadScrollContainers.forEach((scrollContainer) => {
+                scrollContainer.removeEventListener('scroll', this.sendFullHeightLazyLoadData);
+            });
+            this.lazyLoadScrollContainers = [];
         }
     }