@envive-ai/react-widgets-v3 0.3.39 → 0.3.41

package/dist/CXIntegration/hooks/useUnifiedCXButton.cjs

@@ -1,9 +1,9 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_types = require('../types.cjs');
 const require_functions = require('../utils/functions.cjs');
+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");
-let __envive_ai_react_hooks_contexts_pageContext = require("@envive-ai/react-hooks/contexts/pageContext");
 
 //#region src/CXIntegration/hooks/useUnifiedCXButton.ts
 const useUnifiedCXButton = ({ enabled = false, provider = require_types.CustomerServiceType.unsupported, suppressMerchantButton = false, onSwitchToAgent, onCXClose }) => {

package/dist/CXIntegration/hooks/useUnifiedCXButton.js

@@ -1,8 +1,8 @@
 import { CustomerServiceType } from "../types.js";
 import { findCustomerServiceImpl } from "../utils/functions.js";
+import { usePage } from "@envive-ai/react-hooks/contexts/pageContext";
 import { useAtomValue } from "jotai";
 import { hasParsedVariantInfoAtom } from "@envive-ai/react-hooks/atoms/app";
-import { usePage } from "@envive-ai/react-hooks/contexts/pageContext";
 
 //#region src/CXIntegration/hooks/useUnifiedCXButton.ts
 const useUnifiedCXButton = ({ enabled = false, provider = CustomerServiceType.unsupported, suppressMerchantButton = false, onSwitchToAgent, onCXClose }) => {

package/dist/CXIntegration/implementations/useFreshChatUnifiedCXButton.cjs

@@ -0,0 +1,76 @@
+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/useFreshChatUnifiedCXButton.ts
+const FRESHCHAT_FRAME_ID = "fc_frame";
+const FRESHCHAT_WIDGET_ID = "fc_widget";
+const FRESHCHAT_OPEN_CLASS = "fc-open";
+const FRESHCHAT_LAUNCHER_SELECTOR = ".d-hotline";
+const isFreshChatOpen = (el) => {
+	if (!el) return false;
+	if (el.classList.contains(FRESHCHAT_OPEN_CLASS)) return true;
+	const iframe = document.getElementById(FRESHCHAT_WIDGET_ID);
+	if (!iframe) return false;
+	const rect = iframe.getBoundingClientRect();
+	return rect.width > 80 && rect.height > 80;
+};
+const useFreshChatUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchantButton }) => {
+	const freshchatFrame = (0, __envive_ai_react_hooks_hooks_ElementObserver.useElementObserver)(__envive_ai_react_hooks_application_utils.SelectorFactory.id(FRESHCHAT_FRAME_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 toggle = () => {
+		onSwitchToAgent();
+		enviveFloatingButton.hide();
+		if (typeof window.fcWidget !== "undefined") {
+			window.fcWidget.show();
+			window.fcWidget.open();
+		} else {
+			freshchatFrame.show();
+			(document.getElementById(FRESHCHAT_WIDGET_ID)?.contentDocument?.querySelector(FRESHCHAT_LAUNCHER_SELECTOR))?.click();
+		}
+	};
+	const isFreshChatAvailable = () => {
+		const frame = document.getElementById(FRESHCHAT_FRAME_ID);
+		const hasApi = typeof window.fcWidget !== "undefined";
+		return !!(frame || hasApi);
+	};
+	const isSwitchEnabled = () => isFreshChatAvailable();
+	freshchatFrame.onAdd((el) => {
+		if (!el) return;
+		const isOpen = isFreshChatOpen(el);
+		wasOpenRef.current = isOpen;
+		if (isOpen) enviveFloatingButton.hide();
+		else enviveFloatingButton.show();
+		if (suppressMerchantButton) if (isOpen) freshchatFrame.show();
+		else freshchatFrame.hide();
+	});
+	freshchatFrame.onChange((el) => {
+		if (!el) return;
+		const isOpen = isFreshChatOpen(el);
+		if (isOpen === wasOpenRef.current) return;
+		wasOpenRef.current = isOpen;
+		if (isOpen) {
+			enviveFloatingButton.hide();
+			if (suppressMerchantButton) freshchatFrame.show();
+		} else {
+			onCXClose?.();
+			enviveFloatingButton.show();
+			if (suppressMerchantButton) freshchatFrame.hide();
+		}
+	});
+	freshchatFrame.onRemove(() => {
+		if (wasOpenRef.current) onCXClose?.();
+		wasOpenRef.current = false;
+		enviveFloatingButton.show();
+	});
+	return {
+		toggle,
+		isSwitchEnabled
+	};
+};
+
+//#endregion
+exports.useFreshChatUnifiedCXButton = useFreshChatUnifiedCXButton;

package/dist/CXIntegration/implementations/useFreshChatUnifiedCXButton.js

@@ -0,0 +1,75 @@
+import { FLOATING_BUTTON_ID } from "../../widgets/FloatingChatWidget/constants.js";
+import { 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/useFreshChatUnifiedCXButton.ts
+const FRESHCHAT_FRAME_ID = "fc_frame";
+const FRESHCHAT_WIDGET_ID = "fc_widget";
+const FRESHCHAT_OPEN_CLASS = "fc-open";
+const FRESHCHAT_LAUNCHER_SELECTOR = ".d-hotline";
+const isFreshChatOpen = (el) => {
+	if (!el) return false;
+	if (el.classList.contains(FRESHCHAT_OPEN_CLASS)) return true;
+	const iframe = document.getElementById(FRESHCHAT_WIDGET_ID);
+	if (!iframe) return false;
+	const rect = iframe.getBoundingClientRect();
+	return rect.width > 80 && rect.height > 80;
+};
+const useFreshChatUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchantButton }) => {
+	const freshchatFrame = useElementObserver(SelectorFactory.id(FRESHCHAT_FRAME_ID));
+	const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+	const wasOpenRef = useRef(false);
+	const toggle = () => {
+		onSwitchToAgent();
+		enviveFloatingButton.hide();
+		if (typeof window.fcWidget !== "undefined") {
+			window.fcWidget.show();
+			window.fcWidget.open();
+		} else {
+			freshchatFrame.show();
+			(document.getElementById(FRESHCHAT_WIDGET_ID)?.contentDocument?.querySelector(FRESHCHAT_LAUNCHER_SELECTOR))?.click();
+		}
+	};
+	const isFreshChatAvailable = () => {
+		const frame = document.getElementById(FRESHCHAT_FRAME_ID);
+		const hasApi = typeof window.fcWidget !== "undefined";
+		return !!(frame || hasApi);
+	};
+	const isSwitchEnabled = () => isFreshChatAvailable();
+	freshchatFrame.onAdd((el) => {
+		if (!el) return;
+		const isOpen = isFreshChatOpen(el);
+		wasOpenRef.current = isOpen;
+		if (isOpen) enviveFloatingButton.hide();
+		else enviveFloatingButton.show();
+		if (suppressMerchantButton) if (isOpen) freshchatFrame.show();
+		else freshchatFrame.hide();
+	});
+	freshchatFrame.onChange((el) => {
+		if (!el) return;
+		const isOpen = isFreshChatOpen(el);
+		if (isOpen === wasOpenRef.current) return;
+		wasOpenRef.current = isOpen;
+		if (isOpen) {
+			enviveFloatingButton.hide();
+			if (suppressMerchantButton) freshchatFrame.show();
+		} else {
+			onCXClose?.();
+			enviveFloatingButton.show();
+			if (suppressMerchantButton) freshchatFrame.hide();
+		}
+	});
+	freshchatFrame.onRemove(() => {
+		if (wasOpenRef.current) onCXClose?.();
+		wasOpenRef.current = false;
+		enviveFloatingButton.show();
+	});
+	return {
+		toggle,
+		isSwitchEnabled
+	};
+};
+
+//#endregion
+export { useFreshChatUnifiedCXButton };

package/dist/CXIntegration/implementations/useHelpScoutUnifiedCXButton.cjs

@@ -1,59 +1,144 @@
 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/useHelpScoutUnifiedCXButton.ts
 const BEACON_CONTAINER_ID = "beacon-container";
-const useHelpScoutUnifiedCXButton = ({ onSwitchToAgent, suppressMerchantButton }) => {
+const FAB_BUTTON_SELECTOR = ".BeaconFabButtonFrame";
+const BEACON_WIDGET_SELECTOR = ".BeaconContainer";
+const getBeaconApi = () => {
+	const beacon = window.Beacon;
+	return typeof beacon === "function" ? beacon : void 0;
+};
+const getBeaconContainer = () => document.getElementById(BEACON_CONTAINER_ID);
+const getFabButton = () => {
+	return getBeaconContainer()?.querySelector(FAB_BUTTON_SELECTOR) ?? null;
+};
+const getFloatingButtonEl = () => document.getElementById(require_constants.FLOATING_BUTTON_ID);
+/**
+* Detects whether the HelpScout beacon is currently visible/open.
+* We use multiple signals because HelpScout has different "views"
+* (chat, instant answers) that may use different class names.
+*/
+const isBeaconCurrentlyOpen = () => {
+	const container = getBeaconContainer();
+	if (!container) return false;
+	const beaconWidget = container.querySelector(BEACON_WIDGET_SELECTOR);
+	if (beaconWidget) {
+		const cl = beaconWidget.classList;
+		if (cl.contains("BeaconContainer-enter-done") || cl.contains("BeaconContainer-enter-active") || cl.contains("BeaconContainer-enter")) return true;
+		if (cl.contains("BeaconContainer-exit") || cl.contains("BeaconContainer-exit-active") || cl.contains("BeaconContainer-exit-done")) return false;
+	}
+	return Array.from(container.children).some((child) => {
+		if (child.matches(FAB_BUTTON_SELECTOR)) return false;
+		const rect = child.getBoundingClientRect();
+		return rect.width > 50 && rect.height > 50;
+	});
+};
+/**
+* Force-hides the Envive floating button via direct DOM manipulation. This is a
+* safety net for cases where React state alone doesn't unmount the element fast
+* enough (or at all), so we never get a flash of the floating button on top of
+* the merchant's CX UI.
+*/
+const forceHideFloatingButton = () => {
+	const el = getFloatingButtonEl();
+	if (el) el.style.display = "none";
+};
+/**
+* Restores the Envive floating button display, letting React's render logic take
+* over again.
+*/
+const forceShowFloatingButton = () => {
+	const el = getFloatingButtonEl();
+	if (el && el.style.display === "none") el.style.display = "";
+};
+const useHelpScoutUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchantButton }) => {
 	const beaconContainer = (0, __envive_ai_react_hooks_hooks_ElementObserver.useElementObserver)(__envive_ai_react_hooks_application_utils.SelectorFactory.id(BEACON_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 onCXCloseRef = (0, react.useRef)(onCXClose);
+	const suppressMerchantButtonRef = (0, react.useRef)(suppressMerchantButton);
+	(0, react.useEffect)(() => {
+		onCXCloseRef.current = onCXClose;
+		suppressMerchantButtonRef.current = suppressMerchantButton;
+	}, [onCXClose, suppressMerchantButton]);
+	const handleBeaconOpened = () => {
+		wasOpenRef.current = true;
+		forceHideFloatingButton();
+		if (suppressMerchantButtonRef.current) {
+			const fabButton = getFabButton();
+			if (fabButton) fabButton.style.display = "";
+			enviveFloatingButton.hide();
+		}
+	};
+	const handleBeaconClosed = () => {
+		if (!wasOpenRef.current) return;
+		wasOpenRef.current = false;
+		onCXCloseRef.current?.();
+		forceShowFloatingButton();
+		if (suppressMerchantButtonRef.current) {
+			const fabButton = getFabButton();
+			if (fabButton) fabButton.style.display = "none";
+			enviveFloatingButton.show();
+		}
+	};
 	const toggle = () => {
 		onSwitchToAgent();
-		if (typeof window.Beacon !== "undefined") window.Beacon("open");
+		wasOpenRef.current = true;
+		forceHideFloatingButton();
+		if (suppressMerchantButton) enviveFloatingButton.hide();
+		const beacon = getBeaconApi();
+		if (beacon) beacon("open");
 		else {
-			const fabButton = document.getElementById(BEACON_CONTAINER_ID)?.querySelector(".BeaconFabButtonFrame");
+			const fabButton = getFabButton();
 			if (fabButton) {
 				fabButton.style.display = "";
 				fabButton.click();
 			}
 		}
-		if (suppressMerchantButton) enviveFloatingButton.hide();
 	};
 	const isHelpScoutButtonEnabled = () => {
-		const beaconContainerEl = document.getElementById("beacon-container");
+		const beaconContainerEl = getBeaconContainer();
 		if (!beaconContainerEl) return false;
-		const fabButton = beaconContainerEl.querySelector(".BeaconFabButtonFrame");
-		const hasBeaconAPI = typeof window.Beacon !== "undefined";
+		const fabButton = beaconContainerEl.querySelector(FAB_BUTTON_SELECTOR);
+		const hasBeaconAPI = !!getBeaconApi();
 		return !!(fabButton || hasBeaconAPI);
 	};
 	const isSwitchEnabled = () => isHelpScoutButtonEnabled();
+	(0, react.useEffect)(() => {
+		const beacon = getBeaconApi();
+		if (!beacon) return void 0;
+		try {
+			beacon("on", "open", handleBeaconOpened);
+			beacon("on", "close", handleBeaconClosed);
+		} catch {}
+		return () => {
+			try {
+				beacon("off", "open", handleBeaconOpened);
+				beacon("off", "close", handleBeaconClosed);
+			} catch {}
+		};
+	}, []);
 	beaconContainer.onAdd(() => {
 		if (suppressMerchantButton) {
-			const fabButton = document.getElementById(BEACON_CONTAINER_ID)?.querySelector(".BeaconFabButtonFrame");
+			const fabButton = getFabButton();
 			if (fabButton) fabButton.style.display = "none";
-			enviveFloatingButton.show();
 		}
+		if (isBeaconCurrentlyOpen()) handleBeaconOpened();
+		else if (suppressMerchantButton) enviveFloatingButton.show();
 	});
 	beaconContainer.onChange((el) => {
-		if (el && suppressMerchantButton) {
-			const beaconWidget = el.querySelector(".BeaconContainer");
-			const fabButton = el.querySelector(".BeaconFabButtonFrame");
-			if (beaconWidget && fabButton) {
-				const { classList } = beaconWidget;
-				if (classList.contains("BeaconContainer-enter-done") || classList.contains("BeaconContainer-enter-active")) {
-					fabButton.style.display = "";
-					enviveFloatingButton.hide();
-				}
-				if (classList.contains("BeaconContainer-exit") || classList.contains("BeaconContainer-exit-active")) {
-					fabButton.style.display = "none";
-					enviveFloatingButton.show();
-				}
-			}
-		}
+		if (!el) return;
+		const open = isBeaconCurrentlyOpen();
+		if (open && !wasOpenRef.current) handleBeaconOpened();
+		else if (!open && wasOpenRef.current) handleBeaconClosed();
 	});
 	beaconContainer.onRemove(() => {
-		if (suppressMerchantButton) enviveFloatingButton.show();
+		if (wasOpenRef.current) handleBeaconClosed();
+		else if (suppressMerchantButton) enviveFloatingButton.show();
 	});
 	return {
 		toggle,

package/dist/CXIntegration/implementations/useHelpScoutUnifiedCXButton.js

@@ -1,58 +1,143 @@
 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/useHelpScoutUnifiedCXButton.ts
 const BEACON_CONTAINER_ID = "beacon-container";
-const useHelpScoutUnifiedCXButton = ({ onSwitchToAgent, suppressMerchantButton }) => {
+const FAB_BUTTON_SELECTOR = ".BeaconFabButtonFrame";
+const BEACON_WIDGET_SELECTOR = ".BeaconContainer";
+const getBeaconApi = () => {
+	const beacon = window.Beacon;
+	return typeof beacon === "function" ? beacon : void 0;
+};
+const getBeaconContainer = () => document.getElementById(BEACON_CONTAINER_ID);
+const getFabButton = () => {
+	return getBeaconContainer()?.querySelector(FAB_BUTTON_SELECTOR) ?? null;
+};
+const getFloatingButtonEl = () => document.getElementById(FLOATING_BUTTON_ID);
+/**
+* Detects whether the HelpScout beacon is currently visible/open.
+* We use multiple signals because HelpScout has different "views"
+* (chat, instant answers) that may use different class names.
+*/
+const isBeaconCurrentlyOpen = () => {
+	const container = getBeaconContainer();
+	if (!container) return false;
+	const beaconWidget = container.querySelector(BEACON_WIDGET_SELECTOR);
+	if (beaconWidget) {
+		const cl = beaconWidget.classList;
+		if (cl.contains("BeaconContainer-enter-done") || cl.contains("BeaconContainer-enter-active") || cl.contains("BeaconContainer-enter")) return true;
+		if (cl.contains("BeaconContainer-exit") || cl.contains("BeaconContainer-exit-active") || cl.contains("BeaconContainer-exit-done")) return false;
+	}
+	return Array.from(container.children).some((child) => {
+		if (child.matches(FAB_BUTTON_SELECTOR)) return false;
+		const rect = child.getBoundingClientRect();
+		return rect.width > 50 && rect.height > 50;
+	});
+};
+/**
+* Force-hides the Envive floating button via direct DOM manipulation. This is a
+* safety net for cases where React state alone doesn't unmount the element fast
+* enough (or at all), so we never get a flash of the floating button on top of
+* the merchant's CX UI.
+*/
+const forceHideFloatingButton = () => {
+	const el = getFloatingButtonEl();
+	if (el) el.style.display = "none";
+};
+/**
+* Restores the Envive floating button display, letting React's render logic take
+* over again.
+*/
+const forceShowFloatingButton = () => {
+	const el = getFloatingButtonEl();
+	if (el && el.style.display === "none") el.style.display = "";
+};
+const useHelpScoutUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchantButton }) => {
 	const beaconContainer = useElementObserver(SelectorFactory.id(BEACON_CONTAINER_ID));
 	const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+	const wasOpenRef = useRef(false);
+	const onCXCloseRef = useRef(onCXClose);
+	const suppressMerchantButtonRef = useRef(suppressMerchantButton);
+	useEffect(() => {
+		onCXCloseRef.current = onCXClose;
+		suppressMerchantButtonRef.current = suppressMerchantButton;
+	}, [onCXClose, suppressMerchantButton]);
+	const handleBeaconOpened = () => {
+		wasOpenRef.current = true;
+		forceHideFloatingButton();
+		if (suppressMerchantButtonRef.current) {
+			const fabButton = getFabButton();
+			if (fabButton) fabButton.style.display = "";
+			enviveFloatingButton.hide();
+		}
+	};
+	const handleBeaconClosed = () => {
+		if (!wasOpenRef.current) return;
+		wasOpenRef.current = false;
+		onCXCloseRef.current?.();
+		forceShowFloatingButton();
+		if (suppressMerchantButtonRef.current) {
+			const fabButton = getFabButton();
+			if (fabButton) fabButton.style.display = "none";
+			enviveFloatingButton.show();
+		}
+	};
 	const toggle = () => {
 		onSwitchToAgent();
-		if (typeof window.Beacon !== "undefined") window.Beacon("open");
+		wasOpenRef.current = true;
+		forceHideFloatingButton();
+		if (suppressMerchantButton) enviveFloatingButton.hide();
+		const beacon = getBeaconApi();
+		if (beacon) beacon("open");
 		else {
-			const fabButton = document.getElementById(BEACON_CONTAINER_ID)?.querySelector(".BeaconFabButtonFrame");
+			const fabButton = getFabButton();
 			if (fabButton) {
 				fabButton.style.display = "";
 				fabButton.click();
 			}
 		}
-		if (suppressMerchantButton) enviveFloatingButton.hide();
 	};
 	const isHelpScoutButtonEnabled = () => {
-		const beaconContainerEl = document.getElementById("beacon-container");
+		const beaconContainerEl = getBeaconContainer();
 		if (!beaconContainerEl) return false;
-		const fabButton = beaconContainerEl.querySelector(".BeaconFabButtonFrame");
-		const hasBeaconAPI = typeof window.Beacon !== "undefined";
+		const fabButton = beaconContainerEl.querySelector(FAB_BUTTON_SELECTOR);
+		const hasBeaconAPI = !!getBeaconApi();
 		return !!(fabButton || hasBeaconAPI);
 	};
 	const isSwitchEnabled = () => isHelpScoutButtonEnabled();
+	useEffect(() => {
+		const beacon = getBeaconApi();
+		if (!beacon) return void 0;
+		try {
+			beacon("on", "open", handleBeaconOpened);
+			beacon("on", "close", handleBeaconClosed);
+		} catch {}
+		return () => {
+			try {
+				beacon("off", "open", handleBeaconOpened);
+				beacon("off", "close", handleBeaconClosed);
+			} catch {}
+		};
+	}, []);
 	beaconContainer.onAdd(() => {
 		if (suppressMerchantButton) {
-			const fabButton = document.getElementById(BEACON_CONTAINER_ID)?.querySelector(".BeaconFabButtonFrame");
+			const fabButton = getFabButton();
 			if (fabButton) fabButton.style.display = "none";
-			enviveFloatingButton.show();
 		}
+		if (isBeaconCurrentlyOpen()) handleBeaconOpened();
+		else if (suppressMerchantButton) enviveFloatingButton.show();
 	});
 	beaconContainer.onChange((el) => {
-		if (el && suppressMerchantButton) {
-			const beaconWidget = el.querySelector(".BeaconContainer");
-			const fabButton = el.querySelector(".BeaconFabButtonFrame");
-			if (beaconWidget && fabButton) {
-				const { classList } = beaconWidget;
-				if (classList.contains("BeaconContainer-enter-done") || classList.contains("BeaconContainer-enter-active")) {
-					fabButton.style.display = "";
-					enviveFloatingButton.hide();
-				}
-				if (classList.contains("BeaconContainer-exit") || classList.contains("BeaconContainer-exit-active")) {
-					fabButton.style.display = "none";
-					enviveFloatingButton.show();
-				}
-			}
-		}
+		if (!el) return;
+		const open = isBeaconCurrentlyOpen();
+		if (open && !wasOpenRef.current) handleBeaconOpened();
+		else if (!open && wasOpenRef.current) handleBeaconClosed();
 	});
 	beaconContainer.onRemove(() => {
-		if (suppressMerchantButton) enviveFloatingButton.show();
+		if (wasOpenRef.current) handleBeaconClosed();
+		else if (suppressMerchantButton) enviveFloatingButton.show();
 	});
 	return {
 		toggle,

package/dist/CXIntegration/types.cjs

@@ -14,6 +14,7 @@ let CustomerServiceType = /* @__PURE__ */ function(CustomerServiceType$1) {
 	CustomerServiceType$1["helpscout"] = "helpscout";
 	CustomerServiceType$1["talkdesk"] = "talkdesk";
 	CustomerServiceType$1["eightByEight"] = "8x8";
+	CustomerServiceType$1["freshchat"] = "freshchat";
 	CustomerServiceType$1["unsupported"] = "unsupported";
 	return CustomerServiceType$1;
 }({});

package/dist/CXIntegration/types.js

@@ -13,6 +13,7 @@ let CustomerServiceType = /* @__PURE__ */ function(CustomerServiceType$1) {
 	CustomerServiceType$1["helpscout"] = "helpscout";
 	CustomerServiceType$1["talkdesk"] = "talkdesk";
 	CustomerServiceType$1["eightByEight"] = "8x8";
+	CustomerServiceType$1["freshchat"] = "freshchat";
 	CustomerServiceType$1["unsupported"] = "unsupported";
 	return CustomerServiceType$1;
 }({});

package/dist/CXIntegration/utils/functions.cjs

@@ -12,6 +12,7 @@ const require_useKustomerUnifiedCXButton = require('../implementations/useKustom
 const require_useHelpScoutUnifiedCXButton = require('../implementations/useHelpScoutUnifiedCXButton.cjs');
 const require_useTalkdeskUnifiedCXButton = require('../implementations/useTalkdeskUnifiedCXButton.cjs');
 const require_useEightByEightUnifiedCXButton = require('../implementations/useEightByEightUnifiedCXButton.cjs');
+const require_useFreshChatUnifiedCXButton = require('../implementations/useFreshChatUnifiedCXButton.cjs');
 const require_useDefaultUnifiedCXButton = require('../implementations/useDefaultUnifiedCXButton.cjs');
 
 //#region src/CXIntegration/utils/functions.ts
@@ -29,6 +30,7 @@ const findCustomerServiceImpl = (provider) => {
 	if (provider === require_types.CustomerServiceType.helpscout) return require_useHelpScoutUnifiedCXButton.useHelpScoutUnifiedCXButton;
 	if (provider === require_types.CustomerServiceType.talkdesk) return require_useTalkdeskUnifiedCXButton.useTalkdeskUnifiedCXButton;
 	if (provider === require_types.CustomerServiceType.eightByEight) return require_useEightByEightUnifiedCXButton.useEightByEightUnifiedCXButton;
+	if (provider === require_types.CustomerServiceType.freshchat) return require_useFreshChatUnifiedCXButton.useFreshChatUnifiedCXButton;
 	return require_useDefaultUnifiedCXButton.useDefaultUnifiedCXButton;
 };
 

package/dist/CXIntegration/utils/functions.js

@@ -12,6 +12,7 @@ import { useKustomerUnifiedCXButton } from "../implementations/useKustomerUnifie
 import { useHelpScoutUnifiedCXButton } from "../implementations/useHelpScoutUnifiedCXButton.js";
 import { useTalkdeskUnifiedCXButton } from "../implementations/useTalkdeskUnifiedCXButton.js";
 import { useEightByEightUnifiedCXButton } from "../implementations/useEightByEightUnifiedCXButton.js";
+import { useFreshChatUnifiedCXButton } from "../implementations/useFreshChatUnifiedCXButton.js";
 import { useDefaultUnifiedCXButton } from "../implementations/useDefaultUnifiedCXButton.js";
 
 //#region src/CXIntegration/utils/functions.ts
@@ -29,6 +30,7 @@ const findCustomerServiceImpl = (provider) => {
 	if (provider === CustomerServiceType.helpscout) return useHelpScoutUnifiedCXButton;
 	if (provider === CustomerServiceType.talkdesk) return useTalkdeskUnifiedCXButton;
 	if (provider === CustomerServiceType.eightByEight) return useEightByEightUnifiedCXButton;
+	if (provider === CustomerServiceType.freshchat) return useFreshChatUnifiedCXButton;
 	return useDefaultUnifiedCXButton;
 };
 

package/dist/debug/MessageContent.cjs

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_index = require('../node_modules/react-icons/fa/index.cjs');
-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_application_models = require("@envive-ai/react-hooks/application/models");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 let __envive_ai_react_toolkit_v3_ReviewCard = require("@envive-ai/react-toolkit-v3/ReviewCard");

package/dist/debug/MessageContent.js

@@ -1,6 +1,6 @@
 import { FaFile, FaLink, FaPaperclip, FaSearch, FaTag } from "../node_modules/react-icons/fa/index.js";
-import { MessageType } from "@envive-ai/react-hooks/application/models";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { MessageType } from "@envive-ai/react-hooks/application/models";
 import classNames from "classnames";
 import { ReviewCard } from "@envive-ai/react-toolkit-v3/ReviewCard";
 import { Message } from "@envive-ai/react-toolkit-v3/Message";

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 react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+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_application_models = require("@envive-ai/react-hooks/application/models");
 let __envive_ai_react_toolkit_v3_PromptCarousel = require("@envive-ai/react-toolkit-v3/PromptCarousel");
-let react = require("react");
-react = require_rolldown_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
 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 React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { chatAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { useAtomValue } from "jotai";
 import { MessageType } from "@envive-ai/react-hooks/application/models";
 import { PromptCarousel, PromptCarouselRows } from "@envive-ai/react-toolkit-v3/PromptCarousel";
-import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
 
 //#region src/debug/chatEmbed.tsx

package/dist/debug/reportIssue.cjs

@@ -3,12 +3,12 @@ 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 react = require("react");
+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_application_models = require("@envive-ai/react-hooks/application/models");
 let __envive_ai_react_hooks_atoms_app = require("@envive-ai/react-hooks/atoms/app");
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
 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");

package/dist/debug/reportIssue.js

@@ -1,12 +1,12 @@
 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 { jsx, jsxs } from "react/jsx-runtime";
 import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { useAtomValue } from "jotai";
 import { MessageType } from "@envive-ai/react-hooks/application/models";
 import { userIdAtom } from "@envive-ai/react-hooks/atoms/app";
-import { useCallback, useEffect, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ReportSessionRequestReportPriorityEnum, ReportSessionRequestReportTypeEnum } from "@spiffy-ai/commerce-api-client";
 import classNames from "classnames";
 import CommerceApiClient from "@envive-ai/react-hooks/application/commerce-api";

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 {