@microsoft/omnichannel-chat-widget 1.7.5-main.290ba08 → 1.7.6-main.9b09b06

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

@@ -26,7 +26,7 @@ class FacadeChatSDK {
   isTokenSet() {
     return !(0, _utils.isNullOrEmptyString)(this.token);
   }
-  constructor(input) {
+  constructor(input, disableReauthentication) {
     _defineProperty(this, "chatSDK", void 0);
     _defineProperty(this, "chatConfig", void 0);
     _defineProperty(this, "token", "");
@@ -34,11 +34,13 @@ class FacadeChatSDK {
     _defineProperty(this, "isAuthenticated", void 0);
     _defineProperty(this, "getAuthToken", void 0);
     _defineProperty(this, "sdkMocked", void 0);
+    _defineProperty(this, "disableReauthentication", void 0);
     this.chatSDK = input.chatSDK;
     this.chatConfig = input.chatConfig;
     this.getAuthToken = input.getAuthToken;
     this.isAuthenticated = input.isAuthenticated;
     this.sdkMocked = input.isSDKMocked;
+    this.disableReauthentication = disableReauthentication;
   }
 
   //set default expiration to zero, for undefined or missed exp in jwt
@@ -103,6 +105,14 @@ class FacadeChatSDK {
     }
   }
   async tokenRing() {
+    if (this.disableReauthentication === true) {
+      // facade feature is disabled, so we are bypassing the re authentication and let it fail.
+      return {
+        result: true,
+        message: "Facade is disabled"
+      };
+    }
+
     // this is needed for storybooks, specifically for reconnect pane which requires authentication bypass
     if (this.sdkMocked === true) {
       return {

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

@@ -141,6 +141,7 @@ exports.TelemetryEvent = TelemetryEvent;
   TelemetryEvent["ConfirmationCancelButtonClicked"] = "ConfirmationCancelButtonClicked";
   TelemetryEvent["ConfirmationConfirmButtonClicked"] = "ConfirmationConfirmButtonClicked";
   TelemetryEvent["LoadingPaneLoaded"] = "LoadingPaneLoaded";
+  TelemetryEvent["LoadingPaneUnloaded"] = "LoadingPaneUnloaded";
   TelemetryEvent["StartChatErrorPaneLoaded"] = "StartChatErrorPaneLoaded";
   TelemetryEvent["EmailTranscriptLoaded"] = "EmailTranscriptLoaded";
   TelemetryEvent["OutOfOfficePaneLoaded"] = "OutOfOfficePaneLoaded";
@@ -173,6 +174,7 @@ exports.TelemetryEvent = TelemetryEvent;
   TelemetryEvent["SetBotAuthProviderNotFound"] = "SetBotAuthProviderNotFound";
   TelemetryEvent["BotAuthActivityUndefinedSignInId"] = "BotAuthActivityUndefinedSignInId";
   TelemetryEvent["ThirdPartyCookiesBlocked"] = "ThirdPartyCookiesBlocked";
+  TelemetryEvent["ParticipantsRemovedEvent"] = "ParticipantsRemovedEvent";
   TelemetryEvent["ProcessingHTMLTextMiddlewareFailed"] = "ProcessingHTMLTextMiddlewareFailed";
   TelemetryEvent["ProcessingSanitizationMiddlewareFailed"] = "ProcessingSanitizationMiddlewareFailed";
   TelemetryEvent["FormatTagsMiddlewareJSONStringifyFailed"] = "FormatTagsMiddlewareJSONStringifyFailed";
@@ -224,6 +226,36 @@ exports.TelemetryEvent = TelemetryEvent;
   TelemetryEvent["NewTokenFailed"] = "NewTokenFailed";
   TelemetryEvent["NewTokenExpired"] = "NewTokenExpired";
   TelemetryEvent["TokenEmptyOrSame"] = "TokenEmptyOrSame";
+  TelemetryEvent["UXFooterStart"] = "UXFooterStart";
+  TelemetryEvent["UXFooterCompleted"] = "UXFooterCompleted";
+  TelemetryEvent["UXHeaderStart"] = "UXHeaderStart";
+  TelemetryEvent["UXHeaderCompleted"] = "UXHeaderCompleted";
+  TelemetryEvent["UXLoadingPaneStart"] = "UXLoadingPaneStart";
+  TelemetryEvent["UXLoadingPaneCompleted"] = "UXLoadingPaneCompleted";
+  TelemetryEvent["UXNotificationPaneStart"] = "UXNotificationPaneStart";
+  TelemetryEvent["UXNotificationPaneCompleted"] = "UXNotificationPaneCompleted";
+  TelemetryEvent["UXOOHPaneStart"] = "UXOOHPaneStart";
+  TelemetryEvent["UXOOHPaneCompleted"] = "UXOOHPaneCompleted";
+  TelemetryEvent["UXPostChatLoadingPaneStart"] = "UXPostChatLoadingPaneStart";
+  TelemetryEvent["UXPostChatLoadingPaneCompleted"] = "UXPostChatLoadingPaneCompleted";
+  TelemetryEvent["UXPrechatPaneStart"] = "UXPrechatPaneStart";
+  TelemetryEvent["UXPrechatPaneCompleted"] = "UXPrechatPaneCompleted";
+  TelemetryEvent["UXProactiveChatPaneStart"] = "UXProactiveChatPaneStart";
+  TelemetryEvent["UXProactiveChatCompleted"] = "UXProactiveChatCompleted";
+  TelemetryEvent["UXReconnectChatPaneStart"] = "UXReconnectChatPaneStart";
+  TelemetryEvent["UXReconnectChatCompleted"] = "UXReconnectChatCompleted";
+  TelemetryEvent["UXStartChatErrorPaneStart"] = "UXStartChatErrorPaneStart";
+  TelemetryEvent["UXStartChatErrorCompleted"] = "UXStartChatErrorCompleted";
+  TelemetryEvent["UXEmailTranscriptPaneStart"] = "UXEmailTranscriptPaneStart";
+  TelemetryEvent["UXEmailTranscriptPaneCompleted"] = "UXEmailTranscriptPaneCompleted";
+  TelemetryEvent["UXWebchatContainerStart"] = "UXWebchatContainerStart";
+  TelemetryEvent["UXWebchatContainerCompleted"] = "UXWebchatContainerCompleted";
+  TelemetryEvent["UXLCWChatButtonStart"] = "UXLCWChatButtonStart";
+  TelemetryEvent["UXLCWChatButtonCompleted"] = "UXLCWChatButtonCompleted";
+  TelemetryEvent["UXConfirmationPaneStart"] = "UXConfirmationPaneStart";
+  TelemetryEvent["UXConfirmationPaneCompleted"] = "UXConfirmationPaneCompleted";
+  TelemetryEvent["UXLivechatwidgetStart"] = "UXLivechatwidgetStart";
+  TelemetryEvent["UXLivechatwidgetCompleted"] = "UXLivechatwidgetCompleted";
 })(TelemetryEvent || (exports.TelemetryEvent = TelemetryEvent = {}));
 class TelemetryConstants {
   static map(eventTypeOrScenarioType) {

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

@@ -220,6 +220,16 @@ _defineProperty(TelemetryHelper, "logLoadingEvent", (logLevel, payload) => {
   };
   _omnichannelChatComponents.BroadcastService.postMessage(telemetryEvent);
 });
+_defineProperty(TelemetryHelper, "logUIEvent", (logLevel, payload) => {
+  const telemetryEvent = {
+    eventName: (payload === null || payload === void 0 ? void 0 : payload.Event) ?? "",
+    logLevel: logLevel,
+    payload: {
+      ...payload
+    }
+  };
+  _omnichannelChatComponents.BroadcastService.postMessage(telemetryEvent);
+});
 _defineProperty(TelemetryHelper, "logActionEvent", (logLevel, payload) => {
   const telemetryEvent = {
     eventName: (payload === null || payload === void 0 ? void 0 : payload.Event) ?? "",

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ChatButtonStateful = void 0;
 var _TelemetryConstants = require("../../common/telemetry/TelemetryConstants");
 var _react = _interopRequireWildcard(require("react"));
+var _utils = require("../../common/utils");
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
 var _Constants = require("../../common/Constants");
 var _ConversationState = require("../../contexts/common/ConversationState");
@@ -13,13 +14,22 @@ var _LiveChatWidgetActionType = require("../../contexts/common/LiveChatWidgetAct
 var _TelemetryHelper = require("../../common/telemetry/TelemetryHelper");
 var _TelemetryManager = require("../../common/telemetry/TelemetryManager");
 var _defaultOutOfOfficeChatButtonStyleProps = require("./common/styleProps/defaultOutOfOfficeChatButtonStyleProps");
-var _utils = require("../../common/utils");
 var _useChatContextStore = _interopRequireDefault(require("../../hooks/useChatContextStore"));
 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; }
+let uiTimer;
 const ChatButtonStateful = props => {
   var _state$domainStates$l, _state$domainStates$l2, _buttonProps$controlP, _props$buttonProps, _props$buttonProps$co, _props$buttonProps2, _props$buttonProps2$c, _props$buttonProps3, _props$buttonProps3$c;
+  // this is to ensure the telemetry is set only once and start the load timer
+  (0, _react.useEffect)(() => {
+    uiTimer = (0, _utils.createTimer)();
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXLCWChatButtonStart
+    });
+  }, []);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [state, dispatch] = (0, _useChatContextStore.default)();
   const {
     buttonProps,
@@ -101,6 +111,10 @@ const ChatButtonStateful = props => {
         payload: true
       });
     }
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXLCWChatButtonCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
   }, []);
   return /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.ChatButton, {
     componentOverrides: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.componentOverrides,

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

@@ -5,19 +5,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ConfirmationPaneStateful = void 0;
 var _TelemetryConstants = require("../../common/telemetry/TelemetryConstants");
-var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("../../common/utils");
+var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
+var _Constants = require("../../common/Constants");
 var _DimLayer = require("../dimlayer/DimLayer");
 var _LiveChatWidgetActionType = require("../../contexts/common/LiveChatWidgetActionType");
 var _TelemetryHelper = require("../../common/telemetry/TelemetryHelper");
 var _useChatContextStore = _interopRequireDefault(require("../../hooks/useChatContextStore"));
-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; }
+let uiTimer;
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const ConfirmationPaneStateful = props => {
+  (0, _react.useEffect)(() => {
+    uiTimer = (0, _utils.createTimer)();
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXConfirmationPaneStart
+    });
+  }, []);
   const initialTabIndexMap = new Map();
   let elements = [];
   const [state, dispatch] = (0, _useChatContextStore.default)();
@@ -84,6 +92,10 @@ const ConfirmationPaneStateful = props => {
     _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
       Event: _TelemetryConstants.TelemetryEvent.ConfirmationPaneLoaded
     });
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXConfirmationPaneCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
   }, []);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DimLayer.DimLayer, {
     brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"

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

@@ -20,8 +20,16 @@ var _useFacadeChatSDKStore = _interopRequireDefault(require("../../hooks/useFaca
 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; }
+let uiTimer;
 const EmailTranscriptPaneStateful = props => {
   var _props$controlProps;
+  // this is to ensure the telemetry is set only once and start the load timer
+  (0, _react.useEffect)(() => {
+    uiTimer = (0, _utils.createTimer)();
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXEmailTranscriptPaneStart
+    });
+  }, []);
   const initialTabIndexMap = new Map();
   let elements = [];
   const [state, dispatch] = (0, _useChatContextStore.default)();
@@ -53,22 +61,24 @@ const EmailTranscriptPaneStateful = props => {
       attachmentMessage: (props === null || props === void 0 ? void 0 : props.attachmentMessage) ?? "The following attachment was uploaded during the conversation:"
     };
     try {
+      var _state$domainStates2, _state$domainStates2$;
       await (facadeChatSDK === null || facadeChatSDK === void 0 ? void 0 : facadeChatSDK.emailLiveChatTranscript(chatTranscriptBody, {
         liveChatContext
       }));
-      _NotificationHandler.NotificationHandler.notifySuccess(_NotificationScenarios.NotificationScenarios.EmailAddressSaved, _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts === null || _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts === void 0 ? void 0 : _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_SUCCESS);
+      _NotificationHandler.NotificationHandler.notifySuccess(_NotificationScenarios.NotificationScenarios.EmailAddressSaved, (state === null || state === void 0 ? void 0 : (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 ? void 0 : (_state$domainStates2$ = _state$domainStates2.middlewareLocalizedTexts) === null || _state$domainStates2$ === void 0 ? void 0 : _state$domainStates2$.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_SUCCESS) ?? (_defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts === null || _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts === void 0 ? void 0 : _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_SUCCESS));
       _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
         Event: _TelemetryConstants.TelemetryEvent.EmailTranscriptSent,
         Description: "Transcript sent to email successfully."
       });
     } catch (ex) {
+      var _state$domainStates3, _state$domainStates3$;
       _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.ERROR, {
         Event: _TelemetryConstants.TelemetryEvent.EmailTranscriptFailed,
         ExceptionDetails: {
           exception: ex
         }
       });
-      const message = (0, _utils.formatTemplateString)(_defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR, [email]);
+      const message = (0, _utils.formatTemplateString)((state === null || state === void 0 ? void 0 : (_state$domainStates3 = state.domainStates) === null || _state$domainStates3 === void 0 ? void 0 : (_state$domainStates3$ = _state$domainStates3.middlewareLocalizedTexts) === null || _state$domainStates3$ === void 0 ? void 0 : _state$domainStates3$.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR) ?? _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR, [email]);
       _NotificationHandler.NotificationHandler.notifyError(_NotificationScenarios.NotificationScenarios.EmailTranscriptError, (props === null || props === void 0 ? void 0 : props.bannerMessageOnError) ?? message);
     }
   }, [props.attachmentMessage, props.bannerMessageOnError, facadeChatSDK, state.domainStates.liveChatContext]);
@@ -103,6 +113,10 @@ const EmailTranscriptPaneStateful = props => {
     _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
       Event: _TelemetryConstants.TelemetryEvent.EmailTranscriptLoaded
     });
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXEmailTranscriptPaneCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
   }, [initialEmail]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DimLayer.DimLayer, {
     brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"

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

@@ -15,15 +15,24 @@ var _Audios = require("../../assets/Audios");
 var _NotificationHandler = require("../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler");
 var _NotificationScenarios = require("../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios");
 var _TelemetryHelper = require("../../common/telemetry/TelemetryHelper");
+var _utils = require("../../common/utils");
 var _DownloadTranscriptStateful = require("./downloadtranscriptstateful/DownloadTranscriptStateful");
 var _useChatContextStore = _interopRequireDefault(require("../../hooks/useChatContextStore"));
 var _useFacadeChatSDKStore = _interopRequireDefault(require("../../hooks/useFacadeChatSDKStore"));
 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; }
+let uiTimer;
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const FooterStateful = props => {
   var _footerProps$controlP3;
+  (0, _react.useEffect)(() => {
+    uiTimer = (0, _utils.createTimer)();
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXFooterStart
+    });
+  }, []);
   const [state, dispatch] = (0, _useChatContextStore.default)();
   // hideFooterDisplay - the purpose of this is to keep the footer always "active",
   // but hide it visually in certain states (e.g., loading state) and show in some other states (e.g. active state).
@@ -100,6 +109,12 @@ const FooterStateful = props => {
       }
     }
   }, [state.appStates.conversationState]);
+  (0, _react.useEffect)(() => {
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXFooterCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !hideFooterDisplay && /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.Footer, {
     componentOverrides: footerProps === null || footerProps === void 0 ? void 0 : footerProps.componentOverrides,
     controlProps: controlProps,

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

@@ -6,20 +6,28 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.HeaderStateful = void 0;
 var _TelemetryConstants = require("../../common/telemetry/TelemetryConstants");
 var _react = _interopRequireWildcard(require("react"));
+var _Constants = require("../../common/Constants");
 var _ConversationState = require("../../contexts/common/ConversationState");
+var _DraggableEventEmitter = _interopRequireDefault(require("../draggable/DraggableEventEmitter"));
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
 var _LiveChatWidgetActionType = require("../../contexts/common/LiveChatWidgetActionType");
 var _TelemetryHelper = require("../../common/telemetry/TelemetryHelper");
+var _utils = require("../../common/utils");
 var _defaultOutOfOfficeHeaderStyleProps = require("./common/styleProps/defaultOutOfOfficeHeaderStyleProps");
 var _useChatAdapterStore = _interopRequireDefault(require("../../hooks/useChatAdapterStore"));
 var _useChatContextStore = _interopRequireDefault(require("../../hooks/useChatContextStore"));
-var _Constants = require("../../common/Constants");
-var _DraggableEventEmitter = _interopRequireDefault(require("../draggable/DraggableEventEmitter"));
 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; }
+let uiTimer;
 const HeaderStateful = props => {
   var _state$domainStates$l, _state$domainStates$l2, _state$domainStates, _headerProps$controlP, _headerProps$controlP2, _headerProps$controlP3, _outOfOfficeHeaderPro, _state$domainStates3;
+  (0, _react.useEffect)(() => {
+    uiTimer = (0, _utils.createTimer)();
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXHeaderStart
+    });
+  }, []);
   const [state, dispatch] = (0, _useChatContextStore.default)();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [adapter] = (0, _useChatAdapterStore.default)();
@@ -114,6 +122,12 @@ const HeaderStateful = props => {
     elementId: outOfOperatingHours || state.appStates.conversationState === _ConversationState.ConversationState.OutOfOffice ? outOfOfficeControlProps.id : controlProps.id,
     targetWindow: props.draggableEventEmitterTargetWindow ?? window
   };
+  (0, _react.useEffect)(() => {
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXHeaderCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
+  }, []);
   if (props.draggable === true) {
     var _generalStyleProps;
     const styleProps = outOfOperatingHours || state.appStates.conversationState === _ConversationState.ConversationState.OutOfOffice ? outOfOfficeStyleProps : headerProps === null || headerProps === void 0 ? void 0 : headerProps.styleProps;

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

@@ -20,13 +20,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const LiveChatWidget = props => {
-  var _props$mock, _props$chatConfig, _props$chatConfig$Liv;
+  var _props$mock, _props$featureConfigP, _props$chatConfig, _props$chatConfig$Liv;
   const reducer = (0, _createReducer.createReducer)();
   const [state, dispatch] = (0, _react.useReducer)(reducer, (0, _LiveChatWidgetContextInitialState.getLiveChatWidgetContextInitialState)(props));
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [adapter, setAdapter] = (0, _react.useState)(undefined);
   const [facadeChatSDK, setFacadeChatSDK] = (0, _react.useState)(undefined);
   const chatSDK = (0, _getMockChatSDKIfApplicable.getMockChatSDKIfApplicable)(props.chatSDK, props === null || props === void 0 ? void 0 : (_props$mock = props.mock) === null || _props$mock === void 0 ? void 0 : _props$mock.type);
+  const disableReauthentication = ((_props$featureConfigP = props.featureConfigProps) === null || _props$featureConfigP === void 0 ? void 0 : _props$featureConfigP.disableReauthentication) === true;
   (0, _overridePropsOnMockIfApplicable.default)(props);
   if (!props.chatConfig) {
     throw new Error("chatConfig is required");
@@ -43,7 +44,7 @@ const LiveChatWidget = props => {
       "getAuthToken": props === null || props === void 0 ? void 0 : props.getAuthToken,
       //when type is not undefined, it means the SDK is mocked
       "isSDKMocked": !(0, _utils.isNullOrUndefined)(props === null || props === void 0 ? void 0 : (_props$mock2 = props.mock) === null || _props$mock2 === void 0 ? void 0 : _props$mock2.type)
-    }));
+    }, disableReauthentication));
   }
   return /*#__PURE__*/_react.default.createElement(_FacadeChatSDKStore.FacadeChatSDKStore.Provider, {
     value: [facadeChatSDK, setFacadeChatSDK]

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

@@ -20,19 +20,21 @@ const isInternetConnected = async () => {
     return false;
   }
 };
-const createInternetConnectionChangeHandler = async () => {
+const createInternetConnectionChangeHandler = async state => {
   const handler = async () => {
     const connected = await isInternetConnected();
     if (!connected) {
+      var _state$domainStates, _state$domainStates$m;
       _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.WARN, {
         Event: _TelemetryConstants.TelemetryEvent.NetworkDisconnected
       });
-      _NotificationHandler.NotificationHandler.notifyError(_NotificationScenarios.NotificationScenarios.InternetConnection, _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_NO_INTERNET_CONNECTION);
+      _NotificationHandler.NotificationHandler.notifyError(_NotificationScenarios.NotificationScenarios.InternetConnection, (state === null || state === void 0 ? void 0 : (_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : (_state$domainStates$m = _state$domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_BANNER_NO_INTERNET_CONNECTION) ?? _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_NO_INTERNET_CONNECTION);
     } else {
+      var _state$domainStates2, _state$domainStates2$;
       _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.WARN, {
         Event: _TelemetryConstants.TelemetryEvent.NetworkReconnected
       });
-      _NotificationHandler.NotificationHandler.notifySuccess(_NotificationScenarios.NotificationScenarios.InternetConnection, _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_INTERNET_BACK_ONLINE);
+      _NotificationHandler.NotificationHandler.notifySuccess(_NotificationScenarios.NotificationScenarios.InternetConnection, (state === null || state === void 0 ? void 0 : (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 ? void 0 : (_state$domainStates2$ = _state$domainStates2.middlewareLocalizedTexts) === null || _state$domainStates2$ === void 0 ? void 0 : _state$domainStates2$.MIDDLEWARE_BANNER_INTERNET_BACK_ONLINE) ?? _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_INTERNET_BACK_ONLINE);
       _omnichannelChatComponents.BroadcastService.postMessage({
         eventName: _TelemetryConstants.BroadcastEvent.NetworkReconnected
       });

package/lib/cjs/components/livechatwidget/interfaces/IFeatureConfigProps.js

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

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

@@ -62,8 +62,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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); }
+let uiTimer;
 const LiveChatWidgetStateful = props => {
   var _props$webChatContain, _props$styleProps, _props$controlProps, _props$controlProps3, _state$appStates7, _props$webChatContain5, _state$appStates14, _props$webChatContain7, _props$webChatContain8, _props$controlProps12, _props$draggableChatW, _props$draggableChatW2, _props$draggableChatW3, _props$draggableChatW4, _props$draggableChatW5, _livechatProps$webCha, _props$webChatContain9, _props$webChatContain10, _props$webChatContain11, _props$webChatContain12, _livechatProps$styleP, _livechatProps$contro, _livechatProps$contro2, _livechatProps$compon, _livechatProps$contro3, _livechatProps$compon2, _livechatProps$contro4, _livechatProps$compon3, _livechatProps$contro5, _livechatProps$compon4, _livechatProps$contro6, _livechatProps$compon5, _livechatProps$contro7, _livechatProps$compon6, _livechatProps$contro8, _livechatProps$compon7, _livechatProps$contro9, _livechatProps$compon8, _livechatProps$contro10, _livechatProps$contro11, _livechatProps$compon9, _livechatProps$contro12, _livechatProps$compon10, _livechatProps$contro13, _livechatProps$compon11, _livechatProps$compon12, _livechatProps$compon13;
+  (0, _react2.useEffect)(() => {
+    uiTimer = (0, _utils.createTimer)();
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXLivechatwidgetStart
+    });
+  }, []);
   const [state, dispatch] = (0, _useChatContextStore.default)();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [adapter, setAdapter] = (0, _useChatAdapterStore.default)();
@@ -220,7 +227,7 @@ const LiveChatWidgetStateful = props => {
     state.domainStates.confirmationState = _Constants.ConfirmationState.NotSet;
     setupClientDataStore();
     (0, _registerTelemetryLoggers.registerTelemetryLoggers)(props, dispatch);
-    (0, _createInternetConnectionChangeHandler.createInternetConnectionChangeHandler)();
+    (0, _createInternetConnectionChangeHandler.createInternetConnectionChangeHandler)(state);
     dispatch({
       type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_WIDGET_ELEMENT_ID,
       payload: widgetElementId
@@ -582,6 +589,26 @@ const LiveChatWidgetStateful = props => {
           eventName: _TelemetryConstants.BroadcastEvent.NewMessageNotification
         });
       });
+      facadeChatSDK === null || facadeChatSDK === void 0 ? void 0 : facadeChatSDK.onAgentEndSession(event => {
+        var _inMemoryState$appSta6;
+        const inMemoryState = (0, _createReducer.executeReducer)(state, {
+          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.GET_IN_MEMORY_STATE,
+          payload: null
+        });
+        if ("participantsRemoved" in event && (inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$appSta6 = inMemoryState.appStates) === null || _inMemoryState$appSta6 === void 0 ? void 0 : _inMemoryState$appSta6.conversationState) === _ConversationState.ConversationState.Active) {
+          setWebChatStyles(styles => {
+            return {
+              ...styles,
+              hideSendBox: true
+            };
+          });
+          _TelemetryHelper.TelemetryHelper.logSDKEvent(_TelemetryConstants.LogLevel.INFO, {
+            Event: _TelemetryConstants.TelemetryEvent.ParticipantsRemovedEvent,
+            Description: "Participants removed event received."
+          });
+          return;
+        }
+      });
     }
     if (state.appStates.conversationState === _ConversationState.ConversationState.InActive) {
       var _props$webChatContain2, _props$webChatContain3;
@@ -711,13 +738,13 @@ const LiveChatWidgetStateful = props => {
 
   // Handle Chat disconnect cases
   (0, _react2.useEffect)(() => {
-    var _inMemoryState$appSta6;
+    var _inMemoryState$appSta7;
     const inMemoryState = (0, _createReducer.executeReducer)(state, {
       type: _LiveChatWidgetActionType.LiveChatWidgetActionType.GET_IN_MEMORY_STATE,
       payload: null
     });
     (0, _chatDisconnectHelper.handleChatDisconnect)(props, inMemoryState, setWebChatStyles);
-    const chatDisconnectState = inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$appSta6 = inMemoryState.appStates) === null || _inMemoryState$appSta6 === void 0 ? void 0 : _inMemoryState$appSta6.chatDisconnectEventReceived;
+    const chatDisconnectState = inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$appSta7 = inMemoryState.appStates) === null || _inMemoryState$appSta7 === void 0 ? void 0 : _inMemoryState$appSta7.chatDisconnectEventReceived;
     if (chatDisconnectState && adapter) {
       try {
         adapter.end();
@@ -739,6 +766,12 @@ const LiveChatWidgetStateful = props => {
       payload: (_props$webChatContain6 = props.webChatContainerProps) === null || _props$webChatContain6 === void 0 ? void 0 : _props$webChatContain6.renderingMiddlewareProps
     });
   }, [(_props$webChatContain7 = props.webChatContainerProps) === null || _props$webChatContain7 === void 0 ? void 0 : _props$webChatContain7.renderingMiddlewareProps]);
+  (0, _react2.useEffect)(() => {
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXLivechatwidgetCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
+  }, []);
   const initiateEndChatOnBrowserUnload = () => {
     var _DataStoreManager$cli;
     _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
@@ -783,7 +816,7 @@ const LiveChatWidgetStateful = props => {
   const chatWidgetDraggableConfig = {
     elementId: widgetElementId,
     channel: ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.widgetInstanceId) ?? "lcw",
-    disabled: ((_props$draggableChatW = props.draggableChatWidgetProps) === null || _props$draggableChatW === void 0 ? void 0 : _props$draggableChatW.disabled) === true ?? false // Draggable by default, unless explicitly disabled
+    disabled: ((_props$draggableChatW = props.draggableChatWidgetProps) === null || _props$draggableChatW === void 0 ? void 0 : _props$draggableChatW.disabled) !== true // Draggable by default, unless explicitly disabled
   };
 
   // Disable receiving IDraggableEvent in current window

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

@@ -6,19 +6,27 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.LoadingPaneStateful = void 0;
 var _TelemetryConstants = require("../../common/telemetry/TelemetryConstants");
 var _react = _interopRequireWildcard(require("react"));
+var _utils = require("../../common/utils");
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
 var _TelemetryHelper = require("../../common/telemetry/TelemetryHelper");
 var _defaultgeneralLoadingPaneStyleProps = require("./common/defaultStyleProps/defaultgeneralLoadingPaneStyleProps");
-var _utils = require("../../common/utils");
+var _errorUILoadingPaneStyleProps = require("./common/errorUIStyleProps/errorUILoadingPaneStyleProps");
 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; }
+let uiTimer;
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const LoadingPaneStateful = props => {
   var _loadingPaneProps$sty, _startChatErrorPanePr, _startChatErrorPanePr2;
+  (0, _react.useEffect)(() => {
+    uiTimer = (0, _utils.createTimer)();
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXLoadingPaneStart
+    });
+  }, []);
   const [state] = (0, _useChatContextStore.default)();
   const {
     loadingPaneProps,
@@ -61,6 +69,16 @@ const LoadingPaneStateful = props => {
       Event: _TelemetryConstants.TelemetryEvent.LoadingPaneLoaded,
       Description: "Loading pane loaded."
     });
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXLoadingPaneCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
+    return () => {
+      _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+        Event: _TelemetryConstants.TelemetryEvent.LoadingPaneUnloaded,
+        Description: "Loading pane unmount."
+      });
+    };
   }, []);
   return /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.LoadingPane, {
     componentOverrides: loadingPaneProps === null || loadingPaneProps === void 0 ? void 0 : loadingPaneProps.componentOverrides,

package/lib/cjs/components/notificationpanestateful/NotificationPaneStateful.js

@@ -4,23 +4,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.NotificationPaneStateful = void 0;
+var _Constants = require("../../common/Constants");
+var _TelemetryConstants = require("../../common/telemetry/TelemetryConstants");
 var _react = _interopRequireWildcard(require("react"));
+var _LiveChatWidgetActionType = require("../../contexts/common/LiveChatWidgetActionType");
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
-var _botframeworkWebchat = require("botframework-webchat");
 var _NotificationScenarios = require("../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios");
-var _useChatAdapterStore = _interopRequireDefault(require("../../hooks/useChatAdapterStore"));
-var _useChatContextStore = _interopRequireDefault(require("../../hooks/useChatContextStore"));
 var _TelemetryHelper = require("../../common/telemetry/TelemetryHelper");
-var _TelemetryConstants = require("../../common/telemetry/TelemetryConstants");
-var _LiveChatWidgetActionType = require("../../contexts/common/LiveChatWidgetActionType");
-var _Constants = require("../../common/Constants");
-var _defaultChatDisconnectStyleProps = require("./defaultProps/defaultChatDisconnectStyleProps");
+var _utils = require("../../common/utils");
 var _defaultChatDisconnectControlProps = require("./defaultProps/defaultChatDisconnectControlProps");
+var _defaultChatDisconnectStyleProps = require("./defaultProps/defaultChatDisconnectStyleProps");
+var _botframeworkWebchat = require("botframework-webchat");
+var _useChatAdapterStore = _interopRequireDefault(require("../../hooks/useChatAdapterStore"));
+var _useChatContextStore = _interopRequireDefault(require("../../hooks/useChatContextStore"));
 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; }
+let uiTimer;
 const NotificationPaneStateful = props => {
   var _state$domainStates, _state$domainStates3;
+  (0, _react.useEffect)(() => {
+    uiTimer = (0, _utils.createTimer)();
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXNotificationPaneStart
+    });
+  }, []);
   const {
     notificationPaneProps,
     notificationScenarioType,
@@ -170,6 +178,12 @@ const NotificationPaneStateful = props => {
     // TODO additional scenarios to be added...
   }
 
+  (0, _react.useEffect)(() => {
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXNotificationPaneCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.NotificationPane, genericPropsObj);
 };
 exports.NotificationPaneStateful = NotificationPaneStateful;