@microsoft/omnichannel-chat-widget 0.1.0-main.01a30be

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

@@ -0,0 +1,139 @@
+/******
+ * TypingIndicatorMiddleware
+ *
+ * This middleware changes the component that shows who's actively typing. It uses the default Microsoft LiveChatWidget styles.
+ ******/
+
+import React, { useCallback } 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 { debounceLeading } from "../../../../../common/utils";
+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();
+  const debounceTyping = useCallback(debounceLeading(() => chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.sendTypingEvent()), []);
+  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) {
+        debounceTyping();
+        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,39 @@
+/******
+ * 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,190 @@
+/******
+ * AttachmentUploadValidatorMiddleware
+ * 
+ * Checks if the attachment being uploaded satisfies Omnichannel's requirement on file extensions and file size.
+ ******/
+
+import { LogLevel, TelemetryEvent } from "../../../../../common/telemetry/TelemetryConstants";
+import { NotificationHandler } from "../../notification/NotificationHandler";
+import { NotificationScenarios } from "../../enums/NotificationScenarios";
+import { WebChatActionType } from "../../enums/WebChatActionType";
+import { TelemetryHelper } from "../../../../../common/telemetry/TelemetryHelper";
+import { AMSConstants } from "../../../../../common/Constants";
+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, maxFileSizeSupportedByDynamics, 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 maxUploadFileSize = getMaxUploadFileSize(maxFileSizeSupportedByDynamics, attachments[i].contentType);
+      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.toString(), maxFileSizeSupportedByDynamics, 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 * MBtoBRatio > parseInt(attachmentSize);
+};
+const getMaxUploadFileSize = (maxFileSizeSupportedByDynamicsStr, contentType) => {
+  const maxFileSizeSupportedByDynamics = maxFileSizeSupportedByDynamicsStr && parseInt(maxFileSizeSupportedByDynamicsStr) ? parseInt(maxFileSizeSupportedByDynamicsStr) : AMSConstants.maxSupportedFileSize;
+  const amsAttachmentSizeLimit = isImage(contentType) ? AMSConstants.maxSupportedImageSize : AMSConstants.maxSupportedFileSize;
+  // Takes the smallest max file size configure betteween AMS and Dynamics Config
+  return maxFileSizeSupportedByDynamics < amsAttachmentSizeLimit ? maxFileSizeSupportedByDynamics : amsAttachmentSizeLimit;
+};
+const isImage = contentType => {
+  return AMSConstants.supportedImagesMimeTypes.includes(contentType);
+};
+const buildErrorMessage = (fileName, supportedFileExtension, supportedFileSize, fileIsEmpty, maxUploadFileSize, maxFileSizeSupportedByDynamics, localizedTexts) => {
+  let errorMessage = "";
+  if (!fileName || !maxUploadFileSize) {
+    TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+      Event: TelemetryEvent.AttachmentUploadValidatorMiddlewareFailed,
+      Description: "Attachment validation failed",
+      ExceptionDetails: {
+        ErrorDetails: "File provided is null"
+      }
+    });
+    return localizedTexts.MIDDLEWARE_BANNER_FILE_NULL_ERROR ?? "";
+  }
+  if (!supportedFileExtension && !supportedFileSize) {
+    errorMessage = getFileSizeAndFileExtensionErrorMessage(fileName, maxUploadFileSize, maxFileSizeSupportedByDynamics, localizedTexts);
+  } else if (!supportedFileSize) {
+    errorMessage = getFileSizeErrorMessage(maxUploadFileSize, maxFileSizeSupportedByDynamics, localizedTexts);
+  } else if (!supportedFileExtension) {
+    errorMessage = getFileExtensionErrorMessage(fileName, localizedTexts);
+  } else if (fileIsEmpty) {
+    TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+      Event: TelemetryEvent.AttachmentUploadValidatorMiddlewareFailed,
+      Description: "Attachment validation failed",
+      ExceptionDetails: {
+        ErrorDetails: "File provided is empty"
+      }
+    });
+    errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_IS_EMPTY_ERROR ?? "";
+  } else {
+    TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+      Event: TelemetryEvent.AttachmentUploadValidatorMiddlewareFailed,
+      Description: "Attachment validation failed",
+      ExceptionDetails: {
+        ErrorDetails: `Unexpected error: supportedFileExtension=${supportedFileExtension} supportedFileSize=${supportedFileSize} fileIsEmpty=${!fileIsEmpty}`
+      }
+    });
+    errorMessage = localizedTexts.MIDDLEWARE_BANNER_ERROR_MESSAGE ?? "";
+  }
+  return errorMessage;
+};
+const getFileSizeAndFileExtensionErrorMessage = (fileName, maxUploadFileSize, maxFileSizeSupportedByDynamics, localizedTexts) => {
+  const index = fileName.lastIndexOf(".");
+  let errorMessage, exceptionDetails;
+  if (index < 0) {
+    errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_SIZE_WITHOUT_EXTENSION_ERROR;
+    exceptionDetails = `File exceeded the allowed limit of ${maxUploadFileSize} MB and File provided without file extension`;
+  } else {
+    var _errorMessage;
+    const fileExtension = fileName.substring(index);
+    errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_SIZE_EXTENSION_ERROR;
+    exceptionDetails = `File exceeds the allowed limit of ${maxUploadFileSize} MB and ${fileExtension} files are not supported`;
+    if ((_errorMessage = errorMessage) !== null && _errorMessage !== void 0 && _errorMessage.includes("{1}")) {
+      errorMessage = errorMessage.replace("{1}", fileExtension);
+    }
+  }
+  TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+    Event: TelemetryEvent.AttachmentUploadValidatorMiddlewareFailed,
+    Description: "Attachment validation failed",
+    ExceptionDetails: {
+      ErrorDetails: `${exceptionDetails} Dynamics file size limit=${maxFileSizeSupportedByDynamics} AMS image size limit=${AMSConstants.maxSupportedImageSize} AMS file size limit=${AMSConstants.maxSupportedFileSize}`
+    }
+  });
+  return errorMessage ? errorMessage.includes("{0}") ? errorMessage.replace("{0}", maxUploadFileSize) : errorMessage : "";
+};
+const getFileExtensionErrorMessage = (fileName, localizedTexts) => {
+  const index = fileName.lastIndexOf(".");
+  if (index < 0) {
+    TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+      Event: TelemetryEvent.AttachmentUploadValidatorMiddlewareFailed,
+      Description: "Attachment validation failed",
+      ExceptionDetails: {
+        ErrorDetails: "File provided without file extension"
+      }
+    });
+    return localizedTexts.MIDDLEWARE_BANNER_FILE_WITHOUT_EXTENSION ?? "";
+  } else {
+    const fileExtension = fileName.substring(index);
+    TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+      Event: TelemetryEvent.AttachmentUploadValidatorMiddlewareFailed,
+      Description: "Attachment validation failed",
+      ExceptionDetails: {
+        ErrorDetails: `${fileExtension} files extension is not supported.`
+      }
+    });
+    const errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_EXTENSION_ERROR;
+    return errorMessage ? errorMessage.includes("{0}") ? errorMessage.replace("{0}", fileExtension) : errorMessage : "";
+  }
+};
+const getFileSizeErrorMessage = (maxUploadFileSize, maxFileSizeSupportedByDynamics, localizedTexts) => {
+  TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+    Event: TelemetryEvent.AttachmentUploadValidatorMiddlewareFailed,
+    Description: "Attachment validation failed",
+    ExceptionDetails: {
+      ErrorDetails: `File exceeds the allowed limit of ${maxUploadFileSize}MB. Dynamics file size limit=${maxFileSizeSupportedByDynamics} AMS image size limit=${AMSConstants.maxSupportedImageSize} AMS file size limit=${AMSConstants.maxSupportedFileSize}`
+    }
+  });
+  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, maxFileSizeSupportedByDynamics, 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, maxFileSizeSupportedByDynamics, localizedTexts));
+      }
+    }
+    return next(action);
+  };
+};
+export default createAttachmentUploadValidatorMiddleware;

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

@@ -0,0 +1,39 @@
+/******
+ * ChannelDataMiddleware
+ * 
+ * Adds necessary tags if not present so that the rendering middlewares can process them later.
+ ******/
+
+import { Constants } from "../../../../../common/Constants";
+import { DeliveryMode } from "@microsoft/omnichannel-chat-sdk";
+import { WebChatActionType } from "../../enums/WebChatActionType";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+const channelDataMiddleware = _ref => {
+  let {
+    dispatch
+  } = _ref;
+  return next => action => {
+    var _action$payload, _action$payload$activ;
+    if ((action === null || action === void 0 ? void 0 : action.type) === WebChatActionType.DIRECT_LINE_POST_ACTIVITY_PENDING && action !== null && action !== void 0 && (_action$payload = action.payload) !== null && _action$payload !== void 0 && (_action$payload$activ = _action$payload.activity) !== null && _action$payload$activ !== void 0 && _action$payload$activ.channelData) {
+      const channelIdTag = `${Constants.channelIdKey}${Constants.ChannelId}`;
+      const customerMessageTag = `${Constants.CustomerTag}`;
+      if (action.payload.activity.channelData.tags) {
+        if (!action.payload.activity.channelData.tags.includes(channelIdTag)) {
+          action.payload.activity.channelData.tags.push(channelIdTag);
+        }
+        if (!action.payload.activity.channelData.tags.includes(customerMessageTag)) {
+          action.payload.activity.channelData.tags.push(customerMessageTag);
+        }
+      } else {
+        action.payload.activity.channelData.tags = [channelIdTag];
+        action.payload.activity.channelData.tags.push(customerMessageTag);
+      }
+      action.payload.activity.channelData.metadata = {
+        deliveryMode: DeliveryMode.Bridged
+      };
+    }
+    return next(action);
+  };
+};
+export default channelDataMiddleware;

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

@@ -0,0 +1,40 @@
+/******
+ * ConversationEndMiddleware
+ * 
+ * This middleware is invoked when the conversation is ended by the agent/bot.
+ * The callback is then invoked to hide the send box (by default).
+ ******/
+
+import { Constants } from "../../../../../common/Constants";
+import { DirectLineSenderRole } from "../../enums/DirectLineSenderRole";
+import { MessageTypes } from "../../enums/MessageType";
+import { WebChatActionType } from "../../enums/WebChatActionType";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+const createConversationEndMiddleware = conversationEndCallback => _ref => {
+  let {
+    dispatch
+  } = _ref;
+  return next => action => {
+    var _action$payload;
+    if ((action === null || action === void 0 ? void 0 : action.type) == WebChatActionType.DIRECT_LINE_INCOMING_ACTIVITY && (_action$payload = action.payload) !== null && _action$payload !== void 0 && _action$payload.activity) {
+      var _activity$from, _activity$from2, _activity$channelData7, _activity$channelData8;
+      const activity = action.payload.activity;
+      if (((_activity$from = activity.from) === null || _activity$from === void 0 ? void 0 : _activity$from.role) === DirectLineSenderRole.Bot && activity.channelId === "ACS_CHANNEL") {
+        var _activity$channelData, _activity$channelData2, _activity$channelData3, _activity$channelData4, _activity$channelData5, _activity$channelData6;
+        // ACS
+        if ((_activity$channelData = activity.channelData) !== null && _activity$channelData !== void 0 && (_activity$channelData2 = _activity$channelData.tags) !== null && _activity$channelData2 !== void 0 && _activity$channelData2.includes(Constants.systemMessageTag) && ((_activity$channelData3 = activity.channelData) !== null && _activity$channelData3 !== void 0 && (_activity$channelData4 = _activity$channelData3.tags) !== null && _activity$channelData4 !== void 0 && _activity$channelData4.includes(Constants.agentEndConversationMessageTag) || (_activity$channelData5 = activity.channelData) !== null && _activity$channelData5 !== void 0 && (_activity$channelData6 = _activity$channelData5.tags) !== null && _activity$channelData6 !== void 0 && _activity$channelData6.includes(Constants.supervisorForceCloseMessageTag))) {
+          conversationEndCallback();
+        }
+      } else if (((_activity$from2 = activity.from) === null || _activity$from2 === void 0 ? void 0 : _activity$from2.role) === DirectLineSenderRole.Channel && ((_activity$channelData7 = activity.channelData) === null || _activity$channelData7 === void 0 ? void 0 : _activity$channelData7.type) === MessageTypes.Thread && (_activity$channelData8 = activity.channelData) !== null && _activity$channelData8 !== void 0 && _activity$channelData8.properties) {
+        var _activity$channelData9, _activity$channelData10, _activity$channelData11, _activity$channelData12;
+        // IC3
+        if (((_activity$channelData9 = activity.channelData) === null || _activity$channelData9 === void 0 ? void 0 : (_activity$channelData10 = _activity$channelData9.properties) === null || _activity$channelData10 === void 0 ? void 0 : _activity$channelData10.isdeleted) === Constants.truePascal || !((_activity$channelData11 = activity.channelData) !== null && _activity$channelData11 !== void 0 && (_activity$channelData12 = _activity$channelData11.properties) !== null && _activity$channelData12 !== void 0 && _activity$channelData12.containsExternalEntitiesListeningAll)) {
+          conversationEndCallback();
+        }
+      }
+    }
+    return next(action);
+  };
+};
+export default createConversationEndMiddleware;

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

@@ -0,0 +1,76 @@
+/******
+ * DataMaskingMiddleware
+ *
+ * Applies data masking rules that Omnichannel Admin has configured.
+ ******/
+
+import { LogLevel, TelemetryEvent } from "../../../../../common/telemetry/TelemetryConstants";
+import { TelemetryHelper } from "../../../../../common/telemetry/TelemetryHelper";
+import { WebChatActionType } from "../../enums/WebChatActionType";
+import { isMaskingforCustomer } from "../../../common/utils/isMaskingFromCustomer";
+const applyDataMasking = (action, regexCollection) => {
+  const maskedChar = "#"; //to do: load from env once OC SDK supporting.
+  let {
+    text
+  } = action.payload;
+  if (!regexCollection) {
+    TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+      Event: TelemetryEvent.InvalidConfiguration,
+      ExceptionDetails: {
+        ErrorDetails: "Invalid data masking rules"
+      }
+    });
+    return action;
+  }
+  let isRuleMatched = false;
+  for (const ruleId of Object.keys(regexCollection)) {
+    const item = regexCollection[ruleId];
+    if (item) {
+      try {
+        const regex = new RegExp(item, "gi");
+        let match;
+        // eslint-disable-next-line no-cond-assign
+        while (match = regex.exec(text)) {
+          const replaceStr = match[0].replace(/./gi, maskedChar);
+          text = text.replace(match[0], replaceStr);
+          TelemetryHelper.logActionEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.DataMaskingRuleApplied,
+            Description: `Data Masking Rule Id: ${ruleId} applied.`
+          });
+          isRuleMatched = true;
+        }
+      } catch (err) {
+        TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+          Event: TelemetryEvent.DataMaskingRuleApplyFailed,
+          ExceptionDetails: {
+            RuleId: ruleId,
+            Exception: err
+          }
+        });
+      }
+    }
+
+    // Exit if rule matched
+    if (isRuleMatched === true) {
+      break;
+    }
+  }
+  action.payload.text = text;
+  return action;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+const createDataMaskingMiddleware = dataMaskingInfo => _ref => {
+  let {
+    dispatch
+  } = _ref;
+  return next => action => {
+    var _action$payload;
+    if (isMaskingforCustomer(dataMaskingInfo) && (_action$payload = action.payload) !== null && _action$payload !== void 0 && _action$payload.text && action.type === WebChatActionType.WEB_CHAT_SEND_MESSAGE) {
+      const regexCollection = dataMaskingInfo === null || dataMaskingInfo === void 0 ? void 0 : dataMaskingInfo.dataMaskingRules;
+      return next(applyDataMasking(action, regexCollection));
+    }
+    return next(action);
+  };
+};
+export default createDataMaskingMiddleware;

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

@@ -0,0 +1,41 @@
+/******
+ * GIFUploadMiddleware
+ * 
+ * Ensures that GIF are properly uploaded.
+ ******/
+
+import { Constants } from "../../../../../common/Constants";
+import { WebChatActionType } from "../../enums/WebChatActionType";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+const gifUploadMiddleware = _ref => {
+  let {
+    dispatch
+  } = _ref;
+  return next => action => {
+    if (action.type === WebChatActionType.DIRECT_LINE_POST_ACTIVITY) {
+      var _activity$attachments, _activity$channelData, _activity$channelData2;
+      const {
+        payload: {
+          activity
+        }
+      } = action;
+      if ((activity === null || activity === void 0 ? void 0 : (_activity$attachments = activity.attachments) === null || _activity$attachments === void 0 ? void 0 : _activity$attachments.length) === (activity === null || activity === void 0 ? void 0 : (_activity$channelData = activity.channelData) === null || _activity$channelData === void 0 ? void 0 : (_activity$channelData2 = _activity$channelData.attachmentSizes) === null || _activity$channelData2 === void 0 ? void 0 : _activity$channelData2.length)) {
+        var _activity$attachments2;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        activity === null || activity === void 0 ? void 0 : (_activity$attachments2 = activity.attachments) === null || _activity$attachments2 === void 0 ? void 0 : _activity$attachments2.forEach(attachment => {
+          const {
+            thumbnailUrl,
+            contentUrl,
+            contentType
+          } = attachment;
+          if (contentType === Constants.GifContentType && thumbnailUrl !== contentUrl) {
+            attachment.thumbnailUrl = contentUrl;
+          }
+        });
+      }
+    }
+    return next(action);
+  };
+};
+export default gifUploadMiddleware;

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

@@ -0,0 +1,40 @@
+/******
+ * HTMLPlayerMiddleware
+ * 
+ * Ensures that video/audio attachment are properly rendered.
+ ******/
+
+import { Constants } from "../../../../../common/Constants";
+import { WebChatActionType } from "../../enums/WebChatActionType";
+const disableHTMLPlayerDownloadButton = htmlTag => {
+  setTimeout(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const elements = document.getElementsByTagName(htmlTag);
+    for (let index = 0; index < elements.length; index++) {
+      if (!elements[index].getAttribute(Constants.controlsList)) {
+        elements[index].setAttribute(Constants.controlsList, Constants.nodownload);
+      } else {
+        if (elements[index].getAttribute(Constants.controlsList).indexOf(Constants.nodownload) === -1) {
+          const currentControlsListValue = elements[index].getAttribute(Constants.controlsList);
+          elements[index].setAttribute(Constants.controlsList, `${currentControlsListValue} ${Constants.nodownload}`);
+        }
+      }
+    }
+  }, 500);
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+const htmlPlayerMiddleware = _ref => {
+  let {
+    dispatch
+  } = _ref;
+  return next => action => {
+    var _action$payload, _action$payload$activ, _action$payload$activ2;
+    if (action.type === WebChatActionType.DIRECT_LINE_INCOMING_ACTIVITY && ((_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$activ2 = _action$payload$activ.attachments) === null || _action$payload$activ2 === void 0 ? void 0 : _action$payload$activ2.length) > 0) {
+      disableHTMLPlayerDownloadButton(Constants.video);
+      disableHTMLPlayerDownloadButton(Constants.audio);
+    }
+    return next(action);
+  };
+};
+export default htmlPlayerMiddleware;