@xapp/chat-widget 1.57.4 → 1.58.0

package/dist/index.js

@@ -6693,6 +6693,10 @@ var ChatChipsContainer = function (_) {
         React__default$1["default"].createElement(ChatChips, { options: chips, onOptionClick: optionOnChange })));
 };
 
+var CancelButton = function (props) {
+    return (React__default$1["default"].createElement("button", { 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 = {};
 
 var ChannelData = {};
@@ -6813,6 +6817,103 @@ var ChatMenu = function (props) {
     })));
 };
 
+var DrawerBars = function (props) {
+    var bars = props.bars;
+    // 0 is not a valid number of bars so a simple truthy check works here
+    if (!bars) {
+        bars = 2;
+    }
+    function getBars() {
+        var barElements = [];
+        for (var bar = 0; bar < bars; bar++) {
+            barElements.push(React__default$1["default"].createElement("div", { className: "drawer-bar bar".concat(bar) }));
+        }
+        return barElements;
+    }
+    return (React__default$1["default"].createElement("button", { className: "drawer-bars", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, "aria-label": "open menu", "aria-hidden": false, onClick: props.onToggle }, getBars()));
+};
+
+var MinimizeButton = function (props) {
+    return (React__default$1["default"].createElement("button", { 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__default$1["default"].createElement("button", { 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 = {
+    online: "Virtual Assistant",
+    offline: "Leave us a message",
+    away: "We're away!",
+    connecting: "Connecting...",
+};
+function getStatusText(status, config) {
+    var _a, _b, _c, _d;
+    switch (status) {
+        case "online":
+            return (_a = config === null || config === void 0 ? void 0 : config.online) !== null && _a !== void 0 ? _a : DEFAULT_STATUS_CONFIG.online;
+        case "offline":
+            return (_b = config === null || config === void 0 ? void 0 : config.offline) !== null && _b !== void 0 ? _b : DEFAULT_STATUS_CONFIG.offline;
+        case "away":
+            return (_c = config === null || config === void 0 ? void 0 : config.away) !== null && _c !== void 0 ? _c : DEFAULT_STATUS_CONFIG.away;
+        default:
+            return (_d = config === null || config === void 0 ? void 0 : config.connecting) !== null && _d !== void 0 ? _d : DEFAULT_STATUS_CONFIG.connecting;
+    }
+}
+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 innerDispatch = useChatDispatch();
+    var menuConfig = props.menuConfig, onSubmit = props.onSubmit;
+    var _s = React$1.useState(false), drawerOpen = _s[0], setDrawerState = _s[1]; // false initially
+    var menuPosition = (menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.menuButtonLocation) || "FOOTER";
+    var showMenu = menuPosition === "HEADER_LEFT";
+    var menuItemsRaw = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.items; // useWidgetEnv()?.menu?.items;
+    var menuItemsTabIndex = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.itemsTabIndex; // useWidgetEnv()?.menu?.itemsTabIndex;
+    var menuButtonTabIndex = (_a = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.button) === null || _a === void 0 ? void 0 : _a.tabIndex; // useWidgetEnv()?.menu?.button?.tabIndex;
+    var menuItems = React$1.useMemo(function () { return menuItemsRaw ? menuItemsRaw : []; }, [menuItemsRaw]);
+    function toggleDrawer() {
+        var newDrawer = !drawerOpen;
+        setDrawerState(newDrawer);
+        innerDispatch(setVisualStatus({
+            drawer: newDrawer
+        }));
+    }
+    function handleMenuItem(label) {
+        setDrawerState(false);
+        onSubmit(label);
+    }
+    var ariaLabel = "";
+    var canRefresh = props.canRefresh, canMinimize = props.canMinimize, canCancel = props.canCancel;
+    if (canRefresh) {
+        ariaLabel = refreshButtonAriaLabel;
+    }
+    if (canMinimize) {
+        ariaLabel = "".concat(ariaLabel).concat(minimizeButtonAriaLabel);
+    }
+    if (canCancel) {
+        ariaLabel = "".concat(ariaLabel).concat(closeButtonAriaLabel);
+    }
+    return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
+        React__default$1["default"].createElement("div", { className: "status-container background-header", "aria-label": ariaLabel, "aria-hidden": false },
+            showMenu && menuItems.length ? (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
+                React__default$1["default"].createElement("div", { className: "chat-footer__menu-icon" },
+                    React__default$1["default"].createElement(DrawerBars, { bars: 3, tabIndex: menuButtonTabIndex, onToggle: toggleDrawer })))) : React__default$1["default"].createElement(React__default$1["default"].Fragment, null),
+            ((_b = props === null || props === void 0 ? void 0 : props.agent) === null || _b === void 0 ? void 0 : _b.avatarPath) === undefined ? React__default$1["default"].createElement("div", null) :
+                React__default$1["default"].createElement("div", { className: "status-container__avatar" },
+                    React__default$1["default"].createElement(Avatar, { entity: props.agent })),
+            React__default$1["default"].createElement("div", { className: "\n                        ".concat("status-text", "\n                        ").concat(((_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" : "status-text-positionLeft", "                     \n                        ") },
+                React__default$1["default"].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__default$1["default"].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 : ""))),
+            props.canRefresh && (React__default$1["default"].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: props.canMinimize && props.canCancel, showInRight: !props.canMinimize && !props.canCancel })),
+            props.canMinimize && (React__default$1["default"].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: !props.canCancel })),
+            props.canCancel && (React__default$1["default"].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__default$1["default"].createElement("div", { className: "xa-chat-menu-container" },
+            React__default$1["default"].createElement(ChatMenu, { openFrom: "left", opened: drawerOpen, tabIndex: menuItemsTabIndex, onItemClick: handleMenuItem, items: menuItems }))) : React__default$1["default"].createElement(React__default$1["default"].Fragment, null)));
+};
+
 var UnknownMessage = function () { return React__default$1["default"].createElement(React__default$1["default"].Fragment, null); };
 
 function renderAvatar(entity) {
@@ -7660,22 +7761,6 @@ var ChatBranding = function (props) {
     return (React__default$1["default"].createElement("div", { className: "chat-footer__branding" }, text !== null && text !== void 0 ? text : "Powered by XAPP AI"));
 };
 
-var DrawerBars = function (props) {
-    var bars = props.bars;
-    // 0 is not a valid number of bars so a simple truthy check works here
-    if (!bars) {
-        bars = 2;
-    }
-    function getBars() {
-        var barElements = [];
-        for (var bar = 0; bar < bars; bar++) {
-            barElements.push(React__default$1["default"].createElement("div", { className: "drawer-bar bar".concat(bar) }));
-        }
-        return barElements;
-    }
-    return (React__default$1["default"].createElement("button", { className: "drawer-bars", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, "aria-label": "open menu", "aria-hidden": true, onClick: props.onToggle }, getBars()));
-};
-
 var CloseIcon = function () {
     // Sergey, I added this style, you will probably want to change it to be more appropriate
     return (React__default$1["default"].createElement("svg", { style: { color: "grey", paddingRight: "5px" }, xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 16 16" },
@@ -7749,10 +7834,10 @@ var Input = function (props) {
     }, [suggestion, onChange, onSuggestionCommand]);
     return (React__default$1["default"].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" +
             value.text
-            ? "To clear ipnut field click on clear icon on the left of send button"
-            : "", "aria-hidden": true, onDrop: onDrop, onDragOver: onDragOver, onDragLeave: onDragLeave },
+            ? "To clear input field click on clear icon on the left of send button"
+            : "", "aria-hidden": false, onDrop: onDrop, onDragOver: onDragOver, onDragLeave: onDragLeave },
         React__default$1["default"].createElement("form", { className: "xappw-input-form", onSubmit: handleOnSubmit },
-            React__default$1["default"].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, 
+            React__default$1["default"].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__default$1["default"].createElement("div", { className: "xappw-input-form__buttons" },
@@ -7863,7 +7948,7 @@ var ChatFooter = function (props) {
         setInput(data);
         setSuggestionSearch(data.text);
     }, []);
-    return (React__default$1["default"].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": true },
+    return (React__default$1["default"].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__default$1["default"].createElement(React__default$1["default"].Fragment, null,
                 drawerOpen ? React__default$1["default"].createElement(ChatMenu, { opened: drawerOpen, tabIndex: menuItemsTabIndex, onItemClick: handleMenuItem, items: menuItems }) : React__default$1["default"].createElement(React__default$1["default"].Fragment, null),
@@ -30447,80 +30532,6 @@ var ServerOffline = function () {
         React__default$1["default"].createElement("h3", null, "Server is offline"));
 };
 
-var CancelButton = function (props) {
-    return (React__default$1["default"].createElement("button", { id: "xapp-widget-close", "aria-label": "close widget", "aria-hidden": true, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "cancel-button", onClick: props.onClick }));
-};
-
-var MinimizeButton = function (props) {
-    return (React__default$1["default"].createElement("button", { id: "xapp-widget-minimize", "aria-label": "minimize widget", "aria-hidden": true, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "minimize-button ".concat(props.showInRight ? "positionRight" : ""), onClick: props.onClick }));
-};
-
-var RefreshButton = function (props) {
-    return (React__default$1["default"].createElement("button", { id: "xapp-widget-refresh", "aria-label": "refresh chat", "aria-hidden": true, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "refresh-button ".concat(props.showInRight ? "positionRight" : props.showInLeft ? "positionLeft" : ""), onClick: props.onClick }));
-};
-
-var DEFAULT_STATUS_CONFIG = {
-    online: "Virtual Assistant",
-    offline: "Leave us a message",
-    away: "We're away!",
-    connecting: "Connecting...",
-};
-function getStatusText(status, config) {
-    var _a, _b, _c, _d;
-    switch (status) {
-        case "online":
-            return (_a = config === null || config === void 0 ? void 0 : config.online) !== null && _a !== void 0 ? _a : DEFAULT_STATUS_CONFIG.online;
-        case "offline":
-            return (_b = config === null || config === void 0 ? void 0 : config.offline) !== null && _b !== void 0 ? _b : DEFAULT_STATUS_CONFIG.offline;
-        case "away":
-            return (_c = config === null || config === void 0 ? void 0 : config.away) !== null && _c !== void 0 ? _c : DEFAULT_STATUS_CONFIG.away;
-        default:
-            return (_d = config === null || config === void 0 ? void 0 : config.connecting) !== null && _d !== void 0 ? _d : DEFAULT_STATUS_CONFIG.connecting;
-    }
-}
-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 innerDispatch = useChatDispatch();
-    var menuConfig = props.menuConfig, onSubmit = props.onSubmit;
-    var _s = React$1.useState(false), drawerOpen = _s[0], setDrawerState = _s[1]; // false initially
-    var menuPosition = (menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.menuButtonLocation) || "FOOTER";
-    var showMenu = menuPosition === "HEADER_LEFT";
-    var menuItemsRaw = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.items; // useWidgetEnv()?.menu?.items;
-    var menuItemsTabIndex = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.itemsTabIndex; // useWidgetEnv()?.menu?.itemsTabIndex;
-    var menuButtonTabIndex = (_a = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.button) === null || _a === void 0 ? void 0 : _a.tabIndex; // useWidgetEnv()?.menu?.button?.tabIndex;
-    var menuItems = React$1.useMemo(function () { return menuItemsRaw ? menuItemsRaw : []; }, [menuItemsRaw]);
-    function toggleDrawer() {
-        var newDrawer = !drawerOpen;
-        setDrawerState(newDrawer);
-        innerDispatch(setVisualStatus({
-            drawer: newDrawer
-        }));
-    }
-    function handleMenuItem(label) {
-        setDrawerState(false);
-        onSubmit(label);
-    }
-    return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
-        React__default$1["default"].createElement("div", { className: "status-container background-header", "aria-label": props.canRefresh ? refreshButtonAriaLabel : "" + props.canMinimize ? minimizeButtonAriaLabel : "" + props.canCancel ? closeButtonAriaLabel : "", "aria-hidden": true },
-            showMenu && menuItems.length ? (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
-                React__default$1["default"].createElement("div", { className: "chat-footer__menu-icon" },
-                    React__default$1["default"].createElement(DrawerBars, { bars: 3, tabIndex: menuButtonTabIndex, onToggle: toggleDrawer })))) : React__default$1["default"].createElement(React__default$1["default"].Fragment, null),
-            ((_b = props === null || props === void 0 ? void 0 : props.agent) === null || _b === void 0 ? void 0 : _b.avatarPath) === undefined ? React__default$1["default"].createElement("div", null) :
-                React__default$1["default"].createElement("div", { className: "status-container__avatar" },
-                    React__default$1["default"].createElement(Avatar, { entity: props.agent })),
-            React__default$1["default"].createElement("div", { className: "\n                        ".concat("status-text", "\n                        ").concat(((_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" : "status-text-positionLeft", "                     \n                        ") },
-                React__default$1["default"].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__default$1["default"].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 : ""))),
-            props.canRefresh && (React__default$1["default"].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: props.canMinimize && props.canCancel, showInRight: !props.canMinimize && !props.canCancel })),
-            props.canMinimize && (React__default$1["default"].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: !props.canCancel })),
-            props.canCancel && (React__default$1["default"].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__default$1["default"].createElement("div", { className: "xa-chat-menu-container" },
-            React__default$1["default"].createElement(ChatMenu, { openFrom: "left", opened: drawerOpen, tabIndex: menuItemsTabIndex, onItemClick: handleMenuItem, items: menuItems }))) : React__default$1["default"].createElement(React__default$1["default"].Fragment, null)));
-};
-
 function buildStyleContent(theme) {
     var _a, _b, _c, _d, _e;
     return "\n:root {\n".concat(buildVariables(withPrefix("\t--xapp-", union(single("primary-color", theme === null || theme === void 0 ? void 0 : theme.primaryColor), withPrefix("widget-", union(getSize(theme === null || theme === void 0 ? void 0 : theme.size), getMargins(theme === null || theme === void 0 ? void 0 : theme.margin), getBorderStyle(theme === null || theme === void 0 ? void 0 : theme.border), getZIndex(theme === null || theme === void 0 ? void 0 : theme.zIndex))), getChatButtonStyle(theme === null || theme === void 0 ? void 0 : theme.chatButton), withPrefix("header-", getHeaderStyle(theme === null || theme === void 0 ? void 0 : theme.header)), withPrefix("footer-", getFooterStyle(theme === null || theme === void 0 ? void 0 : theme.footer)), withPrefix("content-", union(getBackgroundStyle((_a = theme === null || theme === void 0 ? void 0 : theme.content) === null || _a === void 0 ? void 0 : _a.background))), withPrefix("messages-", getMessagesStyle(theme === null || theme === void 0 ? void 0 : theme.messages)), withPrefix("text-typing-status-", getTextStyle((_b = theme === null || theme === void 0 ? void 0 : theme.textTypingStatus) === null || _b === void 0 ? void 0 : _b.text)), withPrefix("send-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.sendButton)), withPrefix("menu-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.menuButton)), withPrefix("menu-", getMenuStyle(theme === null || theme === void 0 ? void 0 : theme.menu)), withPrefix("refresh-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.refreshButton)), withPrefix("minimize-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.minimizeButton)), withPrefix("cancel-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.cancelButton)), withPrefix("carousel-", union(withPrefix("title-", getTextStyle((_c = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _c === void 0 ? void 0 : _c.title)), withPrefix("subtitle-", getTextStyle((_d = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _d === void 0 ? void 0 : _d.subtitle)), withPrefix("action-", getButtonStyle((_e = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _e === void 0 ? void 0 : _e.button)))), withPrefix("input-", getInputStyle(theme === null || theme === void 0 ? void 0 : theme.input)), withPrefix("cta-", getCtaStyle(theme === null || theme === void 0 ? void 0 : theme.cta))))), "\n}");
@@ -30832,28 +30843,25 @@ var ChatWidgetWrapper = function (props) {
             React__default$1["default"].createElement(ChatWidget, __assign({}, props)))));
 };
 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;
+    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;
     var innerDispatch = useChatDispatch();
     var dispatch = useChatServerDispatch();
     // From Redux
     var chatState = reactRedux.useSelector(function (state) { return state; });
+    // Refresh modalReference
     var modalRef = React$1.useRef({});
-    function openModal() {
-        modalRef.current.style.display = "block";
-    }
-    function closeModal() {
-        modalRef.current.style.display = "none";
-    }
     var mode = (_a = props.mode) !== null && _a !== void 0 ? _a : "normal";
     var dockedMode = mode === "docked";
     var staticMode = mode === "static";
     var modeClass = "widget-container--".concat(mode);
     var canRefresh = (_c = (_b = props.config.header) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.refresh;
+    // can't minimize in docked mode or static mode.
     var canMinimize = !dockedMode && !staticMode && ((_e = (_d = props.config.header) === null || _d === void 0 ? void 0 : _d.actions) === null || _e === void 0 ? void 0 : _e.minimize);
+    console.log("".concat(dockedMode, " ").concat(staticMode, " ").concat((_g = (_f = props.config.header) === null || _f === void 0 ? void 0 : _f.actions) === null || _g === void 0 ? void 0 : _g.minimize));
     var canCancel;
     // To preserve legacy behavior, cancel needs a little more checks
-    if (typeof ((_g = (_f = props.config.header) === null || _f === void 0 ? void 0 : _f.actions) === null || _g === void 0 ? void 0 : _g.cancel) === "boolean") {
-        canCancel = !dockedMode && !staticMode && ((_j = (_h = props.config.header) === null || _h === void 0 ? void 0 : _h.actions) === null || _j === void 0 ? void 0 : _j.cancel);
+    if (typeof ((_j = (_h = props.config.header) === null || _h === void 0 ? void 0 : _h.actions) === null || _j === void 0 ? void 0 : _j.cancel) === "boolean") {
+        canCancel = !dockedMode && !staticMode && ((_l = (_k = props.config.header) === null || _k === void 0 ? void 0 : _k.actions) === null || _l === void 0 ? void 0 : _l.cancel);
     }
     else {
         canCancel = !dockedMode && !staticMode;
@@ -30863,18 +30871,18 @@ var ChatWidget = function (props) {
         chatState.visuals = {};
     }
     // Our state - pull from storage
-    var _1 = React$1.useState((!canMinimize && !canCancel) ||
+    var _3 = React$1.useState((!canMinimize && !canCancel) ||
         // !!get("visible") ||
         chatState.visuals.visible ||
-        (((_k = props.config) === null || _k === void 0 ? void 0 : _k.autoOpenOnWidth) &&
-            window.matchMedia("(min-width: ".concat((_l = props.config) === null || _l === void 0 ? void 0 : _l.autoOpenOnWidth, ")")).matches)), visible = _1[0], setVisibleState = _1[1];
-    var _2 = React$1.useState(false), typing = _2[0], setTypingState = _2[1]; // false initially
+        (((_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 = _3[0], setVisibleState = _3[1];
+    var _4 = React$1.useState(false), typing = _4[0], setTypingState = _4[1]; // false initially
     var chatServer = React$1.useContext(ChatServerContext);
-    var patternsConfig = (_o = (_m = props.config) === null || _m === void 0 ? void 0 : _m.autoOpenOnPattern) === null || _o === void 0 ? void 0 : _o.patterns;
+    var patternsConfig = (_q = (_p = props.config) === null || _p === void 0 ? void 0 : _p.autoOpenOnPattern) === null || _q === void 0 ? void 0 : _q.patterns;
     var currentUrl = window.location.href;
     var patternExist = patternsConfig && patternsConfig.length > 0;
     var patternMatches = patternsConfig === null || patternsConfig === void 0 ? void 0 : patternsConfig.some(function (pattern) { return currentUrl.includes(pattern); });
-    var configWidth = (_q = (_p = props.config) === null || _p === void 0 ? void 0 : _p.autoOpenOnPattern) === null || _q === void 0 ? void 0 : _q.minimumWidth;
+    var configWidth = (_s = (_r = props.config) === null || _r === void 0 ? void 0 : _r.autoOpenOnPattern) === null || _s === void 0 ? void 0 : _s.minimumWidth;
     // eslint-disable-next-line no-restricted-globals
     var currentWidth = screen.width;
     var setVisible = React$1.useCallback(function (newVisible) {
@@ -30961,17 +30969,38 @@ var ChatWidget = function (props) {
     function getVisibilityClass() {
         return visible ? "visible" : "";
     }
-    function refreshOnClick() {
-        closeModal();
+    function openRestartConfirmationModal() {
+        // Interesting, this call the modalRef of the restart modal
+        modalRef.current.style.display = "block";
+    }
+    function closeRestartConfirmationModal() {
+        modalRef.current.style.display = "none";
+    }
+    function handleReset() {
         innerDispatch(reset());
     }
-    function minimizeOnClick() {
+    function handleRestartClick() {
+        if (config.header.actions.refreshShowConfirmation) {
+            // show the modal
+            openRestartConfirmationModal();
+            // we will close when
+        }
+        else {
+            handleReset();
+        }
+    }
+    function handleRestartModalCloseClick() {
+        closeRestartConfirmationModal();
+    }
+    /** Called when minimize button is clicked */
+    function handleMinimizeClick() {
         innerDispatch(setVisualStatus({
             opened: false
         }));
         setVisible(false);
     }
-    function cancelOnClick() {
+    /** Called when cancel is clicked */
+    function handleCancelClick() {
         //set("opened", false);
         innerDispatch(setVisualStatus({
             opened: false
@@ -31030,22 +31059,22 @@ var ChatWidget = function (props) {
             onConnectionStatusChange(connectionStatus);
         }
     }, [connectionStatus, onConnectionStatusChange]);
-    useExternalScript((_r = props.config) === null || _r === void 0 ? void 0 : _r.middlewareUrl);
+    useExternalScript((_t = props.config) === null || _t === void 0 ? void 0 : _t.middlewareUrl);
     // This is a pseudo agent. It represent's the widget (shown in the header avatar for instance)
-    var widgetAgent = ((_s = chatState.agents["agent:robot"]) === null || _s === void 0 ? void 0 : _s.user) || (config === null || config === void 0 ? void 0 : config.agent)
+    var widgetAgent = ((_u = chatState.agents["agent:robot"]) === null || _u === void 0 ? void 0 : _u.user) || (config === null || config === void 0 ? void 0 : config.agent)
         || { nick: "agent:robot", avatarPath: config.avatarUrl, display_name: "Agent" };
     return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
         React__default$1["default"].createElement("div", { className: "widget-container ".concat(modeClass, " ").concat(getVisibilityClass()) },
             React__default$1["default"].createElement(WidgetStylesheet, { theme: config === null || config === void 0 ? void 0 : config.theme }),
-            React__default$1["default"].createElement(ChatHeader, { accountStatus: chatState.accountStatus, refreshOnClick: openModal, minimizeOnClick: minimizeOnClick, cancelOnClick: cancelOnClick, agent: widgetAgent, canRefresh: canRefresh, canMinimize: canMinimize, canCancel: canCancel, config: config === null || config === void 0 ? void 0 : config.header, menuConfig: config.menu, onSubmit: handleOnSubmit }),
-            React__default$1["default"].createElement(MessageList, { visible: visible, queuePosition: chatState.queuePosition, isChatting: chatState.isChatting, isOffline: isOffline, messages: messages, agents: chatState.agents, agent: config === null || config === void 0 ? void 0 : config.agent, lastRatingRequestTimestamp: chatState.lastRatingRequestTimestamp, hasRating: chatState.hasRating, visitorId: chatState.visitorId, messageMiddleware: props.messageMiddleware, textTypingStatusEnabled: (_u = (_t = props.config) === null || _t === void 0 ? void 0 : _t.typingStatus) === null || _u === void 0 ? void 0 : _u.textTypingStatusEnabled, onSend: handleSendMessage, onWrite: handleWriteMessage, onOpenUrl: handleOpenUrl }),
+            React__default$1["default"].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__default$1["default"].createElement(MessageList, { visible: visible, queuePosition: chatState.queuePosition, isChatting: chatState.isChatting, isOffline: isOffline, messages: messages, agents: chatState.agents, agent: config === null || config === void 0 ? void 0 : config.agent, lastRatingRequestTimestamp: chatState.lastRatingRequestTimestamp, hasRating: chatState.hasRating, visitorId: chatState.visitorId, messageMiddleware: props.messageMiddleware, textTypingStatusEnabled: (_w = (_v = props.config) === null || _v === void 0 ? void 0 : _v.typingStatus) === null || _w === void 0 ? void 0 : _w.textTypingStatusEnabled, onSend: handleSendMessage, onWrite: handleWriteMessage, onOpenUrl: handleOpenUrl }),
             React__default$1["default"].createElement("div", { className: "xa-spinner-container ".concat(visible && connectionStatus === "pending" ? "visible" : "") },
                 React__default$1["default"].createElement("div", { className: "xa-spinner" })),
             connectionStatus === "offline" && React__default$1["default"].createElement(ServerOffline, null),
-            React__default$1["default"].createElement(ChatFooter, { isAdmin: config === null || config === void 0 ? void 0 : config.isAdmin, isChatting: chatState.isChatting, placeholder: (_v = config === null || config === void 0 ? void 0 : config.input) === null || _v === void 0 ? void 0 : _v.placeholder, sendButtonIcon: (_x = (_w = config === null || config === void 0 ? void 0 : config.footer) === null || _w === void 0 ? void 0 : _w.sendButton) === null || _x === void 0 ? void 0 : _x.icon, visible: visible, menuConfig: props.config.menu, footerConfig: (_y = props.config) === null || _y === void 0 ? void 0 : _y.footer, inputConfig: (_z = props.config) === null || _z === void 0 ? void 0 : _z.input, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload }),
-            React__default$1["default"].createElement("div", { className: "restartModal", ref: modalRef, onClick: closeModal },
-                React__default$1["default"].createElement(ModalContent, { onClose: closeModal, onReset: refreshOnClick }))),
-        React__default$1["default"].createElement(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: (_0 = props.config) === null || _0 === void 0 ? void 0 : _0.cta, visible: visible })));
+            React__default$1["default"].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, visible: visible, menuConfig: props.config.menu, footerConfig: (_0 = props.config) === null || _0 === void 0 ? void 0 : _0.footer, inputConfig: (_1 = props.config) === null || _1 === void 0 ? void 0 : _1.input, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload }),
+            React__default$1["default"].createElement("div", { className: "restartModal", ref: modalRef, onClick: handleRestartModalCloseClick },
+                React__default$1["default"].createElement(ModalContent, { onClose: handleRestartModalCloseClick, onReset: handleReset }))),
+        React__default$1["default"].createElement(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: (_2 = props.config) === null || _2 === void 0 ? void 0 : _2.cta, visible: visible })));
 };
 
 function tryParseJson(str) {
@@ -31540,6 +31569,7 @@ exports.ChatButton = ChatButton;
 exports.ChatCard = ChatCard;
 exports.ChatChip = ChatChip;
 exports.ChatChips = ChatChips;
+exports.ChatHeader = ChatHeader;
 exports.ChatMenu = ChatMenu;
 exports.ChatMessage = ChatMessage;
 exports.ChatMessageBubble = ChatMessageBubble;