@xapp/chat-widget 1.80.0 → 1.81.0

package/dist/index.es.js

@@ -1,5 +1,6 @@
-import React$1, { useRef, useEffect, useCallback, createContext, useMemo, useContext, useState, useLayoutEffect } from 'react';
+import require$$1, { useRef, useEffect, useCallback, createContext, useMemo, useContext, memo, useState, useLayoutEffect } from 'react';
 export { default as React } from 'react';
+import require$$0, { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useSelector, useDispatch, Provider } from 'react-redux';
 
 var ActionButton = function (_a) {
@@ -10,7 +11,7 @@ var ActionButton = function (_a) {
             onClick(label);
         }
     }
-    return (React$1.createElement("button", { disabled: disable, type: type, className: "action-button ".concat(addClass), onClick: handleClick }, label));
+    return (jsx("button", { disabled: disable, type: type, className: "action-button ".concat(addClass), onClick: handleClick, children: label }));
 };
 
 /******************************************************************************
@@ -402,22 +403,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 (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 (jsx("svg", { width: "16", height: "19", viewBox: "0 0 16 19", style: { margin: "0 auto", display: "block" }, children: 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 = useMemo(function () {
         return generateImage(initials, size, backgroundColor, textColor);
     }, [initials, size, backgroundColor, textColor]);
     return image;
@@ -469,10 +469,10 @@ var OptionalLink = function (props) {
         }
     }, [url, onOpen]);
     if (url) {
-        return (React$1.createElement("div", { onClick: handleOpenUrl, className: className }, props.children));
+        return (jsx("div", { onClick: handleOpenUrl, className: className, children: props.children }));
     }
     else {
-        return (React$1.createElement("div", { onClick: props.onClick, className: className }, props.children));
+        return (jsx("div", { onClick: props.onClick, className: className, children: props.children }));
     }
 };
 
@@ -493,17 +493,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 (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 = (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 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 (jsx("a", { href: props.imageActionUrl, "aria-label": "read more", target: "_blank", rel: "noopener noreferrer", className: "chat-card-img", children: content }));
     }
 };
 
@@ -514,13 +514,12 @@ 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 (jsx("div", { className: props.className, children: jsx(ChatImage, { imageUrl: item.imageUrl, imageActionUrl: !itemUrl && imageActionUrl }) }));
     }
     else if (props.emptyImageVisible) {
-        return (React$1.createElement("div", { className: props.className }));
+        return jsx("div", { className: props.className });
     }
-    return React$1.createElement(React$1.Fragment, null);
+    return jsx(Fragment, {});
 };
 
 var ChatActionButtonInner = function (props) {
@@ -528,44 +527,35 @@ var ChatActionButtonInner = function (props) {
     var handleButton = useCallback(function () {
         onClick(button);
     }, [button, onClick]);
-    return (React$1.createElement(ActionButton, { onClick: handleButton, addClass: "button-card", label: button.label }));
+    return jsx(ActionButton, { onClick: handleButton, addClass: "button-card", label: button.label });
 };
-var ChatActionButton = React$1.memo(ChatActionButtonInner);
+var ChatActionButton = 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 (jsx("div", { className: "buttons-container " + (props.className || ""), children: props.buttons.map(function (button, i) {
+            return jsx(ChatActionButton, { button: button, onClick: props.onClick }, i);
+        }) }));
 };
-var ChatActionButtons = React$1.memo(ChatActionButtonsInner);
+var ChatActionButtons = 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 (jsx(ActionItem, { className: "chat-list-item-container", item: item, onButtonClick: props.onButtonClick, onExecute: props.onExecute, onOpenUrl: props.onOpenUrl, children: jsxs("div", { className: "chat-list-item", children: [jsx(ActionItemImage, { item: item, className: "chat-list-item__img", emptyImageVisible: props.emptyImageVisible }), item.title && (jsx("div", { className: "chat-list-item__title", children: jsx("span", { children: item.title }) })), item.subTitle && (jsx("div", { className: "chat-list-item__subtitle", children: jsx("span", { children: item.subTitle }) })), !!((_a = item.buttons) === null || _a === void 0 ? void 0 : _a.length) && (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 (jsx("svg", { viewBox: "-5 -18 10 36", children: 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 (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 (jsx("svg", { viewBox: "-5 -18 10 36", children: 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 (jsx("button", { onClick: props.onClick, className: "xa-chevron", children: getRightArrowSvg() }));
 };
 
 var Carousel = function (props) {
@@ -604,15 +594,9 @@ 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 (jsx("div", { className: "xappw-carousel-items__item", children: 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 (jsxs("div", { className: "xappw-carousel", children: [!hasOnlyOneItem && (jsx("div", { className: "xappw-carousel__prev", children: jsx(ChevronLeft, { onClick: function () { return scrollMe(-1); } }) })), jsx("div", { ref: listRef, className: "xappw-carousel-items ".concat(hasOnlyOneItem ? "xappw-carousel-items--one-item" : ""), children: listItems }), !hasOnlyOneItem && (jsx("div", { className: "xappw-carousel__next", children: jsx(ChevronRight, { onClick: function () { return scrollMe(1); } }) }))] }));
 };
 
 function useDimensions() {
@@ -714,9 +698,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 (jsx("div", { ref: ref, className: "cta-bubble__tail", children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 ".concat(viewPort.x, " ").concat(viewPort.y), children: jsx("path", { d: getTailSvgPath$1(props, viewPort), fill: "currentColor" }) }) }));
 };
 var CtaBubble = function (props) {
     var _a, _b, _c, _d;
@@ -730,17 +712,12 @@ var CtaBubble = function (props) {
         }
     };
     console.log("Returning CTABubble with message: ", props.children);
-    return (React$1.createElement("div", { ref: ref, style: {
+    return (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: [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 }), jsx("div", { className: "cta-bubble__content", children: props.children }), props.dismissible && (jsx("button", { className: "cta-bubble__dismiss", onClick: handleDismiss, "aria-label": "Dismiss", children: jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M11 1L1 11M1 1L11 11", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
 };
 
 var CtaBubbleContainer = function (props) {
@@ -835,7 +812,7 @@ 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 (jsx(Fragment, { children: visible && showBubble && (jsx(CtaBubble, { onClick: onClick, animate: animate, buttonAnimation: buttonAnimation, dismissible: dismissible, onDismiss: handleDismiss, children: children })) }));
 };
 
 var ChatButton = function (_a) {
@@ -914,23 +891,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 (jsxs("button", { "aria-label": "open chat", className: "xapp-chat-button ".concat(addClass || "").trim(), onClick: onClick, children: [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
+                jsx("img", { src: imageUrl, alt: "Chat Icon" })) : (
+                // Fallback to default SVG
+                jsx("svg", { width: svgSize, height: svgSize, viewBox: "0 0 22 22", children: 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 && (jsx("div", { className: "xapp-chat-button__cta", children: 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) {
@@ -940,40 +913,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 = (jsx("div", { className: "chat-card-container__img", children: 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 = (jsx("div", { className: "chat-card-title", children: 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 = (jsx("div", { className: "chat-card-sub-title", children: jsx("span", { children: card.content }) }));
+    }
+    return (jsxs("div", { className: "chat-card-container", children: [image, title, content, !!((_a = card.buttons) === null || _a === void 0 ? void 0 : _a.length) && (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 (jsx("div", { onClick: function () { return props === null || props === void 0 ? void 0 : props.onClick(option); }, className: className, children: 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 (jsx("div", { className: "chat-chips", children: props.options.map(function (option, i) {
+            return jsx(ChatChip, { onClick: props.onOptionClick, option: option }, i);
+        }) }));
 };
 
 var defaultBehavior = {
@@ -1397,13 +1362,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
@@ -1413,17 +1377,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) {
@@ -1433,14 +1397,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) {
@@ -1448,11 +1412,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);
     }
@@ -1537,7 +1501,7 @@ function parseContent(node) {
             formats.push({
                 type: type,
                 start: text.length,
-                end: text.length + innerText.length
+                end: text.length + innerText.length,
             });
             text += innerText;
         }
@@ -1548,7 +1512,7 @@ function parseContent(node) {
                 formats.push({
                     type: "normal",
                     start: text.length,
-                    end: text.length + innerText.length
+                    end: text.length + innerText.length,
                 });
                 text += innerText;
             }
@@ -1556,7 +1520,7 @@ function parseContent(node) {
     });
     return cleanRichTextValue({
         text: text,
-        formats: formats
+        formats: formats,
     });
 }
 function cleanContent(node) {
@@ -1574,22 +1538,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);
@@ -1597,49 +1560,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: [],
                     });
                 }
             };
@@ -1650,12 +1617,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) {
@@ -1667,22 +1633,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);
@@ -1699,22 +1665,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) {
@@ -1723,7 +1680,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);
         }
@@ -1731,11 +1688,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) {
@@ -1754,65 +1711,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.
 
@@ -1895,6 +1793,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
  *
@@ -1917,11 +1874,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"
@@ -1986,7 +1943,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;
         }
@@ -3032,6 +2989,11 @@ var StentorRouterChat = /** @class */ (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") {
@@ -3054,35 +3016,43 @@ var StentorRouterChat = /** @class */ (function () {
                 },
             });
         };
-        this.handlers["user joined"] = function (_data, sender, ts, _attributes) {
+        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: 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, _attributes) {
+        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,
                 },
             });
         };
@@ -3153,6 +3123,54 @@ var StentorRouterChat = /** @class */ (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",
@@ -7727,7 +7745,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(),
@@ -7886,7 +7904,7 @@ function useChatServer(config, options) {
     var dispatch = useChatDispatch();
     var deps = [options, config, dispatch];
     // Track previous values to detect what changed
-    var prevDepsRef = useRef();
+    var prevDepsRef = useRef(undefined);
     // Log what caused the "effect"
     // useWhatChanged(deps, "options, config, dispatch");
     useEffect(function () {
@@ -7959,17 +7977,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 (jsx("div", { className: "message-list-container__chips ".concat(!(chips === null || chips === void 0 ? void 0 : chips.length) ? "message-list-container__chips--empty" : ""), children: 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 (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 (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 = {};
@@ -8054,10 +8071,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 ? (jsxs("span", { children: [jsx("div", { children: props.label }), jsx("div", { className: "chat-menu-item--subtitle", children: props.subtitle })] })) : (jsx("span", { children: props.label }));
+    return (jsx("button", { type: "button", className: "chat-menu-item", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, onClick: handleClick, children: content }));
 };
 
 var _this = undefined;
@@ -8067,28 +8082,24 @@ var ChatMenu = function (props) {
     var handleOpenUrl = useOpenUrlCallback();
     var chatDispatch = useChatDispatch();
     var visuals = 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 (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 (jsx(ChatMenuItem, { onClick: props.onItemClick, label: item.label, subtitle: item.subtitle }, i));
+            }
+            else if (lib.isStaticImageMenuItem(item)) {
+                return (jsx("div", { className: "chat-menu-item-static", children: jsx("img", { style: {
+                            maxHeight: "100%",
+                            maxWidth: "auto",
+                        }, src: item.imageUrl, alt: "Menu Item" }) }, i));
+            }
+            else if (lib.isStaticTextMenuItem(item)) {
+                return (jsx("div", { className: "chat-menu-item-static-text", children: jsxs("div", { children: [jsx("div", { children: item.title }), jsx("div", { className: "chat-menu-item-static-text--body", children: item.body })] }) }, i));
+            }
+            else if (lib.isOpenURLMenuItem(item)) {
+                return (jsx("button", { className: "chat-menu-item", onClick: handleOpenUrl.bind(_this, item.url, chatDispatch, visuals, item.behavior), children: item.text }, i));
+            }
+            return jsx("p", { children: "Unknown" });
+        }) }));
 };
 
 var DrawerBars = function (props) {
@@ -8100,23 +8111,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(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 (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 (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 (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 (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 = {
@@ -8139,14 +8150,119 @@ 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 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 = useState(false), drawerOpen = _s[0], setDrawerState = _s[1]; // false initially
+    var _r = 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";
@@ -8178,50 +8294,30 @@ 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 (jsxs(Fragment, { children: [jsxs("div", { className: "status-container background-header", "aria-label": ariaLabel, "aria-hidden": false, children: [showMenuLeft && menuItems.length ? (jsx(Fragment, { children: jsx("div", { className: "chat-footer__menu-icon", children: jsx(DrawerBars, { bars: 3, tabIndex: menuButtonTabIndex, onToggle: toggleDrawer }) }) })) : (jsx(Fragment, {})), ((_b = props === null || props === void 0 ? void 0 : props.agent) === null || _b === void 0 ? void 0 : _b.avatarPath) === undefined ? (jsx("div", {})) : (jsx("div", { className: "status-container__avatar", children: jsx(Avatar, { entity: props.agent }) })), 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: [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) && (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) }))] }), jsxs(ButtonGroup, { children: [hasRightMenu && (jsx(MenuButton, { onClick: toggleDrawer, tabIndex: menuButtonTabIndex })), props.canRefresh && (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 && (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 && (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 ? (jsx("div", { className: "xa-chat-menu-container", children: jsx(ChatMenu, { openFrom: showMenuRight ? "right" : "left", opened: drawerOpen, tabIndex: menuItemsTabIndex, onItemClick: handleMenuItem, items: menuItems }) })) : (jsx(Fragment, {}))] }));
 };
 
-var UnknownMessage = function () { return React$1.createElement(React$1.Fragment, null); };
+var UnknownMessage = function () { return jsx(Fragment, {}); };
 
 function renderAvatar(entity) {
-    return (React$1.createElement("div", { className: "xappw-chat-msg-part__avatar" },
-        React$1.createElement(Avatar, { entity: entity })));
+    return (jsx("div", { className: "xappw-chat-msg-part__avatar", children: jsx(Avatar, { entity: entity }) }));
 }
 var ChatMessagePart = function (props) {
     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" : "");
-    var user = props.user;
-    return (React$1.createElement("div", { className: containerClass }, position === "left" ? (React$1.createElement(React$1.Fragment, null,
-        props.showAvatar && renderAvatar(user),
-        props.children)) : (React$1.createElement(React$1.Fragment, null,
-        props.children,
-        props.showAvatar && (React$1.createElement("div", { className: "xappw-chat-msg-part__avatar-wrapper" },
-            renderAvatar(user),
-            (user === null || user === void 0 ? void 0 : user.displayName) && (React$1.createElement("div", { className: "xappw-chat-msg-part__avatar-name" }, user.displayName))))))));
+        (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 (jsx("div", { className: containerClass, children: position === "left" ? (jsxs(Fragment, { children: [props.showAvatar && renderAvatar(user), props.children] })) : (jsxs(Fragment, { children: [props.children, props.showAvatar && !shouldHideUserInfo && (jsxs("div", { className: "xappw-chat-msg-part__avatar-wrapper", children: [renderAvatar(user), (user === null || user === void 0 ? void 0 : user.displayName) && (jsx("div", { className: "xappw-chat-msg-part__avatar-name", children: user.displayName }))] }))] })) }));
 };
 
 function useExecuteActionCallback() {
@@ -8272,14 +8368,12 @@ var CardMiddlewareWidget = function (props) {
     var card = 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 (jsx(ChatMessagePart, { showAvatar: true, user: user, children: jsx("div", { className: "chat-msg", children: 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 jsx(CardMiddlewareWidget, { msg: msg, ctx: ctx });
     }
     return next(props);
 }; };
@@ -8363,16 +8457,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 (jsxs("svg", { viewBox: "0 0 20 20", children: [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" }), 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 = 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 (jsx("a", { href: url, "aria-label": "read more", target: "_blank", rel: "noreferrer", className: props.className, onClick: handleClick, children: getSvg() }));
 };
 
 function firstIndex(val, patterns) {
@@ -8485,7 +8577,7 @@ var SmartLink = function (props) {
     var handleClick = 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 (jsx("a", { href: url, "aria-label": "read more", target: "_blank", rel: "noreferrer", className: className, onClick: handleClick, children: reduceLink(url, 40) }));
 };
 
 var ListItem = function (props) {
@@ -8493,18 +8585,7 @@ 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 (jsx(ActionItem, { className: "xappw-vlist-item-container", item: item, onButtonClick: props.onButtonClick, onExecute: props.onExecute, onOpenUrl: props.onOpenUrl, children: jsxs("div", { className: "xappw-vlist-item xappw-vlist-item--".concat(layout), children: [jsxs("div", { className: "xappw-vlist-item__description", children: [item.title && (jsx("div", { className: "xappw-vlist-item__title", children: jsx("span", { children: item.title }) })), url && jsx(SmartLink, { url: url, className: "xappw-vlist-item__link" }), item.subTitle && (jsx("div", { className: "xappw-vlist-item__subtitle", children: jsx("span", { children: item.subTitle }) })), !!((_a = item.buttons) === null || _a === void 0 ? void 0 : _a.length) && (jsx(ChatActionButtons, { buttons: item.buttons, onClick: props.onButtonClick }))] }), jsxs("div", { className: "xappw-vlist-item__side", children: [url && jsx(ExternalLink, { url: "url", className: "xappw-vlist-item__external-link" }), jsx(ActionItemImage, { item: item, className: "xappw-vlist-item__img", emptyImageVisible: props.emptyImageVisible })] })] }) }));
 };
 
 var List = function (props) {
@@ -8513,13 +8594,9 @@ var List = function (props) {
     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 (jsx("div", { className: "xappw-vlist-container__item", children: 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 (jsx("div", { className: "xappw-vlist", children: jsxs("div", { ref: listRef, className: "xappw-vlist-container", children: [props.list.title && jsx("div", { className: "xappw-vlist__header", children: props.list.title }), listItems] }) }));
 };
 
 var ListMiddlewareWidget = function (props) {
@@ -8534,16 +8611,12 @@ var ListMiddlewareWidget = function (props) {
     }, [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 (jsxs(ChatMessagePart, { showAvatar: false, user: user, children: [list.type === "CAROUSEL" && (jsx("div", { className: "chat-msg chat-msg--fullwidth chat-msg--no-ava", children: jsx(Carousel, { list: list, onExecute: handleExecute.bind(null, "carousel"), onButtonClick: handleButton, onOpenUrl: ctx.openUrl }) })), list.type === "LIST" && (jsx("div", { className: "chat-msg chat-msg--expand", children: 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 jsx(ListMiddlewareWidget, { msg: msg, ctx: ctx });
     }
     return next(props);
 }; };
@@ -8555,10 +8628,7 @@ var MultiSelect = function (props) {
         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 (jsx("ul", { className: "xappw-multiselect", children: items === null || items === void 0 ? void 0 : items.map(function (item) { return (jsx("li", { children: jsxs("label", { children: [jsx("input", { type: "checkbox", checked: checked[item.id] || false, onChange: handleToggle, value: item.id }), jsx("span", { children: item.title })] }) }, item.id)); }) }));
 };
 
 function isMultiSelect(display) {
@@ -8578,20 +8648,16 @@ var MultiSelectMiddlewareWidget = function (props) {
             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 (jsx(ChatMessagePart, { showAvatar: true, user: user, children: jsx("div", { className: "chat-msg", children: jsxs("div", { children: [jsx(MultiSelect, { items: items, checked: checked, onChange: setChecked }), 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 jsx(MultiSelectMiddlewareWidget, { msg: msg, ctx: ctx });
     }
     return next(props);
 }; };
@@ -8621,8 +8687,7 @@ 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 (jsx("svg", { className: "chat-text-bubble__tail", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 80 240", children: jsx("path", { d: getTailSvgPath(owner), fill: "currentColor" }) }));
 }
 var ChatMessageBubble = function (props) {
     var owner = props.owner, onClick = props.onClick;
@@ -8631,15 +8696,13 @@ var ChatMessageBubble = function (props) {
             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 (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 = useRef();
+    var ref = useRef(null);
     var chatDispatch = useChatDispatch();
     var visuals = useSelector(function (state) { return state.visuals; });
     var html = props.message.msg.html;
@@ -8667,11 +8730,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 (jsx("div", { className: "chat-msg", children: jsx("div", { className: "chat-text-container", children: jsxs(ChatMessageBubble, { owner: agentMessage ? "others" : "mine", hasTail: agentMessage && !props.sibling, children: [jsx("span", { className: "message-sr-only", children: "at " + props.time + (agentMessage ? " the bot said" : " the user said") }), jsx("div", { ref: ref })] }) }) }));
 };
 
 var ChatPermissionMessage = function (props) {
@@ -8689,14 +8748,14 @@ var ChatPermissionMessage = function (props) {
         ctx.write({
             type: "msg",
             user: author,
-            msg: msg
+            msg: msg,
         });
     }, [ctx, author]);
     var writeAsUser = useCallback(function (msg) {
         ctx.write({
             type: "msg",
             user: user,
-            msg: msg
+            msg: msg,
         });
     }, [ctx, user]);
     var handleFail = useCallback(function () {
@@ -8704,28 +8763,30 @@ var ChatPermissionMessage = function (props) {
             type: "msg",
             user: undefined,
             msg: {
-                text: denyLabel
-            }
+                text: denyLabel,
+            },
         });
     }, [ctx]);
     var handleSend = useCallback(function (msg) {
         ctx.send({
             type: "permissionGrant",
             user: author,
-            msg: msg
+            msg: msg,
         });
     }, [author, ctx]);
     var handleResult = 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) {
@@ -8745,25 +8806,17 @@ var ChatPermissionMessage = function (props) {
         }
     }, [handleFail, handleResult]);
     if (!permissionRequest) {
-        return React$1.createElement(React$1.Fragment, null);
+        return jsx(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 (jsxs("div", { className: "chat-msg", children: [jsx("span", { className: "message-sr-only", children: "at " + props.time + (agentMessage ? " the bot said" : " the user said") }), jsxs("div", { className: "buttons-container", children: [jsx(ActionButton, { label: allowLabel, addClass: "button", onClick: handleAllow }), 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 (jsx("div", { className: "chat-msg", children: jsx("div", { className: "chat-text-container", children: jsxs(ChatMessageBubble, { owner: agentMessage ? "others" : "mine", hasTail: agentMessage && !props.sibling, children: [jsx("span", { className: "message-sr-only", children: "at " + time + (agentMessage ? " the bot said" : " the user said") }), jsx("span", { children: message.msg.text })] }) }) }));
 };
 
 var ChatScheduleWidget = function (props) {
@@ -8774,10 +8827,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 (jsx("div", { className: "chat-schedule-button-container", children: jsxs("button", { className: "chat-schedule-button", onClick: handleClick, children: [jsx("i", { className: "fa fa-lg fa-calendar" }), jsx("span", { children: display.label || "Schedule Now!" })] }) }));
 };
 
 function getClassName(msg) {
@@ -8791,13 +8841,17 @@ var avaKeys = ["text", "html", "card", "list"];
  * @returns
  */
 var ChatMessage = function (props) {
+    var _a;
     var middleware = props.messageMiddleware || StandardMiddlewares;
     var chatConfig = 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?
@@ -8805,38 +8859,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, avatarPosition: chatConfig.env.theme.messages.avatarPosition },
-                            React$1.createElement(ChatTextMessage, { message: props.message, sibling: props.sibling })),
-                    msg.html &&
-                        React$1.createElement(ChatMessagePart, { showAvatar: avaKey === "html", user: user, avatarPosition: chatConfig.env.theme.messages.avatarPosition },
-                            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, avatarPosition: chatConfig.env.theme.messages.avatarPosition },
-                            React$1.createElement(ChatPermissionMessage, { message: props.message, sibling: props.sibling, ctx: ctx }))));
+                return (jsxs(Fragment, { children: [msg.text &&
+                            jsx(ChatMessagePart, { showAvatar: avaKey === "text", user: user, avatarPosition: (_a = chatConfig.env.theme.messages) === null || _a === void 0 ? void 0 : _a.avatarPosition, hideUserInfo: hideUserInfo, children: jsx(ChatTextMessage, { message: props.message, sibling: props.sibling }) }), msg.html &&
+                            jsx(ChatMessagePart, { showAvatar: avaKey === "html", user: user, avatarPosition: (_b = chatConfig.env.theme.messages) === null || _b === void 0 ? void 0 : _b.avatarPosition, hideUserInfo: hideUserInfo, children: 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 (jsx(ChatScheduleWidget, { minimizeOnClick: props.minimizeOnClick, display: display }));
+                            }
+                            var Middleware = middleware;
+                            return (jsx(Middleware, { msg: display, ctx: props.middlewareContext }, index));
+                        }), msg.permissionRequest && ctx &&
+                            jsx(ChatMessagePart, { showAvatar: avaKey === "permissionRequest", user: user, avatarPosition: (_d = chatConfig.env.theme.messages) === null || _d === void 0 ? void 0 : _d.avatarPosition, hideUserInfo: hideUserInfo, children: jsx(ChatPermissionMessage, { message: props.message, sibling: props.sibling, ctx: ctx }) })] }));
         }
-        return (React$1.createElement(React$1.Fragment, null));
+        return (jsx(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 (jsx("div", { className: "chat-msg-timestamp ".concat(isAgent(props.message.user.nick) ? "agent" : "visitor"), children: 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 (jsx("div", { className: "chat-msg-container-wrapper ".concat(isAgent(props.message.user.nick) ? "agent" : "visitor", " ").concat(props.sibling ? "sibling" : ""), children: jsxs("div", { className: "chat-msg-container ".concat(getClassName(props.message)), children: [renderByType(), renderTimestamp()] }) }));
 };
 
 /**
@@ -9071,18 +9114,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 (jsxs("form", { className: "xappw-admin-input-form", onSubmit: onSubmit, children: [jsx("div", { className: "xappw-admin-input-form__buttons", children: jsx(ActionButton, { addClass: "xappw-admin-input-form__btn", type: "submit", label: "Join", disable: disable }) }), jsx("div", { className: "xappw-admin-input", children: 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 (jsx("form", { className: "xappw-admin-input-form", onSubmit: onSubmit, children: jsx("div", { className: "xappw-admin-input-form__buttons", children: 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 (jsx("div", { className: "xappw-admin-input-container visible", children: joined ? renderLeave() : renderJoin() }));
 };
 
 var classnames = {exports: {}};
@@ -9181,39 +9218,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 (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 ? (jsx(MarkdownBuilder, { text: text, applyBrandingClass: true, linkColor: "white" })) : (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 (jsx("svg", { style: { color: "grey", paddingRight: "5px" }, xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 16 16", children: 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 (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 16 16", children: 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 (jsx("svg", { viewBox: "80.208 98.129 313.069 282.823", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { transform: "matrix(0.024498, 0, 0, -0.038359, 79.83091, 381.182404)", fill: "currentColor", stroke: "none", children: [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" }), 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) {
@@ -9224,8 +9254,7 @@ 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 (jsx(Fragment, { children: !props.sendButtonIcon ? (jsx(IconButton_1, { className: "xappw-send-button ".concat(props.className || "", " ").concat(disabled ? 'disabled' : ''), tabIndex: props.tabIndex, onClick: disabled ? undefined : props.onClick, icon: SendIcon })) : (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: jsx("img", { src: getIconSrc(), alt: "Send button", draggable: false, className: "send-button-icon" }) })) }));
 };
 
 var Input = function (props) {
@@ -9276,17 +9305,12 @@ 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 (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: jsxs("form", { className: "xappw-input-form", onSubmit: handleOnSubmit, children: [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"), jsxs("div", { className: "xappw-input-form__buttons", children: [value.text && (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 })), 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) {
@@ -9298,9 +9322,9 @@ function createActions(onItemUse) {
             ev.stopPropagation();
         }, [data]);
         if (!canUse) {
-            return React$1.createElement(React$1.Fragment, null);
+            return jsx(Fragment, {});
         }
-        return (React$1.createElement(IconButton_1, { className: "xappw-suggestions__use", onClick: handleUse, icon: LeftDownArrowIcon }));
+        return (jsx(IconButton_1, { className: "xappw-suggestions__use", onClick: handleUse, icon: LeftDownArrowIcon }));
     };
 }
 var Suggestions = function (props) {
@@ -9335,16 +9359,14 @@ var Suggestions = function (props) {
         var lines = content.split('\n');
         return lines.map(function (line) {
             if (line) {
-                return React$1.createElement(MarkdownBuilder, { text: line });
+                return jsx(MarkdownBuilder, { text: line });
             }
-            return React$1.createElement(React$1.Fragment, null);
+            return jsx(Fragment, {});
         });
     };
     var containerClass = "xappw-suggestions ".concat(props.className || "", " ").concat(props.hasWsButton ? "xappw-suggestions--with-ws-button" : "").trim();
-    return (React$1.createElement("div", { className: containerClass },
-        (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 })));
+    return (jsxs("div", { className: containerClass, children: [(activeItem === null || activeItem === void 0 ? void 0 : activeItem.content) && jsx("div", { className: "xappw-suggestions__answer", children: transformContent(activeItem.content) }), fixedSuggestions && fixedSuggestions.length > 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) {
@@ -9406,19 +9428,10 @@ var ChatFooter = function (props) {
     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, hasWsButton: hasWsButton, 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 (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 ?
+                jsxs(Fragment, { children: [drawerOpen ? jsx(ChatMenu, { opened: drawerOpen, tabIndex: menuItemsTabIndex, onItemClick: handleMenuItem, items: menuItems }) : jsx(Fragment, {}), jsx("div", { className: "chat-footer__menu-icon", children: jsx(DrawerBars, { tabIndex: menuButtonTabIndex, onToggle: toggleDrawer }) })] }) : jsx(Fragment, {}), jsx(Suggestions, { className: "xappw-chat-footer__suggestions", data: suggestions.suggestions, index: suggestions.index, searchTerms: suggestionSearch, hasWsButton: hasWsButton, onItemClick: handleItemClick, onItemUse: handleItemUse }), isAdmin && isChatting && visible && jsx(AdminBar, { onAdminJoin: handleAdminJoin }), jsx("div", { style: { pointerEvents: enableInput ? "auto" : "none", opacity: enableInput ? 1 : 0.5 }, children: 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 && jsx(ChatBranding, { text: brandingText })] }));
 };
 
 var noop = function () { };
@@ -9451,27 +9464,16 @@ 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 jsx("div", { className: "card-container__icon", children: !isString && props.icon });
+    }
+    return (jsxs("div", { className: "card-container ".concat(props.addClass), children: [renderIcon(), jsxs("div", { className: "card-container__content ".concat(props.contentAddClass), children: [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;
+    } : _e;
     var rateBadButtonOnClick = useCallback(function () {
         onRate("bad");
     }, [onRate]);
@@ -9482,22 +9484,14 @@ var ChatRating = function (props) {
         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 (jsxs(CardContainer, { title: "Chat Rating", addClass: "chat-rating-card", children: [agent.displayName, " has requested you to rate the chat service.", jsxs("div", { className: "buttons-container", children: [jsx(ActionButton, { addClass: "button button-rate-bad", label: "Rate Bad", onClick: rateBadButtonOnClick }), 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 (jsxs(CardContainer, { title: "Chat Rating", addClass: "chat-rating-card", children: ["You have rated the chat service.", jsx("div", { className: "buttons-container", children: jsx(ActionButton, { addClass: "button button-rate-again", label: "Rate again", onClick: rateAgainButtonOnClick }) })] }));
     }
 };
 
@@ -9506,9 +9500,7 @@ var ChatRatingContainer = function (props) {
     var handleRate = 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 (jsxs(Fragment, { children: [jsx("span", { className: "message-sr-only", children: "at " + props.time + " system message" }), jsx(ChatRating, { agent: props.agent, hasRating: props.hasRating, shouldDisplay: props.shouldDisplay, onRate: handleRate })] }));
 };
 
 var dateFns = {};
@@ -31033,23 +31025,18 @@ var FailureMessage = function (props) {
         return compileSlotValues(text, slots);
     }, [text, slots]);
     if (countdown === 0) {
-        return React$1.createElement(React$1.Fragment, null);
+        return jsx(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 (jsx(Fragment, { children: agent_names.map(function (agent) {
+            var _a, _b;
+            return (jsx("div", { className: "chat-msg-container-wrapper", children: jsx("div", { className: "chat-msg-container agent", children: jsx(ChatMessagePart, { user: agent === null || agent === void 0 ? void 0 : agent.user, showAvatar: true, children: jsx("div", { className: "chat-msg", children: jsxs(ChatMessageBubble, { owner: "others", hasTail: true, children: [jsx("span", { className: "message-sr-only", children: "at " + time + " the bot said" }), 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 (jsx("svg", { className: "message-svg", width: "16", height: "12", viewBox: "0 0 16 12", children: 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) {
@@ -31077,7 +31064,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);
     }
@@ -31085,30 +31072,16 @@ 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 (jsxs("div", { className: "message-form--sent", children: ["Your message has been sent. We will get back to you as soon as possible.", 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 (jsxs("form", { ref: form, className: "message-form", onSubmit: send, children: [jsxs("div", { className: "content", children: [jsxs("div", { className: "section", children: [jsx("label", { className: "label", children: "Name" }), jsx("input", { ref: name, maxLength: 255 })] }), jsxs("div", { className: "section", children: [jsx("label", { className: "label", children: "Email" }), jsx("input", { ref: email, onChange: emailChanged, type: "email", required: true, pattern: EMAIL_REGEX })] }), jsxs("div", { className: "section", children: [jsx("label", { className: "label", children: "Message" }), jsx("textarea", { required: true, ref: message })] })] }), jsx("div", { className: "button-container", children: jsx(ActionButton, { type: "submit", addClass: "message-form__submit", label: "Send" }) })] }, "not-sent"));
+    }
+    return (jsx(CardContainer, { title: props.title, addClass: "offline-card", contentAddClass: sent ? "sent" : "", icon: jsx(MessageSvg, {}), children: sent ? renderSent() : renderForm() }));
 };
 
 var OfflineForm = function (props) {
-    return React$1.createElement(MessageForm, { title: "Offline message card title", onSubmit: props.onSubmit });
+    return jsx(MessageForm, { title: "Offline message card title", onSubmit: props.onSubmit });
 };
 
 var OfflineFormContainer = function (props) {
@@ -31116,9 +31089,7 @@ var OfflineFormContainer = function (props) {
     var handleSubmit = 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 (jsxs(Fragment, { children: [jsx("span", { className: "message-sr-only", children: "at " + props.time + " system message" }), jsx(OfflineForm, { onSubmit: handleSubmit })] }));
 };
 
 var PrechatForm = function (props) {
@@ -31128,7 +31099,7 @@ var PrechatForm = function (props) {
         onSubmit(msg);
         setSent(true);
     }, [onSubmit]);
-    return (React$1.createElement(React$1.Fragment, null, !sent && React$1.createElement(MessageForm, { title: "Introduce yourself!", onSubmit: handleSubmit })));
+    return jsx(Fragment, { children: !sent && jsx(MessageForm, { title: "Introduce yourself!", onSubmit: handleSubmit }) });
 };
 
 var PrechatFormContainer = function (props) {
@@ -31144,34 +31115,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 (jsxs(Fragment, { children: [jsx("span", { className: "message-sr-only", children: "at " + props.time + " system message" }), 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 (jsx("div", { className: "system-msg-container", children: 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";
@@ -31185,10 +31156,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 (jsxs("div", { className: "system-msg-container", children: [showDivider && avatarUrl && (jsxs("div", { className: "system-msg-divider", children: [jsx("div", { className: "divider-line" }), jsx("div", { className: "divider-avatar", children: jsx("img", { src: avatarUrl, alt: "".concat(message.user.displayName || "User", "'s avatar") }) }), jsx("div", { className: "divider-line" })] })), jsx("span", { className: "message-sr-only", children: "at " + props.time + " system message" }), jsx("span", { className: "system-msg", children: getMessageByType(props.message) })] }));
     }
     else {
         return null;
@@ -31199,10 +31172,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 (jsxs("div", { className: "typing-indicator", children: [jsx("div", { className: "typing-indicator-part" }), jsx("div", { className: "typing-indicator-part" }), jsx("div", { className: "typing-indicator-part" })] }));
 };
 
 /**
@@ -31210,42 +31180,19 @@ 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 (jsx(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 (jsx("span", { children: !props.textTypingStatusEnabled ? (jsx("div", { className: "chat-msg-container-wrapper", children: jsx("div", { className: "chat-msg-container agent chat-typing-progress", children: jsx(ChatMessagePart, { user: agent.user, showAvatar: true, children: jsx("div", { className: "chat-msg", children: jsx(ChatMessageBubble, { owner: "others", hasTail: true, children: jsx(TypingIndicator, {}) }) }) }) }, key) }, "typing-status-".concat(key))) : (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 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 = useRef(null);
     var containerRef = useRef(null);
-    var prevHasWsButtonRef = useRef(props.hasWsButton);
+    var prevHasWsButtonRef = useRef(hasWsButton);
     // Check if user is scrolled to bottom
     var isAtBottom = useCallback(function () {
         if (!containerRef.current)
@@ -31263,11 +31210,11 @@ var MessageList = function (props) {
     // Always scroll to bottom when messages change
     useEffect(function () {
         scrollToBottom("smooth");
-    }, [props.messages, props.agents, scrollToBottom]);
+    }, [messages, agents, scrollToBottom]);
     // Handle WS button dismissal - only scroll when button is removed
     useEffect(function () {
         var prevHasButton = prevHasWsButtonRef.current;
-        var currentHasButton = props.hasWsButton;
+        var currentHasButton = hasWsButton;
         // Update ref for next render
         prevHasWsButtonRef.current = currentHasButton;
         // Only handle button dismissal (was true, now false)
@@ -31282,7 +31229,7 @@ var MessageList = function (props) {
             }
         }
         return undefined;
-    }, [props.hasWsButton, isAtBottom, scrollToBottom]);
+    }, [hasWsButton, isAtBottom, scrollToBottom]);
     var handleSend = useCallback(function (msg) {
         onSend(msg);
         messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
@@ -31314,7 +31261,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, "\""));
@@ -31324,26 +31271,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 (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 (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 (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 (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 jsx(OfflineFormContainer, { time: time }, "offline-".concat(msg.timestamp));
             case "chat.prechat":
-                return React$1.createElement(PrechatFormContainer, { key: "prechat", time: time });
+                return 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 (jsxs("span", { children: [jsx("span", { className: "message-sr-only", children: "at " + time + " system message" }), jsxs("div", { children: ["Unhandled message: ", JSON.stringify(msg)] }, "uhm-".concat(+new Date()))] }, "default-".concat(msg.timestamp)));
         }
     }
     /**
@@ -31352,14 +31296,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;
@@ -31375,6 +31319,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",
@@ -31384,11 +31329,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
                     }
@@ -31399,26 +31344,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 (jsxs("span", { children: [showTs && (jsx("div", { className: "ts-msg-container", children: 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", ref: containerRef },
-        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 (jsxs("div", { className: "message-list-container", ref: containerRef, children: [jsxs("div", { className: "message-list-container__msgs", children: [renderAll(), jsx("div", { ref: messagesEndRef, style: { float: "left", clear: "both" } }), jsx(QueuePosition, { position: queuePosition }), jsx(TypingStatus, { agents: agents, textTypingStatusEnabled: textTypingStatusEnabled })] }), 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 (jsxs("div", { className: "server-offline", children: [jsx("h2", { children: "Chat is currently unavailable" }), jsx("h3", { children: "Server is offline" })] }));
 };
 
 function buildStyleContent(theme) {
@@ -31428,7 +31361,7 @@ function buildStyleContent(theme) {
 function WidgetStylesheet(props) {
     var theme = props.theme;
     var stylesContent = buildStyleContent(theme);
-    return React$1.createElement("style", null, stylesContent);
+    return jsx("style", { children: stylesContent });
 }
 function buildVariables(gen) {
     var result = gen.next();
@@ -31975,31 +31908,7 @@ 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 (jsxs("div", { className: "error-overlay error-overlay--".concat(position, " ").concat(isMinimized ? "minimized" : ""), children: [jsxs("div", { className: "error-overlay-header", children: [jsxs("span", { className: "error-overlay-title", children: ["Debug Console (", errors.length, ")"] }), jsxs("div", { className: "error-overlay-actions", children: [jsx("button", { onClick: copyToClipboard, title: "Copy all to clipboard", children: "\uD83D\uDCCB" }), jsx("button", { onClick: clearErrors, title: "Clear all", children: "\uD83D\uDDD1\uFE0F" }), jsx("button", { onClick: togglePosition, title: "Move to ".concat(position === "bottom" ? "top" : "bottom"), children: position === "bottom" ? "⬆️" : "⬇️" }), jsx("button", { onClick: toggleEnabled, title: "Disable Error Overlay", children: "\uD83D\uDD27" }), jsx("button", { onClick: function () { return setIsMinimized(!isMinimized); }, title: "Minimize/Maximize", children: isMinimized ? "▲" : "▼" }), jsx("button", { onClick: function () { return setIsVisible(false); }, title: "Close", children: "\u2715" })] })] }), !isMinimized && (jsx("div", { className: "error-overlay-content", children: errors.map(function (error) { return (jsxs("div", { className: "error-entry error-".concat(error.type), children: [jsxs("div", { className: "error-header", children: [jsx("span", { className: "error-time", children: new Date(error.timestamp).toLocaleTimeString() }), error.count > 1 && (jsxs("span", { className: "error-count", children: ["(", error.count, "x)"] })), jsx("span", { className: "error-badge error-badge-".concat(error.type), children: error.type })] }), jsx("div", { className: "error-message", children: error.message }), error.stack && (jsxs("details", { className: "error-stack", children: [jsx("summary", { children: "Stack trace" }), jsx("pre", { children: error.stack })] }))] }, error.id)); }) }))] }));
 };
 
 var WsButton = function (_a) {
@@ -32026,23 +31935,19 @@ var WsButton = function (_a) {
         }
         return classes.join(" ");
     }, [button.isDismissing]);
-    return (React$1.createElement("div", { className: containerClassName },
-        React$1.createElement("button", { className: className, onClick: handleClick, disabled: button.pressBehavior === "disabled" || button.isPressed, "aria-label": button.text, "aria-busy": button.isPressed && button.pressBehavior === "spinning" },
-            button.isPressed && button.pressBehavior === "spinning" && (React$1.createElement("span", { className: "ws-button__spinner" })),
-            React$1.createElement("span", { className: "ws-button__text" }, button.text))));
+    return (jsx("div", { className: containerClassName, children: 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" && (jsx("span", { className: "ws-button__spinner" })), 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 (jsxs("div", { className: "modalContent", children: [jsxs("div", { className: "modalBody", children: [jsx("h2", { children: "Restart Conversation" }), jsx("p", { children: "Would you like to refresh and return to the starting point of the conversation?" })] }), jsxs("div", { className: "modalActions", children: [jsx("button", { onClick: onClose, className: "cancelBtn", children: "Cancel" }), 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 = useState(props.config), rawConfig = _b[0], setRawConfig = _b[1];
@@ -32113,20 +32018,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 (jsx("div", { className: "widget-container widget-container--loading ".concat(modeClass), children: jsx("div", { className: "xa-spinner-container visible", children: 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 (jsx("div", { className: "widget-container widget-container--error ".concat(modeClass), children: jsxs("div", { className: "widget-error-message", children: ["Failed to load chat configuration: ", configError.message] }) }));
+    }
+    return (jsx(ChatConfigContext.Provider, { value: config, children: jsx(ChatServerContext.Provider, { value: chatServer, children: 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;
@@ -32162,7 +32060,11 @@ var ChatWidget = function (props) {
         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 = useState(false), typing = _9[0], setTypingState = _9[1]; // false initially
+    var _9 = 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 = useRef(false);
+    // Timeout ref for debouncing "stop typing" events
+    var stopTypingTimeoutRef = useRef(null);
     var chatServer = 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;
@@ -32197,6 +32099,10 @@ 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
     }, []);
@@ -32253,19 +32159,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 = 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 = 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));
     }
@@ -32417,20 +32338,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, 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 }),
-            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),
-            chatState.wsButton && visible && (React$1.createElement(WsButton, { button: chatState.wsButton, onPress: handleWsButtonPress })),
-            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, 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 }),
-            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 (jsxs(Fragment, { children: [jsxs("div", { className: "widget-container ".concat(modeClass, " ").concat(getVisibilityClass()), children: [jsx(WidgetStylesheet, { theme: config === null || config === void 0 ? void 0 : config.theme }), 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 }), 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 }), jsx("div", { className: "xa-spinner-container ".concat(visible && connectionStatus === "pending" ? "visible" : ""), children: jsx("div", { className: "xa-spinner" }) }), connectionStatus === "offline" && jsx(ServerOffline, {}), chatState.wsButton && visible && (jsx(WsButton, { button: chatState.wsButton, onPress: handleWsButtonPress })), 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 }), jsx("div", { className: "restartModal", ref: modalRef, onClick: handleRestartModalCloseClick, children: jsx(ModalContent, { onClose: handleRestartModalCloseClick, onReset: handleReset }) })] }), 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 }), jsx(ErrorOverlay, { enableErrorOverlay: config === null || config === void 0 ? void 0 : config.enableErrorOverlay })] }));
 };
 
 // src/utils/formatProdErrorMessage.ts
@@ -33747,15 +33655,23 @@ 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)) {
-        if (prevAgentInfo === null || prevAgentInfo === void 0 ? void 0 : prevAgentInfo.joined) {
+        // 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 {
-            log("Agent \"".concat(detail.user.displayName || "Unknown", "\" (nick: ").concat(detail.user.nick, ") is joining. Adding join message to chat."));
+            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) ? state.chats : joinMessages(state.chats, detail), agents: agents });
+        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."));
@@ -33771,9 +33687,22 @@ 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 });
     }
 }
@@ -33799,6 +33728,10 @@ function resetReducer(state) {
         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);
@@ -33867,6 +33800,20 @@ function update(state, action) {
                     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;
@@ -34058,12 +34005,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 jsx(Fragment, {});
     }
     var widgetProps = __assign(__assign({}, props), { messageMiddleware: messageMiddleware, getConfig: props.getConfig // Pass through getConfig callback
      });
-    return (React$1.createElement(Provider, { store: chatStore },
-        React$1.createElement(ChatWidgetWrapper, __assign({}, widgetProps))));
+    return (jsx(Provider, { store: chatStore, children: jsx(ChatWidgetWrapper, __assign({}, widgetProps)) }));
 };
 
 // Function to create a static reducer
@@ -34097,11 +34043,10 @@ var StaticChatWidgetContainer = function (props) {
     var config = useMemo(function () {
         return __assign(__assign({}, props.config), { connection: {
                 serverUrl: "",
-                type: "local"
+                type: "local",
             } });
     }, [props.config]);
-    return (React$1.createElement(Provider, { store: store },
-        React$1.createElement(ChatWidgetWrapper, __assign({}, props, { config: config }))));
+    return (jsx(Provider, { store: store, children: jsx(ChatWidgetWrapper, __assign({}, props, { config: config })) }));
 };
 
 function createStateFromMessages(messages) {
@@ -34114,7 +34059,7 @@ var StaticMessagesChatWidgetContainer = function (props) {
     var state = useMemo(function () {
         return createStateFromMessages(messages);
     }, [messages]);
-    return (React$1.createElement(StaticChatWidgetContainer, { state: state, mode: props.mode, config: props.config }));
+    return jsx(StaticChatWidgetContainer, { state: state, mode: props.mode, config: props.config });
 };
 
 export { ActionButton, Avatar, CardMiddleware, Carousel, CarouselItem, ChatWidgetContainer as Chat, ChatButton, ChatCard, ChatChip, ChatChips, ChatHeader, ChatMenu, ChatMessage, ChatMessageBubble, ChatMessagePart, ChatWidgetWrapper as ChatWidget, CtaBubble, CtaBubbleContainer, List, ListItem, ListMiddleware, MessageList, MiddlewareContextFactory, StaticChatWidgetContainer, StaticMessagesChatWidgetContainer, joinMiddlewares, responseToMessage, useLateMiddleware, useStandardMiddleware };