@microsoft/omnichannel-chat-widget 0.1.0-main.1f10a2e → 0.1.0-main.3cfca4d

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

@@ -95,10 +95,10 @@ 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; }
 
-function _extends() { _extends = Object.assign || 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); }
+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); }
 
 const LiveChatWidgetStateful = props => {
-  var _props$webChatContain, _props$styleProps, _props$controlProps, _props$webChatContain3, _props$webChatContain4, _props$styleProps2, _props$controlProps5, _props$componentOverr, _props$controlProps6, _props$componentOverr2, _props$controlProps7, _props$componentOverr3, _props$controlProps8, _props$componentOverr4, _props$controlProps9, _props$componentOverr5, _props$controlProps10, _props$componentOverr6, _props$controlProps11, _props$componentOverr7, _props$controlProps12, _props$controlProps13, _props$componentOverr8, _props$controlProps14, _props$componentOverr9, _props$controlProps15, _props$componentOverr10, _props$componentOverr11, _props$componentOverr12;
+  var _props$webChatContain, _props$styleProps, _props$controlProps, _props$webChatContain3, _props$webChatContain4, _props$styleProps2, _props$controlProps5, _props$controlProps6, _props$componentOverr, _props$controlProps7, _props$componentOverr2, _props$controlProps8, _props$componentOverr3, _props$controlProps9, _props$componentOverr4, _props$controlProps10, _props$componentOverr5, _props$controlProps11, _props$componentOverr6, _props$controlProps12, _props$componentOverr7, _props$controlProps13, _props$controlProps14, _props$componentOverr8, _props$controlProps15, _props$componentOverr9, _props$controlProps16, _props$componentOverr10, _props$componentOverr11, _props$componentOverr12;
 
   const [state, dispatch] = (0, _useChatContextStore.default)(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
@@ -113,8 +113,7 @@ const LiveChatWidgetStateful = props => {
   const {
     Composer
   } = _botframeworkWebchat.Components;
-  const canStartProactiveChat = (0, _react2.useRef)(true);
-  const canEndChat = (0, _react2.useRef)(true); // Process general styles
+  const canStartProactiveChat = (0, _react2.useRef)(true); // Process general styles
 
   const generalStyles = {
     root: Object.assign({}, (0, _getGeneralStylesForButton.getGeneralStylesForButton)(state), (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyles)
@@ -125,9 +124,14 @@ const LiveChatWidgetStateful = props => {
   let widgetStateEventName = "";
 
   const initiateEndChatOnBrowserUnload = () => {
-    var _DataStoreManager$cli;
+    var _chatSDK$omnichannelC, _chatSDK$omnichannelC2, _DataStoreManager$cli;
 
-    const persistedState = getStateFromCache(); // End chat if the chat is still active and browser closed
+    _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.BrowserUnloadEventStarted,
+      Description: "Browser unload event received."
+    });
+
+    const persistedState = (0, _utils.getStateFromCache)(chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC === void 0 ? void 0 : _chatSDK$omnichannelC.orgId, chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC2 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC2 === void 0 ? void 0 : _chatSDK$omnichannelC2.widgetId); // End chat if the chat is still active and browser closed
 
     if (persistedState.appStates.conversationState === _ConversationState.ConversationState.Active) {
       //Browser close scenario/no room for PCS/so just end chat and notify agent immidiately
@@ -135,22 +139,15 @@ const LiveChatWidgetStateful = props => {
     } // Clean local storage
 
 
-    (_DataStoreManager$cli = _DataStoreManager.DataStoreManager.clientDataStore) === null || _DataStoreManager$cli === void 0 ? void 0 : _DataStoreManager$cli.removeData(widgetStateEventName, "localStorage");
-  }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+    (_DataStoreManager$cli = _DataStoreManager.DataStoreManager.clientDataStore) === null || _DataStoreManager$cli === void 0 ? void 0 : _DataStoreManager$cli.removeData(widgetStateEventName, "localStorage"); //Message for clearing window[popouTab]
 
-  const getStateFromCache = () => {
-    var _chatSDK$omnichannelC, _chatSDK$omnichannelC2, _DataStoreManager$cli2;
-
-    // Getting updated state from cache
-    const widgetStateEventName = (0, _utils.getWidgetCacheId)((chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC === void 0 ? void 0 : _chatSDK$omnichannelC.orgId) ?? "", (chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC2 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC2 === void 0 ? void 0 : _chatSDK$omnichannelC2.widgetId) ?? "");
-    const widgetStateFromCache = (_DataStoreManager$cli2 = _DataStoreManager.DataStoreManager.clientDataStore) === null || _DataStoreManager$cli2 === void 0 ? void 0 : _DataStoreManager$cli2.getData(widgetStateEventName, "localStorage");
-    const persistedState = widgetStateFromCache ? JSON.parse(widgetStateFromCache) : undefined;
-    return persistedState;
+    _omnichannelChatComponents.BroadcastService.postMessage({
+      eventName: _TelemetryConstants.BroadcastEvent.ClosePopoutWindow
+    });
   };
 
   (0, _react2.useEffect)(() => {
-    var _props$controlProps2, _props$controlProps3, _props$reconnectChatP, _props$controlProps4, _props$chatConfig, _props$chatConfig$Cha, _state$domainStates;
+    var _props$controlProps2, _props$controlProps3, _props$reconnectChatP, _props$controlProps4, _props$chatConfig, _props$chatConfig$Cha, _props$chatConfig2, _props$chatConfig2$Li;
 
     (0, _registerTelemetryLoggers.registerTelemetryLoggers)(props, dispatch);
     (0, _createInternetConnectionChangeHandler.createInternetConnectionChangeHandler)();
@@ -185,15 +182,28 @@ const LiveChatWidgetStateful = props => {
     dispatch({
       type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_GLOBAL_DIR,
       payload: globalDir
-    });
+    }); //Check if auth settings enabled, do not connect to existing chat from cache during refresh/re-load
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-    if ((_state$domainStates = state.domainStates) !== null && _state$domainStates !== void 0 && _state$domainStates.liveChatContext) {
-      var _state$domainStates2;
+    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;
 
-      const optionalParams = {
-        liveChatContext: (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 ? void 0 : _state$domainStates2.liveChatContext
-      };
-      (0, _startChat.initStartChat)(chatSDK, dispatch, setAdapter, optionalParams);
+    if (!isAuthenticationSettingsEnabled) {
+      var _state$domainStates;
+
+      if (!(0, _utils.isUndefinedOrEmpty)((_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : _state$domainStates.liveChatContext) && state.appStates.conversationState === _ConversationState.ConversationState.Active) {
+        var _state$domainStates2;
+
+        const optionalParams = {
+          liveChatContext: (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 ? void 0 : _state$domainStates2.liveChatContext
+        };
+        (0, _startChat.initStartChat)(chatSDK, dispatch, setAdapter, optionalParams);
+      } else {
+        // All other case should show start chat button, skipChatButtonRendering will take care of it own
+        dispatch({
+          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+          payload: _ConversationState.ConversationState.Closed
+        });
+      }
     }
   }, []); // useEffect for when skip chat button rendering
 
@@ -227,11 +237,7 @@ const LiveChatWidgetStateful = props => {
 
             _omnichannelChatComponents.BroadcastService.postMessage(chatStartedSkippingChatButtonRendering);
 
-            dispatch({
-              type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
-              payload: _ConversationState.ConversationState.Loading
-            });
-            (0, _startChat.initStartChat)(chatSDK, dispatch, setAdapter);
+            (0, _startChat.setPreChatAndInitiateChat)(chatSDK, dispatch, setAdapter);
           }
         });
       }
@@ -239,7 +245,7 @@ const LiveChatWidgetStateful = props => {
   }, [state.appStates.skipChatButtonRendering]); // useEffect for when skip chat button rendering
 
   (0, _react2.useEffect)(() => {
-    var _chatSDK$omnichannelC3, _chatSDK$omnichannelC4;
+    var _chatSDK$omnichannelC7, _chatSDK$omnichannelC8;
 
     // Add the custom context on receiving the SetCustomContext event
     _omnichannelChatComponents.BroadcastService.getMessageByEventName(_TelemetryConstants.BroadcastEvent.SetCustomContext).subscribe(msg => {
@@ -274,14 +280,17 @@ const LiveChatWidgetStateful = props => {
 
 
     _omnichannelChatComponents.BroadcastService.getMessageByEventName(_TelemetryConstants.BroadcastEvent.StartChat).subscribe(() => {
+      var _chatSDK$omnichannelC3, _chatSDK$omnichannelC4;
+
       _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
         Event: _TelemetryConstants.TelemetryEvent.StartChatEventRecevied,
         Description: "Start chat event received."
       });
 
-      const persistedState = getStateFromCache();
+      const persistedState = (0, _utils.getStateFromCache)(chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC3 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC3 === void 0 ? void 0 : _chatSDK$omnichannelC3.orgId, chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC4 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC4 === void 0 ? void 0 : _chatSDK$omnichannelC4.widgetId);
 
-      if (persistedState.appStates.conversationState === _ConversationState.ConversationState.Closed || persistedState.appStates.conversationState === _ConversationState.ConversationState.InActive || persistedState.appStates.conversationState === _ConversationState.ConversationState.Postchat) {
+      if (persistedState && (persistedState.appStates.conversationState === _ConversationState.ConversationState.Closed || persistedState.appStates.conversationState === _ConversationState.ConversationState.InActive || persistedState.appStates.conversationState === _ConversationState.ConversationState.Postchat)) {
+        // Embedded mode
         _omnichannelChatComponents.BroadcastService.postMessage({
           eventName: _TelemetryConstants.BroadcastEvent.ChatInitiated
         });
@@ -290,6 +299,7 @@ const LiveChatWidgetStateful = props => {
       } else {
         var _persistedState$domai, _persistedState$domai2, _persistedState$domai3, _persistedState$domai4;
 
+        // Minimize to Maximize
         dispatch({
           type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_MINIMIZED,
           payload: false
@@ -307,55 +317,42 @@ const LiveChatWidgetStateful = props => {
 
 
     _omnichannelChatComponents.BroadcastService.getMessageByEventName(_TelemetryConstants.BroadcastEvent.InitiateEndChat).subscribe(async () => {
-      if (canEndChat.current) {
-        (0, _endChat.prepareEndChat)(props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, state);
-      } else {
-        const skipEndChatSDK = true;
-        const skipCloseChat = false;
-        (0, _endChat.endChat)(props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, skipEndChatSDK, skipCloseChat);
+      if (state.appStates.skipChatButtonRendering !== true) {
+        var _chatSDK$omnichannelC5, _chatSDK$omnichannelC6;
+
+        // This is to ensure to get latest state from cache in multitab
+        const persistedState = (0, _utils.getStateFromCache)(chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC5 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC5 === void 0 ? void 0 : _chatSDK$omnichannelC5.orgId, chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC6 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC6 === void 0 ? void 0 : _chatSDK$omnichannelC6.widgetId);
+
+        if (persistedState && persistedState.appStates.conversationState === _ConversationState.ConversationState.Active) {
+          (0, _endChat.prepareEndChat)(props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, state);
+        } else {
+          const skipEndChatSDK = true;
+          const skipCloseChat = false;
+          (0, _endChat.endChat)(props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, skipEndChatSDK, skipCloseChat);
+        }
       }
 
       _omnichannelChatComponents.BroadcastService.postMessage({
         eventName: _TelemetryConstants.BroadcastEvent.CloseChat
       });
-    });
+    }); // End chat on browser unload
+
 
     _omnichannelChatComponents.BroadcastService.getMessageByEventName(_TelemetryConstants.BroadcastEvent.InitiateEndChatOnBrowserUnload).subscribe(() => {
       initiateEndChatOnBrowserUnload();
-    }); // reset proactive chat params
-
-
-    _omnichannelChatComponents.BroadcastService.getMessageByEventName(_TelemetryConstants.BroadcastEvent.ResetProactiveChatParams).subscribe(async () => {
-      dispatch({
-        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_PROACTIVE_CHAT_PARAMS,
-        payload: {
-          proactiveChatBodyTitle: "",
-          proactiveChatEnablePrechat: false,
-          proactiveChatInNewWindow: false
-        }
-      });
     }); // Listen to end chat event from other tabs
 
 
-    const endChatEventName = (0, _utils.getWidgetEndChatEventName)(chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC3 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC3 === void 0 ? void 0 : _chatSDK$omnichannelC3.orgId, chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC4 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC4 === void 0 ? void 0 : _chatSDK$omnichannelC4.widgetId);
+    const endChatEventName = (0, _utils.getWidgetEndChatEventName)(chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC7 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC7 === void 0 ? void 0 : _chatSDK$omnichannelC7.orgId, chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC8 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC8 === void 0 ? void 0 : _chatSDK$omnichannelC8.widgetId);
 
     _omnichannelChatComponents.BroadcastService.getMessageByEventName(endChatEventName).subscribe(async () => {
       (0, _endChat.endChat)(props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, false, false, false);
-    }); // Close popout window
-
-
-    window.addEventListener("beforeunload", () => {
-      _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
-        Event: _TelemetryConstants.TelemetryEvent.WindowClosed,
-        Description: "Closed window."
-      });
+    }); // When conversation ended by agent
 
-      (0, _disposeTelemetryLoggers.disposeTelemetryLoggers)();
-    });
 
     if (state.appStates.conversationEndedByAgent) {
       (0, _endChat.endChat)(props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter);
-    } //Listen to WidgetSize
+    } //Listen to WidgetSize, used for minimize to maximize
 
 
     _omnichannelChatComponents.BroadcastService.getMessageByEventName("WidgetSize").subscribe(msg => {
@@ -364,25 +361,24 @@ const LiveChatWidgetStateful = props => {
         payload: msg === null || msg === void 0 ? void 0 : msg.payload
       });
     });
+
+    return () => {
+      (0, _disposeTelemetryLoggers.disposeTelemetryLoggers)();
+    };
   }, []);
   (0, _react2.useEffect)(() => {
-    canEndChat.current = state.appStates.conversationState === _ConversationState.ConversationState.Active;
-
-    if (state.appStates.conversationState === _ConversationState.ConversationState.Active) {
-      chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.onNewMessage(() => {
-        _omnichannelChatComponents.BroadcastService.postMessage({
-          eventName: _TelemetryConstants.BroadcastEvent.NewMessageNotification
-        });
-      });
-    } // Track the message count
-
-
+    // On new message
     if (state.appStates.conversationState === _ConversationState.ConversationState.Active) {
       chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.onNewMessage(() => {
+        // Track the message count
         currentMessageCountRef.current++;
         dispatch({
           type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_UNREAD_MESSAGE_COUNT,
           payload: currentMessageCountRef.current + 1
+        }); // New message notification
+
+        _omnichannelChatComponents.BroadcastService.postMessage({
+          eventName: _TelemetryConstants.BroadcastEvent.NewMessageNotification
         });
       });
     }
@@ -407,7 +403,7 @@ const LiveChatWidgetStateful = props => {
   }, [state.appStates.isMinimized]); // Broadcast the UnreadMessageCount state on any change.
 
   (0, _react2.useEffect)(() => {
-    if (state.appStates.isMinimized && state.appStates.unreadMessageCount > 0) {
+    if (state.appStates.isMinimized === true && state.appStates.unreadMessageCount > 0) {
       const customEvent = {
         elementType: _omnichannelChatComponents.ElementType.Custom,
         eventName: _TelemetryConstants.BroadcastEvent.UnreadMessageCount,
@@ -460,29 +456,29 @@ const LiveChatWidgetStateful = props => {
     id: widgetElementId,
     styles: generalStyles,
     className: (_props$styleProps2 = props.styleProps) === null || _props$styleProps2 === void 0 ? void 0 : _props$styleProps2.className
-  }, !((_props$controlProps5 = props.controlProps) !== null && _props$controlProps5 !== void 0 && _props$controlProps5.hideChatButton) && (0, _componentController.shouldShowChatButton)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.chatButton) || /*#__PURE__*/_react2.default.createElement(_ChatButtonStateful.default, {
+  }, !((_props$controlProps5 = props.controlProps) !== null && _props$controlProps5 !== void 0 && _props$controlProps5.hideChatButton) && !((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.skipChatButtonRendering) && (0, _componentController.shouldShowChatButton)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.chatButton) || /*#__PURE__*/_react2.default.createElement(_ChatButtonStateful.default, {
     buttonProps: props.chatButtonProps,
     outOfOfficeButtonProps: props.outOfOfficeChatButtonProps,
     startChat: prepareStartChatRelay
-  })), !((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.hideProactiveChatPane) && (0, _componentController.shouldShowProactiveChatPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.proactiveChatPane) || /*#__PURE__*/_react2.default.createElement(_ProactiveChatPaneStateful.default, {
+  })), !((_props$controlProps7 = props.controlProps) !== null && _props$controlProps7 !== void 0 && _props$controlProps7.hideProactiveChatPane) && (0, _componentController.shouldShowProactiveChatPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.proactiveChatPane) || /*#__PURE__*/_react2.default.createElement(_ProactiveChatPaneStateful.default, {
     proactiveChatProps: props.proactiveChatPaneProps,
     startChat: prepareStartChatRelay
-  })), !((_props$controlProps7 = props.controlProps) !== null && _props$controlProps7 !== void 0 && _props$controlProps7.hideHeader) && (0, _componentController.shouldShowHeader)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.header) || /*#__PURE__*/_react2.default.createElement(_HeaderStateful.default, {
+  })), !((_props$controlProps8 = props.controlProps) !== null && _props$controlProps8 !== void 0 && _props$controlProps8.hideHeader) && (0, _componentController.shouldShowHeader)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.header) || /*#__PURE__*/_react2.default.createElement(_HeaderStateful.default, {
     headerProps: props.headerProps,
     outOfOfficeHeaderProps: props.outOfOfficeHeaderProps,
     endChat: endChatRelay
-  })), !((_props$controlProps8 = props.controlProps) !== null && _props$controlProps8 !== void 0 && _props$controlProps8.hideLoadingPane) && (0, _componentController.shouldShowLoadingPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.loadingPane) || /*#__PURE__*/_react2.default.createElement(_LoadingPaneStateful.default, props.loadingPaneProps)), !((_props$controlProps9 = props.controlProps) !== null && _props$controlProps9 !== void 0 && _props$controlProps9.hideOutOfOfficeHoursPane) && (0, _componentController.shouldShowOutOfOfficeHoursPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr5 = props.componentOverrides) === null || _props$componentOverr5 === void 0 ? void 0 : _props$componentOverr5.outOfOfficeHoursPane) || /*#__PURE__*/_react2.default.createElement(_OOOHPaneStateful.default, props.outOfOfficeHoursPaneProps)), !((_props$controlProps10 = props.controlProps) !== null && _props$controlProps10 !== void 0 && _props$controlProps10.hideReconnectChatPane) && (0, _componentController.shouldShowReconnectChatPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr6 = props.componentOverrides) === null || _props$componentOverr6 === void 0 ? void 0 : _props$componentOverr6.reconnectChatPane) || /*#__PURE__*/_react2.default.createElement(_ReconnectChatPaneStateful.default, {
+  })), !((_props$controlProps9 = props.controlProps) !== null && _props$controlProps9 !== void 0 && _props$controlProps9.hideLoadingPane) && (0, _componentController.shouldShowLoadingPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.loadingPane) || /*#__PURE__*/_react2.default.createElement(_LoadingPaneStateful.default, props.loadingPaneProps)), !((_props$controlProps10 = props.controlProps) !== null && _props$controlProps10 !== void 0 && _props$controlProps10.hideOutOfOfficeHoursPane) && (0, _componentController.shouldShowOutOfOfficeHoursPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr5 = props.componentOverrides) === null || _props$componentOverr5 === void 0 ? void 0 : _props$componentOverr5.outOfOfficeHoursPane) || /*#__PURE__*/_react2.default.createElement(_OOOHPaneStateful.default, props.outOfOfficeHoursPaneProps)), !((_props$controlProps11 = props.controlProps) !== null && _props$controlProps11 !== void 0 && _props$controlProps11.hideReconnectChatPane) && (0, _componentController.shouldShowReconnectChatPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr6 = props.componentOverrides) === null || _props$componentOverr6 === void 0 ? void 0 : _props$componentOverr6.reconnectChatPane) || /*#__PURE__*/_react2.default.createElement(_ReconnectChatPaneStateful.default, {
     reconnectChatProps: props.reconnectChatPaneProps,
     initStartChat: initStartChatRelay
-  })), !((_props$controlProps11 = props.controlProps) !== null && _props$controlProps11 !== void 0 && _props$controlProps11.hidePreChatSurveyPane) && (0, _componentController.shouldShowPreChatSurveyPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr7 = props.componentOverrides) === null || _props$componentOverr7 === void 0 ? void 0 : _props$componentOverr7.preChatSurveyPane) || /*#__PURE__*/_react2.default.createElement(_PreChatSurveyPaneStateful.default, {
+  })), !((_props$controlProps12 = props.controlProps) !== null && _props$controlProps12 !== void 0 && _props$controlProps12.hidePreChatSurveyPane) && (0, _componentController.shouldShowPreChatSurveyPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr7 = props.componentOverrides) === null || _props$componentOverr7 === void 0 ? void 0 : _props$componentOverr7.preChatSurveyPane) || /*#__PURE__*/_react2.default.createElement(_PreChatSurveyPaneStateful.default, {
     surveyProps: props.preChatSurveyPaneProps,
     initStartChat: initStartChatRelay
-  })), !((_props$controlProps12 = props.controlProps) !== null && _props$controlProps12 !== void 0 && _props$controlProps12.hideCallingContainer) && (0, _componentController.shouldShowCallingContainer)(state) && /*#__PURE__*/_react2.default.createElement(_CallingContainerStateful.default, _extends({
+  })), !((_props$controlProps13 = props.controlProps) !== null && _props$controlProps13 !== void 0 && _props$controlProps13.hideCallingContainer) && (0, _componentController.shouldShowCallingContainer)(state) && /*#__PURE__*/_react2.default.createElement(_CallingContainerStateful.default, _extends({
     voiceVideoCallingSdk: voiceVideoCallingSDK
-  }, props.callingContainerProps)), !((_props$controlProps13 = props.controlProps) !== null && _props$controlProps13 !== void 0 && _props$controlProps13.hideWebChatContainer) && (0, _componentController.shouldShowWebChatContainer)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr8 = props.componentOverrides) === null || _props$componentOverr8 === void 0 ? void 0 : _props$componentOverr8.webChatContainer) || /*#__PURE__*/_react2.default.createElement(_WebChatContainerStateful.default, props.webChatContainerProps)), !((_props$controlProps14 = props.controlProps) !== null && _props$controlProps14 !== void 0 && _props$controlProps14.hideConfirmationPane) && (0, _componentController.shouldShowConfirmationPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr9 = props.componentOverrides) === null || _props$componentOverr9 === void 0 ? void 0 : _props$componentOverr9.confirmationPane) || /*#__PURE__*/_react2.default.createElement(_ConfirmationPaneStateful.default, _extends({}, confirmationPaneProps, {
+  }, props.callingContainerProps)), !((_props$controlProps14 = props.controlProps) !== null && _props$controlProps14 !== void 0 && _props$controlProps14.hideWebChatContainer) && (0, _componentController.shouldShowWebChatContainer)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr8 = props.componentOverrides) === null || _props$componentOverr8 === void 0 ? void 0 : _props$componentOverr8.webChatContainer) || /*#__PURE__*/_react2.default.createElement(_WebChatContainerStateful.default, props.webChatContainerProps)), !((_props$controlProps15 = props.controlProps) !== null && _props$controlProps15 !== void 0 && _props$controlProps15.hideConfirmationPane) && (0, _componentController.shouldShowConfirmationPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr9 = props.componentOverrides) === null || _props$componentOverr9 === void 0 ? void 0 : _props$componentOverr9.confirmationPane) || /*#__PURE__*/_react2.default.createElement(_ConfirmationPaneStateful.default, _extends({}, confirmationPaneProps, {
     setPostChatContext: setPostChatContextRelay,
     prepareEndChat: prepareEndChatRelay
-  }))), !((_props$controlProps15 = props.controlProps) !== null && _props$controlProps15 !== void 0 && _props$controlProps15.hidePostChatLoadingPane) && (0, _componentController.shouldShowPostChatLoadingPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr10 = props.componentOverrides) === null || _props$componentOverr10 === void 0 ? void 0 : _props$componentOverr10.postChatLoadingPane) || /*#__PURE__*/_react2.default.createElement(_PostChatLoadingPaneStateful.default, props.postChatLoadingPaneProps)), (0, _componentController.shouldShowPostChatSurveyPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr11 = props.componentOverrides) === null || _props$componentOverr11 === void 0 ? void 0 : _props$componentOverr11.postChatSurveyPane) || /*#__PURE__*/_react2.default.createElement(_PostChatSurveyPaneStateful.default, _extends({}, props.postChatSurveyPaneProps, props.chatSDK))), (0, _createFooter.createFooter)(props, state), (0, _componentController.shouldShowEmailTranscriptPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr12 = props.componentOverrides) === null || _props$componentOverr12 === void 0 ? void 0 : _props$componentOverr12.emailTranscriptPane) || /*#__PURE__*/_react2.default.createElement(_EmailTranscriptPaneStateful.default, props.emailTranscriptPane))));
+  }))), !((_props$controlProps16 = props.controlProps) !== null && _props$controlProps16 !== void 0 && _props$controlProps16.hidePostChatLoadingPane) && (0, _componentController.shouldShowPostChatLoadingPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr10 = props.componentOverrides) === null || _props$componentOverr10 === void 0 ? void 0 : _props$componentOverr10.postChatLoadingPane) || /*#__PURE__*/_react2.default.createElement(_PostChatLoadingPaneStateful.default, props.postChatLoadingPaneProps)), (0, _componentController.shouldShowPostChatSurveyPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr11 = props.componentOverrides) === null || _props$componentOverr11 === void 0 ? void 0 : _props$componentOverr11.postChatSurveyPane) || /*#__PURE__*/_react2.default.createElement(_PostChatSurveyPaneStateful.default, _extends({}, props.postChatSurveyPaneProps, props.chatSDK))), (0, _createFooter.createFooter)(props, state), (0, _componentController.shouldShowEmailTranscriptPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr12 = props.componentOverrides) === null || _props$componentOverr12 === void 0 ? void 0 : _props$componentOverr12.emailTranscriptPane) || /*#__PURE__*/_react2.default.createElement(_EmailTranscriptPaneStateful.default, props.emailTranscriptPane))));
 };
 
 exports.LiveChatWidgetStateful = LiveChatWidgetStateful;

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

@@ -15,8 +15,6 @@ var _utils = require("../../common/utils");
 
 var _ConversationState = require("../../contexts/common/ConversationState");
 
-var _DataStoreManager = require("../../common/contextDataStore/DataStoreManager");
-
 var _LiveChatWidgetActionType = require("../../contexts/common/LiveChatWidgetActionType");
 
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
@@ -93,14 +91,12 @@ const PreChatSurveyPaneStateful = props => {
       });
 
       try {
-        var _state$domainStates, _state$domainStates$t, _state$domainStates$t2, _DataStoreManager$cli, _persistedState$domai;
+        var _state$domainStates, _state$domainStates$t, _state$domainStates$t2, _persistedState$domai, _persistedState$appSt;
 
-        const widgetStateCacheId = (0, _utils.getWidgetCacheId)(((_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : (_state$domainStates$t = _state$domainStates.telemetryInternalData) === null || _state$domainStates$t === void 0 ? void 0 : _state$domainStates$t.orgId) ?? "", ((_state$domainStates$t2 = state.domainStates.telemetryInternalData) === null || _state$domainStates$t2 === void 0 ? void 0 : _state$domainStates$t2.widgetId) ?? "");
-        const widgetStateFromCache = (_DataStoreManager$cli = _DataStoreManager.DataStoreManager.clientDataStore) === null || _DataStoreManager$cli === void 0 ? void 0 : _DataStoreManager$cli.getData(widgetStateCacheId, "localStorage");
-        const persistedState = widgetStateFromCache ? JSON.parse(widgetStateFromCache) : undefined;
-        let optionalParams = {};
+        const persistedState = (0, _utils.getStateFromCache)(((_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : (_state$domainStates$t = _state$domainStates.telemetryInternalData) === null || _state$domainStates$t === void 0 ? void 0 : _state$domainStates$t.orgId) ?? "", ((_state$domainStates$t2 = state.domainStates.telemetryInternalData) === null || _state$domainStates$t2 === void 0 ? void 0 : _state$domainStates$t2.widgetId) ?? "");
+        let optionalParams = {}; //Connect to Active chats and chat is not popout
 
-        if (persistedState !== null && persistedState !== void 0 && (_persistedState$domai = persistedState.domainStates) !== null && _persistedState$domai !== void 0 && _persistedState$domai.liveChatContext) {
+        if (persistedState && !(0, _utils.isUndefinedOrEmpty)(persistedState === null || persistedState === void 0 ? void 0 : (_persistedState$domai = persistedState.domainStates) === null || _persistedState$domai === void 0 ? void 0 : _persistedState$domai.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 && !state.appStates.skipChatButtonRendering) {
           var _persistedState$domai2;
 
           optionalParams = {

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

@@ -133,7 +133,7 @@ const ProactiveChatPaneStateful = props => {
       });
     },
     ...(proactiveChatProps === null || proactiveChatProps === void 0 ? void 0 : proactiveChatProps.controlProps),
-    bodyTitleText: 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)
+    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"));

package/lib/cjs/contexts/common/ConversationState.js

@@ -15,6 +15,7 @@ exports.ConversationState = ConversationState;
   ConversationState[ConversationState["ProactiveChat"] = 4] = "ProactiveChat";
   ConversationState[ConversationState["Active"] = 5] = "Active";
   ConversationState[ConversationState["InActive"] = 6] = "InActive";
-  ConversationState[ConversationState["Postchat"] = 7] = "Postchat";
-  ConversationState[ConversationState["Closed"] = 8] = "Closed";
+  ConversationState[ConversationState["PostchatLoading"] = 7] = "PostchatLoading";
+  ConversationState[ConversationState["Postchat"] = 8] = "Postchat";
+  ConversationState[ConversationState["Closed"] = 9] = "Closed";
 })(ConversationState || (exports.ConversationState = ConversationState = {}));

package/lib/cjs/contexts/common/LiveChatWidgetContextInitialState.js

@@ -36,7 +36,6 @@ const getLiveChatWidgetContextInitialState = props => {
       isMinimized: false,
       previousElementOnFocusBeforeModalOpen: null,
       outsideOperatingHours: false,
-      shouldShowPostChat: false,
       preChatResponseEmail: "",
       isAudioMuted: null,
       newMessage: false,

package/lib/cjs/controller/componentController.js

@@ -8,7 +8,7 @@ exports.shouldShowWebChatContainer = exports.shouldShowReconnectChatPane = expor
 var _ConversationState = require("../contexts/common/ConversationState");
 
 const shouldShowChatButton = state => {
-  return state.appStates.isMinimized || state.appStates.conversationState === _ConversationState.ConversationState.Closed;
+  return (state.appStates.isMinimized || state.appStates.conversationState === _ConversationState.ConversationState.Closed) && state.appStates.skipChatButtonRendering == false; // Do not show chat button in case of popout
 };
 
 exports.shouldShowChatButton = shouldShowChatButton;
@@ -44,7 +44,7 @@ const shouldShowWebChatContainer = state => {
 exports.shouldShowWebChatContainer = shouldShowWebChatContainer;
 
 const shouldShowLoadingPane = state => {
-  return !state.appStates.isMinimized && !state.appStates.shouldShowPostChat && state.appStates.conversationState === _ConversationState.ConversationState.Loading;
+  return !state.appStates.isMinimized && state.appStates.conversationState === _ConversationState.ConversationState.Loading;
 };
 
 exports.shouldShowLoadingPane = shouldShowLoadingPane;
@@ -56,7 +56,7 @@ const shouldShowReconnectChatPane = state => {
 exports.shouldShowReconnectChatPane = shouldShowReconnectChatPane;
 
 const shouldShowPostChatLoadingPane = state => {
-  return !state.appStates.isMinimized && state.appStates.shouldShowPostChat && state.appStates.conversationState === _ConversationState.ConversationState.Loading;
+  return !state.appStates.isMinimized && state.appStates.conversationState === _ConversationState.ConversationState.PostchatLoading;
 };
 
 exports.shouldShowPostChatLoadingPane = shouldShowPostChatLoadingPane;

package/lib/esm/common/Constants.js

@@ -158,6 +158,8 @@ _defineProperty(Constants, "internetConnectionTestUrlText", "Omnichannel Connect
 
 _defineProperty(Constants, "ChatWidgetStateChangedPrefix", "ChatWidgetStateChanged");
 
+_defineProperty(Constants, "PostChatLoadingDurationInMs", 2000);
+
 export const Regex = (_class = class 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);
 export class HtmlIdNames {}
 

package/lib/esm/common/telemetry/TelemetryConstants.js

@@ -48,6 +48,7 @@ export let BroadcastEvent; // Events being logged
   BroadcastEvent["ChatInitiated"] = "ChatInitiated";
   BroadcastEvent["CloseChat"] = "CloseChat";
   BroadcastEvent["InitiateEndChatOnBrowserUnload"] = "InitiateEndChatOnBrowserUnload";
+  BroadcastEvent["ClosePopoutWindow"] = "ClosePopoutWindow";
 })(BroadcastEvent || (BroadcastEvent = {}));
 
 export let TelemetryEvent;
@@ -128,6 +129,8 @@ export let TelemetryEvent;
   TelemetryEvent["AudioToggleButtonClicked"] = "AudioToggleButtonClicked";
   TelemetryEvent["SuppressBotMagicCodeSucceeded"] = "SuppressBotMagicCodeSucceeded";
   TelemetryEvent["SuppressBotMagicCodeFailed"] = "SuppressBotMagicCodeFailed";
+  TelemetryEvent["GetConversationDetailsException"] = "GetConversationDetailsException";
+  TelemetryEvent["BrowserUnloadEventStarted"] = "BrowserUnloadEventStarted";
   TelemetryEvent["ProcessingHTMLTextMiddlewareFailed"] = "ProcessingHTMLTextMiddlewareFailed";
   TelemetryEvent["ProcessingSanitizationMiddlewareFailed"] = "ProcessingSanitizationMiddlewareFailed";
   TelemetryEvent["FormatTagsMiddlewareJSONStringifyFailed"] = "FormatTagsMiddlewareJSONStringifyFailed";
@@ -199,6 +202,7 @@ export class TelemetryConstants {
       case TelemetryEvent.MessageSent:
       case TelemetryEvent.MessageReceived:
       case TelemetryEvent.CustomContextReceived:
+      case TelemetryEvent.BrowserUnloadEventStarted:
         return ScenarioType.ACTIONS;
 
       case TelemetryEvent.StartChatSDKCall:

package/lib/esm/common/utils.js

@@ -1,4 +1,5 @@
 import { AriaTelemetryConstants, Constants, LocaleConstants } from "./Constants";
+import { DataStoreManager } from "./contextDataStore/DataStoreManager";
 import { KeyCodes } from "./KeyCodes";
 import { BroadcastEvent } from "./telemetry/TelemetryConstants";
 
@@ -294,4 +295,39 @@ export const getWidgetCacheId = (orgId, widgetId) => {
 };
 export const getWidgetEndChatEventName = (orgId, widgetId) => {
   return `${BroadcastEvent.ChatEnded}_${orgId}_${widgetId}`;
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+export const getStateFromCache = (orgId, widgetId) => {
+  // Getting updated state from cache
+  try {
+    if (DataStoreManager.clientDataStore) {
+      var _DataStoreManager$cli;
+
+      const widgetStateEventName = getWidgetCacheId(orgId, widgetId);
+      const widgetStateFromCache = (_DataStoreManager$cli = DataStoreManager.clientDataStore) === null || _DataStoreManager$cli === void 0 ? void 0 : _DataStoreManager$cli.getData(widgetStateEventName, "localStorage");
+      const persistedState = widgetStateFromCache ? JSON.parse(widgetStateFromCache) : undefined;
+      return persistedState;
+    } else {
+      return null;
+    }
+  } catch (error) {
+    console.log(error);
+    return null;
+  }
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+export const isUndefinedOrEmpty = object => {
+  if (object) {
+    if (Object.keys(object).length === 0) {
+      return true;
+    }
+
+    return false;
+  } else {
+    return true;
+  }
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+export const addDelayInMs = ms => {
+  return new Promise(resolve => setTimeout(resolve, ms));
 };

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

@@ -57,6 +57,10 @@ export const ChatButtonStateful = props => {
     titleText: "We're Offline",
     subtitleText: "No agents available",
     onClick: async () => {
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.LCWChatButtonClicked
+      });
+
       if (state.appStates.isMinimized) {
         dispatch({
           type: LiveChatWidgetActionType.SET_MINIMIZED,

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

@@ -17,7 +17,6 @@ export const ConfirmationPaneStateful = props => {
   const {
     prepareEndChat
   } = props; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
   const [adapter] = useChatAdapterStore();
   const controlProps = {