@microsoft/omnichannel-chat-widget 0.1.0-main.1a61ea0

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

@@ -0,0 +1,264 @@
+/* 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 { BroadcastService } from "@microsoft/omnichannel-chat-components";
+import { WebChatActionType } from "../../enums/WebChatActionType";
+import { defaultAttachmentAdaptiveCardStyles } from "./defaultStyles/defaultAtttachmentAdaptiveCardStyles";
+import { defaultAttachmentContentStyles } from "./defaultStyles/defaultAttachmentContentStyles";
+import { defaultAttachmentDividerStyles } from "./defaultStyles/defaultAttachmentDividerStyles";
+import { defaultAttachmentDownloadIconStyles } from "./defaultStyles/defaultAttachmentDownloadIconStyles";
+import { defaultAttachmentFileNameStyles } from "./defaultStyles/defaultAttachmentFileNameStyles";
+import { defaultAttachmentIconStyles } from "./defaultStyles/defaultAtttachmentIconStyles";
+import { defaultAttachmentProps } from "../../../common/defaultProps/defaultAttachmentProps";
+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,
+    style: props.style
+  }, /*#__PURE__*/React.createElement("img", {
+    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,
+    textCard,
+    renderer
+  } = 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,
+    ...((_state$domainStates$r3 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r3 === void 0 ? void 0 : _state$domainStates$r3.attachmentDividerStyles)
+  };
+  const attachmentIconStyles = { ...defaultAttachmentIconStyles,
+    ...((_state$domainStates$r4 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r4 === void 0 ? void 0 : _state$domainStates$r4.attachmentIconStyles)
+  };
+  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,
+    ...((_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,
+    ...((_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,
+    ...((_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,
+    ...((_state$domainStates$r9 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r9 === void 0 ? void 0 : _state$domainStates$r9.attachmentDownloadIconStyles)
+  }).map(_ref4 => {
+    let [k, v] = _ref4;
+    return `${k.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)}:${v}`;
+  }).join(";");
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, `
+            .webchat__fileContent__size { ${attachmentSizeStylesString} }
+            .webchat__fileContent { ${attachmentContentStylesString} }
+            .webchat__fileContent__fileName { ${attachmentFileNameStylesString} }
+            .webchat__fileContent__downloadIcon { ${attachmentDownloadIconStylesString} }
+        `), /*#__PURE__*/React.createElement("div", {
+    dir: state.domainStates.globalDir
+  }, imageCard && renderer(imageCard), imageCard && /*#__PURE__*/React.createElement("hr", {
+    id: attachmentId + "-divider",
+    style: attachmentDividerStyles
+  }), /*#__PURE__*/React.createElement(AttachmentContent, {
+    attachment: textCard.attachment,
+    id: attachmentId,
+    style: attachmentStyles
+  }, /*#__PURE__*/React.createElement(AttachmentIcon, {
+    src: iconData,
+    id: attachmentId + "-icon",
+    style: attachmentIconStyles
+  }), textCard && renderer(textCard))));
+};
+/**
+* Patch card with different attachment data.
+* @param card
+* @param newAttachment
+*/
+
+
+const patchAttachment = (card, newAttachment) => {
+  const {
+    activity,
+    attachment
+  } = card;
+  const patchedAttachment = Object.assign({}, attachment);
+  patchedAttachment.contentType = newAttachment.contentType;
+  patchedAttachment.thumbnailUrl = newAttachment.thumbnailUrl;
+  const patchedAttachments = activity.attachments.map(target => target === attachment ? patchedAttachment : target);
+  const patchedActivity = Object.assign({}, activity);
+  patchedActivity.attachments = patchedAttachments;
+  return {
+    activity: patchedActivity,
+    attachment: patchedAttachment
+  };
+};
+
+const genPreviewCardWithAttachment = (card, iconData, next) => {
+  const patchedTextCard = patchAttachment(card, {
+    contentType: MimeTypes.UnknownFileType,
+    thumbnailUrl: undefined
+  });
+  return /*#__PURE__*/React.createElement(Attachment, {
+    iconData: iconData,
+    imageCard: card,
+    textCard: patchedTextCard,
+    renderer: next
+  });
+};
+
+const createAttachmentMiddleware = enableInlinePlaying => {
+  // eslint-disable-next-line react/display-name   
+  const attachmentMiddleware = () => next => function () {
+    var _state$domainStates$r10, _state$domainStates$r11, _state$domainStates$r12, _card$activity$channe;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    const [card] = args;
+
+    if (!(card !== null && card !== void 0 && card.activity)) {
+      return next(...args);
+    }
+
+    const {
+      activity: {
+        attachments
+      },
+      attachment
+    } = card; // No attachment
+
+    if (!attachments || !attachments.length || !attachment) {
+      return next(...args);
+    } // Check for Adaptive cards
+    // eslint-disable-next-line prefer-const
+
+
+    let {
+      content,
+      contentType
+    } = attachment || {
+      content: "",
+      contentType: ""
+    };
+    let {
+      type
+    } = content || {
+      type: ""
+    };
+
+    if (!type && content && Constants.supportedAdaptiveCardContentTypes.indexOf(contentType) >= 0) {
+      try {
+        content = JSON.parse(content);
+        type = content.type;
+        card.attachment.content = content;
+      } catch (e) {
+        const errorData = "Unable to parse the adaptive card format";
+        BroadcastService.postMessage({
+          eventName: "InvalidAdaptiveCardFormat",
+          payload: {
+            Message: errorData,
+            ExceptionDetails: e
+          }
+        });
+      }
+    }
+
+    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,
+      ...((_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, {
+          contentType: MimeTypes.UnknownFileType,
+          thumbnailUrl: undefined
+        }),
+        renderer: next
+      });
+    }
+
+    if (fileExtension === "txt") {
+      return /*#__PURE__*/React.createElement(Attachment, {
+        iconData: iconData,
+        textCard: patchAttachment(card, {
+          contentType: MimeTypes.UnknownFileType,
+          thumbnailUrl: undefined
+        }),
+        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

@@ -0,0 +1,47 @@
+/******
+ * 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
+ ******/
+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
+
+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: {
+      channelData: {
+        tags
+      },
+      from: {
+        name
+      }
+    },
+    fromUser
+  } = params;
+
+  if (fromUser !== false || tags && tags.includes(Constants.systemMessageTag)) {
+    return false;
+  }
+
+  const avatarStyles = { ...defaultAvatarStyles,
+    ...avatarStyleProps
+  };
+  const avatarTextStyles = { ...defaultAvatarTextStyles,
+    ...avatarTextStyleProps
+  }; // eslint-disable-next-line react/display-name
+
+  return () => /*#__PURE__*/React.createElement("div", {
+    style: avatarStyles
+  }, /*#__PURE__*/React.createElement("p", {
+    style: avatarTextStyles
+  }, " ", getIconText(name), " "));
+};

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

@@ -0,0 +1,3 @@
+export const defaultAttachmentContentStyles = {
+  width: "200px"
+};

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

@@ -0,0 +1,6 @@
+export const defaultAttachmentDividerStyles = {
+  margin: "0",
+  height: "1px",
+  border: "0px",
+  backgroundColor: "#E8EAEC"
+};

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

@@ -0,0 +1,7 @@
+export const defaultAttachmentDownloadIconStyles = {
+  height: "12px",
+  width: "12px",
+  marginLeft: "auto !important",
+  padding: "2px !important",
+  fill: "#000000 !important"
+};

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

@@ -0,0 +1,6 @@
+export const defaultAttachmentFileNameStyles = {
+  minHeight: "15px",
+  marginLeft: "5px",
+  marginRight: "5px",
+  color: "#000000 !important"
+};

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

@@ -0,0 +1,3 @@
+export const defaultAttachmentSizeStyles = {
+  display: "none"
+};

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

@@ -0,0 +1,5 @@
+export const defaultAttachmentAdaptiveCardStyles = {
+  borderStyle: "solid",
+  borderColor: "rgb(230, 230, 230)",
+  borderWidth: "1px"
+};

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

@@ -0,0 +1,5 @@
+export const defaultAttachmentIconStyles = {
+  direction: "rtl",
+  padding: "0 0 0 8px",
+  lineHeight: 0
+};

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

@@ -0,0 +1,10 @@
+export const defaultAttachmentStyles = {
+  display: "flex",
+  alignItems: "center",
+  background: "transparent",
+  fontSize: "12px",
+  lineHeight: "16px",
+  boxSizing: "border-box",
+  borderRadius: "2px",
+  wordBreak: "break-all"
+};

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

@@ -0,0 +1,7 @@
+export const defaultAvatarStyles = {
+  width: "32px",
+  height: "32px",
+  borderRadius: "16px",
+  textAlign: "center",
+  backgroundColor: "#315FA2"
+};

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

@@ -0,0 +1,12 @@
+export const defaultAvatarTextStyles = {
+  margin: "0",
+  fontFamily: "\"Segoe UI\", Arial, sans-serif",
+  fontWeight: 600,
+  fontSize: "13px",
+  lineHeight: "18px",
+  color: "white",
+  paddingTop: "7px",
+  WebkitUserSelect: "none",
+  MozUserSelect: "none",
+  userSelect: "none"
+};

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

@@ -0,0 +1,11 @@
+export const defaultSystemMessageStyles = {
+  maxWidth: "100%",
+  color: "#605E5C",
+  background: "transparent",
+  fontSize: "12px",
+  borderRadius: 0,
+  minHeight: "auto",
+  fontFamily: "Segoe UI",
+  lineHeight: "16px",
+  padding: "0px 10px 0 10px"
+};

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

@@ -0,0 +1,8 @@
+export const defaultTimestampContentStyles = {
+  color: "#565452",
+  fontFamily: "\"Segoe UI\", Arial, sans-serif",
+  background: "transparent",
+  fontSize: "11px",
+  lineHeight: "15px",
+  paddingTop: 0
+};

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

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

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

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

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

@@ -0,0 +1,11 @@
+export const defaultTypingIndicatorBubbleStyles = {
+  height: "6px",
+  width: "6px",
+  borderRadius: "6px",
+  background: "#315FA2",
+  animationDuration: "2s",
+  animationName: "bounce",
+  animationTimingFunction: "ease",
+  animationIterationCount: "infinite",
+  marginRight: "2px"
+};

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

@@ -0,0 +1,7 @@
+export const defaultTypingIndicatorContainerStyles = {
+  marginLeft: "10px",
+  marginBottom: "5px",
+  display: "flex",
+  transition: "all .5s ease",
+  alignItems: "center"
+};

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

@@ -0,0 +1,8 @@
+export const defaultTypingIndicatorMessageStyles = {
+  fontFamily: "\"Segoe UI\", Arial, sans-serif",
+  background: "transparent",
+  fontSize: "12px",
+  lineHeight: "15px",
+  color: "#605e5c",
+  marginLeft: "6px"
+};

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

@@ -0,0 +1,3 @@
+export const defaultUserMessageStyles = {
+  fontSize: "14px"
+};

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

@@ -0,0 +1,54 @@
+/******
+ * 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
+ ******/
+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)) {
+        lastBin.push(item);
+      } else {
+        lastBin = [item];
+        bins.push(lastBin);
+      }
+
+      lastItem = item;
+    });
+  }
+
+  return bins;
+} // 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
+    } = next({
+      activities
+    });
+    return {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      sender: bin(activities, (x, y) => {
+        const roleX = x.channelData && x.channelData.tags ? x.channelData.tags.includes(Constants.systemMessageTag) ? Constants.systemMessageTag : x.from.name : x.from.name;
+        const roleY = y.channelData && y.channelData.tags ? y.channelData.tags.includes(Constants.systemMessageTag) ? Constants.systemMessageTag : y.from.name : y.from.name;
+        return roleX === roleY;
+      }),
+      status
+    };
+  } else {
+    return () => false;
+  }
+};

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { DirectLineSenderRole } from "../../../enums/DirectLineSenderRole";
+import { Stack } from "@fluentui/react";
+import { defaultMiddlewareLocalizedTexts } from "../../../../common/defaultProps/defaultMiddlewareLocalizedTexts";
+import { defaultTimestampContentStyles } from "../defaultStyles/defaultTimestampContentStyles";
+import { getTimestampHourMinute } from "../../../../../../common/utils";
+import { useChatContextStore } from "../../../../../..";
+/* eslint @typescript-eslint/no-explicit-any: "off" */
+
+export const DeliveredTimestamp = _ref => {
+  var _state$domainStates$r, _state$domainStates$r2, _state$domainStates$m;
+
+  let {
+    args,
+    role,
+    name
+  } = _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,
+    ...((_state$domainStates$r2 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r2 === void 0 ? void 0 : _state$domainStates$r2.timestampContentStyleProps)
+  };
+  const {
+    activity: {
+      timestamp
+    }
+  } = args;
+  return /*#__PURE__*/React.createElement(Stack, {
+    style: contentStyles,
+    dir: dir,
+    horizontal: true
+  }, role === DirectLineSenderRole.Bot && /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "false"
+  }, name), role === DirectLineSenderRole.Bot && /*#__PURE__*/React.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/React.createElement("span", {
+    dir: dir
+  }, " ", getTimestampHourMinute(timestamp)), role === DirectLineSenderRole.User && /*#__PURE__*/React.createElement("span", null, " \xA0-\xA0 "), role === DirectLineSenderRole.User && /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "false"
+  }, ((_state$domainStates$m = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_MESSAGE_DELIVERED) ?? defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_DELIVERED));
+};

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

@@ -0,0 +1,95 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import { HtmlAttributeNames } from "../../../../../../common/Constants";
+import { KeyCodes } from "../../../../../../common/KeyCodes";
+import { Stack } from "@fluentui/react";
+import { defaultMiddlewareLocalizedTexts } from "../../../../common/defaultProps/defaultMiddlewareLocalizedTexts";
+import { defaultTimestampContentStyles } from "../defaultStyles/defaultTimestampContentStyles";
+import { defaultTimestampFailedStyles } from "../defaultStyles/defaultTimestampFailedStyles";
+import { defaultTimestampRetryStyles } from "../defaultStyles/defaultTimestampRetryStyles";
+import { getTimestampHourMinute } from "../../../../../../common/utils";
+import { hooks } from "botframework-webchat";
+import { useChatContextStore } from "../../../../../..";
+/* 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;
+  const timestampRef = useRef();
+  const {
+    useFocus,
+    usePostActivity
+  } = hooks;
+  const focus = useFocus();
+  const postActivity = usePostActivity();
+  const {
+    activity
+  } = args;
+  const {
+    timestamp
+  } = 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,
+    ...((_state$domainStates$r2 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r2 === void 0 ? void 0 : _state$domainStates$r2.timestampContentStyleProps)
+  };
+  const failedTextStyles = { ...defaultTimestampFailedStyles,
+    ...((_state$domainStates$r3 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r3 === void 0 ? void 0 : _state$domainStates$r3.timestampFailedTextStyleProps)
+  };
+  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,
+    horizontal: true
+  }, /*#__PURE__*/React.createElement("span", null, " ", getTimestampHourMinute(timestamp)), /*#__PURE__*/React.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/React.createElement("span", {
+    style: failedTextStyles
+  }, " ", ((_state$domainStates$m = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_MESSAGE_NOT_DELIVERED) ?? defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_NOT_DELIVERED, " "), /*#__PURE__*/React.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/React.createElement("span", {
+    style: retryTextStyles,
+    onClick: onRetryClick,
+    onKeyDown: onRetryKeyEnter,
+    tabIndex: 0
+  }, " ", ((_state$domainStates$m2 = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m2 === void 0 ? void 0 : _state$domainStates$m2.MIDDLEWARE_MESSAGE_RETRY) ?? defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_RETRY, " "));
+};