@microsoft/omnichannel-chat-widget 1.8.7 → 2.0.0-main.5ebd4eb

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

@@ -14,20 +14,14 @@ var _SendingTimestamp = require("./timestamps/SendingTimestamp");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any, react/display-name, @typescript-eslint/no-unused-vars
 const activityStatusMiddleware = () => next => args => {
-  const {
-    activity: {
-      channelData: {
-        tags
-      },
-      from: {
-        name,
-        role
-      },
-      timestamp
-    },
-    sendState,
-    sameTimestampGroup
-  } = args;
+  const _args$activity = args.activity,
+    tags = _args$activity.channelData.tags,
+    _args$activity$from = _args$activity.from,
+    name = _args$activity$from.name,
+    role = _args$activity$from.role,
+    timestamp = _args$activity.timestamp,
+    sendState = args.sendState,
+    sameTimestampGroup = args.sameTimestampGroup;
   const current_tags = tags,
     current_name = name,
     current_role = role,
@@ -39,14 +33,9 @@ const activityStatusMiddleware = () => next => args => {
     });
   }
   if (args[_Constants.WebChatMiddlewareConstants.nextVisibleActivity]) {
-    const {
-      nextVisibleActivity: {
-        from: {
-          name
-        },
-        timestamp
-      }
-    } = args;
+    const _args$nextVisibleActi = args.nextVisibleActivity,
+      name = _args$nextVisibleActi.from.name,
+      timestamp = _args$nextVisibleActi.timestamp;
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const next_name = name,
@@ -72,7 +61,7 @@ const activityStatusMiddleware = () => next => args => {
       name: current_name
     }))
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ;
+;
   }
 };
 

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

@@ -7,6 +7,7 @@ exports.createAttachmentMiddleware = void 0;
 var _Constants = require("../../../../../common/Constants");
 var _react = _interopRequireDefault(require("react"));
 var _FileAttachmentIconManager = require("../../../common/utils/FileAttachmentIconManager");
+var _AdaptiveCardAccessibilityWrapper = _interopRequireDefault(require("./attachments/AdaptiveCardAccessibilityWrapper"));
 var _Attachment = _interopRequireDefault(require("./attachments/Attachment"));
 var _TelemetryConstants = require("../../../../../common/telemetry/TelemetryConstants");
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
@@ -21,23 +22,24 @@ var _defaultAttachmentProps = require("../../../common/defaultProps/defaultAttac
 var _defaultMiddlewareLocalizedTexts = require("../../../common/defaultProps/defaultMiddlewareLocalizedTexts");
 var _ = require("../../../../..");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/******
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /* eslint-disable @typescript-eslint/no-explicit-any */ /******
  * AttachmentMiddleware
  *
  * Handles attachment downloading.
  ******/
-
 /**
 * Patch card with different attachment data.
 * @param card
 * @param newAttachment
 */
 const patchAttachment = (card, newAttachment) => {
-  const {
-    activity,
-    attachment
-  } = card;
+  const activity = card.activity,
+    attachment = card.attachment;
   const patchedAttachment = Object.assign({}, attachment);
   patchedAttachment.contentType = newAttachment.contentType;
   patchedAttachment.thumbnailUrl = newAttachment.thumbnailUrl;
@@ -68,16 +70,12 @@ const createAttachmentMiddleware = enableInlinePlaying => {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    const [card] = args;
+    const card = args[0];
     if (!(card !== null && card !== void 0 && card.activity)) {
       return next(...args);
     }
-    const {
-      activity: {
-        attachments
-      },
-      attachment
-    } = card;
+    const attachments = card.activity.attachments,
+      attachment = card.attachment;
     // No attachment
     if (!attachments || !attachments.length || !attachment) {
       return next(...args);
@@ -85,18 +83,16 @@ const createAttachmentMiddleware = enableInlinePlaying => {
 
     // Check for Adaptive cards
     // eslint-disable-next-line prefer-const
-    let {
-      content,
-      contentType
-    } = attachment || {
-      content: "",
-      contentType: ""
-    };
-    let {
-      type
-    } = content || {
-      type: ""
-    };
+    let _ref = attachment || {
+        content: "",
+        contentType: ""
+      },
+      content = _ref.content,
+      contentType = _ref.contentType;
+    let _ref2 = content || {
+        type: ""
+      },
+      type = _ref2.type;
     if (!type && content && _Constants.Constants.supportedAdaptiveCardContentTypes.indexOf(contentType) >= 0) {
       try {
         content = JSON.parse(content);
@@ -113,14 +109,16 @@ const createAttachmentMiddleware = enableInlinePlaying => {
         });
       }
     }
-    const [state] = (0, _.useChatContextStore)();
+    const _useChatContextStore = (0, _.useChatContextStore)(),
+      _useChatContextStore2 = _slicedToArray(_useChatContextStore, 1),
+      state = _useChatContextStore2[0];
     const attachmentId = ((_state$domainStates$r = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r === void 0 || (_state$domainStates$r = _state$domainStates$r.attachmentProps) === null || _state$domainStates$r === void 0 ? void 0 : _state$domainStates$r.adaptiveCardAttachmentId) ?? _defaultAttachmentProps.defaultAttachmentProps.adaptiveCardAttachmentId;
     const atttachmentAdaptiveCardStyles = {
       ..._defaultAtttachmentAdaptiveCardStyles.defaultAttachmentAdaptiveCardStyles,
       ...((_state$domainStates$r2 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r2 === void 0 ? void 0 : _state$domainStates$r2.attachmentAdaptiveCardStyles)
     };
     if (type === _Constants.WebChatMiddlewareConstants.adaptiveCard || _Constants.Constants.supportedAdaptiveCardContentTypes.indexOf(contentType) >= 0) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement(_AdaptiveCardAccessibilityWrapper.default, {
         id: attachmentId,
         style: atttachmentAdaptiveCardStyles
       }, next(...args));
@@ -137,13 +135,7 @@ const createAttachmentMiddleware = enableInlinePlaying => {
     }
     if (card.activity.channelData && card.activity.channelData.fileScan) {
       const index = attachments.findIndex(attachment => attachment.name === card.attachment.name);
-      const {
-        activity: {
-          channelData: {
-            fileScan
-          }
-        }
-      } = card;
+      const fileScan = card.activity.channelData.fileScan;
       const scanResult = fileScan[index];
       if ((scanResult === null || scanResult === void 0 ? void 0 : scanResult.status) === _FileScanStatus.default.INPROGRESS) {
         return /*#__PURE__*/_react.default.createElement(_ScanInProgressAttachment.default, {

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/attachments/AdaptiveCardAccessibilityWrapper.js

@@ -0,0 +1,199 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/******
+ * AdaptiveCardAccessibilityWrapper
+ *
+ * The `adaptivecards` renderer does not set `aria-setsize` or `aria-posinset`
+ * on radio buttons rendered by Input.ChoiceSet (style: "expanded"). Without
+ * these attributes, screen readers (TalkBack, VoiceOver, NVDA) cannot announce
+ * the correct option count (e.g. "1 of 2") and may say "1 of 1" for every item.
+ *
+ * This wrapper observes the rendered card via MutationObserver and patches each
+ * radio group with the correct ARIA attributes after the card finishes rendering.
+ ******/
+
+const AdaptiveCardAccessibilityWrapper = _ref => {
+  let id = _ref.id,
+    style = _ref.style,
+    children = _ref.children;
+  const containerRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!containerRef.current) return;
+    const patchRadioGroups = () => {
+      const container = containerRef.current;
+      if (!container) return;
+
+      // dropdown-double-label: compact Input.ChoiceSet renders as a native
+      // <select> with both aria-labelledby and a sibling visible <label for>.
+      // Only remove aria-labelledby when it points solely at that same visible
+      // label; preserve composite labels that include required/error/context text.
+      const compactSelects = container.querySelectorAll(".ac-input-container select.ac-input.ac-multichoiceInput[aria-labelledby]");
+      compactSelects.forEach(select => {
+        const id = select.id;
+        if (!id) return;
+        const visibleLabel = container.querySelector(`label[for="${CSS.escape(id)}"]:not([aria-hidden='true'])`);
+        const labelledBy = (select.getAttribute("aria-labelledby") || "").trim().split(/\s+/);
+        if (visibleLabel !== null && visibleLabel !== void 0 && visibleLabel.id && labelledBy.length === 1 && labelledBy[0] === visibleLabel.id) {
+          select.removeAttribute("aria-labelledby");
+        }
+      });
+
+      // internal tracking: non-radio inputs (Input.Text including
+      // isMultiline=true which renders as <textarea>, Input.Date,
+      // Input.Number, Input.Toggle, Input.ChoiceSet multi-select
+      // checkbox) rendered by adaptivecards can have THREE accessible-
+      // name sources resolving to the same string: a visible
+      // <label for>, aria-label, AND aria-labelledby. TalkBack walks
+      // each accessibility node independently and reads the duplicated
+      // name. When a visible <label for> exists and names the control,
+      // strip the redundant aria-label / aria-labelledby on the input
+      // so only one announceable source remains.
+      const labelledInputs = container.querySelectorAll(".ac-input-container input.ac-input[id]:not([type='radio']), .ac-input-container textarea.ac-input[id]");
+      labelledInputs.forEach(input => {
+        const id = input.id;
+        if (!id) return;
+        const visibleLabel = container.querySelector(`label[for="${CSS.escape(id)}"]:not([aria-hidden='true'])`);
+        if (!visibleLabel) return;
+        const labelText = (visibleLabel.textContent || "").trim();
+        if (!labelText) return;
+        const ariaLabel = input.getAttribute("aria-label");
+        if (ariaLabel && ariaLabel.trim() === labelText) {
+          input.removeAttribute("aria-label");
+        }
+        const labelledBy = (input.getAttribute("aria-labelledby") || "").trim();
+        if (labelledBy) {
+          const ids = labelledBy.split(/\s+/);
+          const resolved = ids.map(rid => {
+            var _document$getElementB;
+            return (((_document$getElementB = document.getElementById(rid)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.textContent) || "").trim();
+          }).filter(Boolean).join(" ");
+          if (resolved === labelText) {
+            input.removeAttribute("aria-labelledby");
+          }
+        }
+      });
+
+      // action-button-toggle / login-button-toggle: submit/login action buttons can be
+      // rendered with toggle-only ARIA that causes screen readers to announce them as
+      // switches instead of plain push buttons. Preserve Action.ToggleVisibility buttons,
+      // which own aria-controls and legitimately expose a pressed state.
+      const actionButtons = container.querySelectorAll(".ac-actionSet button.ac-pushButton:not([aria-controls])");
+      actionButtons.forEach(btn => {
+        if (btn.hasAttribute("aria-pressed")) {
+          btn.removeAttribute("aria-pressed");
+        }
+        const role = btn.getAttribute("role");
+        if (role === "switch") {
+          btn.removeAttribute("role");
+        }
+      });
+
+      // Find all radio inputs inside the adaptive card
+      const radios = container.querySelectorAll("input[type='radio']");
+      if (radios.length === 0) return;
+
+      // Group radios by their name attribute (each ChoiceSet has a unique name)
+      const groups = new Map();
+      radios.forEach(radio => {
+        var _groups$get;
+        const name = radio.getAttribute("name") || "__default";
+        if (!groups.has(name)) {
+          groups.set(name, []);
+        }
+        (_groups$get = groups.get(name)) === null || _groups$get === void 0 || _groups$get.push(radio);
+      });
+      groups.forEach(radioInputs => {
+        const groupSize = radioInputs.length;
+        radioInputs.forEach((radio, index) => {
+          radio.setAttribute("aria-setsize", String(groupSize));
+          radio.setAttribute("aria-posinset", String(index + 1));
+
+          // Ensure the parent container has radiogroup role
+          const parent = radio.closest("[role='radiogroup']") || radio.closest(".ac-input-container");
+          if (parent && !parent.getAttribute("role")) {
+            parent.setAttribute("role", "radiogroup");
+          }
+
+          // The adaptive card renders each choice as:
+          //   <div style="display:flex">          ← flex wrapper
+          //     <input type="radio">
+          //     <div style="width:6px"></div>     ← spacer
+          //     <label><div><p>Text</p></div></label>
+          //   </div>
+          //
+          // TalkBack focuses on the <label> text node (just "Standard")
+          // instead of the <input>, so it never announces "radio button" or count.
+          //
+          // Fix: hide the label and spacer from the accessibility tree so TalkBack
+          // lands directly on the <input> which already has aria-label,
+          // aria-setsize and aria-posinset. The input's aria-labelledby still
+          // resolves the accessible name from the hidden label per ARIA spec.
+          const flexWrapper = radio.parentElement;
+          if (flexWrapper) {
+            var _label$textContent;
+            // Hide label sibling — only set if not already applied to
+            // avoid re-triggering the attributeFilter observer in a loop
+            const label = flexWrapper.querySelector("label");
+            if (label && label.getAttribute("aria-hidden") !== "true") {
+              label.setAttribute("aria-hidden", "true");
+            }
+            // Hide spacer siblings (any non-input, non-label divs)
+            Array.from(flexWrapper.children).forEach(child => {
+              const tag = child.tagName.toLowerCase();
+              if (tag !== "input" && tag !== "label" && child.getAttribute("aria-hidden") !== "true") {
+                child.setAttribute("aria-hidden", "true");
+              }
+            });
+
+            // TalkBack reads content-desc from the Android accessibility node,
+            // which Chrome populates from aria-label. However, aria-labelledby
+            // (set by the adaptive card renderer) takes precedence over aria-label.
+            // Since we hide the label (aria-hidden=true), Chrome can no longer
+            // resolve aria-labelledby and returns empty content-desc.
+            //
+            // Fix: remove aria-labelledby so Chrome falls back to aria-label,
+            // then encode the position count into aria-label so TalkBack announces
+            // e.g. "Standard, 1 of 2, radio button, not checked".
+            if (radio.hasAttribute("aria-labelledby")) {
+              radio.removeAttribute("aria-labelledby");
+            }
+            const labelText = (label === null || label === void 0 || (_label$textContent = label.textContent) === null || _label$textContent === void 0 ? void 0 : _label$textContent.trim()) || radio.getAttribute("aria-label") || "";
+            const expectedLabel = `${labelText}, ${index + 1} of ${groupSize}`;
+            if (radio.getAttribute("aria-label") !== expectedLabel) {
+              radio.setAttribute("aria-label", expectedLabel);
+            }
+          }
+        });
+      });
+    };
+
+    // Use MutationObserver to patch after WebChat finishes rendering the card.
+    // Also watch attribute changes on aria-hidden so we can re-apply if React
+    // reconciliation removes it from labels.
+    const observer = new MutationObserver(() => {
+      patchRadioGroups();
+    });
+    observer.observe(containerRef.current, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["aria-hidden"]
+    });
+
+    // Also run immediately in case the card is already rendered
+    patchRadioGroups();
+    return () => observer.disconnect();
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    style: style,
+    ref: containerRef
+  }, children);
+};
+var _default = exports.default = AdaptiveCardAccessibilityWrapper;

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/attachments/Attachment.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _useChatContextStore = _interopRequireDefault(require("../../../../../../hooks/useChatContextStore"));
+var _useChatContextStore3 = _interopRequireDefault(require("../../../../../../hooks/useChatContextStore"));
 var _defaultAttachmentProps = require("../../../../common/defaultProps/defaultAttachmentProps");
 var _defaultAttachmentContentStyles = require("../defaultStyles/defaultAttachmentContentStyles");
 var _defaultAttachmentDividerStyles = require("../defaultStyles/defaultAttachmentDividerStyles");
@@ -17,16 +17,22 @@ var _defaultAtttachmentStyles = require("../defaultStyles/defaultAtttachmentStyl
 var _AttachmentContent = _interopRequireDefault(require("./AttachmentContent"));
 var _AttachmentIcon = _interopRequireDefault(require("./AttachmentIcon"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 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;
   // eslint-disable-line @typescript-eslint/no-explicit-any
-  const {
-    iconData,
-    imageCard,
-    textCard,
-    renderer
-  } = props;
-  const [state] = (0, _useChatContextStore.default)();
+  const iconData = props.iconData,
+    imageCard = props.imageCard,
+    textCard = props.textCard,
+    renderer = props.renderer;
+  const _useChatContextStore = (0, _useChatContextStore3.default)(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 1),
+    state = _useChatContextStore2[0];
   const attachmentId = ((_state$domainStates$r = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r === void 0 || (_state$domainStates$r = _state$domainStates$r.attachmentProps) === null || _state$domainStates$r === void 0 ? void 0 : _state$domainStates$r.webChatAttachmentId) ?? _defaultAttachmentProps.defaultAttachmentProps.webChatAttachmentId;
   const attachmentDividerStyles = {
     ..._defaultAttachmentDividerStyles.defaultAttachmentDividerStyles,
@@ -44,28 +50,36 @@ const Attachment = props => {
     ..._defaultAttachmentSizeStyles.defaultAttachmentSizeStyles,
     ...((_state$domainStates$r5 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r5 === void 0 ? void 0 : _state$domainStates$r5.attachmentSizeStyles)
   }).map(_ref => {
-    let [k, v] = _ref;
+    let _ref2 = _slicedToArray(_ref, 2),
+      k = _ref2[0],
+      v = _ref2[1];
     return `${k.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)}:${v}`;
   }).join(";");
   const attachmentContentStylesString = Object.entries({
     ..._defaultAttachmentContentStyles.defaultAttachmentContentStyles,
     ...((_state$domainStates$r6 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r6 === void 0 ? void 0 : _state$domainStates$r6.attachmentContentStyles)
-  }).map(_ref2 => {
-    let [k, v] = _ref2;
+  }).map(_ref3 => {
+    let _ref4 = _slicedToArray(_ref3, 2),
+      k = _ref4[0],
+      v = _ref4[1];
     return `${k.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)}:${v}`;
   }).join(";");
   const attachmentFileNameStylesString = Object.entries({
     ..._defaultAttachmentFileNameStyles.defaultAttachmentFileNameStyles,
     ...((_state$domainStates$r7 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r7 === void 0 ? void 0 : _state$domainStates$r7.attachmentFileNameStyles)
-  }).map(_ref3 => {
-    let [k, v] = _ref3;
+  }).map(_ref5 => {
+    let _ref6 = _slicedToArray(_ref5, 2),
+      k = _ref6[0],
+      v = _ref6[1];
     return `${k.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)}:${v}`;
   }).join(";");
   const attachmentDownloadIconStylesString = Object.entries({
     ..._defaultAttachmentDownloadIconStyles.defaultAttachmentDownloadIconStyles,
     ...((_state$domainStates$r8 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r8 === void 0 ? void 0 : _state$domainStates$r8.attachmentDownloadIconStyles)
-  }).map(_ref4 => {
-    let [k, v] = _ref4;
+  }).map(_ref7 => {
+    let _ref8 = _slicedToArray(_ref7, 2),
+      k = _ref8[0],
+      v = _ref8[1];
     return `${k.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)}:${v}`;
   }).join(";");
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("style", null, `

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

@@ -22,18 +22,11 @@ const createAvatarMiddleware = (avatarStyleProps, avatarTextStyleProps) => () =>
   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;
+  const params = args[0];
+  const _params$activity = params.activity,
+    tags = _params$activity.channelData.tags,
+    name = _params$activity.from.name,
+    fromUser = params.fromUser;
   if (fromUser !== false || tags && tags.includes(_Constants.Constants.systemMessageTag)) {
     return false;
   }

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

@@ -18,7 +18,7 @@ const createCardActionMiddleware = botMagicCodeConfig => {
       args[_key] = arguments[_key];
     }
     // eslint-disable-line @typescript-eslint/no-explicit-any
-    const [card] = args;
+    const card = args[0];
     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) {

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultAvatarTextStyles = void 0;
 const defaultAvatarTextStyles = exports.defaultAvatarTextStyles = {
   margin: "0",
-  fontFamily: "'Segoe UI', 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI Emoji', Arial, sans-serif",
+  fontFamily: "'Segoe UI', Arial, sans-serif",
   fontWeight: 600,
   fontSize: "13px",
   lineHeight: "18px",

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

@@ -11,7 +11,12 @@ const defaultSystemMessageStyles = exports.defaultSystemMessageStyles = {
   fontSize: "12px",
   borderRadius: 0,
   minHeight: "auto",
-  fontFamily: "'Segoe UI', 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI Emoji', Arial, sans-serif",
-  lineHeight: "16px",
-  padding: "0px 10px 0 10px"
+  fontFamily: "'Segoe UI', Arial, sans-serif",
+  lineHeight: "1.4",
+  padding: "0px 10px 0 10px",
+  // iOS Safari: position underlines below all glyphs so they do not
+  // intersect numbers. Also enforce lining figures for consistent baselines.
+  WebkitTextUnderlinePosition: "under",
+  textUnderlinePosition: "under",
+  fontVariantNumeric: "lining-nums"
 };

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

@@ -8,5 +8,12 @@ var _defaultTimestampContentStyles = require("./defaultTimestampContentStyles");
 const defaultTimestampRetryStyles = exports.defaultTimestampRetryStyles = {
   ..._defaultTimestampContentStyles.defaultTimestampContentStyles,
   color: "#0063B1",
-  cursor: "pointer"
+  cursor: "pointer",
+  border: "none",
+  padding: 0,
+  margin: 0,
+  textDecoration: "none",
+  display: "inline",
+  fontWeight: "inherit",
+  textAlign: "inherit"
 };

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

@@ -32,15 +32,12 @@ function bin(items, grouping) {
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
 const groupActivitiesMiddleware = () => next => args => {
-  const {
-    activities
-  } = args;
+  const activities = args.activities;
   if (activities != null && activities.length > 0) {
-    const {
-      status
-    } = next({
-      activities
-    });
+    const _next = next({
+        activities
+      }),
+      status = _next.status;
     return {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       sender: bin(activities, (x, y) => {

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

@@ -4,14 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createMessageSequenceIdOverrideMiddleware = void 0;
+var _IWebChatAction = require("../../../interfaces/IWebChatAction");
 var _WebChatActionType = require("../../enums/WebChatActionType");
 var _Constants = require("../../../../../common/Constants");
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const createMessageSequenceIdOverrideMiddleware = _ref => {
-  let {
-    dispatch
-  } = _ref;
+  let dispatch = _ref.dispatch;
   return next => action => {
+    if (!(0, _IWebChatAction.isWebChatAction)(action)) {
+      return next(action);
+    }
     if (isApplicable(action)) {
       return next(overrideSequenceIdWithOriginalMessageId(action));
     }

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

@@ -4,14 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createMessageTimeStampMiddleware = void 0;
+var _IWebChatAction = require("../../../interfaces/IWebChatAction");
 var _WebChatActionType = require("../../enums/WebChatActionType");
 var _Constants = require("../../../../../common/Constants");
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const createMessageTimeStampMiddleware = _ref => {
-  let {
-    dispatch
-  } = _ref;
+  let dispatch = _ref.dispatch;
   return next => action => {
+    if (!(0, _IWebChatAction.isWebChatAction)(action)) {
+      return next(action);
+    }
     if (isApplicable(action)) {
       return next(evaluateTagsAndOverrideTimeStamp(action));
     }