@microsoft/omnichannel-chat-widget 1.8.3-main.ec1328d → 1.8.4-main.1bfa518

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

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import { BroadcastEvent, LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
+import { BroadcastEvent, ConversationStage, LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
 import { BroadcastService, BroadcastServiceInitialize, decodeComponentString } from "@microsoft/omnichannel-chat-components";
 import { Components } from "botframework-webchat";
 import { ConfirmationState, Constants, ConversationEndEntity, E2VVOptions, LiveWorkItemState, PrepareEndChatDescriptionConstants, StorageType, WidgetLoadCustomErrorString } from "../../../common/Constants";
@@ -54,14 +54,18 @@ import { startProactiveChat } from "../common/startProactiveChat";
 import useChatAdapterStore from "../../../hooks/useChatAdapterStore";
 import useChatContextStore from "../../../hooks/useChatContextStore";
 import useFacadeSDKStore from "../../../hooks/useFacadeChatSDKStore";
+import { getPostChatContext, initiatePostChat } from "../common/renderSurveyHelpers";
 let uiTimer;
 export const LiveChatWidgetStateful = props => {
-  var _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _props$webChatContain4, _props$webChatContain5, _props$webChatContain6, _props$webChatContain7, _props$webChatContain8, _props$webChatContain9, _props$styleProps, _props$webChatContain10, _props$webChatContain11, _props$controlProps, _props$controlProps3, _state$appStates7, _props$webChatContain15, _state$appStates14, _props$webChatContain17, _props$webChatContain18, _props$controlProps12, _props$draggableChatW, _props$draggableChatW2, _props$draggableChatW3, _props$draggableChatW4, _props$draggableChatW5, _livechatProps$webCha, _livechatProps$styleP, _livechatProps$contro, _livechatProps$contro2, _livechatProps$compon, _livechatProps$contro3, _livechatProps$compon2, _livechatProps$contro4, _livechatProps$compon3, _livechatProps$contro5, _livechatProps$compon4, _livechatProps$contro6, _livechatProps$compon5, _livechatProps$contro7, _livechatProps$compon6, _livechatProps$contro8, _livechatProps$compon7, _livechatProps$contro9, _livechatProps$compon8, _livechatProps$contro10, _livechatProps$contro11, _livechatProps$compon9, _livechatProps$contro12, _livechatProps$compon10, _livechatProps$contro13, _livechatProps$compon11, _livechatProps$compon12, _livechatProps$compon13;
+  var _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _props$webChatContain4, _props$webChatContain5, _props$webChatContain6, _props$webChatContain7, _props$webChatContain8, _props$webChatContain9, _props$styleProps, _props$webChatContain10, _props$webChatContain11, _props$controlProps, _props$controlProps3, _state$appStates7, _props$webChatContain15, _state$appStates8, _props$webChatContain17, _props$webChatContain18, _props$controlProps12, _props$draggableChatW, _props$draggableChatW2, _props$draggableChatW3, _props$draggableChatW4, _props$draggableChatW5, _livechatProps$webCha, _livechatProps$styleP, _livechatProps$contro, _livechatProps$contro2, _livechatProps$compon, _livechatProps$contro3, _livechatProps$compon2, _livechatProps$contro4, _livechatProps$compon3, _livechatProps$contro5, _livechatProps$compon4, _livechatProps$contro6, _livechatProps$compon5, _livechatProps$contro7, _livechatProps$compon6, _livechatProps$contro8, _livechatProps$compon7, _livechatProps$contro9, _livechatProps$compon8, _livechatProps$contro10, _livechatProps$contro11, _livechatProps$compon9, _livechatProps$contro12, _livechatProps$compon10, _livechatProps$contro13, _livechatProps$compon11, _livechatProps$compon12, _livechatProps$compon13;
   useEffect(() => {
     uiTimer = createTimer();
     TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
       Event: TelemetryEvent.UXLiveChatWidgetStart,
-      Description: "Live chat widget loading started."
+      Description: "Live chat widget loading started.",
+      CustomProperties: {
+        ConversationStage: ConversationStage.Initialization
+      }
     });
   }, []);
   const [state, dispatch] = useChatContextStore();
@@ -314,7 +318,7 @@ export const LiveChatWidgetStateful = props => {
       });
     });
     BroadcastService.getMessageByEventName(BroadcastEvent.StartProactiveChat).subscribe(msg => {
-      TelemetryHelper.logActionEventToAllTelemetry(LogLevel.INFO, {
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
         Event: TelemetryEvent.StartProactiveChatEventReceived,
         Description: "Start proactive chat event received."
       });
@@ -440,7 +444,7 @@ export const LiveChatWidgetStateful = props => {
           payload: msg === null || msg === void 0 ? void 0 : (_msg$payload8 = msg.payload) === null || _msg$payload8 === void 0 ? void 0 : _msg$payload8.customContext
         });
       }
-      TelemetryHelper.logActionEventToAllTelemetry(LogLevel.INFO, {
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
         Event: TelemetryEvent.StartChatEventReceived,
         Description: "Start chat event received."
       });
@@ -480,24 +484,98 @@ export const LiveChatWidgetStateful = props => {
           eventName: BroadcastEvent.MaximizeChat,
           payload: {
             height: inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$domain = inMemoryState.domainStates) === null || _inMemoryState$domain === void 0 ? void 0 : (_inMemoryState$domain2 = _inMemoryState$domain.widgetSize) === null || _inMemoryState$domain2 === void 0 ? void 0 : _inMemoryState$domain2.height,
-            width: inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$domain3 = inMemoryState.domainStates) === null || _inMemoryState$domain3 === void 0 ? void 0 : (_inMemoryState$domain4 = _inMemoryState$domain3.widgetSize) === null || _inMemoryState$domain4 === void 0 ? void 0 : _inMemoryState$domain4.width
+            width: inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$domain3 = inMemoryState.domainStates) === null || _inMemoryState$domain3 === void 0 ? void 0 : (_inMemoryState$domain4 = _inMemoryState$domain3.widgetSize) === null || _inMemoryState$domain4 === void 0 ? void 0 : _inMemoryState$domain4.width,
+            lcwRuntimeId: TelemetryManager.InternalTelemetryData.lcwRuntimeId
           }
         });
         return;
       }
     });
+    const handleInitiateEndChatForPersistentChat = async (msg, conversationDetails) => {
+      var _msg$payload10, _msg$payload11, _msg$payload12;
+      //If the payload does NOT include the skipSessionCloseForPersistentChat flag, default is false. Upon receiving the customer event, always ending session from C2.
+      const skipSessionCloseForPersistentChat = typeof (msg === null || msg === void 0 ? void 0 : (_msg$payload10 = msg.payload) === null || _msg$payload10 === void 0 ? void 0 : _msg$payload10[Constants.SkipSessionCloseForPersistentChatFlag]) === Constants.String && (msg === null || msg === void 0 ? void 0 : (_msg$payload11 = msg.payload) === null || _msg$payload11 === void 0 ? void 0 : _msg$payload11[Constants.SkipSessionCloseForPersistentChatFlag]).toLowerCase() === Constants.true || (msg === null || msg === void 0 ? void 0 : (_msg$payload12 = msg.payload) === null || _msg$payload12 === void 0 ? void 0 : _msg$payload12[Constants.SkipSessionCloseForPersistentChatFlag]) === true;
+      TelemetryHelper.logSDKEventToAllTelemetry(LogLevel.INFO, {
+        Event: TelemetryEvent.EndChatEventReceived,
+        Description: "Processing initiateEndChat for persistent chat",
+        CustomProperties: {
+          conversationDetails
+        }
+      });
+      const conversationState = conversationDetails === null || conversationDetails === void 0 ? void 0 : conversationDetails.state;
+      if (conversationState !== LiveWorkItemState.Closed && conversationState !== LiveWorkItemState.WrapUp) {
+        if (skipSessionCloseForPersistentChat) {
+          var _conversationDetails$;
+          if (((_conversationDetails$ = conversationDetails.canRenderPostChat) === null || _conversationDetails$ === void 0 ? void 0 : _conversationDetails$.toLowerCase()) === "true") {
+            var _state$domainStates3;
+            TelemetryHelper.logSDKEventToAllTelemetry(LogLevel.INFO, {
+              Event: TelemetryEvent.EndChatEventReceived,
+              Description: "Processing initiateEndChat, fetching postChatContext"
+            });
+            const postchatContext = (await getPostChatContext(facadeChatSDK, state, dispatch)) ?? (state === null || state === void 0 ? void 0 : (_state$domainStates3 = state.domainStates) === null || _state$domainStates3 === void 0 ? void 0 : _state$domainStates3.postChatContext);
+            if (postchatContext) {
+              TelemetryHelper.logSDKEventToAllTelemetry(LogLevel.INFO, {
+                Event: TelemetryEvent.EndChatEventReceived,
+                Description: "Processing initiateEndChat, initiatePostChat",
+                CustomProperties: {
+                  postchatContext
+                }
+              });
+              await initiatePostChat(props, conversationDetails, state, dispatch, postchatContext);
+            }
+          }
+        } else {
+          const skipEndChatSDK = false;
+          const skipCloseChat = false;
+          TelemetryHelper.logSDKEventToAllTelemetry(LogLevel.INFO, {
+            Event: TelemetryEvent.EndChatEventReceived,
+            Description: "Processing initiateEndChat, trigger endChat"
+          });
+          await endChat(props, facadeChatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, skipEndChatSDK, skipCloseChat);
+        }
+      }
+      //if conversation already closed, it is safe to unmount it upon receiving the closeChat event
+      else {
+        BroadcastService.postMessage({
+          eventName: BroadcastEvent.CloseChat
+        });
+      }
+    };
 
     // End chat
-    BroadcastService.getMessageByEventName(BroadcastEvent.InitiateEndChat).subscribe(async () => {
+    BroadcastService.getMessageByEventName(BroadcastEvent.InitiateEndChat).subscribe(async msg => {
+      TelemetryHelper.logSDKEventToAllTelemetry(LogLevel.INFO, {
+        Event: TelemetryEvent.EndChatEventReceived,
+        Description: "Received InitiateEndChat BroadcastEvent.",
+        CustomProperties: {
+          ConversationStage: ConversationStage.ConversationEnd,
+          payload: msg === null || msg === void 0 ? void 0 : msg.payload
+        }
+      });
+      const conversationDetails = await getConversationDetailsCall(facadeChatSDK);
+      const {
+        chatConfig
+      } = props;
+      const isPersistent = isPersistentEnabled(chatConfig);
       TelemetryHelper.logSDKEventToAllTelemetry(LogLevel.INFO, {
         Event: TelemetryEvent.EndChatEventReceived,
-        Description: "Received InitiateEndChat BroadcastEvent."
+        Description: "Processing initiateEndChat, fetched conversation details",
+        CustomProperties: {
+          conversationDetails,
+          isPersistent
+        }
       });
-
-      // This is to ensure to get latest state from cache in multitab
+      if (isPersistent && conversationDetails) {
+        await handleInitiateEndChatForPersistentChat(msg, conversationDetails);
+        return;
+      }
       const persistedState = getStateFromCache(getWidgetCacheIdfromProps(props));
       if (persistedState && persistedState.appStates.conversationState === ConversationState.Active) {
-        // We need to simulate states for closing chat, in order to messup with close confirmation pane.
+        TelemetryHelper.logSDKEvent(LogLevel.INFO, {
+          Event: TelemetryEvent.PrepareEndChat,
+          Description: PrepareEndChatDescriptionConstants.InitiateEndChatReceivedActiveChat
+        });
+        //We need to simulate states for closing chat, in order to messup with close confirmation pane.
         dispatch({
           type: LiveChatWidgetActionType.SET_CONFIRMATION_STATE,
           payload: ConfirmationState.Ok
@@ -517,11 +595,8 @@ export const LiveChatWidgetStateful = props => {
           Event: TelemetryEvent.PrepareEndChat,
           Description: PrepareEndChatDescriptionConstants.InitiateEndChatReceived
         });
-        endChat(props, facadeChatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, skipEndChatSDK, skipCloseChat);
+        await endChat(props, facadeChatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, skipEndChatSDK, skipCloseChat);
       }
-      BroadcastService.postMessage({
-        eventName: BroadcastEvent.CloseChat
-      });
     });
 
     // End chat on browser unload
@@ -532,8 +607,8 @@ export const LiveChatWidgetStateful = props => {
     // Listen to end chat event from other tabs
     const endChatEventName = getWidgetEndChatEventName((_facadeChatSDK$getCha3 = facadeChatSDK.getChatSDK()) === null || _facadeChatSDK$getCha3 === void 0 ? void 0 : (_facadeChatSDK$getCha4 = _facadeChatSDK$getCha3.omnichannelConfig) === null || _facadeChatSDK$getCha4 === void 0 ? void 0 : _facadeChatSDK$getCha4.orgId, (_facadeChatSDK$getCha5 = facadeChatSDK.getChatSDK()) === null || _facadeChatSDK$getCha5 === void 0 ? void 0 : (_facadeChatSDK$getCha6 = _facadeChatSDK$getCha5.omnichannelConfig) === null || _facadeChatSDK$getCha6 === void 0 ? void 0 : _facadeChatSDK$getCha6.widgetId, ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.widgetInstanceId) ?? "");
     BroadcastService.getMessageByEventName(endChatEventName).subscribe(msg => {
-      var _msg$payload10;
-      if ((msg === null || msg === void 0 ? void 0 : (_msg$payload10 = msg.payload) === null || _msg$payload10 === void 0 ? void 0 : _msg$payload10.runtimeId) !== TelemetryManager.InternalTelemetryData.lcwRuntimeId) {
+      var _msg$payload13;
+      if ((msg === null || msg === void 0 ? void 0 : (_msg$payload13 = msg.payload) === null || _msg$payload13 === void 0 ? void 0 : _msg$payload13.runtimeId) !== TelemetryManager.InternalTelemetryData.lcwRuntimeId) {
         TelemetryHelper.logSDKEvent(LogLevel.INFO, {
           Event: TelemetryEvent.PrepareEndChat,
           Description: "Received EndChat BroadcastEvent from other tabs. Closing this chat."
@@ -575,8 +650,8 @@ export const LiveChatWidgetStateful = props => {
 
     // Retrieve convId
     BroadcastService.getMessageByEventName(BroadcastEvent.UpdateConversationDataForTelemetry).subscribe(msg => {
-      var _msg$payload11, _msg$payload11$liveWo;
-      if ((_msg$payload11 = msg.payload) !== null && _msg$payload11 !== void 0 && (_msg$payload11$liveWo = _msg$payload11.liveWorkItem) !== null && _msg$payload11$liveWo !== void 0 && _msg$payload11$liveWo.conversationId) {
+      var _msg$payload14, _msg$payload14$liveWo;
+      if ((_msg$payload14 = msg.payload) !== null && _msg$payload14 !== void 0 && (_msg$payload14$liveWo = _msg$payload14.liveWorkItem) !== null && _msg$payload14$liveWo !== void 0 && _msg$payload14$liveWo.conversationId) {
         setConversationId(msg.payload.liveWorkItem.conversationId);
       }
     });
@@ -694,14 +769,22 @@ export const LiveChatWidgetStateful = props => {
     }
   }, [state.domainStates.confirmationState]);
   useEffect(() => {
-    var _state$appStates8, _state$appStates9, _state$appStates10, _state$appStates11, _state$appStates12, _state$appStates13;
+    var _inMemoryState$appSta7, _inMemoryState$appSta8, _inMemoryState$appSta9, _inMemoryState$appSta10, _inMemoryState$appSta11, _inMemoryState$appSta12, _inMemoryState$appSta13;
+    const inMemoryState = executeReducer(state, {
+      type: LiveChatWidgetActionType.GET_IN_MEMORY_STATE,
+      payload: null
+    });
     // Do not process anything during initialization
-    if ((state === null || state === void 0 ? void 0 : (_state$appStates8 = state.appStates) === null || _state$appStates8 === void 0 ? void 0 : _state$appStates8.conversationEndedBy) === ConversationEndEntity.NotSet) {
+    if ((inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$appSta7 = inMemoryState.appStates) === null || _inMemoryState$appSta7 === void 0 ? void 0 : _inMemoryState$appSta7.conversationEndedBy) === ConversationEndEntity.NotSet) {
+      TelemetryHelper.logSDKEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.PrepareEndChat,
+        Description: "conversationEndedBy is not set"
+      });
       return;
     }
 
     // If start chat failed, and C2 is trying to close chat widget
-    if (state !== null && state !== void 0 && (_state$appStates9 = state.appStates) !== null && _state$appStates9 !== void 0 && _state$appStates9.startChatFailed || (state === null || state === void 0 ? void 0 : (_state$appStates10 = state.appStates) === null || _state$appStates10 === void 0 ? void 0 : _state$appStates10.conversationState) === ConversationState.Postchat) {
+    if (inMemoryState !== null && inMemoryState !== void 0 && (_inMemoryState$appSta8 = inMemoryState.appStates) !== null && _inMemoryState$appSta8 !== void 0 && _inMemoryState$appSta8.startChatFailed || (inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$appSta9 = inMemoryState.appStates) === null || _inMemoryState$appSta9 === void 0 ? void 0 : _inMemoryState$appSta9.conversationState) === ConversationState.Postchat) {
       TelemetryHelper.logSDKEvent(LogLevel.INFO, {
         Event: TelemetryEvent.PrepareEndChat,
         Description: PrepareEndChatDescriptionConstants.CustomerCloseChatOnFailureOrPostChat
@@ -711,7 +794,7 @@ export const LiveChatWidgetStateful = props => {
     }
 
     // Scenario -> Chat was InActive and closing the chat (Refresh scenario on post chat)
-    if ((state === null || state === void 0 ? void 0 : (_state$appStates11 = state.appStates) === null || _state$appStates11 === void 0 ? void 0 : _state$appStates11.conversationState) === ConversationState.InActive) {
+    if ((inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$appSta10 = inMemoryState.appStates) === null || _inMemoryState$appSta10 === void 0 ? void 0 : _inMemoryState$appSta10.conversationState) === ConversationState.InActive) {
       TelemetryHelper.logSDKEvent(LogLevel.INFO, {
         Event: TelemetryEvent.PrepareEndChat,
         Description: PrepareEndChatDescriptionConstants.CustomerCloseInactiveChat
@@ -719,11 +802,11 @@ export const LiveChatWidgetStateful = props => {
       endChat(props, facadeChatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, false, false, true);
       return;
     }
-    const isConversationalSurveyEnabled = state.appStates.isConversationalSurveyEnabled;
+    const isConversationalSurveyEnabled = inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$appSta11 = inMemoryState.appStates) === null || _inMemoryState$appSta11 === void 0 ? void 0 : _inMemoryState$appSta11.isConversationalSurveyEnabled;
 
     // In conversational survey, we need to check post chat survey logics before we set ConversationState to InActive
     // Hence setting ConversationState to InActive will be done later in the post chat flows
-    if (!isConversationalSurveyEnabled && ((state === null || state === void 0 ? void 0 : (_state$appStates12 = state.appStates) === null || _state$appStates12 === void 0 ? void 0 : _state$appStates12.conversationEndedBy) === ConversationEndEntity.Agent || (state === null || state === void 0 ? void 0 : (_state$appStates13 = state.appStates) === null || _state$appStates13 === void 0 ? void 0 : _state$appStates13.conversationEndedBy) === ConversationEndEntity.Bot)) {
+    if (!isConversationalSurveyEnabled && (inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$appSta12 = inMemoryState.appStates) === null || _inMemoryState$appSta12 === void 0 ? void 0 : _inMemoryState$appSta12.conversationEndedBy) === ConversationEndEntity.Agent || (inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$appSta13 = inMemoryState.appStates) === null || _inMemoryState$appSta13 === void 0 ? void 0 : _inMemoryState$appSta13.conversationEndedBy) === ConversationEndEntity.Bot) {
       dispatch({
         type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
         payload: ConversationState.InActive
@@ -731,8 +814,8 @@ export const LiveChatWidgetStateful = props => {
     }
 
     // All other cases
-    prepareEndChat(props, facadeChatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter);
-  }, [state === null || state === void 0 ? void 0 : (_state$appStates14 = state.appStates) === null || _state$appStates14 === void 0 ? void 0 : _state$appStates14.conversationEndedBy]);
+    prepareEndChat(props, facadeChatSDK, inMemoryState, dispatch, setAdapter, setWebChatStyles, adapter);
+  }, [state === null || state === void 0 ? void 0 : (_state$appStates8 = state.appStates) === null || _state$appStates8 === void 0 ? void 0 : _state$appStates8.conversationEndedBy]);
 
   // Publish chat widget state
   useEffect(() => {
@@ -764,13 +847,13 @@ export const LiveChatWidgetStateful = props => {
 
   // Handle Chat disconnect cases
   useEffect(() => {
-    var _inMemoryState$appSta7;
+    var _inMemoryState$appSta14;
     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$appSta7 = inMemoryState.appStates) === null || _inMemoryState$appSta7 === void 0 ? void 0 : _inMemoryState$appSta7.chatDisconnectEventReceived;
+    const chatDisconnectState = inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$appSta14 = inMemoryState.appStates) === null || _inMemoryState$appSta14 === void 0 ? void 0 : _inMemoryState$appSta14.chatDisconnectEventReceived;
     if (chatDisconnectState && adapter) {
       try {
         adapter.end();
@@ -796,7 +879,10 @@ export const LiveChatWidgetStateful = props => {
     TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
       Event: TelemetryEvent.UXLiveChatWidgetCompleted,
       Description: "Live chat widget loading completed.",
-      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed,
+      CustomProperties: {
+        ConversationStage: ConversationStage.Initialization
+      }
     });
   }, []);
   const initiateEndChatOnBrowserUnload = () => {
@@ -866,25 +952,58 @@ export const LiveChatWidgetStateful = props => {
     bubbleTextColor
   }), [webChatStyles, bubbleBackground, bubbleTextColor]);
 
+  // React to dynamic bot avatar initials updates from context
+  useEffect(() => {
+    if (state.domainStates.botAvatarInitials && state.domainStates.botAvatarInitials !== webChatStyles.botAvatarInitials) {
+      setWebChatStyles(styles => ({
+        ...styles,
+        botAvatarInitials: state.domainStates.botAvatarInitials
+      }));
+    }
+  }, [state.domainStates.botAvatarInitials]);
+
   // WebChat's Composer can only be rendered if a directLine object is defined
   return directLine && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, `
-            ::-webkit-scrollbar {
+            #oc-lcw .webchat__basic-transcript__scrollable::-webkit-scrollbar {
                 width: ${scrollbarProps.width};
             }
 
-            ::-webkit-scrollbar-track {
+            #oc-lcw .webchat__basic-transcript__scrollable::-webkit-scrollbar-track {
                 background: ${scrollbarProps.trackBackgroundColor};
             }
 
-            ::-webkit-scrollbar-thumb {
+            #oc-lcw .webchat__basic-transcript__scrollable::-webkit-scrollbar-thumb {
                 background: ${scrollbarProps.thumbBackgroundColor};
                 border-radius: ${scrollbarProps.thumbBorderRadius};
             }
 
-            ::-webkit-scrollbar-thumb:hover {
+            #oc-lcw .webchat__basic-transcript__scrollable::-webkit-scrollbar-thumb:hover {
                 background: ${scrollbarProps.thumbHoverColor};
             }
 
+            /* High Contrast mode support - optimized for all variants */
+            @media (prefers-contrast: high), (-ms-high-contrast: active), (forced-colors: active) {
+                #oc-lcw .webchat__basic-transcript__scrollable::-webkit-scrollbar-track {
+                    background: Canvas !important;
+                    border: 1px solid CanvasText !important;
+                }
+
+                #oc-lcw .webchat__basic-transcript__scrollable::-webkit-scrollbar-thumb {
+                    background: CanvasText !important;
+                    border: 1px solid Canvas !important;
+                    min-height: 20px !important;
+                }
+
+                #oc-lcw .webchat__basic-transcript__scrollable::-webkit-scrollbar-thumb:hover {
+                    background: Highlight !important;
+                    border: 1px solid CanvasText !important;
+                }
+
+                #oc-lcw .webchat__basic-transcript__scrollable::-webkit-scrollbar-corner {
+                    background: Canvas !important;
+                }
+            }
+
             .webchat__basic-transcript__activity-markdown-body > :last-child {
                 margin-bottom: 0px;
             }

package/lib/esm/components/postchatsurveypanestateful/PostChatSurveyPaneStateful.js

@@ -1,4 +1,4 @@
-import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+import { ConversationStage, LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
 import { ParticipantType } from "../../common/Constants";
 import { CustomerVoiceEvents } from "./enums/CustomerVoiceEvents";
@@ -6,9 +6,10 @@ import { PostChatSurveyMode } from "./enums/PostChatSurveyMode";
 import { PostChatSurveyPane } from "@microsoft/omnichannel-chat-components";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { defaultGeneralPostChatSurveyPaneStyleProps } from "./common/defaultStyleProps/defaultgeneralPostChatSurveyPaneStyleProps";
-import { findAllFocusableElement } from "../../common/utils";
+import { createTimer, findAllFocusableElement } from "../../common/utils";
 import useChatContextStore from "../../hooks/useChatContextStore";
 import isValidSurveyUrl from "./common/isValidSurveyUrl";
+let uiTimer;
 const generateSurveyInviteLink = function (surveyInviteLink, isEmbed, locale, compact, customerVoiceSurveyCorrelationId) {
   let showMultiLingual = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   const surveyLinkParams = new URLSearchParams({
@@ -21,20 +22,32 @@ const generateSurveyInviteLink = function (surveyInviteLink, isEmbed, locale, co
   return `${surveyInviteLink}&${surveyLinkParams.toString()}`;
 };
 export const PostChatSurveyPaneStateful = props => {
-  var _props$styleProps, _state$appStates, _props$controlProps;
+  var _props$styleProps, _state$appStates, _state$domainStates$p, _props$controlProps;
+  useEffect(() => {
+    uiTimer = createTimer();
+    TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
+      Event: TelemetryEvent.UXPostChatPaneStarted,
+      Description: "Postchat survey pane loading started.",
+      CustomProperties: {
+        ConversationStage: ConversationStage.ConversationEnd
+      }
+    });
+  }, []);
   const [state] = useChatContextStore();
   const generalStyleProps = Object.assign({}, defaultGeneralPostChatSurveyPaneStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps, {
     display: state.appStates.isMinimized ? "none" : "contents"
   });
   let surveyInviteLink = "";
   const surveyMode = (state === null || state === void 0 ? void 0 : (_state$appStates = state.appStates) === null || _state$appStates === void 0 ? void 0 : _state$appStates.selectedSurveyMode) === PostChatSurveyMode.Embed;
-  if (state.domainStates.postChatContext.botSurveyInviteLink &&
+  if ((_state$domainStates$p = state.domainStates.postChatContext) !== null && _state$domainStates$p !== void 0 && _state$domainStates$p.botSurveyInviteLink &&
   // Bot survey enabled
   state.appStates.postChatParticipantType === ParticipantType.Bot) {
+    var _state$domainStates$p2, _state$domainStates$p3;
     // Only Bot has engaged
-    surveyInviteLink = generateSurveyInviteLink(state.domainStates.postChatContext.botSurveyInviteLink, surveyMode, state.domainStates.postChatContext.botFormsProLocale, props.isCustomerVoiceSurveyCompact ?? true, props.customerVoiceSurveyCorrelationId || "");
+    surveyInviteLink = generateSurveyInviteLink((_state$domainStates$p2 = state.domainStates.postChatContext) === null || _state$domainStates$p2 === void 0 ? void 0 : _state$domainStates$p2.botSurveyInviteLink, surveyMode, (_state$domainStates$p3 = state.domainStates.postChatContext) === null || _state$domainStates$p3 === void 0 ? void 0 : _state$domainStates$p3.botFormsProLocale, props.isCustomerVoiceSurveyCompact ?? true, props.customerVoiceSurveyCorrelationId || "");
   } else {
-    surveyInviteLink = generateSurveyInviteLink(state.domainStates.postChatContext.surveyInviteLink, surveyMode, state.domainStates.postChatContext.formsProLocale, props.isCustomerVoiceSurveyCompact ?? true, props.customerVoiceSurveyCorrelationId || "");
+    var _state$domainStates$p4, _state$domainStates$p5;
+    surveyInviteLink = generateSurveyInviteLink((_state$domainStates$p4 = state.domainStates.postChatContext) === null || _state$domainStates$p4 === void 0 ? void 0 : _state$domainStates$p4.surveyInviteLink, surveyMode, (_state$domainStates$p5 = state.domainStates.postChatContext) === null || _state$domainStates$p5 === void 0 ? void 0 : _state$domainStates$p5.formsProLocale, props.isCustomerVoiceSurveyCompact ?? true, props.customerVoiceSurveyCorrelationId || "");
   }
   if (props.copilotSurveyContext) {
     surveyInviteLink = `${surveyInviteLink}&mcs_additionalcontext=${JSON.stringify(props.copilotSurveyContext)}`;
@@ -72,7 +85,14 @@ export const PostChatSurveyPaneStateful = props => {
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.PostChatSurveyLoaded
     });
-
+    TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
+      Event: TelemetryEvent.UXPostChatPaneCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed,
+      Description: "Postchat survey pane loading completed.",
+      CustomProperties: {
+        ConversationStage: ConversationStage.ConversationEnd
+      }
+    });
     //Customer Voice Telemetry Events
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     window.addEventListener("message", message => {
@@ -85,16 +105,22 @@ export const PostChatSurveyPaneStateful = props => {
           Event: TelemetryEvent.CustomerVoiceResponsePageLoaded
         });
       } else if (data === CustomerVoiceEvents.FormResponseSubmitted) {
-        TelemetryHelper.logActionEventToAllTelemetry(LogLevel.INFO, {
+        TelemetryHelper.logActionEvent(LogLevel.INFO, {
           Event: TelemetryEvent.CustomerVoiceFormResponseSubmitted,
-          Description: "Customer Voice form response submitted."
+          Description: "Customer Voice form response submitted.",
+          CustomProperties: {
+            ConversationStage: ConversationStage.ConversationEnd
+          }
         });
       } else if (data === CustomerVoiceEvents.FormResponseError) {
-        TelemetryHelper.logActionEventToAllTelemetry(LogLevel.ERROR, {
+        TelemetryHelper.logActionEvent(LogLevel.ERROR, {
           Event: TelemetryEvent.CustomerVoiceFormResponseError,
           Description: "Customer Voice form response error.",
           ExceptionDetails: {
             message: "Customer Voice form response error."
+          },
+          CustomProperties: {
+            ConversationStage: ConversationStage.ConversationEnd
           }
         });
       } else if (typeof data === "string" && data.startsWith(CustomerVoiceEvents.FormsError)) {
@@ -103,6 +129,9 @@ export const PostChatSurveyPaneStateful = props => {
           Description: "Customer Voice failed to load with forms error.",
           ExceptionDetails: {
             message: `Customer Voice forms error details: ${data}`
+          },
+          CustomProperties: {
+            ConversationStage: ConversationStage.ConversationEnd
           }
         });
       }

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

@@ -1,5 +1,5 @@
 import { HtmlAttributeNames, Regex } from "../../common/Constants";
-import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+import { ConversationStage, LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
 import { createTimer, extractPreChatSurveyResponseValues, findAllFocusableElement, getStateFromCache, getWidgetCacheId, isUndefinedOrEmpty, parseAdaptiveCardPayload } from "../../common/utils";
 import { ConversationState } from "../../contexts/common/ConversationState";
@@ -19,7 +19,10 @@ export const PreChatSurveyPaneStateful = props => {
     uiTimer = createTimer();
     TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
       Event: TelemetryEvent.UXPrechatPaneStart,
-      Description: "Prechat survey pane loading started."
+      Description: "Prechat survey pane loading started.",
+      CustomProperties: {
+        ConversationStage: ConversationStage.Initialization
+      }
     });
   }, []);
 
@@ -70,7 +73,10 @@ export const PreChatSurveyPaneStateful = props => {
     onSubmit: async values => {
       TelemetryHelper.logActionEventToAllTelemetry(LogLevel.INFO, {
         Event: TelemetryEvent.PrechatSubmitted,
-        Description: "Prechat survey submitted."
+        Description: "Prechat survey submitted.",
+        CustomProperties: {
+          ConversationStage: ConversationStage.Initialization
+        }
       });
       dispatch({
         type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
@@ -144,7 +150,10 @@ export const PreChatSurveyPaneStateful = props => {
     TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
       Event: TelemetryEvent.UXPrechatPaneCompleted,
       ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed,
-      Description: "Prechat survey pane loading completed."
+      Description: "Prechat survey pane loading completed.",
+      CustomProperties: {
+        ConversationStage: ConversationStage.Initialization
+      }
     });
   }, []);