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

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

@@ -1,15 +1,22 @@
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
-import { ConfirmationPane } from "@microsoft/omnichannel-chat-components";
 import React, { useEffect } from "react";
-import { findAllFocusableElement, findParentFocusableElementsWithoutChildContainer, preventFocusToMoveOutOfElement, setFocusOnElement, setFocusOnSendBox, setTabIndices } from "../../common/utils";
+import { createTimer, findAllFocusableElement, findParentFocusableElementsWithoutChildContainer, preventFocusToMoveOutOfElement, setFocusOnElement, setFocusOnSendBox, setTabIndices } from "../../common/utils";
+import { ConfirmationPane } from "@microsoft/omnichannel-chat-components";
+import { ConfirmationState } from "../../common/Constants";
 import { DimLayer } from "../dimlayer/DimLayer";
 import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import useChatContextStore from "../../hooks/useChatContextStore";
-import { ConfirmationState } from "../../common/Constants";
+let uiTimer;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const ConfirmationPaneStateful = props => {
+  useEffect(() => {
+    uiTimer = createTimer();
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXConfirmationPaneStart
+    });
+  }, []);
   const initialTabIndexMap = new Map();
   let elements = [];
   const [state, dispatch] = useChatContextStore();
@@ -76,6 +83,10 @@ export const ConfirmationPaneStateful = props => {
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.ConfirmationPaneLoaded
     });
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXConfirmationPaneCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DimLayer, {
     brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"

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

@@ -1,6 +1,6 @@
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useCallback, useEffect, useState } from "react";
-import { findAllFocusableElement, findParentFocusableElementsWithoutChildContainer, formatTemplateString, preventFocusToMoveOutOfElement, setFocusOnElement, setFocusOnSendBox, setTabIndices } from "../../common/utils";
+import { createTimer, findAllFocusableElement, findParentFocusableElementsWithoutChildContainer, formatTemplateString, preventFocusToMoveOutOfElement, setFocusOnElement, setFocusOnSendBox, setTabIndices } from "../../common/utils";
 import { DimLayer } from "../dimlayer/DimLayer";
 import { InputValidationPane } from "@microsoft/omnichannel-chat-components";
 import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
@@ -11,8 +11,16 @@ import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { defaultMiddlewareLocalizedTexts } from "../webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts";
 import useChatContextStore from "../../hooks/useChatContextStore";
 import useFacadeSDKStore from "../../hooks/useFacadeChatSDKStore";
+let uiTimer;
 export const EmailTranscriptPaneStateful = props => {
   var _props$controlProps;
+  // this is to ensure the telemetry is set only once and start the load timer
+  useEffect(() => {
+    uiTimer = createTimer();
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXEmailTranscriptPaneStart
+    });
+  }, []);
   const initialTabIndexMap = new Map();
   let elements = [];
   const [state, dispatch] = useChatContextStore();
@@ -44,22 +52,24 @@ export 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.notifySuccess(NotificationScenarios.EmailAddressSaved, defaultMiddlewareLocalizedTexts === null || defaultMiddlewareLocalizedTexts === void 0 ? void 0 : defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_SUCCESS);
+      NotificationHandler.notifySuccess(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 === null || defaultMiddlewareLocalizedTexts === void 0 ? void 0 : defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_SUCCESS));
       TelemetryHelper.logActionEvent(LogLevel.INFO, {
         Event: TelemetryEvent.EmailTranscriptSent,
         Description: "Transcript sent to email successfully."
       });
     } catch (ex) {
+      var _state$domainStates3, _state$domainStates3$;
       TelemetryHelper.logActionEvent(LogLevel.ERROR, {
         Event: TelemetryEvent.EmailTranscriptFailed,
         ExceptionDetails: {
           exception: ex
         }
       });
-      const message = formatTemplateString(defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR, [email]);
+      const message = 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.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR, [email]);
       NotificationHandler.notifyError(NotificationScenarios.EmailTranscriptError, (props === null || props === void 0 ? void 0 : props.bannerMessageOnError) ?? message);
     }
   }, [props.attachmentMessage, props.bannerMessageOnError, facadeChatSDK, state.domainStates.liveChatContext]);
@@ -94,6 +104,10 @@ export const EmailTranscriptPaneStateful = props => {
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.EmailTranscriptLoaded
     });
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXEmailTranscriptPaneCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
   }, [initialEmail]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DimLayer, {
     brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"

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

@@ -9,13 +9,21 @@ import { NewMessageNotificationSoundBase64 } from "../../assets/Audios";
 import { NotificationHandler } from "../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler";
 import { NotificationScenarios } from "../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
+import { createTimer } from "../../common/utils";
 import { downloadTranscript } from "./downloadtranscriptstateful/DownloadTranscriptStateful";
 import useChatContextStore from "../../hooks/useChatContextStore";
 import useFacadeSDKStore from "../../hooks/useFacadeChatSDKStore";
+let uiTimer;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const FooterStateful = props => {
   var _footerProps$controlP3;
+  useEffect(() => {
+    uiTimer = createTimer();
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXFooterStart
+    });
+  }, []);
   const [state, dispatch] = useChatContextStore();
   // 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).
@@ -92,6 +100,12 @@ export const FooterStateful = props => {
       }
     }
   }, [state.appStates.conversationState]);
+  useEffect(() => {
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXFooterCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
+  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, !hideFooterDisplay && /*#__PURE__*/React.createElement(Footer, {
     componentOverrides: footerProps === null || footerProps === void 0 ? void 0 : footerProps.componentOverrides,
     controlProps: controlProps,

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

@@ -1,16 +1,24 @@
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect, useRef, useState } from "react";
+import { ConfirmationState } from "../../common/Constants";
 import { ConversationState } from "../../contexts/common/ConversationState";
+import DraggableEventEmitter from "../draggable/DraggableEventEmitter";
 import { Header } from "@microsoft/omnichannel-chat-components";
 import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
+import { createTimer } from "../../common/utils";
 import { defaultOutOfOfficeHeaderStyleProps } from "./common/styleProps/defaultOutOfOfficeHeaderStyleProps";
 import useChatAdapterStore from "../../hooks/useChatAdapterStore";
 import useChatContextStore from "../../hooks/useChatContextStore";
-import { ConfirmationState } from "../../common/Constants";
-import DraggableEventEmitter from "../draggable/DraggableEventEmitter";
+let uiTimer;
 export const HeaderStateful = props => {
   var _state$domainStates$l, _state$domainStates$l2, _state$domainStates, _headerProps$controlP, _headerProps$controlP2, _headerProps$controlP3, _outOfOfficeHeaderPro, _state$domainStates3;
+  useEffect(() => {
+    uiTimer = createTimer();
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXHeaderStart
+    });
+  }, []);
   const [state, dispatch] = useChatContextStore();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [adapter] = useChatAdapterStore();
@@ -105,6 +113,12 @@ export const HeaderStateful = props => {
     elementId: outOfOperatingHours || state.appStates.conversationState === ConversationState.OutOfOffice ? outOfOfficeControlProps.id : controlProps.id,
     targetWindow: props.draggableEventEmitterTargetWindow ?? window
   };
+  useEffect(() => {
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXHeaderCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
+  }, []);
   if (props.draggable === true) {
     var _generalStyleProps;
     const styleProps = outOfOperatingHours || state.appStates.conversationState === ConversationState.OutOfOffice ? outOfOfficeStyleProps : headerProps === null || headerProps === void 0 ? void 0 : headerProps.styleProps;

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

@@ -11,13 +11,14 @@ import { getMockChatSDKIfApplicable } from "./common/getMockChatSDKIfApplicable"
 import { isNullOrUndefined } from "../../common/utils";
 import overridePropsOnMockIfApplicable from "./common/overridePropsOnMockIfApplicable";
 export const LiveChatWidget = props => {
-  var _props$mock, _props$chatConfig, _props$chatConfig$Liv;
+  var _props$mock, _props$featureConfigP, _props$chatConfig, _props$chatConfig$Liv;
   const reducer = createReducer();
   const [state, dispatch] = useReducer(reducer, getLiveChatWidgetContextInitialState(props));
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [adapter, setAdapter] = useState(undefined);
   const [facadeChatSDK, setFacadeChatSDK] = useState(undefined);
   const chatSDK = 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;
   overridePropsOnMockIfApplicable(props);
   if (!props.chatConfig) {
     throw new Error("chatConfig is required");
@@ -34,7 +35,7 @@ export 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": !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.createElement(FacadeChatSDKStore.Provider, {
     value: [facadeChatSDK, setFacadeChatSDK]

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

@@ -14,19 +14,21 @@ const isInternetConnected = async () => {
     return false;
   }
 };
-export const createInternetConnectionChangeHandler = async () => {
+export const createInternetConnectionChangeHandler = async state => {
   const handler = async () => {
     const connected = await isInternetConnected();
     if (!connected) {
+      var _state$domainStates, _state$domainStates$m;
       TelemetryHelper.logActionEvent(LogLevel.WARN, {
         Event: TelemetryEvent.NetworkDisconnected
       });
-      NotificationHandler.notifyError(NotificationScenarios.InternetConnection, defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_NO_INTERNET_CONNECTION);
+      NotificationHandler.notifyError(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.MIDDLEWARE_BANNER_NO_INTERNET_CONNECTION);
     } else {
+      var _state$domainStates2, _state$domainStates2$;
       TelemetryHelper.logActionEvent(LogLevel.WARN, {
         Event: TelemetryEvent.NetworkReconnected
       });
-      NotificationHandler.notifySuccess(NotificationScenarios.InternetConnection, defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_INTERNET_BACK_ONLINE);
+      NotificationHandler.notifySuccess(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.MIDDLEWARE_BANNER_INTERNET_BACK_ONLINE);
       BroadcastService.postMessage({
         eventName: BroadcastEvent.NetworkReconnected
       });

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

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

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

@@ -54,8 +54,15 @@ import { startProactiveChat } from "../common/startProactiveChat";
 import useChatAdapterStore from "../../../hooks/useChatAdapterStore";
 import useChatContextStore from "../../../hooks/useChatContextStore";
 import useFacadeSDKStore from "../../../hooks/useFacadeChatSDKStore";
+let uiTimer;
 export 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;
+  useEffect(() => {
+    uiTimer = createTimer();
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXLivechatwidgetStart
+    });
+  }, []);
   const [state, dispatch] = useChatContextStore();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [adapter, setAdapter] = useChatAdapterStore();
@@ -212,7 +219,7 @@ export const LiveChatWidgetStateful = props => {
     state.domainStates.confirmationState = ConfirmationState.NotSet;
     setupClientDataStore();
     registerTelemetryLoggers(props, dispatch);
-    createInternetConnectionChangeHandler();
+    createInternetConnectionChangeHandler(state);
     dispatch({
       type: LiveChatWidgetActionType.SET_WIDGET_ELEMENT_ID,
       payload: widgetElementId
@@ -574,6 +581,26 @@ export const LiveChatWidgetStateful = props => {
           eventName: BroadcastEvent.NewMessageNotification
         });
       });
+      facadeChatSDK === null || facadeChatSDK === void 0 ? void 0 : facadeChatSDK.onAgentEndSession(event => {
+        var _inMemoryState$appSta6;
+        const inMemoryState = executeReducer(state, {
+          type: 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.Active) {
+          setWebChatStyles(styles => {
+            return {
+              ...styles,
+              hideSendBox: true
+            };
+          });
+          TelemetryHelper.logSDKEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.ParticipantsRemovedEvent,
+            Description: "Participants removed event received."
+          });
+          return;
+        }
+      });
     }
     if (state.appStates.conversationState === ConversationState.InActive) {
       var _props$webChatContain2, _props$webChatContain3;
@@ -703,13 +730,13 @@ export const LiveChatWidgetStateful = props => {
 
   // Handle Chat disconnect cases
   useEffect(() => {
-    var _inMemoryState$appSta6;
+    var _inMemoryState$appSta7;
     const inMemoryState = executeReducer(state, {
       type: LiveChatWidgetActionType.GET_IN_MEMORY_STATE,
       payload: null
     });
     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();
@@ -731,6 +758,12 @@ export 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]);
+  useEffect(() => {
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXLivechatwidgetCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
+  }, []);
   const initiateEndChatOnBrowserUnload = () => {
     var _DataStoreManager$cli;
     TelemetryHelper.logActionEvent(LogLevel.INFO, {
@@ -775,7 +808,7 @@ export 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/esm/components/loadingpanestateful/LoadingPaneStateful.js

@@ -1,16 +1,23 @@
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
+import { createTimer, findAllFocusableElement } from "../../common/utils";
 import { LoadingPane } from "@microsoft/omnichannel-chat-components";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { defaultGeneralLoadingPaneStyleProps } from "./common/defaultStyleProps/defaultgeneralLoadingPaneStyleProps";
-import { findAllFocusableElement } from "../../common/utils";
+import { errorUILoadingPaneStyleProps } from "./common/errorUIStyleProps/errorUILoadingPaneStyleProps";
 import useChatContextStore from "../../hooks/useChatContextStore";
 import useWindowDimensions from "../../hooks/useWindowDimensions";
-import { errorUILoadingPaneStyleProps } from "./common/errorUIStyleProps/errorUILoadingPaneStyleProps";
+let uiTimer;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const LoadingPaneStateful = props => {
   var _loadingPaneProps$sty, _startChatErrorPanePr, _startChatErrorPanePr2;
+  useEffect(() => {
+    uiTimer = createTimer();
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXLoadingPaneStart
+    });
+  }, []);
   const [state] = useChatContextStore();
   const {
     loadingPaneProps,
@@ -53,6 +60,16 @@ export const LoadingPaneStateful = props => {
       Event: TelemetryEvent.LoadingPaneLoaded,
       Description: "Loading pane loaded."
     });
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXLoadingPaneCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
+    return () => {
+      TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.LoadingPaneUnloaded,
+        Description: "Loading pane unmount."
+      });
+    };
   }, []);
   return /*#__PURE__*/React.createElement(LoadingPane, {
     componentOverrides: loadingPaneProps === null || loadingPaneProps === void 0 ? void 0 : loadingPaneProps.componentOverrides,

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

@@ -1,18 +1,26 @@
+import { ConfirmationState, NotificationPaneConstants } from "../../common/Constants";
+import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect, useRef } from "react";
+import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
 import { NotificationPane } from "@microsoft/omnichannel-chat-components";
+import { NotificationScenarios } from "../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
+import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
+import { createTimer } from "../../common/utils";
+import { defaultChatDisconnectControlProps } from "./defaultProps/defaultChatDisconnectControlProps";
+import { defaultChatDisconnectStyleProps } from "./defaultProps/defaultChatDisconnectStyleProps";
 import { hooks } from "botframework-webchat";
 import { useCallback } from "react";
-import { NotificationScenarios } from "../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
 import useChatAdapterStore from "../../hooks/useChatAdapterStore";
 import useChatContextStore from "../../hooks/useChatContextStore";
-import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
-import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
-import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
-import { ConfirmationState, NotificationPaneConstants } from "../../common/Constants";
-import { defaultChatDisconnectStyleProps } from "./defaultProps/defaultChatDisconnectStyleProps";
-import { defaultChatDisconnectControlProps } from "./defaultProps/defaultChatDisconnectControlProps";
+let uiTimer;
 export const NotificationPaneStateful = props => {
   var _state$domainStates, _state$domainStates3;
+  useEffect(() => {
+    uiTimer = createTimer();
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXNotificationPaneStart
+    });
+  }, []);
   const {
     notificationPaneProps,
     notificationScenarioType,
@@ -162,6 +170,12 @@ export const NotificationPaneStateful = props => {
     // TODO additional scenarios to be added...
   }
 
+  useEffect(() => {
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXNotificationPaneCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
+  }, []);
   return /*#__PURE__*/React.createElement(NotificationPane, genericPropsObj);
 };
 export default NotificationPaneStateful;

package/lib/esm/components/ooohpanestateful/OOOHPaneStateful.js

@@ -1,12 +1,19 @@
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
+import { createTimer, findAllFocusableElement } from "../../common/utils";
 import { OutOfOfficeHoursPane } from "@microsoft/omnichannel-chat-components";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { defaultGeneralStyleProps } from "./common/defaultStyleProps/defaultgeneralOOOHPaneStyleProps";
-import { findAllFocusableElement } from "../../common/utils";
 import useChatContextStore from "../../hooks/useChatContextStore";
+let uiTimer;
 export const OutOfOfficeHoursPaneStateful = props => {
   var _props$styleProps;
+  useEffect(() => {
+    uiTimer = createTimer();
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXOOHPaneStart
+    });
+  }, []);
   const [state] = useChatContextStore();
   const generalStyleProps = Object.assign({}, defaultGeneralStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps);
   const styleProps = {
@@ -28,6 +35,10 @@ export const OutOfOfficeHoursPaneStateful = props => {
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.OutOfOfficePaneLoaded
     });
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXOOHPaneCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
   }, []);
   return /*#__PURE__*/React.createElement(OutOfOfficeHoursPane, {
     componentOverrides: props.componentOverrides,

package/lib/esm/components/postchatloadingpanestateful/PostChatLoadingPaneStateful.js

@@ -1,12 +1,19 @@
+import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
+import { createTimer, findAllFocusableElement } from "../../common/utils";
 import { LoadingPane } from "@microsoft/omnichannel-chat-components";
+import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { defaultGeneralPostChatLoadingPaneStyleProps } from "./common/defaultgeneralPostChatLoadingPaneStyleProps";
-import { findAllFocusableElement } from "../../common/utils";
 import useChatContextStore from "../../hooks/useChatContextStore";
-import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
-import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+let uiTimer;
 export const PostChatLoadingPaneStateful = props => {
   var _props$styleProps;
+  useEffect(() => {
+    uiTimer = createTimer();
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXPostChatLoadingPaneStart
+    });
+  }, []);
   const [state] = useChatContextStore();
   const generalStyleProps = Object.assign({}, defaultGeneralPostChatLoadingPaneStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps);
   const styleProps = {
@@ -33,6 +40,10 @@ export const PostChatLoadingPaneStateful = props => {
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.PostChatSurveyLoadingPaneLoaded
     });
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXPostChatLoadingPaneCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
   }, []);
   return /*#__PURE__*/React.createElement(LoadingPane, {
     componentOverrides: props.componentOverrides,

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

@@ -1,7 +1,7 @@
 import { HtmlAttributeNames, Regex } from "../../common/Constants";
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
-import { extractPreChatSurveyResponseValues, findAllFocusableElement, getStateFromCache, getWidgetCacheId, isUndefinedOrEmpty, parseAdaptiveCardPayload } from "../../common/utils";
+import { createTimer, extractPreChatSurveyResponseValues, findAllFocusableElement, getStateFromCache, getWidgetCacheId, isUndefinedOrEmpty, parseAdaptiveCardPayload } from "../../common/utils";
 import { ConversationState } from "../../contexts/common/ConversationState";
 import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
 import MarkdownIt from "markdown-it";
@@ -10,10 +10,18 @@ import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { defaultGeneralPreChatSurveyPaneStyleProps } from "./common/defaultStyles/defaultGeneralPreChatSurveyPaneStyleProps";
 import { defaultPreChatSurveyLocalizedTexts } from "./common/defaultProps/defaultPreChatSurveyLocalizedTexts";
 import useChatContextStore from "../../hooks/useChatContextStore";
+let uiTimer;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const PreChatSurveyPaneStateful = props => {
   var _surveyProps$stylePro, _props$surveyProps, _props$surveyProps$co;
+  useEffect(() => {
+    uiTimer = createTimer();
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXPrechatPaneStart
+    });
+  }, []);
+
   // Set MarkDown global variable to be used for prechat adaptive cards
   window["markdownit"] = MarkdownIt;
   const [state, dispatch] = useChatContextStore();
@@ -136,6 +144,10 @@ export const PreChatSurveyPaneStateful = props => {
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.PrechatSurveyLoaded
     });
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXPrechatPaneCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
   }, []);
   return /*#__PURE__*/React.createElement(PreChatSurveyPane, {
     controlProps: controlProps,

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

@@ -9,10 +9,17 @@ import { ProactiveChatPane } from "@microsoft/omnichannel-chat-components";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { TelemetryTimers } from "../../common/telemetry/TelemetryManager";
 import useChatContextStore from "../../hooks/useChatContextStore";
+let uiTimer;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const ProactiveChatPaneStateful = props => {
   var _proactiveChatProps$c;
+  useEffect(() => {
+    uiTimer = createTimer();
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXProactiveChatPaneStart
+    });
+  }, []);
   const [state, dispatch] = useChatContextStore();
   const {
     proactiveChatProps,
@@ -114,6 +121,10 @@ export const ProactiveChatPaneStateful = props => {
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.ProactiveChatPaneLoaded
     });
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXProactiveChatCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
     return () => {
       clearTimeout(timeoutEvent);
     };

package/lib/esm/components/reconnectchatpanestateful/ReconnectChatPaneStateful.js

@@ -1,13 +1,21 @@
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
+import { createTimer, setFocusOnElement } from "../../common/utils";
 import { ConversationState } from "../../contexts/common/ConversationState";
 import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
 import { ReconnectChatPane } from "@microsoft/omnichannel-chat-components";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
-import { setFocusOnElement } from "../../common/utils";
 import useChatContextStore from "../../hooks/useChatContextStore";
 import useFacadeChatSDKStore from "../../hooks/useFacadeChatSDKStore";
+let uiTimer;
 export const ReconnectChatPaneStateful = props => {
+  useEffect(() => {
+    uiTimer = createTimer();
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXReconnectChatPaneStart,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
+  }, []);
   const [state, dispatch] = useChatContextStore();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   //const chatSDK: any = useChatSDKStore();
@@ -91,6 +99,9 @@ export const ReconnectChatPaneStateful = props => {
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.ReconnectChatPaneLoaded
     });
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXReconnectChatCompleted
+    });
   }, []);
   return /*#__PURE__*/React.createElement(ReconnectChatPane, {
     componentOverrides: reconnectChatProps === null || reconnectChatProps === void 0 ? void 0 : reconnectChatProps.componentOverrides,

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

@@ -1,18 +1,25 @@
+import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
+import { createTimer, findAllFocusableElement } from "../../common/utils";
 import { LoadingPane } from "@microsoft/omnichannel-chat-components";
-import { findAllFocusableElement } from "../../common/utils";
-import useChatContextStore from "../../hooks/useChatContextStore";
+import { StartChatErrorPaneConstants } from "../../common/Constants";
+import { StartChatFailureType } from "../../contexts/common/StartChatFailureType";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
-import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import { defaultStartChatErrorPaneGeneralStyleProps } from "./common/defaultStartChatErrorPaneGeneralStyleProps";
-import { defaultStartChatErrorPaneTitleStyleProps } from "./common/defaultStartChatErrorPaneTitleStyleProps";
-import { defaultStartChatErrorPaneSubtitleStyleProps } from "./common/defaultStartChatErrorPaneSubtitleStyleProps";
-import { defaultStartChatErrorPaneIconStyleProps } from "./common/defaultStartChatErrorPaneIconStyleProps";
 import { defaultStartChatErrorPaneIconImageStyleProps } from "./common/defaultStartChatErrorPaneIconImageProps";
-import { StartChatErrorPaneConstants } from "../../common/Constants";
-import { StartChatFailureType } from "../../contexts/common/StartChatFailureType";
+import { defaultStartChatErrorPaneIconStyleProps } from "./common/defaultStartChatErrorPaneIconStyleProps";
+import { defaultStartChatErrorPaneSubtitleStyleProps } from "./common/defaultStartChatErrorPaneSubtitleStyleProps";
+import { defaultStartChatErrorPaneTitleStyleProps } from "./common/defaultStartChatErrorPaneTitleStyleProps";
+import useChatContextStore from "../../hooks/useChatContextStore";
+let uiTimer;
 export const StartChatErrorPaneStateful = startChatErrorPaneProps => {
   var _startChatErrorPanePr, _startChatErrorPanePr2, _startChatErrorPanePr3, _startChatErrorPanePr4, _startChatErrorPanePr5, _startChatErrorPanePr6, _startChatErrorPanePr7, _startChatErrorPanePr8, _startChatErrorPanePr9, _startChatErrorPanePr10, _startChatErrorPanePr11;
+  useEffect(() => {
+    uiTimer = createTimer();
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXStartChatErrorPaneStart
+    });
+  }, []);
   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);
@@ -61,6 +68,10 @@ export const StartChatErrorPaneStateful = startChatErrorPaneProps => {
       Event: TelemetryEvent.StartChatErrorPaneLoaded,
       Description: "Start chat error pane loaded."
     });
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXStartChatErrorCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
   }, []);
   return /*#__PURE__*/React.createElement(LoadingPane, {
     componentOverrides: startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : startChatErrorPaneProps.componentOverrides,