@thoughtspot/visual-embed-sdk 1.42.1-alpha.5 → 1.42.1-alpha.7

package/src/react/index.tsx

@@ -10,101 +10,125 @@ 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, ConversationMessage as _ConversationMessage, SpotterAgentMessageViewConfig } 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 {
+    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>(
+const componentFactory = <
+    T extends typeof TsEmbed,
+    U extends EmbedProps,
+    V extends AllEmbedViewConfig
+>(
     EmbedConstructor: T,
     // isPreRenderedComponent: Specifies whether the component being returned is
     // intended for preRendering. If set to true, the component will call the
     // 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>(
-    (props: U, forwardedRef: React.MutableRefObject<InstanceType<T>>) => {
-        const ref = React.useRef<HTMLDivElement>(null);
-        const { className, style, ...embedProps } = props;
-        const { viewConfig, listeners } = getViewPropsAndListeners<Omit<U, 'className' | 'style'>, V>(
-            embedProps,
-        );
-
-        const handleDestroy = (tsEmbed: InstanceType<T>) => {
-            // do not destroy if it is a preRender component
-            if (isPreRenderedComponent) return;
-
-            // if component is connected to a preRendered component
-            if (props.preRenderId) {
-                tsEmbed.hidePreRender();
-                return;
-            }
-
-            tsEmbed.destroy();
-        };
-
-        const handlePreRenderRendering = (tsEmbed: InstanceType<T>) => {
-            tsEmbed.preRender();
-        };
-
-        const handleDefaultRendering = (tsEmbed: InstanceType<T>) => {
-            // if component is connected to a preRendered component
-            if (props.preRenderId) {
-                tsEmbed.showPreRender();
-                return;
-            }
+) =>
+    React.forwardRef<InstanceType<T>, U>(
+        (props: U, forwardedRef: React.MutableRefObject<InstanceType<T>>) => {
+            const ref = React.useRef<HTMLDivElement>(null);
+            const { className, style, ...embedProps } = props;
+            const { viewConfig, listeners } = getViewPropsAndListeners<
+                Omit<U, 'className' | 'style'>,
+                V
+            >(embedProps);
+
+            const handleDestroy = (tsEmbed: InstanceType<T>) => {
+                // do not destroy if it is a preRender component
+                if (isPreRenderedComponent) return;
+
+                // if component is connected to a preRendered component
+                if (props.preRenderId) {
+                    tsEmbed.hidePreRender();
+                    return;
+                }
+
+                tsEmbed.destroy();
+            };
 
-            tsEmbed.render();
-        };
+            const handlePreRenderRendering = (tsEmbed: InstanceType<T>) => {
+                tsEmbed.preRender();
+            };
 
-        const handleRendering = (tsEmbed: InstanceType<T>) => {
-            if (isPreRenderedComponent) {
-                handlePreRenderRendering(tsEmbed);
-                return;
-            }
-            handleDefaultRendering(tsEmbed);
-        };
+            const handleDefaultRendering = (tsEmbed: InstanceType<T>) => {
+                // if component is connected to a preRendered component
+                if (props.preRenderId) {
+                    tsEmbed.showPreRender();
+                    return;
+                }
 
-        useDeepCompareEffect(() => {
-            const tsEmbed = new EmbedConstructor(
-                ref!.current,
-                deepMerge(
-                    {
-                        insertAsSibling: viewConfig.insertAsSibling,
-                        frameParams: {
-                            class: viewConfig.insertAsSibling ? className || '' : '',
-                        },
-                    },
-                    viewConfig,
-                ),
-            ) as InstanceType<T>;
-            Object.keys(listeners).forEach((eventName) => {
-                tsEmbed.on(eventName as EmbedEvent, listeners[eventName as EmbedEvent]);
-            });
-            handleRendering(tsEmbed);
-            if (forwardedRef) {
-                // eslint-disable-next-line no-param-reassign
-                forwardedRef.current = tsEmbed;
-            }
-            return () => {
-                handleDestroy(tsEmbed);
+                tsEmbed.render();
             };
-        }, [viewConfig, listeners]);
 
-        const preRenderStyles = isPreRenderedComponent ? { display: 'none' } : {};
+            const handleRendering = (tsEmbed: InstanceType<T>) => {
+                if (isPreRenderedComponent) {
+                    handlePreRenderRendering(tsEmbed);
+                    return;
+                }
+                handleDefaultRendering(tsEmbed);
+            };
 
-        return viewConfig.insertAsSibling ? (
-            <span data-testid="tsEmbed" ref={ref} style={{ position: 'absolute', ...preRenderStyles }}></span>
-        ) : (
-            <div data-testid="tsEmbed" ref={ref} style={{ ...style, ...preRenderStyles }} className={`ts-embed-container ${className}`}></div>
-        );
-    },
-);
+            useDeepCompareEffect(() => {
+                const tsEmbed = new EmbedConstructor(
+                    ref!.current,
+                    deepMerge(
+                        {
+                            insertAsSibling: viewConfig.insertAsSibling,
+                            frameParams: {
+                                class: viewConfig.insertAsSibling ? className || '' : '',
+                            },
+                        },
+                        viewConfig,
+                    ),
+                ) as InstanceType<T>;
+                Object.keys(listeners).forEach((eventName) => {
+                    tsEmbed.on(eventName as EmbedEvent, listeners[eventName as EmbedEvent]);
+                });
+                handleRendering(tsEmbed);
+                if (forwardedRef) {
+                    forwardedRef.current = tsEmbed;
+                }
+                return () => {
+                    handleDestroy(tsEmbed);
+                };
+            }, [viewConfig, listeners]);
+
+            const preRenderStyles = isPreRenderedComponent ? { display: 'none' } : {};
+
+            return viewConfig.insertAsSibling ? (
+                <span
+                    data-testid="tsEmbed"
+                    ref={ref}
+                    style={{ position: 'absolute', ...preRenderStyles }}
+                ></span>
+            ) : (
+                <div
+                    data-testid="tsEmbed"
+                    ref={ref}
+                    style={{ ...style, ...preRenderStyles }}
+                    className={`ts-embed-container ${className}`}
+                ></div>
+            );
+        },
+    );
 
-interface SearchProps extends EmbedProps, SearchViewConfig { }
+interface SearchProps extends EmbedProps, SearchViewConfig {}
 
 interface PreRenderProps {
     /**
@@ -158,7 +182,7 @@ export const PreRenderedSearchEmbed = componentFactory<
     SearchViewConfig
 >(_SearchEmbed, true);
 
-interface AppProps extends EmbedProps, AppViewConfig { }
+interface AppProps extends EmbedProps, AppViewConfig {}
 
 /**
  * React component for Full app Embed.
@@ -199,7 +223,7 @@ export const PreRenderedAppEmbed = componentFactory<
     AppViewConfig
 >(_AppEmbed, true);
 
-interface LiveboardProps extends EmbedProps, LiveboardViewConfig { }
+interface LiveboardProps extends EmbedProps, LiveboardViewConfig {}
 
 /**
  * React component for Liveboard embed.
@@ -252,7 +276,7 @@ export const PreRenderedLiveboardEmbed = componentFactory<
 
 export const PreRenderedPinboardEmbed = PreRenderedLiveboardEmbed;
 
-interface SearchBarEmbedProps extends EmbedProps, SearchBarViewConfig { }
+interface SearchBarEmbedProps extends EmbedProps, SearchBarViewConfig {}
 
 /**
  * React component for Search bar embed.
@@ -296,7 +320,7 @@ export const PreRenderedSearchBarEmbed = componentFactory<
     SearchBarViewConfig
 >(_SearchBarEmbed, true);
 
-interface SageEmbedProps extends EmbedProps, SageViewConfig { }
+interface SageEmbedProps extends EmbedProps, SageViewConfig {}
 
 /**
  * React component for LLM based search Sage embed.
@@ -338,8 +362,8 @@ export const PreRenderedSageEmbed = componentFactory<
     SageViewConfig
 >(_SageEmbed, true);
 
-interface SpotterEmbedProps extends EmbedProps, SpotterEmbedViewConfig { }
-interface ConversationEmbedProps extends EmbedProps, ConversationViewConfig { }
+interface SpotterEmbedProps extends EmbedProps, SpotterEmbedViewConfig {}
+interface ConversationEmbedProps extends EmbedProps, ConversationViewConfig {}
 
 /**
  * React component for LLM based conversation BI.
@@ -362,7 +386,6 @@ export const SpotterEmbed = componentFactory<
     SpotterEmbedViewConfig
 >(_SpotterEmbed);
 
-
 /**
  * React component for LLM based conversation BI.
  * @deprecated from SDK: 1.39.0 | ThoughtSpot: 10.10.0.cl
@@ -402,27 +425,27 @@ export const ConversationMessage = componentFactory<
 type SpotterMessageProps = {
     message: SpotterAgentMessageViewConfig;
     query?: string;
-  } & Omit<EmbedProps, keyof SpotterAgentMessageViewConfig>;
+} & Omit<EmbedProps, keyof SpotterAgentMessageViewConfig>;
 
 /**
  * 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
  * 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} 
+ *   <SpotterMessage
+ *     message={result.message}
+ *     query={result.query}
  *   />
  * }
  * ```
@@ -433,14 +456,8 @@ export const SpotterMessage = React.forwardRef<
     SpotterMessageProps
 >((props, ref) => {
     const { message, query: _, ...otherProps } = props;
-    
-    return (
-        <ConversationMessage
-            ref={ref}
-            {...message}
-            {...otherProps}
-        />
-    );
+
+    return <ConversationMessage ref={ref} {...message} {...otherProps} />;
 });
 
 /**
@@ -467,7 +484,8 @@ export const PreRenderedConversationEmbed = componentFactory<
     SpotterEmbedViewConfig
 >(_SpotterEmbed, true);
 
-type EmbedComponent = typeof SearchEmbed
+type EmbedComponent =
+    | typeof SearchEmbed
     | typeof AppEmbed
     | typeof LiveboardEmbed
     | typeof SearchBarEmbed
@@ -493,8 +511,9 @@ type EmbedComponent = typeof SearchEmbed
  * ```
  * @returns {React.MutableRefObject<T extends TsEmbed>} ref
  */
-export function useEmbedRef<T extends EmbedComponent>():
-    React.MutableRefObject<React.ComponentRef<T>> {
+export function useEmbedRef<T extends EmbedComponent>(): React.MutableRefObject<
+    React.ComponentRef<T>
+> {
     return React.useRef<React.ComponentRef<T>>(null);
 }
 
@@ -523,19 +542,19 @@ export function useInit(config: EmbedConfig) {
 
 /**
  * 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} />
@@ -548,38 +567,41 @@ export function useInit(config: EmbedConfig) {
  */
 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 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);
+            const result = await serviceRef.current.sendMessageData(query);
 
-        if (result.error) {
-            return { error: result.error };
-        }
+            if (result.error) {
+                return { error: result.error };
+            }
 
-        return {
-            query: query,
-            message: {
-                ...result.data,
-                worksheetId: config.worksheetId,
-            },
-        };
-    }, [config.worksheetId]);
+            return {
+                query: query,
+                message: {
+                    ...result.data,
+                    worksheetId: config.worksheetId,
+                },
+            };
+        },
+        [config.worksheetId],
+    );
 
     return {
         sendMessage,
@@ -587,16 +609,11 @@ export function useSpotterAgent(config: SpotterAgentEmbedViewConfig) {
 }
 
 export {
-    LiveboardViewConfig,
-    SearchViewConfig,
-    AppViewConfig,
     Page,
-    RuntimeFilter,
     RuntimeFilterOp,
     EmbedEvent,
     HostEvent,
     Action,
-    FrameParams,
     HomeLeftNavItem,
     HomepageModule,
     LogLevel,
@@ -604,3 +621,11 @@ export {
     ListPageColumns,
     CustomActionsPosition,
 } from '../index';
+
+export type {
+    RuntimeFilter,
+    LiveboardViewConfig,
+    SearchViewConfig,
+    AppViewConfig,
+    FrameParams,
+} from '../index';