@thoughtspot/visual-embed-sdk 1.37.1 → 1.38.0-alpha.1

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',
 }
 
 /**