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

package/src/widgets/TypingAnimationWidget/TypingAnimationWidget.tsx

@@ -1,11 +1,14 @@
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import {
+  ChatElementDisplayLocationV3,
+  FeatureGates,
+} from '@envive-ai/react-hooks/application/models';
 import { chatOnToggleAtom } from '@envive-ai/react-hooks/atoms/chat/chatState';
 import {
   EnviveMetricsEventName,
-  SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
 import {
   TypingAnimationWidgetV3Config,
   WidgetTypeV3,
@@ -23,7 +26,7 @@ import {
 import { TypingAnimation } from '@envive-ai/react-toolkit-v3/TypingAnimation';
 import { WidgetWrapperVariant } from '@envive-ai/react-toolkit-v3/WidgetWrapper';
 import { useSetAtom } from 'jotai';
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
 import { RawValues, getStringIdForText } from '../utils/functions';
 
@@ -43,7 +46,7 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
   const { onTypedMessageSubmitted } = useSalesAgent();
   const onToggle = useSetAtom(chatOnToggleAtom);
 
-  const { hardcopyContent, widgetConfig, uiConfig, isLoading, widgetConfigId } = props;
+  const { hardcopyContent, widgetConfig, uiConfig, isLoading } = props;
 
   const titleLabel = (hardcopyContent?.values?.titleLabel as string | undefined) || '';
   const headlineText = (hardcopyContent?.values?.headlineText as string | undefined) || '';
@@ -70,6 +73,10 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
 
   const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
   const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
+  const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+  const { featureFlagService } = useFeatureFlagService();
+  const isVoiceInputEnabled =
+    featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
 
   const { trackEvent } = useAmplitude();
   const { trackWidgetInteraction } = useWidgetInteraction();
@@ -86,16 +93,6 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
     return getStringIdForText(rawValues, text);
   });
 
-  useEffect(() => {
-    trackEvent({
-      eventName: SpiffyMetricsEventName.ChatComponentVisible,
-      eventProps: {
-        widget_config_id: widgetConfigId,
-        widget_type: WidgetTypeV3.TypingAnimationV3,
-      },
-    });
-  }, [trackEvent, widgetConfigId]);
-
   const handleButtonClick = useCallback(
     (text: string) => {
       const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;
@@ -130,6 +127,29 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
     });
   }, [onToggle]);
 
+  const handleTranscriptionStarted = useCallback(() => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.EMBEDDED_WIDGET,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED,
+      },
+    });
+  }, []);
+
+  const handleTranscriptionCompleted = useCallback((transcript: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.EMBEDDED_WIDGET,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+        widget_interaction_data: {
+          transcription: transcript,
+        },
+      },
+    });
+  }, []);
+
   return (
     <TypingAnimation
       baseProps={{
@@ -144,6 +164,7 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
         textFieldAriaLabel,
         logoSrc: logoSrc ?? undefined,
         hideLogo: hideLogo ?? false,
+        voiceInputEnabled: isVoiceInputEnabled,
       }}
       widgetStyleProps={{
         widgetVariant,
@@ -162,6 +183,8 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
         handleButtonTouchStart: onTouchStart,
         handleButtonTouchEnd: onTouchEnd,
         handleTextFieldClick,
+        onTranscriptionStarted: handleTranscriptionStarted,
+        onTranscriptionCompleted: handleTranscriptionCompleted,
       }}
     />
   );

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

@@ -1,14 +1,12 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import { atom } from 'jotai';
-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 { TypingAnimationWidget } from '../TypingAnimationWidget';
 
 const mockTrackEvent = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn();
 
 vi.mock('@envive-ai/react-toolkit-v3/TypingAnimation', () => ({
   TypingAnimation: ({
@@ -50,6 +48,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,
@@ -124,13 +133,15 @@ describe('TypingAnimationWidget 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.TypingAnimationV3,
           },
-        });
+          '0px',
+          true,
+        );
       },
       { timeout: 3000 },
     );

package/src/widgets/__tests__/trackEventCanary.test.ts

@@ -7,7 +7,7 @@ const WIDGETS_SRC_DIR = join(process.cwd(), 'src');
  * Known count of trackEvent({ invocations in widget source files (excluding tests and stories).
  * Update this when adding new trackEvent calls - and add a test for the new event!
  */
-const EXPECTED_TRACK_EVENT_CALL_COUNT = 15;
+const EXPECTED_TRACK_EVENT_CALL_COUNT = 7;
 
 function getAllSourceFiles(dir: string, files: string[] = []): string[] {
   const entries = readdirSync(dir, { withFileTypes: true });