@thoughtspot/visual-embed-sdk 1.37.1 → 1.38.0

package/src/embed/conversation.ts

@@ -15,10 +15,10 @@ export interface SearchOptions {
 }
 
 /**
- * The configuration for the embedded conversationEmbed options.
+ * The configuration for the embedded spotterEmbed options.
  * @group Embed components
  */
-export interface ConversationViewConfig extends ViewConfig {
+export interface SpotterEmbedViewConfig extends ViewConfig {
     /**
      * The ID of the worksheet to use for the conversation.
      */
@@ -32,7 +32,7 @@ export interface ConversationViewConfig extends ViewConfig {
      * but still display the selected data source.
      * @example
      * ```js
-     * const embed = new ConversationEmbed('#tsEmbed', {
+     * const embed = new SpotterEmbed('#tsEmbed', {
      *    ... // other options
      *    disableSourceSelection : true,
      * })
@@ -44,7 +44,7 @@ export interface ConversationViewConfig extends ViewConfig {
      * hideSourceSelection : Hide data source selection
      * @example
      * ```js
-     * const embed = new ConversationEmbed('#tsEmbed', {
+     * const embed = new SpotterEmbed('#tsEmbed', {
      *    ... // other options
      *    hideSourceSelection : true,
      * })
@@ -71,7 +71,7 @@ export interface ConversationViewConfig extends ViewConfig {
      * default is false.
      * @example
      * ```js
-     * const embed = new ConversationEmbed('#tsEmbed', {
+     * const embed = new SpotterEmbed('#tsEmbed', {
      *    ... // other options
      *    showSpotterLimitations : true,
      * })
@@ -84,7 +84,7 @@ export interface ConversationViewConfig extends ViewConfig {
      * the initial screen of the conversation.
      * @example
      * ```js
-     * const embed = new ConversationEmbed('#tsEmbed', {
+     * const embed = new SpotterEmbed('#tsEmbed', {
      *    ... // other options
      *    hideSampleQuestions : true,
      * })
@@ -94,12 +94,21 @@ export interface ConversationViewConfig extends ViewConfig {
     hideSampleQuestions?: boolean;
 }
 
+/**
+ * The configuration for the embedded spotterEmbed options.
+ * @deprecated from SDK: 1.38.0 | ThoughtSpot: 10.10.0.cl
+ * Use {@link SpotterEmbedViewConfig} instead
+ * @group Embed components
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ConversationViewConfig extends SpotterEmbedViewConfig {}
+
 /**
  * Embed ThoughtSpot AI Conversation.
  * @group Embed components
  * @example
  * ```js
- * const conversation = new ConversationEmbed('#tsEmbed', {
+ * const conversation = new SpotterEmbed('#tsEmbed', {
  *   worksheetId: 'worksheetId',
  *   searchOptions: {
  *     searchQuery: 'searchQuery',
@@ -107,10 +116,10 @@ export interface ConversationViewConfig extends ViewConfig {
  * });
  * conversation.render();
  * ```
- * @version SDK: 1.33.1 | ThoughtSpot: 10.5.0.cl
+ * @version SDK: 1.37.0 | ThoughtSpot: 10.9.0.cl
  */
-export class ConversationEmbed extends TsEmbed {
-    constructor(container: HTMLElement, protected viewConfig: ConversationViewConfig) {
+export class SpotterEmbed extends TsEmbed {
+    constructor(container: HTMLElement, protected viewConfig: SpotterEmbedViewConfig) {
         viewConfig.embedComponentType = 'conversation';
         super(container, viewConfig);
     }
@@ -163,7 +172,7 @@ export class ConversationEmbed extends TsEmbed {
         return `${this.getEmbedBasePath(query)}/embed/${path}${tsPostHashParams}`;
     }
 
-    public async render(): Promise<ConversationEmbed> {
+    public async render(): Promise<SpotterEmbed> {
         await super.render();
 
         const src = this.getIframeSrc();
@@ -171,3 +180,27 @@ export class ConversationEmbed extends TsEmbed {
         return this;
     }
 }
+
+/**
+ * Embed ThoughtSpot AI Conversation.
+ * @deprecated from SDK: 1.38.0 | ThoughtSpot: 10.10.0.cl
+ * Use {@link SpotterEmbed} instead
+ * @group Embed components
+ * @example
+ * ```js
+ * const conversation = new SpotterEmbed('#tsEmbed', {
+ *   worksheetId: 'worksheetId',
+ *   searchOptions: {
+ *     searchQuery: 'searchQuery',
+ *   },
+ * });
+ * conversation.render();
+ * ```
+ * @version SDK: 1.37.0 | ThoughtSpot: 10.9.0.cl
+ */
+export class ConversationEmbed extends SpotterEmbed {
+    constructor(container: HTMLElement, protected viewConfig: ConversationViewConfig) {
+        viewConfig.embedComponentType = 'conversation';
+        super(container, viewConfig);
+    }
+}

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

@@ -14,8 +14,6 @@ import {
     AppViewConfig,
     SageEmbed,
     SageViewConfig,
-    ConversationViewConfig,
-    ConversationEmbed,
     SearchViewConfig,
     AnswerService,
 } from '../index';

package/src/index.ts

@@ -9,7 +9,12 @@
  * @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
  */
 import {
-    AppEmbed, Page, AppViewConfig, HomePageSearchBarMode,
+    AppEmbed,
+    Page,
+    AppViewConfig,
+    HomePageSearchBarMode,
+    PrimaryNavbarVersion,
+    HomePage,
 } from './embed/app';
 import {
     init,
@@ -23,8 +28,8 @@ import {
 import { PinboardEmbed, LiveboardViewConfig, LiveboardEmbed } from './embed/liveboard';
 import { SearchEmbed, SearchViewConfig } from './embed/search';
 import { SearchBarEmbed, SearchBarViewConfig } from './embed/search-bar';
-import { BodylessConversation, BodylessConversationViewConfig } from './embed/bodyless-conversation';
-import { ConversationEmbed, ConversationViewConfig } from './embed/conversation';
+import { SpotterAgentEmbed, SpotterAgentEmbedViewConfig, BodylessConversation, BodylessConversationViewConfig} from './embed/bodyless-conversation';
+import { SpotterEmbed, SpotterEmbedViewConfig, ConversationEmbed, ConversationViewConfig } from './embed/conversation';
 import {
     AuthFailureType, AuthStatus, AuthEvent, AuthEventEmitter,
 } from './auth';
@@ -85,10 +90,14 @@ export {
     LiveboardEmbed,
     SageEmbed,
     AppEmbed,
-    BodylessConversation,
+    SpotterAgentEmbed,
+    SpotterAgentEmbedViewConfig,
     BodylessConversationViewConfig,
-    ConversationEmbed,
+    BodylessConversation,
+    SpotterEmbed,
+    SpotterEmbedViewConfig,
     ConversationViewConfig,
+    ConversationEmbed,
     AuthFailureType,
     AuthStatus,
     AuthEvent,
@@ -129,6 +138,8 @@ export {
     uploadMixpanelEvent,
     MIXPANEL_EVENT,
     HomePageSearchBarMode,
+    PrimaryNavbarVersion,
+    HomePage,
     VizPoint,
     CustomActionPayload,
     UIPassthroughEvent,

package/src/react/all-types-export.ts

@@ -9,8 +9,10 @@ export {
     PreRenderedAppEmbed,
     SageEmbed,
     PreRenderedSageEmbed,
+    SpotterEmbed,
     ConversationEmbed,
     PreRenderedConversationEmbed,
+    SpotterAgentEmbed,
     useEmbedRef,
     useInit,
 } from './index';

package/src/react/index.spec.tsx

@@ -16,6 +16,7 @@ import {
 } from '../test/test-utils';
 import {
     SearchEmbed, AppEmbed, LiveboardEmbed, useEmbedRef, SearchBarEmbed, PreRenderedLiveboardEmbed,
+    SpotterAgentEmbed
 } from './index';
 import * as allExports from './index';
 import {
@@ -235,6 +236,161 @@ describe('React Components', () => {
         });
     });
 
+    describe('SpotterAgentEmbed', () => {
+        it('Should work as a React component integrating BodylessConversation', async () => {
+            const mockDiv = document.createElement('div');
+            
+            let conversationService: any = null;
+            
+            render(
+                <SpotterAgentEmbed
+                    ref={(instance: any) => {
+                        conversationService = instance;
+                        
+                        if (instance) {
+                            instance.sendMessage = jest.fn().mockResolvedValue({
+                                container: mockDiv
+                            });
+                        }
+                    }}
+                    worksheetId="test-worksheet-id"
+                />
+            );
+
+            expect(conversationService).not.toBeNull();
+            
+            if (conversationService) {
+                expect(typeof conversationService.sendMessage).toBe('function');
+                
+                const response = await conversationService.sendMessage("What are my sales this month?");
+                expect(response.container).toBe(mockDiv);
+            }
+        });
+
+        it('Should work as a React component with ref support', () => {
+            const mockSendMessage = jest.fn().mockResolvedValue({
+                container: document.createElement('div'),
+                viz: {}
+            });
+            
+            const TestComponent = () => {
+                const conversationRef = React.useRef(null);
+                
+                const handleClick = () => {
+                    if (conversationRef.current) {
+                        conversationRef.current.sendMessage = mockSendMessage;
+                        
+                        conversationRef.current.sendMessage("Test message");
+                    }
+                };
+                
+                return (
+                    <>
+                        <SpotterAgentEmbed
+                            ref={conversationRef}
+                            worksheetId="test-worksheet-id"
+                        />
+                        <button data-testid="test-button" onClick={handleClick}>
+                            Send Message
+                        </button>
+                    </>
+                );
+            };
+            
+            const { getByTestId } = render(<TestComponent />);
+            
+            fireEvent.click(getByTestId('test-button'));
+            
+            expect(mockSendMessage).toHaveBeenCalledWith("Test message");
+        });
+
+        it('Should work with the useEmbedRef hook', () => {
+            const mockSendMessage = jest.fn().mockResolvedValue({
+                container: document.createElement('div'),
+                viz: {}
+            });
+            
+            const TestComponent = () => {
+                const embedRef = useEmbedRef<typeof SpotterAgentEmbed>();
+                
+                const handleClick = () => {
+                    if (embedRef.current) {
+                        const service = embedRef.current as unknown as { 
+                            sendMessage: typeof mockSendMessage 
+                        };
+                        
+                        service.sendMessage = mockSendMessage;
+                        
+                        service.sendMessage("Test with useEmbedRef");
+                    }
+                };
+                
+                return (
+                    <>
+                        <SpotterAgentEmbed
+                            ref={embedRef}
+                            worksheetId="test-worksheet-id"
+                        />
+                        <button data-testid="use-embed-ref-button" onClick={handleClick}>
+                            Send with useEmbedRef
+                        </button>
+                    </>
+                );
+            };
+            
+            const { getByTestId } = render(<TestComponent />);
+            
+            fireEvent.click(getByTestId('use-embed-ref-button'));
+            
+            expect(mockSendMessage).toHaveBeenCalledWith("Test with useEmbedRef");
+        });
+
+        it('Should work with the className prop', async () => {
+            let capturedInstance: any = null;
+            
+            const TestComponent = () => {
+                const embedRef = useEmbedRef<typeof SpotterAgentEmbed>();
+                
+                React.useEffect(() => {
+                    capturedInstance = embedRef.current;
+                    
+                    if (capturedInstance) {
+                        const mockConversationService = {
+                            sendMessage: jest.fn().mockResolvedValue({
+                                data: {
+                                    sessionId: 'test-session',
+                                    genNo: 1,
+                                    stateKey: {
+                                        transactionId: 'test-transaction',
+                                        generationNumber: 1
+                                    }
+                                }
+                            })
+                        };
+                        (capturedInstance as any).conversationService = mockConversationService;
+                    }
+                }, []);
+                
+                return (
+                    <SpotterAgentEmbed
+                        ref={embedRef}
+                        worksheetId="test-worksheet-id"
+                        className="embedClass"
+                    />
+                );
+            };
+            
+            render(<TestComponent />);
+            
+            expect(capturedInstance).not.toBeNull();
+            
+            if (capturedInstance) {
+                const result = await capturedInstance.sendMessage("test");
+                expect(result.container.className).toBe("embedClass");
+            }
+        });
+    });
+
     describe('PreRenderedLiveboardEmbed', () => {
         it('should preRender the liveboard ', async () => {
             const preRenderId = 'tsEmbed-pre-render-wrapper-test';
@@ -285,7 +441,7 @@ describe('allExports', () => {
     it('should not have undefined exports', () => {
         Object.keys(allExports).forEach(
             (exportKey) => expect(
-                Boolean(allExports[exportKey]),
+                Boolean(allExports[exportKey as keyof typeof allExports]),
             )
                 .toBe(true),
         );

package/src/react/index.tsx

@@ -10,10 +10,11 @@ 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 { EmbedConfig, EmbedEvent, ViewConfig } from '../types';
 import { EmbedProps, getViewPropsAndListeners } from './util';
-import { ConversationEmbed as _ConversationEmbed, ConversationViewConfig } from '../embed/conversation';
+import { SpotterEmbed as _SpotterEmbed, SpotterEmbedViewConfig, ConversationEmbed as _ConversationEmbed, ConversationViewConfig } from '../embed/conversation';
 import { init } from '../embed/base';
 
 const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V extends ViewConfig>(
@@ -23,7 +24,7 @@ const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V exte
     // Embed.preRender() method instead of the usual render method, and it will
     // not be destroyed when the component is unmounted.
     isPreRenderedComponent = false,
-) => React.forwardRef<InstanceType<T>, U>(
+ ) => React.forwardRef<InstanceType<T>, U>(
     (props: U, forwardedRef: React.MutableRefObject<InstanceType<T>>) => {
         const ref = React.useRef<HTMLDivElement>(null);
         const { className, style, ...embedProps } = props;
@@ -334,6 +335,7 @@ export const PreRenderedSageEmbed = componentFactory<
     SageViewConfig
 >(_SageEmbed, true);
 
+interface SpotterEmbedProps extends EmbedProps, SpotterEmbedViewConfig { }
 interface ConversationEmbedProps extends EmbedProps, ConversationViewConfig { }
 
 /**
@@ -341,6 +343,30 @@ interface ConversationEmbedProps extends EmbedProps, ConversationViewConfig { }
  * @example
  * ```tsx
  * function Sage() {
+ *  return <SpotterEmbed
+ *      worksheetId="<worksheet-id-here>"
+ *      searchOptions={{
+ *          searchQuery: "<search query to start with>"
+ *      }}
+ *      ... other view config props or event listeners.
+ *  />
+ * }
+ * ```
+ */
+export const SpotterEmbed = componentFactory<
+    typeof _SpotterEmbed,
+    SpotterEmbedProps,
+    SpotterEmbedViewConfig
+>(_SpotterEmbed);
+
+
+/**
+ * React component for LLM based conversation BI.
+ * @deprecated from SDK: 1.38.0 | ThoughtSpot: 10.10.0.cl
+ * Use {@link SpotterEmbed} instead
+ * @example
+ * ```tsx
+ * function Sage() {
  *  return <ConversationEmbed
  *      worksheetId="<worksheet-id-here>"
  *      searchOptions={{
@@ -352,14 +378,73 @@ interface ConversationEmbedProps extends EmbedProps, ConversationViewConfig { }
  * ```
  */
 export const ConversationEmbed = componentFactory<
-    typeof _ConversationEmbed, ConversationEmbedProps, ConversationViewConfig>(
-        _ConversationEmbed,
-    );
+    typeof _ConversationEmbed,
+    ConversationEmbedProps,
+    ConversationViewConfig
+>(_ConversationEmbed);
+
+interface SpotterAgentEmbedProps extends EmbedProps, SpotterAgentEmbedViewConfig {}
+
+/**
+ * React component for SpotterAgent embed, which can be integrated inside
+ * chatbots or other conversational interfaces.
+ * @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>
+ *  );
+ * }
+ * ```
+ */
+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);
+    
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(serviceRef.current);
+      } else {
+        ref.current = serviceRef.current;
+      }
+    }
+    
+    return () => {
+      serviceRef.current = null;
+    };
+  }, [props]);
+  
+  return null;
+});
 
 /**
  * React component for PreRendered Conversation embed.
  *
- * PreRenderedConversationEmbed will preRender the ConversationEmbed and will be hidden by
+ * PreRenderedConversationEmbed will preRender the SpotterEmbed and will be hidden by
  * default.
  *
  * SageEmbed with preRenderId passed will call showPreRender on the embed.
@@ -370,21 +455,23 @@ export const ConversationEmbed = componentFactory<
  * }
  * ```
  * function MyComponent() {
- *  return <ConversationEmbed preRenderId="someId" worksheetId="id" />
+ *  return <SpotterEmbed preRenderId="someId" worksheetId="id" />
  * }
  * ```
  */
 export const PreRenderedConversationEmbed = componentFactory<
-    typeof _ConversationEmbed,
-    SageEmbedProps & PreRenderProps,
-    ConversationViewConfig
->(_ConversationEmbed, true);
+    typeof _SpotterEmbed,
+    SpotterEmbedProps & PreRenderProps,
+    SpotterEmbedViewConfig
+>(_SpotterEmbed, true);
 
 type EmbedComponent = typeof SearchEmbed
     | typeof AppEmbed
     | typeof LiveboardEmbed
     | typeof SearchBarEmbed
     | typeof SageEmbed
+    | typeof SpotterAgentEmbed
+    | typeof SpotterEmbed
     | typeof ConversationEmbed;
 
 /**

package/src/types.ts

@@ -3662,6 +3662,7 @@ export enum Param {
     ShowSpotterLimitations = 'showSpotterLimitations',
     CoverAndFilterOptionInPDF = 'coverAndFilterOptionInPDF',
     PrimaryAction = 'primaryAction',
+    isSpotterAgentEmbed = 'isSpotterAgentEmbed',
 }
 
 /**