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

package/lib/esm/components/prechatsurveypanestateful/PreChatSurveyPaneStateful.js

@@ -1,6 +1,12 @@
+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 { HtmlAttributeNames, Regex } from "../../common/Constants";
 import { ConversationStage, LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { createTimer, extractPreChatSurveyResponseValues, findAllFocusableElement, getStateFromCache, getWidgetCacheId, isUndefinedOrEmpty, parseAdaptiveCardPayload } from "../../common/utils";
 import { ConversationState } from "../../contexts/common/ConversationState";
 import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
@@ -11,6 +17,34 @@ import { defaultGeneralPreChatSurveyPaneStyleProps } from "./common/defaultStyle
 import { defaultPreChatSurveyLocalizedTexts } from "./common/defaultProps/defaultPreChatSurveyLocalizedTexts";
 import useChatContextStore from "../../hooks/useChatContextStore";
 let uiTimer;
+const getFocusedElementAnnouncement = element => {
+  var _element$textContent;
+  const ariaLabel = element.getAttribute(HtmlAttributeNames.ariaLabel);
+  if (ariaLabel) {
+    return ariaLabel.trim();
+  }
+  const ariaLabelledBy = element.getAttribute(HtmlAttributeNames.ariaLabelledby);
+  if (ariaLabelledBy) {
+    const labelledByText = ariaLabelledBy.split(/\s+/).map(id => {
+      var _document$getElementB;
+      return (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 || (_document$getElementB = _document$getElementB.textContent) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.trim();
+    }).filter(Boolean).join(" ");
+    if (labelledByText) {
+      return labelledByText;
+    }
+  }
+  if (element.id) {
+    const label = Array.from(document.querySelectorAll("label")).find(candidate => candidate.htmlFor === element.id || candidate.getAttribute("for") === element.id);
+    if (label !== null && label !== void 0 && label.textContent) {
+      return label.textContent.trim();
+    }
+  }
+  const parentLabel = element.closest("label");
+  if (parentLabel !== null && parentLabel !== void 0 && parentLabel.textContent) {
+    return parentLabel.textContent.trim();
+  }
+  return ((_element$textContent = element.textContent) === null || _element$textContent === void 0 ? void 0 : _element$textContent.trim()) ?? "";
+};
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const PreChatSurveyPaneStateful = props => {
@@ -27,12 +61,18 @@ export const PreChatSurveyPaneStateful = props => {
   }, []);
 
   // Set MarkDown global variable to be used for prechat adaptive cards
-  window["markdownit"] = MarkdownIt;
-  const [state, dispatch] = useChatContextStore();
-  const {
-    surveyProps,
-    initStartChat
-  } = props;
+  window.markdownit = MarkdownIt;
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 2),
+    state = _useChatContextStore2[0],
+    dispatch = _useChatContextStore2[1];
+  const surveyProps = props.surveyProps,
+    initStartChat = props.initStartChat;
+  const _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    preChatFocusAnnouncement = _useState2[0],
+    setPreChatFocusAnnouncement = _useState2[1];
+  const liveRegionUpdateTimeout = useRef();
   const generalStyleProps = Object.assign({}, defaultGeneralPreChatSurveyPaneStyleProps, surveyProps === null || surveyProps === void 0 || (_surveyProps$stylePro = surveyProps.styleProps) === null || _surveyProps$stylePro === void 0 ? void 0 : _surveyProps$stylePro.generalStyleProps, {
     display: state.appStates.isMinimized ? "none" : ""
   });
@@ -119,6 +159,16 @@ export const PreChatSurveyPaneStateful = props => {
     ...(surveyProps === null || surveyProps === void 0 ? void 0 : surveyProps.styleProps),
     generalStyleProps: generalStyleProps
   };
+  const announceFocusedElement = event => {
+    if (liveRegionUpdateTimeout.current) {
+      window.clearTimeout(liveRegionUpdateTimeout.current);
+    }
+    const announcement = getFocusedElementAnnouncement(event.target);
+    setPreChatFocusAnnouncement("");
+    liveRegionUpdateTimeout.current = window.setTimeout(() => {
+      setPreChatFocusAnnouncement(announcement);
+    }, 0);
+  };
   useEffect(() => {
     // Set Aria-Label Attribute for Inputs
     const adaptiveCardElements = document.getElementsByClassName(HtmlAttributeNames.adaptiveCardClassName);
@@ -166,9 +216,53 @@ export const PreChatSurveyPaneStateful = props => {
       }
     }
   }, [state.appStates.isMinimized]);
-  return /*#__PURE__*/React.createElement(PreChatSurveyPane, {
-    controlProps: controlProps,
-    styleProps: styleProps
-  });
+  useEffect(() => () => {
+    if (liveRegionUpdateTimeout.current) {
+      window.clearTimeout(liveRegionUpdateTimeout.current);
+    }
+  }, []);
+  return (
+    /*#__PURE__*/
+    // Bug 6525143 / Bug 6423684: the LiveChatWidget container is a centered
+    // flex column (HeaderStateful first, this pane second) with
+    // justifyContent: center and clipped overflow. Sizing this focus-capture
+    // wrapper to height: 100% makes it 100% of the ENTIRE container rather than
+    // the space remaining below the header, so header + pane overflow the
+    // container and the centered column splits the overflow top & bottom -
+    // clipping the header's top edge. Instead, fill only the remaining space
+    // with flex (flex: 1 1 auto + minHeight: 0) and lay out as a column so the
+    // header stays fully visible while the inner pane (a flex child that grows
+    // via flexGrow/flexBasis - see defaultGeneralPreChatSurveyPaneStyleProps)
+    // fills the leftover area and scrolls, instead of collapsing to its
+    // intrinsic content size.
+    React.createElement("div", {
+      onFocusCapture: announceFocusedElement,
+      style: {
+        width: "100%",
+        flex: "1 1 auto",
+        minHeight: 0,
+        display: "flex",
+        flexDirection: "column"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      style: {
+        position: "absolute",
+        width: "1px",
+        height: "1px",
+        margin: "-1px",
+        padding: 0,
+        border: 0,
+        clip: "rect(0, 0, 0, 0)",
+        overflow: "hidden",
+        whiteSpace: "nowrap"
+      }
+    }, preChatFocusAnnouncement), /*#__PURE__*/React.createElement(PreChatSurveyPane, {
+      controlProps: controlProps,
+      styleProps: styleProps
+    }))
+  );
 };
 export default PreChatSurveyPaneStateful;

package/lib/esm/components/prechatsurveypanestateful/common/defaultStyles/defaultGeneralPreChatSurveyPaneStyleProps.js

@@ -5,6 +5,17 @@ export const defaultGeneralPreChatSurveyPaneStyleProps = {
   backgroundColor: "#FFFFFF",
   borderColor: "#F1F1F1",
   overflowY: "auto",
-  height: "inherit",
+  // Bug 6525143 / Bug 6423684: the focus-capture wrapper is a flex column sized to
+  // the space remaining below the header (flex: 1 1 auto). Fill that space via flex
+  // (flexGrow: 1 / flexBasis: 0 / minHeight: 0) instead of height: 100%, which
+  // resolved against the whole centered #oc-lcw container and pushed the header out
+  // (the clip). minHeight: 0 keeps the pane shrinkable so its overflowY scroll
+  // engages for tall surveys rather than growing the column and clipping the header.
+  // Note: the shared PreChatSurveyPane default (chat-components) still merges
+  // height: "inherit" underneath these props; under this flex parent that resolves
+  // to auto and is overridden by the flex main-size, so the pane still fills via flex.
+  flexGrow: 1,
+  flexBasis: 0,
+  minHeight: 0,
   width: "inherit"
 };

package/lib/esm/components/proactivechatpanestateful/ProactiveChatPaneStateful.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 { BroadcastEvent, LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect, useState } from "react";
 import { createTimer } from "../../common/utils";
@@ -21,13 +27,17 @@ export const ProactiveChatPaneStateful = props => {
       Description: "Proactive chat pane loading started."
     });
   }, []);
-  const [state, dispatch] = useChatContextStore();
-  const {
-    proactiveChatProps,
-    startChat
-  } = props;
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 2),
+    state = _useChatContextStore2[0],
+    dispatch = _useChatContextStore2[1];
+  const proactiveChatProps = props.proactiveChatProps,
+    startChat = props.startChat;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [timeoutRemoved, setTimeoutRemoved] = useState(false);
+  const _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    timeoutRemoved = _useState2[0],
+    setTimeoutRemoved = _useState2[1];
   const handleProactiveChatInviteTimeout = () => {
     if (!timeoutRemoved) {
       setTimeoutRemoved(true);

package/lib/esm/components/reconnectchatpanestateful/ReconnectChatPaneStateful.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 { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
 import { createTimer, setFocusOnElement } from "../../common/utils";
@@ -16,15 +22,18 @@ export const ReconnectChatPaneStateful = props => {
       ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
     });
   }, []);
-  const [state, dispatch] = useChatContextStore();
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 2),
+    state = _useChatContextStore2[0],
+    dispatch = _useChatContextStore2[1];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   //const chatSDK: any = useChatSDKStore();
-  const [facadeChatSDK] = useFacadeChatSDKStore();
+  const _useFacadeChatSDKStor = useFacadeChatSDKStore(),
+    _useFacadeChatSDKStor2 = _slicedToArray(_useFacadeChatSDKStor, 1),
+    facadeChatSDK = _useFacadeChatSDKStor2[0];
   const chatSDK = facadeChatSDK.getChatSDK();
-  const {
-    reconnectChatProps,
-    initStartChat
-  } = props;
+  const reconnectChatProps = props.reconnectChatProps,
+    initStartChat = props.initStartChat;
   const startChat = async continueChat => {
     dispatch({
       type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,

package/lib/esm/components/startchaterrorpanestateful/StartChatErrorPaneStateful.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 { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
 import { createTimer, findAllFocusableElement } from "../../common/utils";
@@ -20,7 +26,9 @@ export const StartChatErrorPaneStateful = startChatErrorPaneProps => {
       Event: TelemetryEvent.UXStartChatErrorPaneStart
     });
   }, []);
-  const [state] = useChatContextStore();
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 1),
+    state = _useChatContextStore2[0];
   const generalStyleProps = Object.assign({}, defaultStartChatErrorPaneGeneralStyleProps, startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 || (_startChatErrorPanePr = startChatErrorPaneProps.styleProps) === null || _startChatErrorPanePr === void 0 ? void 0 : _startChatErrorPanePr.generalStyleProps);
   const titleStyleProps = Object.assign({}, defaultStartChatErrorPaneTitleStyleProps, startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 || (_startChatErrorPanePr2 = startChatErrorPaneProps.styleProps) === null || _startChatErrorPanePr2 === void 0 ? void 0 : _startChatErrorPanePr2.titleStyleProps);
   const subtitleStyleProps = Object.assign({}, defaultStartChatErrorPaneSubtitleStyleProps, startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 || (_startChatErrorPanePr3 = startChatErrorPaneProps.styleProps) === null || _startChatErrorPanePr3 === void 0 ? void 0 : _startChatErrorPanePr3.subtitleStyleProps);

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);
         }