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

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,7 +229,6 @@ const createAttachmentMiddleware = enableInlinePlaying => {
         renderer: next
       });
     }
-
     if (fileExtension === "txt") {
       return /*#__PURE__*/React.createElement(Attachment, {
         iconData: iconData,
@@ -250,15 +239,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: "75%"
+};

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"
 };

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

@@ -1,5 +1,6 @@
 import { defaultTimestampContentStyles } from "./defaultTimestampContentStyles";
-export const defaultTimestampRetryStyles = { ...defaultTimestampContentStyles,
+export const defaultTimestampRetryStyles = {
+  ...defaultTimestampContentStyles,
   color: "#0063B1",
   cursor: "pointer"
 };

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

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

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

@@ -4,13 +4,12 @@
  * This middleware controls which messages are grouped together regarding to timestamps. It does the following processing:
  * 1. Distinguishes different messages by sender name and whether it is a system message
  ******/
-import { Constants } from "../../../../../common/Constants";
 
+import { Constants } from "../../../../../common/Constants";
 function bin(items, grouping) {
   let lastBin;
   const bins = [];
   let lastItem;
-
   if (items.length > 0) {
     items.forEach(item => {
       if (lastItem && grouping(lastItem, item)) {
@@ -19,20 +18,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
 export const groupActivitiesMiddleware = () => next => args => {
   const {
     activities
   } = args;
-
   if (activities != null && activities.length > 0) {
     const {
       status

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

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

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

@@ -5,11 +5,10 @@ import { defaultMiddlewareLocalizedTexts } from "../../../../common/defaultProps
 import { defaultTimestampContentStyles } from "../defaultStyles/defaultTimestampContentStyles";
 import { getTimestampHourMinute } from "../../../../../../common/utils";
 import { useChatContextStore } from "../../../../../..";
-/* eslint @typescript-eslint/no-explicit-any: "off" */
 
+/* eslint @typescript-eslint/no-explicit-any: "off" */
 export const DeliveredTimestamp = _ref => {
   var _state$domainStates$r, _state$domainStates$r2, _state$domainStates$m;
-
   let {
     args,
     role,
@@ -17,7 +16,8 @@ export const DeliveredTimestamp = _ref => {
   } = _ref;
   const [state] = useChatContextStore();
   const dir = ((_state$domainStates$r = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r === void 0 ? void 0 : _state$domainStates$r.timestampDir) ?? state.domainStates.globalDir;
-  const contentStyles = { ...defaultTimestampContentStyles,
+  const contentStyles = {
+    ...defaultTimestampContentStyles,
     ...((_state$domainStates$r2 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r2 === void 0 ? void 0 : _state$domainStates$r2.timestampContentStyleProps)
   };
   const {

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

@@ -9,11 +9,10 @@ import { defaultTimestampRetryStyles } from "../defaultStyles/defaultTimestampRe
 import { getTimestampHourMinute } from "../../../../../../common/utils";
 import { hooks } from "botframework-webchat";
 import { useChatContextStore } from "../../../../../..";
-/* eslint @typescript-eslint/no-explicit-any: "off" */
 
+/* eslint @typescript-eslint/no-explicit-any: "off" */
 export const NotDeliveredTimestamp = _ref => {
   var _state$domainStates$r, _state$domainStates$r2, _state$domainStates$r3, _state$domainStates$r4, _state$domainStates$m, _state$domainStates$m2;
-
   let {
     args
   } = _ref;
@@ -32,54 +31,48 @@ export const NotDeliveredTimestamp = _ref => {
   } = activity;
   const [state] = useChatContextStore();
   const dir = ((_state$domainStates$r = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r === void 0 ? void 0 : _state$domainStates$r.timestampDir) ?? state.domainStates.globalDir;
-  const contentStyles = { ...defaultTimestampContentStyles,
+  const contentStyles = {
+    ...defaultTimestampContentStyles,
     ...((_state$domainStates$r2 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r2 === void 0 ? void 0 : _state$domainStates$r2.timestampContentStyleProps)
   };
-  const failedTextStyles = { ...defaultTimestampFailedStyles,
+  const failedTextStyles = {
+    ...defaultTimestampFailedStyles,
     ...((_state$domainStates$r3 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r3 === void 0 ? void 0 : _state$domainStates$r3.timestampFailedTextStyleProps)
   };
-  const retryTextStyles = { ...defaultTimestampRetryStyles,
+  const retryTextStyles = {
+    ...defaultTimestampRetryStyles,
     ...((_state$domainStates$r4 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r4 === void 0 ? void 0 : _state$domainStates$r4.timestampRetryTextStyleProps)
   };
   useEffect(() => {
     var _timestampRef$current;
-
     const timestampWebChatNodes = timestampRef === null || timestampRef === void 0 ? void 0 : (_timestampRef$current = timestampRef.current) === null || _timestampRef$current === void 0 ? void 0 : _timestampRef$current.childNodes;
-
     if ((timestampWebChatNodes === null || timestampWebChatNodes === void 0 ? void 0 : timestampWebChatNodes.length) > 1) {
       timestampWebChatNodes[1].innerText = getTimestampHourMinute(timestamp);
     }
   }, [timestampRef]);
   const onRetryClick = useCallback(async event => {
     var _activity$channelData;
-
     removeNotDeliveredTimestamp(event);
     activity.previousClientActivityID = (_activity$channelData = activity.channelData) === null || _activity$channelData === void 0 ? void 0 : _activity$channelData.clientActivityID;
     await postActivity(activity);
     focus("sendBox");
   }, [activity, focus, postActivity]);
-
   const onRetryKeyEnter = event => {
     if (event.code === KeyCodes.ENTER) {
       event.preventDefault();
       onRetryClick(event);
     }
   };
-
   const removeNotDeliveredTimestamp = event => {
     let parent = event.target.parentElement;
-
     while (parent.tagName !== HtmlAttributeNames.listItem) {
       parent = parent.parentElement;
-
       if (parent.tagName === HtmlAttributeNames.unorderedList) {
         return;
       }
     }
-
     parent.parentNode.removeChild(parent);
   };
-
   return /*#__PURE__*/React.createElement(Stack, {
     style: contentStyles,
     dir: dir,