@envive-ai/react-widgets-v3 0.3.13 → 0.3.14

package/dist/widgets/dist/SearchResults/SearchResultsWidget.d.cts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchResults/SearchResultsWidget.d.ts
 //#region src/SearchResults/SearchResultsWidget.d.ts
-declare const SearchResultsWidget: () => react_jsx_runtime0.JSX.Element;
+declare const SearchResultsWidget: () => react_jsx_runtime3.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/widgets/dist/SearchZeroState/SearchZeroStateWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchZeroState/SearchZeroStateWidget.d.ts
 //#region src/SearchZeroState/SearchZeroStateWidget.d.ts
@@ -11,7 +11,7 @@ declare const SearchZeroStateWidget: ({
   initialIsOpen,
   widgetConfigId,
   entryPointRef
-}: SearchZeroStateWidgetProps) => react_jsx_runtime2.JSX.Element;
+}: SearchZeroStateWidgetProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/widgets/dist/SuggestionBar/SuggestionBar.d.cts

@@ -1,5 +1,5 @@
 import { SuggestionBarLocationForMetrics } from "./types.cjs";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { SuggestionButtonVariant } from "@envive-ai/react-hooks/contexts/types";
 import { Message } from "postcss";
 
@@ -30,7 +30,7 @@ declare function SuggestionBar({
   buttonBorderRadius,
   handleReply,
   dataTestId
-}: Readonly<SuggestionBarProps>): react_jsx_runtime3.JSX.Element;
+}: Readonly<SuggestionBarProps>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#endregion
 export { SuggestionBar };

package/dist/widgets/utils/functions.cjs

@@ -44,11 +44,20 @@ const isProductComparison = (lastMsg) => {
 	if (lastMsg) return lastMsg?.filter((msg) => msg.type === __envive_ai_react_hooks_application_models.MessageType.Product).length === 2;
 	return (0, __envive_ai_react_hooks_atoms_atomStore.getAtomStore)().get(__envive_ai_react_hooks_atoms_chat.lastAssistantMessageAtom)?.filter((msg) => msg.type === __envive_ai_react_hooks_application_models.MessageType.Product).length === 2;
 };
+/** Finds the string_id (id) from raw widget text values for the given display text */
+const getStringIdForText = (rawValues, text) => {
+	if (!rawValues) return void 0;
+	for (const raw of Object.values(rawValues)) {
+		const found = (Array.isArray(raw) ? raw : [raw]).find((s) => s.value === text);
+		if (found) return found.id;
+	}
+};
 
 //#endregion
 exports.getMessageText = getMessageText;
 exports.getProductImageUrl = getProductImageUrl;
 exports.getRecentProductImageUrls = getRecentProductImageUrls;
+exports.getStringIdForText = getStringIdForText;
 exports.isLoading = isLoading;
 exports.isProductComparison = isProductComparison;
 exports.userHasInteracted = userHasInteracted;

package/dist/widgets/utils/functions.js

@@ -43,6 +43,14 @@ const isProductComparison = (lastMsg) => {
 	if (lastMsg) return lastMsg?.filter((msg) => msg.type === MessageType.Product).length === 2;
 	return getAtomStore().get(lastAssistantMessageAtom)?.filter((msg) => msg.type === MessageType.Product).length === 2;
 };
+/** Finds the string_id (id) from raw widget text values for the given display text */
+const getStringIdForText = (rawValues, text) => {
+	if (!rawValues) return void 0;
+	for (const raw of Object.values(rawValues)) {
+		const found = (Array.isArray(raw) ? raw : [raw]).find((s) => s.value === text);
+		if (found) return found.id;
+	}
+};
 
 //#endregion
-export { getMessageText, getProductImageUrl, getRecentProductImageUrls, isLoading, isProductComparison, userHasInteracted, userHasNotInteracted };
+export { getMessageText, getProductImageUrl, getRecentProductImageUrls, getStringIdForText, isLoading, isProductComparison, userHasInteracted, userHasNotInteracted };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-widgets-v3",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "description": "React widget library v3 for Envive services.",
   "keywords": [
     "react",

package/src/CXIntegration/implementations/useHelpScoutUnifiedCXButton.ts

@@ -0,0 +1,108 @@
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+
+const BEACON_CONTAINER_ID = 'beacon-container';
+
+interface UseHelpScoutUnifiedCXButtonProps extends CustomerServiceImplProps {}
+
+export const useHelpScoutUnifiedCXButton = ({
+  onSwitchToAgent,
+  suppressMerchantButton,
+}: UseHelpScoutUnifiedCXButtonProps): UnifiedCXButton => {
+  const beaconContainer = useElementObserver(SelectorFactory.id(BEACON_CONTAINER_ID));
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+
+  const toggle = () => {
+    onSwitchToAgent();
+
+    // Try using the Help Scout Beacon API first
+    if (typeof (window as any).Beacon !== 'undefined') {
+      (window as any).Beacon('open');
+    } else {
+      // Fallback: Find and click the FAB button
+      const container = document.getElementById(BEACON_CONTAINER_ID);
+      const fabButton = container?.querySelector('.BeaconFabButtonFrame') as HTMLElement;
+      if (fabButton) {
+        fabButton.style.display = '';
+        fabButton.click();
+      }
+    }
+
+    if (suppressMerchantButton) {
+      enviveFloatingButton.hide();
+    }
+  };
+
+  const isHelpScoutButtonEnabled = () => {
+    // Check for the main Help Scout Beacon container
+    const beaconContainerEl = document.getElementById('beacon-container');
+    if (!beaconContainerEl) return false;
+
+    // Check for the FAB button (Floating Action Button) or the global Beacon API
+    const fabButton = beaconContainerEl.querySelector('.BeaconFabButtonFrame');
+    const hasBeaconAPI = typeof (window as any).Beacon !== 'undefined';
+
+    return !!(fabButton || hasBeaconAPI);
+  };
+
+  const isSwitchEnabled = () => isHelpScoutButtonEnabled();
+
+  // Hide Help Scout FAB button when beacon container is added
+  beaconContainer.onAdd(() => {
+    if (suppressMerchantButton) {
+      const fabButton = document
+        .getElementById(BEACON_CONTAINER_ID)
+        ?.querySelector('.BeaconFabButtonFrame') as HTMLElement;
+      if (fabButton) {
+        fabButton.style.display = 'none';
+      }
+      enviveFloatingButton.show();
+    }
+  });
+
+  // Observe the beacon container for visibility changes
+  // Help Scout Beacon adds/removes classes to show/hide the widget
+  beaconContainer.onChange(el => {
+    if (el && suppressMerchantButton) {
+      // Check if the BeaconContainer widget is open
+      const beaconWidget = el.querySelector('.BeaconContainer');
+      const fabButton = el.querySelector('.BeaconFabButtonFrame') as HTMLElement;
+
+      if (beaconWidget && fabButton) {
+        const { classList } = beaconWidget;
+
+        // When beacon is open (has enter-done class)
+        if (
+          classList.contains('BeaconContainer-enter-done') ||
+          classList.contains('BeaconContainer-enter-active')
+        ) {
+          fabButton.style.display = '';
+          enviveFloatingButton.hide();
+        }
+
+        // When beacon is closed (has exit class)
+        if (
+          classList.contains('BeaconContainer-exit') ||
+          classList.contains('BeaconContainer-exit-active')
+        ) {
+          fabButton.style.display = 'none';
+          enviveFloatingButton.show();
+        }
+      }
+    }
+  });
+
+  // Cleanup when container is removed
+  beaconContainer.onRemove(() => {
+    if (suppressMerchantButton) {
+      enviveFloatingButton.show();
+    }
+  });
+
+  return {
+    toggle,
+    isSwitchEnabled,
+  };
+};

package/src/CXIntegration/implementations/useTalkdeskUnifiedCXButton.ts

@@ -0,0 +1,94 @@
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+
+interface UseTalkdeskUnifiedCXButtonProps extends CustomerServiceImplProps {}
+
+export const useTalkdeskUnifiedCXButton = ({
+  onSwitchToAgent,
+  suppressMerchantButton,
+}: UseTalkdeskUnifiedCXButtonProps): UnifiedCXButton => {
+  const talkdeskButton = useElementObserver(SelectorFactory.id('talkdesk-chat-widget-trigger'));
+  const talkdeskWidget = useElementObserver(SelectorFactory.id('talkdesk-chat-widget'));
+  const talkdeskContainer = useElementObserver(SelectorFactory.id('tdWebchat'));
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+
+  const toggle = () => {
+    onSwitchToAgent();
+    if (suppressMerchantButton) {
+      enviveFloatingButton.hide();
+    }
+    talkdeskButton.show();
+    talkdeskButton.fire('click');
+  };
+
+  const isTalkdeskButtonEnabled = () => {
+    // Check for the main Talkdesk container
+    const talkdeskMainContainer = document.getElementById('tdWebchat');
+    if (!talkdeskMainContainer) return false;
+
+    // Check for the trigger button (it's directly in the DOM, not inside an iframe)
+    const talkdeskTriggerButton = document.getElementById('talkdesk-chat-widget-trigger');
+    return !!talkdeskTriggerButton;
+  };
+
+  const isSwitchEnabled = () => isTalkdeskButtonEnabled();
+
+  // Hide Talkdesk button when it's added to DOM (if suppressMerchantButton is enabled)
+  talkdeskButton.onAdd(() => {
+    if (suppressMerchantButton) {
+      talkdeskButton.hide();
+      enviveFloatingButton.show();
+    }
+  });
+
+  // Observe the widget container (NOT the button) to avoid infinite loops
+  talkdeskWidget.onAdd(el => {
+    if (el && suppressMerchantButton) {
+      const ariaHidden = el.getAttribute('aria-hidden');
+
+      // Widget is open initially (aria-hidden="false")
+      if (ariaHidden === 'false') {
+        talkdeskButton.show();
+        enviveFloatingButton.hide();
+      } else {
+        // Widget is closed initially
+        talkdeskButton.hide();
+        enviveFloatingButton.show();
+      }
+    }
+  });
+
+  // Track widget visibility changes
+  talkdeskWidget.onChange(el => {
+    if (el && suppressMerchantButton) {
+      const ariaHidden = el.getAttribute('aria-hidden');
+
+      // Widget is open (aria-hidden="false")
+      if (ariaHidden === 'false') {
+        talkdeskButton.show();
+        enviveFloatingButton.hide();
+      }
+
+      // Widget is closed (aria-hidden="true")
+      if (ariaHidden === 'true') {
+        talkdeskButton.hide();
+        enviveFloatingButton.show();
+      }
+    }
+  });
+
+  // Cleanup when container is removed
+  talkdeskContainer.onRemove(() => {
+    if (suppressMerchantButton) {
+      talkdeskButton.hide();
+      enviveFloatingButton.show();
+    }
+  });
+
+  return {
+    toggle,
+    isSwitchEnabled,
+  };
+};

package/src/CXIntegration/types.ts

@@ -9,6 +9,8 @@ export enum CustomerServiceType {
   gladly = 'gladly',
   richpanel = 'richpanel',
   zendesk = 'zendesk',
+  helpscout = 'helpscout',
+  talkdesk = 'talkdesk',
   eightByEight = '8x8',
   unsupported = 'unsupported',
 }

package/src/CXIntegration/utils/functions.ts

@@ -10,6 +10,8 @@ import { useReDoUnifiedCXButton } from '../implementations/useReDoUnifiedCXButto
 import { useRichpanelUnifiedCXButton } from '../implementations/useRichpanelUnifiedCXButton';
 import { useZendeskUnifiedCXButton } from '../implementations/useZendeskUnifiedCXButton';
 import { useKustomerUnifiedCXButton } from '../implementations/useKustomerUnifiedCXButton';
+import { useHelpScoutUnifiedCXButton } from '../implementations/useHelpScoutUnifiedCXButton';
+import { useTalkdeskUnifiedCXButton } from '../implementations/useTalkdeskUnifiedCXButton';
 import { useEightByEightUnifiedCXButton } from '../implementations/useEightByEightUnifiedCXButton';
 import { useDefaultUnifiedCXButton } from '../implementations/useDefaultUnifiedCXButton';
 
@@ -46,6 +48,12 @@ export const findCustomerServiceImpl = (
   if (provider === CustomerServiceType.zendesk) {
     return useZendeskUnifiedCXButton;
   }
+  if (provider === CustomerServiceType.helpscout) {
+    return useHelpScoutUnifiedCXButton;
+  }
+  if (provider === CustomerServiceType.talkdesk) {
+    return useTalkdeskUnifiedCXButton;
+  }
   if (provider === CustomerServiceType.eightByEight) {
     return useEightByEightUnifiedCXButton;
   }

package/src/hocs/withBaseWidget/__tests__/withBaseWidget.test.tsx

@@ -66,7 +66,7 @@ class MockIntersectionObserver implements IntersectionObserver {
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
 
-vi.mock('src/contexts/amplitudeContext/amplitudeContext', () => ({
+vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
   useAmplitude: () => ({
     trackEvent: mockTrackEvent,
     isReady: true,
@@ -77,13 +77,13 @@ vi.mock('src/contexts/amplitudeContext/amplitudeContext', () => ({
   },
 }));
 
-vi.mock('src/contexts/hardcopyContext', () => ({
+vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
   useHardcopy: () => ({
     getHardcopy: mockGetHardcopy,
   }),
 }));
 
-vi.mock('src/contexts/pageContext', () => ({
+vi.mock('@envive-ai/react-hooks/contexts/pageContext', () => ({
   usePage: () => ({
     userEvent: {
       id: 'test-user-event-id',
@@ -94,6 +94,18 @@ vi.mock('src/contexts/pageContext', () => ({
   }),
 }));
 
+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({}),
+  }),
+}));
+
 // Test widget component
 interface TestWidgetProps extends BaseWidgetProps {
   testId?: string;

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

@@ -0,0 +1,114 @@
+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 { ChatPreviewWidget } from '../ChatPreviewWidget';
+
+const mockTrackEvent = vi.fn();
+const mockGetHardcopy = vi.fn();
+
+vi.mock('@envive-ai/react-toolkit-v3/ChatPreview', () => ({
+  ChatPreview: () => <div data-testid="chat-preview-mock">Chat Preview</div>,
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
+  useAmplitude: () => ({
+    trackEvent: mockTrackEvent,
+    isReady: true,
+  }),
+  SpiffyMetricsEventName: {
+    ChatComponentVisible: 'Chat Component Visible',
+    SearchComponentVisible: 'Search Component Visible',
+  },
+}));
+
+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: () => ({
+    onSuggestionClicked: vi.fn(),
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/hooks/ChatToggle', () => ({
+  useChatToggle: () => ({
+    openChat: vi.fn(),
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/atoms/chat', () => ({
+  chatAtom: {},
+  lastAssistantMessageAtom: {},
+}));
+
+vi.mock('jotai', async importOriginal => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    useAtomValue: vi
+      .fn()
+      .mockReturnValueOnce([])
+      .mockReturnValueOnce({ messages: [], suggestions: [] })
+      .mockReturnValue([]),
+  };
+});
+
+describe('ChatPreviewWidget analytics', () => {
+  const defaultHardcopy = {
+    responseId: 'test-response-id',
+    language: 'en',
+    values: {
+      titleLabel: 'Chat Preview',
+      textFieldPlaceholderText: 'Type here',
+    },
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockGetHardcopy.mockResolvedValue(defaultHardcopy);
+  });
+
+  it('should track ChatComponentVisible when widget mounts', async () => {
+    render(<ChatPreviewWidget widgetConfigId="test-config-1" />);
+
+    await waitFor(
+      () => {
+        expect(mockTrackEvent).toHaveBeenCalledWith({
+          eventName: SpiffyMetricsEventName.ChatComponentVisible,
+          eventProps: {
+            widget_config_id: 'test-config-1',
+            widget_type: WidgetTypeV3.ChatPreviewV3,
+          },
+        });
+      },
+      { timeout: 3000 },
+    );
+  }, 5000);
+});

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

@@ -0,0 +1,119 @@
+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();
+
+vi.mock('@envive-ai/react-toolkit-v3/FloatingButton', () => ({
+  FloatingButton: () => <div data-testid="floating-button">Floating Button</div>,
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
+  useAmplitude: () => ({
+    trackEvent: mockTrackEvent,
+    isReady: true,
+  }),
+  SpiffyMetricsEventName: {
+    ChatComponentVisible: 'Chat Component Visible',
+    SearchComponentVisible: 'Search Component Visible',
+  },
+}));
+
+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({
+      floatingButton: { showOption: 'always', position: 'bottom-right' },
+      floatingChat: {},
+      lookAndFeel: {},
+    }),
+  }),
+}));
+
+vi.mock('@envive-ai/react-hooks/contexts/salesAgentContext', () => ({
+  useSalesAgent: () => ({}),
+}));
+
+vi.mock('@envive-ai/react-hooks/hooks/ChatToggle', () => ({
+  useChatToggle: () => ({
+    isOpen: false,
+    openChat: vi.fn(),
+    closeChat: vi.fn(),
+  }),
+}));
+
+vi.mock('../hooks/useFloatingButtonVisibility', () => ({
+  useFloatingButtonVisibility: () => ({
+    shouldShowFloatingButton: true,
+  }),
+}));
+
+vi.mock('../hooks/useAutoPopup', () => ({
+  useAutoPopup: () => {},
+}));
+
+vi.mock('../../hooks/useGetWidgetStatus', () => ({
+  default: () => ({
+    userHasInteractedValue: false,
+  }),
+}));
+
+vi.mock('src/debug/debugBar', () => ({
+  DebugBar: () => null,
+}));
+
+vi.mock('../../CXIntegration/hooks/useUnifiedCXButton', () => ({
+  useUnifiedCXButton: () => ({
+    isSwitchEnabled: () => false,
+    toggle: vi.fn(),
+  }),
+}));
+
+describe('FloatingChatWidget analytics', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockGetHardcopy.mockResolvedValue({ language: 'en', values: {} });
+  });
+
+  it('should track ChatComponentVisible when floating button is shown', async () => {
+    render(<FloatingChatWidget previewButtonOnly />);
+
+    await waitFor(
+      () => {
+        expect(mockTrackEvent).toHaveBeenCalledWith({
+          eventName: SpiffyMetricsEventName.ChatComponentVisible,
+          eventProps: {
+            widget_config_id: 'floating-button',
+            widget_type: WidgetTypeV3.FloatingButtonV3,
+          },
+        });
+      },
+      { timeout: 3000 },
+    );
+  }, 5000);
+});

package/src/widgets/ProductCardWidget/ProductCardWidget.tsx

@@ -2,6 +2,7 @@ import { ProductCardWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/
 import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
 import { useCallback, useEffect } from 'react';
 import {
+  EnviveMetricsEventName,
   SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
@@ -11,6 +12,7 @@ import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { ProductCard } from '@envive-ai/react-toolkit-v3/ProductCard';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
+import { RawValues, getStringIdForText } from '../utils/functions';
 
 const mockPrompts = [
   'Loading prompt 1',
@@ -63,15 +65,25 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
   }, [trackEvent, widgetConfigId]);
 
   const handleSelect = useCallback(
-    (prompt: string) => {
+    (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: prompt,
+        query: text,
         userTyped: false,
         displayLocation: ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON,
       });
       openChat(ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON);
     },
-    [onTypedMessageSubmitted, openChat],
+    [hardcopyContent, onTypedMessageSubmitted, openChat, trackEvent],
   );
 
   const handleInputClick = useCallback(() => {