@microsoft/omnichannel-chat-widget 0.1.0-main.02fa07b

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultAttachmentIconStyles = void 0;
+const defaultAttachmentIconStyles = {
+  direction: "rtl",
+  padding: "0 0 0 8px",
+  lineHeight: 0
+};
+exports.defaultAttachmentIconStyles = defaultAttachmentIconStyles;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultAttachmentStyles = void 0;
+const defaultAttachmentStyles = {
+  display: "flex",
+  alignItems: "center",
+  background: "transparent",
+  fontSize: "12px",
+  lineHeight: "16px",
+  boxSizing: "border-box",
+  borderRadius: "2px",
+  wordBreak: "break-all"
+};
+exports.defaultAttachmentStyles = defaultAttachmentStyles;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultAvatarStyles = void 0;
+const defaultAvatarStyles = {
+  width: "32px",
+  height: "32px",
+  borderRadius: "16px",
+  textAlign: "center",
+  backgroundColor: "#315FA2"
+};
+exports.defaultAvatarStyles = defaultAvatarStyles;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultAvatarTextStyles = void 0;
+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"
+};
+exports.defaultAvatarTextStyles = defaultAvatarTextStyles;

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultSystemMessageStyles = void 0;
+const defaultSystemMessageStyles = {
+  maxWidth: "100%",
+  color: "#605E5C",
+  background: "transparent",
+  fontSize: "12px",
+  borderRadius: 0,
+  minHeight: "auto",
+  fontFamily: "Segoe UI",
+  lineHeight: "16px",
+  padding: "0px 10px 0 10px"
+};
+exports.defaultSystemMessageStyles = defaultSystemMessageStyles;

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultTimestampContentStyles = void 0;
+const defaultTimestampContentStyles = {
+  color: "#565452",
+  fontFamily: "\"Segoe UI\", Arial, sans-serif",
+  background: "transparent",
+  fontSize: "11px",
+  lineHeight: "15px",
+  paddingTop: 0
+};
+exports.defaultTimestampContentStyles = defaultTimestampContentStyles;

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

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

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultTypingIndicatorBubbleStyles = void 0;
+const defaultTypingIndicatorBubbleStyles = {
+  height: "6px",
+  width: "6px",
+  borderRadius: "6px",
+  background: "#315FA2",
+  animationDuration: "2s",
+  animationName: "bounce",
+  animationTimingFunction: "ease",
+  animationIterationCount: "infinite",
+  marginRight: "2px"
+};
+exports.defaultTypingIndicatorBubbleStyles = defaultTypingIndicatorBubbleStyles;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultTypingIndicatorContainerStyles = void 0;
+const defaultTypingIndicatorContainerStyles = {
+  marginLeft: "10px",
+  marginBottom: "5px",
+  display: "flex",
+  transition: "all .5s ease",
+  alignItems: "center"
+};
+exports.defaultTypingIndicatorContainerStyles = defaultTypingIndicatorContainerStyles;

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultTypingIndicatorMessageStyles = void 0;
+const defaultTypingIndicatorMessageStyles = {
+  fontFamily: "\"Segoe UI\", Arial, sans-serif",
+  background: "transparent",
+  fontSize: "12px",
+  lineHeight: "15px",
+  color: "#605e5c",
+  marginLeft: "6px"
+};
+exports.defaultTypingIndicatorMessageStyles = defaultTypingIndicatorMessageStyles;

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultUserMessageStyles = void 0;
+const defaultUserMessageStyles = {
+  fontSize: "14px"
+};
+exports.defaultUserMessageStyles = defaultUserMessageStyles;

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

@@ -0,0 +1,63 @@
+"use strict";
+
+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)) {
+        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
+
+
+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.Constants.systemMessageTag) ? _Constants.Constants.systemMessageTag : x.from.name : x.from.name;
+        const roleY = y.channelData && y.channelData.tags ? y.channelData.tags.includes(_Constants.Constants.systemMessageTag) ? _Constants.Constants.systemMessageTag : y.from.name : y.from.name;
+        return roleX === roleY;
+      }),
+      status
+    };
+  } else {
+    return () => false;
+  }
+};
+
+exports.groupActivitiesMiddleware = groupActivitiesMiddleware;

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

@@ -0,0 +1,117 @@
+"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;

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

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeliveredTimestamp = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DirectLineSenderRole = require("../../../enums/DirectLineSenderRole");
+
+var _react2 = require("@fluentui/react");
+
+var _defaultMiddlewareLocalizedTexts = require("../../../../common/defaultProps/defaultMiddlewareLocalizedTexts");
+
+var _defaultTimestampContentStyles = require("../defaultStyles/defaultTimestampContentStyles");
+
+var _utils = require("../../../../../../common/utils");
+
+var _ = require("../../../../../..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint @typescript-eslint/no-explicit-any: "off" */
+const DeliveredTimestamp = _ref => {
+  var _state$domainStates$r, _state$domainStates$r2, _state$domainStates$m;
+
+  let {
+    args,
+    role,
+    name
+  } = _ref;
+  const [state] = (0, _.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.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.default.createElement(_react2.Stack, {
+    style: contentStyles,
+    dir: dir,
+    horizontal: true
+  }, role === _DirectLineSenderRole.DirectLineSenderRole.Bot && /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": "false"
+  }, name), role === _DirectLineSenderRole.DirectLineSenderRole.Bot && /*#__PURE__*/_react.default.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/_react.default.createElement("span", {
+    dir: dir
+  }, " ", (0, _utils.getTimestampHourMinute)(timestamp)), role === _DirectLineSenderRole.DirectLineSenderRole.User && /*#__PURE__*/_react.default.createElement("span", null, " \xA0-\xA0 "), role === _DirectLineSenderRole.DirectLineSenderRole.User && /*#__PURE__*/_react.default.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.defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_DELIVERED));
+};
+
+exports.DeliveredTimestamp = DeliveredTimestamp;

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

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NotDeliveredTimestamp = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Constants = require("../../../../../../common/Constants");
+
+var _KeyCodes = require("../../../../../../common/KeyCodes");
+
+var _react2 = require("@fluentui/react");
+
+var _defaultMiddlewareLocalizedTexts = require("../../../../common/defaultProps/defaultMiddlewareLocalizedTexts");
+
+var _defaultTimestampContentStyles = require("../defaultStyles/defaultTimestampContentStyles");
+
+var _defaultTimestampFailedStyles = require("../defaultStyles/defaultTimestampFailedStyles");
+
+var _defaultTimestampRetryStyles = require("../defaultStyles/defaultTimestampRetryStyles");
+
+var _utils = require("../../../../../../common/utils");
+
+var _botframeworkWebchat = require("botframework-webchat");
+
+var _ = require("../../../../../..");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint @typescript-eslint/no-explicit-any: "off" */
+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 = (0, _react.useRef)();
+  const {
+    useFocus,
+    usePostActivity
+  } = _botframeworkWebchat.hooks;
+  const focus = useFocus();
+  const postActivity = usePostActivity();
+  const {
+    activity
+  } = args;
+  const {
+    timestamp
+  } = activity;
+  const [state] = (0, _.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.defaultTimestampContentStyles,
+    ...((_state$domainStates$r2 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r2 === void 0 ? void 0 : _state$domainStates$r2.timestampContentStyleProps)
+  };
+  const failedTextStyles = { ..._defaultTimestampFailedStyles.defaultTimestampFailedStyles,
+    ...((_state$domainStates$r3 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r3 === void 0 ? void 0 : _state$domainStates$r3.timestampFailedTextStyleProps)
+  };
+  const retryTextStyles = { ..._defaultTimestampRetryStyles.defaultTimestampRetryStyles,
+    ...((_state$domainStates$r4 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r4 === void 0 ? void 0 : _state$domainStates$r4.timestampRetryTextStyleProps)
+  };
+  (0, _react.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 = (0, _utils.getTimestampHourMinute)(timestamp);
+    }
+  }, [timestampRef]);
+  const onRetryClick = (0, _react.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.KeyCodes.ENTER) {
+      event.preventDefault();
+      onRetryClick(event);
+    }
+  };
+
+  const removeNotDeliveredTimestamp = event => {
+    let parent = event.target.parentElement;
+
+    while (parent.tagName !== _Constants.HtmlAttributeNames.listItem) {
+      parent = parent.parentElement;
+
+      if (parent.tagName === _Constants.HtmlAttributeNames.unorderedList) {
+        return;
+      }
+    }
+
+    parent.parentNode.removeChild(parent);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react2.Stack, {
+    style: contentStyles,
+    dir: dir,
+    horizontal: true
+  }, /*#__PURE__*/_react.default.createElement("span", null, " ", (0, _utils.getTimestampHourMinute)(timestamp)), /*#__PURE__*/_react.default.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/_react.default.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.defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_NOT_DELIVERED, " "), /*#__PURE__*/_react.default.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/_react.default.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.defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_RETRY, " "));
+};
+
+exports.NotDeliveredTimestamp = NotDeliveredTimestamp;

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

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SendingTimestamp = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@fluentui/react");
+
+var _defaultMiddlewareLocalizedTexts = require("../../../../common/defaultProps/defaultMiddlewareLocalizedTexts");
+
+var _defaultTimestampContentStyles = require("../defaultStyles/defaultTimestampContentStyles");
+
+var _utils = require("../../../../../../common/utils");
+
+var _ = require("../../../../../..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint @typescript-eslint/no-explicit-any: "off" */
+const SendingTimestamp = _ref => {
+  var _state$domainStates$r, _state$domainStates$r2, _state$domainStates$m;
+
+  let {
+    args
+  } = _ref;
+  const [state] = (0, _.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.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.default.createElement(_react2.Stack, {
+    style: contentStyles,
+    dir: dir,
+    horizontal: true
+  }, /*#__PURE__*/_react.default.createElement("span", null, " ", (0, _utils.getTimestampHourMinute)(timestamp)), /*#__PURE__*/_react.default.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/_react.default.createElement("span", null, " ", ((_state$domainStates$m = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_MESSAGE_SENDING) ?? _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_SENDING, " "));
+};
+
+exports.SendingTimestamp = SendingTimestamp;