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

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();
@@ -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,

package/lib/esm/components/webchatcontainerstateful/WebChatContainerStateful.js

@@ -3,6 +3,7 @@
 import { Stack } from "@fluentui/react";
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
+import { createTimer, setFocusOnSendBox } from "../../common/utils";
 import { BotMagicCodeStore } from "./webchatcontroller/BotMagicCodeStore";
 import { Components } from "botframework-webchat";
 import { Constants } from "../../common/Constants";
@@ -19,8 +20,8 @@ import { defaultSentMessageAnchorStyles } from "./webchatcontroller/middlewares/
 import { defaultSystemMessageBoxStyles } from "./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultSystemMessageBoxStyles";
 import { defaultUserMessageBoxStyles } from "./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultUserMessageBoxStyles";
 import { defaultWebChatContainerStatefulProps } from "./common/defaultProps/defaultWebChatContainerStatefulProps";
-import { setFocusOnSendBox } from "../../common/utils";
 import { useChatContextStore } from "../..";
+let uiTimer;
 const broadcastChannelMessageEvent = "message";
 const postActivity = activity => {
   // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -48,6 +49,12 @@ const createMagicCodeSuccessResponse = signin => {
 };
 export const WebChatContainerStateful = props => {
   var _webChatContainerProp, _webChatContainerProp2, _webChatContainerProp3, _webChatContainerProp4, _webChatContainerProp5, _webChatContainerProp6, _webChatContainerProp7, _props$webChatContain5, _props$webChatContain6, _defaultWebChatContai, _props$webChatContain7, _props$webChatContain8, _defaultWebChatContai2, _webChatContainerProp8, _webChatContainerProp9, _webChatContainerProp10, _webChatContainerProp11, _webChatContainerProp12, _webChatContainerProp13, _webChatContainerProp14, _webChatContainerProp15, _props$webChatContain9, _props$webChatContain10;
+  useEffect(() => {
+    uiTimer = createTimer();
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXWebchatContainerCompleted
+    });
+  }, []);
   const {
     BasicWebChat
   } = Components;
@@ -143,6 +150,12 @@ export const WebChatContainerStateful = props => {
     };
     magicCodeBroadcastChannel.addEventListener(broadcastChannelMessageEvent, eventListener);
   }, []);
+  useEffect(() => {
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXWebchatContainerCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
+  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, `
         .webchat__stacked-layout__content .ac-pushButton {
             cursor: pointer;

package/lib/esm/components/webchatcontainerstateful/common/defaultStyles/defaultWebChatStyles.js

@@ -53,5 +53,6 @@ export const defaultWebChatStyles = {
     "<3": "❤️",
     "</3": "💔",
     "<\\3": "💔"
-  }
+  },
+  uploadMultiple: false
 };

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/enums/WebChatActionType.js

@@ -21,4 +21,5 @@ export let WebChatActionType;
   WebChatActionType["WEB_CHAT_DISMISS_NOTIFICATION"] = "WEB_CHAT/DISMISS_NOTIFICATION";
   WebChatActionType["WEB_CHAT_SET_SEND_BOX"] = "WEB_CHAT/SET_SEND_BOX";
   WebChatActionType["WEB_CHAT_SEND_FILES"] = "WEB_CHAT/SEND_FILES";
+  WebChatActionType["WEB_CHAT_SET_SEND_BOX_ATTACHMENTS"] = "WEB_CHAT/SET_SEND_BOX_ATTACHMENTS";
 })(WebChatActionType || (WebChatActionType = {}));

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

@@ -8,19 +8,19 @@
 import { Constants, MimeTypes, WebChatMiddlewareConstants } from "../../../../../common/Constants";
 import React from "react";
 import { getFileAttachmentIconData, isInlineMediaSupported } from "../../../common/utils/FileAttachmentIconManager";
+import Attachment from "./attachments/Attachment";
 import { BroadcastEvent } from "../../../../../common/telemetry/TelemetryConstants";
 import { BroadcastService } from "@microsoft/omnichannel-chat-components";
+import FileScanStatus from "./attachments/FileScanStatus";
+import MaliciousAttachment from "./attachments/MaliciousAttachment";
+import { NotificationHandler } from "../../notification/NotificationHandler";
+import { NotificationScenarios } from "../../enums/NotificationScenarios";
+import ScanInProgressAttachment from "./attachments/ScanInProgressAttachment";
 import { WebChatActionType } from "../../enums/WebChatActionType";
 import { defaultAttachmentAdaptiveCardStyles } from "./defaultStyles/defaultAtttachmentAdaptiveCardStyles";
 import { defaultAttachmentProps } from "../../../common/defaultProps/defaultAttachmentProps";
-import { useChatContextStore } from "../../../../..";
-import { NotificationHandler } from "../../notification/NotificationHandler";
-import { NotificationScenarios } from "../../enums/NotificationScenarios";
 import { defaultMiddlewareLocalizedTexts } from "../../../common/defaultProps/defaultMiddlewareLocalizedTexts";
-import Attachment from "./attachments/Attachment";
-import ScanInProgressAttachment from "./attachments/ScanInProgressAttachment";
-import MaliciousAttachment from "./attachments/MaliciousAttachment";
-import FileScanStatus from "./attachments/FileScanStatus";
+import { useChatContextStore } from "../../../../..";
 
 /**
 * Patch card with different attachment data.

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentProcessingMiddleware.js

@@ -12,7 +12,7 @@ const createSendFileAction = files => {
     payload: {
       files
     },
-    type: WebChatActionType.WEB_CHAT_SEND_FILES
+    type: WebChatActionType.WEB_CHAT_SEND_MESSAGE
   };
 };
 
@@ -22,9 +22,9 @@ const attachmentProcessingMiddleware = _ref => {
     dispatch
   } = _ref;
   return next => async action => {
-    var _action$payload, _action$payload$files;
-    if ((action === null || action === void 0 ? void 0 : action.type) === WebChatActionType.WEB_CHAT_SEND_FILES && (action === null || action === void 0 ? void 0 : (_action$payload = action.payload) === null || _action$payload === void 0 ? void 0 : (_action$payload$files = _action$payload.files) === null || _action$payload$files === void 0 ? void 0 : _action$payload$files.length) > 0) {
-      const files = action.payload.files;
+    var _action$payload, _action$payload$attac;
+    if ((action === null || action === void 0 ? void 0 : action.type) === WebChatActionType.WEB_CHAT_SEND_MESSAGE && (action === null || action === void 0 ? void 0 : (_action$payload = action.payload) === null || _action$payload === void 0 ? void 0 : (_action$payload$attac = _action$payload.attachments) === null || _action$payload$attac === void 0 ? void 0 : _action$payload$attac.length) > 0) {
+      const files = action.payload.attachments;
       if (files.length === 1) {
         return next(action);
       }

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentUploadValidatorMiddleware.js

@@ -5,11 +5,11 @@
  ******/
 
 import { LogLevel, TelemetryEvent } from "../../../../../common/telemetry/TelemetryConstants";
+import { AMSConstants } from "../../../../../common/Constants";
 import { NotificationHandler } from "../../notification/NotificationHandler";
 import { NotificationScenarios } from "../../enums/NotificationScenarios";
-import { WebChatActionType } from "../../enums/WebChatActionType";
 import { TelemetryHelper } from "../../../../../common/telemetry/TelemetryHelper";
-import { AMSConstants } from "../../../../../common/Constants";
+import { WebChatActionType } from "../../enums/WebChatActionType";
 const MBtoBRatio = 1000000;
 
 /*
@@ -20,6 +20,9 @@ const validateAttachment = (action, allowedFileExtensions, maxFileSizeSupportedB
   var _action$payload, _action$payload$activ, _action$payload2, _action$payload2$acti, _action$payload2$acti2, _action$payload3, _action$payload3$acti, _action$payload3$acti2;
   const attachments = action === null || action === void 0 ? void 0 : (_action$payload = action.payload) === null || _action$payload === void 0 ? void 0 : (_action$payload$activ = _action$payload.activity) === null || _action$payload$activ === void 0 ? void 0 : _action$payload$activ.attachments;
   const attachmentSizes = action === null || action === void 0 ? void 0 : (_action$payload2 = action.payload) === null || _action$payload2 === void 0 ? void 0 : (_action$payload2$acti = _action$payload2.activity) === null || _action$payload2$acti === void 0 ? void 0 : (_action$payload2$acti2 = _action$payload2$acti.channelData) === null || _action$payload2$acti2 === void 0 ? void 0 : _action$payload2$acti2.attachmentSizes;
+  if (!attachments || attachments.length === 0) {
+    return action;
+  }
   if (attachments) {
     for (let i = 0; i < attachments.length; i++) {
       const maxUploadFileSize = getMaxUploadFileSize(maxFileSizeSupportedByDynamics, attachments[i].contentType);
@@ -190,11 +193,11 @@ const createAttachmentUploadValidatorMiddleware = (allowedFileExtensions, maxFil
   } = _ref;
   return next => action => {
     if (action.type === WebChatActionType.DIRECT_LINE_POST_ACTIVITY) {
-      var _payload$activity, _payload$activity2, _payload$activity2$ch, _payload$activity3, _payload$activity3$at, _payload$activity4, _payload$activity4$ch, _payload$activity4$ch2;
+      var _payload$activity, _payload$activity$att, _payload$activity2, _payload$activity2$ch, _payload$activity2$ch2;
       const {
         payload
       } = action;
-      if (payload !== null && payload !== void 0 && (_payload$activity = payload.activity) !== null && _payload$activity !== void 0 && _payload$activity.attachments && payload !== null && payload !== void 0 && (_payload$activity2 = payload.activity) !== null && _payload$activity2 !== void 0 && (_payload$activity2$ch = _payload$activity2.channelData) !== null && _payload$activity2$ch !== void 0 && _payload$activity2$ch.attachmentSizes && (payload === null || payload === void 0 ? void 0 : (_payload$activity3 = payload.activity) === null || _payload$activity3 === void 0 ? void 0 : (_payload$activity3$at = _payload$activity3.attachments) === null || _payload$activity3$at === void 0 ? void 0 : _payload$activity3$at.length) === (payload === null || payload === void 0 ? void 0 : (_payload$activity4 = payload.activity) === null || _payload$activity4 === void 0 ? void 0 : (_payload$activity4$ch = _payload$activity4.channelData) === null || _payload$activity4$ch === void 0 ? void 0 : (_payload$activity4$ch2 = _payload$activity4$ch.attachmentSizes) === null || _payload$activity4$ch2 === void 0 ? void 0 : _payload$activity4$ch2.length)) {
+      if (payload !== null && payload !== void 0 && payload.activity.attachments && payload.activity.attachments.length > 0 && (payload === null || payload === void 0 ? void 0 : (_payload$activity = payload.activity) === null || _payload$activity === void 0 ? void 0 : (_payload$activity$att = _payload$activity.attachments) === null || _payload$activity$att === void 0 ? void 0 : _payload$activity$att.length) === (payload === null || payload === void 0 ? void 0 : (_payload$activity2 = payload.activity) === null || _payload$activity2 === void 0 ? void 0 : (_payload$activity2$ch = _payload$activity2.channelData) === null || _payload$activity2$ch === void 0 ? void 0 : (_payload$activity2$ch2 = _payload$activity2$ch.attachmentSizes) === null || _payload$activity2$ch2 === void 0 ? void 0 : _payload$activity2$ch2.length)) {
         return next(validateAttachment(action, allowedFileExtensions, maxFileSizeSupportedByDynamics, localizedTexts));
       }
     }

package/lib/esm/plugins/createChatTranscript.js

@@ -9,7 +9,7 @@ class TranscriptHTMLBuilder {
   // eslint-disable-line @typescript-eslint/no-explicit-any
 
   constructor(options) {
-    var _this$options, _this$options2, _this$options3, _this$options4, _this$options5, _this$options6, _this$options7, _this$options8, _this$options9, _this$options10, _this$options11, _this$options12;
+    var _this$options, _this$options2, _this$options3, _this$options4, _this$options5, _this$options6, _this$options7, _this$options8, _this$options9, _this$options10, _this$options11, _this$options12, _this$options13;
     _defineProperty(this, "options", void 0);
     _defineProperty(this, "pageTitle", "Customer Transcript");
     _defineProperty(this, "attachmentMessage", "The following attachment was uploaded during the conversation: ");
@@ -20,6 +20,7 @@ class TranscriptHTMLBuilder {
     _defineProperty(this, "agentAvatarFontColor", "#000");
     _defineProperty(this, "customerAvatarBackgroundColor", "#2266E3");
     _defineProperty(this, "customerAvatarFontColor", "#FFF");
+    _defineProperty(this, "customerDisplayName", "");
     _defineProperty(this, "disableMarkdownMessageFormatting", false);
     _defineProperty(this, "disableNewLineMarkdownSupport", false);
     _defineProperty(this, "externalScripts", {});
@@ -55,13 +56,16 @@ class TranscriptHTMLBuilder {
     if ((_this$options9 = this.options) !== null && _this$options9 !== void 0 && _this$options9.customerAvatarFontColor) {
       this.customerAvatarFontColor = this.options.customerAvatarFontColor;
     }
-    if ((_this$options10 = this.options) !== null && _this$options10 !== void 0 && _this$options10.disableMarkdownMessageFormatting) {
+    if ((_this$options10 = this.options) !== null && _this$options10 !== void 0 && _this$options10.customerDisplayName) {
+      this.customerDisplayName = this.options.customerDisplayName;
+    }
+    if ((_this$options11 = this.options) !== null && _this$options11 !== void 0 && _this$options11.disableMarkdownMessageFormatting) {
       this.disableMarkdownMessageFormatting = this.options.disableMarkdownMessageFormatting;
     }
-    if ((_this$options11 = this.options) !== null && _this$options11 !== void 0 && _this$options11.disableNewLineMarkdownSupport) {
+    if ((_this$options12 = this.options) !== null && _this$options12 !== void 0 && _this$options12.disableNewLineMarkdownSupport) {
       this.disableNewLineMarkdownSupport = this.options.disableNewLineMarkdownSupport;
     }
-    if ((_this$options12 = this.options) !== null && _this$options12 !== void 0 && _this$options12.externalScripts) {
+    if ((_this$options13 = this.options) !== null && _this$options13 !== void 0 && _this$options13.externalScripts) {
       this.externalScripts = this.options.externalScripts;
     }
   }
@@ -523,7 +527,12 @@ class TranscriptHTMLBuilder {
                     const avatarMiddleware = () => (next) => (...args) => {
                         const [card] = args;
                         const {fromUser, activity} = card;
-                        const initials = getIconText(activity.from.name);
+                        let displayName = getIconText(activity.from.name);
+                        let customerDisplayName = '${this.customerDisplayName}';
+
+                        if (fromUser && customerDisplayName) {
+                            displayName = customerDisplayName;
+                        }
 
                         const avatarElement = React.createElement(
                             "div",
@@ -531,7 +540,7 @@ class TranscriptHTMLBuilder {
                             React.createElement(
                                 "p",
                                 null,
-                                \`\${initials}\`
+                                \`\${displayName}\`
                             )
                         );