@microsoft/omnichannel-chat-widget 1.8.4-main.cbab5fc → 1.8.4-main.cc63f01

package/lib/cjs/components/livechatwidget/common/startChat.js

@@ -20,6 +20,7 @@ var _createAdapter = require("./createAdapter");
 var _newMessageEventHandler = require("../../../plugins/newMessageEventHandler");
 var _FirstMessageTrackerFromBot = require("../../../firstresponselatency/FirstMessageTrackerFromBot");
 var _liveChatConfigUtils = require("./liveChatConfigUtils");
+var _authHelper = require("./authHelper");
 var _setPostChatContextAndLoadSurvey = require("./setPostChatContextAndLoadSurvey");
 var _persistentChatHelper = require("./persistentChatHelper");
 var _updateSessionDataForTelemetry = require("./updateSessionDataForTelemetry");
@@ -65,7 +66,7 @@ const prepareStartChat = async (props, facadeChatSDK, state, dispatch, setAdapte
 exports.prepareStartChat = prepareStartChat;
 const setPreChatAndInitiateChat = async (facadeChatSDK, dispatch, setAdapter, isProactiveChat, proactiveChatEnablePrechatState, state, props) => {
   var _props$preChatSurveyP, _props$preChatSurveyP2, _props$controlProps, _state$domainStates, _state$domainStates$l, _state$domainStates$l2, _state$appStates2;
-  // This reset needs to be done before to load prechat, because the conversation state changes from close to prechat
+  // Reset before loading prechat to avoid starting chat with previous requestId
   if ((state === null || state === void 0 ? void 0 : state.appStates.conversationState) === _ConversationState.ConversationState.Closed) {
     // Preventive reset to avoid starting chat with previous requestId which could potentially cause problems
     (0, _endChat.chatSDKStateCleanUp)(facadeChatSDK.getChatSDK());
@@ -199,7 +200,7 @@ const initStartChat = async (facadeChatSDK, dispatch, setAdapter, state, props,
       });
     }
     try {
-      var _window$Microsoft, _window$Microsoft$Dyn, _window$Microsoft$Dyn2, _window$Microsoft$Dyn3;
+      var _window$Microsoft, _window$Microsoft$Dyn, _window$Microsoft$Dyn2, _window$Microsoft$Dyn3, _state$domainStates8;
       // Set custom context params
       await setCustomContextParams(state, props);
       const defaultOptionalParams = {
@@ -208,9 +209,25 @@ const initStartChat = async (facadeChatSDK, dispatch, setAdapter, state, props,
         portalContactId: (_window$Microsoft = window.Microsoft) === null || _window$Microsoft === void 0 ? void 0 : (_window$Microsoft$Dyn = _window$Microsoft.Dynamic365) === null || _window$Microsoft$Dyn === void 0 ? void 0 : (_window$Microsoft$Dyn2 = _window$Microsoft$Dyn.Portal) === null || _window$Microsoft$Dyn2 === void 0 ? void 0 : (_window$Microsoft$Dyn3 = _window$Microsoft$Dyn2.User) === null || _window$Microsoft$Dyn3 === void 0 ? void 0 : _window$Microsoft$Dyn3.contactId
       };
       const startChatOptionalParams = Object.assign({}, params, optionalParams, defaultOptionalParams);
+
+      // MID-AUTH: Add wasAuthenticated flag for reconnect scenarios
+      // Tells FacadeChatSDK whether the previous session was authenticated
+      // Used to detect auth transitions (Auth->Unauth) and decide whether to call authenticateChat
+      const midAuthEnabled = (0, _authHelper.isMidAuthEnabled)(state === null || state === void 0 ? void 0 : (_state$domainStates8 = state.domainStates) === null || _state$domainStates8 === void 0 ? void 0 : _state$domainStates8.liveChatConfig);
+      if (midAuthEnabled) {
+        var _state$appStates4, _persistedState$appSt;
+        const isUserAuthenticated = (state === null || state === void 0 ? void 0 : (_state$appStates4 = state.appStates) === null || _state$appStates4 === void 0 ? void 0 : _state$appStates4.isUserAuthenticated) === true || (persistedState === null || persistedState === void 0 ? void 0 : (_persistedState$appSt = persistedState.appStates) === null || _persistedState$appSt === void 0 ? void 0 : _persistedState$appSt.isUserAuthenticated) === true;
+        startChatOptionalParams.wasAuthenticated = isUserAuthenticated;
+      }
+
       // startTime is used to determine if a message is history or new, better to be set before creating the adapter to get bandwidth
       const startTime = new Date().getTime();
       (0, _FirstMessageTrackerFromBot.createTrackingForFirstMessage)();
+
+      // FacadeChatSDK.startChat() handles:
+      // 1. tokenRing() - checks authentication, calls handleAuthentication() if needed
+      // 2. Mid-auth: If no token, sets deferInitialAuth=true for unauthenticated flow
+      // 3. Mid-auth: On reconnect with valid token, calls authenticateChat to upgrade conversation
       await facadeChatSDK.startChat(startChatOptionalParams);
       (0, _startChatErrorHandler.logStartChatComplete)();
       isStartChatSuccessful = true;
@@ -298,15 +315,15 @@ const createAdapterAndSubscribe = async (facadeChatSDK, dispatch, setAdapter, st
 };
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const canConnectToExistingChat = async (props, facadeChatSDK, state, dispatch, setAdapter) => {
-  var _state$appStates4, _persistedState$domai6, _persistedState$appSt;
+  var _state$appStates5, _persistedState$domai6, _persistedState$appSt2;
   // By pass this function in case of popout chat
-  if ((state === null || state === void 0 ? void 0 : (_state$appStates4 = state.appStates) === null || _state$appStates4 === void 0 ? void 0 : _state$appStates4.hideStartChatButton) === true) {
+  if ((state === null || state === void 0 ? void 0 : (_state$appStates5 = state.appStates) === null || _state$appStates5 === void 0 ? void 0 : _state$appStates5.hideStartChatButton) === true) {
     return false;
   }
   const persistedState = (0, _utils.getStateFromCache)((0, _utils.getWidgetCacheIdfromProps)(props));
 
   //Connect to only active chat session
-  if (persistedState && !(0, _utils.isUndefinedOrEmpty)(persistedState === null || persistedState === void 0 ? void 0 : (_persistedState$domai6 = persistedState.domainStates) === null || _persistedState$domai6 === void 0 ? void 0 : _persistedState$domai6.liveChatContext) && (persistedState === null || persistedState === void 0 ? void 0 : (_persistedState$appSt = persistedState.appStates) === null || _persistedState$appSt === void 0 ? void 0 : _persistedState$appSt.conversationState) === _ConversationState.ConversationState.Active) {
+  if (persistedState && !(0, _utils.isUndefinedOrEmpty)(persistedState === null || persistedState === void 0 ? void 0 : (_persistedState$domai6 = persistedState.domainStates) === null || _persistedState$domai6 === void 0 ? void 0 : _persistedState$domai6.liveChatContext) && (persistedState === null || persistedState === void 0 ? void 0 : (_persistedState$appSt2 = persistedState.appStates) === null || _persistedState$appSt2 === void 0 ? void 0 : _persistedState$appSt2.conversationState) === _ConversationState.ConversationState.Active) {
     var _persistedState$domai7;
     dispatch({
       type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
@@ -323,11 +340,11 @@ const canConnectToExistingChat = async (props, facadeChatSDK, state, dispatch, s
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const setCustomContextParams = async (state, props) => {
-  var _state$domainStates8, _persistedState$domai8;
-  if (state !== null && state !== void 0 && (_state$domainStates8 = state.domainStates) !== null && _state$domainStates8 !== void 0 && _state$domainStates8.customContext) {
-    var _state$domainStates9;
+  var _state$domainStates9, _persistedState$domai8;
+  if (state !== null && state !== void 0 && (_state$domainStates9 = state.domainStates) !== null && _state$domainStates9 !== void 0 && _state$domainStates9.customContext) {
+    var _state$domainStates10;
     optionalParams = Object.assign({}, optionalParams, {
-      customContext: JSON.parse(JSON.stringify(state === null || state === void 0 ? void 0 : (_state$domainStates9 = state.domainStates) === null || _state$domainStates9 === void 0 ? void 0 : _state$domainStates9.customContext))
+      customContext: JSON.parse(JSON.stringify(state === null || state === void 0 ? void 0 : (_state$domainStates10 = state.domainStates) === null || _state$domainStates10 === void 0 ? void 0 : _state$domainStates10.customContext))
     });
     return;
   }
@@ -360,9 +377,9 @@ const canStartPopoutChat = async props => {
   }
   popoutWidgetInstanceId = (0, _utils.getWidgetCacheIdfromProps)(props, true);
   if (!(0, _utils.isNullOrEmptyString)(popoutWidgetInstanceId)) {
-    var _persistedState$domai9, _persistedState$appSt2;
+    var _persistedState$domai9, _persistedState$appSt3;
     const persistedState = (0, _utils.getStateFromCache)(popoutWidgetInstanceId);
-    if (persistedState && !(0, _utils.isUndefinedOrEmpty)(persistedState === null || persistedState === void 0 ? void 0 : (_persistedState$domai9 = persistedState.domainStates) === null || _persistedState$domai9 === void 0 ? void 0 : _persistedState$domai9.liveChatContext) && (persistedState === null || persistedState === void 0 ? void 0 : (_persistedState$appSt2 = persistedState.appStates) === null || _persistedState$appSt2 === void 0 ? void 0 : _persistedState$appSt2.conversationState) === _ConversationState.ConversationState.Active) {
+    if (persistedState && !(0, _utils.isUndefinedOrEmpty)(persistedState === null || persistedState === void 0 ? void 0 : (_persistedState$domai9 = persistedState.domainStates) === null || _persistedState$domai9 === void 0 ? void 0 : _persistedState$domai9.liveChatContext) && (persistedState === null || persistedState === void 0 ? void 0 : (_persistedState$appSt3 = persistedState.appStates) === null || _persistedState$appSt3 === void 0 ? void 0 : _persistedState$appSt3.conversationState) === _ConversationState.ConversationState.Active) {
       // Initiate popout chat
       _omnichannelChatComponents.BroadcastService.postMessage({
         eventName: _TelemetryConstants.BroadcastEvent.InitiateStartChatInPopoutMode
@@ -375,9 +392,9 @@ const canStartPopoutChat = async props => {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const checkIfConversationStillValid = async (facadeChatSDK, dispatch, state) => {
-  var _state$domainStates10, _state$domainStates11, _state$domainStates12;
-  const requestIdFromCache = (_state$domainStates10 = state.domainStates) === null || _state$domainStates10 === void 0 ? void 0 : (_state$domainStates11 = _state$domainStates10.liveChatContext) === null || _state$domainStates11 === void 0 ? void 0 : _state$domainStates11.requestId;
-  const liveChatContext = state === null || state === void 0 ? void 0 : (_state$domainStates12 = state.domainStates) === null || _state$domainStates12 === void 0 ? void 0 : _state$domainStates12.liveChatContext;
+  var _state$domainStates11, _state$domainStates12, _state$domainStates13;
+  const requestIdFromCache = (_state$domainStates11 = state.domainStates) === null || _state$domainStates11 === void 0 ? void 0 : (_state$domainStates12 = _state$domainStates11.liveChatContext) === null || _state$domainStates12 === void 0 ? void 0 : _state$domainStates12.requestId;
+  const liveChatContext = state === null || state === void 0 ? void 0 : (_state$domainStates13 = state.domainStates) === null || _state$domainStates13 === void 0 ? void 0 : _state$domainStates13.liveChatContext;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let conversationDetails = undefined;
   // Preserve current requestId

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

@@ -54,6 +54,7 @@ var _initConfirmationPropsComposer = require("../common/initConfirmationPropsCom
 var _initWebChatComposer = require("../common/initWebChatComposer");
 var _defaultCacheManager = require("../../../common/storage/default/defaultCacheManager");
 var _setPostChatContextAndLoadSurvey = require("../common/setPostChatContextAndLoadSurvey");
+var _liveChatConfigUtils = require("../common/liveChatConfigUtils");
 var _startProactiveChat = require("../common/startProactiveChat");
 var _useChatAdapterStore = _interopRequireDefault(require("../../../hooks/useChatAdapterStore"));
 var _useChatContextStore = _interopRequireDefault(require("../../../hooks/useChatContextStore"));
@@ -65,7 +66,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 let uiTimer;
 const LiveChatWidgetStateful = props => {
-  var _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _props$webChatContain4, _props$webChatContain5, _props$webChatContain6, _props$webChatContain7, _props$webChatContain8, _props$webChatContain9, _props$styleProps, _props$webChatContain10, _props$webChatContain11, _props$controlProps, _props$controlProps3, _state$appStates7, _props$webChatContain15, _state$appStates8, _props$webChatContain17, _props$webChatContain18, _props$controlProps12, _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$contro10, _livechatProps$contro11, _livechatProps$compon9, _livechatProps$contro12, _livechatProps$compon10, _livechatProps$contro13, _livechatProps$compon11, _livechatProps$compon12, _livechatProps$compon13;
+  var _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _props$webChatContain4, _props$webChatContain5, _props$webChatContain6, _props$webChatContain7, _props$webChatContain8, _props$webChatContain9, _props$styleProps, _props$webChatContain10, _props$webChatContain11, _props$controlProps, _props$controlProps3, _state$appStates7, _props$webChatContain15, _state$appStates8, _props$webChatContain17, _props$webChatContain18, _props$controlProps12, _props$draggableChatW, _props$draggableChatW2, _props$draggableChatW3, _props$draggableChatW4, _props$draggableChatW5, _livechatProps$webCha, _livechatProps$styleP, _props$headerProps, _props$headerProps$co, _props$headerProps$co2, _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$contro10, _livechatProps$contro11, _livechatProps$compon9, _livechatProps$contro12, _livechatProps$compon10, _livechatProps$contro13, _livechatProps$compon11, _livechatProps$compon12, _livechatProps$compon13;
   (0, _react2.useEffect)(() => {
     uiTimer = (0, _utils.createTimer)();
     _TelemetryHelper.TelemetryHelper.logLoadingEventToAllTelemetry(_TelemetryConstants.LogLevel.INFO, {
@@ -736,7 +737,15 @@ const LiveChatWidgetStateful = props => {
     if (state.appStates.isMinimized) {
       _ActivityStreamHandler.ActivityStreamHandler.cork();
     } else {
-      setTimeout(() => _ActivityStreamHandler.ActivityStreamHandler.uncork(), 500);
+      var _state$domainStates4;
+      const extendedChatConfig = state === null || state === void 0 ? void 0 : (_state$domainStates4 = state.domainStates) === null || _state$domainStates4 === void 0 ? void 0 : _state$domainStates4.liveChatConfig;
+      if ((0, _liveChatConfigUtils.shouldLoadPersistentChatHistory)(extendedChatConfig)) {
+        requestAnimationFrame(() => {
+          setTimeout(() => _ActivityStreamHandler.ActivityStreamHandler.uncork(), 500);
+        });
+      } else {
+        setTimeout(() => _ActivityStreamHandler.ActivityStreamHandler.uncork(), 500);
+      }
     }
   }, [state.appStates.isMinimized]);
 
@@ -814,7 +823,7 @@ const LiveChatWidgetStateful = props => {
 
     // In conversational survey, we need to check post chat survey logics before we set ConversationState to InActive
     // Hence setting ConversationState to InActive will be done later in the post chat flows
-    if (!isConversationalSurveyEnabled && (inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$appSta12 = inMemoryState.appStates) === null || _inMemoryState$appSta12 === void 0 ? void 0 : _inMemoryState$appSta12.conversationEndedBy) === _Constants.ConversationEndEntity.Agent || (inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$appSta13 = inMemoryState.appStates) === null || _inMemoryState$appSta13 === void 0 ? void 0 : _inMemoryState$appSta13.conversationEndedBy) === _Constants.ConversationEndEntity.Bot) {
+    if (!isConversationalSurveyEnabled && ((inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$appSta12 = inMemoryState.appStates) === null || _inMemoryState$appSta12 === void 0 ? void 0 : _inMemoryState$appSta12.conversationEndedBy) === _Constants.ConversationEndEntity.Agent || (inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$appSta13 = inMemoryState.appStates) === null || _inMemoryState$appSta13 === void 0 ? void 0 : _inMemoryState$appSta13.conversationEndedBy) === _Constants.ConversationEndEntity.Bot)) {
       dispatch({
         type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
         payload: _ConversationState.ConversationState.InActive
@@ -875,6 +884,37 @@ const LiveChatWidgetStateful = props => {
     }
   }, [state.appStates.chatDisconnectEventReceived]);
 
+  // Auth state change listeners (broadcast by FacadeChatSDK.startChat())
+  (0, _react2.useEffect)(() => {
+    const authSucceededSub = _omnichannelChatComponents.BroadcastService.getMessageByEventName(_TelemetryConstants.BroadcastEvent.MidConversationAuthSucceeded).subscribe(msg => {
+      var _msg$payload15;
+      if (msg !== null && msg !== void 0 && (_msg$payload15 = msg.payload) !== null && _msg$payload15 !== void 0 && _msg$payload15.isAuthenticated) {
+        // Only store boolean flag, NOT the token - token is managed by FacadeChatSDK
+        dispatch({
+          type: _LiveChatWidgetActionType.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 = _omnichannelChatComponents.BroadcastService.getMessageByEventName(_TelemetryConstants.BroadcastEvent.MidConversationAuthReset).subscribe(msg => {
+      var _msg$payload16;
+      if ((msg === null || msg === void 0 ? void 0 : (_msg$payload16 = msg.payload) === null || _msg$payload16 === void 0 ? void 0 : _msg$payload16.isAuthenticated) === false) {
+        dispatch({
+          type: _LiveChatWidgetActionType.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
   (0, _react2.useEffect)(() => {
     var _props$webChatContain16;
@@ -893,6 +933,25 @@ 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.
+  (0, _react2.useEffect)(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden" && state.appStates.conversationState === _ConversationState.ConversationState.Active) {
+        _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+          Event: _TelemetryConstants.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.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
@@ -963,12 +1022,22 @@ const LiveChatWidgetStateful = props => {
   // React to dynamic bot avatar initials updates from context
   (0, _react2.useEffect)(() => {
     if (state.domainStates.botAvatarInitials && state.domainStates.botAvatarInitials !== webChatStyles.botAvatarInitials) {
+      /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
       setWebChatStyles(styles => ({
         ...styles,
         botAvatarInitials: state.domainStates.botAvatarInitials
       }));
     }
   }, [state.domainStates.botAvatarInitials]);
+  const isWidgetOpen = !state.appStates.isMinimized && state.appStates.conversationState !== _ConversationState.ConversationState.Closed;
+  const siblingAriaHiddenMapRef = (0, _react2.useRef)(new Map());
+  (0, _react2.useEffect)(() => {
+    const map = siblingAriaHiddenMapRef.current;
+    (0, _utils.setAriaHiddenForSiblings)(widgetElementId, isWidgetOpen, map);
+    return () => {
+      (0, _utils.setAriaHiddenForSiblings)(widgetElementId, false, map);
+    };
+  }, [isWidgetOpen]);
 
   // WebChat's Composer can only be rendered if a directLine object is defined
   return directLine && /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement("style", null, `
@@ -1015,10 +1084,31 @@ 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;
@@ -1026,6 +1116,32 @@ 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}
             }
@@ -1045,7 +1161,10 @@ const LiveChatWidgetStateful = props => {
   }), /*#__PURE__*/_react2.default.createElement(_react.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 ? void 0 : (_props$headerProps$co = _props$headerProps.controlProps) === null || _props$headerProps$co === void 0 ? void 0 : (_props$headerProps$co2 = _props$headerProps$co.headerTitleProps) === null || _props$headerProps$co2 === void 0 ? void 0 : _props$headerProps$co2.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) && (0, _componentController.shouldShowChatButton)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_livechatProps$compon = livechatProps.componentOverrides) === null || _livechatProps$compon === void 0 ? void 0 : _livechatProps$compon.chatButton) || /*#__PURE__*/_react2.default.createElement(_ChatButtonStateful.default, {
     buttonProps: livechatProps.chatButtonProps,
     outOfOfficeButtonProps: livechatProps.outOfOfficeChatButtonProps,

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

@@ -16,13 +16,22 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 let uiTimer;
 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 [announcedSubtitleText, setAnnouncedSubtitleText] = (0, _react.useState)("");
   (0, _react.useEffect)(() => {
     uiTimer = (0, _utils.createTimer)();
     _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
       Event: _TelemetryConstants.TelemetryEvent.UXPostChatLoadingPaneStart
     });
   }, []);
+  (0, _react.useEffect)(() => {
+    const timeout = window.setTimeout(() => {
+      setAnnouncedSubtitleText(subtitleText);
+    }, 0);
+    return () => window.clearTimeout(timeout);
+  }, [subtitleText]);
   const [state] = (0, _useChatContextStore.default)();
   const generalStyleProps = Object.assign({}, _defaultgeneralPostChatLoadingPaneStyleProps.defaultGeneralPostChatLoadingPaneStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps);
   const styleProps = {
@@ -36,8 +45,11 @@ 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/cjs/components/postchatsurveypanestateful/PostChatSurveyPaneStateful.js

@@ -31,7 +31,7 @@ const generateSurveyInviteLink = function (surveyInviteLink, isEmbed, locale, co
   return `${surveyInviteLink}&${surveyLinkParams.toString()}`;
 };
 const PostChatSurveyPaneStateful = props => {
-  var _props$styleProps, _state$appStates, _props$controlProps;
+  var _props$styleProps, _state$appStates, _state$domainStates$p, _props$controlProps;
   (0, _react.useEffect)(() => {
     uiTimer = (0, _utils.createTimer)();
     _TelemetryHelper.TelemetryHelper.logLoadingEventToAllTelemetry(_TelemetryConstants.LogLevel.INFO, {
@@ -48,13 +48,15 @@ const PostChatSurveyPaneStateful = props => {
   });
   let surveyInviteLink = "";
   const surveyMode = (state === null || state === void 0 ? void 0 : (_state$appStates = state.appStates) === null || _state$appStates === void 0 ? void 0 : _state$appStates.selectedSurveyMode) === _PostChatSurveyMode.PostChatSurveyMode.Embed;
-  if (state.domainStates.postChatContext.botSurveyInviteLink &&
+  if ((_state$domainStates$p = state.domainStates.postChatContext) !== null && _state$domainStates$p !== void 0 && _state$domainStates$p.botSurveyInviteLink &&
   // Bot survey enabled
   state.appStates.postChatParticipantType === _Constants.ParticipantType.Bot) {
+    var _state$domainStates$p2, _state$domainStates$p3;
     // Only Bot has engaged
-    surveyInviteLink = generateSurveyInviteLink(state.domainStates.postChatContext.botSurveyInviteLink, surveyMode, state.domainStates.postChatContext.botFormsProLocale, props.isCustomerVoiceSurveyCompact ?? true, props.customerVoiceSurveyCorrelationId || "");
+    surveyInviteLink = generateSurveyInviteLink((_state$domainStates$p2 = state.domainStates.postChatContext) === null || _state$domainStates$p2 === void 0 ? void 0 : _state$domainStates$p2.botSurveyInviteLink, surveyMode, (_state$domainStates$p3 = state.domainStates.postChatContext) === null || _state$domainStates$p3 === void 0 ? void 0 : _state$domainStates$p3.botFormsProLocale, props.isCustomerVoiceSurveyCompact ?? true, props.customerVoiceSurveyCorrelationId || "");
   } else {
-    surveyInviteLink = generateSurveyInviteLink(state.domainStates.postChatContext.surveyInviteLink, surveyMode, state.domainStates.postChatContext.formsProLocale, props.isCustomerVoiceSurveyCompact ?? true, props.customerVoiceSurveyCorrelationId || "");
+    var _state$domainStates$p4, _state$domainStates$p5;
+    surveyInviteLink = generateSurveyInviteLink((_state$domainStates$p4 = state.domainStates.postChatContext) === null || _state$domainStates$p4 === void 0 ? void 0 : _state$domainStates$p4.surveyInviteLink, surveyMode, (_state$domainStates$p5 = state.domainStates.postChatContext) === null || _state$domainStates$p5 === void 0 ? void 0 : _state$domainStates$p5.formsProLocale, props.isCustomerVoiceSurveyCompact ?? true, props.customerVoiceSurveyCorrelationId || "");
   }
   if (props.copilotSurveyContext) {
     surveyInviteLink = `${surveyInviteLink}&mcs_additionalcontext=${JSON.stringify(props.copilotSurveyContext)}`;
@@ -65,6 +67,7 @@ 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
   };

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

@@ -20,6 +20,34 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 let uiTimer;
+const getFocusedElementAnnouncement = element => {
+  var _element$textContent;
+  const ariaLabel = element.getAttribute(_Constants.HtmlAttributeNames.ariaLabel);
+  if (ariaLabel) {
+    return ariaLabel.trim();
+  }
+  const ariaLabelledBy = element.getAttribute(_Constants.HtmlAttributeNames.ariaLabelledby);
+  if (ariaLabelledBy) {
+    const labelledByText = ariaLabelledBy.split(/\s+/).map(id => {
+      var _document$getElementB, _document$getElementB2;
+      return (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : (_document$getElementB2 = _document$getElementB.textContent) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.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
 const PreChatSurveyPaneStateful = props => {
@@ -42,6 +70,8 @@ const PreChatSurveyPaneStateful = props => {
     surveyProps,
     initStartChat
   } = props;
+  const [preChatFocusAnnouncement, setPreChatFocusAnnouncement] = (0, _react.useState)("");
+  const liveRegionUpdateTimeout = (0, _react.useRef)();
   const generalStyleProps = Object.assign({}, _defaultGeneralPreChatSurveyPaneStyleProps.defaultGeneralPreChatSurveyPaneStyleProps, surveyProps === null || surveyProps === void 0 ? void 0 : (_surveyProps$stylePro = surveyProps.styleProps) === null || _surveyProps$stylePro === void 0 ? void 0 : _surveyProps$stylePro.generalStyleProps, {
     display: state.appStates.isMinimized ? "none" : ""
   });
@@ -128,6 +158,16 @@ 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);
+  };
   (0, _react.useEffect)(() => {
     // Set Aria-Label Attribute for Inputs
     const adaptiveCardElements = document.getElementsByClassName(_Constants.HtmlAttributeNames.adaptiveCardClassName);
@@ -175,10 +215,36 @@ const PreChatSurveyPaneStateful = props => {
       }
     }
   }, [state.appStates.isMinimized]);
-  return /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.PreChatSurveyPane, {
+  (0, _react.useEffect)(() => () => {
+    if (liveRegionUpdateTimeout.current) {
+      window.clearTimeout(liveRegionUpdateTimeout.current);
+    }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    onFocusCapture: announceFocusedElement,
+    style: {
+      width: "100%",
+      height: "100%"
+    }
+  }, /*#__PURE__*/_react.default.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.default.createElement(_omnichannelChatComponents.PreChatSurveyPane, {
     controlProps: controlProps,
     styleProps: styleProps
-  });
+  }));
 };
 exports.PreChatSurveyPaneStateful = PreChatSurveyPaneStateful;
 var _default = PreChatSurveyPaneStateful;

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

@@ -12,6 +12,7 @@ const defaultGeneralPreChatSurveyPaneStyleProps = {
   borderColor: "#F1F1F1",
   overflowY: "auto",
   height: "inherit",
-  width: "inherit"
+  width: "inherit",
+  overscrollBehavior: "none"
 };
 exports.defaultGeneralPreChatSurveyPaneStyleProps = defaultGeneralPreChatSurveyPaneStyleProps;

package/lib/cjs/components/proactivechatpanestateful/ProactiveChatPaneStateful.js

@@ -122,7 +122,6 @@ const ProactiveChatPaneStateful = props => {
     bodyTitleText: state.appStates.proactiveChatStates.proactiveChatBodyTitle ? state.appStates.proactiveChatStates.proactiveChatBodyTitle : proactiveChatProps === null || proactiveChatProps === void 0 ? void 0 : (_proactiveChatProps$c = proactiveChatProps.controlProps) === null || _proactiveChatProps$c === void 0 ? void 0 : _proactiveChatProps$c.bodyTitleText
   };
   (0, _react.useEffect)(() => {
-    (0, _utils.setFocusOnElement)(document.getElementById(controlProps.id + "-startbutton"));
     _TelemetryManager.TelemetryTimers.ProactiveChatScreenTimer = (0, _utils.createTimer)();
     const timeoutEvent = setTimeout(() => {
       handleProactiveChatInviteTimeout();