@microsoft/omnichannel-chat-widget 0.1.0-main.d5846c0 → 0.1.0-main.d5a92f2

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

@@ -4,55 +4,36 @@ 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 _TelemetryConstants = require("../../../../../common/telemetry/TelemetryConstants");
-
 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,
@@ -61,10 +42,8 @@ const AttachmentIcon = props => {
     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,
@@ -73,34 +52,41 @@ const Attachment = props => {
   } = 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,
+  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,
+  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,
+  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,
+  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,
+  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,
+  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,
+  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;
@@ -126,13 +112,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,
@@ -149,7 +134,6 @@ const patchAttachment = (card, newAttachment) => {
     attachment: patchedAttachment
   };
 };
-
 const genPreviewCardWithAttachment = (card, iconData, next) => {
   const patchedTextCard = patchAttachment(card, {
     contentType: _Constants.MimeTypes.UnknownFileType,
@@ -162,35 +146,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
@@ -203,7 +182,6 @@ const createAttachmentMiddleware = enableInlinePlaying => {
     } = content || {
       type: ""
     };
-
     if (!type && content && _Constants.Constants.supportedAdaptiveCardContentTypes.indexOf(contentType) >= 0) {
       try {
         content = JSON.parse(content);
@@ -211,7 +189,6 @@ const createAttachmentMiddleware = enableInlinePlaying => {
         card.attachment.content = content;
       } catch (e) {
         const errorData = "Unable to parse the adaptive card format";
-
         _omnichannelChatComponents.BroadcastService.postMessage({
           eventName: _TelemetryConstants.BroadcastEvent.InvalidAdaptiveCardFormat,
           payload: {
@@ -221,45 +198,35 @@ const createAttachmentMiddleware = enableInlinePlaying => {
         });
       }
     }
-
     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,
+    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, {
@@ -269,7 +236,6 @@ const createAttachmentMiddleware = enableInlinePlaying => {
         renderer: next
       });
     }
-
     if (fileExtension === "txt") {
       return /*#__PURE__*/_react.default.createElement(Attachment, {
         iconData: iconData,
@@ -280,16 +246,13 @@ const createAttachmentMiddleware = enableInlinePlaying => {
         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

@@ -4,31 +4,24 @@ 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: {
@@ -41,23 +34,22 @@ const createAvatarMiddleware = (avatarStyleProps, avatarTextStyleProps) => () =>
     },
     fromUser
   } = params;
-
   if (fromUser !== false || tags && tags.includes(_Constants.Constants.systemMessageTag)) {
     return false;
   }
-
-  const avatarStyles = { ..._defaultAvatarStyles.defaultAvatarStyles,
+  const avatarStyles = {
+    ..._defaultAvatarStyles.defaultAvatarStyles,
     ...avatarStyleProps
   };
-  const avatarTextStyles = { ..._defaultAvatarTextStyles.defaultAvatarTextStyles,
+  const avatarTextStyles = {
+    ..._defaultAvatarTextStyles.defaultAvatarTextStyles,
     ...avatarTextStyleProps
-  }; // eslint-disable-next-line react/display-name
-
+  };
+  // 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/cardActionMiddleware.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createCardActionMiddleware = void 0;
+var _BotMagicCodeStore = require("../../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]+)/;
+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.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;
+};
+exports.createCardActionMiddleware = createCardActionMiddleware;

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

@@ -0,0 +1,82 @@
+"use strict";
+
+require("@testing-library/jest-dom/extend-expect");
+var _cardActionMiddleware = require("./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 = (0, _cardActionMiddleware.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 = (0, _cardActionMiddleware.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 = (0, _cardActionMiddleware.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 = (0, _cardActionMiddleware.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 = (0, _cardActionMiddleware.createCardActionMiddleware)(botMagicCodeConfig)()(next)(args);
+    expect(signInUrl === results.cardAction.value).toBe(true);
+    expect(results.cardAction.value === `${signInUrl}&fwdUrl=${botMagicCodeConfig.fwdUrl}`).toBe(false);
+  });
+});

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

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

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultSystemMessageBoxStyles = void 0;
+const defaultSystemMessageBoxStyles = {
+  maxWidth: "75%"
+};
+exports.defaultSystemMessageBoxStyles = defaultSystemMessageBoxStyles;

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

@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultTimestampFailedStyles = void 0;
-
 var _defaultTimestampContentStyles = require("./defaultTimestampContentStyles");
-
-const defaultTimestampFailedStyles = { ..._defaultTimestampContentStyles.defaultTimestampContentStyles,
+const defaultTimestampFailedStyles = {
+  ..._defaultTimestampContentStyles.defaultTimestampContentStyles,
   color: "#A80000"
 };
 exports.defaultTimestampFailedStyles = defaultTimestampFailedStyles;

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

@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultTimestampRetryStyles = void 0;
-
 var _defaultTimestampContentStyles = require("./defaultTimestampContentStyles");
-
-const defaultTimestampRetryStyles = { ..._defaultTimestampContentStyles.defaultTimestampContentStyles,
+const defaultTimestampRetryStyles = {
+  ..._defaultTimestampContentStyles.defaultTimestampContentStyles,
   color: "#0063B1",
   cursor: "pointer"
 };

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultUserMessageBoxStyles = void 0;
+const defaultUserMessageBoxStyles = {
+  maxWidth: "75%"
+};
+exports.defaultUserMessageBoxStyles = defaultUserMessageBoxStyles;

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

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

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

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