@envive-ai/react-widgets-v3 0.3.15-alpha.1 → 0.3.15-alpha.2

package/dist/widgets/FloatingChatWidget/FloatingChatOverlay.cjs

@@ -3,26 +3,59 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 let framer_motion = require("framer-motion");
+let __envive_ai_react_toolkit_v3_utils_useCheckIsMobile = require("@envive-ai/react-toolkit-v3/utils/useCheckIsMobile");
 
 //#region src/widgets/FloatingChatWidget/FloatingChatOverlay.tsx
-const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestId, previewMode = false }) => {
+const ANIMATION_DURATION = .3;
+const useOverlayAnimations = ({ previewMode, isMobile }) => {
+	if (previewMode) return {
+		overlayExitAnimation: {
+			opacity: 0,
+			x: 0
+		},
+		overlayAnimation: {
+			opacity: 1,
+			x: 0
+		}
+	};
+	if (isMobile) return {
+		overlayExitAnimation: { opacity: 0 },
+		overlayAnimation: { opacity: 1 }
+	};
+	return {
+		overlayExitAnimation: {
+			opacity: 0,
+			x: 512
+		},
+		overlayAnimation: {
+			opacity: 1,
+			x: 0
+		}
+	};
+};
+const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestId, previewMode = false, isResultsModalOpen = false }) => {
+	const { isMobile } = (0, __envive_ai_react_toolkit_v3_utils_useCheckIsMobile.useCheckIsMobile)();
+	const { overlayExitAnimation, overlayAnimation } = useOverlayAnimations({
+		previewMode,
+		isMobile
+	});
 	const overlayClasses = (0, classnames.default)(previewMode ? "envive-tw-absolute" : "envive-tw-fixed", "envive-tw-top-0", "envive-tw-left-0", previewMode ? "envive-tw-h-full" : "envive-tw-h-screen", "envive-tw-w-full", "envive-tw-z-[2147483647]", className);
-	const backdropClasses = (0, classnames.default)("envive-tw-absolute", "envive-tw-top-0", "envive-tw-left-0", "envive-tw-h-full", "envive-tw-w-full", "envive-tw-bg-black", "envive-tw-opacity-50", "envive-tw-pointer-events-none", "envive-tw-z-0");
+	const backdropClasses = (0, classnames.default)("envive-tw-absolute", "envive-tw-top-0", "envive-tw-left-0", "envive-tw-h-full", "envive-tw-w-full", isMobile ? "envive-tw-bg-black" : "", "envive-tw-opacity-50", "envive-tw-pointer-events-none", "envive-tw-z-0");
 	const overlayContentClasses = (0, classnames.default)("envive-tw-relative", "envive-tw-flex", "envive-tw-justify-end", "envive-tw-items-stretch", "envive-tw-h-full", "envive-tw-w-full", "envive-tw-pointer-events-auto", "envive-tw-cursor-pointer", "envive-tw-z-10");
-	const chatWrapper = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, { children: isOpened && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, { children: isOpened && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
 		className: overlayClasses,
 		style: { top: "0px" },
 		initial: { opacity: 0 },
 		animate: { opacity: 1 },
 		exit: { opacity: 0 },
-		transition: { duration: .3 },
+		transition: { duration: ANIMATION_DURATION },
 		"data-testid": dataTestId,
 		children: [!previewMode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
 			className: backdropClasses,
 			initial: { opacity: 0 },
 			animate: { opacity: .5 },
 			exit: { opacity: 0 },
-			transition: { duration: .3 },
+			transition: { duration: ANIMATION_DURATION },
 			"aria-label": "Close chat"
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: overlayContentClasses,
@@ -35,22 +68,14 @@ const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestI
 			tabIndex: 0,
 			"aria-label": "Close floating chat",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-				initial: {
-					opacity: 0,
-					x: previewMode ? 0 : 512
-				},
-				animate: {
-					opacity: 1,
-					x: 0
-				},
-				exit: {
-					opacity: 0,
-					x: previewMode ? 0 : 512
-				},
-				transition: { duration: .3 },
+				initial: overlayExitAnimation,
+				animate: overlayAnimation,
+				exit: overlayExitAnimation,
+				transition: { duration: ANIMATION_DURATION },
 				style: {
 					height: previewMode ? "100%" : "100dvh",
-					cursor: "default"
+					cursor: "default",
+					margin: isResultsModalOpen ? "0 auto" : "0"
 				},
 				className: "envive-tw-shadow-md",
 				onClick: (e) => e.stopPropagation(),
@@ -58,8 +83,6 @@ const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestI
 			})
 		})]
 	}, "floating-chat-overlay") });
-	if (previewMode) return chatWrapper;
-	return chatWrapper;
 };
 FloatingChatOverlay.displayName = "FloatingChatOverlay";
 

package/dist/widgets/FloatingChatWidget/FloatingChatOverlay.js

@@ -1,26 +1,59 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
 import { AnimatePresence, motion } from "framer-motion";
+import { useCheckIsMobile } from "@envive-ai/react-toolkit-v3/utils/useCheckIsMobile";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatOverlay.tsx
-const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestId, previewMode = false }) => {
+const ANIMATION_DURATION = .3;
+const useOverlayAnimations = ({ previewMode, isMobile }) => {
+	if (previewMode) return {
+		overlayExitAnimation: {
+			opacity: 0,
+			x: 0
+		},
+		overlayAnimation: {
+			opacity: 1,
+			x: 0
+		}
+	};
+	if (isMobile) return {
+		overlayExitAnimation: { opacity: 0 },
+		overlayAnimation: { opacity: 1 }
+	};
+	return {
+		overlayExitAnimation: {
+			opacity: 0,
+			x: 512
+		},
+		overlayAnimation: {
+			opacity: 1,
+			x: 0
+		}
+	};
+};
+const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestId, previewMode = false, isResultsModalOpen = false }) => {
+	const { isMobile } = useCheckIsMobile();
+	const { overlayExitAnimation, overlayAnimation } = useOverlayAnimations({
+		previewMode,
+		isMobile
+	});
 	const overlayClasses = classNames(previewMode ? "envive-tw-absolute" : "envive-tw-fixed", "envive-tw-top-0", "envive-tw-left-0", previewMode ? "envive-tw-h-full" : "envive-tw-h-screen", "envive-tw-w-full", "envive-tw-z-[2147483647]", className);
-	const backdropClasses = classNames("envive-tw-absolute", "envive-tw-top-0", "envive-tw-left-0", "envive-tw-h-full", "envive-tw-w-full", "envive-tw-bg-black", "envive-tw-opacity-50", "envive-tw-pointer-events-none", "envive-tw-z-0");
+	const backdropClasses = classNames("envive-tw-absolute", "envive-tw-top-0", "envive-tw-left-0", "envive-tw-h-full", "envive-tw-w-full", isMobile ? "envive-tw-bg-black" : "", "envive-tw-opacity-50", "envive-tw-pointer-events-none", "envive-tw-z-0");
 	const overlayContentClasses = classNames("envive-tw-relative", "envive-tw-flex", "envive-tw-justify-end", "envive-tw-items-stretch", "envive-tw-h-full", "envive-tw-w-full", "envive-tw-pointer-events-auto", "envive-tw-cursor-pointer", "envive-tw-z-10");
-	const chatWrapper = /* @__PURE__ */ jsx(AnimatePresence, { children: isOpened && /* @__PURE__ */ jsxs(motion.div, {
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpened && /* @__PURE__ */ jsxs(motion.div, {
 		className: overlayClasses,
 		style: { top: "0px" },
 		initial: { opacity: 0 },
 		animate: { opacity: 1 },
 		exit: { opacity: 0 },
-		transition: { duration: .3 },
+		transition: { duration: ANIMATION_DURATION },
 		"data-testid": dataTestId,
 		children: [!previewMode && /* @__PURE__ */ jsx(motion.div, {
 			className: backdropClasses,
 			initial: { opacity: 0 },
 			animate: { opacity: .5 },
 			exit: { opacity: 0 },
-			transition: { duration: .3 },
+			transition: { duration: ANIMATION_DURATION },
 			"aria-label": "Close chat"
 		}), /* @__PURE__ */ jsx("div", {
 			className: overlayContentClasses,
@@ -33,22 +66,14 @@ const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestI
 			tabIndex: 0,
 			"aria-label": "Close floating chat",
 			children: /* @__PURE__ */ jsx(motion.div, {
-				initial: {
-					opacity: 0,
-					x: previewMode ? 0 : 512
-				},
-				animate: {
-					opacity: 1,
-					x: 0
-				},
-				exit: {
-					opacity: 0,
-					x: previewMode ? 0 : 512
-				},
-				transition: { duration: .3 },
+				initial: overlayExitAnimation,
+				animate: overlayAnimation,
+				exit: overlayExitAnimation,
+				transition: { duration: ANIMATION_DURATION },
 				style: {
 					height: previewMode ? "100%" : "100dvh",
-					cursor: "default"
+					cursor: "default",
+					margin: isResultsModalOpen ? "0 auto" : "0"
 				},
 				className: "envive-tw-shadow-md",
 				onClick: (e) => e.stopPropagation(),
@@ -56,8 +81,6 @@ const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestI
 			})
 		})]
 	}, "floating-chat-overlay") });
-	if (previewMode) return chatWrapper;
-	return chatWrapper;
 };
 FloatingChatOverlay.displayName = "FloatingChatOverlay";
 

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.cjs

@@ -11,14 +11,15 @@ const require_useFloatingButtonVisibility = require('./hooks/useFloatingButtonVi
 const require_useAutoPopup = require('./hooks/useAutoPopup.cjs');
 let react = require("react");
 let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
+let __envive_ai_react_hooks_hooks_TrackComponentVisibleEvent = require("@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent");
 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_toolkit_v3_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
 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_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
 let __envive_ai_react_toolkit_v3_FloatingButton = require("@envive-ai/react-toolkit-v3/FloatingButton");
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.tsx
@@ -43,7 +44,7 @@ const CXButtonProvider = ({ provider, enabled, suppressMerchantButton, onSwitchT
 	}) });
 };
 const FloatingChatWidgetHandler = (props) => {
-	const { previewButtonOnly, previewChatAlwaysOpen } = props;
+	const { previewButtonOnly, previewChatAlwaysOpen, previewCXButtonsEnabled } = props;
 	const salesAgentData = (0, __envive_ai_react_hooks_contexts_salesAgentContext.useSalesAgent)();
 	const { trackWidgetInteraction } = (0, __envive_ai_react_hooks_hooks_WidgetInteraction.useWidgetInteraction)();
 	const { userHasInteractedValue } = require_useGetWidgetStatus.default();
@@ -52,6 +53,7 @@ const FloatingChatWidgetHandler = (props) => {
 	const cxProvider = customerServiceIntegration?.provider ?? require_types.CustomerServiceType.unsupported;
 	const { isOpen, openChat, closeChat, onHover } = (0, __envive_ai_react_hooks_hooks_ChatToggle.useChatToggle)();
 	const [isCXOpen, setIsCXOpen] = (0, react.useState)(false);
+	const [isResultsModalOpen, setIsResultsModalOpen] = (0, react.useState)(false);
 	(0, react.useEffect)(() => {
 		if (isOpen) setIsCXOpen(false);
 	}, [isOpen]);
@@ -77,40 +79,34 @@ const FloatingChatWidgetHandler = (props) => {
 		return uiConfig?.lookAndFeel?.theme ?? __envive_ai_react_toolkit_v3_Tokens.Theme.GLOBAL_CUSTOM;
 	}, [isUiConfigLoading, uiConfig]);
 	require_useAutoPopup.useAutoPopup({ autoPopupConfig: floatingChat?.autoPopupConfig });
-	const { trackEvent } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
-	const hasTrackedEvent = (0, react.useRef)(false);
-	(0, react.useEffect)(() => {
-		if (buttonShouldRender && !hasTrackedEvent.current) {
-			trackEvent({
-				eventName: __envive_ai_react_hooks_contexts_amplitudeContext.SpiffyMetricsEventName.ChatComponentVisible,
-				eventProps: {
-					widget_config_id: "floating-button",
-					widget_type: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.FloatingButtonV3
-				}
-			});
-			hasTrackedEvent.current = true;
-		}
-	}, [trackEvent, buttonShouldRender]);
+	const { isReady } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
+	const floatingButtonVisibilityRef = (0, react.useRef)(null);
+	(0, __envive_ai_react_hooks_hooks_TrackComponentVisibleEvent.useTrackComponentVisibleEvent)(floatingButtonVisibilityRef, {
+		widget_config_id: "floating-button",
+		widget_type: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.FloatingButtonV3
+	}, "0px", isReady && buttonShouldRender);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CXButtonProvider, {
 		provider: cxProvider,
 		enabled: customerServiceIntegration?.enabled ?? false,
 		suppressMerchantButton: customerServiceIntegration?.suppressMerchantButton ?? false,
 		onSwitchToAgent: () => setIsCXOpen(true),
 		onCXClose: () => setIsCXOpen(false),
-		children: ({ isSwitchEnabled, toggle }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(previewChatAlwaysOpen || effectiveIsOpen) && !previewButtonOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FloatingChatOverlay.FloatingChatOverlay, {
+		children: ({ isSwitchEnabled, toggle }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!previewButtonOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FloatingChatOverlay.FloatingChatOverlay, {
 			isOpened: effectiveIsOpen,
+			isResultsModalOpen,
 			onClose: previewChatAlwaysOpen ? () => {} : () => {
 				closeChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY);
 				handleClose({ collapse_source: "body_click" });
 			},
 			previewMode: !!previewChatAlwaysOpen,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatingChat, {
+				setIsResultsModalOpen,
 				theme,
 				salesAgentData,
 				hardcopyContent,
 				floatingChatConfig: uiConfig?.floatingChat ?? {},
 				lookAndFeelConfig: uiConfig?.lookAndFeel ?? {},
-				isCXButtonSwitchEnabled: !!isSwitchEnabled?.(),
+				isCXButtonSwitchEnabled: previewCXButtonsEnabled ? true : !!isSwitchEnabled?.(),
 				isFloatingChatOpen: effectiveIsOpen,
 				onToggleCXButton: toggle,
 				debugBar: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_debugBar.DebugBar, {}),
@@ -123,29 +119,33 @@ const FloatingChatWidgetHandler = (props) => {
 					handleClose({ collapse_source: "close_button" });
 				}
 			}) })
-		}), buttonShouldRender && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_FloatingButton.FloatingButton, {
-			id: require_constants.FLOATING_BUTTON_ID,
-			variant: floatingButton?.style,
-			mode: floatingButton?.mode,
-			backgroundColor: floatingButton?.backgroundColor,
-			onClick: previewButtonOnly ? () => {} : () => openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_BUTTON),
-			onMouseOver: onHover,
-			customIcon: floatingButton?.iconSVGSrc,
-			show: floatingButton?.showOption,
-			location: floatingButton?.position,
-			hasInteractionHappened: userHasInteractedValue,
-			ariaLabel: "Open chat",
-			previewMode: !!previewButtonOnly
+		}), buttonShouldRender && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: floatingButtonVisibilityRef,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_FloatingButton.FloatingButton, {
+				id: require_constants.FLOATING_BUTTON_ID,
+				variant: floatingButton?.style,
+				mode: floatingButton?.mode,
+				backgroundColor: floatingButton?.backgroundColor,
+				onClick: previewButtonOnly ? () => {} : () => openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_BUTTON),
+				onMouseOver: onHover,
+				customIcon: floatingButton?.iconSVGSrc,
+				show: floatingButton?.showOption,
+				location: floatingButton?.position,
+				hasInteractionHappened: userHasInteractedValue,
+				ariaLabel: "Open chat",
+				previewMode: !!previewButtonOnly
+			})
 		})] })
 	}, cxProvider);
 };
-const FloatingChatWidgetWithBaseWidget = require_withBaseWidget.withBaseWidget(FloatingChatWidgetHandler);
-const FloatingChatWidget = ({ previewButtonOnly, previewChatAlwaysOpen } = {}) => {
+const FloatingChatWidgetWithBaseWidget = require_withBaseWidget.withBaseWidget(FloatingChatWidgetHandler, { deferLoading: false });
+const FloatingChatWidget = ({ previewButtonOnly, previewChatAlwaysOpen, previewCXButtonsEnabled } = {}) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatingChatWidgetWithBaseWidget, {
 		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.FloatingChatV3,
 		widgetConfigId: "fake-widget-config-id",
 		previewButtonOnly,
-		previewChatAlwaysOpen
+		previewChatAlwaysOpen,
+		previewCXButtonsEnabled
 	});
 };
 FloatingChatWidget.displayName = "FloatingChatWidget";

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.d.cts

@@ -4,11 +4,13 @@ import * as react_jsx_runtime17 from "react/jsx-runtime";
 interface FloatingChatWidgetProps {
   previewButtonOnly?: boolean;
   previewChatAlwaysOpen?: boolean;
+  previewCXButtonsEnabled?: boolean;
 }
 declare const FloatingChatWidget: {
   ({
     previewButtonOnly,
-    previewChatAlwaysOpen
+    previewChatAlwaysOpen,
+    previewCXButtonsEnabled
   }?: FloatingChatWidgetProps): react_jsx_runtime17.JSX.Element;
   displayName: string;
 };

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.d.ts

@@ -1,15 +1,17 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.d.ts
 interface FloatingChatWidgetProps {
   previewButtonOnly?: boolean;
   previewChatAlwaysOpen?: boolean;
+  previewCXButtonsEnabled?: boolean;
 }
 declare const FloatingChatWidget: {
   ({
     previewButtonOnly,
-    previewChatAlwaysOpen
-  }?: FloatingChatWidgetProps): react_jsx_runtime4.JSX.Element;
+    previewChatAlwaysOpen,
+    previewCXButtonsEnabled
+  }?: FloatingChatWidgetProps): react_jsx_runtime19.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.js

@@ -9,15 +9,16 @@ import { FloatingChatOverlay } from "./FloatingChatOverlay.js";
 import { useFloatingButtonVisibility } from "./hooks/useFloatingButtonVisibility.js";
 import { useAutoPopup } from "./hooks/useAutoPopup.js";
 import { Suspense, lazy, useEffect, useMemo, useRef, useState } from "react";
-import { EnviveMetricsEventName, SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+import { EnviveMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+import { useTrackComponentVisibleEvent } from "@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent";
 import { Fragment, jsx, jsxs } 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 { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
 import { ChatElementDisplayLocationV3 } from "@envive-ai/react-hooks/application/models";
 import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
 import { WidgetInteractionComponent, WidgetInteractionType } from "@envive-ai/react-hooks/hooks/WidgetInteraction/types";
-import { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
 import { FloatingButton } from "@envive-ai/react-toolkit-v3/FloatingButton";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.tsx
@@ -42,7 +43,7 @@ const CXButtonProvider = ({ provider, enabled, suppressMerchantButton, onSwitchT
 	}) });
 };
 const FloatingChatWidgetHandler = (props) => {
-	const { previewButtonOnly, previewChatAlwaysOpen } = props;
+	const { previewButtonOnly, previewChatAlwaysOpen, previewCXButtonsEnabled } = props;
 	const salesAgentData = useSalesAgent();
 	const { trackWidgetInteraction } = useWidgetInteraction();
 	const { userHasInteractedValue } = useGetWidgetStatus_default();
@@ -51,6 +52,7 @@ const FloatingChatWidgetHandler = (props) => {
 	const cxProvider = customerServiceIntegration?.provider ?? CustomerServiceType.unsupported;
 	const { isOpen, openChat, closeChat, onHover } = useChatToggle();
 	const [isCXOpen, setIsCXOpen] = useState(false);
+	const [isResultsModalOpen, setIsResultsModalOpen] = useState(false);
 	useEffect(() => {
 		if (isOpen) setIsCXOpen(false);
 	}, [isOpen]);
@@ -76,40 +78,34 @@ const FloatingChatWidgetHandler = (props) => {
 		return uiConfig?.lookAndFeel?.theme ?? Theme.GLOBAL_CUSTOM;
 	}, [isUiConfigLoading, uiConfig]);
 	useAutoPopup({ autoPopupConfig: floatingChat?.autoPopupConfig });
-	const { trackEvent } = useAmplitude();
-	const hasTrackedEvent = useRef(false);
-	useEffect(() => {
-		if (buttonShouldRender && !hasTrackedEvent.current) {
-			trackEvent({
-				eventName: SpiffyMetricsEventName.ChatComponentVisible,
-				eventProps: {
-					widget_config_id: "floating-button",
-					widget_type: WidgetTypeV3.FloatingButtonV3
-				}
-			});
-			hasTrackedEvent.current = true;
-		}
-	}, [trackEvent, buttonShouldRender]);
+	const { isReady } = useAmplitude();
+	const floatingButtonVisibilityRef = useRef(null);
+	useTrackComponentVisibleEvent(floatingButtonVisibilityRef, {
+		widget_config_id: "floating-button",
+		widget_type: WidgetTypeV3.FloatingButtonV3
+	}, "0px", isReady && buttonShouldRender);
 	return /* @__PURE__ */ jsx(CXButtonProvider, {
 		provider: cxProvider,
 		enabled: customerServiceIntegration?.enabled ?? false,
 		suppressMerchantButton: customerServiceIntegration?.suppressMerchantButton ?? false,
 		onSwitchToAgent: () => setIsCXOpen(true),
 		onCXClose: () => setIsCXOpen(false),
-		children: ({ isSwitchEnabled, toggle }) => /* @__PURE__ */ jsxs(Fragment, { children: [(previewChatAlwaysOpen || effectiveIsOpen) && !previewButtonOnly && /* @__PURE__ */ jsx(FloatingChatOverlay, {
+		children: ({ isSwitchEnabled, toggle }) => /* @__PURE__ */ jsxs(Fragment, { children: [!previewButtonOnly && /* @__PURE__ */ jsx(FloatingChatOverlay, {
 			isOpened: effectiveIsOpen,
+			isResultsModalOpen,
 			onClose: previewChatAlwaysOpen ? () => {} : () => {
 				closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY);
 				handleClose({ collapse_source: "body_click" });
 			},
 			previewMode: !!previewChatAlwaysOpen,
 			children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(FloatingChat, {
+				setIsResultsModalOpen,
 				theme,
 				salesAgentData,
 				hardcopyContent,
 				floatingChatConfig: uiConfig?.floatingChat ?? {},
 				lookAndFeelConfig: uiConfig?.lookAndFeel ?? {},
-				isCXButtonSwitchEnabled: !!isSwitchEnabled?.(),
+				isCXButtonSwitchEnabled: previewCXButtonsEnabled ? true : !!isSwitchEnabled?.(),
 				isFloatingChatOpen: effectiveIsOpen,
 				onToggleCXButton: toggle,
 				debugBar: /* @__PURE__ */ jsx(DebugBar, {}),
@@ -122,29 +118,33 @@ const FloatingChatWidgetHandler = (props) => {
 					handleClose({ collapse_source: "close_button" });
 				}
 			}) })
-		}), buttonShouldRender && /* @__PURE__ */ jsx(FloatingButton, {
-			id: FLOATING_BUTTON_ID,
-			variant: floatingButton?.style,
-			mode: floatingButton?.mode,
-			backgroundColor: floatingButton?.backgroundColor,
-			onClick: previewButtonOnly ? () => {} : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON),
-			onMouseOver: onHover,
-			customIcon: floatingButton?.iconSVGSrc,
-			show: floatingButton?.showOption,
-			location: floatingButton?.position,
-			hasInteractionHappened: userHasInteractedValue,
-			ariaLabel: "Open chat",
-			previewMode: !!previewButtonOnly
+		}), buttonShouldRender && /* @__PURE__ */ jsx("div", {
+			ref: floatingButtonVisibilityRef,
+			children: /* @__PURE__ */ jsx(FloatingButton, {
+				id: FLOATING_BUTTON_ID,
+				variant: floatingButton?.style,
+				mode: floatingButton?.mode,
+				backgroundColor: floatingButton?.backgroundColor,
+				onClick: previewButtonOnly ? () => {} : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON),
+				onMouseOver: onHover,
+				customIcon: floatingButton?.iconSVGSrc,
+				show: floatingButton?.showOption,
+				location: floatingButton?.position,
+				hasInteractionHappened: userHasInteractedValue,
+				ariaLabel: "Open chat",
+				previewMode: !!previewButtonOnly
+			})
 		})] })
 	}, cxProvider);
 };
-const FloatingChatWidgetWithBaseWidget = withBaseWidget(FloatingChatWidgetHandler);
-const FloatingChatWidget = ({ previewButtonOnly, previewChatAlwaysOpen } = {}) => {
+const FloatingChatWidgetWithBaseWidget = withBaseWidget(FloatingChatWidgetHandler, { deferLoading: false });
+const FloatingChatWidget = ({ previewButtonOnly, previewChatAlwaysOpen, previewCXButtonsEnabled } = {}) => {
 	return /* @__PURE__ */ jsx(FloatingChatWidgetWithBaseWidget, {
 		widgetType: WidgetTypeV3.FloatingChatV3,
 		widgetConfigId: "fake-widget-config-id",
 		previewButtonOnly,
-		previewChatAlwaysOpen
+		previewChatAlwaysOpen,
+		previewCXButtonsEnabled
 	});
 };
 FloatingChatWidget.displayName = "FloatingChatWidget";

package/dist/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.d.cts

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

package/dist/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.d.ts

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

package/dist/widgets/ProductCardWidget/ProductCardWidget.cjs

@@ -8,11 +8,11 @@ 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_toolkit_v3_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
 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_toolkit_v3_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
 let __envive_ai_react_toolkit_v3_ProductCard = require("@envive-ai/react-toolkit-v3/ProductCard");
 let __envive_ai_react_toolkit_v3_PromptButton_types = require("@envive-ai/react-toolkit-v3/PromptButton/types");
 
@@ -49,16 +49,6 @@ const ProductCardWidgetHandler = (props) => {
 		const rawValues = hardcopyContent?.rawValues;
 		return require_functions.getStringIdForText(rawValues, text);
 	});
-	const { widgetConfigId } = props;
-	(0, react.useEffect)(() => {
-		trackEvent({
-			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.SpiffyMetricsEventName.ChatComponentVisible,
-			eventProps: {
-				widget_config_id: widgetConfigId,
-				widget_type: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ProductCardV3
-			}
-		});
-	}, [trackEvent, widgetConfigId]);
 	const handleSelect = (0, react.useCallback)((text) => {
 		const rawValues = hardcopyContent?.rawValues;
 		const stringId = require_functions.getStringIdForText(rawValues, text);

package/dist/widgets/ProductCardWidget/ProductCardWidget.d.cts

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

package/dist/widgets/ProductCardWidget/ProductCardWidget.d.ts

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

package/dist/widgets/ProductCardWidget/ProductCardWidget.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, useEffect } from "react";
-import { EnviveMetricsEventName, SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+import { useCallback } from "react";
+import { EnviveMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
 import { jsx } from "react/jsx-runtime";
 import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
 import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
 import { useChatToggle } from "@envive-ai/react-hooks/hooks/ChatToggle";
+import { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
 import { ChatElementDisplayLocationV3 } from "@envive-ai/react-hooks/application/models";
 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 { ProductCard } from "@envive-ai/react-toolkit-v3/ProductCard";
 import { PromptButtonVariant } from "@envive-ai/react-toolkit-v3/PromptButton/types";
 
@@ -48,16 +48,6 @@ const ProductCardWidgetHandler = (props) => {
 		const rawValues = hardcopyContent?.rawValues;
 		return getStringIdForText(rawValues, text);
 	});
-	const { widgetConfigId } = props;
-	useEffect(() => {
-		trackEvent({
-			eventName: SpiffyMetricsEventName.ChatComponentVisible,
-			eventProps: {
-				widget_config_id: widgetConfigId,
-				widget_type: WidgetTypeV3.ProductCardV3
-			}
-		});
-	}, [trackEvent, widgetConfigId]);
 	const handleSelect = useCallback((text) => {
 		const rawValues = hardcopyContent?.rawValues;
 		const stringId = getStringIdForText(rawValues, text);