@xapp/chat-widget 1.79.1 → 1.81.0

package/dist/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var React$1 = require('react');
+var require$$1 = require('react');
+var require$$0 = require('react/jsx-runtime');
 var reactRedux = require('react-redux');
 
 var ActionButton = function (_a) {
@@ -11,45 +12,9 @@ var ActionButton = function (_a) {
             onClick(label);
         }
     }
-    return (React$1.createElement("button", { disabled: disable, type: type, className: "action-button ".concat(addClass), onClick: handleClick }, label));
+    return (require$$0.jsx("button", { disabled: disable, type: type, className: "action-button ".concat(addClass), onClick: handleClick, children: label }));
 };
 
-var defaultServerUrl = "";
-var defaultWidgetButtonWidth = "48";
-var defaultMobileWidgetButtonWidth = "30";
-var defaultNonMobileScreenWidth = "400";
-var scheduleWidgetUrl = "ScheduleButton";
-var ChatConfigContext = React$1.createContext(null);
-function useWidgetEnv() {
-    var ctx = React$1.useContext(ChatConfigContext);
-    return ctx === null || ctx === void 0 ? void 0 : ctx.env;
-}
-function getServerConfig(env) {
-    if (env === null || env === void 0 ? void 0 : env.connection) {
-        return env.connection;
-    }
-    return {
-        serverUrl: env === null || env === void 0 ? void 0 : env.serverUrl,
-        accountKey: env === null || env === void 0 ? void 0 : env.accountKey,
-        type: (env === null || env === void 0 ? void 0 : env.direct) ? "direct" : "websocket",
-    };
-}
-function useServerConfig(env, nonce) {
-    var connection = getServerConfig(env);
-    var accountKey = connection.accountKey, serverUrl = connection.serverUrl, type = connection.type, timeout = connection.timeout;
-    return React$1.useMemo(function () { return ({
-        accountKey: accountKey,
-        serverUrl: serverUrl,
-        timeout: timeout,
-        type: type,
-        nonce: nonce,
-    }); }, [accountKey, serverUrl, timeout, type, nonce]);
-}
-function useConnectionInfo(env) {
-    var nonce = reactRedux.useSelector(function (state) { return state.connection.nonce; });
-    return useServerConfig(env, nonce);
-}
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -204,14 +169,14 @@ function isAgent(nick) {
 }
 
 function useIsMounted() {
-    var ref = React$1.useRef(false);
-    React$1.useEffect(function () {
+    var ref = require$$1.useRef(false);
+    require$$1.useEffect(function () {
         ref.current = true;
         return function () {
             ref.current = false;
         };
     }, []);
-    return React$1.useCallback(function () { return ref.current; }, []);
+    return require$$1.useCallback(function () { return ref.current; }, []);
 }
 
 var RetryOptions = /** @class */ (function () {
@@ -313,20 +278,39 @@ if (storedLogLevel) {
     window.xaLogLevel = storedLogLevel;
 }
 // Override the setter to persist to localStorage
-Object.defineProperty(window, 'xaLogLevel', {
-    get: function () {
-        return this._xaLogLevel;
-    },
-    set: function (value) {
-        this._xaLogLevel = value;
-        if (value) {
-            localStorage.setItem(STORAGE_KEY, value);
+if (!Object.getOwnPropertyDescriptor(window, "xaLogLevel")) {
+    Object.defineProperty(window, "xaLogLevel", {
+        get: function () {
+            return this._xaLogLevel;
+        },
+        set: function (value) {
+            this._xaLogLevel = value;
+            if (value) {
+                localStorage.setItem(STORAGE_KEY, value);
+            }
+            else {
+                localStorage.removeItem(STORAGE_KEY);
+            }
+        },
+    });
+}
+// Create a namespaced API on window.xapp for easier access
+if (typeof window !== 'undefined') {
+    window.xapp = window.xapp || {};
+    window.xapp.setLogLevel = function (level) {
+        if (level === 'off') {
+            window.xaLogLevel = null;
+            console.log('Log level set to: off (logs disabled)');
         }
         else {
-            localStorage.removeItem(STORAGE_KEY);
+            window.xaLogLevel = level;
+            console.log("Log level set to: ".concat(level));
         }
-    }
-});
+    };
+    window.xapp.getLogLevel = function () {
+        return window.xaLogLevel || 'off';
+    };
+}
 // Returns current timestamp
 function getCurrentDateString() {
     return (new Date()).toISOString() + " ::";
@@ -359,12 +343,49 @@ var logOnce = function (key) {
     }
 };
 
+var defaultServerUrl = "";
+var defaultWidgetButtonWidth = "48";
+var defaultMobileWidgetButtonWidth = "30";
+var defaultNonMobileScreenWidth = "400";
+var scheduleWidgetUrl = "ScheduleButton";
+var ChatConfigContext = require$$1.createContext(null);
+function useWidgetEnv() {
+    var ctx = require$$1.useContext(ChatConfigContext);
+    return ctx === null || ctx === void 0 ? void 0 : ctx.env;
+}
+function getServerConfig(env) {
+    if (env === null || env === void 0 ? void 0 : env.connection) {
+        return env.connection;
+    }
+    return {
+        serverUrl: env === null || env === void 0 ? void 0 : env.serverUrl,
+        accountKey: env === null || env === void 0 ? void 0 : env.accountKey,
+        type: (env === null || env === void 0 ? void 0 : env.direct) ? "direct" : "websocket",
+    };
+}
+function useServerConfig(env, nonce) {
+    var connection = getServerConfig(env);
+    var accountKey = connection.accountKey, serverUrl = connection.serverUrl, type = connection.type, timeout = connection.timeout;
+    return require$$1.useMemo(function () { return ({
+        accountKey: accountKey,
+        serverUrl: serverUrl,
+        timeout: timeout,
+        type: type,
+        nonce: nonce,
+    }); }, [accountKey, serverUrl, timeout, type, nonce]);
+}
+function useConnectionInfo(env) {
+    var nonce = reactRedux.useSelector(function (state) { return state.connection.nonce; });
+    log("nonce from Redux: ".concat(nonce));
+    return useServerConfig(env, nonce);
+}
+
 var Avatar = function (props) {
     var _a, _b;
     var style = {};
     var child;
     var entity = props.entity;
-    var chatConfig = React$1.useContext(ChatConfigContext);
+    var chatConfig = require$$1.useContext(ChatConfigContext);
     var avatarPath = entity === null || entity === void 0 ? void 0 : entity.avatarPath;
     if (!avatarPath) {
         var avatarImage = GenerateAvatar({
@@ -383,22 +404,21 @@ var Avatar = function (props) {
         child = getVisitorSvg();
     }
     var hasImage = !!style.backgroundImage || !!child;
-    return (React$1.createElement("div", { className: "avatar ".concat(agentAva ? "avatar--agent" : "avatar--visitor", " ").concat(!hasImage ? "avatar--empty" : ""), style: style, title: entity ? entity.display_name : "Agent" }, child));
+    return (require$$0.jsx("div", { className: "avatar ".concat(agentAva ? "avatar--agent" : "avatar--visitor", " ").concat(!hasImage ? "avatar--empty" : ""), style: style, title: entity ? entity.display_name : "Agent", children: child }));
 };
 /**
  * Generates an SVG based on the
  * @returns
  */
 function getVisitorSvg() {
-    return (React$1.createElement("svg", { width: "16", height: "19", viewBox: "0 0 16 19", style: { margin: "0 auto", display: "block" } },
-        React$1.createElement("path", { d: "M11.5 5c0-1.933-1.567-3.5-3.5-3.5S4.5 3.067 4.5 5 6.067 8.5 8 8.5s3.5-1.567 3.5-3.5zM3 5c0-2.76 2.24-5 5-5s5 2.24 5 5-2.24 5-5 5-5-2.24-5-5zM1.955 17.294c.21-.642.504-1.285.898-1.88C3.963 13.74 5.615 12.75 8 12.75c2.385 0 4.038.99 5.147 2.664.394.595.69 1.238.898 1.88.124.382.19.672.214.822.063.41.447.69.856.625.41-.063.69-.447.625-.856-.034-.225-.118-.59-.27-1.053-.247-.763-.598-1.527-1.073-2.244C13.024 12.51 10.917 11.25 8 11.25c-2.916 0-5.024 1.26-6.397 3.336-.475.717-.826 1.48-1.074 2.245-.152.463-.236.83-.27 1.054-.065.41.215.793.624.857.41.065.793-.215.857-.624.025-.15.09-.44.215-.822z", fill: "#FFF", fillRule: "evenodd" })));
+    return (require$$0.jsx("svg", { width: "16", height: "19", viewBox: "0 0 16 19", style: { margin: "0 auto", display: "block" }, children: require$$0.jsx("path", { d: "M11.5 5c0-1.933-1.567-3.5-3.5-3.5S4.5 3.067 4.5 5 6.067 8.5 8 8.5s3.5-1.567 3.5-3.5zM3 5c0-2.76 2.24-5 5-5s5 2.24 5 5-2.24 5-5 5-5-2.24-5-5zM1.955 17.294c.21-.642.504-1.285.898-1.88C3.963 13.74 5.615 12.75 8 12.75c2.385 0 4.038.99 5.147 2.664.394.595.69 1.238.898 1.88.124.382.19.672.214.822.063.41.447.69.856.625.41-.063.69-.447.625-.856-.034-.225-.118-.59-.27-1.053-.247-.763-.598-1.527-1.073-2.244C13.024 12.51 10.917 11.25 8 11.25c-2.916 0-5.024 1.26-6.397 3.336-.475.717-.826 1.48-1.074 2.245-.152.463-.236.83-.27 1.054-.065.41.215.793.624.857.41.065.793-.215.857-.624.025-.15.09-.44.215-.822z", fill: "#FFF", fillRule: "evenodd" }) }));
 }
 function GenerateAvatar(props) {
     var initials = (props === null || props === void 0 ? void 0 : props.initials) || "?";
     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 = React$1.useMemo(function () {
+    var image = require$$1.useMemo(function () {
         return generateImage(initials, size, backgroundColor, textColor);
     }, [initials, size, backgroundColor, textColor]);
     return image;
@@ -444,16 +464,16 @@ 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 = React$1.useCallback(function () {
+    var handleOpenUrl = require$$1.useCallback(function () {
         if (onOpen) {
             onOpen(url, chatDispatch, visuals);
         }
     }, [url, onOpen]);
     if (url) {
-        return (React$1.createElement("div", { onClick: handleOpenUrl, className: className }, props.children));
+        return (require$$0.jsx("div", { onClick: handleOpenUrl, className: className, children: props.children }));
     }
     else {
-        return (React$1.createElement("div", { onClick: props.onClick, className: className }, props.children));
+        return (require$$0.jsx("div", { onClick: props.onClick, className: className, children: props.children }));
     }
 };
 
@@ -461,7 +481,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 = React$1.useCallback(function () {
+    var handleClick = require$$1.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
@@ -474,17 +494,17 @@ var ActionItem = function (props) {
         }
     }, [item, onExecute, onButtonClick]);
     var className = "xappw-chat-action-item ".concat(singleButton ? "xappw-chat-action-item--action" : "", " ").concat(props.className);
-    return (React$1.createElement(OptionalLink, { className: className, url: getItemUrl(item), onClick: handleClick, onOpen: props.onOpenUrl }, props.children));
+    return (require$$0.jsx(OptionalLink, { className: className, url: getItemUrl(item), onClick: handleClick, onOpen: props.onOpenUrl, children: props.children }));
 };
 
 var ChatImage = function (props) {
     var cleanUrl = props.imageUrl.replace(/'/g, "%27");
-    var content = React$1.createElement("div", { className: "chat-card-img__content", style: { backgroundImage: "url(".concat(cleanUrl, ")") } });
+    var content = (require$$0.jsx("div", { className: "chat-card-img__content", style: { backgroundImage: "url(".concat(cleanUrl, ")") } }));
     if (!props.imageActionUrl) {
-        return (React$1.createElement("div", { className: "chat-card-img" }, content));
+        return require$$0.jsx("div", { className: "chat-card-img", children: content });
     }
     else {
-        return (React$1.createElement("a", { href: props.imageActionUrl, "aria-label": "read more", target: "_blank", rel: "noopener noreferrer", className: "chat-card-img" }, content));
+        return (require$$0.jsx("a", { href: props.imageActionUrl, "aria-label": "read more", target: "_blank", rel: "noopener noreferrer", className: "chat-card-img", children: content }));
     }
 };
 
@@ -495,63 +515,53 @@ var ActionItemImage = function (props) {
     var itemUrl = getItemUrl(item);
     if (item.imageUrl) {
         var imageActionUrl = !singleButton ? item.imageActionUrl : null;
-        return (React$1.createElement("div", { className: props.className },
-            React$1.createElement(ChatImage, { imageUrl: item.imageUrl, imageActionUrl: !itemUrl && imageActionUrl })));
+        return (require$$0.jsx("div", { className: props.className, children: require$$0.jsx(ChatImage, { imageUrl: item.imageUrl, imageActionUrl: !itemUrl && imageActionUrl }) }));
     }
     else if (props.emptyImageVisible) {
-        return (React$1.createElement("div", { className: props.className }));
+        return require$$0.jsx("div", { className: props.className });
     }
-    return React$1.createElement(React$1.Fragment, null);
+    return require$$0.jsx(require$$0.Fragment, {});
 };
 
 var ChatActionButtonInner = function (props) {
     var button = props.button, onClick = props.onClick;
-    var handleButton = React$1.useCallback(function () {
+    var handleButton = require$$1.useCallback(function () {
         onClick(button);
     }, [button, onClick]);
-    return (React$1.createElement(ActionButton, { onClick: handleButton, addClass: "button-card", label: button.label }));
+    return require$$0.jsx(ActionButton, { onClick: handleButton, addClass: "button-card", label: button.label });
 };
-var ChatActionButton = React$1.memo(ChatActionButtonInner);
+var ChatActionButton = require$$1.memo(ChatActionButtonInner);
 
 var ChatActionButtonsInner = function (props) {
-    return (React$1.createElement("div", { className: "buttons-container " + (props.className || "") }, props.buttons.map(function (button, i) {
-        return React$1.createElement(ChatActionButton, { button: button, onClick: props.onClick, key: i });
-    })));
+    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 = React$1.memo(ChatActionButtonsInner);
+var ChatActionButtons = require$$1.memo(ChatActionButtonsInner);
 
 var CarouselItem = function (props) {
     var _a;
     var item = props.item;
-    return (React$1.createElement(ActionItem, { className: "chat-list-item-container", item: item, onButtonClick: props.onButtonClick, onExecute: props.onExecute, onOpenUrl: props.onOpenUrl },
-        React$1.createElement("div", { className: "chat-list-item" },
-            React$1.createElement(ActionItemImage, { item: item, className: "chat-list-item__img", emptyImageVisible: props.emptyImageVisible }),
-            item.title && React$1.createElement("div", { className: "chat-list-item__title" },
-                React$1.createElement("span", null, item.title)),
-            item.subTitle && React$1.createElement("div", { className: "chat-list-item__subtitle" },
-                React$1.createElement("span", null, item.subTitle)),
-            !!((_a = item.buttons) === null || _a === void 0 ? void 0 : _a.length) && React$1.createElement(ChatActionButtons, { className: "chat-list-item__actions", buttons: item.buttons, onClick: props.onButtonClick }))));
+    return (require$$0.jsx(ActionItem, { className: "chat-list-item-container", item: item, onButtonClick: props.onButtonClick, onExecute: props.onExecute, onOpenUrl: props.onOpenUrl, children: require$$0.jsxs("div", { className: "chat-list-item", children: [require$$0.jsx(ActionItemImage, { item: item, className: "chat-list-item__img", emptyImageVisible: props.emptyImageVisible }), item.title && (require$$0.jsx("div", { className: "chat-list-item__title", children: require$$0.jsx("span", { children: item.title }) })), item.subTitle && (require$$0.jsx("div", { className: "chat-list-item__subtitle", children: require$$0.jsx("span", { children: item.subTitle }) })), !!((_a = item.buttons) === null || _a === void 0 ? void 0 : _a.length) && (require$$0.jsx(ChatActionButtons, { className: "chat-list-item__actions", buttons: item.buttons, onClick: props.onButtonClick }))] }) }));
 };
 
 function getLeftArrowSvg() {
-    return (React$1.createElement("svg", { viewBox: "-5 -18 10 36" },
-        React$1.createElement("path", { d: "M 2.5 -15 L -2.5 0 L 2.5 15", stroke: "currentColor", strokeLinecap: "square", strokeWidth: "4px", fill: "none" })));
+    return (require$$0.jsx("svg", { viewBox: "-5 -18 10 36", children: require$$0.jsx("path", { d: "M 2.5 -15 L -2.5 0 L 2.5 15", stroke: "currentColor", strokeLinecap: "square", strokeWidth: "4px", fill: "none" }) }));
 }
 var ChevronLeft = function (props) {
-    return (React$1.createElement("button", { onClick: props.onClick, className: "xa-chevron" }, getLeftArrowSvg()));
+    return (require$$0.jsx("button", { onClick: props.onClick, className: "xa-chevron", children: getLeftArrowSvg() }));
 };
 
 function getRightArrowSvg() {
-    return (React$1.createElement("svg", { viewBox: "-5 -18 10 36" },
-        React$1.createElement("path", { d: "M -2.5 -15 L 2.5 0 L -2.5 15", stroke: "currentColor", strokeLinecap: "square", strokeWidth: "4px", fill: "none" })));
+    return (require$$0.jsx("svg", { viewBox: "-5 -18 10 36", children: require$$0.jsx("path", { d: "M -2.5 -15 L 2.5 0 L -2.5 15", stroke: "currentColor", strokeLinecap: "square", strokeWidth: "4px", fill: "none" }) }));
 }
 var ChevronRight = function (props) {
-    return (React$1.createElement("button", { onClick: props.onClick, className: "xa-chevron" }, getRightArrowSvg()));
+    return (require$$0.jsx("button", { onClick: props.onClick, className: "xa-chevron", children: getRightArrowSvg() }));
 };
 
 var Carousel = function (props) {
-    var listRef = React$1.useRef(null);
-    var _a = React$1.useState(0), visibleIndex = _a[0], setSetVisibleIndex = _a[1];
+    var listRef = require$$1.useRef(null);
+    var _a = require$$1.useState(0), visibleIndex = _a[0], setSetVisibleIndex = _a[1];
     function scrollMe(direction) {
         var _a, _b;
         var scrollArea = listRef.current;
@@ -585,21 +595,15 @@ var Carousel = function (props) {
     var hasOnlyOneItem = props.list.items.length === 1;
     var hasImage = props.list.items.some(function (item) { return item.imageUrl; });
     var listItems = props.list.items.map(function (item, itemIndex) {
-        return (React$1.createElement("div", { className: "xappw-carousel-items__item", key: "item-key-".concat(itemIndex) },
-            React$1.createElement(CarouselItem, { item: item, emptyImageVisible: hasImage, onExecute: props.onExecute, onButtonClick: props.onButtonClick, onOpenUrl: props.onOpenUrl })));
+        return (require$$0.jsx("div", { className: "xappw-carousel-items__item", children: require$$0.jsx(CarouselItem, { item: item, emptyImageVisible: hasImage, onExecute: props.onExecute, onButtonClick: props.onButtonClick, onOpenUrl: props.onOpenUrl }) }, "item-key-".concat(itemIndex)));
     });
-    return (React$1.createElement("div", { className: "xappw-carousel" },
-        !hasOnlyOneItem && (React$1.createElement("div", { className: "xappw-carousel__prev" },
-            React$1.createElement(ChevronLeft, { onClick: function () { return scrollMe(-1); } }))),
-        React$1.createElement("div", { ref: listRef, className: "xappw-carousel-items ".concat(hasOnlyOneItem ? "xappw-carousel-items--one-item" : "") }, listItems),
-        !hasOnlyOneItem && (React$1.createElement("div", { className: "xappw-carousel__next" },
-            React$1.createElement(ChevronRight, { onClick: function () { return scrollMe(1); } })))));
+    return (require$$0.jsxs("div", { className: "xappw-carousel", children: [!hasOnlyOneItem && (require$$0.jsx("div", { className: "xappw-carousel__prev", children: require$$0.jsx(ChevronLeft, { onClick: function () { return scrollMe(-1); } }) })), require$$0.jsx("div", { ref: listRef, className: "xappw-carousel-items ".concat(hasOnlyOneItem ? "xappw-carousel-items--one-item" : ""), children: listItems }), !hasOnlyOneItem && (require$$0.jsx("div", { className: "xappw-carousel__next", children: require$$0.jsx(ChevronRight, { onClick: function () { return scrollMe(1); } }) }))] }));
 };
 
 function useDimensions() {
-    var ref = React$1.useRef(null);
-    var _a = React$1.useState(), dimensions = _a[0], setDimensions = _a[1];
-    React$1.useLayoutEffect(function () {
+    var ref = require$$1.useRef(null);
+    var _a = require$$1.useState(), dimensions = _a[0], setDimensions = _a[1];
+    require$$1.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());
     }, []);
@@ -695,9 +699,7 @@ var CtaBubbleTail = function (props) {
     var _a, _b;
     var _c = useDimensions(), ref = _c[0], rect = _c[1];
     var viewPort = { x: (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0, y: (_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0 };
-    return (React$1.createElement("div", { ref: ref, className: "cta-bubble__tail" },
-        React$1.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 ".concat(viewPort.x, " ").concat(viewPort.y) },
-            React$1.createElement("path", { d: getTailSvgPath$1(props, viewPort), fill: "currentColor" }))));
+    return (require$$0.jsx("div", { ref: ref, className: "cta-bubble__tail", children: require$$0.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 ".concat(viewPort.x, " ").concat(viewPort.y), children: require$$0.jsx("path", { d: getTailSvgPath$1(props, viewPort), fill: "currentColor" }) }) }));
 };
 var CtaBubble = function (props) {
     var _a, _b, _c, _d;
@@ -711,17 +713,12 @@ var CtaBubble = function (props) {
         }
     };
     console.log("Returning CTABubble with message: ", props.children);
-    return (React$1.createElement("div", { ref: ref, style: {
+    return (require$$0.jsxs("div", { ref: ref, style: {
             border: props.borderStyle ? "solid" : "none",
             borderWidth: ((_a = props.borderStyle) === null || _a === void 0 ? void 0 : _a.width) || "0px",
             borderColor: ((_b = props.borderStyle) === null || _b === void 0 ? void 0 : _b.color) || "transparent",
             animation: "".concat(animation, " 1s infinite"),
-        }, className: "cta-bubble", onClick: props.onClick },
-        React$1.createElement(CtaBubbleTail, { width: (_c = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _c !== void 0 ? _c : 0, height: (_d = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _d !== void 0 ? _d : 0, direction: 60, angle: 45, length: 16 }),
-        React$1.createElement("div", { className: "cta-bubble__content" }, props.children),
-        props.dismissible && (React$1.createElement("button", { className: "cta-bubble__dismiss", onClick: handleDismiss, "aria-label": "Dismiss" },
-            React$1.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                React$1.createElement("path", { d: "M11 1L1 11M1 1L11 11", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }))))));
+        }, className: "cta-bubble", onClick: props.onClick, children: [require$$0.jsx(CtaBubbleTail, { width: (_c = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _c !== void 0 ? _c : 0, height: (_d = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _d !== void 0 ? _d : 0, direction: 60, angle: 45, length: 16 }), require$$0.jsx("div", { className: "cta-bubble__content", children: props.children }), props.dismissible && (require$$0.jsx("button", { className: "cta-bubble__dismiss", onClick: handleDismiss, "aria-label": "Dismiss", children: require$$0.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: require$$0.jsx("path", { d: "M11 1L1 11M1 1L11 11", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
 };
 
 var CtaBubbleContainer = function (props) {
@@ -739,14 +736,14 @@ var CtaBubbleContainer = function (props) {
         hasChildren: !!children,
         childrenContent: children,
     });
-    var startTime = React$1.useMemo(function () {
+    var startTime = require$$1.useMemo(function () {
         var time = visible ? new Date().valueOf() : undefined;
         log("[CtaBubbleContainer] StartTime calculated: visible=".concat(visible, ", startTime=").concat(time));
         return time;
     }, [visible]);
-    var _a = React$1.useState(false), showBubble = _a[0], setShowBubble = _a[1];
+    var _a = require$$1.useState(false), showBubble = _a[0], setShowBubble = _a[1];
     log("[CtaBubbleContainer] Current state: showBubble=".concat(showBubble));
-    React$1.useEffect(function () {
+    require$$1.useEffect(function () {
         log("[CtaBubbleContainer] useEffect triggered with:", {
             startTime: startTime,
             startTimeExists: !!startTime,
@@ -816,14 +813,14 @@ var CtaBubbleContainer = function (props) {
     // Final render decision
     var shouldRender = visible && showBubble;
     log("[CtaBubbleContainer] Render decision: visible=".concat(visible, ", showBubble=").concat(showBubble, ", shouldRender=").concat(shouldRender));
-    return (React$1.createElement(React$1.Fragment, null, visible && showBubble && (React$1.createElement(CtaBubble, { onClick: onClick, animate: animate, buttonAnimation: buttonAnimation, dismissible: dismissible, onDismiss: handleDismiss }, children))));
+    return (require$$0.jsx(require$$0.Fragment, { children: visible && showBubble && (require$$0.jsx(CtaBubble, { onClick: onClick, animate: animate, buttonAnimation: buttonAnimation, dismissible: dismissible, onDismiss: handleDismiss, children: children })) }));
 };
 
 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 = React$1.useState(defaultWidgetButtonWidth), buttonWidth = _c[0], setButtonWidth = _c[1];
-    var _d = React$1.useState(false), animate = _d[0], setAnimate = _d[1];
+    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 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 () {
@@ -836,7 +833,7 @@ var ChatButton = function (_a) {
         }
     };
     var configToApply = getConfigToApply();
-    React$1.useEffect(function () {
+    require$$1.useEffect(function () {
         var _a;
         var delayTimer;
         var timeoutTimer;
@@ -879,7 +876,7 @@ var ChatButton = function (_a) {
         };
     }, [configToApply, setAnimate, hasInteracted]);
     var animation = animate && !hasInteracted ? (configToApply === null || configToApply === void 0 ? void 0 : configToApply.animation) || "wiggle" : "none";
-    React$1.useEffect(function () {
+    require$$1.useEffect(function () {
         var handleResize = function () {
             var screenWidth = window.innerWidth;
             var newButtonWidth = screenWidth < parseInt(mobileWidth, 10)
@@ -895,23 +892,19 @@ var ChatButton = function (_a) {
     }, [mobileWidth]);
     var maxSvgSize = 22;
     var svgSize = Math.min(maxSvgSize, (+buttonWidth / +defaultWidgetButtonWidth) * maxSvgSize);
-    return (React$1.createElement("button", { "aria-label": "open chat", className: "xapp-chat-button ".concat(addClass || "").trim(), onClick: onClick },
-        React$1.createElement("div", { id: "xapp-widget-button", className: "xapp-chat-button__btn", style: {
-                width: "".concat(buttonWidth, "px"),
-                height: "".concat(buttonWidth, "px"),
-                borderRadius: "".concat(+buttonWidth / 2, "px"),
-                border: borderStyle && borderStyle.width ? "solid" : "none",
-                borderWidth: (borderStyle === null || borderStyle === void 0 ? void 0 : borderStyle.width) || "0px",
-                borderColor: (borderStyle === null || borderStyle === void 0 ? void 0 : borderStyle.color) || "transparent",
-                animation: "".concat(animation, " 1s infinite"),
-            } }, imageUrl ? (
-        // Display image from URL
-        React$1.createElement("img", { src: imageUrl, alt: "Chat Icon" })) : (
-        // Fallback to default SVG
-        React$1.createElement("svg", { width: svgSize, height: svgSize, viewBox: "0 0 22 22" },
-            React$1.createElement("path", { d: "M13 22l-4-6H2c-1.11-.043-2-.935-2-2V2C0 .89.89 0 2 0h18c1.11 0 2 .892 2 2v12c0 1.067-.89 1.957-2 2h-3l-4 6zm3-8h4c-.005.3-.01-12 0-12-.01.004-18 .006-18 0 .005.006 0 12 0 12h8l3 5 3-5z", fill: "#FFF", fillRule: "evenodd" })))),
-        configToApply && configToApply.message && !hasInteracted && (React$1.createElement("div", { className: "xapp-chat-button__cta" },
-            React$1.createElement(CtaBubbleContainer, { timeout: configToApply === null || configToApply === void 0 ? void 0 : configToApply.timeout, delay: configToApply === null || configToApply === void 0 ? void 0 : configToApply.delay, animate: animate, buttonAnimation: animation, dismissible: configToApply === null || configToApply === void 0 ? void 0 : configToApply.dismissible, visible: !visible /** Why is this !visible */, onDismiss: onCtaDismiss }, configToApply === null || configToApply === void 0 ? void 0 : configToApply.message)))));
+    return (require$$0.jsxs("button", { "aria-label": "open chat", className: "xapp-chat-button ".concat(addClass || "").trim(), onClick: onClick, children: [require$$0.jsx("div", { id: "xapp-widget-button", className: "xapp-chat-button__btn", style: {
+                    width: "".concat(buttonWidth, "px"),
+                    height: "".concat(buttonWidth, "px"),
+                    borderRadius: "".concat(+buttonWidth / 2, "px"),
+                    border: borderStyle && borderStyle.width ? "solid" : "none",
+                    borderWidth: (borderStyle === null || borderStyle === void 0 ? void 0 : borderStyle.width) || "0px",
+                    borderColor: (borderStyle === null || borderStyle === void 0 ? void 0 : borderStyle.color) || "transparent",
+                    animation: "".concat(animation, " 1s infinite"),
+                }, children: imageUrl ? (
+                // Display image from URL
+                require$$0.jsx("img", { src: imageUrl, alt: "Chat Icon" })) : (
+                // Fallback to default SVG
+                require$$0.jsx("svg", { width: svgSize, height: svgSize, viewBox: "0 0 22 22", children: require$$0.jsx("path", { d: "M13 22l-4-6H2c-1.11-.043-2-.935-2-2V2C0 .89.89 0 2 0h18c1.11 0 2 .892 2 2v12c0 1.067-.89 1.957-2 2h-3l-4 6zm3-8h4c-.005.3-.01-12 0-12-.01.004-18 .006-18 0 .005.006 0 12 0 12h8l3 5 3-5z", fill: "#FFF", fillRule: "evenodd" }) })) }), configToApply && configToApply.message && !hasInteracted && (require$$0.jsx("div", { className: "xapp-chat-button__cta", children: require$$0.jsx(CtaBubbleContainer, { timeout: configToApply === null || configToApply === void 0 ? void 0 : configToApply.timeout, delay: configToApply === null || configToApply === void 0 ? void 0 : configToApply.delay, animate: animate, buttonAnimation: animation, dismissible: configToApply === null || configToApply === void 0 ? void 0 : configToApply.dismissible, visible: !visible /** Why is this !visible */, onDismiss: onCtaDismiss, children: configToApply === null || configToApply === void 0 ? void 0 : configToApply.message }) }))] }));
 };
 
 var ChatCard = function (props) {
@@ -921,40 +914,32 @@ var ChatCard = function (props) {
     var image;
     var content;
     if (card.imageUrl) {
-        image = React$1.createElement("div", { className: "chat-card-container__img" },
-            React$1.createElement(ChatImage, { imageUrl: card.imageUrl, imageActionUrl: card.imageActionUrl }));
+        image = (require$$0.jsx("div", { className: "chat-card-container__img", children: require$$0.jsx(ChatImage, { imageUrl: card.imageUrl, imageActionUrl: card.imageActionUrl }) }));
     }
     if (card.title) {
-        title =
-            React$1.createElement("div", { className: "chat-card-title" },
-                React$1.createElement("span", null, card.title));
+        title = (require$$0.jsx("div", { className: "chat-card-title", children: require$$0.jsx("span", { children: card.title }) }));
     }
     if (card.content) {
-        content =
-            React$1.createElement("div", { className: "chat-card-sub-title" },
-                React$1.createElement("span", null, card.content));
-    }
-    return (React$1.createElement("div", { className: "chat-card-container" },
-        image,
-        title,
-        content,
-        !!((_a = card.buttons) === null || _a === void 0 ? void 0 : _a.length) && React$1.createElement(ChatActionButtons, { buttons: card.buttons, onClick: props.onButtonClick })));
+        content = (require$$0.jsx("div", { className: "chat-card-sub-title", children: require$$0.jsx("span", { children: card.content }) }));
+    }
+    return (require$$0.jsxs("div", { className: "chat-card-container", children: [image, title, content, !!((_a = card.buttons) === null || _a === void 0 ? void 0 : _a.length) && (require$$0.jsx(ChatActionButtons, { buttons: card.buttons, onClick: props.onButtonClick }))] }));
 };
 
 var ChatChip = function (props) {
     var option = props.option;
-    var className = option.actionUrl ? "chat-chip chat-chip-link" : "chat-chip";
-    return (React$1.createElement("div", { onClick: function () { return props === null || props === void 0 ? void 0 : props.onClick(option); }, className: className },
-        React$1.createElement("span", null, typeof option === "object" ? option.label : option)));
+    var className = option.actionUrl
+        ? "chat-chip chat-chip-link"
+        : "chat-chip";
+    return (require$$0.jsx("div", { onClick: function () { return props === null || props === void 0 ? void 0 : props.onClick(option); }, className: className, children: require$$0.jsx("span", { children: typeof option === "object" ? option.label : option }) }));
 };
 
 /**
  * Render option list. We just follow the order.
  */
 var ChatChips = function (props) {
-    return (React$1.createElement("div", { className: "chat-chips" }, props.options.map(function (option, i) {
-        return React$1.createElement(ChatChip, { key: i, onClick: props.onOptionClick, option: option });
-    })));
+    return (require$$0.jsx("div", { className: "chat-chips", children: props.options.map(function (option, i) {
+            return require$$0.jsx(ChatChip, { onClick: props.onOptionClick, option: option }, i);
+        }) }));
 };
 
 var defaultBehavior = {
@@ -1073,7 +1058,7 @@ function execute(url, dispatch, visuals, behavior) {
 }
 function useOpenUrlCallback() {
     var env = useWidgetEnv();
-    return React$1.useCallback(function (url, dispatch, visuals, behavior) {
+    return require$$1.useCallback(function (url, dispatch, visuals, behavior) {
         if (!behavior) {
             behavior = (env === null || env === void 0 ? void 0 : env.urls) ? resolveUrlPolicy(url, env.urls) : defaultBehavior;
         }
@@ -1271,6 +1256,30 @@ function reset() {
     };
 }
 
+function displayWsButton(params) {
+    return {
+        type: "ws_button_display",
+        detail: {
+            id: params.id,
+            text: params.text,
+            pressBehavior: params.pressBehavior,
+            isPressed: params.isPressed,
+            isDismissing: params.isDismissing,
+            timestamp: +new Date()
+        }
+    };
+}
+
+function dismissWsButton(id) {
+    return {
+        type: "ws_button_dismiss",
+        detail: {
+            id: id,
+            timestamp: +new Date()
+        }
+    };
+}
+
 var LogChat = /** @class */ (function () {
     function LogChat(inner) {
         this.inner = inner;
@@ -1334,6 +1343,17 @@ var LogChat = /** @class */ (function () {
         log("CLIENT: wakeup:");
         this.inner.wakeup();
     };
+    LogChat.prototype.sendButtonPressed = function (buttonId) {
+        return __awaiter$1(this, void 0, void 0, function () {
+            return __generator$1(this, function (_a) {
+                log("CLIENT: sendButtonPressed: ".concat(buttonId));
+                if (this.inner.sendButtonPressed) {
+                    return [2 /*return*/, this.inner.sendButtonPressed(buttonId)];
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
     return LogChat;
 }());
 
@@ -1343,13 +1363,12 @@ function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
-var React = React$1;
+var jsxRuntime = require$$0;
+var react = require$$1;
 
 var IconButton = function (props) {
     var Icon = props.icon;
-    return (React.createElement("div", { tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "xapp-search-icon-button ".concat(props.className || ""), onClick: props.onClick },
-        React.createElement("div", { className: "xapp-search-icon-button__content" },
-            React.createElement(Icon, null))));
+    return (jsxRuntime.jsx("div", { tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "xapp-search-icon-button ".concat(props.className || ""), onClick: props.onClick, children: jsxRuntime.jsx("div", { className: "xapp-search-icon-button__content", children: jsxRuntime.jsx(Icon, {}) }) }));
 };
 
 // compile time full switch-case verification
@@ -1359,17 +1378,17 @@ function throwBadKind(x) {
 
 var RichTextBoldSpan = function (props) {
     var format = props.format, text = props.text;
-    return (React.createElement("span", { "data-rich-text-type": "bold", className: "xapp-search-rich-text-bold-span" }, text.substring(format.start, format.end)));
+    return (jsxRuntime.jsx("span", { "data-rich-text-type": "bold", className: "xapp-search-rich-text-bold-span", children: text.substring(format.start, format.end) }));
 };
 
 var RichTextInputSpan = function (props) {
     var format = props.format, text = props.text, readOnly = props.readOnly, onClick = props.onClick;
     var defaultValue = format.text || text.substring(format.start, format.end);
-    var _a = React.useState(defaultValue), value = _a[0], setValue = _a[1];
-    var handleChange = React.useCallback(function (ev) {
+    var _a = react.useState(defaultValue), value = _a[0], setValue = _a[1];
+    var handleChange = react.useCallback(function (ev) {
         setValue(ev.target.value);
     }, []);
-    var handleClick = React.useCallback(function (ev) {
+    var handleClick = react.useCallback(function (ev) {
         if (onClick) {
             var res = onClick(format);
             if (res === false) {
@@ -1379,14 +1398,14 @@ var RichTextInputSpan = function (props) {
         }
     }, [onClick, format]);
     if (readOnly) {
-        return (React.createElement("span", { className: "xapp-search-rich-text-input-span xapp-search-rich-text-input-span--readonly", onClick: handleClick }, defaultValue));
+        return (jsxRuntime.jsx("span", { className: "xapp-search-rich-text-input-span xapp-search-rich-text-input-span--readonly", onClick: handleClick, children: defaultValue }));
     }
-    return (React.createElement("input", { type: "text", value: value, className: "xapp-search-rich-text-input-span", "data-rich-text-type": "inputText", onChange: handleChange, onClick: handleClick, readOnly: readOnly }));
+    return (jsxRuntime.jsx("input", { type: "text", value: value, className: "xapp-search-rich-text-input-span", "data-rich-text-type": "inputText", onChange: handleChange, onClick: handleClick, readOnly: readOnly }));
 };
 
 var RichTextNormalSpan = function (props) {
     var format = props.format, text = props.text;
-    return (React.createElement("span", { "data-rich-text-type": "normal", className: "xapp-search-rich-text-normal-span" }, text.substring(format.start, format.end)));
+    return (jsxRuntime.jsx("span", { "data-rich-text-type": "normal", className: "xapp-search-rich-text-normal-span", children: text.substring(format.start, format.end) }));
 };
 
 var RichTextSpan = function (props) {
@@ -1394,11 +1413,11 @@ var RichTextSpan = function (props) {
     var type = format.type;
     switch (type) {
         case "normal":
-            return (React.createElement(RichTextNormalSpan, { text: text, format: format, readOnly: readOnly }));
+            return jsxRuntime.jsx(RichTextNormalSpan, { text: text, format: format, readOnly: readOnly });
         case "bold":
-            return (React.createElement(RichTextBoldSpan, { text: text, format: format, readOnly: readOnly }));
+            return jsxRuntime.jsx(RichTextBoldSpan, { text: text, format: format, readOnly: readOnly });
         case "inputText":
-            return (React.createElement(RichTextInputSpan, { text: text, format: format, readOnly: readOnly, onClick: onClick }));
+            return (jsxRuntime.jsx(RichTextInputSpan, { text: text, format: format, readOnly: readOnly, onClick: onClick }));
         default:
             throwBadKind(type);
     }
@@ -1483,7 +1502,7 @@ function parseContent(node) {
             formats.push({
                 type: type,
                 start: text.length,
-                end: text.length + innerText.length
+                end: text.length + innerText.length,
             });
             text += innerText;
         }
@@ -1494,7 +1513,7 @@ function parseContent(node) {
                 formats.push({
                     type: "normal",
                     start: text.length,
-                    end: text.length + innerText.length
+                    end: text.length + innerText.length,
                 });
                 text += innerText;
             }
@@ -1502,7 +1521,7 @@ function parseContent(node) {
     });
     return cleanRichTextValue({
         text: text,
-        formats: formats
+        formats: formats,
     });
 }
 function cleanContent(node) {
@@ -1520,22 +1539,21 @@ function cleanContent(node) {
         try {
             (_a = c.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(c);
         }
-        catch (_b) {
-        }
+        catch (_b) { }
     }
 }
 var RichText = function (props) {
     var value = props.value, className = props.className, readOnly = props.readOnly, onInput = props.onInput, onChange = props.onChange, onSpanClick = props.onSpanClick;
     var formatsRaw = value.formats, text = value.text;
-    var formats = React.useMemo(function () { return extendFormat(formatsRaw, text.length); }, [formatsRaw, text.length]);
-    var handleInput = React.useCallback(function (ev) {
+    var formats = react.useMemo(function () { return extendFormat(formatsRaw, text.length); }, [formatsRaw, text.length]);
+    var handleInput = react.useCallback(function (ev) {
         var target = ev.currentTarget;
         var newValue = parseContent(target);
         if (onInput) {
             onInput(newValue);
         }
     }, [onInput]);
-    var handleBlur = React.useCallback(function (ev) {
+    var handleBlur = react.useCallback(function (ev) {
         var target = ev.currentTarget;
         var newValue = parseContent(target);
         cleanContent(target);
@@ -1543,49 +1561,53 @@ var RichText = function (props) {
             onChange(newValue);
         }
     }, [onChange]);
-    return (React.createElement("div", { id: props.id, className: "xapp-search-rich-text ".concat(className || ""), contentEditable: !readOnly, suppressContentEditableWarning: true, onInput: handleInput, onBlur: handleBlur, onKeyDown: props.onKeyDown }, formats.map(function (format, index) { return (React.createElement(RichTextSpan, { key: index, format: format, text: text, readOnly: readOnly, onClick: onSpanClick })); })));
+    return (jsxRuntime.jsx("div", { id: props.id, className: "xapp-search-rich-text ".concat(className || ""), contentEditable: !readOnly, suppressContentEditableWarning: true, onInput: handleInput, onBlur: handleBlur, onKeyDown: props.onKeyDown, children: formats.map(function (format, index) { return (jsxRuntime.jsx(RichTextSpan, { format: format, text: text, readOnly: readOnly, onClick: onSpanClick }, index)); }) }));
 };
 
 var RichInput = function (props) {
     var id = props.id, value = props.value, type = props.type, autoFocus = props.autoFocus, spellCheck = props.spellCheck, tabIndex = props.tabIndex, onChange = props.onChange, onInput = props.onInput, onKeyDown = props.onKeyDown, onSearch = props.onSearch;
     var rich = value.formats.some(function (f) { return f.type === "inputText"; });
-    var handleChange = React.useCallback(function (ev) {
-        onChange({
-            text: ev.target.value,
-            formats: []
-        });
+    var handleChange = react.useCallback(function (ev) {
+        if (onChange) {
+            onChange({
+                text: ev.target.value,
+                formats: [],
+            });
+        }
     }, [onChange]);
-    var handleRichChange = React.useCallback(function (val) {
-        onChange(val);
+    var handleRichChange = react.useCallback(function (val) {
+        if (onChange) {
+            onChange(val);
+        }
     }, [onChange]);
-    var handleInput = React.useCallback(function (ev) {
+    var handleInput = react.useCallback(function (ev) {
         if (onInput) {
             onInput({
                 text: ev.target.value,
-                formats: []
+                formats: [],
             });
         }
     }, [onInput]);
-    var handleRichInput = React.useCallback(function (val) {
+    var handleRichInput = react.useCallback(function (val) {
         if (onInput) {
             onInput(val);
         }
     }, [onInput]);
-    var handleKeyDown = React.useCallback(function (event) {
+    var handleKeyDown = react.useCallback(function (event) {
         if (onKeyDown) {
             onKeyDown(event);
         }
     }, [onKeyDown]);
-    var inputRef = React.useRef(null);
+    var inputRef = react.useRef(null);
     var inputNode = inputRef.current;
-    React.useEffect(function () {
+    react.useEffect(function () {
         if (inputNode && onSearch) {
             var handler_1 = function (ev) {
                 var target = ev.target;
                 if (target) {
                     onSearch({
                         text: target.value,
-                        formats: []
+                        formats: [],
                     });
                 }
             };
@@ -1596,12 +1618,11 @@ var RichInput = function (props) {
         }
         return undefined;
     }, [inputNode, onSearch]);
-    return (React.createElement("div", { className: "xappw-rich-input ".concat(props.className) }, rich ?
-        React.createElement(RichText, { id: id, value: value, onChange: handleRichChange, onInput: handleRichInput, onKeyDown: handleKeyDown, className: "xappw-rich-input__input ".concat(props.className, "__input") }) : React.createElement("input", { id: id, ref: inputRef, type: type, value: value.text, autoComplete: "off", autoFocus: autoFocus, placeholder: props.placeholder, spellCheck: spellCheck, tabIndex: tabIndex ? Number(tabIndex) : 0, className: "xappw-rich-input__input ".concat(props.className, "__input"), onFocus: props.onFocus, onChange: handleChange, onInput: handleInput, onKeyDown: handleKeyDown })));
+    return (jsxRuntime.jsx("div", { className: "xappw-rich-input ".concat(props.className), children: rich ? (jsxRuntime.jsx(RichText, { id: id, value: value, onChange: handleRichChange, onInput: handleRichInput, onKeyDown: handleKeyDown, className: "xappw-rich-input__input ".concat(props.className, "__input") })) : (jsxRuntime.jsx("input", { id: id, ref: inputRef, type: type, value: value.text, autoComplete: "off", autoFocus: autoFocus, placeholder: props.placeholder, spellCheck: spellCheck, tabIndex: tabIndex ? Number(tabIndex) : 0, className: "xappw-rich-input__input ".concat(props.className, "__input"), onFocus: props.onFocus, onChange: handleChange, onInput: handleInput, onKeyDown: handleKeyDown })) }));
 };
 
 var SuggestionsGroupHeading = function (props) {
-    return (React.createElement("div", { className: "xappw-suggestions-group-heading" }, props.label));
+    return jsxRuntime.jsx("div", { className: "xappw-suggestions-group-heading", children: props.label });
 };
 
 function getScrollContainer(node) {
@@ -1613,22 +1634,22 @@ function getScrollContainer(node) {
 }
 var SuggestionsItem = function (props) {
     var data = props.data, current = props.current, ActionsComponent = props.actions, onClick = props.onClick, onHover = props.onHover, onSpanClick = props.onSpanClick;
-    var handleClick = React.useCallback(function () {
+    var handleClick = react.useCallback(function () {
         onClick(data);
     }, [data, onClick]);
-    var handleHover = React.useCallback(function () {
+    var handleHover = react.useCallback(function () {
         if (onHover) {
             onHover(data);
         }
     }, [data, onHover]);
-    var handleSpanClick = React.useCallback(function (span) {
+    var handleSpanClick = react.useCallback(function (span) {
         if (onSpanClick) {
             return onSpanClick(data, span);
         }
         return undefined;
     }, [onSpanClick, data]);
-    var ref = React.useRef(null);
-    React.useEffect(function () {
+    var ref = react.useRef(null);
+    react.useEffect(function () {
         var node = ref.current;
         if (current && node) {
             var scrollContainer = getScrollContainer(node);
@@ -1645,22 +1666,13 @@ var SuggestionsItem = function (props) {
             }
         }
     }, [current]);
-    return (React.createElement("div", { ref: ref, className: "xappw-suggestions-item ".concat(current ? "xappw-suggestions-item--current" : ""), onClick: handleClick, onMouseEnter: handleHover },
-        React.createElement(RichText, { value: data, className: "xappw-suggestions-item__texts", readOnly: true, onSpanClick: handleSpanClick }),
-        ActionsComponent &&
-            React.createElement("div", { className: "xappw-suggestions-item__actions" },
-                React.createElement(ActionsComponent, { data: data, current: current }))));
+    return (jsxRuntime.jsxs("div", { ref: ref, className: "xappw-suggestions-item ".concat(current ? "xappw-suggestions-item--current" : ""), onClick: handleClick, onMouseEnter: handleHover, children: [jsxRuntime.jsx(RichText, { value: data, className: "xappw-suggestions-item__texts", readOnly: true, onSpanClick: handleSpanClick }), ActionsComponent && (jsxRuntime.jsx("div", { className: "xappw-suggestions-item__actions", children: jsxRuntime.jsx(ActionsComponent, { data: data, current: current }) }))] }));
 };
 
 var SuggestionsGroup = function (props) {
     var group = props.group, currentIndex = props.currentIndex, itemActions = props.itemActions;
     var heading = group.heading, items = group.items;
-    return (React.createElement("div", { className: "xappw-suggestions-group" },
-        React.createElement("div", { className: "xappw-suggestions-group__heading" },
-            React.createElement(SuggestionsGroupHeading, { label: heading })),
-        React.createElement("div", { className: "xappw-suggestions-group__items" }, items.map(function (item, itemIndex) {
-            return React.createElement(SuggestionsItem, { key: itemIndex, data: item, current: currentIndex === itemIndex, actions: itemActions, onClick: props.onItemClick, onHover: props.onItemHover, onSpanClick: props.onSpanClick });
-        }))));
+    return (jsxRuntime.jsxs("div", { className: "xappw-suggestions-group", children: [jsxRuntime.jsx("div", { className: "xappw-suggestions-group__heading", children: jsxRuntime.jsx(SuggestionsGroupHeading, { label: heading }) }), jsxRuntime.jsx("div", { className: "xappw-suggestions-group__items", children: items.map(function (item, itemIndex) { return (jsxRuntime.jsx(SuggestionsItem, { data: item, current: currentIndex === itemIndex, actions: itemActions, onClick: props.onItemClick, onHover: props.onItemHover, onSpanClick: props.onSpanClick }, itemIndex)); }) })] }));
 };
 
 function getItemsLength(result) {
@@ -1669,7 +1681,7 @@ function getItemsLength(result) {
 
 var SuggestionsList = function (props) {
     var suggestions = props.suggestions, itemActions = props.itemActions, className = props.className;
-    var length = React.useMemo(function () {
+    var length = react.useMemo(function () {
         if (suggestions) {
             return getItemsLength(suggestions);
         }
@@ -1677,11 +1689,11 @@ var SuggestionsList = function (props) {
     }, [suggestions]);
     var currentIndex = length >= 0 ? props.index : NaN;
     var indexWalker = 0;
-    return (React.createElement("div", { className: "xappw-suggestions-list ".concat(className || "") }, suggestions === null || suggestions === void 0 ? void 0 : suggestions.map(function (group, index) {
-        var res = (React.createElement(SuggestionsGroup, { key: index, group: group, currentIndex: currentIndex - indexWalker, itemActions: itemActions, onItemClick: props.onItemClick, onItemHover: props.onItemHover, onSpanClick: props.onSpanClick }));
-        indexWalker += group.items.length;
-        return res;
-    })));
+    return (jsxRuntime.jsx("div", { className: "xappw-suggestions-list ".concat(className || ""), children: suggestions === null || suggestions === void 0 ? void 0 : suggestions.map(function (group, index) {
+            var res = (jsxRuntime.jsx(SuggestionsGroup, { group: group, currentIndex: currentIndex - indexWalker, itemActions: itemActions, onItemClick: props.onItemClick, onItemHover: props.onItemHover, onSpanClick: props.onSpanClick }, index));
+            indexWalker += group.items.length;
+            return res;
+        }) }));
 };
 
 function findItemByIndex(groups, index) {
@@ -1700,65 +1712,6 @@ function findItemByIndex(groups, index) {
     return undefined;
 }
 
-function parseSuggestionsFormat(format) {
-    var types = Object.keys(format);
-    var type = types[0];
-    var item = format[type];
-    if (!item) {
-        throw new Error();
-    }
-    return {
-        type: type,
-        start: item.start,
-        end: item.end
-    };
-}
-function parseSuggestionsFormats(formats) {
-    return formats.map(parseSuggestionsFormat);
-}
-function parseSuggestionsResponseItem(item) {
-    return {
-        text: item.suggestion,
-        content: item.answer,
-        formats: parseSuggestionsFormats(item.format),
-        type: item.type
-    };
-}
-function getHeading(type) {
-    switch (type) {
-        case "FAQ":
-            return "FAQs";
-        case "INTENT":
-            return "Suggestions";
-        case "HISTORICAL":
-            return "Suggestions";
-        default:
-            return type;
-    }
-}
-function parseSuggestionsResponse(response, direction) {
-    if (direction === void 0) { direction = 1; }
-    if (!response) {
-        return undefined;
-    }
-    var items = sortSuggestionItems(response.suggestions, direction);
-    return items.reduce(function (result, current) {
-        var mappedItem = parseSuggestionsResponseItem(current);
-        if (result.length) {
-            var prevGroup = result[result.length - 1];
-            if (prevGroup.heading === getHeading(current.type)) {
-                prevGroup.items.push(mappedItem);
-                return result;
-            }
-        }
-        result.push({
-            heading: getHeading(current.type),
-            items: [mappedItem]
-        });
-        return result;
-    }, []);
-}
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -1841,6 +1794,65 @@ function sortSuggestionItems(items, direction) {
     return __spreadArray([], items).sort(function (left, right) { return compareSuggestionItems(left, right, direction); });
 }
 
+function parseSuggestionsFormat(format) {
+    var types = Object.keys(format);
+    var type = types[0];
+    var item = format[type];
+    if (!item) {
+        throw new Error();
+    }
+    return {
+        type: type,
+        start: item.start,
+        end: item.end,
+    };
+}
+function parseSuggestionsFormats(formats) {
+    return formats.map(parseSuggestionsFormat);
+}
+function parseSuggestionsResponseItem(item) {
+    return {
+        text: item.suggestion,
+        content: item.answer,
+        formats: parseSuggestionsFormats(item.format),
+        type: item.type,
+    };
+}
+function getHeading(type) {
+    switch (type) {
+        case "FAQ":
+            return "FAQs";
+        case "INTENT":
+            return "Suggestions";
+        case "HISTORICAL":
+            return "Suggestions";
+        default:
+            return type;
+    }
+}
+function parseSuggestionsResponse(response, direction) {
+    if (direction === void 0) { direction = 1; }
+    if (!response) {
+        return undefined;
+    }
+    var items = sortSuggestionItems(response.suggestions, direction);
+    return items.reduce(function (result, current) {
+        var mappedItem = parseSuggestionsResponseItem(current);
+        if (result.length) {
+            var prevGroup = result[result.length - 1];
+            if (prevGroup.heading === getHeading(current.type)) {
+                prevGroup.items.push(mappedItem);
+                return result;
+            }
+        }
+        result.push({
+            heading: getHeading(current.type),
+            items: [mappedItem],
+        });
+        return result;
+    }, []);
+}
+
 /**
  * Append the provided query params to the URL
  *
@@ -1863,11 +1875,11 @@ function noop$1() {
 }
 function useJsonFetch(url, options) {
     if (options === void 0) { options = defaultOptions$2; }
-    var _a = React.useState({
+    var _a = react.useState({
         state: "paused"
     }), value = _a[0], setValue = _a[1];
     var pause = options.pause;
-    React.useEffect(function () {
+    react.useEffect(function () {
         if (pause) {
             setValue({
                 state: "paused"
@@ -1932,7 +1944,7 @@ function useJsonFetch(url, options) {
 
 function useSuggestionsFetch$1(options) {
     var baseUrl = options.url, context = options.context, query = options.query;
-    var url = React.useMemo(function () {
+    var url = react.useMemo(function () {
         if (!baseUrl) {
             return undefined;
         }
@@ -2002,7 +2014,6 @@ function postMessageToStentor(data, url, key, signal) {
                             headers: {
                                 "Content-Type": "application/json",
                                 "Authorization": "Bearer ".concat(key),
-                                "User-Agent": "Stentor Chat Server"
                             },
                             body: body,
                             mode: "cors",
@@ -2743,6 +2754,12 @@ var StentorLocalChat = /** @class */ (function () {
     return StentorLocalChat;
 }());
 
+/**
+ * Animation duration for WebSocket button dismiss animation (in milliseconds).
+ * This should match the CSS animation duration in WsButton.scss.
+ */
+var WS_BUTTON_DISMISS_ANIMATION_DURATION = 300;
+
 /*! Copyright (c) 2022, XAPPmedia */
 var PERMISSION_QUESTION_EXPIRATION_MS = 300000; // 5 minutes
 function requestFromMessage(message, userId, isNewSession, sessionId, accessToken, attributes, visitorInfo) {
@@ -2926,9 +2943,10 @@ var StentorRouterChat = /** @class */ (function () {
         var _this = this;
         var _a, _b;
         this.dispatch = dispatch;
+        log("INIT called - setting initial accountStatus to OFFLINE");
         this.setAccountStatus("offline");
         // Register "handlers" for the incoming events
-        this.handlers["connection update"] = function (data, _sender, _ts) {
+        this.handlers["connection update"] = function (data, _sender, _ts, _attributes) {
             log("Connection update received. Session created: ".concat(data.sessionCreated, " Error: ").concat(data.errorMessage || ""));
             if (data.sessionCreated) {
                 _this.sessionCreated = true;
@@ -2943,7 +2961,7 @@ var StentorRouterChat = /** @class */ (function () {
             }
         };
         // Server ping (not sent periodically - at least not for now)
-        this.handlers["account status"] = function (_data, _sender, ts) {
+        this.handlers["account status"] = function (_data, _sender, ts, _attributes) {
             dispatch({
                 type: "account_status",
                 detail: {
@@ -2952,26 +2970,31 @@ var StentorRouterChat = /** @class */ (function () {
                 },
             });
         };
-        this.handlers["failure"] = function (data, sender, _ts) {
+        this.handlers["failure"] = function (data, sender, _ts, _attributes) {
             err("SERVER: something's failed: type: ".concat(data.type, " tries: ").concat(data.tries, " error: ").concat(data.error));
             var _a = _this.configurableMessages[data.tries], retry = _a.retry, delay = _a.delay, text = _a.text;
             _this.sendFailureMessage(retry, data.delay || delay, text, sender);
         };
-        this.handlers["new message"] = function (data, sender, ts) {
+        this.handlers["new message"] = function (data, sender, ts, attributes) {
             // Because the router's internal message format is Stentor channel compatible.
             // So the data is either a stentor Request (from widget) or a stentor Response (from bot)
-            var _a, _b;
+            var _a;
             var message;
             if (sender.deviceId === "Bot") {
                 var response = data;
-                // Extract custom attributes from router response
-                if (((_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.routerAttributes) && typeof response.data.routerAttributes === "object") {
-                    _this.routerAttributes = __assign({}, response.data.routerAttributes);
+                // Extract router-managed attributes from message root (adjacent to event, data, sender, etc.)
+                if (attributes && typeof attributes === "object" && Object.keys(attributes).length > 0) {
+                    _this.routerAttributes = __assign({}, attributes);
                     log("Extracted router attributes: ".concat(JSON.stringify(_this.routerAttributes)));
                 }
-                if (typeof ((_b = _this.options.hooks) === null || _b === void 0 ? void 0 : _b.onResponse) === "function") {
+                if (typeof ((_a = _this.options.hooks) === null || _a === void 0 ? void 0 : _a.onResponse) === "function") {
                     _this.options.hooks.onResponse(response);
                 }
+                // Session is initialized after first bot response (same as StentorDirectChat)
+                if (_this.isNewSession) {
+                    _this.isNewSession = false;
+                    log("Session initialized after receiving first bot response");
+                }
                 message = responseToMessage(response);
             }
             else if (sender.deviceId === "Widget") {
@@ -2994,35 +3017,47 @@ var StentorRouterChat = /** @class */ (function () {
                 },
             });
         };
-        this.handlers["user joined"] = function (_data, sender, ts) {
+        this.handlers["user joined"] = function (data, sender, ts, _attributes) {
             var _a, _b;
+            var nick = senderToNick(sender);
+            log("Received \"user joined\" event - deviceId: ".concat(sender.deviceId, ", userId: ").concat(sender.userId, ", displayName: ").concat(sender.displayName, ", nick: ").concat(nick));
+            log("Dispatching chat.memberjoin for ".concat(sender.displayName || "Unknown"));
+            var userData = data;
             _this.dispatch({
                 type: "chat",
                 detail: {
                     type: "chat.memberjoin",
                     user: {
-                        avatarPath: (_b = (_a = _this.options) === null || _a === void 0 ? void 0 : _a.bot) === null || _b === void 0 ? void 0 : _b.avatarPath,
+                        avatarPath: sender.avatarPath || ((_b = (_a = _this.options) === null || _a === void 0 ? void 0 : _a.bot) === null || _b === void 0 ? void 0 : _b.avatarPath),
                         displayName: sender.displayName,
-                        nick: senderToNick(sender),
+                        nick: nick,
                     },
                     timestamp: ts || new Date().getTime(),
+                    showDivider: userData === null || userData === void 0 ? void 0 : userData.showDivider,
+                    message: userData === null || userData === void 0 ? void 0 : userData.message,
+                    hideUserInfo: userData === null || userData === void 0 ? void 0 : userData.hideUserInfo,
                 },
             });
+            log("chat.memberjoin dispatched for nick: ".concat(nick));
         };
-        this.handlers["user left"] = function (_data, sender, ts) {
+        this.handlers["user left"] = function (data, sender, ts, _attributes) {
+            var userData = data;
             _this.dispatch({
                 type: "chat",
                 detail: {
                     type: "chat.memberleave",
                     user: {
+                        avatarPath: sender.avatarPath,
                         displayName: sender.displayName,
                         nick: senderToNick(sender),
                     },
                     timestamp: ts || new Date().getTime(),
+                    showDivider: userData === null || userData === void 0 ? void 0 : userData.showDivider,
+                    message: userData === null || userData === void 0 ? void 0 : userData.message,
                 },
             });
         };
-        this.handlers["typing"] = function (_data, sender, ts) {
+        this.handlers["typing"] = function (_data, sender, ts, _attributes) {
             _this.dispatch({
                 type: "chat",
                 detail: {
@@ -3035,7 +3070,7 @@ var StentorRouterChat = /** @class */ (function () {
                 },
             });
         };
-        this.handlers["stop typing"] = function (_data, sender, ts) {
+        this.handlers["stop typing"] = function (_data, sender, ts, _attributes) {
             _this.dispatch({
                 type: "chat",
                 detail: {
@@ -3049,6 +3084,7 @@ var StentorRouterChat = /** @class */ (function () {
             });
         };
         this.handlers["disconnect"] = function () {
+            log("DISCONNECT event received from server");
             err("SERVER: requested disconnect");
             _this.dispatch(setAccountStatus("offline"));
             _this.dispatch(setConnectionStatus("offline"));
@@ -3066,6 +3102,76 @@ var StentorRouterChat = /** @class */ (function () {
             err("SERVER: says there was an error while re-connecting");
             _this.dispatch(setAccountStatus("offline"));
         };
+        this.handlers["display button"] = function (data, _sender, _ts, _attributes) {
+            log("Received \"display button\" event - id: ".concat(data.id, ", text: ").concat(data.text, ", pressBehavior: ").concat(data.pressBehavior));
+            _this.dispatch(displayWsButton({
+                id: data.id,
+                text: data.text,
+                pressBehavior: data.pressBehavior || "none"
+            }));
+        };
+        this.handlers["dismiss button"] = function (data, _sender, _ts, _attributes) {
+            log("Received \"dismiss button\" event - id: ".concat(data.id));
+            // First, mark button as dismissing to trigger animation
+            _this.dispatch(displayWsButton({
+                id: data.id,
+                text: '',
+                pressBehavior: 'none',
+                isDismissing: true
+            }));
+            // Then actually dismiss after animation completes
+            setTimeout(function () {
+                _this.dispatch(dismissWsButton(data.id));
+            }, WS_BUTTON_DISMISS_ANIMATION_DURATION);
+        };
+        this.handlers["system-message"] = function (data, sender, ts, _attributes) {
+            log("Received \"system-message\" event - id: ".concat(data.id, ", message: ").concat(data.message, ", dismissId: ").concat(data.dismissId));
+            // If there's a dismissId, dispatch dismiss action first
+            if (data.dismissId) {
+                _this.dispatch({
+                    type: "chat",
+                    detail: {
+                        type: "chat.systemmessagedismiss",
+                        user: {
+                            displayName: sender.displayName || "System",
+                            nick: senderToNick(sender),
+                        },
+                        id: data.dismissId,
+                        timestamp: ts || new Date().getTime(),
+                    },
+                });
+            }
+            // Then dispatch the new system message
+            _this.dispatch({
+                type: "chat",
+                detail: {
+                    type: "chat.systemmessage",
+                    user: {
+                        displayName: sender.displayName || "System",
+                        nick: senderToNick(sender),
+                    },
+                    id: data.id,
+                    message: data.message,
+                    dismissId: data.dismissId,
+                    timestamp: ts || new Date().getTime(),
+                },
+            });
+        };
+        this.handlers["system-message-dismiss"] = function (data, sender, ts, _attributes) {
+            log("Received \"system-message-dismiss\" event - id: ".concat(data.id));
+            _this.dispatch({
+                type: "chat",
+                detail: {
+                    type: "chat.systemmessagedismiss",
+                    user: {
+                        displayName: sender.displayName || "System",
+                        nick: senderToNick(sender),
+                    },
+                    id: data.id,
+                    timestamp: ts || new Date().getTime(),
+                },
+            });
+        };
         // Register the router as a pseudo-agent (serverInfo) so it can send messages (like internal errors)
         this.dispatch({
             type: "chat",
@@ -3104,6 +3210,7 @@ var StentorRouterChat = /** @class */ (function () {
                     setActStatus("online");
                     setConnStatus("online");
                     ws.onclose = function () {
+                        log("WebSocket ONCLOSE event - connection closed unexpectedly");
                         log("Closed WS connection (onclosed was called)");
                         startReconnecting();
                     };
@@ -3117,10 +3224,12 @@ var StentorRouterChat = /** @class */ (function () {
             return;
         }
         ws.onclose = function () {
+            log("WebSocket ONCLOSE event (initial) - connection closed");
             log("Closed WS connection (onclosed was called)");
             startReconnecting();
         };
         this.ws.onopen = function () {
+            log("WebSocket ONOPEN event - connection established");
             log("Opened WS connection (onopen was called)");
             // We are connected
             _this.setAccountStatus("online");
@@ -3129,6 +3238,7 @@ var StentorRouterChat = /** @class */ (function () {
     };
     StentorRouterChat.prototype.wsClose = function () {
         if (this.ws) {
+            log("wsClose() - Closing WebSocket (readyState: ".concat(this.ws.readyState, ")"));
             this.ws.onclose = null;
             this.ws.onerror = null;
             this.ws.onopen = null;
@@ -3170,7 +3280,7 @@ var StentorRouterChat = /** @class */ (function () {
             var message = JSON.parse(me.data);
             var handler = _this.handlers[message.event];
             if (handler) {
-                _this.handlers[message.event](message.data, message.sender, message.timeMs);
+                _this.handlers[message.event](message.data, message.sender, message.timeMs, message.attributes);
             }
             else {
                 err("Unknown router message event: ".concat(message.event));
@@ -3184,18 +3294,24 @@ var StentorRouterChat = /** @class */ (function () {
     };
     StentorRouterChat.prototype.emit = function (event, data) {
         return __awaiter$1(this, void 0, void 0, function () {
-            var payloadData;
+            var payload, payloadData;
             var _this = this;
             return __generator$1(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        payloadData = JSON.stringify({
+                        payload = {
                             event: event,
                             data: data,
                             sender: this.visitorInfo,
                             sessionId: this._sessionId,
                             timeMs: new Date().getTime()
-                        });
+                        };
+                        // Add router-managed attributes at payload root level if available
+                        if (this.routerAttributes && Object.keys(this.routerAttributes).length > 0) {
+                            payload.attributes = this.routerAttributes;
+                            log("Adding router attributes to outgoing payload: ".concat(JSON.stringify(this.routerAttributes)));
+                        }
+                        payloadData = JSON.stringify(payload);
                         log("Widget says: ".concat(payloadData));
                         if (!this.ws) {
                             // Fire up the WebSocket
@@ -3221,10 +3337,12 @@ var StentorRouterChat = /** @class */ (function () {
         });
     };
     StentorRouterChat.prototype.setAccountStatus = function (status) {
+        log("setAccountStatus: ".concat(status));
         log("SERVER account_status: ".concat(JSON.stringify(status)));
         this.dispatch(setAccountStatus(status));
     };
     StentorRouterChat.prototype.setConnectionStatus = function (status) {
+        log("setConnectionStatus: ".concat(status));
         log("SERVER: connection_update: ".concat(JSON.stringify(status)));
         this.dispatch(setConnectionStatus(status));
     };
@@ -3354,6 +3472,7 @@ var StentorRouterChat = /** @class */ (function () {
     };
     StentorRouterChat.prototype.flush = function () { };
     StentorRouterChat.prototype.dispose = function () {
+        log("DISPOSE called - cleaning up connection");
         this.isDisposed = true;
         if (this.ws) {
             this.wsClose();
@@ -3365,17 +3484,25 @@ var StentorRouterChat = /** @class */ (function () {
         if (this.ws) {
             this.wsClose();
         }
+        log("SLEEP called - closed web socket");
         log("Closed web socket (sleep)");
     };
     StentorRouterChat.prototype.wakeup = function () {
         this.isDisposed = false;
+        log("WAKEUP called - userId:", this._userId);
         // wait for the session setup
         if (!this._userId) {
+            log("WAKEUP - No userId, returning early");
             return;
         }
-        // Fire up the WebSocket 
+        // Set both statuses immediately to show we're reconnecting
+        log("WAKEUP - Setting accountStatus and connectionStatus to ONLINE");
+        this.setAccountStatus("online");
+        this.setConnectionStatus("online");
+        log("Waking up - setting status to online");
+        // Fire up the WebSocket
+        log("WAKEUP - Calling autoReconnect");
         this.autoReconnect(this.wsCreate.bind(this, "wakeup"));
-        log("Waking up");
     };
     StentorRouterChat.prototype.bargeOut = function (_cb) {
         return __awaiter$1(this, void 0, void 0, function () {
@@ -3394,6 +3521,17 @@ var StentorRouterChat = /** @class */ (function () {
             });
         });
     };
+    StentorRouterChat.prototype.sendButtonPressed = function (buttonId) {
+        return __awaiter$1(this, void 0, void 0, function () {
+            var data;
+            return __generator$1(this, function (_a) {
+                log("Sending \"button pressed\" event - id: ".concat(buttonId));
+                data = { id: buttonId };
+                this.emit("button pressed", data);
+                return [2 /*return*/];
+            });
+        });
+    };
     StentorRouterChat.prototype.postVisitorInfo = function () {
         return __awaiter$1(this, void 0, void 0, function () {
             return __generator$1(this, function (_a) {
@@ -3405,7 +3543,7 @@ var StentorRouterChat = /** @class */ (function () {
     };
     StentorRouterChat.prototype.postMessage = function (message) {
         return __awaiter$1(this, void 0, void 0, function () {
-            var userId, sessionId, accessToken, attributes, rwgToken, merchantId, environment, enablePreferredTime, service, origin, mergedAttributes, request;
+            var userId, sessionId, accessToken, attributes, rwgToken, merchantId, environment, enablePreferredTime, service, origin, request;
             return __generator$1(this, function (_a) {
                 userId = this._userId;
                 sessionId = this._sessionId;
@@ -3435,8 +3573,8 @@ var StentorRouterChat = /** @class */ (function () {
                 if (origin) {
                     attributes["origin"] = origin;
                 }
-                mergedAttributes = __assign(__assign({}, attributes), this.routerAttributes);
-                request = requestFromMessage(message, userId, this.isNewSession, sessionId, accessToken, mergedAttributes, this.visitorInfo);
+                request = requestFromMessage(message, userId, this.isNewSession, sessionId, accessToken, attributes, this.visitorInfo);
+                // Router attributes are now added at the payload root level in emit()
                 this.emit("new message", request);
                 return [2 /*return*/];
             });
@@ -7550,6 +7688,7 @@ var StentorServerChat = /** @class */ (function () {
     }
     StentorServerChat.prototype.init = function (dispatch) {
         var _this = this;
+        log("[StentorServerChat] Creating new socket connection to ".concat(this.config.url));
         this.socket = lookup(this.config.url, {
             transports: ["websocket"],
             reconnection: true,
@@ -7558,6 +7697,10 @@ var StentorServerChat = /** @class */ (function () {
             reconnectionAttempts: 5
         });
         this.dispatch = dispatch;
+        // Log connect event
+        this.socket.on("connect", function () {
+            log("[StentorServerChat] Socket CONNECTED - ID: ".concat(_this.socket.id));
+        });
         // TODO: Authenticate - or at least tell the server who you are
         // Socket events
         this.socket.on("account_status", function (data) {
@@ -7603,7 +7746,7 @@ var StentorServerChat = /** @class */ (function () {
                     type: "chat.memberjoin",
                     user: {
                         displayName: data.username,
-                        nick: "agent:robot",
+                        nick: data.nick || "agent:robot",
                         avatarPath: data.avatarPath
                     },
                     timestamp: +new Date(),
@@ -7654,7 +7797,9 @@ var StentorServerChat = /** @class */ (function () {
                 }
             });
         });
-        this.socket.on("disconnect", function () {
+        this.socket.on("disconnect", function (reason) {
+            var reasonStr = typeof reason === "string" ? reason : String(reason || "unknown");
+            log("[StentorServerChat] Socket DISCONNECTED - Reason: ".concat(reasonStr));
             log("SERVER: disconnect");
             _this.dispatch(setAccountStatus("offline"));
             _this.dispatch(setConnectionStatus("offline"));
@@ -7705,6 +7850,7 @@ var StentorServerChat = /** @class */ (function () {
     };
     StentorServerChat.prototype.dispose = function () {
         var _a;
+        log("[StentorServerChat] dispose() called - manually disconnecting socket");
         (_a = this.socket) === null || _a === void 0 ? void 0 : _a.disconnect();
     };
     StentorServerChat.prototype.sleep = function () {
@@ -7753,23 +7899,46 @@ function createChatServerCore(config, options) {
 function createChatServer(config, options) {
     return new LogChat(createChatServerCore(config, options));
 }
-var ChatServerContext = React$1.createContext(null);
+var ChatServerContext = require$$1.createContext(null);
 function useChatServer(config, options) {
-    var _a = React$1.useState(), server = _a[0], setServer = _a[1];
+    var _a = require$$1.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);
     // Log what caused the "effect"
     // useWhatChanged(deps, "options, config, dispatch");
-    React$1.useEffect(function () {
+    require$$1.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];
+            var changes = [];
+            if (prevOptions !== options)
+                changes.push("options");
+            if (prevConfig !== config)
+                changes.push("config");
+            if (prevDispatch !== dispatch)
+                changes.push("dispatch");
+            if (changes.length > 0) {
+                log("[useChatServer] Effect re-running due to: ".concat(changes.join(", ")));
+            }
+        }
+        else {
+            log("[useChatServer] Effect running for first time");
+        }
+        prevDepsRef.current = [options, config, dispatch];
         // Don't create server if config is null (waiting for async config load)
         if (!config || !options) {
+            log("[useChatServer] Config or options null, not creating server");
             setServer(undefined);
             return undefined;
         }
+        log("Creating new chat server - type: ".concat(config.type));
         var newServer = createChatServer(config, options);
         newServer.init(dispatch);
         setServer(newServer);
         return function () {
+            log("Cleanup - disposing old server");
             newServer.dispose();
         };
     }, deps);
@@ -7778,8 +7947,8 @@ function useChatServer(config, options) {
 
 function useChatServerDispatch() {
     var inner = useChatDispatch();
-    var chatServer = React$1.useContext(ChatServerContext);
-    return React$1.useCallback(function (action) {
+    var chatServer = require$$1.useContext(ChatServerContext);
+    return require$$1.useCallback(function (action) {
         if (!action) {
             console.warn("react bug? Someone invokes with null");
             return;
@@ -7809,17 +7978,16 @@ var ChatChipsContainer = function (_) {
             }));
         }
     }
-    return (React$1.createElement("div", { className: "message-list-container__chips ".concat(!(chips === null || chips === void 0 ? void 0 : chips.length) ? "message-list-container__chips--empty" : "") },
-        React$1.createElement(ChatChips, { options: chips, onOptionClick: optionOnChange })));
+    return (require$$0.jsx("div", { className: "message-list-container__chips ".concat(!(chips === null || chips === void 0 ? void 0 : chips.length) ? "message-list-container__chips--empty" : ""), children: require$$0.jsx(ChatChips, { options: chips, onOptionClick: optionOnChange }) }));
 };
 
 var ButtonGroup = function (_a) {
     var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b;
-    return (React$1.createElement("div", { className: "button-group ".concat(className) }, children));
+    return (require$$0.jsx("div", { className: "button-group ".concat(className), children: children }));
 };
 
 var CancelButton = function (props) {
-    return (React$1.createElement("div", { id: "xapp-widget-close", "aria-label": "close widget", "aria-hidden": false, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "cancel-button", onClick: props.onClick }));
+    return (require$$0.jsx("div", { id: "xapp-widget-close", "aria-label": "close widget", "aria-hidden": false, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "cancel-button", onClick: props.onClick }));
 };
 
 var lib = {};
@@ -7904,10 +8072,8 @@ var ChatMenuItem = function (props) {
             props.onClick(props.label);
         }
     }
-    var content = props.subtitle ? (React$1.createElement("span", null,
-        React$1.createElement("div", null, props.label),
-        React$1.createElement("div", { className: "chat-menu-item--subtitle" }, props.subtitle))) : (React$1.createElement("span", null, props.label));
-    return (React$1.createElement("button", { type: "button", className: "chat-menu-item", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, onClick: handleClick }, content));
+    var content = props.subtitle ? (require$$0.jsxs("span", { children: [require$$0.jsx("div", { children: props.label }), require$$0.jsx("div", { className: "chat-menu-item--subtitle", children: props.subtitle })] })) : (require$$0.jsx("span", { children: props.label }));
+    return (require$$0.jsx("button", { type: "button", className: "chat-menu-item", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, onClick: handleClick, children: content }));
 };
 
 var _this = undefined;
@@ -7917,28 +8083,24 @@ var ChatMenu = function (props) {
     var handleOpenUrl = useOpenUrlCallback();
     var chatDispatch = useChatDispatch();
     var visuals = reactRedux.useSelector(function (state) { return state.visuals; });
-    return (React$1.createElement("div", { className: "chat-menu-".concat(openFrom, " ").concat(opened ? "chat-menu-".concat(openFrom, "--opened") : "chat-menu-".concat(openFrom, "--closed")) }, items.map(function (item, i) {
-        if (lib.isStandardMenuItem(item)) {
-            return React$1.createElement(ChatMenuItem, { key: i, onClick: props.onItemClick, label: item.label, subtitle: item.subtitle });
-        }
-        else if (lib.isStaticImageMenuItem(item)) {
-            return (React$1.createElement("div", { key: i, className: "chat-menu-item-static" },
-                React$1.createElement("img", { style: {
-                        maxHeight: "100%",
-                        maxWidth: "auto"
-                    }, src: item.imageUrl, alt: "Menu Item" })));
-        }
-        else if (lib.isStaticTextMenuItem(item)) {
-            return (React$1.createElement("div", { key: i, className: "chat-menu-item-static-text" },
-                React$1.createElement("div", null,
-                    React$1.createElement("div", null, item.title),
-                    React$1.createElement("div", { className: "chat-menu-item-static-text--body" }, item.body))));
-        }
-        else if (lib.isOpenURLMenuItem(item)) {
-            return React$1.createElement("button", { key: i, className: "chat-menu-item", onClick: handleOpenUrl.bind(_this, item.url, chatDispatch, visuals, item.behavior) }, item.text);
-        }
-        return React$1.createElement("p", null, "Unknown");
-    })));
+    return (require$$0.jsx("div", { className: "chat-menu-".concat(openFrom, " ").concat(opened ? "chat-menu-".concat(openFrom, "--opened") : "chat-menu-".concat(openFrom, "--closed")), children: items.map(function (item, i) {
+            if (lib.isStandardMenuItem(item)) {
+                return (require$$0.jsx(ChatMenuItem, { onClick: props.onItemClick, label: item.label, subtitle: item.subtitle }, i));
+            }
+            else if (lib.isStaticImageMenuItem(item)) {
+                return (require$$0.jsx("div", { className: "chat-menu-item-static", children: require$$0.jsx("img", { style: {
+                            maxHeight: "100%",
+                            maxWidth: "auto",
+                        }, src: item.imageUrl, alt: "Menu Item" }) }, i));
+            }
+            else if (lib.isStaticTextMenuItem(item)) {
+                return (require$$0.jsx("div", { className: "chat-menu-item-static-text", children: require$$0.jsxs("div", { children: [require$$0.jsx("div", { children: item.title }), require$$0.jsx("div", { className: "chat-menu-item-static-text--body", children: item.body })] }) }, i));
+            }
+            else if (lib.isOpenURLMenuItem(item)) {
+                return (require$$0.jsx("button", { className: "chat-menu-item", onClick: handleOpenUrl.bind(_this, item.url, chatDispatch, visuals, item.behavior), children: item.text }, i));
+            }
+            return require$$0.jsx("p", { children: "Unknown" });
+        }) }));
 };
 
 var DrawerBars = function (props) {
@@ -7950,23 +8112,23 @@ var DrawerBars = function (props) {
     function getBars() {
         var barElements = [];
         for (var bar = 0; bar < bars; bar++) {
-            barElements.push(React$1.createElement("div", { key: "drawer-bar-".concat(bar), className: "drawer-bar bar".concat(bar) }));
+            barElements.push(require$$0.jsx("div", { className: "drawer-bar bar".concat(bar) }, "drawer-bar-".concat(bar)));
         }
         return barElements;
     }
-    return (React$1.createElement("button", { className: "drawer-bars", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, "aria-label": "open menu", "aria-hidden": false, onClick: props.onToggle }, getBars()));
+    return (require$$0.jsx("button", { className: "drawer-bars", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, "aria-label": "open menu", "aria-hidden": false, onClick: props.onToggle, children: getBars() }));
 };
 
 var MenuButton = function (props) {
-    return (React$1.createElement("div", { id: "xapp-widget-menu", "aria-label": "open menu", "aria-hidden": false, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "menu-button", onClick: props.onClick }));
+    return (require$$0.jsx("div", { id: "xapp-widget-menu", "aria-label": "open menu", "aria-hidden": false, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "menu-button", onClick: props.onClick }));
 };
 
 var MinimizeButton = function (props) {
-    return (React$1.createElement("div", { id: "xapp-widget-minimize", "aria-label": "minimize widget", "aria-hidden": false, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "minimize-button ".concat(props.showInRight ? "positionRight" : ""), onClick: props.onClick }));
+    return (require$$0.jsx("div", { id: "xapp-widget-minimize", "aria-label": "minimize widget", "aria-hidden": false, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "minimize-button ".concat(props.showInRight ? "positionRight" : ""), onClick: props.onClick }));
 };
 
 var RefreshButton = function (props) {
-    return (React$1.createElement("div", { id: "xapp-widget-refresh", "aria-label": "refresh chat", "aria-hidden": false, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "refresh-button ".concat(props.showInRight ? "positionRight" : props.showInLeft ? "positionLeft" : ""), onClick: props.onClick }));
+    return (require$$0.jsx("div", { id: "xapp-widget-refresh", "aria-label": "refresh chat", "aria-hidden": false, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "refresh-button ".concat(props.showInRight ? "positionRight" : props.showInLeft ? "positionLeft" : ""), onClick: props.onClick }));
 };
 
 var DEFAULT_STATUS_CONFIG = {
@@ -7977,6 +8139,7 @@ var DEFAULT_STATUS_CONFIG = {
 };
 function getStatusText(status, config) {
     var _a, _b, _c, _d;
+    log("getStatusText called with status: \"".concat(status, "\""));
     switch (status) {
         case "online":
             return (_a = config === null || config === void 0 ? void 0 : config.online) !== null && _a !== void 0 ? _a : DEFAULT_STATUS_CONFIG.online;
@@ -7988,21 +8151,126 @@ function getStatusText(status, config) {
             return (_d = config === null || config === void 0 ? void 0 : config.connecting) !== null && _d !== void 0 ? _d : DEFAULT_STATUS_CONFIG.connecting;
     }
 }
+/**
+ * Determines if a string contains HTML tags
+ */
+function isHtmlString(text) {
+    if (typeof text !== "string") {
+        return false;
+    }
+    // Check for common HTML patterns
+    var htmlPattern = /<\/?[a-z][\s\S]*>/i;
+    return htmlPattern.test(text);
+}
+/**
+ * Sanitizes HTML string by removing potentially dangerous elements and attributes
+ */
+function sanitizeHtml(html) {
+    try {
+        // Check if DOMParser is available
+        if (typeof DOMParser === "undefined") {
+            log("DOMParser not available, returning text content only");
+            return html.replace(/<[^>]*>/g, ""); // Strip all HTML tags as fallback
+        }
+        // Create a temporary DOM element to parse the HTML
+        var doc_1 = new DOMParser().parseFromString(html, "text/html");
+        // Check if parsing was successful
+        if (!doc_1 || !doc_1.body) {
+            log("DOMParser failed to parse HTML, returning text content only");
+            return html.replace(/<[^>]*>/g, ""); // Strip all HTML tags as fallback
+        }
+        // List of allowed tags (whitelist approach)
+        var allowedTags_1 = ["span", "div", "p", "strong", "em", "b", "i", "u", "br"];
+        // List of allowed style properties
+        var allowedStyleProps_1 = [
+            "color", "background-color", "font-size", "font-weight", "font-style",
+            "text-align", "display", "flex", "align-items", "justify-content",
+            "gap", "margin", "padding", "width", "height", "border-radius"
+        ];
+        // Recursive function to clean nodes
+        var cleanNode_1 = function (node) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                var element_1 = node;
+                var tagName = element_1.tagName.toLowerCase();
+                // Remove if not in allowed tags, but preserve text content
+                if (!allowedTags_1.includes(tagName)) {
+                    // Replace the element with its text content
+                    var textNode = doc_1.createTextNode(element_1.textContent || "");
+                    element_1.replaceWith(textNode);
+                    return;
+                }
+                // Remove all attributes except style
+                var attributes = Array.from(element_1.attributes);
+                attributes.forEach(function (attr) {
+                    if (attr.name !== "style") {
+                        element_1.removeAttribute(attr.name);
+                    }
+                });
+                // Clean style attribute - only allow safe properties
+                if (element_1.hasAttribute("style")) {
+                    var styleText = element_1.getAttribute("style") || "";
+                    var cleanedStyles_1 = [];
+                    // Parse individual style properties
+                    styleText.split(";").forEach(function (declaration) {
+                        var _a = declaration.split(":"), prop = _a[0], valueParts = _a.slice(1);
+                        var value = valueParts.join(":").trim(); // Rejoin in case value contains colons
+                        var propTrimmed = prop.trim();
+                        if (propTrimmed && value && allowedStyleProps_1.includes(propTrimmed.toLowerCase())) {
+                            // Additional validation: ensure value doesn't contain javascript: or expression()
+                            if (!/javascript:|expression\(|@import|behavior:/i.test(value)) {
+                                cleanedStyles_1.push("".concat(propTrimmed, ": ").concat(value));
+                            }
+                        }
+                    });
+                    if (cleanedStyles_1.length > 0) {
+                        element_1.setAttribute("style", cleanedStyles_1.join("; "));
+                    }
+                    else {
+                        element_1.removeAttribute("style");
+                    }
+                }
+                // Recursively clean child nodes
+                var children = Array.from(element_1.childNodes);
+                children.forEach(function (child) { return cleanNode_1(child); });
+            }
+        };
+        // Clean each child of the body, not the body itself
+        Array.from(doc_1.body.childNodes).forEach(function (child) { return cleanNode_1(child); });
+        return doc_1.body.innerHTML;
+    }
+    catch (error) {
+        log("Error sanitizing HTML: ".concat(error));
+        // Fallback: strip all HTML tags
+        return html.replace(/<[^>]*>/g, "");
+    }
+}
+/**
+ * Safely renders subtitle text that can be plain text, JSX, or HTML string
+ */
+function renderSubtitleText(text) {
+    // If it's an HTML string, sanitize and render it using dangerouslySetInnerHTML
+    if (isHtmlString(text)) {
+        var sanitizedHtml = sanitizeHtml(text);
+        return require$$0.jsx("span", { dangerouslySetInnerHTML: { __html: sanitizedHtml } });
+    }
+    // Otherwise, render as-is (handles JSX and plain text)
+    return text;
+}
 var refreshButtonAriaLabel = "To refresh chat click on clockwise gapped circle arrow icon in top right side of widget. ";
 var minimizeButtonAriaLabel = "To minimize widget click on minus icon in top right side of widget. ";
 var closeButtonAriaLabel = "To close widget click on close icon in top right side of widget.";
 var ChatHeader = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    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;
-    var _s = React$1.useState(false), drawerOpen = _s[0], setDrawerState = _s[1]; // false initially
+    var _r = require$$1.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 = React$1.useMemo(function () { return (menuItemsRaw ? menuItemsRaw : []); }, [menuItemsRaw]);
+    var menuItems = require$$1.useMemo(function () { return (menuItemsRaw ? menuItemsRaw : []); }, [menuItemsRaw]);
     // Check if we have a right-side menu
     var hasRightMenu = showMenuRight && menuItems.length > 0;
     function toggleDrawer() {
@@ -8027,46 +8295,35 @@ var ChatHeader = function (props) {
     if (canCancel) {
         ariaLabel = "".concat(ariaLabel).concat(closeButtonAriaLabel);
     }
-    return (React$1.createElement(React$1.Fragment, null,
-        React$1.createElement("div", { className: "status-container background-header", "aria-label": ariaLabel, "aria-hidden": false },
-            showMenuLeft && menuItems.length ? (React$1.createElement(React$1.Fragment, null,
-                React$1.createElement("div", { className: "chat-footer__menu-icon" },
-                    React$1.createElement(DrawerBars, { bars: 3, tabIndex: menuButtonTabIndex, onToggle: toggleDrawer })))) : (React$1.createElement(React$1.Fragment, null)),
-            ((_b = props === null || props === void 0 ? void 0 : props.agent) === null || _b === void 0 ? void 0 : _b.avatarPath) === undefined ? (React$1.createElement("div", null)) : (React$1.createElement("div", { className: "status-container__avatar" },
-                React$1.createElement(Avatar, { entity: props.agent }))),
-            React$1.createElement("div", { className: "\n                        ".concat("status-text", "\n                        ").concat(showMenuLeft && menuItems.length
-                    ? "status-text-positionWithMenu"
-                    : ((_c = props === null || props === void 0 ? void 0 : props.agent) === null || _c === void 0 ? void 0 : _c.avatarPath) === undefined
-                        ? "status-text-positionLeftNoAvatar"
-                        : "status-text-positionLeft", "\n                        ").concat(((_d = props.config) === null || _d === void 0 ? void 0 : _d.alignTextCenter)
-                    ? "status-text-positionCenter"
-                    : "", "                     \n                        ") },
-                React$1.createElement("span", { className: "status-text-title" }, getStatusText(props.accountStatus, (_e = props.config) === null || _e === void 0 ? void 0 : _e.status)),
-                ((_g = (_f = props.config) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.enabled) && (React$1.createElement("span", { className: "status-text-subtitle" }, (_k = (_j = (_h = props.config) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.text) !== null && _k !== void 0 ? _k : ""))),
-            React$1.createElement(ButtonGroup, null,
-                hasRightMenu && (React$1.createElement(MenuButton, { onClick: toggleDrawer, tabIndex: menuButtonTabIndex })),
-                props.canRefresh && (React$1.createElement(RefreshButton, { onClick: props.refreshOnClick, tabIndex: (_m = (_l = props.config) === null || _l === void 0 ? void 0 : _l.actions) === null || _m === void 0 ? void 0 : _m.refreshTabIndex, showInLeft: false, showInRight: false })),
-                props.canMinimize && (React$1.createElement(MinimizeButton, { onClick: props.minimizeOnClick, tabIndex: (_p = (_o = props.config) === null || _o === void 0 ? void 0 : _o.actions) === null || _p === void 0 ? void 0 : _p.minimizeTabIndex, showInRight: false })),
-                props.canCancel && (React$1.createElement(CancelButton, { onClick: props.cancelOnClick, tabIndex: (_r = (_q = props.config) === null || _q === void 0 ? void 0 : _q.actions) === null || _r === void 0 ? void 0 : _r.cancelTabIndex })))),
-        drawerOpen ? (React$1.createElement("div", { className: "xa-chat-menu-container" },
-            React$1.createElement(ChatMenu, { openFrom: showMenuRight ? "right" : "left", opened: drawerOpen, tabIndex: menuItemsTabIndex, onItemClick: handleMenuItem, items: menuItems }))) : (React$1.createElement(React$1.Fragment, null))));
+    return (require$$0.jsxs(require$$0.Fragment, { children: [require$$0.jsxs("div", { className: "status-container background-header", "aria-label": ariaLabel, "aria-hidden": false, children: [showMenuLeft && menuItems.length ? (require$$0.jsx(require$$0.Fragment, { children: require$$0.jsx("div", { className: "chat-footer__menu-icon", children: require$$0.jsx(DrawerBars, { bars: 3, tabIndex: menuButtonTabIndex, onToggle: toggleDrawer }) }) })) : (require$$0.jsx(require$$0.Fragment, {})), ((_b = props === null || props === void 0 ? void 0 : props.agent) === null || _b === void 0 ? void 0 : _b.avatarPath) === undefined ? (require$$0.jsx("div", {})) : (require$$0.jsx("div", { className: "status-container__avatar", children: require$$0.jsx(Avatar, { entity: props.agent }) })), require$$0.jsxs("div", { className: "\n                        ".concat("status-text", "\n                        ").concat(showMenuLeft && menuItems.length
+                            ? "status-text-positionWithMenu"
+                            : ((_c = props === null || props === void 0 ? void 0 : props.agent) === null || _c === void 0 ? void 0 : _c.avatarPath) === undefined
+                                ? "status-text-positionLeftNoAvatar"
+                                : "status-text-positionLeft", "\n                        ").concat(((_d = props.config) === null || _d === void 0 ? void 0 : _d.alignTextCenter)
+                            ? "status-text-positionCenter"
+                            : "", "                     \n                        "), children: [require$$0.jsx("span", { className: "status-text-title", children: getStatusText(props.accountStatus, (_e = props.config) === null || _e === void 0 ? void 0 : _e.status) }), ((_g = (_f = props.config) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.enabled) && (require$$0.jsx("span", { className: "status-text-subtitle", children: renderSubtitleText((_j = (_h = props.config) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.text) }))] }), require$$0.jsxs(ButtonGroup, { children: [hasRightMenu && (require$$0.jsx(MenuButton, { onClick: toggleDrawer, tabIndex: menuButtonTabIndex })), props.canRefresh && (require$$0.jsx(RefreshButton, { onClick: props.refreshOnClick, tabIndex: (_l = (_k = props.config) === null || _k === void 0 ? void 0 : _k.actions) === null || _l === void 0 ? void 0 : _l.refreshTabIndex, showInLeft: false, showInRight: false })), props.canMinimize && (require$$0.jsx(MinimizeButton, { onClick: props.minimizeOnClick, tabIndex: (_o = (_m = props.config) === null || _m === void 0 ? void 0 : _m.actions) === null || _o === void 0 ? void 0 : _o.minimizeTabIndex, showInRight: false })), props.canCancel && (require$$0.jsx(CancelButton, { onClick: props.cancelOnClick, tabIndex: (_q = (_p = props.config) === null || _p === void 0 ? void 0 : _p.actions) === null || _q === void 0 ? void 0 : _q.cancelTabIndex }))] })] }), drawerOpen ? (require$$0.jsx("div", { className: "xa-chat-menu-container", children: require$$0.jsx(ChatMenu, { openFrom: showMenuRight ? "right" : "left", opened: drawerOpen, tabIndex: menuItemsTabIndex, onItemClick: handleMenuItem, items: menuItems }) })) : (require$$0.jsx(require$$0.Fragment, {}))] }));
 };
 
-var UnknownMessage = function () { return React$1.createElement(React$1.Fragment, null); };
+var UnknownMessage = function () { return require$$0.jsx(require$$0.Fragment, {}); };
 
 function renderAvatar(entity) {
-    return (React$1.createElement("div", { className: "xappw-chat-msg-part__avatar" },
-        React$1.createElement(Avatar, { entity: entity })));
+    return (require$$0.jsx("div", { className: "xappw-chat-msg-part__avatar", children: require$$0.jsx(Avatar, { entity: entity }) }));
 }
 var ChatMessagePart = function (props) {
-    return (React$1.createElement("div", { className: "xappw-chat-msg-part" },
-        props.showAvatar && renderAvatar(props.user),
-        props.children));
+    var _a;
+    var position = (_a = props.avatarPosition) !== null && _a !== void 0 ? _a : "left";
+    var containerClass = "xappw-chat-msg-part" +
+        (position === "below" ? " xappw-chat-msg-part--avatar-below" : "") +
+        (position === "bottom" ? " xappw-chat-msg-part--avatar-bottom" : "");
+    var user = props.user, hideUserInfo = props.hideUserInfo;
+    // Hide user info if hideUserInfo is true and position is "bottom"
+    var shouldHideUserInfo = hideUserInfo && position === "bottom";
+    return (require$$0.jsx("div", { className: containerClass, children: position === "left" ? (require$$0.jsxs(require$$0.Fragment, { children: [props.showAvatar && renderAvatar(user), props.children] })) : (require$$0.jsxs(require$$0.Fragment, { children: [props.children, props.showAvatar && !shouldHideUserInfo && (require$$0.jsxs("div", { className: "xappw-chat-msg-part__avatar-wrapper", children: [renderAvatar(user), (user === null || user === void 0 ? void 0 : user.displayName) && (require$$0.jsx("div", { className: "xappw-chat-msg-part__avatar-name", children: user.displayName }))] }))] })) }));
 };
 
 function useExecuteActionCallback() {
     var dispatch = useChatServerDispatch();
-    return React$1.useCallback(function (text, meta) {
+    return require$$1.useCallback(function (text, meta) {
         dispatch(executeAction(text, meta));
     }, [dispatch]);
 }
@@ -8076,7 +8333,7 @@ function useButtonCallback() {
     var chatDispatch = useChatDispatch();
     var visuals = reactRedux.useSelector(function (state) { return state.visuals; });
     var executeAction = useExecuteActionCallback();
-    return React$1.useCallback(function (button) {
+    return require$$1.useCallback(function (button) {
         if (button.actionUrl) {
             handleOpenUrl(button.actionUrl, chatDispatch, visuals);
         }
@@ -8109,17 +8366,15 @@ function isList(display) {
 
 var CardMiddlewareWidget = function (props) {
     var msg = props.msg, ctx = props.ctx;
-    var card = React$1.useMemo(function () { return convertFromCardDisplay(msg); }, [msg]);
+    var card = require$$1.useMemo(function () { return convertFromCardDisplay(msg); }, [msg]);
     var user = ctx.user;
     var handleButton = useButtonCallback();
-    return (React$1.createElement(ChatMessagePart, { showAvatar: true, user: user },
-        React$1.createElement("div", { className: "chat-msg" },
-            React$1.createElement(ChatCard, { card: card, onButtonClick: handleButton }))));
+    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 }) }) }));
 };
 var CardMiddleware = function (next) { return function (props) {
     var msg = props.msg, ctx = props.ctx;
     if (isCard(msg)) {
-        return React$1.createElement(CardMiddlewareWidget, { msg: msg, ctx: ctx });
+        return require$$0.jsx(CardMiddlewareWidget, { msg: msg, ctx: ctx });
     }
     return next(props);
 }; };
@@ -8161,9 +8416,9 @@ function createSubscribableArray(originalValue) {
     };
 }
 function useSubscribableArray(array) {
-    var _a = React$1.useState(array.getArray()), res = _a[0], setRes = _a[1];
+    var _a = require$$1.useState(array.getArray()), res = _a[0], setRes = _a[1];
     var mounted = useIsMounted();
-    React$1.useEffect(function () {
+    require$$1.useEffect(function () {
         var subscription = array.subscribe(function (newVal) {
             if (mounted()) {
                 setRes(newVal);
@@ -8195,7 +8450,7 @@ function useGlobalSubscribableArray(storage) {
 }
 function useLateMiddlewaresBuilder(storage) {
     var middlewares = useGlobalSubscribableArray(storage);
-    return React$1.useMemo(function () { return joinMiddlewares(middlewares); }, [middlewares]);
+    return require$$1.useMemo(function () { return joinMiddlewares(middlewares); }, [middlewares]);
 }
 var storage = createStorage(globalThis, "xappMsgMiddlewares");
 function useLateMiddleware() {
@@ -8203,16 +8458,14 @@ function useLateMiddleware() {
 }
 
 function getSvg() {
-    return (React$1.createElement("svg", { viewBox: "0 0 20 20" },
-        React$1.createElement("path", { d: "M17 17H3V3h5V1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5h-2z" }),
-        React$1.createElement("path", { d: "M19 1h-8l3.29 3.29-5.73 5.73 1.42 1.42 5.73-5.73L19 9V1z" })));
+    return (require$$0.jsxs("svg", { viewBox: "0 0 20 20", children: [require$$0.jsx("path", { d: "M17 17H3V3h5V1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5h-2z" }), require$$0.jsx("path", { d: "M19 1h-8l3.29 3.29-5.73 5.73 1.42 1.42 5.73-5.73L19 9V1z" })] }));
 }
 var ExternalLink = function (props) {
     var url = props.url;
-    var handleClick = React$1.useCallback(function (ev) {
+    var handleClick = require$$1.useCallback(function (ev) {
         ev.preventDefault();
     }, []);
-    return (React$1.createElement("a", { href: url, "aria-label": "read more", target: "_blank", rel: "noreferrer", className: props.className, onClick: handleClick }, getSvg()));
+    return (require$$0.jsx("a", { href: url, "aria-label": "read more", target: "_blank", rel: "noreferrer", className: props.className, onClick: handleClick, children: getSvg() }));
 };
 
 function firstIndex(val, patterns) {
@@ -8322,10 +8575,10 @@ function reduceLink(url, maxLength) {
 
 var SmartLink = function (props) {
     var url = props.url, className = props.className;
-    var handleClick = React$1.useCallback(function (ev) {
+    var handleClick = require$$1.useCallback(function (ev) {
         ev.preventDefault();
     }, []);
-    return (React$1.createElement("a", { href: url, "aria-label": "read more", target: "_blank", rel: "noreferrer", className: className, onClick: handleClick }, reduceLink(url, 40)));
+    return (require$$0.jsx("a", { href: url, "aria-label": "read more", target: "_blank", rel: "noreferrer", className: className, onClick: handleClick, children: reduceLink(url, 40) }));
 };
 
 var ListItem = function (props) {
@@ -8333,33 +8586,18 @@ var ListItem = function (props) {
     var item = props.item;
     var layout = props.layout || "normal";
     var url = item.url || item.imageActionUrl;
-    return (React$1.createElement(ActionItem, { className: "xappw-vlist-item-container", item: item, onButtonClick: props.onButtonClick, onExecute: props.onExecute, onOpenUrl: props.onOpenUrl },
-        React$1.createElement("div", { className: "xappw-vlist-item xappw-vlist-item--".concat(layout) },
-            React$1.createElement("div", { className: "xappw-vlist-item__description" },
-                item.title && React$1.createElement("div", { className: "xappw-vlist-item__title" },
-                    React$1.createElement("span", null, item.title)),
-                url && React$1.createElement(SmartLink, { url: url, className: "xappw-vlist-item__link" }),
-                item.subTitle && React$1.createElement("div", { className: "xappw-vlist-item__subtitle" },
-                    React$1.createElement("span", null, item.subTitle)),
-                !!((_a = item.buttons) === null || _a === void 0 ? void 0 : _a.length) && React$1.createElement(ChatActionButtons, { buttons: item.buttons, onClick: props.onButtonClick })),
-            React$1.createElement("div", { className: "xappw-vlist-item__side" },
-                url && React$1.createElement(ExternalLink, { url: "url", className: "xappw-vlist-item__external-link" }),
-                React$1.createElement(ActionItemImage, { item: item, className: "xappw-vlist-item__img", emptyImageVisible: props.emptyImageVisible })))));
+    return (require$$0.jsx(ActionItem, { className: "xappw-vlist-item-container", item: item, onButtonClick: props.onButtonClick, onExecute: props.onExecute, onOpenUrl: props.onOpenUrl, children: require$$0.jsxs("div", { className: "xappw-vlist-item xappw-vlist-item--".concat(layout), children: [require$$0.jsxs("div", { className: "xappw-vlist-item__description", children: [item.title && (require$$0.jsx("div", { className: "xappw-vlist-item__title", children: require$$0.jsx("span", { children: item.title }) })), url && require$$0.jsx(SmartLink, { url: url, className: "xappw-vlist-item__link" }), item.subTitle && (require$$0.jsx("div", { className: "xappw-vlist-item__subtitle", children: require$$0.jsx("span", { children: item.subTitle }) })), !!((_a = item.buttons) === null || _a === void 0 ? void 0 : _a.length) && (require$$0.jsx(ChatActionButtons, { buttons: item.buttons, onClick: props.onButtonClick }))] }), require$$0.jsxs("div", { className: "xappw-vlist-item__side", children: [url && require$$0.jsx(ExternalLink, { url: "url", className: "xappw-vlist-item__external-link" }), require$$0.jsx(ActionItemImage, { item: item, className: "xappw-vlist-item__img", emptyImageVisible: props.emptyImageVisible })] })] }) }));
 };
 
 var List = function (props) {
     var list = props.list;
-    var listRef = React$1.useRef(null);
+    var listRef = require$$1.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) {
-        return (React$1.createElement("div", { className: "xappw-vlist-container__item", key: "item-key-".concat(itemIndex) },
-            React$1.createElement(ListItem, { item: item, layout: titlesOnly ? "titles" : "normal", emptyImageVisible: hasImage, onExecute: props.onExecute, onButtonClick: props.onButtonClick, onOpenUrl: props.onOpenUrl })));
+        return (require$$0.jsx("div", { className: "xappw-vlist-container__item", children: require$$0.jsx(ListItem, { item: item, layout: titlesOnly ? "titles" : "normal", emptyImageVisible: hasImage, onExecute: props.onExecute, onButtonClick: props.onButtonClick, onOpenUrl: props.onOpenUrl }) }, "item-key-".concat(itemIndex)));
     });
-    return (React$1.createElement("div", { className: "xappw-vlist" },
-        React$1.createElement("div", { ref: listRef, className: "xappw-vlist-container" },
-            props.list.title && React$1.createElement("div", { className: "xappw-vlist__header" }, props.list.title),
-            listItems)));
+    return (require$$0.jsx("div", { className: "xappw-vlist", children: require$$0.jsxs("div", { ref: listRef, className: "xappw-vlist-container", children: [props.list.title && require$$0.jsx("div", { className: "xappw-vlist__header", children: props.list.title }), listItems] }) }));
 };
 
 var ListMiddlewareWidget = function (props) {
@@ -8367,38 +8605,31 @@ var ListMiddlewareWidget = function (props) {
     if (!ctx) {
         throw new TypeError("ctx not provided to ".concat(ListMiddlewareWidget.name));
     }
-    var list = React$1.useMemo(function () { return convertFromListDisplay(msg); }, [msg]);
+    var list = require$$1.useMemo(function () { return convertFromListDisplay(msg); }, [msg]);
     var executeActionCallback = useExecuteActionCallback();
-    var handleExecute = React$1.useCallback(function (ui, text, token) {
+    var handleExecute = require$$1.useCallback(function (ui, text, token) {
         executeActionCallback(text, { token: token, action: "click", ui: ui });
     }, [executeActionCallback]);
     var handleButton = useButtonCallback();
     var user = ctx.user;
-    return (React$1.createElement(ChatMessagePart, { showAvatar: false, user: user },
-        list.type === "CAROUSEL" && (React$1.createElement("div", { className: "chat-msg chat-msg--fullwidth chat-msg--no-ava" },
-            React$1.createElement(Carousel, { list: list, onExecute: handleExecute.bind(null, "carousel"), onButtonClick: handleButton, onOpenUrl: ctx.openUrl }))),
-        list.type === "LIST" && (React$1.createElement("div", { className: "chat-msg chat-msg--expand" },
-            React$1.createElement(List, { list: list, onExecute: handleExecute.bind(null, "list"), onButtonClick: handleButton, onOpenUrl: ctx.openUrl })))));
+    return (require$$0.jsxs(ChatMessagePart, { showAvatar: false, user: user, children: [list.type === "CAROUSEL" && (require$$0.jsx("div", { className: "chat-msg chat-msg--fullwidth chat-msg--no-ava", children: require$$0.jsx(Carousel, { list: list, onExecute: handleExecute.bind(null, "carousel"), onButtonClick: handleButton, onOpenUrl: ctx.openUrl }) })), list.type === "LIST" && (require$$0.jsx("div", { className: "chat-msg chat-msg--expand", children: require$$0.jsx(List, { list: list, onExecute: handleExecute.bind(null, "list"), onButtonClick: handleButton, onOpenUrl: ctx.openUrl }) }))] }));
 };
 var ListMiddleware = function (next) { return function (props) {
     var msg = props.msg, ctx = props.ctx;
     if (isList(msg)) {
-        return React$1.createElement(ListMiddlewareWidget, { msg: msg, ctx: ctx });
+        return require$$0.jsx(ListMiddlewareWidget, { msg: msg, ctx: ctx });
     }
     return next(props);
 }; };
 
 var MultiSelect = function (props) {
     var items = props.items, checked = props.checked, onChange = props.onChange;
-    var handleToggle = React$1.useCallback(function (ev) {
+    var handleToggle = require$$1.useCallback(function (ev) {
         var _a;
         var id = ev.target.value;
         onChange(__assign(__assign({}, checked), (_a = {}, _a[id] = !checked[id], _a)));
     }, [checked, onChange]);
-    return (React$1.createElement("ul", { className: "xappw-multiselect" }, items === null || items === void 0 ? void 0 : items.map(function (item) { return (React$1.createElement("li", { key: item.id },
-        React$1.createElement("label", null,
-            React$1.createElement("input", { type: "checkbox", checked: checked[item.id] || false, onChange: handleToggle, value: item.id }),
-            React$1.createElement("span", null, item.title)))); })));
+    return (require$$0.jsx("ul", { className: "xappw-multiselect", children: items === null || items === void 0 ? void 0 : items.map(function (item) { return (require$$0.jsx("li", { children: require$$0.jsxs("label", { children: [require$$0.jsx("input", { type: "checkbox", checked: checked[item.id] || false, onChange: handleToggle, value: item.id }), require$$0.jsx("span", { children: item.title })] }) }, item.id)); }) }));
 };
 
 function isMultiSelect(display) {
@@ -8409,29 +8640,25 @@ function convertToMultiSelectItems(display) {
 }
 var MultiSelectMiddlewareWidget = function (props) {
     var msg = props.msg, ctx = props.ctx;
-    var items = React$1.useMemo(function () { return convertToMultiSelectItems(msg); }, [msg]);
+    var items = require$$1.useMemo(function () { return convertToMultiSelectItems(msg); }, [msg]);
     var user = ctx.user;
-    var _a = React$1.useState({}), checked = _a[0], setChecked = _a[1];
-    var handleSubmit = React$1.useCallback(function () {
+    var _a = require$$1.useState({}), checked = _a[0], setChecked = _a[1];
+    var handleSubmit = require$$1.useCallback(function () {
         ctx.send({
             type: "custom",
             payload: JSON.stringify({
                 type: "OPTION_SELECT_REQUEST",
                 intentId: "OptionSelect",
-                selected: Object.keys(checked).map(function (k) { return ({ id: k }); })
-            })
+                selected: Object.keys(checked).map(function (k) { return ({ id: k }); }),
+            }),
         });
     }, [ctx, checked]);
-    return (React$1.createElement(ChatMessagePart, { showAvatar: true, user: user },
-        React$1.createElement("div", { className: "chat-msg" },
-            React$1.createElement("div", null,
-                React$1.createElement(MultiSelect, { items: items, checked: checked, onChange: setChecked }),
-                React$1.createElement(ActionButton, { label: "Submit", onClick: handleSubmit })))));
+    return (require$$0.jsx(ChatMessagePart, { showAvatar: true, user: user, children: require$$0.jsx("div", { className: "chat-msg", children: require$$0.jsxs("div", { children: [require$$0.jsx(MultiSelect, { items: items, checked: checked, onChange: setChecked }), require$$0.jsx(ActionButton, { label: "Submit", onClick: handleSubmit })] }) }) }));
 };
 var MultiSelectMiddleware = function (next) { return function (props) {
     var msg = props.msg, ctx = props.ctx;
     if (isMultiSelect(msg)) {
-        return React$1.createElement(MultiSelectMiddlewareWidget, { msg: msg, ctx: ctx });
+        return require$$0.jsx(MultiSelectMiddlewareWidget, { msg: msg, ctx: ctx });
     }
     return next(props);
 }; };
@@ -8443,14 +8670,14 @@ var StandardMiddlewaresBuilder = joinMiddlewares([
 ]);
 function useStandardMiddlewareBuilder() {
     var lateMiddleware = useLateMiddleware();
-    return React$1.useMemo(function () { return joinMiddlewares([
+    return require$$1.useMemo(function () { return joinMiddlewares([
         lateMiddleware,
         StandardMiddlewaresBuilder,
     ]); }, [lateMiddleware]);
 }
 function useStandardMiddleware() {
     var builder = useStandardMiddlewareBuilder();
-    return React$1.useMemo(function () { return builder(UnknownMessage); }, [builder]);
+    return require$$1.useMemo(function () { return builder(UnknownMessage); }, [builder]);
 }
 var StandardMiddlewares = StandardMiddlewaresBuilder(UnknownMessage);
 
@@ -8461,36 +8688,33 @@ function getTailSvgPath(owner) {
     return "m 0 0 v 240 h 60 c -40 -40 -60 -160 -60 -240";
 }
 function getTailSvg(owner) {
-    return (React$1.createElement("svg", { className: "chat-text-bubble__tail", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 80 240" },
-        React$1.createElement("path", { d: getTailSvgPath(owner), fill: "currentColor" })));
+    return (require$$0.jsx("svg", { className: "chat-text-bubble__tail", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 80 240", children: require$$0.jsx("path", { d: getTailSvgPath(owner), fill: "currentColor" }) }));
 }
 var ChatMessageBubble = function (props) {
     var owner = props.owner, onClick = props.onClick;
-    var handleClick = React$1.useCallback(function () {
+    var handleClick = require$$1.useCallback(function () {
         if (onClick) {
             onClick();
         }
     }, [onClick]);
-    return (React$1.createElement("div", { onClick: handleClick, className: "chat-text-bubble ".concat(owner === "mine" ? "chat-text-bubble--mine" : "chat-text-bubble--others") },
-        (props.hasTail) && getTailSvg(owner),
-        props.children));
+    return (require$$0.jsxs("div", { onClick: handleClick, className: "chat-text-bubble ".concat(owner === "mine" ? "chat-text-bubble--mine" : "chat-text-bubble--others"), children: [props.hasTail && getTailSvg(owner), props.children] }));
 };
 
 var ChatMarkdownMessage = function (props) {
     var onOpenUrl = props.onOpenUrl;
     var agentMessage = isAgent(props.message.user.nick);
-    var ref = React$1.useRef();
+    var ref = require$$1.useRef(null);
     var chatDispatch = useChatDispatch();
     var visuals = reactRedux.useSelector(function (state) { return state.visuals; });
     var html = props.message.msg.html;
-    var handleLinkClick = React$1.useCallback(function (ev) {
+    var handleLinkClick = require$$1.useCallback(function (ev) {
         if (onOpenUrl) {
             var link = ev.target;
             ev.preventDefault();
             onOpenUrl(link.href, chatDispatch, visuals);
         }
     }, [onOpenUrl]);
-    React$1.useEffect(function () {
+    require$$1.useEffect(function () {
         if (ref.current) {
             ref.current.innerHTML = html;
             if (onOpenUrl) {
@@ -8507,11 +8731,7 @@ var ChatMarkdownMessage = function (props) {
         }
         return undefined;
     }, [ref, html, onOpenUrl, handleLinkClick]);
-    return (React$1.createElement("div", { className: "chat-msg" },
-        React$1.createElement("div", { className: "chat-text-container" },
-            React$1.createElement(ChatMessageBubble, { owner: agentMessage ? "others" : "mine", hasTail: agentMessage && !props.sibling },
-                React$1.createElement("span", { className: "message-sr-only" }, "at " + props.time + (agentMessage ? " the bot said" : " the user said")),
-                React$1.createElement("div", { ref: ref })))));
+    return (require$$0.jsx("div", { className: "chat-msg", children: require$$0.jsx("div", { className: "chat-text-container", children: require$$0.jsxs(ChatMessageBubble, { owner: agentMessage ? "others" : "mine", hasTail: agentMessage && !props.sibling, children: [require$$0.jsx("span", { className: "message-sr-only", children: "at " + props.time + (agentMessage ? " the bot said" : " the user said") }), require$$0.jsx("div", { ref: ref })] }) }) }));
 };
 
 var ChatPermissionMessage = function (props) {
@@ -8525,57 +8745,59 @@ var ChatPermissionMessage = function (props) {
     var author = message.user;
     var allowLabel = "Allow";
     var denyLabel = "Deny";
-    var writeAsAgent = React$1.useCallback(function (msg) {
+    var writeAsAgent = require$$1.useCallback(function (msg) {
         ctx.write({
             type: "msg",
             user: author,
-            msg: msg
+            msg: msg,
         });
     }, [ctx, author]);
-    var writeAsUser = React$1.useCallback(function (msg) {
+    var writeAsUser = require$$1.useCallback(function (msg) {
         ctx.write({
             type: "msg",
             user: user,
-            msg: msg
+            msg: msg,
         });
     }, [ctx, user]);
-    var handleFail = React$1.useCallback(function () {
+    var handleFail = require$$1.useCallback(function () {
         ctx.send({
             type: "msg",
             user: undefined,
             msg: {
-                text: denyLabel
-            }
+                text: denyLabel,
+            },
         });
     }, [ctx]);
-    var handleSend = React$1.useCallback(function (msg) {
+    var handleSend = require$$1.useCallback(function (msg) {
         ctx.send({
             type: "permissionGrant",
             user: author,
-            msg: msg
+            msg: msg,
         });
     }, [author, ctx]);
-    var handleResult = React$1.useCallback(function (position, userMsg) {
+    var handleResult = require$$1.useCallback(function (position, userMsg) {
         handleSend({
             text: userMsg,
-            location: position ? {
-                latitude: position.coords.latitude,
-                longitude: position.coords.longitude
-            } : undefined,
-            permissionRequest: permissionRequest
+            location: position
+                ? {
+                    latitude: position.coords.latitude,
+                    longitude: position.coords.longitude,
+                }
+                : undefined,
+            permissionRequest: permissionRequest,
         });
         writeAsUser({
-            text: userMsg
+            text: userMsg,
         });
         var agentMsg = position ? permissionRequest === null || permissionRequest === void 0 ? void 0 : permissionRequest.approve : permissionRequest === null || permissionRequest === void 0 ? void 0 : permissionRequest.deny;
         if (agentMsg) {
             writeAsAgent(agentMsg);
         }
     }, [permissionRequest, writeAsUser, writeAsAgent, handleSend]);
-    var handleDeny = React$1.useCallback(function (label) {
+    var handleDeny = require$$1.useCallback(function (label) {
         handleResult(undefined, label);
     }, [handleResult]);
-    var handleAllow = React$1.useCallback(function (label) {
+    var handleAllow = require$$1.useCallback(function (label) {
         if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(function (position) {
                 handleResult(position, label);
@@ -8585,25 +8807,17 @@ var ChatPermissionMessage = function (props) {
         }
     }, [handleFail, handleResult]);
     if (!permissionRequest) {
-        return React$1.createElement(React$1.Fragment, null);
+        return require$$0.jsx(require$$0.Fragment, {});
     }
-    return (React$1.createElement("div", { className: "chat-msg" },
-        React$1.createElement("span", { className: "message-sr-only" }, "at " + props.time + (agentMessage ? " the bot said" : " the user said")),
-        React$1.createElement("div", { className: "buttons-container" },
-            React$1.createElement(ActionButton, { label: allowLabel, addClass: "button", onClick: handleAllow }),
-            React$1.createElement(ActionButton, { label: denyLabel, addClass: "button", onClick: handleDeny }))));
+    return (require$$0.jsxs("div", { className: "chat-msg", children: [require$$0.jsx("span", { className: "message-sr-only", children: "at " + props.time + (agentMessage ? " the bot said" : " the user said") }), require$$0.jsxs("div", { className: "buttons-container", children: [require$$0.jsx(ActionButton, { label: allowLabel, addClass: "button", onClick: handleAllow }), require$$0.jsx(ActionButton, { label: denyLabel, addClass: "button", onClick: handleDeny })] })] }));
 };
 
 var ChatTextMessage = function (props) {
     var message = props.message;
     var date = new Date(message.timestamp);
-    var time = date.getHours() + ':' + date.getMinutes();
+    var time = date.getHours() + ":" + date.getMinutes();
     var agentMessage = isAgent(props.message.user.nick);
-    return (React$1.createElement("div", { className: "chat-msg" },
-        React$1.createElement("div", { className: "chat-text-container" },
-            React$1.createElement(ChatMessageBubble, { owner: agentMessage ? "others" : "mine", hasTail: agentMessage && !props.sibling },
-                React$1.createElement("span", { className: "message-sr-only" }, "at " + time + (agentMessage ? " the bot said" : " the user said")),
-                React$1.createElement("span", null, message.msg.text)))));
+    return (require$$0.jsx("div", { className: "chat-msg", children: require$$0.jsx("div", { className: "chat-text-container", children: require$$0.jsxs(ChatMessageBubble, { owner: agentMessage ? "others" : "mine", hasTail: agentMessage && !props.sibling, children: [require$$0.jsx("span", { className: "message-sr-only", children: "at " + time + (agentMessage ? " the bot said" : " the user said") }), require$$0.jsx("span", { children: message.msg.text })] }) }) }));
 };
 
 var ChatScheduleWidget = function (props) {
@@ -8614,10 +8828,7 @@ var ChatScheduleWidget = function (props) {
     function handleClick() {
         openUrl(scheduleWidgetUrl, chatDispatch, visuals);
     }
-    return (React$1.createElement("div", { className: "chat-schedule-button-container" },
-        React$1.createElement("button", { className: "chat-schedule-button", onClick: handleClick },
-            React$1.createElement("i", { className: "fa fa-lg fa-calendar" }),
-            React$1.createElement("span", null, display.label || "Schedule Now!"))));
+    return (require$$0.jsx("div", { className: "chat-schedule-button-container", children: require$$0.jsxs("button", { className: "chat-schedule-button", onClick: handleClick, children: [require$$0.jsx("i", { className: "fa fa-lg fa-calendar" }), require$$0.jsx("span", { children: display.label || "Schedule Now!" })] }) }));
 };
 
 function getClassName(msg) {
@@ -8631,11 +8842,17 @@ var avaKeys = ["text", "html", "card", "list"];
  * @returns
  */
 var ChatMessage = function (props) {
+    var _a;
     var middleware = props.messageMiddleware || StandardMiddlewares;
+    var chatConfig = require$$1.useContext(ChatConfigContext);
+    // console.log(`########### chatConfig: ${JSON.stringify(chatConfig, null, 2)}`);
     var ctx = props.middlewareContext;
     var user = props.agent;
+    // Get hideUserInfo from the agent info based on the message sender's nick
+    var agentInfo = (_a = props.agents) === null || _a === void 0 ? void 0 : _a[props.message.user.nick];
+    var hideUserInfo = (agentInfo === null || agentInfo === void 0 ? void 0 : agentInfo.hideUserInfo) || false;
     function renderByType() {
-        var _a;
+        var _a, _b, _c, _d;
         var msg = props.message.msg;
         switch (props.message.type) {
             // TODO: props actually requires it to be "chat.msg". Fix prop typing?
@@ -8643,38 +8860,27 @@ var ChatMessage = function (props) {
                 // Here is the deal. If we have text (output speech), then text - card - list - options
                 // OR card OR list only. Avatar with text bubble.
                 var avaKey = avaKeys.find(function (key) { return !!msg[key]; });
-                return (React$1.createElement(React$1.Fragment, null,
-                    msg.text &&
-                        React$1.createElement(ChatMessagePart, { showAvatar: avaKey === "text", user: user },
-                            React$1.createElement(ChatTextMessage, { message: props.message, sibling: props.sibling })),
-                    msg.html &&
-                        React$1.createElement(ChatMessagePart, { showAvatar: avaKey === "html", user: user },
-                            React$1.createElement(ChatMarkdownMessage, { message: props.message, sibling: props.sibling, onOpenUrl: (_a = props.middlewareContext) === null || _a === void 0 ? void 0 : _a.openUrl })),
-                    msg.displays && middleware && msg.displays.map(function (display, index) {
-                        if (display.type === "ScheduleButton") {
-                            return (React$1.createElement(ChatScheduleWidget, { minimizeOnClick: props.minimizeOnClick, display: display }));
-                        }
-                        var Middleware = middleware;
-                        return (React$1.createElement(Middleware, { key: index, msg: display, ctx: props.middlewareContext }));
-                    }),
-                    msg.permissionRequest && ctx &&
-                        React$1.createElement(ChatMessagePart, { showAvatar: avaKey === "permissionRequest", user: user },
-                            React$1.createElement(ChatPermissionMessage, { message: props.message, sibling: props.sibling, ctx: ctx }))));
+                return (require$$0.jsxs(require$$0.Fragment, { children: [msg.text &&
+                            require$$0.jsx(ChatMessagePart, { showAvatar: avaKey === "text", user: user, avatarPosition: (_a = chatConfig.env.theme.messages) === null || _a === void 0 ? void 0 : _a.avatarPosition, hideUserInfo: hideUserInfo, children: require$$0.jsx(ChatTextMessage, { message: props.message, sibling: props.sibling }) }), msg.html &&
+                            require$$0.jsx(ChatMessagePart, { showAvatar: avaKey === "html", user: user, avatarPosition: (_b = chatConfig.env.theme.messages) === null || _b === void 0 ? void 0 : _b.avatarPosition, hideUserInfo: hideUserInfo, children: require$$0.jsx(ChatMarkdownMessage, { message: props.message, sibling: props.sibling, onOpenUrl: (_c = props.middlewareContext) === null || _c === void 0 ? void 0 : _c.openUrl }) }), msg.displays && middleware && msg.displays.map(function (display, index) {
+                            if (display.type === "ScheduleButton") {
+                                return (require$$0.jsx(ChatScheduleWidget, { minimizeOnClick: props.minimizeOnClick, display: display }));
+                            }
+                            var Middleware = middleware;
+                            return (require$$0.jsx(Middleware, { msg: display, ctx: props.middlewareContext }, index));
+                        }), msg.permissionRequest && ctx &&
+                            require$$0.jsx(ChatMessagePart, { showAvatar: avaKey === "permissionRequest", user: user, avatarPosition: (_d = chatConfig.env.theme.messages) === null || _d === void 0 ? void 0 : _d.avatarPosition, hideUserInfo: hideUserInfo, children: require$$0.jsx(ChatPermissionMessage, { message: props.message, sibling: props.sibling, ctx: ctx }) })] }));
         }
-        return (React$1.createElement(React$1.Fragment, null));
+        return (require$$0.jsx(require$$0.Fragment, {}));
     }
     function renderTimestamp() {
         var timestamp = props.message.timestamp;
         var ts = new Date(timestamp);
         var timeAgo = getTimeAgo(ts);
-        return (React$1.createElement("div", { className: "chat-msg-timestamp ".concat(isAgent(props.message.user.nick) ? "agent" : "visitor") },
-            React$1.createElement("span", null, timeAgo)));
+        return (require$$0.jsx("div", { className: "chat-msg-timestamp ".concat(isAgent(props.message.user.nick) ? "agent" : "visitor"), children: require$$0.jsx("span", { children: timeAgo }) }));
     }
     // empty
-    return (React$1.createElement("div", { className: "chat-msg-container-wrapper ".concat(isAgent(props.message.user.nick) ? "agent" : "visitor", " ").concat(props.sibling ? "sibling" : "") },
-        React$1.createElement("div", { className: "chat-msg-container ".concat(getClassName(props.message)) },
-            renderByType(),
-            renderTimestamp())));
+    return (require$$0.jsx("div", { className: "chat-msg-container-wrapper ".concat(isAgent(props.message.user.nick) ? "agent" : "visitor", " ").concat(props.sibling ? "sibling" : ""), children: require$$0.jsxs("div", { className: "chat-msg-container ".concat(getClassName(props.message)), children: [renderByType(), renderTimestamp()] }) }));
 };
 
 /**
@@ -8718,7 +8924,7 @@ function checkSessionExpiration(duration, lastMessageTimestamp, _lastTimestamp)
 }
 
 function useExternalScript(url) {
-    React$1.useEffect(function () {
+    require$$1.useEffect(function () {
         if (!url) {
             return;
         }
@@ -8760,7 +8966,7 @@ function useChatServerVisitorId() {
     });
     var visitorAccessToken = reactRedux.useSelector(function (state) { return state.accessToken; });
     var attributes = reactRedux.useSelector(function (state) { return state.attributes; });
-    return React$1.useMemo(function () { return ({
+    return require$$1.useMemo(function () { return ({
         dispatch: dispatch,
         visitorId: clientVisitorId,
         accessToken: visitorAccessToken,
@@ -8771,11 +8977,11 @@ function useChatServerVisitorId() {
 //send whenever server settings or visitor id changes
 function useGreeting(active) {
     var curr = useChatServerVisitorId();
-    var snapshotRef = React$1.useRef(null);
-    var ctx = React$1.useContext(ChatConfigContext);
+    var snapshotRef = require$$1.useRef(null);
+    var ctx = require$$1.useContext(ChatConfigContext);
     var isAdmin = ctx.env.isAdmin;
     var sessionId = reactRedux.useSelector(function (state) { return state.sessionId; });
-    React$1.useEffect(function () {
+    require$$1.useEffect(function () {
         if (active) {
             if (snapshotRef.current !== curr) {
                 snapshotRef.current = curr;
@@ -8820,18 +9026,18 @@ function norm(index, len) {
     return (index + len) % len;
 }
 function useSuggestions(search, context) {
-    var _a = React$1.useState(), suggestions = _a[0], setSuggestions = _a[1];
-    var _b = React$1.useState(-1), suggestionIndex = _b[0], setSuggestionIndex = _b[1];
-    var _c = React$1.useState(search), query = _c[0], setQuery = _c[1];
-    var _d = React$1.useState(context), contextState = _d[0], setContextState = _d[1];
-    React$1.useEffect(function () {
+    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 () {
         setQuery(search);
     }, [search]);
-    React$1.useEffect(function () {
+    require$$1.useEffect(function () {
         setContextState(context);
     }, [context]);
-    var suggestionItem = React$1.useMemo(function () { return suggestions ? findItemByIndex_1(suggestions, suggestionIndex) : undefined; }, [suggestions, suggestionIndex]);
-    var shift = React$1.useCallback(function (delta) {
+    var suggestionItem = require$$1.useMemo(function () { return suggestions ? findItemByIndex_1(suggestions, suggestionIndex) : undefined; }, [suggestions, suggestionIndex]);
+    var shift = require$$1.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); });
@@ -8840,7 +9046,7 @@ function useSuggestions(search, context) {
             setSuggestionIndex(-1);
         }
     }, [suggestions]);
-    var execute = React$1.useCallback(function (cmd) {
+    var execute = require$$1.useCallback(function (cmd) {
         switch (cmd) {
             case "prev":
                 shift(-1);
@@ -8857,7 +9063,7 @@ function useSuggestions(search, context) {
     }, [shift]);
     var suggestionsResponse = useSuggestionsFetch(query || "", contextState);
     var suggestionsData = suggestionsResponse.state === "success" ? suggestionsResponse.data : undefined;
-    var raw = React$1.useMemo(function () {
+    var raw = require$$1.useMemo(function () {
         return suggestionsData ?
             parseSuggestionsResponse_1(suggestionsData, -1).map(function (suggestion) {
                 return {
@@ -8866,14 +9072,14 @@ function useSuggestions(search, context) {
                 };
             }) : undefined;
     }, [suggestionsData]);
-    React$1.useEffect(function () {
+    require$$1.useEffect(function () {
         var prev = suggestionItem;
         setSuggestions(raw);
         if (!prev || !raw) {
             setSuggestionIndex(-1);
         }
     }, [raw, suggestionItem]);
-    return React$1.useMemo(function () { return ({
+    return require$$1.useMemo(function () { return ({
         suggestions: suggestions,
         index: suggestionIndex,
         execute: execute,
@@ -8883,11 +9089,11 @@ function useSuggestions(search, context) {
 
 var AdminBar = function (_a) {
     var onAdminJoin = _a.onAdminJoin;
-    var name = React$1.useRef(null);
+    var name = require$$1.useRef(null);
     // We can manage this locally
     // const hasAdminJoined = useSelector<ChatState, boolean | undefined>(state => state.hasAdminJoined);
-    var _b = React$1.useState(false), joined = _b[0], setJoined = _b[1];
-    var _c = React$1.useState(""), inputName = _c[0], setInputName = _c[1];
+    var _b = require$$1.useState(false), joined = _b[0], setJoined = _b[1];
+    var _c = require$$1.useState(""), inputName = _c[0], setInputName = _c[1];
     function handleInputChange(event) {
         setInputName(event.target.value);
     }
@@ -8909,18 +9115,12 @@ var AdminBar = function (_a) {
         }
     }
     function renderJoin() {
-        return (React$1.createElement("form", { className: "xappw-admin-input-form", onSubmit: onSubmit },
-            React$1.createElement("div", { className: "xappw-admin-input-form__buttons" },
-                React$1.createElement(ActionButton, { addClass: "xappw-admin-input-form__btn", type: "submit", label: "Join", disable: disable })),
-            React$1.createElement("div", { className: "xappw-admin-input" },
-                React$1.createElement("input", { ref: name, id: "adminBarInput", placeholder: "Type your name here...", className: "xappw-admin-input__input", onChange: handleInputChange }))));
+        return (require$$0.jsxs("form", { className: "xappw-admin-input-form", onSubmit: onSubmit, children: [require$$0.jsx("div", { className: "xappw-admin-input-form__buttons", children: require$$0.jsx(ActionButton, { addClass: "xappw-admin-input-form__btn", type: "submit", label: "Join", disable: disable }) }), require$$0.jsx("div", { className: "xappw-admin-input", children: require$$0.jsx("input", { ref: name, id: "adminBarInput", placeholder: "Type your name here...", className: "xappw-admin-input__input", onChange: handleInputChange }) })] }));
     }
     function renderLeave() {
-        return (React$1.createElement("form", { className: "xappw-admin-input-form", onSubmit: onSubmit },
-            React$1.createElement("div", { className: "xappw-admin-input-form__buttons" },
-                React$1.createElement(ActionButton, { addClass: "xappw-admin-input-form__btn", type: "submit", label: "Leave" }))));
+        return (require$$0.jsx("form", { className: "xappw-admin-input-form", onSubmit: onSubmit, children: require$$0.jsx("div", { className: "xappw-admin-input-form__buttons", children: require$$0.jsx(ActionButton, { addClass: "xappw-admin-input-form__btn", type: "submit", label: "Leave" }) }) }));
     }
-    return (React$1.createElement("div", { className: "xappw-admin-input-container visible" }, joined ? renderLeave() : renderJoin()));
+    return (require$$0.jsx("div", { className: "xappw-admin-input-container visible", children: joined ? renderLeave() : renderJoin() }));
 };
 
 var classnames = {exports: {}};
@@ -9019,39 +9219,32 @@ var MarkdownBuilder = function (_a) {
         var level = hashes.length;
         return "<h".concat(level, ">").concat(headerText, "</h").concat(level, ">");
     });
-    return (React$1.createElement("div", { className: containerClass, dangerouslySetInnerHTML: { __html: parsedText } }));
+    return (require$$0.jsx("div", { className: containerClass, dangerouslySetInnerHTML: { __html: parsedText } }));
 };
 
 var ChatBranding = function (_a) {
     var text = _a.text;
     var regex = /\[([^\]]+)\]\((https?:\/\/[^\)]+)\)/;
     var match = text === null || text === void 0 ? void 0 : text.match(regex);
-    return match ? React$1.createElement(MarkdownBuilder, { text: text, applyBrandingClass: true, linkColor: "white" })
-        :
-            React$1.createElement("div", { className: "chat-footer__branding", style: { color: "white" } }, text);
+    return match ? (require$$0.jsx(MarkdownBuilder, { text: text, applyBrandingClass: true, linkColor: "white" })) : (require$$0.jsx("div", { className: "chat-footer__branding", style: { color: "white" }, children: text }));
 };
 
 var CloseIcon = function () {
     // Sergey, I added this style, you will probably want to change it to be more appropriate
-    return (React$1.createElement("svg", { style: { color: "grey", paddingRight: "5px" }, xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 16 16" },
-        React$1.createElement("path", { d: "M1.293 1.293a1 1 0 0 1 1.414 0L8 6.586l5.293-5.293a1 1 0 1 1 1.414 1.414L9.414 8l5.293 5.293a1 1 0 0 1-1.414 1.414L8 9.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L6.586 8 1.293 2.707a1 1 0 0 1 0-1.414z" })));
+    return (require$$0.jsx("svg", { style: { color: "grey", paddingRight: "5px" }, xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 16 16", children: require$$0.jsx("path", { d: "M1.293 1.293a1 1 0 0 1 1.414 0L8 6.586l5.293-5.293a1 1 0 1 1 1.414 1.414L9.414 8l5.293 5.293a1 1 0 0 1-1.414 1.414L8 9.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L6.586 8 1.293 2.707a1 1 0 0 1 0-1.414z" }) }));
 };
 
 var LeftDownArrowIcon = function () {
-    return (React$1.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 16 16" },
-        React$1.createElement("path", { fillRule: "evenodd", d: "M2 13.5a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 0-1H3.707L13.854 2.854a.5.5 0 0 0-.708-.708L3 12.293V7.5a.5.5 0 0 0-1 0v6z" })));
+    return (require$$0.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 16 16", children: require$$0.jsx("path", { fillRule: "evenodd", d: "M2 13.5a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 0-1H3.707L13.854 2.854a.5.5 0 0 0-.708-.708L3 12.293V7.5a.5.5 0 0 0-1 0v6z" }) }));
 };
 
 var SendIcon = function () {
-    return (React$1.createElement("svg", { viewBox: "80.208 98.129 313.069 282.823", xmlns: "http://www.w3.org/2000/svg" },
-        React$1.createElement("g", { transform: "matrix(0.024498, 0, 0, -0.038359, 79.83091, 381.182404)", fill: "currentColor", stroke: "none" },
-            React$1.createElement("path", { d: "M12670 7345 c-63 -18 -272 -77 -465 -130 -192 -53 -478 -132 -635 -175 -508 -141 -1091 -302 -2345 -649 -676 -187 -2038 -563 -3025 -836 -987 -273 -2072 -573 -2410 -666 -338 -94 -802 -222 -1030 -285 -1857 -514 -2579 -714 -2684 -742 -38 -10 -65 -21 -60 -24 5 -3 67 -22 139 -41 72 -20 326 -90 565 -157 239 -67 611 -170 825 -230 215 -60 586 -163 825 -230 239 -67 491 -137 560 -156 l126 -34 974 439 c1397 629 4128 1858 6050 2724 910 410 1826 822 2035 917 209 94 387 173 395 176 35 10 -66 -39 -8200 -3928 -586 -280 -1068 -512 -1071 -516 -3 -4 33 -117 82 -252 76 -213 355 -996 765 -2147 65 -183 120 -330 122 -329 1 2 114 558 250 1236 l248 1233 3455 2064 c1900 1135 3670 2193 3933 2351 264 158 491 293 505 301 62 33 -5 -12 -271 -182 -1671 -1070 -7188 -4613 -7188 -4617 0 -7 3661 -2455 3669 -2454 4 1 3713 6853 3977 7347 8 15 11 27 7 26 -5 0 -60 -15 -123 -34z" }),
-            React$1.createElement("path", { d: "M5030 2232 c-15 -61 -479 -1861 -531 -2058 -21 -83 -39 -154 -39 -158 0 -3 369 330 820 740 452 411 817 750 813 754 -11 10 -1025 754 -1039 763 -8 4 -16 -10 -24 -41z" }))));
+    return (require$$0.jsx("svg", { viewBox: "80.208 98.129 313.069 282.823", xmlns: "http://www.w3.org/2000/svg", children: require$$0.jsxs("g", { transform: "matrix(0.024498, 0, 0, -0.038359, 79.83091, 381.182404)", fill: "currentColor", stroke: "none", children: [require$$0.jsx("path", { d: "M12670 7345 c-63 -18 -272 -77 -465 -130 -192 -53 -478 -132 -635 -175 -508 -141 -1091 -302 -2345 -649 -676 -187 -2038 -563 -3025 -836 -987 -273 -2072 -573 -2410 -666 -338 -94 -802 -222 -1030 -285 -1857 -514 -2579 -714 -2684 -742 -38 -10 -65 -21 -60 -24 5 -3 67 -22 139 -41 72 -20 326 -90 565 -157 239 -67 611 -170 825 -230 215 -60 586 -163 825 -230 239 -67 491 -137 560 -156 l126 -34 974 439 c1397 629 4128 1858 6050 2724 910 410 1826 822 2035 917 209 94 387 173 395 176 35 10 -66 -39 -8200 -3928 -586 -280 -1068 -512 -1071 -516 -3 -4 33 -117 82 -252 76 -213 355 -996 765 -2147 65 -183 120 -330 122 -329 1 2 114 558 250 1236 l248 1233 3455 2064 c1900 1135 3670 2193 3933 2351 264 158 491 293 505 301 62 33 -5 -12 -271 -182 -1671 -1070 -7188 -4613 -7188 -4617 0 -7 3661 -2455 3669 -2454 4 1 3713 6853 3977 7347 8 15 11 27 7 26 -5 0 -60 -15 -123 -34z" }), require$$0.jsx("path", { d: "M5030 2232 c-15 -61 -479 -1861 -531 -2058 -21 -83 -39 -154 -39 -158 0 -3 369 330 820 740 452 411 817 750 813 754 -11 10 -1025 754 -1039 763 -8 4 -16 -10 -24 -41z" })] }) }));
 };
 
 var SendButton = function (props) {
     var _a = props.disabled, disabled = _a === void 0 ? false : _a;
-    var _b = React$1.useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    var _b = require$$1.useState(false), isHovered = _b[0], setIsHovered = _b[1];
     // Determine which icon to show based on state
     var getIconSrc = function () {
         if (disabled && props.sendButtonIconDisabled) {
@@ -9062,14 +9255,13 @@ var SendButton = function (props) {
         }
         return props.sendButtonIcon;
     };
-    return (React$1.createElement(React$1.Fragment, null, !props.sendButtonIcon ? (React$1.createElement(IconButton_1, { className: "xappw-send-button ".concat(props.className || "", " ").concat(disabled ? 'disabled' : ''), tabIndex: props.tabIndex, onClick: disabled ? undefined : props.onClick, icon: SendIcon })) : (React$1.createElement("button", { className: "xappw-custom-send-button ".concat(disabled ? 'disabled' : ''), tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, onClick: props.onClick, disabled: disabled, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
-        React$1.createElement("img", { src: getIconSrc(), alt: "Send button", draggable: false, className: "send-button-icon" })))));
+    return (require$$0.jsx(require$$0.Fragment, { children: !props.sendButtonIcon ? (require$$0.jsx(IconButton_1, { className: "xappw-send-button ".concat(props.className || "", " ").concat(disabled ? 'disabled' : ''), tabIndex: props.tabIndex, onClick: disabled ? undefined : props.onClick, icon: SendIcon })) : (require$$0.jsx("button", { className: "xappw-custom-send-button ".concat(disabled ? 'disabled' : ''), tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, onClick: props.onClick, disabled: disabled, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, children: require$$0.jsx("img", { src: getIconSrc(), alt: "Send button", draggable: false, className: "send-button-icon" }) })) }));
 };
 
 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 = React$1.useState(false), dragover = _c[0], setDragover = _c[1];
+    var _c = require$$1.useState(false), dragover = _c[0], setDragover = _c[1];
     function onDragOver(event) {
         setDragover(true);
         event.preventDefault();
@@ -9082,17 +9274,17 @@ var Input = function (props) {
     function onDragLeave() {
         setDragover(false);
     }
-    var handleOnSubmit = React$1.useCallback(function (event) {
+    var handleOnSubmit = require$$1.useCallback(function (event) {
         event && event.preventDefault();
         onSubmit(value); // send to the widget
     }, [value, onSubmit]);
-    var handleClear = React$1.useCallback(function () {
+    var handleClear = require$$1.useCallback(function () {
         onChange({
             text: "",
             formats: [],
         });
     }, [onChange]);
-    var handleKeyDown = React$1.useCallback(function (event) {
+    var handleKeyDown = require$$1.useCallback(function (event) {
         if (suggestion) {
             if (event.key === "End" || event.key === "ArrowRight" || event.key === "Enter") {
                 onChange(suggestion);
@@ -9114,38 +9306,33 @@ var Input = function (props) {
             }
         }
     }, [suggestion, onChange, onSuggestionCommand]);
-    return (React$1.createElement("div", { className: "xappw-input-container ".concat(props.addClass, " ").concat(dragover ? "drag-drop-zone" : ""), "aria-label": "To start typing click on rounded rectangle at the bottom of widget. To send your message click icon on right side of rounded rectangle at the bottom of widget" +
+    return (require$$0.jsx("div", { className: "xappw-input-container ".concat(props.addClass, " ").concat(dragover ? "drag-drop-zone" : ""), "aria-label": "To start typing click on rounded rectangle at the bottom of widget. To send your message click icon on right side of rounded rectangle at the bottom of widget" +
             value.text
             ? "To clear input field click on clear icon on the left of send button"
-            : "", "aria-hidden": false, onDrop: onDrop, onDragOver: onDragOver, onDragLeave: onDragLeave },
-        React$1.createElement("form", { className: "xappw-input-form", onSubmit: handleOnSubmit },
-            React$1.createElement(RichInput_1, { key: "input", id: "chatWidgetInput", className: "xappw-input", placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "type your question here", tabIndex: inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.tabIndex, onInput: onChange, onChange: onChange, onKeyDown: handleKeyDown, 
-                // onFocus={onFocus}
-                value: value, spellCheck: true }),
-            React$1.createElement("div", { className: "xappw-input-form__buttons" },
-                value.text && (React$1.createElement(IconButton_1, { icon: CloseIcon, tabIndex: (_a = footerConfig === null || footerConfig === void 0 ? void 0 : footerConfig.clearButton) === null || _a === void 0 ? void 0 : _a.tabIndex, className: "xappw-input-form__btn", onClick: handleClear })),
-                React$1.createElement(SendButton, { className: "xappw-input-form__btn", sendButtonIcon: sendButtonIcon, sendButtonIconHover: sendButtonIconHover, sendButtonIconDisabled: sendButtonIconDisabled, tabIndex: (_b = footerConfig === null || footerConfig === void 0 ? void 0 : footerConfig.sendButton) === null || _b === void 0 ? void 0 : _b.tabIndex, disabled: !value.text, onClick: handleOnSubmit })))));
+            : "", "aria-hidden": false, onDrop: onDrop, onDragOver: onDragOver, onDragLeave: onDragLeave, children: require$$0.jsxs("form", { className: "xappw-input-form", onSubmit: handleOnSubmit, children: [require$$0.jsx(RichInput_1, { id: "chatWidgetInput", className: "xappw-input", placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "type your question here", tabIndex: inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.tabIndex, onInput: onChange, onChange: onChange, onKeyDown: handleKeyDown, 
+                    // onFocus={onFocus}
+                    value: value, spellCheck: true }, "input"), require$$0.jsxs("div", { className: "xappw-input-form__buttons", children: [value.text && (require$$0.jsx(IconButton_1, { icon: CloseIcon, tabIndex: (_a = footerConfig === null || footerConfig === void 0 ? void 0 : footerConfig.clearButton) === null || _a === void 0 ? void 0 : _a.tabIndex, className: "xappw-input-form__btn", onClick: handleClear })), require$$0.jsx(SendButton, { className: "xappw-input-form__btn", sendButtonIcon: sendButtonIcon, sendButtonIconHover: sendButtonIconHover, sendButtonIconDisabled: sendButtonIconDisabled, tabIndex: (_b = footerConfig === null || footerConfig === void 0 ? void 0 : footerConfig.sendButton) === null || _b === void 0 ? void 0 : _b.tabIndex, disabled: !value.text, onClick: handleOnSubmit })] })] }) }));
 };
 
 function createActions(onItemUse) {
     return function (innerProps) {
         var data = innerProps.data;
         var canUse = data.type !== "FAQ";
-        var handleUse = React$1.useCallback(function (ev) {
+        var handleUse = require$$1.useCallback(function (ev) {
             onItemUse(data);
             ev.stopPropagation();
         }, [data]);
         if (!canUse) {
-            return React$1.createElement(React$1.Fragment, null);
+            return require$$0.jsx(require$$0.Fragment, {});
         }
-        return (React$1.createElement(IconButton_1, { className: "xappw-suggestions__use", onClick: handleUse, icon: LeftDownArrowIcon }));
+        return (require$$0.jsx(IconButton_1, { className: "xappw-suggestions__use", onClick: handleUse, icon: LeftDownArrowIcon }));
     };
 }
 var Suggestions = function (props) {
     var data = props.data, onItemUse = props.onItemUse, searchTerms = props.searchTerms;
-    var _a = React$1.useState(), fixedSuggestions = _a[0], setFixedSuggestions = _a[1];
-    var _b = React$1.useState(), activeItem = _b[0], setActiveItem = _b[1];
-    React$1.useEffect(function () {
+    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 () {
         if (data) {
             setFixedSuggestions(data);
         }
@@ -9156,8 +9343,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 = React$1.useMemo(function () { return findItemByIndex_1(data, currentIndex); }, [data, currentIndex]);
-    var handleSpanClick = React$1.useCallback(function (target, span) {
+    var item = require$$1.useMemo(function () { return findItemByIndex_1(data, currentIndex); }, [data, currentIndex]);
+    var handleSpanClick = require$$1.useCallback(function (target, span) {
         if (span.type === "inputText") {
             onItemUse(target);
             setActiveItem(undefined);
@@ -9165,31 +9352,30 @@ var Suggestions = function (props) {
         }
         return undefined;
     }, [onItemUse]);
-    React$1.useEffect(function () {
+    require$$1.useEffect(function () {
         setActiveItem(item);
     }, [item]);
-    var actions = React$1.useMemo(function () { return createActions(onItemUse); }, [onItemUse]);
+    var actions = require$$1.useMemo(function () { return createActions(onItemUse); }, [onItemUse]);
     var transformContent = function (content) {
         var lines = content.split('\n');
         return lines.map(function (line) {
             if (line) {
-                return React$1.createElement(MarkdownBuilder, { text: line });
+                return require$$0.jsx(MarkdownBuilder, { text: line });
             }
-            return React$1.createElement(React$1.Fragment, null);
+            return require$$0.jsx(require$$0.Fragment, {});
         });
     };
-    return (React$1.createElement("div", { className: "xappw-suggestions ".concat(props.className || "") },
-        (activeItem === null || activeItem === void 0 ? void 0 : activeItem.content) && React$1.createElement("div", { className: "xappw-suggestions__answer" }, transformContent(activeItem.content)),
-        fixedSuggestions && fixedSuggestions.length > 0 &&
-            React$1.createElement(SuggestionsList_1, { suggestions: fixedSuggestions, index: currentIndex, className: "xappw-suggestions__groups", itemActions: actions, onItemClick: props.onItemClick, onItemHover: setActiveItem, onSpanClick: handleSpanClick })));
+    var containerClass = "xappw-suggestions ".concat(props.className || "", " ").concat(props.hasWsButton ? "xappw-suggestions--with-ws-button" : "").trim();
+    return (require$$0.jsxs("div", { className: containerClass, children: [(activeItem === null || activeItem === void 0 ? void 0 : activeItem.content) && require$$0.jsx("div", { className: "xappw-suggestions__answer", children: transformContent(activeItem.content) }), fixedSuggestions && fixedSuggestions.length > 0 &&
+                require$$0.jsx(SuggestionsList_1, { suggestions: fixedSuggestions, index: currentIndex, className: "xappw-suggestions__groups", itemActions: actions, onItemClick: props.onItemClick, onItemHover: setActiveItem, onSpanClick: handleSpanClick })] }));
 };
 
 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, onSubmit = props.onSubmit;
+    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, onSubmit = props.onSubmit;
     var innerDispatch = useChatDispatch();
-    var _d = React$1.useState(false), drawerOpen = _d[0], setDrawerState = _d[1]; // false initially
-    var _e = React$1.useState(), suggestionSearch = _e[0], setSuggestionSearch = _e[1];
+    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 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";
@@ -9197,12 +9383,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 = React$1.useMemo(function () { return menuItemsRaw ? menuItemsRaw : []; }, [menuItemsRaw]);
+    var menuItems = require$$1.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 = React$1.useState(!isAdmin), enableInput = _f[0], setEnableInput = _f[1];
-    var _g = React$1.useState({
+    var _f = require$$1.useState(!isAdmin), enableInput = _f[0], setEnableInput = _f[1];
+    var _g = require$$1.useState({
         text: "",
         formats: []
     }), input = _g[0], setInput = _g[1];
@@ -9223,7 +9409,7 @@ var ChatFooter = function (props) {
         setSuggestionSearch(val.text);
     }
     // Clears out suggestion and input text
-    var handleSubmit = React$1.useCallback(function (message) {
+    var handleSubmit = require$$1.useCallback(function (message) {
         // Clears out the suggestions
         setSuggestionSearch("");
         // Clears out the input
@@ -9233,29 +9419,20 @@ var ChatFooter = function (props) {
         });
         onSubmit(message.text);
     }, [onSubmit]);
-    var handleItemClick = React$1.useCallback(function (data) {
+    var handleItemClick = require$$1.useCallback(function (data) {
         handleSubmit(data);
     }, [handleSubmit]);
-    var handleItemUse = React$1.useCallback(function (data) {
+    var handleItemUse = require$$1.useCallback(function (data) {
         setInput(data);
         setSuggestionSearch(data.text);
     }, []);
     var handleAdminJoin = function (status) {
         setEnableInput(status);
     };
-    return (React$1.createElement("div", { className: "chat-footer background-footer", "aria-label": menuItems.length ? "to open menu click a button above the rounded rectangle at the bottom of widget" : "", "aria-hidden": false },
-        showMenu && menuItems.length ?
-            React$1.createElement(React$1.Fragment, null,
-                drawerOpen ? React$1.createElement(ChatMenu, { opened: drawerOpen, tabIndex: menuItemsTabIndex, onItemClick: handleMenuItem, items: menuItems }) : React$1.createElement(React$1.Fragment, null),
-                React$1.createElement("div", { className: "chat-footer__menu-icon" },
-                    React$1.createElement(DrawerBars, { tabIndex: menuButtonTabIndex, onToggle: toggleDrawer }))) : React$1.createElement(React$1.Fragment, null),
-        React$1.createElement(Suggestions, { className: "xappw-chat-footer__suggestions", data: suggestions.suggestions, index: suggestions.index, searchTerms: suggestionSearch, onItemClick: handleItemClick, onItemUse: handleItemUse }),
-        isAdmin && isChatting && visible && React$1.createElement(AdminBar, { onAdminJoin: handleAdminJoin }),
-        React$1.createElement("div", { style: { pointerEvents: enableInput ? "auto" : "none", opacity: enableInput ? 1 : 0.5 } },
-            React$1.createElement(Input, { addClass: "chat-footer__input " + (isChatting && visible ? "visible" : ""), suggestion: suggestions.item, value: input, placeholder: placeholder, sendButtonIcon: sendButtonIcon, sendButtonIconHover: sendButtonIconHover, sendButtonIconDisabled: sendButtonIconDisabled, footerConfig: footerConfig, inputConfig: inputConfig, onSubmit: handleSubmit, onChange: handleChange, onSuggestionCommand: suggestions.execute, 
-                // onFocus={this.inputOnFocus}
-                onFileUpload: props.onFileUpload })),
-        brandingEnabled && brandingText && React$1.createElement(ChatBranding, { text: brandingText })));
+    return (require$$0.jsxs("div", { className: "chat-footer background-footer", "aria-label": menuItems.length ? "to open menu click a button above the rounded rectangle at the bottom of widget" : "", "aria-hidden": false, children: [showMenu && menuItems.length ?
+                require$$0.jsxs(require$$0.Fragment, { children: [drawerOpen ? require$$0.jsx(ChatMenu, { opened: drawerOpen, tabIndex: menuItemsTabIndex, onItemClick: handleMenuItem, items: menuItems }) : require$$0.jsx(require$$0.Fragment, {}), require$$0.jsx("div", { className: "chat-footer__menu-icon", children: require$$0.jsx(DrawerBars, { tabIndex: menuButtonTabIndex, onToggle: toggleDrawer }) })] }) : require$$0.jsx(require$$0.Fragment, {}), require$$0.jsx(Suggestions, { className: "xappw-chat-footer__suggestions", data: suggestions.suggestions, index: suggestions.index, searchTerms: suggestionSearch, hasWsButton: hasWsButton, onItemClick: handleItemClick, onItemUse: handleItemUse }), isAdmin && isChatting && visible && require$$0.jsx(AdminBar, { onAdminJoin: handleAdminJoin }), require$$0.jsx("div", { style: { pointerEvents: enableInput ? "auto" : "none", opacity: enableInput ? 1 : 0.5 }, children: require$$0.jsx(Input, { addClass: "chat-footer__input " + (isChatting && visible ? "visible" : ""), suggestion: suggestions.item, value: input, placeholder: placeholder, sendButtonIcon: sendButtonIcon, sendButtonIconHover: sendButtonIconHover, sendButtonIconDisabled: sendButtonIconDisabled, footerConfig: footerConfig, inputConfig: inputConfig, onSubmit: handleSubmit, onChange: handleChange, onSuggestionCommand: suggestions.execute, 
+                    // onFocus={this.inputOnFocus}
+                    onFileUpload: props.onFileUpload }) }), brandingEnabled && brandingText && require$$0.jsx(ChatBranding, { text: brandingText })] }));
 };
 
 var noop = function () { };
@@ -9288,64 +9465,43 @@ var MiddlewareContextFactory = /** @class */ (function () {
 
 var CardContainer = function (props) {
     function renderIcon() {
-        var isString = typeof (props.icon) === "string";
-        return (React$1.createElement("div", { className: "card-container__icon" }, !isString && props.icon));
-    }
-    return (React$1.createElement("div", { className: "card-container ".concat(props.addClass) },
-        renderIcon(),
-        React$1.createElement("div", { className: "card-container__content ".concat(props.contentAddClass) },
-            React$1.createElement("div", { className: "card-container__title" }, props.title),
-            props.children)));
+        var isString = typeof props.icon === "string";
+        return require$$0.jsx("div", { className: "card-container__icon", children: !isString && props.icon });
+    }
+    return (require$$0.jsxs("div", { className: "card-container ".concat(props.addClass), children: [renderIcon(), require$$0.jsxs("div", { className: "card-container__content ".concat(props.contentAddClass), children: [require$$0.jsx("div", { className: "card-container__title", children: props.title }), props.children] })] }));
 };
 
-var defaultProps$2 = {
-    agent: {},
-    hasRating: false,
-    shouldDisplay: true,
-    onRate: function () {
+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
-    }
-};
-var ChatRating = function (props) {
-    if (props === void 0) { props = defaultProps$2; }
-    var onRate = props.onRate;
-    var rateBadButtonOnClick = React$1.useCallback(function () {
+    } : _e;
+    var rateBadButtonOnClick = require$$1.useCallback(function () {
         onRate("bad");
     }, [onRate]);
-    var rateGoodButtonOnClick = React$1.useCallback(function () {
+    var rateGoodButtonOnClick = require$$1.useCallback(function () {
         onRate("good");
     }, [onRate]);
-    var rateAgainButtonOnClick = React$1.useCallback(function () {
+    var rateAgainButtonOnClick = require$$1.useCallback(function () {
         onRate(undefined);
     }, [onRate]);
     // Do not think this prop should be here
-    if (!props.shouldDisplay) {
+    if (!shouldDisplay) {
         return null;
     }
-    if (!props.hasRating) {
-        return (React$1.createElement(CardContainer, { title: "Chat Rating", addClass: "chat-rating-card" },
-            props.agent.displayName,
-            " has requested you to rate the chat service.",
-            React$1.createElement("div", { className: "buttons-container" },
-                React$1.createElement(ActionButton, { addClass: "button button-rate-bad", label: "Rate Bad", onClick: rateBadButtonOnClick }),
-                React$1.createElement(ActionButton, { addClass: "button button-rate-good", label: "Rate Good", onClick: rateGoodButtonOnClick }))));
+    if (!hasRating) {
+        return (require$$0.jsxs(CardContainer, { title: "Chat Rating", addClass: "chat-rating-card", children: [agent.displayName, " has requested you to rate the chat service.", require$$0.jsxs("div", { className: "buttons-container", children: [require$$0.jsx(ActionButton, { addClass: "button button-rate-bad", label: "Rate Bad", onClick: rateBadButtonOnClick }), require$$0.jsx(ActionButton, { addClass: "button button-rate-good", label: "Rate Good", onClick: rateGoodButtonOnClick })] })] }));
     }
     else {
-        return (React$1.createElement(CardContainer, { title: "Chat Rating", addClass: "chat-rating-card" },
-            "You have rated the chat service.",
-            React$1.createElement("div", { className: "buttons-container" },
-                React$1.createElement(ActionButton, { addClass: "button button-rate-again", label: "Rate again", onClick: rateAgainButtonOnClick }))));
+        return (require$$0.jsxs(CardContainer, { title: "Chat Rating", addClass: "chat-rating-card", children: ["You have rated the chat service.", require$$0.jsx("div", { className: "buttons-container", children: require$$0.jsx(ActionButton, { addClass: "button button-rate-again", label: "Rate again", onClick: rateAgainButtonOnClick }) })] }));
     }
 };
 
 var ChatRatingContainer = function (props) {
     var dispatch = useChatServerDispatch();
-    var handleRate = React$1.useCallback(function (rating) {
+    var handleRate = require$$1.useCallback(function (rating) {
         dispatch(sendChatRating(rating));
     }, [dispatch]);
-    return (React$1.createElement(React$1.Fragment, null,
-        React$1.createElement("span", { className: "message-sr-only" }, "at " + props.time + " system message"),
-        React$1.createElement(ChatRating, { agent: props.agent, hasRating: props.hasRating, shouldDisplay: props.shouldDisplay, onRate: handleRate })));
+    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 })] }));
 };
 
 var dateFns = {};
@@ -19953,7 +20109,7 @@ var inheritsExports = inherits.exports;
 
 var createSuper = {exports: {}};
 
-var getPrototypeOf = {exports: {}};
+var getPrototypeOf$1 = {exports: {}};
 
 (function (module) {
 	function _getPrototypeOf(t) {
@@ -19962,9 +20118,9 @@ var getPrototypeOf = {exports: {}};
 	  }, module.exports.__esModule = true, module.exports["default"] = module.exports, _getPrototypeOf(t);
 	}
 	module.exports = _getPrototypeOf, module.exports.__esModule = true, module.exports["default"] = module.exports; 
-} (getPrototypeOf));
+} (getPrototypeOf$1));
 
-var getPrototypeOfExports = getPrototypeOf.exports;
+var getPrototypeOfExports = getPrototypeOf$1.exports;
 
 var isNativeReflectConstruct = {exports: {}};
 
@@ -27015,7 +27171,7 @@ var secondsToMinutes = {exports: {}};
 
 var secondsToMinutesExports = secondsToMinutes.exports;
 
-var set = {exports: {}};
+var set$1 = {exports: {}};
 
 var setMonth = {exports: {}};
 
@@ -27153,9 +27309,9 @@ var setMonthExports = setMonth.exports;
 	  return date;
 	}
 	module.exports = exports.default; 
-} (set, set.exports));
+} (set$1, set$1.exports));
 
-var setExports = set.exports;
+var setExports = set$1.exports;
 
 var setDate = {exports: {}};
 
@@ -30841,9 +30997,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 = React$1.useState(delay), countdown = _a[0], setCountdown = _a[1];
+    var _a = require$$1.useState(delay), countdown = _a[0], setCountdown = _a[1];
     var agent_names = Object.values(agents).filter(function (agent) { return agent.requestFailed; });
-    React$1.useEffect(function () {
+    require$$1.useEffect(function () {
         if (delay !== 0) {
             var countdownValue_1 = delay;
             var myInterval_1 = setInterval(function () {
@@ -30858,7 +31014,7 @@ var FailureMessage = function (props) {
             setCountdown(5);
         }
     }, [delay]);
-    var slots = React$1.useMemo(function () {
+    var slots = require$$1.useMemo(function () {
         return {
             sec: {
                 name: "sec",
@@ -30866,35 +31022,30 @@ var FailureMessage = function (props) {
             },
         };
     }, [countdown]);
-    var failureMessage = React$1.useMemo(function () {
+    var failureMessage = require$$1.useMemo(function () {
         return compileSlotValues(text, slots);
     }, [text, slots]);
     if (countdown === 0) {
-        return React$1.createElement(React$1.Fragment, null);
+        return require$$0.jsx(require$$0.Fragment, {});
     }
-    return (React$1.createElement(React$1.Fragment, null, agent_names.map(function (agent) {
-        var _a, _b;
-        return (React$1.createElement("div", { className: "chat-msg-container-wrapper", key: "failure-msg-".concat((_a = agent === null || agent === void 0 ? void 0 : agent.user) === null || _a === void 0 ? void 0 : _a.nick) },
-            React$1.createElement("div", { className: "chat-msg-container agent", key: (_b = agent === null || agent === void 0 ? void 0 : agent.user) === null || _b === void 0 ? void 0 : _b.nick },
-                React$1.createElement(ChatMessagePart, { user: agent === null || agent === void 0 ? void 0 : agent.user, showAvatar: true },
-                    React$1.createElement("div", { className: "chat-msg" },
-                        React$1.createElement(ChatMessageBubble, { owner: "others", hasTail: true },
-                            React$1.createElement("span", { className: "message-sr-only" }, "at " + time + " the bot said"),
-                            React$1.createElement("span", null, typeof failureMessage === "object" ? failureMessage.displayText : failureMessage)))))));
-    })));
+    return (require$$0.jsx(require$$0.Fragment, { children: agent_names.map(function (agent) {
+            var _a, _b;
+            return (require$$0.jsx("div", { className: "chat-msg-container-wrapper", children: require$$0.jsx("div", { className: "chat-msg-container agent", children: require$$0.jsx(ChatMessagePart, { user: agent === null || agent === void 0 ? void 0 : agent.user, showAvatar: true, children: require$$0.jsx("div", { className: "chat-msg", children: require$$0.jsxs(ChatMessageBubble, { owner: "others", hasTail: true, children: [require$$0.jsx("span", { className: "message-sr-only", children: "at " + time + " the bot said" }), require$$0.jsx("span", { children: typeof failureMessage === "object"
+                                            ? failureMessage.displayText
+                                            : failureMessage })] }) }) }) }, (_a = agent === null || agent === void 0 ? void 0 : agent.user) === null || _a === void 0 ? void 0 : _a.nick) }, "failure-msg-".concat((_b = agent === null || agent === void 0 ? void 0 : agent.user) === null || _b === void 0 ? void 0 : _b.nick)));
+        }) }));
 };
 
 var MessageSvg = function (_) {
-    return (React$1.createElement("svg", { className: "message-svg", width: "16", height: "12", viewBox: "0 0 16 12" },
-        React$1.createElement("path", { d: "M14.4 0H1.6C.72 0 .008.675.008 1.5L0 10.5c0 .825.72 1.5 1.6 1.5h12.8c.88 0 1.6-.675 1.6-1.5v-9c0-.825-.72-1.5-1.6-1.5zm0 3L8 6.75 1.6 3V1.5L8 5.25l6.4-3.75V3z", fill: "#424242", fillRule: "evenodd" })));
+    return (require$$0.jsx("svg", { className: "message-svg", width: "16", height: "12", viewBox: "0 0 16 12", children: require$$0.jsx("path", { d: "M14.4 0H1.6C.72 0 .008.675.008 1.5L0 10.5c0 .825.72 1.5 1.6 1.5h12.8c.88 0 1.6-.675 1.6-1.5v-9c0-.825-.72-1.5-1.6-1.5zm0 3L8 6.75 1.6 3V1.5L8 5.25l6.4-3.75V3z", fill: "#424242", fillRule: "evenodd" }) }));
 };
 
 var MessageForm = function (props) {
-    var name = React$1.useRef(null);
-    var email = React$1.useRef(null);
-    var message = React$1.useRef(null);
-    var form = React$1.useRef(null);
-    var _a = React$1.useState(false), sent = _a[0], setSent = _a[1];
+    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];
     function emailChanged() {
         var _a, _b, _c;
         if ((_a = email.current) === null || _a === void 0 ? void 0 : _a.validity.patternMismatch) {
@@ -30914,7 +31065,7 @@ var MessageForm = function (props) {
         props.onSubmit({
             name: (_c = name.current) === null || _c === void 0 ? void 0 : _c.value,
             email: (_d = email.current) === null || _d === void 0 ? void 0 : _d.value,
-            message: (_e = message.current) === null || _e === void 0 ? void 0 : _e.value
+            message: (_e = message.current) === null || _e === void 0 ? void 0 : _e.value,
         });
         setSent(true);
     }
@@ -30922,56 +31073,40 @@ var MessageForm = function (props) {
         setSent(false);
     }
     function renderSent() {
-        return (React$1.createElement("div", { key: "sent", className: "message-form--sent" },
-            "Your message has been sent. We will get back to you as soon as possible.",
-            React$1.createElement(ActionButton, { addClass: "button-resend", label: "Send another", onClick: sendAnother })));
+        return (require$$0.jsxs("div", { className: "message-form--sent", children: ["Your message has been sent. We will get back to you as soon as possible.", require$$0.jsx(ActionButton, { addClass: "button-resend", label: "Send another", onClick: sendAnother })] }, "sent"));
     }
     function renderForm() {
-        return (React$1.createElement("form", { ref: form, key: "not-sent", className: "message-form", onSubmit: send },
-            React$1.createElement("div", { className: "content" },
-                React$1.createElement("div", { className: "section" },
-                    React$1.createElement("label", { className: "label" }, "Name"),
-                    React$1.createElement("input", { ref: name, maxLength: 255 })),
-                React$1.createElement("div", { className: "section" },
-                    React$1.createElement("label", { className: "label" }, "Email"),
-                    React$1.createElement("input", { ref: email, onChange: emailChanged, type: "email", required: true, pattern: EMAIL_REGEX })),
-                React$1.createElement("div", { className: "section" },
-                    React$1.createElement("label", { className: "label" }, "Message"),
-                    React$1.createElement("textarea", { required: true, ref: message }))),
-            React$1.createElement("div", { className: "button-container" },
-                React$1.createElement(ActionButton, { type: "submit", addClass: "message-form__submit", label: "Send" }))));
-    }
-    return (React$1.createElement(CardContainer, { title: props.title, addClass: "offline-card", contentAddClass: sent ? "sent" : "", icon: React$1.createElement(MessageSvg, null) }, sent ? renderSent() : renderForm()));
+        return (require$$0.jsxs("form", { ref: form, className: "message-form", onSubmit: send, children: [require$$0.jsxs("div", { className: "content", children: [require$$0.jsxs("div", { className: "section", children: [require$$0.jsx("label", { className: "label", children: "Name" }), require$$0.jsx("input", { ref: name, maxLength: 255 })] }), require$$0.jsxs("div", { className: "section", children: [require$$0.jsx("label", { className: "label", children: "Email" }), require$$0.jsx("input", { ref: email, onChange: emailChanged, type: "email", required: true, pattern: EMAIL_REGEX })] }), require$$0.jsxs("div", { className: "section", children: [require$$0.jsx("label", { className: "label", children: "Message" }), require$$0.jsx("textarea", { required: true, ref: message })] })] }), require$$0.jsx("div", { className: "button-container", children: require$$0.jsx(ActionButton, { type: "submit", addClass: "message-form__submit", label: "Send" }) })] }, "not-sent"));
+    }
+    return (require$$0.jsx(CardContainer, { title: props.title, addClass: "offline-card", contentAddClass: sent ? "sent" : "", icon: require$$0.jsx(MessageSvg, {}), children: sent ? renderSent() : renderForm() }));
 };
 
 var OfflineForm = function (props) {
-    return React$1.createElement(MessageForm, { title: "Offline message card title", onSubmit: props.onSubmit });
+    return require$$0.jsx(MessageForm, { title: "Offline message card title", onSubmit: props.onSubmit });
 };
 
 var OfflineFormContainer = function (props) {
     var dispatch = useChatServerDispatch();
-    var handleSubmit = React$1.useCallback(function (data) {
+    var handleSubmit = require$$1.useCallback(function (data) {
         dispatch(sendOfflineMsg(data));
     }, [dispatch]);
-    return (React$1.createElement(React$1.Fragment, null,
-        React$1.createElement("span", { className: "message-sr-only" }, "at " + props.time + " system message"),
-        React$1.createElement(OfflineForm, { onSubmit: handleSubmit })));
+    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 = React$1.useState(false), sent = _a[0], setSent = _a[1];
+    var _a = require$$1.useState(false), sent = _a[0], setSent = _a[1];
     var onSubmit = props.onSubmit;
-    var handleSubmit = React$1.useCallback(function (msg) {
+    var handleSubmit = require$$1.useCallback(function (msg) {
         onSubmit(msg);
         setSent(true);
     }, [onSubmit]);
-    return (React$1.createElement(React$1.Fragment, null, !sent && React$1.createElement(MessageForm, { title: "Introduce yourself!", onSubmit: handleSubmit })));
+    return require$$0.jsx(require$$0.Fragment, { children: !sent && require$$0.jsx(MessageForm, { title: "Introduce yourself!", onSubmit: handleSubmit }) });
 };
 
 var PrechatFormContainer = function (props) {
     var dispatch = useChatServerDispatch();
     var sessionId = reactRedux.useSelector(function (state) { return state.sessionId; });
-    var handleSubmit = React$1.useCallback(function (data) {
+    var handleSubmit = require$$1.useCallback(function (data) {
         // Don't send empty messages
         if (!data.message)
             return;
@@ -30981,34 +31116,34 @@ var PrechatFormContainer = function (props) {
         }, sessionId));
         dispatch(executeAction(data.message));
     }, [dispatch, sessionId]);
-    return (React$1.createElement(React$1.Fragment, null,
-        React$1.createElement("span", { className: "message-sr-only" }, "at " + props.time + " system message"),
-        React$1.createElement(PrechatForm, { onSubmit: handleSubmit })));
+    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(PrechatForm, { onSubmit: handleSubmit })] }));
 };
 
-var defaultProps$1 = {
-    position: 0
-};
-var QueuePosition = function (props) {
-    if (props === void 0) { props = defaultProps$1; }
-    if (props.position <= 0)
+var QueuePosition = function (_a) {
+    var _b = _a.position, position = _b === void 0 ? 0 : _b;
+    if (position <= 0)
         return null;
-    return (React$1.createElement("div", { className: "system-msg-container" },
-        React$1.createElement("span", { className: "system-msg" },
-            "Queue position: ",
-            props.position)));
+    return (require$$0.jsx("div", { className: "system-msg-container", children: require$$0.jsxs("span", { className: "system-msg", children: ["Queue position: ", position] }) }));
 };
 
 function isServerUser(user) {
     var _a;
     return (_a = user.nick) === null || _a === void 0 ? void 0 : _a.endsWith(ROUTER_USER);
 }
+function shouldShowDivider(message) {
+    return (message.type === "chat.memberjoin" && message.showDivider) ||
+        (message.type === "chat.memberleave" && message.showDivider);
+}
 function getMessageByType(msg) {
     switch (msg.type) {
         case "chat.memberjoin":
-            return "".concat(msg.user.displayName || "Bot", " has joined the chat");
+            // Use custom message if provided, otherwise use default
+            return msg.message || "".concat(msg.user.displayName || "Bot", " has joined the chat");
         case "chat.memberleave":
-            return "".concat(msg.user.displayName || "Bot", " has left the chat");
+            // Use custom message if provided, otherwise use default
+            return msg.message || "".concat(msg.user.displayName || "Bot", " has left the chat");
+        case "chat.systemmessage":
+            return msg.message;
         case "chat.rating":
             if (!msg.newRating) {
                 return "You have removed the chat rating";
@@ -31022,10 +31157,12 @@ function getMessageByType(msg) {
     }
 }
 var SystemMessage = function (props) {
+    var _a;
     if (!isServerUser(props.message.user)) {
-        return (React$1.createElement("div", { className: "system-msg-container" },
-            React$1.createElement("span", { className: "message-sr-only" }, "at " + props.time + " system message"),
-            React$1.createElement("span", { className: "system-msg" }, getMessageByType(props.message))));
+        var message = props.message;
+        var showDivider = shouldShowDivider(message);
+        var avatarUrl = (_a = message.user) === null || _a === void 0 ? void 0 : _a.avatarPath;
+        return (require$$0.jsxs("div", { className: "system-msg-container", children: [showDivider && avatarUrl && (require$$0.jsxs("div", { className: "system-msg-divider", children: [require$$0.jsx("div", { className: "divider-line" }), require$$0.jsx("div", { className: "divider-avatar", children: require$$0.jsx("img", { src: avatarUrl, alt: "".concat(message.user.displayName || "User", "'s avatar") }) }), require$$0.jsx("div", { className: "divider-line" })] })), require$$0.jsx("span", { className: "message-sr-only", children: "at " + props.time + " system message" }), require$$0.jsx("span", { className: "system-msg", children: getMessageByType(props.message) })] }));
     }
     else {
         return null;
@@ -31036,10 +31173,7 @@ function convertToSentenceCase(s) {
 }
 
 var TypingIndicator = function (_) {
-    return (React$1.createElement("div", { className: "typing-indicator" },
-        React$1.createElement("div", { className: "typing-indicator-part" }),
-        React$1.createElement("div", { className: "typing-indicator-part" }),
-        React$1.createElement("div", { className: "typing-indicator-part" })));
+    return (require$$0.jsxs("div", { className: "typing-indicator", children: [require$$0.jsx("div", { className: "typing-indicator-part" }), require$$0.jsx("div", { className: "typing-indicator-part" }), require$$0.jsx("div", { className: "typing-indicator-part" })] }));
 };
 
 /**
@@ -31047,52 +31181,65 @@ var TypingIndicator = function (_) {
  */
 var TypingStatus = function (props) {
     var agentsTyping = Object.values(props.agents).filter(function (agent) { return agent.typing; });
-    return (React$1.createElement(React$1.Fragment, null, agentsTyping.map(function (agent, index) {
-        var _a, _b;
-        var key = ((_a = agent.user) === null || _a === void 0 ? void 0 : _a.nick) || "".concat(index);
-        var displayName = ((_b = agent.user) === null || _b === void 0 ? void 0 : _b.displayName) || "Somebody";
-        return (React$1.createElement("span", { key: "typing-status-".concat(index) }, !props.textTypingStatusEnabled ? (React$1.createElement("div", { className: "chat-msg-container-wrapper", key: "typing-status-".concat(key) },
-            React$1.createElement("div", { key: key, className: "chat-msg-container agent chat-typing-progress" },
-                React$1.createElement(ChatMessagePart, { user: agent.user, showAvatar: true },
-                    React$1.createElement("div", { className: "chat-msg" },
-                        React$1.createElement(ChatMessageBubble, { owner: "others", hasTail: true },
-                            React$1.createElement(TypingIndicator, null))))))) : (React$1.createElement("div", { key: "typing-status-".concat(key), className: "chat-msg-agent-typing" },
-            displayName,
-            " is typing"))));
-    })));
+    return (require$$0.jsx(require$$0.Fragment, { children: agentsTyping.map(function (agent, index) {
+            var _a, _b;
+            var key = ((_a = agent.user) === null || _a === void 0 ? void 0 : _a.nick) || "".concat(index);
+            var displayName = ((_b = agent.user) === null || _b === void 0 ? void 0 : _b.displayName) || "Somebody";
+            return (require$$0.jsx("span", { children: !props.textTypingStatusEnabled ? (require$$0.jsx("div", { className: "chat-msg-container-wrapper", children: require$$0.jsx("div", { className: "chat-msg-container agent chat-typing-progress", children: require$$0.jsx(ChatMessagePart, { user: agent.user, showAvatar: true, children: require$$0.jsx("div", { className: "chat-msg", children: require$$0.jsx(ChatMessageBubble, { owner: "others", hasTail: true, children: require$$0.jsx(TypingIndicator, {}) }) }) }) }, key) }, "typing-status-".concat(key))) : (require$$0.jsxs("div", { className: "chat-msg-agent-typing", children: [displayName, " is typing"] }, "typing-status-".concat(key))) }, "typing-status-".concat(index)));
+        }) }));
 };
 
-var defaultProps = {
-    visible: true,
-    messages: [],
-    agents: {},
-    isOffline: true,
-    isChatting: false,
-    queuePosition: 0,
-    lastRatingRequestTimestamp: 0,
-    hasRating: false,
-    visitorId: "",
-    onSend: function () { return Promise.resolve(); },
-    onWrite: function () { return Promise.resolve(); },
-    onOpenUrl: function () { },
-    minimizeOnClick: function () { },
-};
-var MessageList = function (props) {
-    if (props === void 0) { props = defaultProps; }
-    var onSend = props.onSend, onWrite = props.onWrite, onOpenUrl = props.onOpenUrl, minimizeOnClick = props.minimizeOnClick;
-    var messagesEndRef = React$1.useRef(null);
-    React$1.useEffect(function () {
-        messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
-    }, [props.messages, props.agents]);
-    var handleSend = React$1.useCallback(function (msg) {
+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.onSend, onSend = _l === void 0 ? function () { return Promise.resolve(); } : _l, _m = _a.onWrite, onWrite = _m === void 0 ? function () { return Promise.resolve(); } : _m, _o = _a.onOpenUrl, onOpenUrl = _o === void 0 ? function () { } : _o, _p = _a.minimizeOnClick, minimizeOnClick = _p === void 0 ? function () { } : _p; _a.children;
+    var messagesEndRef = require$$1.useRef(null);
+    var containerRef = require$$1.useRef(null);
+    var prevHasWsButtonRef = require$$1.useRef(hasWsButton);
+    // Check if user is scrolled to bottom
+    var isAtBottom = require$$1.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) {
+        if (behavior === void 0) { behavior = "smooth"; }
+        if (messagesEndRef.current) {
+            messagesEndRef.current.scrollIntoView({ behavior: behavior });
+        }
+    }, []);
+    // Always scroll to bottom when messages change
+    require$$1.useEffect(function () {
+        scrollToBottom("smooth");
+    }, [messages, agents, scrollToBottom]);
+    // Handle WS button dismissal - only scroll when button is removed
+    require$$1.useEffect(function () {
+        var prevHasButton = prevHasWsButtonRef.current;
+        var currentHasButton = hasWsButton;
+        // Update ref for next render
+        prevHasWsButtonRef.current = currentHasButton;
+        // Only handle button dismissal (was true, now false)
+        if (prevHasButton && !currentHasButton) {
+            var wasAtBottom = isAtBottom();
+            if (wasAtBottom) {
+                // Delay scroll adjustment to after button animation completes (animation + small buffer)
+                var timer_1 = setTimeout(function () {
+                    scrollToBottom("smooth");
+                }, WS_BUTTON_DISMISS_ANIMATION_DURATION + 50);
+                return function () { return clearTimeout(timer_1); };
+            }
+        }
+        return undefined;
+    }, [hasWsButton, isAtBottom, scrollToBottom]);
+    var handleSend = require$$1.useCallback(function (msg) {
         onSend(msg);
         messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
     }, [onSend]);
-    var handleWrite = React$1.useCallback(function (msg) {
+    var handleWrite = require$$1.useCallback(function (msg) {
         onWrite(msg);
         messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
     }, [onWrite]);
-    var ctxCache = React$1.useMemo(function () {
+    var ctxCache = require$$1.useMemo(function () {
         return new MiddlewareContextFactory({
             send: handleSend,
             write: handleWrite,
@@ -31115,7 +31262,7 @@ var MessageList = function (props) {
             user = msg.user;
         }
         else {
-            user = ((_c = props.agents[msg.user.nick]) === null || _c === void 0 ? void 0 : _c.user) || props.agent;
+            user = ((_c = agents[msg.user.nick]) === null || _c === void 0 ? void 0 : _c.user) || agent;
             // Still nothing?
             if (!user) {
                 log("Could not get a user from agents list with nick: \"".concat(msg.user.nick, "\""));
@@ -31125,26 +31272,23 @@ var MessageList = function (props) {
         switch (msg.type) {
             case "chat.file":
             case "chat.msg":
-                return (React$1.createElement(ChatMessage, { key: "cm-".concat(msg.type, "-").concat(msg.timestamp), message: msg, sibling: sibling, agent: user, messageMiddleware: props.messageMiddleware, middlewareContext: ctxCache.resolve(user), minimizeOnClick: minimizeOnClick }));
+                return (require$$0.jsx(ChatMessage, { message: msg, sibling: sibling, agent: user, messageMiddleware: messageMiddleware, middlewareContext: ctxCache.resolve(user), minimizeOnClick: minimizeOnClick }, "cm-".concat(msg.type, "-").concat(msg.timestamp)));
             case "chat.failureMsg":
-                return (React$1.createElement(FailureMessage, __assign({ key: "fm-".concat(msg.type, "-").concat(msg.timestamp), agents: props.agents, time: time }, msg.failureMsg)));
+                return (require$$0.jsx(FailureMessage, __assign({ agents: agents, time: time }, msg.failureMsg), "fm-".concat(msg.type, "-").concat(msg.timestamp)));
             case "chat.memberjoin":
             case "chat.memberleave":
+            case "chat.systemmessage":
             case "chat.rating":
             case "chat.typing":
-                return (React$1.createElement(SystemMessage, { key: "sm-".concat(msg.type, "-").concat(msg.timestamp), time: time, message: msg }));
+                return (require$$0.jsx(SystemMessage, { time: time, message: msg }, "sm-".concat(msg.type, "-").concat(msg.timestamp)));
             case "chat.request.rating":
-                return (React$1.createElement(ChatRatingContainer, { key: "cr-".concat(msg.type, "-").concat(msg.timestamp), agent: user, hasRating: props.hasRating, time: time, shouldDisplay: msg.timestamp === props.lastRatingRequestTimestamp }));
+                return (require$$0.jsx(ChatRatingContainer, { agent: user, hasRating: hasRating, time: time, shouldDisplay: msg.timestamp === lastRatingRequestTimestamp }, "cr-".concat(msg.type, "-").concat(msg.timestamp)));
             case "chat.offline":
-                return React$1.createElement(OfflineFormContainer, { key: "offline-".concat(msg.timestamp), time: time });
+                return require$$0.jsx(OfflineFormContainer, { time: time }, "offline-".concat(msg.timestamp));
             case "chat.prechat":
-                return React$1.createElement(PrechatFormContainer, { key: "prechat", time: time });
+                return require$$0.jsx(PrechatFormContainer, { time: time }, "prechat");
             default:
-                return (React$1.createElement("span", { key: "default-".concat(msg.timestamp) },
-                    React$1.createElement("span", { className: "message-sr-only" }, "at " + time + " system message"),
-                    React$1.createElement("div", { key: "uhm-".concat(+new Date()) },
-                        "Unhandled message: ",
-                        JSON.stringify(msg))));
+                return (require$$0.jsxs("span", { children: [require$$0.jsx("span", { className: "message-sr-only", children: "at " + time + " system message" }), require$$0.jsxs("div", { children: ["Unhandled message: ", JSON.stringify(msg)] }, "uhm-".concat(+new Date()))] }, "default-".concat(msg.timestamp)));
         }
     }
     /**
@@ -31153,14 +31297,14 @@ var MessageList = function (props) {
      */
     function renderAll() {
         var lastMsgIndex = -1;
-        for (var i = props.messages.length - 1; i > 0; i--) {
-            if (props.messages[i].type === "chat.msg") {
+        for (var i = messages.length - 1; i > 0; i--) {
+            if (messages[i].type === "chat.msg") {
                 lastMsgIndex = i;
                 break;
             }
         }
-        return props.messages.map(function (message, index) {
-            // const next = props.messages[index + 1];
+        return messages.map(function (message, index) {
+            // const next = messages[index + 1];
             var _a, _b;
             // let sibling = false;
             // const currentNick = message.nick;
@@ -31176,6 +31320,7 @@ var MessageList = function (props) {
                 // "chat.failureMsg",
                 "chat.memberjoin",
                 "chat.memberleave",
+                // "chat.systemmessage", // System messages don't show timestamps
                 "chat.rating",
                 // "chat.typing",
                 "chat.request.rating",
@@ -31185,11 +31330,11 @@ var MessageList = function (props) {
             // show first and las TS and after at least 5 minutes gap. Don't show "router user"
             var showTs = false;
             if (tsTypes.includes(message.type) && !((_b = (_a = message.user) === null || _a === void 0 ? void 0 : _a.nick) === null || _b === void 0 ? void 0 : _b.endsWith(ROUTER_USER))) {
-                if (index === 0 || index === props.messages.length - 1 || index === lastMsgIndex) {
+                if (index === 0 || index === messages.length - 1 || index === lastMsgIndex) {
                     showTs = true;
                 }
                 else {
-                    var previous = props.messages[index - 1];
+                    var previous = messages[index - 1];
                     if (message.timestamp && previous.timestamp) {
                         showTs = message.timestamp - previous.timestamp > 300 * 1000; // 5 minutes
                     }
@@ -31200,26 +31345,14 @@ var MessageList = function (props) {
                 showTs = false;
             }
             var ts = showTs ? new Date(message.timestamp).toLocaleString() : undefined;
-            return (React$1.createElement("span", { key: "message-list-render-all-".concat(index) },
-                showTs && (React$1.createElement("div", { className: "ts-msg-container" },
-                    React$1.createElement("span", { className: "ts-msg" }, ts))),
-                renderByType(message, false)));
+            return (require$$0.jsxs("span", { children: [showTs && (require$$0.jsx("div", { className: "ts-msg-container", children: require$$0.jsx("span", { className: "ts-msg", children: ts }) })), renderByType(message, false)] }, "message-list-render-all-".concat(index)));
         });
     }
-    var agents = props.agents, queuePosition = props.queuePosition;
-    return (React$1.createElement("div", { className: "message-list-container" },
-        React$1.createElement("div", { className: "message-list-container__msgs" },
-            renderAll(),
-            React$1.createElement("div", { ref: messagesEndRef, style: { float: "left", clear: "both" } }),
-            React$1.createElement(QueuePosition, { position: queuePosition }),
-            React$1.createElement(TypingStatus, { agents: agents, textTypingStatusEnabled: props.textTypingStatusEnabled })),
-        React$1.createElement(ChatChipsContainer, null)));
+    return (require$$0.jsxs("div", { className: "message-list-container", ref: containerRef, children: [require$$0.jsxs("div", { className: "message-list-container__msgs", children: [renderAll(), require$$0.jsx("div", { ref: messagesEndRef, style: { float: "left", clear: "both" } }), require$$0.jsx(QueuePosition, { position: queuePosition }), require$$0.jsx(TypingStatus, { agents: agents, textTypingStatusEnabled: textTypingStatusEnabled })] }), require$$0.jsx(ChatChipsContainer, {})] }));
 };
 
 var ServerOffline = function () {
-    return React$1.createElement("div", { className: "server-offline" },
-        React$1.createElement("h2", null, "Chat is currently unavailable"),
-        React$1.createElement("h3", null, "Server is offline"));
+    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) {
@@ -31229,7 +31362,7 @@ function buildStyleContent(theme) {
 function WidgetStylesheet(props) {
     var theme = props.theme;
     var stylesContent = buildStyleContent(theme);
-    return React$1.createElement("style", null, stylesContent);
+    return require$$0.jsx("style", { children: stylesContent });
 }
 function buildVariables(gen) {
     var result = gen.next();
@@ -31567,13 +31700,13 @@ var safeStringify = function (arg) {
 };
 var ErrorOverlay = function (_a) {
     var enableErrorOverlay = _a.enableErrorOverlay;
-    var _b = React$1.useState([]), errors = _b[0], setErrors = _b[1];
-    var _c = React$1.useState(false), isMinimized = _c[0], setIsMinimized = _c[1];
-    var _d = React$1.useState(true), isVisible = _d[0], setIsVisible = _d[1];
-    var _e = React$1.useState(false), isEnabled = _e[0], setIsEnabled = _e[1];
-    var _f = React$1.useState("bottom"), position = _f[0], setPosition = _f[1];
+    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];
     // Check if error overlay should be enabled and load position
-    React$1.useEffect(function () {
+    require$$1.useEffect(function () {
         var _a;
         var checkEnabled = function () {
             var _a;
@@ -31612,7 +31745,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 = React$1.useCallback(function (error) {
+    var addError = require$$1.useCallback(function (error) {
         console.log("[ErrorOverlay] Adding error:", error);
         setErrors(function (prev) {
             var timestamp = new Date().toISOString();
@@ -31631,7 +31764,7 @@ var ErrorOverlay = function (_a) {
             return updated.slice(-50);
         });
     }, []);
-    React$1.useEffect(function () {
+    require$$1.useEffect(function () {
         if (!isEnabled) {
             console.log("[ErrorOverlay] Not enabled, skipping error interception");
             return undefined;
@@ -31776,51 +31909,53 @@ var ErrorOverlay = function (_a) {
     if (errors.length === 0) {
         return null;
     }
-    return (React$1.createElement("div", { className: "error-overlay error-overlay--".concat(position, " ").concat(isMinimized ? "minimized" : "") },
-        React$1.createElement("div", { className: "error-overlay-header" },
-            React$1.createElement("span", { className: "error-overlay-title" },
-                "Debug Console (",
-                errors.length,
-                ")"),
-            React$1.createElement("div", { className: "error-overlay-actions" },
-                React$1.createElement("button", { onClick: copyToClipboard, title: "Copy all to clipboard" }, "\uD83D\uDCCB"),
-                React$1.createElement("button", { onClick: clearErrors, title: "Clear all" }, "\uD83D\uDDD1\uFE0F"),
-                React$1.createElement("button", { onClick: togglePosition, title: "Move to ".concat(position === "bottom" ? "top" : "bottom") }, position === "bottom" ? "⬆️" : "⬇️"),
-                React$1.createElement("button", { onClick: toggleEnabled, title: "Disable Error Overlay" }, "\uD83D\uDD27"),
-                React$1.createElement("button", { onClick: function () { return setIsMinimized(!isMinimized); }, title: "Minimize/Maximize" }, isMinimized ? "▲" : "▼"),
-                React$1.createElement("button", { onClick: function () { return setIsVisible(false); }, title: "Close" }, "\u2715"))),
-        !isMinimized && (React$1.createElement("div", { className: "error-overlay-content" }, errors.map(function (error) { return (React$1.createElement("div", { key: error.id, className: "error-entry error-".concat(error.type) },
-            React$1.createElement("div", { className: "error-header" },
-                React$1.createElement("span", { className: "error-time" }, new Date(error.timestamp).toLocaleTimeString()),
-                error.count > 1 && (React$1.createElement("span", { className: "error-count" },
-                    "(",
-                    error.count,
-                    "x)")),
-                React$1.createElement("span", { className: "error-badge error-badge-".concat(error.type) }, error.type)),
-            React$1.createElement("div", { className: "error-message" }, error.message),
-            error.stack && (React$1.createElement("details", { className: "error-stack" },
-                React$1.createElement("summary", null, "Stack trace"),
-                React$1.createElement("pre", null, error.stack))))); })))));
+    return (require$$0.jsxs("div", { className: "error-overlay error-overlay--".concat(position, " ").concat(isMinimized ? "minimized" : ""), children: [require$$0.jsxs("div", { className: "error-overlay-header", children: [require$$0.jsxs("span", { className: "error-overlay-title", children: ["Debug Console (", errors.length, ")"] }), require$$0.jsxs("div", { className: "error-overlay-actions", children: [require$$0.jsx("button", { onClick: copyToClipboard, title: "Copy all to clipboard", children: "\uD83D\uDCCB" }), require$$0.jsx("button", { onClick: clearErrors, title: "Clear all", children: "\uD83D\uDDD1\uFE0F" }), require$$0.jsx("button", { onClick: togglePosition, title: "Move to ".concat(position === "bottom" ? "top" : "bottom"), children: position === "bottom" ? "⬆️" : "⬇️" }), require$$0.jsx("button", { onClick: toggleEnabled, title: "Disable Error Overlay", children: "\uD83D\uDD27" }), require$$0.jsx("button", { onClick: function () { return setIsMinimized(!isMinimized); }, title: "Minimize/Maximize", children: isMinimized ? "▲" : "▼" }), require$$0.jsx("button", { onClick: function () { return setIsVisible(false); }, title: "Close", children: "\u2715" })] })] }), !isMinimized && (require$$0.jsx("div", { className: "error-overlay-content", children: errors.map(function (error) { return (require$$0.jsxs("div", { className: "error-entry error-".concat(error.type), children: [require$$0.jsxs("div", { className: "error-header", children: [require$$0.jsx("span", { className: "error-time", children: new Date(error.timestamp).toLocaleTimeString() }), error.count > 1 && (require$$0.jsxs("span", { className: "error-count", children: ["(", error.count, "x)"] })), require$$0.jsx("span", { className: "error-badge error-badge-".concat(error.type), children: error.type })] }), require$$0.jsx("div", { className: "error-message", children: error.message }), error.stack && (require$$0.jsxs("details", { className: "error-stack", children: [require$$0.jsx("summary", { children: "Stack trace" }), require$$0.jsx("pre", { children: error.stack })] }))] }, error.id)); }) }))] }));
+};
+
+var WsButton = function (_a) {
+    var button = _a.button, onPress = _a.onPress;
+    var handleClick = require$$1.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 classes = ["ws-button"];
+        if (button.pressBehavior === "disabled" || button.isPressed) {
+            classes.push("ws-button--disabled");
+        }
+        if (button.isPressed && button.pressBehavior === "spinning") {
+            classes.push("ws-button--spinning");
+        }
+        return classes.join(" ");
+    }, [button.pressBehavior, button.isPressed]);
+    var containerClassName = require$$1.useMemo(function () {
+        var classes = ["ws-button-container"];
+        if (button.isDismissing) {
+            classes.push("ws-button-container--dismissing");
+        }
+        return classes.join(" ");
+    }, [button.isDismissing]);
+    return (require$$0.jsx("div", { className: containerClassName, children: require$$0.jsxs("button", { className: className, onClick: handleClick, disabled: button.pressBehavior === "disabled" || button.isPressed, "aria-label": button.text, "aria-busy": button.isPressed && button.pressBehavior === "spinning", children: [button.isPressed && button.pressBehavior === "spinning" && (require$$0.jsx("span", { className: "ws-button__spinner" })), require$$0.jsx("span", { className: "ws-button__text", children: button.text })] }) }));
 };
 
 var ModalContent = function (_a) {
     var onClose = _a.onClose, onReset = _a.onReset;
-    return (React$1.createElement("div", { className: "modalContent" },
-        React$1.createElement("div", { className: "modalBody" },
-            React$1.createElement("h2", null, "Restart Conversation"),
-            React$1.createElement("p", null, "Would you like to refresh and return to the starting point of the conversation?")),
-        React$1.createElement("div", { className: "modalActions" },
-            React$1.createElement("button", { onClick: onClose, className: "cancelBtn" }, "Cancel"),
-            React$1.createElement("button", { onClick: onReset, className: "restartBtn" }, "Restart"))));
+    return (require$$0.jsxs("div", { className: "modalContent", children: [require$$0.jsxs("div", { className: "modalBody", children: [require$$0.jsx("h2", { children: "Restart Conversation" }), require$$0.jsx("p", { children: "Would you like to refresh and return to the starting point of the conversation?" })] }), require$$0.jsxs("div", { className: "modalActions", children: [require$$0.jsx("button", { onClick: onClose, className: "cancelBtn", children: "Cancel" }), require$$0.jsx("button", { onClick: onReset, className: "restartBtn", children: "Restart" })] })] }));
 };
 
+/**
+ * Debounce delay for typing indicator in milliseconds.
+ * After this delay of inactivity, the "stop typing" event will be sent.
+ */
+var TYPING_INDICATOR_DEBOUNCE_MS = 2000;
 var ChatWidgetWrapper = function (props) {
     var _a;
-    var _b = React$1.useState(props.config), rawConfig = _b[0], setRawConfig = _b[1];
-    var _c = React$1.useState(!!props.getConfig), configLoading = _c[0], setConfigLoading = _c[1];
-    var _d = React$1.useState(), configError = _d[0], setConfigError = _d[1];
+    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];
     // Load config from callback if provided
-    React$1.useEffect(function () {
+    require$$1.useEffect(function () {
         var cancelled = false;
         if (props.getConfig) {
             setConfigLoading(true);
@@ -31854,12 +31989,12 @@ var ChatWidgetWrapper = function (props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.getConfig, props.config]);
     var connection = useConnectionInfo(rawConfig);
-    var config = React$1.useMemo(function () {
+    var config = require$$1.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 = React$1.useMemo(function () {
+    var options = require$$1.useMemo(function () {
         var configurableMessages = getConfigurableMessages();
         if ((rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.configurableMessages) &&
             Array.isArray(rawConfig.configurableMessages.items) &&
@@ -31884,20 +32019,13 @@ var ChatWidgetWrapper = function (props) {
     var modeClass = "widget-container--".concat(mode);
     // Show loading state while config is being fetched
     if (configLoading) {
-        return (React$1.createElement("div", { className: "widget-container widget-container--loading ".concat(modeClass) },
-            React$1.createElement("div", { className: "xa-spinner-container visible" },
-                React$1.createElement("div", { className: "xa-spinner" }))));
+        return (require$$0.jsx("div", { className: "widget-container widget-container--loading ".concat(modeClass), children: require$$0.jsx("div", { className: "xa-spinner-container visible", children: require$$0.jsx("div", { className: "xa-spinner" }) }) }));
     }
     // Show error state if config failed to load
     if (configError) {
-        return (React$1.createElement("div", { className: "widget-container widget-container--error ".concat(modeClass) },
-            React$1.createElement("div", { className: "widget-error-message" },
-                "Failed to load chat configuration: ",
-                configError.message)));
-    }
-    return (React$1.createElement(ChatConfigContext.Provider, { value: config },
-        React$1.createElement(ChatServerContext.Provider, { value: chatServer },
-            React$1.createElement(ChatWidget, __assign({}, props, { config: rawConfig })))));
+        return (require$$0.jsx("div", { className: "widget-container widget-container--error ".concat(modeClass), children: require$$0.jsxs("div", { className: "widget-error-message", children: ["Failed to load chat configuration: ", configError.message] }) }));
+    }
+    return (require$$0.jsx(ChatConfigContext.Provider, { value: config, children: require$$0.jsx(ChatServerContext.Provider, { value: chatServer, children: require$$0.jsx(ChatWidget, __assign({}, props, { config: rawConfig })) }) }));
 };
 var ChatWidget = function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
@@ -31906,7 +32034,7 @@ var ChatWidget = function (props) {
     // From Redux
     var chatState = reactRedux.useSelector(function (state) { return state; });
     // Refresh modalReference
-    var modalRef = React$1.useRef({});
+    var modalRef = require$$1.useRef({});
     var mode = (_a = props.mode) !== null && _a !== void 0 ? _a : "normal";
     var dockedMode = mode === "docked";
     var staticMode = mode === "static";
@@ -31928,13 +32056,17 @@ var ChatWidget = function (props) {
         chatState.visuals = {};
     }
     // Our state - pull from storage
-    var _8 = React$1.useState((!canMinimize && !canCancel) ||
+    var _8 = require$$1.useState((!canMinimize && !canCancel) ||
         // !!get("visible") ||
         chatState.visuals.visible ||
         (((_m = props.config) === null || _m === void 0 ? void 0 : _m.autoOpenOnWidth) &&
             window.matchMedia("(min-width: ".concat((_o = props.config) === null || _o === void 0 ? void 0 : _o.autoOpenOnWidth, ")")).matches)), visible = _8[0], setVisibleState = _8[1];
-    var _9 = React$1.useState(false), typing = _9[0], setTypingState = _9[1]; // false initially
-    var chatServer = React$1.useContext(ChatServerContext);
+    var _9 = require$$1.useState(false); _9[0]; var setTypingState = _9[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);
+    // Timeout ref for debouncing "stop typing" events
+    var stopTypingTimeoutRef = require$$1.useRef(null);
+    var chatServer = require$$1.useContext(ChatServerContext);
     var patternsConfig = (_q = (_p = props.config) === null || _p === void 0 ? void 0 : _p.autoOpenOnPattern) === null || _q === void 0 ? void 0 : _q.patterns;
     var currentUrl = window.location.href;
     var patternExist = patternsConfig && patternsConfig.length > 0;
@@ -31942,16 +32074,17 @@ var ChatWidget = function (props) {
     var configWidth = (_s = (_r = props.config) === null || _r === void 0 ? void 0 : _r.autoOpenOnPattern) === null || _s === void 0 ? void 0 : _s.minimumWidth;
     // eslint-disable-next-line no-restricted-globals
     var currentWidth = screen.width;
-    var setVisible = React$1.useCallback(function (newVisible) {
+    var setVisible = require$$1.useCallback(function (newVisible) {
         if (staticMode) {
             return;
         }
+        log("setVisible: ".concat(newVisible));
         setVisibleState(newVisible);
         innerDispatch(setVisualStatus({
             visible: newVisible,
         }));
     }, [innerDispatch, staticMode]);
-    React$1.useEffect(function () {
+    require$$1.useEffect(function () {
         var _a, _b;
         var handleKeyDown = function (event) {
             var body = document.getElementsByTagName("body")[0];
@@ -31967,11 +32100,15 @@ var ChatWidget = function (props) {
         }
         return function () {
             document.removeEventListener("keydown", handleKeyDown);
+            // Cleanup typing timeout on unmount
+            if (stopTypingTimeoutRef.current) {
+                clearTimeout(stopTypingTimeoutRef.current);
+            }
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    var _10 = React$1.useState(!document.hidden), isTabVisible = _10[0], setIsTabVisible = _10[1];
-    React$1.useEffect(function () {
+    var _10 = require$$1.useState(!document.hidden), isTabVisible = _10[0], setIsTabVisible = _10[1];
+    require$$1.useEffect(function () {
         var handleVisibilityChange = function () {
             setIsTabVisible(!document.hidden);
         };
@@ -31980,19 +32117,22 @@ var ChatWidget = function (props) {
             document.removeEventListener("visibilitychange", handleVisibilityChange);
         };
     }, []);
-    React$1.useEffect(function () {
+    require$$1.useEffect(function () {
         // Too early?
         if (!chatServer) {
+            log("Tab visibility changed but no chatServer yet");
             return;
         }
         if (!isTabVisible) {
+            log("Tab is HIDDEN - calling sleep()");
             chatServer.sleep();
         }
         else {
+            log("Tab is VISIBLE - calling wakeup()");
             chatServer.wakeup();
         }
     }, [chatServer, innerDispatch, isTabVisible]);
-    React$1.useEffect(function () {
+    require$$1.useEffect(function () {
         // For reopen widget after move on same window
         // if (get("opened")) {
         //     setVisible(true);
@@ -32020,19 +32160,34 @@ var ChatWidget = function (props) {
         chatState.visuals.opened,
         mode,
     ]);
-    function handleOnChange() {
-        if (!typing) {
-            dispatch(sendTyping(true));
-            setTypingState(true);
-        }
-        stopTyping();
-    }
-    function stopTyping() {
-        if (!typing)
+    var stopTyping = require$$1.useCallback(function () {
+        if (!typingRef.current)
             return;
+        // Clear the timeout if it exists
+        if (stopTypingTimeoutRef.current) {
+            clearTimeout(stopTypingTimeoutRef.current);
+            stopTypingTimeoutRef.current = null;
+        }
         dispatch(sendTyping(false));
         setTypingState(false);
-    }
+        typingRef.current = false;
+    }, [dispatch]);
+    var handleOnChange = require$$1.useCallback(function () {
+        // Send "typing" event only on first keystroke
+        if (!typingRef.current) {
+            dispatch(sendTyping(true));
+            setTypingState(true);
+            typingRef.current = true;
+        }
+        // Clear any existing timeout
+        if (stopTypingTimeoutRef.current) {
+            clearTimeout(stopTypingTimeoutRef.current);
+        }
+        // Set a new timeout to send "stop typing" after inactivity
+        stopTypingTimeoutRef.current = window.setTimeout(function () {
+            stopTyping();
+        }, TYPING_INDICATOR_DEBOUNCE_MS);
+    }, [dispatch, stopTyping]);
     function handleSendMessage(msg) {
         dispatch(sendMessage(msg));
     }
@@ -32122,12 +32277,56 @@ var ChatWidget = function (props) {
             hasInteracted: true,
         }));
     }
+    function handleWsButtonPress(buttonId) {
+        var _a, _b;
+        log("WS Button pressed: ".concat(buttonId));
+        // If the button has spinning behavior, update state to show spinner
+        if (((_a = chatState.wsButton) === null || _a === void 0 ? void 0 : _a.pressBehavior) === "spinning") {
+            // Update the button state to show it's pressed
+            innerDispatch({
+                type: "ws_button_display",
+                detail: __assign(__assign({}, chatState.wsButton), { isPressed: true, timestamp: +new Date() })
+            });
+        }
+        // Send the button pressed event to the server
+        if (chatServer && chatServer.sendButtonPressed) {
+            chatServer.sendButtonPressed(buttonId).catch(function (error) {
+                err("Failed to send button press: ".concat(error));
+                // Reset button state on error
+                if (chatState.wsButton) {
+                    innerDispatch({
+                        type: "ws_button_display",
+                        detail: __assign(__assign({}, chatState.wsButton), { isPressed: false, timestamp: +new Date() })
+                    });
+                }
+            });
+        }
+        // If the button has disabled behavior, animate out then dismiss
+        if (((_b = chatState.wsButton) === null || _b === void 0 ? void 0 : _b.pressBehavior) === "disabled") {
+            // First set dismissing state to trigger animation
+            innerDispatch({
+                type: "ws_button_display",
+                detail: __assign(__assign({}, chatState.wsButton), { isDismissing: true, timestamp: +new Date() })
+            });
+            // Then actually dismiss after animation completes
+            setTimeout(function () {
+                innerDispatch({
+                    type: "ws_button_dismiss",
+                    detail: {
+                        id: buttonId,
+                        timestamp: +new Date()
+                    }
+                });
+            }, WS_BUTTON_DISMISS_ANIMATION_DURATION);
+        }
+    }
     var isOffline = chatState.accountStatus === "offline" && !chatState.isChatting;
     var messages = chatState && chatState.chats;
+    log("Rendering - accountStatus: \"".concat(chatState.accountStatus, "\", connectionStatus: \"").concat(chatState.connection.connectionStatus, "\""));
     var config = props.config, onConnectionStatusChange = props.onConnectionStatusChange;
     useGreeting(!isOffline && !props.preChatFormEnabled && visible);
     var connectionStatus = chatState.connection.connectionStatus;
-    React$1.useEffect(function () {
+    require$$1.useEffect(function () {
         if (onConnectionStatusChange) {
             onConnectionStatusChange(connectionStatus);
         }
@@ -32140,19 +32339,7 @@ var ChatWidget = function (props) {
         avatarPath: config.avatarUrl,
         display_name: "Agent",
     };
-    return (React$1.createElement(React$1.Fragment, null,
-        React$1.createElement("div", { className: "widget-container ".concat(modeClass, " ").concat(getVisibilityClass()) },
-            React$1.createElement(WidgetStylesheet, { theme: config === null || config === void 0 ? void 0 : config.theme }),
-            React$1.createElement(ChatHeader, { accountStatus: chatState.accountStatus, refreshOnClick: handleRestartClick, minimizeOnClick: handleMinimizeClick, cancelOnClick: handleCancelClick, agent: widgetAgent, canRefresh: canRefresh, canMinimize: canMinimize, canCancel: canCancel, config: config === null || config === void 0 ? void 0 : config.header, menuConfig: config.menu, onSubmit: handleOnSubmit }),
-            React$1.createElement(MessageList, { visible: visible, queuePosition: chatState.queuePosition, isChatting: chatState.isChatting, isOffline: isOffline, messages: messages, agents: chatState.agents, agent: config === null || config === void 0 ? void 0 : config.agent, lastRatingRequestTimestamp: chatState.lastRatingRequestTimestamp, hasRating: chatState.hasRating, visitorId: chatState.visitorId, messageMiddleware: props.messageMiddleware, textTypingStatusEnabled: (_w = (_v = props.config) === null || _v === void 0 ? void 0 : _v.typingStatus) === null || _w === void 0 ? void 0 : _w.textTypingStatusEnabled, onSend: handleSendMessage, onWrite: handleWriteMessage, onOpenUrl: handleOpenUrl, minimizeOnClick: handleMinimizeClick }),
-            React$1.createElement("div", { className: "xa-spinner-container ".concat(visible && connectionStatus === "pending" ? "visible" : "") },
-                React$1.createElement("div", { className: "xa-spinner" })),
-            connectionStatus === "offline" && React$1.createElement(ServerOffline, null),
-            React$1.createElement(ChatFooter, { isAdmin: config === null || config === void 0 ? void 0 : config.isAdmin, isChatting: chatState.isChatting, placeholder: (_x = config === null || config === void 0 ? void 0 : config.input) === null || _x === void 0 ? void 0 : _x.placeholder, sendButtonIcon: (_z = (_y = config === null || config === void 0 ? void 0 : config.footer) === null || _y === void 0 ? void 0 : _y.sendButton) === null || _z === void 0 ? void 0 : _z.icon, sendButtonIconHover: (_1 = (_0 = config === null || config === void 0 ? void 0 : config.footer) === null || _0 === void 0 ? void 0 : _0.sendButton) === null || _1 === void 0 ? void 0 : _1.iconHover, sendButtonIconDisabled: (_3 = (_2 = config === null || config === void 0 ? void 0 : config.footer) === null || _2 === void 0 ? void 0 : _2.sendButton) === null || _3 === void 0 ? void 0 : _3.iconDisabled, visible: visible, menuConfig: props.config.menu, footerConfig: (_4 = props.config) === null || _4 === void 0 ? void 0 : _4.footer, inputConfig: (_5 = props.config) === null || _5 === void 0 ? void 0 : _5.input, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload }),
-            React$1.createElement("div", { className: "restartModal", ref: modalRef, onClick: handleRestartModalCloseClick },
-                React$1.createElement(ModalContent, { onClose: handleRestartModalCloseClick, onReset: handleReset }))),
-        React$1.createElement(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: config === null || config === void 0 ? void 0 : config.cta, imageUrl: (_6 = config === null || config === void 0 ? void 0 : config.chatButton) === null || _6 === void 0 ? void 0 : _6.imageUrl, visible: visible, hasInteracted: (_7 = chatState.visuals) === null || _7 === void 0 ? void 0 : _7.hasInteracted, onCtaDismiss: handleCtaDismiss }),
-        React$1.createElement(ErrorOverlay, { enableErrorOverlay: config === null || config === void 0 ? void 0 : config.enableErrorOverlay })));
+    return (require$$0.jsxs(require$$0.Fragment, { children: [require$$0.jsxs("div", { className: "widget-container ".concat(modeClass, " ").concat(getVisibilityClass()), children: [require$$0.jsx(WidgetStylesheet, { theme: config === null || config === void 0 ? void 0 : config.theme }), require$$0.jsx(ChatHeader, { accountStatus: chatState.accountStatus, refreshOnClick: handleRestartClick, minimizeOnClick: handleMinimizeClick, cancelOnClick: handleCancelClick, agent: widgetAgent, canRefresh: canRefresh, canMinimize: canMinimize, canCancel: canCancel, config: config === null || config === void 0 ? void 0 : config.header, menuConfig: config.menu, onSubmit: handleOnSubmit }), require$$0.jsx(MessageList, { visible: visible, queuePosition: chatState.queuePosition, isChatting: chatState.isChatting, isOffline: isOffline, messages: messages, agents: chatState.agents, agent: config === null || config === void 0 ? void 0 : config.agent, lastRatingRequestTimestamp: chatState.lastRatingRequestTimestamp, hasRating: chatState.hasRating, visitorId: chatState.visitorId, hasWsButton: !!chatState.wsButton, messageMiddleware: props.messageMiddleware, textTypingStatusEnabled: (_w = (_v = props.config) === null || _v === void 0 ? void 0 : _v.typingStatus) === null || _w === void 0 ? void 0 : _w.textTypingStatusEnabled, onSend: handleSendMessage, onWrite: handleWriteMessage, onOpenUrl: handleOpenUrl, minimizeOnClick: handleMinimizeClick }), require$$0.jsx("div", { className: "xa-spinner-container ".concat(visible && connectionStatus === "pending" ? "visible" : ""), children: require$$0.jsx("div", { className: "xa-spinner" }) }), connectionStatus === "offline" && require$$0.jsx(ServerOffline, {}), chatState.wsButton && visible && (require$$0.jsx(WsButton, { button: chatState.wsButton, onPress: handleWsButtonPress })), require$$0.jsx(ChatFooter, { isAdmin: config === null || config === void 0 ? void 0 : config.isAdmin, isChatting: chatState.isChatting, placeholder: (_x = config === null || config === void 0 ? void 0 : config.input) === null || _x === void 0 ? void 0 : _x.placeholder, sendButtonIcon: (_z = (_y = config === null || config === void 0 ? void 0 : config.footer) === null || _y === void 0 ? void 0 : _y.sendButton) === null || _z === void 0 ? void 0 : _z.icon, sendButtonIconHover: (_1 = (_0 = config === null || config === void 0 ? void 0 : config.footer) === null || _0 === void 0 ? void 0 : _0.sendButton) === null || _1 === void 0 ? void 0 : _1.iconHover, sendButtonIconDisabled: (_3 = (_2 = config === null || config === void 0 ? void 0 : config.footer) === null || _2 === void 0 ? void 0 : _2.sendButton) === null || _3 === void 0 ? void 0 : _3.iconDisabled, visible: visible, hasWsButton: !!chatState.wsButton, menuConfig: props.config.menu, footerConfig: (_4 = props.config) === null || _4 === void 0 ? void 0 : _4.footer, inputConfig: (_5 = props.config) === null || _5 === void 0 ? void 0 : _5.input, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload }), require$$0.jsx("div", { className: "restartModal", ref: modalRef, onClick: handleRestartModalCloseClick, children: require$$0.jsx(ModalContent, { onClose: handleRestartModalCloseClick, onReset: handleReset }) })] }), require$$0.jsx(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: config === null || config === void 0 ? void 0 : config.cta, imageUrl: (_6 = config === null || config === void 0 ? void 0 : config.chatButton) === null || _6 === void 0 ? void 0 : _6.imageUrl, visible: visible, hasInteracted: (_7 = chatState.visuals) === null || _7 === void 0 ? void 0 : _7.hasInteracted, onCtaDismiss: handleCtaDismiss }), require$$0.jsx(ErrorOverlay, { enableErrorOverlay: config === null || config === void 0 ? void 0 : config.enableErrorOverlay })] }));
 };
 
 // src/utils/formatProdErrorMessage.ts
@@ -32174,7 +32361,7 @@ var ActionTypes = {
 var actionTypes_default = ActionTypes;
 
 // src/utils/isPlainObject.ts
-function isPlainObject(obj) {
+function isPlainObject$1(obj) {
   if (typeof obj !== "object" || obj === null)
     return false;
   let proto = obj;
@@ -32247,7 +32434,7 @@ function createStore(reducer, preloadedState, enhancer) {
     };
   }
   function dispatch(action) {
-    if (!isPlainObject(action)) {
+    if (!isPlainObject$1(action)) {
       throw new Error(formatProdErrorMessage$1(7) );
     }
     if (typeof action.type === "undefined") {
@@ -32410,6 +32597,726 @@ function applyMiddleware(...middlewares) {
   };
 }
 
+// src/utils/env.ts
+var NOTHING = Symbol.for("immer-nothing");
+var DRAFTABLE = Symbol.for("immer-draftable");
+var DRAFT_STATE = Symbol.for("immer-state");
+function die(error, ...args) {
+  throw new Error(
+    `[Immer] minified error nr: ${error}. Full error at: https://bit.ly/3cXEKWf`
+  );
+}
+
+// src/utils/common.ts
+var getPrototypeOf = Object.getPrototypeOf;
+function isDraft(value) {
+  return !!value && !!value[DRAFT_STATE];
+}
+function isDraftable(value) {
+  if (!value)
+    return false;
+  return isPlainObject(value) || Array.isArray(value) || !!value[DRAFTABLE] || !!value.constructor?.[DRAFTABLE] || isMap(value) || isSet(value);
+}
+var objectCtorString = Object.prototype.constructor.toString();
+var cachedCtorStrings = /* @__PURE__ */ new WeakMap();
+function isPlainObject(value) {
+  if (!value || typeof value !== "object")
+    return false;
+  const proto = Object.getPrototypeOf(value);
+  if (proto === null || proto === Object.prototype)
+    return true;
+  const Ctor = Object.hasOwnProperty.call(proto, "constructor") && proto.constructor;
+  if (Ctor === Object)
+    return true;
+  if (typeof Ctor !== "function")
+    return false;
+  let ctorString = cachedCtorStrings.get(Ctor);
+  if (ctorString === void 0) {
+    ctorString = Function.toString.call(Ctor);
+    cachedCtorStrings.set(Ctor, ctorString);
+  }
+  return ctorString === objectCtorString;
+}
+function each(obj, iter, strict = true) {
+  if (getArchtype(obj) === 0 /* Object */) {
+    const keys = strict ? Reflect.ownKeys(obj) : Object.keys(obj);
+    keys.forEach((key) => {
+      iter(key, obj[key], obj);
+    });
+  } else {
+    obj.forEach((entry, index) => iter(index, entry, obj));
+  }
+}
+function getArchtype(thing) {
+  const state = thing[DRAFT_STATE];
+  return state ? state.type_ : Array.isArray(thing) ? 1 /* Array */ : isMap(thing) ? 2 /* Map */ : isSet(thing) ? 3 /* Set */ : 0 /* Object */;
+}
+function has(thing, prop) {
+  return getArchtype(thing) === 2 /* Map */ ? thing.has(prop) : Object.prototype.hasOwnProperty.call(thing, prop);
+}
+function set(thing, propOrOldValue, value) {
+  const t = getArchtype(thing);
+  if (t === 2 /* Map */)
+    thing.set(propOrOldValue, value);
+  else if (t === 3 /* Set */) {
+    thing.add(value);
+  } else
+    thing[propOrOldValue] = value;
+}
+function is(x, y) {
+  if (x === y) {
+    return x !== 0 || 1 / x === 1 / y;
+  } else {
+    return x !== x && y !== y;
+  }
+}
+function isMap(target) {
+  return target instanceof Map;
+}
+function isSet(target) {
+  return target instanceof Set;
+}
+function latest(state) {
+  return state.copy_ || state.base_;
+}
+function shallowCopy(base, strict) {
+  if (isMap(base)) {
+    return new Map(base);
+  }
+  if (isSet(base)) {
+    return new Set(base);
+  }
+  if (Array.isArray(base))
+    return Array.prototype.slice.call(base);
+  const isPlain = isPlainObject(base);
+  if (strict === true || strict === "class_only" && !isPlain) {
+    const descriptors = Object.getOwnPropertyDescriptors(base);
+    delete descriptors[DRAFT_STATE];
+    let keys = Reflect.ownKeys(descriptors);
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      const desc = descriptors[key];
+      if (desc.writable === false) {
+        desc.writable = true;
+        desc.configurable = true;
+      }
+      if (desc.get || desc.set)
+        descriptors[key] = {
+          configurable: true,
+          writable: true,
+          // could live with !!desc.set as well here...
+          enumerable: desc.enumerable,
+          value: base[key]
+        };
+    }
+    return Object.create(getPrototypeOf(base), descriptors);
+  } else {
+    const proto = getPrototypeOf(base);
+    if (proto !== null && isPlain) {
+      return { ...base };
+    }
+    const obj = Object.create(proto);
+    return Object.assign(obj, base);
+  }
+}
+function freeze(obj, deep = false) {
+  if (isFrozen(obj) || isDraft(obj) || !isDraftable(obj))
+    return obj;
+  if (getArchtype(obj) > 1) {
+    Object.defineProperties(obj, {
+      set: dontMutateMethodOverride,
+      add: dontMutateMethodOverride,
+      clear: dontMutateMethodOverride,
+      delete: dontMutateMethodOverride
+    });
+  }
+  Object.freeze(obj);
+  if (deep)
+    Object.values(obj).forEach((value) => freeze(value, true));
+  return obj;
+}
+function dontMutateFrozenCollections() {
+  die(2);
+}
+var dontMutateMethodOverride = {
+  value: dontMutateFrozenCollections
+};
+function isFrozen(obj) {
+  if (obj === null || typeof obj !== "object")
+    return true;
+  return Object.isFrozen(obj);
+}
+
+// src/utils/plugins.ts
+var plugins = {};
+function getPlugin(pluginKey) {
+  const plugin = plugins[pluginKey];
+  if (!plugin) {
+    die(0, pluginKey);
+  }
+  return plugin;
+}
+
+// src/core/scope.ts
+var currentScope;
+function getCurrentScope() {
+  return currentScope;
+}
+function createScope(parent_, immer_) {
+  return {
+    drafts_: [],
+    parent_,
+    immer_,
+    // Whenever the modified draft contains a draft from another scope, we
+    // need to prevent auto-freezing so the unowned draft can be finalized.
+    canAutoFreeze_: true,
+    unfinalizedDrafts_: 0
+  };
+}
+function usePatchesInScope(scope, patchListener) {
+  if (patchListener) {
+    getPlugin("Patches");
+    scope.patches_ = [];
+    scope.inversePatches_ = [];
+    scope.patchListener_ = patchListener;
+  }
+}
+function revokeScope(scope) {
+  leaveScope(scope);
+  scope.drafts_.forEach(revokeDraft);
+  scope.drafts_ = null;
+}
+function leaveScope(scope) {
+  if (scope === currentScope) {
+    currentScope = scope.parent_;
+  }
+}
+function enterScope(immer2) {
+  return currentScope = createScope(currentScope, immer2);
+}
+function revokeDraft(draft) {
+  const state = draft[DRAFT_STATE];
+  if (state.type_ === 0 /* Object */ || state.type_ === 1 /* Array */)
+    state.revoke_();
+  else
+    state.revoked_ = true;
+}
+
+// src/core/finalize.ts
+function processResult(result, scope) {
+  scope.unfinalizedDrafts_ = scope.drafts_.length;
+  const baseDraft = scope.drafts_[0];
+  const isReplaced = result !== void 0 && result !== baseDraft;
+  if (isReplaced) {
+    if (baseDraft[DRAFT_STATE].modified_) {
+      revokeScope(scope);
+      die(4);
+    }
+    if (isDraftable(result)) {
+      result = finalize(scope, result);
+      if (!scope.parent_)
+        maybeFreeze(scope, result);
+    }
+    if (scope.patches_) {
+      getPlugin("Patches").generateReplacementPatches_(
+        baseDraft[DRAFT_STATE].base_,
+        result,
+        scope.patches_,
+        scope.inversePatches_
+      );
+    }
+  } else {
+    result = finalize(scope, baseDraft, []);
+  }
+  revokeScope(scope);
+  if (scope.patches_) {
+    scope.patchListener_(scope.patches_, scope.inversePatches_);
+  }
+  return result !== NOTHING ? result : void 0;
+}
+function finalize(rootScope, value, path) {
+  if (isFrozen(value))
+    return value;
+  const useStrictIteration = rootScope.immer_.shouldUseStrictIteration();
+  const state = value[DRAFT_STATE];
+  if (!state) {
+    each(
+      value,
+      (key, childValue) => finalizeProperty(rootScope, state, value, key, childValue, path),
+      useStrictIteration
+    );
+    return value;
+  }
+  if (state.scope_ !== rootScope)
+    return value;
+  if (!state.modified_) {
+    maybeFreeze(rootScope, state.base_, true);
+    return state.base_;
+  }
+  if (!state.finalized_) {
+    state.finalized_ = true;
+    state.scope_.unfinalizedDrafts_--;
+    const result = state.copy_;
+    let resultEach = result;
+    let isSet2 = false;
+    if (state.type_ === 3 /* Set */) {
+      resultEach = new Set(result);
+      result.clear();
+      isSet2 = true;
+    }
+    each(
+      resultEach,
+      (key, childValue) => finalizeProperty(
+        rootScope,
+        state,
+        result,
+        key,
+        childValue,
+        path,
+        isSet2
+      ),
+      useStrictIteration
+    );
+    maybeFreeze(rootScope, result, false);
+    if (path && rootScope.patches_) {
+      getPlugin("Patches").generatePatches_(
+        state,
+        path,
+        rootScope.patches_,
+        rootScope.inversePatches_
+      );
+    }
+  }
+  return state.copy_;
+}
+function finalizeProperty(rootScope, parentState, targetObject, prop, childValue, rootPath, targetIsSet) {
+  if (childValue == null) {
+    return;
+  }
+  if (typeof childValue !== "object" && !targetIsSet) {
+    return;
+  }
+  const childIsFrozen = isFrozen(childValue);
+  if (childIsFrozen && !targetIsSet) {
+    return;
+  }
+  if (isDraft(childValue)) {
+    const path = rootPath && parentState && parentState.type_ !== 3 /* Set */ && // Set objects are atomic since they have no keys.
+    !has(parentState.assigned_, prop) ? rootPath.concat(prop) : void 0;
+    const res = finalize(rootScope, childValue, path);
+    set(targetObject, prop, res);
+    if (isDraft(res)) {
+      rootScope.canAutoFreeze_ = false;
+    } else
+      return;
+  } else if (targetIsSet) {
+    targetObject.add(childValue);
+  }
+  if (isDraftable(childValue) && !childIsFrozen) {
+    if (!rootScope.immer_.autoFreeze_ && rootScope.unfinalizedDrafts_ < 1) {
+      return;
+    }
+    if (parentState && parentState.base_ && parentState.base_[prop] === childValue && childIsFrozen) {
+      return;
+    }
+    finalize(rootScope, childValue);
+    if ((!parentState || !parentState.scope_.parent_) && typeof prop !== "symbol" && (isMap(targetObject) ? targetObject.has(prop) : Object.prototype.propertyIsEnumerable.call(targetObject, prop)))
+      maybeFreeze(rootScope, childValue);
+  }
+}
+function maybeFreeze(scope, value, deep = false) {
+  if (!scope.parent_ && scope.immer_.autoFreeze_ && scope.canAutoFreeze_) {
+    freeze(value, deep);
+  }
+}
+
+// src/core/proxy.ts
+function createProxyProxy(base, parent) {
+  const isArray = Array.isArray(base);
+  const state = {
+    type_: isArray ? 1 /* Array */ : 0 /* Object */,
+    // Track which produce call this is associated with.
+    scope_: parent ? parent.scope_ : getCurrentScope(),
+    // True for both shallow and deep changes.
+    modified_: false,
+    // Used during finalization.
+    finalized_: false,
+    // Track which properties have been assigned (true) or deleted (false).
+    assigned_: {},
+    // The parent draft state.
+    parent_: parent,
+    // The base state.
+    base_: base,
+    // The base proxy.
+    draft_: null,
+    // set below
+    // The base copy with any updated values.
+    copy_: null,
+    // Called by the `produce` function.
+    revoke_: null,
+    isManual_: false
+  };
+  let target = state;
+  let traps = objectTraps;
+  if (isArray) {
+    target = [state];
+    traps = arrayTraps;
+  }
+  const { revoke, proxy } = Proxy.revocable(target, traps);
+  state.draft_ = proxy;
+  state.revoke_ = revoke;
+  return proxy;
+}
+var objectTraps = {
+  get(state, prop) {
+    if (prop === DRAFT_STATE)
+      return state;
+    const source = latest(state);
+    if (!has(source, prop)) {
+      return readPropFromProto(state, source, prop);
+    }
+    const value = source[prop];
+    if (state.finalized_ || !isDraftable(value)) {
+      return value;
+    }
+    if (value === peek(state.base_, prop)) {
+      prepareCopy(state);
+      return state.copy_[prop] = createProxy(value, state);
+    }
+    return value;
+  },
+  has(state, prop) {
+    return prop in latest(state);
+  },
+  ownKeys(state) {
+    return Reflect.ownKeys(latest(state));
+  },
+  set(state, prop, value) {
+    const desc = getDescriptorFromProto(latest(state), prop);
+    if (desc?.set) {
+      desc.set.call(state.draft_, value);
+      return true;
+    }
+    if (!state.modified_) {
+      const current2 = peek(latest(state), prop);
+      const currentState = current2?.[DRAFT_STATE];
+      if (currentState && currentState.base_ === value) {
+        state.copy_[prop] = value;
+        state.assigned_[prop] = false;
+        return true;
+      }
+      if (is(value, current2) && (value !== void 0 || has(state.base_, prop)))
+        return true;
+      prepareCopy(state);
+      markChanged(state);
+    }
+    if (state.copy_[prop] === value && // special case: handle new props with value 'undefined'
+    (value !== void 0 || prop in state.copy_) || // special case: NaN
+    Number.isNaN(value) && Number.isNaN(state.copy_[prop]))
+      return true;
+    state.copy_[prop] = value;
+    state.assigned_[prop] = true;
+    return true;
+  },
+  deleteProperty(state, prop) {
+    if (peek(state.base_, prop) !== void 0 || prop in state.base_) {
+      state.assigned_[prop] = false;
+      prepareCopy(state);
+      markChanged(state);
+    } else {
+      delete state.assigned_[prop];
+    }
+    if (state.copy_) {
+      delete state.copy_[prop];
+    }
+    return true;
+  },
+  // Note: We never coerce `desc.value` into an Immer draft, because we can't make
+  // the same guarantee in ES5 mode.
+  getOwnPropertyDescriptor(state, prop) {
+    const owner = latest(state);
+    const desc = Reflect.getOwnPropertyDescriptor(owner, prop);
+    if (!desc)
+      return desc;
+    return {
+      writable: true,
+      configurable: state.type_ !== 1 /* Array */ || prop !== "length",
+      enumerable: desc.enumerable,
+      value: owner[prop]
+    };
+  },
+  defineProperty() {
+    die(11);
+  },
+  getPrototypeOf(state) {
+    return getPrototypeOf(state.base_);
+  },
+  setPrototypeOf() {
+    die(12);
+  }
+};
+var arrayTraps = {};
+each(objectTraps, (key, fn) => {
+  arrayTraps[key] = function() {
+    arguments[0] = arguments[0][0];
+    return fn.apply(this, arguments);
+  };
+});
+arrayTraps.deleteProperty = function(state, prop) {
+  return arrayTraps.set.call(this, state, prop, void 0);
+};
+arrayTraps.set = function(state, prop, value) {
+  return objectTraps.set.call(this, state[0], prop, value, state[0]);
+};
+function peek(draft, prop) {
+  const state = draft[DRAFT_STATE];
+  const source = state ? latest(state) : draft;
+  return source[prop];
+}
+function readPropFromProto(state, source, prop) {
+  const desc = getDescriptorFromProto(source, prop);
+  return desc ? `value` in desc ? desc.value : (
+    // This is a very special case, if the prop is a getter defined by the
+    // prototype, we should invoke it with the draft as context!
+    desc.get?.call(state.draft_)
+  ) : void 0;
+}
+function getDescriptorFromProto(source, prop) {
+  if (!(prop in source))
+    return void 0;
+  let proto = getPrototypeOf(source);
+  while (proto) {
+    const desc = Object.getOwnPropertyDescriptor(proto, prop);
+    if (desc)
+      return desc;
+    proto = getPrototypeOf(proto);
+  }
+  return void 0;
+}
+function markChanged(state) {
+  if (!state.modified_) {
+    state.modified_ = true;
+    if (state.parent_) {
+      markChanged(state.parent_);
+    }
+  }
+}
+function prepareCopy(state) {
+  if (!state.copy_) {
+    state.copy_ = shallowCopy(
+      state.base_,
+      state.scope_.immer_.useStrictShallowCopy_
+    );
+  }
+}
+
+// src/core/immerClass.ts
+var Immer2 = class {
+  constructor(config) {
+    this.autoFreeze_ = true;
+    this.useStrictShallowCopy_ = false;
+    this.useStrictIteration_ = true;
+    /**
+     * The `produce` function takes a value and a "recipe function" (whose
+     * return value often depends on the base state). The recipe function is
+     * free to mutate its first argument however it wants. All mutations are
+     * only ever applied to a __copy__ of the base state.
+     *
+     * Pass only a function to create a "curried producer" which relieves you
+     * from passing the recipe function every time.
+     *
+     * Only plain objects and arrays are made mutable. All other objects are
+     * considered uncopyable.
+     *
+     * Note: This function is __bound__ to its `Immer` instance.
+     *
+     * @param {any} base - the initial state
+     * @param {Function} recipe - function that receives a proxy of the base state as first argument and which can be freely modified
+     * @param {Function} patchListener - optional function that will be called with all the patches produced here
+     * @returns {any} a new state, or the initial state if nothing was modified
+     */
+    this.produce = (base, recipe, patchListener) => {
+      if (typeof base === "function" && typeof recipe !== "function") {
+        const defaultBase = recipe;
+        recipe = base;
+        const self = this;
+        return function curriedProduce(base2 = defaultBase, ...args) {
+          return self.produce(base2, (draft) => recipe.call(this, draft, ...args));
+        };
+      }
+      if (typeof recipe !== "function")
+        die(6);
+      if (patchListener !== void 0 && typeof patchListener !== "function")
+        die(7);
+      let result;
+      if (isDraftable(base)) {
+        const scope = enterScope(this);
+        const proxy = createProxy(base, void 0);
+        let hasError = true;
+        try {
+          result = recipe(proxy);
+          hasError = false;
+        } finally {
+          if (hasError)
+            revokeScope(scope);
+          else
+            leaveScope(scope);
+        }
+        usePatchesInScope(scope, patchListener);
+        return processResult(result, scope);
+      } else if (!base || typeof base !== "object") {
+        result = recipe(base);
+        if (result === void 0)
+          result = base;
+        if (result === NOTHING)
+          result = void 0;
+        if (this.autoFreeze_)
+          freeze(result, true);
+        if (patchListener) {
+          const p = [];
+          const ip = [];
+          getPlugin("Patches").generateReplacementPatches_(base, result, p, ip);
+          patchListener(p, ip);
+        }
+        return result;
+      } else
+        die(1, base);
+    };
+    this.produceWithPatches = (base, recipe) => {
+      if (typeof base === "function") {
+        return (state, ...args) => this.produceWithPatches(state, (draft) => base(draft, ...args));
+      }
+      let patches, inversePatches;
+      const result = this.produce(base, recipe, (p, ip) => {
+        patches = p;
+        inversePatches = ip;
+      });
+      return [result, patches, inversePatches];
+    };
+    if (typeof config?.autoFreeze === "boolean")
+      this.setAutoFreeze(config.autoFreeze);
+    if (typeof config?.useStrictShallowCopy === "boolean")
+      this.setUseStrictShallowCopy(config.useStrictShallowCopy);
+    if (typeof config?.useStrictIteration === "boolean")
+      this.setUseStrictIteration(config.useStrictIteration);
+  }
+  createDraft(base) {
+    if (!isDraftable(base))
+      die(8);
+    if (isDraft(base))
+      base = current(base);
+    const scope = enterScope(this);
+    const proxy = createProxy(base, void 0);
+    proxy[DRAFT_STATE].isManual_ = true;
+    leaveScope(scope);
+    return proxy;
+  }
+  finishDraft(draft, patchListener) {
+    const state = draft && draft[DRAFT_STATE];
+    if (!state || !state.isManual_)
+      die(9);
+    const { scope_: scope } = state;
+    usePatchesInScope(scope, patchListener);
+    return processResult(void 0, scope);
+  }
+  /**
+   * Pass true to automatically freeze all copies created by Immer.
+   *
+   * By default, auto-freezing is enabled.
+   */
+  setAutoFreeze(value) {
+    this.autoFreeze_ = value;
+  }
+  /**
+   * Pass true to enable strict shallow copy.
+   *
+   * By default, immer does not copy the object descriptors such as getter, setter and non-enumrable properties.
+   */
+  setUseStrictShallowCopy(value) {
+    this.useStrictShallowCopy_ = value;
+  }
+  /**
+   * Pass false to use faster iteration that skips non-enumerable properties
+   * but still handles symbols for compatibility.
+   *
+   * By default, strict iteration is enabled (includes all own properties).
+   */
+  setUseStrictIteration(value) {
+    this.useStrictIteration_ = value;
+  }
+  shouldUseStrictIteration() {
+    return this.useStrictIteration_;
+  }
+  applyPatches(base, patches) {
+    let i;
+    for (i = patches.length - 1; i >= 0; i--) {
+      const patch = patches[i];
+      if (patch.path.length === 0 && patch.op === "replace") {
+        base = patch.value;
+        break;
+      }
+    }
+    if (i > -1) {
+      patches = patches.slice(i + 1);
+    }
+    const applyPatchesImpl = getPlugin("Patches").applyPatches_;
+    if (isDraft(base)) {
+      return applyPatchesImpl(base, patches);
+    }
+    return this.produce(
+      base,
+      (draft) => applyPatchesImpl(draft, patches)
+    );
+  }
+};
+function createProxy(value, parent) {
+  const draft = isMap(value) ? getPlugin("MapSet").proxyMap_(value, parent) : isSet(value) ? getPlugin("MapSet").proxySet_(value, parent) : createProxyProxy(value, parent);
+  const scope = parent ? parent.scope_ : getCurrentScope();
+  scope.drafts_.push(draft);
+  return draft;
+}
+
+// src/core/current.ts
+function current(value) {
+  if (!isDraft(value))
+    die(10, value);
+  return currentImpl(value);
+}
+function currentImpl(value) {
+  if (!isDraftable(value) || isFrozen(value))
+    return value;
+  const state = value[DRAFT_STATE];
+  let copy;
+  let strict = true;
+  if (state) {
+    if (!state.modified_)
+      return state.base_;
+    state.finalized_ = true;
+    copy = shallowCopy(value, state.scope_.immer_.useStrictShallowCopy_);
+    strict = state.scope_.immer_.shouldUseStrictIteration();
+  } else {
+    copy = shallowCopy(value, true);
+  }
+  each(
+    copy,
+    (key, childValue) => {
+      set(copy, key, currentImpl(childValue));
+    },
+    strict
+  );
+  if (state) {
+    state.finalized_ = false;
+  }
+  return copy;
+}
+
+// src/immer.ts
+var immer = new Immer2();
+immer.produce;
+var setUseStrictIteration = /* @__PURE__ */ immer.setUseStrictIteration.bind(
+  immer
+);
+
 // src/index.ts
 function createThunkMiddleware(extraArgument) {
   const middleware = ({ dispatch, getState }) => (next) => (action) => {
@@ -32424,6 +33331,8 @@ var thunk = createThunkMiddleware();
 var withExtraArgument = createThunkMiddleware;
 
 // src/index.ts
+
+// src/devtoolsExtension.ts
 var composeWithDevTools = typeof window !== "undefined" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : function() {
   if (arguments.length === 0) return void 0;
   if (typeof arguments[0] === "object") return compose;
@@ -32554,7 +33463,7 @@ function configureStore(options) {
   let rootReducer;
   if (typeof reducer === "function") {
     rootReducer = reducer;
-  } else if (isPlainObject(reducer)) {
+  } else if (isPlainObject$1(reducer)) {
     rootReducer = combineReducers(reducer);
   } else {
     throw new Error(formatProdErrorMessage(1) );
@@ -32580,6 +33489,9 @@ function configureStore(options) {
   return createStore(rootReducer, preloadedState, composedEnhancer);
 }
 
+// src/createReducer.ts
+setUseStrictIteration(false);
+
 // src/formatProdErrorMessage.ts
 function formatProdErrorMessage(code) {
   return `Minified Redux Toolkit error #${code}; visit https://redux-toolkit.js.org/Errors?code=${code} for the full message or use the non-minified dev environment for full errors. `;
@@ -32744,11 +33656,26 @@ function memberJoin(state, detail) {
     // }
     var agents = __assign({}, state.agents);
     var prevAgentInfo = state.agents[detail.user.nick];
-    agents[detail.user.nick] = __assign(__assign({}, prevAgentInfo), { user: __assign(__assign({}, detail.user), { displayName: detail.user.displayName || "Agent" }), joined: true, typing: false });
+    agents[detail.user.nick] = __assign(__assign({}, prevAgentInfo), { user: __assign(__assign({}, detail.user), { displayName: detail.user.displayName || "Agent" }), joined: true, typing: false, hideUserInfo: detail.hideUserInfo });
     if (isAgent(detail.user.nick)) {
-        return __assign(__assign({}, state), { isChatting: true, chats: (prevAgentInfo === null || prevAgentInfo === void 0 ? void 0 : prevAgentInfo.joined) ? state.chats : joinMessages(state.chats, detail), agents: agents });
+        // Always show join messages with special visual features (divider or custom message)
+        // These are important conversation markers, not routine join notifications
+        var hasSpecialVisuals = detail.showDivider || detail.message;
+        if ((prevAgentInfo === null || prevAgentInfo === void 0 ? void 0 : prevAgentInfo.joined) && !hasSpecialVisuals) {
+            log("DEDUPLICATION: Agent \"".concat(detail.user.displayName || "Unknown", "\" (nick: ").concat(detail.user.nick, ") already joined. NOT adding duplicate join message to chat."));
+        }
+        else {
+            if (hasSpecialVisuals) {
+                log("Agent \"".concat(detail.user.displayName || "Unknown", "\" (nick: ").concat(detail.user.nick, ") is joining with special visuals (divider or custom message). Adding join message to chat."));
+            }
+            else {
+                log("Agent \"".concat(detail.user.displayName || "Unknown", "\" (nick: ").concat(detail.user.nick, ") is joining. Adding join message to chat."));
+            }
+        }
+        return __assign(__assign({}, state), { isChatting: true, chats: ((prevAgentInfo === null || prevAgentInfo === void 0 ? void 0 : prevAgentInfo.joined) && !hasSpecialVisuals) ? state.chats : joinMessages(state.chats, detail), agents: agents });
     }
     else {
+        log("Non-agent member \"".concat(detail.user.displayName || "Unknown", "\" (nick: ").concat(detail.user.nick, ") is joining. Adding join message to chat."));
         return __assign(__assign({}, state), { isChatting: true, chats: joinMessages(state.chats, detail), agents: agents });
     }
 }
@@ -32761,25 +33688,51 @@ function memberLeave(state, detail) {
     var agentsJoined = Object.values(agents).filter(function (agent) { return agent.joined; });
     var isChatting = agentsJoined.length > 0;
     if (isAgent(detail.user.nick)) {
+        var hasSpecialVisuals = detail.showDivider || detail.message;
+        if (prevAgentInfo === null || prevAgentInfo === void 0 ? void 0 : prevAgentInfo.joined) {
+            if (hasSpecialVisuals) {
+                log("Agent \"".concat(detail.user.displayName || "Unknown", "\" (nick: ").concat(detail.user.nick, ") is leaving with special visuals (divider or custom message). Adding leave message to chat."));
+            }
+            else {
+                log("Agent \"".concat(detail.user.displayName || "Unknown", "\" (nick: ").concat(detail.user.nick, ") is leaving. Adding leave message to chat."));
+            }
+        }
+        else {
+            log("DEDUPLICATION: Agent \"".concat(detail.user.displayName || "Unknown", "\" (nick: ").concat(detail.user.nick, ") already left. NOT adding duplicate leave message to chat."));
+        }
         return __assign(__assign({}, state), { isChatting: isChatting, chats: (prevAgentInfo === null || prevAgentInfo === void 0 ? void 0 : prevAgentInfo.joined) ? joinMessages(state.chats, detail) : state.chats, agents: agents });
     }
     else {
+        log("Non-agent member \"".concat(detail.user.displayName || "Unknown", "\" (nick: ").concat(detail.user.nick, ") is leaving. Adding leave message to chat."));
         return __assign(__assign({}, state), { isChatting: isChatting, chats: joinMessages(state.chats, detail), agents: agents });
     }
 }
 
 function resetReducer(state) {
     if (state === void 0) { state = DEFAULT_STATE; }
-    return __assign(__assign({}, createDefaultState({
+    var defaultState = createDefaultState({
         accessToken: state.accessToken,
         userId: state.userId,
         attributes: state.attributes,
         sessionExpiration: state.sessionExpiration
-    })), { connection: __assign(__assign({}, state.connection), { greetingRequested: false, nonce: uuid_1() }), visitor: state.visitor, visitorId: state.visitorId, 
+    });
+    // If we have an active connection, preserve status to avoid showing offline during reconnect
+    var wasOnline = state.connection.connectionStatus === 'online';
+    return __assign(__assign({}, defaultState), { connection: __assign(__assign({}, defaultState.connection), { greetingRequested: false, 
+            // Generate new nonce to trigger server recreation and start fresh session
+            nonce: uuid_1(), 
+            // Preserve connection status during transition if we were online
+            connectionStatus: wasOnline ? 'online' : defaultState.connection.connectionStatus }), 
+        // Preserve accountStatus if we were online to avoid showing offline message during reconnect
+        accountStatus: wasOnline ? 'online' : defaultState.accountStatus, visitor: state.visitor, visitorId: state.visitorId, 
         // Explicitly reset visuals to clear hasInteracted flag for widget refresh
         visuals: {} });
 }
 
+// Type guard for ChatSystemMessageDetail
+function isChatSystemMessage(chat) {
+    return chat.type === "chat.systemmessage";
+}
 // todo: create reducer (requires redux-thunk dependency)
 function appendMessageToState(state, msg) {
     state.chats = joinMessages(state.chats, msg);
@@ -32789,7 +33742,7 @@ function appendMessageToState(state, msg) {
 }
 function update(state, action) {
     var _a, _b, _c, _d;
-    var _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     if (state === void 0) { state = DEFAULT_STATE; }
     log("action", action);
     if (action.type === "reset") {
@@ -32818,21 +33771,50 @@ function update(state, action) {
                 window.localStorage.setItem('xaErrorOverlay', newDebugMode ? 'enabled' : 'disabled');
             }
             return __assign(__assign({}, state), { debugMode: newDebugMode });
+        case "ws_button_display":
+            return __assign(__assign({}, state), { lastTimestamp: (_j = action.detail) === null || _j === void 0 ? void 0 : _j.timestamp, wsButton: {
+                    id: action.detail.id,
+                    // Preserve existing text if new text is empty (e.g., during dismiss animation)
+                    text: action.detail.text || ((_k = state.wsButton) === null || _k === void 0 ? void 0 : _k.text) || '',
+                    pressBehavior: action.detail.pressBehavior,
+                    isPressed: (_l = action.detail.isPressed) !== null && _l !== void 0 ? _l : false,
+                    isDismissing: (_m = action.detail.isDismissing) !== null && _m !== void 0 ? _m : false
+                } });
+        case "ws_button_dismiss":
+            // Only dismiss if the id matches
+            if (((_o = state.wsButton) === null || _o === void 0 ? void 0 : _o.id) === action.detail.id) {
+                return __assign(__assign({}, state), { lastTimestamp: (_p = action.detail) === null || _p === void 0 ? void 0 : _p.timestamp, wsButton: undefined });
+            }
+            return state;
         case "department_update":
-            return __assign(__assign({}, state), { lastTimestamp: (_j = action.detail) === null || _j === void 0 ? void 0 : _j.timestamp, departments: __assign(__assign({}, state.departments), (_a = {}, _a[action.detail.id] = __assign({}, action.detail), _a)) });
+            return __assign(__assign({}, state), { lastTimestamp: (_q = action.detail) === null || _q === void 0 ? void 0 : _q.timestamp, departments: __assign(__assign({}, state.departments), (_a = {}, _a[action.detail.id] = __assign({}, action.detail), _a)) });
         case "visitor_update":
-            return __assign(__assign({}, state), { lastTimestamp: (_k = action.detail) === null || _k === void 0 ? void 0 : _k.timestamp, visitor: __assign(__assign({}, state.visitor), action.detail) });
+            return __assign(__assign({}, state), { lastTimestamp: (_r = action.detail) === null || _r === void 0 ? void 0 : _r.timestamp, visitor: __assign(__assign({}, state.visitor), action.detail) });
         case "agent_update":
             var prevUpdateAgent = state.agents[action.detail.nick];
-            return __assign(__assign({}, state), { lastTimestamp: (_l = action.detail) === null || _l === void 0 ? void 0 : _l.timestamp, agents: __assign(__assign({}, state.agents), (_b = {}, _b[action.detail.nick] = __assign(__assign({}, prevUpdateAgent), { user: __assign(__assign({}, prevUpdateAgent.user), action.detail), typing: (prevUpdateAgent || { typing: false }).typing // if we had it - keep it
+            return __assign(__assign({}, state), { lastTimestamp: (_s = action.detail) === null || _s === void 0 ? void 0 : _s.timestamp, agents: __assign(__assign({}, state.agents), (_b = {}, _b[action.detail.nick] = __assign(__assign({}, prevUpdateAgent), { user: __assign(__assign({}, prevUpdateAgent.user), action.detail), typing: (prevUpdateAgent || { typing: false }).typing // if we had it - keep it
                  }), _b)) });
         case "chat":
-            var newState = __assign(__assign({}, state), { lastTimestamp: (_m = action.detail) === null || _m === void 0 ? void 0 : _m.timestamp });
+            var newState = __assign(__assign({}, state), { lastTimestamp: (_t = action.detail) === null || _t === void 0 ? void 0 : _t.timestamp });
             switch (action.detail.type) {
                 case "chat.memberjoin":
                     return memberJoin(state, action.detail);
                 case "chat.memberleave":
                     return memberLeave(state, action.detail);
+                case "chat.systemmessage":
+                    // Add the system message to the chat
+                    appendMessageToState(newState, action.detail);
+                    return newState;
+                case "chat.systemmessagedismiss":
+                    // Remove system message(s) with the specified id
+                    var dismissId_1 = action.detail.id;
+                    return __assign(__assign({}, newState), { chats: newState.chats.filter(function (chat) {
+                            // Keep all non-system messages, and system messages that don't match the id
+                            if (isChatSystemMessage(chat)) {
+                                return chat.id !== dismissId_1;
+                            }
+                            return true;
+                        }) });
                 case "chat.queue.position":
                     newState.queuePosition = action.detail.queuePosition;
                     return newState;
@@ -32847,7 +33829,7 @@ function update(state, action) {
                     appendMessageToState(newState, action.detail);
                     var detail = action.detail;
                     var msg = detail.type === "chat.msg" ? detail.msg : null;
-                    newState.chips = ((_o = msg === null || msg === void 0 ? void 0 : msg.options) === null || _o === void 0 ? void 0 : _o.length) ? msg.options : [];
+                    newState.chips = ((_u = msg === null || msg === void 0 ? void 0 : msg.options) === null || _u === void 0 ? void 0 : _u.length) ? msg.options : [];
                     return newState;
                 case "chat.failureMsg":
                     var agentDetails = newState.agents[action.detail.user.nick];
@@ -32867,7 +33849,7 @@ function update(state, action) {
                     return __assign(__assign({}, finalState), { agents: __assign(__assign({}, finalState.agents), (_c = {}, _c[action.detail.user.nick] = __assign(__assign({}, agentDetails), { typing: false, requestFailed: true }), _c)), failureMsg: action.detail.failureMsg });
                 case "chat.typing":
                     var agent = state.agents[action.detail.user.nick];
-                    return __assign(__assign({}, state), { lastTimestamp: (_p = action.detail) === null || _p === void 0 ? void 0 : _p.timestamp, agents: __assign(__assign({}, state.agents), (_d = {}, _d[action.detail.user.nick] = __assign(__assign({}, agent), { typing: action.detail.typing }), _d)) });
+                    return __assign(__assign({}, state), { lastTimestamp: (_v = action.detail) === null || _v === void 0 ? void 0 : _v.timestamp, agents: __assign(__assign({}, state.agents), (_d = {}, _d[action.detail.user.nick] = __assign(__assign({}, agent), { typing: action.detail.typing }), _d)) });
                 default:
                     return state;
             }
@@ -33012,7 +33994,7 @@ var ChatWidgetContainer = function (props) {
     var _a, _b, _c, _d, _e, _f;
     var messageMiddleware = useStandardMiddleware();
     var connection = useServerConfig(props.config);
-    var chatStore = React$1.useMemo(function () {
+    var chatStore = require$$1.useMemo(function () {
         var _a, _b, _c, _d, _e;
         return createChatStore({
             connection: connection,
@@ -33024,12 +34006,11 @@ var ChatWidgetContainer = function (props) {
         });
     }, [connection, (_a = props.config) === null || _a === void 0 ? void 0 : _a.userId, (_b = props.config) === null || _b === void 0 ? void 0 : _b.accessToken, (_c = props.config) === null || _c === void 0 ? void 0 : _c.attributes, (_d = props.config) === null || _d === void 0 ? void 0 : _d.sessionExpiration, (_e = props.config) === null || _e === void 0 ? void 0 : _e.enableErrorOverlay]);
     if ((_f = props.config) === null || _f === void 0 ? void 0 : _f.disabled) {
-        return React$1.createElement(React$1.Fragment, null);
+        return require$$0.jsx(require$$0.Fragment, {});
     }
     var widgetProps = __assign(__assign({}, props), { messageMiddleware: messageMiddleware, getConfig: props.getConfig // Pass through getConfig callback
      });
-    return (React$1.createElement(reactRedux.Provider, { store: chatStore },
-        React$1.createElement(ChatWidgetWrapper, __assign({}, widgetProps))));
+    return (require$$0.jsx(reactRedux.Provider, { store: chatStore, children: require$$0.jsx(ChatWidgetWrapper, __assign({}, widgetProps)) }));
 };
 
 // Function to create a static reducer
@@ -33057,17 +34038,16 @@ function createStaticStore(state) {
 
 var StaticChatWidgetContainer = function (props) {
     var state = props.state;
-    var store = React$1.useMemo(function () {
+    var store = require$$1.useMemo(function () {
         return createStaticStore(state);
     }, [state]);
-    var config = React$1.useMemo(function () {
+    var config = require$$1.useMemo(function () {
         return __assign(__assign({}, props.config), { connection: {
                 serverUrl: "",
-                type: "local"
+                type: "local",
             } });
     }, [props.config]);
-    return (React$1.createElement(reactRedux.Provider, { store: store },
-        React$1.createElement(ChatWidgetWrapper, __assign({}, props, { config: config }))));
+    return (require$$0.jsx(reactRedux.Provider, { store: store, children: require$$0.jsx(ChatWidgetWrapper, __assign({}, props, { config: config })) }));
 };
 
 function createStateFromMessages(messages) {
@@ -33077,13 +34057,13 @@ function createStateFromMessages(messages) {
 
 var StaticMessagesChatWidgetContainer = function (props) {
     var messages = props.messages;
-    var state = React$1.useMemo(function () {
+    var state = require$$1.useMemo(function () {
         return createStateFromMessages(messages);
     }, [messages]);
-    return (React$1.createElement(StaticChatWidgetContainer, { state: state, mode: props.mode, config: props.config }));
+    return require$$0.jsx(StaticChatWidgetContainer, { state: state, mode: props.mode, config: props.config });
 };
 
-exports.React = React$1;
+exports.React = require$$1;
 exports.ActionButton = ActionButton;
 exports.Avatar = Avatar;
 exports.CardMiddleware = CardMiddleware;