@envive-ai/react-widgets-v3 0.3.13 → 0.3.15-alpha.1

package/src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.tsx

@@ -1,31 +1,52 @@
+import { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import {
   ChatPreviewComparisonWidgetV3Config,
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
-import { useAtomValue } from 'jotai';
-import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
-import { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
+import { useAtomValue } from 'jotai';
 
-import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
-import { useCallback, useMemo } from 'react';
 import {
   ChatElementDisplayLocationV3,
   Suggestion,
   VariantTypeEnum,
 } from '@envive-ai/react-hooks/application/models';
+import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
+import { EnviveMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
+import {
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
 import { ChatPreviewComparison } from '@envive-ai/react-toolkit-v3/ChatPreviewComparison';
 import { ChatPreviewComparisonProps } from '@envive-ai/react-toolkit-v3/ChatPreviewComparison/types/types';
-import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
-import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
+import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { useCallback, useMemo } from 'react';
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
-import { getMessageText, getRecentProductImageUrls } from '../utils/functions';
+import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
 import { ChatPreviewLoadingWidgetWithBaseWidget } from '../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget';
+import { getMessageText, getRecentProductImageUrls } from '../utils/functions';
 
 const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
   const { onSuggestionClicked } = useSalesAgent();
   const { openChat } = useChatToggle();
 
+  const { trackWidgetInteraction } = useWidgetInteraction();
+  const {
+    onClick: onPromptClicked,
+    onDrag,
+    onHover,
+    onMouseDown,
+    onMouseUp,
+    onTouchStart,
+    onTouchEnd,
+  } = usePromptCarouselAnalytics(
+    WidgetInteractionComponent.POST_INTERACTION_COMPARISON,
+    text => text,
+  );
+
   const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
 
   const variantInfo = useAtomValue(variantInfoAtom);
@@ -75,14 +96,37 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
         ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON,
       );
       openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON);
+      onPromptClicked(suggestion.id);
     },
     [onSuggestionClicked, openChat],
   );
 
   const handleTextFieldClick = useCallback(() => {
     openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_TEXT_FIELD);
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.POST_INTERACTION_COMPARISON,
+        widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
+      },
+    });
   }, [openChat]);
 
+  const handleLinkClick = (url: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.POST_INTERACTION_COMPARISON,
+        widget_interaction: WidgetInteractionType.LINK_CLICKED,
+        widget_interaction_data: {
+          link_clicked: {
+            url,
+          },
+        },
+      },
+    });
+  };
+
   if (isLoading) {
     return (
       <ChatPreviewLoadingWidgetWithBaseWidget
@@ -116,6 +160,13 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
 
   const widgetEventProps: ChatPreviewComparisonProps['widgetEventProps'] = {
     handlePromptButtonClick,
+    handlePromptButtonDrag: onDrag,
+    handlePromptButtonHover: onHover,
+    handlePromptButtonMouseDown: onMouseDown,
+    handlePromptButtonMouseUp: onMouseUp,
+    handlePromptButtonTouchStart: onTouchStart,
+    handlePromptButtonTouchEnd: onTouchEnd,
+    handleLinkClick,
     handleTextFieldClick,
   };
 

package/src/widgets/ChatPreviewWidget/ChatPreviewWidget.tsx

@@ -1,8 +1,8 @@
-import { ChatPreviewWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
-import { useAtomValue } from 'jotai';
+import { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { ChatPreviewWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
-import { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
+import { useAtomValue } from 'jotai';
 
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 
@@ -10,17 +10,23 @@ import {
   ChatElementDisplayLocationV3,
   Suggestion,
 } from '@envive-ai/react-hooks/application/models';
-import { useCallback, useEffect, useMemo } from 'react';
 import {
-  SpiffyMetricsEventName,
+  EnviveMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
-import { ChatPreviewProps } from '@envive-ai/react-toolkit-v3/ChatPreview/types/types';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
+import {
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
 import { ChatPreview } from '@envive-ai/react-toolkit-v3/ChatPreview';
-import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
+import { ChatPreviewProps } from '@envive-ai/react-toolkit-v3/ChatPreview/types/types';
+import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { useCallback, useMemo } from 'react';
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
-import { getMessageText } from '../utils/functions';
+import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
 import { ChatPreviewLoadingWidgetWithBaseWidget } from '../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget';
+import { getMessageText } from '../utils/functions';
 
 const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
   const { onSuggestionClicked } = useSalesAgent();
@@ -49,16 +55,16 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
   >;
 
   const { trackEvent } = useAmplitude();
-
-  useEffect(() => {
-    trackEvent({
-      eventName: SpiffyMetricsEventName.ChatComponentVisible,
-      eventProps: {
-        widget_config_id: widgetConfigId,
-        widget_type: WidgetTypeV3.ChatPreviewV3,
-      },
-    });
-  }, [trackEvent, widgetConfigId]);
+  const { trackWidgetInteraction } = useWidgetInteraction();
+  const {
+    onClick: onPromptClicked,
+    onDrag,
+    onHover,
+    onMouseDown,
+    onMouseUp,
+    onTouchStart,
+    onTouchEnd,
+  } = usePromptCarouselAnalytics(WidgetInteractionComponent.CHAT_PREVIEW, text => text);
 
   const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
 
@@ -68,14 +74,37 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
     (suggestion: Suggestion) => {
       onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
       openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
+      onPromptClicked(suggestion.id);
     },
     [onSuggestionClicked, openChat],
   );
 
   const handleTextFieldClick = useCallback(() => {
     openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_TEXT_FIELD);
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.CHAT_PREVIEW,
+        widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
+      },
+    });
   }, [openChat]);
 
+  const handleLinkClick = (url: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.CHAT_PREVIEW,
+        widget_interaction: WidgetInteractionType.LINK_CLICKED,
+        widget_interaction_data: {
+          link_clicked: {
+            url,
+          },
+        },
+      },
+    });
+  };
+
   if (isLoading) {
     return (
       <ChatPreviewLoadingWidgetWithBaseWidget
@@ -103,6 +132,13 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
 
   const widgetEventProps: ChatPreviewProps['widgetEventProps'] = {
     handlePromptButtonClick,
+    handlePromptButtonDrag: onDrag,
+    handlePromptButtonHover: onHover,
+    handlePromptButtonMouseDown: onMouseDown,
+    handlePromptButtonMouseUp: onMouseUp,
+    handlePromptButtonTouchStart: onTouchStart,
+    handlePromptButtonTouchEnd: onTouchEnd,
+    handleLinkClick,
     handleTextFieldClick,
   };
 

package/src/widgets/ChatPreviewWidget/__tests__/ChatPreviewWidget.test.tsx

@@ -0,0 +1,120 @@
+import { render, waitFor } from '@testing-library/react';
+import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
+import { UserEvent, UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import { ChatPreviewWidget } from '../ChatPreviewWidget';
+
+const mockTrackEvent = vi.fn();
+const mockGetHardcopy = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn();
+
+vi.mock('@envive-ai/react-toolkit-v3/ChatPreview', () => ({
+  ChatPreview: () => <div data-testid="chat-preview-mock">Chat Preview</div>,
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
+  useAmplitude: () => ({
+    trackEvent: mockTrackEvent,
+    isReady: true,
+  }),
+  SpiffyMetricsEventName: {
+    ChatComponentVisible: 'Chat Component Visible',
+    SearchComponentVisible: 'Search Component Visible',
+  },
+}));
+
+vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
+  useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
+  useHardcopy: () => ({
+    getHardcopy: mockGetHardcopy,
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/pageContext', () => ({
+  usePage: () => ({
+    userEvent: {
+      id: 'test-user-event-id',
+      category: UserEventCategory.PageVisit,
+      created_at: '2025-01-01T00:00:00Z',
+      event_id: 'test-event-id',
+    } as UserEvent,
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/widgetConfigContext', () => ({
+  useWidgetConfig: () => ({
+    getWidgetConfig: vi.fn().mockResolvedValue({}),
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/uiConfigContext', () => ({
+  useUiConfig: () => ({
+    getUiConfig: vi.fn().mockResolvedValue({}),
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/salesAgentContext', () => ({
+  useSalesAgent: () => ({
+    onSuggestionClicked: vi.fn(),
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/hooks/ChatToggle', () => ({
+  useChatToggle: () => ({
+    openChat: vi.fn(),
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/atoms/chat', () => ({
+  chatAtom: {},
+  lastAssistantMessageAtom: {},
+}));
+
+vi.mock('jotai', async importOriginal => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    useAtomValue: vi
+      .fn()
+      .mockReturnValueOnce([])
+      .mockReturnValueOnce({ messages: [], suggestions: [] })
+      .mockReturnValue([]),
+  };
+});
+
+describe('ChatPreviewWidget analytics', () => {
+  const defaultHardcopy = {
+    responseId: 'test-response-id',
+    language: 'en',
+    values: {
+      titleLabel: 'Chat Preview',
+      textFieldPlaceholderText: 'Type here',
+    },
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockGetHardcopy.mockResolvedValue(defaultHardcopy);
+  });
+
+  it('should track ChatComponentVisible when widget mounts', async () => {
+    render(<ChatPreviewWidget widgetConfigId="test-config-1" />);
+
+    await waitFor(
+      () => {
+        expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+          expect.any(Object),
+          {
+            widget_config_id: 'test-config-1',
+            widget_type: WidgetTypeV3.ChatPreviewV3,
+          },
+          '0px',
+          true,
+        );
+      },
+      { timeout: 3000 },
+    );
+  }, 5000);
+});

package/src/widgets/FloatingChatWidget/FloatingChatOverlay.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 import classNames from 'classnames';
+import { useCheckIsMobile } from '@envive-ai/react-toolkit-v3/utils/useCheckIsMobile';
 
 export interface FloatingChatOverlayProps {
   children?: ReactNode;
@@ -10,8 +10,36 @@ export interface FloatingChatOverlayProps {
   className?: string;
   dataTestId?: string;
   previewMode?: boolean;
+  isResultsModalOpen?: boolean;
 }
 
+const ANIMATION_DURATION = 0.3;
+
+const useOverlayAnimations = ({
+  previewMode,
+  isMobile,
+}: {
+  previewMode: boolean;
+  isMobile: boolean;
+}) => {
+  if (previewMode) {
+    return {
+      overlayExitAnimation: { opacity: 0, x: 0 },
+      overlayAnimation: { opacity: 1, x: 0 },
+    };
+  }
+  if (isMobile) {
+    return {
+      overlayExitAnimation: { opacity: 0 },
+      overlayAnimation: { opacity: 1 },
+    };
+  }
+  return {
+    overlayExitAnimation: { opacity: 0, x: 512 },
+    overlayAnimation: { opacity: 1, x: 0 },
+  };
+};
+
 export const FloatingChatOverlay = ({
   children,
   isOpened,
@@ -19,7 +47,14 @@ export const FloatingChatOverlay = ({
   className,
   dataTestId,
   previewMode = false,
+  isResultsModalOpen = false,
 }: FloatingChatOverlayProps) => {
+  const { isMobile } = useCheckIsMobile();
+  const { overlayExitAnimation, overlayAnimation } = useOverlayAnimations({
+    previewMode,
+    isMobile,
+  });
+
   const overlayClasses = classNames(
     previewMode ? 'envive-tw-absolute' : 'envive-tw-fixed',
     'envive-tw-top-0',
@@ -36,7 +71,7 @@ export const FloatingChatOverlay = ({
     'envive-tw-left-0',
     'envive-tw-h-full',
     'envive-tw-w-full',
-    'envive-tw-bg-black',
+    isMobile ? 'envive-tw-bg-black' : '',
     'envive-tw-opacity-50',
     'envive-tw-pointer-events-none',
     'envive-tw-z-0',
@@ -64,7 +99,7 @@ export const FloatingChatOverlay = ({
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
-          transition={{ duration: 0.3 }}
+          transition={{ duration: ANIMATION_DURATION }}
           data-testid={dataTestId}
         >
           {!previewMode && (
@@ -73,7 +108,7 @@ export const FloatingChatOverlay = ({
               initial={{ opacity: 0 }}
               animate={{ opacity: 0.5 }}
               exit={{ opacity: 0 }}
-              transition={{ duration: 0.3 }}
+              transition={{ duration: ANIMATION_DURATION }}
               aria-label="Close chat"
             />
           )}
@@ -91,11 +126,15 @@ export const FloatingChatOverlay = ({
             aria-label="Close floating chat"
           >
             <motion.div
-              initial={{ opacity: 0, x: previewMode ? 0 : 512 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: previewMode ? 0 : 512 }}
-              transition={{ duration: 0.3 }}
-              style={{ height: previewMode ? '100%' : '100dvh', cursor: 'default' }}
+              initial={overlayExitAnimation}
+              animate={overlayAnimation}
+              exit={overlayExitAnimation}
+              transition={{ duration: ANIMATION_DURATION }}
+              style={{
+                height: previewMode ? '100%' : '100dvh',
+                cursor: 'default',
+                margin: isResultsModalOpen ? '0 auto' : '0',
+              }}
               className="envive-tw-shadow-md"
               onClick={e => e.stopPropagation()}
             >
@@ -107,16 +146,6 @@ export const FloatingChatOverlay = ({
     </AnimatePresence>
   );
 
-  // In preview mode, render inline. Otherwise use portal to body
-  if (previewMode) {
-    return chatWrapper;
-  }
-
-  // Render using portal to body to ensure it's on top of everything
-  if (typeof document !== 'undefined') {
-    return createPortal(chatWrapper, document.body);
-  }
-
   return chatWrapper;
 };