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

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,20 +1,24 @@
-import {
-  TitledPromptCarouselWidgetV3Config,
-  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 {
+  TitledPromptCarouselWidgetV3Config,
+  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 {
+  AnimationSpeed,
+  PromptCarouselRows,
+  usePromptCarouselAnalytics,
+} from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { TitledPromptCarousel } from '@envive-ai/react-toolkit-v3/TitledPromptCarousel';
-import { AnimationSpeed, PromptCarouselRows } from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
 import { RawValues, getStringIdForText } from '../utils/functions';
 
@@ -33,6 +37,9 @@ const TitledPromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
   const { openChat } = useChatToggle();
   const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
 
+  const { onClick, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } =
+    usePromptCarouselAnalytics(WidgetInteractionComponent.EMBEDDED_WIDGET, text => text);
+
   const hardCopyTitleLabel = hardcopyContent?.values?.titleLabel as string | undefined;
   const titleLabel = isLoading ? mockTitleLabel : hardCopyTitleLabel;
 
@@ -57,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;
@@ -85,6 +82,7 @@ const TitledPromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
         displayLocation: ChatElementDisplayLocationV3.TITLED_PROMPT_CAROUSEL,
       });
       openChat(ChatElementDisplayLocationV3.TITLED_PROMPT_CAROUSEL);
+      onClick(text);
     },
     [onTypedMessageSubmitted, openChat],
   );
@@ -100,6 +98,12 @@ const TitledPromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
       promptCarouselRows={promptCarouselRows as PromptCarouselRows}
       animationSpeed={animationSpeed as AnimationSpeed}
       handleButtonClick={handleButtonClick}
+      handleButtonDrag={onDrag}
+      handleButtonHover={onHover}
+      handleButtonMouseDown={onMouseDown}
+      handleButtonMouseUp={onMouseUp}
+      handleButtonTouchStart={onTouchStart}
+      handleButtonTouchEnd={onTouchEnd}
       promptButtonTexts={buttonTexts}
       promptCarouselAriaLabel={promptCarouselAriaLabel}
     />

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 },
     );

package/src/widgets/TypingAnimationWidget/TypingAnimationWidget.tsx

@@ -1,21 +1,28 @@
-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, useEffect } from 'react';
 import { ChatElementDisplayLocationV3 } 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 { 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 {
+  TypingAnimationWidgetV3Config,
+  WidgetTypeV3,
+} from '@envive-ai/react-hooks/contexts/typesV3';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
+import {
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
+import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
+import {
+  PromptCarouselRows,
+  usePromptCarouselAnalytics,
+} from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { TypingAnimation } from '@envive-ai/react-toolkit-v3/TypingAnimation';
+import { WidgetWrapperVariant } from '@envive-ai/react-toolkit-v3/WidgetWrapper';
+import { useSetAtom } from 'jotai';
+import { useCallback } from 'react';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
 import { RawValues, getStringIdForText } from '../utils/functions';
 
@@ -64,16 +71,19 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
   const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 
   const { trackEvent } = useAmplitude();
-
-  useEffect(() => {
-    trackEvent({
-      eventName: SpiffyMetricsEventName.ChatComponentVisible,
-      eventProps: {
-        widget_config_id: widgetConfigId,
-        widget_type: WidgetTypeV3.TypingAnimationV3,
-      },
-    });
-  }, [trackEvent, widgetConfigId]);
+  const { trackWidgetInteraction } = useWidgetInteraction();
+  const {
+    onClick: onPromptClicked,
+    onDrag,
+    onHover,
+    onMouseDown,
+    onMouseUp,
+    onTouchStart,
+    onTouchEnd,
+  } = usePromptCarouselAnalytics(WidgetInteractionComponent.EMBEDDED_WIDGET, text => {
+    const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;
+    return getStringIdForText(rawValues, text);
+  });
 
   const handleButtonClick = useCallback(
     (text: string) => {
@@ -93,12 +103,20 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
         displayLocation: ChatElementDisplayLocationV3.TYPING_ANIMATION,
       });
       onToggle(ChatElementDisplayLocationV3.TYPING_ANIMATION);
+      onPromptClicked(text);
     },
     [hardcopyContent, trackEvent, onTypedMessageSubmitted, onToggle],
   );
 
   const handleTextFieldClick = useCallback(() => {
     onToggle(ChatElementDisplayLocationV3.TYPING_ANIMATION);
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.EMBEDDED_WIDGET,
+        widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
+      },
+    });
   }, [onToggle]);
 
   return (
@@ -126,6 +144,12 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
       }}
       widgetEventProps={{
         handleButtonClick,
+        handleButtonDrag: onDrag,
+        handleButtonHover: onHover,
+        handleButtonMouseDown: onMouseDown,
+        handleButtonMouseUp: onMouseUp,
+        handleButtonTouchStart: onTouchStart,
+        handleButtonTouchEnd: onTouchEnd,
         handleTextFieldClick,
       }}
     />

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 });

package/dist/packages/icons/dist/_virtual/rolldown_runtime.cjs

@@ -1,27 +0,0 @@
-
-//#region ../icons/dist/_virtual/rolldown_runtime.js
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-
-//#endregion
-exports.__commonJSMin = __commonJSMin;
-exports.__toESM = __toESM;

package/dist/packages/icons/dist/_virtual/rolldown_runtime.js

@@ -1,25 +0,0 @@
-//#region ../icons/dist/_virtual/rolldown_runtime.js
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-
-//#endregion
-export { __commonJSMin, __toESM };