@envive-ai/react-widgets-v3 0.3.14 → 0.3.15-alpha.2

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

@@ -1,11 +1,11 @@
 import { render, waitFor } from '@testing-library/react';
-import { SpiffyMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { UserEvent, UserEventCategory } from '@spiffy-ai/commerce-api-client';
 import { FloatingChatWidget } from '../FloatingChatWidget';
 
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn();
 
 vi.mock('@envive-ai/react-toolkit-v3/FloatingButton', () => ({
   FloatingButton: () => <div data-testid="floating-button">Floating Button</div>,
@@ -22,6 +22,10 @@ vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
   },
 }));
 
+vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
+  useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
+}));
+
 vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
   useHardcopy: () => ({
     getHardcopy: mockGetHardcopy,
@@ -105,13 +109,15 @@ describe('FloatingChatWidget analytics', () => {
 
     await waitFor(
       () => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.ChatComponentVisible,
-          eventProps: {
+        expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+          expect.any(Object),
+          {
             widget_config_id: 'floating-button',
             widget_type: WidgetTypeV3.FloatingButtonV3,
           },
-        });
+          '0px',
+          true,
+        );
       },
       { timeout: 3000 },
     );

package/src/widgets/ProductCardWidget/ProductCardWidget.tsx

@@ -1,16 +1,21 @@
-import { ProductCardWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
-import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
-import { useCallback, useEffect } from 'react';
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
 import {
   EnviveMetricsEventName,
-  SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { ProductCardWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
+import {
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
 import { ProductCard } from '@envive-ai/react-toolkit-v3/ProductCard';
+import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
+import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { useCallback } from 'react';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
 import { RawValues, getStringIdForText } from '../utils/functions';
 
@@ -52,17 +57,19 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
   const imageSrc = productCardWidgetConfig?.imageSrc || '';
 
   const { trackEvent } = useAmplitude();
-
-  const { widgetConfigId } = props;
-  useEffect(() => {
-    trackEvent({
-      eventName: SpiffyMetricsEventName.ChatComponentVisible,
-      eventProps: {
-        widget_config_id: widgetConfigId,
-        widget_type: WidgetTypeV3.ProductCardV3,
-      },
-    });
-  }, [trackEvent, widgetConfigId]);
+  const { trackWidgetInteraction } = useWidgetInteraction();
+  const {
+    onClick: onSuggestionClick,
+    onDrag,
+    onHover,
+    onMouseDown,
+    onMouseUp,
+    onTouchStart,
+    onTouchEnd,
+  } = usePromptCarouselAnalytics(WidgetInteractionComponent.IMAGE_PROMPT_CARD, text => {
+    const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;
+    return getStringIdForText(rawValues, text);
+  });
 
   const handleSelect = useCallback(
     (text: string) => {
@@ -82,12 +89,20 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
         displayLocation: ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON,
       });
       openChat(ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON);
+      onSuggestionClick(text);
     },
     [hardcopyContent, onTypedMessageSubmitted, openChat, trackEvent],
   );
 
   const handleInputClick = useCallback(() => {
     openChat(ChatElementDisplayLocationV3.PRODUCT_CARD_TEXT_FIELD);
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.IMAGE_PROMPT_CARD,
+        widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
+      },
+    });
   }, [openChat]);
 
   return (
@@ -105,6 +120,12 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
       textTypingDuration={800}
       textTransition={2000}
       onSelect={handleSelect}
+      onDrag={onDrag}
+      onHover={onHover}
+      onMouseDown={onMouseDown}
+      onMouseUp={onMouseUp}
+      onTouchStart={onTouchStart}
+      onTouchEnd={onTouchEnd}
       onInputClick={handleInputClick}
     />
   );

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

@@ -1,14 +1,12 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import {
-  EnviveMetricsEventName,
-  SpiffyMetricsEventName,
-} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { EnviveMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { UserEvent, UserEventCategory } from '@spiffy-ai/commerce-api-client';
 import { ProductCardWidget } from '../ProductCardWidget';
 
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn();
 
 vi.mock('@envive-ai/react-toolkit-v3/ProductCard', () => ({
   ProductCard: ({ prompts, onSelect }: { prompts: string[]; onSelect: (text: string) => void }) => (
@@ -40,6 +38,10 @@ vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
   },
 }));
 
+vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
+  useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
+}));
+
 vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
   useHardcopy: () => ({
     getHardcopy: mockGetHardcopy,
@@ -106,13 +108,15 @@ describe('ProductCardWidget analytics', () => {
 
     await waitFor(
       () => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.ChatComponentVisible,
-          eventProps: {
+        expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+          expect.any(Object),
+          {
             widget_config_id: 'test-config-1',
             widget_type: WidgetTypeV3.ProductCardV3,
           },
-        });
+          '0px',
+          true,
+        );
       },
       { timeout: 3000 },
     );

package/src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.tsx

@@ -1,28 +1,33 @@
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import {
   PromptButtonCarouselWithImageWidgetV3Config,
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
-import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 
-import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
-import { useCallback, useEffect, useMemo } from 'react';
+import {
+  ChatElementDisplayLocationV3,
+  VariantTypeEnum,
+} from '@envive-ai/react-hooks/application/models';
+import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
+import { lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
 import {
   EnviveMetricsEventName,
-  SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
 import {
-  ChatElementDisplayLocationV3,
-  VariantTypeEnum,
-} from '@envive-ai/react-hooks/application/models';
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
 import {
   PromptButtonCarouselWithImage,
   PromptButtonCarouselWithImageProps,
 } from '@envive-ai/react-toolkit-v3/PromptButtonCarouselWithImage';
-import { lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
+import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import { useAtomValue } from 'jotai';
-import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
+import { useCallback, useMemo } from 'react';
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
 import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
 import { RawValues, getRecentProductImageUrls, getStringIdForText } from '../utils/functions';
@@ -30,6 +35,16 @@ import { RawValues, getRecentProductImageUrls, getStringIdForText } from '../uti
 const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
   const { onTypedMessageSubmitted } = useSalesAgent();
   const { openChat } = useChatToggle();
+  const { trackWidgetInteraction } = useWidgetInteraction();
+  const {
+    onClick: onSuggestionClick,
+    onDrag,
+    onHover,
+    onMouseDown,
+    onMouseUp,
+    onTouchStart,
+    onTouchEnd,
+  } = usePromptCarouselAnalytics(WidgetInteractionComponent.SINGLE_IMAGE_PROMPT, text => text);
 
   const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
 
@@ -49,16 +64,6 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
 
   const { trackEvent } = useAmplitude();
 
-  useEffect(() => {
-    trackEvent({
-      eventName: SpiffyMetricsEventName.ChatComponentVisible,
-      eventProps: {
-        widget_config_id: widgetConfigId,
-        widget_type: WidgetTypeV3.PromptButtonCarouselWithImageV3,
-      },
-    });
-  }, [trackEvent, widgetConfigId]);
-
   const handlePromptButtonClick = useCallback(
     (text: string) => {
       const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;
@@ -78,12 +83,20 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
           ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_PROMPT_BUTTON,
       });
       openChat(ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_PROMPT_BUTTON);
+      onSuggestionClick(text);
     },
     [onTypedMessageSubmitted, openChat],
   );
 
   const handleTextFieldClick = useCallback(() => {
     openChat(ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_TEXT_FIELD);
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.SINGLE_IMAGE_PROMPT,
+        widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
+      },
+    });
   }, [openChat]);
 
   const variantInfo = useAtomValue(variantInfoAtom);
@@ -120,6 +133,12 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
       textFieldPlaceholder={hardCopyContent?.textFieldPlaceholder}
       hideTextField={promptButtonCarouselWithImageWidgetConfig?.hideTextField}
       handlePromptButtonClick={handlePromptButtonClick}
+      handlePromptButtonDrag={onDrag}
+      handlePromptButtonHover={onHover}
+      handlePromptButtonMouseDown={onMouseDown}
+      handlePromptButtonMouseUp={onMouseUp}
+      handlePromptButtonTouchStart={onTouchStart}
+      handlePromptButtonTouchEnd={onTouchEnd}
       handleTextFieldClick={handleTextFieldClick}
     />
   );

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

@@ -1,14 +1,12 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import {
-  EnviveMetricsEventName,
-  SpiffyMetricsEventName,
-} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { EnviveMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { UserEvent, UserEventCategory } from '@spiffy-ai/commerce-api-client';
 import { PromptButtonCarouselWithImageWidget } from '../PromptButtonCarouselWithImageWidget';
 
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn();
 
 vi.mock('@envive-ai/react-toolkit-v3/PromptButtonCarouselWithImage', () => ({
   PromptButtonCarouselWithImage: ({
@@ -46,6 +44,17 @@ vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
   },
 }));
 
+vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
+  useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
+}));
+
+vi.mock('@envive-ai/react-hooks/hooks/WidgetInteraction', () => ({
+  useWidgetInteraction: () => ({
+    trackWidgetInteraction: vi.fn(),
+    getInteractionId: vi.fn(),
+  }),
+}));
+
 vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
   useHardcopy: () => ({
     getHardcopy: mockGetHardcopy,
@@ -141,13 +150,15 @@ describe('PromptButtonCarouselWithImageWidget analytics', () => {
 
     await waitFor(
       () => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.ChatComponentVisible,
-          eventProps: {
+        expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+          expect.any(Object),
+          {
             widget_config_id: 'test-config-1',
             widget_type: WidgetTypeV3.PromptButtonCarouselWithImageV3,
           },
-        });
+          '0px',
+          true,
+        );
       },
       { timeout: 3000 },
     );

package/src/widgets/PromptCarouselWidget/PromptCarouselWidget.tsx

@@ -1,21 +1,24 @@
-import {
-  PromptCarouselWidgetV3Config,
-  WidgetTypeV3,
-} from '@envive-ai/react-hooks/contexts/typesV3';
-import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
 import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
-import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
-import { useCallback, useEffect } from 'react';
 import {
   EnviveMetricsEventName,
-  SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import {
+  PromptCarouselWidgetV3Config,
+  WidgetTypeV3,
+} from '@envive-ai/react-hooks/contexts/typesV3';
+import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
+import { useCallback } from 'react';
 
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { WidgetInteractionComponent } from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
+import {
+  PromptCarousel,
+  usePromptCarouselAnalytics,
+} from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { AnimationSpeed } from '@envive-ai/react-toolkit-v3/PromptCarousel/types/types';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
-import { PromptCarousel } from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
 import { RawValues, getStringIdForText } from '../utils/functions';
 
@@ -33,6 +36,19 @@ const PromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
 
   const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
 
+  const {
+    onClick: onSuggestionClick,
+    onDrag,
+    onHover,
+    onMouseDown,
+    onMouseUp,
+    onTouchStart,
+    onTouchEnd,
+  } = usePromptCarouselAnalytics(WidgetInteractionComponent.SUGGESTION_BAR, text => {
+    const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;
+    return getStringIdForText(rawValues, text);
+  });
+
   const promptButtonTexts = (hardcopyContent?.values?.promptButtonTexts as string[]) || [];
   const buttonTexts = isLoading ? mockButtonTexts : promptButtonTexts;
 
@@ -48,20 +64,11 @@ const PromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
 
   const { trackEvent } = useAmplitude();
 
-  useEffect(() => {
-    trackEvent({
-      eventName: SpiffyMetricsEventName.ChatComponentVisible,
-      eventProps: {
-        widget_config_id: widgetConfigId,
-        widget_type: WidgetTypeV3.PromptCarouselV3,
-      },
-    });
-  }, [trackEvent, widgetConfigId]);
-
   const handleButtonClick = useCallback(
     (text: string) => {
       const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;
       const stringId = getStringIdForText(rawValues, text);
+      onSuggestionClick(stringId);
       trackEvent({
         eventName: EnviveMetricsEventName.WidgetTextClicked,
         eventProps: {
@@ -91,6 +98,12 @@ const PromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
       promptCarouselRows={promptCarouselRows}
       animationSpeed={animationSpeed}
       handleButtonClick={handleButtonClick}
+      handleButtonHover={onHover}
+      handleButtonDrag={onDrag}
+      handleButtonMouseUp={onMouseUp}
+      handleButtonMouseDown={onMouseDown}
+      handleButtonTouchStart={onTouchStart}
+      handleButtonTouchEnd={onTouchEnd}
       promptButtonTexts={buttonTexts}
     />
   );

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

@@ -1,14 +1,12 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import {
-  EnviveMetricsEventName,
-  SpiffyMetricsEventName,
-} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { EnviveMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { UserEvent, UserEventCategory } from '@spiffy-ai/commerce-api-client';
 import { PromptCarouselWidget } from '../PromptCarouselWidget';
 
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn();
 
 vi.mock('@envive-ai/react-toolkit-v3/PromptCarousel', () => ({
   PromptCarousel: ({
@@ -30,6 +28,15 @@ vi.mock('@envive-ai/react-toolkit-v3/PromptCarousel', () => ({
       ))}
     </div>
   ),
+  usePromptCarouselAnalytics: () => ({
+    onClick: vi.fn(),
+    onDrag: vi.fn(),
+    onHover: vi.fn(),
+    onMouseDown: vi.fn(),
+    onMouseUp: vi.fn(),
+    onTouchStart: vi.fn(),
+    onTouchEnd: vi.fn(),
+  }),
 }));
 
 vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
@@ -46,6 +53,10 @@ vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
   },
 }));
 
+vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
+  useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
+}));
+
 vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
   useHardcopy: () => ({
     getHardcopy: mockGetHardcopy,
@@ -112,13 +123,15 @@ describe('PromptCarouselWidget analytics', () => {
 
     await waitFor(
       () => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.ChatComponentVisible,
-          eventProps: {
+        expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+          expect.any(Object),
+          {
             widget_config_id: 'test-config-1',
             widget_type: WidgetTypeV3.PromptCarouselV3,
           },
-        });
+          '0px',
+          true,
+        );
       },
       { timeout: 3000 },
     );

package/src/widgets/SocialProofWidget/SocialProofWidget.tsx

@@ -1,8 +1,8 @@
+import { useCallback, useMemo } from 'react';
 import { SocialProofWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
-import { lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
 import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
 import {
   PageVariant,
@@ -15,26 +15,41 @@ import {
   ChatElementDisplayLocationV3,
   VariantTypeEnum,
 } from '@envive-ai/react-hooks/application/models';
-import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { chatPreviewLoadingDataAtom } from '@envive-ai/react-hooks/atoms/widget';
 import {
   EnviveMetricsEventName,
-  SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
-import { useCallback, useEffect, useMemo } from 'react';
-import { chatPreviewLoadingDataAtom } from '@envive-ai/react-hooks/atoms/widget';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
+import {
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
+import { useProductImageUrl } from '@envive-ai/react-hooks/hooks/ProductImageUrl';
 import { ChatPreviewLoading } from '@envive-ai/react-toolkit-v3/ChatPreviewLoading';
+import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
 import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
-import { RawValues, getProductImageUrl, getStringIdForText } from '../utils/functions';
+import { RawValues, getStringIdForText } from '../utils/functions';
 
 const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
   const setChatPreviewLoadingData = useSetAtom(chatPreviewLoadingDataAtom);
 
   const { onTypedMessageSubmitted } = useSalesAgent();
   const { openChat } = useChatToggle();
-  const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
   const variantInfo = useAtomValue(variantInfoAtom);
+  const { trackWidgetInteraction } = useWidgetInteraction();
+  const {
+    onClick: onSuggestionClick,
+    onHover,
+    onDrag,
+    onMouseDown,
+    onMouseUp,
+    onTouchStart,
+    onTouchEnd,
+  } = usePromptCarouselAnalytics(WidgetInteractionComponent.SOCIAL_PROOF, text => text);
 
   const { hardcopyContent, widgetConfig, uiConfig, isLoading, widgetConfigId } = props;
 
@@ -82,7 +97,8 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
 
   const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 
-  const dynamicImageUrl = getProductImageUrl(lastAssistantMessage);
+  const productId = variantInfo.variant === VariantTypeEnum.Pdp ? variantInfo.productId : undefined;
+  const dynamicImageUrl = useProductImageUrl(productId);
 
   const images =
     socialProofWidgetConfig?.kind !== WidgetKind.DYNAMIC
@@ -91,16 +107,6 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
 
   const { trackEvent } = useAmplitude();
 
-  useEffect(() => {
-    trackEvent({
-      eventName: SpiffyMetricsEventName.ChatComponentVisible,
-      eventProps: {
-        widget_config_id: widgetConfigId,
-        widget_type: WidgetTypeV3.SocialProofV3,
-      },
-    });
-  }, [trackEvent, widgetConfigId]);
-
   const handlePrimaryButtonClick = useCallback(
     (text: string) => {
       const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;
@@ -119,24 +125,70 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
         displayLocation: ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON,
       });
       openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON);
+
+      trackWidgetInteraction({
+        eventName: EnviveMetricsEventName.WidgetInteraction,
+        trigger: {
+          widget: WidgetInteractionComponent.SOCIAL_PROOF,
+          widget_interaction: WidgetInteractionType.SUGGESTION_CLICKED,
+          widget_interaction_data: {
+            suggestion_clicked: {
+              suggestion_id: text,
+            },
+          },
+        },
+      });
     },
     [onTypedMessageSubmitted, openChat],
   );
 
+  const handlePrimaryButtonHover = useCallback((text: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.SOCIAL_PROOF,
+        widget_interaction: WidgetInteractionType.WIDGET_HOVERED,
+        widget_interaction_data: {
+          suggestion_hovered: {
+            suggestion_id: text,
+          },
+        },
+      },
+    });
+  }, []);
+
   const handleSecondaryButtonClick = useCallback(
     (text: string) => {
+      const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;
+      const stringId = getStringIdForText(rawValues, text);
+      trackEvent({
+        eventName: EnviveMetricsEventName.WidgetTextClicked,
+        eventProps: {
+          response_id: hardcopyContent?.responseId,
+          string_id: stringId,
+          text,
+        },
+      });
       onTypedMessageSubmitted({
         query: text,
         userTyped: false,
         displayLocation: ChatElementDisplayLocationV3.SOCIAL_PROOF_SECONDARY_BUTTON,
       });
       openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_SECONDARY_BUTTON);
+      onSuggestionClick(text);
     },
     [onTypedMessageSubmitted, openChat],
   );
 
   const handleTextFieldClick = useCallback(() => {
     openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_TEXT_FIELD);
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.SOCIAL_PROOF,
+        widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
+      },
+    });
   }, [openChat]);
 
   if (isLoading) {
@@ -185,7 +237,14 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
 
   const widgetEventProps: SocialProofProps['widgetEventProps'] = {
     handlePrimaryButtonClick,
+    handlePrimaryButtonHover,
     handleSecondaryButtonClick,
+    handleSecondaryButtonHover: onHover,
+    handleSecondaryButtonDrag: onDrag,
+    handleSecondaryButtonMouseDown: onMouseDown,
+    handleSecondaryButtonMouseUp: onMouseUp,
+    handleSecondaryButtonTouchStart: onTouchStart,
+    handleSecondaryButtonTouchEnd: onTouchEnd,
     handleTextFieldClick,
   };