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

package/dist/widgets/SocialProofWidget/SocialProofWidget.js

@@ -3,19 +3,19 @@ import { getStringIdForText } from "../utils/functions.js";
 import { useCallback, useMemo } 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 { useAtomValue, useSetAtom } from "jotai";
 import { useFeatureFlagService } from "@envive-ai/react-hooks/contexts/featureFlagServiceContext";
 import { ChatElementDisplayLocationV3, FeatureGates, VariantTypeEnum } from "@envive-ai/react-hooks/application/models";
-import { chatPreviewLoadingDataAtom } from "@envive-ai/react-hooks/atoms/widget";
-import { ChatPreviewLoading } from "@envive-ai/react-toolkit-v3/ChatPreviewLoading";
-import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
-import { useChatToggle } from "@envive-ai/react-hooks/hooks/ChatToggle";
+import { variantInfoAtom } from "@envive-ai/react-hooks/atoms/app";
+import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
 import { WidgetInteractionComponent, WidgetInteractionType } from "@envive-ai/react-hooks/hooks/WidgetInteraction/types";
 import { usePromptCarouselAnalytics } from "@envive-ai/react-toolkit-v3/PromptCarousel";
 import { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
-import { variantInfoAtom } from "@envive-ai/react-hooks/atoms/app";
-import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
+import { chatPreviewLoadingDataAtom } from "@envive-ai/react-hooks/atoms/widget";
+import { ChatPreviewLoading } from "@envive-ai/react-toolkit-v3/ChatPreviewLoading";
 import { useProductImageUrl } from "@envive-ai/react-hooks/hooks/ProductImageUrl";
 import { PageVariant, SocialProof, WidgetKind } from "@envive-ai/react-toolkit-v3/SocialProof";
 

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.cjs

@@ -5,10 +5,10 @@ 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_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");
-let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
 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_application_models = require("@envive-ai/react-hooks/application/models");
 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 __envive_ai_react_toolkit_v3_TitledPromptCarousel = require("@envive-ai/react-toolkit-v3/TitledPromptCarousel");

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.cts

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

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.ts

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

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.js

@@ -4,10 +4,10 @@ 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 { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
-import { ChatElementDisplayLocationV3 } from "@envive-ai/react-hooks/application/models";
 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 { ChatElementDisplayLocationV3 } from "@envive-ai/react-hooks/application/models";
 import { WidgetInteractionComponent } from "@envive-ai/react-hooks/hooks/WidgetInteraction/types";
 import { AnimationSpeed, usePromptCarouselAnalytics } from "@envive-ai/react-toolkit-v3/PromptCarousel";
 import { TitledPromptCarousel } from "@envive-ai/react-toolkit-v3/TitledPromptCarousel";

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_ChatPreviewLoadingWidget = require('../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.cjs');
 const require_ChatPreviewComparisonWidget = require('../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.cjs');
-const require_ChatPreviewWidget = require('../ChatPreviewWidget/ChatPreviewWidget.cjs');
 const require_useGetWidgetStatus = require('../hooks/useGetWidgetStatus.cjs');
+const require_ChatPreviewWidget = require('../ChatPreviewWidget/ChatPreviewWidget.cjs');
 const require_TypingAnimationWidget = require('../TypingAnimationWidget/TypingAnimationWidget.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime7 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_runtime13.JSX.Element;
+  }: TypingAnimationFlowWidgetProps): react_jsx_runtime7.JSX.Element;
   displayName: string;
 };
 //#endregion

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime18 from "react/jsx-runtime";
+import * as react_jsx_runtime3 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_runtime18.JSX.Element;
+  }: TypingAnimationFlowWidgetProps): react_jsx_runtime3.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.js

@@ -1,7 +1,7 @@
 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";

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.cjs

@@ -5,14 +5,14 @@ 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_salesAgentContext = require("@envive-ai/react-hooks/contexts/salesAgentContext");
-let __envive_ai_react_hooks_hooks_ChatToggle = require("@envive-ai/react-hooks/hooks/ChatToggle");
+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 __envive_ai_react_hooks_hooks_WidgetInteraction = require("@envive-ai/react-hooks/hooks/WidgetInteraction");
 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_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime0 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_runtime0.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_runtime0.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_runtime1 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_runtime1.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_runtime1.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/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/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.58",
   "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

@@ -1,15 +1,23 @@
-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();
+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: () => ({
@@ -22,9 +30,22 @@ 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,
+    isLoading: mockHardcopyLoading,
   }),
 }));
 
@@ -36,18 +57,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 +90,7 @@ const TestWidget: React.FC<TestWidgetProps> = ({
   widgetType,
   hardcopyContent,
   observedWidget,
+  isLoading,
   testId = 'test-widget',
   children,
 }) => {
@@ -81,6 +106,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 +123,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 +376,203 @@ 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('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'));
+
+      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 = {