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

package/lib/esm/components/webchatcontainerstateful/WebChatContainerStateful.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 { Constants, HtmlAttributeNames, HtmlClassNames } from "../../common/Constants";
 import { Stack } from "@fluentui/react";
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
@@ -25,6 +31,7 @@ import { shouldLoadPersistentChatHistory } from "../livechatwidget/common/liveCh
 import { useChatContextStore } from "../..";
 import useFacadeSDKStore from "../../hooks/useFacadeChatSDKStore";
 import usePersistentChatHistory from "./hooks/usePersistentChatHistory";
+import { patchCitationAnchorsForA11y } from "./common/utils/citationA11y";
 let uiTimer;
 const broadcastChannelMessageEvent = "message";
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -53,8 +60,10 @@ const createMagicCodeSuccessResponse = signin => {
   };
 };
 export const WebChatContainerStateful = props => {
-  var _props$webChatContain, _defaultWebChatContai, _webChatContainerProp, _webChatContainerProp2, _webChatContainerProp3, _webChatContainerProp4, _webChatContainerProp5, _webChatContainerProp6, _webChatContainerProp7, _webChatContainerProp8, _webChatContainerProp9, _webChatContainerProp0, _props$webChatContain4, _defaultWebChatContai2, _props$webChatContain5, _defaultWebChatContai3, _webChatContainerProp1, _webChatContainerProp10, _webChatContainerProp11, _webChatContainerProp12, _webChatContainerProp13, _webChatContainerProp14, _webChatContainerProp15, _webChatContainerProp16, _webChatContainerProp17, _webChatContainerProp18, _webChatContainerProp19, _props$webChatContain6, _webChatContainerProp20, _webChatContainerProp21, _webChatContainerProp22, _webChatContainerProp23, _props$citationPanePr, _props$citationPanePr2, _props$citationPanePr3, _props$citationPanePr4, _props$citationPanePr5;
-  const [facadeChatSDK] = useFacadeSDKStore();
+  var _props$webChatContain, _defaultWebChatContai, _props$webChatContain2, _webChatContainerProp, _webChatContainerProp2, _webChatContainerProp3, _webChatContainerProp4, _webChatContainerProp5, _webChatContainerProp6, _webChatContainerProp7, _webChatContainerProp8, _webChatContainerProp9, _webChatContainerProp0, _props$webChatContain5, _defaultWebChatContai2, _props$webChatContain6, _defaultWebChatContai3, _webChatContainerProp1, _webChatContainerProp10, _webChatContainerProp11, _webChatContainerProp12, _webChatContainerProp13, _webChatContainerProp14, _webChatContainerProp15, _webChatContainerProp16, _webChatContainerProp17, _webChatContainerProp18, _webChatContainerProp19, _props$webChatContain7, _webChatContainerProp20, _webChatContainerProp21, _webChatContainerProp22, _webChatContainerProp23, _props$citationPanePr, _props$citationPanePr2, _props$citationPanePr3, _props$citationPanePr4, _props$citationPanePr5;
+  const _useFacadeSDKStore = useFacadeSDKStore(),
+    _useFacadeSDKStore2 = _slicedToArray(_useFacadeSDKStore, 1),
+    facadeChatSDK = _useFacadeSDKStore2[0];
 
   // Create a font family that includes emoji support, based on the primary font or default
   const webChatStyles = ((_props$webChatContain = props.webChatContainerProps) === null || _props$webChatContain === void 0 ? void 0 : _props$webChatContain.webChatStyles) ?? defaultWebChatContainerStatefulProps.webChatStyles;
@@ -62,6 +71,10 @@ export const WebChatContainerStateful = props => {
 
   // Use iOS-optimized emoji font that prioritizes system-ui for proper emoji rendering
   const fontFamilyWithEmojis = createIOSOptimizedEmojiFont(primaryFont);
+
+  // Enforce minimum input font-size to prevent iOS Safari auto-zoom on focus
+  const configuredInputFontSize = ((_props$webChatContain2 = props.webChatContainerProps) === null || _props$webChatContain2 === void 0 || (_props$webChatContain2 = _props$webChatContain2.adaptiveCardStyles) === null || _props$webChatContain2 === void 0 ? void 0 : _props$webChatContain2.inputFontSize) ?? defaultAdaptiveCardStyles.inputFontSize;
+  const inputFontSize = parseFloat(configuredInputFontSize ?? String(Constants.minInputFontSizePx)) < Constants.minInputFontSizePx ? Constants.minInputFontSize : configuredInputFontSize;
   useEffect(() => {
     uiTimer = createTimer();
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
@@ -70,20 +83,25 @@ export const WebChatContainerStateful = props => {
   }, []);
 
   // Citation pane state
-  const [citationPaneOpen, setCitationPaneOpen] = useState(false);
-  const [citationPaneText, setCitationPaneText] = useState("");
+  const _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    citationPaneOpen = _useState2[0],
+    setCitationPaneOpen = _useState2[1];
+  const _useState3 = useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    citationPaneText = _useState4[0],
+    setCitationPaneText = _useState4[1];
 
   // Guard to prevent handling multiple rapid clicks which could cause
   // the dim layer and pane to re-render out of sync and create a flicker.
   const citationOpeningRef = useRef(false);
-  const {
-    BasicWebChat
-  } = Components;
-  const [state, dispatch] = useChatContextStore();
-  const {
-    webChatContainerProps,
-    contextDataStore
-  } = props;
+  const BasicWebChat = Components.BasicWebChat;
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 2),
+    state = _useChatContextStore2[0],
+    dispatch = _useChatContextStore2[1];
+  const webChatContainerProps = props.webChatContainerProps,
+    contextDataStore = props.contextDataStore;
 
   // Type the chatConfig properly to avoid 'any' usage
   const extendedChatConfig = props.chatConfig;
@@ -142,23 +160,123 @@ export const WebChatContainerStateful = props => {
     document.addEventListener("click", clickHandler);
     return () => document.removeEventListener("click", clickHandler);
   }, [state]);
+
+  // Accessibility: Merge citation card's number badge and link text into a single
+  // focusable element. WebChat's LinkDefinitionItem renders an <a> containing a
+  // badge <div> (the number, e.g. "1") and a text <div> (the title). On iOS
+  // VoiceOver and Android TalkBack, those block-level descendants are otherwise
+  // announced as two separate focusable links. The patch sets a combined
+  // aria-label on the anchor and hides every descendant from the a11y tree so
+  // the whole card is announced as one link.
+  useEffect(() => {
+    const webChatRoot = document.getElementById("ms_lcw_webchat_root");
+    if (!webChatRoot) {
+      return;
+    }
+    patchCitationAnchorsForA11y(webChatRoot);
+    const observer = new MutationObserver(mutations => {
+      for (const m of mutations) {
+        if (m.type === "childList") {
+          m.addedNodes.forEach(node => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              var _parentElement, _parentElement$closes;
+              patchCitationAnchorsForA11y(node);
+              // A child added inside an existing anchor (e.g. React
+              // mounting OpenInNewWindowIcon after the anchor) means
+              // the parent anchor needs to re-walk its descendants.
+              const ancestor = (_parentElement = node.parentElement) === null || _parentElement === void 0 || (_parentElement$closes = _parentElement.closest) === null || _parentElement$closes === void 0 ? void 0 : _parentElement$closes.call(_parentElement, "a.webchat__link-definitions__list-item-box");
+              if (ancestor) {
+                patchCitationAnchorsForA11y(ancestor);
+              }
+            }
+          });
+        } else if (m.type === "attributes" && m.target.nodeType === Node.ELEMENT_NODE) {
+          var _target$closest;
+          // React may strip our aria-hidden during a re-render; reapply
+          // by re-patching the closest matching anchor ancestor.
+          const target = m.target;
+          const ancestor = (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, "a.webchat__link-definitions__list-item-box");
+          if (ancestor) {
+            patchCitationAnchorsForA11y(ancestor);
+          }
+        }
+      }
+    });
+    observer.observe(webChatRoot, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["aria-hidden", "role", "tabindex", "inert"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  const minimizedStyles = state.appStates.isMinimized ? shouldLoadPersistentHistoryMessages ? {
+    visibility: "hidden",
+    position: "absolute",
+    width: 0,
+    height: 0,
+    overflow: "hidden",
+    pointerEvents: "none"
+  } : {
+    display: "none"
+  } : {};
   const containerStyles = {
-    root: Object.assign({}, defaultWebChatContainerStatefulProps.containerStyles, webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.containerStyles, {
-      display: state.appStates.isMinimized ? "none" : ""
-    }) // Use this instead of removing WebChat from the picture so that the activity observer inside the adapter is not invoked
+    root: Object.assign({}, defaultWebChatContainerStatefulProps.containerStyles, webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.containerStyles, minimizedStyles) // Use visibility-based hiding instead of display:none to preserve scroll position across minimize/maximize
   };
   const localizedTexts = {
     ...defaultMiddlewareLocalizedTexts,
     ...(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.localizedTexts)
   };
   useEffect(() => {
-    var _props$webChatContain2;
+    var _props$webChatContain3;
     if (getDeviceType() !== "standard" && (webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.webChatHistoryMobileAccessibilityLabel) !== undefined) {
       const chatHistoryElement = document.querySelector(`.${HtmlClassNames.webChatHistoryContainer}`);
       if (chatHistoryElement) {
         chatHistoryElement.setAttribute(HtmlAttributeNames.ariaLabel, webChatContainerProps.webChatHistoryMobileAccessibilityLabel);
       }
     }
+
+    // internal tracking: WebChats BasicToaster renders a `role="log"` container
+    // with no accessible name. When the toaster is empty (typical idle
+    // state) screen readers traversing the page announce it as "blank".
+    // Inject an aria-label so the region has a meaningful name; the
+    // consumer can override via the new
+    // `webChatNotificationRegionAccessibilityLabel` prop. The toaster
+    // may not be rendered yet when this effect first runs, so observe
+    // for it via a MutationObserver scoped to the widget root (or, if
+    // not yet mounted, the widget container's parent) so we never fire
+    // on host-page mutations outside the widget subtree.
+    const toasterLabel = (webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.webChatNotificationRegionAccessibilityLabel) ?? defaultWebChatContainerStatefulProps.webChatNotificationRegionAccessibilityLabel ?? "Chat notifications";
+    const labelToaster = root => {
+      const toaster = root.querySelector(".webchat__toaster[role='log']");
+      if (toaster && !toaster.getAttribute(HtmlAttributeNames.ariaLabel)) {
+        toaster.setAttribute(HtmlAttributeNames.ariaLabel, toasterLabel);
+        return true;
+      }
+      return false;
+    };
+    // Prefer the widget root; if it is not yet in the DOM, fall back to
+    // `document` for the *initial* lookup only, then observe the most
+    // specific available scope (widget root if present, otherwise the
+    // widget's parent / document.body as a last resort). The observer
+    // re-resolves the widget root on every callback so we tighten scope
+    // as soon as it mounts.
+    let toasterObserver;
+    const resolveScope = () => document.getElementById("ms_lcw_webchat_root") ?? document.body;
+    if (!labelToaster(resolveScope())) {
+      toasterObserver = new MutationObserver(() => {
+        const scope = resolveScope();
+        if (labelToaster(scope)) {
+          var _toasterObserver;
+          (_toasterObserver = toasterObserver) === null || _toasterObserver === void 0 || _toasterObserver.disconnect();
+          toasterObserver = undefined;
+        }
+      });
+      toasterObserver.observe(resolveScope(), {
+        childList: true,
+        subtree: true
+      });
+    }
     dispatch({
       type: LiveChatWidgetActionType.SET_RENDERING_MIDDLEWARE_PROPS,
       payload: webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.renderingMiddlewareProps
@@ -170,7 +288,7 @@ export const WebChatContainerStateful = props => {
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.WebChatLoaded
     });
-    if (((_props$webChatContain2 = props.webChatContainerProps) === null || _props$webChatContain2 === void 0 || (_props$webChatContain2 = _props$webChatContain2.renderingMiddlewareProps) === null || _props$webChatContain2 === void 0 ? void 0 : _props$webChatContain2.disableThirdPartyCookiesAlert) !== true && !contextDataStore) {
+    if (((_props$webChatContain3 = props.webChatContainerProps) === null || _props$webChatContain3 === void 0 || (_props$webChatContain3 = _props$webChatContain3.renderingMiddlewareProps) === null || _props$webChatContain3 === void 0 ? void 0 : _props$webChatContain3.disableThirdPartyCookiesAlert) !== true && !contextDataStore) {
       try {
         localStorage;
         sessionStorage;
@@ -183,10 +301,14 @@ export const WebChatContainerStateful = props => {
         }
       }
     }
+    return () => {
+      var _toasterObserver2;
+      (_toasterObserver2 = toasterObserver) === null || _toasterObserver2 === void 0 || _toasterObserver2.disconnect();
+    };
   }, []);
   useEffect(() => {
-    var _props$webChatContain3;
-    if (!((_props$webChatContain3 = props.webChatContainerProps) !== null && _props$webChatContain3 !== void 0 && (_props$webChatContain3 = _props$webChatContain3.botMagicCode) !== null && _props$webChatContain3 !== void 0 && _props$webChatContain3.disabled)) {
+    var _props$webChatContain4;
+    if (!((_props$webChatContain4 = props.webChatContainerProps) !== null && _props$webChatContain4 !== void 0 && (_props$webChatContain4 = _props$webChatContain4.botMagicCode) !== null && _props$webChatContain4 !== void 0 && _props$webChatContain4.disabled)) {
       return;
     }
     if (!window.BroadcastChannel) {
@@ -202,14 +324,10 @@ export const WebChatContainerStateful = props => {
 
     const eventListener = event => {
       // eslint-disable-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-empty-function
-      const {
-        data
-      } = event;
+      const data = event.data;
       if (BotMagicCodeStore.botOAuthSignInId === data.signin) {
-        const {
-          signin,
-          code
-        } = data;
+        const signin = data.signin,
+          code = data.code;
         const text = `${code}`;
         const action = postActivity({
           text,
@@ -284,9 +402,15 @@ export const WebChatContainerStateful = props => {
             ${webChatContainerProps !== null && webChatContainerProps !== void 0 && (_webChatContainerProp0 = webChatContainerProps.adaptiveCardStyles) !== null && _webChatContainerProp0 !== void 0 && _webChatContainerProp0.choiceInputPadding ? `padding: ${webChatContainerProps.adaptiveCardStyles.choiceInputPadding} !important;` : ""}
         }
 
+        div[class="ac-input-container"] input,
+        div[class="ac-input-container"] textarea,
+        div[class="ac-input-container"] select {
+            font-size: ${inputFontSize} !important;
+        }
+
         .ms_lcw_webchat_received_message>div.webchat__stacked-layout>div.webchat__stacked-layout__main>div.webchat__stacked-layout__content>div.webchat__stacked-layout__message-row>[class^=webchat]:not(.webchat__bubble--from-user)>.webchat__bubble__content {
-            background-color: ${((_props$webChatContain4 = props.webChatContainerProps) === null || _props$webChatContain4 === void 0 || (_props$webChatContain4 = _props$webChatContain4.webChatStyles) === null || _props$webChatContain4 === void 0 ? void 0 : _props$webChatContain4.bubbleBackground) ?? ((_defaultWebChatContai2 = defaultWebChatContainerStatefulProps.webChatStyles) === null || _defaultWebChatContai2 === void 0 ? void 0 : _defaultWebChatContai2.bubbleBackground)};
-            color:${((_props$webChatContain5 = props.webChatContainerProps) === null || _props$webChatContain5 === void 0 || (_props$webChatContain5 = _props$webChatContain5.webChatStyles) === null || _props$webChatContain5 === void 0 ? void 0 : _props$webChatContain5.bubbleTextColor) ?? ((_defaultWebChatContai3 = defaultWebChatContainerStatefulProps.webChatStyles) === null || _defaultWebChatContai3 === void 0 ? void 0 : _defaultWebChatContai3.bubbleTextColor)};
+            background-color: ${((_props$webChatContain5 = props.webChatContainerProps) === null || _props$webChatContain5 === void 0 || (_props$webChatContain5 = _props$webChatContain5.webChatStyles) === null || _props$webChatContain5 === void 0 ? void 0 : _props$webChatContain5.bubbleBackground) ?? ((_defaultWebChatContai2 = defaultWebChatContainerStatefulProps.webChatStyles) === null || _defaultWebChatContai2 === void 0 ? void 0 : _defaultWebChatContai2.bubbleBackground)};
+            color:${((_props$webChatContain6 = props.webChatContainerProps) === null || _props$webChatContain6 === void 0 || (_props$webChatContain6 = _props$webChatContain6.webChatStyles) === null || _props$webChatContain6 === void 0 ? void 0 : _props$webChatContain6.bubbleTextColor) ?? ((_defaultWebChatContai3 = defaultWebChatContainerStatefulProps.webChatStyles) === null || _defaultWebChatContai3 === void 0 ? void 0 : _defaultWebChatContai3.bubbleTextColor)};
         }
 
         div[class="ac-textBlock"] a:link,
@@ -371,7 +495,7 @@ export const WebChatContainerStateful = props => {
         }
 
         .webchat__stacked-layout_container>div {
-            background: ${(props === null || props === void 0 || (_props$webChatContain6 = props.webChatContainerProps) === null || _props$webChatContain6 === void 0 || (_props$webChatContain6 = _props$webChatContain6.containerStyles) === null || _props$webChatContain6 === void 0 ? void 0 : _props$webChatContain6.background) ?? ""}
+            background: ${(props === null || props === void 0 || (_props$webChatContain7 = props.webChatContainerProps) === null || _props$webChatContain7 === void 0 || (_props$webChatContain7 = _props$webChatContain7.containerStyles) === null || _props$webChatContain7 === void 0 ? void 0 : _props$webChatContain7.background) ?? ""}
         }
         .webchat__toast_text {
             display: flex;
@@ -400,6 +524,7 @@ export const WebChatContainerStateful = props => {
 
         .webchat__auto-resize-textarea__textarea.webchat__send-box-text-box__html-text-area {
             font-family: ${fontFamilyWithEmojis} !important;
+            font-size: ${inputFontSize} !important;
         }
 
         /* Suggested actions carousel previous/next navigation focus */

package/lib/esm/components/webchatcontainerstateful/common/DesignerChatAdapter.js

@@ -51,6 +51,16 @@ export let DesignerChatAdapter = /*#__PURE__*/function (_MockAdapter) {
       if (msg.text) {
         if (msg.suggestedActions) {
           postAgentSuggestedActionsActivity(this.activityObserver, msg.text, msg.suggestedActions, index * 100);
+        } else if (msg.from && msg.from.role) {
+          // Route caller-supplied `from` through the shared
+          // postBotMessageActivity helper so the activity shape
+          // (id, channelData.tags, timestamp, type) matches every
+          // other designer-mode path and downstream middleware
+          // (localizedStringsBotInitialsMiddleware, telemetry,
+          // attachment plumbing) behaves identically. The override
+          // narrows only the fields the caller cares about (e.g.
+          // from.name / from.role) — base botUser fields remain.
+          postBotMessageActivity(this.activityObserver, msg.text, undefined, index * 100, msg.from);
         } else {
           postBotMessageActivity(this.activityObserver, msg.text, undefined, index * 100);
         }

package/lib/esm/components/webchatcontainerstateful/common/activityConverters/convertPersistentChatHistoryMessageToActivity.js

@@ -1,4 +1,5 @@
 import { Constants } from "../../../../common/Constants";
+import { SupportedAdaptiveCards } from "@microsoft/omnichannel-chat-sdk/lib/utils/printers/interfaces/SupportedAdaptiveCards";
 import botActivity from "../activities/botActivity";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -17,15 +18,22 @@ const convertStringValueToInt = value => {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const convertPersistentChatHistoryMessageToActivity = message => {
-  var _from$user, _from$application;
-  const {
-    additionalData,
-    attachments,
-    content,
-    created,
-    from,
-    transcriptOriginalMessageId
-  } = message;
+  var _from$application, _from$user, _from$application2;
+  const additionalData = message.additionalData,
+    attachments = message.attachments,
+    botContentType = message.botContentType,
+    content = message.content,
+    created = message.created,
+    from = message.from,
+    transcriptOriginalMessageId = message.transcriptOriginalMessageId;
+  const isFromCustomer = (from === null || from === void 0 || (_from$application = from.application) === null || _from$application === void 0 ? void 0 : _from$application.displayName) === "Customer";
+
+  // Filter out customer responses to adaptive cards (e.g., form submissions like {"value":{"goPaperless":"yes"}}).
+  // These are the customer's postBack/messageBack replies to bot adaptive cards — not displayable content.
+  // In live chat, webchat hides these natively; in history we must filter them explicitly.
+  if (isFromCustomer && botContentType === "azurebotservice.adaptivecard") {
+    return null;
+  }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const activity = {
     ...botActivity,
@@ -62,13 +70,110 @@ const convertPersistentChatHistoryMessageToActivity = message => {
       name: from.user.displayName
     };
   }
-  if ((from === null || from === void 0 || (_from$application = from.application) === null || _from$application === void 0 ? void 0 : _from$application.displayName) === "Customer") {
+  if ((from === null || from === void 0 || (_from$application2 = from.application) === null || _from$application2 === void 0 ? void 0 : _from$application2.displayName) === "Customer") {
     activity.from = {
       role: "user",
       name: from.application.displayName
     };
   }
   if (content) {
+    var _parsedContent;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let parsedContent;
+    try {
+      parsedContent = JSON.parse(content);
+    } catch (error) {
+      parsedContent = null; // fall back to normal text handling
+    }
+
+    // Check if this is a customer form submission response (e.g., RichObjectMessage_Form)
+    // These should be ignored as they are form submission data, not displayable content
+    if (isFromCustomer && ((_parsedContent = parsedContent) === null || _parsedContent === void 0 || (_parsedContent = _parsedContent.value) === null || _parsedContent === void 0 ? void 0 : _parsedContent.type) === "RichObjectMessage_Form") {
+      return null;
+    }
+    if (parsedContent && typeof parsedContent === "object") {
+      var _parsedContent$sugges;
+      // Structural detection: check the parsed object's properties directly
+      const hasAttachments = Array.isArray(parsedContent.attachments) && parsedContent.attachments.length > 0;
+      const hasSuggestedActions = Array.isArray((_parsedContent$sugges = parsedContent.suggestedActions) === null || _parsedContent$sugges === void 0 ? void 0 : _parsedContent$sugges.actions) && parsedContent.suggestedActions.actions.length > 0;
+      const isRawAdaptiveCardBody = parsedContent.type === "AdaptiveCard";
+
+      // Filter out suggested-action-only messages from history.
+      // WebChat only renders suggestedActions for the most recent activity, so in history
+      // these render as empty "Suggested reply" text bubbles with no actionable buttons.
+      if (hasSuggestedActions && !hasAttachments) {
+        return null;
+      }
+
+      // Substring detection: check the raw content string for known card type patterns
+      const contentLower = content.toLowerCase();
+      const isAdaptiveCard = contentLower.includes(Constants.AdaptiveCardType);
+      const isSuggestedActions = contentLower.includes(Constants.SuggestedActionsType);
+      const containsSupportedCard = Object.values(SupportedAdaptiveCards).some(type => contentLower.includes(type.toLowerCase()));
+
+      // If the content is a raw adaptive card body (type: "AdaptiveCard"), wrap it as an attachment
+      // so webchat can render it properly instead of treating it as an unknown activity type
+      if (isRawAdaptiveCardBody) {
+        return {
+          ...activity,
+          text: "",
+          attachments: [{
+            contentType: SupportedAdaptiveCards.Adaptive,
+            content: parsedContent
+          }],
+          timestamp,
+          channelData: {
+            ...activity.channelData,
+            "webchat:sequence-id": webchatSequenceId
+          }
+        };
+      }
+
+      // Detect rich content using both structural checks and substring matching
+      if (hasAttachments || hasSuggestedActions || isAdaptiveCard || isSuggestedActions || containsSupportedCard) {
+        var _activity$from;
+        // Preserve from.role from the base activity — parsedContent.from may lack the role property
+        // which webchat needs to determine how to render the message (bot vs user)
+        const preservedFrom = {
+          ...activity.from,
+          ...(parsedContent.from || {}),
+          role: ((_activity$from = activity.from) === null || _activity$from === void 0 ? void 0 : _activity$from.role) || "bot"
+        };
+        return {
+          ...activity,
+          ...parsedContent,
+          from: preservedFrom,
+          timestamp,
+          channelData: {
+            ...activity.channelData,
+            "webchat:sequence-id": webchatSequenceId
+          }
+        };
+      }
+
+      // If parsedContent is a webchat activity (type: "message") but didn't match any specific card check,
+      // still treat it as a rich activity to avoid displaying raw JSON as text
+      if (parsedContent.type === "message" && (parsedContent.attachments || parsedContent.suggestedActions || parsedContent.value)) {
+        var _activity$from2;
+        const preservedFrom = {
+          ...activity.from,
+          ...(parsedContent.from || {}),
+          role: ((_activity$from2 = activity.from) === null || _activity$from2 === void 0 ? void 0 : _activity$from2.role) || "bot"
+        };
+        return {
+          ...activity,
+          ...parsedContent,
+          from: preservedFrom,
+          timestamp,
+          channelData: {
+            ...activity.channelData,
+            "webchat:sequence-id": webchatSequenceId
+          }
+        };
+      }
+    }
+
+    // Plain text message
     return {
       ...activity,
       text: content,

package/lib/esm/components/webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts.js

@@ -27,8 +27,11 @@ export const defaultMiddlewareLocalizedTexts = {
   MIDDLEWARE_BANNER_CHAT_DISCONNECT: "Your conversation has been disconnected. For additional assistance, please start a new chat.",
   THIRD_PARTY_COOKIES_BLOCKED_ALERT_MESSAGE: "Allow sites to save/read cookies in browser settings. Reloading page starts a new chat.",
   MIDDLEWARE_BANNER_FILE_IS_MALICIOUS: "{0} has been blocked because the file may contain a malware.",
+  MIDDLEWARE_BANNER_FILE_SENT: "File sent successfully.",
   MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_SUCCESS: "Email will be sent after chat ends!",
   MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR: "Email {0} could not be saved, try again later.",
+  MIDDLEWARE_SR_PREFIX_SUCCESS: "Success. ",
+  MIDDLEWARE_SR_PREFIX_ERROR: "Error. ",
   PREVIOUS_MESSAGES_LOADING: "Loading previous messages...",
   CONVERSATION_DIVIDER_ARIA_LABEL: "Conversation history divider"
 };

package/lib/esm/components/webchatcontainerstateful/common/defaultProps/defaultWebChatContainerStatefulProps.js

@@ -13,5 +13,6 @@ export const defaultWebChatContainerStatefulProps = {
   honorsTargetInHTMLLinks: false,
   hyperlinkTextOverride: false,
   directLine: new MockAdapter(),
-  adaptiveCardStyles: defaultAdaptiveCardStyles
+  adaptiveCardStyles: defaultAdaptiveCardStyles,
+  webChatNotificationRegionAccessibilityLabel: "Chat notifications"
 };

package/lib/esm/components/webchatcontainerstateful/common/defaultStyles/defaultAdaptiveCardStyles.js

@@ -1,3 +1,4 @@
+import { Constants } from "../../../../common/Constants";
 export const defaultAdaptiveCardStyles = {
   background: "white",
   color: "black",
@@ -5,5 +6,6 @@ export const defaultAdaptiveCardStyles = {
   textWhiteSpace: "normal",
   buttonWhiteSpace: "normal",
   buttonFlexWrap: "nowrap",
-  buttonGap: "0px"
+  buttonGap: "0px",
+  inputFontSize: Constants.minInputFontSize
 };

package/lib/esm/components/webchatcontainerstateful/common/defaultStyles/defaultWebChatStyles.js

@@ -17,7 +17,7 @@ export const defaultWebChatStyles = {
   bubbleTextColor: "White",
   hideSendBox: false,
   hideUploadButton: true,
-  primaryFont: "Segoe UI, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Noto Color Emoji\"",
+  primaryFont: "Segoe UI, Arial, sans-serif",
   rootHeight: "100%",
   rootWidth: "100%",
   sendBoxTextWrap: true,
@@ -28,7 +28,7 @@ export const defaultWebChatStyles = {
   suggestedActionsStackedHeight: 125,
   suggestedActionsStackedOverflow: "scroll",
   // eslint-disable-line @typescript-eslint/no-explicit-any
-  typingAnimationDuration: 3500,
+  typingAnimationDuration: 4500,
   emojiSet: {
     ":)": "😊",
     ":-)": "😊",

package/lib/esm/components/webchatcontainerstateful/common/utils/chatAdapterUtils.js

@@ -34,11 +34,13 @@ export const postEchoActivity = function (activityObserver, activity, user) {
 export const postBotMessageActivity = function (activityObserver, text) {
   let tags = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
   let delay = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1000;
+  let fromOverride = arguments.length > 4 ? arguments[4] : undefined;
   setTimeout(() => {
     activityObserver === null || activityObserver === void 0 || activityObserver.next({
       id: uuidv4(),
       from: {
-        ...botUser
+        ...botUser,
+        ...(fromOverride ?? {})
       },
       text,
       type: "message",