@xapp/chat-widget 1.44.0 → 1.46.2

package/dist/index.js

@@ -7900,11 +7900,12 @@ var SendIcon = function () {
 };
 
 var SendButton = function (props) {
-    return (React__default$1["default"].createElement(IconButton_1, { className: "xappw-send-button ".concat(props.className || ""), onClick: props.onClick, icon: SendIcon }));
+    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 })))));
 };
 
 var Input = function (props) {
-    var value = props.value, placeholder = props.placeholder, suggestion = props.suggestion, onChange = props.onChange, onSubmit = props.onSubmit, onSuggestionCommand = props.onSuggestionCommand;
+    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];
     function onDragOver(event) {
         setDragover(true);
@@ -7957,7 +7958,7 @@ var Input = function (props) {
                 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", onClick: handleOnSubmit })))));
+                React__default$1["default"].createElement(SendButton, { className: "xappw-input-form__btn", sendButtonIcon: sendButtonIcon, onClick: handleOnSubmit })))));
 };
 
 function createActions(onItemUse) {
@@ -7999,7 +8000,7 @@ var Suggestions = function (props) {
 
 var ChatFooter = function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    var placeholder = props.placeholder, onSubmit = props.onSubmit;
+    var placeholder = props.placeholder, sendButtonIcon = props.sendButtonIcon, 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; });
@@ -8048,7 +8049,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, 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, onSubmit: handleSubmit, onChange: handleChange, onSuggestionCommand: suggestions.execute, 
             // onFocus={this.inputOnFocus}
             onFileUpload: props.onFileUpload }),
         brandingEnabled && React__default$1["default"].createElement(ChatBranding, { text: branding })));
@@ -30447,15 +30448,16 @@ var TypingIndicator = function (_) {
  * Show the agent is typing (or the bot - for fun)
  */
 var TypingStatus = function (props) {
-    var agent_names = Object.values(props.agents)
-        .filter(function (agent) { return agent.typing; });
+    var agent_names = Object.values(props.agents).filter(function (agent) { return agent.typing; });
     return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null, agent_names.map(function (agent) {
-        return (React__default$1["default"].createElement("div", { className: "chat-msg-container-wrapper", key: "typing-status-".concat(agent.user.nick) },
+        var _a, _b;
+        return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null, !props.textTypingStatusEnabled ? (React__default$1["default"].createElement("div", { className: "chat-msg-container-wrapper", key: "typing-status-".concat(agent.user.nick) },
             React__default$1["default"].createElement("div", { key: agent.user.nick, className: "chat-msg-container agent chat-typing-progress" },
                 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(TypingIndicator, null)))))));
+                            React__default$1["default"].createElement(TypingIndicator, null))))))) : (React__default$1["default"].createElement("div", { key: agent.user.nick, className: "chat-msg-agent-typing" }, (_b = (_a = agent.user) === null || _a === void 0 ? void 0 : _a.display_name) !== null && _b !== void 0 ? _b : "Bot",
+            " is typing"))));
     })));
 };
 
@@ -30548,7 +30550,7 @@ var MessageList = function (props) {
             renderAll(),
             React__default$1["default"].createElement("div", { ref: messagesEndRef, style: { float: "left", clear: "both" } }),
             React__default$1["default"].createElement(QueuePosition, { position: queuePosition }),
-            React__default$1["default"].createElement(TypingStatus, { agents: agents })),
+            React__default$1["default"].createElement(TypingStatus, { agents: agents, textTypingStatusEnabled: props.textTypingStatusEnabled })),
         React__default$1["default"].createElement(ChatChipsContainer, null)));
 };
 
@@ -30586,12 +30588,13 @@ function getStatusText(status, config) {
     }
 }
 var StatusContainer = function (props) {
-    var _a;
+    var _a, _b, _c, _d, _e, _f, _g;
     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: "status-text" },
-            React__default$1["default"].createElement("span", null, getStatusText(props.accountStatus, (_a = props.config) === null || _a === void 0 ? void 0 : _a.status))),
+        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 &&
@@ -30601,8 +30604,8 @@ var StatusContainer = function (props) {
 };
 
 function buildStyleContent(theme) {
-    var _a, _b, _c, _d;
-    return "\n:root {\n".concat(buildVariables(withPrefix("\t--xapp-", union(single("primary-color", theme === null || theme === void 0 ? void 0 : theme.primaryColor), withPrefix("widget-", union(getSize(theme === null || theme === void 0 ? void 0 : theme.size), getMargins(theme === null || theme === void 0 ? void 0 : theme.margin), getBorderStyle(theme === null || theme === void 0 ? void 0 : theme.border), getZIndex(theme === null || theme === void 0 ? void 0 : theme.zIndex))), getChatButtonStyle(theme === null || theme === void 0 ? void 0 : theme.chatButton), withPrefix("header-", getHeaderStyle(theme === null || theme === void 0 ? void 0 : theme.header)), withPrefix("footer-", getFooterStyle(theme === null || theme === void 0 ? void 0 : theme.footer)), withPrefix("content-", union(getBackgroundStyle((_a = theme === null || theme === void 0 ? void 0 : theme.content) === null || _a === void 0 ? void 0 : _a.background))), withPrefix("messages-", getMessagesStyle(theme === null || theme === void 0 ? void 0 : theme.messages)), withPrefix("send-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.sendButton)), withPrefix("menu-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.menuButton)), withPrefix("menu-", getMenuStyle(theme === null || theme === void 0 ? void 0 : theme.menu)), withPrefix("refresh-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.refreshButton)), withPrefix("minimize-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.minimizeButton)), withPrefix("cancel-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.cancelButton)), withPrefix("carousel-", union(withPrefix("title-", getTextStyle((_b = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _b === void 0 ? void 0 : _b.title)), withPrefix("subtitle-", getTextStyle((_c = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _c === void 0 ? void 0 : _c.subtitle)), withPrefix("action-", getButtonStyle((_d = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _d === void 0 ? void 0 : _d.button)))), withPrefix("input-", getInputStyle(theme === null || theme === void 0 ? void 0 : theme.input)), withPrefix("cta-", getCtaStyle(theme === null || theme === void 0 ? void 0 : theme.cta))))), "\n}");
+    var _a, _b, _c, _d, _e;
+    return "\n:root {\n".concat(buildVariables(withPrefix("\t--xapp-", union(single("primary-color", theme === null || theme === void 0 ? void 0 : theme.primaryColor), withPrefix("widget-", union(getSize(theme === null || theme === void 0 ? void 0 : theme.size), getMargins(theme === null || theme === void 0 ? void 0 : theme.margin), getBorderStyle(theme === null || theme === void 0 ? void 0 : theme.border), getZIndex(theme === null || theme === void 0 ? void 0 : theme.zIndex))), getChatButtonStyle(theme === null || theme === void 0 ? void 0 : theme.chatButton), withPrefix("header-", getHeaderStyle(theme === null || theme === void 0 ? void 0 : theme.header)), withPrefix("footer-", getFooterStyle(theme === null || theme === void 0 ? void 0 : theme.footer)), withPrefix("content-", union(getBackgroundStyle((_a = theme === null || theme === void 0 ? void 0 : theme.content) === null || _a === void 0 ? void 0 : _a.background))), withPrefix("messages-", getMessagesStyle(theme === null || theme === void 0 ? void 0 : theme.messages)), withPrefix("text-typing-status-", getTextStyle((_b = theme === null || theme === void 0 ? void 0 : theme.textTypingStatus) === null || _b === void 0 ? void 0 : _b.text)), withPrefix("send-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.sendButton)), withPrefix("menu-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.menuButton)), withPrefix("menu-", getMenuStyle(theme === null || theme === void 0 ? void 0 : theme.menu)), withPrefix("refresh-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.refreshButton)), withPrefix("minimize-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.minimizeButton)), withPrefix("cancel-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.cancelButton)), withPrefix("carousel-", union(withPrefix("title-", getTextStyle((_c = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _c === void 0 ? void 0 : _c.title)), withPrefix("subtitle-", getTextStyle((_d = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _d === void 0 ? void 0 : _d.subtitle)), withPrefix("action-", getButtonStyle((_e = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _e === void 0 ? void 0 : _e.button)))), withPrefix("input-", getInputStyle(theme === null || theme === void 0 ? void 0 : theme.input)), withPrefix("cta-", getCtaStyle(theme === null || theme === void 0 ? void 0 : theme.cta))))), "\n}");
 }
 function WidgetStylesheet(props) {
     var theme = props.theme;
@@ -30809,6 +30812,9 @@ function getButtonStyle(style) {
         switch (_a.label) {
             case 0: return [4 /*yield*/, ['button-color', style === null || style === void 0 ? void 0 : style.color]];
             case 1:
+                _a.sent();
+                return [4 /*yield*/, ['button-width', style === null || style === void 0 ? void 0 : style.width]];
+            case 2:
                 _a.sent();
                 return [2 /*return*/];
         }
@@ -30843,7 +30849,7 @@ function getHeaderStyle(style) {
     if (!style) {
         return empty();
     }
-    return union(getBackgroundStyle(style.background), getTextStyle(style.text), getBorderStyle(style.border));
+    return union(getBackgroundStyle(style.background), getTextStyle(style.text), withPrefix("subtitle-", getTextStyle(style.subtitle)), getBorderStyle(style.border));
 }
 function getFooterStyle(style) {
     var _a;
@@ -30894,7 +30900,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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     var innerDispatch = useChatDispatch();
     var dispatch = useChatServerDispatch();
     // From Redux
@@ -30914,8 +30920,8 @@ var ChatWidget = function (props) {
         canCancel = !dockedMode && !staticMode;
     }
     // Our state - pull from storage
-    var _r = 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 = _r[0], setVisibleState = _r[1];
-    var _s = React$1.useState(false), typing = _s[0], setTypingState = _s[1]; // false initially
+    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 chatServer = React$1.useContext(ChatServerContext);
     var setVisible = React$1.useCallback(function (newVisible) {
         if (staticMode) {
@@ -31042,12 +31048,12 @@ var ChatWidget = function (props) {
         React__default$1["default"].createElement("div", { className: "widget-container ".concat(modeClass, " ").concat(getVisibilityClass()) },
             React__default$1["default"].createElement(WidgetStylesheet, { theme: config === null || config === void 0 ? void 0 : config.theme }),
             React__default$1["default"].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__default$1["default"].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, onSend: handleSendMessage, onWrite: handleWriteMessage, onOpenUrl: handleOpenUrl }),
+            React__default$1["default"].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__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: (_p = config === null || config === void 0 ? void 0 : config.input) === null || _p === void 0 ? void 0 : _p.placeholder, visible: visible, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload })),
-        React__default$1["default"].createElement(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: (_q = props.config) === null || _q === void 0 ? void 0 : _q.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, 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 })));
 };
 
 function tryParseJson(str) {