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

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.js

@@ -1,16 +1,17 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
 import "../../hocs/withBaseWidget/index.js";
 import { getStringIdForText } from "../utils/functions.js";
-import { useCallback, useEffect } from "react";
-import { EnviveMetricsEventName, SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+import { useCallback } from "react";
+import { EnviveMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
 import { jsx } from "react/jsx-runtime";
-import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
 import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
 import { useSetAtom } from "jotai";
-import { ChatElementDisplayLocationV3 } from "@envive-ai/react-hooks/application/models";
-import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
+import { useFeatureFlagService } from "@envive-ai/react-hooks/contexts/featureFlagServiceContext";
+import { ChatElementDisplayLocationV3, FeatureGates } from "@envive-ai/react-hooks/application/models";
+import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
 import { WidgetInteractionComponent, WidgetInteractionType } from "@envive-ai/react-hooks/hooks/WidgetInteraction/types";
 import { PromptCarouselRows, usePromptCarouselAnalytics } from "@envive-ai/react-toolkit-v3/PromptCarousel";
+import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
 import { chatOnToggleAtom } from "@envive-ai/react-hooks/atoms/chat/chatState";
 import { PromptButtonVariant } from "@envive-ai/react-toolkit-v3/PromptButton/types";
 import { TypingAnimation } from "@envive-ai/react-toolkit-v3/TypingAnimation";
@@ -30,7 +31,7 @@ const mockHintText = "Ask me anything";
 const TypingAnimationWidgetHandler = (props) => {
 	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 || "";
 	const headlineText = hardcopyContent?.values?.headlineText || "";
 	const animatedTextSequence = hardcopyContent?.values?.animatedTextSequence || [];
@@ -47,21 +48,15 @@ const TypingAnimationWidgetHandler = (props) => {
 	const showTextField = typingAnimationWidgetConfig?.showTextField !== false;
 	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();
 	const { onClick: onPromptClicked, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = usePromptCarouselAnalytics(WidgetInteractionComponent.EMBEDDED_WIDGET, (text) => {
 		const rawValues = hardcopyContent?.rawValues;
 		return getStringIdForText(rawValues, text);
 	});
-	useEffect(() => {
-		trackEvent({
-			eventName: SpiffyMetricsEventName.ChatComponentVisible,
-			eventProps: {
-				widget_config_id: widgetConfigId,
-				widget_type: WidgetTypeV3.TypingAnimationV3
-			}
-		});
-	}, [trackEvent, widgetConfigId]);
 	const handleButtonClick = useCallback((text) => {
 		const rawValues = hardcopyContent?.rawValues;
 		const stringId = getStringIdForText(rawValues, text);
@@ -96,6 +91,25 @@ const TypingAnimationWidgetHandler = (props) => {
 			}
 		});
 	}, [onToggle]);
+	const handleTranscriptionStarted = useCallback(() => {
+		trackWidgetInteraction({
+			eventName: EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: WidgetInteractionComponent.EMBEDDED_WIDGET,
+				widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED
+			}
+		});
+	}, []);
+	const handleTranscriptionCompleted = useCallback((transcript) => {
+		trackWidgetInteraction({
+			eventName: EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: WidgetInteractionComponent.EMBEDDED_WIDGET,
+				widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+				widget_interaction_data: { transcription: transcript }
+			}
+		});
+	}, []);
 	return /* @__PURE__ */ jsx(TypingAnimation, {
 		baseProps: { id },
 		widgetContentProps: {
@@ -106,7 +120,8 @@ const TypingAnimationWidgetHandler = (props) => {
 			hintText: isLoading ? mockHintText : hintText,
 			textFieldAriaLabel,
 			logoSrc: logoSrc ?? void 0,
-			hideLogo: hideLogo ?? false
+			hideLogo: hideLogo ?? false,
+			voiceInputEnabled: isVoiceInputEnabled
 		},
 		widgetStyleProps: {
 			widgetVariant,
@@ -124,7 +139,9 @@ const TypingAnimationWidgetHandler = (props) => {
 			handleButtonMouseUp: onMouseUp,
 			handleButtonTouchStart: onTouchStart,
 			handleButtonTouchEnd: onTouchEnd,
-			handleTextFieldClick
+			handleTextFieldClick,
+			onTranscriptionStarted: handleTranscriptionStarted,
+			onTranscriptionCompleted: handleTranscriptionCompleted
 		}
 	});
 };

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_runtime1 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_runtime1.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_runtime3 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_runtime3.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_runtime2 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_runtime2.JSX.Element;
 //#endregion
 //#endregion
 export { SuggestionBar };

package/dist/widgets/hooks/useGetWidgetStatus.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_functions = require('../utils/functions.cjs');
 let react = require("react");
-let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
 let jotai = require("jotai");
+let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
 let __envive_ai_react_hooks_atoms_chat_chatState = require("@envive-ai/react-hooks/atoms/chat/chatState");
 
 //#region src/widgets/hooks/useGetWidgetStatus.tsx

package/dist/widgets/hooks/useGetWidgetStatus.js

@@ -1,7 +1,7 @@
 import { isLoading, isProductComparison, userHasInteracted, userHasNotInteracted } from "../utils/functions.js";
 import { useMemo } from "react";
-import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { useAtomValue } from "jotai";
+import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { responseStreamingAtom } from "@envive-ai/react-hooks/atoms/chat/chatState";
 
 //#region src/widgets/hooks/useGetWidgetStatus.tsx

package/dist/widgets/utils/functions.cjs

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
+let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
 let __envive_ai_react_hooks_atoms_atomStore = require("@envive-ai/react-hooks/atoms/atomStore");
 
 //#region src/widgets/utils/functions.ts

package/dist/widgets/utils/functions.js

@@ -1,5 +1,5 @@
-import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { MessageRole, MessageType } from "@envive-ai/react-hooks/application/models";
+import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { getAtomStore } from "@envive-ai/react-hooks/atoms/atomStore";
 
 //#region src/widgets/utils/functions.ts

package/package.json

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

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

@@ -1,70 +1,15 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import { RefObject } from 'react';
-import { SpiffyMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { HardcopyResponse } from '@envive-ai/react-hooks/contexts/hardcopyContext';
 import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { UserEvent, UserEventCategory } from '@spiffy-ai/commerce-api-client';
 import { BaseWidgetProps } from '../types';
 import { withBaseWidget } from '../withBaseWidget';
 
-// Mock IntersectionObserver
-class MockIntersectionObserver implements IntersectionObserver {
-  observe = vi.fn();
-
-  disconnect = vi.fn();
-
-  unobserve = vi.fn();
-
-  root: Element | null = null;
-
-  rootMargin: string = '';
-
-  thresholds: ReadonlyArray<number> = [];
-
-  private callback: (entries: IntersectionObserverEntry[]) => void;
-
-  private options?: IntersectionObserverInit;
-
-  constructor(
-    callback: (entries: IntersectionObserverEntry[]) => void,
-    options?: IntersectionObserverInit,
-  ) {
-    this.callback = callback;
-    this.options = options;
-    if (options) {
-      this.rootMargin = options.rootMargin || '';
-    }
-  }
-
-  // Helper method to trigger intersection
-  triggerIntersection(isIntersecting: boolean, target?: Element) {
-    const entry = {
-      isIntersecting,
-      intersectionRatio: isIntersecting ? 1 : 0,
-      boundingClientRect: {} as DOMRectReadOnly,
-      rootBounds: {} as DOMRectReadOnly,
-      target: target || ({} as Element),
-      time: Date.now(),
-    } as IntersectionObserverEntry;
-
-    this.callback([entry]);
-  }
-
-  // Helper method to get options
-  getOptions() {
-    return this.options;
-  }
-
-  // Required by IntersectionObserver interface but not used in tests
-  // eslint-disable-next-line class-methods-use-this
-  takeRecords(): IntersectionObserverEntry[] {
-    return [];
-  }
-}
-
 // Mock the contexts
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn();
 
 vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
   useAmplitude: () => ({
@@ -106,6 +51,10 @@ vi.mock('@envive-ai/react-hooks/contexts/uiConfigContext', () => ({
   }),
 }));
 
+vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
+  useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
+}));
+
 // Test widget component
 interface TestWidgetProps extends BaseWidgetProps {
   testId?: string;
@@ -145,44 +94,18 @@ const TestWidget: React.FC<TestWidgetProps> = ({
 };
 
 describe('withBaseWidget', () => {
-  let mockObserver: MockIntersectionObserver;
-  let mockObservers: MockIntersectionObserver[];
-  let originalIntersectionObserver: typeof IntersectionObserver;
-
   beforeEach(() => {
     vi.clearAllMocks();
-    mockObservers = [];
 
     // Set default mock for getHardcopy to return a resolved promise
     mockGetHardcopy.mockResolvedValue({
       language: 'en',
       values: {},
     });
-
-    // Store original IntersectionObserver
-    originalIntersectionObserver = global.IntersectionObserver;
-
-    // Replace IntersectionObserver with mock class
-    global.IntersectionObserver = class extends MockIntersectionObserver {
-      constructor(
-        callback: (entries: IntersectionObserverEntry[]) => void,
-        options?: IntersectionObserverInit,
-      ) {
-        super(callback, options);
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        mockObserver = this;
-        mockObservers.push(this);
-      }
-    } as unknown as typeof IntersectionObserver;
   });
 
-  afterEach(() => {
-    // Restore original IntersectionObserver
-    global.IntersectionObserver = originalIntersectionObserver;
-  });
-
-  describe('IntersectionObserver setup', () => {
-    it('should create an IntersectionObserver with default rootMargin', () => {
+  describe('Visibility tracking', () => {
+    it('should call useTrackComponentVisibleEvent with default event', () => {
       const WrappedWidget = withBaseWidget(TestWidget);
       render(
         <WrappedWidget
@@ -191,14 +114,19 @@ describe('withBaseWidget', () => {
         />,
       );
 
-      expect(mockObserver).toBeDefined();
-      expect(mockObserver.rootMargin).toBe('0px');
+      expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+        expect.any(Object),
+        {
+          widget_config_id: 'test-config-1',
+          widget_type: WidgetTypeV3.PromptCarouselV3,
+        },
+        '0px',
+        true,
+      );
     });
 
-    it('should create an IntersectionObserver with custom rootMargin', () => {
-      const WrappedWidget = withBaseWidget(TestWidget, {
-        rootMargin: '100px',
-      });
+    it('should pass custom rootMargin to useTrackComponentVisibleEvent', () => {
+      const WrappedWidget = withBaseWidget(TestWidget, { rootMargin: '100px' });
       render(
         <WrappedWidget
           widgetConfigId="test-config-2"
@@ -206,168 +134,42 @@ describe('withBaseWidget', () => {
         />,
       );
 
-      expect(mockObserver).toBeDefined();
-      expect(mockObserver.rootMargin).toBe('100px');
-    });
-
-    it('should observe the widget element', () => {
-      const WrappedWidget = withBaseWidget(TestWidget);
-      render(
-        <WrappedWidget
-          widgetConfigId="test-config-3"
-          widgetType={WidgetTypeV3.PromptCarouselV3}
-        />,
-      );
-
-      expect(mockObserver.observe).toHaveBeenCalled();
-    });
-  });
-
-  describe('Amplitude event tracking', () => {
-    it('should track default event when widget becomes visible', async () => {
-      const WrappedWidget = withBaseWidget(TestWidget);
-      const { container } = render(
-        <WrappedWidget
-          widgetConfigId="test-config-4"
-          widgetType={WidgetTypeV3.PromptCarouselV3}
-        />,
-      );
-
-      const widgetElement = container.querySelector('[data-testid="test-widget"]');
-
-      // Trigger intersection with the actual element
-      mockObserver.triggerIntersection(true, widgetElement as Element);
-
-      await waitFor(() => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.ChatComponentVisible,
-          eventProps: {
-            widget_config_id: 'test-config-4',
-            widget_type: WidgetTypeV3.PromptCarouselV3,
-          },
-        });
-      });
-    });
-
-    it('should track custom event when widget becomes visible', async () => {
-      const WrappedWidget = withBaseWidget(TestWidget, {
-        visibilityEventName: SpiffyMetricsEventName.SearchComponentVisible,
-      });
-      const { container } = render(
-        <WrappedWidget
-          widgetConfigId="test-config-5"
-          widgetType={WidgetTypeV3.ChatPreviewV3}
-        />,
+      expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+        expect.any(Object),
+        {
+          widget_config_id: 'test-config-2',
+          widget_type: WidgetTypeV3.ChatPreviewV3,
+        },
+        '100px',
+        true,
       );
-
-      const widgetElement = container.querySelector('[data-testid="test-widget"]');
-
-      // Trigger intersection
-      mockObserver.triggerIntersection(true, widgetElement as Element);
-
-      await waitFor(() => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.SearchComponentVisible,
-          eventProps: {
-            widget_config_id: 'test-config-5',
-            widget_type: WidgetTypeV3.ChatPreviewV3,
-          },
-        });
-      });
     });
 
-    it('should include custom event props when tracking', async () => {
+    it('should include custom event props', () => {
       const WrappedWidget = withBaseWidget(TestWidget, {
         visibilityEventProps: {
           custom_prop: 'custom_value',
           another_prop: 123,
         },
       });
-      const { container } = render(
+      render(
         <WrappedWidget
-          widgetConfigId="test-config-6"
+          widgetConfigId="test-config-4"
           widgetType={WidgetTypeV3.SocialProofV3}
         />,
       );
 
-      const widgetElement = container.querySelector('[data-testid="test-widget"]');
-
-      // Trigger intersection
-      mockObserver.triggerIntersection(true, widgetElement as Element);
-
-      await waitFor(() => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.ChatComponentVisible,
-          eventProps: {
-            widget_config_id: 'test-config-6',
-            widget_type: WidgetTypeV3.SocialProofV3,
-            custom_prop: 'custom_value',
-            another_prop: 123,
-          },
-        });
-      });
-    });
-
-    it('should only track event once even if intersection happens multiple times', async () => {
-      const WrappedWidget = withBaseWidget(TestWidget);
-      const { container } = render(
-        <WrappedWidget
-          widgetConfigId="test-config-7"
-          widgetType={WidgetTypeV3.PromptCarouselV3}
-        />,
-      );
-
-      const widgetElement = container.querySelector('[data-testid="test-widget"]');
-
-      // Trigger intersection multiple times
-      mockObserver.triggerIntersection(true, widgetElement as Element);
-      mockObserver.triggerIntersection(false, widgetElement as Element);
-      mockObserver.triggerIntersection(true, widgetElement as Element);
-
-      await waitFor(() => {
-        expect(mockTrackEvent).toHaveBeenCalledTimes(1);
-      });
-    });
-
-    it('should disconnect observer after tracking event', async () => {
-      const WrappedWidget = withBaseWidget(TestWidget);
-      const { container } = render(
-        <WrappedWidget
-          widgetConfigId="test-config-8"
-          widgetType={WidgetTypeV3.PromptCarouselV3}
-        />,
-      );
-
-      const widgetElement = container.querySelector('[data-testid="test-widget"]');
-
-      // Trigger intersection
-      mockObserver.triggerIntersection(true, widgetElement as Element);
-
-      await waitFor(() => {
-        expect(mockObserver.disconnect).toHaveBeenCalled();
-      });
-    });
-
-    it('should not track event if widget is not intersecting', async () => {
-      const WrappedWidget = withBaseWidget(TestWidget);
-      const { container } = render(
-        <WrappedWidget
-          widgetConfigId="test-config-9"
-          widgetType={WidgetTypeV3.PromptCarouselV3}
-        />,
+      expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+        expect.any(Object),
+        {
+          widget_config_id: 'test-config-4',
+          widget_type: WidgetTypeV3.SocialProofV3,
+          custom_prop: 'custom_value',
+          another_prop: 123,
+        },
+        '0px',
+        true,
       );
-
-      const widgetElement = container.querySelector('[data-testid="test-widget"]');
-
-      // Trigger non-intersection
-      mockObserver.triggerIntersection(false, widgetElement as Element);
-
-      // Wait a bit to ensure no event is tracked
-      await new Promise(resolve => {
-        setTimeout(resolve, 100);
-      });
-
-      expect(mockTrackEvent).not.toHaveBeenCalled();
     });
   });
 
@@ -553,7 +355,6 @@ describe('withBaseWidget', () => {
       mockGetHardcopy.mockResolvedValue(mockHardcopy);
 
       const WrappedWidget = withBaseWidget(TestWidget, {
-        visibilityEventName: SpiffyMetricsEventName.SearchComponentVisible,
         visibilityEventProps: {
           test_integration: true,
         },
@@ -573,20 +374,17 @@ describe('withBaseWidget', () => {
 
       const widgetElement = screen.getByTestId('test-widget');
 
-      // Trigger intersection to track event
-      mockObserver.triggerIntersection(true, widgetElement);
-
-      // Verify both hardcopy and event tracking worked
-      await waitFor(() => {
-        expect(mockTrackEvent).toHaveBeenCalledWith({
-          eventName: SpiffyMetricsEventName.SearchComponentVisible,
-          eventProps: {
-            widget_config_id: 'test-config-integration',
-            widget_type: WidgetTypeV3.PromptCarouselV3,
-            test_integration: true,
-          },
-        });
-      });
+      expect(widgetElement).toBeInTheDocument();
+      expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+        expect.any(Object),
+        {
+          widget_config_id: 'test-config-integration',
+          widget_type: WidgetTypeV3.PromptCarouselV3,
+          test_integration: true,
+        },
+        '0px',
+        true,
+      );
 
       expect(screen.getByTestId('hardcopy-language')).toHaveTextContent('en');
       expect(screen.getByTestId('hardcopy-values')).toHaveTextContent(
@@ -652,56 +450,24 @@ describe('withBaseWidget', () => {
         userEvent: expect.any(Object),
       });
 
-      // Verify first widget can trigger intersection and track event
-      // When multiple widgets are rendered, each creates its own IntersectionObserver
-      // We need to find the observer that's observing widget-1's element
-      const widget1Element = screen.getByTestId('widget-1');
-      const widget2Element = screen.getByTestId('widget-2');
-
-      // Clear any previous calls to isolate this test
-      mockTrackEvent.mockClear();
-
-      // Find which observer is observing widget-1 by checking which one was called with widget1Element
-      // In our mock setup, the first observer should be for widget-1, second for widget-2
-      const widget1Observer = mockObservers[0];
-      const widget2Observer = mockObservers[1];
-
-      // Verify we have both observers
-      expect(widget1Observer).toBeDefined();
-      expect(widget2Observer).toBeDefined();
-
-      // Trigger intersection for widget-1 using its observer
-      widget1Observer.triggerIntersection(true, widget1Element);
-
-      await waitFor(() => {
-        // Verify that an event was tracked for widget-1
-        expect(mockTrackEvent).toHaveBeenCalled();
-        const { calls } = mockTrackEvent.mock;
-        // Find any call that matches widget-1's properties
-        const widget1Call = calls.find(
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          (call: any) =>
-            call[0]?.eventProps?.widget_config_id === 'widget-1' &&
-            call[0]?.eventProps?.widget_type === WidgetTypeV3.PromptCarouselV3,
-        );
-        expect(widget1Call).toBeDefined();
-      });
-
-      // Verify widget-2 can also track independently
-      mockTrackEvent.mockClear();
-      widget2Observer.triggerIntersection(true, widget2Element);
-
-      await waitFor(() => {
-        expect(mockTrackEvent).toHaveBeenCalled();
-        const { calls } = mockTrackEvent.mock;
-        const widget2Call = calls.find(
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          (call: any) =>
-            call[0]?.eventProps?.widget_config_id === 'widget-2' &&
-            call[0]?.eventProps?.widget_type === WidgetTypeV3.ChatPreviewV3,
-        );
-        expect(widget2Call).toBeDefined();
-      });
+      expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+        expect.any(Object),
+        {
+          widget_config_id: 'widget-1',
+          widget_type: WidgetTypeV3.PromptCarouselV3,
+        },
+        '0px',
+        true,
+      );
+      expect(mockUseTrackComponentVisibleEvent).toHaveBeenCalledWith(
+        expect.any(Object),
+        {
+          widget_config_id: 'widget-2',
+          widget_type: WidgetTypeV3.ChatPreviewV3,
+        },
+        '0px',
+        true,
+      );
     });
   });
 });