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

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

@@ -6,17 +6,25 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ReconnectChatPaneStateful = void 0;
 var _TelemetryConstants = require("../../common/telemetry/TelemetryConstants");
 var _react = _interopRequireWildcard(require("react"));
+var _utils = require("../../common/utils");
 var _ConversationState = require("../../contexts/common/ConversationState");
 var _LiveChatWidgetActionType = require("../../contexts/common/LiveChatWidgetActionType");
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
 var _TelemetryHelper = require("../../common/telemetry/TelemetryHelper");
-var _utils = require("../../common/utils");
 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;
 const ReconnectChatPaneStateful = props => {
+  (0, _react.useEffect)(() => {
+    uiTimer = (0, _utils.createTimer)();
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXReconnectChatPaneStart,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
+  }, []);
   const [state, dispatch] = (0, _useChatContextStore.default)();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   //const chatSDK: any = useChatSDKStore();
@@ -100,6 +108,9 @@ const ReconnectChatPaneStateful = props => {
     _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
       Event: _TelemetryConstants.TelemetryEvent.ReconnectChatPaneLoaded
     });
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXReconnectChatCompleted
+    });
   }, []);
   return /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.ReconnectChatPane, {
     componentOverrides: reconnectChatProps === null || reconnectChatProps === void 0 ? void 0 : reconnectChatProps.componentOverrides,

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

@@ -4,24 +4,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.StartChatErrorPaneStateful = void 0;
+var _TelemetryConstants = require("../../common/telemetry/TelemetryConstants");
 var _react = _interopRequireWildcard(require("react"));
-var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
 var _utils = require("../../common/utils");
-var _useChatContextStore = _interopRequireDefault(require("../../hooks/useChatContextStore"));
+var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
+var _Constants = require("../../common/Constants");
+var _StartChatFailureType = require("../../contexts/common/StartChatFailureType");
 var _TelemetryHelper = require("../../common/telemetry/TelemetryHelper");
-var _TelemetryConstants = require("../../common/telemetry/TelemetryConstants");
 var _defaultStartChatErrorPaneGeneralStyleProps = require("./common/defaultStartChatErrorPaneGeneralStyleProps");
-var _defaultStartChatErrorPaneTitleStyleProps = require("./common/defaultStartChatErrorPaneTitleStyleProps");
-var _defaultStartChatErrorPaneSubtitleStyleProps = require("./common/defaultStartChatErrorPaneSubtitleStyleProps");
-var _defaultStartChatErrorPaneIconStyleProps = require("./common/defaultStartChatErrorPaneIconStyleProps");
 var _defaultStartChatErrorPaneIconImageProps = require("./common/defaultStartChatErrorPaneIconImageProps");
-var _Constants = require("../../common/Constants");
-var _StartChatFailureType = require("../../contexts/common/StartChatFailureType");
+var _defaultStartChatErrorPaneIconStyleProps = require("./common/defaultStartChatErrorPaneIconStyleProps");
+var _defaultStartChatErrorPaneSubtitleStyleProps = require("./common/defaultStartChatErrorPaneSubtitleStyleProps");
+var _defaultStartChatErrorPaneTitleStyleProps = require("./common/defaultStartChatErrorPaneTitleStyleProps");
+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 StartChatErrorPaneStateful = startChatErrorPaneProps => {
   var _startChatErrorPanePr, _startChatErrorPanePr2, _startChatErrorPanePr3, _startChatErrorPanePr4, _startChatErrorPanePr5, _startChatErrorPanePr6, _startChatErrorPanePr7, _startChatErrorPanePr8, _startChatErrorPanePr9, _startChatErrorPanePr10, _startChatErrorPanePr11;
+  (0, _react.useEffect)(() => {
+    uiTimer = (0, _utils.createTimer)();
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXStartChatErrorPaneStart
+    });
+  }, []);
   const [state] = (0, _useChatContextStore.default)();
   const generalStyleProps = Object.assign({}, _defaultStartChatErrorPaneGeneralStyleProps.defaultStartChatErrorPaneGeneralStyleProps, startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr = startChatErrorPaneProps.styleProps) === null || _startChatErrorPanePr === void 0 ? void 0 : _startChatErrorPanePr.generalStyleProps);
   const titleStyleProps = Object.assign({}, _defaultStartChatErrorPaneTitleStyleProps.defaultStartChatErrorPaneTitleStyleProps, startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr2 = startChatErrorPaneProps.styleProps) === null || _startChatErrorPanePr2 === void 0 ? void 0 : _startChatErrorPanePr2.titleStyleProps);
@@ -70,6 +77,10 @@ const StartChatErrorPaneStateful = startChatErrorPaneProps => {
       Event: _TelemetryConstants.TelemetryEvent.StartChatErrorPaneLoaded,
       Description: "Start chat error pane loaded."
     });
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXStartChatErrorCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
   }, []);
   return /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.LoadingPane, {
     componentOverrides: startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : startChatErrorPaneProps.componentOverrides,

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

@@ -7,6 +7,7 @@ exports.default = exports.WebChatContainerStateful = void 0;
 var _react = require("@fluentui/react");
 var _TelemetryConstants = require("../../common/telemetry/TelemetryConstants");
 var _react2 = _interopRequireWildcard(require("react"));
+var _utils = require("../../common/utils");
 var _BotMagicCodeStore = require("./webchatcontroller/BotMagicCodeStore");
 var _botframeworkWebchat = require("botframework-webchat");
 var _Constants = require("../../common/Constants");
@@ -23,12 +24,12 @@ var _defaultSentMessageAnchorStyles = require("./webchatcontroller/middlewares/r
 var _defaultSystemMessageBoxStyles = require("./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultSystemMessageBoxStyles");
 var _defaultUserMessageBoxStyles = require("./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultUserMessageBoxStyles");
 var _defaultWebChatContainerStatefulProps = require("./common/defaultProps/defaultWebChatContainerStatefulProps");
-var _utils = require("../../common/utils");
 var _ = require("../..");
 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; }
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+let uiTimer;
 const broadcastChannelMessageEvent = "message";
 const postActivity = activity => {
   // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -56,6 +57,12 @@ const createMagicCodeSuccessResponse = signin => {
 };
 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;
+  (0, _react2.useEffect)(() => {
+    uiTimer = (0, _utils.createTimer)();
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXWebchatContainerCompleted
+    });
+  }, []);
   const {
     BasicWebChat
   } = _botframeworkWebchat.Components;
@@ -151,6 +158,12 @@ const WebChatContainerStateful = props => {
     };
     magicCodeBroadcastChannel.addEventListener(broadcastChannelMessageEvent, eventListener);
   }, []);
+  (0, _react2.useEffect)(() => {
+    _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.UXWebchatContainerCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
+  }, []);
   return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement("style", null, `
         .webchat__stacked-layout__content .ac-pushButton {
             cursor: pointer;

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

@@ -59,6 +59,7 @@ const defaultWebChatStyles = {
     "<3": "❤️",
     "</3": "💔",
     "<\\3": "💔"
-  }
+  },
+  uploadMultiple: false
 };
 exports.defaultWebChatStyles = defaultWebChatStyles;

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

@@ -28,4 +28,5 @@ exports.WebChatActionType = 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 || (exports.WebChatActionType = WebChatActionType = {}));

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

@@ -7,19 +7,19 @@ exports.createAttachmentMiddleware = void 0;
 var _Constants = require("../../../../../common/Constants");
 var _react = _interopRequireDefault(require("react"));
 var _FileAttachmentIconManager = require("../../../common/utils/FileAttachmentIconManager");
+var _Attachment = _interopRequireDefault(require("./attachments/Attachment"));
 var _TelemetryConstants = require("../../../../../common/telemetry/TelemetryConstants");
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
+var _FileScanStatus = _interopRequireDefault(require("./attachments/FileScanStatus"));
+var _MaliciousAttachment = _interopRequireDefault(require("./attachments/MaliciousAttachment"));
+var _NotificationHandler = require("../../notification/NotificationHandler");
+var _NotificationScenarios = require("../../enums/NotificationScenarios");
+var _ScanInProgressAttachment = _interopRequireDefault(require("./attachments/ScanInProgressAttachment"));
 var _WebChatActionType = require("../../enums/WebChatActionType");
 var _defaultAtttachmentAdaptiveCardStyles = require("./defaultStyles/defaultAtttachmentAdaptiveCardStyles");
 var _defaultAttachmentProps = require("../../../common/defaultProps/defaultAttachmentProps");
-var _ = require("../../../../..");
-var _NotificationHandler = require("../../notification/NotificationHandler");
-var _NotificationScenarios = require("../../enums/NotificationScenarios");
 var _defaultMiddlewareLocalizedTexts = require("../../../common/defaultProps/defaultMiddlewareLocalizedTexts");
-var _Attachment = _interopRequireDefault(require("./attachments/Attachment"));
-var _ScanInProgressAttachment = _interopRequireDefault(require("./attachments/ScanInProgressAttachment"));
-var _MaliciousAttachment = _interopRequireDefault(require("./attachments/MaliciousAttachment"));
-var _FileScanStatus = _interopRequireDefault(require("./attachments/FileScanStatus"));
+var _ = require("../../../../..");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /******

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

@@ -17,7 +17,7 @@ const createSendFileAction = files => {
     payload: {
       files
     },
-    type: _WebChatActionType.WebChatActionType.WEB_CHAT_SEND_FILES
+    type: _WebChatActionType.WebChatActionType.WEB_CHAT_SEND_MESSAGE
   };
 };
 
@@ -27,9 +27,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.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.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/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentUploadValidatorMiddleware.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _TelemetryConstants = require("../../../../../common/telemetry/TelemetryConstants");
+var _Constants = require("../../../../../common/Constants");
 var _NotificationHandler = require("../../notification/NotificationHandler");
 var _NotificationScenarios = require("../../enums/NotificationScenarios");
-var _WebChatActionType = require("../../enums/WebChatActionType");
 var _TelemetryHelper = require("../../../../../common/telemetry/TelemetryHelper");
-var _Constants = require("../../../../../common/Constants");
+var _WebChatActionType = require("../../enums/WebChatActionType");
 /******
  * AttachmentUploadValidatorMiddleware
  * 
@@ -26,6 +26,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);
@@ -196,11 +199,11 @@ const createAttachmentUploadValidatorMiddleware = (allowedFileExtensions, maxFil
   } = _ref;
   return next => action => {
     if (action.type === _WebChatActionType.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/cjs/plugins/createChatTranscript.js

@@ -14,7 +14,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: ");
@@ -25,6 +25,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", {});
@@ -60,13 +61,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;
     }
   }
@@ -528,7 +532,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",
@@ -536,7 +545,7 @@ class TranscriptHTMLBuilder {
                             React.createElement(
                                 "p",
                                 null,
-                                \`\${initials}\`
+                                \`\${displayName}\`
                             )
                         );
 

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

@@ -135,6 +135,7 @@ export let TelemetryEvent;
   TelemetryEvent["ConfirmationCancelButtonClicked"] = "ConfirmationCancelButtonClicked";
   TelemetryEvent["ConfirmationConfirmButtonClicked"] = "ConfirmationConfirmButtonClicked";
   TelemetryEvent["LoadingPaneLoaded"] = "LoadingPaneLoaded";
+  TelemetryEvent["LoadingPaneUnloaded"] = "LoadingPaneUnloaded";
   TelemetryEvent["StartChatErrorPaneLoaded"] = "StartChatErrorPaneLoaded";
   TelemetryEvent["EmailTranscriptLoaded"] = "EmailTranscriptLoaded";
   TelemetryEvent["OutOfOfficePaneLoaded"] = "OutOfOfficePaneLoaded";
@@ -167,6 +168,7 @@ export let TelemetryEvent;
   TelemetryEvent["SetBotAuthProviderNotFound"] = "SetBotAuthProviderNotFound";
   TelemetryEvent["BotAuthActivityUndefinedSignInId"] = "BotAuthActivityUndefinedSignInId";
   TelemetryEvent["ThirdPartyCookiesBlocked"] = "ThirdPartyCookiesBlocked";
+  TelemetryEvent["ParticipantsRemovedEvent"] = "ParticipantsRemovedEvent";
   TelemetryEvent["ProcessingHTMLTextMiddlewareFailed"] = "ProcessingHTMLTextMiddlewareFailed";
   TelemetryEvent["ProcessingSanitizationMiddlewareFailed"] = "ProcessingSanitizationMiddlewareFailed";
   TelemetryEvent["FormatTagsMiddlewareJSONStringifyFailed"] = "FormatTagsMiddlewareJSONStringifyFailed";
@@ -218,6 +220,36 @@ export let 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 || (TelemetryEvent = {}));
 export class TelemetryConstants {
   static map(eventTypeOrScenarioType) {

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

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

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

@@ -1,5 +1,6 @@
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect, useRef, useState } from "react";
+import { createTimer, setFocusOnElement } from "../../common/utils";
 import { ChatButton } from "@microsoft/omnichannel-chat-components";
 import { Constants } from "../../common/Constants";
 import { ConversationState } from "../../contexts/common/ConversationState";
@@ -7,10 +8,19 @@ import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetAc
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { TelemetryTimers } from "../../common/telemetry/TelemetryManager";
 import { defaultOutOfOfficeChatButtonStyleProps } from "./common/styleProps/defaultOutOfOfficeChatButtonStyleProps";
-import { setFocusOnElement } from "../../common/utils";
 import useChatContextStore from "../../hooks/useChatContextStore";
+let uiTimer;
 export 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
+  useEffect(() => {
+    uiTimer = createTimer();
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXLCWChatButtonStart
+    });
+  }, []);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [state, dispatch] = useChatContextStore();
   const {
     buttonProps,
@@ -92,6 +102,10 @@ export const ChatButtonStateful = props => {
         payload: true
       });
     }
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.UXLCWChatButtonCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    });
   }, []);
   return /*#__PURE__*/React.createElement(ChatButton, {
     componentOverrides: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.componentOverrides,

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();
@@ -94,6 +102,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;