@xapp/chat-widget 1.57.2 → 1.57.4

package/dist/index.js

@@ -262,6 +262,33 @@ var RetryRequest = /** @class */ (function () {
     return RetryRequest;
 }());
 
+/**
+ * Get a display date of a specific point in time based on the current time.
+ *
+ * @param date
+ * @returns
+ */
+function getTimeAgo(date) {
+    var now = new Date();
+    var diffInSeconds = Math.floor((now.valueOf() - date.valueOf()) / 1000);
+    if (diffInSeconds < 1) {
+        return "now";
+    }
+    if (diffInSeconds < 60) {
+        return "".concat(diffInSeconds, " seconds ago");
+    }
+    var diffInMinutes = Math.floor(diffInSeconds / 60);
+    if (diffInMinutes < 60) {
+        return "".concat(diffInMinutes, " minutes ago");
+    }
+    var diffInHours = Math.floor(diffInMinutes / 60);
+    if (diffInHours < 24) {
+        return "".concat(diffInHours, " hours ago");
+    }
+    // If more than 24 hours ago, return the full date and time
+    return date.toLocaleString();
+}
+
 var EMAIL_REGEX = "^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$";
 // Returns current timestamp
 function getCurrentDateString() {
@@ -321,6 +348,10 @@ var Avatar = function (props) {
     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));
 };
+/**
+ * Generates an SVG based on the
+ * @returns
+ */
 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" })));
@@ -2614,6 +2645,8 @@ var StentorRouterChat = /** @class */ (function () {
             log("Connection update received. Session created: ".concat(data.sessionCreated, " Error: ").concat(data.errorMessage || ""));
             if (data.sessionCreated) {
                 _this.sessionCreated = true;
+                // This is overkill. But if we are stuck in pending this can help.
+                _this.setConnectionStatus("online");
             }
             else {
                 // Shut down
@@ -2659,6 +2692,7 @@ var StentorRouterChat = /** @class */ (function () {
                     user: {
                         displayName: sender.displayName || sender.email || sender.userId,
                         nick: senderToNick(sender),
+                        avatarPath: sender.avatarPath
                     },
                     msg: message.msg,
                     timestamp: ts || new Date().getTime(),
@@ -2666,14 +2700,15 @@ var StentorRouterChat = /** @class */ (function () {
             });
         };
         this.handlers["user joined"] = function (_data, sender, ts) {
+            var _a, _b;
             _this.dispatch({
                 type: "chat",
                 detail: {
                     type: "chat.memberjoin",
                     user: {
+                        avatarPath: (_b = (_a = _this.options) === null || _a === void 0 ? void 0 : _a.bot) === null || _b === void 0 ? void 0 : _b.avatarPath,
                         displayName: sender.displayName,
                         nick: senderToNick(sender),
-                        avatarPath: sender.avatarPath,
                     },
                     timestamp: ts || new Date().getTime(),
                 },
@@ -2774,8 +2809,9 @@ var StentorRouterChat = /** @class */ (function () {
         this.ws = new WebSocket(url.toString());
         this.ws.onerror = function (ev) {
             var _a;
-            log("Error in WS connection. Type: ".concat(!ev ? "?" : ev.type, " Ready State: ").concat((_a = _this.ws) === null || _a === void 0 ? void 0 : _a.readyState));
-            _this.setConnectionStatus("pending");
+            err("Error in WS connection. Url: ".concat(url.toString(), " Type: ").concat(!ev ? "?" : ev.type, " Ready State: ").concat((_a = _this.ws) === null || _a === void 0 ? void 0 : _a.readyState));
+            // TODO: Experimental. Let's not set it to "pending". We may have a timing issue and miss the "online"
+            // this.setConnectionStatus("pending");
         };
         this.ws.onmessage = function (me) {
             log("ROUTER says: ".concat(me.data));
@@ -2785,7 +2821,7 @@ var StentorRouterChat = /** @class */ (function () {
                 _this.handlers[message.event](message.data, message.sender, message.timeMs);
             }
             else {
-                log("Unknown router message event: ".concat(message.event));
+                err("Unknown router message event: ".concat(message.event));
             }
         };
         return this.ws;
@@ -2820,7 +2856,7 @@ var StentorRouterChat = /** @class */ (function () {
                                 _this.ws.send(payloadData);
                             })
                                 .catch(function (t) {
-                                console.log("Connection wait timed out in ".concat(t, " ms"));
+                                err("Connection wait timed out in ".concat(t, " ms"));
                             })];
                     case 1:
                         _a.sent();
@@ -2893,7 +2929,7 @@ var StentorRouterChat = /** @class */ (function () {
                             _this.postMessage(serviceRequest);
                         })
                             .catch(function (t) {
-                            console.log("Session creation wait timed out in ".concat(t, " ms"));
+                            err("Session creation wait timed out in ".concat(t, " ms"));
                         })];
                     case 1:
                         _a.sent();
@@ -7096,7 +7132,7 @@ var ListMiddlewareWidget = function (props) {
     var handleExecute = useExecuteActionCallback();
     var handleButton = useButtonCallback();
     var user = ctx.user;
-    return (React__default$1["default"].createElement(ChatMessagePart, { showAvatar: true, user: user },
+    return (React__default$1["default"].createElement(ChatMessagePart, { showAvatar: false, user: user },
         list.type === "CAROUSEL" && React__default$1["default"].createElement("div", { className: "chat-msg chat-msg--fullwidth chat-msg--no-ava" },
             React__default$1["default"].createElement(Carousel, { list: list, onExecute: handleExecute, onButtonClick: handleButton, onOpenUrl: ctx.openUrl })),
         list.type === "LIST" && React__default$1["default"].createElement("div", { className: "chat-msg chat-msg--expand" },
@@ -7317,12 +7353,15 @@ var ChatPermissionMessage = function (props) {
 };
 
 var ChatTextMessage = function (props) {
+    var message = props.message;
+    var date = new Date(message.timestamp);
+    var time = date.getHours() + ':' + date.getMinutes();
     var agentMessage = isAgent(props.message.user.nick);
     return (React__default$1["default"].createElement("div", { className: "chat-msg" },
         React__default$1["default"].createElement("div", { className: "chat-text-container" },
             React__default$1["default"].createElement(ChatMessageBubble, { owner: agentMessage ? "others" : "mine", hasTail: agentMessage && !props.sibling },
-                React__default$1["default"].createElement("span", { className: "message-sr-only" }, "at " + props.time + (agentMessage ? " the bot said" : " the user said")),
-                React__default$1["default"].createElement("span", null, props.message.msg.text)))));
+                React__default$1["default"].createElement("span", { className: "message-sr-only" }, "at " + time + (agentMessage ? " the bot said" : " the user said")),
+                React__default$1["default"].createElement("span", null, message.msg.text)))));
 };
 
 function getClassName(msg) {
@@ -7351,25 +7390,32 @@ var ChatMessage = function (props) {
                 return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
                     msg.text &&
                         React__default$1["default"].createElement(ChatMessagePart, { showAvatar: avaKey === "text", user: user },
-                            React__default$1["default"].createElement(ChatTextMessage, { message: props.message, sibling: props.sibling, time: props.time })),
+                            React__default$1["default"].createElement(ChatTextMessage, { message: props.message, sibling: props.sibling })),
                     msg.html &&
                         React__default$1["default"].createElement(ChatMessagePart, { showAvatar: avaKey === "html", user: user },
-                            React__default$1["default"].createElement(ChatMarkdownMessage, { message: props.message, sibling: props.sibling, time: props.time, onOpenUrl: (_a = props.middlewareContext) === null || _a === void 0 ? void 0 : _a.openUrl })),
+                            React__default$1["default"].createElement(ChatMarkdownMessage, { message: props.message, sibling: props.sibling, onOpenUrl: (_a = props.middlewareContext) === null || _a === void 0 ? void 0 : _a.openUrl })),
                     msg.displays && middleware && msg.displays.map(function (display, index) {
                         var Middleware = middleware;
-                        return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
-                            React__default$1["default"].createElement("span", { className: "message-sr-only" }, "at " + props.time + " the bot said"),
-                            React__default$1["default"].createElement(Middleware, { key: index, msg: display, ctx: props.middlewareContext })));
+                        return (React__default$1["default"].createElement(Middleware, { key: index, msg: display, ctx: props.middlewareContext }));
                     }),
                     msg.permissionRequest && ctx &&
                         React__default$1["default"].createElement(ChatMessagePart, { showAvatar: avaKey === "permissionRequest", user: user },
-                            React__default$1["default"].createElement(ChatPermissionMessage, { message: props.message, sibling: props.sibling, ctx: ctx, time: props.time }))));
+                            React__default$1["default"].createElement(ChatPermissionMessage, { message: props.message, sibling: props.sibling, ctx: ctx }))));
         }
         return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null));
     }
+    function renderTimestamp() {
+        var timestamp = props.message.timestamp;
+        var ts = new Date(timestamp);
+        var timeAgo = getTimeAgo(ts);
+        return (React__default$1["default"].createElement("div", { className: "chat-msg-timestamp ".concat(isAgent(props.message.user.nick) ? "agent" : "visitor") },
+            React__default$1["default"].createElement("span", null, timeAgo)));
+    }
     // empty
     return (React__default$1["default"].createElement("div", { className: "chat-msg-container-wrapper ".concat(isAgent(props.message.user.nick) ? "agent" : "visitor", " ").concat(props.sibling ? "sibling" : "") },
-        React__default$1["default"].createElement("div", { className: "chat-msg-container ".concat(getClassName(props.message)) }, renderByType())));
+        React__default$1["default"].createElement("div", { className: "chat-msg-container ".concat(getClassName(props.message)) },
+            renderByType(),
+            renderTimestamp())));
 };
 
 /**
@@ -30309,7 +30355,7 @@ var MessageList = function (props) {
         switch (msg.type) {
             case "chat.file":
             case "chat.msg":
-                return (React__default$1["default"].createElement(ChatMessage, { key: msg.type + msg.timestamp, message: msg, sibling: sibling, agent: user, time: time, messageMiddleware: props.messageMiddleware, middlewareContext: ctxCache.resolve(user) }));
+                return (React__default$1["default"].createElement(ChatMessage, { key: msg.type + msg.timestamp, message: msg, sibling: sibling, agent: user, messageMiddleware: props.messageMiddleware, middlewareContext: ctxCache.resolve(user) }));
             case "chat.failureMsg":
                 return (React__default$1["default"].createElement(FailureMessage, __assign({ key: msg.type + msg.timestamp, agents: props.agents, time: time }, msg.failureMsg)));
             case "chat.memberjoin":