@envive-ai/react-widgets-v3 0.3.21 → 0.3.23

package/src/widgets/ProductCardWidget/ProductCardWidget.tsx

@@ -1,13 +1,16 @@
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import {
+  ChatElementDisplayLocationV3,
+  FeatureGates,
+} from '@envive-ai/react-hooks/application/models';
 import {
   EnviveMetricsEventName,
-  SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 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 { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
 import {
   WidgetInteractionComponent,
   WidgetInteractionType,
@@ -16,7 +19,7 @@ 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, useEffect } from 'react';
+import { useCallback } from 'react';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
 import { RawValues, getStringIdForText } from '../utils/functions';
 
@@ -34,7 +37,7 @@ const mockAnimatedText = ['Loading...'];
 const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
   const { onTypedMessageSubmitted } = useSalesAgent();
   const { openChat } = useChatToggle();
-  const { hardcopyContent, widgetConfig, isLoading } = props;
+  const { hardcopyContent, widgetConfig, uiConfig, isLoading } = props;
 
   const hardCopyHeadline = hardcopyContent?.values?.headline as string | undefined;
   const headline = isLoading ? mockHeadline : hardCopyHeadline || '';
@@ -56,6 +59,10 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
   const italicizeHeadline = productCardWidgetConfig?.italicizeHeadline;
   const fallbackColor = productCardWidgetConfig?.fallbackColor;
   const imageSrc = productCardWidgetConfig?.imageSrc || '';
+  const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+  const { featureFlagService } = useFeatureFlagService();
+  const isVoiceInputEnabled =
+    featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
 
   const { trackEvent } = useAmplitude();
   const { trackWidgetInteraction } = useWidgetInteraction();
@@ -72,17 +79,6 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
     return getStringIdForText(rawValues, text);
   });
 
-  const { widgetConfigId } = props;
-  useEffect(() => {
-    trackEvent({
-      eventName: SpiffyMetricsEventName.ChatComponentVisible,
-      eventProps: {
-        widget_config_id: widgetConfigId,
-        widget_type: WidgetTypeV3.ProductCardV3,
-      },
-    });
-  }, [trackEvent, widgetConfigId]);
-
   const handleSelect = useCallback(
     (text: string) => {
       const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;
@@ -117,6 +113,29 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
     });
   }, [openChat]);
 
+  const handleTranscriptionStarted = useCallback(() => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.IMAGE_PROMPT_CARD,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED,
+      },
+    });
+  }, []);
+
+  const handleTranscriptionCompleted = useCallback((transcript: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.IMAGE_PROMPT_CARD,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+        widget_interaction_data: {
+          transcription: transcript,
+        },
+      },
+    });
+  }, []);
+
   return (
     <ProductCard
       theme={Theme.GLOBAL_CUSTOM}
@@ -129,6 +148,7 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
       promptButtonType={promptButtonType}
       carouselId={carouselId}
       placeholder={placeholder}
+      voiceInputEnabled={isVoiceInputEnabled}
       textTypingDuration={800}
       textTransition={2000}
       onSelect={handleSelect}
@@ -139,6 +159,8 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
       onTouchStart={onTouchStart}
       onTouchEnd={onTouchEnd}
       onInputClick={handleInputClick}
+      onTranscriptionStarted={handleTranscriptionStarted}
+      onTranscriptionCompleted={handleTranscriptionCompleted}
     />
   );
 };

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

@@ -4,16 +4,17 @@ import {
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
 
 import {
   ChatElementDisplayLocationV3,
+  FeatureGates,
   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';
@@ -28,7 +29,7 @@ import {
 import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import { useAtomValue } from 'jotai';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
 import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
 import { RawValues, getRecentProductImageUrls, getStringIdForText } from '../utils/functions';
@@ -47,7 +48,7 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
     onTouchEnd,
   } = usePromptCarouselAnalytics(WidgetInteractionComponent.SINGLE_IMAGE_PROMPT, text => text);
 
-  const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
+  const { hardcopyContent, widgetConfig, uiConfig, isLoading } = props;
 
   const promptButtonCarouselWithImageWidgetConfig =
     widgetConfig as PromptButtonCarouselWithImageWidgetV3Config;
@@ -65,16 +66,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;
@@ -110,6 +101,29 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
     });
   }, [openChat]);
 
+  const handleTranscriptionStarted = useCallback(() => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.SINGLE_IMAGE_PROMPT,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED,
+      },
+    });
+  }, []);
+
+  const handleTranscriptionCompleted = useCallback((transcript: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.SINGLE_IMAGE_PROMPT,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+        widget_interaction_data: {
+          transcription: transcript,
+        },
+      },
+    });
+  }, []);
+
   const variantInfo = useAtomValue(variantInfoAtom);
   const productId = variantInfo.variant === VariantTypeEnum.Pdp ? variantInfo.productId : undefined;
 
@@ -131,6 +145,11 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
     ? 'Product Image From Page'
     : promptButtonCarouselWithImageWidgetConfig?.image?.alt;
 
+  const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+  const { featureFlagService } = useFeatureFlagService();
+  const isVoiceInputEnabled =
+    featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
+
   return (
     <PromptButtonCarouselWithImage
       id={id}
@@ -143,6 +162,7 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
       alt={finalImageAlt}
       textFieldPlaceholder={hardCopyContent?.textFieldPlaceholder}
       hideTextField={promptButtonCarouselWithImageWidgetConfig?.hideTextField}
+      voiceInputEnabled={isVoiceInputEnabled}
       handlePromptButtonClick={handlePromptButtonClick}
       handlePromptButtonDrag={onDrag}
       handlePromptButtonHover={onHover}
@@ -151,6 +171,8 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
       handlePromptButtonTouchStart={onTouchStart}
       handlePromptButtonTouchEnd={onTouchEnd}
       handleTextFieldClick={handleTextFieldClick}
+      onTranscriptionStarted={handleTranscriptionStarted}
+      onTranscriptionCompleted={handleTranscriptionCompleted}
     />
   );
 };

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,7 +1,6 @@
 import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
 import {
   EnviveMetricsEventName,
-  SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
@@ -10,7 +9,7 @@ import {
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { WidgetInteractionComponent } from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
@@ -65,16 +64,6 @@ 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;

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,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from 'react';
+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';
@@ -13,12 +13,12 @@ import {
 
 import {
   ChatElementDisplayLocationV3,
+  FeatureGates,
   VariantTypeEnum,
 } from '@envive-ai/react-hooks/application/models';
 import { chatPreviewLoadingDataAtom } from '@envive-ai/react-hooks/atoms/widget';
 import {
   EnviveMetricsEventName,
-  SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
@@ -30,6 +30,7 @@ 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 { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
 
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
 import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
@@ -98,6 +99,11 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
 
   const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 
+  const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+  const { featureFlagService } = useFeatureFlagService();
+  const isVoiceInputEnabled =
+    featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
+
   const productId = variantInfo.variant === VariantTypeEnum.Pdp ? variantInfo.productId : undefined;
   const dynamicImageUrl = useProductImageUrl(productId);
 
@@ -108,16 +114,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;
@@ -202,6 +198,29 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
     });
   }, [openChat]);
 
+  const handleTranscriptionStarted = useCallback(() => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.SOCIAL_PROOF,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED,
+      },
+    });
+  }, []);
+
+  const handleTranscriptionCompleted = useCallback((transcript: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.SOCIAL_PROOF,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+        widget_interaction_data: {
+          transcription: transcript,
+        },
+      },
+    });
+  }, []);
+
   if (isLoading) {
     return <ChatPreviewLoading fullIsLoading />;
   }
@@ -244,6 +263,7 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
     textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
     images: images ?? [],
     logoSrc: logoSrc ?? undefined,
+    voiceInputEnabled: isVoiceInputEnabled,
   };
 
   const widgetEventProps: SocialProofProps['widgetEventProps'] = {
@@ -257,6 +277,8 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
     handleSecondaryButtonTouchStart: onTouchStart,
     handleSecondaryButtonTouchEnd: onTouchEnd,
     handleTextFieldClick,
+    onTranscriptionStarted: handleTranscriptionStarted,
+    onTranscriptionCompleted: handleTranscriptionCompleted,
   };
 
   return (

package/src/widgets/SocialProofWidget/__tests__/SocialProofWidget.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 { SocialProofWidget } from '../SocialProofWidget';
 
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn();
 
 vi.mock('@envive-ai/react-toolkit-v3/SocialProof', async importOriginal => {
   const actual = await importOriginal();
@@ -52,6 +50,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,
@@ -146,13 +155,15 @@ describe('SocialProofWidget 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.SocialProofV3,
           },
-        });
+          '0px',
+          true,
+        );
       },
       { timeout: 3000 },
     );

package/src/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.tsx

@@ -1,7 +1,6 @@
 import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
 import {
   EnviveMetricsEventName,
-  SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
@@ -10,7 +9,7 @@ import {
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { WidgetInteractionComponent } from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
@@ -65,16 +64,6 @@ const TitledPromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
 
   const { trackEvent } = useAmplitude();
 
-  useEffect(() => {
-    trackEvent({
-      eventName: SpiffyMetricsEventName.ChatComponentVisible,
-      eventProps: {
-        widget_config_id: widgetConfigId,
-        widget_type: WidgetTypeV3.TitledPromptCarouselV3,
-      },
-    });
-  }, [trackEvent, widgetConfigId]);
-
   const handleButtonClick = useCallback(
     (text: string) => {
       const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;

package/src/widgets/TitledPromptCarouselWidget/__tests__/TitledPromptCarouselWidget.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 { TitledPromptCarouselWidget } from '../TitledPromptCarouselWidget';
 
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn();
 
 vi.mock('@envive-ai/react-toolkit-v3/TitledPromptCarousel', () => ({
   TitledPromptCarousel: ({
@@ -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,
@@ -112,13 +121,15 @@ describe('TitledPromptCarouselWidget 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.TitledPromptCarouselV3,
           },
-        });
+          '0px',
+          true,
+        );
       },
       { timeout: 3000 },
     );