@xapp/chat-widget 1.43.0 → 1.45.0

package/dist/index.js

@@ -30447,15 +30447,16 @@ var TypingIndicator = function (_) {
  * Show the agent is typing (or the bot - for fun)
  */
 var TypingStatus = function (props) {
-    var agent_names = Object.values(props.agents)
-        .filter(function (agent) { return agent.typing; });
+    var agent_names = Object.values(props.agents).filter(function (agent) { return agent.typing; });
     return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null, agent_names.map(function (agent) {
-        return (React__default$1["default"].createElement("div", { className: "chat-msg-container-wrapper", key: "typing-status-".concat(agent.user.nick) },
+        var _a, _b;
+        return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null, !props.textTypingStatusEnabled ? (React__default$1["default"].createElement("div", { className: "chat-msg-container-wrapper", key: "typing-status-".concat(agent.user.nick) },
             React__default$1["default"].createElement("div", { key: agent.user.nick, className: "chat-msg-container agent chat-typing-progress" },
                 React__default$1["default"].createElement(ChatMessagePart, { user: agent.user, showAvatar: true },
                     React__default$1["default"].createElement("div", { className: "chat-msg" },
                         React__default$1["default"].createElement(ChatMessageBubble, { owner: "others", hasTail: true },
-                            React__default$1["default"].createElement(TypingIndicator, null)))))));
+                            React__default$1["default"].createElement(TypingIndicator, null))))))) : (React__default$1["default"].createElement("div", { key: agent.user.nick, className: "chat-msg-agent-typing" }, (_b = (_a = agent.user) === null || _a === void 0 ? void 0 : _a.display_name) !== null && _b !== void 0 ? _b : "Bot",
+            " is typing"))));
     })));
 };
 
@@ -30548,7 +30549,7 @@ var MessageList = function (props) {
             renderAll(),
             React__default$1["default"].createElement("div", { ref: messagesEndRef, style: { float: "left", clear: "both" } }),
             React__default$1["default"].createElement(QueuePosition, { position: queuePosition }),
-            React__default$1["default"].createElement(TypingStatus, { agents: agents })),
+            React__default$1["default"].createElement(TypingStatus, { agents: agents, textTypingStatusEnabled: props.textTypingStatusEnabled })),
         React__default$1["default"].createElement(ChatChipsContainer, null)));
 };
 
@@ -30566,6 +30567,10 @@ var MinimizeButton = function (props) {
     return (React__default$1["default"].createElement("div", { id: "xapp-widget-minimize", className: "minimize-button ".concat(props.showInRight ? "positionRight" : ""), onClick: props.onClick }));
 };
 
+var RefreshButton = function (props) {
+    return (React__default$1["default"].createElement("div", { id: "xapp-widget-refresh", 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",
@@ -30582,12 +30587,15 @@ function getStatusText(status, config) {
     }
 }
 var StatusContainer = function (props) {
-    var _a;
+    var _a, _b, _c, _d, _e, _f, _g;
     return (React__default$1["default"].createElement("div", { className: "status-container" },
         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: "status-text" },
-            React__default$1["default"].createElement("span", null, getStatusText(props.accountStatus, (_a = props.config) === null || _a === void 0 ? void 0 : _a.status))),
+        React__default$1["default"].createElement("div", { className: "".concat("status-text", " ").concat(((_a = props.config) === null || _a === void 0 ? void 0 : _a.alignTextCenter) ? "status-text-positionCenter" : "status-text-positionLeft") },
+            React__default$1["default"].createElement("span", { className: "status-text-title" }, getStatusText(props.accountStatus, (_b = props.config) === null || _b === void 0 ? void 0 : _b.status)),
+            ((_d = (_c = props.config) === null || _c === void 0 ? void 0 : _c.subtitle) === null || _d === void 0 ? void 0 : _d.enabled) && React__default$1["default"].createElement("span", { className: "status-text-subtitle" }, (_g = (_f = (_e = props.config) === null || _e === void 0 ? void 0 : _e.subtitle) === null || _f === void 0 ? void 0 : _f.text) !== null && _g !== void 0 ? _g : "")),
+        props.canRefresh &&
+            React__default$1["default"].createElement(RefreshButton, { onClick: props.refreshOnClick, showInLeft: props.canMinimize && props.canCancel, showInRight: !props.canMinimize && !props.canCancel }),
         props.canMinimize &&
             React__default$1["default"].createElement(MinimizeButton, { onClick: props.minimizeOnClick, showInRight: !props.canCancel }),
         props.canCancel &&
@@ -30595,8 +30603,8 @@ var StatusContainer = function (props) {
 };
 
 function buildStyleContent(theme) {
-    var _a, _b, _c, _d;
-    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))), 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("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("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((_b = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _b === void 0 ? void 0 : _b.title)), withPrefix("subtitle-", getTextStyle((_c = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _c === void 0 ? void 0 : _c.subtitle)), withPrefix("action-", getButtonStyle((_d = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _d === void 0 ? void 0 : _d.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}");
+    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}");
 }
 function WidgetStylesheet(props) {
     var theme = props.theme;
@@ -30706,6 +30714,19 @@ function getSize(style) {
         }
     });
 }
+function getZIndex(style) {
+    return __generator$1(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                if (!style) return [3 /*break*/, 2];
+                return [4 /*yield*/, ['z-index', style]];
+            case 1:
+                _a.sent();
+                _a.label = 2;
+            case 2: return [2 /*return*/];
+        }
+    });
+}
 function getMargins(style) {
     return __generator$1(this, function (_a) {
         switch (_a.label) {
@@ -30824,7 +30845,7 @@ function getHeaderStyle(style) {
     if (!style) {
         return empty();
     }
-    return union(getBackgroundStyle(style.background), getTextStyle(style.text), getBorderStyle(style.border));
+    return union(getBackgroundStyle(style.background), getTextStyle(style.text), withPrefix("subtitle-", getTextStyle(style.subtitle)), getBorderStyle(style.border));
 }
 function getFooterStyle(style) {
     var _a;
@@ -30875,7 +30896,7 @@ 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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     var innerDispatch = useChatDispatch();
     var dispatch = useChatServerDispatch();
     // From Redux
@@ -30884,18 +30905,19 @@ var ChatWidget = function (props) {
     var dockedMode = mode === "docked";
     var staticMode = mode === "static";
     var modeClass = "widget-container--".concat(mode);
-    var canMinimize = !dockedMode && !staticMode && ((_c = (_b = props.config.header) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.minimize);
+    var canRefresh = (_c = (_b = props.config.header) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.refresh;
+    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);
     var canCancel;
     // To preserve legacy behavior, cancel needs a little more checks
-    if (typeof ((_e = (_d = props.config.header) === null || _d === void 0 ? void 0 : _d.actions) === null || _e === void 0 ? void 0 : _e.cancel) === "boolean") {
-        canCancel = !dockedMode && !staticMode && ((_g = (_f = props.config.header) === null || _f === void 0 ? void 0 : _f.actions) === null || _g === void 0 ? void 0 : _g.cancel);
+    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);
     }
     else {
         canCancel = !dockedMode && !staticMode;
     }
     // Our state - pull from storage
-    var _p = React$1.useState((!canMinimize && !canCancel) || !!get("visible") || (((_h = props.config) === null || _h === void 0 ? void 0 : _h.autoOpenOnWidth) && window.matchMedia("(min-width: ".concat((_j = props.config) === null || _j === void 0 ? void 0 : _j.autoOpenOnWidth, ")")).matches)), visible = _p[0], setVisibleState = _p[1];
-    var _q = React$1.useState(false), typing = _q[0], setTypingState = _q[1]; // false initially
+    var _t = React$1.useState((!canMinimize && !canCancel) || !!get("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 = _t[0], setVisibleState = _t[1];
+    var _u = React$1.useState(false), typing = _u[0], setTypingState = _u[1]; // false initially
     var chatServer = React$1.useContext(ChatServerContext);
     var setVisible = React$1.useCallback(function (newVisible) {
         if (staticMode) {
@@ -30961,6 +30983,9 @@ var ChatWidget = function (props) {
     function getVisibilityClass() {
         return visible ? "visible" : "";
     }
+    function refreshOnClick() {
+        innerDispatch(reset());
+    }
     function minimizeOnClick() {
         set$1("opened", false);
         setVisible(false);
@@ -31014,17 +31039,17 @@ var ChatWidget = function (props) {
             onConnectionStatusChange(connectionStatus);
         }
     }, [connectionStatus, onConnectionStatusChange]);
-    useExternalScript((_k = props.config) === null || _k === void 0 ? void 0 : _k.middlewareUrl);
+    useExternalScript((_m = props.config) === null || _m === void 0 ? void 0 : _m.middlewareUrl);
     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(StatusContainer, { accountStatus: chatState.accountStatus, minimizeOnClick: minimizeOnClick, cancelOnClick: cancelOnClick, agent: (_l = chatState.agents["agent:robot"]) === null || _l === void 0 ? void 0 : _l.user, canMinimize: canMinimize, canCancel: canCancel, config: config === null || config === void 0 ? void 0 : config.header }),
-            React__default$1["default"].createElement(MessageList, { visible: visible, queuePosition: chatState.queuePosition, isChatting: chatState.isChatting, isOffline: isOffline, messages: messages, agents: chatState.agents, lastRatingRequestTimestamp: chatState.lastRatingRequestTimestamp, hasRating: chatState.hasRating, visitorId: chatState.visitorId, messageMiddleware: props.messageMiddleware, onSend: handleSendMessage, onWrite: handleWriteMessage, onOpenUrl: handleOpenUrl }),
+            React__default$1["default"].createElement(StatusContainer, { accountStatus: chatState.accountStatus, refreshOnClick: refreshOnClick, minimizeOnClick: minimizeOnClick, cancelOnClick: cancelOnClick, agent: (_o = chatState.agents["agent:robot"]) === null || _o === void 0 ? void 0 : _o.user, canRefresh: canRefresh, canMinimize: canMinimize, canCancel: canCancel, config: config === null || config === void 0 ? void 0 : config.header }),
+            React__default$1["default"].createElement(MessageList, { visible: visible, queuePosition: chatState.queuePosition, isChatting: chatState.isChatting, isOffline: isOffline, messages: messages, agents: chatState.agents, lastRatingRequestTimestamp: chatState.lastRatingRequestTimestamp, hasRating: chatState.hasRating, visitorId: chatState.visitorId, messageMiddleware: props.messageMiddleware, textTypingStatusEnabled: (_q = (_p = props.config) === null || _p === void 0 ? void 0 : _p.typingStatus) === null || _q === void 0 ? void 0 : _q.textTypingStatusEnabled, onSend: handleSendMessage, onWrite: handleWriteMessage, onOpenUrl: handleOpenUrl }),
             React__default$1["default"].createElement("div", { className: "spinner-container ".concat(visible && connectionStatus === "pending" ? "visible" : "") },
                 React__default$1["default"].createElement("div", { className: "spinner" })),
             connectionStatus === "offline" && React__default$1["default"].createElement(ServerOffline, null),
-            React__default$1["default"].createElement(ChatFooter, { isChatting: chatState.isChatting, placeholder: (_m = config === null || config === void 0 ? void 0 : config.input) === null || _m === void 0 ? void 0 : _m.placeholder, visible: visible, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload })),
-        React__default$1["default"].createElement(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: (_o = props.config) === null || _o === void 0 ? void 0 : _o.cta, visible: visible })));
+            React__default$1["default"].createElement(ChatFooter, { isChatting: chatState.isChatting, placeholder: (_r = config === null || config === void 0 ? void 0 : config.input) === null || _r === void 0 ? void 0 : _r.placeholder, visible: visible, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload })),
+        React__default$1["default"].createElement(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: (_s = props.config) === null || _s === void 0 ? void 0 : _s.cta, visible: visible })));
 };
 
 function tryParseJson(str) {