@microsoft/omnichannel-chat-widget 1.8.1-main.f0e9e2f → 1.8.2-main.2af2b9e

package/lib/cjs/common/Constants.js

@@ -131,7 +131,7 @@ _defineProperty(Constants, "WebchatSequenceIdAttribute", "webchat:sequence-id");
 _defineProperty(Constants, "MessageSequenceIdOverride", "MessageSequenceIdOverride");
 const Regex = (_class = /*#__PURE__*/_createClass(function Regex() {
   _classCallCheck(this, Regex);
-}), _defineProperty(_class, "EmailRegex", "(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])"), _class);
+}), _defineProperty(_class, "EmailRegex", "^(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"[^\"\\\\]*(?:\\\\.[^\"\\\\]*)*\")@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?)*|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\])$"), _class);
 exports.Regex = Regex;
 let HtmlIdNames = /*#__PURE__*/_createClass(function HtmlIdNames() {
   _classCallCheck(this, HtmlIdNames);

package/lib/cjs/common/facades/FacadeChatSDK.js

@@ -109,7 +109,7 @@ let FacadeChatSDK = /*#__PURE__*/function () {
             token: last3digits
           }
         });
-        throw new Error("Invalid token format, must be in JWT format");
+        throw new Error("Authentication Setup Error: Invalid token format, must be in JWT format");
       }
       try {
         const payload = this.enforceBase64Encoding(tokenParts[1]);
@@ -131,9 +131,9 @@ let FacadeChatSDK = /*#__PURE__*/function () {
             token: last3digits
           }
         });
-        throw new Error("Invalid token payload, payload is not valid JSON");
+        throw new Error("Authentication Setup Error: Invalid token payload, payload is not valid JSON");
       } catch (e) {
-        console.error("Failed to decode token", e);
+        console.error("Authentication Setup Error: Failed to decode token", e);
         _TelemetryHelper.TelemetryHelper.logFacadeChatSDKEventToAllTelemetry(_TelemetryConstants.LogLevel.ERROR, {
           Event: _TelemetryConstants.TelemetryEvent.NewTokenValidationFailed,
           Description: "Failed to decode token",
@@ -142,7 +142,7 @@ let FacadeChatSDK = /*#__PURE__*/function () {
             token: last3digits
           }
         });
-        throw new Error("Failed to decode token");
+        throw new Error("Authentication Setup Error: Failed to decode authentication token");
       }
     }
   }, {
@@ -166,7 +166,7 @@ let FacadeChatSDK = /*#__PURE__*/function () {
               "Token": last3digits
             }
           });
-          throw new Error(`New token is already expired, with epoch time ${this.expiration} , last 3 digits of token: ${last3digits}`);
+          throw new Error("Authentication Setup Error: New authentication token is already expired");
         }
       }
     }
@@ -280,9 +280,9 @@ let FacadeChatSDK = /*#__PURE__*/function () {
       if (pingResponse.result === true) {
         return fn();
       }
-      const executionErrorMessage = `Authentication failed: Process to get a token failed for ${functionName}, ${pingResponse.message}`;
+      const executionErrorMessage = "Authentication Setup Error: Token validation failed - GetAuthToken function is not present";
       //telemetry is already logged in tokenRing, so no need to log again, just return the error and communicate to the console
-      console.error(executionErrorMessage);
+      console.error(`${executionErrorMessage} Additional details: Process to get a token failed for ${functionName}, ${pingResponse.message}`);
       _omnichannelChatComponents.BroadcastService.postMessage({
         eventName: _TelemetryConstants.BroadcastEvent.OnWidgetError,
         payload: {
@@ -445,6 +445,48 @@ let FacadeChatSDK = /*#__PURE__*/function () {
       let optionalParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       return this.validateAndExecuteCall("getAgentAvailability", () => this.chatSDK.getAgentAvailability(optionalParams));
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  }, {
+    key: "getReconnectableChats",
+    value: async function getReconnectableChats() {
+      let reconnectableChatsParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      /**
+       * 
+       * This is a particular case, we dont expose getReconnectableChats in the SDK,
+       * The only way to use is by tunneling directly from the SDK to OCSDK,
+       * 
+       * In case of prechat, the function is called before any formal authentication is made, 
+       * this is an specific case for persistent chats, to prevent the survey be loaded again for an on going chat,
+       * 
+       * In this case, we check for existance of the token , otherwise we perform the authentication, error is propagated in case of issues.
+       * 
+       * Once the token is obtained , this will be added to the params to call the function.
+       * 
+       * This is a particular case, should not be taken as pattern.
+       *
+       */
+
+      if (this.token === null || this.token === "") {
+        // If token is not set, try to get it using tokenRing
+        const pingResponse = await this.tokenRing();
+        if (pingResponse.result === false) {
+          const errorMessage = "Authentication Setup Error: Token validation failed for reconnectable chats";
+          //telemetry is already logged in tokenRing, so no need to log again, just return the error and communicate to the console
+          console.error(`Authentication failed: Process to get a token failed for getReconnectableChats, ${pingResponse.message}`);
+          _omnichannelChatComponents.BroadcastService.postMessage({
+            eventName: _TelemetryConstants.BroadcastEvent.OnWidgetError,
+            payload: {
+              errorMessage: errorMessage
+            }
+          });
+          throw new Error(errorMessage);
+        }
+      }
+
+      // Always override the token in params regardless of how getReconnectableChats was called
+      reconnectableChatsParams.authenticatedUserToken = this.token;
+      return this.validateAndExecuteCall("getReconnectableChats", () => this.chatSDK.OCClient.getReconnectableChats(reconnectableChatsParams));
+    }
   }]);
   return FacadeChatSDK;
 }();

package/lib/cjs/components/chatbuttonstateful/ChatButtonStateful.js

@@ -20,7 +20,7 @@ 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 ChatButtonStateful = props => {
-  var _buttonProps$controlP, _props$buttonProps, _props$buttonProps$co, _props$buttonProps2, _props$buttonProps2$c, _props$buttonProps3, _props$buttonProps3$c;
+  var _buttonProps$controlP, _props$buttonProps, _props$buttonProps$co, _props$buttonProps2, _props$buttonProps2$c, _outOfOfficeButtonPro, _outOfOfficeButtonPro2, _props$buttonProps3, _props$buttonProps3$c;
   // this is to ensure the telemetry is set only once and start the load timer
   (0, _react.useEffect)(() => {
     uiTimer = (0, _utils.createTimer)();
@@ -39,7 +39,10 @@ const ChatButtonStateful = props => {
   } = props;
   //Setting OutOfOperatingHours Flag
   //Setting OutOfOperatingHours Flag - to string conversion to normalize the value (could be boolean from other states or string directly from config)
-  const [outOfOperatingHours, setOutOfOperatingHours] = (0, _react.useState)(state.appStates.outsideOperatingHours);
+  // Initialize with the current state value to prevent visual flicker
+  const [outOfOperatingHours, setOutOfOperatingHours] = (0, _react.useState)(() => {
+    return state.appStates.conversationState === _ConversationState.ConversationState.Closed && state.appStates.outsideOperatingHours;
+  });
   const ref = (0, _react.useRef)(() => {
     return;
   });
@@ -71,36 +74,40 @@ const ChatButtonStateful = props => {
   };
   const outOfOfficeStyleProps = Object.assign({}, _defaultOutOfOfficeChatButtonStyleProps.defaultOutOfOfficeChatButtonStyleProps, outOfOfficeButtonProps === null || outOfOfficeButtonProps === void 0 ? void 0 : outOfOfficeButtonProps.styleProps);
   const controlProps = {
+    ...(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.controlProps),
     id: "oc-lcw-chat-button",
     dir: state.domainStates.globalDir,
     titleText: "Let's Chat!",
     subtitleText: "We're online.",
     hideNotificationBubble: (buttonProps === null || buttonProps === void 0 ? void 0 : (_buttonProps$controlP = buttonProps.controlProps) === null || _buttonProps$controlP === void 0 ? void 0 : _buttonProps$controlP.hideNotificationBubble) === true || state.appStates.isMinimized === false,
     unreadMessageCount: state.appStates.unreadMessageCount ? state.appStates.unreadMessageCount > _Constants.Constants.maximumUnreadMessageCount ? (_props$buttonProps = props.buttonProps) === null || _props$buttonProps === void 0 ? void 0 : (_props$buttonProps$co = _props$buttonProps.controlProps) === null || _props$buttonProps$co === void 0 ? void 0 : _props$buttonProps$co.largeUnreadMessageString : state.appStates.unreadMessageCount.toString() : "0",
-    onClick: () => ref.current(),
     unreadMessageString: (_props$buttonProps2 = props.buttonProps) === null || _props$buttonProps2 === void 0 ? void 0 : (_props$buttonProps2$c = _props$buttonProps2.controlProps) === null || _props$buttonProps2$c === void 0 ? void 0 : _props$buttonProps2$c.unreadMessageString,
-    ...(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.controlProps)
+    // Regular chat button onClick - this will always take precedence
+    onClick: () => ref.current()
   };
   const outOfOfficeControlProps = {
+    // Only take specific properties from outOfOfficeButtonProps, never onClick
     id: "oc-lcw-chat-button",
     dir: state.domainStates.globalDir,
-    titleText: "We're Offline",
-    subtitleText: "No agents available",
-    onClick: async () => {
-      state.appStates.isMinimized && dispatch({
-        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_MINIMIZED,
-        payload: false
-      });
+    titleText: (outOfOfficeButtonProps === null || outOfOfficeButtonProps === void 0 ? void 0 : (_outOfOfficeButtonPro = outOfOfficeButtonProps.controlProps) === null || _outOfOfficeButtonPro === void 0 ? void 0 : _outOfOfficeButtonPro.titleText) || "We're Offline",
+    subtitleText: (outOfOfficeButtonProps === null || outOfOfficeButtonProps === void 0 ? void 0 : (_outOfOfficeButtonPro2 = outOfOfficeButtonProps.controlProps) === null || _outOfOfficeButtonPro2 === void 0 ? void 0 : _outOfOfficeButtonPro2.subtitleText) || "No agents available",
+    unreadMessageString: (_props$buttonProps3 = props.buttonProps) === null || _props$buttonProps3 === void 0 ? void 0 : (_props$buttonProps3$c = _props$buttonProps3.controlProps) === null || _props$buttonProps3$c === void 0 ? void 0 : _props$buttonProps3$c.unreadMessageString,
+    ...(outOfOfficeButtonProps === null || outOfOfficeButtonProps === void 0 ? void 0 : outOfOfficeButtonProps.controlProps),
+    // Out-of-office specific onClick - this will ALWAYS take precedence
+    onClick: () => {
+      if (state.appStates.isMinimized) {
+        dispatch({
+          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_MINIMIZED,
+          payload: false
+        });
+      }
       dispatch({
         type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
         payload: _ConversationState.ConversationState.OutOfOffice
       });
-    },
-    unreadMessageString: (_props$buttonProps3 = props.buttonProps) === null || _props$buttonProps3 === void 0 ? void 0 : (_props$buttonProps3$c = _props$buttonProps3.controlProps) === null || _props$buttonProps3$c === void 0 ? void 0 : _props$buttonProps3$c.unreadMessageString,
-    ...(outOfOfficeButtonProps === null || outOfOfficeButtonProps === void 0 ? void 0 : outOfOfficeButtonProps.controlProps)
+    }
   };
   (0, _react.useEffect)(() => {
-    setOutOfOperatingHours(state.appStates.outsideOperatingHours);
     _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
       Event: _TelemetryConstants.TelemetryEvent.LCWChatButtonShow,
       ElapsedTimeInMilliseconds: _TelemetryManager.TelemetryTimers.LcwLoadToChatButtonTimer.milliSecondsElapsed
@@ -119,6 +126,18 @@ const ChatButtonStateful = props => {
       ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
     });
   }, []);
+  (0, _react.useEffect)(() => {
+    if (state.appStates.conversationState === _ConversationState.ConversationState.Closed) {
+      // If the conversation state is closed, check if we are outside operating hours
+      const isOutsideOperatingHours = state.appStates.outsideOperatingHours;
+      setOutOfOperatingHours(isOutsideOperatingHours);
+    } else {
+      // If conversation state is not Closed, we should not be in out-of-office mode
+      if (outOfOperatingHours) {
+        setOutOfOperatingHours(false);
+      }
+    }
+  }, [state.appStates.conversationState, state.appStates.outsideOperatingHours, state.appStates.isMinimized]);
   return /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.ChatButton, {
     componentOverrides: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.componentOverrides,
     controlProps: outOfOperatingHours ? outOfOfficeControlProps : controlProps,

package/lib/cjs/components/confirmationpanestateful/ConfirmationPaneStateful.js

@@ -84,9 +84,13 @@ const ConfirmationPaneStateful = props => {
   (0, _react.useEffect)(() => {
     (0, _utils.preventFocusToMoveOutOfElement)(controlProps.id);
     const focusableElements = (0, _utils.findAllFocusableElement)(`#${controlProps.id}`);
-    if (focusableElements) {
-      focusableElements[0].focus();
-    }
+    requestAnimationFrame(() => {
+      if (focusableElements && focusableElements.length > 0 && focusableElements[0]) {
+        focusableElements[0].focus({
+          preventScroll: true
+        });
+      }
+    });
     elements = (0, _utils.findParentFocusableElementsWithoutChildContainer)(controlProps.id);
     (0, _utils.setTabIndices)(elements, initialTabIndexMap, false);
     _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {

package/lib/cjs/components/headerstateful/HeaderStateful.js

@@ -37,7 +37,10 @@ const HeaderStateful = props => {
     endChat
   } = props;
   //Setting OutOfOperatingHours Flag
-  const [outOfOperatingHours, setOutOfOperatingHours] = (0, _react.useState)(state.appStates.outsideOperatingHours);
+  // Initialize with the current state value to prevent visual flicker
+  const [outOfOperatingHours, setOutOfOperatingHours] = (0, _react.useState)(() => {
+    return state.appStates.conversationState === _ConversationState.ConversationState.Closed && state.appStates.outsideOperatingHours;
+  });
   const outOfOfficeStyleProps = Object.assign({}, _defaultOutOfOfficeHeaderStyleProps.defaultOutOfOfficeHeaderStyleProps, outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : outOfOfficeHeaderProps.styleProps);
 
   // For some reason state object is not getting updated values in this component
@@ -112,6 +115,13 @@ const HeaderStateful = props => {
         type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_MINIMIZED,
         payload: true
       });
+      // Ensure conversation state remains Closed to maintain out-of-office mode
+      if (state.appStates.conversationState !== _ConversationState.ConversationState.Closed) {
+        dispatch({
+          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+          payload: _ConversationState.ConversationState.Closed
+        });
+      }
       _TelemetryHelper.TelemetryHelper.logActionEventToAllTelemetry(_TelemetryConstants.LogLevel.INFO, {
         Event: _TelemetryConstants.TelemetryEvent.MinimizeChatActionCompleted,
         Description: "Header Minimize action completed."
@@ -120,9 +130,6 @@ const HeaderStateful = props => {
     ...(outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : outOfOfficeHeaderProps.controlProps),
     hideCloseButton: state.appStates.conversationState === _ConversationState.ConversationState.OutOfOffice || (outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : (_outOfOfficeHeaderPro = outOfOfficeHeaderProps.controlProps) === null || _outOfOfficeHeaderPro === void 0 ? void 0 : _outOfOfficeHeaderPro.hideCloseButton)
   };
-  (0, _react.useEffect)(() => {
-    setOutOfOperatingHours(state.appStates.outsideOperatingHours);
-  }, []);
   (0, _react.useEffect)(() => {
     var _state$domainStates2;
     localConfirmationPaneState.current = state === null || state === void 0 ? void 0 : (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 ? void 0 : _state$domainStates2.confirmationState;
@@ -138,6 +145,13 @@ const HeaderStateful = props => {
       ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
     });
   }, []);
+  (0, _react.useEffect)(() => {
+    if (state.appStates.conversationState === _ConversationState.ConversationState.Closed) {
+      // If the conversation state is closed, check if we are outside operating hours
+      const isOutsideOperatingHours = state.appStates.outsideOperatingHours;
+      setOutOfOperatingHours(isOutsideOperatingHours);
+    }
+  }, [state.appStates.conversationState, state.appStates.outsideOperatingHours]);
   if (props.draggable === true) {
     var _generalStyleProps;
     const styleProps = outOfOperatingHours || state.appStates.conversationState === _ConversationState.ConversationState.OutOfOffice ? outOfOfficeStyleProps : headerProps === null || headerProps === void 0 ? void 0 : headerProps.styleProps;

package/lib/cjs/components/livechatwidget/LiveChatWidget.js

@@ -8,7 +8,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _ChatAdapterStore = require("../../contexts/ChatAdapterStore");
 var _ChatContextStore = require("../../contexts/ChatContextStore");
 var _ChatSDKStore = require("../../contexts/ChatSDKStore");
-var _ErrorBoundary = _interopRequireDefault(require("../errorboundary/ErrorBoundary"));
 var _FacadeChatSDK = require("../../common/facades/FacadeChatSDK");
 var _FacadeChatSDKStore = require("../../contexts/FacadeChatSDKStore");
 var _LiveChatWidgetStateful = _interopRequireDefault(require("./livechatwidgetstateful/LiveChatWidgetStateful"));
@@ -16,14 +15,14 @@ var _createReducer = require("../../contexts/createReducer");
 var _LiveChatWidgetContextInitialState = require("../../contexts/common/LiveChatWidgetContextInitialState");
 var _getMockChatSDKIfApplicable = require("./common/getMockChatSDKIfApplicable");
 var _utils = require("../../common/utils");
+var _liveChatConfigUtils = require("./common/liveChatConfigUtils");
 var _overridePropsOnMockIfApplicable = _interopRequireDefault(require("./common/overridePropsOnMockIfApplicable"));
 var _registerTelemetryLoggers = require("./common/registerTelemetryLoggers");
-var _startChatErrorHandler = require("./common/startChatErrorHandler");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
 const LiveChatWidget = props => {
-  var _props$mock, _props$featureConfigP, _props$chatConfig, _props$chatConfig$Liv;
+  var _props$mock, _props$featureConfigP, _props$chatConfig, _props$chatConfig$Liv, _props$chatConfig2, _props$chatConfig2$Li;
   const reducer = (0, _createReducer.createReducer)();
   const [state, dispatch] = (0, _react.useReducer)(reducer, (0, _LiveChatWidgetContextInitialState.getLiveChatWidgetContextInitialState)(props));
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -37,7 +36,7 @@ const LiveChatWidget = props => {
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const isAuthenticatedChat = !!((_props$chatConfig = props.chatConfig) !== null && _props$chatConfig !== void 0 && (_props$chatConfig$Liv = _props$chatConfig.LiveChatConfigAuthSettings) !== null && _props$chatConfig$Liv !== void 0 && _props$chatConfig$Liv.msdyn_javascriptclientfunction);
+  const isAuthenticatedChat = !!((_props$chatConfig = props.chatConfig) !== null && _props$chatConfig !== void 0 && (_props$chatConfig$Liv = _props$chatConfig.LiveChatConfigAuthSettings) !== null && _props$chatConfig$Liv !== void 0 && _props$chatConfig$Liv.msdyn_javascriptclientfunction) || (0, _liveChatConfigUtils.isPersistentChatEnabled)((_props$chatConfig2 = props.chatConfig) === null || _props$chatConfig2 === void 0 ? void 0 : (_props$chatConfig2$Li = _props$chatConfig2.LiveWSAndLiveChatEngJoin) === null || _props$chatConfig2$Li === void 0 ? void 0 : _props$chatConfig2$Li.msdyn_conversationmode);
   if (!facadeChatSDK) {
     var _props$mock2;
     setFacadeChatSDK(new _FacadeChatSDK.FacadeChatSDK({
@@ -52,11 +51,7 @@ const LiveChatWidget = props => {
   (0, _react.useEffect)(() => {
     (0, _registerTelemetryLoggers.registerTelemetryLoggers)(props, dispatch);
   }, [dispatch]);
-  return /*#__PURE__*/_react.default.createElement(_ErrorBoundary.default, {
-    onError: error => {
-      (0, _startChatErrorHandler.logWidgetLoadWithUnexpectedError)(error);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_FacadeChatSDKStore.FacadeChatSDKStore.Provider, {
+  return /*#__PURE__*/_react.default.createElement(_FacadeChatSDKStore.FacadeChatSDKStore.Provider, {
     value: [facadeChatSDK, setFacadeChatSDK]
   }, /*#__PURE__*/_react.default.createElement(_ChatSDKStore.ChatSDKStore.Provider, {
     value: chatSDK
@@ -64,7 +59,7 @@ const LiveChatWidget = props => {
     value: [adapter, setAdapter]
   }, /*#__PURE__*/_react.default.createElement(_ChatContextStore.ChatContextStore.Provider, {
     value: [state, dispatch]
-  }, /*#__PURE__*/_react.default.createElement(_LiveChatWidgetStateful.default, props))))));
+  }, /*#__PURE__*/_react.default.createElement(_LiveChatWidgetStateful.default, props)))));
 };
 exports.LiveChatWidget = LiveChatWidget;
 var _default = LiveChatWidget;

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

@@ -13,7 +13,7 @@ const isPostChatSurveyEnabled = async facadeChatSDK => {
   return postChatEnabled === "true";
 };
 exports.isPostChatSurveyEnabled = isPostChatSurveyEnabled;
-const isPersistentChatEnabled = async conversationMode => {
+const isPersistentChatEnabled = conversationMode => {
   if ((0, _utils.isNullOrUndefined)(conversationMode)) {
     return false;
   }

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

@@ -6,16 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.shouldSetPreChatIfPersistentChat = void 0;
 var _liveChatConfigUtils = require("./liveChatConfigUtils");
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const shouldSetPreChatIfPersistentChat = async (chatSDK, conversationMode, showPreChat) => {
-  const persistentEnabled = await (0, _liveChatConfigUtils.isPersistentChatEnabled)(conversationMode);
+const shouldSetPreChatIfPersistentChat = async (facadeChatSDK, conversationMode, showPreChat) => {
+  const persistentEnabled = (0, _liveChatConfigUtils.isPersistentChatEnabled)(conversationMode);
   let skipPreChat = false;
   if (persistentEnabled) {
+    // Access private properties using type assertions
+    const chatSDK = facadeChatSDK.getChatSDK();
+
+    // Use type assertion to bypass private access restriction
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const sdkAsAny = chatSDK;
+    // most likely this is not set , the facade will take care of it
     const reconnectableChatsParams = {
-      authenticatedUserToken: chatSDK.authenticatedUserToken,
-      requestId: chatSDK.requestId
+      authenticatedUserToken: sdkAsAny.authenticatedUserToken,
+      requestId: sdkAsAny.requestId
     };
     try {
-      const reconnectableChatsResponse = await chatSDK.OCClient.getReconnectableChats(reconnectableChatsParams);
+      const reconnectableChatsResponse = await facadeChatSDK.getReconnectableChats(reconnectableChatsParams);
       if (reconnectableChatsResponse && reconnectableChatsResponse.reconnectid) {
         // Skip rendering prechat on existing persistent chat session
         skipPreChat = true;

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

@@ -75,7 +75,7 @@ const setPreChatAndInitiateChat = async (facadeChatSDK, dispatch, setAdapter, is
   const parseToJson = false;
   const preChatSurveyResponse = (props === null || props === void 0 ? void 0 : (_props$preChatSurveyP = props.preChatSurveyPaneProps) === null || _props$preChatSurveyP === void 0 ? void 0 : (_props$preChatSurveyP2 = _props$preChatSurveyP.controlProps) === null || _props$preChatSurveyP2 === void 0 ? void 0 : _props$preChatSurveyP2.payload) ?? (await facadeChatSDK.getPreChatSurvey(parseToJson));
   let showPrechat = isProactiveChat ? preChatSurveyResponse && proactiveChatEnablePrechatState : preChatSurveyResponse && !(props !== null && props !== void 0 && (_props$controlProps = props.controlProps) !== null && _props$controlProps !== void 0 && _props$controlProps.hidePreChatSurveyPane);
-  showPrechat = await (0, _persistentChatHelper.shouldSetPreChatIfPersistentChat)(facadeChatSDK.getChatSDK(), state === null || state === void 0 ? void 0 : (_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : (_state$domainStates$l = _state$domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : (_state$domainStates$l2 = _state$domainStates$l.LiveWSAndLiveChatEngJoin) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.msdyn_conversationmode, showPrechat);
+  showPrechat = await (0, _persistentChatHelper.shouldSetPreChatIfPersistentChat)(facadeChatSDK, state === null || state === void 0 ? void 0 : (_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : (_state$domainStates$l = _state$domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : (_state$domainStates$l2 = _state$domainStates$l.LiveWSAndLiveChatEngJoin) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.msdyn_conversationmode, showPrechat);
   if (showPrechat) {
     var _state$domainStates2, _state$domainStates2$, _state$domainStates2$2, _state$domainStates2$3;
     const isOutOfOperatingHours = (state === null || state === void 0 ? void 0 : (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 ? void 0 : (_state$domainStates2$ = _state$domainStates2.liveChatConfig) === null || _state$domainStates2$ === void 0 ? void 0 : (_state$domainStates2$2 = _state$domainStates2$.LiveWSAndLiveChatEngJoin) === null || _state$domainStates2$2 === void 0 ? void 0 : (_state$domainStates2$3 = _state$domainStates2$2.OutOfOperatingHours) === null || _state$domainStates2$3 === void 0 ? void 0 : _state$domainStates2$3.toString().toLowerCase()) === "true";
@@ -163,7 +163,7 @@ exports.setPreChatAndInitiateChat = setPreChatAndInitiateChat;
 const initStartChat = async (facadeChatSDK, dispatch, setAdapter, state, props, params, persistedState) => {
   var _state$domainStates7, _state$domainStates7$, _state$domainStates7$2;
   let isStartChatSuccessful = false;
-  const persistentChatEnabled = await (0, _liveChatConfigUtils.isPersistentChatEnabled)(state === null || state === void 0 ? void 0 : (_state$domainStates7 = state.domainStates) === null || _state$domainStates7 === void 0 ? void 0 : (_state$domainStates7$ = _state$domainStates7.liveChatConfig) === null || _state$domainStates7$ === void 0 ? void 0 : (_state$domainStates7$2 = _state$domainStates7$.LiveWSAndLiveChatEngJoin) === null || _state$domainStates7$2 === void 0 ? void 0 : _state$domainStates7$2.msdyn_conversationmode);
+  const persistentChatEnabled = (0, _liveChatConfigUtils.isPersistentChatEnabled)(state === null || state === void 0 ? void 0 : (_state$domainStates7 = state.domainStates) === null || _state$domainStates7 === void 0 ? void 0 : (_state$domainStates7$ = _state$domainStates7.liveChatConfig) === null || _state$domainStates7$ === void 0 ? void 0 : (_state$domainStates7$2 = _state$domainStates7$.LiveWSAndLiveChatEngJoin) === null || _state$domainStates7$2 === void 0 ? void 0 : _state$domainStates7$2.msdyn_conversationmode);
   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());

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

@@ -15,6 +15,11 @@ var _StartChatFailureType = require("../../../contexts/common/StartChatFailureTy
 var _TelemetryHelper = require("../../../common/telemetry/TelemetryHelper");
 var _TelemetryManager = require("../../../common/telemetry/TelemetryManager");
 var _utils = require("../../../common/utils");
+// Helper function to check if error is authentication-related
+const isAuthenticationError = errorMessage => {
+  return errorMessage === _Constants.WidgetLoadCustomErrorString.AuthenticationFailedErrorString || errorMessage.startsWith("Authentication Setup Error:") || errorMessage.includes("Token validation failed") || errorMessage.includes("Authentication token");
+};
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const handleStartChatError = (dispatch, facadeChatSDK, props, ex, isStartChatSuccessful) => {
   var _props$controlProps;
@@ -23,19 +28,16 @@ const handleStartChatError = (dispatch, facadeChatSDK, props, ex, isStartChatSuc
     return;
   }
 
-  // Handle internal or misc errors
-  if (ex.message === _Constants.WidgetLoadCustomErrorString.AuthenticationFailedErrorString) {
+  // Handle authentication-related errors
+  if (isAuthenticationError(ex.message)) {
     dispatch({
       type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_START_CHAT_FAILURE_TYPE,
       payload: _StartChatFailureType.StartChatFailureType.AuthSetupError
     });
-    // set conversation to error to enforce error UI pane
-    dispatch({
-      type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
-      payload: _ConversationState.ConversationState.Error
-    });
     logWidgetLoadCompleteWithError(ex);
+    // Don't return early - let the generic error handling logic handle hideErrorUIPane and telemetry
   }
+
   if (ex.message === _Constants.WidgetLoadCustomErrorString.NetworkErrorString) {
     logWidgetLoadCompleteWithError(ex);
   }
@@ -58,8 +60,11 @@ const handleStartChatError = (dispatch, facadeChatSDK, props, ex, isStartChatSuc
       case _omnichannelChatSdk.ChatSDKErrorName.UninitializedChatSDK:
         handleUninitializedChatSDK(ex);
         break;
-      // Handle the case indicating failure to retrieve an authenticated chat conversation 
       case _omnichannelChatSdk.ChatSDKErrorName.AuthenticatedChatConversationRetrievalFailure:
+        dispatch({
+          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_START_CHAT_FAILURE_TYPE,
+          payload: _StartChatFailureType.StartChatFailureType.Unauthorized
+        });
         logWidgetLoadCompleteWithError(ex);
         break;
       case _omnichannelChatSdk.ChatSDKErrorName.InvalidConversation:
@@ -112,6 +117,9 @@ const logWidgetLoadFailed = ex => {
   if (ex !== null && ex !== void 0 && ex.httpResponseStatusCode) {
     exDetails.HttpResponseStatusCode = ex.httpResponseStatusCode;
   }
+  if (ex !== null && ex !== void 0 && ex.exceptionDetails) {
+    exDetails.ChatSDKExceptionDetails = ex.exceptionDetails;
+  }
   _TelemetryHelper.TelemetryHelper.logLoadingEventToAllTelemetry(_TelemetryConstants.LogLevel.ERROR, {
     Event: _TelemetryConstants.TelemetryEvent.WidgetLoadFailed,
     Description: "Widget load complete with error",
@@ -141,6 +149,9 @@ const logWidgetLoadCompleteWithError = ex => {
   if (ex !== null && ex !== void 0 && ex.httpResponseStatusCode) {
     exDetails.HttpResponseStatusCode = ex.httpResponseStatusCode;
   }
+  if (ex !== null && ex !== void 0 && ex.exceptionDetails) {
+    exDetails.ChatSDKExceptionDetails = ex.exceptionDetails;
+  }
   _TelemetryHelper.TelemetryHelper.logLoadingEventToAllTelemetry(_TelemetryConstants.LogLevel.ERROR, {
     Event: _TelemetryConstants.TelemetryEvent.WidgetLoadFailed,
     Description: "Widget load complete with error",
@@ -229,6 +240,12 @@ const handleChatTokenRetrievalFailure = (dispatch, ex) => {
         type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_START_CHAT_FAILURE_TYPE,
         payload: _StartChatFailureType.StartChatFailureType.Unauthorized
       });
+    } else {
+      // For other authentication-related token retrieval failures, set as AuthSetupError
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_START_CHAT_FAILURE_TYPE,
+        payload: _StartChatFailureType.StartChatFailureType.AuthSetupError
+      });
     }
     logWidgetLoadCompleteWithError(ex);
   }

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

@@ -63,7 +63,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$styleProps, _props$webChatContain2, _props$webChatContain3, _props$controlProps, _props$controlProps3, _state$appStates7, _props$webChatContain7, _state$appStates14, _props$webChatContain9, _props$webChatContain10, _props$controlProps12, _props$draggableChatW, _props$draggableChatW2, _props$draggableChatW3, _props$draggableChatW4, _props$draggableChatW5, _livechatProps$webCha, _props$webChatContain11, _props$webChatContain12, _props$webChatContain13, _props$webChatContain14, _props$webChatContain15, _props$webChatContain16, _props$webChatContain17, _props$webChatContain18, _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$appStates14, _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;
   (0, _react2.useEffect)(() => {
     uiTimer = (0, _utils.createTimer)();
     _TelemetryHelper.TelemetryHelper.logLoadingEventToAllTelemetry(_TelemetryConstants.LogLevel.INFO, {
@@ -87,6 +87,8 @@ const LiveChatWidgetStateful = props => {
     Composer
   } = _botframeworkWebchat.Components;
   const canStartProactiveChat = (0, _react2.useRef)(true);
+  const bubbleBackground = ((_props$webChatContain2 = props.webChatContainerProps) === null || _props$webChatContain2 === void 0 ? void 0 : (_props$webChatContain3 = _props$webChatContain2.webChatStyles) === null || _props$webChatContain3 === void 0 ? void 0 : _props$webChatContain3.bubbleBackground) ?? ((_props$webChatContain4 = props.webChatContainerProps) === null || _props$webChatContain4 === void 0 ? void 0 : (_props$webChatContain5 = _props$webChatContain4.adaptiveCardStyles) === null || _props$webChatContain5 === void 0 ? void 0 : _props$webChatContain5.background) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.background;
+  const bubbleTextColor = ((_props$webChatContain6 = props.webChatContainerProps) === null || _props$webChatContain6 === void 0 ? void 0 : (_props$webChatContain7 = _props$webChatContain6.webChatStyles) === null || _props$webChatContain7 === void 0 ? void 0 : _props$webChatContain7.bubbleTextColor) ?? ((_props$webChatContain8 = props.webChatContainerProps) === null || _props$webChatContain8 === void 0 ? void 0 : (_props$webChatContain9 = _props$webChatContain8.adaptiveCardStyles) === null || _props$webChatContain9 === void 0 ? void 0 : _props$webChatContain9.color) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.color;
 
   // Process general styles
   const generalStyles = {
@@ -95,7 +97,7 @@ const LiveChatWidgetStateful = props => {
 
   //Scrollbar styles
   const scrollbarProps = Object.assign({}, _defaultScrollBarProps.defaultScrollBarProps, props === null || props === void 0 ? void 0 : props.scrollBarProps);
-  const sendBoxTextArea = props === null || props === void 0 ? void 0 : (_props$webChatContain2 = props.webChatContainerProps) === null || _props$webChatContain2 === void 0 ? void 0 : (_props$webChatContain3 = _props$webChatContain2.sendBoxTextBox) === null || _props$webChatContain3 === void 0 ? void 0 : _props$webChatContain3.textarea;
+  const sendBoxTextArea = props === null || props === void 0 ? void 0 : (_props$webChatContain10 = props.webChatContainerProps) === null || _props$webChatContain10 === void 0 ? void 0 : (_props$webChatContain11 = _props$webChatContain10.sendBoxTextBox) === null || _props$webChatContain11 === void 0 ? void 0 : _props$webChatContain11.textarea;
 
   // In case the broadcast channel is already initialized elsewhere; One tab can only hold 1 instance
   if ((props === null || props === void 0 ? void 0 : (_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.skipBroadcastChannelInit) !== true) {
@@ -282,7 +284,8 @@ const LiveChatWidgetStateful = props => {
     var _state$appStates6;
     if ((state === null || state === void 0 ? void 0 : (_state$appStates6 = state.appStates) === null || _state$appStates6 === void 0 ? void 0 : _state$appStates6.hideStartChatButton) === true) {
       //handle OOH pane
-      if (state.appStates.outsideOperatingHours === true) {
+      // Only set OutOfOffice state for new conversations, allow existing Active/InActive conversations to continue
+      if (state.appStates.outsideOperatingHours === true && state.appStates.conversationState !== _ConversationState.ConversationState.Active) {
         dispatch({
           type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
           payload: _ConversationState.ConversationState.OutOfOffice
@@ -631,8 +634,8 @@ const LiveChatWidgetStateful = props => {
       });
     }
     if (state.appStates.conversationState === _ConversationState.ConversationState.InActive) {
-      var _props$webChatContain4, _props$webChatContain5;
-      if ((props === null || props === void 0 ? void 0 : (_props$webChatContain4 = props.webChatContainerProps) === null || _props$webChatContain4 === void 0 ? void 0 : (_props$webChatContain5 = _props$webChatContain4.renderingMiddlewareProps) === null || _props$webChatContain5 === void 0 ? void 0 : _props$webChatContain5.hideSendboxOnConversationEnd) !== false) {
+      var _props$webChatContain12, _props$webChatContain13;
+      if ((props === null || props === void 0 ? void 0 : (_props$webChatContain12 = props.webChatContainerProps) === null || _props$webChatContain12 === void 0 ? void 0 : (_props$webChatContain13 = _props$webChatContain12.renderingMiddlewareProps) === null || _props$webChatContain13 === void 0 ? void 0 : _props$webChatContain13.hideSendboxOnConversationEnd) !== false) {
         setWebChatStyles(styles => {
           return {
             ...styles,
@@ -676,12 +679,12 @@ const LiveChatWidgetStateful = props => {
     }
   }, [state.appStates.unreadMessageCount]);
   (0, _react2.useEffect)(() => {
-    var _props$webChatContain6;
+    var _props$webChatContain14;
     setWebChatStyles({
       ...webChatStyles,
-      ...((_props$webChatContain6 = props.webChatContainerProps) === null || _props$webChatContain6 === void 0 ? void 0 : _props$webChatContain6.webChatStyles)
+      ...((_props$webChatContain14 = props.webChatContainerProps) === null || _props$webChatContain14 === void 0 ? void 0 : _props$webChatContain14.webChatStyles)
     });
-  }, [(_props$webChatContain7 = props.webChatContainerProps) === null || _props$webChatContain7 === void 0 ? void 0 : _props$webChatContain7.webChatStyles]);
+  }, [(_props$webChatContain15 = props.webChatContainerProps) === null || _props$webChatContain15 === void 0 ? void 0 : _props$webChatContain15.webChatStyles]);
   (0, _react2.useEffect)(() => {
     //Confirmation pane dismissing through OK option, so proceed with end chat
     if (state.domainStates.confirmationState === _Constants.ConfirmationState.Ok) {
@@ -780,12 +783,12 @@ const LiveChatWidgetStateful = props => {
 
   // if props state gets updates we need to update the renderingMiddlewareProps in the state
   (0, _react2.useEffect)(() => {
-    var _props$webChatContain8;
+    var _props$webChatContain16;
     dispatch({
       type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_RENDERING_MIDDLEWARE_PROPS,
-      payload: (_props$webChatContain8 = props.webChatContainerProps) === null || _props$webChatContain8 === void 0 ? void 0 : _props$webChatContain8.renderingMiddlewareProps
+      payload: (_props$webChatContain16 = props.webChatContainerProps) === null || _props$webChatContain16 === void 0 ? void 0 : _props$webChatContain16.renderingMiddlewareProps
     });
-  }, [(_props$webChatContain9 = props.webChatContainerProps) === null || _props$webChatContain9 === void 0 ? void 0 : _props$webChatContain9.renderingMiddlewareProps]);
+  }, [(_props$webChatContain17 = props.webChatContainerProps) === null || _props$webChatContain17 === void 0 ? void 0 : _props$webChatContain17.renderingMiddlewareProps]);
   (0, _react2.useEffect)(() => {
     _TelemetryHelper.TelemetryHelper.logLoadingEventToAllTelemetry(_TelemetryConstants.LogLevel.INFO, {
       Event: _TelemetryConstants.TelemetryEvent.UXLiveChatWidgetCompleted,
@@ -828,7 +831,7 @@ const LiveChatWidgetStateful = props => {
   const webChatProps = (0, _initWebChatComposer.initWebChatComposer)(props, state, dispatch, facadeChatSDK, endChatRelay);
   const downloadTranscriptProps = (0, _createDownloadTranscriptProps.default)(props.downloadTranscriptProps, {
     ...(_defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps === null || _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps === void 0 ? void 0 : _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.webChatStyles),
-    ...((_props$webChatContain10 = props.webChatContainerProps) === null || _props$webChatContain10 === void 0 ? void 0 : _props$webChatContain10.webChatStyles)
+    ...((_props$webChatContain18 = props.webChatContainerProps) === null || _props$webChatContain18 === void 0 ? void 0 : _props$webChatContain18.webChatStyles)
   }, props.webChatContainerProps);
   const livechatProps = {
     ...props,
@@ -854,6 +857,11 @@ const LiveChatWidgetStateful = props => {
   (0, _utils.setOcUserAgent)(facadeChatSDK.getChatSDK());
   const directLine = ((_livechatProps$webCha = livechatProps.webChatContainerProps) === null || _livechatProps$webCha === void 0 ? void 0 : _livechatProps$webCha.directLine) ?? adapter ?? _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.directLine;
   const userID = directLine.getState ? directLine === null || directLine === void 0 ? void 0 : directLine.getState("acs.userId") : "teamsvisitor";
+  const styleOptions = _react2.default.useMemo(() => ({
+    ...webChatStyles,
+    bubbleBackground,
+    bubbleTextColor
+  }), [webChatStyles, bubbleBackground, bubbleTextColor]);
 
   // 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, `
@@ -892,11 +900,7 @@ const LiveChatWidgetStateful = props => {
             }`}
             `), /*#__PURE__*/_react2.default.createElement(_DraggableChatWidget.default, chatWidgetDraggableConfig, /*#__PURE__*/_react2.default.createElement(Composer, _extends({}, webChatProps, {
     userID: userID,
-    styleOptions: {
-      ...webChatStyles,
-      bubbleBackground: ((_props$webChatContain11 = props.webChatContainerProps) === null || _props$webChatContain11 === void 0 ? void 0 : (_props$webChatContain12 = _props$webChatContain11.webChatStyles) === null || _props$webChatContain12 === void 0 ? void 0 : _props$webChatContain12.bubbleBackground) ?? ((_props$webChatContain13 = props.webChatContainerProps) === null || _props$webChatContain13 === void 0 ? void 0 : (_props$webChatContain14 = _props$webChatContain13.adaptiveCardStyles) === null || _props$webChatContain14 === void 0 ? void 0 : _props$webChatContain14.background) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.background,
-      bubbleTextColor: ((_props$webChatContain15 = props.webChatContainerProps) === null || _props$webChatContain15 === void 0 ? void 0 : (_props$webChatContain16 = _props$webChatContain15.webChatStyles) === null || _props$webChatContain16 === void 0 ? void 0 : _props$webChatContain16.bubbleTextColor) ?? ((_props$webChatContain17 = props.webChatContainerProps) === null || _props$webChatContain17 === void 0 ? void 0 : (_props$webChatContain18 = _props$webChatContain17.adaptiveCardStyles) === null || _props$webChatContain18 === void 0 ? void 0 : _props$webChatContain18.color) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.color
-    },
+    styleOptions: styleOptions,
     directLine: directLine
   }), /*#__PURE__*/_react2.default.createElement(_react.Stack, {
     id: widgetElementId,