@envive-ai/react-widgets-v3 0.3.56 → 0.3.57

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationWidget/TypingAnimationWidget.d.ts
 declare const TypingAnimationWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime2.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime6.JSX.Element;
   displayName: string;
 };
 interface TypingAnimationWidgetProps {
@@ -12,7 +12,7 @@ interface TypingAnimationWidgetProps {
 declare const TypingAnimationWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationWidgetProps): react_jsx_runtime2.JSX.Element;
+  }: TypingAnimationWidgetProps): react_jsx_runtime6.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationWidget/TypingAnimationWidget.d.ts
 declare const TypingAnimationWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime0.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime18.JSX.Element;
   displayName: string;
 };
 interface TypingAnimationWidgetProps {
@@ -12,7 +12,7 @@ interface TypingAnimationWidgetProps {
 declare const TypingAnimationWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationWidgetProps): react_jsx_runtime0.JSX.Element;
+  }: TypingAnimationWidgetProps): react_jsx_runtime18.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.js

@@ -4,14 +4,14 @@ import { getStringIdForText } from "../utils/functions.js";
 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 { useChatToggle } from "@envive-ai/react-hooks/hooks/ChatToggle";
 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 { useChatToggle } from "@envive-ai/react-hooks/hooks/ChatToggle";
+import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
 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 { PromptButtonVariant } from "@envive-ai/react-toolkit-v3/PromptButton/types";
 import { TypingAnimation } from "@envive-ai/react-toolkit-v3/TypingAnimation";
 import { WidgetWrapperVariant } from "@envive-ai/react-toolkit-v3/WidgetWrapper";

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 jotai = require("jotai");
 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_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 { useAtomValue } from "jotai";
 import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
+import { useAtomValue } from "jotai";
 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_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_application_models = require("@envive-ai/react-hooks/application/models");
 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 { MessageRole, MessageType } from "@envive-ai/react-hooks/application/models";
 import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
+import { MessageRole, MessageType } from "@envive-ai/react-hooks/application/models";
 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.56",
+  "version": "0.3.57",
   "description": "React widget library v3 for Envive services.",
   "keywords": [
     "react",

package/src/debug/GenericSelect.tsx

@@ -1,4 +1,7 @@
 import React, { CSSProperties, useRef, useState } from 'react';
+import Logger from '@envive-ai/react-hooks/application/logging';
+
+const logger = new Logger('GenericSelect');
 
 type SelectType = 'priority';
 
@@ -164,7 +167,7 @@ export function GenericSelect({
   }, [isOpen]);
 
   if (!dictionary) {
-    console.error(`Invalid type "${type}".`);
+    logger.logError(`Invalid type "${type}".`, undefined);
     return null;
   }
 

package/src/debug/reportIssue.tsx

@@ -16,9 +16,12 @@ import { userIdAtom } from '@envive-ai/react-hooks/atoms/app';
 import { orgShortNameAtom } from '@envive-ai/react-hooks/atoms/envive/enviveConfig';
 import { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
 import { StringUtils, validateEmail } from '@envive-ai/react-hooks/application/utils';
+import Logger from '@envive-ai/react-hooks/application/logging';
 import { GenericSelect } from './GenericSelect';
 import ChatEmbed from './chatEmbed';
 
+const logger = new Logger('reportIssue');
+
 const messageContent = (m: Message) => {
   if (m.type === MessageType.Text) {
     return m.metadata.content;
@@ -65,7 +68,7 @@ const ReportHeader = ({ onClose }: { onClose: () => void }) => {
     try {
       await navigator.clipboard.writeText(userId);
     } catch (err) {
-      console.error('Failed to copy to clipboard:', err);
+      logger.logError('Failed to copy to clipboard', err);
     }
   }, [userId]);
 
@@ -549,11 +552,11 @@ export const ReportIssue = () => {
         turn_info: turnInfo,
         report_type: reportType,
       };
-      console.info('Submitting report', request);
+      logger.logInfo('Submitting report', request);
       await CommerceApiClient.reportSession(request);
       onClose();
     } catch (error) {
-      console.error('Error sending report', error);
+      logger.logError('Error sending report', error);
       setErrorMessage(
         'There was an error sending the report. Please try again or contact Envive Support.',
       );

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

@@ -9,7 +9,14 @@ import { withBaseWidget } from '../withBaseWidget';
 // Mock the contexts
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
+const mockGetWidgetConfig = vi.fn();
+const mockGetUiConfig = vi.fn();
 const mockUseTrackComponentVisibleEvent = vi.fn();
+// Shared context loading flags, read at render time by the mocked hooks
+let mockHardcopyLoading = false;
+let mockPageLoading = false;
+let mockWidgetConfigLoading = false;
+let mockUiConfigLoading = false;
 
 vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
   useAmplitude: () => ({
@@ -25,6 +32,7 @@ vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
 vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
   useHardcopy: () => ({
     getHardcopy: mockGetHardcopy,
+    isLoading: mockHardcopyLoading,
   }),
 }));
 
@@ -36,18 +44,21 @@ vi.mock('@envive-ai/react-hooks/contexts/pageContext', () => ({
       created_at: '2025-01-01T00:00:00Z',
       event_id: 'test-event-id',
     } as UserEvent,
+    isLoading: mockPageLoading,
   }),
 }));
 
 vi.mock('@envive-ai/react-hooks/contexts/widgetConfigContext', () => ({
   useWidgetConfig: () => ({
-    getWidgetConfig: vi.fn().mockResolvedValue({}),
+    getWidgetConfig: mockGetWidgetConfig,
+    isLoading: mockWidgetConfigLoading,
   }),
 }));
 
 vi.mock('@envive-ai/react-hooks/contexts/uiConfigContext', () => ({
   useUiConfig: () => ({
-    getUiConfig: vi.fn().mockResolvedValue({}),
+    getUiConfig: mockGetUiConfig,
+    isLoading: mockUiConfigLoading,
   }),
 }));
 
@@ -66,6 +77,7 @@ const TestWidget: React.FC<TestWidgetProps> = ({
   widgetType,
   hardcopyContent,
   observedWidget,
+  isLoading,
   testId = 'test-widget',
   children,
 }) => {
@@ -81,6 +93,7 @@ const TestWidget: React.FC<TestWidgetProps> = ({
     >
       <div data-testid="widget-config-id">{widgetConfigId}</div>
       <div data-testid="widget-type">{widgetType}</div>
+      <div data-testid="is-loading">{String(isLoading)}</div>
       {hardcopyContent && (
         <div data-testid="hardcopy-content">
           <div data-testid="hardcopy-language">{hardcopyContent.language}</div>
@@ -97,11 +110,19 @@ describe('withBaseWidget', () => {
   beforeEach(() => {
     vi.clearAllMocks();
 
+    mockHardcopyLoading = false;
+    mockPageLoading = false;
+    mockWidgetConfigLoading = false;
+    mockUiConfigLoading = false;
+    mockUseTrackComponentVisibleEvent.mockReturnValue({ isVisible: true });
+
     // Set default mock for getHardcopy to return a resolved promise
     mockGetHardcopy.mockResolvedValue({
       language: 'en',
       values: {},
     });
+    mockGetWidgetConfig.mockResolvedValue({});
+    mockGetUiConfig.mockResolvedValue({});
   });
 
   describe('Visibility tracking', () => {
@@ -342,6 +363,142 @@ describe('withBaseWidget', () => {
     });
   });
 
+  describe('Loading state', () => {
+    it('stops loading once its own requests settle, even while the shared flags stay set', async () => {
+      // All four shared flags stay true for the whole test, so the only thing that can
+      // release the loading state is the widget's own requests settling.
+      mockHardcopyLoading = true;
+      mockPageLoading = true;
+      mockWidgetConfigLoading = true;
+      mockUiConfigLoading = true;
+      let resolveHardcopy!: (value: HardcopyResponse) => void;
+      mockGetHardcopy.mockReturnValue(
+        new Promise<HardcopyResponse>(resolve => {
+          resolveHardcopy = resolve;
+        }),
+      );
+
+      const WrappedWidget = withBaseWidget(TestWidget);
+      render(
+        <WrappedWidget
+          widgetConfigId="test-config-loading"
+          widgetType={WidgetTypeV3.PromptCarouselV3}
+        />,
+      );
+
+      expect(screen.getByTestId('is-loading')).toHaveTextContent('true');
+
+      resolveHardcopy({ responseId: 'r', language: 'en', values: {} });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+      });
+    });
+
+    it.each([
+      [
+        'widgetConfig',
+        () => mockGetWidgetConfig,
+        () => {
+          mockWidgetConfigLoading = true;
+        },
+      ],
+      [
+        'uiConfig',
+        () => mockGetUiConfig,
+        () => {
+          mockUiConfigLoading = true;
+        },
+      ],
+    ])(
+      'shows loading while the %s request is pending and its shared flag is set',
+      async (_name, getGetter, setFlag) => {
+        setFlag();
+        let resolveConfig!: (value: object) => void;
+        getGetter().mockReturnValue(
+          new Promise<object>(resolve => {
+            resolveConfig = resolve;
+          }),
+        );
+
+        const WrappedWidget = withBaseWidget(TestWidget);
+        render(
+          <WrappedWidget
+            widgetConfigId="test-config-branch"
+            widgetType={WidgetTypeV3.PromptCarouselV3}
+          />,
+        );
+
+        expect(screen.getByTestId('is-loading')).toHaveTextContent('true');
+
+        resolveConfig({});
+
+        await waitFor(() => {
+          expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+        });
+      },
+    );
+
+    it('does not regress to loading when a shared flag flips after its requests settled', async () => {
+      const WrappedWidget = withBaseWidget(TestWidget);
+      const { rerender } = render(
+        <WrappedWidget
+          widgetConfigId="test-config-no-regress"
+          widgetType={WidgetTypeV3.PromptCarouselV3}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+        expect(screen.getByTestId('hardcopy-content')).toBeInTheDocument();
+      });
+
+      // Another widget elsewhere starts a fetch, flipping the shared context flags
+      mockHardcopyLoading = true;
+      mockPageLoading = true;
+      mockWidgetConfigLoading = true;
+      mockUiConfigLoading = true;
+      rerender(
+        <WrappedWidget
+          widgetConfigId="test-config-no-regress"
+          widgetType={WidgetTypeV3.PromptCarouselV3}
+        />,
+      );
+
+      expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+      expect(screen.getByTestId('hardcopy-content')).toBeInTheDocument();
+    });
+
+    it('still settles and stops loading when its own requests fail', async () => {
+      mockHardcopyLoading = true;
+      mockGetHardcopy.mockRejectedValue(new Error('Failed to fetch hardcopy'));
+
+      const WrappedWidget = withBaseWidget(TestWidget);
+      const { rerender } = render(
+        <WrappedWidget
+          widgetConfigId="test-config-failed"
+          widgetType={WidgetTypeV3.PromptCarouselV3}
+        />,
+      );
+
+      mockHardcopyLoading = false;
+      await waitFor(() => {
+        expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+      });
+
+      // A later shared fetch still must not knock the settled widget back to loading
+      mockPageLoading = true;
+      rerender(
+        <WrappedWidget
+          widgetConfigId="test-config-failed"
+          widgetType={WidgetTypeV3.PromptCarouselV3}
+        />,
+      );
+
+      expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+    });
+  });
+
   describe('Integration tests', () => {
     it('should handle full flow: visibility tracking + hardcopy rendering', async () => {
       const mockHardcopy: HardcopyResponse = {

package/src/hocs/withBaseWidget/withBaseWidget.tsx

@@ -30,8 +30,23 @@ export function withBaseWidget<P extends BaseWidgetProps>(
     const [uiConfig, setUiConfig] = useState<OrgUIConfigV3 | undefined>(undefined);
     const { getUiConfig, isLoading: isUiConfigLoading } = useUiConfig();
 
+    // The context isLoading flags are provider-level and shared across every widget, so a
+    // fetch issued by any widget flips them for all of them. Track when this widget's own
+    // requests have settled so a later fetch elsewhere can't knock an already-rendered
+    // widget back into its loading state.
+    //
+    // These latches (and hardcopyFetchedRef above) assume widgetConfigId is stable for the
+    // lifetime of the instance — the mounter must key widgets by widgetConfigId so a config
+    // swap on the same mount point remounts rather than reusing this state (see Widgets.tsx
+    // in injection-bundle).
+    const [hardcopySettled, setHardcopySettled] = useState(false);
+    const [widgetConfigSettled, setWidgetConfigSettled] = useState(false);
+    const [uiConfigSettled, setUiConfigSettled] = useState(false);
+    const ownRequestsSettled = hardcopySettled && widgetConfigSettled && uiConfigSettled;
+
     const isLoading =
-      isHardcopyLoading || isPageLoading || isWidgetConfigLoading || isUiConfigLoading;
+      !ownRequestsSettled &&
+      (isHardcopyLoading || isPageLoading || isWidgetConfigLoading || isUiConfigLoading);
 
     const visibilityEventProps = {
       widget_config_id: widgetConfigId,
@@ -56,11 +71,18 @@ export function withBaseWidget<P extends BaseWidgetProps>(
       if (!startLoading || hardcopyFetchedRef.current) {
         return;
       }
+      // Hardcopy is fetch-once by design: it is a network request whose deps (userEvent)
+      // can churn as the page context updates, and the served copy must not change under
+      // the shopper. The uiConfig/widgetConfig effects below need no such guard — they
+      // resolve locally from the already-loaded org config, so re-runs are free.
       hardcopyFetchedRef.current = true;
       getHardcopy({ widgetType, userEvent })
         .then(setHardcopyContent)
         .catch(() => {
           // Silently handle errors - widget will render without hardcopy content
+        })
+        .finally(() => {
+          setHardcopySettled(true);
         });
     }, [startLoading, widgetType, getHardcopy, userEvent, widgetConfigId]);
 
@@ -72,6 +94,9 @@ export function withBaseWidget<P extends BaseWidgetProps>(
         .then(setUiConfig)
         .catch(() => {
           // Silently handle errors - widget will render without ui config
+        })
+        .finally(() => {
+          setUiConfigSettled(true);
         });
     }, [startLoading, getUiConfig, widgetConfigId, widgetType]);
 
@@ -84,6 +109,9 @@ export function withBaseWidget<P extends BaseWidgetProps>(
         .then(setWidgetConfig)
         .catch(() => {
           // Silently handle errors - widget will render without widget config
+        })
+        .finally(() => {
+          setWidgetConfigSettled(true);
         });
     }, [startLoading, widgetConfigId, widgetType, getWidgetConfig]);
 

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

@@ -5,7 +5,7 @@ import { ChatPreviewWidget } from '../ChatPreviewWidget';
 
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
-const mockUseTrackComponentVisibleEvent = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn(() => ({ isVisible: true }));
 
 vi.mock('@envive-ai/react-toolkit-v3/ChatPreview', () => ({
   ChatPreview: () => <div data-testid="chat-preview-mock">Chat Preview</div>,
@@ -26,6 +26,10 @@ vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
   useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
 }));
 
+vi.mock('@envive-ai/react-hooks/contexts/featureFlagServiceContext', () => ({
+  useFeatureFlagService: () => ({ featureFlagService: undefined }),
+}));
+
 vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
   useHardcopy: () => ({
     getHardcopy: mockGetHardcopy,

package/src/widgets/FloatingChatWidget/FloatingChatWidget.tsx

@@ -2,10 +2,7 @@ import {
   ChatElementDisplayLocationV3,
   FeatureGates,
 } from '@envive-ai/react-hooks/application/models';
-import {
-  EnviveMetricsEventName,
-  useAmplitude,
-} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useAmplitude } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import {
   FloatingChatConfig,
@@ -14,13 +11,7 @@ import {
 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { useTrackComponentVisibleEvent } from '@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent';
-import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
 import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
-import {
-  Collapse,
-  WidgetInteractionComponent,
-  WidgetInteractionType,
-} from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
 import {
   FloatingButton,
   FloatingButtonBackgroundColor,
@@ -88,7 +79,6 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
   const { previewButtonOnly, previewChatAlwaysOpen, previewCXButtonsEnabled, previewDisclaimer } =
     props;
   const salesAgentData = useSalesAgent();
-  const { trackWidgetInteraction } = useWidgetInteraction();
   const { userHasInteractedValue } = useGetWidgetStatus();
 
   // TODO: Get hardcopy
@@ -124,19 +114,6 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
     if (isOpen) setIsCXOpen(false);
   }, [isOpen]);
 
-  const handleClose = (type: Collapse) => {
-    trackWidgetInteraction({
-      eventName: EnviveMetricsEventName.WidgetInteraction,
-      trigger: {
-        widget: WidgetInteractionComponent.FLOATING_CHAT,
-        widget_interaction: WidgetInteractionType.WIDGET_COLLAPSED,
-        widget_interaction_data: {
-          widget_collapsed: type,
-        },
-      },
-    });
-  };
-
   const { shouldShowFloatingButton } = useFloatingButtonVisibility({
     floatingButtonShowConfig: floatingButton?.showOption as FloatingButtonShow,
     isChatOpen: isOpen,
@@ -191,12 +168,12 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
               onClose={
                 previewChatAlwaysOpen
                   ? () => {}
-                  : () => {
-                      closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY);
-                      handleClose({
-                        collapse_source: 'body_click',
-                      });
-                    }
+                  : () =>
+                      closeChat(
+                        ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY,
+                        undefined,
+                        'body_click',
+                      )
               }
               previewMode={!!previewChatAlwaysOpen}
             >
@@ -215,22 +192,22 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
                   onSwipeClose={
                     previewChatAlwaysOpen
                       ? () => {}
-                      : () => {
-                          closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON);
-                          handleClose({
-                            collapse_source: 'swipe',
-                          });
-                        }
+                      : () =>
+                          closeChat(
+                            ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON,
+                            undefined,
+                            'swipe',
+                          )
                   }
                   onClose={
                     previewChatAlwaysOpen
                       ? () => {}
-                      : () => {
-                          closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON);
-                          handleClose({
-                            collapse_source: 'close_button',
-                          });
-                        }
+                      : () =>
+                          closeChat(
+                            ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON,
+                            undefined,
+                            'close_button',
+                          )
                   }
                 />
               </Suspense>

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

@@ -5,7 +5,7 @@ import { FloatingChatWidget } from '../FloatingChatWidget';
 
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
-const mockUseTrackComponentVisibleEvent = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn(() => ({ isVisible: true }));
 
 vi.mock('@envive-ai/react-toolkit-v3/FloatingButton', () => ({
   FloatingButton: () => <div data-testid="floating-button">Floating Button</div>,

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

@@ -6,9 +6,10 @@ import { ProductCardWidget } from '../ProductCardWidget';
 
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
-const mockUseTrackComponentVisibleEvent = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn(() => ({ isVisible: true }));
 
 vi.mock('@envive-ai/react-toolkit-v3/ProductCard', () => ({
+  ProductCardVariant: { DARK: 'dark', LIGHT: 'light' },
   ProductCard: ({ prompts, onSelect }: { prompts: string[]; onSelect: (text: string) => void }) => (
     <div data-testid="product-card-mock">
       {prompts.map(text => (
@@ -42,6 +43,10 @@ vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
   useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
 }));
 
+vi.mock('@envive-ai/react-hooks/contexts/featureFlagServiceContext', () => ({
+  useFeatureFlagService: () => ({ featureFlagService: undefined }),
+}));
+
 vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
   useHardcopy: () => ({
     getHardcopy: mockGetHardcopy,

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

@@ -6,7 +6,7 @@ import { PromptButtonCarouselWithImageWidget } from '../PromptButtonCarouselWith
 
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
-const mockUseTrackComponentVisibleEvent = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn(() => ({ isVisible: true }));
 
 vi.mock('@envive-ai/react-toolkit-v3/PromptButtonCarouselWithImage', () => ({
   PromptButtonCarouselWithImage: ({
@@ -48,6 +48,10 @@ vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
   useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
 }));
 
+vi.mock('@envive-ai/react-hooks/contexts/featureFlagServiceContext', () => ({
+  useFeatureFlagService: () => ({ featureFlagService: undefined }),
+}));
+
 vi.mock('@envive-ai/react-hooks/hooks/WidgetInteraction', () => ({
   useWidgetInteraction: () => ({
     trackWidgetInteraction: vi.fn(),

package/src/widgets/PromptCarouselWidget/PromptCarouselWidget.tsx

@@ -74,7 +74,9 @@ const PromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
     (text: string) => {
       const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;
       const stringId = getStringIdForText(rawValues, text);
-      onSuggestionClick(stringId);
+      // Pass the raw text — onSuggestionClick runs its own idExtractor. Passing stringId here
+      // double-extracted it, the lookup missed, and suggestion_id landed empty on the event.
+      onSuggestionClick(text);
       trackEvent({
         eventName: EnviveMetricsEventName.WidgetTextClicked,
         eventProps: {

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

@@ -6,7 +6,7 @@ import { PromptCarouselWidget } from '../PromptCarouselWidget';
 
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
-const mockUseTrackComponentVisibleEvent = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn(() => ({ isVisible: true }));
 
 vi.mock('@envive-ai/react-toolkit-v3/PromptCarousel', () => ({
   PromptCarousel: ({