@xapp/chat-widget 1.48.0 → 1.49.2

package/dist/index.js

@@ -1642,7 +1642,7 @@ var ChatImage = function (props) {
         return (React__default$1["default"].createElement("div", { className: "chat-card-img" }, content));
     }
     else {
-        return (React__default$1["default"].createElement("a", { href: props.imageActionUrl, target: "_blank", rel: "noopener noreferrer", className: "chat-card-img" }, content));
+        return (React__default$1["default"].createElement("a", { href: props.imageActionUrl, "aria-label": "read more", target: "_blank", rel: "noopener noreferrer", className: "chat-card-img" }, content));
     }
 };
 
@@ -1894,12 +1894,12 @@ var CtaBubbleContainer = function (props) {
 };
 
 var ChatButton = function (props) {
-    return (React__default$1["default"].createElement("div", { className: "chat-button ".concat(props.addClass) },
-        React__default$1["default"].createElement("div", { id: "xapp-widget-button", className: "chat-button__btn", onClick: props.onClick },
+    return (React__default$1["default"].createElement("button", { className: "chat-button ".concat(props.addClass), onClick: props.onClick },
+        React__default$1["default"].createElement("div", { id: "xapp-widget-button", className: "chat-button__btn" },
             React__default$1["default"].createElement("svg", { width: "22", height: "22", viewBox: "0 0 22 22" },
                 React__default$1["default"].createElement("path", { d: "M13 22l-4-6H2c-1.11-.043-2-.935-2-2V2C0 .89.89 0 2 0h18c1.11 0 2 .892 2 2v12c0 1.067-.89 1.957-2 2h-3l-4 6zm3-8h4c-.005.3-.01-12 0-12-.01.004-18 .006-18 0 .005.006 0 12 0 12h8l3 5 3-5z", fill: "#FFF", fillRule: "evenodd" }))),
         props.config && props.config.message && (React__default$1["default"].createElement("div", { className: "chat-button__cta" },
-            React__default$1["default"].createElement(CtaBubbleContainer, { timeout: props.config.timeout, visible: !props.visible, onClick: props.onClick }, props.config.message)))));
+            React__default$1["default"].createElement(CtaBubbleContainer, { timeout: props.config.timeout, visible: !props.visible }, props.config.message)))));
 };
 
 var ChatCard = function (props) {
@@ -7202,14 +7202,14 @@ var ChatMenu = function (props) {
             return React__default$1["default"].createElement(ChatMenuItem, { key: i, onClick: props.onItemClick, label: item.label, subtitle: item.subtitle });
         }
         else if (lib.isStaticImageMenuItem(item)) {
-            return (React__default$1["default"].createElement("div", { className: "chat-menu-item-static" },
+            return (React__default$1["default"].createElement("div", { key: i, className: "chat-menu-item-static" },
                 React__default$1["default"].createElement("img", { style: {
                         maxHeight: "100%",
                         maxWidth: "auto"
                     }, src: item.imageUrl, alt: "Menu Item" })));
         }
         else if (lib.isStaticTextMenuItem(item)) {
-            return (React__default$1["default"].createElement("div", { className: "chat-menu-item-static" },
+            return (React__default$1["default"].createElement("div", { key: i, className: "chat-menu-item-static" },
                 React__default$1["default"].createElement("div", null,
                     React__default$1["default"].createElement("div", null, item.title),
                     React__default$1["default"].createElement("div", { className: "chat-menu-item-static--body" }, item.body))));
@@ -7376,7 +7376,7 @@ var ExternalLink = function (props) {
     var handleClick = React$1.useCallback(function (ev) {
         ev.preventDefault();
     }, []);
-    return (React__default$1["default"].createElement("a", { href: url, target: "_blank", rel: "noreferrer", className: props.className, onClick: handleClick }, getSvg()));
+    return (React__default$1["default"].createElement("a", { href: url, "aria-label": "read more", target: "_blank", rel: "noreferrer", className: props.className, onClick: handleClick }, getSvg()));
 };
 
 function firstIndex(val, patterns) {
@@ -7489,7 +7489,7 @@ var SmartLink = function (props) {
     var handleClick = React$1.useCallback(function (ev) {
         ev.preventDefault();
     }, []);
-    return (React__default$1["default"].createElement("a", { href: url, target: "_blank", rel: "noreferrer", className: className, onClick: handleClick }, reduceLink(url, 40)));
+    return (React__default$1["default"].createElement("a", { href: url, "aria-label": "read more", target: "_blank", rel: "noreferrer", className: className, onClick: handleClick }, reduceLink(url, 40)));
 };
 
 var ListItem = function (props) {
@@ -7666,6 +7666,7 @@ var ChatMarkdownMessage = function (props) {
     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("div", { ref: ref })))));
 };
 
@@ -7673,6 +7674,7 @@ var ChatPermissionMessage = function (props) {
     var message = props.message, ctx = props.ctx;
     var user = ctx.user;
     var permissionRequest = message.msg.permissionRequest;
+    var agentMessage = isAgent(props.message.user.nick);
     var author = message.user;
     var allowLabel = "Allow";
     var denyLabel = "Deny";
@@ -7739,6 +7741,7 @@ var ChatPermissionMessage = function (props) {
         return React__default$1["default"].createElement(React__default$1["default"].Fragment, null);
     }
     return (React__default$1["default"].createElement("div", { className: "chat-msg" },
+        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("div", { className: "buttons-container" },
             React__default$1["default"].createElement(ActionButton, { label: allowLabel, addClass: "button", onClick: handleAllow }),
             React__default$1["default"].createElement(ActionButton, { label: denyLabel, addClass: "button", onClick: handleDeny }))));
@@ -7749,6 +7752,7 @@ var ChatTextMessage = function (props) {
     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)))));
 };
 
@@ -7776,17 +7780,19 @@ 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 })),
+                            React__default$1["default"].createElement(ChatTextMessage, { message: props.message, sibling: props.sibling, time: props.time })),
                     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, onOpenUrl: (_a = props.middlewareContext) === null || _a === void 0 ? void 0 : _a.openUrl })),
+                            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 })),
                     msg.displays && middleware && msg.displays.map(function (display, index) {
                         var Middleware = middleware;
-                        return React__default$1["default"].createElement(Middleware, { key: index, msg: display, ctx: props.middlewareContext });
+                        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 })));
                     }),
                     msg.permissionRequest &&
                         React__default$1["default"].createElement(ChatMessagePart, { showAvatar: avaKey === "permissionRequest", user: user },
-                            React__default$1["default"].createElement(ChatPermissionMessage, { message: props.message, sibling: props.sibling, ctx: props.middlewareContext }))));
+                            React__default$1["default"].createElement(ChatPermissionMessage, { message: props.message, sibling: props.sibling, ctx: props.middlewareContext, time: props.time }))));
         }
         return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null));
     }
@@ -7986,7 +7992,7 @@ var ChatBranding = function (props) {
 };
 
 var DrawerBars = function (props) {
-    return (React__default$1["default"].createElement("div", { className: "drawer-bars", onClick: props.onToggle },
+    return (React__default$1["default"].createElement("button", { className: "drawer-bars", onClick: props.onToggle },
         React__default$1["default"].createElement("div", { className: "drawer-bar bar1" }),
         React__default$1["default"].createElement("div", { className: "drawer-bar bar2" })));
 };
@@ -8011,7 +8017,7 @@ var SendIcon = function () {
 
 var SendButton = function (props) {
     return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null, !props.sendButtonIcon ? (React__default$1["default"].createElement(IconButton_1, { className: "xappw-send-button ".concat(props.className || ""), onClick: props.onClick, icon: SendIcon })) : (React__default$1["default"].createElement("span", { className: "xappw-custom-send-button", onClick: props.onClick },
-        React__default$1["default"].createElement("img", { src: props.sendButtonIcon, alt: "", draggable: false })))));
+        React__default$1["default"].createElement("img", { src: props.sendButtonIcon, alt: "Send button", draggable: false })))));
 };
 
 var Input = function (props) {
@@ -8063,7 +8069,7 @@ 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" : ""), 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", className: "xappw-input", placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Type your question here...", 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...", onInput: onChange, onChange: onChange, onKeyDown: handleKeyDown, 
                 // onFocus={onFocus}
                 value: value, spellCheck: true }),
             React__default$1["default"].createElement("div", { className: "xappw-input-form__buttons" },
@@ -8155,7 +8161,7 @@ var ChatFooter = function (props) {
     return (React__default$1["default"].createElement("div", { className: "chat-footer" },
         menuItems.length ?
             React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
-                React__default$1["default"].createElement(ChatMenu, { opened: drawer, onItemClick: handleMenuItem, items: menuItems }),
+                drawer && React__default$1["default"].createElement(ChatMenu, { opened: drawer, onItemClick: handleMenuItem, items: menuItems }),
                 React__default$1["default"].createElement("div", { className: "chat-footer__menu-icon" },
                     React__default$1["default"].createElement(DrawerBars, { onToggle: toggleDrawer }))) : React__default$1["default"].createElement(React__default$1["default"].Fragment, null),
         ((_j = suggestions.suggestions) === null || _j === void 0 ? void 0 : _j.length) > 0 && React__default$1["default"].createElement(Suggestions, { className: "xappw-chat-footer__suggestions", data: suggestions.suggestions, index: suggestions.index, onItemClick: handleItemClick, onItemUse: handleItemUse }),
@@ -8250,7 +8256,9 @@ var ChatRatingContainer = function (props) {
     var handleRate = React$1.useCallback(function (rating) {
         dispatch(sendChatRating(rating));
     }, [dispatch]);
-    return React__default$1["default"].createElement(ChatRating, { agent: props.agent, hasRating: props.hasRating, shouldDisplay: props.shouldDisplay, onRate: handleRate });
+    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 + " system message"),
+        React__default$1["default"].createElement(ChatRating, { agent: props.agent, hasRating: props.hasRating, shouldDisplay: props.shouldDisplay, onRate: handleRate })));
 };
 
 var dateFns = {};
@@ -30369,7 +30377,7 @@ function compileSlotValues(responseOutput, slots, replaceWhenUndefined) {
 }
 
 var FailureMessage = function (props) {
-    var agents = props.agents, text = props.text, delay = props.delay;
+    var agents = props.agents, text = props.text, delay = props.delay, time = props.time;
     var _a = React$1.useState(delay), countdown = _a[0], setCountdown = _a[1];
     var agent_names = Object.values(agents).filter(function (agent) { return agent.requestFailed; });
     React$1.useEffect(function () {
@@ -30407,6 +30415,7 @@ var FailureMessage = function (props) {
                 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("span", { className: "message-sr-only" }, "at " + time + " the bot said"),
                             React__default$1["default"].createElement("span", null, failureMessage)))))));
     })));
 };
@@ -30475,12 +30484,14 @@ var OfflineForm = function (props) {
     return React__default$1["default"].createElement(MessageForm, { title: "Offline message card title", onSubmit: props.onSubmit });
 };
 
-var OfflineFormContainer = function (_) {
+var OfflineFormContainer = function (props) {
     var dispatch = useChatServerDispatch();
     var handleSubmit = React$1.useCallback(function (data) {
         dispatch(sendOfflineMsg(data));
     }, [dispatch]);
-    return React__default$1["default"].createElement(OfflineForm, { onSubmit: handleSubmit });
+    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 + " system message"),
+        React__default$1["default"].createElement(OfflineForm, { onSubmit: handleSubmit })));
 };
 
 var PrechatForm = function (props) {
@@ -30493,7 +30504,7 @@ var PrechatForm = function (props) {
     return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null, !sent && React__default$1["default"].createElement(MessageForm, { title: "Introduce yourself!", onSubmit: handleSubmit })));
 };
 
-var PrechatFormContainer = function (_) {
+var PrechatFormContainer = function (props) {
     var dispatch = useChatServerDispatch();
     var handleSubmit = React$1.useCallback(function (data) {
         // Don't send empty messages
@@ -30505,7 +30516,9 @@ var PrechatFormContainer = function (_) {
         }));
         dispatch(executeAction(data.message));
     }, [dispatch]);
-    return React__default$1["default"].createElement(PrechatForm, { onSubmit: handleSubmit });
+    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 + " system message"),
+        React__default$1["default"].createElement(PrechatForm, { onSubmit: handleSubmit })));
 };
 
 var defaultProps$1 = {
@@ -30541,6 +30554,7 @@ function getMessageByType(msg) {
 }
 var SystemMessage = function (props) {
     return (React__default$1["default"].createElement("div", { className: "system-msg-container" },
+        React__default$1["default"].createElement("span", { className: "message-sr-only" }, "at " + props.time + " system message"),
         React__default$1["default"].createElement("span", { className: "system-msg" }, getMessageByType(props.message))));
 };
 function convertToSentenceCase(s) {
@@ -30605,6 +30619,8 @@ var MessageList = function (props) {
         write: handleWrite,
         openUrl: onOpenUrl
     }); }, [handleSend, handleWrite, onOpenUrl]);
+    var date = new Date();
+    var time = date.getHours() + ':' + date.getMinutes();
     /**
      * Render the message based on widget state or message type. offline and pre chat are pseudo messages.
      *
@@ -30617,24 +30633,26 @@ 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, 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, time: time, 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 }, msg.failureMsg)));
+                return (React__default$1["default"].createElement(FailureMessage, __assign({ key: msg.type + msg.timestamp, agents: props.agents, time: time }, msg.failureMsg)));
             case "chat.memberjoin":
             case "chat.memberleave":
             case "chat.rating":
             case "chat.typing":
-                return (React__default$1["default"].createElement(SystemMessage, { key: msg.type + msg.timestamp, message: msg }));
+                return (React__default$1["default"].createElement(SystemMessage, { key: msg.type + msg.timestamp, time: time, message: msg }));
             case "chat.request.rating":
-                return (React__default$1["default"].createElement(ChatRatingContainer, { key: msg.type + msg.timestamp, agent: user, hasRating: props.hasRating, shouldDisplay: msg.timestamp === props.lastRatingRequestTimestamp }));
+                return (React__default$1["default"].createElement(ChatRatingContainer, { key: msg.type + msg.timestamp, agent: user, hasRating: props.hasRating, time: time, shouldDisplay: msg.timestamp === props.lastRatingRequestTimestamp }));
             case "chat.offline":
-                return React__default$1["default"].createElement(OfflineFormContainer, { key: "offline-".concat(msg.timestamp) });
+                return React__default$1["default"].createElement(OfflineFormContainer, { key: "offline-".concat(msg.timestamp), time: time });
             case "chat.prechat":
-                return React__default$1["default"].createElement(PrechatFormContainer, { key: "prechat" });
+                return React__default$1["default"].createElement(PrechatFormContainer, { key: "prechat", time: time });
             default:
-                return React__default$1["default"].createElement("div", { key: +new Date() },
-                    "Unhandled message: ",
-                    JSON.stringify(msg));
+                return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
+                    React__default$1["default"].createElement("span", { className: "message-sr-only" }, "at " + time + " system message"),
+                    React__default$1["default"].createElement("div", { key: +new Date() },
+                        "Unhandled message: ",
+                        JSON.stringify(msg))));
         }
     }
     /**
@@ -30671,15 +30689,15 @@ var ServerOffline = function () {
 };
 
 var CancelButton = function (props) {
-    return React__default$1["default"].createElement("div", { id: "xapp-widget-close", className: "cancel-button", onClick: props.onClick });
+    return React__default$1["default"].createElement("button", { id: "xapp-widget-close", className: "cancel-button", onClick: props.onClick });
 };
 
 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 }));
+    return (React__default$1["default"].createElement("button", { 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 }));
+    return (React__default$1["default"].createElement("button", { id: "xapp-widget-refresh", className: "refresh-button ".concat(props.showInRight ? "positionRight" : props.showInLeft ? "positionLeft" : ""), onClick: props.onClick }));
 };
 
 var DEFAULT_STATUS_CONFIG = {
@@ -30931,7 +30949,7 @@ function getButtonStyle(style) {
     });
 }
 function getMenuItemStyle(style) {
-    return union(getTextStyle(style === null || style === void 0 ? void 0 : style.text), withPrefix("subtitle-", getTextStyle(style.subtitle)), getBorderStyle(style.border), getBackgroundStyle(style === null || style === void 0 ? void 0 : style.background), single("height", style === null || style === void 0 ? void 0 : style.height));
+    return union(getTextStyle(style === null || style === void 0 ? void 0 : style.text), withPrefix("subtitle-", getTextStyle(style === null || style === void 0 ? void 0 : style.subtitle)), getBorderStyle(style === null || style === void 0 ? void 0 : style.border), getBackgroundStyle(style === null || style === void 0 ? void 0 : style.background), single("height", style === null || style === void 0 ? void 0 : style.height));
 }
 function getMenuStyle(style) {
     return union(withPrefix("item-", getMenuItemStyle(style === null || style === void 0 ? void 0 : style.item)));
@@ -31042,6 +31060,13 @@ var ChatWidget = function (props) {
     }, [staticMode]);
     React$1.useEffect(function () {
         var _a;
+        document.addEventListener('keydown', function (event) {
+            var body = document.getElementsByTagName("body")[0];
+            body.tabIndex = -1;
+            if (event.key === "Escape") {
+                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)) {
             innerDispatch(reset());
         }
@@ -31112,6 +31137,9 @@ var ChatWidget = function (props) {
     function chatButtonOnClick() {
         set$1("opened", true);
         setVisible(true);
+        setTimeout(function () {
+            document.getElementById("chatWidgetInput").focus();
+        }, 100);
     }
     var isOffline = chatState.accountStatus === "offline" && !chatState.isChatting;
     var messages = chatState && chatState.chats;