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

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

@@ -8,20 +8,14 @@ import { SendingTimestamp } from "./timestamps/SendingTimestamp";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any, react/display-name, @typescript-eslint/no-unused-vars
 export 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,
@@ -33,14 +27,9 @@ export const activityStatusMiddleware = () => next => args => {
     });
   }
   if (args[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,
@@ -66,7 +55,7 @@ export const activityStatusMiddleware = () => next => args => {
       name: current_name
     }))
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ;
+;
   }
 };
 

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

@@ -1,3 +1,9 @@
+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
@@ -8,6 +14,7 @@
 import { Constants, MimeTypes, WebChatMiddlewareConstants } from "../../../../../common/Constants";
 import React from "react";
 import { getFileAttachmentIconData, isInlineMediaSupported } from "../../../common/utils/FileAttachmentIconManager";
+import AdaptiveCardAccessibilityWrapper from "./attachments/AdaptiveCardAccessibilityWrapper";
 import Attachment from "./attachments/Attachment";
 import { BroadcastEvent } from "../../../../../common/telemetry/TelemetryConstants";
 import { BroadcastService } from "@microsoft/omnichannel-chat-components";
@@ -28,10 +35,8 @@ import { useChatContextStore } from "../../../../..";
 * @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;
@@ -62,16 +67,12 @@ export 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);
@@ -79,18 +80,16 @@ export 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.supportedAdaptiveCardContentTypes.indexOf(contentType) >= 0) {
       try {
         content = JSON.parse(content);
@@ -107,14 +106,16 @@ export const createAttachmentMiddleware = enableInlinePlaying => {
         });
       }
     }
-    const [state] = useChatContextStore();
+    const _useChatContextStore = 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.adaptiveCardAttachmentId;
     const atttachmentAdaptiveCardStyles = {
       ...defaultAttachmentAdaptiveCardStyles,
       ...((_state$domainStates$r2 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r2 === void 0 ? void 0 : _state$domainStates$r2.attachmentAdaptiveCardStyles)
     };
     if (type === WebChatMiddlewareConstants.adaptiveCard || Constants.supportedAdaptiveCardContentTypes.indexOf(contentType) >= 0) {
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(AdaptiveCardAccessibilityWrapper, {
         id: attachmentId,
         style: atttachmentAdaptiveCardStyles
       }, next(...args));
@@ -131,13 +132,7 @@ export 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.INPROGRESS) {
         return /*#__PURE__*/React.createElement(ScanInProgressAttachment, {

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

@@ -0,0 +1,193 @@
+import React, { useEffect, useRef } from "react";
+
+/******
+ * 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 = useRef(null);
+  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.createElement("div", {
+    id: id,
+    style: style,
+    ref: containerRef
+  }, children);
+};
+export default AdaptiveCardAccessibilityWrapper;

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

@@ -1,3 +1,9 @@
+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; }
 import React from "react";
 import useChatContextStore from "../../../../../../hooks/useChatContextStore";
 import { defaultAttachmentProps } from "../../../../common/defaultProps/defaultAttachmentProps";
@@ -13,13 +19,13 @@ import AttachmentIcon from "./AttachmentIcon";
 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] = useChatContextStore();
+  const iconData = props.iconData,
+    imageCard = props.imageCard,
+    textCard = props.textCard,
+    renderer = props.renderer;
+  const _useChatContextStore = 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.webChatAttachmentId) ?? defaultAttachmentProps.webChatAttachmentId;
   const attachmentDividerStyles = {
     ...defaultAttachmentDividerStyles,
@@ -37,28 +43,36 @@ const Attachment = props => {
     ...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,
     ...((_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,
     ...((_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,
     ...((_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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, `

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

@@ -16,18 +16,11 @@ export 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.systemMessageTag)) {
     return false;
   }

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

@@ -12,7 +12,7 @@ export 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/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultAvatarTextStyles.js

@@ -1,6 +1,6 @@
 export const 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/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultSystemMessageStyles.js

@@ -5,7 +5,12 @@ export const 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/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultTimestampRetryStyles.js

@@ -2,5 +2,12 @@ import { defaultTimestampContentStyles } from "./defaultTimestampContentStyles";
 export const defaultTimestampRetryStyles = {
   ...defaultTimestampContentStyles,
   color: "#0063B1",
-  cursor: "pointer"
+  cursor: "pointer",
+  border: "none",
+  padding: 0,
+  margin: 0,
+  textDecoration: "none",
+  display: "inline",
+  fontWeight: "inherit",
+  textAlign: "inherit"
 };

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

@@ -26,15 +26,12 @@ function bin(items, grouping) {
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
 export 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/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/messageSequenceIdOverrideMiddleware.js

@@ -1,11 +1,13 @@
+import { isWebChatAction } from "../../../interfaces/IWebChatAction";
 import { WebChatActionType } from "../../enums/WebChatActionType";
 import { Constants } from "../../../../../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
 export const createMessageSequenceIdOverrideMiddleware = _ref => {
-  let {
-    dispatch
-  } = _ref;
+  let dispatch = _ref.dispatch;
   return next => action => {
+    if (!isWebChatAction(action)) {
+      return next(action);
+    }
     if (isApplicable(action)) {
       return next(overrideSequenceIdWithOriginalMessageId(action));
     }

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

@@ -1,12 +1,14 @@
+import { isWebChatAction } from "../../../interfaces/IWebChatAction";
 import { WebChatActionType } from "../../enums/WebChatActionType";
 import { Constants } from "../../../../../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
 export const createMessageTimeStampMiddleware = _ref => {
-  let {
-    dispatch
-  } = _ref;
+  let dispatch = _ref.dispatch;
   return next => action => {
+    if (!isWebChatAction(action)) {
+      return next(action);
+    }
     if (isApplicable(action)) {
       return next(evaluateTagsAndOverrideTimeStamp(action));
     }

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

@@ -1,3 +1,9 @@
+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; }
 import React from "react";
 import { DirectLineSenderRole } from "../../../enums/DirectLineSenderRole";
 import { Stack } from "@fluentui/react";
@@ -9,22 +15,18 @@ import useChatContextStore from "../../../../../../hooks/useChatContextStore";
 /* 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();
+  let args = _ref.args,
+    role = _ref.role,
+    name = _ref.name;
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 1),
+    state = _useChatContextStore2[0];
   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;
+  const timestamp = args.activity.timestamp;
   const getTimeElement = timestamp => {
     const timeString = getTimestampHourMinute(timestamp);
     const isAmPmFormat = timeString.toLowerCase().includes("am") || timeString.toLowerCase().includes("pm");