@xapp/chat-widget 1.57.5 → 1.58.0

package/dist/index.js

@@ -6694,7 +6694,7 @@ var ChatChipsContainer = function (_) {
 };
 
 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 }));
+    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 = {};
@@ -6830,15 +6830,15 @@ var DrawerBars = function (props) {
         }
         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()));
+    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": true, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "minimize-button ".concat(props.showInRight ? "positionRight" : ""), onClick: props.onClick }));
+    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": true, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "refresh-button ".concat(props.showInRight ? "positionRight" : props.showInLeft ? "positionLeft" : ""), onClick: props.onClick }));
+    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 = {
@@ -6885,8 +6885,19 @@ var ChatHeader = function (props) {
         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": props.canRefresh ? refreshButtonAriaLabel : "" + props.canMinimize ? minimizeButtonAriaLabel : "" + props.canCancel ? closeButtonAriaLabel : "", "aria-hidden": true },
+        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),
@@ -7823,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" },
@@ -7937,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),
@@ -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) {