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

package/lib/cjs/common/Constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WidgetLoadTelemetryMessage = exports.WidgetLoadCustomErrorString = exports.WebChatMiddlewareConstants = exports.TranscriptConstants = exports.StorageType = exports.Regex = exports.ParticipantType = exports.NotificationPaneConstants = exports.MimeTypes = exports.LocaleConstants = exports.LiveWorkItemState = exports.HtmlIdNames = exports.HtmlElementSelectors = exports.HtmlClassNames = exports.HtmlAttributeNames = exports.EnvironmentVersion = exports.ElementType = exports.E2VVOptions = exports.ConversationMode = exports.ConversationEndEntity = exports.Constants = exports.ConfirmationState = exports.AriaTelemetryConstants = exports.AMSConstants = void 0;
+exports.WidgetLoadTelemetryMessage = exports.WidgetLoadCustomErrorString = exports.WebChatMiddlewareConstants = exports.TranscriptConstants = exports.StorageType = exports.StartChatErrorPaneConstants = exports.Regex = exports.ParticipantType = exports.NotificationPaneConstants = exports.MimeTypes = exports.LocaleConstants = exports.LiveWorkItemState = exports.HtmlIdNames = exports.HtmlElementSelectors = exports.HtmlClassNames = exports.HtmlAttributeNames = exports.EnvironmentVersion = exports.ElementType = exports.E2VVOptions = exports.ConversationMode = exports.ConversationEndEntity = exports.Constants = exports.ConfirmationState = exports.AriaTelemetryConstants = exports.AMSConstants = void 0;
 var _class;
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
@@ -274,6 +274,11 @@ _defineProperty(NotificationPaneConstants, "IconText", "Notification Icon");
 _defineProperty(NotificationPaneConstants, "ChatDisconnectTitleText", "Chat disconnected");
 _defineProperty(NotificationPaneConstants, "ChatDisconnectSubtitleText", "For additional assistance, please close the chat and try again.");
 _defineProperty(NotificationPaneConstants, "ChromeCloseIconName", "ChromeClose");
+class StartChatErrorPaneConstants {}
+exports.StartChatErrorPaneConstants = StartChatErrorPaneConstants;
+_defineProperty(StartChatErrorPaneConstants, "DefaultStartChatErrorPaneId", "oc-lcw-start-chat-error-pane");
+_defineProperty(StartChatErrorPaneConstants, "DefaultStartChatErrorTitleText", "We are unable to load chat at this time.");
+_defineProperty(StartChatErrorPaneConstants, "DefaultStartChatErrorSubtitleText", "Please try again later.");
 class AriaTelemetryConstants {}
 exports.AriaTelemetryConstants = AriaTelemetryConstants;
 // Aria Endpoint for different environment types.

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

@@ -136,6 +136,7 @@ exports.TelemetryEvent = TelemetryEvent;
   TelemetryEvent["ConfirmationCancelButtonClicked"] = "ConfirmationCancelButtonClicked";
   TelemetryEvent["ConfirmationConfirmButtonClicked"] = "ConfirmationConfirmButtonClicked";
   TelemetryEvent["LoadingPaneLoaded"] = "LoadingPaneLoaded";
+  TelemetryEvent["StartChatErrorPaneLoaded"] = "StartChatErrorPaneLoaded";
   TelemetryEvent["EmailTranscriptLoaded"] = "EmailTranscriptLoaded";
   TelemetryEvent["OutOfOfficePaneLoaded"] = "OutOfOfficePaneLoaded";
   TelemetryEvent["ConfirmationPaneLoaded"] = "ConfirmationPaneLoaded";

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

@@ -60,17 +60,24 @@ const handleStartChatError = (dispatch, chatSDK, props, ex, isStartChatSuccessfu
     payload: true
   });
   if (!(props !== null && props !== void 0 && (_props$controlProps = props.controlProps) !== null && _props$controlProps !== void 0 && _props$controlProps.hideErrorUIPane)) {
+    // New flow of leveraging ConversationState.Error
     // Set app state to failing start chat if hideErrorUI is not turned on
     _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
       Event: _TelemetryConstants.TelemetryEvent.ErrorUIPaneLoaded,
       Description: "Error UI Pane Loaded"
     });
+    dispatch({
+      type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+      payload: _ConversationState.ConversationState.Error
+    });
+  } else {
+    // Old flow of leveraging ConversationState.Loading
+    // Show the loading pane in other cases for failure, this will help for both hideStartChatButton case
+    dispatch({
+      type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+      payload: _ConversationState.ConversationState.Loading
+    });
   }
-  // Show the loading pane in other cases for failure, this will help for both hideStartChatButton case
-  dispatch({
-    type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
-    payload: _ConversationState.ConversationState.Loading
-  });
 
   // If sessionInit was successful but LCW startchat failed due to some reason e.g adapter didn't load
   // we need to directly endChat to avoid leaving ghost chats in OC, not disturbing any other UI state

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

@@ -55,12 +55,13 @@ var _useChatAdapterStore = _interopRequireDefault(require("../../../hooks/useCha
 var _useChatContextStore = _interopRequireDefault(require("../../../hooks/useChatContextStore"));
 var _useChatSDKStore = _interopRequireDefault(require("../../../hooks/useChatSDKStore"));
 var _defaultAdaptiveCardStyles = require("../../webchatcontainerstateful/common/defaultStyles/defaultAdaptiveCardStyles");
+var _StartChatErrorPaneStateful = _interopRequireDefault(require("../../startchaterrorpanestateful/StartChatErrorPaneStateful"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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$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] = (0, _useChatContextStore.default)();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [adapter, setAdapter] = (0, _useChatAdapterStore.default)();
@@ -193,6 +194,10 @@ const LiveChatWidgetStateful = props => {
   };
   (0, _react2.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.LiveChatWidgetActionType.SET_START_CHAT_FAILING,
+      payload: false
+    });
     state.domainStates.confirmationPaneConfirmedOptionClicked = false;
     state.domainStates.confirmationState = _Constants.ConfirmationState.NotSet;
     setupClientDataStore();
@@ -707,18 +712,18 @@ const LiveChatWidgetStateful = props => {
   }, headerDraggableConfig))), !((_livechatProps$contro5 = livechatProps.controlProps) !== null && _livechatProps$contro5 !== void 0 && _livechatProps$contro5.hideLoadingPane) && (0, _componentController.shouldShowLoadingPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_livechatProps$compon4 = livechatProps.componentOverrides) === null || _livechatProps$compon4 === void 0 ? void 0 : _livechatProps$compon4.loadingPane) || /*#__PURE__*/_react2.default.createElement(_LoadingPaneStateful.default, {
     loadingPaneProps: livechatProps.loadingPaneProps,
     startChatErrorPaneProps: livechatProps.startChatErrorPaneProps
-  })), !((_livechatProps$contro6 = livechatProps.controlProps) !== null && _livechatProps$contro6 !== void 0 && _livechatProps$contro6.hideOutOfOfficeHoursPane) && (0, _componentController.shouldShowOutOfOfficeHoursPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_livechatProps$compon5 = livechatProps.componentOverrides) === null || _livechatProps$compon5 === void 0 ? void 0 : _livechatProps$compon5.outOfOfficeHoursPane) || /*#__PURE__*/_react2.default.createElement(_OOOHPaneStateful.default, livechatProps.outOfOfficeHoursPaneProps)), !((_livechatProps$contro7 = livechatProps.controlProps) !== null && _livechatProps$contro7 !== void 0 && _livechatProps$contro7.hideReconnectChatPane) && (0, _componentController.shouldShowReconnectChatPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_livechatProps$compon6 = livechatProps.componentOverrides) === null || _livechatProps$compon6 === void 0 ? void 0 : _livechatProps$compon6.reconnectChatPane) || /*#__PURE__*/_react2.default.createElement(_ReconnectChatPaneStateful.default, {
+  })), !((_livechatProps$contro6 = livechatProps.controlProps) !== null && _livechatProps$contro6 !== void 0 && _livechatProps$contro6.hideErrorUIPane) && (0, _componentController.shouldShowStartChatErrorPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_livechatProps$compon5 = livechatProps.componentOverrides) === null || _livechatProps$compon5 === void 0 ? void 0 : _livechatProps$compon5.startChatErrorPane) || /*#__PURE__*/_react2.default.createElement(_StartChatErrorPaneStateful.default, livechatProps.startChatErrorPaneProps)), !((_livechatProps$contro7 = livechatProps.controlProps) !== null && _livechatProps$contro7 !== void 0 && _livechatProps$contro7.hideOutOfOfficeHoursPane) && (0, _componentController.shouldShowOutOfOfficeHoursPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_livechatProps$compon6 = livechatProps.componentOverrides) === null || _livechatProps$compon6 === void 0 ? void 0 : _livechatProps$compon6.outOfOfficeHoursPane) || /*#__PURE__*/_react2.default.createElement(_OOOHPaneStateful.default, livechatProps.outOfOfficeHoursPaneProps)), !((_livechatProps$contro8 = livechatProps.controlProps) !== null && _livechatProps$contro8 !== void 0 && _livechatProps$contro8.hideReconnectChatPane) && (0, _componentController.shouldShowReconnectChatPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_livechatProps$compon7 = livechatProps.componentOverrides) === null || _livechatProps$compon7 === void 0 ? void 0 : _livechatProps$compon7.reconnectChatPane) || /*#__PURE__*/_react2.default.createElement(_ReconnectChatPaneStateful.default, {
     reconnectChatProps: livechatProps.reconnectChatPaneProps,
     initStartChat: initStartChatRelay
-  })), !((_livechatProps$contro8 = livechatProps.controlProps) !== null && _livechatProps$contro8 !== void 0 && _livechatProps$contro8.hidePreChatSurveyPane) && (0, _componentController.shouldShowPreChatSurveyPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_livechatProps$compon7 = livechatProps.componentOverrides) === null || _livechatProps$compon7 === void 0 ? void 0 : _livechatProps$compon7.preChatSurveyPane) || /*#__PURE__*/_react2.default.createElement(_PreChatSurveyPaneStateful.default, {
+  })), !((_livechatProps$contro9 = livechatProps.controlProps) !== null && _livechatProps$contro9 !== void 0 && _livechatProps$contro9.hidePreChatSurveyPane) && (0, _componentController.shouldShowPreChatSurveyPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_livechatProps$compon8 = livechatProps.componentOverrides) === null || _livechatProps$compon8 === void 0 ? void 0 : _livechatProps$compon8.preChatSurveyPane) || /*#__PURE__*/_react2.default.createElement(_PreChatSurveyPaneStateful.default, {
     surveyProps: livechatProps.preChatSurveyPaneProps,
     initStartChat: initStartChatRelay
-  })), !((_livechatProps$contro9 = livechatProps.controlProps) !== null && _livechatProps$contro9 !== void 0 && _livechatProps$contro9.hideCallingContainer) && (0, _componentController.shouldShowCallingContainer)(state) && /*#__PURE__*/_react2.default.createElement(_CallingContainerStateful.default, _extends({
+  })), !((_livechatProps$contro10 = livechatProps.controlProps) !== null && _livechatProps$contro10 !== void 0 && _livechatProps$contro10.hideCallingContainer) && (0, _componentController.shouldShowCallingContainer)(state) && /*#__PURE__*/_react2.default.createElement(_CallingContainerStateful.default, _extends({
     voiceVideoCallingSdk: voiceVideoCallingSDK
-  }, livechatProps.callingContainerProps)), !((_livechatProps$contro10 = livechatProps.controlProps) !== null && _livechatProps$contro10 !== void 0 && _livechatProps$contro10.hideWebChatContainer) && (0, _componentController.shouldShowWebChatContainer)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_livechatProps$compon8 = livechatProps.componentOverrides) === null || _livechatProps$compon8 === void 0 ? void 0 : _livechatProps$compon8.webChatContainer) || /*#__PURE__*/_react2.default.createElement(_WebChatContainerStateful.default, livechatProps)), !((_livechatProps$contro11 = livechatProps.controlProps) !== null && _livechatProps$contro11 !== void 0 && _livechatProps$contro11.hideConfirmationPane) && (0, _componentController.shouldShowConfirmationPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_livechatProps$compon9 = livechatProps.componentOverrides) === null || _livechatProps$compon9 === void 0 ? void 0 : _livechatProps$compon9.confirmationPane) || /*#__PURE__*/_react2.default.createElement(_ConfirmationPaneStateful.default, _extends({}, confirmationPaneProps, {
+  }, livechatProps.callingContainerProps)), !((_livechatProps$contro11 = livechatProps.controlProps) !== null && _livechatProps$contro11 !== void 0 && _livechatProps$contro11.hideWebChatContainer) && (0, _componentController.shouldShowWebChatContainer)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_livechatProps$compon9 = livechatProps.componentOverrides) === null || _livechatProps$compon9 === void 0 ? void 0 : _livechatProps$compon9.webChatContainer) || /*#__PURE__*/_react2.default.createElement(_WebChatContainerStateful.default, livechatProps)), !((_livechatProps$contro12 = livechatProps.controlProps) !== null && _livechatProps$contro12 !== void 0 && _livechatProps$contro12.hideConfirmationPane) && (0, _componentController.shouldShowConfirmationPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_livechatProps$compon10 = livechatProps.componentOverrides) === null || _livechatProps$compon10 === void 0 ? void 0 : _livechatProps$compon10.confirmationPane) || /*#__PURE__*/_react2.default.createElement(_ConfirmationPaneStateful.default, _extends({}, confirmationPaneProps, {
     setPostChatContext: setPostChatContextRelay,
     prepareEndChat: prepareEndChatRelay
-  }))), !((_livechatProps$contro12 = livechatProps.controlProps) !== null && _livechatProps$contro12 !== void 0 && _livechatProps$contro12.hidePostChatLoadingPane) && (0, _componentController.shouldShowPostChatLoadingPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_livechatProps$compon10 = livechatProps.componentOverrides) === null || _livechatProps$compon10 === void 0 ? void 0 : _livechatProps$compon10.postChatLoadingPane) || /*#__PURE__*/_react2.default.createElement(_PostChatLoadingPaneStateful.default, livechatProps.postChatLoadingPaneProps)), (0, _componentController.shouldShowPostChatSurveyPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_livechatProps$compon11 = livechatProps.componentOverrides) === null || _livechatProps$compon11 === void 0 ? void 0 : _livechatProps$compon11.postChatSurveyPane) || /*#__PURE__*/_react2.default.createElement(_PostChatSurveyPaneStateful.default, _extends({}, livechatProps.postChatSurveyPaneProps, livechatProps.chatSDK))), (0, _createFooter.createFooter)(livechatProps, state), (0, _componentController.shouldShowEmailTranscriptPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_livechatProps$compon12 = livechatProps.componentOverrides) === null || _livechatProps$compon12 === void 0 ? void 0 : _livechatProps$compon12.emailTranscriptPane) || /*#__PURE__*/_react2.default.createElement(_EmailTranscriptPaneStateful.default, livechatProps.emailTranscriptPane))))));
+  }))), !((_livechatProps$contro13 = livechatProps.controlProps) !== null && _livechatProps$contro13 !== void 0 && _livechatProps$contro13.hidePostChatLoadingPane) && (0, _componentController.shouldShowPostChatLoadingPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_livechatProps$compon11 = livechatProps.componentOverrides) === null || _livechatProps$compon11 === void 0 ? void 0 : _livechatProps$compon11.postChatLoadingPane) || /*#__PURE__*/_react2.default.createElement(_PostChatLoadingPaneStateful.default, livechatProps.postChatLoadingPaneProps)), (0, _componentController.shouldShowPostChatSurveyPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_livechatProps$compon12 = livechatProps.componentOverrides) === null || _livechatProps$compon12 === void 0 ? void 0 : _livechatProps$compon12.postChatSurveyPane) || /*#__PURE__*/_react2.default.createElement(_PostChatSurveyPaneStateful.default, _extends({}, livechatProps.postChatSurveyPaneProps, livechatProps.chatSDK))), (0, _createFooter.createFooter)(livechatProps, state), (0, _componentController.shouldShowEmailTranscriptPane)(state) && ((0, _omnichannelChatComponents.decodeComponentString)((_livechatProps$compon13 = livechatProps.componentOverrides) === null || _livechatProps$compon13 === void 0 ? void 0 : _livechatProps$compon13.emailTranscriptPane) || /*#__PURE__*/_react2.default.createElement(_EmailTranscriptPaneStateful.default, livechatProps.emailTranscriptPane))))));
 };
 exports.LiveChatWidgetStateful = LiveChatWidgetStateful;
 var _default = LiveChatWidgetStateful;

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

@@ -9,10 +9,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
 var _TelemetryHelper = require("../../common/telemetry/TelemetryHelper");
 var _defaultgeneralLoadingPaneStyleProps = require("./common/defaultStyleProps/defaultgeneralLoadingPaneStyleProps");
-var _errorUILoadingPaneStyleProps = require("./common/errorUIStyleProps/errorUILoadingPaneStyleProps");
 var _utils = require("../../common/utils");
 var _useChatContextStore = _interopRequireDefault(require("../../hooks/useChatContextStore"));
 var _useWindowDimensions = _interopRequireDefault(require("../../hooks/useWindowDimensions"));
+var _errorUILoadingPaneStyleProps = require("./common/errorUIStyleProps/errorUILoadingPaneStyleProps");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StartChatErrorPaneStateful = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
+var _utils = require("../../common/utils");
+var _useChatContextStore = _interopRequireDefault(require("../../hooks/useChatContextStore"));
+var _TelemetryHelper = require("../../common/telemetry/TelemetryHelper");
+var _TelemetryConstants = require("../../common/telemetry/TelemetryConstants");
+var _defaultStartChatErrorPaneGeneralStyleProps = require("./common/defaultStartChatErrorPaneGeneralStyleProps");
+var _defaultStartChatErrorPaneTitleStyleProps = require("./common/defaultStartChatErrorPaneTitleStyleProps");
+var _defaultStartChatErrorPaneSubtitleStyleProps = require("./common/defaultStartChatErrorPaneSubtitleStyleProps");
+var _defaultStartChatErrorPaneIconStyleProps = require("./common/defaultStartChatErrorPaneIconStyleProps");
+var _defaultStartChatErrorPaneIconImageProps = require("./common/defaultStartChatErrorPaneIconImageProps");
+var _Constants = require("../../common/Constants");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const StartChatErrorPaneStateful = startChatErrorPaneProps => {
+  var _startChatErrorPanePr, _startChatErrorPanePr2, _startChatErrorPanePr3, _startChatErrorPanePr4, _startChatErrorPanePr5, _startChatErrorPanePr6, _startChatErrorPanePr7;
+  const [state] = (0, _useChatContextStore.default)();
+  const generalStyleProps = Object.assign({}, _defaultStartChatErrorPaneGeneralStyleProps.defaultStartChatErrorPaneGeneralStyleProps, startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr = startChatErrorPaneProps.styleProps) === null || _startChatErrorPanePr === void 0 ? void 0 : _startChatErrorPanePr.generalStyleProps);
+  const titleStyleProps = Object.assign({}, _defaultStartChatErrorPaneTitleStyleProps.defaultStartChatErrorPaneTitleStyleProps, startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr2 = startChatErrorPaneProps.styleProps) === null || _startChatErrorPanePr2 === void 0 ? void 0 : _startChatErrorPanePr2.titleStyleProps);
+  const subtitleStyleProps = Object.assign({}, _defaultStartChatErrorPaneSubtitleStyleProps.defaultStartChatErrorPaneSubtitleStyleProps, startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr3 = startChatErrorPaneProps.styleProps) === null || _startChatErrorPanePr3 === void 0 ? void 0 : _startChatErrorPanePr3.subtitleStyleProps);
+  const iconStyleProps = Object.assign({}, _defaultStartChatErrorPaneIconStyleProps.defaultStartChatErrorPaneIconStyleProps, startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr4 = startChatErrorPaneProps.styleProps) === null || _startChatErrorPanePr4 === void 0 ? void 0 : _startChatErrorPanePr4.iconStyleProps);
+  const iconImageProps = Object.assign({}, _defaultStartChatErrorPaneIconImageProps.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
+  };
+  const errorPaneTitleText = (startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr6 = startChatErrorPaneProps.controlProps) === null || _startChatErrorPanePr6 === void 0 ? void 0 : _startChatErrorPanePr6.titleText) ?? _Constants.StartChatErrorPaneConstants.DefaultStartChatErrorTitleText;
+  const errorPaneSubtitleText = (startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr7 = startChatErrorPaneProps.controlProps) === null || _startChatErrorPanePr7 === void 0 ? void 0 : _startChatErrorPanePr7.subtitleText) ?? _Constants.StartChatErrorPaneConstants.DefaultStartChatErrorSubtitleText;
+  const errorUIControlProps = {
+    id: _Constants.StartChatErrorPaneConstants.DefaultStartChatErrorPaneId,
+    dir: state.domainStates.globalDir,
+    titleText: errorPaneTitleText,
+    subtitleText: errorPaneSubtitleText,
+    hideSpinner: true,
+    hideSpinnerText: true,
+    ...(startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : startChatErrorPaneProps.controlProps)
+  };
+
+  // Move focus to the first button
+  (0, _react.useEffect)(() => {
+    const firstElement = (0, _utils.findAllFocusableElement)(`#${state.domainStates.widgetElementId}`);
+    if (firstElement && firstElement[0]) {
+      firstElement[0].focus();
+    }
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.StartChatErrorPaneLoaded,
+      Description: "Start chat error pane loaded."
+    });
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.LoadingPane, {
+    componentOverrides: startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : startChatErrorPaneProps.componentOverrides,
+    controlProps: errorUIControlProps,
+    styleProps: errorUIStyleProps
+  });
+};
+exports.StartChatErrorPaneStateful = StartChatErrorPaneStateful;
+var _default = StartChatErrorPaneStateful;
+exports.default = _default;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultStartChatErrorPaneGeneralStyleProps = void 0;
+const defaultStartChatErrorPaneGeneralStyleProps = {
+  position: "initial",
+  width: "100%",
+  height: "100%",
+  left: "0%",
+  top: "0%",
+  borderRadius: "0 0 4px 4px",
+  borderWidth: "0px",
+  backgroundColor: "#FFFFFF"
+};
+exports.defaultStartChatErrorPaneGeneralStyleProps = defaultStartChatErrorPaneGeneralStyleProps;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultStartChatErrorPaneIconImageStyleProps = void 0;
+var _react = require("@fluentui/react");
+var _Icons = require("../../../assets/Icons");
+const defaultStartChatErrorPaneIconImageStyleProps = {
+  src: _Icons.AlertIcon,
+  imageFit: _react.ImageFit.centerContain,
+  width: "86px",
+  height: "86px",
+  shouldFadeIn: false,
+  shouldStartVisible: true
+};
+exports.defaultStartChatErrorPaneIconImageStyleProps = defaultStartChatErrorPaneIconImageStyleProps;

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultStartChatErrorPaneIconStyleProps = void 0;
+const defaultStartChatErrorPaneIconStyleProps = {
+  display: "flex",
+  order: 1,
+  alignSelf: "auto",
+  backgroundColor: "#FFFFFF",
+  boxShadow: "#FFFFFF 0px 0px 0px 0px",
+  margin: "0px 0px 0px 0px"
+};
+exports.defaultStartChatErrorPaneIconStyleProps = defaultStartChatErrorPaneIconStyleProps;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultStartChatErrorPaneSubtitleStyleProps = void 0;
+const defaultStartChatErrorPaneSubtitleStyleProps = {
+  fontFamily: "'Segoe UI',Arial,sans-serif",
+  fontWeight: "normal",
+  fontSize: "18px",
+  color: "#36454F",
+  textAlign: "center",
+  display: "flex",
+  order: 3,
+  alignSelf: "auto"
+};
+exports.defaultStartChatErrorPaneSubtitleStyleProps = defaultStartChatErrorPaneSubtitleStyleProps;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultStartChatErrorPaneTitleStyleProps = void 0;
+const defaultStartChatErrorPaneTitleStyleProps = {
+  fontFamily: "'Segoe UI',Arial,sans-serif",
+  fontWeight: "normal",
+  fontSize: "18px",
+  color: "#36454F",
+  textAlign: "center",
+  display: "flex",
+  order: 2,
+  alignSelf: "auto"
+};
+exports.defaultStartChatErrorPaneTitleStyleProps = defaultStartChatErrorPaneTitleStyleProps;

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -54,7 +54,7 @@ const handleSystemMessage = (next, args, card, systemMessageStyleProps) => {
   return () => /*#__PURE__*/_react.default.createElement("div", {
     key: card.activity.id,
     style: systemMessageStyles,
-    "aria-hidden": "true",
+    "aria-hidden": "false",
     dangerouslySetInnerHTML: {
       __html: (0, _utils.escapeHtml)(card.activity.text)
     }
@@ -100,8 +100,7 @@ const createActivityMiddleware = (systemMessageStyleProps, userMessageStyleProps
       return function () {
         return /*#__PURE__*/_react.default.createElement("div", {
           className: card.activity.from.role === _DirectLineSenderRole.DirectLineSenderRole.User ? _Constants.Constants.sentMessageClassName : _Constants.Constants.receivedMessageClassName,
-          style: userMessageStyles,
-          "aria-hidden": "true"
+          style: userMessageStyles
         }, next(...args)(...arguments));
       };
     }

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

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

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

@@ -64,6 +64,7 @@ const getLiveChatWidgetContextInitialState = props => {
     },
     uiStates: {
       showConfirmationPane: false,
+      showStartChatErrorPane: false,
       showEmailTranscriptPane: false,
       showCallingPopup: false,
       isIncomingCall: true,

package/lib/cjs/controller/componentController.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.shouldShowWebChatContainer = exports.shouldShowReconnectChatPane = exports.shouldShowProactiveChatPane = exports.shouldShowPreChatSurveyPane = exports.shouldShowPostChatSurveyPane = exports.shouldShowPostChatLoadingPane = exports.shouldShowOutOfOfficeHoursPane = exports.shouldShowLoadingPane = exports.shouldShowHeader = exports.shouldShowFooter = exports.shouldShowEmailTranscriptPane = exports.shouldShowConfirmationPane = exports.shouldShowChatButton = exports.shouldShowCallingContainer = void 0;
+exports.shouldShowWebChatContainer = exports.shouldShowStartChatErrorPane = exports.shouldShowReconnectChatPane = exports.shouldShowProactiveChatPane = exports.shouldShowPreChatSurveyPane = exports.shouldShowPostChatSurveyPane = exports.shouldShowPostChatLoadingPane = exports.shouldShowOutOfOfficeHoursPane = exports.shouldShowLoadingPane = exports.shouldShowHeader = exports.shouldShowFooter = exports.shouldShowEmailTranscriptPane = exports.shouldShowConfirmationPane = exports.shouldShowChatButton = exports.shouldShowCallingContainer = void 0;
 var _ConversationState = require("../contexts/common/ConversationState");
 const shouldShowChatButton = state => {
   var _state$appStates;
@@ -34,6 +34,10 @@ const shouldShowLoadingPane = state => {
   return !state.appStates.isMinimized && state.appStates.conversationState === _ConversationState.ConversationState.Loading;
 };
 exports.shouldShowLoadingPane = shouldShowLoadingPane;
+const shouldShowStartChatErrorPane = state => {
+  return !state.appStates.isMinimized && state.appStates.conversationState === _ConversationState.ConversationState.Error;
+};
+exports.shouldShowStartChatErrorPane = shouldShowStartChatErrorPane;
 const shouldShowReconnectChatPane = state => {
   return !state.appStates.isMinimized && state.appStates.conversationState === _ConversationState.ConversationState.ReconnectChat;
 };

package/lib/esm/common/Constants.js

@@ -247,6 +247,10 @@ _defineProperty(NotificationPaneConstants, "IconText", "Notification Icon");
 _defineProperty(NotificationPaneConstants, "ChatDisconnectTitleText", "Chat disconnected");
 _defineProperty(NotificationPaneConstants, "ChatDisconnectSubtitleText", "For additional assistance, please close the chat and try again.");
 _defineProperty(NotificationPaneConstants, "ChromeCloseIconName", "ChromeClose");
+export class StartChatErrorPaneConstants {}
+_defineProperty(StartChatErrorPaneConstants, "DefaultStartChatErrorPaneId", "oc-lcw-start-chat-error-pane");
+_defineProperty(StartChatErrorPaneConstants, "DefaultStartChatErrorTitleText", "We are unable to load chat at this time.");
+_defineProperty(StartChatErrorPaneConstants, "DefaultStartChatErrorSubtitleText", "Please try again later.");
 export class AriaTelemetryConstants {}
 // Aria Endpoint for different environment types.
 _defineProperty(AriaTelemetryConstants, "GERMANY_ENDPOINT", "https://de.pipe.aria.microsoft.com/Collector/3.0/");

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

@@ -130,6 +130,7 @@ export let TelemetryEvent;
   TelemetryEvent["ConfirmationCancelButtonClicked"] = "ConfirmationCancelButtonClicked";
   TelemetryEvent["ConfirmationConfirmButtonClicked"] = "ConfirmationConfirmButtonClicked";
   TelemetryEvent["LoadingPaneLoaded"] = "LoadingPaneLoaded";
+  TelemetryEvent["StartChatErrorPaneLoaded"] = "StartChatErrorPaneLoaded";
   TelemetryEvent["EmailTranscriptLoaded"] = "EmailTranscriptLoaded";
   TelemetryEvent["OutOfOfficePaneLoaded"] = "OutOfOfficePaneLoaded";
   TelemetryEvent["ConfirmationPaneLoaded"] = "ConfirmationPaneLoaded";

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

@@ -55,17 +55,24 @@ export const handleStartChatError = (dispatch, chatSDK, props, ex, isStartChatSu
     payload: true
   });
   if (!(props !== null && props !== void 0 && (_props$controlProps = props.controlProps) !== null && _props$controlProps !== void 0 && _props$controlProps.hideErrorUIPane)) {
+    // New flow of leveraging ConversationState.Error
     // Set app state to failing start chat if hideErrorUI is not turned on
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.ErrorUIPaneLoaded,
       Description: "Error UI Pane Loaded"
     });
+    dispatch({
+      type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+      payload: ConversationState.Error
+    });
+  } else {
+    // Old flow of leveraging ConversationState.Loading
+    // Show the loading pane in other cases for failure, this will help for both hideStartChatButton case
+    dispatch({
+      type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+      payload: ConversationState.Loading
+    });
   }
-  // Show the loading pane in other cases for failure, this will help for both hideStartChatButton case
-  dispatch({
-    type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
-    payload: ConversationState.Loading
-  });
 
   // If sessionInit was successful but LCW startchat failed due to some reason e.g adapter didn't load
   // we need to directly endChat to avoid leaving ghost chats in OC, not disturbing any other UI state

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

@@ -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,9 @@ 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";
 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 +186,10 @@ 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
+    });
     state.domainStates.confirmationPaneConfirmedOptionClicked = false;
     state.domainStates.confirmationState = ConfirmationState.NotSet;
     setupClientDataStore();
@@ -699,17 +704,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,57 @@
+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";
+export const StartChatErrorPaneStateful = startChatErrorPaneProps => {
+  var _startChatErrorPanePr, _startChatErrorPanePr2, _startChatErrorPanePr3, _startChatErrorPanePr4, _startChatErrorPanePr5, _startChatErrorPanePr6, _startChatErrorPanePr7;
+  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
+  };
+  const errorPaneTitleText = (startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr6 = startChatErrorPaneProps.controlProps) === null || _startChatErrorPanePr6 === void 0 ? void 0 : _startChatErrorPanePr6.titleText) ?? StartChatErrorPaneConstants.DefaultStartChatErrorTitleText;
+  const errorPaneSubtitleText = (startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr7 = startChatErrorPaneProps.controlProps) === null || _startChatErrorPanePr7 === void 0 ? void 0 : _startChatErrorPanePr7.subtitleText) ?? StartChatErrorPaneConstants.DefaultStartChatErrorSubtitleText;
+  const errorUIControlProps = {
+    id: StartChatErrorPaneConstants.DefaultStartChatErrorPaneId,
+    dir: state.domainStates.globalDir,
+    titleText: errorPaneTitleText,
+    subtitleText: errorPaneSubtitleText,
+    hideSpinner: true,
+    hideSpinnerText: true,
+    ...(startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : startChatErrorPaneProps.controlProps)
+  };
+
+  // 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/LiveChatWidgetContextInitialState.js

@@ -58,6 +58,7 @@ export const getLiveChatWidgetContextInitialState = props => {
     },
     uiStates: {
       showConfirmationPane: false,
+      showStartChatErrorPane: false,
       showEmailTranscriptPane: false,
       showCallingPopup: false,
       isIncomingCall: true,

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,11 @@ 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.";
+}
 export declare class AriaTelemetryConstants {
     static readonly GERMANY_ENDPOINT: string;
     static readonly GCCH_ENDPOINT: string;

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

@@ -123,6 +123,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;
+}

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

@@ -0,0 +1,10 @@
+export interface IStartChatErrorPaneControlProps {
+    id?: string;
+    role?: string;
+    dir?: "rtl" | "ltr" | "auto";
+    hideIcon?: boolean;
+    hideTitle?: boolean;
+    hideSubtitle?: boolean;
+    titleText?: string;
+    subtitleText?: string;
+}

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

@@ -0,0 +1,8 @@
+import { IStartChatErrorPaneComponentOverrides } from "./IStartChatErrorPaneComponentOverrides";
+import { IStartChatErrorPaneControlProps } from "./IStartChatErrorPaneControlProps";
+import { IStartChatErrorPaneStyleProps } from "./IStartChatErrorPaneStyleProps";
+export interface IStartChatErrorPaneProps {
+    componentOverrides?: IStartChatErrorPaneComponentOverrides;
+    controlProps?: IStartChatErrorPaneControlProps;
+    styleProps?: IStartChatErrorPaneStyleProps;
+}

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

@@ -0,0 +1,10 @@
+import { IImageProps, IStyle } from "@fluentui/react";
+import { IStartChatErrorPaneClassNames } from "./IStartChatErrorPaneClassNames";
+export interface IStartChatErrorPaneStyleProps {
+    generalStyleProps?: IStyle;
+    titleStyleProps?: IStyle;
+    subtitleStyleProps?: IStyle;
+    iconStyleProps?: IStyle;
+    iconImageProps?: IImageProps;
+    classNames?: IStartChatErrorPaneClassNames;
+}

package/lib/types/contexts/common/ConversationState.d.ts

@@ -8,5 +8,6 @@ export declare enum ConversationState {
     InActive = 6,
     PostchatLoading = 7,
     Postchat = 8,
-    Closed = 9
+    Closed = 9,
+    Error = 10
 }

package/lib/types/contexts/common/ILiveChatWidgetContext.d.ts

@@ -49,6 +49,7 @@ export interface ILiveChatWidgetContext {
     };
     uiStates: {
         showConfirmationPane: boolean;
+        showStartChatErrorPane: boolean;
         showEmailTranscriptPane: boolean;
         disableVideoCall: boolean;
         showCallingPopup: boolean;

package/lib/types/controller/componentController.d.ts

@@ -6,6 +6,7 @@ export declare const shouldShowFooter: (state: ILiveChatWidgetContext) => boolea
 export declare const shouldShowEmailTranscriptPane: (state: ILiveChatWidgetContext) => boolean;
 export declare const shouldShowWebChatContainer: (state: ILiveChatWidgetContext) => boolean;
 export declare const shouldShowLoadingPane: (state: ILiveChatWidgetContext) => boolean;
+export declare const shouldShowStartChatErrorPane: (state: ILiveChatWidgetContext) => boolean;
 export declare const shouldShowReconnectChatPane: (state: ILiveChatWidgetContext) => boolean;
 export declare const shouldShowPostChatLoadingPane: (state: ILiveChatWidgetContext) => boolean;
 export declare const shouldShowOutOfOfficeHoursPane: (state: ILiveChatWidgetContext) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/omnichannel-chat-widget",
-  "version": "1.5.1-main.e2be12d",
+  "version": "1.5.1-main.ee4453c",
   "description": "Microsoft Omnichannel Chat Widget",
   "main": "lib/cjs/index.js",
   "types": "lib/types/index.d.ts",
@@ -74,8 +74,8 @@
     "webpack-cli": "^4.9.2"
   },
   "dependencies": {
-    "@microsoft/omnichannel-chat-components": "^1.0.9",
-    "@microsoft/omnichannel-chat-sdk": "1.6.1",
+    "@microsoft/omnichannel-chat-components": "^1.1.0",
+    "@microsoft/omnichannel-chat-sdk": "1.6.2",
     "abort-controller-es5": "^2.0.1",
     "dompurify": "^2.3.4",
     "markdown-it": "^12.3.2",

package/lib/types/components/loadingpanestateful/interfaces/IStartChatErrorPaneControlProps.d.ts

@@ -1,4 +0,0 @@
-export interface IStartChatErrorPaneControlProps {
-    titleText?: string;
-    subtitleText?: string;
-}

package/lib/types/components/loadingpanestateful/interfaces/IStartChatErrorPaneProps.d.ts

@@ -1,4 +0,0 @@
-import { IStartChatErrorPaneControlProps } from "./IStartChatErrorPaneControlProps";
-export interface IStartChatErrorPaneProps {
-    controlProps?: IStartChatErrorPaneControlProps;
-}