@envive-ai/react-widgets-v3 0.3.67 → 0.3.69

package/dist/CXIntegration/implementations/useGladlyUnifiedCXButton.cjs

@@ -6,9 +6,12 @@ let __envive_ai_react_hooks_hooks_ElementObserver = require("@envive-ai/react-ho
 
 //#region src/CXIntegration/implementations/useGladlyUnifiedCXButton.ts
 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 GLADLY_BUTTON_SELECTOR = "#custom-gladly-pill";
+const HIDE_STYLE_ID = "envive-gladly-pill-hide";
+const ENVIVE_BUTTON_HIDE_STYLE_ID = "envive-floating-button-hide";
+const GLADLY_PANEL_OPEN_SIZE_THRESHOLD = 200;
+const SHADOW_ATTACH_RETRY_MS = 300;
+const SHADOW_POLL_MS = 250;
 const getGladly = () => window.Gladly;
 const forceHideContainer = (node) => {
 	node?.style.setProperty("display", "none", "important");
@@ -16,11 +19,76 @@ const forceHideContainer = (node) => {
 const restoreContainer = (node) => {
 	node?.style.removeProperty("display");
 };
+/**
+* Hide the merchant's floating pill with an injected CSS rule instead of
+* toggling `display` on a specific element reference. Gladly can re-create
+* the pill node after our reference is taken (re-renders, SDK re-init), so a
+* rule keyed by selector keeps applying no matter how many times the node is
+* swapped out, whereas a stale/detached node reference would silently no-op
+* and let the merchant pill reappear next to ours.
+*/
+const hideMerchantButton = () => {
+	if (document.getElementById(HIDE_STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = HIDE_STYLE_ID;
+	style.textContent = `${GLADLY_BUTTON_SELECTOR} { display: none !important; }`;
+	document.head.appendChild(style);
+};
+const showMerchantButton = () => {
+	document.getElementById(HIDE_STYLE_ID)?.remove();
+};
+/**
+* Hide/show the Envive floating button via an injected CSS rule rather than
+* `enviveFloatingButton.hide()/.show()`, which toggles inline `display` on a
+* cached node reference. `FloatingChatWidget` unmounts and remounts that
+* button in response to `isCXOpen` (see `buttonShouldRender`), so the cached
+* reference can point at a node React has already removed — the toggle then
+* silently no-ops and the button stays invisible after Gladly closes. A rule
+* keyed by id keeps applying across remounts instead.
+*/
+const hideEnviveButton = () => {
+	if (document.getElementById(ENVIVE_BUTTON_HIDE_STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = ENVIVE_BUTTON_HIDE_STYLE_ID;
+	style.textContent = `#${require_constants.FLOATING_BUTTON_ID} { display: none !important; }`;
+	document.head.appendChild(style);
+};
+const showEnviveButton = () => {
+	document.getElementById(ENVIVE_BUTTON_HIDE_STYLE_ID)?.remove();
+};
+const isPanelOpenInShadowRoot = (shadowRoot) => Array.from(shadowRoot.querySelectorAll("*")).some((el) => {
+	const rect = el.getBoundingClientRect();
+	return rect.width > GLADLY_PANEL_OPEN_SIZE_THRESHOLD && rect.height > GLADLY_PANEL_OPEN_SIZE_THRESHOLD;
+});
 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);
+	const hasConfirmedOpenRef = (0, react.useRef)(false);
+	const isSwitchEnabled = () => {
+		const gladly = getGladly();
+		const hasGladlySdk = !!gladly && typeof gladly.show === "function";
+		const hasGladlyButton = !!document.querySelector(GLADLY_BUTTON_SELECTOR);
+		const hasGladlyContainer = !!document.getElementById(GLADLY_CONTAINER_ID);
+		return hasGladlySdk || hasGladlyButton || hasGladlyContainer;
+	};
+	const handleOpen = () => {
+		wasOpenRef.current = true;
+		hideEnviveButton();
+	};
+	const handleClose = () => {
+		wasOpenRef.current = false;
+		hasConfirmedOpenRef.current = false;
+		onCXClose?.();
+		if (suppressMerchantButton) forceHideContainer(document.getElementById(GLADLY_CONTAINER_ID));
+		showEnviveButton();
+	};
+	const checkShadowOpenStateRef = (0, react.useRef)(() => {});
+	checkShadowOpenStateRef.current = (shadowRoot) => {
+		if (isPanelOpenInShadowRoot(shadowRoot)) {
+			hasConfirmedOpenRef.current = true;
+			if (!wasOpenRef.current) handleOpen();
+		} else if (wasOpenRef.current && hasConfirmedOpenRef.current) handleClose();
+	};
 	gladlyContainer.onAdd((el) => {
 		if (suppressMerchantButton && el && !wasOpenRef.current) forceHideContainer(el);
 	});
@@ -28,45 +96,53 @@ const useGladlyUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchant
 		if (!suppressMerchantButton || !el || wasOpenRef.current) return;
 		if (el.style.display !== "none") forceHideContainer(el);
 	});
+	gladlyContainer.onRemove(() => {
+		if (wasOpenRef.current) handleClose();
+	});
 	(0, react.useEffect)(() => {
-		if (!suppressMerchantButton) restoreContainer(document.getElementById(GLADLY_CONTAINER_ID));
+		if (suppressMerchantButton) hideMerchantButton();
+		else {
+			showMerchantButton();
+			restoreContainer(document.getElementById(GLADLY_CONTAINER_ID));
+		}
+		return () => {
+			showMerchantButton();
+			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;
+		let shadowObserver = null;
+		let retryIntervalId;
+		let pollIntervalId;
+		const attach = () => {
+			const shadowRoot = document.getElementById(GLADLY_CONTAINER_ID)?.shadowRoot;
+			if (!shadowRoot || shadowObserver) return;
+			shadowObserver = new MutationObserver(() => checkShadowOpenStateRef.current(shadowRoot));
+			shadowObserver.observe(shadowRoot, {
+				childList: true,
+				subtree: true,
+				attributes: true
+			});
+			checkShadowOpenStateRef.current(shadowRoot);
+			pollIntervalId = window.setInterval(() => checkShadowOpenStateRef.current(shadowRoot), SHADOW_POLL_MS);
+			if (retryIntervalId) {
+				window.clearInterval(retryIntervalId);
+				retryIntervalId = void 0;
 			}
-			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
-	]);
+		retryIntervalId = window.setInterval(attach, SHADOW_ATTACH_RETRY_MS);
+		attach();
+		return () => {
+			shadowObserver?.disconnect();
+			if (retryIntervalId) window.clearInterval(retryIntervalId);
+			if (pollIntervalId) window.clearInterval(pollIntervalId);
+		};
+	}, []);
 	const toggle = () => {
 		onSwitchToAgent();
-		enviveFloatingButton.hide();
+		hideEnviveButton();
 		wasOpenRef.current = true;
+		hasConfirmedOpenRef.current = false;
 		restoreContainer(document.getElementById(GLADLY_CONTAINER_ID));
 		const gladly = getGladly();
 		if (gladly && typeof gladly.show === "function") {

package/dist/CXIntegration/implementations/useGladlyUnifiedCXButton.js

@@ -5,9 +5,12 @@ import { useElementObserver } from "@envive-ai/react-hooks/hooks/ElementObserver
 
 //#region src/CXIntegration/implementations/useGladlyUnifiedCXButton.ts
 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 GLADLY_BUTTON_SELECTOR = "#custom-gladly-pill";
+const HIDE_STYLE_ID = "envive-gladly-pill-hide";
+const ENVIVE_BUTTON_HIDE_STYLE_ID = "envive-floating-button-hide";
+const GLADLY_PANEL_OPEN_SIZE_THRESHOLD = 200;
+const SHADOW_ATTACH_RETRY_MS = 300;
+const SHADOW_POLL_MS = 250;
 const getGladly = () => window.Gladly;
 const forceHideContainer = (node) => {
 	node?.style.setProperty("display", "none", "important");
@@ -15,11 +18,76 @@ const forceHideContainer = (node) => {
 const restoreContainer = (node) => {
 	node?.style.removeProperty("display");
 };
+/**
+* Hide the merchant's floating pill with an injected CSS rule instead of
+* toggling `display` on a specific element reference. Gladly can re-create
+* the pill node after our reference is taken (re-renders, SDK re-init), so a
+* rule keyed by selector keeps applying no matter how many times the node is
+* swapped out, whereas a stale/detached node reference would silently no-op
+* and let the merchant pill reappear next to ours.
+*/
+const hideMerchantButton = () => {
+	if (document.getElementById(HIDE_STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = HIDE_STYLE_ID;
+	style.textContent = `${GLADLY_BUTTON_SELECTOR} { display: none !important; }`;
+	document.head.appendChild(style);
+};
+const showMerchantButton = () => {
+	document.getElementById(HIDE_STYLE_ID)?.remove();
+};
+/**
+* Hide/show the Envive floating button via an injected CSS rule rather than
+* `enviveFloatingButton.hide()/.show()`, which toggles inline `display` on a
+* cached node reference. `FloatingChatWidget` unmounts and remounts that
+* button in response to `isCXOpen` (see `buttonShouldRender`), so the cached
+* reference can point at a node React has already removed — the toggle then
+* silently no-ops and the button stays invisible after Gladly closes. A rule
+* keyed by id keeps applying across remounts instead.
+*/
+const hideEnviveButton = () => {
+	if (document.getElementById(ENVIVE_BUTTON_HIDE_STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = ENVIVE_BUTTON_HIDE_STYLE_ID;
+	style.textContent = `#${FLOATING_BUTTON_ID} { display: none !important; }`;
+	document.head.appendChild(style);
+};
+const showEnviveButton = () => {
+	document.getElementById(ENVIVE_BUTTON_HIDE_STYLE_ID)?.remove();
+};
+const isPanelOpenInShadowRoot = (shadowRoot) => Array.from(shadowRoot.querySelectorAll("*")).some((el) => {
+	const rect = el.getBoundingClientRect();
+	return rect.width > GLADLY_PANEL_OPEN_SIZE_THRESHOLD && rect.height > GLADLY_PANEL_OPEN_SIZE_THRESHOLD;
+});
 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);
+	const hasConfirmedOpenRef = useRef(false);
+	const isSwitchEnabled = () => {
+		const gladly = getGladly();
+		const hasGladlySdk = !!gladly && typeof gladly.show === "function";
+		const hasGladlyButton = !!document.querySelector(GLADLY_BUTTON_SELECTOR);
+		const hasGladlyContainer = !!document.getElementById(GLADLY_CONTAINER_ID);
+		return hasGladlySdk || hasGladlyButton || hasGladlyContainer;
+	};
+	const handleOpen = () => {
+		wasOpenRef.current = true;
+		hideEnviveButton();
+	};
+	const handleClose = () => {
+		wasOpenRef.current = false;
+		hasConfirmedOpenRef.current = false;
+		onCXClose?.();
+		if (suppressMerchantButton) forceHideContainer(document.getElementById(GLADLY_CONTAINER_ID));
+		showEnviveButton();
+	};
+	const checkShadowOpenStateRef = useRef(() => {});
+	checkShadowOpenStateRef.current = (shadowRoot) => {
+		if (isPanelOpenInShadowRoot(shadowRoot)) {
+			hasConfirmedOpenRef.current = true;
+			if (!wasOpenRef.current) handleOpen();
+		} else if (wasOpenRef.current && hasConfirmedOpenRef.current) handleClose();
+	};
 	gladlyContainer.onAdd((el) => {
 		if (suppressMerchantButton && el && !wasOpenRef.current) forceHideContainer(el);
 	});
@@ -27,45 +95,53 @@ const useGladlyUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchant
 		if (!suppressMerchantButton || !el || wasOpenRef.current) return;
 		if (el.style.display !== "none") forceHideContainer(el);
 	});
+	gladlyContainer.onRemove(() => {
+		if (wasOpenRef.current) handleClose();
+	});
 	useEffect(() => {
-		if (!suppressMerchantButton) restoreContainer(document.getElementById(GLADLY_CONTAINER_ID));
+		if (suppressMerchantButton) hideMerchantButton();
+		else {
+			showMerchantButton();
+			restoreContainer(document.getElementById(GLADLY_CONTAINER_ID));
+		}
+		return () => {
+			showMerchantButton();
+			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;
+		let shadowObserver = null;
+		let retryIntervalId;
+		let pollIntervalId;
+		const attach = () => {
+			const shadowRoot = document.getElementById(GLADLY_CONTAINER_ID)?.shadowRoot;
+			if (!shadowRoot || shadowObserver) return;
+			shadowObserver = new MutationObserver(() => checkShadowOpenStateRef.current(shadowRoot));
+			shadowObserver.observe(shadowRoot, {
+				childList: true,
+				subtree: true,
+				attributes: true
+			});
+			checkShadowOpenStateRef.current(shadowRoot);
+			pollIntervalId = window.setInterval(() => checkShadowOpenStateRef.current(shadowRoot), SHADOW_POLL_MS);
+			if (retryIntervalId) {
+				window.clearInterval(retryIntervalId);
+				retryIntervalId = void 0;
 			}
-			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
-	]);
+		retryIntervalId = window.setInterval(attach, SHADOW_ATTACH_RETRY_MS);
+		attach();
+		return () => {
+			shadowObserver?.disconnect();
+			if (retryIntervalId) window.clearInterval(retryIntervalId);
+			if (pollIntervalId) window.clearInterval(pollIntervalId);
+		};
+	}, []);
 	const toggle = () => {
 		onSwitchToAgent();
-		enviveFloatingButton.hide();
+		hideEnviveButton();
 		wasOpenRef.current = true;
+		hasConfirmedOpenRef.current = false;
 		restoreContainer(document.getElementById(GLADLY_CONTAINER_ID));
 		const gladly = getGladly();
 		if (gladly && typeof gladly.show === "function") {

package/dist/debug/reportIssue.cjs

@@ -11,6 +11,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
 let jotai = require("jotai");
 let __envive_ai_react_hooks_atoms_app = require("@envive-ai/react-hooks/atoms/app");
+let react_dom = require("react-dom");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 let __envive_ai_react_hooks_application_commerce_api = require("@envive-ai/react-hooks/application/commerce-api");
@@ -333,10 +334,16 @@ const ReportFooter = ({ isReporting, errorMessage, reportedByIsInvalid, isReason
 		})
 	});
 };
-const Drawer = ({ isOpen, onClose, children, width = "md:envive-tw-w-[80%] lg:envive-tw-w-[67%]" }) => {
+const getPortalTarget = (node) => {
+	const root = node?.getRootNode();
+	if (root instanceof ShadowRoot) return root;
+	if (root instanceof Document) return root.body;
+	return null;
+};
+const Drawer = ({ isOpen, onClose, children, width = "md:envive-tw-w-[80%] lg:envive-tw-w-[67%]", anchorNode }) => {
 	if (!isOpen) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "envive-tw-fixed envive-tw-right-[0] envive-tw-top-[0] envive-tw-z-[9999] envive-tw-flex envive-tw-w-full envive-tw-flex-row envive-tw-justify-end",
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "envive-tw-fixed envive-tw-right-[0] envive-tw-top-[0] envive-tw-z-[2147483647] envive-tw-flex envive-tw-w-full envive-tw-flex-row envive-tw-justify-end",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "envive-tw-bg envive-tw-flex-grow envive-tw-bg-black/40",
 			onClick: onClose
@@ -348,8 +355,11 @@ const Drawer = ({ isOpen, onClose, children, width = "md:envive-tw-w-[80%] lg:en
 			})
 		})]
 	});
+	const portalTarget = getPortalTarget(anchorNode);
+	return portalTarget ? (0, react_dom.createPortal)(content, portalTarget) : content;
 };
 const ReportIssue = () => {
+	const anchorRef = (0, react.useRef)(null);
 	const { messages, suggestions, userEvents } = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_chat.chatAtom);
 	const lastMessages = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_chat.lastAssistantMessageAtom);
 	const [lastMessagesText, setLastMessagesText] = (0, react.useState)("");
@@ -474,6 +484,7 @@ const ReportIssue = () => {
 		}));
 	}, []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: anchorRef,
 		className: "envive-tw-mx-[16px] envive-tw-block envive-tw-h-[24px] envive-tw-w-full",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
@@ -497,6 +508,7 @@ const ReportIssue = () => {
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Drawer, {
 			isOpen,
 			onClose,
+			anchorNode: anchorRef.current,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReportHeader, { onClose }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {

package/dist/debug/reportIssue.js

@@ -1,7 +1,7 @@
 import { IconCloseVariant_default } from "../packages/icons/dist/IconCloseVariant.js";
 import { GenericSelect } from "./GenericSelect.js";
 import chatEmbed_default from "./chatEmbed.js";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import Logger from "@envive-ai/react-hooks/application/logging";
 import { MessageType } from "@envive-ai/react-hooks/application/models";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -9,6 +9,7 @@ import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms
 import { useAtomValue } from "jotai";
 import { userIdAtom } from "@envive-ai/react-hooks/atoms/app";
 import { ReportSessionRequestReportPriorityEnum, ReportSessionRequestReportTypeEnum } from "@spiffy-ai/commerce-api-client";
+import { createPortal } from "react-dom";
 import classNames from "classnames";
 import CommerceApiClient from "@envive-ai/react-hooks/application/commerce-api";
 import { orgShortNameAtom } from "@envive-ai/react-hooks/atoms/envive/enviveConfig";
@@ -328,10 +329,16 @@ const ReportFooter = ({ isReporting, errorMessage, reportedByIsInvalid, isReason
 		})
 	});
 };
-const Drawer = ({ isOpen, onClose, children, width = "md:envive-tw-w-[80%] lg:envive-tw-w-[67%]" }) => {
+const getPortalTarget = (node) => {
+	const root = node?.getRootNode();
+	if (root instanceof ShadowRoot) return root;
+	if (root instanceof Document) return root.body;
+	return null;
+};
+const Drawer = ({ isOpen, onClose, children, width = "md:envive-tw-w-[80%] lg:envive-tw-w-[67%]", anchorNode }) => {
 	if (!isOpen) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "envive-tw-fixed envive-tw-right-[0] envive-tw-top-[0] envive-tw-z-[9999] envive-tw-flex envive-tw-w-full envive-tw-flex-row envive-tw-justify-end",
+	const content = /* @__PURE__ */ jsxs("div", {
+		className: "envive-tw-fixed envive-tw-right-[0] envive-tw-top-[0] envive-tw-z-[2147483647] envive-tw-flex envive-tw-w-full envive-tw-flex-row envive-tw-justify-end",
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "envive-tw-bg envive-tw-flex-grow envive-tw-bg-black/40",
 			onClick: onClose
@@ -343,8 +350,11 @@ const Drawer = ({ isOpen, onClose, children, width = "md:envive-tw-w-[80%] lg:en
 			})
 		})]
 	});
+	const portalTarget = getPortalTarget(anchorNode);
+	return portalTarget ? createPortal(content, portalTarget) : content;
 };
 const ReportIssue = () => {
+	const anchorRef = useRef(null);
 	const { messages, suggestions, userEvents } = useAtomValue(chatAtom);
 	const lastMessages = useAtomValue(lastAssistantMessageAtom);
 	const [lastMessagesText, setLastMessagesText] = useState("");
@@ -469,6 +479,7 @@ const ReportIssue = () => {
 		}));
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
+		ref: anchorRef,
 		className: "envive-tw-mx-[16px] envive-tw-block envive-tw-h-[24px] envive-tw-w-full",
 		children: [/* @__PURE__ */ jsx("button", {
 			type: "button",
@@ -492,6 +503,7 @@ const ReportIssue = () => {
 		}), /* @__PURE__ */ jsxs(Drawer, {
 			isOpen,
 			onClose,
+			anchorNode: anchorRef.current,
 			children: [
 				/* @__PURE__ */ jsx(ReportHeader, { onClose }),
 				/* @__PURE__ */ jsx("div", {

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

@@ -1,9 +1,9 @@
 import { BaseWidgetProps, WithBaseWidgetOptions } from "./types.cjs";
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime13 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_runtime13.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_runtime16 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_runtime16.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_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/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.ts
 declare const ChatPreviewComparisonWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime10.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime11.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewComparisonWidgetProps {
@@ -12,7 +12,7 @@ interface ChatPreviewComparisonWidgetProps {
 declare const ChatPreviewComparisonWidget: {
   ({
     widgetConfigId
-  }: ChatPreviewComparisonWidgetProps): react_jsx_runtime10.JSX.Element;
+  }: ChatPreviewComparisonWidgetProps): react_jsx_runtime11.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_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.ts
 declare const ChatPreviewLoadingWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime2.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime5.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewLoadingWidgetProps {
@@ -11,6 +11,6 @@ interface ChatPreviewLoadingWidgetProps {
 }
 declare const ChatPreviewLoadingWidget: ({
   widgetConfigId
-}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime2.JSX.Element;
+}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime5.JSX.Element;
 //#endregion
 export { ChatPreviewLoadingWidget, ChatPreviewLoadingWidgetProps, ChatPreviewLoadingWidgetWithBaseWidget };

package/dist/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.ts
 declare const ChatPreviewLoadingWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime6.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime14.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewLoadingWidgetProps {
@@ -11,6 +11,6 @@ interface ChatPreviewLoadingWidgetProps {
 }
 declare const ChatPreviewLoadingWidget: ({
   widgetConfigId
-}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime6.JSX.Element;
+}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime14.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_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewWidget/ChatPreviewWidget.d.ts
 declare const ChatPreviewWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime14.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime9.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewWidgetProps {
@@ -12,7 +12,7 @@ interface ChatPreviewWidgetProps {
 declare const ChatPreviewWidget: {
   ({
     widgetConfigId
-  }: ChatPreviewWidgetProps): react_jsx_runtime14.JSX.Element;
+  }: ChatPreviewWidgetProps): react_jsx_runtime9.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_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewWidget/ChatPreviewWidget.d.ts
 declare const ChatPreviewWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime4.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime12.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewWidgetProps {
@@ -12,7 +12,7 @@ interface ChatPreviewWidgetProps {
 declare const ChatPreviewWidget: {
   ({
     widgetConfigId
-  }: ChatPreviewWidgetProps): react_jsx_runtime4.JSX.Element;
+  }: ChatPreviewWidgetProps): react_jsx_runtime12.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.cjs

@@ -85,7 +85,10 @@ const FloatingChatWidgetHandler = (props) => {
 		enabled: customerServiceIntegration?.enabled ?? false,
 		suppressMerchantButton: customerServiceIntegration?.suppressMerchantButton ?? false,
 		onSwitchToAgent: () => setIsCXOpen(true),
-		onCXClose: () => setIsCXOpen(false),
+		onCXClose: () => {
+			setIsCXOpen(false);
+			if (!previewChatAlwaysOpen) closeChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON, void 0, "close_button");
+		},
 		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,

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

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