@microsoft/omnichannel-chat-widget 0.1.0-main.07f52ee

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

@@ -0,0 +1,163 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createActivityMiddleware = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Constants = require("../../../../../common/Constants");
+
+var _DirectLineActivityType = require("../../enums/DirectLineActivityType");
+
+var _DirectLineSenderRole = require("../../enums/DirectLineSenderRole");
+
+var _MessageType = require("../../enums/MessageType");
+
+var _defaultSystemMessageStyles = require("./defaultStyles/defaultSystemMessageStyles");
+
+var _defaultUserMessageStyles = require("./defaultStyles/defaultUserMessageStyles");
+
+var _utils = require("../../../../../common/utils");
+
+var _TelemetryHelper = require("../../../../../common/telemetry/TelemetryHelper");
+
+var _TelemetryConstants = require("../../../../../common/telemetry/TelemetryConstants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/******
+ * ActivityMiddleware
+ * 
+ * This middleware handles each message bubble in a default Microsoft LiveChatWidget approach. It does the following processing:
+ * 1. Renders system messages differently, according to Microsoft LiveChatWidget styles
+ * 2. Changes the font size of user messages
+ * 3. Decodes certain html characters that came through from chat services
+ * 4. Triggers end conversation sequence when the chat thread is deleted
+ ******/
+const loggedSystemMessages = new Array(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+const handleThreadUpdate = channelData => {
+  var _channelData$properti, _channelData$properti2;
+
+  _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+    Event: _TelemetryConstants.TelemetryEvent.IC3ThreadUpdateEventReceived,
+    Description: "IC3 ThreadUpdateEvent Received"
+  });
+
+  const postConversationEndedAction = () => {
+    _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.ConversationEndedThreadEventReceived,
+      Description: "Conversation is ended by agent side or by timeout."
+    });
+  }; // If the Thread is deleted, then display post conversation survey if enabled.
+
+
+  const isThreadDeleted = (channelData === null || channelData === void 0 ? void 0 : (_channelData$properti = channelData.properties) === null || _channelData$properti === void 0 ? void 0 : (_channelData$properti2 = _channelData$properti.isdeleted) === null || _channelData$properti2 === void 0 ? void 0 : _channelData$properti2.toLowerCase()) === _Constants.Constants.true;
+
+  if (isThreadDeleted) {
+    postConversationEndedAction();
+    return;
+  } //check if customer is still in the thread
+
+
+  if (channelData.members && channelData.members.length > 0) {
+    for (let i = 0; i < channelData.members.length; i++) {
+      const id = channelData.members[i].id;
+      const tag = channelData.members[i].tag; // In case of ACS customer is not removed from thread and has "left" tag
+
+      if (id.startsWith(_Constants.Constants.visitorIdPrefix) && tag !== _Constants.Constants.left) {
+        return;
+      }
+    }
+  }
+
+  postConversationEndedAction();
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+const handleSystemMessage = (next, args, card, systemMessageStyleProps) => {
+  var _card$activity, _card$activity$channe, _card$activity$channe2, _card$activity2, _card$activity2$chann, _card$activity3, _card$activity3$chann, _card$activity3$chann2, _card$activity4, _card$activity4$chann, _card$activity5, _card$activity5$chann, _card$nextVisibleActi, _card$nextVisibleActi2, _card$activity6, _card$activity6$chann, _card$activity7, _card$nextVisibleActi3, _card$activity8;
+
+  const systemMessageStyles = { ..._defaultSystemMessageStyles.defaultSystemMessageStyles,
+    ...systemMessageStyleProps
+  };
+
+  if ((_card$activity = card.activity) !== null && _card$activity !== void 0 && (_card$activity$channe = _card$activity.channelData) !== null && _card$activity$channe !== void 0 && (_card$activity$channe2 = _card$activity$channe.tags) !== null && _card$activity$channe2 !== void 0 && _card$activity$channe2.includes(_Constants.Constants.averageWaitTimeMessageTag) && loggedSystemMessages.indexOf((_card$activity2 = card.activity) === null || _card$activity2 === void 0 ? void 0 : (_card$activity2$chann = _card$activity2.channelData) === null || _card$activity2$chann === void 0 ? void 0 : _card$activity2$chann.clientmessageid) < 0) {
+    _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.AverageWaitTimeMessageRecieved,
+      Description: "Average wait time message was received"
+    });
+
+    loggedSystemMessages.push(card.activity.channelData.clientmessageid);
+  }
+
+  if ((_card$activity3 = card.activity) !== null && _card$activity3 !== void 0 && (_card$activity3$chann = _card$activity3.channelData) !== null && _card$activity3$chann !== void 0 && (_card$activity3$chann2 = _card$activity3$chann.tags) !== null && _card$activity3$chann2 !== void 0 && _card$activity3$chann2.includes(_Constants.Constants.queuePositionMessageTag) && loggedSystemMessages.indexOf((_card$activity4 = card.activity) === null || _card$activity4 === void 0 ? void 0 : (_card$activity4$chann = _card$activity4.channelData) === null || _card$activity4$chann === void 0 ? void 0 : _card$activity4$chann.clientmessageid) < 0) {
+    _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.QueuePositionMessageRecieved,
+      Description: "Queue position message was received"
+    });
+
+    loggedSystemMessages.push(card.activity.channelData.clientmessageid);
+  }
+
+  if ((_card$activity5 = card.activity) !== null && _card$activity5 !== void 0 && (_card$activity5$chann = _card$activity5.channelData) !== null && _card$activity5$chann !== void 0 && _card$activity5$chann.clientmessageid && ((_card$nextVisibleActi = card.nextVisibleActivity) === null || _card$nextVisibleActi === void 0 ? void 0 : (_card$nextVisibleActi2 = _card$nextVisibleActi.channelData) === null || _card$nextVisibleActi2 === void 0 ? void 0 : _card$nextVisibleActi2.clientmessageid) === ((_card$activity6 = card.activity) === null || _card$activity6 === void 0 ? void 0 : (_card$activity6$chann = _card$activity6.channelData) === null || _card$activity6$chann === void 0 ? void 0 : _card$activity6$chann.clientmessageid) || (_card$activity7 = card.activity) !== null && _card$activity7 !== void 0 && _card$activity7.messageid && ((_card$nextVisibleActi3 = card.nextVisibleActivity) === null || _card$nextVisibleActi3 === void 0 ? void 0 : _card$nextVisibleActi3.messageid) === ((_card$activity8 = card.activity) === null || _card$activity8 === void 0 ? void 0 : _card$activity8.messageid)) {
+    return () => false;
+  } // eslint-disable-next-line react/display-name, @typescript-eslint/no-explicit-any
+
+
+  return () => /*#__PURE__*/_react.default.createElement("div", {
+    key: card.activity.id,
+    style: systemMessageStyles,
+    "aria-hidden": "true"
+  }, card.activity.text);
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+const createActivityMiddleware = (systemMessageStyleProps, userMessageStyleProps) => () => next => function () {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  const [card] = args;
+
+  if (card.activity) {
+    var _card$activity$from, _card$activity$channe4, _card$activity$channe5;
+
+    if (((_card$activity$from = card.activity.from) === null || _card$activity$from === void 0 ? void 0 : _card$activity$from.role) === _DirectLineSenderRole.DirectLineSenderRole.Channel) {
+      var _card$activity$channe3;
+
+      if (((_card$activity$channe3 = card.activity.channelData) === null || _card$activity$channe3 === void 0 ? void 0 : _card$activity$channe3.type) === _MessageType.MessageTypes.Thread) {
+        handleThreadUpdate(card.activity.channelData);
+      }
+
+      return () => false;
+    }
+
+    if ((_card$activity$channe4 = card.activity.channelData) !== null && _card$activity$channe4 !== void 0 && (_card$activity$channe5 = _card$activity$channe4.tags) !== null && _card$activity$channe5 !== void 0 && _card$activity$channe5.includes(_Constants.Constants.systemMessageTag)) {
+      return handleSystemMessage(next, args, card, systemMessageStyleProps);
+    } else if (card.activity.text && card.activity.type === _DirectLineActivityType.DirectLineActivityType.Message) {
+      if (!card.activity.channelData.isHtmlEncoded && card.activity.channelId === _Constants.Constants.webchatChannelId) {
+        card.activity.text = (0, _utils.escapeHtml)(card.activity.text);
+        card.activity.channelData.isHtmlEncoded = true;
+      }
+
+      const userMessageStyles = { ..._defaultUserMessageStyles.defaultUserMessageStyles,
+        ...userMessageStyleProps
+      }; // eslint-disable-next-line react/display-name, @typescript-eslint/no-explicit-any
+
+      return function () {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: card.activity.from.role === _DirectLineSenderRole.DirectLineSenderRole.User ? _Constants.Constants.sentMessageClassName : _Constants.Constants.receivedMessageClassName,
+          style: userMessageStyles,
+          "aria-hidden": "true"
+        }, next(...args)(...arguments));
+      };
+    }
+  }
+
+  return next(...args);
+};
+
+exports.createActivityMiddleware = createActivityMiddleware;

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

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.activityStatusMiddleware = void 0;
+
+var _Constants = require("../../../../../common/Constants");
+
+var _DeliveredTimestamp = require("./timestamps/DeliveredTimestamp");
+
+var _NotDeliveredTimestamp = require("./timestamps/NotDeliveredTimestamp");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SendStatus = require("../../enums/SendStatus");
+
+var _SendingTimestamp = require("./timestamps/SendingTimestamp");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, react/display-name, @typescript-eslint/no-unused-vars
+const activityStatusMiddleware = () => next => args => {
+  const {
+    activity: {
+      channelData: {
+        tags
+      },
+      from: {
+        name,
+        role
+      },
+      timestamp
+    },
+    sendState,
+    sameTimestampGroup
+  } = args;
+  const current_tags = tags,
+        current_name = name,
+        current_role = role,
+        current_timestamp = timestamp;
+  let sameTimestampGroupTemp = sameTimestampGroup;
+
+  if (args[_Constants.WebChatMiddlewareConstants.nextVisibleActivity]) {
+    const {
+      nextVisibleActivity: {
+        from: {
+          name
+        },
+        timestamp
+      }
+    } = args; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+    const next_name = name,
+          next_timestamp = timestamp;
+    const timestampCurrentInMillisecond = Date.parse(current_timestamp);
+    const timestampNextInMillisecond = Date.parse(next_timestamp);
+
+    if (current_name !== next_name || timestampNextInMillisecond - timestampCurrentInMillisecond > _Constants.WebChatMiddlewareConstants.timeBetweenTimestampGroups) {
+      sameTimestampGroupTemp = false;
+    }
+  }
+
+  if (current_tags && current_tags.includes(_Constants.Constants.systemMessageTag) || sameTimestampGroupTemp && sendState === _SendStatus.SendStatus.Sent) {
+    return;
+  } else {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        padding: "2px"
+      }
+    }, sendState === _SendStatus.SendStatus.Sending && /*#__PURE__*/_react.default.createElement(_SendingTimestamp.SendingTimestamp, {
+      args: args
+    }), sendState === _SendStatus.SendStatus.SendFailed && /*#__PURE__*/_react.default.createElement(_NotDeliveredTimestamp.NotDeliveredTimestamp, {
+      args: args
+    }), sendState === _SendStatus.SendStatus.Sent && /*#__PURE__*/_react.default.createElement(_DeliveredTimestamp.DeliveredTimestamp, {
+      args: args,
+      role: current_role,
+      name: current_name
+    }));
+  }
+};
+
+exports.activityStatusMiddleware = activityStatusMiddleware;

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

@@ -0,0 +1,293 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Constants = require("../../../../../common/Constants");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _FileAttachmentIconManager = require("../../../common/utils/FileAttachmentIconManager");
+
+var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
+
+var _WebChatActionType = require("../../enums/WebChatActionType");
+
+var _defaultAtttachmentAdaptiveCardStyles = require("./defaultStyles/defaultAtttachmentAdaptiveCardStyles");
+
+var _defaultAttachmentContentStyles = require("./defaultStyles/defaultAttachmentContentStyles");
+
+var _defaultAttachmentDividerStyles = require("./defaultStyles/defaultAttachmentDividerStyles");
+
+var _defaultAttachmentDownloadIconStyles = require("./defaultStyles/defaultAttachmentDownloadIconStyles");
+
+var _defaultAttachmentFileNameStyles = require("./defaultStyles/defaultAttachmentFileNameStyles");
+
+var _defaultAtttachmentIconStyles = require("./defaultStyles/defaultAtttachmentIconStyles");
+
+var _defaultAttachmentProps = require("../../../common/defaultProps/defaultAttachmentProps");
+
+var _defaultAttachmentSizeStyles = require("./defaultStyles/defaultAttachmentSizeStyles");
+
+var _defaultAtttachmentStyles = require("./defaultStyles/defaultAtttachmentStyles");
+
+var _ = require("../../../../..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/******
+ * AttachmentMiddleware
+ * 
+ * Handles attachment downloading.
+ ******/
+const AttachmentContent = props => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: props.id,
+    style: props.style
+  }, props.children);
+};
+
+const AttachmentIcon = props => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: props.id,
+    style: props.style
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: props.src ?? (0, _FileAttachmentIconManager.getFileAttachmentIconData)("txt")
+  }));
+};
+
+const Attachment = props => {
+  var _state$domainStates$r, _state$domainStates$r2, _state$domainStates$r3, _state$domainStates$r4, _state$domainStates$r5, _state$domainStates$r6, _state$domainStates$r7, _state$domainStates$r8, _state$domainStates$r9;
+
+  const {
+    iconData,
+    imageCard,
+    textCard,
+    renderer
+  } = props;
+  const [state] = (0, _.useChatContextStore)();
+  const attachmentId = ((_state$domainStates$r = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r === void 0 ? void 0 : (_state$domainStates$r2 = _state$domainStates$r.attachmentProps) === null || _state$domainStates$r2 === void 0 ? void 0 : _state$domainStates$r2.webChatAttachmentId) ?? _defaultAttachmentProps.defaultAttachmentProps.webChatAttachmentId;
+  const attachmentDividerStyles = { ..._defaultAttachmentDividerStyles.defaultAttachmentDividerStyles,
+    ...((_state$domainStates$r3 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r3 === void 0 ? void 0 : _state$domainStates$r3.attachmentDividerStyles)
+  };
+  const attachmentIconStyles = { ..._defaultAtttachmentIconStyles.defaultAttachmentIconStyles,
+    ...((_state$domainStates$r4 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r4 === void 0 ? void 0 : _state$domainStates$r4.attachmentIconStyles)
+  };
+  const attachmentStyles = { ..._defaultAtttachmentStyles.defaultAttachmentStyles,
+    ...((_state$domainStates$r5 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r5 === void 0 ? void 0 : _state$domainStates$r5.attachmentStyles)
+  };
+  const attachmentSizeStylesString = Object.entries({ ..._defaultAttachmentSizeStyles.defaultAttachmentSizeStyles,
+    ...((_state$domainStates$r6 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r6 === void 0 ? void 0 : _state$domainStates$r6.attachmentSizeStyles)
+  }).map(_ref => {
+    let [k, v] = _ref;
+    return `${k.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)}:${v}`;
+  }).join(";");
+  const attachmentContentStylesString = Object.entries({ ..._defaultAttachmentContentStyles.defaultAttachmentContentStyles,
+    ...((_state$domainStates$r7 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r7 === void 0 ? void 0 : _state$domainStates$r7.attachmentContentStyles)
+  }).map(_ref2 => {
+    let [k, v] = _ref2;
+    return `${k.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)}:${v}`;
+  }).join(";");
+  const attachmentFileNameStylesString = Object.entries({ ..._defaultAttachmentFileNameStyles.defaultAttachmentFileNameStyles,
+    ...((_state$domainStates$r8 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r8 === void 0 ? void 0 : _state$domainStates$r8.attachmentFileNameStyles)
+  }).map(_ref3 => {
+    let [k, v] = _ref3;
+    return `${k.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)}:${v}`;
+  }).join(";");
+  const attachmentDownloadIconStylesString = Object.entries({ ..._defaultAttachmentDownloadIconStyles.defaultAttachmentDownloadIconStyles,
+    ...((_state$domainStates$r9 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r9 === void 0 ? void 0 : _state$domainStates$r9.attachmentDownloadIconStyles)
+  }).map(_ref4 => {
+    let [k, v] = _ref4;
+    return `${k.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)}:${v}`;
+  }).join(";");
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("style", null, `
+            .webchat__fileContent__size { ${attachmentSizeStylesString} }
+            .webchat__fileContent { ${attachmentContentStylesString} }
+            .webchat__fileContent__fileName { ${attachmentFileNameStylesString} }
+            .webchat__fileContent__downloadIcon { ${attachmentDownloadIconStylesString} }
+        `), /*#__PURE__*/_react.default.createElement("div", {
+    dir: state.domainStates.globalDir
+  }, imageCard && renderer(imageCard), imageCard && /*#__PURE__*/_react.default.createElement("hr", {
+    id: attachmentId + "-divider",
+    style: attachmentDividerStyles
+  }), /*#__PURE__*/_react.default.createElement(AttachmentContent, {
+    attachment: textCard.attachment,
+    id: attachmentId,
+    style: attachmentStyles
+  }, /*#__PURE__*/_react.default.createElement(AttachmentIcon, {
+    src: iconData,
+    id: attachmentId + "-icon",
+    style: attachmentIconStyles
+  }), textCard && renderer(textCard))));
+};
+/**
+* Patch card with different attachment data.
+* @param card
+* @param newAttachment
+*/
+
+
+const patchAttachment = (card, newAttachment) => {
+  const {
+    activity,
+    attachment
+  } = card;
+  const patchedAttachment = Object.assign({}, attachment);
+  patchedAttachment.contentType = newAttachment.contentType;
+  patchedAttachment.thumbnailUrl = newAttachment.thumbnailUrl;
+  const patchedAttachments = activity.attachments.map(target => target === attachment ? patchedAttachment : target);
+  const patchedActivity = Object.assign({}, activity);
+  patchedActivity.attachments = patchedAttachments;
+  return {
+    activity: patchedActivity,
+    attachment: patchedAttachment
+  };
+};
+
+const genPreviewCardWithAttachment = (card, iconData, next) => {
+  const patchedTextCard = patchAttachment(card, {
+    contentType: _Constants.MimeTypes.UnknownFileType,
+    thumbnailUrl: undefined
+  });
+  return /*#__PURE__*/_react.default.createElement(Attachment, {
+    iconData: iconData,
+    imageCard: card,
+    textCard: patchedTextCard,
+    renderer: next
+  });
+};
+
+const createAttachmentMiddleware = enableInlinePlaying => {
+  // eslint-disable-next-line react/display-name   
+  const attachmentMiddleware = () => next => function () {
+    var _state$domainStates$r10, _state$domainStates$r11, _state$domainStates$r12, _card$activity$channe;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    const [card] = args;
+
+    if (!(card !== null && card !== void 0 && card.activity)) {
+      return next(...args);
+    }
+
+    const {
+      activity: {
+        attachments
+      },
+      attachment
+    } = card; // No attachment
+
+    if (!attachments || !attachments.length || !attachment) {
+      return next(...args);
+    } // Check for Adaptive cards
+    // eslint-disable-next-line prefer-const
+
+
+    let {
+      content,
+      contentType
+    } = attachment || {
+      content: "",
+      contentType: ""
+    };
+    let {
+      type
+    } = content || {
+      type: ""
+    };
+
+    if (!type && content && _Constants.Constants.supportedAdaptiveCardContentTypes.indexOf(contentType) >= 0) {
+      try {
+        content = JSON.parse(content);
+        type = content.type;
+        card.attachment.content = content;
+      } catch (e) {
+        const errorData = "Unable to parse the adaptive card format";
+
+        _omnichannelChatComponents.BroadcastService.postMessage({
+          eventName: "InvalidAdaptiveCardFormat",
+          payload: {
+            Message: errorData,
+            ExceptionDetails: e
+          }
+        });
+      }
+    }
+
+    const [state] = (0, _.useChatContextStore)();
+    const attachmentId = ((_state$domainStates$r10 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r10 === void 0 ? void 0 : (_state$domainStates$r11 = _state$domainStates$r10.attachmentProps) === null || _state$domainStates$r11 === void 0 ? void 0 : _state$domainStates$r11.adaptiveCardAttachmentId) ?? _defaultAttachmentProps.defaultAttachmentProps.adaptiveCardAttachmentId;
+    const atttachmentAdaptiveCardStyles = { ..._defaultAtttachmentAdaptiveCardStyles.defaultAttachmentAdaptiveCardStyles,
+      ...((_state$domainStates$r12 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r12 === void 0 ? void 0 : _state$domainStates$r12.attachmentAdaptiveCardStyles)
+    };
+
+    if (type === _Constants.WebChatMiddlewareConstants.adaptiveCard || _Constants.Constants.supportedAdaptiveCardContentTypes.indexOf(contentType) >= 0) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        id: attachmentId,
+        style: atttachmentAdaptiveCardStyles
+      }, next(...args));
+    }
+
+    if ((_card$activity$channe = card.activity.channelData) !== null && _card$activity$channe !== void 0 && _card$activity$channe.middlewareData) {
+      attachment.contentUrl = card.activity.channelData.middlewareData[attachment.name];
+    } else if (attachment !== null && attachment !== void 0 && attachment.tempContentUrl) {
+      attachment.contentUrl = attachment.tempContentUrl;
+    }
+
+    const fileExtension = attachment.name.substring(attachment.name.lastIndexOf(".") + 1, attachment.name.length) || attachment.name;
+
+    const imageExtension = _Constants.Constants.imageRegex.test(attachment.name);
+
+    const audioExtension = _Constants.Constants.audioMediaRegex.test(attachment.name);
+
+    const videoExtension = _Constants.Constants.videoMediaRegex.test(attachment.name);
+
+    const iconData = (0, _FileAttachmentIconManager.getFileAttachmentIconData)(fileExtension);
+
+    if (imageExtension) {
+      return genPreviewCardWithAttachment(card, iconData, next);
+    }
+
+    if (audioExtension || videoExtension) {
+      if (enableInlinePlaying && card.activity.actionType && card.activity.actionType === _WebChatActionType.WebChatActionType.DIRECT_LINE_INCOMING_ACTIVITY && (0, _FileAttachmentIconManager.isInlineMediaSupported)(attachment.name)) {
+        return genPreviewCardWithAttachment(card, iconData, next);
+      }
+
+      return /*#__PURE__*/_react.default.createElement(Attachment, {
+        iconData: iconData,
+        textCard: patchAttachment(card, {
+          contentType: _Constants.MimeTypes.UnknownFileType,
+          thumbnailUrl: undefined
+        }),
+        renderer: next
+      });
+    }
+
+    if (fileExtension === "txt") {
+      return /*#__PURE__*/_react.default.createElement(Attachment, {
+        iconData: iconData,
+        textCard: patchAttachment(card, {
+          contentType: _Constants.MimeTypes.UnknownFileType,
+          thumbnailUrl: undefined
+        }),
+        renderer: next
+      });
+    }
+
+    return /*#__PURE__*/_react.default.createElement(Attachment, {
+      iconData: iconData,
+      textCard: card,
+      renderer: next
+    });
+  };
+
+  return attachmentMiddleware;
+};
+
+var _default = createAttachmentMiddleware;
+exports.default = _default;

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

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAvatarMiddleware = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Constants = require("../../../../../common/Constants");
+
+var _defaultAvatarStyles = require("./defaultStyles/defaultAvatarStyles");
+
+var _defaultAvatarTextStyles = require("./defaultStyles/defaultAvatarTextStyles");
+
+var _utils = require("../../../../../common/utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/******
+ * AvatarMiddleware
+ * 
+ * This middleware handles the avatar icon for each non-system message. It does the following processing:
+ * 1. Renders the first two letters of the sender as the profile pic
+ ******/
+// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+const createAvatarMiddleware = (avatarStyleProps, avatarTextStyleProps) => () => next => function () {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  const [params] = args;
+  const {
+    activity: {
+      channelData: {
+        tags
+      },
+      from: {
+        name
+      }
+    },
+    fromUser
+  } = params;
+
+  if (fromUser !== false || tags && tags.includes(_Constants.Constants.systemMessageTag)) {
+    return false;
+  }
+
+  const avatarStyles = { ..._defaultAvatarStyles.defaultAvatarStyles,
+    ...avatarStyleProps
+  };
+  const avatarTextStyles = { ..._defaultAvatarTextStyles.defaultAvatarTextStyles,
+    ...avatarTextStyleProps
+  }; // eslint-disable-next-line react/display-name
+
+  return () => /*#__PURE__*/_react.default.createElement("div", {
+    style: avatarStyles
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    style: avatarTextStyles
+  }, " ", (0, _utils.getIconText)(name), " "));
+};
+
+exports.createAvatarMiddleware = createAvatarMiddleware;

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

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

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultAttachmentDividerStyles = void 0;
+const defaultAttachmentDividerStyles = {
+  margin: "0",
+  height: "1px",
+  border: "0px",
+  backgroundColor: "#E8EAEC"
+};
+exports.defaultAttachmentDividerStyles = defaultAttachmentDividerStyles;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultAttachmentDownloadIconStyles = void 0;
+const defaultAttachmentDownloadIconStyles = {
+  height: "12px",
+  width: "12px",
+  marginLeft: "auto !important",
+  padding: "2px !important",
+  fill: "#000000 !important"
+};
+exports.defaultAttachmentDownloadIconStyles = defaultAttachmentDownloadIconStyles;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultAttachmentFileNameStyles = void 0;
+const defaultAttachmentFileNameStyles = {
+  minHeight: "15px",
+  marginLeft: "5px",
+  marginRight: "5px",
+  color: "#000000 !important"
+};
+exports.defaultAttachmentFileNameStyles = defaultAttachmentFileNameStyles;

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultAttachmentSizeStyles = void 0;
+const defaultAttachmentSizeStyles = {
+  display: "none"
+};
+exports.defaultAttachmentSizeStyles = defaultAttachmentSizeStyles;