@microsoft/omnichannel-chat-widget 0.1.0-main.eb80fb1 → 0.1.0-main.ebfc563

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

@@ -5,66 +5,27 @@
  * 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
  ******/
-import React from "react";
+
+import { LogLevel, TelemetryEvent } from "../../../../../common/telemetry/TelemetryConstants";
 import { Constants } from "../../../../../common/Constants";
 import { DirectLineActivityType } from "../../enums/DirectLineActivityType";
 import { DirectLineSenderRole } from "../../enums/DirectLineSenderRole";
 import { MessageTypes } from "../../enums/MessageType";
+import React from "react";
+import { TelemetryHelper } from "../../../../../common/telemetry/TelemetryHelper";
 import { defaultSystemMessageStyles } from "./defaultStyles/defaultSystemMessageStyles";
 import { defaultUserMessageStyles } from "./defaultStyles/defaultUserMessageStyles";
 import { escapeHtml } from "../../../../../common/utils";
-import { TelemetryHelper } from "../../../../../common/telemetry/TelemetryHelper";
-import { LogLevel, TelemetryEvent } from "../../../../../common/telemetry/TelemetryConstants";
-const loggedSystemMessages = new Array(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-const handleThreadUpdate = channelData => {
-  var _channelData$properti, _channelData$properti2;
-
-  TelemetryHelper.logActionEvent(LogLevel.INFO, {
-    Event: TelemetryEvent.IC3ThreadUpdateEventReceived,
-    Description: "IC3 ThreadUpdateEvent Received"
-  });
-
-  const postConversationEndedAction = () => {
-    TelemetryHelper.logActionEvent(LogLevel.INFO, {
-      Event: 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.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.visitorIdPrefix) && tag !== Constants.left) {
-        return;
-      }
-    }
-  }
-
-  postConversationEndedAction();
-}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+const loggedSystemMessages = new Array();
 
+// 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,
+  const systemMessageStyles = {
+    ...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.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.logActionEvent(LogLevel.INFO, {
       Event: TelemetryEvent.AverageWaitTimeMessageRecieved,
@@ -72,7 +33,6 @@ const handleSystemMessage = (next, args, card, systemMessageStyleProps) => {
     });
     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.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.logActionEvent(LogLevel.INFO, {
       Event: TelemetryEvent.QueuePositionMessageRecieved,
@@ -80,52 +40,61 @@ const handleSystemMessage = (next, args, card, systemMessageStyleProps) => {
     });
     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
-
+  }
 
+  // eslint-disable-next-line react/display-name, @typescript-eslint/no-explicit-any
   return () => /*#__PURE__*/React.createElement("div", {
     key: card.activity.id,
     style: systemMessageStyles,
     "aria-hidden": "true"
   }, card.activity.text);
-}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isTagIncluded = (card, tag) => {
+  return isDataTagsPresent(card) && card.activity.channelData.tags.includes(tag);
+};
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isDataTagsPresent = card => {
+  return card && card.activity && card.activity.channelData && card.activity.channelData.tags && card.activity.channelData.tags.length > 0;
+};
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export 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;
-
+    var _card$activity$from;
     if (((_card$activity$from = card.activity.from) === null || _card$activity$from === void 0 ? void 0 : _card$activity$from.role) === 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) === MessageTypes.Thread) {
-        handleThreadUpdate(card.activity.channelData);
+        TelemetryHelper.logActionEvent(LogLevel.INFO, {
+          Event: TelemetryEvent.IC3ThreadUpdateEventReceived,
+          Description: "IC3 ThreadUpdateEvent Received"
+        });
       }
-
       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.systemMessageTag)) {
+    if (isTagIncluded(card, Constants.hiddenTag)) {
+      return () => false;
+    }
+    if (isTagIncluded(card, Constants.systemMessageTag)) {
       return handleSystemMessage(next, args, card, systemMessageStyleProps);
     } else if (card.activity.text && card.activity.type === DirectLineActivityType.Message) {
       if (!card.activity.channelData.isHtmlEncoded && card.activity.channelId === Constants.webchatChannelId) {
         card.activity.text = escapeHtml(card.activity.text);
         card.activity.channelData.isHtmlEncoded = true;
       }
-
-      const userMessageStyles = { ...defaultUserMessageStyles,
+      const userMessageStyles = {
+        ...defaultUserMessageStyles,
         ...userMessageStyleProps
-      }; // eslint-disable-next-line react/display-name, @typescript-eslint/no-explicit-any
-
+      };
+      // eslint-disable-next-line react/display-name, @typescript-eslint/no-explicit-any
       return function () {
         return /*#__PURE__*/React.createElement("div", {
           className: card.activity.from.role === DirectLineSenderRole.User ? Constants.sentMessageClassName : Constants.receivedMessageClassName,
@@ -135,6 +104,5 @@ export const createActivityMiddleware = (systemMessageStyleProps, userMessageSty
       };
     }
   }
-
   return next(...args);
 };

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

@@ -3,8 +3,9 @@ import { DeliveredTimestamp } from "./timestamps/DeliveredTimestamp";
 import { NotDeliveredTimestamp } from "./timestamps/NotDeliveredTimestamp";
 import React from "react";
 import { SendStatus } from "../../enums/SendStatus";
-import { SendingTimestamp } from "./timestamps/SendingTimestamp"; // eslint-disable-next-line @typescript-eslint/no-explicit-any, react/display-name, @typescript-eslint/no-unused-vars
+import { SendingTimestamp } from "./timestamps/SendingTimestamp";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, react/display-name, @typescript-eslint/no-unused-vars
 export const activityStatusMiddleware = () => next => args => {
   const {
     activity: {
@@ -21,11 +22,10 @@ export const activityStatusMiddleware = () => next => args => {
     sameTimestampGroup
   } = args;
   const current_tags = tags,
-        current_name = name,
-        current_role = role,
-        current_timestamp = timestamp;
+    current_name = name,
+    current_role = role,
+    current_timestamp = timestamp;
   let sameTimestampGroupTemp = sameTimestampGroup;
-
   if (args[WebChatMiddlewareConstants.nextVisibleActivity]) {
     const {
       nextVisibleActivity: {
@@ -34,18 +34,16 @@ export const activityStatusMiddleware = () => next => args => {
         },
         timestamp
       }
-    } = args; // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+    } = args;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const next_name = name,
-          next_timestamp = timestamp;
+      next_timestamp = timestamp;
     const timestampCurrentInMillisecond = Date.parse(current_timestamp);
     const timestampNextInMillisecond = Date.parse(next_timestamp);
-
     if (current_name !== next_name || timestampNextInMillisecond - timestampCurrentInMillisecond > WebChatMiddlewareConstants.timeBetweenTimestampGroups) {
       sameTimestampGroupTemp = false;
     }
   }
-
   if (current_tags && current_tags.includes(Constants.systemMessageTag) || sameTimestampGroupTemp && sendState === SendStatus.Sent) {
     return;
   } else {
@@ -53,14 +51,14 @@ export const activityStatusMiddleware = () => next => args => {
       style: {
         padding: "2px"
       }
-    }, sendState === SendStatus.Sending && /*#__PURE__*/React.createElement(SendingTimestamp, {
-      args: args
-    }), sendState === SendStatus.SendFailed && /*#__PURE__*/React.createElement(NotDeliveredTimestamp, {
+    }, sendState === SendStatus.Sending && /*#__PURE__*/React.createElement(SendingTimestamp, null), sendState === SendStatus.SendFailed && /*#__PURE__*/React.createElement(NotDeliveredTimestamp, {
       args: args
     }), sendState === SendStatus.Sent && /*#__PURE__*/React.createElement(DeliveredTimestamp, {
       args: args,
       role: current_role,
       name: current_name
-    }));
+    }))
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ;
   }
 };

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

@@ -1,13 +1,14 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-
 /******
  * AttachmentMiddleware
  * 
  * Handles attachment downloading.
  ******/
+
 import { Constants, MimeTypes, WebChatMiddlewareConstants } from "../../../../../common/Constants";
 import React from "react";
 import { getFileAttachmentIconData, isInlineMediaSupported } from "../../../common/utils/FileAttachmentIconManager";
+import { BroadcastEvent } from "../../../../../common/telemetry/TelemetryConstants";
 import { BroadcastService } from "@microsoft/omnichannel-chat-components";
 import { WebChatActionType } from "../../enums/WebChatActionType";
 import { defaultAttachmentAdaptiveCardStyles } from "./defaultStyles/defaultAtttachmentAdaptiveCardStyles";
@@ -20,14 +21,12 @@ import { defaultAttachmentProps } from "../../../common/defaultProps/defaultAtta
 import { defaultAttachmentSizeStyles } from "./defaultStyles/defaultAttachmentSizeStyles";
 import { defaultAttachmentStyles } from "./defaultStyles/defaultAtttachmentStyles";
 import { useChatContextStore } from "../../../../..";
-
 const AttachmentContent = props => {
   return /*#__PURE__*/React.createElement("div", {
     id: props.id,
     style: props.style
   }, props.children);
 };
-
 const AttachmentIcon = props => {
   return /*#__PURE__*/React.createElement("div", {
     id: props.id,
@@ -36,10 +35,8 @@ const AttachmentIcon = props => {
     src: props.src ?? 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,
@@ -48,34 +45,41 @@ const Attachment = props => {
   } = props;
   const [state] = 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.webChatAttachmentId;
-  const attachmentDividerStyles = { ...defaultAttachmentDividerStyles,
+  const attachmentDividerStyles = {
+    ...defaultAttachmentDividerStyles,
     ...((_state$domainStates$r3 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r3 === void 0 ? void 0 : _state$domainStates$r3.attachmentDividerStyles)
   };
-  const attachmentIconStyles = { ...defaultAttachmentIconStyles,
+  const attachmentIconStyles = {
+    ...defaultAttachmentIconStyles,
     ...((_state$domainStates$r4 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r4 === void 0 ? void 0 : _state$domainStates$r4.attachmentIconStyles)
   };
-  const attachmentStyles = { ...defaultAttachmentStyles,
+  const attachmentStyles = {
+    ...defaultAttachmentStyles,
     ...((_state$domainStates$r5 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r5 === void 0 ? void 0 : _state$domainStates$r5.attachmentStyles)
   };
-  const attachmentSizeStylesString = Object.entries({ ...defaultAttachmentSizeStyles,
+  const attachmentSizeStylesString = Object.entries({
+    ...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,
+  const attachmentContentStylesString = Object.entries({
+    ...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,
+  const attachmentFileNameStylesString = Object.entries({
+    ...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,
+  const attachmentDownloadIconStylesString = Object.entries({
+    ...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;
@@ -101,13 +105,12 @@ const Attachment = props => {
     style: attachmentIconStyles
   }), textCard && renderer(textCard))));
 };
+
 /**
 * Patch card with different attachment data.
 * @param card
 * @param newAttachment
 */
-
-
 const patchAttachment = (card, newAttachment) => {
   const {
     activity,
@@ -124,7 +127,6 @@ const patchAttachment = (card, newAttachment) => {
     attachment: patchedAttachment
   };
 };
-
 const genPreviewCardWithAttachment = (card, iconData, next) => {
   const patchedTextCard = patchAttachment(card, {
     contentType: MimeTypes.UnknownFileType,
@@ -137,35 +139,30 @@ const genPreviewCardWithAttachment = (card, iconData, next) => {
     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
-
+    } = card;
+    // No attachment
     if (!attachments || !attachments.length || !attachment) {
       return next(...args);
-    } // Check for Adaptive cards
-    // eslint-disable-next-line prefer-const
-
+    }
 
+    // Check for Adaptive cards
+    // eslint-disable-next-line prefer-const
     let {
       content,
       contentType
@@ -178,7 +175,6 @@ const createAttachmentMiddleware = enableInlinePlaying => {
     } = content || {
       type: ""
     };
-
     if (!type && content && Constants.supportedAdaptiveCardContentTypes.indexOf(contentType) >= 0) {
       try {
         content = JSON.parse(content);
@@ -187,7 +183,7 @@ const createAttachmentMiddleware = enableInlinePlaying => {
       } catch (e) {
         const errorData = "Unable to parse the adaptive card format";
         BroadcastService.postMessage({
-          eventName: "InvalidAdaptiveCardFormat",
+          eventName: BroadcastEvent.InvalidAdaptiveCardFormat,
           payload: {
             Message: errorData,
             ExceptionDetails: e
@@ -195,41 +191,35 @@ const createAttachmentMiddleware = enableInlinePlaying => {
         });
       }
     }
-
     const [state] = 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.adaptiveCardAttachmentId;
-    const atttachmentAdaptiveCardStyles = { ...defaultAttachmentAdaptiveCardStyles,
+    const atttachmentAdaptiveCardStyles = {
+      ...defaultAttachmentAdaptiveCardStyles,
       ...((_state$domainStates$r12 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r12 === void 0 ? void 0 : _state$domainStates$r12.attachmentAdaptiveCardStyles)
     };
-
     if (type === WebChatMiddlewareConstants.adaptiveCard || Constants.supportedAdaptiveCardContentTypes.indexOf(contentType) >= 0) {
       return /*#__PURE__*/React.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.imageRegex.test(attachment.name);
     const audioExtension = Constants.audioMediaRegex.test(attachment.name);
     const videoExtension = Constants.videoMediaRegex.test(attachment.name);
     const iconData = getFileAttachmentIconData(fileExtension);
-
     if (imageExtension) {
       return genPreviewCardWithAttachment(card, iconData, next);
     }
-
     if (audioExtension || videoExtension) {
       if (enableInlinePlaying && card.activity.actionType && card.activity.actionType === WebChatActionType.DIRECT_LINE_INCOMING_ACTIVITY && isInlineMediaSupported(attachment.name)) {
         return genPreviewCardWithAttachment(card, iconData, next);
       }
-
       return /*#__PURE__*/React.createElement(Attachment, {
         iconData: iconData,
         textCard: patchAttachment(card, {
@@ -239,8 +229,8 @@ const createAttachmentMiddleware = enableInlinePlaying => {
         renderer: next
       });
     }
-
-    if (fileExtension === "txt") {
+    const isUnknownImageObject = contentType.toLowerCase().includes("image") && !imageExtension;
+    if (fileExtension === "txt" || isUnknownImageObject) {
       return /*#__PURE__*/React.createElement(Attachment, {
         iconData: iconData,
         textCard: patchAttachment(card, {
@@ -250,15 +240,12 @@ const createAttachmentMiddleware = enableInlinePlaying => {
         renderer: next
       });
     }
-
     return /*#__PURE__*/React.createElement(Attachment, {
       iconData: iconData,
       textCard: card,
       renderer: next
     });
   };
-
   return attachmentMiddleware;
 };
-
 export default createAttachmentMiddleware;

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

@@ -4,17 +4,18 @@
  * 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
  ******/
+
 import React from "react";
 import { Constants } from "../../../../../common/Constants";
 import { defaultAvatarStyles } from "./defaultStyles/defaultAvatarStyles";
 import { defaultAvatarTextStyles } from "./defaultStyles/defaultAvatarTextStyles";
-import { getIconText } from "../../../../../common/utils"; // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+import { getIconText } from "../../../../../common/utils";
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
 export 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: {
@@ -27,18 +28,18 @@ export const createAvatarMiddleware = (avatarStyleProps, avatarTextStyleProps) =
     },
     fromUser
   } = params;
-
   if (fromUser !== false || tags && tags.includes(Constants.systemMessageTag)) {
     return false;
   }
-
-  const avatarStyles = { ...defaultAvatarStyles,
+  const avatarStyles = {
+    ...defaultAvatarStyles,
     ...avatarStyleProps
   };
-  const avatarTextStyles = { ...defaultAvatarTextStyles,
+  const avatarTextStyles = {
+    ...defaultAvatarTextStyles,
     ...avatarTextStyleProps
-  }; // eslint-disable-next-line react/display-name
-
+  };
+  // eslint-disable-next-line react/display-name
   return () => /*#__PURE__*/React.createElement("div", {
     style: avatarStyles
   }, /*#__PURE__*/React.createElement("p", {

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

@@ -0,0 +1,34 @@
+import { BotMagicCodeStore } from "../../BotMagicCodeStore";
+var CardActionType;
+(function (CardActionType) {
+  CardActionType["OpenUrl"] = "openUrl";
+  CardActionType["SignIn"] = "signin";
+})(CardActionType || (CardActionType = {}));
+const validCardActionTypes = [CardActionType.OpenUrl, CardActionType.SignIn];
+const botOauthUrlRegex = /[\S]+.botframework.com\/api\/oauth\/signin\?signin=([\S]+)/;
+export const createCardActionMiddleware = botMagicCodeConfig => {
+  const cardActionMiddleware = () => next => function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    // eslint-disable-line @typescript-eslint/no-explicit-any
+    const [card] = args;
+    if (card.cardAction && validCardActionTypes.indexOf(card.cardAction.type) >= 0 && card.cardAction.value) {
+      // Override signin url only if fwdUrl is valid & feature is enabled
+      if ((botMagicCodeConfig === null || botMagicCodeConfig === void 0 ? void 0 : botMagicCodeConfig.disabled) === true && botMagicCodeConfig !== null && botMagicCodeConfig !== void 0 && botMagicCodeConfig.fwdUrl) {
+        const baseUrl = window.location.origin;
+        const result = botOauthUrlRegex.exec(card.cardAction.value);
+        if (result) {
+          BotMagicCodeStore.botOAuthSignInId = `${result[1]}`;
+        }
+
+        // fwdUrl must be on the same domain as the chat widget
+        if (botMagicCodeConfig !== null && botMagicCodeConfig !== void 0 && botMagicCodeConfig.fwdUrl.startsWith(baseUrl)) {
+          card.cardAction.value += `&fwdUrl=${botMagicCodeConfig.fwdUrl}`;
+        }
+      }
+    }
+    return next(...args);
+  };
+  return cardActionMiddleware;
+};

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/cardActionMiddleware.spec.js

@@ -0,0 +1,80 @@
+import "@testing-library/jest-dom/extend-expect";
+import { createCardActionMiddleware } from "./cardActionMiddleware";
+describe("cardActionMiddleware test", () => {
+  it("createCardActionMiddleware() with undefined botMagicCodeConfig should not change the sign in card url", () => {
+    const next = args => args; // eslint-disable-line @typescript-eslint/no-explicit-any
+    const signInUrl = "https://token.botframework.com/api/oauth/signin?signin=[signin]";
+    const args = {
+      cardAction: {
+        type: "signin",
+        value: signInUrl
+      }
+    };
+    const results = createCardActionMiddleware(undefined)()(next)(args);
+    expect(signInUrl).toEqual(results.cardAction.value);
+  });
+  it("createCardActionMiddleware() with botMagicCode enabled should not change the sign in card url", () => {
+    const botMagicCodeConfig = {
+      disabled: false
+    };
+    const next = args => args; // eslint-disable-line @typescript-eslint/no-explicit-any
+    const signInUrl = "https://token.botframework.com/api/oauth/signin?signin=[signin]";
+    const args = {
+      cardAction: {
+        type: "signin",
+        value: signInUrl
+      }
+    };
+    const results = createCardActionMiddleware(botMagicCodeConfig)()(next)(args);
+    expect(args.cardAction.value).toEqual(results.cardAction.value);
+  });
+  it("createCardActionMiddleware() with botMagicCode disabled & no fwdUrl should not change the sign in card url", () => {
+    const botMagicCodeConfig = {
+      disabled: true
+    };
+    const next = args => args; // eslint-disable-line @typescript-eslint/no-explicit-any
+    const signInUrl = "https://token.botframework.com/api/oauth/signin?signin=[signin]";
+    const args = {
+      cardAction: {
+        type: "signin",
+        value: signInUrl
+      }
+    };
+    const results = createCardActionMiddleware(botMagicCodeConfig)()(next)(args);
+    expect(args.cardAction.value).toEqual(results.cardAction.value);
+  });
+  it("createCardActionMiddleware() with botMagicCode disabled & fwdUrl should append the fwdUrl in the sign in card url", () => {
+    const botMagicCodeConfig = {
+      disabled: true,
+      fwdUrl: "http://localhost/forwarder.html"
+    };
+    const next = args => args; // eslint-disable-line @typescript-eslint/no-explicit-any
+    const signInUrl = "https://token.botframework.com/api/oauth/signin?signin=[signin]";
+    const args = {
+      cardAction: {
+        type: "signin",
+        value: signInUrl
+      }
+    };
+    const results = createCardActionMiddleware(botMagicCodeConfig)()(next)(args);
+    expect(signInUrl === results.cardAction.value).toBe(false);
+    expect(results.cardAction.value === `${signInUrl}&fwdUrl=${botMagicCodeConfig.fwdUrl}`).toBe(true);
+  });
+  it("createCardActionMiddleware() should not append fwdUrl if fwdUrl & sign in card url are not in the same domain", () => {
+    const botMagicCodeConfig = {
+      disabled: true,
+      fwdUrl: "https://localhost/forwarder.html"
+    };
+    const next = args => args; // eslint-disable-line @typescript-eslint/no-explicit-any
+    const signInUrl = "https://token.botframework.com/api/oauth/signin?signin=[signin]";
+    const args = {
+      cardAction: {
+        type: "signin",
+        value: signInUrl
+      }
+    };
+    const results = createCardActionMiddleware(botMagicCodeConfig)()(next)(args);
+    expect(signInUrl === results.cardAction.value).toBe(true);
+    expect(results.cardAction.value === `${signInUrl}&fwdUrl=${botMagicCodeConfig.fwdUrl}`).toBe(false);
+  });
+});

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

@@ -0,0 +1,3 @@
+export const defaultReceivedMessageAnchorStyles = {
+  color: "white"
+};

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

@@ -0,0 +1,3 @@
+export const defaultSystemMessageBoxStyles = {
+  maxWidth: "90%"
+};

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

@@ -1,4 +1,5 @@
 import { defaultTimestampContentStyles } from "./defaultTimestampContentStyles";
-export const defaultTimestampFailedStyles = { ...defaultTimestampContentStyles,
+export const defaultTimestampFailedStyles = {
+  ...defaultTimestampContentStyles,
   color: "#A80000"
 };