@envive-ai/react-widgets-v3 0.3.2

package/src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.tsx

@@ -0,0 +1,61 @@
+import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
+
+import { ChatPreviewLoading } from '@envive-ai/react-toolkit-v3/ChatPreviewLoading';
+import useGetWidgetStatus from '../hooks/useGetWidgetStatus';
+import { ChatPreviewLoadingWidgetWithBaseWidget } from '../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget';
+import { TypingAnimationWithBaseWidget } from '../TypingAnimationWidget/TypingAnimationWidget';
+import { ChatPreviewComparisonWidgetWithBaseWidget } from '../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget';
+import { ChatPreviewWidgetWithBaseWidget } from '../ChatPreviewWidget/ChatPreviewWidget';
+
+export interface TypingAnimationFlowWidgetProps {
+  widgetConfigId: string;
+}
+
+export const TypingAnimationFlowWidget = ({ widgetConfigId }: TypingAnimationFlowWidgetProps) => {
+  const {
+    userHasInteractedValue,
+    userHasNotInteractedValue,
+    isLoadingValue,
+    isProductComparisonValue,
+  } = useGetWidgetStatus();
+
+  if (userHasInteractedValue) {
+    return (
+      <ChatPreviewWidgetWithBaseWidget
+        widgetConfigId={widgetConfigId}
+        widgetType={WidgetTypeV3.ChatPreviewV3}
+      />
+    );
+  }
+
+  if (userHasNotInteractedValue) {
+    return (
+      <TypingAnimationWithBaseWidget
+        widgetConfigId={widgetConfigId}
+        widgetType={WidgetTypeV3.TypingAnimationV3}
+      />
+    );
+  }
+
+  if (isLoadingValue) {
+    return (
+      <ChatPreviewLoadingWidgetWithBaseWidget
+        widgetConfigId={widgetConfigId}
+        widgetType={WidgetTypeV3.ChatPreviewLoadingV3}
+      />
+    );
+  }
+
+  if (isProductComparisonValue) {
+    return (
+      <ChatPreviewComparisonWidgetWithBaseWidget
+        widgetConfigId={widgetConfigId}
+        widgetType={WidgetTypeV3.ChatPreviewComparisonV3}
+      />
+    );
+  }
+
+  return <ChatPreviewLoading fullIsLoading />;
+};
+
+TypingAnimationFlowWidget.displayName = 'TypingAnimationFlowWidget';

package/src/widgets/TypingAnimationFlowWidget/index.ts

@@ -0,0 +1,4 @@
+import { TypingAnimationFlowWidget } from './TypingAnimationFlowWidget';
+
+export { TypingAnimationFlowWidget };
+export type { TypingAnimationFlowWidgetProps } from './TypingAnimationFlowWidget';

package/src/widgets/TypingAnimationWidget/TypingAnimationWidget.tsx

@@ -0,0 +1,115 @@
+import {
+  TypingAnimationWidgetV3Config,
+  WidgetTypeV3,
+} from '@envive-ai/react-hooks/contexts/typesV3';
+import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
+import { WidgetWrapperVariant } from '@envive-ai/react-toolkit-v3/WidgetWrapper';
+import { useCallback } from 'react';
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { useSetAtom } from 'jotai';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { chatOnToggleAtom } from '@envive-ai/react-hooks/atoms/chat/chatState';
+import { PromptCarouselRows } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { TypingAnimation } from '@envive-ai/react-toolkit-v3/TypingAnimation';
+import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
+
+const mockButtonTexts = [
+  'Loading button 1',
+  'Loading button 2',
+  'Loading button 3',
+  'Loading button 4',
+];
+
+const mockTitleLabel = 'Loading...';
+const mockHeadlineText = 'Loading';
+const mockAnimatedTextSequence = ['...'];
+const mockHintText = 'Ask me anything';
+
+const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
+  const { onTypedMessageSubmitted } = useSalesAgent();
+  const onToggle = useSetAtom(chatOnToggleAtom);
+
+  const { hardcopyContent, widgetConfig, isLoading } = props;
+
+  const titleLabel = (hardcopyContent?.values?.titleLabel as string | undefined) || '';
+  const headlineText = (hardcopyContent?.values?.headlineText as string | undefined) || '';
+  const animatedTextSequence = (hardcopyContent?.values?.animatedTextSequence as string[]) || [];
+  const hintText = hardcopyContent?.values?.hintText as string | undefined;
+  const textFieldAriaLabel = hardcopyContent?.values?.textFieldAriaLabel as string | undefined;
+
+  const promptButtonTexts = (hardcopyContent?.values?.promptButtonTexts as string[]) || [];
+  const buttonTexts = isLoading ? mockButtonTexts : promptButtonTexts;
+
+  const typingAnimationWidgetConfig = widgetConfig as TypingAnimationWidgetV3Config;
+
+  const id = typingAnimationWidgetConfig?.contentId;
+  const widgetVariant =
+    (typingAnimationWidgetConfig?.widgetVariant as WidgetWrapperVariant) ||
+    WidgetWrapperVariant.CARD_WITH_BORDER;
+  const cardColor = typingAnimationWidgetConfig?.cardColor;
+  const promptButtonType =
+    (typingAnimationWidgetConfig?.promptButtonType as PromptButtonVariant) ||
+    PromptButtonVariant.LIGHT;
+  const promptCarouselRows =
+    typingAnimationWidgetConfig?.promptCarouselRows || PromptCarouselRows.ALWAYS_ONE;
+  const showTextField = typingAnimationWidgetConfig?.showTextField !== false; // Default: true
+
+  const handleButtonClick = useCallback(
+    (text: string) => {
+      onTypedMessageSubmitted({ query: text, userTyped: false });
+      onToggle(ChatElementDisplayLocationV3.TYPING_ANIMATION);
+    },
+    [onTypedMessageSubmitted, onToggle],
+  );
+
+  const handleTextFieldClick = useCallback(() => {
+    onToggle(ChatElementDisplayLocationV3.TYPING_ANIMATION);
+  }, [onToggle]);
+
+  return (
+    <TypingAnimation
+      baseProps={{
+        id,
+      }}
+      widgetContentProps={{
+        titleLabel: isLoading ? mockTitleLabel : titleLabel,
+        headlineText: isLoading ? mockHeadlineText : headlineText,
+        animatedTextSequence: isLoading ? mockAnimatedTextSequence : animatedTextSequence,
+        promptButtonTexts: buttonTexts,
+        hintText: isLoading ? mockHintText : hintText,
+        textFieldAriaLabel,
+      }}
+      widgetStyleProps={{
+        widgetVariant,
+        cardColor,
+        promptButtonType,
+        promptCarouselRows,
+        showTextField,
+        isLoading,
+      }}
+      widgetEventProps={{
+        handleButtonClick,
+        handleTextFieldClick,
+      }}
+    />
+  );
+};
+
+export const TypingAnimationWithBaseWidget = withBaseWidget<BaseWidgetProps>(
+  TypingAnimationWidgetHandler,
+);
+
+export interface TypingAnimationWidgetProps {
+  widgetConfigId: string;
+}
+
+export const TypingAnimationWidget = ({ widgetConfigId }: TypingAnimationWidgetProps) => {
+  return (
+    <TypingAnimationWithBaseWidget
+      widgetConfigId={widgetConfigId}
+      widgetType={WidgetTypeV3.TypingAnimationV3}
+    />
+  );
+};
+
+TypingAnimationWidget.displayName = 'TypingAnimationWidget';

package/src/widgets/TypingAnimationWidget/index.ts

@@ -0,0 +1,2 @@
+export { TypingAnimationWidget, TypingAnimationWithBaseWidget } from './TypingAnimationWidget';
+export type { TypingAnimationWidgetProps } from './TypingAnimationWidget';

package/src/widgets/hooks/useGetWidgetStatus.tsx

@@ -0,0 +1,29 @@
+import { useAtomValue } from 'jotai';
+
+import { useMemo } from 'react';
+import { responseStreamingAtom } from '@envive-ai/react-hooks/atoms/chat/chatState';
+import { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
+import {
+  isLoading,
+  isProductComparison,
+  userHasInteracted,
+  userHasNotInteracted,
+} from '../utils/functions';
+
+const useGetWidgetStatus = () => {
+  const { messages } = useAtomValue(chatAtom);
+  const responseStreaming = useAtomValue(responseStreamingAtom);
+  const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
+
+  return useMemo(
+    () => ({
+      userHasInteractedValue: userHasInteracted(messages),
+      userHasNotInteractedValue: userHasNotInteracted(messages),
+      isLoadingValue: isLoading(messages, responseStreaming),
+      isProductComparisonValue: isProductComparison(lastAssistantMessage),
+    }),
+    [messages, responseStreaming, lastAssistantMessage],
+  );
+};
+
+export default useGetWidgetStatus;

package/src/widgets/utils/functions.ts

@@ -0,0 +1,104 @@
+import {
+  Message,
+  MessageRole,
+  MessageType,
+  ProductMessageMetadata,
+} from '@envive-ai/react-hooks/application/models';
+
+import { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
+
+import { getAtomStore } from '@envive-ai/react-hooks/atoms/atomStore';
+
+export const getProductImageUrl = (lastAssistantMessage: Message[]) => {
+  const productImageUrls =
+    lastAssistantMessage != null
+      ? lastAssistantMessage.reduce<string[]>((acc, msg) => {
+          if (msg.type === MessageType.Product && msg.metadata) {
+            if (msg.metadata.imageUrls?.length) {
+              return [...acc, ...msg.metadata.imageUrls];
+            }
+            // imageUrl is being deprecated so only use it if imageUrls is not present
+            if (msg.metadata.imageUrl) {
+              return [...acc, msg.metadata.imageUrl];
+            }
+          }
+          return acc;
+        }, [])
+      : [];
+
+  const productImageUrl = ((): string | undefined => {
+    const productImageUrlIndex = 1;
+
+    return productImageUrls.length > 0 && productImageUrlIndex > productImageUrls.length - 1
+      ? productImageUrls[productImageUrls.length - 1]
+      : productImageUrls[productImageUrlIndex];
+  })();
+
+  return productImageUrl;
+};
+
+export const getRecentProductImageUrls = (
+  lastMessages: Message[],
+  currentProductId: string | undefined,
+) => {
+  const productMessages = lastMessages
+    .filter(message => message.type === MessageType.Product && message.metadata?.imageUrl)
+    .map(m => m as ProductMessageMetadata);
+  // put added product image at the top of the list
+  return [
+    ...productMessages.filter(m => m.metadata?.id === currentProductId),
+    ...productMessages.filter(m => m.metadata?.id !== currentProductId),
+  ].map(m => m.metadata!.imageUrl!);
+};
+
+export const getMessageText = (lastAssistantMessage: Message[]) => {
+  if (!lastAssistantMessage) {
+    return '';
+  }
+
+  const textMessage = lastAssistantMessage.find(
+    msg => msg.role === MessageRole.Assistant && msg.type === MessageType.Text,
+  );
+
+  return textMessage && textMessage.type === MessageType.Text ? textMessage.metadata.content : '';
+};
+
+export const userHasInteracted = (msgs?: Message[][]): boolean => {
+  if (msgs) {
+    return msgs.some(m => m.some(msg => msg.role === MessageRole.User));
+  }
+
+  const atomStore = getAtomStore();
+  const { messages } = atomStore.get(chatAtom);
+  return messages.some(m => m.some(msg => msg.role === MessageRole.User));
+};
+
+export const userHasNotInteracted = (msgs?: Message[][]): boolean => {
+  if (msgs) {
+    return !msgs.some(m => m.some(msg => msg.role === MessageRole.User));
+  }
+
+  const atomStore = getAtomStore();
+  const chat = atomStore.get(chatAtom);
+  return !chat.messages.some(m => m.some(msg => msg.role === MessageRole.User));
+};
+
+export const isLoading = (msgs?: Message[][], responseStream?: boolean): boolean => {
+  if (msgs) {
+    return responseStream || (!responseStream && msgs.length === 0);
+  }
+
+  const atomStore = getAtomStore();
+  const { responseStreaming, messages } = atomStore.get(chatAtom);
+  return responseStreaming || (!responseStreaming && messages.length === 0);
+};
+
+export const isProductComparison = (lastMsg?: Message[] | null | undefined): boolean => {
+  if (lastMsg) {
+    return lastMsg?.filter(msg => msg.type === MessageType.Product).length === 2;
+  }
+
+  const atomStore = getAtomStore();
+  const lastAssistantMessage = atomStore.get(lastAssistantMessageAtom);
+  return lastAssistantMessage?.filter(msg => msg.type === MessageType.Product).length === 2;
+};

package/src/widgets-v2/SearchResults/index.ts

@@ -0,0 +1,3 @@
+import { SearchResults, SearchResultsWidget } from '@envive-ai/react-widgets/SearchResults';
+
+export { SearchResults, SearchResultsWidget };

package/src/widgets-v2/SearchZeroState/index.ts

@@ -0,0 +1,15 @@
+import {
+  SearchEntryPointWidgetConfig,
+  SearchInputVariant,
+  SearchZeroState,
+  SearchZeroStateProps,
+  SearchZeroStateWidget,
+} from '@envive-ai/react-widgets/SearchZeroState';
+
+export {
+  SearchZeroStateProps,
+  SearchEntryPointWidgetConfig,
+  SearchInputVariant,
+  SearchZeroState,
+  SearchZeroStateWidget,
+};

package/src/widgets-v2/SuggestionBar/index.ts

@@ -0,0 +1,6 @@
+import {
+  SuggestionBar,
+  SuggestionBarLocationForMetrics,
+} from '@envive-ai/react-widgets/SuggestionBar';
+
+export { SuggestionBar, SuggestionBarLocationForMetrics };

package/src/widgets-v2/SuggestionButtonContainer/index.ts

@@ -0,0 +1,6 @@
+import {
+  SuggestionButtonContainer,
+  SuggestionButtonContainerProps,
+} from '@envive-ai/react-widgets/SuggestionButtonContainer';
+
+export { SuggestionButtonContainer, SuggestionButtonContainerProps };