@xapp/chat-widget 1.49.2 → 1.49.5

package/dist/index.js

@@ -1696,7 +1696,7 @@ function getLeftArrowSvg() {
         React__default$1["default"].createElement("path", { d: "M 2.5 -15 L -2.5 0 L 2.5 15", stroke: "currentColor", strokeLinecap: "square", strokeWidth: "4px", fill: "none" })));
 }
 var ChevronLeft = function (props) {
-    return (React__default$1["default"].createElement("div", { onClick: props.onClick, className: "chevron" }, getLeftArrowSvg()));
+    return (React__default$1["default"].createElement("button", { onClick: props.onClick, className: "chevron" }, getLeftArrowSvg()));
 };
 
 function getRightArrowSvg() {
@@ -1704,7 +1704,7 @@ function getRightArrowSvg() {
         React__default$1["default"].createElement("path", { d: "M -2.5 -15 L 2.5 0 L -2.5 15", stroke: "currentColor", strokeLinecap: "square", strokeWidth: "4px", fill: "none" })));
 }
 var ChevronRight = function (props) {
-    return (React__default$1["default"].createElement("div", { onClick: props.onClick, className: "chevron" }, getRightArrowSvg()));
+    return (React__default$1["default"].createElement("button", { onClick: props.onClick, className: "chevron" }, getRightArrowSvg()));
 };
 
 var Carousel = function (props) {
@@ -1894,11 +1894,11 @@ var CtaBubbleContainer = function (props) {
 };
 
 var ChatButton = function (props) {
-    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" },
+    return (React__default$1["default"].createElement("button", { className: "xapp-chat-button ".concat(props.addClass), onClick: props.onClick },
+        React__default$1["default"].createElement("div", { id: "xapp-widget-button", className: "xapp-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" },
+        props.config && props.config.message && (React__default$1["default"].createElement("div", { className: "xapp-chat-button__cta" },
             React__default$1["default"].createElement(CtaBubbleContainer, { timeout: props.config.timeout, visible: !props.visible }, props.config.message)))));
 };
 
@@ -2229,7 +2229,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy$1(React);
 var IconButton = function (props) {
     var type = props.type || "button";
     var Icon = props.icon;
-    return (React__default["default"].createElement("button", { type: type, className: "xapp-search-icon-button ".concat(props.className || ""), onClick: props.onClick },
+    return (React__default["default"].createElement("button", { type: type, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "xapp-search-icon-button ".concat(props.className || ""), onClick: props.onClick },
         React__default["default"].createElement("div", { className: "xapp-search-icon-button__content" },
             React__default["default"].createElement(Icon, null))));
 };
@@ -2433,7 +2433,7 @@ var RichText = function (props) {
 };
 
 var RichInput = function (props) {
-    var id = props.id, value = props.value, type = props.type, autoFocus = props.autoFocus, spellCheck = props.spellCheck, onChange = props.onChange, onInput = props.onInput, onKeyDown = props.onKeyDown, onSearch = props.onSearch;
+    var id = props.id, value = props.value, type = props.type, autoFocus = props.autoFocus, spellCheck = props.spellCheck, tabIndex = props.tabIndex, onChange = props.onChange, onInput = props.onInput, onKeyDown = props.onKeyDown, onSearch = props.onSearch;
     var rich = value.formats.some(function (f) { return f.type === "inputText"; });
     var handleChange = React.useCallback(function (ev) {
         onChange({
@@ -2483,7 +2483,7 @@ var RichInput = function (props) {
         return undefined;
     }, [inputNode, onSearch]);
     return (React__default["default"].createElement("div", { className: "xappw-rich-input ".concat(props.className) }, rich ?
-        React__default["default"].createElement(RichText, { id: id, value: value, onChange: handleRichChange, onInput: handleRichInput, onKeyDown: handleKeyDown, className: "xappw-rich-input__input ".concat(props.className, "__input") }) : React__default["default"].createElement("input", { id: id, ref: inputRef, type: type, value: value.text, autoFocus: autoFocus, placeholder: props.placeholder, spellCheck: spellCheck, className: "xappw-rich-input__input ".concat(props.className, "__input"), onFocus: props.onFocus, onChange: handleChange, onInput: handleInput, onKeyDown: handleKeyDown })));
+        React__default["default"].createElement(RichText, { id: id, value: value, onChange: handleRichChange, onInput: handleRichInput, onKeyDown: handleKeyDown, className: "xappw-rich-input__input ".concat(props.className, "__input") }) : React__default["default"].createElement("input", { id: id, ref: inputRef, type: type, value: value.text, autoComplete: "off", autoFocus: autoFocus, placeholder: props.placeholder, spellCheck: spellCheck, tabIndex: tabIndex ? Number(tabIndex) : 0, className: "xappw-rich-input__input ".concat(props.className, "__input"), onFocus: props.onFocus, onChange: handleChange, onInput: handleInput, onKeyDown: handleKeyDown })));
 };
 
 var SuggestionsGroupHeading = function (props) {
@@ -7209,10 +7209,10 @@ var ChatMenu = function (props) {
                     }, 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" },
+            return (React__default$1["default"].createElement("div", { key: i, className: "chat-menu-item-static-text" },
                 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))));
+                    React__default$1["default"].createElement("div", { className: "chat-menu-item-static-text--body" }, item.body))));
         }
         return React__default$1["default"].createElement("p", null, "Unknown");
     })));
@@ -8016,13 +8016,14 @@ 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 },
+    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 || ""), tabIndex: props.tabIndex, onClick: props.onClick, icon: SendIcon })) : (React__default$1["default"].createElement("button", { className: "xappw-custom-send-button", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, onClick: props.onClick },
         React__default$1["default"].createElement("img", { src: props.sendButtonIcon, alt: "Send button", draggable: false })))));
 };
 
 var Input = function (props) {
-    var value = props.value, placeholder = props.placeholder, sendButtonIcon = props.sendButtonIcon, suggestion = props.suggestion, onChange = props.onChange, onSubmit = props.onSubmit, onSuggestionCommand = props.onSuggestionCommand;
-    var _a = React$1.useState(false), dragover = _a[0], setDragover = _a[1];
+    var _a, _b;
+    var value = props.value, placeholder = props.placeholder, sendButtonIcon = props.sendButtonIcon, suggestion = props.suggestion, footerConfig = props.footerConfig, inputConfig = props.inputConfig, onChange = props.onChange, onSubmit = props.onSubmit, onSuggestionCommand = props.onSuggestionCommand;
+    var _c = React$1.useState(false), dragover = _c[0], setDragover = _c[1];
     function onDragOver(event) {
         setDragover(true);
         event.preventDefault();
@@ -8069,12 +8070,12 @@ 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", id: "chatWidgetInput", 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...", tabIndex: inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.tabIndex, onInput: onChange, onChange: onChange, onKeyDown: handleKeyDown, 
                 // onFocus={onFocus}
                 value: value, spellCheck: true }),
             React__default$1["default"].createElement("div", { className: "xappw-input-form__buttons" },
-                value.text && React__default$1["default"].createElement(IconButton_1, { icon: CloseIcon, className: "xappw-input-form__btn", onClick: handleClear }),
-                React__default$1["default"].createElement(SendButton, { className: "xappw-input-form__btn", sendButtonIcon: sendButtonIcon, onClick: handleOnSubmit })))));
+                value.text && React__default$1["default"].createElement(IconButton_1, { icon: CloseIcon, tabIndex: (_a = footerConfig === null || footerConfig === void 0 ? void 0 : footerConfig.clearButton) === null || _a === void 0 ? void 0 : _a.tabIndex, className: "xappw-input-form__btn", onClick: handleClear }),
+                React__default$1["default"].createElement(SendButton, { className: "xappw-input-form__btn", sendButtonIcon: sendButtonIcon, tabIndex: (_b = footerConfig === null || footerConfig === void 0 ? void 0 : footerConfig.sendButton) === null || _b === void 0 ? void 0 : _b.tabIndex, onClick: handleOnSubmit })))));
 };
 
 function createActions(onItemUse) {
@@ -8116,7 +8117,7 @@ var Suggestions = function (props) {
 
 var ChatFooter = function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    var placeholder = props.placeholder, sendButtonIcon = props.sendButtonIcon, onSubmit = props.onSubmit;
+    var placeholder = props.placeholder, sendButtonIcon = props.sendButtonIcon, footerConfig = props.footerConfig, inputConfig = props.inputConfig, onSubmit = props.onSubmit;
     var _k = React$1.useState(false), drawer = _k[0], setDrawerState = _k[1]; // false initially
     var _l = React$1.useState(), suggestionSearch = _l[0], setSuggestionSearch = _l[1];
     var contexts = reactRedux.useSelector(function (state) { return state.activeContexts; });
@@ -8165,7 +8166,7 @@ var ChatFooter = function (props) {
                 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 }),
-        React__default$1["default"].createElement(Input, { addClass: "chat-footer__input " + (props.isChatting && props.visible ? "visible" : ""), suggestion: suggestions.item, value: input, placeholder: placeholder, sendButtonIcon: sendButtonIcon, onSubmit: handleSubmit, onChange: handleChange, onSuggestionCommand: suggestions.execute, 
+        React__default$1["default"].createElement(Input, { addClass: "chat-footer__input " + (props.isChatting && props.visible ? "visible" : ""), suggestion: suggestions.item, value: input, placeholder: placeholder, sendButtonIcon: sendButtonIcon, footerConfig: footerConfig, inputConfig: inputConfig, onSubmit: handleSubmit, onChange: handleChange, onSuggestionCommand: suggestions.execute, 
             // onFocus={this.inputOnFocus}
             onFileUpload: props.onFileUpload }),
         brandingEnabled && React__default$1["default"].createElement(ChatBranding, { text: branding })));
@@ -30689,46 +30690,49 @@ var ServerOffline = function () {
 };
 
 var CancelButton = function (props) {
-    return React__default$1["default"].createElement("button", { id: "xapp-widget-close", className: "cancel-button", onClick: props.onClick });
+    return React__default$1["default"].createElement("button", { id: "xapp-widget-close", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "cancel-button", onClick: props.onClick });
 };
 
 var MinimizeButton = function (props) {
-    return (React__default$1["default"].createElement("button", { 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", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "minimize-button ".concat(props.showInRight ? "positionRight" : ""), onClick: props.onClick }));
 };
 
 var RefreshButton = function (props) {
-    return (React__default$1["default"].createElement("button", { 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", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "refresh-button ".concat(props.showInRight ? "positionRight" : props.showInLeft ? "positionLeft" : ""), onClick: props.onClick }));
 };
 
 var DEFAULT_STATUS_CONFIG = {
     online: "Virtual Assistant",
     offline: "Leave us a message",
     away: "We're away!",
-    connecting: "Connecting..."
+    connecting: "Connecting...",
 };
 function getStatusText(status, config) {
     var _a, _b, _c, _d;
     switch (status) {
-        case "online": return (_a = config === null || config === void 0 ? void 0 : config.online) !== null && _a !== void 0 ? _a : DEFAULT_STATUS_CONFIG.online;
-        case "offline": return (_b = config === null || config === void 0 ? void 0 : config.offline) !== null && _b !== void 0 ? _b : DEFAULT_STATUS_CONFIG.offline;
-        case "away": return (_c = config === null || config === void 0 ? void 0 : config.away) !== null && _c !== void 0 ? _c : DEFAULT_STATUS_CONFIG.away;
-        default: return (_d = config === null || config === void 0 ? void 0 : config.connecting) !== null && _d !== void 0 ? _d : DEFAULT_STATUS_CONFIG.connecting;
+        case "online":
+            return (_a = config === null || config === void 0 ? void 0 : config.online) !== null && _a !== void 0 ? _a : DEFAULT_STATUS_CONFIG.online;
+        case "offline":
+            return (_b = config === null || config === void 0 ? void 0 : config.offline) !== null && _b !== void 0 ? _b : DEFAULT_STATUS_CONFIG.offline;
+        case "away":
+            return (_c = config === null || config === void 0 ? void 0 : config.away) !== null && _c !== void 0 ? _c : DEFAULT_STATUS_CONFIG.away;
+        default:
+            return (_d = config === null || config === void 0 ? void 0 : config.connecting) !== null && _d !== void 0 ? _d : DEFAULT_STATUS_CONFIG.connecting;
     }
 }
 var StatusContainer = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     return (React__default$1["default"].createElement("div", { className: "status-container" },
         React__default$1["default"].createElement("div", { className: "status-container__avatar" },
             React__default$1["default"].createElement(Avatar, { entity: props.agent })),
-        React__default$1["default"].createElement("div", { className: "".concat("status-text", " ").concat(((_a = props.config) === null || _a === void 0 ? void 0 : _a.alignTextCenter) ? "status-text-positionCenter" : "status-text-positionLeft") },
+        React__default$1["default"].createElement("div", { className: "".concat("status-text", " ").concat(((_a = props.config) === null || _a === void 0 ? void 0 : _a.alignTextCenter)
+                ? "status-text-positionCenter"
+                : "status-text-positionLeft") },
             React__default$1["default"].createElement("span", { className: "status-text-title" }, getStatusText(props.accountStatus, (_b = props.config) === null || _b === void 0 ? void 0 : _b.status)),
-            ((_d = (_c = props.config) === null || _c === void 0 ? void 0 : _c.subtitle) === null || _d === void 0 ? void 0 : _d.enabled) && React__default$1["default"].createElement("span", { className: "status-text-subtitle" }, (_g = (_f = (_e = props.config) === null || _e === void 0 ? void 0 : _e.subtitle) === null || _f === void 0 ? void 0 : _f.text) !== null && _g !== void 0 ? _g : "")),
-        props.canRefresh &&
-            React__default$1["default"].createElement(RefreshButton, { onClick: props.refreshOnClick, showInLeft: props.canMinimize && props.canCancel, showInRight: !props.canMinimize && !props.canCancel }),
-        props.canMinimize &&
-            React__default$1["default"].createElement(MinimizeButton, { onClick: props.minimizeOnClick, showInRight: !props.canCancel }),
-        props.canCancel &&
-            React__default$1["default"].createElement(CancelButton, { onClick: props.cancelOnClick })));
+            ((_d = (_c = props.config) === null || _c === void 0 ? void 0 : _c.subtitle) === null || _d === void 0 ? void 0 : _d.enabled) && (React__default$1["default"].createElement("span", { className: "status-text-subtitle" }, (_g = (_f = (_e = props.config) === null || _e === void 0 ? void 0 : _e.subtitle) === null || _f === void 0 ? void 0 : _f.text) !== null && _g !== void 0 ? _g : ""))),
+        props.canRefresh && (React__default$1["default"].createElement(RefreshButton, { onClick: props.refreshOnClick, tabIndex: (_j = (_h = props.config) === null || _h === void 0 ? void 0 : _h.actions) === null || _j === void 0 ? void 0 : _j.refreshTabIndex, showInLeft: props.canMinimize && props.canCancel, showInRight: !props.canMinimize && !props.canCancel })),
+        props.canMinimize && (React__default$1["default"].createElement(MinimizeButton, { onClick: props.minimizeOnClick, tabIndex: (_l = (_k = props.config) === null || _k === void 0 ? void 0 : _k.actions) === null || _l === void 0 ? void 0 : _l.minimizeTabIndex, showInRight: !props.canCancel })),
+        props.canCancel && (React__default$1["default"].createElement(CancelButton, { onClick: props.cancelOnClick, tabIndex: (_o = (_m = props.config) === null || _m === void 0 ? void 0 : _m.actions) === null || _o === void 0 ? void 0 : _o.cancelTabIndex }))));
 };
 
 function buildStyleContent(theme) {
@@ -30819,7 +30823,7 @@ function getChatButtonStyle(style) {
     if (!style) {
         return empty();
     }
-    return withPrefix("chat-button-", union(getMargins(style.margin), getBackgroundStyle(style.background)));
+    return withPrefix("xapp-chat-button-", union(getMargins(style.margin), getBackgroundStyle(style.background)));
 }
 function getMessagesStyle(style) {
     if (!style) {
@@ -31028,7 +31032,7 @@ var ChatWidgetWrapper = function (props) {
             React__default$1["default"].createElement(ChatWidget, __assign({}, props)))));
 };
 var ChatWidget = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     var innerDispatch = useChatDispatch();
     var dispatch = useChatServerDispatch();
     // From Redux
@@ -31048,8 +31052,8 @@ var ChatWidget = function (props) {
         canCancel = !dockedMode && !staticMode;
     }
     // Our state - pull from storage
-    var _v = React$1.useState((!canMinimize && !canCancel) || !!get("visible") || (((_k = props.config) === null || _k === void 0 ? void 0 : _k.autoOpenOnWidth) && window.matchMedia("(min-width: ".concat((_l = props.config) === null || _l === void 0 ? void 0 : _l.autoOpenOnWidth, ")")).matches)), visible = _v[0], setVisibleState = _v[1];
-    var _w = React$1.useState(false), typing = _w[0], setTypingState = _w[1]; // false initially
+    var _x = React$1.useState((!canMinimize && !canCancel) || !!get("visible") || (((_k = props.config) === null || _k === void 0 ? void 0 : _k.autoOpenOnWidth) && window.matchMedia("(min-width: ".concat((_l = props.config) === null || _l === void 0 ? void 0 : _l.autoOpenOnWidth, ")")).matches)), visible = _x[0], setVisibleState = _x[1];
+    var _y = React$1.useState(false), typing = _y[0], setTypingState = _y[1]; // false initially
     var chatServer = React$1.useContext(ChatServerContext);
     var setVisible = React$1.useCallback(function (newVisible) {
         if (staticMode) {
@@ -31190,8 +31194,8 @@ var ChatWidget = function (props) {
             React__default$1["default"].createElement("div", { className: "spinner-container ".concat(visible && connectionStatus === "pending" ? "visible" : "") },
                 React__default$1["default"].createElement("div", { className: "spinner" })),
             connectionStatus === "offline" && React__default$1["default"].createElement(ServerOffline, null),
-            React__default$1["default"].createElement(ChatFooter, { isChatting: chatState.isChatting, placeholder: (_r = config === null || config === void 0 ? void 0 : config.input) === null || _r === void 0 ? void 0 : _r.placeholder, sendButtonIcon: (_t = (_s = config === null || config === void 0 ? void 0 : config.footer) === null || _s === void 0 ? void 0 : _s.sendButton) === null || _t === void 0 ? void 0 : _t.icon, visible: visible, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload })),
-        React__default$1["default"].createElement(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: (_u = props.config) === null || _u === void 0 ? void 0 : _u.cta, visible: visible })));
+            React__default$1["default"].createElement(ChatFooter, { isChatting: chatState.isChatting, placeholder: (_r = config === null || config === void 0 ? void 0 : config.input) === null || _r === void 0 ? void 0 : _r.placeholder, sendButtonIcon: (_t = (_s = config === null || config === void 0 ? void 0 : config.footer) === null || _s === void 0 ? void 0 : _s.sendButton) === null || _t === void 0 ? void 0 : _t.icon, visible: visible, footerConfig: (_u = props.config) === null || _u === void 0 ? void 0 : _u.footer, inputConfig: (_v = props.config) === null || _v === void 0 ? void 0 : _v.input, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload })),
+        React__default$1["default"].createElement(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: (_w = props.config) === null || _w === void 0 ? void 0 : _w.cta, visible: visible })));
 };
 
 function tryParseJson(str) {