@xapp/chat-widget 1.47.2 → 1.49.1

package/dist/index.js

@@ -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) {
@@ -7110,19 +7110,111 @@ var ChatChipsContainer = function (_) {
         React__default$1["default"].createElement(ChatChips, { options: chips, onOptionClick: optionOnChange })));
 };
 
+var lib = {};
+
+var ChannelData = {};
+
+Object.defineProperty(ChannelData, "__esModule", { value: true });
+
+var Constants = {};
+
+Object.defineProperty(Constants, "__esModule", { value: true });
+Constants.CHAT_WIDGET_CHANNEL = void 0;
+Constants.CHAT_WIDGET_CHANNEL = "chat-widget";
+
+var Types = {};
+
+/*! Copyright (c) 2021, XAPPmedia */
+Object.defineProperty(Types, "__esModule", { value: true });
+
+var UserInfo = {};
+
+Object.defineProperty(UserInfo, "__esModule", { value: true });
+
+var WidgetEnv = {};
+
+Object.defineProperty(WidgetEnv, "__esModule", { value: true });
+
+var WidgetTheme = {};
+
+Object.defineProperty(WidgetTheme, "__esModule", { value: true });
+
+var guards = {};
+
+Object.defineProperty(guards, "__esModule", { value: true });
+guards.isStandardMenuItem = guards.isStaticTextMenuItem = guards.isStaticImageMenuItem = void 0;
+function isStaticImageMenuItem(item) {
+    return !!item && !!item.imageUrl;
+}
+guards.isStaticImageMenuItem = isStaticImageMenuItem;
+function isStaticTextMenuItem(item) {
+    return !!item && !!item.body;
+}
+guards.isStaticTextMenuItem = isStaticTextMenuItem;
+function isStandardMenuItem(item) {
+    return !!item && !!item.label;
+}
+guards.isStandardMenuItem = isStandardMenuItem;
+
+(function (exports) {
+	var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+	    if (k2 === undefined) k2 = k;
+	    var desc = Object.getOwnPropertyDescriptor(m, k);
+	    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+	      desc = { enumerable: true, get: function() { return m[k]; } };
+	    }
+	    Object.defineProperty(o, k2, desc);
+	}) : (function(o, m, k, k2) {
+	    if (k2 === undefined) k2 = k;
+	    o[k2] = m[k];
+	}));
+	var __exportStar = (commonjsGlobal && commonjsGlobal.__exportStar) || function(m, exports) {
+	    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+	};
+	Object.defineProperty(exports, "__esModule", { value: true });
+	/*! Copyright (c) 2021, XAPPmedia */
+	__exportStar(ChannelData, exports);
+	__exportStar(Constants, exports);
+	__exportStar(Types, exports);
+	__exportStar(UserInfo, exports);
+	__exportStar(WidgetEnv, exports);
+	__exportStar(WidgetTheme, exports);
+	__exportStar(guards, exports);
+	
+} (lib));
+
 var ChatMenuItem = function (props) {
     function handleClick() {
         if (props.onClick) {
             props.onClick(props.label);
         }
     }
-    return (React__default$1["default"].createElement("button", { type: "button", className: "chat-menu-item", onClick: handleClick }, props.label));
+    var content = props.subtitle ? (React__default$1["default"].createElement("span", null,
+        React__default$1["default"].createElement("div", null, props.label),
+        React__default$1["default"].createElement("div", { className: "chat-menu-item--subtitle" }, props.subtitle))) : (React__default$1["default"].createElement("span", null, props.label));
+    return (React__default$1["default"].createElement("button", { type: "button", className: "chat-menu-item", onClick: handleClick }, content));
 };
 
 var ChatMenu = function (props) {
     var items = props.items;
-    return (React__default$1["default"].createElement("div", { className: "chat-menu ".concat(props.opened ? "chat-menu--opened" : "chat-menu--closed") }, items.map(function (label, i) {
-        return React__default$1["default"].createElement(ChatMenuItem, { key: i, onClick: props.onItemClick, label: label });
+    return (React__default$1["default"].createElement("div", { className: "chat-menu ".concat(props.opened ? "chat-menu--opened" : "chat-menu--closed") }, items.map(function (item, i) {
+        if (lib.isStandardMenuItem(item)) {
+            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", { 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", { 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))));
+        }
+        return React__default$1["default"].createElement("p", null, "Unknown");
     })));
 };
 
@@ -7574,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 })))));
 };
 
@@ -7581,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";
@@ -7647,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 }))));
@@ -7657,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)))));
 };
 
@@ -7684,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));
     }
@@ -7919,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) {
@@ -7971,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" },
@@ -8024,7 +8122,7 @@ var ChatFooter = function (props) {
     var contexts = reactRedux.useSelector(function (state) { return state.activeContexts; });
     var suggestions = useSuggestions(suggestionSearch, contexts);
     var menuItemsRaw = (_b = (_a = useWidgetEnv()) === null || _a === void 0 ? void 0 : _a.menu) === null || _b === void 0 ? void 0 : _b.items;
-    var menuItems = React$1.useMemo(function () { return menuItemsRaw ? menuItemsRaw.map(function (item) { return item.label; }) : []; }, [menuItemsRaw]);
+    var menuItems = React$1.useMemo(function () { return menuItemsRaw ? menuItemsRaw : []; }, [menuItemsRaw]);
     var branding = (_e = (_d = (_c = useWidgetEnv()) === null || _c === void 0 ? void 0 : _c.footer) === null || _d === void 0 ? void 0 : _d.branding) === null || _e === void 0 ? void 0 : _e.text;
     var brandingEnabled = (_h = (_g = (_f = useWidgetEnv()) === null || _f === void 0 ? void 0 : _f.footer) === null || _g === void 0 ? void 0 : _g.branding) === null || _h === void 0 ? void 0 : _h.enabled;
     var _m = React$1.useState({
@@ -8158,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 = {};
@@ -30277,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 () {
@@ -30315,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)))))));
     })));
 };
@@ -30383,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) {
@@ -30401,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
@@ -30413,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 = {
@@ -30449,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) {
@@ -30513,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.
      *
@@ -30525,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))));
         }
     }
     /**
@@ -30839,7 +30949,7 @@ function getButtonStyle(style) {
     });
 }
 function getMenuItemStyle(style) {
-    return union(getTextStyle(style === null || style === void 0 ? void 0 : style.text), 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)));
@@ -31020,6 +31130,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;