@thoughtspot/visual-embed-sdk 1.39.2-alpha.1 → 1.39.2-alpha.2

package/src/react/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useRef } from 'react';
+import React, { useRef, useCallback } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { AuthEventEmitter } from '../auth';
 import { deepMerge } from '../utils';
@@ -10,12 +10,13 @@ import { SearchEmbed as _SearchEmbed, SearchViewConfig } from '../embed/search';
 import { AppEmbed as _AppEmbed, AppViewConfig } from '../embed/app';
 import { LiveboardEmbed as _LiveboardEmbed, LiveboardViewConfig } from '../embed/liveboard';
 import { TsEmbed } from '../embed/ts-embed';
-import { SpotterAgentEmbed as _SpotterAgentEmbed, SpotterAgentEmbedViewConfig } from '../embed/bodyless-conversation';
+import { SpotterAgentEmbed as _SpotterAgentEmbed, SpotterAgentEmbedViewConfig, ConversationMessage as _ConversationMessage, SpotterAgentMessageViewConfig } from '../embed/bodyless-conversation';
 
 import { EmbedConfig, EmbedEvent, AllEmbedViewConfig } from '../types';
 import { EmbedProps, getViewPropsAndListeners } from './util';
 import { SpotterEmbed as _SpotterEmbed, SpotterEmbedViewConfig, ConversationEmbed as _ConversationEmbed, ConversationViewConfig } from '../embed/conversation';
 import { init } from '../embed/base';
+import { ERROR_MESSAGE } from '../errors';
 
 const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V extends AllEmbedViewConfig>(
     EmbedConstructor: T,
@@ -383,62 +384,61 @@ export const ConversationEmbed = componentFactory<
     ConversationViewConfig
 >(_ConversationEmbed);
 
-interface SpotterAgentEmbedProps extends EmbedProps, SpotterAgentEmbedViewConfig {}
+/**
+ * React component for individual conversation messages from SpotterAgent.
+ * This component is used internally by the useSpotterAgent hook.
+ * @version SDK: 1.37.0 | ThoughtSpot: 10.9.0.cl
+ */
+interface ConversationMessageProps extends EmbedProps, SpotterAgentMessageViewConfig {}
+
+export const ConversationMessage = componentFactory<
+    typeof _ConversationMessage,
+    ConversationMessageProps,
+    SpotterAgentMessageViewConfig
+>(_ConversationMessage);
+
+type SpotterMessageProps = {
+    message: SpotterAgentMessageViewConfig;
+    query?: string;
+  } & Omit<EmbedProps, keyof SpotterAgentMessageViewConfig>;
 
 /**
- * React component for SpotterAgent embed, which can be integrated inside
- * chatbots or other conversational interfaces.
+ * React component for displaying individual conversation messages from SpotterAgent.
+ * 
+ * This component renders a single message response from your ThoughtSpot conversation,
+ * showing charts, visualizations, or text responses based on the user's query.
+ * 
  * @example
  * ```tsx
- * function SpotterAgent() {
- *  const ref = useRef();
- *  
- *  const handleSendMessage = async () => {
- *    const { container, error } = await ref.current.sendMessage('show me sales by region');
- *    if (container) {
- *      document.body.appendChild(container);
- *    }
- *  };
- *  
- *  return (
- *    <div>
- *      <SpotterAgentEmbed ref={ref} worksheetId="worksheetId" />
- *      <button onClick={handleSendMessage}>Send Message</button>
- *    </div>
- *  );
+ * const { sendMessage } = useSpotterAgent({ worksheetId: 'worksheetId' });
+ * const result = await sendMessage('show me sales by region');
+ * 
+ * if (!result.error) {
+ *   // Simple usage - just pass the message data
+ *   <SpotterMessage message={result.message} />
+ *   
+ *   // With optional query for context
+ *   <SpotterMessage 
+ *     message={result.message} 
+ *     query={result.query} 
+ *   />
  * }
  * ```
+ * @version SDK: 1.39.0 | ThoughtSpot: 10.11.0.cl
  */
-export const SpotterAgentEmbed = React.forwardRef<_SpotterAgentEmbed, SpotterAgentEmbedProps>((props, ref) => {
-  const { className, ...restProps } = props;
-  const serviceRef = useRef<_SpotterAgentEmbed | null>(null);
-  
-  useDeepCompareEffect(() => {
-    if (serviceRef.current) {
-      serviceRef.current = null;
-    }
-    
-    const configProps = {
-      ...restProps,
-      ...(className ? { containerClassName: className } : {})
-    };
-    
-    serviceRef.current = new _SpotterAgentEmbed(configProps);
+export const SpotterMessage = React.forwardRef<
+    React.ComponentRef<typeof ConversationMessage>,
+    SpotterMessageProps
+>((props, ref) => {
+    const { message, query: _, ...otherProps } = props;
     
-    if (ref) {
-      if (typeof ref === 'function') {
-        ref(serviceRef.current);
-      } else {
-        ref.current = serviceRef.current;
-      }
-    }
-    
-    return () => {
-      serviceRef.current = null;
-    };
-  }, [props]);
-  
-  return null;
+    return (
+        <ConversationMessage
+            ref={ref}
+            {...message}
+            {...otherProps}
+        />
+    );
 });
 
 /**
@@ -470,7 +470,8 @@ type EmbedComponent = typeof SearchEmbed
     | typeof LiveboardEmbed
     | typeof SearchBarEmbed
     | typeof SageEmbed
-    | typeof SpotterAgentEmbed
+    | typeof ConversationMessage
+    | typeof SpotterMessage
     | typeof SpotterEmbed
     | typeof ConversationEmbed;
 
@@ -518,6 +519,71 @@ export function useInit(config: EmbedConfig) {
     return ref;
 }
 
+/**
+ * React hook for interacting with SpotterAgent AI conversations.
+ * 
+ * This hook provides a sendMessage function that allows you to send natural language
+ * queries to your data and get back AI-generated responses with visualizations.
+ * 
+ * @param config - Configuration object containing worksheetId and other options
+ * @returns Object with sendMessage function that returns conversation results
+ * @example
+ * ```tsx
+ * const { sendMessage } = useSpotterAgent({ worksheetId: 'worksheetId' });
+ * 
+ * const handleQuery = async () => {
+ *   const result = await sendMessage('show me sales by region');
+ *   
+ *   if (!result.error) {
+ *     // Display the message response
+ *     <SpotterMessage message={result.message} />
+ *   } else {
+ *     console.error('Error:', result.error);
+ *   }
+ * };
+ * ```
+ * @version SDK: 1.39.0 | ThoughtSpot: 10.11.0.cl
+ */
+export function useSpotterAgent(config: SpotterAgentEmbedViewConfig) {
+    const serviceRef = useRef<_SpotterAgentEmbed | null>(null);
+    
+    useDeepCompareEffect(() => {
+        if (serviceRef.current) {
+            serviceRef.current = null;
+        }
+        
+        serviceRef.current = new _SpotterAgentEmbed(config);
+        
+        return () => {
+            serviceRef.current = null;
+        };
+    }, [config]);
+
+    const sendMessage = useCallback(async (query: string) => {
+        if (!serviceRef.current) {
+            return { error: new Error(ERROR_MESSAGE.SPOTTER_AGENT_NOT_INITIALIZED) };
+        }
+
+        const result = await serviceRef.current.sendMessageData(query);
+
+        if (result.error) {
+            return { error: result.error };
+        }
+
+        return {
+            query: query,
+            message: {
+                ...result.data,
+                worksheetId: config.worksheetId,
+            },
+        };
+    }, [config.worksheetId]);
+
+    return {
+        sendMessage,
+    };
+}
+
 export {
     LiveboardViewConfig,
     SearchViewConfig,

package/src/types.ts

@@ -217,6 +217,12 @@ export enum HomeLeftNavItem {
      * @version SDK: 1.40.0 | ThoughtSpot: 10.11.0.cl
      */
     Spotter = 'spotter',
+    /**
+     * Favorites option in the insights left navigation,
+     * available when new navigation V3 is enabled.
+     * @version SDK: 1.41.0 | ThoughtSpot: 10.12.0.cl
+     */
+    Favorites = 'favorites',
 }
 export type DOMSelector = string | HTMLElement;
 
@@ -1010,6 +1016,20 @@ export interface BaseViewConfig {
      * @private
      */
     insertInToSlide?: boolean;
+    /**
+     * Show alert messages and toast messages in the embed.
+     * Supported embed in all embed types.
+     * 
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl, 8.4.1.sw
+     * @example
+     * ```js
+     * const embed = new AppEmbed('#tsEmbed', {
+     *    ... // other embed view config
+     *    showAlerts:true,
+     * })
+     * ```
+     */
+    showAlerts?: boolean;
 }
 
 /**
@@ -2687,6 +2707,12 @@ export enum EmbedEvent {
      * @version SDK : 1.40.0 | ThoughtSpot: 10.11.0.cl
      */
     ExitPresentMode = 'exitPresentMode',
+    /**
+     * Emitted when a user requests the full height lazy load data.
+     * @version SDK : 1.39.0 | ThoughtSpot : 10.10.0.cl
+     * @hidden
+     */
+    RequestVisibleEmbedCoordinates = 'requestVisibleEmbedCoordinates',
 }
 
 /**
@@ -3771,6 +3797,19 @@ export enum HostEvent {
      * @version SDK: 1.40.0 | ThoughtSpot: 10.11.0.cl
      */
     ExitPresentMode = 'exitPresentMode',
+    /**
+     * Triggers the full height lazy load data.
+     * @example
+     * ```js
+     * liveboardEmbed.on(EmbedEvent.RequestVisibleEmbedCoordinates, (payload) => {
+     *      console.log(payload);
+     * });
+     * ```
+     * @version SDK: 1.39.0 | ThoughtSpot: 10.10.0.cl
+     *
+     * @hidden
+     */
+    VisibleEmbedCoordinates = 'visibleEmbedCoordinates',
 }
 
 /**
@@ -3876,6 +3915,7 @@ export enum Param {
     Query = 'query',
     HideHomepageLeftNav = 'hideHomepageLeftNav',
     ModularHomeExperienceEnabled = 'modularHomeExperience',
+    ListPageVersion = 'listpageVersion',
     PendoTrackingKey = 'additionalPendoKey',
     LiveboardHeaderSticky = 'isLiveboardHeaderSticky',
     IsProductTour = 'isProductTour',
@@ -3914,6 +3954,8 @@ export enum Param {
     PrimaryAction = 'primaryAction',
     isSpotterAgentEmbed = 'isSpotterAgentEmbed',
     IsLiveboardStylingAndGroupingEnabled = 'isLiveboardStylingAndGroupingEnabled',
+    IsLazyLoadingForEmbedEnabled = 'isLazyLoadingForEmbedEnabled',
+    RootMarginForLazyLoad = 'rootMarginForLazyLoad'
 }
 
 /**

package/src/utils/graphql/nlsService/conversation-service.ts

@@ -64,6 +64,8 @@ export class Conversation {
             );
             const data = responses[0].data;
             return {
+                convId: this.conversationId,
+                messageId: responses[0].msgId,
                 data: data.asstRespData.nlsAnsData.sageQuerySuggestions[0],
                 error: null,
             };

package/src/utils/processTrigger.ts

@@ -31,7 +31,7 @@ function postIframeMessage(
     thoughtSpotHost: string,
     channel?: MessageChannel,
 ) {
-    return iFrame.contentWindow.postMessage(message, thoughtSpotHost, [channel?.port2]);
+    return iFrame.contentWindow?.postMessage(message, thoughtSpotHost, [channel?.port2]);
 }
 
 export const TRIGGER_TIMEOUT = 30000;

package/src/utils.spec.ts

@@ -15,6 +15,8 @@ import {
     getValueFromWindow,
     handlePresentEvent,
     handleExitPresentMode,
+    getTypeFromValue,
+    calculateVisibleElementData,
 } from './utils';
 import { RuntimeFilterOp } from './types';
 import { logger } from './utils/logger';
@@ -284,6 +286,27 @@ describe('unit test for utils', () => {
     test('isUndefined', () => {
         expect(isUndefined(undefined)).toBe(true);
         expect(isUndefined({})).toBe(false);
+        expect(isUndefined(null)).toBe(false);
+        expect(isUndefined('')).toBe(false);
+        expect(isUndefined(0)).toBe(false);
+    });
+
+    test('removeTypename should handle edge cases', () => {
+        expect(removeTypename(null)).toBe(null);
+        expect(removeTypename(undefined)).toBe(undefined);
+        expect(removeTypename('string')).toBe('string');
+        expect(removeTypename(123)).toBe(123);
+    });
+
+    test('getTypeFromValue should return correct types', () => {
+        expect(getTypeFromValue('test')).toEqual(['char', 'string']);
+        expect(getTypeFromValue(123)).toEqual(['double', 'double']);
+        expect(getTypeFromValue(true)).toEqual(['boolean', 'boolean']);
+        expect(getTypeFromValue(false)).toEqual(['boolean', 'boolean']);
+        expect(getTypeFromValue(null)).toEqual(['', '']);
+        expect(getTypeFromValue(undefined)).toEqual(['', '']);
+        expect(getTypeFromValue({})).toEqual(['', '']);
+        expect(getTypeFromValue([])).toEqual(['', '']);
     });
 
     describe('getValueFromWindow and storeValueInWindow', () => {
@@ -293,7 +316,7 @@ describe('unit test for utils', () => {
         });
 
         test('Object should be set if not', () => {
-            // eslint-disable-next-line no-underscore-dangle
+
             (window as any)._tsEmbedSDK = null;
 
             storeValueInWindow('test', 'testValue');
@@ -303,6 +326,13 @@ describe('unit test for utils', () => {
         test('Return undefined if key is not found', () => {
             expect(getValueFromWindow('notFound')).toBe(undefined);
         });
+
+        test('Store with ignoreIfAlreadyExists option', () => {
+            storeValueInWindow('test2', 'firstValue');
+            const result = storeValueInWindow('test2', 'secondValue', { ignoreIfAlreadyExists: true });
+            expect(result).toBe('firstValue');
+            expect(getValueFromWindow('test2')).toBe('firstValue');
+        });
     });
 });
 
@@ -312,7 +342,7 @@ describe('Fullscreen Utility Functions', () => {
 
     beforeEach(() => {
         jest.clearAllMocks();
-        
+
         // Store and mock exitFullscreen
         originalExitFullscreen = document.exitFullscreen;
         document.exitFullscreen = jest.fn();
@@ -407,3 +437,250 @@ describe('Fullscreen Utility Functions', () => {
         });
     });
 });
+
+describe('calculateVisibleElementData', () => {
+    let mockElement: HTMLElement;
+    let originalInnerHeight: number;
+    let originalInnerWidth: number;
+
+    beforeEach(() => {
+        // Store original window dimensions
+        originalInnerHeight = window.innerHeight;
+        originalInnerWidth = window.innerWidth;
+
+        // Mock window dimensions
+        Object.defineProperty(window, 'innerHeight', {
+            writable: true,
+            configurable: true,
+            value: 800,
+        });
+        Object.defineProperty(window, 'innerWidth', {
+            writable: true,
+            configurable: true,
+            value: 1200,
+        });
+
+        // Create mock element
+        mockElement = document.createElement('div');
+    });
+
+    afterEach(() => {
+        // Restore original window dimensions
+        Object.defineProperty(window, 'innerHeight', {
+            value: originalInnerHeight,
+        });
+        Object.defineProperty(window, 'innerWidth', {
+            value: originalInnerWidth,
+        });
+    });
+
+    it('should calculate data for fully visible element', () => {
+        // Mock getBoundingClientRect for element fully within viewport
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: 100,
+            left: 150,
+            bottom: 300,
+            right: 400,
+            width: 250,
+            height: 200,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement);
+
+        expect(result).toEqual({
+            top: 0, // Not clipped from top
+            height: 200, // Full height visible
+            left: 0, // Not clipped from left
+            width: 250, // Full width visible
+        });
+    });
+
+    it('should calculate data for element clipped from top', () => {
+        // Mock getBoundingClientRect for element partially above viewport
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: -50,
+            left: 100,
+            bottom: 150,
+            right: 400,
+            width: 300,
+            height: 200,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement);
+
+        expect(result).toEqual({
+            top: 50, // Clipped 50px from top
+            height: 150, // 150px visible height (0 to 150)
+            left: 0, // Not clipped from left
+            width: 300, // Full width visible
+        });
+    });
+
+    it('should calculate data for element clipped from left', () => {
+        // Mock getBoundingClientRect for element partially left of viewport
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: 100,
+            left: -80,
+            bottom: 300,
+            right: 200,
+            width: 280,
+            height: 200,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement);
+
+        expect(result).toEqual({
+            top: 0, // Not clipped from top
+            height: 200, // Full height visible
+            left: 80, // Clipped 80px from left
+            width: 200, // 200px visible width (0 to 200)
+        });
+    });
+
+    it('should calculate data for element clipped from bottom', () => {
+        // Mock getBoundingClientRect for element extending below viewport
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: 600,
+            left: 100,
+            bottom: 950, // Extends beyond window height of 800
+            right: 400,
+            width: 300,
+            height: 350,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement);
+
+        expect(result).toEqual({
+            top: 0, // Not clipped from top
+            height: 200, // Only 200px visible (600 to 800)
+            left: 0, // Not clipped from left
+            width: 300, // Full width visible
+        });
+    });
+
+    it('should calculate data for element clipped from right', () => {
+        // Mock getBoundingClientRect for element extending beyond right edge
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: 100,
+            left: 1000,
+            bottom: 300,
+            right: 1400, // Extends beyond window width of 1200
+            width: 400,
+            height: 200,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement);
+
+        expect(result).toEqual({
+            top: 0, // Not clipped from top
+            height: 200, // Full height visible
+            left: 0, // Not clipped from left
+            width: 200, // Only 200px visible width (1000 to 1200)
+        });
+    });
+
+    it('should calculate data for element clipped from multiple sides', () => {
+        // Mock getBoundingClientRect for element clipped from top and left
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: -100,
+            left: -50,
+            bottom: 200,
+            right: 300,
+            width: 350,
+            height: 300,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement);
+
+        expect(result).toEqual({
+            top: 100, // Clipped 100px from top
+            height: 200, // 200px visible height (0 to 200)
+            left: 50, // Clipped 50px from left
+            width: 300, // 300px visible width (0 to 300)
+        });
+    });
+
+    it('should handle element completely outside viewport (above)', () => {
+        // Mock getBoundingClientRect for element completely above viewport
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: -300,
+            left: 100,
+            bottom: -100,
+            right: 400,
+            width: 300,
+            height: 200,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement);
+
+        expect(result).toEqual({
+            top: 300, // Clipped 300px from top
+            height: 0, // No visible height (clamped from negative)
+            left: 0, // Not clipped from left
+            width: 300, // Full width would be visible if in viewport
+        });
+    });
+
+    it('should handle element completely outside viewport (left)', () => {
+        // Mock getBoundingClientRect for element completely left of viewport
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: 100,
+            left: -400,
+            bottom: 300,
+            right: -100,
+            width: 300,
+            height: 200,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement);
+
+        expect(result).toEqual({
+            top: 0, // Not clipped from top
+            height: 200, // Full height would be visible if in viewport
+            left: 400, // Clipped 400px from left
+            width: 0, // No visible width (min(1200, -100) - max(-400, 0) = -100 - 0 = -100, but clamped)
+        });
+    });
+
+    it('should handle element larger than viewport', () => {
+        // Mock getBoundingClientRect for element larger than viewport
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: -200,
+            left: -300,
+            bottom: 1000,
+            right: 1500,
+            width: 1800,
+            height: 1200,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement);
+
+        expect(result).toEqual({
+            top: 200, // Clipped 200px from top
+            height: 800, // Visible height equals window height
+            left: 300, // Clipped 300px from left
+            width: 1200, // Visible width equals window width
+        });
+    });
+
+    it('should handle element exactly at viewport boundaries', () => {
+        // Mock getBoundingClientRect for element at exact viewport boundaries
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: 0,
+            left: 0,
+            bottom: 800,
+            right: 1200,
+            width: 1200,
+            height: 800,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement);
+
+        expect(result).toEqual({
+            top: 0, // Not clipped from top
+            height: 800, // Full viewport height
+            left: 0, // Not clipped from left
+            width: 1200, // Full viewport width
+        });
+    });
+});

package/src/utils.ts

@@ -269,7 +269,7 @@ export const getOperationNameFromQuery = (query: string) => {
 export function removeTypename(obj: any) {
     if (!obj || typeof obj !== 'object') return obj;
 
-    // eslint-disable-next-line no-restricted-syntax
+
     for (const key in obj) {
         if (key === '__typename') {
             delete obj[key];
@@ -300,7 +300,11 @@ export const setStyleProperties = (
 ): void => {
     if (!element?.style) return;
     Object.keys(styleProperties).forEach((styleProperty) => {
-        element.style[styleProperty] = styleProperties[styleProperty].toString();
+        const styleKey = styleProperty as keyof CSSStyleDeclaration;
+        const value = styleProperties[styleKey];
+        if (value !== undefined) {
+            (element.style as any)[styleKey] = value.toString();
+        }
     });
 };
 /**
@@ -463,3 +467,25 @@ export const handleExitPresentMode = async (): Promise<void> => {
 
     logger.warn('Exit fullscreen API is not supported by this browser.');
 };
+
+export const calculateVisibleElementData = (element: HTMLElement) => {
+    const rect = element.getBoundingClientRect();
+
+    const windowHeight = window.innerHeight;
+    const windowWidth = window.innerWidth;
+
+    const frameRelativeTop = Math.max(rect.top, 0);
+    const frameRelativeLeft = Math.max(rect.left, 0);
+
+    const frameRelativeBottom = Math.min(windowHeight, rect.bottom);
+    const frameRelativeRight = Math.min(windowWidth, rect.right);
+
+    const data = {
+        top: Math.max(0, rect.top * -1),
+        height: Math.max(0, frameRelativeBottom - frameRelativeTop),
+        left: Math.max(0, rect.left * -1),
+        width: Math.max(0, frameRelativeRight - frameRelativeLeft),
+    };
+
+    return data;
+}