@xapp/chat-widget 1.49.4 → 1.50.0

package/dist/index.es.js

@@ -1688,7 +1688,7 @@ function getLeftArrowSvg() {
         React$1.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$1.createElement("div", { onClick: props.onClick, className: "chevron" }, getLeftArrowSvg()));
+    return (React$1.createElement("button", { onClick: props.onClick, className: "chevron" }, getLeftArrowSvg()));
 };
 
 function getRightArrowSvg() {
@@ -1696,7 +1696,7 @@ function getRightArrowSvg() {
         React$1.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$1.createElement("div", { onClick: props.onClick, className: "chevron" }, getRightArrowSvg()));
+    return (React$1.createElement("button", { onClick: props.onClick, className: "chevron" }, getRightArrowSvg()));
 };
 
 var Carousel = function (props) {
@@ -2221,7 +2221,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(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))));
 };
@@ -2425,7 +2425,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({
@@ -2475,7 +2475,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) {
@@ -2854,6 +2854,15 @@ dist.useJsonFetch = useJsonFetch;
 var useSuggestionsFetch_1 = dist.useSuggestionsFetch = useSuggestionsFetch$1;
 var uuid_1 = dist.uuid = uuid;
 
+/**
+ * Sends a POST to your STENTOR based server.
+ *
+ * @param data
+ * @param url
+ * @param key
+ * @param signal
+ * @returns
+ */
 function postMessageToStentor(data, url, key, signal) {
     return __awaiter$1(this, void 0, void 0, function () {
         var body, response;
@@ -3096,6 +3105,7 @@ var StentorDirectChat = /** @class */ (function () {
         this.options = options;
         this.configurableMessages = options.configurableMessages;
         this.isNewSession = false;
+        this.hooks = options.hooks;
     }
     StentorDirectChat.prototype.init = function (dispatch) {
         this.dispatch = dispatch;
@@ -3279,12 +3289,12 @@ var StentorDirectChat = /** @class */ (function () {
     StentorDirectChat.prototype.dispose = function () {
     };
     StentorDirectChat.prototype.postMessage = function (message) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         return __awaiter$1(this, void 0, void 0, function () {
             var request, userId, sessionId, accessToken, attributes, now, permissionRequest, expired, text, granted, userProfile, isEmail, configurableMessages, botResponse, successResult, success, fail, i, timeout, responseMessage;
             var _this = this;
-            return __generator$1(this, function (_e) {
-                switch (_e.label) {
+            return __generator$1(this, function (_f) {
+                switch (_f.label) {
                     case 0:
                         userId = this._userId;
                         sessionId = this._sessionId;
@@ -3406,7 +3416,7 @@ var StentorDirectChat = /** @class */ (function () {
                             });
                         }); };
                         i = 1;
-                        _e.label = 1;
+                        _f.label = 1;
                     case 1:
                         if (!(i < configurableMessages.length)) return [3 /*break*/, 4];
                         timeout = configurableMessages[i - 1].delay * 1000;
@@ -3421,12 +3431,12 @@ var StentorDirectChat = /** @class */ (function () {
                                 .catch(fail.bind(this, i))];
                     case 2:
                         // We don't start typing IF we have a failure message displayed and we are waiting on the timeout
-                        _e.sent();
+                        _f.sent();
                         // If we have what we want, break the for loop
                         if (successResult) {
                             return [3 /*break*/, 4];
                         }
-                        _e.label = 3;
+                        _f.label = 3;
                     case 3:
                         i++;
                         return [3 /*break*/, 1];
@@ -3450,6 +3460,9 @@ var StentorDirectChat = /** @class */ (function () {
                                 text: (botResponse === null || botResponse === void 0 ? void 0 : botResponse.hasOwnProperty("errorText")) ? botResponse.errorText : "The assistant is not responding right now.  Please close the widget and open it again."
                             };
                         }
+                        if (typeof ((_e = this.hooks) === null || _e === void 0 ? void 0 : _e.onResponse) === "function") {
+                            this.hooks.onResponse(botResponse);
+                        }
                         this.stopTyping();
                         return [2 /*return*/, responseMessage];
                 }
@@ -7184,12 +7197,13 @@ var ChatMenuItem = function (props) {
     var content = props.subtitle ? (React$1.createElement("span", null,
         React$1.createElement("div", null, props.label),
         React$1.createElement("div", { className: "chat-menu-item--subtitle" }, props.subtitle))) : (React$1.createElement("span", null, props.label));
-    return (React$1.createElement("button", { type: "button", className: "chat-menu-item", onClick: handleClick }, content));
+    return (React$1.createElement("button", { type: "button", className: "chat-menu-item", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, onClick: handleClick }, content));
 };
 
 var ChatMenu = function (props) {
-    var items = props.items;
-    return (React$1.createElement("div", { className: "chat-menu ".concat(props.opened ? "chat-menu--opened" : "chat-menu--closed") }, items.map(function (item, i) {
+    var items = props.items, opened = props.opened;
+    var openFrom = props.openFrom || "bottom";
+    return (React$1.createElement("div", { className: "chat-menu-".concat(openFrom, " ").concat(opened ? "chat-menu-".concat(openFrom, "--opened") : "chat-menu-".concat(openFrom, "--closed")) }, items.map(function (item, i) {
         if (lib.isStandardMenuItem(item)) {
             return React$1.createElement(ChatMenuItem, { key: i, onClick: props.onItemClick, label: item.label, subtitle: item.subtitle });
         }
@@ -7984,9 +7998,19 @@ var ChatBranding = function (props) {
 };
 
 var DrawerBars = function (props) {
-    return (React$1.createElement("button", { className: "drawer-bars", onClick: props.onToggle },
-        React$1.createElement("div", { className: "drawer-bar bar1" }),
-        React$1.createElement("div", { className: "drawer-bar bar2" })));
+    var bars = props.bars;
+    // 0 is not a valid number of bars so a simple truthy check works here
+    if (!bars) {
+        bars = 2;
+    }
+    function getBars() {
+        var barElements = [];
+        for (var bar = 0; bar < bars; bar++) {
+            barElements.push(React$1.createElement("div", { className: "drawer-bar bar".concat(bar) }));
+        }
+        return barElements;
+    }
+    return (React$1.createElement("button", { className: "drawer-bars", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, "aria-label": "open menu", "aria-hidden": true, onClick: props.onToggle }, getBars()));
 };
 
 var CloseIcon = function () {
@@ -8008,13 +8032,14 @@ var SendIcon = function () {
 };
 
 var SendButton = function (props) {
-    return (React$1.createElement(React$1.Fragment, null, !props.sendButtonIcon ? (React$1.createElement(IconButton_1, { className: "xappw-send-button ".concat(props.className || ""), onClick: props.onClick, icon: SendIcon })) : (React$1.createElement("span", { className: "xappw-custom-send-button", onClick: props.onClick },
+    return (React$1.createElement(React$1.Fragment, null, !props.sendButtonIcon ? (React$1.createElement(IconButton_1, { className: "xappw-send-button ".concat(props.className || ""), tabIndex: props.tabIndex, onClick: props.onClick, icon: SendIcon })) : (React$1.createElement("button", { className: "xappw-custom-send-button", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, onClick: props.onClick },
         React$1.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 = 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 = useState(false), dragover = _c[0], setDragover = _c[1];
     function onDragOver(event) {
         setDragover(true);
         event.preventDefault();
@@ -8034,7 +8059,7 @@ var Input = function (props) {
     var handleClear = useCallback(function () {
         onChange({
             text: "",
-            formats: []
+            formats: [],
         });
     }, [onChange]);
     var handleKeyDown = useCallback(function (event) {
@@ -8059,14 +8084,17 @@ var Input = function (props) {
             }
         }
     }, [suggestion, onChange, onSuggestionCommand]);
-    return (React$1.createElement("div", { className: "xappw-input-container ".concat(props.addClass, " ").concat(dragover ? "drag-drop-zone" : ""), onDrop: onDrop, onDragOver: onDragOver, onDragLeave: onDragLeave },
+    return (React$1.createElement("div", { className: "xappw-input-container ".concat(props.addClass, " ").concat(dragover ? "drag-drop-zone" : ""), "aria-label": "To start typing click on rounded rectangle at the bottom of widget. To send your message click icon on right side of rounded rectangle at the bottom of widget" +
+            value.text
+            ? "To clear ipnut field click on clear icon on the left of send button"
+            : "", "aria-hidden": true, onDrop: onDrop, onDragOver: onDragOver, onDragLeave: onDragLeave },
         React$1.createElement("form", { className: "xappw-input-form", onSubmit: handleOnSubmit },
-            React$1.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$1.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$1.createElement("div", { className: "xappw-input-form__buttons" },
-                value.text && React$1.createElement(IconButton_1, { icon: CloseIcon, className: "xappw-input-form__btn", onClick: handleClear }),
-                React$1.createElement(SendButton, { className: "xappw-input-form__btn", sendButtonIcon: sendButtonIcon, onClick: handleOnSubmit })))));
+                value.text && (React$1.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$1.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) {
@@ -8107,22 +8135,26 @@ 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 _k = useState(false), drawer = _k[0], setDrawerState = _k[1]; // false initially
-    var _l = useState(), suggestionSearch = _l[0], setSuggestionSearch = _l[1];
+    var _a, _b, _c, _d;
+    var placeholder = props.placeholder, sendButtonIcon = props.sendButtonIcon, footerConfig = props.footerConfig, menuConfig = props.menuConfig, inputConfig = props.inputConfig, onSubmit = props.onSubmit;
+    var _e = useState(false), drawerOpen = _e[0], setDrawerState = _e[1]; // false initially
+    var _f = useState(), suggestionSearch = _f[0], setSuggestionSearch = _f[1];
     var contexts = 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 menuPosition = (menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.menuButtonLocation) || "FOOTER";
+    var showMenu = menuPosition === "FOOTER";
+    var menuItemsRaw = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.items; // useWidgetEnv()?.menu?.items;
+    var menuItemsTabIndex = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.itemsTabIndex; // useWidgetEnv()?.menu?.itemsTabIndex;
+    var menuButtonTabIndex = (_a = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.button) === null || _a === void 0 ? void 0 : _a.tabIndex; // useWidgetEnv()?.menu?.button?.tabIndex;
     var menuItems = 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 = useState({
+    var branding = (_b = footerConfig === null || footerConfig === void 0 ? void 0 : footerConfig.branding) === null || _b === void 0 ? void 0 : _b.text; // useWidgetEnv()?.footer?.branding?.text;
+    var brandingEnabled = (_c = footerConfig === null || footerConfig === void 0 ? void 0 : footerConfig.branding) === null || _c === void 0 ? void 0 : _c.enabled; // useWidgetEnv()?.footer?.branding?.enabled;
+    var _g = useState({
         text: "",
         formats: []
-    }), input = _m[0], setInput = _m[1];
+    }), input = _g[0], setInput = _g[1];
     function toggleDrawer() {
-        var newDrawer = !drawer;
+        var newDrawer = !drawerOpen;
         setDrawerState(newDrawer);
         set$1("drawer", newDrawer);
     }
@@ -8135,6 +8167,7 @@ var ChatFooter = function (props) {
         props.onChange(val.text);
         setSuggestionSearch(val.text);
     }
+    // Clears out suggestion and input text
     var handleSubmit = useCallback(function (message) {
         setSuggestionSearch("");
         setInput({
@@ -8150,14 +8183,14 @@ var ChatFooter = function (props) {
         setInput(data);
         setSuggestionSearch(data.text);
     }, []);
-    return (React$1.createElement("div", { className: "chat-footer" },
-        menuItems.length ?
+    return (React$1.createElement("div", { className: "chat-footer", "aria-label": menuItems.length ? "to open menu click a button above the rounded rectangle at the bottom of widget" : "", "aria-hidden": true },
+        showMenu && menuItems.length ?
             React$1.createElement(React$1.Fragment, null,
-                drawer && React$1.createElement(ChatMenu, { opened: drawer, onItemClick: handleMenuItem, items: menuItems }),
+                drawerOpen ? React$1.createElement(ChatMenu, { opened: drawerOpen, tabIndex: menuItemsTabIndex, onItemClick: handleMenuItem, items: menuItems }) : React$1.createElement(React$1.Fragment, null),
                 React$1.createElement("div", { className: "chat-footer__menu-icon" },
-                    React$1.createElement(DrawerBars, { onToggle: toggleDrawer }))) : React$1.createElement(React$1.Fragment, null),
-        ((_j = suggestions.suggestions) === null || _j === void 0 ? void 0 : _j.length) > 0 && React$1.createElement(Suggestions, { className: "xappw-chat-footer__suggestions", data: suggestions.suggestions, index: suggestions.index, onItemClick: handleItemClick, onItemUse: handleItemUse }),
-        React$1.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$1.createElement(DrawerBars, { tabIndex: menuButtonTabIndex, onToggle: toggleDrawer }))) : React$1.createElement(React$1.Fragment, null),
+        ((_d = suggestions.suggestions) === null || _d === void 0 ? void 0 : _d.length) > 0 && React$1.createElement(Suggestions, { className: "xappw-chat-footer__suggestions", data: suggestions.suggestions, index: suggestions.index, onItemClick: handleItemClick, onItemUse: handleItemUse }),
+        React$1.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$1.createElement(ChatBranding, { text: branding })));
@@ -30681,46 +30714,75 @@ var ServerOffline = function () {
 };
 
 var CancelButton = function (props) {
-    return React$1.createElement("button", { id: "xapp-widget-close", className: "cancel-button", onClick: props.onClick });
+    return (React$1.createElement("button", { id: "xapp-widget-close", "aria-label": "close widget", "aria-hidden": true, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "cancel-button", onClick: props.onClick }));
 };
 
 var MinimizeButton = function (props) {
-    return (React$1.createElement("button", { id: "xapp-widget-minimize", className: "minimize-button ".concat(props.showInRight ? "positionRight" : ""), onClick: props.onClick }));
+    return (React$1.createElement("button", { id: "xapp-widget-minimize", "aria-label": "minimize widget", "aria-hidden": true, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "minimize-button ".concat(props.showInRight ? "positionRight" : ""), onClick: props.onClick }));
 };
 
 var RefreshButton = function (props) {
-    return (React$1.createElement("button", { id: "xapp-widget-refresh", className: "refresh-button ".concat(props.showInRight ? "positionRight" : props.showInLeft ? "positionLeft" : ""), onClick: props.onClick }));
+    return (React$1.createElement("button", { id: "xapp-widget-refresh", "aria-label": "refresh chat", "aria-hidden": true, 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;
-    return (React$1.createElement("div", { className: "status-container" },
-        React$1.createElement("div", { className: "status-container__avatar" },
-            React$1.createElement(Avatar, { entity: props.agent })),
-        React$1.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$1.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$1.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$1.createElement(RefreshButton, { onClick: props.refreshOnClick, showInLeft: props.canMinimize && props.canCancel, showInRight: !props.canMinimize && !props.canCancel }),
-        props.canMinimize &&
-            React$1.createElement(MinimizeButton, { onClick: props.minimizeOnClick, showInRight: !props.canCancel }),
-        props.canCancel &&
-            React$1.createElement(CancelButton, { onClick: props.cancelOnClick })));
+var refreshButtonAriaLabel = "To refresh chat click on clockwise gapped circle arrow icon in top right side of widget. ";
+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 menuConfig = props.menuConfig, onSubmit = props.onSubmit;
+    var _q = useState(false), drawerOpen = _q[0], setDrawerState = _q[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;
+    var menuItemsTabIndex = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.itemsTabIndex; // useWidgetEnv()?.menu?.itemsTabIndex;
+    var menuButtonTabIndex = (_a = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.button) === null || _a === void 0 ? void 0 : _a.tabIndex; // useWidgetEnv()?.menu?.button?.tabIndex;
+    var menuItems = useMemo(function () { return menuItemsRaw ? menuItemsRaw : []; }, [menuItemsRaw]);
+    function toggleDrawer() {
+        var newDrawer = !drawerOpen;
+        setDrawerState(newDrawer);
+        set$1("drawer", newDrawer);
+    }
+    function handleMenuItem(label) {
+        setDrawerState(false);
+        onSubmit(label);
+    }
+    return (React$1.createElement(React$1.Fragment, null,
+        React$1.createElement("div", { className: "status-container", "aria-label": props.canRefresh ? refreshButtonAriaLabel : "" + props.canMinimize ? minimizeButtonAriaLabel : "" + props.canCancel ? closeButtonAriaLabel : "", "aria-hidden": true },
+            showMenu && menuItems.length ? (React$1.createElement(React$1.Fragment, null,
+                React$1.createElement("div", { className: "chat-footer__menu-icon" },
+                    React$1.createElement(DrawerBars, { bars: 3, tabIndex: menuButtonTabIndex, onToggle: toggleDrawer })))) : React$1.createElement(React$1.Fragment, null),
+            React$1.createElement("div", { className: "status-container__avatar" },
+                React$1.createElement(Avatar, { entity: props.agent })),
+            React$1.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$1.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$1.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$1.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$1.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$1.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 }))),
+        drawerOpen ? (React$1.createElement("div", { className: "xa-chat-menu-container" },
+            React$1.createElement(ChatMenu, { openFrom: "left", opened: drawerOpen, tabIndex: menuItemsTabIndex, onItemClick: handleMenuItem, items: menuItems }))) : React$1.createElement(React$1.Fragment, null)));
 };
 
 function buildStyleContent(theme) {
@@ -31011,7 +31073,8 @@ var ChatWidgetWrapper = function (props) {
                 displayName: rawConfig.botName,
                 avatarPath: rawConfig.avatarUrl,
             },
-            configurableMessages: configurableMessages
+            configurableMessages: configurableMessages,
+            hooks: rawConfig.hooks
         };
     }, [token, rawConfig]);
     var chatServer = useChatServer(connection, options);
@@ -31020,7 +31083,7 @@ var ChatWidgetWrapper = function (props) {
             React$1.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
@@ -31040,8 +31103,8 @@ var ChatWidget = function (props) {
         canCancel = !dockedMode && !staticMode;
     }
     // Our state - pull from storage
-    var _v = 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 = useState(false), typing = _w[0], setTypingState = _w[1]; // false initially
+    var _x = 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 = useState(false), typing = _y[0], setTypingState = _y[1]; // false initially
     var chatServer = useContext(ChatServerContext);
     var setVisible = useCallback(function (newVisible) {
         if (staticMode) {
@@ -31177,13 +31240,13 @@ var ChatWidget = function (props) {
     return (React$1.createElement(React$1.Fragment, null,
         React$1.createElement("div", { className: "widget-container ".concat(modeClass, " ").concat(getVisibilityClass()) },
             React$1.createElement(WidgetStylesheet, { theme: config === null || config === void 0 ? void 0 : config.theme }),
-            React$1.createElement(StatusContainer, { accountStatus: chatState.accountStatus, refreshOnClick: refreshOnClick, minimizeOnClick: minimizeOnClick, cancelOnClick: cancelOnClick, agent: (_o = chatState.agents["agent:robot"]) === null || _o === void 0 ? void 0 : _o.user, canRefresh: canRefresh, canMinimize: canMinimize, canCancel: canCancel, config: config === null || config === void 0 ? void 0 : config.header }),
+            React$1.createElement(ChatHeader, { accountStatus: chatState.accountStatus, refreshOnClick: refreshOnClick, minimizeOnClick: minimizeOnClick, cancelOnClick: cancelOnClick, agent: (_o = chatState.agents["agent:robot"]) === null || _o === void 0 ? void 0 : _o.user, canRefresh: canRefresh, canMinimize: canMinimize, canCancel: canCancel, config: config === null || config === void 0 ? void 0 : config.header, menuConfig: config.menu, onSubmit: handleOnSubmit }),
             React$1.createElement(MessageList, { visible: visible, queuePosition: chatState.queuePosition, isChatting: chatState.isChatting, isOffline: isOffline, messages: messages, agents: chatState.agents, 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$1.createElement("div", { className: "spinner-container ".concat(visible && connectionStatus === "pending" ? "visible" : "") },
                 React$1.createElement("div", { className: "spinner" })),
             connectionStatus === "offline" && React$1.createElement(ServerOffline, null),
-            React$1.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$1.createElement(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: (_u = props.config) === null || _u === void 0 ? void 0 : _u.cta, visible: visible })));
+            React$1.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, menuConfig: props.config.menu, 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$1.createElement(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: (_w = props.config) === null || _w === void 0 ? void 0 : _w.cta, visible: visible })));
 };
 
 function tryParseJson(str) {
@@ -31312,7 +31375,7 @@ function resetReducer(state) {
     })), { connection: __assign(__assign({}, state.connection), { greetingRequested: false, nonce: uuid_1() }), visitor: state.visitor, visitorId: state.visitorId });
 }
 
-// todo: create reducer (requires redux-thunk dependncy)
+// todo: create reducer (requires redux-thunk dependency)
 function appendMessageToState(state, msg) {
     state.chats = joinMessages(state.chats, msg);
     if (msg.type === "chat.msg") {