@microsoft/omnichannel-chat-widget 0.1.0-main.7a3ed6a

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultTypingIndicatorContainerStyles.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultTypingIndicatorContainerStyles = void 0;
+const defaultTypingIndicatorContainerStyles = {
+  marginLeft: "10px",
+  marginBottom: "5px",
+  display: "flex",
+  transition: "all .5s ease",
+  alignItems: "center"
+};
+exports.defaultTypingIndicatorContainerStyles = defaultTypingIndicatorContainerStyles;

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultTypingIndicatorMessageStyles.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultTypingIndicatorMessageStyles = void 0;
+const defaultTypingIndicatorMessageStyles = {
+  fontFamily: "\"Segoe UI\", Arial, sans-serif",
+  background: "transparent",
+  fontSize: "12px",
+  lineHeight: "15px",
+  color: "#605e5c",
+  marginLeft: "6px"
+};
+exports.defaultTypingIndicatorMessageStyles = defaultTypingIndicatorMessageStyles;

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultUserMessageStyles.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultUserMessageStyles = void 0;
+const defaultUserMessageStyles = {
+  fontSize: "14px"
+};
+exports.defaultUserMessageStyles = defaultUserMessageStyles;

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/groupActivitiesMiddleware.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.groupActivitiesMiddleware = void 0;
+
+var _Constants = require("../../../../../common/Constants");
+
+/******
+ * GroupActivitiesMiddleware
+ * 
+ * This middleware controls which messages are grouped together regarding to timestamps. It does the following processing:
+ * 1. Distinguishes different messages by sender name and whether it is a system message
+ ******/
+function bin(items, grouping) {
+  let lastBin;
+  const bins = [];
+  let lastItem;
+
+  if (items.length > 0) {
+    items.forEach(item => {
+      if (lastItem && grouping(lastItem, item)) {
+        lastBin.push(item);
+      } else {
+        lastBin = [item];
+        bins.push(lastBin);
+      }
+
+      lastItem = item;
+    });
+  }
+
+  return bins;
+} // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+
+
+const groupActivitiesMiddleware = () => next => args => {
+  const {
+    activities
+  } = args;
+
+  if (activities != null && activities.length > 0) {
+    const {
+      status
+    } = next({
+      activities
+    });
+    return {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      sender: bin(activities, (x, y) => {
+        const roleX = x.channelData && x.channelData.tags ? x.channelData.tags.includes(_Constants.Constants.systemMessageTag) ? _Constants.Constants.systemMessageTag : x.from.name : x.from.name;
+        const roleY = y.channelData && y.channelData.tags ? y.channelData.tags.includes(_Constants.Constants.systemMessageTag) ? _Constants.Constants.systemMessageTag : y.from.name : y.from.name;
+        return roleX === roleY;
+      }),
+      status
+    };
+  } else {
+    return () => false;
+  }
+};
+
+exports.groupActivitiesMiddleware = groupActivitiesMiddleware;

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/timestamps/DeliveredTimestamp.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeliveredTimestamp = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DirectLineSenderRole = require("../../../enums/DirectLineSenderRole");
+
+var _react2 = require("@fluentui/react");
+
+var _defaultMiddlewareLocalizedTexts = require("../../../../common/defaultProps/defaultMiddlewareLocalizedTexts");
+
+var _defaultTimestampContentStyles = require("../defaultStyles/defaultTimestampContentStyles");
+
+var _utils = require("../../../../../../common/utils");
+
+var _ = require("../../../../../..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint @typescript-eslint/no-explicit-any: "off" */
+const DeliveredTimestamp = _ref => {
+  var _state$domainStates$r, _state$domainStates$r2, _state$domainStates$m;
+
+  let {
+    args,
+    role,
+    name
+  } = _ref;
+  const [state] = (0, _.useChatContextStore)();
+  const dir = ((_state$domainStates$r = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r === void 0 ? void 0 : _state$domainStates$r.timestampDir) ?? state.domainStates.globalDir;
+  const contentStyles = { ..._defaultTimestampContentStyles.defaultTimestampContentStyles,
+    ...((_state$domainStates$r2 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r2 === void 0 ? void 0 : _state$domainStates$r2.timestampContentStyleProps)
+  };
+  const {
+    activity: {
+      timestamp
+    }
+  } = args;
+  return /*#__PURE__*/_react.default.createElement(_react2.Stack, {
+    style: contentStyles,
+    dir: dir,
+    horizontal: true
+  }, role === _DirectLineSenderRole.DirectLineSenderRole.Bot && /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": "false"
+  }, name), role === _DirectLineSenderRole.DirectLineSenderRole.Bot && /*#__PURE__*/_react.default.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/_react.default.createElement("span", {
+    dir: dir
+  }, " ", (0, _utils.getTimestampHourMinute)(timestamp)), role === _DirectLineSenderRole.DirectLineSenderRole.User && /*#__PURE__*/_react.default.createElement("span", null, " \xA0-\xA0 "), role === _DirectLineSenderRole.DirectLineSenderRole.User && /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": "false"
+  }, ((_state$domainStates$m = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_MESSAGE_DELIVERED) ?? _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_DELIVERED));
+};
+
+exports.DeliveredTimestamp = DeliveredTimestamp;

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/timestamps/NotDeliveredTimestamp.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NotDeliveredTimestamp = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Constants = require("../../../../../../common/Constants");
+
+var _KeyCodes = require("../../../../../../common/KeyCodes");
+
+var _react2 = require("@fluentui/react");
+
+var _defaultMiddlewareLocalizedTexts = require("../../../../common/defaultProps/defaultMiddlewareLocalizedTexts");
+
+var _defaultTimestampContentStyles = require("../defaultStyles/defaultTimestampContentStyles");
+
+var _defaultTimestampFailedStyles = require("../defaultStyles/defaultTimestampFailedStyles");
+
+var _defaultTimestampRetryStyles = require("../defaultStyles/defaultTimestampRetryStyles");
+
+var _utils = require("../../../../../../common/utils");
+
+var _botframeworkWebchat = require("botframework-webchat");
+
+var _ = require("../../../../../..");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint @typescript-eslint/no-explicit-any: "off" */
+const NotDeliveredTimestamp = _ref => {
+  var _state$domainStates$r, _state$domainStates$r2, _state$domainStates$r3, _state$domainStates$r4, _state$domainStates$m, _state$domainStates$m2;
+
+  let {
+    args
+  } = _ref;
+  const timestampRef = (0, _react.useRef)();
+  const {
+    useFocus,
+    usePostActivity
+  } = _botframeworkWebchat.hooks;
+  const focus = useFocus();
+  const postActivity = usePostActivity();
+  const {
+    activity
+  } = args;
+  const {
+    timestamp
+  } = activity;
+  const [state] = (0, _.useChatContextStore)();
+  const dir = ((_state$domainStates$r = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r === void 0 ? void 0 : _state$domainStates$r.timestampDir) ?? state.domainStates.globalDir;
+  const contentStyles = { ..._defaultTimestampContentStyles.defaultTimestampContentStyles,
+    ...((_state$domainStates$r2 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r2 === void 0 ? void 0 : _state$domainStates$r2.timestampContentStyleProps)
+  };
+  const failedTextStyles = { ..._defaultTimestampFailedStyles.defaultTimestampFailedStyles,
+    ...((_state$domainStates$r3 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r3 === void 0 ? void 0 : _state$domainStates$r3.timestampFailedTextStyleProps)
+  };
+  const retryTextStyles = { ..._defaultTimestampRetryStyles.defaultTimestampRetryStyles,
+    ...((_state$domainStates$r4 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r4 === void 0 ? void 0 : _state$domainStates$r4.timestampRetryTextStyleProps)
+  };
+  (0, _react.useEffect)(() => {
+    var _timestampRef$current;
+
+    const timestampWebChatNodes = timestampRef === null || timestampRef === void 0 ? void 0 : (_timestampRef$current = timestampRef.current) === null || _timestampRef$current === void 0 ? void 0 : _timestampRef$current.childNodes;
+
+    if ((timestampWebChatNodes === null || timestampWebChatNodes === void 0 ? void 0 : timestampWebChatNodes.length) > 1) {
+      timestampWebChatNodes[1].innerText = (0, _utils.getTimestampHourMinute)(timestamp);
+    }
+  }, [timestampRef]);
+  const onRetryClick = (0, _react.useCallback)(async event => {
+    var _activity$channelData;
+
+    removeNotDeliveredTimestamp(event);
+    activity.previousClientActivityID = (_activity$channelData = activity.channelData) === null || _activity$channelData === void 0 ? void 0 : _activity$channelData.clientActivityID;
+    await postActivity(activity);
+    focus("sendBox");
+  }, [activity, focus, postActivity]);
+
+  const onRetryKeyEnter = event => {
+    if (event.code === _KeyCodes.KeyCodes.ENTER) {
+      event.preventDefault();
+      onRetryClick(event);
+    }
+  };
+
+  const removeNotDeliveredTimestamp = event => {
+    let parent = event.target.parentElement;
+
+    while (parent.tagName !== _Constants.HtmlAttributeNames.listItem) {
+      parent = parent.parentElement;
+
+      if (parent.tagName === _Constants.HtmlAttributeNames.unorderedList) {
+        return;
+      }
+    }
+
+    parent.parentNode.removeChild(parent);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react2.Stack, {
+    style: contentStyles,
+    dir: dir,
+    horizontal: true
+  }, /*#__PURE__*/_react.default.createElement("span", null, " ", (0, _utils.getTimestampHourMinute)(timestamp)), /*#__PURE__*/_react.default.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/_react.default.createElement("span", {
+    style: failedTextStyles
+  }, " ", ((_state$domainStates$m = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_MESSAGE_NOT_DELIVERED) ?? _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_NOT_DELIVERED, " "), /*#__PURE__*/_react.default.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/_react.default.createElement("span", {
+    style: retryTextStyles,
+    onClick: onRetryClick,
+    onKeyDown: onRetryKeyEnter,
+    tabIndex: 0
+  }, " ", ((_state$domainStates$m2 = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m2 === void 0 ? void 0 : _state$domainStates$m2.MIDDLEWARE_MESSAGE_RETRY) ?? _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_RETRY, " "));
+};
+
+exports.NotDeliveredTimestamp = NotDeliveredTimestamp;

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/timestamps/SendingTimestamp.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SendingTimestamp = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@fluentui/react");
+
+var _defaultMiddlewareLocalizedTexts = require("../../../../common/defaultProps/defaultMiddlewareLocalizedTexts");
+
+var _defaultTimestampContentStyles = require("../defaultStyles/defaultTimestampContentStyles");
+
+var _utils = require("../../../../../../common/utils");
+
+var _ = require("../../../../../..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint @typescript-eslint/no-explicit-any: "off" */
+const SendingTimestamp = _ref => {
+  var _state$domainStates$r, _state$domainStates$r2, _state$domainStates$m;
+
+  let {
+    args
+  } = _ref;
+  const [state] = (0, _.useChatContextStore)();
+  const dir = ((_state$domainStates$r = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r === void 0 ? void 0 : _state$domainStates$r.timestampDir) ?? state.domainStates.globalDir;
+  const contentStyles = { ..._defaultTimestampContentStyles.defaultTimestampContentStyles,
+    ...((_state$domainStates$r2 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r2 === void 0 ? void 0 : _state$domainStates$r2.timestampContentStyleProps)
+  };
+  const {
+    activity: {
+      timestamp
+    }
+  } = args;
+  return /*#__PURE__*/_react.default.createElement(_react2.Stack, {
+    style: contentStyles,
+    dir: dir,
+    horizontal: true
+  }, /*#__PURE__*/_react.default.createElement("span", null, " ", (0, _utils.getTimestampHourMinute)(timestamp)), /*#__PURE__*/_react.default.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/_react.default.createElement("span", null, " ", ((_state$domainStates$m = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_MESSAGE_SENDING) ?? _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_SENDING, " "));
+};
+
+exports.SendingTimestamp = SendingTimestamp;

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/typingIndicatorMiddleware.js

@@ -0,0 +1,161 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.typingIndicatorMiddleware = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DirectLineSenderRole = require("../../enums/DirectLineSenderRole");
+
+var _defaultMiddlewareLocalizedTexts = require("../../../common/defaultProps/defaultMiddlewareLocalizedTexts");
+
+var _defaultTypingIndicatorBubbleStyles = require("./defaultStyles/defaultTypingIndicatorBubbleStyles");
+
+var _defaultTypingIndicatorContainerStyles = require("./defaultStyles/defaultTypingIndicatorContainerStyles");
+
+var _defaultTypingIndicatorMessageStyles = require("./defaultStyles/defaultTypingIndicatorMessageStyles");
+
+var _ = require("../../../../..");
+
+var _useChatSDKStore = _interopRequireDefault(require("../../../../../hooks/useChatSDKStore"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/******
+ * TypingIndicatorMiddleware
+ * 
+ * This middleware changes the component that shows who's actively typing. It uses the default Microsoft LiveChatWidget styles.
+ ******/
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const TypingIndicator = _ref => {
+  var _state$domainStates$l, _state$domainStates$r, _state$domainStates$r2, _state$domainStates$r3;
+
+  let {
+    activeTyping,
+    visible
+  } = _ref;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const chatSDK = (0, _useChatSDKStore.default)();
+  const [state] = (0, _.useChatContextStore)();
+
+  if (!activeTyping || Object.keys(activeTyping).length === 0 || ((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : _state$domainStates$l.LiveChatVersion) === 1 && !visible) {
+    return null;
+  }
+
+  activeTyping = Object.keys(activeTyping).map(key => activeTyping[key]);
+
+  for (let i = 0; i < activeTyping.length; i++) {
+    if (activeTyping[i].role && activeTyping[i].role === _DirectLineSenderRole.DirectLineSenderRole.User) {
+      var _state$domainStates$l2;
+
+      //visible is set to false if the current user is typing, in which case, we just send typing indicator to OC
+      if (((_state$domainStates$l2 = state.domainStates.liveChatConfig) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.LiveChatVersion) === 2 && !visible) {
+        chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.sendTypingEvent();
+        return null;
+      }
+
+      activeTyping.splice(i, 1);
+      i--;
+    }
+  }
+
+  const localizedTexts = { ..._defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts,
+    ...state.domainStates.middlewareLocalizedTexts
+  };
+  const message = getTypingIndicatorMessage(activeTyping, localizedTexts);
+  const typingIndicatorStyles = { ..._defaultTypingIndicatorContainerStyles.defaultTypingIndicatorContainerStyles,
+    ...((_state$domainStates$r = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r === void 0 ? void 0 : _state$domainStates$r.typingIndicatorStyleProps)
+  };
+  const typingIndicatorBubbleStyles = { ..._defaultTypingIndicatorBubbleStyles.defaultTypingIndicatorBubbleStyles,
+    ...((_state$domainStates$r2 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r2 === void 0 ? void 0 : _state$domainStates$r2.typingIndicatorBubbleStyleProps)
+  };
+  const typingIndicatorMessageStyles = { ..._defaultTypingIndicatorMessageStyles.defaultTypingIndicatorMessageStyles,
+    ...((_state$domainStates$r3 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r3 === void 0 ? void 0 : _state$domainStates$r3.typingIndicatorMessageStyleProps)
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("style", null, `
+                @keyframes bounce {
+                    0% {
+                        -webkit-transform: translateY(0);
+                        transform: translateY(0);
+                        opacity: .7;
+                    }
+                    20% {
+                        -webkit-transform: translateY(-6px);
+                        transform: translateY(-6px);
+                        opacity: 1;
+                    }
+                    40% {
+                        -webkit-transform: translateY(0);
+                        transform: translateY(0);
+                        opacity: .7
+                    }
+                    to {
+                        -webkit-transform: translateY(0);
+                        transform: translateY(0)
+                    }
+                }
+            `), /*#__PURE__*/_react.default.createElement("div", {
+    style: typingIndicatorStyles
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: typingIndicatorBubbleStyles
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      animationDelay: ".166s",
+      ...typingIndicatorBubbleStyles
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      animationDelay: ".333s",
+      ...typingIndicatorBubbleStyles
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: typingIndicatorMessageStyles
+  }, " ", message, " ")));
+}; // eslint-disable-next-line react/display-name, @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+
+
+const typingIndicatorMiddleware = () => next => args => {
+  const {
+    activeTyping,
+    visible
+  } = args;
+  return /*#__PURE__*/_react.default.createElement(TypingIndicator, {
+    activeTyping: activeTyping,
+    visible: visible
+  });
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+exports.typingIndicatorMiddleware = typingIndicatorMiddleware;
+
+const getTypingIndicatorMessage = (activeTyping, localizedTexts) => {
+  if (!activeTyping || activeTyping.length === 0) {
+    return "";
+  } else if (activeTyping.length === 1) {
+    const message = localizedTexts.MIDDLEWARE_TYPING_INDICATOR_ONE;
+    return message ? message.includes("{0}") ? message.replace("{0}", activeTyping[0].name) : message : "";
+  } else if (activeTyping.length === 2) {
+    const firstMember = activeTyping[0].name;
+    const lastMember = activeTyping[1].name;
+    let message = localizedTexts.MIDDLEWARE_TYPING_INDICATOR_TWO;
+
+    if (!message) {
+      return "";
+    }
+
+    if (message.includes("{0}")) {
+      message = message.replace("{0}", firstMember);
+    }
+
+    if (message.includes("{1}")) {
+      message = message.replace("{1}", lastMember);
+    }
+
+    return message;
+  } else {
+    const message = localizedTexts.MIDDLEWARE_TYPING_INDICATOR_MULTIPLE;
+    return message ? message.includes("{0}") ? message.replace("{0}", activeTyping.length.toString()) : message : "";
+  }
+};

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentProcessingMiddleware.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _WebChatActionType = require("../../enums/WebChatActionType");
+
+/******
+ * AttachmentProcessingMiddleware
+ * 
+ * Handles attachment sending.
+ ******/
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const createSendFileAction = files => {
+  return {
+    payload: {
+      files
+    },
+    type: _WebChatActionType.WebChatActionType.WEB_CHAT_SEND_FILES
+  };
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+const attachmentProcessingMiddleware = _ref => {
+  let {
+    dispatch
+  } = _ref;
+  return next => async action => {
+    var _action$payload, _action$payload$files;
+
+    if ((action === null || action === void 0 ? void 0 : action.type) === _WebChatActionType.WebChatActionType.WEB_CHAT_SEND_FILES && (action === null || action === void 0 ? void 0 : (_action$payload = action.payload) === null || _action$payload === void 0 ? void 0 : (_action$payload$files = _action$payload.files) === null || _action$payload$files === void 0 ? void 0 : _action$payload$files.length) > 0) {
+      const files = action.payload.files;
+
+      if (files.length === 1) {
+        return next(action);
+      }
+
+      const dispatchAction = createSendFileAction(files.slice(0, files.length - 1));
+      const nextAction = createSendFileAction([files[files.length - 1]]);
+      await dispatch(dispatchAction);
+      return next(nextAction);
+    }
+
+    return next(action);
+  };
+};
+
+var _default = attachmentProcessingMiddleware;
+exports.default = _default;