@microsoft/omnichannel-chat-widget 0.1.0-main.02fa07b

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

@@ -0,0 +1,3 @@
+export const defaultUserMessageStyles = {
+  fontSize: "14px"
+};

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

@@ -0,0 +1,54 @@
+/******
+ * 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
+ ******/
+import { Constants } from "../../../../../common/Constants";
+
+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
+
+
+export 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.systemMessageTag) ? Constants.systemMessageTag : x.from.name : x.from.name;
+        const roleY = y.channelData && y.channelData.tags ? y.channelData.tags.includes(Constants.systemMessageTag) ? Constants.systemMessageTag : y.from.name : y.from.name;
+        return roleX === roleY;
+      }),
+      status
+    };
+  } else {
+    return () => false;
+  }
+};

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/messageTimestampMiddleware.js

@@ -0,0 +1,107 @@
+import { WebChatActionType } from "../../enums/WebChatActionType";
+import { Constants } from "../../../../../common/Constants"; // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+
+const createMessageTimeStampMiddleware = _ref => {
+  let {
+    dispatch
+  } = _ref;
+  return next => action => {
+    if (isApplicable(action)) {
+      return next(evaluateTagsAndOverrideTimeStamp(action));
+    }
+
+    return next(action);
+  };
+};
+
+const isApplicable = action => {
+  return action.type === WebChatActionType.DIRECT_LINE_INCOMING_ACTIVITY && isPVAConversation(action) && isPayloadValid(action) && isValidChannel(action);
+};
+
+const isPayloadValid = action => {
+  var _action$payload;
+
+  return action === null || action === void 0 ? void 0 : (_action$payload = action.payload) === null || _action$payload === void 0 ? void 0 : _action$payload.activity;
+};
+
+const isValidChannel = action => {
+  var _action$payload2, _action$payload2$acti;
+
+  return (action === null || action === void 0 ? void 0 : (_action$payload2 = action.payload) === null || _action$payload2 === void 0 ? void 0 : (_action$payload2$acti = _action$payload2.activity) === null || _action$payload2$acti === void 0 ? void 0 : _action$payload2$acti.channelId) === Constants.acsChannel;
+};
+
+const isPVAConversation = action => {
+  return !isTagIncluded(action, Constants.systemMessageTag) && !isTagIncluded(action, Constants.publicMessageTag) && !isRoleUserOn(action);
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+const isTagIncluded = (action, tag) => {
+  return isDataTagsPresent(action) && action.payload.activity.channelData.tags.includes(tag);
+};
+
+const isRoleUserOn = action => {
+  var _action$payload3, _action$payload3$acti, _action$payload3$acti2;
+
+  return (action === null || action === void 0 ? void 0 : (_action$payload3 = action.payload) === null || _action$payload3 === void 0 ? void 0 : (_action$payload3$acti = _action$payload3.activity) === null || _action$payload3$acti === void 0 ? void 0 : (_action$payload3$acti2 = _action$payload3$acti.from) === null || _action$payload3$acti2 === void 0 ? void 0 : _action$payload3$acti2.role) === Constants.userMessageTag;
+};
+
+const overrideTimeStamp = (timestampOriginal, timeStampNew) => {
+  return isTimestampValid(timeStampNew) ? timeStampNew : timestampOriginal;
+};
+
+const isTimestampValid = timeStamp => {
+  const regex = /(\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])(T)(\d{2})(:{1})(\d{2})(:{1})(\d{2})(.\d+)([Z]{1}))/;
+  return regex.test(timeStamp);
+};
+
+const isDataTagsPresent = action => {
+  var _action$payload4, _action$payload4$acti, _action$payload4$acti2;
+
+  return (action === null || action === void 0 ? void 0 : (_action$payload4 = action.payload) === null || _action$payload4 === void 0 ? void 0 : (_action$payload4$acti = _action$payload4.activity) === null || _action$payload4$acti === void 0 ? void 0 : (_action$payload4$acti2 = _action$payload4$acti.channelData) === null || _action$payload4$acti2 === void 0 ? void 0 : _action$payload4$acti2.tags) && action.payload.activity.channelData.tags.length > 0;
+};
+
+const evaluateTagsAndOverrideTimeStamp = action => {
+  const tagValue = tagLookup(action, Constants.prefixTimestampTag);
+
+  if (tagValue) {
+    const newTimestamp = extractTimeStamp(tagValue);
+    action.payload.activity.timestamp = overrideTimeStamp(action.payload.activity.timestamp, newTimestamp);
+  }
+
+  return action;
+};
+
+const extractTimeStamp = timeStamp => {
+  if (timeStamp && timeStamp.length > 0) {
+    const ts = timeStamp.split(Constants.prefixTimestampTag);
+
+    if (ts && ts.length > 1) {
+      return ts[1];
+    }
+  }
+
+  return timeStamp;
+};
+
+const tagLookup = (action, tag) => {
+  if (!isDataTagsPresent(action)) {
+    return null;
+  }
+
+  const tags = action.payload.activity.channelData.tags;
+  let value;
+
+  if (tags && tags.length > 0) {
+    for (let i = 0; i < tags.length; i++) {
+      value = tags[i];
+
+      if (value && value.indexOf(tag) > -1) {
+        return value;
+      }
+    }
+  }
+
+  return null;
+};
+
+export default createMessageTimeStampMiddleware;

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { DirectLineSenderRole } from "../../../enums/DirectLineSenderRole";
+import { Stack } from "@fluentui/react";
+import { defaultMiddlewareLocalizedTexts } from "../../../../common/defaultProps/defaultMiddlewareLocalizedTexts";
+import { defaultTimestampContentStyles } from "../defaultStyles/defaultTimestampContentStyles";
+import { getTimestampHourMinute } from "../../../../../../common/utils";
+import { useChatContextStore } from "../../../../../..";
+/* eslint @typescript-eslint/no-explicit-any: "off" */
+
+export const DeliveredTimestamp = _ref => {
+  var _state$domainStates$r, _state$domainStates$r2, _state$domainStates$m;
+
+  let {
+    args,
+    role,
+    name
+  } = _ref;
+  const [state] = 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,
+    ...((_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.createElement(Stack, {
+    style: contentStyles,
+    dir: dir,
+    horizontal: true
+  }, role === DirectLineSenderRole.Bot && /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "false"
+  }, name), role === DirectLineSenderRole.Bot && /*#__PURE__*/React.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/React.createElement("span", {
+    dir: dir
+  }, " ", getTimestampHourMinute(timestamp)), role === DirectLineSenderRole.User && /*#__PURE__*/React.createElement("span", null, " \xA0-\xA0 "), role === DirectLineSenderRole.User && /*#__PURE__*/React.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.MIDDLEWARE_MESSAGE_DELIVERED));
+};

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

@@ -0,0 +1,95 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import { HtmlAttributeNames } from "../../../../../../common/Constants";
+import { KeyCodes } from "../../../../../../common/KeyCodes";
+import { Stack } from "@fluentui/react";
+import { defaultMiddlewareLocalizedTexts } from "../../../../common/defaultProps/defaultMiddlewareLocalizedTexts";
+import { defaultTimestampContentStyles } from "../defaultStyles/defaultTimestampContentStyles";
+import { defaultTimestampFailedStyles } from "../defaultStyles/defaultTimestampFailedStyles";
+import { defaultTimestampRetryStyles } from "../defaultStyles/defaultTimestampRetryStyles";
+import { getTimestampHourMinute } from "../../../../../../common/utils";
+import { hooks } from "botframework-webchat";
+import { useChatContextStore } from "../../../../../..";
+/* eslint @typescript-eslint/no-explicit-any: "off" */
+
+export 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 = useRef();
+  const {
+    useFocus,
+    usePostActivity
+  } = hooks;
+  const focus = useFocus();
+  const postActivity = usePostActivity();
+  const {
+    activity
+  } = args;
+  const {
+    timestamp
+  } = activity;
+  const [state] = 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,
+    ...((_state$domainStates$r2 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r2 === void 0 ? void 0 : _state$domainStates$r2.timestampContentStyleProps)
+  };
+  const failedTextStyles = { ...defaultTimestampFailedStyles,
+    ...((_state$domainStates$r3 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r3 === void 0 ? void 0 : _state$domainStates$r3.timestampFailedTextStyleProps)
+  };
+  const retryTextStyles = { ...defaultTimestampRetryStyles,
+    ...((_state$domainStates$r4 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r4 === void 0 ? void 0 : _state$domainStates$r4.timestampRetryTextStyleProps)
+  };
+  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 = getTimestampHourMinute(timestamp);
+    }
+  }, [timestampRef]);
+  const onRetryClick = 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.ENTER) {
+      event.preventDefault();
+      onRetryClick(event);
+    }
+  };
+
+  const removeNotDeliveredTimestamp = event => {
+    let parent = event.target.parentElement;
+
+    while (parent.tagName !== HtmlAttributeNames.listItem) {
+      parent = parent.parentElement;
+
+      if (parent.tagName === HtmlAttributeNames.unorderedList) {
+        return;
+      }
+    }
+
+    parent.parentNode.removeChild(parent);
+  };
+
+  return /*#__PURE__*/React.createElement(Stack, {
+    style: contentStyles,
+    dir: dir,
+    horizontal: true
+  }, /*#__PURE__*/React.createElement("span", null, " ", getTimestampHourMinute(timestamp)), /*#__PURE__*/React.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/React.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.MIDDLEWARE_MESSAGE_NOT_DELIVERED, " "), /*#__PURE__*/React.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/React.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.MIDDLEWARE_MESSAGE_RETRY, " "));
+};

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { Stack } from "@fluentui/react";
+import { defaultMiddlewareLocalizedTexts } from "../../../../common/defaultProps/defaultMiddlewareLocalizedTexts";
+import { defaultTimestampContentStyles } from "../defaultStyles/defaultTimestampContentStyles";
+import { getTimestampHourMinute } from "../../../../../../common/utils";
+import { useChatContextStore } from "../../../../../..";
+/* eslint @typescript-eslint/no-explicit-any: "off" */
+
+export const SendingTimestamp = _ref => {
+  var _state$domainStates$r, _state$domainStates$r2, _state$domainStates$m;
+
+  let {
+    args
+  } = _ref;
+  const [state] = 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,
+    ...((_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.createElement(Stack, {
+    style: contentStyles,
+    dir: dir,
+    horizontal: true
+  }, /*#__PURE__*/React.createElement("span", null, " ", getTimestampHourMinute(timestamp)), /*#__PURE__*/React.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/React.createElement("span", null, " ", ((_state$domainStates$m = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_MESSAGE_SENDING) ?? defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_SENDING, " "));
+};

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

@@ -0,0 +1,141 @@
+/******
+ * TypingIndicatorMiddleware
+ * 
+ * This middleware changes the component that shows who's actively typing. It uses the default Microsoft LiveChatWidget styles.
+ ******/
+import React from "react";
+import { DirectLineSenderRole } from "../../enums/DirectLineSenderRole";
+import { defaultMiddlewareLocalizedTexts } from "../../../common/defaultProps/defaultMiddlewareLocalizedTexts";
+import { defaultTypingIndicatorBubbleStyles } from "./defaultStyles/defaultTypingIndicatorBubbleStyles";
+import { defaultTypingIndicatorContainerStyles } from "./defaultStyles/defaultTypingIndicatorContainerStyles";
+import { defaultTypingIndicatorMessageStyles } from "./defaultStyles/defaultTypingIndicatorMessageStyles";
+import { useChatContextStore } from "../../../../..";
+import useChatSDKStore from "../../../../../hooks/useChatSDKStore"; // 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 = useChatSDKStore();
+  const [state] = 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.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,
+    ...state.domainStates.middlewareLocalizedTexts
+  };
+  const message = getTypingIndicatorMessage(activeTyping, localizedTexts);
+  const typingIndicatorStyles = { ...defaultTypingIndicatorContainerStyles,
+    ...((_state$domainStates$r = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r === void 0 ? void 0 : _state$domainStates$r.typingIndicatorStyleProps)
+  };
+  const typingIndicatorBubbleStyles = { ...defaultTypingIndicatorBubbleStyles,
+    ...((_state$domainStates$r2 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r2 === void 0 ? void 0 : _state$domainStates$r2.typingIndicatorBubbleStyleProps)
+  };
+  const typingIndicatorMessageStyles = { ...defaultTypingIndicatorMessageStyles,
+    ...((_state$domainStates$r3 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r3 === void 0 ? void 0 : _state$domainStates$r3.typingIndicatorMessageStyleProps)
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.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.createElement("div", {
+    style: typingIndicatorStyles
+  }, /*#__PURE__*/React.createElement("div", {
+    style: typingIndicatorBubbleStyles
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      animationDelay: ".166s",
+      ...typingIndicatorBubbleStyles
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      animationDelay: ".333s",
+      ...typingIndicatorBubbleStyles
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: typingIndicatorMessageStyles
+  }, " ", message, " ")));
+}; // eslint-disable-next-line react/display-name, @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+
+
+export const typingIndicatorMiddleware = () => next => args => {
+  const {
+    activeTyping,
+    visible
+  } = args;
+  return /*#__PURE__*/React.createElement(TypingIndicator, {
+    activeTyping: activeTyping,
+    visible: visible
+  });
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+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/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentProcessingMiddleware.js

@@ -0,0 +1,42 @@
+/******
+ * AttachmentProcessingMiddleware
+ * 
+ * Handles attachment sending.
+ ******/
+import { WebChatActionType } from "../../enums/WebChatActionType"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+const createSendFileAction = files => {
+  return {
+    payload: {
+      files
+    },
+    type: 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.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);
+  };
+};
+
+export default attachmentProcessingMiddleware;

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentUploadValidatorMiddleware.js

@@ -0,0 +1,149 @@
+/******
+ * AttachmentUploadValidatorMiddleware
+ * 
+ * Checks if the attachment being uploaded satisfies Omnichannel's requirement on file extensions and file size.
+ ******/
+import { NotificationHandler } from "../../notification/NotificationHandler";
+import { NotificationScenarios } from "../../enums/NotificationScenarios";
+import { WebChatActionType } from "../../enums/WebChatActionType";
+const MBtoBRatio = 1000000;
+/*
+* If an attachment is invalid, delete this attachment from the attachments list
+* If the result attachment list is empty, return a dummy action
+*/
+
+const validateAttachment = (action, allowedFileExtensions, maxUploadFileSize, localizedTexts) => {
+  var _action$payload, _action$payload$activ, _action$payload2, _action$payload2$acti, _action$payload2$acti2, _action$payload3, _action$payload3$acti, _action$payload3$acti2;
+
+  const attachments = action === null || action === void 0 ? void 0 : (_action$payload = action.payload) === null || _action$payload === void 0 ? void 0 : (_action$payload$activ = _action$payload.activity) === null || _action$payload$activ === void 0 ? void 0 : _action$payload$activ.attachments;
+  const attachmentSizes = action === null || action === void 0 ? void 0 : (_action$payload2 = action.payload) === null || _action$payload2 === void 0 ? void 0 : (_action$payload2$acti = _action$payload2.activity) === null || _action$payload2$acti === void 0 ? void 0 : (_action$payload2$acti2 = _action$payload2$acti.channelData) === null || _action$payload2$acti2 === void 0 ? void 0 : _action$payload2$acti2.attachmentSizes;
+
+  if (attachments) {
+    for (let i = 0; i < attachments.length; i++) {
+      const fileExtensionValid = validateFileExtension(attachments[i], allowedFileExtensions);
+      const fileSizeValid = validateFileSize(attachmentSizes[i], maxUploadFileSize);
+      const fileIsEmpty = parseInt(attachmentSizes[i]) == 0;
+
+      if (!fileExtensionValid || !fileSizeValid || fileIsEmpty) {
+        NotificationHandler.notifyError(NotificationScenarios.AttachmentError, buildErrorMessage(attachments[i].name, fileExtensionValid, fileSizeValid, fileIsEmpty, maxUploadFileSize, localizedTexts));
+        attachments.splice(i, 1);
+        attachmentSizes.splice(i, 1);
+        i--;
+      }
+    }
+  }
+
+  if ((action === null || action === void 0 ? void 0 : (_action$payload3 = action.payload) === null || _action$payload3 === void 0 ? void 0 : (_action$payload3$acti = _action$payload3.activity) === null || _action$payload3$acti === void 0 ? void 0 : (_action$payload3$acti2 = _action$payload3$acti.attachments) === null || _action$payload3$acti2 === void 0 ? void 0 : _action$payload3$acti2.length) > 0) {
+    return action;
+  } else {
+    return {
+      type: "",
+      payload: null
+    };
+  }
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+const validateFileExtension = (attachment, allowedFileExtensions) => {
+  if (!allowedFileExtensions) {
+    return true;
+  }
+
+  const fileName = attachment.name.toLowerCase();
+  const index = fileName.lastIndexOf(".");
+
+  if (!index) {
+    return false;
+  }
+
+  const fileExtension = fileName.substring(index);
+  const allExtensions = allowedFileExtensions === null || allowedFileExtensions === void 0 ? void 0 : allowedFileExtensions.toLowerCase().split(",");
+  return allExtensions.indexOf(fileExtension) > -1;
+};
+
+const validateFileSize = (attachmentSize, maxUploadFileSize) => {
+  return (maxUploadFileSize && parseInt(maxUploadFileSize) * MBtoBRatio) > parseInt(attachmentSize);
+};
+
+const buildErrorMessage = (fileName, supportedFileExtension, supportedFileSize, fileIsEmpty, maxUploadFileSize, localizedTexts) => {
+  let errorMessage = "";
+
+  if (!fileName || !maxUploadFileSize) {
+    return localizedTexts.MIDDLEWARE_BANNER_FILE_NULL_ERROR ?? "";
+  }
+
+  if (!supportedFileExtension && !supportedFileSize) {
+    errorMessage = getFileSizeAndFileExtensionErrorMessage(fileName, maxUploadFileSize, localizedTexts);
+  } else if (!supportedFileSize) {
+    errorMessage = getFileSizeErrorMessage(maxUploadFileSize, localizedTexts);
+  } else if (!supportedFileExtension) {
+    errorMessage = getFileExtensionErrorMessage(fileName, localizedTexts);
+  } else if (fileIsEmpty) {
+    errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_IS_EMPTY_ERROR ?? "";
+  } else {
+    errorMessage = localizedTexts.MIDDLEWARE_BANNER_ERROR_MESSAGE ?? "";
+  }
+
+  return errorMessage;
+};
+
+const getFileSizeAndFileExtensionErrorMessage = (fileName, maxUploadFileSize, localizedTexts) => {
+  const index = fileName.lastIndexOf(".");
+  let errorMessage;
+
+  if (index < 0) {
+    errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_SIZE_WITHOUT_EXTENSION_ERROR;
+  } else {
+    var _errorMessage;
+
+    const fileExtension = fileName.substring(index);
+    errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_SIZE_EXTENSION_ERROR;
+
+    if ((_errorMessage = errorMessage) !== null && _errorMessage !== void 0 && _errorMessage.includes("{1}")) {
+      errorMessage = errorMessage.replace("{1}", fileExtension);
+    }
+  }
+
+  return errorMessage ? errorMessage.includes("{0}") ? errorMessage.replace("{0}", maxUploadFileSize) : errorMessage : "";
+};
+
+const getFileExtensionErrorMessage = (fileName, localizedTexts) => {
+  const index = fileName.lastIndexOf(".");
+
+  if (index < 0) {
+    return localizedTexts.MIDDLEWARE_BANNER_FILE_WITHOUT_EXTENSION ?? "";
+  } else {
+    const fileExtension = fileName.substring(index);
+    const errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_EXTENSION_ERROR;
+    return errorMessage ? errorMessage.includes("{0}") ? errorMessage.replace("{0}", fileExtension) : errorMessage : "";
+  }
+};
+
+const getFileSizeErrorMessage = (maxUploadFileSize, localizedTexts) => {
+  const errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_SIZE_ERROR;
+  return errorMessage ? errorMessage.includes("{0}") ? errorMessage.replace("{0}", maxUploadFileSize) : errorMessage : "";
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+
+
+const createAttachmentUploadValidatorMiddleware = (allowedFileExtensions, maxUploadFileSize, localizedTexts) => _ref => {
+  let {
+    dispatch
+  } = _ref;
+  return next => action => {
+    if (action.type === WebChatActionType.DIRECT_LINE_POST_ACTIVITY) {
+      var _payload$activity, _payload$activity2, _payload$activity2$ch, _payload$activity3, _payload$activity3$at, _payload$activity4, _payload$activity4$ch, _payload$activity4$ch2;
+
+      const {
+        payload
+      } = action;
+
+      if (payload !== null && payload !== void 0 && (_payload$activity = payload.activity) !== null && _payload$activity !== void 0 && _payload$activity.attachments && payload !== null && payload !== void 0 && (_payload$activity2 = payload.activity) !== null && _payload$activity2 !== void 0 && (_payload$activity2$ch = _payload$activity2.channelData) !== null && _payload$activity2$ch !== void 0 && _payload$activity2$ch.attachmentSizes && (payload === null || payload === void 0 ? void 0 : (_payload$activity3 = payload.activity) === null || _payload$activity3 === void 0 ? void 0 : (_payload$activity3$at = _payload$activity3.attachments) === null || _payload$activity3$at === void 0 ? void 0 : _payload$activity3$at.length) === (payload === null || payload === void 0 ? void 0 : (_payload$activity4 = payload.activity) === null || _payload$activity4 === void 0 ? void 0 : (_payload$activity4$ch = _payload$activity4.channelData) === null || _payload$activity4$ch === void 0 ? void 0 : (_payload$activity4$ch2 = _payload$activity4$ch.attachmentSizes) === null || _payload$activity4$ch2 === void 0 ? void 0 : _payload$activity4$ch2.length)) {
+        return next(validateAttachment(action, allowedFileExtensions, maxUploadFileSize, localizedTexts));
+      }
+    }
+
+    return next(action);
+  };
+};
+
+export default createAttachmentUploadValidatorMiddleware;