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

package/dist/CXIntegration/hooks/useUnifiedCXButton.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_types = require('../types.cjs');
 const require_functions = require('../utils/functions.cjs');
-let jotai = require("jotai");
 let __envive_ai_react_hooks_contexts_pageContext = require("@envive-ai/react-hooks/contexts/pageContext");
+let jotai = require("jotai");
 let __envive_ai_react_hooks_atoms_app = require("@envive-ai/react-hooks/atoms/app");
 
 //#region src/CXIntegration/hooks/useUnifiedCXButton.ts

package/dist/CXIntegration/hooks/useUnifiedCXButton.js

@@ -1,7 +1,7 @@
 import { CustomerServiceType } from "../types.js";
 import { findCustomerServiceImpl } from "../utils/functions.js";
-import { useAtomValue } from "jotai";
 import { usePage } from "@envive-ai/react-hooks/contexts/pageContext";
+import { useAtomValue } from "jotai";
 import { hasParsedVariantInfoAtom } from "@envive-ai/react-hooks/atoms/app";
 
 //#region src/CXIntegration/hooks/useUnifiedCXButton.ts

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/chatEmbed.cjs

@@ -1,12 +1,12 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_MessageContent = require('./MessageContent.cjs');
-let jotai = require("jotai");
-let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
+let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
 let react_jsx_runtime = require("react/jsx-runtime");
-let __envive_ai_react_toolkit_v3_PromptCarousel = require("@envive-ai/react-toolkit-v3/PromptCarousel");
 let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
+let jotai = require("jotai");
+let __envive_ai_react_toolkit_v3_PromptCarousel = require("@envive-ai/react-toolkit-v3/PromptCarousel");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 

package/dist/debug/chatEmbed.js

@@ -1,10 +1,10 @@
 import { MessageContent } from "./MessageContent.js";
-import { useAtomValue } from "jotai";
-import { MessageType } from "@envive-ai/react-hooks/application/models";
 import React from "react";
+import { MessageType } from "@envive-ai/react-hooks/application/models";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { PromptCarousel, PromptCarouselRows } from "@envive-ai/react-toolkit-v3/PromptCarousel";
 import { chatAtom } from "@envive-ai/react-hooks/atoms/chat";
+import { useAtomValue } from "jotai";
+import { PromptCarousel, PromptCarouselRows } from "@envive-ai/react-toolkit-v3/PromptCarousel";
 import classNames from "classnames";
 
 //#region src/debug/chatEmbed.tsx

package/dist/debug/reportIssue.cjs

@@ -3,18 +3,19 @@ const require_index = require('../node_modules/@spiffy-ai/commerce-api-client/di
 const require_IconCloseVariant = require('../packages/icons/dist/IconCloseVariant.cjs');
 const require_GenericSelect = require('./GenericSelect.cjs');
 const require_chatEmbed = require('./chatEmbed.cjs');
-let jotai = require("jotai");
-let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
 let react = require("react");
 let __envive_ai_react_hooks_application_logging = require("@envive-ai/react-hooks/application/logging");
 __envive_ai_react_hooks_application_logging = require_rolldown_runtime.__toESM(__envive_ai_react_hooks_application_logging);
+let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
 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");
 __envive_ai_react_hooks_application_commerce_api = require_rolldown_runtime.__toESM(__envive_ai_react_hooks_application_commerce_api);
-let __envive_ai_react_hooks_atoms_app = require("@envive-ai/react-hooks/atoms/app");
 let __envive_ai_react_hooks_atoms_envive_enviveConfig = require("@envive-ai/react-hooks/atoms/envive/enviveConfig");
 let __envive_ai_react_hooks_application_utils = require("@envive-ai/react-hooks/application/utils");
 
@@ -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,16 +1,17 @@
 import { IconCloseVariant_default } from "../packages/icons/dist/IconCloseVariant.js";
 import { GenericSelect } from "./GenericSelect.js";
 import chatEmbed_default from "./chatEmbed.js";
-import { useAtomValue } from "jotai";
-import { MessageType } from "@envive-ai/react-hooks/application/models";
-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";
 import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
+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 { userIdAtom } from "@envive-ai/react-hooks/atoms/app";
 import { orgShortNameAtom } from "@envive-ai/react-hooks/atoms/envive/enviveConfig";
 import { StringUtils, validateEmail } from "@envive-ai/react-hooks/application/utils";
 
@@ -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/types.d.ts

@@ -1,6 +1,6 @@
-import { OrgUIConfigV3, WidgetConfigV3, WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
 import { RefObject } from "react";
 import { HardcopyResponse } from "@envive-ai/react-hooks/contexts/hardcopyContext";
+import { OrgUIConfigV3, WidgetConfigV3, WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
 
 //#region src/hocs/withBaseWidget/types.d.ts
 interface BaseWidgetProps {

package/dist/hocs/withBaseWidget/withBaseWidget.cjs

@@ -1,6 +1,4 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-let __envive_ai_react_hooks_contexts_featureFlagServiceContext = require("@envive-ai/react-hooks/contexts/featureFlagServiceContext");
-let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
 let react = require("react");
 let __envive_ai_react_hooks_application_logging = require("@envive-ai/react-hooks/application/logging");
 __envive_ai_react_hooks_application_logging = require_rolldown_runtime.__toESM(__envive_ai_react_hooks_application_logging);
@@ -10,6 +8,8 @@ let __envive_ai_react_hooks_contexts_hardcopyContext = require("@envive-ai/react
 let __envive_ai_react_hooks_contexts_pageContext = require("@envive-ai/react-hooks/contexts/pageContext");
 let __envive_ai_react_hooks_contexts_widgetConfigContext = require("@envive-ai/react-hooks/contexts/widgetConfigContext");
 let __envive_ai_react_hooks_contexts_uiConfigContext = require("@envive-ai/react-hooks/contexts/uiConfigContext");
+let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
+let __envive_ai_react_hooks_contexts_featureFlagServiceContext = require("@envive-ai/react-hooks/contexts/featureFlagServiceContext");
 let __envive_ai_react_hooks_hooks_WidgetLoadDiagnostics = require("@envive-ai/react-hooks/hooks/WidgetLoadDiagnostics");
 let react_jsx_runtime = require("react/jsx-runtime");
 

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

@@ -1,9 +1,9 @@
 import { BaseWidgetProps, WithBaseWidgetOptions } from "./types.cjs";
-import * as react_jsx_runtime5 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_runtime5.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_runtime2 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_runtime2.JSX.Element;
+  (props: P): react_jsx_runtime16.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/hocs/withBaseWidget/withBaseWidget.js

@@ -1,5 +1,3 @@
-import { useFeatureFlagService } from "@envive-ai/react-hooks/contexts/featureFlagServiceContext";
-import { FeatureGates } from "@envive-ai/react-hooks/application/models";
 import { useEffect, useMemo, useRef, useState } from "react";
 import Logger from "@envive-ai/react-hooks/application/logging";
 import { useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
@@ -8,6 +6,8 @@ import { useHardcopy } from "@envive-ai/react-hooks/contexts/hardcopyContext";
 import { usePage } from "@envive-ai/react-hooks/contexts/pageContext";
 import { useWidgetConfig } from "@envive-ai/react-hooks/contexts/widgetConfigContext";
 import { useUiConfig } from "@envive-ai/react-hooks/contexts/uiConfigContext";
+import { FeatureGates } from "@envive-ai/react-hooks/application/models";
+import { useFeatureFlagService } from "@envive-ai/react-hooks/contexts/featureFlagServiceContext";
 import { useWidgetLoadDiagnostics } from "@envive-ai/react-hooks/hooks/WidgetLoadDiagnostics";
 import { jsx } from "react/jsx-runtime";