@xapp/chat-widget 1.54.3 → 1.55.1

package/dist/index.js

@@ -164,6 +164,13 @@ function insertSorted(array, obj, comparer) {
     return array;
 }
 
+/**
+ * Agent is determined if the provided nick string starts with `agent:`.
+ *
+ * This returns false if the nick string is falsey (undefined or "") or does not start with "agent:"
+ * @param nick
+ * @returns
+ */
 function isAgent(nick) {
     if (!nick) {
         return false;
@@ -1552,37 +1559,65 @@ var logOnce = function (key) {
     }
 };
 
-function getVisitorSvg() {
-    return (React__default$1["default"].createElement("svg", { width: "16", height: "19", viewBox: "0 0 16 19", style: { margin: "0 auto", display: "block" } },
-        React__default$1["default"].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" })));
-}
 var Avatar = function (props) {
     var _a, _b;
     var style = {};
     var child;
     var entity = props.entity;
+    var chatConfig = React$1.useContext(ChatConfigContext);
     var avatarPath = entity === null || entity === void 0 ? void 0 : entity.avatarPath;
+    if (!avatarPath) {
+        var avatarImage = GenerateAvatar({
+            initials: (entity === null || entity === void 0 ? void 0 : entity.displayName) ? entity.displayName.slice(0, 2) : "?",
+            backgroundColor: (_b = (_a = chatConfig === null || chatConfig === void 0 ? void 0 : chatConfig.env) === null || _a === void 0 ? void 0 : _a.theme) === null || _b === void 0 ? void 0 : _b.primaryColor,
+            size: 36,
+        });
+        avatarPath = avatarImage.src;
+    }
     var agentAva = entity && isAgent(entity.nick);
-    var ctx = React$1.useContext(ChatConfigContext);
     if (agentAva) {
-        if (avatarPath) {
-            // absolute or relative url (chat server may send relative, if it hosts the file)
-            if (avatarPath.startsWith("http")) {
-                style.backgroundImage = "url('".concat(avatarPath, "')");
-            }
-            else if (ctx === null || ctx === void 0 ? void 0 : ctx.assetUrl) {
-                style.backgroundImage = "url('".concat(ctx === null || ctx === void 0 ? void 0 : ctx.assetUrl, "/").concat(avatarPath, "')");
-            }
-            style.backgroundColor = "none";
-        }
-        (_a = style.backgroundImage) !== null && _a !== void 0 ? _a : (style.backgroundImage = "url('".concat((_b = ctx === null || ctx === void 0 ? void 0 : ctx.env) === null || _b === void 0 ? void 0 : _b.avatarUrl, "')"));
+        style.backgroundImage = "url('".concat(avatarPath, "')");
+        style.backgroundColor = "none";
     }
     else {
         child = getVisitorSvg();
     }
     var hasImage = !!style.backgroundImage || !!child;
     return (React__default$1["default"].createElement("div", { className: "avatar ".concat(agentAva ? "avatar--agent" : "avatar--visitor", " ").concat(!hasImage ? "avatar--empty" : ""), style: style, title: entity ? entity.display_name : "Agent" }, child));
-};
+};
+function getVisitorSvg() {
+    return (React__default$1["default"].createElement("svg", { width: "16", height: "19", viewBox: "0 0 16 19", style: { margin: "0 auto", display: "block" } },
+        React__default$1["default"].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" })));
+}
+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__default$1["default"].useMemo(function () {
+        return generateImage(initials, size, backgroundColor, textColor);
+    }, [initials, size, backgroundColor, textColor]);
+    return image;
+}
+function generateImage(initials, size, backgroundColor, textColor) {
+    var canvas = document.createElement("canvas");
+    canvas.width = size;
+    canvas.height = size;
+    var context = canvas.getContext("2d");
+    // Draw background
+    context.fillStyle = backgroundColor;
+    context.fillRect(0, 0, size, size);
+    // Draw text
+    context.fillStyle = textColor;
+    context.font = "".concat(size / 2, "px Arial");
+    context.textAlign = "center";
+    context.textBaseline = "middle";
+    context.fillText(initials, size / 2, size / 2);
+    // Create image
+    var image = new Image();
+    image.src = canvas.toDataURL();
+    return image;
+}
 
 function isChatServerActionLink(arg) {
     return arg.hasOwnProperty("label");
@@ -2017,7 +2052,7 @@ function writeMessage(msg, user) {
             type: "write_msg",
             user: user,
             msg: msg,
-            timestamp: +Date()
+            timestamp: +new Date()
         }
     };
 }
@@ -2050,7 +2085,7 @@ function receiveToken(token) {
         type: "receiveToken",
         detail: {
             token: token,
-            timestamp: +Date(),
+            timestamp: +new Date(),
             type: "receiveToken",
             user: undefined
         }
@@ -2091,7 +2126,7 @@ function sendFile(file) {
                     nick: "",
                 },
                 attributes: { currentUrl: window.location.href },
-                timestamp: +Date()
+                timestamp: +new Date()
             }
         });
     }; };
@@ -3793,7 +3828,7 @@ var StentorRouterChat = /** @class */ (function () {
         this.dispatch = dispatch;
         this.setAccountStatus("offline");
         // Register "handlers" for the incoming events
-        this.handlers["connection update"] = function (data, _sender) {
+        this.handlers["connection update"] = function (data, _sender, _ts) {
             log("Connection update received. Session created: ".concat(data.sessionCreated, " Error: ").concat(data.errorMessage || ""));
             if (data.sessionCreated) {
                 _this.sessionCreated = true;
@@ -3804,21 +3839,21 @@ var StentorRouterChat = /** @class */ (function () {
                 _this.dispatch(setConnectionStatus("offline"));
             }
         };
-        this.handlers["account status"] = function (_data, _sender) {
+        this.handlers["account status"] = function (_data, _sender, ts) {
             dispatch({
                 type: "account_status",
                 detail: {
                     status: "online",
-                    timestamp: +new Date(),
+                    timestamp: ts || new Date().getTime(),
                 },
             });
         };
-        this.handlers["failure"] = function (data, sender) {
+        this.handlers["failure"] = function (data, sender, _ts) {
             err("Router says something failed: type: ".concat(data.type, " tries: ").concat(data.tries, " error: ").concat(data.error));
             var _a = _this.configurableMessages[data.tries], retry = _a.retry, delay = _a.delay, text = _a.text;
             _this.sendFailureMessage(retry, data.delay || delay, text, sender);
         };
-        this.handlers["new message"] = function (data, sender) {
+        this.handlers["new message"] = function (data, sender, ts) {
             // Because the router's internal message format is Stentor channel compatible.
             // So the data is either a stentor Request (from widget) or a stentor Response (from bot)
             var _a;
@@ -3844,11 +3879,11 @@ var StentorRouterChat = /** @class */ (function () {
                         nick: senderToNick(sender),
                     },
                     msg: message.msg,
-                    timestamp: +new Date(),
+                    timestamp: ts || new Date().getTime(),
                 },
             });
         };
-        this.handlers["user joined"] = function (_data, sender) {
+        this.handlers["user joined"] = function (_data, sender, ts) {
             _this.dispatch({
                 type: "chat",
                 detail: {
@@ -3858,11 +3893,11 @@ var StentorRouterChat = /** @class */ (function () {
                         nick: senderToNick(sender),
                         avatarPath: sender.avatarPath,
                     },
-                    timestamp: +new Date(),
+                    timestamp: ts || new Date().getTime(),
                 },
             });
         };
-        this.handlers["user left"] = function (_data, sender) {
+        this.handlers["user left"] = function (_data, sender, ts) {
             _this.dispatch({
                 type: "chat",
                 detail: {
@@ -3871,11 +3906,11 @@ var StentorRouterChat = /** @class */ (function () {
                         displayName: sender.displayName,
                         nick: senderToNick(sender),
                     },
-                    timestamp: +new Date(),
+                    timestamp: ts || new Date().getTime(),
                 },
             });
         };
-        this.handlers["typing"] = function (_data, sender) {
+        this.handlers["typing"] = function (_data, sender, ts) {
             _this.dispatch({
                 type: "chat",
                 detail: {
@@ -3884,11 +3919,11 @@ var StentorRouterChat = /** @class */ (function () {
                         nick: senderToNick(sender),
                     },
                     typing: true,
-                    timestamp: +new Date(),
+                    timestamp: ts || new Date().getTime(),
                 },
             });
         };
-        this.handlers["stop typing"] = function (_data, sender) {
+        this.handlers["stop typing"] = function (_data, sender, ts) {
             _this.dispatch({
                 type: "chat",
                 detail: {
@@ -3897,7 +3932,7 @@ var StentorRouterChat = /** @class */ (function () {
                         nick: senderToNick(sender),
                     },
                     typing: false,
-                    timestamp: +new Date(),
+                    timestamp: ts || new Date().getTime(),
                 },
             });
         };
@@ -3962,7 +3997,7 @@ var StentorRouterChat = /** @class */ (function () {
             var message = JSON.parse(me.data);
             var handler = _this.handlers[message.event];
             if (handler) {
-                _this.handlers[message.event](message.data, message.sender);
+                _this.handlers[message.event](message.data, message.sender, message.timeMs);
             }
             else {
                 log("Unknown router message event: ".concat(message.event));
@@ -7759,6 +7794,7 @@ var StentorServerChat = /** @class */ (function () {
     return StentorServerChat;
 }());
 
+// import { useWhatChanged } from '@simbathesailor/use-what-changed';
 function createChatServerCore(config, options) {
     switch (config.type) {
         case "direct":
@@ -7787,6 +7823,9 @@ var ChatServerContext = React$1.createContext(null);
 function useChatServer(config, options) {
     var _a = React$1.useState(), server = _a[0], setServer = _a[1];
     var dispatch = useChatDispatch();
+    var deps = [options, config, dispatch];
+    // Log what caused the "effect"
+    // useWhatChanged(deps, "options, config, dispatch");
     React$1.useEffect(function () {
         var newServer = createChatServer(config, options);
         newServer.init(dispatch);
@@ -7794,7 +7833,7 @@ function useChatServer(config, options) {
         return function () {
             newServer.dispose();
         };
-    }, [options, config, dispatch]);
+    }, deps);
     return server;
 }
 
@@ -8541,30 +8580,41 @@ var ChatMessage = function (props) {
 /**
  * value must be like "60m", "2h" etc.
  */
-function convertToSeconds(value) {
-    var unit = value === null || value === void 0 ? void 0 : value.slice(-1);
-    var number = parseFloat(value === null || value === void 0 ? void 0 : value.slice(0, -1));
+function convertToSeconds(s) {
+    if (!s) {
+        return 0;
+    }
+    var groups = s.match(/(\d+)([dhms]?)/);
+    if (!groups) {
+        err("Invalid time string: ".concat(s));
+        return 0;
+    }
+    var number = parseInt(groups[1]);
+    var unit = groups[2];
     switch (unit) {
-        case "d": {
+        case "d":
             return number * 24 * 60 * 60;
-        }
-        case "h": {
+        case "h":
             return number * 60 * 60;
-        }
-        case "m": {
+        case "m":
             return number * 60;
-        }
-        case "s": {
+        case "s":
             return number;
-        }
-        default: {
+        default:
+            // seconds (no unit)
             return number;
-        }
     }
 }
 
-function checkSessionExpiration(duration, lastMessageTimestamp, lastTimestamp) {
-    return lastTimestamp - lastMessageTimestamp > convertToSeconds(duration);
+function checkSessionExpiration(duration, lastMessageTimestamp, _lastTimestamp) {
+    var durationMs = convertToSeconds(duration) * 1000;
+    // never if no session duration in config
+    if (!duration) {
+        return false;
+    }
+    // TODO: Why? Let's use the time passed since the last message timestamp
+    // return lastTimestamp - lastMessageTimestamp > durationMs;
+    return +new Date() - lastMessageTimestamp > durationMs;
 }
 
 function useExternalScript(url) {
@@ -31384,14 +31434,17 @@ var TypingIndicator = function (_) {
  */
 var TypingStatus = function (props) {
     var agentsTyping = Object.values(props.agents).filter(function (agent) { return agent.typing; });
-    return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null, agentsTyping.map(function (agent) {
+    return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null, agentsTyping.map(function (agent, index) {
         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" },
+        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__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(key) },
+            React__default$1["default"].createElement("div", { key: key, 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("div", { key: "typing-status-".concat(agent.user.nick), className: "chat-msg-agent-typing" }, (_b = (_a = agent.user) === null || _a === void 0 ? void 0 : _a.displayName) !== null && _b !== void 0 ? _b : "Somebody",
+                            React__default$1["default"].createElement(TypingIndicator, null))))))) : (React__default$1["default"].createElement("div", { key: "typing-status-".concat(key), className: "chat-msg-agent-typing" },
+            displayName,
             " is typing"))));
     })));
 };
@@ -31449,7 +31502,7 @@ var MessageList = function (props) {
             user = ((_a = props.agents[msg.user.nick]) === null || _a === void 0 ? void 0 : _a.user) || props.agent;
             // Still nothing?
             if (!user) {
-                console.warn("Could not get a user from agents list with nick: \"".concat(msg.user.nick, "\""));
+                log("Could not get a user from agents list with nick: \"".concat(msg.user.nick, "\""));
                 user = msg.user;
             }
         }
@@ -31483,7 +31536,14 @@ var MessageList = function (props) {
      *
      */
     function renderAll() {
-        return props.messages.map(function (message /*, index: number*/) {
+        var lastMsgIndex = -1;
+        for (var i = props.messages.length - 1; i > 0; i--) {
+            if (props.messages[i].type === "chat.msg") {
+                lastMsgIndex = i;
+                break;
+            }
+        }
+        return props.messages.map(function (message, index) {
             // const next = props.messages[index + 1];
             // let sibling = false;
             // const currentNick = message.nick;
@@ -31492,7 +31552,37 @@ var MessageList = function (props) {
             // if (next && next.type === message.type && currentNick && currentNick === prevNick) {
             //   sibling = true;
             // }
-            return renderByType(message, false);
+            // Message types that will show time 
+            var tsTypes = [
+                "chat.file",
+                "chat.msg",
+                // "chat.failureMsg",
+                "chat.memberjoin",
+                "chat.memberleave",
+                "chat.rating",
+                // "chat.typing",
+                "chat.request.rating",
+                "chat.offline",
+                "chat.prechat"
+            ];
+            // show first and las TS and after at least 5 minutes gap
+            var showTs = false;
+            if (tsTypes.includes(message.type)) {
+                if (index === 0 || index === props.messages.length - 1 || index === lastMsgIndex) {
+                    showTs = true;
+                }
+                else {
+                    var previous = props.messages[index - 1];
+                    if (message.timestamp && previous.timestamp) {
+                        showTs = (message.timestamp - previous.timestamp) > 300 * 1000; // 5 minutes
+                    }
+                }
+            }
+            var ts = showTs ? new Date(message.timestamp).toLocaleString() : undefined;
+            return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
+                showTs && (React__default$1["default"].createElement("div", { className: "ts-msg-container" },
+                    React__default$1["default"].createElement("span", { className: "ts-msg" }, ts))),
+                renderByType(message, false)));
         });
     }
     var agents = props.agents, queuePosition = props.queuePosition;
@@ -31546,9 +31636,9 @@ var refreshButtonAriaLabel = "To refresh chat click on clockwise gapped circle a
 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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     var menuConfig = props.menuConfig, onSubmit = props.onSubmit;
-    var _q = React$1.useState(false), drawerOpen = _q[0], setDrawerState = _q[1]; // false initially
+    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;
@@ -31569,16 +31659,15 @@ var ChatHeader = function (props) {
             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),
-            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: "".concat("status-text", " ").concat(((_b = props.config) === null || _b === void 0 ? void 0 : _b.alignTextCenter)
-                    ? "status-text-positionCenter"
-                    : "status-text-positionLeft") },
-                React__default$1["default"].createElement("span", { className: "status-text-title" }, getStatusText(props.accountStatus, (_c = props.config) === null || _c === void 0 ? void 0 : _c.status)),
-                ((_e = (_d = props.config) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.enabled) && (React__default$1["default"].createElement("span", { className: "status-text-subtitle" }, (_h = (_g = (_f = props.config) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.text) !== null && _h !== void 0 ? _h : ""))),
-            props.canRefresh && (React__default$1["default"].createElement(RefreshButton, { onClick: props.refreshOnClick, tabIndex: (_k = (_j = props.config) === null || _j === void 0 ? void 0 : _j.actions) === null || _k === void 0 ? void 0 : _k.refreshTabIndex, showInLeft: props.canMinimize && props.canCancel, showInRight: !props.canMinimize && !props.canCancel })),
-            props.canMinimize && (React__default$1["default"].createElement(MinimizeButton, { onClick: props.minimizeOnClick, tabIndex: (_m = (_l = props.config) === null || _l === void 0 ? void 0 : _l.actions) === null || _m === void 0 ? void 0 : _m.minimizeTabIndex, showInRight: !props.canCancel })),
-            props.canCancel && (React__default$1["default"].createElement(CancelButton, { onClick: props.cancelOnClick, tabIndex: (_p = (_o = props.config) === null || _o === void 0 ? void 0 : _o.actions) === null || _p === void 0 ? void 0 : _p.cancelTabIndex }))),
+            ((_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)));
 };
@@ -31935,7 +32024,7 @@ var ChatWidget = function (props) {
         set$1("visible", newVisible);
     }, [staticMode]);
     React$1.useEffect(function () {
-        var _a;
+        var _a, _b;
         document.addEventListener("keydown", function (event) {
             var body = document.getElementsByTagName("body")[0];
             body.tabIndex = -1;
@@ -31943,7 +32032,8 @@ var ChatWidget = function (props) {
                 body.focus();
             }
         });
-        if (checkSessionExpiration(chatState === null || chatState === void 0 ? void 0 : chatState.sessionExpiration, (_a = chatState === null || chatState === void 0 ? void 0 : chatState.chats[chatState.chats.length - 1]) === null || _a === void 0 ? void 0 : _a.timestamp, chatState === null || chatState === void 0 ? void 0 : chatState.lastTimestamp)) {
+        if (checkSessionExpiration((chatState === null || chatState === void 0 ? void 0 : chatState.sessionExpiration) || ((_a = props.config) === null || _a === void 0 ? void 0 : _a.sessionExpiration), (_b = chatState === null || chatState === void 0 ? void 0 : chatState.chats[chatState.chats.length - 1]) === null || _b === void 0 ? void 0 : _b.timestamp, chatState === null || chatState === void 0 ? void 0 : chatState.lastTimestamp)) {
+            set$1("sessionId", ""); // force new session
             innerDispatch(reset());
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -32062,10 +32152,13 @@ var ChatWidget = function (props) {
         }
     }, [connectionStatus, onConnectionStatusChange]);
     useExternalScript((_m = props.config) === null || _m === void 0 ? void 0 : _m.middlewareUrl);
+    // This is a pseudo agent. It represent's the widget (shown in the header avatar for instance)
+    var widgetAgent = ((_o = chatState.agents["agent:robot"]) === null || _o === void 0 ? void 0 : _o.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: ((_o = chatState.agents["agent:robot"]) === null || _o === void 0 ? void 0 : _o.user) || (config === null || config === void 0 ? void 0 : config.agent), 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(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: (_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" })),
@@ -32204,9 +32297,11 @@ function joinMessages(messages, msg) {
 }
 
 function memberJoin(state, detail) {
-    if (state.chats.length === 0) {
-        set$1("sessionId", "");
-    }
+    // TODO: Why?
+    // if (state.chats.length === 0) {
+    // console.log(`######### No chats in member join action`);
+    // set("sessionId", "");
+    // }
     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 });
@@ -32333,8 +32428,9 @@ function update(state, action) {
     }
 }
 function mapSynthetic(state, action) {
+    var _a;
     if (state === void 0) { state = DEFAULT_STATE; }
-    var newTimestamp = state.lastTimestamp + 1;
+    var newTimestamp = (((_a = action.detail) === null || _a === void 0 ? void 0 : _a.timestamp) || +new Date()) + 1; // state.lastTimestamp + 1;
     switch (action.detail.type) {
         case "write_msg":
             return {