@microsoft/omnichannel-chat-widget 1.5.1-main.e2be12d → 1.6.0

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

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import { BroadcastEvent, LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
 import { BroadcastService, BroadcastServiceInitialize, decodeComponentString } from "@microsoft/omnichannel-chat-components";
 import { Components } from "botframework-webchat";
-import { ConfirmationState, Constants, ConversationEndEntity, E2VVOptions, LiveWorkItemState, StorageType } from "../../../common/Constants";
+import { ConfirmationState, Constants, ConversationEndEntity, E2VVOptions, LiveWorkItemState, PrepareEndChatDescriptionConstants, StorageType } from "../../../common/Constants";
 import { Stack } from "@fluentui/react";
 import React, { useEffect, useRef, useState } from "react";
 import { checkIfConversationStillValid, initStartChat, prepareStartChat, setPreChatAndInitiateChat } from "../common/startChat";
@@ -10,7 +10,7 @@ import { createTimer, getBroadcastChannelName, getConversationDetailsCall, getLo
 import { defaultClientDataStoreProvider, isCookieAllowed } from "../../../common/storage/default/defaultClientDataStoreProvider";
 import { chatSDKStateCleanUp, endChat, endChatStateCleanUp, prepareEndChat } from "../common/endChat";
 import { handleChatReconnect, isPersistentEnabled, isReconnectEnabled } from "../common/reconnectChatHelper";
-import { shouldShowCallingContainer, shouldShowChatButton, shouldShowConfirmationPane, shouldShowEmailTranscriptPane, shouldShowHeader, shouldShowLoadingPane, shouldShowOutOfOfficeHoursPane, shouldShowPostChatLoadingPane, shouldShowPostChatSurveyPane, shouldShowPreChatSurveyPane, shouldShowProactiveChatPane, shouldShowReconnectChatPane, shouldShowWebChatContainer } from "../../../controller/componentController";
+import { shouldShowCallingContainer, shouldShowChatButton, shouldShowConfirmationPane, shouldShowEmailTranscriptPane, shouldShowStartChatErrorPane, shouldShowHeader, shouldShowLoadingPane, shouldShowOutOfOfficeHoursPane, shouldShowPostChatLoadingPane, shouldShowPostChatSurveyPane, shouldShowPreChatSurveyPane, shouldShowProactiveChatPane, shouldShowReconnectChatPane, shouldShowWebChatContainer } from "../../../controller/componentController";
 import { ActivityStreamHandler } from "../common/ActivityStreamHandler";
 import CallingContainerStateful from "../../callingcontainerstateful/CallingContainerStateful";
 import ChatButtonStateful from "../../chatbuttonstateful/ChatButtonStateful";
@@ -51,8 +51,10 @@ import useChatAdapterStore from "../../../hooks/useChatAdapterStore";
 import useChatContextStore from "../../../hooks/useChatContextStore";
 import useChatSDKStore from "../../../hooks/useChatSDKStore";
 import { defaultAdaptiveCardStyles } from "../../webchatcontainerstateful/common/defaultStyles/defaultAdaptiveCardStyles";
+import StartChatErrorPaneStateful from "../../startchaterrorpanestateful/StartChatErrorPaneStateful";
+import { StartChatFailureType } from "../../../contexts/common/StartChatFailureType";
 export const LiveChatWidgetStateful = props => {
-  var _props$webChatContain, _props$styleProps, _props$controlProps, _props$controlProps3, _state$appStates7, _props$webChatContain5, _state$appStates14, _props$webChatContain6, _props$controlProps12, _props$draggableChatW, _props$draggableChatW2, _props$draggableChatW3, _props$draggableChatW4, _props$draggableChatW5, _props$webChatContain7, _props$webChatContain8, _props$webChatContain9, _props$webChatContain10, _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$contro10, _livechatProps$compon8, _livechatProps$contro11, _livechatProps$compon9, _livechatProps$contro12, _livechatProps$compon10, _livechatProps$compon11, _livechatProps$compon12;
+  var _props$webChatContain, _props$styleProps, _props$controlProps, _props$controlProps3, _state$appStates7, _props$webChatContain5, _state$appStates14, _props$webChatContain6, _props$controlProps12, _props$draggableChatW, _props$draggableChatW2, _props$draggableChatW3, _props$draggableChatW4, _props$draggableChatW5, _props$webChatContain7, _props$webChatContain8, _props$webChatContain9, _props$webChatContain10, _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;
   const [state, dispatch] = useChatContextStore();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [adapter, setAdapter] = useChatAdapterStore();
@@ -185,6 +187,14 @@ export const LiveChatWidgetStateful = props => {
   };
   useEffect(() => {
     var _props$controlProps5, _props$controlProps6, _props$controlProps7, _props$chatConfig, _props$chatConfig$Liv, _props$controlProps9, _props$chatConfig2, _props$chatConfig2$Ch, _state$appStates5;
+    dispatch({
+      type: LiveChatWidgetActionType.SET_START_CHAT_FAILING,
+      payload: false
+    });
+    dispatch({
+      type: LiveChatWidgetActionType.SET_START_CHAT_FAILURE_TYPE,
+      payload: StartChatFailureType.Generic
+    });
     state.domainStates.confirmationPaneConfirmedOptionClicked = false;
     state.domainStates.confirmationState = ConfirmationState.NotSet;
     setupClientDataStore();
@@ -395,9 +405,23 @@ export const LiveChatWidgetStateful = props => {
 
     // End chat
     BroadcastService.getMessageByEventName(BroadcastEvent.InitiateEndChat).subscribe(async () => {
+      TelemetryHelper.logSDKEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.EndChatEventReceived,
+        Description: "Received InitiateEndChat BroadcastEvent."
+      });
+
       // This is to ensure to get latest state from cache in multitab
       const persistedState = getStateFromCache(getWidgetCacheIdfromProps(props));
       if (persistedState && persistedState.appStates.conversationState === ConversationState.Active) {
+        // We need to simulate states for closing chat, in order to messup with close confirmation pane.
+        dispatch({
+          type: LiveChatWidgetActionType.SET_CONFIRMATION_STATE,
+          payload: ConfirmationState.Ok
+        });
+        dispatch({
+          type: LiveChatWidgetActionType.SET_SHOW_CONFIRMATION,
+          payload: false
+        });
         dispatch({
           type: LiveChatWidgetActionType.SET_CONVERSATION_ENDED_BY,
           payload: ConversationEndEntity.Customer
@@ -405,6 +429,10 @@ export const LiveChatWidgetStateful = props => {
       } else {
         const skipEndChatSDK = true;
         const skipCloseChat = false;
+        TelemetryHelper.logSDKEvent(LogLevel.INFO, {
+          Event: TelemetryEvent.PrepareEndChat,
+          Description: PrepareEndChatDescriptionConstants.InitiateEndChatReceived
+        });
         endChat(props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, skipEndChatSDK, skipCloseChat);
       }
       BroadcastService.postMessage({
@@ -422,6 +450,10 @@ export const LiveChatWidgetStateful = props => {
     BroadcastService.getMessageByEventName(endChatEventName).subscribe(msg => {
       var _msg$payload9;
       if ((msg === null || msg === void 0 ? void 0 : (_msg$payload9 = msg.payload) === null || _msg$payload9 === void 0 ? void 0 : _msg$payload9.runtimeId) !== TelemetryManager.InternalTelemetryData.lcwRuntimeId) {
+        TelemetryHelper.logSDKEvent(LogLevel.INFO, {
+          Event: TelemetryEvent.PrepareEndChat,
+          Description: "Received EndChat BroadcastEvent from other tabs. Closing this chat."
+        });
         endChat(props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, true, false, false);
         endChatStateCleanUp(dispatch);
         chatSDKStateCleanUp(chatSDK);
@@ -552,12 +584,20 @@ export const LiveChatWidgetStateful = props => {
 
     // If start chat failed, and C2 is trying to close chat widget
     if (state !== null && state !== void 0 && (_state$appStates9 = state.appStates) !== null && _state$appStates9 !== void 0 && _state$appStates9.startChatFailed || (state === null || state === void 0 ? void 0 : (_state$appStates10 = state.appStates) === null || _state$appStates10 === void 0 ? void 0 : _state$appStates10.conversationState) === ConversationState.Postchat) {
+      TelemetryHelper.logSDKEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.PrepareEndChat,
+        Description: PrepareEndChatDescriptionConstants.CustomerCloseChatOnFailureOrPostChat
+      });
       endChat(props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, true, false, true);
       return;
     }
 
     // Scenario -> Chat was InActive and closing the chat (Refresh scenario on post chat)
     if ((state === null || state === void 0 ? void 0 : (_state$appStates11 = state.appStates) === null || _state$appStates11 === void 0 ? void 0 : _state$appStates11.conversationState) === ConversationState.InActive) {
+      TelemetryHelper.logSDKEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.PrepareEndChat,
+        Description: PrepareEndChatDescriptionConstants.CustomerCloseInactiveChat
+      });
       endChat(props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, false, false, true);
       return;
     }
@@ -610,6 +650,10 @@ export const LiveChatWidgetStateful = props => {
       Event: TelemetryEvent.BrowserUnloadEventStarted,
       Description: "Browser unload event received."
     });
+    TelemetryHelper.logSDKEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.PrepareEndChat,
+      Description: PrepareEndChatDescriptionConstants.BrowserUnload
+    });
     endChat(props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, false, false, false);
     // Clean local storage
     (_DataStoreManager$cli = DataStoreManager.clientDataStore) === null || _DataStoreManager$cli === void 0 ? void 0 : _DataStoreManager$cli.removeData(widgetStateEventId);
@@ -699,17 +743,17 @@ export const LiveChatWidgetStateful = props => {
   }, headerDraggableConfig))), !((_livechatProps$contro5 = livechatProps.controlProps) !== null && _livechatProps$contro5 !== void 0 && _livechatProps$contro5.hideLoadingPane) && shouldShowLoadingPane(state) && (decodeComponentString((_livechatProps$compon4 = livechatProps.componentOverrides) === null || _livechatProps$compon4 === void 0 ? void 0 : _livechatProps$compon4.loadingPane) || /*#__PURE__*/React.createElement(LoadingPaneStateful, {
     loadingPaneProps: livechatProps.loadingPaneProps,
     startChatErrorPaneProps: livechatProps.startChatErrorPaneProps
-  })), !((_livechatProps$contro6 = livechatProps.controlProps) !== null && _livechatProps$contro6 !== void 0 && _livechatProps$contro6.hideOutOfOfficeHoursPane) && shouldShowOutOfOfficeHoursPane(state) && (decodeComponentString((_livechatProps$compon5 = livechatProps.componentOverrides) === null || _livechatProps$compon5 === void 0 ? void 0 : _livechatProps$compon5.outOfOfficeHoursPane) || /*#__PURE__*/React.createElement(OutOfOfficeHoursPaneStateful, livechatProps.outOfOfficeHoursPaneProps)), !((_livechatProps$contro7 = livechatProps.controlProps) !== null && _livechatProps$contro7 !== void 0 && _livechatProps$contro7.hideReconnectChatPane) && shouldShowReconnectChatPane(state) && (decodeComponentString((_livechatProps$compon6 = livechatProps.componentOverrides) === null || _livechatProps$compon6 === void 0 ? void 0 : _livechatProps$compon6.reconnectChatPane) || /*#__PURE__*/React.createElement(ReconnectChatPaneStateful, {
+  })), !((_livechatProps$contro6 = livechatProps.controlProps) !== null && _livechatProps$contro6 !== void 0 && _livechatProps$contro6.hideErrorUIPane) && shouldShowStartChatErrorPane(state) && (decodeComponentString((_livechatProps$compon5 = livechatProps.componentOverrides) === null || _livechatProps$compon5 === void 0 ? void 0 : _livechatProps$compon5.startChatErrorPane) || /*#__PURE__*/React.createElement(StartChatErrorPaneStateful, livechatProps.startChatErrorPaneProps)), !((_livechatProps$contro7 = livechatProps.controlProps) !== null && _livechatProps$contro7 !== void 0 && _livechatProps$contro7.hideOutOfOfficeHoursPane) && shouldShowOutOfOfficeHoursPane(state) && (decodeComponentString((_livechatProps$compon6 = livechatProps.componentOverrides) === null || _livechatProps$compon6 === void 0 ? void 0 : _livechatProps$compon6.outOfOfficeHoursPane) || /*#__PURE__*/React.createElement(OutOfOfficeHoursPaneStateful, livechatProps.outOfOfficeHoursPaneProps)), !((_livechatProps$contro8 = livechatProps.controlProps) !== null && _livechatProps$contro8 !== void 0 && _livechatProps$contro8.hideReconnectChatPane) && shouldShowReconnectChatPane(state) && (decodeComponentString((_livechatProps$compon7 = livechatProps.componentOverrides) === null || _livechatProps$compon7 === void 0 ? void 0 : _livechatProps$compon7.reconnectChatPane) || /*#__PURE__*/React.createElement(ReconnectChatPaneStateful, {
     reconnectChatProps: livechatProps.reconnectChatPaneProps,
     initStartChat: initStartChatRelay
-  })), !((_livechatProps$contro8 = livechatProps.controlProps) !== null && _livechatProps$contro8 !== void 0 && _livechatProps$contro8.hidePreChatSurveyPane) && shouldShowPreChatSurveyPane(state) && (decodeComponentString((_livechatProps$compon7 = livechatProps.componentOverrides) === null || _livechatProps$compon7 === void 0 ? void 0 : _livechatProps$compon7.preChatSurveyPane) || /*#__PURE__*/React.createElement(PreChatSurveyPaneStateful, {
+  })), !((_livechatProps$contro9 = livechatProps.controlProps) !== null && _livechatProps$contro9 !== void 0 && _livechatProps$contro9.hidePreChatSurveyPane) && shouldShowPreChatSurveyPane(state) && (decodeComponentString((_livechatProps$compon8 = livechatProps.componentOverrides) === null || _livechatProps$compon8 === void 0 ? void 0 : _livechatProps$compon8.preChatSurveyPane) || /*#__PURE__*/React.createElement(PreChatSurveyPaneStateful, {
     surveyProps: livechatProps.preChatSurveyPaneProps,
     initStartChat: initStartChatRelay
-  })), !((_livechatProps$contro9 = livechatProps.controlProps) !== null && _livechatProps$contro9 !== void 0 && _livechatProps$contro9.hideCallingContainer) && shouldShowCallingContainer(state) && /*#__PURE__*/React.createElement(CallingContainerStateful, _extends({
+  })), !((_livechatProps$contro10 = livechatProps.controlProps) !== null && _livechatProps$contro10 !== void 0 && _livechatProps$contro10.hideCallingContainer) && shouldShowCallingContainer(state) && /*#__PURE__*/React.createElement(CallingContainerStateful, _extends({
     voiceVideoCallingSdk: voiceVideoCallingSDK
-  }, livechatProps.callingContainerProps)), !((_livechatProps$contro10 = livechatProps.controlProps) !== null && _livechatProps$contro10 !== void 0 && _livechatProps$contro10.hideWebChatContainer) && shouldShowWebChatContainer(state) && (decodeComponentString((_livechatProps$compon8 = livechatProps.componentOverrides) === null || _livechatProps$compon8 === void 0 ? void 0 : _livechatProps$compon8.webChatContainer) || /*#__PURE__*/React.createElement(WebChatContainerStateful, livechatProps)), !((_livechatProps$contro11 = livechatProps.controlProps) !== null && _livechatProps$contro11 !== void 0 && _livechatProps$contro11.hideConfirmationPane) && shouldShowConfirmationPane(state) && (decodeComponentString((_livechatProps$compon9 = livechatProps.componentOverrides) === null || _livechatProps$compon9 === void 0 ? void 0 : _livechatProps$compon9.confirmationPane) || /*#__PURE__*/React.createElement(ConfirmationPaneStateful, _extends({}, confirmationPaneProps, {
+  }, livechatProps.callingContainerProps)), !((_livechatProps$contro11 = livechatProps.controlProps) !== null && _livechatProps$contro11 !== void 0 && _livechatProps$contro11.hideWebChatContainer) && shouldShowWebChatContainer(state) && (decodeComponentString((_livechatProps$compon9 = livechatProps.componentOverrides) === null || _livechatProps$compon9 === void 0 ? void 0 : _livechatProps$compon9.webChatContainer) || /*#__PURE__*/React.createElement(WebChatContainerStateful, livechatProps)), !((_livechatProps$contro12 = livechatProps.controlProps) !== null && _livechatProps$contro12 !== void 0 && _livechatProps$contro12.hideConfirmationPane) && shouldShowConfirmationPane(state) && (decodeComponentString((_livechatProps$compon10 = livechatProps.componentOverrides) === null || _livechatProps$compon10 === void 0 ? void 0 : _livechatProps$compon10.confirmationPane) || /*#__PURE__*/React.createElement(ConfirmationPaneStateful, _extends({}, confirmationPaneProps, {
     setPostChatContext: setPostChatContextRelay,
     prepareEndChat: prepareEndChatRelay
-  }))), !((_livechatProps$contro12 = livechatProps.controlProps) !== null && _livechatProps$contro12 !== void 0 && _livechatProps$contro12.hidePostChatLoadingPane) && shouldShowPostChatLoadingPane(state) && (decodeComponentString((_livechatProps$compon10 = livechatProps.componentOverrides) === null || _livechatProps$compon10 === void 0 ? void 0 : _livechatProps$compon10.postChatLoadingPane) || /*#__PURE__*/React.createElement(PostChatLoadingPaneStateful, livechatProps.postChatLoadingPaneProps)), shouldShowPostChatSurveyPane(state) && (decodeComponentString((_livechatProps$compon11 = livechatProps.componentOverrides) === null || _livechatProps$compon11 === void 0 ? void 0 : _livechatProps$compon11.postChatSurveyPane) || /*#__PURE__*/React.createElement(PostChatSurveyPaneStateful, _extends({}, livechatProps.postChatSurveyPaneProps, livechatProps.chatSDK))), createFooter(livechatProps, state), shouldShowEmailTranscriptPane(state) && (decodeComponentString((_livechatProps$compon12 = livechatProps.componentOverrides) === null || _livechatProps$compon12 === void 0 ? void 0 : _livechatProps$compon12.emailTranscriptPane) || /*#__PURE__*/React.createElement(EmailTranscriptPaneStateful, livechatProps.emailTranscriptPane))))));
+  }))), !((_livechatProps$contro13 = livechatProps.controlProps) !== null && _livechatProps$contro13 !== void 0 && _livechatProps$contro13.hidePostChatLoadingPane) && shouldShowPostChatLoadingPane(state) && (decodeComponentString((_livechatProps$compon11 = livechatProps.componentOverrides) === null || _livechatProps$compon11 === void 0 ? void 0 : _livechatProps$compon11.postChatLoadingPane) || /*#__PURE__*/React.createElement(PostChatLoadingPaneStateful, livechatProps.postChatLoadingPaneProps)), shouldShowPostChatSurveyPane(state) && (decodeComponentString((_livechatProps$compon12 = livechatProps.componentOverrides) === null || _livechatProps$compon12 === void 0 ? void 0 : _livechatProps$compon12.postChatSurveyPane) || /*#__PURE__*/React.createElement(PostChatSurveyPaneStateful, _extends({}, livechatProps.postChatSurveyPaneProps, livechatProps.chatSDK))), createFooter(livechatProps, state), shouldShowEmailTranscriptPane(state) && (decodeComponentString((_livechatProps$compon13 = livechatProps.componentOverrides) === null || _livechatProps$compon13 === void 0 ? void 0 : _livechatProps$compon13.emailTranscriptPane) || /*#__PURE__*/React.createElement(EmailTranscriptPaneStateful, livechatProps.emailTranscriptPane))))));
 };
 export default LiveChatWidgetStateful;

package/lib/esm/components/loadingpanestateful/LoadingPaneStateful.js

@@ -3,10 +3,10 @@ import React, { useEffect } from "react";
 import { LoadingPane } from "@microsoft/omnichannel-chat-components";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { defaultGeneralLoadingPaneStyleProps } from "./common/defaultStyleProps/defaultgeneralLoadingPaneStyleProps";
-import { errorUILoadingPaneStyleProps } from "./common/errorUIStyleProps/errorUILoadingPaneStyleProps";
 import { findAllFocusableElement } from "../../common/utils";
 import useChatContextStore from "../../hooks/useChatContextStore";
 import useWindowDimensions from "../../hooks/useWindowDimensions";
+import { errorUILoadingPaneStyleProps } from "./common/errorUIStyleProps/errorUILoadingPaneStyleProps";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const LoadingPaneStateful = props => {

package/lib/esm/components/startchaterrorpanestateful/StartChatErrorPaneStateful.js

@@ -0,0 +1,71 @@
+import React, { useEffect } from "react";
+import { LoadingPane } from "@microsoft/omnichannel-chat-components";
+import { findAllFocusableElement } from "../../common/utils";
+import useChatContextStore from "../../hooks/useChatContextStore";
+import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
+import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+import { defaultStartChatErrorPaneGeneralStyleProps } from "./common/defaultStartChatErrorPaneGeneralStyleProps";
+import { defaultStartChatErrorPaneTitleStyleProps } from "./common/defaultStartChatErrorPaneTitleStyleProps";
+import { defaultStartChatErrorPaneSubtitleStyleProps } from "./common/defaultStartChatErrorPaneSubtitleStyleProps";
+import { defaultStartChatErrorPaneIconStyleProps } from "./common/defaultStartChatErrorPaneIconStyleProps";
+import { defaultStartChatErrorPaneIconImageStyleProps } from "./common/defaultStartChatErrorPaneIconImageProps";
+import { StartChatErrorPaneConstants } from "../../common/Constants";
+import { StartChatFailureType } from "../../contexts/common/StartChatFailureType";
+export const StartChatErrorPaneStateful = startChatErrorPaneProps => {
+  var _startChatErrorPanePr, _startChatErrorPanePr2, _startChatErrorPanePr3, _startChatErrorPanePr4, _startChatErrorPanePr5, _startChatErrorPanePr6, _startChatErrorPanePr7, _startChatErrorPanePr8, _startChatErrorPanePr9, _startChatErrorPanePr10, _startChatErrorPanePr11;
+  const [state] = useChatContextStore();
+  const generalStyleProps = Object.assign({}, defaultStartChatErrorPaneGeneralStyleProps, startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr = startChatErrorPaneProps.styleProps) === null || _startChatErrorPanePr === void 0 ? void 0 : _startChatErrorPanePr.generalStyleProps);
+  const titleStyleProps = Object.assign({}, defaultStartChatErrorPaneTitleStyleProps, startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr2 = startChatErrorPaneProps.styleProps) === null || _startChatErrorPanePr2 === void 0 ? void 0 : _startChatErrorPanePr2.titleStyleProps);
+  const subtitleStyleProps = Object.assign({}, defaultStartChatErrorPaneSubtitleStyleProps, startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr3 = startChatErrorPaneProps.styleProps) === null || _startChatErrorPanePr3 === void 0 ? void 0 : _startChatErrorPanePr3.subtitleStyleProps);
+  const iconStyleProps = Object.assign({}, defaultStartChatErrorPaneIconStyleProps, startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr4 = startChatErrorPaneProps.styleProps) === null || _startChatErrorPanePr4 === void 0 ? void 0 : _startChatErrorPanePr4.iconStyleProps);
+  const iconImageProps = Object.assign({}, defaultStartChatErrorPaneIconImageStyleProps, startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr5 = startChatErrorPaneProps.styleProps) === null || _startChatErrorPanePr5 === void 0 ? void 0 : _startChatErrorPanePr5.iconImageProps);
+  const errorUIStyleProps = {
+    generalStyleProps: generalStyleProps,
+    titleStyleProps: titleStyleProps,
+    subtitleStyleProps: subtitleStyleProps,
+    iconStyleProps: iconStyleProps,
+    iconImageProps: iconImageProps
+  };
+  let errorPaneTitleText;
+  let errorPaneSubtitleText;
+  switch (state.domainStates.startChatFailureType) {
+    case StartChatFailureType.Unauthorized:
+      errorPaneTitleText = (startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr6 = startChatErrorPaneProps.controlProps) === null || _startChatErrorPanePr6 === void 0 ? void 0 : _startChatErrorPanePr6.unauthorizedTitleText) ?? StartChatErrorPaneConstants.DefaultStartChatErrorUnauthorizedTitleText;
+      errorPaneSubtitleText = (startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr7 = startChatErrorPaneProps.controlProps) === null || _startChatErrorPanePr7 === void 0 ? void 0 : _startChatErrorPanePr7.unauthorizedSubtitleText) ?? StartChatErrorPaneConstants.DefaultStartChatErrorUnauthorizedSubtitleText;
+      break;
+    case StartChatFailureType.AuthSetupError:
+      errorPaneTitleText = (startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr8 = startChatErrorPaneProps.controlProps) === null || _startChatErrorPanePr8 === void 0 ? void 0 : _startChatErrorPanePr8.authSetupErrorTitleText) ?? StartChatErrorPaneConstants.DefaultStartChatErrorAuthSetupErrorTitleText;
+      errorPaneSubtitleText = (startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr9 = startChatErrorPaneProps.controlProps) === null || _startChatErrorPanePr9 === void 0 ? void 0 : _startChatErrorPanePr9.authSetupErrorSubtitleText) ?? StartChatErrorPaneConstants.DefaultStartChatErrorAuthSetupErrorSubtitleText;
+      break;
+    default:
+      errorPaneTitleText = (startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr10 = startChatErrorPaneProps.controlProps) === null || _startChatErrorPanePr10 === void 0 ? void 0 : _startChatErrorPanePr10.titleText) ?? StartChatErrorPaneConstants.DefaultStartChatErrorTitleText;
+      errorPaneSubtitleText = (startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr11 = startChatErrorPaneProps.controlProps) === null || _startChatErrorPanePr11 === void 0 ? void 0 : _startChatErrorPanePr11.subtitleText) ?? StartChatErrorPaneConstants.DefaultStartChatErrorSubtitleText;
+  }
+  const errorUIControlProps = {
+    id: StartChatErrorPaneConstants.DefaultStartChatErrorPaneId,
+    dir: state.domainStates.globalDir,
+    hideSpinner: true,
+    hideSpinnerText: true,
+    ...(startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : startChatErrorPaneProps.controlProps),
+    titleText: errorPaneTitleText,
+    subtitleText: errorPaneSubtitleText
+  };
+
+  // Move focus to the first button
+  useEffect(() => {
+    const firstElement = findAllFocusableElement(`#${state.domainStates.widgetElementId}`);
+    if (firstElement && firstElement[0]) {
+      firstElement[0].focus();
+    }
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.StartChatErrorPaneLoaded,
+      Description: "Start chat error pane loaded."
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement(LoadingPane, {
+    componentOverrides: startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : startChatErrorPaneProps.componentOverrides,
+    controlProps: errorUIControlProps,
+    styleProps: errorUIStyleProps
+  });
+};
+export default StartChatErrorPaneStateful;

package/lib/esm/components/startchaterrorpanestateful/common/defaultStartChatErrorPaneGeneralStyleProps.js

@@ -0,0 +1,10 @@
+export const defaultStartChatErrorPaneGeneralStyleProps = {
+  position: "initial",
+  width: "100%",
+  height: "100%",
+  left: "0%",
+  top: "0%",
+  borderRadius: "0 0 4px 4px",
+  borderWidth: "0px",
+  backgroundColor: "#FFFFFF"
+};

package/lib/esm/components/startchaterrorpanestateful/common/defaultStartChatErrorPaneIconImageProps.js

@@ -0,0 +1,10 @@
+import { ImageFit } from "@fluentui/react";
+import { AlertIcon } from "../../../assets/Icons";
+export const defaultStartChatErrorPaneIconImageStyleProps = {
+  src: AlertIcon,
+  imageFit: ImageFit.centerContain,
+  width: "86px",
+  height: "86px",
+  shouldFadeIn: false,
+  shouldStartVisible: true
+};

package/lib/esm/components/startchaterrorpanestateful/common/defaultStartChatErrorPaneIconStyleProps.js

@@ -0,0 +1,8 @@
+export const defaultStartChatErrorPaneIconStyleProps = {
+  display: "flex",
+  order: 1,
+  alignSelf: "auto",
+  backgroundColor: "#FFFFFF",
+  boxShadow: "#FFFFFF 0px 0px 0px 0px",
+  margin: "0px 0px 0px 0px"
+};

package/lib/esm/components/startchaterrorpanestateful/common/defaultStartChatErrorPaneSubtitleStyleProps.js

@@ -0,0 +1,10 @@
+export const defaultStartChatErrorPaneSubtitleStyleProps = {
+  fontFamily: "'Segoe UI',Arial,sans-serif",
+  fontWeight: "normal",
+  fontSize: "18px",
+  color: "#36454F",
+  textAlign: "center",
+  display: "flex",
+  order: 3,
+  alignSelf: "auto"
+};

package/lib/esm/components/startchaterrorpanestateful/common/defaultStartChatErrorPaneTitleStyleProps.js

@@ -0,0 +1,10 @@
+export const defaultStartChatErrorPaneTitleStyleProps = {
+  fontFamily: "'Segoe UI',Arial,sans-serif",
+  fontWeight: "normal",
+  fontSize: "18px",
+  color: "#36454F",
+  textAlign: "center",
+  display: "flex",
+  order: 2,
+  alignSelf: "auto"
+};

package/lib/esm/components/startchaterrorpanestateful/interfaces/IStartChatErrorPaneControlProps.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/startchaterrorpanestateful/interfaces/IStartChatErrorPaneProps.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/startchaterrorpanestateful/interfaces/IStartChatErrorPaneStyleProps.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityMiddleware.js

@@ -47,7 +47,7 @@ const handleSystemMessage = (next, args, card, systemMessageStyleProps) => {
   return () => /*#__PURE__*/React.createElement("div", {
     key: card.activity.id,
     style: systemMessageStyles,
-    "aria-hidden": "true",
+    "aria-hidden": "false",
     dangerouslySetInnerHTML: {
       __html: escapeHtml(card.activity.text)
     }
@@ -93,8 +93,7 @@ export const createActivityMiddleware = (systemMessageStyleProps, userMessageSty
       return function () {
         return /*#__PURE__*/React.createElement("div", {
           className: card.activity.from.role === DirectLineSenderRole.User ? Constants.sentMessageClassName : Constants.receivedMessageClassName,
-          style: userMessageStyles,
-          "aria-hidden": "true"
+          style: userMessageStyles
         }, next(...args)(...arguments));
       };
     }

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

@@ -10,4 +10,5 @@ export let ConversationState;
   ConversationState[ConversationState["PostchatLoading"] = 7] = "PostchatLoading";
   ConversationState[ConversationState["Postchat"] = 8] = "Postchat";
   ConversationState[ConversationState["Closed"] = 9] = "Closed";
+  ConversationState[ConversationState["Error"] = 10] = "Error";
 })(ConversationState || (ConversationState = {}));

package/lib/esm/contexts/common/LiveChatWidgetActionType.js

@@ -8,40 +8,41 @@ export let LiveChatWidgetActionType;
   LiveChatWidgetActionType[LiveChatWidgetActionType["SET_CONVERSATION_STATE"] = 5] = "SET_CONVERSATION_STATE";
   LiveChatWidgetActionType[LiveChatWidgetActionType["SET_PREVIOUS_FOCUSED_ELEMENT_ID"] = 6] = "SET_PREVIOUS_FOCUSED_ELEMENT_ID";
   LiveChatWidgetActionType[LiveChatWidgetActionType["SET_START_CHAT_FAILING"] = 7] = "SET_START_CHAT_FAILING";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_OUTSIDE_OPERATING_HOURS"] = 8] = "SET_OUTSIDE_OPERATING_HOURS";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_PRE_CHAT_SURVEY_RESPONSE"] = 9] = "SET_PRE_CHAT_SURVEY_RESPONSE";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_CUSTOM_CONTEXT"] = 10] = "SET_CUSTOM_CONTEXT";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_SHOW_CONFIRMATION"] = 11] = "SET_SHOW_CONFIRMATION";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_SHOW_EMAIL_TRANSCRIPT_PANE"] = 12] = "SET_SHOW_EMAIL_TRANSCRIPT_PANE";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_PRECHAT_RESPONSE_EMAIL"] = 13] = "SET_PRECHAT_RESPONSE_EMAIL";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_AUDIO_NOTIFICATION"] = 14] = "SET_AUDIO_NOTIFICATION";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_E2VV_ENABLED"] = 15] = "SET_E2VV_ENABLED";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_POST_CHAT_CONTEXT"] = 16] = "SET_POST_CHAT_CONTEXT";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SHOW_CALLING_CONTAINER"] = 17] = "SHOW_CALLING_CONTAINER";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_INCOMING_CALL"] = 18] = "SET_INCOMING_CALL";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["DISABLE_VIDEO_CALL"] = 19] = "DISABLE_VIDEO_CALL";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["DISABLE_LOCAL_VIDEO"] = 20] = "DISABLE_LOCAL_VIDEO";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["DISABLE_REMOTE_VIDEO"] = 21] = "DISABLE_REMOTE_VIDEO";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_CHAT_TOKEN"] = 22] = "SET_CHAT_TOKEN";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_START_CHAT_BUTTON_DISPLAY"] = 23] = "SET_START_CHAT_BUTTON_DISPLAY";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_PROACTIVE_CHAT_PARAMS"] = 24] = "SET_PROACTIVE_CHAT_PARAMS";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_TELEMETRY_DATA"] = 25] = "SET_TELEMETRY_DATA";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_RECONNECT_ID"] = 26] = "SET_RECONNECT_ID";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_UNREAD_MESSAGE_COUNT"] = 27] = "SET_UNREAD_MESSAGE_COUNT";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_FOCUS_CHAT_BUTTON"] = 28] = "SET_FOCUS_CHAT_BUTTON";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_CONVERSATION_ENDED_BY_AGENT_EVENT_RECEIVED"] = 29] = "SET_CONVERSATION_ENDED_BY_AGENT_EVENT_RECEIVED";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_CONVERSATION_ENDED_BY"] = 30] = "SET_CONVERSATION_ENDED_BY";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_WIDGET_STATE"] = 31] = "SET_WIDGET_STATE";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_LIVE_CHAT_CONTEXT"] = 32] = "SET_LIVE_CHAT_CONTEXT";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_BOT_OAUTH_SIGNIN_ID"] = 33] = "SET_BOT_OAUTH_SIGNIN_ID";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_WIDGET_SIZE"] = 34] = "SET_WIDGET_SIZE";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_WIDGET_INSTANCE_ID"] = 35] = "SET_WIDGET_INSTANCE_ID";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_LIVE_CHAT_CONFIG"] = 36] = "SET_LIVE_CHAT_CONFIG";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_POST_CHAT_WORKFLOW_IN_PROGRESS"] = 37] = "SET_POST_CHAT_WORKFLOW_IN_PROGRESS";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_INITIAL_CHAT_SDK_REQUEST_ID"] = 38] = "SET_INITIAL_CHAT_SDK_REQUEST_ID";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_SHOULD_USE_BOT_SURVEY"] = 39] = "SET_SHOULD_USE_BOT_SURVEY";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_CHAT_DISCONNECT_EVENT_RECEIVED"] = 40] = "SET_CHAT_DISCONNECT_EVENT_RECEIVED";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_SURVEY_MODE"] = 41] = "SET_SURVEY_MODE";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_CONFIRMATION_STATE"] = 42] = "SET_CONFIRMATION_STATE";
-  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_POST_CHAT_PARTICIPANT_TYPE"] = 43] = "SET_POST_CHAT_PARTICIPANT_TYPE";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_START_CHAT_FAILURE_TYPE"] = 8] = "SET_START_CHAT_FAILURE_TYPE";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_OUTSIDE_OPERATING_HOURS"] = 9] = "SET_OUTSIDE_OPERATING_HOURS";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_PRE_CHAT_SURVEY_RESPONSE"] = 10] = "SET_PRE_CHAT_SURVEY_RESPONSE";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_CUSTOM_CONTEXT"] = 11] = "SET_CUSTOM_CONTEXT";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_SHOW_CONFIRMATION"] = 12] = "SET_SHOW_CONFIRMATION";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_SHOW_EMAIL_TRANSCRIPT_PANE"] = 13] = "SET_SHOW_EMAIL_TRANSCRIPT_PANE";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_PRECHAT_RESPONSE_EMAIL"] = 14] = "SET_PRECHAT_RESPONSE_EMAIL";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_AUDIO_NOTIFICATION"] = 15] = "SET_AUDIO_NOTIFICATION";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_E2VV_ENABLED"] = 16] = "SET_E2VV_ENABLED";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_POST_CHAT_CONTEXT"] = 17] = "SET_POST_CHAT_CONTEXT";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SHOW_CALLING_CONTAINER"] = 18] = "SHOW_CALLING_CONTAINER";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_INCOMING_CALL"] = 19] = "SET_INCOMING_CALL";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["DISABLE_VIDEO_CALL"] = 20] = "DISABLE_VIDEO_CALL";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["DISABLE_LOCAL_VIDEO"] = 21] = "DISABLE_LOCAL_VIDEO";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["DISABLE_REMOTE_VIDEO"] = 22] = "DISABLE_REMOTE_VIDEO";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_CHAT_TOKEN"] = 23] = "SET_CHAT_TOKEN";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_START_CHAT_BUTTON_DISPLAY"] = 24] = "SET_START_CHAT_BUTTON_DISPLAY";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_PROACTIVE_CHAT_PARAMS"] = 25] = "SET_PROACTIVE_CHAT_PARAMS";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_TELEMETRY_DATA"] = 26] = "SET_TELEMETRY_DATA";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_RECONNECT_ID"] = 27] = "SET_RECONNECT_ID";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_UNREAD_MESSAGE_COUNT"] = 28] = "SET_UNREAD_MESSAGE_COUNT";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_FOCUS_CHAT_BUTTON"] = 29] = "SET_FOCUS_CHAT_BUTTON";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_CONVERSATION_ENDED_BY_AGENT_EVENT_RECEIVED"] = 30] = "SET_CONVERSATION_ENDED_BY_AGENT_EVENT_RECEIVED";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_CONVERSATION_ENDED_BY"] = 31] = "SET_CONVERSATION_ENDED_BY";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_WIDGET_STATE"] = 32] = "SET_WIDGET_STATE";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_LIVE_CHAT_CONTEXT"] = 33] = "SET_LIVE_CHAT_CONTEXT";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_BOT_OAUTH_SIGNIN_ID"] = 34] = "SET_BOT_OAUTH_SIGNIN_ID";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_WIDGET_SIZE"] = 35] = "SET_WIDGET_SIZE";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_WIDGET_INSTANCE_ID"] = 36] = "SET_WIDGET_INSTANCE_ID";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_LIVE_CHAT_CONFIG"] = 37] = "SET_LIVE_CHAT_CONFIG";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_POST_CHAT_WORKFLOW_IN_PROGRESS"] = 38] = "SET_POST_CHAT_WORKFLOW_IN_PROGRESS";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_INITIAL_CHAT_SDK_REQUEST_ID"] = 39] = "SET_INITIAL_CHAT_SDK_REQUEST_ID";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_SHOULD_USE_BOT_SURVEY"] = 40] = "SET_SHOULD_USE_BOT_SURVEY";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_CHAT_DISCONNECT_EVENT_RECEIVED"] = 41] = "SET_CHAT_DISCONNECT_EVENT_RECEIVED";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_SURVEY_MODE"] = 42] = "SET_SURVEY_MODE";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_CONFIRMATION_STATE"] = 43] = "SET_CONFIRMATION_STATE";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_POST_CHAT_PARTICIPANT_TYPE"] = 44] = "SET_POST_CHAT_PARTICIPANT_TYPE";
 })(LiveChatWidgetActionType || (LiveChatWidgetActionType = {}));

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

@@ -3,6 +3,7 @@ import { defaultMiddlewareLocalizedTexts } from "../../components/webchatcontain
 import { getWidgetCacheIdfromProps, isNullOrUndefined } from "../../common/utils";
 import { defaultClientDataStoreProvider } from "../../common/storage/default/defaultClientDataStoreProvider";
 import { ConfirmationState, Constants, ConversationEndEntity, StorageType } from "../../common/Constants";
+import { StartChatFailureType } from "./StartChatFailureType";
 export const getLiveChatWidgetContextInitialState = props => {
   var _props$controlProps, _props$webChatContain;
   const widgetCacheId = getWidgetCacheIdfromProps(props);
@@ -31,7 +32,8 @@ export const getLiveChatWidgetContextInitialState = props => {
       initialChatSdkRequestId: "",
       transcriptRequestId: "",
       confirmationPaneConfirmedOptionClicked: false,
-      confirmationState: ConfirmationState.NotSet
+      confirmationState: ConfirmationState.NotSet,
+      startChatFailureType: StartChatFailureType.Generic
     },
     appStates: {
       conversationState: ConversationState.Closed,
@@ -58,6 +60,7 @@ export const getLiveChatWidgetContextInitialState = props => {
     },
     uiStates: {
       showConfirmationPane: false,
+      showStartChatErrorPane: false,
       showEmailTranscriptPane: false,
       showCallingPopup: false,
       isIncomingCall: true,

package/lib/esm/contexts/common/StartChatFailureType.js

@@ -0,0 +1,6 @@
+export let StartChatFailureType;
+(function (StartChatFailureType) {
+  StartChatFailureType["Unauthorized"] = "unauthorized";
+  StartChatFailureType["AuthSetupError"] = "authSetupError";
+  StartChatFailureType["Generic"] = "generic";
+})(StartChatFailureType || (StartChatFailureType = {}));

package/lib/esm/contexts/createReducer.js

@@ -61,6 +61,14 @@ export const createReducer = () => {
             startChatFailed: action.payload
           }
         };
+      case LiveChatWidgetActionType.SET_START_CHAT_FAILURE_TYPE:
+        return {
+          ...state,
+          domainStates: {
+            ...state.domainStates,
+            startChatFailureType: action.payload
+          }
+        };
       case LiveChatWidgetActionType.SET_OUTSIDE_OPERATING_HOURS:
         return {
           ...state,

package/lib/esm/controller/componentController.js

@@ -22,6 +22,9 @@ export const shouldShowWebChatContainer = state => {
 export const shouldShowLoadingPane = state => {
   return !state.appStates.isMinimized && state.appStates.conversationState === ConversationState.Loading;
 };
+export const shouldShowStartChatErrorPane = state => {
+  return !state.appStates.isMinimized && state.appStates.conversationState === ConversationState.Error;
+};
 export const shouldShowReconnectChatPane = state => {
   return !state.appStates.isMinimized && state.appStates.conversationState === ConversationState.ReconnectChat;
 };

package/lib/types/common/Constants.d.ts

@@ -227,6 +227,15 @@ export declare class NotificationPaneConstants {
     static readonly ChatDisconnectSubtitleText = "For additional assistance, please close the chat and try again.";
     static readonly ChromeCloseIconName = "ChromeClose";
 }
+export declare class StartChatErrorPaneConstants {
+    static readonly DefaultStartChatErrorPaneId = "oc-lcw-start-chat-error-pane";
+    static readonly DefaultStartChatErrorTitleText = "We are unable to load chat at this time.";
+    static readonly DefaultStartChatErrorSubtitleText = "Please try again later.";
+    static readonly DefaultStartChatErrorUnauthorizedTitleText = "Chat authentication has failed.";
+    static readonly DefaultStartChatErrorAuthSetupErrorTitleText = "Chat authentication has failed.";
+    static readonly DefaultStartChatErrorUnauthorizedSubtitleText = "UNAUTHORIZED";
+    static readonly DefaultStartChatErrorAuthSetupErrorSubtitleText = "AUTH SETUP ERROR";
+}
 export declare class AriaTelemetryConstants {
     static readonly GERMANY_ENDPOINT: string;
     static readonly GCCH_ENDPOINT: string;
@@ -245,3 +254,15 @@ export declare class WidgetLoadCustomErrorString {
     static readonly AuthenticationFailedErrorString = "Authentication was not successful";
     static readonly NetworkErrorString = "Network Error";
 }
+export declare class PrepareEndChatDescriptionConstants {
+    static readonly ConversationEndedByCustomerWithoutPostChat = "Conversation ended by customer. Post chat not configured or should not show.";
+    static readonly ConversationEndedByCustomerWithInvalidPostChat = "Conversation ended by customer. Post chat context is invalid.";
+    static readonly ConversationEndedBy = "Conversation ended by";
+    static readonly PrepareEndChatError = "There's an error while preparing to end chat. Closing chat widget.";
+    static readonly WidgetLoadFailedAfterSessionInit = "SessionInit was successful, but widget load failed. Ending chat to avoid ghost chats in OC.";
+    static readonly InitiateEndChatReceived = "Received InitiateEndChat BroadcastEvent while conversation state is not Active. Ending chat.";
+    static readonly EndChatReceivedFromOtherTabs = "Received EndChat BroadcastEvent from other tabs. Closing this chat.";
+    static readonly CustomerCloseChatOnFailureOrPostChat = "Customer is trying to close chat widget on start chat failure or post chat pane.";
+    static readonly CustomerCloseInactiveChat = "Chat was Inactive and customer is trying to close chat widget or refreshing the page.";
+    static readonly BrowserUnload = "Browser unload event received. Ending chat.";
+}

package/lib/types/common/telemetry/TelemetryConstants.d.ts

@@ -110,6 +110,7 @@ export declare enum TelemetryEvent {
     StartChatSDKCall = "StartChatCall",
     StartChatEventRecevied = "StartChatEventReceived",
     EndChatSDKCall = "EndChatSDKCall",
+    PrepareEndChat = "PrepareEndChat",
     EndChatEventReceived = "EndChatEventReceived",
     WindowClosed = "WindowClosed",
     OnNewMessageFailed = "OnNewMessageFailed",
@@ -123,6 +124,7 @@ export declare enum TelemetryEvent {
     ConfirmationCancelButtonClicked = "ConfirmationCancelButtonClicked",
     ConfirmationConfirmButtonClicked = "ConfirmationConfirmButtonClicked",
     LoadingPaneLoaded = "LoadingPaneLoaded",
+    StartChatErrorPaneLoaded = "StartChatErrorPaneLoaded",
     EmailTranscriptLoaded = "EmailTranscriptLoaded",
     OutOfOfficePaneLoaded = "OutOfOfficePaneLoaded",
     ConfirmationPaneLoaded = "ConfirmationPaneLoaded",

package/lib/types/components/livechatwidget/interfaces/ILiveChatWidgetComponentOverrides.d.ts

@@ -6,6 +6,7 @@ export interface ILiveChatWidgetComponentOverrides {
     emailTranscriptPane?: ReactNode | string;
     header?: ReactNode | string;
     loadingPane?: ReactNode | string;
+    startChatErrorPane?: ReactNode | string;
     outOfOfficeHoursPane?: ReactNode | string;
     postChatLoadingPane?: ReactNode | string;
     postChatSurveyPane?: ReactNode | string;

package/lib/types/components/livechatwidget/interfaces/ILiveChatWidgetProps.d.ts

@@ -15,7 +15,7 @@ import { IOOOHPaneProps } from "@microsoft/omnichannel-chat-components/lib/types
 import { IPreChatSurveyPaneProps } from "@microsoft/omnichannel-chat-components/lib/types/components/prechatsurveypane/interfaces/IPreChatSurveyPaneProps";
 import { IProactiveChatPaneStatefulProps } from "../../proactivechatpanestateful/interfaces/IProactiveChatPaneStatefulProps";
 import { IReconnectChatPaneStatefulProps } from "../../reconnectchatpanestateful/interfaces/IReconnectChatPaneStatefulProps";
-import { IStartChatErrorPaneProps } from "../../loadingpanestateful/interfaces/IStartChatErrorPaneProps";
+import { IStartChatErrorPaneProps } from "../../startchaterrorpanestateful/interfaces/IStartChatErrorPaneProps";
 import { ITelemetryConfig } from "../../../common/telemetry/interfaces/ITelemetryConfig";
 import { IWebChatContainerStatefulProps } from "../../webchatcontainerstateful/interfaces/IWebChatContainerStatefulProps";
 import { OmnichannelChatSDK } from "@microsoft/omnichannel-chat-sdk";

package/lib/types/components/startchaterrorpanestateful/StartChatErrorPaneStateful.d.ts

@@ -0,0 +1,3 @@
+import { IStartChatErrorPaneProps } from "./interfaces/IStartChatErrorPaneProps";
+export declare const StartChatErrorPaneStateful: (startChatErrorPaneProps: IStartChatErrorPaneProps) => JSX.Element;
+export default StartChatErrorPaneStateful;

package/lib/types/components/startchaterrorpanestateful/common/defaultStartChatErrorPaneGeneralStyleProps.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultStartChatErrorPaneGeneralStyleProps: IStyle;

package/lib/types/components/startchaterrorpanestateful/common/defaultStartChatErrorPaneIconImageProps.d.ts

@@ -0,0 +1,2 @@
+import { IImageProps } from "@fluentui/react";
+export declare const defaultStartChatErrorPaneIconImageStyleProps: IImageProps;

package/lib/types/components/startchaterrorpanestateful/common/defaultStartChatErrorPaneIconStyleProps.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultStartChatErrorPaneIconStyleProps: IStyle;

package/lib/types/components/startchaterrorpanestateful/common/defaultStartChatErrorPaneSubtitleStyleProps.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultStartChatErrorPaneSubtitleStyleProps: IStyle;

package/lib/types/components/startchaterrorpanestateful/common/defaultStartChatErrorPaneTitleStyleProps.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultStartChatErrorPaneTitleStyleProps: IStyle;

package/lib/types/components/startchaterrorpanestateful/interfaces/IStartChatErrorPaneClassNames.d.ts

@@ -0,0 +1,5 @@
+export interface IStartChatErrorPaneClassNames {
+    iconClassName?: string;
+    titleClassName?: string;
+    subtitleClassName?: string;
+}

package/lib/types/components/startchaterrorpanestateful/interfaces/IStartChatErrorPaneComponentOverrides.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+export interface IStartChatErrorPaneComponentOverrides {
+    icon?: ReactNode | string;
+    title?: ReactNode | string;
+    subtitle?: ReactNode | string;
+}