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

package/src/widgets/TypingAnimationWidget/TypingAnimationWidget.tsx

@@ -1,21 +1,30 @@
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { chatOnToggleAtom } from '@envive-ai/react-hooks/atoms/chat/chatState';
+import {
+  EnviveMetricsEventName,
+  useAmplitude,
+} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 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 { WidgetWrapperVariant } from '@envive-ai/react-toolkit-v3/WidgetWrapper';
-import { useCallback, useEffect } from 'react';
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
 import {
-  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';
+  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';
 
 const mockButtonTexts = [
   'Loading button 1',
@@ -33,7 +42,7 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
   const { onTypedMessageSubmitted } = useSalesAgent();
   const onToggle = useSetAtom(chatOnToggleAtom);
 
-  const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
+  const { hardcopyContent, widgetConfig, uiConfig, isLoading, widgetConfigId } = props;
 
   const titleLabel = (hardcopyContent?.values?.titleLabel as string | undefined) || '';
   const headlineText = (hardcopyContent?.values?.headlineText as string | undefined) || '';
@@ -58,32 +67,56 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
     typingAnimationWidgetConfig?.promptCarouselRows || PromptCarouselRows.ALWAYS_ONE;
   const showTextField = typingAnimationWidgetConfig?.showTextField !== false; // Default: true
 
-  const { trackEvent } = useAmplitude();
+  const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
+  const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 
-  useEffect(() => {
-    trackEvent({
-      eventName: SpiffyMetricsEventName.ChatComponentVisible,
-      eventProps: {
-        widget_config_id: widgetConfigId,
-        widget_type: WidgetTypeV3.TypingAnimationV3,
-      },
-    });
-  }, [trackEvent, widgetConfigId]);
+  const { trackEvent } = useAmplitude();
+  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) => {
+      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.TYPING_ANIMATION,
       });
       onToggle(ChatElementDisplayLocationV3.TYPING_ANIMATION);
+      onPromptClicked(text);
     },
-    [onTypedMessageSubmitted, onToggle],
+    [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 (
@@ -98,6 +131,8 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
         promptButtonTexts: buttonTexts,
         hintText: isLoading ? mockHintText : hintText,
         textFieldAriaLabel,
+        logoSrc: logoSrc ?? undefined,
+        hideLogo: hideLogo ?? false,
       }}
       widgetStyleProps={{
         widgetVariant,
@@ -109,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

@@ -0,0 +1,174 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { atom } from 'jotai';
+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: ({
+    widgetContentProps,
+    widgetEventProps,
+  }: {
+    widgetContentProps: { promptButtonTexts: string[] };
+    widgetEventProps: { handleButtonClick: (text: string) => void };
+  }) => (
+    <div data-testid="typing-animation-mock">
+      {widgetContentProps.promptButtonTexts.map(text => (
+        <button
+          key={text}
+          type="button"
+          onClick={() => widgetEventProps.handleButtonClick(text)}
+        >
+          {text}
+        </button>
+      ))}
+    </div>
+  ),
+}));
+const mockGetHardcopy = vi.fn();
+const mockOnTypedMessageSubmitted = vi.fn();
+const mockOpenChat = vi.fn();
+const mockSetAtom = vi.fn();
+
+vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
+  useAmplitude: () => ({
+    trackEvent: mockTrackEvent,
+    isReady: true,
+  }),
+  SpiffyMetricsEventName: {
+    ChatComponentVisible: 'Chat Component Visible',
+    SearchComponentVisible: 'Search Component Visible',
+  },
+  EnviveMetricsEventName: {
+    WidgetTextClicked: 'Widget Text Clicked',
+  },
+}));
+
+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,
+  }),
+}));
+
+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: () => ({
+    onTypedMessageSubmitted: mockOnTypedMessageSubmitted,
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/hooks/ChatToggle', () => ({
+  useChatToggle: () => ({
+    openChat: mockOpenChat,
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/atoms/chat/chatState', () => ({
+  chatOnToggleAtom: atom(null),
+}));
+
+describe('TypingAnimationWidget analytics', () => {
+  const defaultHardcopy = {
+    responseId: 'test-response-id',
+    language: 'en',
+    values: {
+      promptButtonTexts: ['Button 1', 'Button 2', 'Button 3'],
+      titleLabel: 'Test Title',
+      headlineText: 'Headline',
+      animatedTextSequence: ['...'],
+      hintText: 'Ask me anything',
+    },
+    rawValues: {
+      promptButtonTexts: [
+        { id: 'id-1', value: 'Button 1' },
+        { id: 'id-2', value: 'Button 2' },
+      ],
+    },
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockGetHardcopy.mockResolvedValue(defaultHardcopy);
+  });
+
+  it('should track ChatComponentVisible when widget mounts', async () => {
+    render(<TypingAnimationWidget widgetConfigId="test-config-1" />);
+
+    await waitFor(
+      () => {
+        expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+          expect.any(Object),
+          {
+            widget_config_id: 'test-config-1',
+            widget_type: WidgetTypeV3.TypingAnimationV3,
+          },
+          '0px',
+          true,
+        );
+      },
+      { timeout: 3000 },
+    );
+  }, 5000);
+
+  it('should track WidgetTextClicked when button is clicked', async () => {
+    render(<TypingAnimationWidget widgetConfigId="test-config-2" />);
+
+    await waitFor(
+      () => {
+        expect(screen.getByText('Button 1')).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
+
+    mockTrackEvent.mockClear();
+
+    const button = screen.getByText('Button 1');
+    button.click();
+
+    expect(mockTrackEvent).toHaveBeenCalledWith({
+      eventName: EnviveMetricsEventName.WidgetTextClicked,
+      eventProps: {
+        response_id: 'test-response-id',
+        string_id: 'id-1',
+        text: 'Button 1',
+      },
+    });
+  }, 5000);
+});

package/src/widgets/__tests__/testUtils.tsx

@@ -0,0 +1,63 @@
+import { RenderOptions, render } from '@testing-library/react';
+import { ReactElement } from 'react';
+import { UserEvent, UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import {
+  EnviveMetricsEventName,
+  SpiffyMetricsEventName,
+} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+
+export const mockTrackEvent = vi.fn();
+
+export const defaultHardcopyResponse = {
+  responseId: 'test-response-id',
+  language: 'en',
+  values: {
+    promptButtonTexts: ['Button 1', 'Button 2', 'Button 3'],
+    titleLabel: 'Test Title',
+    headlineText: 'Headline',
+    headline: 'Product Headline',
+    animatedTextSequence: ['...'],
+    hintText: 'Ask me anything',
+    prompts: ['Prompt 1', 'Prompt 2'],
+    primaryButtonText: 'Primary',
+    secondaryButtonTexts: ['Secondary 1'],
+    promptButtonsTexts: ['Prompt A', 'Prompt B'],
+  },
+  rawValues: {
+    promptButtonTexts: [
+      { id: 'id-1', value: 'Button 1' },
+      { id: 'id-2', value: 'Button 2' },
+    ],
+  },
+};
+
+export const defaultUserEvent = {
+  id: 'test-user-event-id',
+  category: UserEventCategory.PageVisit,
+  created_at: '2025-01-01T00:00:00Z',
+  event_id: 'test-event-id',
+} as UserEvent;
+
+export function createWidgetTestMocks(overrides?: {
+  trackEvent?: ReturnType<typeof vi.fn>;
+  hardcopy?: Partial<typeof defaultHardcopyResponse>;
+}) {
+  const trackEvent = overrides?.trackEvent ?? mockTrackEvent;
+  const hardcopy = { ...defaultHardcopyResponse, ...overrides?.hardcopy };
+
+  return {
+    trackEvent,
+    hardcopy,
+    getHardcopy: vi.fn().mockResolvedValue(hardcopy),
+    userEvent: defaultUserEvent,
+  };
+}
+
+export function renderWithWidgetProviders(
+  ui: ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>,
+) {
+  return render(ui, options);
+}
+
+export { EnviveMetricsEventName, SpiffyMetricsEventName };

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

@@ -0,0 +1,45 @@
+import { readFileSync, readdirSync } from 'node:fs';
+import { join } from 'node:path';
+
+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 = 7;
+
+function getAllSourceFiles(dir: string, files: string[] = []): string[] {
+  const entries = readdirSync(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      if (!entry.name.startsWith('.') && entry.name !== 'node_modules') {
+        getAllSourceFiles(fullPath, files);
+      }
+    } else if (entry.isFile() && /\.(ts|tsx)$/.test(entry.name)) {
+      files.push(fullPath);
+    }
+  }
+  return files;
+}
+
+describe('trackEvent canary', () => {
+  it('should not add new trackEvent calls without updating this test', () => {
+    const files = getAllSourceFiles(WIDGETS_SRC_DIR).filter(
+      file =>
+        !file.includes('__tests__') && !file.includes('.test.') && !file.includes('.stories.'),
+    );
+
+    let count = 0;
+    for (const file of files) {
+      const content = readFileSync(file, 'utf-8');
+      const matches = content.match(/trackEvent\s*\(\s*\{/g);
+      if (matches) {
+        count += matches.length;
+      }
+    }
+
+    expect(count).toBe(EXPECTED_TRACK_EVENT_CALL_COUNT);
+  });
+});

package/src/widgets/utils/functions.ts

@@ -102,3 +102,19 @@ export const isProductComparison = (lastMsg?: Message[] | null | undefined): boo
   const lastAssistantMessage = atomStore.get(lastAssistantMessageAtom);
   return lastAssistantMessage?.filter(msg => msg.type === MessageType.Product).length === 2;
 };
+
+type RawWidgetString = { id: string; value: string };
+export type RawValues = Record<string, RawWidgetString | RawWidgetString[]>;
+/** Finds the string_id (id) from raw widget text values for the given display text */
+export const getStringIdForText = (
+  rawValues: RawValues | undefined,
+  text: string,
+): string | undefined => {
+  if (!rawValues) return undefined;
+  for (const raw of Object.values(rawValues)) {
+    const list = Array.isArray(raw) ? raw : [raw];
+    const found = list.find((s: RawWidgetString) => s.value === text);
+    if (found) return found.id;
+  }
+  return undefined;
+};

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