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

package/lib/esm/components/livechatwidget/livechatwidgetstateful/LiveChatWidgetStateful.js

@@ -1,4 +1,10 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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, ConversationStage, LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
 import { BroadcastService, BroadcastServiceInitialize, decodeComponentString } from "@microsoft/omnichannel-chat-components";
 import { Components } from "botframework-webchat";
@@ -8,7 +14,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { TelemetryManager, TelemetryTimers } from "../../../common/telemetry/TelemetryManager";
 import { chatSDKStateCleanUp, endChat, endChatStateCleanUp, prepareEndChat } from "../common/endChat";
 import { checkIfConversationStillValid, initStartChat, prepareStartChat, setPreChatAndInitiateChat } from "../common/startChat";
-import { createTimer, getBroadcastChannelName, getConversationDetailsCall, getLocaleDirection, getStateFromCache, getWidgetCacheIdfromProps, getWidgetEndChatEventName, isNullOrEmptyString, isNullOrUndefined, isThisSessionPopout, isUndefinedOrEmpty, setOcUserAgent } from "../../../common/utils";
+import { createTimer, getBroadcastChannelName, getConversationDetailsCall, getLocaleDirection, getStateFromCache, getWidgetCacheIdfromProps, getWidgetEndChatEventName, isNullOrEmptyString, isNullOrUndefined, isThisSessionPopout, isUndefinedOrEmpty, setAriaHiddenForSiblings, setOcUserAgent } from "../../../common/utils";
 import { customEventCallback, subscribeToSendCustomEvent } from "../common/customEventHandler";
 import { defaultClientDataStoreProvider, isCookieAllowed } from "../../../common/storage/default/defaultClientDataStoreProvider";
 import { handleChatReconnect, isPersistentEnabled, isReconnectEnabled } from "../common/reconnectChatHelper";
@@ -50,14 +56,16 @@ import { initConfirmationPropsComposer } from "../common/initConfirmationPropsCo
 import { initWebChatComposer } from "../common/initWebChatComposer";
 import { registerBroadcastServiceForStorage } from "../../../common/storage/default/defaultCacheManager";
 import { setPostChatContextAndLoadSurvey } from "../common/setPostChatContextAndLoadSurvey";
+import { shouldLoadPersistentChatHistory } from "../common/liveChatConfigUtils";
 import { startProactiveChat } from "../common/startProactiveChat";
 import useChatAdapterStore from "../../../hooks/useChatAdapterStore";
 import useChatContextStore from "../../../hooks/useChatContextStore";
 import useFacadeSDKStore from "../../../hooks/useFacadeChatSDKStore";
 import { getPostChatContext, initiatePostChat } from "../common/renderSurveyHelpers";
+import { logRecoveryEligibilityTelemetry } from "../common/recoveryEligibilityTelemetry";
 let uiTimer;
 export const LiveChatWidgetStateful = props => {
-  var _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _props$webChatContain4, _props$webChatContain5, _props$styleProps, _props$webChatContain6, _props$controlProps, _props$controlProps3, _state$appStates7, _props$webChatContain9, _state$appStates8, _props$webChatContain1, _props$webChatContain10, _props$controlProps10, _props$draggableChatW, _props$draggableChatW2, _props$draggableChatW3, _props$draggableChatW4, _props$draggableChatW5, _livechatProps$webCha, _livechatProps$styleP, _livechatProps$contro, _livechatProps$contro2, _livechatProps$compon, _livechatProps$contro3, _livechatProps$compon2, _livechatProps$contro4, _livechatProps$compon3, _livechatProps$contro5, _livechatProps$compon4, _livechatProps$contro6, _livechatProps$compon5, _livechatProps$contro7, _livechatProps$compon6, _livechatProps$contro8, _livechatProps$compon7, _livechatProps$contro9, _livechatProps$compon8, _livechatProps$contro0, _livechatProps$contro1, _livechatProps$compon9, _livechatProps$contro10, _livechatProps$compon0, _livechatProps$contro11, _livechatProps$compon1, _livechatProps$compon10, _livechatProps$compon11;
+  var _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _props$webChatContain4, _props$webChatContain5, _props$styleProps, _props$webChatContain6, _props$controlProps, _props$controlProps3, _state$appStates7, _props$webChatContain9, _state$appStates8, _props$webChatContain1, _props$webChatContain10, _props$controlProps10, _props$draggableChatW, _props$draggableChatW2, _props$draggableChatW3, _props$draggableChatW4, _props$draggableChatW5, _livechatProps$webCha, _livechatProps$styleP, _props$headerProps, _livechatProps$contro, _livechatProps$contro2, _livechatProps$compon, _livechatProps$contro3, _livechatProps$compon2, _livechatProps$contro4, _livechatProps$compon3, _livechatProps$contro5, _livechatProps$compon4, _livechatProps$contro6, _livechatProps$compon5, _livechatProps$contro7, _livechatProps$compon6, _livechatProps$contro8, _livechatProps$compon7, _livechatProps$contro9, _livechatProps$compon8, _livechatProps$contro0, _livechatProps$contro1, _livechatProps$compon9, _livechatProps$contro10, _livechatProps$compon0, _livechatProps$contro11, _livechatProps$compon1, _livechatProps$compon10, _livechatProps$compon11;
   useEffect(() => {
     uiTimer = createTimer();
     TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
@@ -68,21 +76,36 @@ export const LiveChatWidgetStateful = props => {
       }
     });
   }, []);
-  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 [adapter, setAdapter] = useChatAdapterStore();
-  const [webChatStyles, setWebChatStyles] = useState({
-    ...defaultWebChatContainerStatefulProps.webChatStyles,
-    ...((_props$webChatContain = props.webChatContainerProps) === null || _props$webChatContain === void 0 ? void 0 : _props$webChatContain.webChatStyles)
-  });
+  const _useChatAdapterStore = useChatAdapterStore(),
+    _useChatAdapterStore2 = _slicedToArray(_useChatAdapterStore, 2),
+    adapter = _useChatAdapterStore2[0],
+    setAdapter = _useChatAdapterStore2[1];
+  const _useState = useState({
+      ...defaultWebChatContainerStatefulProps.webChatStyles,
+      ...((_props$webChatContain = props.webChatContainerProps) === null || _props$webChatContain === void 0 ? void 0 : _props$webChatContain.webChatStyles)
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    webChatStyles = _useState2[0],
+    setWebChatStyles = _useState2[1];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [facadeChatSDK] = useFacadeSDKStore();
+  const _useFacadeSDKStore = useFacadeSDKStore(),
+    _useFacadeSDKStore2 = _slicedToArray(_useFacadeSDKStore, 1),
+    facadeChatSDK = _useFacadeSDKStore2[0];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [voiceVideoCallingSDK, setVoiceVideoCallingSDK] = useState(undefined);
-  const [conversationId, setConversationId] = useState("");
-  const {
-    Composer
-  } = Components;
+  const _useState3 = useState(undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    voiceVideoCallingSDK = _useState4[0],
+    setVoiceVideoCallingSDK = _useState4[1];
+  const _useState5 = useState(""),
+    _useState6 = _slicedToArray(_useState5, 2),
+    conversationId = _useState6[0],
+    setConversationId = _useState6[1];
+  const Composer = Components.Composer;
   const canStartProactiveChat = useRef(true);
   const bubbleBackground = ((_props$webChatContain2 = props.webChatContainerProps) === null || _props$webChatContain2 === void 0 || (_props$webChatContain2 = _props$webChatContain2.webChatStyles) === null || _props$webChatContain2 === void 0 ? void 0 : _props$webChatContain2.bubbleBackground) ?? ((_props$webChatContain3 = props.webChatContainerProps) === null || _props$webChatContain3 === void 0 || (_props$webChatContain3 = _props$webChatContain3.adaptiveCardStyles) === null || _props$webChatContain3 === void 0 ? void 0 : _props$webChatContain3.background) ?? defaultAdaptiveCardStyles.background;
   const bubbleTextColor = ((_props$webChatContain4 = props.webChatContainerProps) === null || _props$webChatContain4 === void 0 || (_props$webChatContain4 = _props$webChatContain4.webChatStyles) === null || _props$webChatContain4 === void 0 ? void 0 : _props$webChatContain4.bubbleTextColor) ?? ((_props$webChatContain5 = props.webChatContainerProps) === null || _props$webChatContain5 === void 0 || (_props$webChatContain5 = _props$webChatContain5.adaptiveCardStyles) === null || _props$webChatContain5 === void 0 ? void 0 : _props$webChatContain5.color) ?? defaultAdaptiveCardStyles.color;
@@ -128,6 +151,7 @@ export const LiveChatWidgetStateful = props => {
       activeCachedChatExist = false;
       optionalParams = {};
     }
+    logRecoveryEligibilityTelemetry(state, activeCachedChatExist);
   };
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -553,9 +577,7 @@ export const LiveChatWidgetStateful = props => {
         }
       });
       const conversationDetails = await getConversationDetailsCall(facadeChatSDK);
-      const {
-        chatConfig
-      } = props;
+      const chatConfig = props.chatConfig;
       const isPersistent = isPersistentEnabled(chatConfig);
       TelemetryHelper.logSDKEventToAllTelemetry(LogLevel.INFO, {
         Event: TelemetryEvent.EndChatEventReceived,
@@ -728,7 +750,15 @@ export const LiveChatWidgetStateful = props => {
     if (state.appStates.isMinimized) {
       ActivityStreamHandler.cork();
     } else {
-      setTimeout(() => ActivityStreamHandler.uncork(), 500);
+      var _state$domainStates4;
+      const extendedChatConfig = state === null || state === void 0 || (_state$domainStates4 = state.domainStates) === null || _state$domainStates4 === void 0 ? void 0 : _state$domainStates4.liveChatConfig;
+      if (shouldLoadPersistentChatHistory(extendedChatConfig)) {
+        requestAnimationFrame(() => {
+          setTimeout(() => ActivityStreamHandler.uncork(), 500);
+        });
+      } else {
+        setTimeout(() => ActivityStreamHandler.uncork(), 500);
+      }
     }
   }, [state.appStates.isMinimized]);
 
@@ -867,6 +897,37 @@ export const LiveChatWidgetStateful = props => {
     }
   }, [state.appStates.chatDisconnectEventReceived]);
 
+  // Auth state change listeners (broadcast by FacadeChatSDK.startChat())
+  useEffect(() => {
+    const authSucceededSub = BroadcastService.getMessageByEventName(BroadcastEvent.MidConversationAuthSucceeded).subscribe(msg => {
+      var _msg$payload13;
+      if (msg !== null && msg !== void 0 && (_msg$payload13 = msg.payload) !== null && _msg$payload13 !== void 0 && _msg$payload13.isAuthenticated) {
+        // Only store boolean flag, NOT the token - token is managed by FacadeChatSDK
+        dispatch({
+          type: LiveChatWidgetActionType.SET_USER_AUTHENTICATED,
+          payload: true
+        });
+      }
+    });
+
+    // Auth reset: only update the boolean flag here.
+    // We do NOT clear widget state/cache/adapter because this fires DURING startChat(),
+    // which will handle state transitions. FacadeChatSDK has already cleared SDK internals.
+    const authResetSub = BroadcastService.getMessageByEventName(BroadcastEvent.MidConversationAuthReset).subscribe(msg => {
+      var _msg$payload14;
+      if ((msg === null || msg === void 0 || (_msg$payload14 = msg.payload) === null || _msg$payload14 === void 0 ? void 0 : _msg$payload14.isAuthenticated) === false) {
+        dispatch({
+          type: LiveChatWidgetActionType.SET_USER_AUTHENTICATED,
+          payload: false
+        });
+      }
+    });
+    return () => {
+      authSucceededSub.unsubscribe();
+      authResetSub.unsubscribe();
+    };
+  }, [dispatch]);
+
   // if props state gets updates we need to update the renderingMiddlewareProps in the state
   useEffect(() => {
     var _props$webChatContain0;
@@ -885,6 +946,25 @@ export const LiveChatWidgetStateful = props => {
       }
     });
   }, []);
+
+  // Reliable browser close detection via visibilitychange + sendBeacon
+  // visibilitychange fires while the page is still alive (unlike beforeunload),
+  // so telemetry calls complete reliably. False positives (tab switch, minimize)
+  // are filtered in Kusto by checking if this is the last event in the session.
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden" && state.appStates.conversationState === ConversationState.Active) {
+        TelemetryHelper.logActionEvent(LogLevel.INFO, {
+          Event: TelemetryEvent.BrowserTabHidden,
+          Description: "Browser tab hidden during active conversation"
+        });
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [state.appStates.conversationState]);
   const initiateEndChatOnBrowserUnload = () => {
     var _DataStoreManager$cli;
     TelemetryHelper.logActionEvent(LogLevel.INFO, {
@@ -962,6 +1042,15 @@ export const LiveChatWidgetStateful = props => {
       }));
     }
   }, [state.domainStates.botAvatarInitials]);
+  const isWidgetOpen = !state.appStates.isMinimized && state.appStates.conversationState !== ConversationState.Closed;
+  const siblingAriaHiddenMapRef = useRef(new Map());
+  useEffect(() => {
+    const map = siblingAriaHiddenMapRef.current;
+    setAriaHiddenForSiblings(widgetElementId, isWidgetOpen, map);
+    return () => {
+      setAriaHiddenForSiblings(widgetElementId, false, map);
+    };
+  }, [isWidgetOpen]);
 
   // WebChat's Composer can only be rendered if a directLine object is defined
   return directLine && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, `
@@ -1008,10 +1097,31 @@ export const LiveChatWidgetStateful = props => {
             .webchat__basic-transcript__activity-markdown-body > :last-child {
                 margin-bottom: 0px;
             }
-           
+
             .webchat__basic-transcript__activity-markdown-body > :first-child {
                 margin-top: 0px;
             }
+
+            /* Remove browser-default <p> margins inside system messages.
+               Without this, each markdown paragraph adds ~1em top+bottom gap
+               which causes the oversized line spacing visible on iOS Safari.
+               Also disable iOS Safari's auto font-size scaling (-webkit-text-size-adjust)
+               which inflates font sizes and causes line-height to grow over time
+               when the layout is viewed in a narrow viewport. */
+            .webchat__basic-transcript__activity-markdown-body {
+                -webkit-text-size-adjust: 100%;
+                text-size-adjust: 100%;
+            }
+
+            .webchat__basic-transcript__activity-markdown-body p {
+                margin-top: 0;
+                margin-bottom: 4px;
+                line-height: 1.4;
+            }
+
+            .webchat__basic-transcript__activity-markdown-body p:last-child {
+                margin-bottom: 0;
+            }
                 
             .webchat__basic-transcript__activity-markdown-body img.webchat__render-markdown__external-link-icon {
                 background-image : url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIzIDMgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcuMjUwMSA0LjUwMDE3SDEwLjc0OTVDMTEuMTYzNyA0LjUwMDE3IDExLjQ5OTUgNC44MzU5NiAxMS40OTk1IDUuMjUwMTdDMTEuNDk5NSA1LjYyOTg2IDExLjIxNzMgNS45NDM2NiAxMC44NTEzIDUuOTkzMzJMMTAuNzQ5NSA2LjAwMDE3SDcuMjQ5NzRDNi4wNzA3OSA1Ljk5OTYxIDUuMTAzNDkgNi45MDY1NiA1LjAwNzg2IDguMDYxMTJMNS4wMDAyOCA4LjIyMDAzTDUuMDAzMTIgMTYuNzUwN0M1LjAwMzQzIDE3Ljk0MTUgNS45Mjg4NSAxOC45MTYxIDcuMDk5NjYgMTguOTk0OUw3LjI1MzcxIDE5LjAwMDFMMTUuNzUxOCAxOC45ODg0QzE2Ljk0MTUgMTguOTg2OCAxNy45MTQ1IDE4LjA2MiAxNy45OTM1IDE2Ljg5MjNMMTcuOTk4NyAxNi43Mzg0VjEzLjIzMjFDMTcuOTk4NyAxMi44MTc5IDE4LjMzNDUgMTIuNDgyMSAxOC43NDg3IDEyLjQ4MjFDMTkuMTI4NCAxMi40ODIxIDE5LjQ0MjIgMTIuNzY0MyAxOS40OTE4IDEzLjEzMDNMMTkuNDk4NyAxMy4yMzIxVjE2LjczODRDMTkuNDk4NyAxOC43NDA3IDE3LjkyOTMgMjAuMzc2OSAxNS45NTI4IDIwLjQ4MjlMMTUuNzUzOCAyMC40ODg0TDcuMjU4MjcgMjAuNTAwMUw3LjA1NDk1IDIwLjQ5NDlDNS4xNDIzOSAyMC4zOTU0IDMuNjA4OTUgMTguODYyNyAzLjUwODM3IDE2Ljk1MDJMMy41MDMxMiAxNi43NTExTDMuNTAwODkgOC4yNTI3TDMuNTA1MjkgOC4wNTAyQzMuNjA1MzkgNi4xMzc0OSA1LjEzODY3IDQuNjA0NDkgNy4wNTA5NiA0LjUwNTI3TDcuMjUwMSA0LjUwMDE3SDEwLjc0OTVINy4yNTAxWk0xMy43NDgxIDMuMDAxNDZMMjAuMzAxOCAzLjAwMTk3TDIwLjQwMTQgMy4wMTU3NUwyMC41MDIyIDMuMDQzOTNMMjAuNTU5IDMuMDY4MDNDMjAuNjEyMiAzLjA5MTIyIDIwLjY2MzQgMy4xMjE2MyAyMC43MTExIDMuMTU4ODVMMjAuNzgwNCAzLjIyMTU2TDIwLjg2NDEgMy4zMjAxNEwyMC45MTgzIDMuNDEwMjVMMjAuOTU3IDMuNTAwNTdMMjAuOTc2MiAzLjU2NDc2TDIwLjk4OTggMy42Mjg2MkwyMC45OTkyIDMuNzIyODJMMjAuOTk5NyAxMC4yNTU0QzIwLjk5OTcgMTAuNjY5NiAyMC42NjM5IDExLjAwNTQgMjAuMjQ5NyAxMS4wMDU0QzE5Ljg3IDExLjAwNTQgMTkuNTU2MiAxMC43MjMyIDE5LjUwNjUgMTAuMzU3MUwxOS40OTk3IDEwLjI1NTRMMTkuNDk4OSA1LjU2MTQ3TDEyLjI3OTcgMTIuNzg0N0MxMi4wMTM0IDEzLjA1MSAxMS41OTY4IDEzLjA3NTMgMTEuMzAzMSAxMi44NTc1TDExLjIxOSAxMi43ODQ5QzEwLjk1MjcgMTIuNTE4NyAxMC45Mjg0IDEyLjEwMjEgMTEuMTQ2MiAxMS44MDg0TDExLjIxODggMTEuNzI0M0wxOC40MzY5IDQuNTAxNDZIMTMuNzQ4MUMxMy4zNjg0IDQuNTAxNDYgMTMuMDU0NiA0LjIxOTMxIDEzLjAwNSAzLjg1MzI0TDEyLjk5ODEgMy43NTE0NkMxMi45OTgxIDMuMzcxNzcgMTMuMjgwMyAzLjA1Nzk3IDEzLjY0NjQgMy4wMDgzMUwxMy43NDgxIDMuMDAxNDZaIiBmaWxsPSIjMjEyMTIxIiAvPjwvc3ZnPg==) !important;
@@ -1019,6 +1129,32 @@ export const LiveChatWidgetStateful = props => {
                 margin-left: .25em;
             }
 
+            /* ── iOS Safari: underline + number alignment fixes ────────────────
+               1. Position underlines below all glyphs (not at alphabetic baseline)
+                  so they never intersect numbers in links or auto-detected tel: hrefs.
+               2. Use a solid underline (skip-ink: none) so numbers aren't split by
+                  gaps the browser renders around descenders.
+               3. Prevent ::marker pseudo-element from inheriting text-decoration,
+                  which Safari applies to ol/ul counters causing them to appear
+                  underlined and misaligned.
+               4. Normalise ordered-list indentation across Safari/WebKit. */
+            .webchat__basic-transcript__activity-markdown-body a {
+                -webkit-text-underline-position: under;
+                text-underline-position: under;
+                text-decoration-skip-ink: none;
+                -webkit-text-decoration-skip: none;
+            }
+
+            .webchat__basic-transcript__activity-markdown-body ol li::marker,
+            .webchat__basic-transcript__activity-markdown-body ul li::marker {
+                text-decoration: none;
+            }
+
+            .webchat__basic-transcript__activity-markdown-body ol {
+                -webkit-padding-start: 1.5em;
+                padding-inline-start: 1.5em;
+            }
+
             .webchat__link-definitions__header-text {
                 color: ${bubbleBackground}
             }
@@ -1038,7 +1174,10 @@ export const LiveChatWidgetStateful = props => {
   }), /*#__PURE__*/React.createElement(Stack, {
     id: widgetElementId,
     styles: generalStyles,
-    className: (_livechatProps$styleP = livechatProps.styleProps) === null || _livechatProps$styleP === void 0 ? void 0 : _livechatProps$styleP.className
+    className: (_livechatProps$styleP = livechatProps.styleProps) === null || _livechatProps$styleP === void 0 ? void 0 : _livechatProps$styleP.className,
+    role: isWidgetOpen ? "dialog" : undefined,
+    "aria-modal": isWidgetOpen ? true : undefined,
+    "aria-label": isWidgetOpen ? ((_props$headerProps = props.headerProps) === null || _props$headerProps === void 0 || (_props$headerProps = _props$headerProps.controlProps) === null || _props$headerProps === void 0 || (_props$headerProps = _props$headerProps.headerTitleProps) === null || _props$headerProps === void 0 ? void 0 : _props$headerProps.text) ?? "Live Chat" : undefined
   }, !((_livechatProps$contro = livechatProps.controlProps) !== null && _livechatProps$contro !== void 0 && _livechatProps$contro.hideChatButton) && !((_livechatProps$contro2 = livechatProps.controlProps) !== null && _livechatProps$contro2 !== void 0 && _livechatProps$contro2.hideStartChatButton) && shouldShowChatButton(state) && (decodeComponentString((_livechatProps$compon = livechatProps.componentOverrides) === null || _livechatProps$compon === void 0 ? void 0 : _livechatProps$compon.chatButton) || /*#__PURE__*/React.createElement(ChatButtonStateful, {
     buttonProps: livechatProps.chatButtonProps,
     outOfOfficeButtonProps: livechatProps.outOfOfficeChatButtonProps,

package/lib/esm/components/loadingpanestateful/LoadingPaneStateful.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";
@@ -18,11 +24,11 @@ export const LoadingPaneStateful = props => {
       Event: TelemetryEvent.UXLoadingPaneStart
     });
   }, []);
-  const [state] = useChatContextStore();
-  const {
-    loadingPaneProps,
-    startChatErrorPaneProps
-  } = props;
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 1),
+    state = _useChatContextStore2[0];
+  const loadingPaneProps = props.loadingPaneProps,
+    startChatErrorPaneProps = props.startChatErrorPaneProps;
   const generalLoadingPaneStyleProps = Object.assign({}, defaultGeneralLoadingPaneStyleProps, loadingPaneProps === null || loadingPaneProps === void 0 || (_loadingPaneProps$sty = loadingPaneProps.styleProps) === null || _loadingPaneProps$sty === void 0 ? void 0 : _loadingPaneProps$sty.generalStyleProps);
   const loadingPaneStyleProps = {
     ...(loadingPaneProps === null || loadingPaneProps === void 0 ? void 0 : loadingPaneProps.styleProps),
@@ -45,10 +51,9 @@ export const LoadingPaneStateful = props => {
     hideSpinner: true,
     hideSpinnerText: true
   };
-  const {
-    height,
-    width
-  } = useWindowDimensions();
+  const _useWindowDimensions = useWindowDimensions(),
+    height = _useWindowDimensions.height,
+    width = _useWindowDimensions.width;
 
   // Move focus to the first button
   useEffect(() => {

package/lib/esm/components/notificationpanestateful/NotificationPaneStateful.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 { ConfirmationState, NotificationPaneConstants } from "../../common/Constants";
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect, useRef } from "react";
@@ -21,14 +27,17 @@ export const NotificationPaneStateful = props => {
       Event: TelemetryEvent.UXNotificationPaneStart
     });
   }, []);
-  const {
-    notificationPaneProps,
-    notificationScenarioType,
-    endChat
-  } = props;
-  const [state, dispatch] = useChatContextStore();
+  const notificationPaneProps = props.notificationPaneProps,
+    notificationScenarioType = props.notificationScenarioType,
+    endChat = props.endChat;
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 2),
+    state = _useChatContextStore2[0],
+    dispatch = _useChatContextStore2[1];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [adapter] = useChatAdapterStore();
+  const _useChatAdapterStore = useChatAdapterStore(),
+    _useChatAdapterStore2 = _slicedToArray(_useChatAdapterStore, 1),
+    adapter = _useChatAdapterStore2[0];
   const localConfirmationPaneState = useRef(state === null || state === void 0 || (_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : _state$domainStates.confirmationState);
   const onCloseChatClick = async () => {
     TelemetryHelper.logActionEvent(LogLevel.INFO, {
@@ -51,9 +60,7 @@ export const NotificationPaneStateful = props => {
     var _state$domainStates2;
     localConfirmationPaneState.current = state === null || state === void 0 || (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 ? void 0 : _state$domainStates2.confirmationState;
   }, [state === null || state === void 0 || (_state$domainStates3 = state.domainStates) === null || _state$domainStates3 === void 0 ? void 0 : _state$domainStates3.confirmationState]);
-  const {
-    useDismissNotification
-  } = hooks;
+  const useDismissNotification = hooks.useDismissNotification;
   const dismissNotification = useDismissNotification();
   const handleDismissNotification = useCallback(() => {
     TelemetryHelper.logActionEvent(LogLevel.INFO, {

package/lib/esm/components/ooohpanestateful/OOOHPaneStateful.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";
@@ -17,7 +23,9 @@ export const OutOfOfficeHoursPaneStateful = props => {
       Description: "Out of office hours pane loading started."
     });
   }, []);
-  const [state] = useChatContextStore();
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 1),
+    state = _useChatContextStore2[0];
   const generalStyleProps = Object.assign({}, defaultGeneralStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps);
   const styleProps = {
     ...props.styleProps,
@@ -49,10 +57,9 @@ export const OutOfOfficeHoursPaneStateful = props => {
 
   // Enhanced titleText sanitization
   if (controlProps !== null && controlProps !== void 0 && controlProps.titleText) {
-    const {
-      cleanText,
-      isXSSDetected
-    } = detectAndCleanXSS(controlProps.titleText);
+    const _detectAndCleanXSS = detectAndCleanXSS(controlProps.titleText),
+      cleanText = _detectAndCleanXSS.cleanText,
+      isXSSDetected = _detectAndCleanXSS.isXSSDetected;
     if (!isXSSDetected) {
       // replace with the sanitized text
       controlProps.titleText = cleanText;

package/lib/esm/components/postchatloadingpanestateful/PostChatLoadingPaneStateful.js

@@ -1,5 +1,11 @@
+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 React, { useEffect, useState } from "react";
 import { createTimer, findAllFocusableElement } from "../../common/utils";
 import { LoadingPane } from "@microsoft/omnichannel-chat-components";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
@@ -7,14 +13,28 @@ import { defaultGeneralPostChatLoadingPaneStyleProps } from "./common/defaultgen
 import useChatContextStore from "../../hooks/useChatContextStore";
 let uiTimer;
 export const PostChatLoadingPaneStateful = props => {
-  var _props$styleProps;
+  var _props$controlProps, _props$styleProps;
+  const defaultSubtitleText = "Please take a moment to give us feedback about your chat experience. We are loading the survey for you now.";
+  const subtitleText = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.subtitleText) ?? defaultSubtitleText;
+  const _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    announcedSubtitleText = _useState2[0],
+    setAnnouncedSubtitleText = _useState2[1];
   useEffect(() => {
     uiTimer = createTimer();
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.UXPostChatLoadingPaneStart
     });
   }, []);
-  const [state] = useChatContextStore();
+  useEffect(() => {
+    const timeout = window.setTimeout(() => {
+      setAnnouncedSubtitleText(subtitleText);
+    }, 0);
+    return () => window.clearTimeout(timeout);
+  }, [subtitleText]);
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 1),
+    state = _useChatContextStore2[0];
   const generalStyleProps = Object.assign({}, defaultGeneralPostChatLoadingPaneStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps);
   const styleProps = {
     ...props.styleProps,
@@ -27,8 +47,11 @@ export const PostChatLoadingPaneStateful = props => {
     hideTitle: true,
     hideSpinner: true,
     hideSpinnerText: true,
-    subtitleText: "Please take a moment to give us feedback about your chat experience. We are loading the survey for you now.",
-    ...props.controlProps
+    ...props.controlProps,
+    role: "status",
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    subtitleText: announcedSubtitleText
   };
 
   // Move focus to the first button

package/lib/esm/components/postchatsurveypanestateful/PostChatSurveyPaneStateful.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 { ConversationStage, LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
 import { ParticipantType } from "../../common/Constants";
@@ -33,7 +39,9 @@ export const PostChatSurveyPaneStateful = props => {
       }
     });
   }, []);
-  const [state] = useChatContextStore();
+  const _useChatContextStore = useChatContextStore(),
+    _useChatContextStore2 = _slicedToArray(_useChatContextStore, 1),
+    state = _useChatContextStore2[0];
   const generalStyleProps = Object.assign({}, defaultGeneralPostChatSurveyPaneStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps, {
     display: state.appStates.isMinimized ? "none" : "contents"
   });
@@ -58,6 +66,7 @@ export const PostChatSurveyPaneStateful = props => {
   };
   const controlProps = {
     id: "oc-lcw-postchatsurvey-pane",
+    title: "Post-chat survey",
     surveyURL: ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.surveyURL) ?? surveyInviteLink,
     ...props.controlProps
   };
@@ -96,9 +105,7 @@ export const PostChatSurveyPaneStateful = props => {
     //Customer Voice Telemetry Events
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     window.addEventListener("message", message => {
-      const {
-        data
-      } = message;
+      const data = message.data;
       if (!data) return;
       if (data === CustomerVoiceEvents.ResponsePageLoaded) {
         TelemetryHelper.logActionEvent(LogLevel.INFO, {