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

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.ts
 interface TypingAnimationFlowWidgetProps {
@@ -7,7 +7,7 @@ interface TypingAnimationFlowWidgetProps {
 declare const TypingAnimationFlowWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationFlowWidgetProps): react_jsx_runtime0.JSX.Element;
+  }: TypingAnimationFlowWidgetProps): react_jsx_runtime19.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.js

@@ -1,10 +1,10 @@
 import { ChatPreviewLoadingWidgetWithBaseWidget } from "../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.js";
 import { ChatPreviewComparisonWidgetWithBaseWidget } from "../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.js";
-import { ChatPreviewWidgetWithBaseWidget } from "../ChatPreviewWidget/ChatPreviewWidget.js";
 import useGetWidgetStatus_default from "../hooks/useGetWidgetStatus.js";
+import { ChatPreviewWidgetWithBaseWidget } from "../ChatPreviewWidget/ChatPreviewWidget.js";
 import { TypingAnimationWithBaseWidget } from "../TypingAnimationWidget/TypingAnimationWidget.js";
-import { jsx } from "react/jsx-runtime";
 import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
+import { jsx } from "react/jsx-runtime";
 import { ChatPreviewLoading } from "@envive-ai/react-toolkit-v3/ChatPreviewLoading";
 
 //#region src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.tsx

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.cjs

@@ -2,17 +2,17 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_withBaseWidget = require('../../hocs/withBaseWidget/withBaseWidget.cjs');
 require('../../hocs/withBaseWidget/index.cjs');
 const require_functions = require('../utils/functions.cjs');
-let react = require("react");
-let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
-let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_hooks_contexts_salesAgentContext = require("@envive-ai/react-hooks/contexts/salesAgentContext");
 let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");
 let __envive_ai_react_hooks_hooks_ChatToggle = require("@envive-ai/react-hooks/hooks/ChatToggle");
 let __envive_ai_react_hooks_contexts_featureFlagServiceContext = require("@envive-ai/react-hooks/contexts/featureFlagServiceContext");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
+let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
 let __envive_ai_react_hooks_hooks_WidgetInteraction = require("@envive-ai/react-hooks/hooks/WidgetInteraction");
 let __envive_ai_react_hooks_hooks_WidgetInteraction_types = require("@envive-ai/react-hooks/hooks/WidgetInteraction/types");
 let __envive_ai_react_toolkit_v3_PromptCarousel = require("@envive-ai/react-toolkit-v3/PromptCarousel");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_toolkit_v3_PromptButton_types = require("@envive-ai/react-toolkit-v3/PromptButton/types");
 let __envive_ai_react_toolkit_v3_TypingAnimation = require("@envive-ai/react-toolkit-v3/TypingAnimation");
 let __envive_ai_react_toolkit_v3_WidgetWrapper = require("@envive-ai/react-toolkit-v3/WidgetWrapper");

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

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

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.js

@@ -1,17 +1,17 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
 import "../../hocs/withBaseWidget/index.js";
 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 { EnviveMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
 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 { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
 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/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_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime2 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_runtime3.JSX.Element;
+}: SearchZeroStateWidgetProps) => react_jsx_runtime2.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_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 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_runtime2.JSX.Element;
+}: Readonly<SuggestionBarProps>): react_jsx_runtime3.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 react = require("react");
 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 { useMemo } from "react";
 import { responseStreamingAtom } from "@envive-ai/react-hooks/atoms/chat/chatState";
 
 //#region src/widgets/hooks/useGetWidgetStatus.tsx

package/package.json

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

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

@@ -1,12 +1,13 @@
-import { render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import { RefObject } from 'react';
 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';
+import { WIDGET_LOADING_WATCHDOG_MS, withBaseWidget } from '../withBaseWidget';
 
 // Mock the contexts
+const { mockLogError } = vi.hoisted(() => ({ mockLogError: vi.fn() }));
 const mockTrackEvent = vi.fn();
 const mockGetHardcopy = vi.fn();
 const mockGetWidgetConfig = vi.fn();
@@ -29,6 +30,18 @@ vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
   },
 }));
 
+vi.mock('@envive-ai/react-hooks/application/logging', () => ({
+  default: class MockLogger {
+    logError = mockLogError;
+
+    logWarn = vi.fn();
+
+    logInfo = vi.fn();
+
+    logDebug = vi.fn();
+  },
+}));
+
 vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
   useHardcopy: () => ({
     getHardcopy: mockGetHardcopy,
@@ -469,6 +482,67 @@ describe('withBaseWidget', () => {
       expect(screen.getByTestId('hardcopy-content')).toBeInTheDocument();
     });
 
+    it('logs a watchdog error when the widget is still loading after the timeout', async () => {
+      vi.useFakeTimers();
+      try {
+        // Hardcopy never settles — the widget stays in its loading state
+        mockGetHardcopy.mockReturnValue(new Promise<HardcopyResponse>(() => {}));
+
+        const WrappedWidget = withBaseWidget(TestWidget);
+        render(
+          <WrappedWidget
+            widgetConfigId="test-config-watchdog"
+            widgetType={WidgetTypeV3.PromptCarouselV3}
+          />,
+        );
+
+        // Let the config fetches settle first so only hardcopy is still pending
+        await act(async () => {
+          await vi.advanceTimersByTimeAsync(0);
+        });
+        await act(async () => {
+          await vi.advanceTimersByTimeAsync(WIDGET_LOADING_WATCHDOG_MS);
+        });
+
+        expect(mockLogError).toHaveBeenCalledTimes(1);
+        const [message, , context] = mockLogError.mock.calls[0];
+        expect(message).toContain('still loading');
+        expect(context).toMatchObject({
+          widget_type: WidgetTypeV3.PromptCarouselV3,
+          widget_config_id: 'test-config-watchdog',
+          pending_requests: ['hardcopy'],
+        });
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+
+    it('does not log a watchdog error when the widget settles before the timeout', async () => {
+      vi.useFakeTimers();
+      try {
+        const WrappedWidget = withBaseWidget(TestWidget);
+        render(
+          <WrappedWidget
+            widgetConfigId="test-config-watchdog-ok"
+            widgetType={WidgetTypeV3.PromptCarouselV3}
+          />,
+        );
+
+        // Let the mocked fetches resolve, then run past the watchdog deadline
+        await act(async () => {
+          await vi.advanceTimersByTimeAsync(0);
+        });
+        expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+        await act(async () => {
+          await vi.advanceTimersByTimeAsync(WIDGET_LOADING_WATCHDOG_MS * 2);
+        });
+
+        expect(mockLogError).not.toHaveBeenCalled();
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+
     it('still settles and stops loading when its own requests fail', async () => {
       mockHardcopyLoading = true;
       mockGetHardcopy.mockRejectedValue(new Error('Failed to fetch hardcopy'));

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,
@@ -67,6 +74,41 @@ 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;