@microsoft/omnichannel-chat-widget 0.1.0-main.99b5123 → 0.1.0-main.99bac9c

package/lib/esm/common/telemetry/loggers/ariaTelemetryLogger.js

@@ -1,7 +1,6 @@
 import { getDomain, isNullOrEmptyString, isNullOrUndefined } from "../../utils";
-import AWTEventProperties from "@microsoft/omnichannel-chat-sdk/lib/external/aria/webjs/AWTEventProperties";
-import AWTLogManager from "@microsoft/omnichannel-chat-sdk/lib/external/aria/webjs/AWTLogManager";
-import { AWTPiiKind } from "@microsoft/omnichannel-chat-sdk/lib/external/aria/common/Enums";
+import { AWTLogManager } from "@microsoft/omnichannel-chat-sdk/lib/external/aria/webjs/AriaSDK";
+import { AWTCustomerContentKind, AWTPiiKind, AWTPropertyType } from "@microsoft/omnichannel-chat-sdk/lib/external/aria/common/Enums";
 import { Constants, AriaTelemetryConstants, EnvironmentVersion } from "../../Constants";
 import { TelemetryManager } from "../TelemetryManager";
 export const ariaTelemetryLogger = (ariaTelemetryKey, disabledCookieUsage, collectiorUriForTelemetry, ariaTelemetryApplicationName) => {
@@ -49,18 +48,35 @@ export const ariaTelemetryLogger = (ariaTelemetryKey, disabledCookieUsage, colle
   const ariaLogger = {
     log: (logLevel, telemetryInput) => {
       try {
-        let property;
-        const telemetryInfo = telemetryInput === null || telemetryInput === void 0 ? void 0 : telemetryInput.telemetryInfo;
-        const eventProperties = new AWTEventProperties();
-        eventProperties.setName(telemetryInput.scenarioType);
+        var _telemetryInput$telem;
 
-        if (telemetryInfo) {
-          for (const key of Object.keys(telemetryInfo)) {
-            property = typeof telemetryInfo[key] === "object" ? JSON.stringify(telemetryInfo[key]) : telemetryInfo[key];
-            eventProperties.setProperty(key, property);
-          }
+        const telemetryInfo = telemetryInput === null || telemetryInput === void 0 ? void 0 : (_telemetryInput$telem = telemetryInput.telemetryInfo) === null || _telemetryInput$telem === void 0 ? void 0 : _telemetryInput$telem.telemetryInfo; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+        const eventProperties = {
+          name: telemetryInput.scenarioType,
+          properties: {}
+        };
 
-          eventProperties.setPropertyWithPii(ariaTelemetryApplicationName, Constants.LiveChatWidget, AWTPiiKind.GenericData);
+        if (telemetryInfo) {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          Object.keys(telemetryInfo).forEach((key, index) => {
+            if (!isNullOrUndefined(telemetryInfo[key]) && !isNullOrEmptyString(telemetryInfo[key])) {
+              const property = {
+                value: typeof telemetryInfo[key] === "object" ? JSON.stringify(telemetryInfo[key]) : telemetryInfo[key],
+                type: typeof telemetryInfo[key] === "number" ? AWTPropertyType.Double : AWTPropertyType.String,
+                pii: AWTPiiKind.NotSet,
+                cc: AWTCustomerContentKind.NotSet
+              };
+              eventProperties.properties[key] = property;
+            }
+          });
+          const nameProperty = {
+            value: Constants.LiveChatWidget,
+            type: AWTPropertyType.String,
+            pii: AWTPiiKind.GenericData,
+            cc: AWTCustomerContentKind.NotSet
+          };
+          eventProperties.properties[ariaTelemetryApplicationName] = nameProperty;
         }
 
         logger() ? logger().logEvent(eventProperties) : console.log("Unable to initialize aria logger");

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

@@ -54,12 +54,12 @@ export const ConfirmationPaneStateful = props => {
         type: LiveChatWidgetActionType.SET_SHOW_CONFIRMATION,
         payload: false
       });
-      const previousFocused = state.appStates.previousElementOnFocusBeforeModalOpen;
+      const previousFocusedElementId = state.appStates.previousElementIdOnFocusBeforeModalOpen;
 
-      if (previousFocused) {
-        setFocusOnElement(previousFocused);
+      if (previousFocusedElementId) {
+        setFocusOnElement("#" + previousFocusedElementId);
         dispatch({
-          type: LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT,
+          type: LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT_ID,
           payload: null
         });
       } else {

package/lib/esm/components/emailtranscriptpanestateful/EmailTranscriptPaneStateful.js

@@ -25,16 +25,16 @@ export const EmailTranscriptPaneStateful = props => {
       type: LiveChatWidgetActionType.SET_SHOW_EMAIL_TRANSCRIPT_PANE,
       payload: false
     });
-    const previousFocused = state.appStates.previousElementOnFocusBeforeModalOpen;
+    const previousFocusedElementId = state.appStates.previousElementIdOnFocusBeforeModalOpen;
 
-    if (previousFocused) {
-      setFocusOnElement(previousFocused);
+    if (previousFocusedElementId) {
+      setFocusOnElement("#" + previousFocusedElementId);
     } else {
       setFocusOnSendBox();
     }
 
     dispatch({
-      type: LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT,
+      type: LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT_ID,
       payload: null
     });
     setTabIndices(elements, initialTabIndexMap, true);

package/lib/esm/components/footerstateful/FooterStateful.js

@@ -54,13 +54,12 @@ export const FooterStateful = props => {
         Event: TelemetryEvent.EmailTranscriptButtonClicked,
         Description: "Email Transcript button clicked."
       });
-      const emailTranscriptButtonId = (footerProps === null || footerProps === void 0 ? void 0 : (_footerProps$controlP = footerProps.controlProps) === null || _footerProps$controlP === void 0 ? void 0 : (_footerProps$controlP2 = _footerProps$controlP.emailTranscriptButtonProps) === null || _footerProps$controlP2 === void 0 ? void 0 : _footerProps$controlP2.id) ?? "oc-lcw-footer-emailtranscript-button";
-      const emailTranscriptButton = document.getElementById(emailTranscriptButtonId);
+      const emailTranscriptButtonId = (footerProps === null || footerProps === void 0 ? void 0 : (_footerProps$controlP = footerProps.controlProps) === null || _footerProps$controlP === void 0 ? void 0 : (_footerProps$controlP2 = _footerProps$controlP.emailTranscriptButtonProps) === null || _footerProps$controlP2 === void 0 ? void 0 : _footerProps$controlP2.id) ?? `${controlProps.id}-emailtranscript-button`;
 
-      if (emailTranscriptButton) {
+      if (emailTranscriptButtonId) {
         dispatch({
-          type: LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT,
-          payload: emailTranscriptButton
+          type: LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT_ID,
+          payload: emailTranscriptButtonId
         });
       }
 
@@ -84,14 +83,7 @@ export const FooterStateful = props => {
       isAudioMuted: state.appStates.isAudioMuted
     }
   };
-  const footerId = (controlProps === null || controlProps === void 0 ? void 0 : controlProps.id) ?? "oc-lcw-footer";
-  const footer = document.getElementById(footerId);
-
-  if (footer) {
-    footer.style.display = hideFooterDisplay ? "none" : "";
-  }
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Footer, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !hideFooterDisplay && /*#__PURE__*/React.createElement(Footer, {
     componentOverrides: footerProps === null || footerProps === void 0 ? void 0 : footerProps.componentOverrides,
     controlProps: controlProps,
     styleProps: footerProps === null || footerProps === void 0 ? void 0 : footerProps.styleProps

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

@@ -36,6 +36,8 @@ export const HeaderStateful = props => {
       });
     },
     onCloseClick: async () => {
+      var _props$headerProps, _props$headerProps$co, _props$headerProps$co2;
+
       TelemetryHelper.logActionEvent(LogLevel.INFO, {
         Event: TelemetryEvent.HeaderCloseButtonClicked,
         Description: "Header Close button clicked."
@@ -53,10 +55,14 @@ export const HeaderStateful = props => {
         await endChat(adapter, skipEndChatSDK, skipCloseChat, postMessageToOtherTabs);
       }
 
-      dispatch({
-        type: LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT,
-        payload: document.getElementById(`${controlProps.id}-closebutton`)
-      });
+      const closeButtonId = ((_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.closeButtonProps) === null || _props$headerProps$co2 === void 0 ? void 0 : _props$headerProps$co2.id) ?? `${controlProps.id}-close-button`;
+
+      if (closeButtonId) {
+        dispatch({
+          type: LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT_ID,
+          payload: closeButtonId
+        });
+      }
     },
     ...(headerProps === null || headerProps === void 0 ? void 0 : headerProps.controlProps),
     hideTitle: state.appStates.conversationState === ConversationState.Loading || state.appStates.conversationState === ConversationState.PostchatLoading || (headerProps === null || headerProps === void 0 ? void 0 : (_headerProps$controlP = headerProps.controlProps) === null || _headerProps$controlP === void 0 ? void 0 : _headerProps$controlP.hideTitle),

package/lib/esm/components/livechatwidget/common/authHelper.js

@@ -1,8 +1,8 @@
 import { LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
 import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
-import { isNullOrEmptyString } from "../../../common/utils"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import { isNullOrEmptyString } from "../../../common/utils";
 
-const handleAuthentication = async (chatSDK, chatConfig, getAuthToken) => {
+const getAuthClientFunction = chatConfig => {
   let authClientFunction = undefined;
 
   if (chatConfig !== null && chatConfig !== void 0 && chatConfig.LiveChatConfigAuthSettings) {
@@ -11,6 +11,13 @@ const handleAuthentication = async (chatSDK, chatConfig, getAuthToken) => {
     authClientFunction = (chatConfig === null || chatConfig === void 0 ? void 0 : (_chatConfig$LiveChatC = chatConfig.LiveChatConfigAuthSettings) === null || _chatConfig$LiveChatC === void 0 ? void 0 : _chatConfig$LiveChatC.msdyn_javascriptclientfunction) ?? undefined;
   }
 
+  return authClientFunction;
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+const handleAuthentication = async (chatSDK, chatConfig, getAuthToken) => {
+  const authClientFunction = getAuthClientFunction(chatConfig);
+
   if (getAuthToken && authClientFunction) {
     TelemetryHelper.logActionEvent(LogLevel.INFO, {
       Event: TelemetryEvent.GetAuthTokenCalled
@@ -22,12 +29,16 @@ const handleAuthentication = async (chatSDK, chatConfig, getAuthToken) => {
       chatSDK.setAuthTokenProvider(async () => {
         return token;
       });
+      return true;
     } else {
       TelemetryHelper.logActionEvent(LogLevel.ERROR, {
         Event: TelemetryEvent.ReceivedNullOrEmptyToken
       });
+      return false;
     }
   }
+
+  return false;
 }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 
@@ -36,4 +47,4 @@ const removeAuthTokenProvider = chatSDK => {
   chatSDK.authenticatedUserToken = null;
 };
 
-export { handleAuthentication, removeAuthTokenProvider };
+export { getAuthClientFunction, handleAuthentication, removeAuthTokenProvider };

package/lib/esm/components/livechatwidget/common/createFooter.js

@@ -3,25 +3,14 @@ import React from "react";
 import { decodeComponentString } from "@microsoft/omnichannel-chat-components";
 import { shouldShowFooter } from "../../../controller/componentController";
 export const createFooter = (props, state) => {
-  var _props$footerProps, _props$controlProps, _props$componentOverr, _props$componentOverr2;
+  var _props$controlProps, _props$componentOverr;
 
-  const footerPropsHidden = { ...props.footerProps,
-    controlProps: { ...((_props$footerProps = props.footerProps) === null || _props$footerProps === void 0 ? void 0 : _props$footerProps.controlProps),
-      hideDownloadTranscriptButton: true,
-      hideEmailTranscriptButton: true,
-      hideAudioNotificationButton: true
-    }
-  };
-  const footer = !((_props$controlProps = props.controlProps) !== null && _props$controlProps !== void 0 && _props$controlProps.hideFooter) && shouldShowFooter(state) ? decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.footer) || /*#__PURE__*/React.createElement(FooterStateful, {
+  const hideFooterDisplay = !((_props$controlProps = props.controlProps) !== null && _props$controlProps !== void 0 && _props$controlProps.hideFooter) && shouldShowFooter(state) ? false : true;
+  const footer = decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.footer) || /*#__PURE__*/React.createElement(FooterStateful, {
     footerProps: props.footerProps,
     downloadTranscriptProps: props.downloadTranscriptProps,
     audioNotificationProps: props.audioNotificationProps,
-    hideFooterDisplay: false
-  }) : decodeComponentString((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.footer) || /*#__PURE__*/React.createElement(FooterStateful, {
-    footerProps: footerPropsHidden,
-    downloadTranscriptProps: props.downloadTranscriptProps,
-    audioNotificationProps: props.audioNotificationProps,
-    hideFooterDisplay: true
+    hideFooterDisplay: hideFooterDisplay
   });
   return footer;
 };

package/lib/esm/components/livechatwidget/common/createInternetConnectionChangeHandler.js

@@ -2,6 +2,8 @@ import { Constants } from "../../../common/Constants";
 import { NotificationHandler } from "../../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler";
 import { NotificationScenarios } from "../../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
 import { defaultMiddlewareLocalizedTexts } from "../../webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts";
+import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
+import { LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
 
 const isInternetConnected = async () => {
   try {
@@ -18,8 +20,14 @@ export const createInternetConnectionChangeHandler = async () => {
     const connected = await isInternetConnected();
 
     if (!connected) {
+      TelemetryHelper.logActionEvent(LogLevel.WARN, {
+        Event: TelemetryEvent.NetworkDisconnected
+      });
       NotificationHandler.notifyError(NotificationScenarios.InternetConnection, defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_NO_INTERNET_CONNECTION);
     } else {
+      TelemetryHelper.logActionEvent(LogLevel.WARN, {
+        Event: TelemetryEvent.NetworkReconnected
+      });
       NotificationHandler.notifySuccess(NotificationScenarios.InternetConnection, defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_INTERNET_BACK_ONLINE);
     }
   }; // Checking connection status on online & offline events due to possible false positives

package/lib/esm/components/livechatwidget/common/defaultProps/dummyDefaultProps.js

@@ -870,7 +870,7 @@ export const dummyDefaultProps = {
         className: undefined
       },
       closeButtonProps: {
-        id: "oc-lcw-header-minimize-button",
+        id: "oc-lcw-header-close-button",
         type: "icon",
         iconName: "ChromeClose",
         ariaLabel: "Close",
@@ -1186,7 +1186,17 @@ export const dummyDefaultProps = {
       hideSubtitle: false,
       subtitleText: "Live chat support!",
       hideCloseButton: false,
-      closeButtonAriaLabel: "Close Button",
+      closeButtonProps: {
+        id: "oc-lcw-proactivechat-closebutton",
+        type: "icon",
+        iconName: "ChromeClose",
+        ariaLabel: "Close",
+        imageIconProps: undefined,
+        text: "Close",
+        onClick: undefined,
+        className: undefined,
+        hideButtonTitle: true
+      },
       isBodyContainerHorizantal: false,
       hideBodyTitle: false,
       bodyTitleText: "Hi! Have any questions? I am here to help.",
@@ -1655,6 +1665,9 @@ export const dummyDefaultProps = {
       },
       attachmentSizeStyles: {
         display: "none"
+      },
+      receivedMessageAnchorStyles: {
+        color: "white"
       }
     },
     localizedTexts: {

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

@@ -14,7 +14,7 @@ import { setPostChatContextAndLoadSurvey } from "./setPostChatContextAndLoadSurv
 import { updateSessionDataForTelemetry } from "./updateSessionDataForTelemetry";
 import { BroadcastService } from "@microsoft/omnichannel-chat-components";
 import { ActivityStreamHandler } from "./ActivityStreamHandler";
-import { handleAuthentication } from "./authHelper"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import { getAuthClientFunction, handleAuthentication } from "./authHelper"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 let optionalParams = {}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
@@ -93,6 +93,17 @@ const initStartChat = async (chatSDK, chatConfig, getAuthToken, dispatch, setAda
   try {
     var _newAdapter$activity$, _TelemetryTimers$Widg;
 
+    const authClientFunction = getAuthClientFunction(chatConfig);
+
+    if (getAuthToken && authClientFunction) {
+      // set auth token to chat sdk before start chat
+      const authSuccess = await handleAuthentication(chatSDK, chatConfig, getAuthToken);
+
+      if (!authSuccess) {
+        return;
+      }
+    }
+
     let isStartChatSuccessful = false; //Check if chat retrieved from cache
 
     if (persistedState || params !== null && params !== void 0 && params.liveChatContext) {
@@ -115,9 +126,7 @@ const initStartChat = async (chatSDK, chatConfig, getAuthToken, dispatch, setAda
       }); // Set custom context params
 
       setCustomContextParams(chatSDK);
-      optionalParams = Object.assign({}, params, optionalParams); // set auth token to chat sdk before start chat
-
-      await handleAuthentication(chatSDK, chatConfig, getAuthToken);
+      optionalParams = Object.assign({}, params, optionalParams);
       await chatSDK.startChat(optionalParams);
       isStartChatSuccessful = true;
     } catch (error) {

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

@@ -44,7 +44,8 @@ import useChatAdapterStore from "../../../hooks/useChatAdapterStore";
 import useChatContextStore from "../../../hooks/useChatContextStore";
 import useChatSDKStore from "../../../hooks/useChatSDKStore";
 import { ActivityStreamHandler } from "../common/ActivityStreamHandler";
-import { Constants } from "../../../common/Constants";
+import { registerBroadcastServiceForLocalStorage } from "../../../common/storage/default/defaultCacheManager";
+import { defaultClientDataStoreProvider } from "../../../common/storage/default/defaultClientDataStoreProvider";
 export const LiveChatWidgetStateful = props => {
   var _props$webChatContain, _props$styleProps, _chatSDK$omnichannelC, _props$controlProps, _props$controlProps2, _props$webChatContain3, _props$webChatContain4, _props$styleProps2, _props$controlProps14, _props$controlProps15, _props$componentOverr, _props$controlProps16, _props$componentOverr2, _props$controlProps17, _props$componentOverr3, _props$controlProps18, _props$componentOverr4, _props$controlProps19, _props$componentOverr5, _props$controlProps20, _props$componentOverr6, _props$controlProps21, _props$componentOverr7, _props$controlProps22, _props$controlProps23, _props$componentOverr8, _props$controlProps24, _props$componentOverr9, _props$controlProps25, _props$componentOverr10, _props$componentOverr11, _props$componentOverr12;
 
@@ -95,30 +96,39 @@ export const LiveChatWidgetStateful = props => {
   };
 
   useEffect(() => {
-    var _props$controlProps3, _props$controlProps4, _props$controlProps5, _props$controlProps7, _props$chatConfig, _props$chatConfig$Cha, _props$controlProps8, _props$reconnectChatP, _props$chatConfig2, _props$chatConfig2$Li;
+    var _props$controlProps4, _props$controlProps5, _props$controlProps6, _props$controlProps8, _props$chatConfig, _props$chatConfig$Cha, _props$controlProps9, _props$reconnectChatP, _props$chatConfig2, _props$chatConfig2$Li, _props$reconnectChatP4, _state$domainStates;
+
+    // Add default localStorage support for widget
+    if (props.contextDataStore === undefined) {
+      var _chatSDK$omnichannelC2, _chatSDK$omnichannelC3, _props$controlProps3;
+
+      registerBroadcastServiceForLocalStorage(chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC2 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC2 === void 0 ? void 0 : _chatSDK$omnichannelC2.orgId, chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC3 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC3 === void 0 ? void 0 : _chatSDK$omnichannelC3.widgetId, (props === null || props === void 0 ? void 0 : (_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.widgetInstanceId) ?? "");
+      DataStoreManager.clientDataStore = defaultClientDataStoreProvider();
+    } else {
+      DataStoreManager.clientDataStore = props.contextDataStore;
+    }
 
     registerTelemetryLoggers(props, dispatch);
     createInternetConnectionChangeHandler();
-    DataStoreManager.clientDataStore = props.contextDataStore ?? undefined;
     dispatch({
       type: LiveChatWidgetActionType.SET_WIDGET_ELEMENT_ID,
       payload: widgetElementId
     });
     dispatch({
       type: LiveChatWidgetActionType.SET_SKIP_CHAT_BUTTON_RENDERING,
-      payload: ((_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.skipChatButtonRendering) || false
+      payload: ((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : _props$controlProps4.skipChatButtonRendering) || false
     });
     dispatch({
       type: LiveChatWidgetActionType.SET_E2VV_ENABLED,
       payload: false
     });
 
-    if ((_props$controlProps4 = props.controlProps) !== null && _props$controlProps4 !== void 0 && _props$controlProps4.widgetInstanceId && !isNullOrEmptyString((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.widgetInstanceId)) {
-      var _props$controlProps6;
+    if ((_props$controlProps5 = props.controlProps) !== null && _props$controlProps5 !== void 0 && _props$controlProps5.widgetInstanceId && !isNullOrEmptyString((_props$controlProps6 = props.controlProps) === null || _props$controlProps6 === void 0 ? void 0 : _props$controlProps6.widgetInstanceId)) {
+      var _props$controlProps7;
 
       dispatch({
         type: LiveChatWidgetActionType.SET_WIDGET_INSTANCE_ID,
-        payload: (_props$controlProps6 = props.controlProps) === null || _props$controlProps6 === void 0 ? void 0 : _props$controlProps6.widgetInstanceId
+        payload: (_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.widgetInstanceId
       });
     }
 
@@ -129,35 +139,48 @@ export const LiveChatWidgetStateful = props => {
       });
     }); // Initialize global dir
 
-    const globalDir = ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.dir) ?? getLocaleDirection((_props$chatConfig = props.chatConfig) === null || _props$chatConfig === void 0 ? void 0 : (_props$chatConfig$Cha = _props$chatConfig.ChatWidgetLanguage) === null || _props$chatConfig$Cha === void 0 ? void 0 : _props$chatConfig$Cha.msdyn_localeid);
+    const globalDir = ((_props$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : _props$controlProps8.dir) ?? getLocaleDirection((_props$chatConfig = props.chatConfig) === null || _props$chatConfig === void 0 ? void 0 : (_props$chatConfig$Cha = _props$chatConfig.ChatWidgetLanguage) === null || _props$chatConfig$Cha === void 0 ? void 0 : _props$chatConfig$Cha.msdyn_localeid);
     dispatch({
       type: LiveChatWidgetActionType.SET_GLOBAL_DIR,
       payload: globalDir
     });
 
-    if (!((_props$controlProps8 = props.controlProps) !== null && _props$controlProps8 !== void 0 && _props$controlProps8.skipChatButtonRendering) && (_props$reconnectChatP = props.reconnectChatPaneProps) !== null && _props$reconnectChatP !== void 0 && _props$reconnectChatP.reconnectId) {
+    if (!((_props$controlProps9 = props.controlProps) !== null && _props$controlProps9 !== void 0 && _props$controlProps9.skipChatButtonRendering) && (_props$reconnectChatP = props.reconnectChatPaneProps) !== null && _props$reconnectChatP !== void 0 && _props$reconnectChatP.reconnectId) {
       var _props$reconnectChatP2, _props$reconnectChatP3;
 
       startUnauthenticatedReconnectChat(chatSDK, props.chatConfig, props.getAuthToken, dispatch, setAdapter, (_props$reconnectChatP2 = props.reconnectChatPaneProps) === null || _props$reconnectChatP2 === void 0 ? void 0 : _props$reconnectChatP2.isReconnectEnabled, (_props$reconnectChatP3 = props.reconnectChatPaneProps) === null || _props$reconnectChatP3 === void 0 ? void 0 : _props$reconnectChatP3.reconnectId, initStartChat);
       return;
-    } // Check if auth settings enabled, do not connect to existing chat from cache during refresh/re-load
+    } // Checks if reconnectId is present for auth chat. If it is present, then it shows reconnect chat pane,
+    // where customer can choose to continue previous conversation or start new conversation
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 
     const isAuthenticationSettingsEnabled = (_props$chatConfig2 = props.chatConfig) !== null && _props$chatConfig2 !== void 0 && (_props$chatConfig2$Li = _props$chatConfig2.LiveChatConfigAuthSettings) !== null && _props$chatConfig2$Li !== void 0 && _props$chatConfig2$Li.msdyn_javascriptclientfunction ? true : false;
 
-    if (isAuthenticationSettingsEnabled === false) {
-      var _state$domainStates;
+    if (!state.appStates.skipChatButtonRendering && state.appStates.conversationState === ConversationState.Active && isAuthenticationSettingsEnabled === true && (_props$reconnectChatP4 = props.reconnectChatPaneProps) !== null && _props$reconnectChatP4 !== void 0 && _props$reconnectChatP4.isReconnectEnabled) {
+      getReconnectIdForAuthenticatedChat(props, chatSDK).then(authReconnectId => {
+        if (authReconnectId && !state.appStates.reconnectId) {
+          dispatch({
+            type: LiveChatWidgetActionType.SET_RECONNECT_ID,
+            payload: authReconnectId
+          });
+          dispatch({
+            type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+            payload: ConversationState.ReconnectChat
+          });
+        }
+      });
+      return;
+    }
 
-      if (!isUndefinedOrEmpty((_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : _state$domainStates.liveChatContext) && state.appStates.conversationState === ConversationState.Active) {
-        var _state$domainStates2;
+    if (!state.appStates.skipChatButtonRendering && !isUndefinedOrEmpty((_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : _state$domainStates.liveChatContext) && state.appStates.conversationState === ConversationState.Active) {
+      var _state$domainStates2;
 
-        const optionalParams = {
-          liveChatContext: (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 ? void 0 : _state$domainStates2.liveChatContext
-        };
-        initStartChat(chatSDK, props.chatConfig, props.getAuthToken, dispatch, setAdapter, optionalParams);
-        return;
-      }
+      const optionalParams = {
+        liveChatContext: (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 ? void 0 : _state$domainStates2.liveChatContext
+      };
+      initStartChat(chatSDK, props.chatConfig, props.getAuthToken, dispatch, setAdapter, optionalParams);
+      return;
     } // All other case should show start chat button, skipChatButtonRendering will take care of it own
 
 
@@ -169,16 +192,16 @@ export const LiveChatWidgetStateful = props => {
 
   useEffect(() => {
     if (state.appStates.skipChatButtonRendering) {
-      var _props$reconnectChatP4;
+      var _props$reconnectChatP5;
 
       BroadcastService.postMessage({
         eventName: BroadcastEvent.ChatInitiated
       });
 
-      if ((_props$reconnectChatP4 = props.reconnectChatPaneProps) !== null && _props$reconnectChatP4 !== void 0 && _props$reconnectChatP4.reconnectId && !state.appStates.reconnectId) {
-        var _props$reconnectChatP5, _props$reconnectChatP6, _props$reconnectChatP7;
+      if ((_props$reconnectChatP5 = props.reconnectChatPaneProps) !== null && _props$reconnectChatP5 !== void 0 && _props$reconnectChatP5.reconnectId && !state.appStates.reconnectId) {
+        var _props$reconnectChatP6, _props$reconnectChatP7, _props$reconnectChatP8;
 
-        handleUnauthenticatedReconnectChat(chatSDK, props.chatConfig, props.getAuthToken, dispatch, setAdapter, (_props$reconnectChatP5 = props.reconnectChatPaneProps) === null || _props$reconnectChatP5 === void 0 ? void 0 : _props$reconnectChatP5.isReconnectEnabled, (_props$reconnectChatP6 = props.reconnectChatPaneProps) === null || _props$reconnectChatP6 === void 0 ? void 0 : _props$reconnectChatP6.reconnectId, initStartChat, (_props$reconnectChatP7 = props.reconnectChatPaneProps) === null || _props$reconnectChatP7 === void 0 ? void 0 : _props$reconnectChatP7.redirectInSameWindow);
+        handleUnauthenticatedReconnectChat(chatSDK, props.chatConfig, props.getAuthToken, dispatch, setAdapter, (_props$reconnectChatP6 = props.reconnectChatPaneProps) === null || _props$reconnectChatP6 === void 0 ? void 0 : _props$reconnectChatP6.isReconnectEnabled, (_props$reconnectChatP7 = props.reconnectChatPaneProps) === null || _props$reconnectChatP7 === void 0 ? void 0 : _props$reconnectChatP7.reconnectId, initStartChat, (_props$reconnectChatP8 = props.reconnectChatPaneProps) === null || _props$reconnectChatP8 === void 0 ? void 0 : _props$reconnectChatP8.redirectInSameWindow);
       } else {
         getReconnectIdForAuthenticatedChat(props, chatSDK).then(authReconnectId => {
           if (authReconnectId && !state.appStates.reconnectId) {
@@ -191,11 +214,23 @@ export const LiveChatWidgetStateful = props => {
               payload: ConversationState.ReconnectChat
             });
           } else {
+            var _state$domainStates3;
+
             const chatStartedSkippingChatButtonRendering = {
               eventName: BroadcastEvent.StartChatSkippingChatButtonRendering
             };
             BroadcastService.postMessage(chatStartedSkippingChatButtonRendering);
-            setPreChatAndInitiateChat(chatSDK, props.chatConfig, props.getAuthToken, dispatch, setAdapter);
+
+            if (!isUndefinedOrEmpty((_state$domainStates3 = state.domainStates) === null || _state$domainStates3 === void 0 ? void 0 : _state$domainStates3.liveChatContext) && state.appStates.conversationState === ConversationState.Active) {
+              var _state$domainStates4;
+
+              const optionalParams = {
+                liveChatContext: (_state$domainStates4 = state.domainStates) === null || _state$domainStates4 === void 0 ? void 0 : _state$domainStates4.liveChatContext
+              };
+              initStartChat(chatSDK, props.chatConfig, props.getAuthToken, dispatch, setAdapter, optionalParams);
+            } else {
+              setPreChatAndInitiateChat(chatSDK, props.chatConfig, props.getAuthToken, dispatch, setAdapter);
+            }
           }
         });
       }
@@ -203,7 +238,7 @@ export const LiveChatWidgetStateful = props => {
   }, [state.appStates.skipChatButtonRendering]); // useEffect for when skip chat button rendering
 
   useEffect(() => {
-    var _chatSDK$omnichannelC6, _chatSDK$omnichannelC7, _props$controlProps11;
+    var _chatSDK$omnichannelC8, _chatSDK$omnichannelC9, _props$controlProps12;
 
     // Add the custom context on receiving the SetCustomContext event
     BroadcastService.getMessageByEventName(BroadcastEvent.SetCustomContext).subscribe(msg => {
@@ -235,13 +270,13 @@ export const LiveChatWidgetStateful = props => {
     }); // Start chat from SDK Event
 
     BroadcastService.getMessageByEventName(BroadcastEvent.StartChat).subscribe(() => {
-      var _chatSDK$omnichannelC2, _chatSDK$omnichannelC3, _props$controlProps9;
+      var _chatSDK$omnichannelC4, _chatSDK$omnichannelC5, _props$controlProps10;
 
       TelemetryHelper.logActionEvent(LogLevel.INFO, {
         Event: TelemetryEvent.StartChatEventRecevied,
         Description: "Start chat event received."
       });
-      const persistedState = getStateFromCache(chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC2 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC2 === void 0 ? void 0 : _chatSDK$omnichannelC2.orgId, chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC3 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC3 === void 0 ? void 0 : _chatSDK$omnichannelC3.widgetId, (props === null || props === void 0 ? void 0 : (_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.widgetInstanceId) ?? ""); // Chat not found in cache
+      const persistedState = getStateFromCache(chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC4 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC4 === void 0 ? void 0 : _chatSDK$omnichannelC4.orgId, chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC5 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC5 === void 0 ? void 0 : _chatSDK$omnichannelC5.widgetId, (props === null || props === void 0 ? void 0 : (_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.widgetInstanceId) ?? ""); // Chat not found in cache
 
       if (persistedState === undefined) {
         BroadcastService.postMessage({
@@ -281,10 +316,10 @@ export const LiveChatWidgetStateful = props => {
 
     BroadcastService.getMessageByEventName(BroadcastEvent.InitiateEndChat).subscribe(async () => {
       if (state.appStates.skipChatButtonRendering !== true) {
-        var _chatSDK$omnichannelC4, _chatSDK$omnichannelC5, _props$controlProps10;
+        var _chatSDK$omnichannelC6, _chatSDK$omnichannelC7, _props$controlProps11;
 
         // This is to ensure to get latest state from cache in multitab
-        const persistedState = getStateFromCache(chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC4 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC4 === void 0 ? void 0 : _chatSDK$omnichannelC4.orgId, chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC5 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC5 === void 0 ? void 0 : _chatSDK$omnichannelC5.widgetId, (props === null || props === void 0 ? void 0 : (_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.widgetInstanceId) ?? "");
+        const persistedState = getStateFromCache(chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC6 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC6 === void 0 ? void 0 : _chatSDK$omnichannelC6.orgId, chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC7 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC7 === void 0 ? void 0 : _chatSDK$omnichannelC7.widgetId, (props === null || props === void 0 ? void 0 : (_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.widgetInstanceId) ?? "");
 
         if (persistedState && persistedState.appStates.conversationState === ConversationState.Active) {
           prepareEndChat(props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, state);
@@ -304,7 +339,7 @@ export const LiveChatWidgetStateful = props => {
       initiateEndChatOnBrowserUnload();
     }); // Listen to end chat event from other tabs
 
-    const endChatEventName = getWidgetEndChatEventName(chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC6 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC6 === void 0 ? void 0 : _chatSDK$omnichannelC6.orgId, chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC7 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC7 === void 0 ? void 0 : _chatSDK$omnichannelC7.widgetId, ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.widgetInstanceId) ?? "");
+    const endChatEventName = getWidgetEndChatEventName(chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC8 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC8 === void 0 ? void 0 : _chatSDK$omnichannelC8.orgId, chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC9 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC9 === void 0 ? void 0 : _chatSDK$omnichannelC9.widgetId, ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.widgetInstanceId) ?? "");
     BroadcastService.getMessageByEventName(endChatEventName).subscribe(async () => {
       endChat(props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, false, false, false);
       return;
@@ -385,23 +420,25 @@ export const LiveChatWidgetStateful = props => {
   }, [(_props$webChatContain3 = props.webChatContainerProps) === null || _props$webChatContain3 === void 0 ? void 0 : _props$webChatContain3.webChatStyles]); // Publish chat widget state
 
   useEffect(() => {
-    var _props$controlProps12, _props$chatSDK, _props$chatSDK$omnich, _props$chatSDK2, _props$chatSDK2$omnic, _props$controlProps13;
+    var _props$chatSDK, _props$chatSDK$omnich, _props$chatSDK2, _props$chatSDK2$omnic, _props$controlProps13;
 
     // Only activate these windows events when conversation state is active and chat widget is in popout mode
     // Ghost chat scenarios
-    if (state.appStates.conversationState === ConversationState.Active && ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.skipChatButtonRendering) === true) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      window.onbeforeunload = function () {
-        const prompt = Constants.BrowserUnloadConfirmationMessage;
-        return prompt;
-      }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-
-      window.onunload = function () {
-        initiateEndChatOnBrowserUnload();
-      };
-    }
 
+    /* COMMENTING THIS CODE FOR PARITY WITH OLD LCW
+    if (state.appStates.conversationState === ConversationState.Active &&
+        props.controlProps?.skipChatButtonRendering === true) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        
+        window.onbeforeunload = function () {
+            const prompt = Constants.BrowserUnloadConfirmationMessage;
+            return prompt;
+        };
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        window.onunload = function () {
+            initiateEndChatOnBrowserUnload();
+        };
+    }*/
     widgetStateEventName = getWidgetCacheId(props === null || props === void 0 ? void 0 : (_props$chatSDK = props.chatSDK) === null || _props$chatSDK === void 0 ? void 0 : (_props$chatSDK$omnich = _props$chatSDK.omnichannelConfig) === null || _props$chatSDK$omnich === void 0 ? void 0 : _props$chatSDK$omnich.orgId, props === null || props === void 0 ? void 0 : (_props$chatSDK2 = props.chatSDK) === null || _props$chatSDK2 === void 0 ? void 0 : (_props$chatSDK2$omnic = _props$chatSDK2.omnichannelConfig) === null || _props$chatSDK2$omnic === void 0 ? void 0 : _props$chatSDK2$omnic.widgetId, (props === null || props === void 0 ? void 0 : (_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.widgetInstanceId) ?? "");
     const chatWidgetStateChangeEvent = {
       eventName: widgetStateEventName,