@xapp/chat-widget 1.94.0 → 1.94.2

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var require$$1 = require('react');
+var React = require('react');
 var require$$0 = require('react/jsx-runtime');
 var reactRedux = require('react-redux');
 
@@ -234,7 +234,7 @@ var defaultLabels = {
 var ActionBarButton = function (_a) {
     var _b;
     var button = _a.button, chatActive = _a.chatActive, onChatClick = _a.onChatClick, onChatMinimize = _a.onChatMinimize, onFormClick = _a.onFormClick, isMobile = _a.isMobile;
-    var handleClick = require$$1.useCallback(function () {
+    var handleClick = React.useCallback(function () {
         if (lib.isActionBarChatButton(button)) {
             // Toggle chat: if active, minimize; if not active, open
             if (chatActive) {
@@ -311,9 +311,9 @@ var ActionBarButton = function (_a) {
 var ActionBarCta = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var config = _a.config, isMobile = _a.isMobile, onClick = _a.onClick, onDismiss = _a.onDismiss, hasUserInteracted = _a.hasUserInteracted;
-    var _m = require$$1.useState(false), isVisible = _m[0], setIsVisible = _m[1];
-    var _o = require$$1.useState(false), isAnimating = _o[0], setIsAnimating = _o[1];
-    var _p = require$$1.useState(false), isDismissed = _p[0], setIsDismissed = _p[1];
+    var _m = React.useState(false), isVisible = _m[0], setIsVisible = _m[1];
+    var _o = React.useState(false), isAnimating = _o[0], setIsAnimating = _o[1];
+    var _p = React.useState(false), isDismissed = _p[0], setIsDismissed = _p[1];
     // For mobile overrides: null means "explicitly disabled", undefined means "use desktop default"
     var mobileMessage = isMobile ? (_b = config.mobile) === null || _b === void 0 ? void 0 : _b.message : undefined;
     var message = mobileMessage !== undefined ? mobileMessage : config.message;
@@ -332,7 +332,7 @@ var ActionBarCta = function (_a) {
         ? config.mobile.dismissible
         : ((_l = config.dismissible) !== null && _l !== void 0 ? _l : true);
     // Show CTA after delay
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         if (!message || hasUserInteracted || isDismissed) {
             setIsVisible(false);
             return undefined;
@@ -343,7 +343,7 @@ var ActionBarCta = function (_a) {
         return function () { return clearTimeout(showTimer); };
     }, [message, delay, hasUserInteracted, isDismissed]);
     // Hide CTA after timeout
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         if (!isVisible || !timeout) {
             return undefined;
         }
@@ -353,7 +353,7 @@ var ActionBarCta = function (_a) {
         return function () { return clearTimeout(hideTimer); };
     }, [isVisible, timeout]);
     // Start animation after animationDelay
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         if (!animation || hasUserInteracted || isDismissed) {
             setIsAnimating(false);
             return undefined;
@@ -364,7 +364,7 @@ var ActionBarCta = function (_a) {
         return function () { return clearTimeout(animateTimer); };
     }, [animation, animationDelay, hasUserInteracted, isDismissed]);
     // Stop animation after animationTimeout
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         if (!isAnimating || !animationTimeout) {
             return undefined;
         }
@@ -400,12 +400,12 @@ var RESIZE_DEBOUNCE_MS = 150;
 var ActionBar = function (_a) {
     var _b, _c, _d;
     var config = _a.config, visible = _a.visible, chatDisabled = _a.chatDisabled, _e = _a.hasUserInteracted, hasUserInteracted = _e === void 0 ? false : _e, onChatClick = _a.onChatClick, onChatMinimize = _a.onChatMinimize, onFormClick = _a.onFormClick, onCtaDismiss = _a.onCtaDismiss;
-    var _f = require$$1.useState(false), isMobile = _f[0], setIsMobile = _f[1];
+    var _f = React.useState(false), isMobile = _f[0], setIsMobile = _f[1];
     var mobileBreakpoint = (_b = config.mobileBreakpoint) !== null && _b !== void 0 ? _b : DEFAULT_MOBILE_BREAKPOINT;
     var position = (_c = config.position) !== null && _c !== void 0 ? _c : "right";
-    var resizeTimeoutRef = require$$1.useRef(null);
+    var resizeTimeoutRef = React.useRef(null);
     // Debounced resize handler
-    var handleResize = require$$1.useCallback(function () {
+    var handleResize = React.useCallback(function () {
         if (resizeTimeoutRef.current) {
             window.clearTimeout(resizeTimeoutRef.current);
         }
@@ -413,7 +413,7 @@ var ActionBar = function (_a) {
             setIsMobile(window.innerWidth <= mobileBreakpoint);
         }, RESIZE_DEBOUNCE_MS);
     }, [mobileBreakpoint]);
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         // Initial check (immediate, not debounced)
         setIsMobile(window.innerWidth <= mobileBreakpoint);
         window.addEventListener("resize", handleResize);
@@ -477,13 +477,13 @@ var ActionBar = function (_a) {
 var ActionBarPreview = function (_a) {
     var config = _a.config, _b = _a.chatActive, chatActive = _b === void 0 ? false : _b;
     // No-op handlers for preview mode
-    var handleChatClick = require$$1.useCallback(function () {
+    var handleChatClick = React.useCallback(function () {
         // Preview only - no action
     }, []);
-    var handleChatMinimize = require$$1.useCallback(function () {
+    var handleChatMinimize = React.useCallback(function () {
         // Preview only - no action
     }, []);
-    var handleFormClick = require$$1.useCallback(function (_button) {
+    var handleFormClick = React.useCallback(function (_button) {
         // Preview only - no action
     }, []);
     return (require$$0.jsx(ActionBar, { config: config, visible: chatActive, chatDisabled: false, onChatClick: handleChatClick, onChatMinimize: handleChatMinimize, onFormClick: handleFormClick }));
@@ -689,14 +689,14 @@ function isAgent(nick) {
 }
 
 function useIsMounted() {
-    var ref = require$$1.useRef(false);
-    require$$1.useEffect(function () {
+    var ref = React.useRef(false);
+    React.useEffect(function () {
         ref.current = true;
         return function () {
             ref.current = false;
         };
     }, []);
-    return require$$1.useCallback(function () { return ref.current; }, []);
+    return React.useCallback(function () { return ref.current; }, []);
 }
 
 var RetryOptions = /** @class */ (function () {
@@ -1064,9 +1064,9 @@ var defaultWidgetButtonWidth = "48";
 var defaultMobileWidgetButtonWidth = "30";
 var defaultNonMobileScreenWidth = "400";
 var scheduleWidgetUrl = "ScheduleButton";
-var ChatConfigContext = require$$1.createContext(null);
+var ChatConfigContext = React.createContext(null);
 function useWidgetEnv() {
-    var ctx = require$$1.useContext(ChatConfigContext);
+    var ctx = React.useContext(ChatConfigContext);
     return ctx === null || ctx === void 0 ? void 0 : ctx.env;
 }
 function getServerConfig(env) {
@@ -1085,7 +1085,7 @@ function useServerConfig(env, nonce) {
     // channelId lives at the WidgetEnv level; fold it into the mcp config so MCPChat
     // can send it for event/lead attribution.
     var channelId = env === null || env === void 0 ? void 0 : env.channelId;
-    return require$$1.useMemo(function () { return ({
+    return React.useMemo(function () { return ({
         accountKey: accountKey,
         serverUrl: serverUrl,
         timeout: timeout,
@@ -1115,7 +1115,7 @@ var Avatar = function (props) {
     var style = {};
     var child;
     var entity = props.entity;
-    var chatConfig = require$$1.useContext(ChatConfigContext);
+    var chatConfig = React.useContext(ChatConfigContext);
     var avatarPath = entity === null || entity === void 0 ? void 0 : entity.avatarPath;
     if (!avatarPath) {
         var avatarImage = GenerateAvatar({
@@ -1150,7 +1150,7 @@ function GenerateAvatar(props) {
     var size = (props === null || props === void 0 ? void 0 : props.size) || 40;
     var backgroundColor = (props === null || props === void 0 ? void 0 : props.backgroundColor) || "#007bff";
     var textColor = (props === null || props === void 0 ? void 0 : props.textColor) || "#ffffff";
-    var image = require$$1.useMemo(function () {
+    var image = React.useMemo(function () {
         return generateImage(initials, size, backgroundColor, textColor);
     }, [initials, size, backgroundColor, textColor]);
     return image;
@@ -1194,7 +1194,7 @@ var OptionalLink = function (props) {
     var chatDispatch = useChatDispatch();
     var visuals = reactRedux.useSelector(function (state) { return state.visuals; });
     var url = props.url, className = props.className, onOpen = props.onOpen;
-    var handleOpenUrl = require$$1.useCallback(function () {
+    var handleOpenUrl = React.useCallback(function () {
         if (onOpen) {
             onOpen(url, chatDispatch, visuals);
         }
@@ -1211,7 +1211,7 @@ var ActionItem = function (props) {
     var _a;
     var item = props.item, onButtonClick = props.onButtonClick, onExecute = props.onExecute;
     var singleButton = ((_a = item.buttons) === null || _a === void 0 ? void 0 : _a.length) === 1;
-    var handleClick = require$$1.useCallback(function () {
+    var handleClick = React.useCallback(function () {
         var _a;
         var btns = (_a = item.buttons) === null || _a === void 0 ? void 0 : _a.length;
         // If there is only one button, it takes precedent
@@ -1255,19 +1255,19 @@ var ActionItemImage = function (props) {
 
 var ChatActionButtonInner = function (props) {
     var button = props.button, onClick = props.onClick;
-    var handleButton = require$$1.useCallback(function () {
+    var handleButton = React.useCallback(function () {
         onClick(button);
     }, [button, onClick]);
     return require$$0.jsx(ActionButton, { onClick: handleButton, addClass: "button-card", label: button.label });
 };
-var ChatActionButton = require$$1.memo(ChatActionButtonInner);
+var ChatActionButton = React.memo(ChatActionButtonInner);
 
 var ChatActionButtonsInner = function (props) {
     return (require$$0.jsx("div", { className: "buttons-container " + (props.className || ""), children: props.buttons.map(function (button, i) {
             return require$$0.jsx(ChatActionButton, { button: button, onClick: props.onClick }, i);
         }) }));
 };
-var ChatActionButtons = require$$1.memo(ChatActionButtonsInner);
+var ChatActionButtons = React.memo(ChatActionButtonsInner);
 
 var CarouselItem = function (props) {
     var _a;
@@ -1290,8 +1290,8 @@ var ChevronRight = function (props) {
 };
 
 var Carousel = function (props) {
-    var listRef = require$$1.useRef(null);
-    var _a = require$$1.useState(0), visibleIndex = _a[0], setSetVisibleIndex = _a[1];
+    var listRef = React.useRef(null);
+    var _a = React.useState(0), visibleIndex = _a[0], setSetVisibleIndex = _a[1];
     function scrollMe(direction) {
         var _a, _b;
         var scrollArea = listRef.current;
@@ -1331,9 +1331,9 @@ var Carousel = function (props) {
 };
 
 function useDimensions() {
-    var ref = require$$1.useRef(null);
-    var _a = require$$1.useState(), dimensions = _a[0], setDimensions = _a[1];
-    require$$1.useLayoutEffect(function () {
+    var ref = React.useRef(null);
+    var _a = React.useState(), dimensions = _a[0], setDimensions = _a[1];
+    React.useLayoutEffect(function () {
         var _a, _b;
         setDimensions((_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.toJSON());
     }, []);
@@ -1466,14 +1466,14 @@ var CtaBubbleContainer = function (props) {
         hasChildren: !!children,
         childrenContent: children,
     });
-    var startTime = require$$1.useMemo(function () {
+    var startTime = React.useMemo(function () {
         var time = visible ? new Date().valueOf() : undefined;
         log("[CtaBubbleContainer] StartTime calculated: visible=".concat(visible, ", startTime=").concat(time));
         return time;
     }, [visible]);
-    var _a = require$$1.useState(false), showBubble = _a[0], setShowBubble = _a[1];
+    var _a = React.useState(false), showBubble = _a[0], setShowBubble = _a[1];
     log("[CtaBubbleContainer] Current state: showBubble=".concat(showBubble));
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         log("[CtaBubbleContainer] useEffect triggered with:", {
             startTime: startTime,
             startTimeExists: !!startTime,
@@ -1549,8 +1549,8 @@ var CtaBubbleContainer = function (props) {
 var ChatButton = function (_a) {
     var _b;
     var onClick = _a.onClick, addClass = _a.addClass, config = _a.config, visible = _a.visible, borderStyle = _a.borderStyle, imageUrl = _a.imageUrl, hasInteracted = _a.hasInteracted, onCtaDismiss = _a.onCtaDismiss;
-    var _c = require$$1.useState(defaultWidgetButtonWidth), buttonWidth = _c[0], setButtonWidth = _c[1];
-    var _d = require$$1.useState(false), animate = _d[0], setAnimate = _d[1];
+    var _c = React.useState(defaultWidgetButtonWidth), buttonWidth = _c[0], setButtonWidth = _c[1];
+    var _d = React.useState(false), animate = _d[0], setAnimate = _d[1];
     var mobileWidth = ((_b = config === null || config === void 0 ? void 0 : config.mobile) === null || _b === void 0 ? void 0 : _b.applyAtLessThanWidth) || defaultNonMobileScreenWidth;
     // Determines mobile or normal
     var getConfigToApply = function () {
@@ -1563,7 +1563,7 @@ var ChatButton = function (_a) {
         }
     };
     var configToApply = getConfigToApply();
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         var _a;
         var delayTimer;
         var timeoutTimer;
@@ -1606,7 +1606,7 @@ var ChatButton = function (_a) {
         };
     }, [configToApply, setAnimate, hasInteracted]);
     var animation = animate && !hasInteracted ? (configToApply === null || configToApply === void 0 ? void 0 : configToApply.animation) || "wiggle" : "none";
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         var handleResize = function () {
             var screenWidth = window.innerWidth;
             var newButtonWidth = screenWidth < parseInt(mobileWidth, 10)
@@ -1788,7 +1788,7 @@ function execute(url, dispatch, visuals, behavior) {
 }
 function useOpenUrlCallback() {
     var env = useWidgetEnv();
-    return require$$1.useCallback(function (url, dispatch, visuals, behavior) {
+    return React.useCallback(function (url, dispatch, visuals, behavior) {
         if (!behavior) {
             behavior = (env === null || env === void 0 ? void 0 : env.urls) ? resolveUrlPolicy(url, env.urls) : defaultBehavior;
         }
@@ -2105,7 +2105,7 @@ var LogChat = /** @class */ (function () {
 }());
 
 var jsxRuntime = require$$0;
-var react = require$$1;
+var react = React;
 
 var IconButton = function (props) {
     var Icon = props.icon;
@@ -4593,7 +4593,9 @@ function convertFromListDisplay(list) {
                 token: item.token,
                 url: item.url,
                 hideUrl: item.hideUrl,
-                imageUrl: (_a = item.image) === null || _a === void 0 ? void 0 : _a.url,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                // Prefer stentor-models image.url; fall back to server's flat imageUrl
+                imageUrl: ((_a = item.image) === null || _a === void 0 ? void 0 : _a.url) || item.imageUrl,
                 imageActionUrl: (_b = item.image) === null || _b === void 0 ? void 0 : _b.imageActionUrl
             };
             // TODO: Remove any when the buttons are defined on the list (ListButton - title + openUrlAction)
@@ -4639,13 +4641,17 @@ function convertToListDisplay(list) {
     };
 }
 function convertFromCardDisplay(card) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var cardAny = card;
     return {
         content: card.content,
-        imageUrl: card.smallImageUrl,
+        // Prefer stentor-models smallImageUrl; fall back to server's flat imageUrl
+        imageUrl: card.smallImageUrl || cardAny.imageUrl,
         title: card.title,
         imageActionUrl: card === null || card === void 0 ? void 0 : card.imageActionUrl,
         buttons: card.buttons ? card.buttons.map(function (button) { return ({
-            actionUrl: button.openUrlAction,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            actionUrl: button.openUrlAction || button.url,
             label: button.title
         }); }) : undefined
     };
@@ -10586,16 +10592,16 @@ function createChatServerCore(config, options) {
 function createChatServer(config, options) {
     return new LogChat(createChatServerCore(config, options));
 }
-var ChatServerContext = require$$1.createContext(null);
+var ChatServerContext = React.createContext(null);
 function useChatServer(config, options) {
-    var _a = require$$1.useState(), server = _a[0], setServer = _a[1];
+    var _a = React.useState(), server = _a[0], setServer = _a[1];
     var dispatch = useChatDispatch();
     var deps = [options, config, dispatch];
     // Track previous values to detect what changed
-    var prevDepsRef = require$$1.useRef(undefined);
+    var prevDepsRef = React.useRef(undefined);
     // Log what caused the "effect"
     // useWhatChanged(deps, "options, config, dispatch");
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         // Log when effect runs and what changed (for debugging connection issues)
         if (prevDepsRef.current) {
             var _a = prevDepsRef.current, prevOptions = _a[0], prevConfig = _a[1], prevDispatch = _a[2];
@@ -10634,8 +10640,8 @@ function useChatServer(config, options) {
 
 function useChatServerDispatch() {
     var inner = useChatDispatch();
-    var chatServer = require$$1.useContext(ChatServerContext);
-    return require$$1.useCallback(function (action) {
+    var chatServer = React.useContext(ChatServerContext);
+    return React.useCallback(function (action) {
         if (!action) {
             console.warn("react bug? Someone invokes with null");
             return;
@@ -10947,14 +10953,14 @@ var ChatHeader = function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     var innerDispatch = useChatDispatch();
     var menuConfig = props.menuConfig, onSubmit = props.onSubmit, debugMode = props.debugMode;
-    var _r = require$$1.useState(false), drawerOpen = _r[0], setDrawerState = _r[1]; // false initially
+    var _r = React.useState(false), drawerOpen = _r[0], setDrawerState = _r[1]; // false initially
     var menuPosition = (menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.menuButtonLocation) || "FOOTER";
     var showMenuLeft = menuPosition === "HEADER_LEFT";
     var showMenuRight = menuPosition === "HEADER_RIGHT";
     var menuItemsRaw = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.items;
     var menuItemsTabIndex = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.itemsTabIndex;
     var menuButtonTabIndex = (_a = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.button) === null || _a === void 0 ? void 0 : _a.tabIndex;
-    var menuItems = require$$1.useMemo(function () { return (menuItemsRaw ? menuItemsRaw : []); }, [menuItemsRaw]);
+    var menuItems = React.useMemo(function () { return (menuItemsRaw ? menuItemsRaw : []); }, [menuItemsRaw]);
     // Check if we have a right-side menu
     var hasRightMenu = showMenuRight && menuItems.length > 0;
     function toggleDrawer() {
@@ -11009,7 +11015,7 @@ var ChatMessagePart = function (props) {
 
 function useExecuteActionCallback() {
     var dispatch = useChatServerDispatch();
-    return require$$1.useCallback(function (text, meta) {
+    return React.useCallback(function (text, meta) {
         dispatch(executeAction(text, meta));
     }, [dispatch]);
 }
@@ -11019,7 +11025,7 @@ function useButtonCallback() {
     var chatDispatch = useChatDispatch();
     var visuals = reactRedux.useSelector(function (state) { return state.visuals; });
     var executeAction = useExecuteActionCallback();
-    return require$$1.useCallback(function (button) {
+    return React.useCallback(function (button) {
         if (button.actionUrl) {
             handleOpenUrl(button.actionUrl, chatDispatch, visuals);
         }
@@ -11060,7 +11066,7 @@ function isTable(display) {
 
 var CardMiddlewareWidget = function (props) {
     var msg = props.msg, ctx = props.ctx;
-    var card = require$$1.useMemo(function () { return convertFromCardDisplay(msg); }, [msg]);
+    var card = React.useMemo(function () { return convertFromCardDisplay(msg); }, [msg]);
     var user = ctx.user;
     var handleButton = useButtonCallback();
     return (require$$0.jsx(ChatMessagePart, { showAvatar: true, user: user, children: require$$0.jsx("div", { className: "chat-msg", children: require$$0.jsx(ChatCard, { card: card, onButtonClick: handleButton }) }) }));
@@ -11110,9 +11116,9 @@ function createSubscribableArray(originalValue) {
     };
 }
 function useSubscribableArray(array) {
-    var _a = require$$1.useState(array.getArray()), res = _a[0], setRes = _a[1];
+    var _a = React.useState(array.getArray()), res = _a[0], setRes = _a[1];
     var mounted = useIsMounted();
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         var subscription = array.subscribe(function (newVal) {
             if (mounted()) {
                 setRes(newVal);
@@ -11144,7 +11150,7 @@ function useGlobalSubscribableArray(storage) {
 }
 function useLateMiddlewaresBuilder(storage) {
     var middlewares = useGlobalSubscribableArray(storage);
-    return require$$1.useMemo(function () { return joinMiddlewares(middlewares); }, [middlewares]);
+    return React.useMemo(function () { return joinMiddlewares(middlewares); }, [middlewares]);
 }
 var storage = createStorage(globalThis, "xappMsgMiddlewares");
 function useLateMiddleware() {
@@ -11156,7 +11162,7 @@ function getSvg() {
 }
 var ExternalLink = function (props) {
     var url = props.url;
-    var handleClick = require$$1.useCallback(function (ev) {
+    var handleClick = React.useCallback(function (ev) {
         ev.preventDefault();
     }, []);
     return (require$$0.jsx("a", { href: url, "aria-label": "read more", target: "_blank", rel: "noreferrer", className: props.className, onClick: handleClick, children: getSvg() }));
@@ -11269,7 +11275,7 @@ function reduceLink(url, maxLength) {
 
 var SmartLink = function (props) {
     var url = props.url, className = props.className;
-    var handleClick = require$$1.useCallback(function (ev) {
+    var handleClick = React.useCallback(function (ev) {
         ev.preventDefault();
     }, []);
     return (require$$0.jsx("a", { href: url, "aria-label": "read more", target: "_blank", rel: "noreferrer", className: className, onClick: handleClick, children: reduceLink(url, 40) }));
@@ -11285,7 +11291,7 @@ var ListItem = function (props) {
 
 var List = function (props) {
     var list = props.list;
-    var listRef = require$$1.useRef(null);
+    var listRef = React.useRef(null);
     var hasImage = list.items.some(function (item) { return item.imageUrl; });
     var titlesOnly = !list.items.some(function (item) { var _a; return item.subTitle || ((_a = item.buttons) === null || _a === void 0 ? void 0 : _a.length); });
     var listItems = list.items.map(function (item, itemIndex) {
@@ -11299,9 +11305,9 @@ var ListMiddlewareWidget = function (props) {
     if (!ctx) {
         throw new TypeError("ctx not provided to ".concat(ListMiddlewareWidget.name));
     }
-    var list = require$$1.useMemo(function () { return convertFromListDisplay(msg); }, [msg]);
+    var list = React.useMemo(function () { return convertFromListDisplay(msg); }, [msg]);
     var executeActionCallback = useExecuteActionCallback();
-    var handleExecute = require$$1.useCallback(function (ui, text, token) {
+    var handleExecute = React.useCallback(function (ui, text, token) {
         executeActionCallback(text, { token: token, action: "click", ui: ui });
     }, [executeActionCallback]);
     var handleButton = useButtonCallback();
@@ -11318,7 +11324,7 @@ var ListMiddleware = function (next) { return function (props) {
 
 var MultiSelect = function (props) {
     var items = props.items, checked = props.checked, onChange = props.onChange;
-    var handleToggle = require$$1.useCallback(function (ev) {
+    var handleToggle = React.useCallback(function (ev) {
         var _a;
         var id = ev.target.value;
         onChange(__assign(__assign({}, checked), (_a = {}, _a[id] = !checked[id], _a)));
@@ -11334,10 +11340,10 @@ function convertToMultiSelectItems(display) {
 }
 var MultiSelectMiddlewareWidget = function (props) {
     var msg = props.msg, ctx = props.ctx;
-    var items = require$$1.useMemo(function () { return convertToMultiSelectItems(msg); }, [msg]);
+    var items = React.useMemo(function () { return convertToMultiSelectItems(msg); }, [msg]);
     var user = ctx.user;
-    var _a = require$$1.useState({}), checked = _a[0], setChecked = _a[1];
-    var handleSubmit = require$$1.useCallback(function () {
+    var _a = React.useState({}), checked = _a[0], setChecked = _a[1];
+    var handleSubmit = React.useCallback(function () {
         ctx.send({
             type: "custom",
             payload: JSON.stringify({
@@ -11385,14 +11391,14 @@ var StandardMiddlewaresBuilder = joinMiddlewares([
 ]);
 function useStandardMiddlewareBuilder() {
     var lateMiddleware = useLateMiddleware();
-    return require$$1.useMemo(function () { return joinMiddlewares([
+    return React.useMemo(function () { return joinMiddlewares([
         lateMiddleware,
         StandardMiddlewaresBuilder,
     ]); }, [lateMiddleware]);
 }
 function useStandardMiddleware() {
     var builder = useStandardMiddlewareBuilder();
-    return require$$1.useMemo(function () { return builder(UnknownMessage); }, [builder]);
+    return React.useMemo(function () { return builder(UnknownMessage); }, [builder]);
 }
 var StandardMiddlewares = StandardMiddlewaresBuilder(UnknownMessage);
 
@@ -11407,7 +11413,7 @@ function getTailSvg(owner) {
 }
 var ChatMessageBubble = function (props) {
     var owner = props.owner, onClick = props.onClick;
-    var handleClick = require$$1.useCallback(function () {
+    var handleClick = React.useCallback(function () {
         if (onClick) {
             onClick();
         }
@@ -11418,18 +11424,18 @@ var ChatMessageBubble = function (props) {
 var ChatMarkdownMessage = function (props) {
     var onOpenUrl = props.onOpenUrl;
     var agentMessage = isAgent(props.message.user.nick);
-    var ref = require$$1.useRef(null);
+    var ref = React.useRef(null);
     var chatDispatch = useChatDispatch();
     var visuals = reactRedux.useSelector(function (state) { return state.visuals; });
     var html = props.message.msg.html;
-    var handleLinkClick = require$$1.useCallback(function (ev) {
+    var handleLinkClick = React.useCallback(function (ev) {
         if (onOpenUrl) {
             var link = ev.target;
             ev.preventDefault();
             onOpenUrl(link.href, chatDispatch, visuals);
         }
     }, [onOpenUrl]);
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         if (ref.current) {
             ref.current.innerHTML = html;
             if (onOpenUrl) {
@@ -11460,21 +11466,21 @@ var ChatPermissionMessage = function (props) {
     var author = message.user;
     var allowLabel = "Allow";
     var denyLabel = "Deny";
-    var writeAsAgent = require$$1.useCallback(function (msg) {
+    var writeAsAgent = React.useCallback(function (msg) {
         ctx.write({
             type: "msg",
             user: author,
             msg: msg,
         });
     }, [ctx, author]);
-    var writeAsUser = require$$1.useCallback(function (msg) {
+    var writeAsUser = React.useCallback(function (msg) {
         ctx.write({
             type: "msg",
             user: user,
             msg: msg,
         });
     }, [ctx, user]);
-    var handleFail = require$$1.useCallback(function () {
+    var handleFail = React.useCallback(function () {
         ctx.send({
             type: "msg",
             user: undefined,
@@ -11483,14 +11489,14 @@ var ChatPermissionMessage = function (props) {
             },
         });
     }, [ctx]);
-    var handleSend = require$$1.useCallback(function (msg) {
+    var handleSend = React.useCallback(function (msg) {
         ctx.send({
             type: "permissionGrant",
             user: author,
             msg: msg,
         });
     }, [author, ctx]);
-    var handleResult = require$$1.useCallback(function (position, userMsg) {
+    var handleResult = React.useCallback(function (position, userMsg) {
         handleSend({
             text: userMsg,
             location: position
@@ -11509,10 +11515,10 @@ var ChatPermissionMessage = function (props) {
             writeAsAgent(agentMsg);
         }
     }, [permissionRequest, writeAsUser, writeAsAgent, handleSend]);
-    var handleDeny = require$$1.useCallback(function (label) {
+    var handleDeny = React.useCallback(function (label) {
         handleResult(undefined, label);
     }, [handleResult]);
-    var handleAllow = require$$1.useCallback(function (label) {
+    var handleAllow = React.useCallback(function (label) {
         if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(function (position) {
                 handleResult(position, label);
@@ -11529,7 +11535,7 @@ var ChatPermissionMessage = function (props) {
 
 var CopyButton = function (_a) {
     var text = _a.text;
-    var _b = require$$1.useState(false), copied = _b[0], setCopied = _b[1];
+    var _b = React.useState(false), copied = _b[0], setCopied = _b[1];
     var handleCopy = function (e) { return __awaiter$1(void 0, void 0, void 0, function () {
         var textarea;
         return __generator$1(this, function (_b) {
@@ -11585,7 +11591,7 @@ var ToolProgressItem = function (_a) {
  */
 var ToolCallItem = function (_a) {
     var toolCall = _a.toolCall;
-    var _b = require$$1.useState(false), isExpanded = _b[0], setIsExpanded = _b[1];
+    var _b = React.useState(false), isExpanded = _b[0], setIsExpanded = _b[1];
     var toggleExpanded = function () { return setIsExpanded(!isExpanded); };
     var formatJson = function (data) {
         if (data === undefined || data === null)
@@ -11760,7 +11766,7 @@ var ChatTextMessage = function (props) {
     var agentMessage = isAgent((_a = props.message.user) === null || _a === void 0 ? void 0 : _a.nick);
     var isStreaming = message.isStreaming;
     // Parse markdown for agent messages
-    var parsedHtml = require$$1.useMemo(function () {
+    var parsedHtml = React.useMemo(function () {
         if (agentMessage && message.msg.text) {
             return parseMarkdown(message.msg.text);
         }
@@ -11815,7 +11821,7 @@ var avaKeys = ["text", "html", "card", "list"];
 var ChatMessage = function (props) {
     var _a, _b, _c;
     var middleware = props.messageMiddleware || StandardMiddlewares;
-    var chatConfig = require$$1.useContext(ChatConfigContext);
+    var chatConfig = React.useContext(ChatConfigContext);
     // console.log(`########### chatConfig: ${JSON.stringify(chatConfig, null, 2)}`);
     var ctx = props.middlewareContext;
     var user = props.agent;
@@ -11910,7 +11916,7 @@ function checkSessionExpiration(duration, lastMessageTimestamp, _lastTimestamp)
 }
 
 function useExternalScript(url) {
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         if (!url) {
             return;
         }
@@ -11952,7 +11958,7 @@ function useChatServerVisitorId() {
     });
     var visitorAccessToken = reactRedux.useSelector(function (state) { return state.accessToken; });
     var attributes = reactRedux.useSelector(function (state) { return state.attributes; });
-    return require$$1.useMemo(function () { return ({
+    return React.useMemo(function () { return ({
         dispatch: dispatch,
         visitorId: clientVisitorId,
         accessToken: visitorAccessToken,
@@ -11964,12 +11970,12 @@ function useChatServerVisitorId() {
 function useGreeting(active) {
     var _a, _b;
     var curr = useChatServerVisitorId();
-    var snapshotRef = require$$1.useRef(null);
-    var ctx = require$$1.useContext(ChatConfigContext);
+    var snapshotRef = React.useRef(null);
+    var ctx = React.useContext(ChatConfigContext);
     // Handle null context (e.g., in preview mode)
     var isAdmin = (_b = (_a = ctx === null || ctx === void 0 ? void 0 : ctx.env) === null || _a === void 0 ? void 0 : _a.isAdmin) !== null && _b !== void 0 ? _b : false;
     var sessionId = reactRedux.useSelector(function (state) { return state.sessionId; });
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         if (active) {
             if (snapshotRef.current !== curr) {
                 snapshotRef.current = curr;
@@ -12014,18 +12020,18 @@ function norm(index, len) {
     return (index + len) % len;
 }
 function useSuggestions(search, context) {
-    var _a = require$$1.useState(), suggestions = _a[0], setSuggestions = _a[1];
-    var _b = require$$1.useState(-1), suggestionIndex = _b[0], setSuggestionIndex = _b[1];
-    var _c = require$$1.useState(search), query = _c[0], setQuery = _c[1];
-    var _d = require$$1.useState(context), contextState = _d[0], setContextState = _d[1];
-    require$$1.useEffect(function () {
+    var _a = React.useState(), suggestions = _a[0], setSuggestions = _a[1];
+    var _b = React.useState(-1), suggestionIndex = _b[0], setSuggestionIndex = _b[1];
+    var _c = React.useState(search), query = _c[0], setQuery = _c[1];
+    var _d = React.useState(context), contextState = _d[0], setContextState = _d[1];
+    React.useEffect(function () {
         setQuery(search);
     }, [search]);
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         setContextState(context);
     }, [context]);
-    var suggestionItem = require$$1.useMemo(function () { return suggestions ? findItemByIndex_1(suggestions, suggestionIndex) : undefined; }, [suggestions, suggestionIndex]);
-    var shift = require$$1.useCallback(function (delta) {
+    var suggestionItem = React.useMemo(function () { return suggestions ? findItemByIndex_1(suggestions, suggestionIndex) : undefined; }, [suggestions, suggestionIndex]);
+    var shift = React.useCallback(function (delta) {
         if (suggestions) {
             var len_1 = getItemsLength_1(suggestions);
             setSuggestionIndex(function (index) { return norm(index + delta + ((index < 0 && delta <= 0) ? 1 : 0), len_1); });
@@ -12034,7 +12040,7 @@ function useSuggestions(search, context) {
             setSuggestionIndex(-1);
         }
     }, [suggestions]);
-    var execute = require$$1.useCallback(function (cmd) {
+    var execute = React.useCallback(function (cmd) {
         switch (cmd) {
             case "prev":
                 shift(-1);
@@ -12051,7 +12057,7 @@ function useSuggestions(search, context) {
     }, [shift]);
     var suggestionsResponse = useSuggestionsFetch(query || "", contextState);
     var suggestionsData = suggestionsResponse.state === "success" ? suggestionsResponse.data : undefined;
-    var raw = require$$1.useMemo(function () {
+    var raw = React.useMemo(function () {
         return suggestionsData ?
             parseSuggestionsResponse_1(suggestionsData, -1).map(function (suggestion) {
                 return {
@@ -12060,14 +12066,14 @@ function useSuggestions(search, context) {
                 };
             }) : undefined;
     }, [suggestionsData]);
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         var prev = suggestionItem;
         setSuggestions(raw);
         if (!prev || !raw) {
             setSuggestionIndex(-1);
         }
     }, [raw, suggestionItem]);
-    return require$$1.useMemo(function () { return ({
+    return React.useMemo(function () { return ({
         suggestions: suggestions,
         index: suggestionIndex,
         execute: execute,
@@ -12077,11 +12083,11 @@ function useSuggestions(search, context) {
 
 var AdminBar = function (_a) {
     var onAdminJoin = _a.onAdminJoin;
-    var name = require$$1.useRef(null);
+    var name = React.useRef(null);
     // We can manage this locally
     // const hasAdminJoined = useSelector<ChatState, boolean | undefined>(state => state.hasAdminJoined);
-    var _b = require$$1.useState(false), joined = _b[0], setJoined = _b[1];
-    var _c = require$$1.useState(""), inputName = _c[0], setInputName = _c[1];
+    var _b = React.useState(false), joined = _b[0], setJoined = _b[1];
+    var _c = React.useState(""), inputName = _c[0], setInputName = _c[1];
     function handleInputChange(event) {
         setInputName(event.target.value);
     }
@@ -12232,7 +12238,7 @@ var SendIcon = function () {
 
 var SendButton = function (props) {
     var _a = props.disabled, disabled = _a === void 0 ? false : _a;
-    var _b = require$$1.useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    var _b = React.useState(false), isHovered = _b[0], setIsHovered = _b[1];
     // Determine which icon to show based on state
     var getIconSrc = function () {
         if (disabled && props.sendButtonIconDisabled) {
@@ -12251,7 +12257,7 @@ var COUNTER_THRESHOLD_PERCENT = 0.8;
 var Input = function (props) {
     var _a, _b;
     var value = props.value, placeholder = props.placeholder, sendButtonIcon = props.sendButtonIcon, sendButtonIconHover = props.sendButtonIconHover, sendButtonIconDisabled = props.sendButtonIconDisabled, suggestion = props.suggestion, footerConfig = props.footerConfig, inputConfig = props.inputConfig, onChange = props.onChange, onSubmit = props.onSubmit, onSuggestionCommand = props.onSuggestionCommand;
-    var _c = require$$1.useState(false), dragover = _c[0], setDragover = _c[1];
+    var _c = React.useState(false), dragover = _c[0], setDragover = _c[1];
     var maxLength = inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.maxLength;
     var currentLength = value.text.length;
     var isAtLimit = maxLength !== undefined && currentLength >= maxLength;
@@ -12268,17 +12274,17 @@ var Input = function (props) {
     function onDragLeave() {
         setDragover(false);
     }
-    var handleOnSubmit = require$$1.useCallback(function (event) {
+    var handleOnSubmit = React.useCallback(function (event) {
         event && event.preventDefault();
         onSubmit(value); // send to the widget
     }, [value, onSubmit]);
-    var handleClear = require$$1.useCallback(function () {
+    var handleClear = React.useCallback(function () {
         onChange({
             text: "",
             formats: [],
         });
     }, [onChange]);
-    var handleKeyDown = require$$1.useCallback(function (event) {
+    var handleKeyDown = React.useCallback(function (event) {
         if (suggestion) {
             if (event.key === "End" || event.key === "ArrowRight" || event.key === "Enter") {
                 onChange(suggestion);
@@ -12312,7 +12318,7 @@ function createActions(onItemUse) {
     return function (innerProps) {
         var data = innerProps.data;
         var canUse = data.type !== "FAQ";
-        var handleUse = require$$1.useCallback(function (ev) {
+        var handleUse = React.useCallback(function (ev) {
             onItemUse(data);
             ev.stopPropagation();
         }, [data]);
@@ -12324,9 +12330,9 @@ function createActions(onItemUse) {
 }
 var Suggestions = function (props) {
     var data = props.data, onItemUse = props.onItemUse, searchTerms = props.searchTerms;
-    var _a = require$$1.useState(), fixedSuggestions = _a[0], setFixedSuggestions = _a[1];
-    var _b = require$$1.useState(), activeItem = _b[0], setActiveItem = _b[1];
-    require$$1.useEffect(function () {
+    var _a = React.useState(), fixedSuggestions = _a[0], setFixedSuggestions = _a[1];
+    var _b = React.useState(), activeItem = _b[0], setActiveItem = _b[1];
+    React.useEffect(function () {
         if (data) {
             setFixedSuggestions(data);
         }
@@ -12337,8 +12343,8 @@ var Suggestions = function (props) {
     }, [data, searchTerms]);
     var len = data === null || data === void 0 ? void 0 : data.length;
     var currentIndex = len > 0 ? props.index : NaN;
-    var item = require$$1.useMemo(function () { return findItemByIndex_1(data, currentIndex); }, [data, currentIndex]);
-    var handleSpanClick = require$$1.useCallback(function (target, span) {
+    var item = React.useMemo(function () { return findItemByIndex_1(data, currentIndex); }, [data, currentIndex]);
+    var handleSpanClick = React.useCallback(function (target, span) {
         if (span.type === "inputText") {
             onItemUse(target);
             setActiveItem(undefined);
@@ -12346,10 +12352,10 @@ var Suggestions = function (props) {
         }
         return undefined;
     }, [onItemUse]);
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         setActiveItem(item);
     }, [item]);
-    var actions = require$$1.useMemo(function () { return createActions(onItemUse); }, [onItemUse]);
+    var actions = React.useMemo(function () { return createActions(onItemUse); }, [onItemUse]);
     var transformContent = function (content) {
         var lines = content.split('\n');
         return lines.map(function (line) {
@@ -12368,8 +12374,8 @@ var ChatFooter = function (props) {
     var _a, _b, _c;
     var isAdmin = props.isAdmin, isChatting = props.isChatting, visible = props.visible, placeholder = props.placeholder, sendButtonIcon = props.sendButtonIcon, sendButtonIconHover = props.sendButtonIconHover, sendButtonIconDisabled = props.sendButtonIconDisabled, footerConfig = props.footerConfig, menuConfig = props.menuConfig, inputConfig = props.inputConfig, hasWsButton = props.hasWsButton, disabled = props.disabled, onSubmit = props.onSubmit;
     var innerDispatch = useChatDispatch();
-    var _d = require$$1.useState(false), drawerOpen = _d[0], setDrawerState = _d[1]; // false initially
-    var _e = require$$1.useState(), suggestionSearch = _e[0], setSuggestionSearch = _e[1];
+    var _d = React.useState(false), drawerOpen = _d[0], setDrawerState = _d[1]; // false initially
+    var _e = React.useState(), suggestionSearch = _e[0], setSuggestionSearch = _e[1];
     var contexts = reactRedux.useSelector(function (state) { return state.activeContexts; });
     var suggestions = useSuggestions(suggestionSearch, contexts);
     var menuPosition = (menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.menuButtonLocation) || "FOOTER";
@@ -12377,12 +12383,12 @@ var ChatFooter = function (props) {
     var menuItemsRaw = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.items;
     var menuItemsTabIndex = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.itemsTabIndex;
     var menuButtonTabIndex = (_a = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.button) === null || _a === void 0 ? void 0 : _a.tabIndex;
-    var menuItems = require$$1.useMemo(function () { return menuItemsRaw ? menuItemsRaw : []; }, [menuItemsRaw]);
+    var menuItems = React.useMemo(function () { return menuItemsRaw ? menuItemsRaw : []; }, [menuItemsRaw]);
     var brandingEnabled = (_b = footerConfig === null || footerConfig === void 0 ? void 0 : footerConfig.branding) === null || _b === void 0 ? void 0 : _b.enabled;
     var brandingText = (_c = footerConfig === null || footerConfig === void 0 ? void 0 : footerConfig.branding) === null || _c === void 0 ? void 0 : _c.text;
     // If they are NOT an admin, automatically enabled the input
-    var _f = require$$1.useState(!isAdmin), enableInput = _f[0], setEnableInput = _f[1];
-    var _g = require$$1.useState({
+    var _f = React.useState(!isAdmin), enableInput = _f[0], setEnableInput = _f[1];
+    var _g = React.useState({
         text: "",
         formats: []
     }), input = _g[0], setInput = _g[1];
@@ -12403,7 +12409,7 @@ var ChatFooter = function (props) {
         setSuggestionSearch(val.text);
     }
     // Clears out suggestion and input text
-    var handleSubmit = require$$1.useCallback(function (message) {
+    var handleSubmit = React.useCallback(function (message) {
         // Clears out the suggestions
         setSuggestionSearch("");
         // Clears out the input
@@ -12413,10 +12419,10 @@ var ChatFooter = function (props) {
         });
         onSubmit(message.text);
     }, [onSubmit]);
-    var handleItemClick = require$$1.useCallback(function (data) {
+    var handleItemClick = React.useCallback(function (data) {
         handleSubmit(data);
     }, [handleSubmit]);
-    var handleItemUse = require$$1.useCallback(function (data) {
+    var handleItemUse = React.useCallback(function (data) {
         setInput(data);
         setSuggestionSearch(data.text);
     }, []);
@@ -12459,15 +12465,15 @@ function buildFormConfig(buttonConfig, widgetEnv) {
 var FormModal = function (_a) {
     var _b, _c;
     var config = _a.config, widgetEnv = _a.widgetEnv, onClose = _a.onClose;
-    var modalRef = require$$1.useRef(null);
-    var contentRef = require$$1.useRef(null);
+    var modalRef = React.useRef(null);
+    var contentRef = React.useRef(null);
     var formConfig = buildFormConfig(config, widgetEnv);
-    var _d = require$$1.useState("idle"), loadingState = _d[0], setLoadingState = _d[1];
-    var _e = require$$1.useState(""), errorMessage = _e[0], setErrorMessage = _e[1];
+    var _d = React.useState("idle"), loadingState = _d[0], setLoadingState = _d[1];
+    var _e = React.useState(""), errorMessage = _e[0], setErrorMessage = _e[1];
     // Get the form widget key from config or widgetEnv
     var formWidgetKey = ((_c = (_b = config.formConfig) === null || _b === void 0 ? void 0 : _b.api) === null || _c === void 0 ? void 0 : _c.key) || (widgetEnv === null || widgetEnv === void 0 ? void 0 : widgetEnv.formWidgetKey);
     // Attempt to load and open the form widget
-    var attemptOpenFormWidget = require$$1.useCallback(function () { return __awaiter$1(void 0, void 0, void 0, function () {
+    var attemptOpenFormWidget = React.useCallback(function () { return __awaiter$1(void 0, void 0, void 0, function () {
         var options, opened, options, opened;
         return __generator$1(this, function (_a) {
             switch (_a.label) {
@@ -12524,11 +12530,11 @@ var FormModal = function (_a) {
         });
     }); }, [config.preselectChipLabel, formWidgetKey, onClose]);
     // Attempt to open form widget on mount
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         attemptOpenFormWidget();
     }, [attemptOpenFormWidget]);
     // Handle Escape key to close
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         var handleKeyDown = function (event) {
             if (event.key === "Escape") {
                 onClose();
@@ -12540,7 +12546,7 @@ var FormModal = function (_a) {
         };
     }, [onClose]);
     // Prevent body scroll when modal is open
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         var originalOverflow = document.body.style.overflow;
         document.body.style.overflow = "hidden";
         return function () {
@@ -12548,18 +12554,18 @@ var FormModal = function (_a) {
         };
     }, []);
     // Focus trap - focus the modal content on mount
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         if (contentRef.current) {
             contentRef.current.focus();
         }
     }, []);
-    var handleBackdropClick = require$$1.useCallback(function (event) {
+    var handleBackdropClick = React.useCallback(function (event) {
         // Only close if clicking the backdrop, not the content
         if (event.target === modalRef.current) {
             onClose();
         }
     }, [onClose]);
-    var handleRetry = require$$1.useCallback(function () {
+    var handleRetry = React.useCallback(function () {
         setLoadingState("idle");
         setErrorMessage("");
         attemptOpenFormWidget();
@@ -12613,13 +12619,13 @@ var ChatRating = function (_a) {
     var _b = _a.agent, agent = _b === void 0 ? {} : _b, _c = _a.hasRating, hasRating = _c === void 0 ? false : _c, _d = _a.shouldDisplay, shouldDisplay = _d === void 0 ? true : _d, _e = _a.onRate, onRate = _e === void 0 ? function () {
         // no-op
     } : _e;
-    var rateBadButtonOnClick = require$$1.useCallback(function () {
+    var rateBadButtonOnClick = React.useCallback(function () {
         onRate("bad");
     }, [onRate]);
-    var rateGoodButtonOnClick = require$$1.useCallback(function () {
+    var rateGoodButtonOnClick = React.useCallback(function () {
         onRate("good");
     }, [onRate]);
-    var rateAgainButtonOnClick = require$$1.useCallback(function () {
+    var rateAgainButtonOnClick = React.useCallback(function () {
         onRate(undefined);
     }, [onRate]);
     // Do not think this prop should be here
@@ -12636,7 +12642,7 @@ var ChatRating = function (_a) {
 
 var ChatRatingContainer = function (props) {
     var dispatch = useChatServerDispatch();
-    var handleRate = require$$1.useCallback(function (rating) {
+    var handleRate = React.useCallback(function (rating) {
         dispatch(sendChatRating(rating));
     }, [dispatch]);
     return (require$$0.jsxs(require$$0.Fragment, { children: [require$$0.jsx("span", { className: "message-sr-only", children: "at " + props.time + " system message" }), require$$0.jsx(ChatRating, { agent: props.agent, hasRating: props.hasRating, shouldDisplay: props.shouldDisplay, onRate: handleRate })] }));
@@ -34135,9 +34141,9 @@ function compileSlotValues(responseOutput, slots, replaceWhenUndefined) {
 
 var FailureMessage = function (props) {
     var agents = props.agents, text = props.text, delay = props.delay, time = props.time;
-    var _a = require$$1.useState(delay), countdown = _a[0], setCountdown = _a[1];
+    var _a = React.useState(delay), countdown = _a[0], setCountdown = _a[1];
     var agent_names = Object.values(agents).filter(function (agent) { return agent.requestFailed; });
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         if (delay !== 0) {
             var countdownValue_1 = delay;
             var myInterval_1 = setInterval(function () {
@@ -34152,7 +34158,7 @@ var FailureMessage = function (props) {
             setCountdown(5);
         }
     }, [delay]);
-    var slots = require$$1.useMemo(function () {
+    var slots = React.useMemo(function () {
         return {
             sec: {
                 name: "sec",
@@ -34160,7 +34166,7 @@ var FailureMessage = function (props) {
             },
         };
     }, [countdown]);
-    var failureMessage = require$$1.useMemo(function () {
+    var failureMessage = React.useMemo(function () {
         return compileSlotValues(text, slots);
     }, [text, slots]);
     if (countdown === 0) {
@@ -34179,11 +34185,11 @@ var MessageSvg = function (_) {
 };
 
 var MessageForm = function (props) {
-    var name = require$$1.useRef(null);
-    var email = require$$1.useRef(null);
-    var message = require$$1.useRef(null);
-    var form = require$$1.useRef(null);
-    var _a = require$$1.useState(false), sent = _a[0], setSent = _a[1];
+    var name = React.useRef(null);
+    var email = React.useRef(null);
+    var message = React.useRef(null);
+    var form = React.useRef(null);
+    var _a = React.useState(false), sent = _a[0], setSent = _a[1];
     function emailChanged() {
         var _a, _b, _c;
         if ((_a = email.current) === null || _a === void 0 ? void 0 : _a.validity.patternMismatch) {
@@ -34225,16 +34231,16 @@ var OfflineForm = function (props) {
 
 var OfflineFormContainer = function (props) {
     var dispatch = useChatServerDispatch();
-    var handleSubmit = require$$1.useCallback(function (data) {
+    var handleSubmit = React.useCallback(function (data) {
         dispatch(sendOfflineMsg(data));
     }, [dispatch]);
     return (require$$0.jsxs(require$$0.Fragment, { children: [require$$0.jsx("span", { className: "message-sr-only", children: "at " + props.time + " system message" }), require$$0.jsx(OfflineForm, { onSubmit: handleSubmit })] }));
 };
 
 var PrechatForm = function (props) {
-    var _a = require$$1.useState(false), sent = _a[0], setSent = _a[1];
+    var _a = React.useState(false), sent = _a[0], setSent = _a[1];
     var onSubmit = props.onSubmit;
-    var handleSubmit = require$$1.useCallback(function (msg) {
+    var handleSubmit = React.useCallback(function (msg) {
         onSubmit(msg);
         setSent(true);
     }, [onSubmit]);
@@ -34244,7 +34250,7 @@ var PrechatForm = function (props) {
 var PrechatFormContainer = function (props) {
     var dispatch = useChatServerDispatch();
     var sessionId = reactRedux.useSelector(function (state) { return state.sessionId; });
-    var handleSubmit = require$$1.useCallback(function (data) {
+    var handleSubmit = React.useCallback(function (data) {
         // Don't send empty messages
         if (!data.message)
             return;
@@ -34329,31 +34335,31 @@ var TypingStatus = function (props) {
 
 var MessageList = function (_a) {
     _a.visible; var _c = _a.messages, messages = _c === void 0 ? [] : _c, _d = _a.agents, agents = _d === void 0 ? {} : _d; _a.isOffline; _a.isChatting; var _g = _a.queuePosition, queuePosition = _g === void 0 ? 0 : _g, _h = _a.lastRatingRequestTimestamp, lastRatingRequestTimestamp = _h === void 0 ? 0 : _h, _j = _a.hasRating, hasRating = _j === void 0 ? false : _j; _a.visitorId; var messageMiddleware = _a.messageMiddleware, textTypingStatusEnabled = _a.textTypingStatusEnabled, agent = _a.agent, hasWsButton = _a.hasWsButton, _l = _a.disableAutoScroll, disableAutoScroll = _l === void 0 ? false : _l, _m = _a.onSend, onSend = _m === void 0 ? function () { return Promise.resolve(); } : _m, _o = _a.onWrite, onWrite = _o === void 0 ? function () { return Promise.resolve(); } : _o, _p = _a.onOpenUrl, onOpenUrl = _p === void 0 ? function () { } : _p, _q = _a.minimizeOnClick, minimizeOnClick = _q === void 0 ? function () { } : _q; _a.children;
-    var messagesEndRef = require$$1.useRef(null);
-    var containerRef = require$$1.useRef(null);
-    var prevHasWsButtonRef = require$$1.useRef(hasWsButton);
+    var messagesEndRef = React.useRef(null);
+    var containerRef = React.useRef(null);
+    var prevHasWsButtonRef = React.useRef(hasWsButton);
     // Check if user is scrolled to bottom
-    var isAtBottom = require$$1.useCallback(function () {
+    var isAtBottom = React.useCallback(function () {
         if (!containerRef.current)
             return true;
         var _a = containerRef.current, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
         return Math.abs(scrollHeight - clientHeight - scrollTop) < 10;
     }, []);
     // Scroll to bottom
-    var scrollToBottom = require$$1.useCallback(function (behavior) {
+    var scrollToBottom = React.useCallback(function (behavior) {
         if (behavior === void 0) { behavior = "smooth"; }
         if (messagesEndRef.current) {
             messagesEndRef.current.scrollIntoView({ behavior: behavior });
         }
     }, []);
     // Always scroll to bottom when messages change (unless disabled)
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         if (!disableAutoScroll) {
             scrollToBottom("smooth");
         }
     }, [messages, agents, scrollToBottom, disableAutoScroll]);
     // Handle WS button dismissal - only scroll when button is removed (unless disabled)
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         if (disableAutoScroll) {
             return undefined;
         }
@@ -34374,19 +34380,19 @@ var MessageList = function (_a) {
         }
         return undefined;
     }, [hasWsButton, isAtBottom, scrollToBottom, disableAutoScroll]);
-    var handleSend = require$$1.useCallback(function (msg) {
+    var handleSend = React.useCallback(function (msg) {
         onSend(msg);
         if (!disableAutoScroll && messagesEndRef.current) {
             messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
         }
     }, [onSend, disableAutoScroll]);
-    var handleWrite = require$$1.useCallback(function (msg) {
+    var handleWrite = React.useCallback(function (msg) {
         onWrite(msg);
         if (!disableAutoScroll && messagesEndRef.current) {
             messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
         }
     }, [onWrite, disableAutoScroll]);
-    var ctxCache = require$$1.useMemo(function () {
+    var ctxCache = React.useMemo(function () {
         return new MiddlewareContextFactory({
             send: handleSend,
             write: handleWrite,
@@ -34502,26 +34508,74 @@ var ServerOffline = function () {
     return (require$$0.jsxs("div", { className: "server-offline", children: [require$$0.jsx("h2", { children: "Chat is currently unavailable" }), require$$0.jsx("h3", { children: "Server is offline" })] }));
 };
 
-function buildStyleContent(theme) {
+/**
+ * Generates the [cssVariableName, value] pairs for a theme, e.g.
+ * ["--xapp-primary-color", "#0096d3"].
+ */
+function themeVariables(theme) {
     var _a, _b, _c, _d, _e;
-    return "\n:root {\n".concat(buildVariables(withPrefix("\t--xapp-", union(single("primary-color", theme === null || theme === void 0 ? void 0 : theme.primaryColor), withPrefix("widget-", union(getSize(theme === null || theme === void 0 ? void 0 : theme.size), getMargins(theme === null || theme === void 0 ? void 0 : theme.margin), getBorderStyle(theme === null || theme === void 0 ? void 0 : theme.border), getZIndex(theme === null || theme === void 0 ? void 0 : theme.zIndex))), getChatButtonStyle(theme === null || theme === void 0 ? void 0 : theme.chatButton), withPrefix("header-", getHeaderStyle(theme === null || theme === void 0 ? void 0 : theme.header)), withPrefix("footer-", getFooterStyle(theme === null || theme === void 0 ? void 0 : theme.footer)), withPrefix("content-", union(getBackgroundStyle((_a = theme === null || theme === void 0 ? void 0 : theme.content) === null || _a === void 0 ? void 0 : _a.background))), withPrefix("messages-", getMessagesStyle(theme === null || theme === void 0 ? void 0 : theme.messages)), withPrefix("text-typing-status-", getTextStyle((_b = theme === null || theme === void 0 ? void 0 : theme.textTypingStatus) === null || _b === void 0 ? void 0 : _b.text)), withPrefix("send-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.sendButton)), withPrefix("menu-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.menuButton)), withPrefix("menu-", getMenuStyle(theme === null || theme === void 0 ? void 0 : theme.menu)), withPrefix("refresh-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.refreshButton)), withPrefix("minimize-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.minimizeButton)), withPrefix("cancel-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.cancelButton)), withPrefix("carousel-", union(withPrefix("title-", getTextStyle((_c = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _c === void 0 ? void 0 : _c.title)), withPrefix("subtitle-", getTextStyle((_d = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _d === void 0 ? void 0 : _d.subtitle)), withPrefix("action-", getButtonStyle((_e = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _e === void 0 ? void 0 : _e.button)))), withPrefix("input-", getInputStyle(theme === null || theme === void 0 ? void 0 : theme.input)), withPrefix("cta-", getCtaStyle(theme === null || theme === void 0 ? void 0 : theme.cta)), withPrefix("action-bar-", getActionBarStyle(theme === null || theme === void 0 ? void 0 : theme.actionBar))))), "\n}");
-}
-function WidgetStylesheet(props) {
-    var theme = props.theme;
-    var stylesContent = buildStyleContent(theme);
-    return require$$0.jsx("style", { children: stylesContent });
+    return withPrefix("--xapp-", union(single("primary-color", theme === null || theme === void 0 ? void 0 : theme.primaryColor), withPrefix("widget-", union(getSize(theme === null || theme === void 0 ? void 0 : theme.size), getMargins(theme === null || theme === void 0 ? void 0 : theme.margin), getBorderStyle(theme === null || theme === void 0 ? void 0 : theme.border), getZIndex(theme === null || theme === void 0 ? void 0 : theme.zIndex))), getChatButtonStyle(theme === null || theme === void 0 ? void 0 : theme.chatButton), withPrefix("header-", getHeaderStyle(theme === null || theme === void 0 ? void 0 : theme.header)), withPrefix("footer-", getFooterStyle(theme === null || theme === void 0 ? void 0 : theme.footer)), withPrefix("content-", union(getBackgroundStyle((_a = theme === null || theme === void 0 ? void 0 : theme.content) === null || _a === void 0 ? void 0 : _a.background))), withPrefix("messages-", getMessagesStyle(theme === null || theme === void 0 ? void 0 : theme.messages)), withPrefix("text-typing-status-", getTextStyle((_b = theme === null || theme === void 0 ? void 0 : theme.textTypingStatus) === null || _b === void 0 ? void 0 : _b.text)), withPrefix("send-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.sendButton)), withPrefix("menu-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.menuButton)), withPrefix("menu-", getMenuStyle(theme === null || theme === void 0 ? void 0 : theme.menu)), withPrefix("refresh-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.refreshButton)), withPrefix("minimize-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.minimizeButton)), withPrefix("cancel-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.cancelButton)), withPrefix("carousel-", union(withPrefix("title-", getTextStyle((_c = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _c === void 0 ? void 0 : _c.title)), withPrefix("subtitle-", getTextStyle((_d = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _d === void 0 ? void 0 : _d.subtitle)), withPrefix("action-", getButtonStyle((_e = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _e === void 0 ? void 0 : _e.button)))), withPrefix("input-", getInputStyle(theme === null || theme === void 0 ? void 0 : theme.input)), withPrefix("cta-", getCtaStyle(theme === null || theme === void 0 ? void 0 : theme.cta)), withPrefix("action-bar-", getActionBarStyle(theme === null || theme === void 0 ? void 0 : theme.actionBar))));
 }
-function buildVariables(gen) {
+/**
+ * Collects the defined theme CSS variables as [name, value] entries, skipping
+ * empty values.
+ */
+function buildStyleVariables(theme) {
+    var entries = [];
+    var gen = themeVariables(theme);
     var result = gen.next();
-    var res = "";
     while (result.done === false) {
         var _a = result.value, key = _a[0], value = _a[1];
         if (value !== undefined && value !== null && value !== "") {
-            res += "".concat(key, ": ").concat(value, ";\n\r");
+            entries.push([key, value]);
         }
         result = gen.next();
     }
-    return res;
+    return entries;
+}
+// All instances apply their theme variables to the same target (:root), so a
+// per-variable ref-count ensures an unmounting instance only removes a variable
+// when no other mounted instance still relies on it.
+var appliedVariableCounts = new Map();
+function applyThemeVariables(entries) {
+    var _a;
+    var root = document.documentElement;
+    for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+        var _b = entries_1[_i], key = _b[0], value = _b[1];
+        root.style.setProperty(key, value);
+        appliedVariableCounts.set(key, ((_a = appliedVariableCounts.get(key)) !== null && _a !== void 0 ? _a : 0) + 1);
+    }
+}
+function removeThemeVariables(entries) {
+    var _a;
+    var root = document.documentElement;
+    for (var _i = 0, entries_2 = entries; _i < entries_2.length; _i++) {
+        var key = entries_2[_i][0];
+        var remaining = ((_a = appliedVariableCounts.get(key)) !== null && _a !== void 0 ? _a : 1) - 1;
+        if (remaining <= 0) {
+            appliedVariableCounts.delete(key);
+            root.style.removeProperty(key);
+        }
+        else {
+            appliedVariableCounts.set(key, remaining);
+        }
+    }
+}
+function WidgetStylesheet(props) {
+    var theme = props.theme;
+    // Apply the theme as CSS custom properties on :root via the CSSOM instead of
+    // injecting a <style> tag: setProperty() is not governed by CSP style-src, so
+    // the widget themes correctly under a strict policy (style-src 'self', no
+    // 'unsafe-inline') without needing a nonce.
+    var entriesKey = JSON.stringify(buildStyleVariables(theme));
+    // Keyed on the resolved variables (not the theme reference) so a caller passing
+    // an inline theme object doesn't re-fire the effect on every render.
+    React.useLayoutEffect(function () {
+        var entries = JSON.parse(entriesKey);
+        applyThemeVariables(entries);
+        return function () { return removeThemeVariables(entries); };
+    }, [entriesKey]);
+    return null;
 }
 function withPrefix(prefix, gen) {
     var result;
@@ -34859,13 +34913,13 @@ var safeStringify = function (arg) {
 };
 var ErrorOverlay = function (_a) {
     var enableErrorOverlay = _a.enableErrorOverlay;
-    var _b = require$$1.useState([]), errors = _b[0], setErrors = _b[1];
-    var _c = require$$1.useState(false), isMinimized = _c[0], setIsMinimized = _c[1];
-    var _d = require$$1.useState(true), isVisible = _d[0], setIsVisible = _d[1];
-    var _e = require$$1.useState(false), isEnabled = _e[0], setIsEnabled = _e[1];
-    var _f = require$$1.useState("bottom"), position = _f[0], setPosition = _f[1];
+    var _b = React.useState([]), errors = _b[0], setErrors = _b[1];
+    var _c = React.useState(false), isMinimized = _c[0], setIsMinimized = _c[1];
+    var _d = React.useState(true), isVisible = _d[0], setIsVisible = _d[1];
+    var _e = React.useState(false), isEnabled = _e[0], setIsEnabled = _e[1];
+    var _f = React.useState("bottom"), position = _f[0], setPosition = _f[1];
     // Check if error overlay should be enabled and load position
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         var _a;
         var checkEnabled = function () {
             var _a;
@@ -34904,7 +34958,7 @@ var ErrorOverlay = function (_a) {
         console.log("[ErrorOverlay] Component mounted, enabled:", enabled, "position:", savedPosition || "bottom");
     }, [enableErrorOverlay]);
     // Define addError with useCallback to prevent stale closures
-    var addError = require$$1.useCallback(function (error) {
+    var addError = React.useCallback(function (error) {
         console.log("[ErrorOverlay] Adding error:", error);
         setErrors(function (prev) {
             var timestamp = new Date().toISOString();
@@ -34923,7 +34977,7 @@ var ErrorOverlay = function (_a) {
             return updated.slice(-50);
         });
     }, []);
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         if (!isEnabled) {
             console.log("[ErrorOverlay] Not enabled, skipping error interception");
             return undefined;
@@ -35073,12 +35127,12 @@ var ErrorOverlay = function (_a) {
 
 var WsButton = function (_a) {
     var button = _a.button, onPress = _a.onPress;
-    var handleClick = require$$1.useCallback(function () {
+    var handleClick = React.useCallback(function () {
         if (button.pressBehavior !== "disabled" && !button.isPressed) {
             onPress(button.id);
         }
     }, [button.pressBehavior, button.isPressed, button.id, onPress]);
-    var className = require$$1.useMemo(function () {
+    var className = React.useMemo(function () {
         var classes = ["ws-button"];
         if (button.pressBehavior === "disabled" || button.isPressed) {
             classes.push("ws-button--disabled");
@@ -35088,7 +35142,7 @@ var WsButton = function (_a) {
         }
         return classes.join(" ");
     }, [button.pressBehavior, button.isPressed]);
-    var containerClassName = require$$1.useMemo(function () {
+    var containerClassName = React.useMemo(function () {
         var classes = ["ws-button-container"];
         if (button.isDismissing) {
             classes.push("ws-button-container--dismissing");
@@ -35622,10 +35676,10 @@ function createStaticStore(state) {
 
 var StaticChatWidgetContainer = function (props) {
     var state = props.state;
-    var store = require$$1.useMemo(function () {
+    var store = React.useMemo(function () {
         return createStaticStore(state);
     }, [state]);
-    var config = require$$1.useMemo(function () {
+    var config = React.useMemo(function () {
         return __assign(__assign({}, props.config), { connection: {
                 serverUrl: "",
                 type: "local",
@@ -35636,7 +35690,7 @@ var StaticChatWidgetContainer = function (props) {
 
 var StaticMessagesChatWidgetContainer = function (props) {
     var messages = props.messages;
-    var state = require$$1.useMemo(function () {
+    var state = React.useMemo(function () {
         return createStateFromMessages(messages);
     }, [messages]);
     return require$$0.jsx(StaticChatWidgetContainer, { state: state, mode: props.mode, config: props.config, disableAutoScroll: props.disableAutoScroll, preview: props.preview });
@@ -35720,7 +35774,7 @@ var ChatWidgetPreview = function (props) {
     var _a;
     var mode = (_a = props.mode) !== null && _a !== void 0 ? _a : "preview";
     // Memoize preview message conversion to avoid recalculating on every render
-    var previewChatDetails = require$$1.useMemo(function () {
+    var previewChatDetails = React.useMemo(function () {
         return convertPreviewMessagesToChatDetails(props.previewMessages || [], props.config);
     }, [props.previewMessages, props.config]);
     return (require$$0.jsx(StaticMessagesChatWidgetContainer, { messages: previewChatDetails, mode: mode, config: props.config, disableAutoScroll: props.disableAutoScroll, preview: true }));
@@ -35731,11 +35785,11 @@ var ChatWidgetPreview = function (props) {
 var ChatWidgetConnected = function (props) {
     var _a;
     var mode = (_a = props.mode) !== null && _a !== void 0 ? _a : "normal";
-    var _b = require$$1.useState(props.config), rawConfig = _b[0], setRawConfig = _b[1];
-    var _c = require$$1.useState(!!props.getConfig), configLoading = _c[0], setConfigLoading = _c[1];
-    var _d = require$$1.useState(), configError = _d[0], setConfigError = _d[1];
+    var _b = React.useState(props.config), rawConfig = _b[0], setRawConfig = _b[1];
+    var _c = React.useState(!!props.getConfig), configLoading = _c[0], setConfigLoading = _c[1];
+    var _d = React.useState(), configError = _d[0], setConfigError = _d[1];
     // Load config from callback if provided
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         var cancelled = false;
         if (props.getConfig) {
             setConfigLoading(true);
@@ -35769,12 +35823,12 @@ var ChatWidgetConnected = function (props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.getConfig, props.config]);
     var connection = useConnectionInfo(rawConfig);
-    var config = require$$1.useMemo(function () {
+    var config = React.useMemo(function () {
         var _a;
         return (__assign(__assign({}, rawConfig), { connection: connection, assetUrl: (_a = connection === null || connection === void 0 ? void 0 : connection.serverUrl) !== null && _a !== void 0 ? _a : defaultServerUrl, env: rawConfig }));
     }, [connection, rawConfig]);
     var token = reactRedux.useSelector(function (state) { return state.connection.token; });
-    var options = require$$1.useMemo(function () {
+    var options = React.useMemo(function () {
         var configurableMessages = getConfigurableMessages();
         if ((rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.configurableMessages) &&
             Array.isArray(rawConfig.configurableMessages.items) &&
@@ -35824,7 +35878,7 @@ var ChatWidgetUI = function (props) {
     // From Redux
     var chatState = reactRedux.useSelector(function (state) { return state; });
     // Refresh modalReference
-    var modalRef = require$$1.useRef({});
+    var modalRef = React.useRef({});
     var mode = (_a = props.mode) !== null && _a !== void 0 ? _a : "normal";
     var dockedMode = mode === "docked";
     var staticMode = mode === "static";
@@ -35855,24 +35909,24 @@ var ChatWidgetUI = function (props) {
     var autoOpenOnWidthMatch = !isNaN(autoOpenOnWidthValue) && window.innerWidth >= autoOpenOnWidthValue;
     // When autoOpenOnWidth is configured, use width check instead of persisted visible state
     // to prevent greeting requests on viewports below the threshold
-    var _14 = require$$1.useState((!canMinimize && !canCancel) ||
+    var _14 = React.useState((!canMinimize && !canCancel) ||
         // !!get("visible") ||
         (!isNaN(autoOpenOnWidthValue) ? autoOpenOnWidthMatch : chatState.visuals.visible)), visible = _14[0], setVisibleState = _14[1];
-    var _15 = require$$1.useState(false); _15[0]; var setTypingState = _15[1]; // false initially - state kept for potential external observers
+    var _15 = React.useState(false); _15[0]; var setTypingState = _15[1]; // false initially - state kept for potential external observers
     // Ref to track typing state for use in timeout callbacks
-    var typingRef = require$$1.useRef(false);
+    var typingRef = React.useRef(false);
     // Timeout ref for debouncing "stop typing" events
-    var stopTypingTimeoutRef = require$$1.useRef(null);
+    var stopTypingTimeoutRef = React.useRef(null);
     // Track whether autoOpenOnWidth has already fired so it doesn't re-open after user closes
-    var autoOpenFiredRef = require$$1.useRef(autoOpenOnWidthMatch);
-    var chatServer = require$$1.useContext(ChatServerContext);
+    var autoOpenFiredRef = React.useRef(autoOpenOnWidthMatch);
+    var chatServer = React.useContext(ChatServerContext);
     var patternsConfig = (_p = (_o = props.config) === null || _o === void 0 ? void 0 : _o.autoOpenOnPattern) === null || _p === void 0 ? void 0 : _p.patterns;
     var currentUrl = window.location.href;
     var patternExist = patternsConfig && patternsConfig.length > 0;
     var patternMatches = patternsConfig === null || patternsConfig === void 0 ? void 0 : patternsConfig.some(function (pattern) { return currentUrl.includes(pattern); });
     var configWidth = (_r = (_q = props.config) === null || _q === void 0 ? void 0 : _q.autoOpenOnPattern) === null || _r === void 0 ? void 0 : _r.minimumWidth;
     var currentWidth = window.innerWidth;
-    var setVisible = require$$1.useCallback(function (newVisible) {
+    var setVisible = React.useCallback(function (newVisible) {
         if (staticMode || previewMode) {
             return;
         }
@@ -35882,7 +35936,7 @@ var ChatWidgetUI = function (props) {
             visible: newVisible,
         }));
     }, [innerDispatch, staticMode, previewMode]);
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         var _a, _b;
         var handleKeyDown = function (event) {
             var body = document.getElementsByTagName("body")[0];
@@ -35905,8 +35959,8 @@ var ChatWidgetUI = function (props) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    var _16 = require$$1.useState(!document.hidden), isTabVisible = _16[0], setIsTabVisible = _16[1];
-    require$$1.useEffect(function () {
+    var _16 = React.useState(!document.hidden), isTabVisible = _16[0], setIsTabVisible = _16[1];
+    React.useEffect(function () {
         var handleVisibilityChange = function () {
             setIsTabVisible(!document.hidden);
         };
@@ -35915,7 +35969,7 @@ var ChatWidgetUI = function (props) {
             document.removeEventListener("visibilitychange", handleVisibilityChange);
         };
     }, []);
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         // Too early?
         if (!chatServer) {
             log("Tab visibility changed but no chatServer yet");
@@ -35931,7 +35985,7 @@ var ChatWidgetUI = function (props) {
         }
     }, [chatServer, innerDispatch, isTabVisible]);
     // Handle beforeunload to notify router when user is leaving
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         if (!chatServer) {
             return undefined;
         }
@@ -35946,7 +36000,7 @@ var ChatWidgetUI = function (props) {
             window.removeEventListener("beforeunload", handleBeforeUnload);
         };
     }, [chatServer]);
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         // For reopen widget after move on same window
         // if (get("opened")) {
         //     setVisible(true);
@@ -35977,7 +36031,7 @@ var ChatWidgetUI = function (props) {
         mode,
         autoOpenOnWidthMatch,
     ]);
-    var stopTyping = require$$1.useCallback(function () {
+    var stopTyping = React.useCallback(function () {
         if (!typingRef.current)
             return;
         // Clear the timeout if it exists
@@ -35989,7 +36043,7 @@ var ChatWidgetUI = function (props) {
         setTypingState(false);
         typingRef.current = false;
     }, [dispatch]);
-    var handleOnChange = require$$1.useCallback(function () {
+    var handleOnChange = React.useCallback(function () {
         // Send "typing" event only on first keystroke
         if (!typingRef.current) {
             dispatch(sendTyping(true));
@@ -36123,9 +36177,9 @@ var ChatWidgetUI = function (props) {
         }));
     }
     // Action Bar state and handlers
-    var _17 = require$$1.useState(false), formModalOpen = _17[0], setFormModalOpen = _17[1];
-    var _18 = require$$1.useState(null), activeFormConfig = _18[0], setActiveFormConfig = _18[1];
-    var handleFormButtonClick = require$$1.useCallback(function (formButton) {
+    var _17 = React.useState(false), formModalOpen = _17[0], setFormModalOpen = _17[1];
+    var _18 = React.useState(null), activeFormConfig = _18[0], setActiveFormConfig = _18[1];
+    var handleFormButtonClick = React.useCallback(function (formButton) {
         // If form-widget is configured, use its openForm API
         // The form-widget script should already be pre-loaded
         var options = formButton.preselectChipLabel
@@ -36140,7 +36194,7 @@ var ChatWidgetUI = function (props) {
             }
         });
     }, []);
-    var handleFormModalClose = require$$1.useCallback(function () {
+    var handleFormModalClose = React.useCallback(function () {
         setFormModalOpen(false);
         setActiveFormConfig(null);
     }, []);
@@ -36195,21 +36249,21 @@ var ChatWidgetUI = function (props) {
     // Disable greeting in preview mode
     useGreeting(!isOffline && !props.preChatFormEnabled && visible && !previewMode);
     var connectionStatus = chatState.connection.connectionStatus;
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         if (onConnectionStatusChange) {
             onConnectionStatusChange(connectionStatus);
         }
     }, [connectionStatus, onConnectionStatusChange]);
     useExternalScript((_t = props.config) === null || _t === void 0 ? void 0 : _t.middlewareUrl);
     // Pre-load form-widget script if formWidgetKey is provided
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         if (config === null || config === void 0 ? void 0 : config.formWidgetKey) {
             preloadFormWidgetScript(config.formWidgetKey);
         }
     }, [config === null || config === void 0 ? void 0 : config.formWidgetKey]);
     // Set body attribute when actionBar is enabled (used by CSS to hide form-widget side button on mobile)
     // Uses reference counting to handle multiple widget instances
-    require$$1.useEffect(function () {
+    React.useEffect(function () {
         if (actionBarEnabled) {
             // Increment reference count
             var currentCount = parseInt(document.body.getAttribute("data-xapp-action-bar-count") || "0", 10);
@@ -36912,7 +36966,7 @@ var ChatWidgetConnectedContainer = function (props) {
     var _a, _b, _c, _d, _e, _f;
     var messageMiddleware = useStandardMiddleware();
     var connection = useServerConfig(props.config);
-    var chatStore = require$$1.useMemo(function () {
+    var chatStore = React.useMemo(function () {
         var _a, _b, _c, _d, _e;
         return createChatStore({
             connection: connection,
@@ -36944,7 +36998,7 @@ var ChatWidgetContainer = function (props) {
     return require$$0.jsx(ChatWidgetConnectedContainer, __assign({}, props));
 };
 
-exports.React = require$$1;
+exports.React = React;
 exports.ActionBar = ActionBar;
 exports.ActionBarPreview = ActionBarPreview;
 exports.ActionButton = ActionButton;