@xapp/chat-widget 1.49.5 → 1.50.2

package/dist/index.es.js

@@ -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 () {
@@ -8035,7 +8059,7 @@ var Input = function (props) {
     var handleClear = useCallback(function () {
         onChange({
             text: "",
-            formats: []
+            formats: [],
         });
     }, [onChange]);
     var handleKeyDown = useCallback(function (event) {
@@ -8060,13 +8084,16 @@ 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...", 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, 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 }),
+                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 })))));
 };
 
@@ -8108,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, footerConfig = props.footerConfig, inputConfig = props.inputConfig, 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);
     }
@@ -8136,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({
@@ -8151,13 +8183,13 @@ 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(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 }),
@@ -30682,15 +30714,15 @@ var ServerOffline = function () {
 };
 
 var CancelButton = function (props) {
-    return React$1.createElement("button", { id: "xapp-widget-close", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, 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", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, 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", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, 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 = {
@@ -30712,19 +30744,45 @@ function getStatusText(status, config) {
             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, _h, _j, _k, _l, _m, _o;
-    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, 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$1.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$1.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 }))));
+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) {
@@ -31015,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);
@@ -31181,12 +31240,12 @@ 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, 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(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 })));
 };
 
@@ -31316,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") {