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

package/src/hocs/withBaseWidget/withBaseWidget.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 
+import Logger from '@envive-ai/react-hooks/application/logging';
 import { useAmplitude } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { useTrackComponentVisibleEvent } from '@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent';
 import { HardcopyResponse, useHardcopy } from '@envive-ai/react-hooks/contexts/hardcopyContext';
@@ -9,6 +10,12 @@ import { OrgUIConfigV3, WidgetConfigV3 } from '@envive-ai/react-hooks/contexts/t
 import { useUiConfig } from '@envive-ai/react-hooks/contexts/uiConfigContext';
 import { BaseWidgetProps, WithBaseWidgetOptions } from './types';
 
+const logger = new Logger('withBaseWidget');
+
+// How long a widget may stay in its loading state after it starts fetching before we
+// consider it stuck and log an error for external session tools to pick up.
+export const WIDGET_LOADING_WATCHDOG_MS = 5000;
+
 export function withBaseWidget<P extends BaseWidgetProps>(
   Widget: React.ComponentType<P>,
   options?: WithBaseWidgetOptions,
@@ -30,8 +37,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,
@@ -52,15 +74,57 @@ export function withBaseWidget<P extends BaseWidgetProps>(
       return isVisible && !!widgetConfigId && !!widgetType;
     }, [isVisible, widgetConfigId, widgetType]);
 
+    // Watchdog: a widget that is still in its loading state this long after it started
+    // fetching is stuck (or on a very slow connection). Log a console error so session
+    // tools that capture the console (Quantum Metric, Datadog RUM) can count and segment
+    // these sessions. Mirror the settled flags through a ref so mid-flight settles don't
+    // restart the timer, while the log still reports which requests were pending.
+    const settledStateRef = useRef({ hardcopy: false, widgetConfig: false, uiConfig: false });
+    settledStateRef.current = {
+      hardcopy: hardcopySettled,
+      widgetConfig: widgetConfigSettled,
+      uiConfig: uiConfigSettled,
+    };
+    useEffect(() => {
+      if (!startLoading || ownRequestsSettled) {
+        return undefined;
+      }
+      const timer = setTimeout(() => {
+        const settled = settledStateRef.current;
+        logger.logError(
+          `Widget still loading ${WIDGET_LOADING_WATCHDOG_MS}ms after fetches started`,
+          undefined,
+          {
+            widget_type: widgetType,
+            widget_config_id: widgetConfigId,
+            pending_requests: Object.entries(settled)
+              .filter(([, isSettled]) => !isSettled)
+              .map(([name]) => name),
+            // Network Information API — Chromium/Android only, undefined on Safari
+            connection_type: (navigator as Navigator & { connection?: { effectiveType?: string } })
+              .connection?.effectiveType,
+          },
+        );
+      }, WIDGET_LOADING_WATCHDOG_MS);
+      return () => clearTimeout(timer);
+    }, [startLoading, ownRequestsSettled, widgetConfigId, widgetType]);
+
     useEffect(() => {
       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 +136,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 +151,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: ({

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

@@ -6,7 +6,7 @@ import { SocialProofWidget } from '../SocialProofWidget';
 
 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/SocialProof', async importOriginal => {
   const actual = await importOriginal();
@@ -54,6 +54,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/TitledPromptCarouselWidget/__tests__/TitledPromptCarouselWidget.test.tsx

@@ -6,7 +6,7 @@ import { TitledPromptCarouselWidget } from '../TitledPromptCarouselWidget';
 
 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/TitledPromptCarousel', () => ({
   TitledPromptCarousel: ({

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

@@ -6,7 +6,7 @@ import { UserEvent, UserEventCategory } from '@spiffy-ai/commerce-api-client';
 import { TypingAnimationWidget } from '../TypingAnimationWidget';
 
 const mockTrackEvent = vi.fn();
-const mockUseTrackComponentVisibleEvent = vi.fn();
+const mockUseTrackComponentVisibleEvent = vi.fn(() => ({ isVisible: true }));
 
 vi.mock('@envive-ai/react-toolkit-v3/TypingAnimation', () => ({
   TypingAnimation: ({
@@ -52,6 +52,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(),