@envive-ai/react-widgets-v3 0.3.30 → 0.3.32

package/dist/CXIntegration/implementations/useGladlyUnifiedCXButton.cjs

@@ -1,21 +1,81 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_constants = require('../../widgets/FloatingChatWidget/constants.cjs');
+let react = require("react");
 let __envive_ai_react_hooks_application_utils = require("@envive-ai/react-hooks/application/utils");
 let __envive_ai_react_hooks_hooks_ElementObserver = require("@envive-ai/react-hooks/hooks/ElementObserver");
 
 //#region src/CXIntegration/implementations/useGladlyUnifiedCXButton.ts
-const useGladlyUnifiedCXButton = ({ onSwitchToAgent }) => {
-	const gladlyButton = document.querySelector("[data-aid*=\"gladlyChatChatButton\"]");
+const GLADLY_CONTAINER_ID = "gladlyChat_container";
+const GLADLY_BUTTON_SELECTOR = "[data-aid*=\"gladlyChatChatButton\"]";
+const GLADLY_OPEN_SIZE_THRESHOLD = 200;
+const POLL_INTERVAL_MS = 400;
+const getGladly = () => window.Gladly;
+const forceHideContainer = (node) => {
+	node?.style.setProperty("display", "none", "important");
+};
+const restoreContainer = (node) => {
+	node?.style.removeProperty("display");
+};
+const useGladlyUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchantButton }) => {
+	const gladlyContainer = (0, __envive_ai_react_hooks_hooks_ElementObserver.useElementObserver)(__envive_ai_react_hooks_application_utils.SelectorFactory.id(GLADLY_CONTAINER_ID));
 	const enviveFloatingButton = (0, __envive_ai_react_hooks_hooks_ElementObserver.useElementObserver)(__envive_ai_react_hooks_application_utils.SelectorFactory.id(require_constants.FLOATING_BUTTON_ID));
+	const wasOpenRef = (0, react.useRef)(false);
+	const isSwitchEnabled = () => !!document.getElementById(GLADLY_CONTAINER_ID);
+	gladlyContainer.onAdd((el) => {
+		if (suppressMerchantButton && el && !wasOpenRef.current) forceHideContainer(el);
+	});
+	gladlyContainer.onChange((el) => {
+		if (!suppressMerchantButton || !el || wasOpenRef.current) return;
+		if (el.style.display !== "none") forceHideContainer(el);
+	});
+	(0, react.useEffect)(() => {
+		if (!suppressMerchantButton) restoreContainer(document.getElementById(GLADLY_CONTAINER_ID));
+	}, [suppressMerchantButton]);
+	(0, react.useEffect)(() => {
+		const handleOpen = () => {
+			wasOpenRef.current = true;
+			enviveFloatingButton.hide();
+		};
+		const handleClose = () => {
+			wasOpenRef.current = false;
+			onCXClose?.();
+			const node = document.getElementById(GLADLY_CONTAINER_ID);
+			if (suppressMerchantButton) forceHideContainer(node);
+			enviveFloatingButton.show();
+		};
+		const checkState = () => {
+			const node = document.getElementById(GLADLY_CONTAINER_ID);
+			if (!node) return;
+			const styles = window.getComputedStyle(node);
+			if (styles.display === "none" || styles.visibility === "hidden") {
+				if (wasOpenRef.current) handleClose();
+				return;
+			}
+			const rect = node.getBoundingClientRect();
+			const isOpen = rect.width > GLADLY_OPEN_SIZE_THRESHOLD && rect.height > GLADLY_OPEN_SIZE_THRESHOLD;
+			if (isOpen && !wasOpenRef.current) handleOpen();
+			else if (!isOpen && wasOpenRef.current) handleClose();
+		};
+		const intervalId = window.setInterval(checkState, POLL_INTERVAL_MS);
+		return () => window.clearInterval(intervalId);
+	}, [
+		suppressMerchantButton,
+		enviveFloatingButton,
+		onCXClose
+	]);
 	const toggle = () => {
 		onSwitchToAgent();
 		enviveFloatingButton.hide();
-		if (gladlyButton && gladlyButton instanceof HTMLElement) gladlyButton.click();
-	};
-	const isGladlyButtonEnabled = () => {
-		return !!document.getElementById("gladlyChat_container");
+		wasOpenRef.current = true;
+		restoreContainer(document.getElementById(GLADLY_CONTAINER_ID));
+		const gladly = getGladly();
+		if (gladly && typeof gladly.show === "function") {
+			gladly.show();
+			return;
+		}
+		const buttonEl = document.querySelector(GLADLY_BUTTON_SELECTOR);
+		if (buttonEl instanceof HTMLElement) buttonEl.click();
 	};
-	const isSwitchEnabled = () => isGladlyButtonEnabled();
 	return {
 		toggle,
 		isSwitchEnabled

package/dist/CXIntegration/implementations/useGladlyUnifiedCXButton.js

@@ -1,20 +1,80 @@
 import { FLOATING_BUTTON_ID } from "../../widgets/FloatingChatWidget/constants.js";
+import { useEffect, useRef } from "react";
 import { SelectorFactory } from "@envive-ai/react-hooks/application/utils";
 import { useElementObserver } from "@envive-ai/react-hooks/hooks/ElementObserver";
 
 //#region src/CXIntegration/implementations/useGladlyUnifiedCXButton.ts
-const useGladlyUnifiedCXButton = ({ onSwitchToAgent }) => {
-	const gladlyButton = document.querySelector("[data-aid*=\"gladlyChatChatButton\"]");
+const GLADLY_CONTAINER_ID = "gladlyChat_container";
+const GLADLY_BUTTON_SELECTOR = "[data-aid*=\"gladlyChatChatButton\"]";
+const GLADLY_OPEN_SIZE_THRESHOLD = 200;
+const POLL_INTERVAL_MS = 400;
+const getGladly = () => window.Gladly;
+const forceHideContainer = (node) => {
+	node?.style.setProperty("display", "none", "important");
+};
+const restoreContainer = (node) => {
+	node?.style.removeProperty("display");
+};
+const useGladlyUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchantButton }) => {
+	const gladlyContainer = useElementObserver(SelectorFactory.id(GLADLY_CONTAINER_ID));
 	const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+	const wasOpenRef = useRef(false);
+	const isSwitchEnabled = () => !!document.getElementById(GLADLY_CONTAINER_ID);
+	gladlyContainer.onAdd((el) => {
+		if (suppressMerchantButton && el && !wasOpenRef.current) forceHideContainer(el);
+	});
+	gladlyContainer.onChange((el) => {
+		if (!suppressMerchantButton || !el || wasOpenRef.current) return;
+		if (el.style.display !== "none") forceHideContainer(el);
+	});
+	useEffect(() => {
+		if (!suppressMerchantButton) restoreContainer(document.getElementById(GLADLY_CONTAINER_ID));
+	}, [suppressMerchantButton]);
+	useEffect(() => {
+		const handleOpen = () => {
+			wasOpenRef.current = true;
+			enviveFloatingButton.hide();
+		};
+		const handleClose = () => {
+			wasOpenRef.current = false;
+			onCXClose?.();
+			const node = document.getElementById(GLADLY_CONTAINER_ID);
+			if (suppressMerchantButton) forceHideContainer(node);
+			enviveFloatingButton.show();
+		};
+		const checkState = () => {
+			const node = document.getElementById(GLADLY_CONTAINER_ID);
+			if (!node) return;
+			const styles = window.getComputedStyle(node);
+			if (styles.display === "none" || styles.visibility === "hidden") {
+				if (wasOpenRef.current) handleClose();
+				return;
+			}
+			const rect = node.getBoundingClientRect();
+			const isOpen = rect.width > GLADLY_OPEN_SIZE_THRESHOLD && rect.height > GLADLY_OPEN_SIZE_THRESHOLD;
+			if (isOpen && !wasOpenRef.current) handleOpen();
+			else if (!isOpen && wasOpenRef.current) handleClose();
+		};
+		const intervalId = window.setInterval(checkState, POLL_INTERVAL_MS);
+		return () => window.clearInterval(intervalId);
+	}, [
+		suppressMerchantButton,
+		enviveFloatingButton,
+		onCXClose
+	]);
 	const toggle = () => {
 		onSwitchToAgent();
 		enviveFloatingButton.hide();
-		if (gladlyButton && gladlyButton instanceof HTMLElement) gladlyButton.click();
-	};
-	const isGladlyButtonEnabled = () => {
-		return !!document.getElementById("gladlyChat_container");
+		wasOpenRef.current = true;
+		restoreContainer(document.getElementById(GLADLY_CONTAINER_ID));
+		const gladly = getGladly();
+		if (gladly && typeof gladly.show === "function") {
+			gladly.show();
+			return;
+		}
+		const buttonEl = document.querySelector(GLADLY_BUTTON_SELECTOR);
+		if (buttonEl instanceof HTMLElement) buttonEl.click();
 	};
-	const isSwitchEnabled = () => isGladlyButtonEnabled();
 	return {
 		toggle,
 		isSwitchEnabled

package/dist/hocs/withBaseWidget/withBaseWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps, WithBaseWidgetOptions } from "./types.cjs";
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/hocs/withBaseWidget/withBaseWidget.d.ts
 declare function withBaseWidget<P extends BaseWidgetProps>(Widget: React.ComponentType<P>, options?: WithBaseWidgetOptions): {
-  (props: P): react_jsx_runtime13.JSX.Element;
+  (props: P): react_jsx_runtime6.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/hocs/withBaseWidget/withBaseWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps, WithBaseWidgetOptions } from "./types.js";
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/hocs/withBaseWidget/withBaseWidget.d.ts
 declare function withBaseWidget<P extends BaseWidgetProps>(Widget: React.ComponentType<P>, options?: WithBaseWidgetOptions): {
-  (props: P): react_jsx_runtime19.JSX.Element;
+  (props: P): react_jsx_runtime12.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/packages/widgets/dist/SearchResults/SearchResultsWidget.d.ts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime2 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_runtime2.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/packages/widgets/dist/SearchZeroState/SearchZeroStateWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 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_runtime2.JSX.Element;
+}: SearchZeroStateWidgetProps) => react_jsx_runtime3.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/packages/widgets/dist/SuggestionBar/SuggestionBar.d.ts

@@ -1,5 +1,5 @@
 import { SuggestionBarLocationForMetrics } from "./types.js";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime0 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_runtime3.JSX.Element;
+}: Readonly<SuggestionBarProps>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#endregion
 export { SuggestionBar };

package/dist/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.cts

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

package/dist/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.ts

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

package/dist/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.ts
 declare const ChatPreviewLoadingWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime0.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime7.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewLoadingWidgetProps {
@@ -11,6 +11,6 @@ interface ChatPreviewLoadingWidgetProps {
 }
 declare const ChatPreviewLoadingWidget: ({
   widgetConfigId
-}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime0.JSX.Element;
+}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime7.JSX.Element;
 //#endregion
 export { ChatPreviewLoadingWidget, ChatPreviewLoadingWidgetProps, ChatPreviewLoadingWidgetWithBaseWidget };

package/dist/widgets/ChatPreviewWidget/ChatPreviewWidget.d.cts

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

package/dist/widgets/ChatPreviewWidget/ChatPreviewWidget.d.ts

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

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.cjs

@@ -127,22 +127,20 @@ const FloatingChatWidgetHandler = (props) => {
 					handleClose({ collapse_source: "close_button" });
 				}
 			}) })
-		}), 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
-			})
+		}), buttonShouldRender && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_FloatingButton.FloatingButton, {
+			containerRef: floatingButtonVisibilityRef,
+			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);
 };

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.d.ts
 interface FloatingChatWidgetProps {
@@ -13,7 +13,7 @@ declare const FloatingChatWidget: {
     previewChatAlwaysOpen,
     previewCXButtonsEnabled,
     previewDisclaimer
-  }?: FloatingChatWidgetProps): react_jsx_runtime19.JSX.Element;
+  }?: FloatingChatWidgetProps): react_jsx_runtime5.JSX.Element;
   displayName: string;
 };
 //#endregion

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.d.ts
 interface FloatingChatWidgetProps {
@@ -13,7 +13,7 @@ declare const FloatingChatWidget: {
     previewChatAlwaysOpen,
     previewCXButtonsEnabled,
     previewDisclaimer
-  }?: FloatingChatWidgetProps): react_jsx_runtime9.JSX.Element;
+  }?: FloatingChatWidgetProps): react_jsx_runtime15.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.js

@@ -126,22 +126,20 @@ const FloatingChatWidgetHandler = (props) => {
 					handleClose({ collapse_source: "close_button" });
 				}
 			}) })
-		}), 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
-			})
+		}), buttonShouldRender && /* @__PURE__ */ jsx(FloatingButton, {
+			containerRef: floatingButtonVisibilityRef,
+			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);
 };

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

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

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

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

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

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

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

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

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.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/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.ts
 declare const PromptButtonCarouselWithImageWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime2.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 interface PromptButtonCarouselWithImageWidgetProps {
@@ -12,7 +12,7 @@ interface PromptButtonCarouselWithImageWidgetProps {
 declare const PromptButtonCarouselWithImageWidget: {
   ({
     widgetConfigId
-  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime2.JSX.Element;
+  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/PromptCarouselWidget/PromptCarouselWidget.d.cts

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

package/dist/widgets/SocialProofFlowWidget/SocialProofFlowWidget.d.ts

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

package/dist/widgets/SocialProofWidget/SocialProofWidget.d.cts

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

package/dist/widgets/SocialProofWidget/SocialProofWidget.d.ts

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 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_runtime0.JSX.Element;
+  }: TypingAnimationFlowWidgetProps): react_jsx_runtime3.JSX.Element;
   displayName: string;
 };
 //#endregion

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 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_runtime0.JSX.Element;
+  }: TypingAnimationFlowWidgetProps): react_jsx_runtime7.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_runtime3 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_runtime3.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_runtime3.JSX.Element;
   displayName: string;
 };
 //#endregion

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_runtime2 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_runtime2.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/widgets/dist/SearchZeroState/SearchZeroStateWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 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_runtime2.JSX.Element;
+}: SearchZeroStateWidgetProps) => react_jsx_runtime3.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_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime0 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_runtime3.JSX.Element;
+}: Readonly<SuggestionBarProps>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#endregion
 export { SuggestionBar };

package/package.json

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

package/src/CXIntegration/implementations/useGladlyUnifiedCXButton.ts

@@ -1,31 +1,120 @@
+import { useEffect, useRef } from 'react';
 import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
 import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
 import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
 import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
 
+const GLADLY_CONTAINER_ID = 'gladlyChat_container';
+const GLADLY_BUTTON_SELECTOR = '[data-aid*="gladlyChatChatButton"]';
+const GLADLY_OPEN_SIZE_THRESHOLD = 200;
+const POLL_INTERVAL_MS = 400;
+
+type GladlySdk = {
+  show?: () => void;
+  hide?: () => void;
+  on?: (eventName: string, callback: () => void) => void;
+};
+
+const getGladly = (): GladlySdk | undefined => (window as unknown as { Gladly?: GladlySdk }).Gladly;
+
+const forceHideContainer = (node: HTMLElement | null) => {
+  node?.style.setProperty('display', 'none', 'important');
+};
+
+const restoreContainer = (node: HTMLElement | null) => {
+  node?.style.removeProperty('display');
+};
+
 interface UseGladlyUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
 export const useGladlyUnifiedCXButton = ({
   onSwitchToAgent,
+  onCXClose,
+  suppressMerchantButton,
 }: UseGladlyUnifiedCXButtonProps): UnifiedCXButton => {
-  const gladlyButton = document.querySelector('[data-aid*="gladlyChatChatButton"]');
+  const gladlyContainer = useElementObserver(SelectorFactory.id(GLADLY_CONTAINER_ID));
   const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+  const wasOpenRef = useRef(false);
+
+  const isSwitchEnabled = () => !!document.getElementById(GLADLY_CONTAINER_ID);
+
+  gladlyContainer.onAdd(el => {
+    if (suppressMerchantButton && el && !wasOpenRef.current) {
+      forceHideContainer(el);
+    }
+  });
+
+  gladlyContainer.onChange(el => {
+    if (!suppressMerchantButton || !el || wasOpenRef.current) return;
+    if (el.style.display !== 'none') {
+      forceHideContainer(el);
+    }
+  });
+
+  useEffect(() => {
+    if (!suppressMerchantButton) {
+      restoreContainer(document.getElementById(GLADLY_CONTAINER_ID));
+    }
+  }, [suppressMerchantButton]);
+
+  useEffect(() => {
+    const handleOpen = () => {
+      wasOpenRef.current = true;
+      enviveFloatingButton.hide();
+    };
+
+    const handleClose = () => {
+      wasOpenRef.current = false;
+      onCXClose?.();
+      const node = document.getElementById(GLADLY_CONTAINER_ID);
+      if (suppressMerchantButton) {
+        forceHideContainer(node);
+      }
+      enviveFloatingButton.show();
+    };
+
+    const checkState = () => {
+      const node = document.getElementById(GLADLY_CONTAINER_ID);
+      if (!node) return;
+
+      const styles = window.getComputedStyle(node);
+      const isHidden = styles.display === 'none' || styles.visibility === 'hidden';
+      if (isHidden) {
+        if (wasOpenRef.current) handleClose();
+        return;
+      }
+
+      const rect = node.getBoundingClientRect();
+      const isOpen =
+        rect.width > GLADLY_OPEN_SIZE_THRESHOLD && rect.height > GLADLY_OPEN_SIZE_THRESHOLD;
+
+      if (isOpen && !wasOpenRef.current) handleOpen();
+      else if (!isOpen && wasOpenRef.current) handleClose();
+    };
+
+    const intervalId = window.setInterval(checkState, POLL_INTERVAL_MS);
+    return () => window.clearInterval(intervalId);
+  }, [suppressMerchantButton, enviveFloatingButton, onCXClose]);
 
   const toggle = () => {
     onSwitchToAgent();
     enviveFloatingButton.hide();
-    if (gladlyButton && gladlyButton instanceof HTMLElement) {
-      gladlyButton.click();
+    wasOpenRef.current = true;
+
+    restoreContainer(document.getElementById(GLADLY_CONTAINER_ID));
+
+    const gladly = getGladly();
+    if (gladly && typeof gladly.show === 'function') {
+      gladly.show();
+      return;
     }
-  };
 
-  const isGladlyButtonEnabled = () => {
-    const gladlyButtonElement = document.getElementById('gladlyChat_container');
-    return !!gladlyButtonElement;
+    const buttonEl = document.querySelector(GLADLY_BUTTON_SELECTOR);
+    if (buttonEl instanceof HTMLElement) {
+      buttonEl.click();
+    }
   };
 
-  const isSwitchEnabled = () => isGladlyButtonEnabled();
-
   return {
     toggle,
     isSwitchEnabled,

package/src/widgets/FloatingChatWidget/FloatingChatWidget.tsx

@@ -239,26 +239,25 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
 
           {/* Render button when preview button only OR when chat is closed */}
           {buttonShouldRender && (
-            <div ref={floatingButtonVisibilityRef}>
-              <FloatingButton
-                id={FLOATING_BUTTON_ID}
-                variant={floatingButton?.style as FloatingButtonVariant}
-                mode={floatingButton?.mode as FloatingButtonMode}
-                backgroundColor={floatingButton?.backgroundColor as FloatingButtonBackgroundColor}
-                onClick={
-                  previewButtonOnly
-                    ? () => {}
-                    : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON)
-                }
-                onMouseOver={onHover}
-                customIcon={floatingButton?.iconSVGSrc}
-                show={floatingButton?.showOption as FloatingButtonShow}
-                location={floatingButton?.position as FloatingButtonLocation}
-                hasInteractionHappened={userHasInteractedValue}
-                ariaLabel="Open chat"
-                previewMode={!!previewButtonOnly}
-              />
-            </div>
+            <FloatingButton
+              containerRef={floatingButtonVisibilityRef}
+              id={FLOATING_BUTTON_ID}
+              variant={floatingButton?.style as FloatingButtonVariant}
+              mode={floatingButton?.mode as FloatingButtonMode}
+              backgroundColor={floatingButton?.backgroundColor as FloatingButtonBackgroundColor}
+              onClick={
+                previewButtonOnly
+                  ? () => {}
+                  : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON)
+              }
+              onMouseOver={onHover}
+              customIcon={floatingButton?.iconSVGSrc}
+              show={floatingButton?.showOption as FloatingButtonShow}
+              location={floatingButton?.position as FloatingButtonLocation}
+              hasInteractionHappened={userHasInteractedValue}
+              ariaLabel="Open chat"
+              previewMode={!!previewButtonOnly}
+            />
           )}
         </>
       )}

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

@@ -63,6 +63,12 @@ vi.mock('@envive-ai/react-hooks/contexts/salesAgentContext', () => ({
   useSalesAgent: () => ({}),
 }));
 
+vi.mock('@envive-ai/react-hooks/contexts/featureFlagServiceContext', () => ({
+  useFeatureFlagService: () => ({
+    featureFlagService: { isFeatureGateEnabled: vi.fn().mockReturnValue(false) },
+  }),
+}));
+
 vi.mock('@envive-ai/react-hooks/hooks/ChatToggle', () => ({
   useChatToggle: () => ({
     isOpen: false,
@@ -102,6 +108,7 @@ describe('FloatingChatWidget analytics', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     mockGetHardcopy.mockResolvedValue({ language: 'en', values: {} });
+    mockUseTrackComponentVisibleEvent.mockReturnValue({ isVisible: false });
   });
 
   it('should track ChatComponentVisible when floating button is shown', async () => {