@microsoft/omnichannel-chat-widget 0.1.0-main.01a30be

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

@@ -0,0 +1,48 @@
+/******
+ * 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/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/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/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/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,5 @@
+import { defaultTimestampContentStyles } from "./defaultTimestampContentStyles";
+export const defaultTimestampFailedStyles = {
+  ...defaultTimestampContentStyles,
+  color: "#A80000"
+};

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

@@ -0,0 +1,6 @@
+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/defaultUserMessageBoxStyles.js

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

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,50 @@
+/******
+ * 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/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

@@ -0,0 +1,38 @@
+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
+  }, role === DirectLineSenderRole.Bot && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    dir: dir,
+    "aria-hidden": "false"
+  }, name, " - ", getTimestampHourMinute(timestamp))), role === DirectLineSenderRole.User && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "false",
+    dir: dir
+  }, " ", getTimestampHourMinute(timestamp), " - ", ((_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,76 @@
+import React, { useCallback, useEffect, useRef } from "react";
+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 () => {
+    var _activity$channelData;
+    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();
+    }
+  };
+  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, " "));
+};

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { Stack } from "@fluentui/react";
+import { defaultMiddlewareLocalizedTexts } from "../../../../common/defaultProps/defaultMiddlewareLocalizedTexts";
+import { defaultTimestampContentStyles } from "../defaultStyles/defaultTimestampContentStyles";
+import { useChatContextStore } from "../../../../../..";
+
+/* eslint @typescript-eslint/no-explicit-any: "off" */
+export const SendingTimestamp = () => {
+  var _state$domainStates$r, _state$domainStates$r2, _state$domainStates$m;
+  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)
+  };
+  return /*#__PURE__*/React.createElement(Stack, {
+    style: contentStyles,
+    dir: dir,
+    horizontal: true
+  }, /*#__PURE__*/React.createElement("span", null, " ", ((_state$domainStates$m = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_MESSAGE_SENDING) ?? defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_SENDING, " "));
+};