@microsoft/omnichannel-chat-widget 1.7.8-main.29ce174 → 1.7.8-main.2bcb0b6

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

@@ -1,7 +1,6 @@
 import { BroadcastEvent, LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
-import { Constants, LiveWorkItemState, WidgetLoadCustomErrorString, WidgetLoadTelemetryMessage } from "../../../common/Constants";
+import { Constants, LiveWorkItemState, WidgetLoadTelemetryMessage } from "../../../common/Constants";
 import { checkContactIdError, createTimer, getConversationDetailsCall, getStateFromCache, getWidgetCacheIdfromProps, isNullOrEmptyString, isNullOrUndefined, isUndefinedOrEmpty } from "../../../common/utils";
-import { getAuthClientFunction, handleAuthentication } from "./authHelper";
 import { handleChatReconnect, isPersistentEnabled, isReconnectEnabled } from "./reconnectChatHelper";
 import { handleStartChatError, logWidgetLoadComplete } from "./startChatErrorHandler";
 import { ActivityStreamHandler } from "./ActivityStreamHandler";
@@ -13,6 +12,7 @@ import { TelemetryTimers } from "../../../common/telemetry/TelemetryManager";
 import { chatSDKStateCleanUp } from "./endChat";
 import { createAdapter } from "./createAdapter";
 import { createOnNewAdapterActivityHandler } from "../../../plugins/newMessageEventHandler";
+import { createTrackingForFirstMessage } from "../../../firstresponselatency/FirstMessageTrackerFromBot";
 import { isPersistentChatEnabled } from "./liveChatConfigUtils";
 import { setPostChatContextAndLoadSurvey } from "./setPostChatContextAndLoadSurvey";
 import { shouldSetPreChatIfPersistentChat } from "./persistentChatHelper";
@@ -25,20 +25,6 @@ let widgetInstanceId;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let popoutWidgetInstanceId;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const setAuthenticationIfApplicable = async (props, facadeChatSDK) => {
-  const chatConfig = props === null || props === void 0 ? void 0 : props.chatConfig;
-  const getAuthToken = props === null || props === void 0 ? void 0 : props.getAuthToken;
-  const authClientFunction = getAuthClientFunction(chatConfig);
-  if (getAuthToken && authClientFunction) {
-    // set auth token to chat sdk before start chat
-    const authSuccess = await handleAuthentication(facadeChatSDK.getChatSDK(), chatConfig, getAuthToken);
-    if (!authSuccess.result) {
-      throw new Error(WidgetLoadCustomErrorString.AuthenticationFailedErrorString);
-    }
-  }
-};
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const prepareStartChat = async (props, facadeChatSDK, state, dispatch, setAdapter) => {
   optionalParams = {}; //Resetting to ensure no stale values
@@ -66,11 +52,6 @@ const prepareStartChat = async (props, facadeChatSDK, state, dispatch, setAdapte
   const isProactiveChat = state.appStates.conversationState === ConversationState.ProactiveChat;
   const isPreChatEnabledInProactiveChat = state.appStates.proactiveChatStates.proactiveChatEnablePrechat;
 
-  // Setting auth settings to OC API to retrieve existing persistent chat session before start chat if any
-  if (isPersistentEnabled(props.chatConfig)) {
-    await setAuthenticationIfApplicable(props, facadeChatSDK);
-  }
-
   //Setting PreChat and intiate chat
   await setPreChatAndInitiateChat(facadeChatSDK, dispatch, setAdapter, isProactiveChat, isPreChatEnabledInProactiveChat, state, props);
 };
@@ -145,6 +126,7 @@ const setPreChatAndInitiateChat = async (facadeChatSDK, dispatch, setAdapter, is
   const optionalParams = {
     isProactiveChat
   };
+  createTrackingForFirstMessage();
   await initStartChat(facadeChatSDK, dispatch, setAdapter, state, props, optionalParams);
 };
 
@@ -167,14 +149,11 @@ const initStartChat = async (facadeChatSDK, dispatch, setAdapter, state, props,
 
     //Start widget load timer
     TelemetryTimers.WidgetLoadTimer = createTimer();
-    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+    TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
       Event: TelemetryEvent.WidgetLoadStarted,
-      Description: "Widget loading started"
+      Description: "Widget start chat started."
     });
 
-    // Auth token retrieval needs to happen during start chat to support pop-out chat
-    await setAuthenticationIfApplicable(props, facadeChatSDK);
-
     //Check if chat retrieved from cache
     if (persistedState || params !== null && params !== void 0 && params.liveChatContext) {
       var _persistedState$domai, _persistedState$domai2, _persistedState$domai3, _persistedState$domai4, _persistedState$domai5;
@@ -383,6 +362,10 @@ const checkIfConversationStillValid = async (facadeChatSDK, dispatch, state) =>
         type: LiveChatWidgetActionType.SET_LIVE_CHAT_CONTEXT,
         payload: undefined
       });
+      dispatch({
+        type: LiveChatWidgetActionType.SET_UNREAD_MESSAGE_COUNT,
+        payload: 0
+      });
       if (currentRequestId) {
         facadeChatSDK.getChatSDK().requestId = currentRequestId;
       }

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

@@ -106,8 +106,9 @@ const logWidgetLoadFailed = ex => {
   if (ex !== null && ex !== void 0 && ex.httpResponseStatusCode) {
     exDetails.HttpResponseStatusCode = ex.httpResponseStatusCode;
   }
-  TelemetryHelper.logLoadingEvent(LogLevel.ERROR, {
+  TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.ERROR, {
     Event: TelemetryEvent.WidgetLoadFailed,
+    Description: "Widget load complete with error",
     ExceptionDetails: exDetails,
     ElapsedTimeInMilliseconds: TelemetryTimers === null || TelemetryTimers === void 0 ? void 0 : (_TelemetryTimers$Widg = TelemetryTimers.WidgetLoadTimer) === null || _TelemetryTimers$Widg === void 0 ? void 0 : _TelemetryTimers$Widg.milliSecondsElapsed
   });
@@ -118,7 +119,7 @@ export const logWidgetLoadComplete = additionalMessage => {
   if (additionalMessage) {
     descriptionString += `. ${additionalMessage}`;
   }
-  TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+  TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
     Event: TelemetryEvent.WidgetLoadComplete,
     Description: descriptionString,
     ElapsedTimeInMilliseconds: TelemetryTimers === null || TelemetryTimers === void 0 ? void 0 : (_TelemetryTimers$Widg2 = TelemetryTimers.WidgetLoadTimer) === null || _TelemetryTimers$Widg2 === void 0 ? void 0 : _TelemetryTimers$Widg2.milliSecondsElapsed
@@ -133,8 +134,8 @@ const logWidgetLoadCompleteWithError = ex => {
   if (ex !== null && ex !== void 0 && ex.httpResponseStatusCode) {
     exDetails.HttpResponseStatusCode = ex.httpResponseStatusCode;
   }
-  TelemetryHelper.logLoadingEvent(LogLevel.WARN, {
-    Event: TelemetryEvent.WidgetLoadComplete,
+  TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.ERROR, {
+    Event: TelemetryEvent.WidgetLoadFailed,
     Description: "Widget load complete with error",
     ExceptionDetails: exDetails,
     ElapsedTimeInMilliseconds: TelemetryTimers === null || TelemetryTimers === void 0 ? void 0 : (_TelemetryTimers$Widg3 = TelemetryTimers.WidgetLoadTimer) === null || _TelemetryTimers$Widg3 === void 0 ? void 0 : _TelemetryTimers$Widg3.milliSecondsElapsed

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

@@ -56,11 +56,12 @@ import useChatContextStore from "../../../hooks/useChatContextStore";
 import useFacadeSDKStore from "../../../hooks/useFacadeChatSDKStore";
 let uiTimer;
 export const LiveChatWidgetStateful = props => {
-  var _props$webChatContain, _props$styleProps, _props$webChatContain2, _props$webChatContain3, _props$controlProps, _props$controlProps3, _state$appStates7, _props$webChatContain7, _state$appStates14, _props$webChatContain9, _props$webChatContain10, _props$controlProps12, _props$draggableChatW, _props$draggableChatW2, _props$draggableChatW3, _props$draggableChatW4, _props$draggableChatW5, _livechatProps$webCha, _props$webChatContain11, _props$webChatContain12, _props$webChatContain13, _props$webChatContain14, _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$styleProps, _props$webChatContain2, _props$webChatContain3, _props$controlProps, _props$controlProps3, _state$appStates7, _props$webChatContain7, _state$appStates14, _props$webChatContain9, _props$webChatContain10, _props$controlProps12, _props$draggableChatW, _props$draggableChatW2, _props$draggableChatW3, _props$draggableChatW4, _props$draggableChatW5, _livechatProps$webCha, _props$webChatContain11, _props$webChatContain12, _props$webChatContain13, _props$webChatContain14, _props$webChatContain15, _props$webChatContain16, _props$webChatContain17, _props$webChatContain18, _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
+    TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
+      Event: TelemetryEvent.UXLiveChatWidgetStart,
+      Description: "Live chat widget loading started."
     });
   }, []);
   const [state, dispatch] = useChatContextStore();
@@ -311,7 +312,7 @@ export const LiveChatWidgetStateful = props => {
       });
     });
     BroadcastService.getMessageByEventName(BroadcastEvent.StartProactiveChat).subscribe(msg => {
-      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+      TelemetryHelper.logActionEventToAllTelemetry(LogLevel.INFO, {
         Event: TelemetryEvent.StartProactiveChatEventReceived,
         Description: "Start proactive chat event received."
       });
@@ -428,7 +429,7 @@ export const LiveChatWidgetStateful = props => {
       }
       if (msg !== null && msg !== void 0 && (_msg$payload7 = msg.payload) !== null && _msg$payload7 !== void 0 && _msg$payload7.customContext) {
         var _msg$payload8;
-        TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        TelemetryHelper.logActionEventToAllTelemetry(LogLevel.INFO, {
           Event: TelemetryEvent.CustomContextReceived,
           Description: "CustomContext received through startChat event."
         });
@@ -437,8 +438,8 @@ 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.logActionEvent(LogLevel.INFO, {
-        Event: TelemetryEvent.StartChatEventRecevied,
+      TelemetryHelper.logActionEventToAllTelemetry(LogLevel.INFO, {
+        Event: TelemetryEvent.StartChatEventReceived,
         Description: "Start chat event received."
       });
       const inMemoryState = executeReducer(state, {
@@ -482,7 +483,7 @@ export const LiveChatWidgetStateful = props => {
 
     // End chat
     BroadcastService.getMessageByEventName(BroadcastEvent.InitiateEndChat).subscribe(async () => {
-      TelemetryHelper.logSDKEvent(LogLevel.INFO, {
+      TelemetryHelper.logSDKEventToAllTelemetry(LogLevel.INFO, {
         Event: TelemetryEvent.EndChatEventReceived,
         Description: "Received InitiateEndChat BroadcastEvent."
       });
@@ -768,8 +769,9 @@ export const LiveChatWidgetStateful = props => {
     });
   }, [(_props$webChatContain9 = props.webChatContainerProps) === null || _props$webChatContain9 === void 0 ? void 0 : _props$webChatContain9.renderingMiddlewareProps]);
   useEffect(() => {
-    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
-      Event: TelemetryEvent.UXLivechatwidgetCompleted,
+    TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
+      Event: TelemetryEvent.UXLiveChatWidgetCompleted,
+      Description: "Live chat widget loading completed.",
       ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
     });
   }, []);
@@ -874,8 +876,8 @@ export const LiveChatWidgetStateful = props => {
     userID: userID,
     styleOptions: {
       ...webChatStyles,
-      bubbleBackground: ((_props$webChatContain11 = props.webChatContainerProps) === null || _props$webChatContain11 === void 0 ? void 0 : (_props$webChatContain12 = _props$webChatContain11.adaptiveCardStyles) === null || _props$webChatContain12 === void 0 ? void 0 : _props$webChatContain12.background) ?? defaultAdaptiveCardStyles.background,
-      bubbleTextColor: ((_props$webChatContain13 = props.webChatContainerProps) === null || _props$webChatContain13 === void 0 ? void 0 : (_props$webChatContain14 = _props$webChatContain13.adaptiveCardStyles) === null || _props$webChatContain14 === void 0 ? void 0 : _props$webChatContain14.color) ?? defaultAdaptiveCardStyles.color
+      bubbleBackground: ((_props$webChatContain11 = props.webChatContainerProps) === null || _props$webChatContain11 === void 0 ? void 0 : (_props$webChatContain12 = _props$webChatContain11.webChatStyles) === null || _props$webChatContain12 === void 0 ? void 0 : _props$webChatContain12.bubbleBackground) ?? ((_props$webChatContain13 = props.webChatContainerProps) === null || _props$webChatContain13 === void 0 ? void 0 : (_props$webChatContain14 = _props$webChatContain13.adaptiveCardStyles) === null || _props$webChatContain14 === void 0 ? void 0 : _props$webChatContain14.background) ?? defaultAdaptiveCardStyles.background,
+      bubbleTextColor: ((_props$webChatContain15 = props.webChatContainerProps) === null || _props$webChatContain15 === void 0 ? void 0 : (_props$webChatContain16 = _props$webChatContain15.webChatStyles) === null || _props$webChatContain16 === void 0 ? void 0 : _props$webChatContain16.bubbleTextColor) ?? ((_props$webChatContain17 = props.webChatContainerProps) === null || _props$webChatContain17 === void 0 ? void 0 : (_props$webChatContain18 = _props$webChatContain17.adaptiveCardStyles) === null || _props$webChatContain18 === void 0 ? void 0 : _props$webChatContain18.color) ?? defaultAdaptiveCardStyles.color
     },
     directLine: directLine
   }), /*#__PURE__*/React.createElement(Stack, {

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

@@ -1,18 +1,19 @@
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
 import { createTimer, findAllFocusableElement } from "../../common/utils";
+import DOMPurify from "dompurify";
 import { OutOfOfficeHoursPane } from "@microsoft/omnichannel-chat-components";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { defaultGeneralStyleProps } from "./common/defaultStyleProps/defaultgeneralOOOHPaneStyleProps";
 import useChatContextStore from "../../hooks/useChatContextStore";
-import DOMPurify from "dompurify";
 let uiTimer;
 export const OutOfOfficeHoursPaneStateful = props => {
   var _props$styleProps;
   useEffect(() => {
     uiTimer = createTimer();
-    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
-      Event: TelemetryEvent.UXOOHPaneStart
+    TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
+      Event: TelemetryEvent.UXOutOfOfficeHoursPaneStart,
+      Description: "Out of office hours pane loading started."
     });
   }, []);
   const [state] = useChatContextStore();
@@ -29,15 +30,18 @@ export const OutOfOfficeHoursPaneStateful = props => {
 
   // Move focus to the first button
   useEffect(() => {
-    const firstElement = findAllFocusableElement(`#${state.domainStates.widgetElementId}`);
-    if (firstElement && firstElement[0]) {
-      firstElement[0].focus();
+    if (state.domainStates.widgetElementId !== null && state.domainStates.widgetElementId !== undefined && state.domainStates.widgetElementId.trim() !== "") {
+      const firstElement = findAllFocusableElement(`#${state.domainStates.widgetElementId}`);
+      if (firstElement && firstElement[0]) {
+        firstElement[0].focus();
+      }
     }
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.OutOfOfficePaneLoaded
     });
-    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
-      Event: TelemetryEvent.UXOOHPaneCompleted,
+    TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
+      Event: TelemetryEvent.UXOutOfOfficeHoursPaneCompleted,
+      Description: "Out of office hours pane loading completed.",
       ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
     });
   }, []);

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

@@ -11,12 +11,13 @@ import useChatContextStore from "../../hooks/useChatContextStore";
 import isValidSurveyUrl from "./common/isValidSurveyUrl";
 const generateSurveyInviteLink = function (surveyInviteLink, isEmbed, locale, compact) {
   let showMultiLingual = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  const surveyLink = `${surveyInviteLink}
-            &embed=${isEmbed.toString()}
-            &compact=${compact.toString() ?? "true"}
-            &lang=${locale ?? "en-us"}
-            &showmultilingual=${showMultiLingual.toString() ?? "false"}`;
-  return surveyLink;
+  const surveyLinkParams = new URLSearchParams({
+    embed: isEmbed.toString(),
+    compact: (compact ?? true).toString(),
+    lang: locale ?? "en-us",
+    showmultilingual: (showMultiLingual ?? false).toString()
+  });
+  return `${surveyInviteLink}&${surveyLinkParams.toString()}`;
 };
 export const PostChatSurveyPaneStateful = props => {
   var _props$styleProps, _state$appStates, _props$controlProps;
@@ -83,12 +84,17 @@ export const PostChatSurveyPaneStateful = props => {
           Event: TelemetryEvent.CustomerVoiceResponsePageLoaded
         });
       } else if (data === CustomerVoiceEvents.FormResponseSubmitted) {
-        TelemetryHelper.logActionEvent(LogLevel.INFO, {
-          Event: TelemetryEvent.CustomerVoiceFormResponseSubmitted
+        TelemetryHelper.logActionEventToAllTelemetry(LogLevel.INFO, {
+          Event: TelemetryEvent.CustomerVoiceFormResponseSubmitted,
+          Description: "Customer Voice form response submitted."
         });
       } else if (data === CustomerVoiceEvents.FormResponseError) {
-        TelemetryHelper.logActionEvent(LogLevel.ERROR, {
-          Event: TelemetryEvent.CustomerVoiceFormResponseError
+        TelemetryHelper.logActionEventToAllTelemetry(LogLevel.ERROR, {
+          Event: TelemetryEvent.CustomerVoiceFormResponseError,
+          Description: "Customer Voice form response error.",
+          ExceptionDetails: {
+            message: "Customer Voice form response error."
+          }
         });
       }
     });

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

@@ -17,8 +17,9 @@ export const PreChatSurveyPaneStateful = props => {
   var _surveyProps$stylePro, _props$surveyProps, _props$surveyProps$co;
   useEffect(() => {
     uiTimer = createTimer();
-    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
-      Event: TelemetryEvent.UXPrechatPaneStart
+    TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
+      Event: TelemetryEvent.UXPrechatPaneStart,
+      Description: "Prechat survey pane loading started."
     });
   }, []);
 
@@ -67,8 +68,9 @@ export const PreChatSurveyPaneStateful = props => {
     payload: getAdaptiveCardPayload(state.domainStates.preChatSurveyResponse, requiredFieldMissingMessage),
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     onSubmit: async values => {
-      TelemetryHelper.logActionEvent(LogLevel.INFO, {
-        Event: TelemetryEvent.PrechatSubmitted
+      TelemetryHelper.logActionEventToAllTelemetry(LogLevel.INFO, {
+        Event: TelemetryEvent.PrechatSubmitted,
+        Description: "Prechat survey submitted."
       });
       dispatch({
         type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
@@ -139,9 +141,10 @@ export const PreChatSurveyPaneStateful = props => {
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.PrechatSurveyLoaded
     });
-    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+    TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
       Event: TelemetryEvent.UXPrechatPaneCompleted,
-      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed,
+      Description: "Prechat survey pane loading completed."
     });
   }, []);
 

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

@@ -16,8 +16,9 @@ export const ProactiveChatPaneStateful = props => {
   var _proactiveChatProps$c;
   useEffect(() => {
     uiTimer = createTimer();
-    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
-      Event: TelemetryEvent.UXProactiveChatPaneStart
+    TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
+      Event: TelemetryEvent.UXProactiveChatPaneStart,
+      Description: "Proactive chat pane loading started."
     });
   }, []);
   const [state, dispatch] = useChatContextStore();
@@ -42,7 +43,7 @@ export const ProactiveChatPaneStateful = props => {
         type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
         payload: ConversationState.Closed
       });
-      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+      TelemetryHelper.logActionEventToAllTelemetry(LogLevel.INFO, {
         Event: TelemetryEvent.ProactiveChatRejected,
         ElapsedTimeInMilliseconds: TelemetryTimers.LcwLoadToChatButtonTimer.milliSecondsElapsed,
         Description: "Proactive chat invitation timed out."
@@ -121,9 +122,10 @@ export const ProactiveChatPaneStateful = props => {
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.ProactiveChatPaneLoaded
     });
-    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
-      Event: TelemetryEvent.UXProactiveChatCompleted,
-      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
+    TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
+      Event: TelemetryEvent.UXProactiveChatPaneCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed,
+      Description: "Proactive chat pane loading completed."
     });
     return () => {
       clearTimeout(timeoutEvent);

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

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+import { Constants, HtmlAttributeNames, HtmlClassNames } from "../../common/Constants";
 import { Stack } from "@fluentui/react";
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
 import { createTimer, getDeviceType, setFocusOnSendBox } from "../../common/utils";
 import { BotMagicCodeStore } from "./webchatcontroller/BotMagicCodeStore";
 import { Components } from "botframework-webchat";
-import { Constants, HtmlAttributeNames, HtmlClassNames } from "../../common/Constants";
 import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
 import { NotificationHandler } from "./webchatcontroller/notification/NotificationHandler";
 import { NotificationScenarios } from "./webchatcontroller/enums/NotificationScenarios";
@@ -48,7 +48,7 @@ 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;
+  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, _webChatContainerProp16, _props$webChatContain9, _props$webChatContain10;
   useEffect(() => {
     uiTimer = createTimer();
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
@@ -233,16 +233,23 @@ export const WebChatContainerStateful = props => {
             color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp14 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp14 === void 0 ? void 0 : (_webChatContainerProp15 = _webChatContainerProp14.sentMessageAnchorStyles) === null || _webChatContainerProp15 === void 0 ? void 0 : _webChatContainerProp15.color) ?? (defaultSentMessageAnchorStyles === null || defaultSentMessageAnchorStyles === void 0 ? void 0 : defaultSentMessageAnchorStyles.color)};
         }
 
+        // we had a nasty bug long time ago with crashing borders messing with the sendbox, so if customer adds this value, they need to deal with that
         .webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content {
-            border-radius: 0 !important; /* Override border-radius */
+            border-radius: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp16 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp16 === void 0 ? void 0 : _webChatContainerProp16.bubbleBorderRadius) ?? 0} !important; /* Override border-radius */
         }
 
         .webchat__stacked-layout_container>div {
             background: ${(props === null || props === void 0 ? void 0 : (_props$webChatContain9 = props.webChatContainerProps) === null || _props$webChatContain9 === void 0 ? void 0 : (_props$webChatContain10 = _props$webChatContain9.containerStyles) === null || _props$webChatContain10 === void 0 ? void 0 : _props$webChatContain10.background) ?? ""}
         }
-        .webchat__toaster__expandText {
+        .webchat__toast_text {
             display: flex;
+            
         }
+        .webchat__toaster {
+            overflow-y: unset;
+            }
+
+        
         `), /*#__PURE__*/React.createElement(Stack, {
     styles: containerStyles,
     className: "webchat__stacked-layout_container"

package/lib/esm/components/webchatcontainerstateful/common/DemoChatAdapter.js

@@ -1,3 +1,15 @@
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 import "rxjs/add/operator/share";
 import "rxjs/add/observable/of";
 import { Observable } from "rxjs/Observable";
@@ -6,74 +18,85 @@ import { customerUser, postBotMessageActivity, postBotAttachmentActivity, postBo
 import { createHeroCardAttachment, createJpgFileAttachment, createSigninCardAttachment, createThumbnailCardAttachment } from "./utils/attachmentActivityUtils";
 import MockBotCommand from "./MockBotCommand";
 import MockBotCardCommandType from "./MockBotCardCommandType";
-export class DemoChatAdapter extends MockAdapter {
-  constructor() {
-    super();
+export let DemoChatAdapter = /*#__PURE__*/function (_MockAdapter) {
+  _inherits(DemoChatAdapter, _MockAdapter);
+  var _super = _createSuper(DemoChatAdapter);
+  function DemoChatAdapter() {
+    var _this;
+    _classCallCheck(this, DemoChatAdapter);
+    _this = _super.call(this);
     setTimeout(() => {
-      postSystemMessageActivity(this.activityObserver, "You're currently using a demo.", 0);
-      postBotMessageActivity(this.activityObserver, "Type `/help` to learn more", undefined, 0); // send init message from bot
+      postSystemMessageActivity(_this.activityObserver, "You're currently using a demo.", 0);
+      postBotMessageActivity(_this.activityObserver, "Type `/help` to learn more", undefined, 0); // send init message from bot
     }, 1000);
+    return _this;
   }
-  postBotCommandsActivity() {
-    let delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1000;
-    postBotAttachmentActivity(this.activityObserver, [{
-      contentType: "application/vnd.microsoft.card.thumbnail",
-      content: {
-        buttons: [{
-          title: "Send system message",
-          type: "imBack",
-          value: "send system message"
-        }, {
-          title: "Send typing",
-          type: "imBack",
-          value: "send typing"
-        }, {
-          title: "Send bot message",
-          type: "imBack",
-          value: "send bot message"
-        }],
-        title: "Commands"
-      }
-    }], delay);
-  }
-  postActivity(activity) {
-    if (activity) {
-      postEchoActivity(this.activityObserver, activity, customerUser);
-      if (activity.text) {
-        switch (true) {
-          case activity.text === MockBotCommand.Help:
-            this.postBotCommandsActivity();
-            break;
-          case activity.text === MockBotCommand.SendSystemMessage:
-            postSystemMessageActivity(this.activityObserver, "Contoso has joined the chat.");
-            break;
-          case activity.text === MockBotCommand.SendTyping:
-            postBotTypingActivity(this.activityObserver);
-            break;
-          case activity.text === MockBotCommand.SendAttachment:
-            postBotAttachmentActivity(this.activityObserver, [createJpgFileAttachment()]);
-            break;
-          case activity.text === MockBotCommand.SendBotMessage:
-            postBotMessageActivity(this.activityObserver, "Hi, how can I help you?");
-            break;
-          case activity.text === `${MockBotCommand.Card} ${MockBotCardCommandType.Signin}`:
-            postBotAttachmentActivity(this.activityObserver, [createSigninCardAttachment()]);
-            break;
-          case activity.text === `${MockBotCommand.Card} ${MockBotCardCommandType.Hero}`:
-            postBotAttachmentActivity(this.activityObserver, [createHeroCardAttachment()]);
-            break;
-          case activity.text === `${MockBotCommand.Card} ${MockBotCardCommandType.Thumbnail}`:
-            postBotAttachmentActivity(this.activityObserver, [createThumbnailCardAttachment()]);
-            break;
-          case activity.text.startsWith(`${MockBotCommand.Bot} `):
-            postBotMessageActivity(this.activityObserver, activity.text.substring(5));
-            break;
-          case activity.text.startsWith(`${MockBotCommand.System} `):
-            postSystemMessageActivity(this.activityObserver, activity.text.substring(8));
-            break;
+  _createClass(DemoChatAdapter, [{
+    key: "postBotCommandsActivity",
+    value: function postBotCommandsActivity() {
+      let delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1000;
+      postBotAttachmentActivity(this.activityObserver, [{
+        contentType: "application/vnd.microsoft.card.thumbnail",
+        content: {
+          buttons: [{
+            title: "Send system message",
+            type: "imBack",
+            value: "send system message"
+          }, {
+            title: "Send typing",
+            type: "imBack",
+            value: "send typing"
+          }, {
+            title: "Send bot message",
+            type: "imBack",
+            value: "send bot message"
+          }],
+          title: "Commands"
+        }
+      }], delay);
+    }
+  }, {
+    key: "postActivity",
+    value: function postActivity(activity) {
+      if (activity) {
+        postEchoActivity(this.activityObserver, activity, customerUser);
+        if (activity.text) {
+          switch (true) {
+            case activity.text === MockBotCommand.Help:
+              this.postBotCommandsActivity();
+              break;
+            case activity.text === MockBotCommand.SendSystemMessage:
+              postSystemMessageActivity(this.activityObserver, "Contoso has joined the chat.");
+              break;
+            case activity.text === MockBotCommand.SendTyping:
+              postBotTypingActivity(this.activityObserver);
+              break;
+            case activity.text === MockBotCommand.SendAttachment:
+              postBotAttachmentActivity(this.activityObserver, [createJpgFileAttachment()]);
+              break;
+            case activity.text === MockBotCommand.SendBotMessage:
+              postBotMessageActivity(this.activityObserver, "Hi, how can I help you?");
+              break;
+            case activity.text === `${MockBotCommand.Card} ${MockBotCardCommandType.Signin}`:
+              postBotAttachmentActivity(this.activityObserver, [createSigninCardAttachment()]);
+              break;
+            case activity.text === `${MockBotCommand.Card} ${MockBotCardCommandType.Hero}`:
+              postBotAttachmentActivity(this.activityObserver, [createHeroCardAttachment()]);
+              break;
+            case activity.text === `${MockBotCommand.Card} ${MockBotCardCommandType.Thumbnail}`:
+              postBotAttachmentActivity(this.activityObserver, [createThumbnailCardAttachment()]);
+              break;
+            case activity.text.startsWith(`${MockBotCommand.Bot} `):
+              postBotMessageActivity(this.activityObserver, activity.text.substring(5));
+              break;
+            case activity.text.startsWith(`${MockBotCommand.System} `):
+              postSystemMessageActivity(this.activityObserver, activity.text.substring(8));
+              break;
+          }
         }
       }
+      return Observable.of(activity.id || "");
     }
-    return Observable.of(activity.id || "");
-  }
-}
+  }]);
+  return DemoChatAdapter;
+}(MockAdapter);

package/lib/esm/components/webchatcontainerstateful/common/DemoChatSDK.js

@@ -1,10 +1,29 @@
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 import { DemoChatAdapter } from "./DemoChatAdapter";
 import { MockChatSDK } from "./mockchatsdk";
-export class DemoChatSDK extends MockChatSDK {
-  constructor() {
-    super();
+export let DemoChatSDK = /*#__PURE__*/function (_MockChatSDK) {
+  _inherits(DemoChatSDK, _MockChatSDK);
+  var _super = _createSuper(DemoChatSDK);
+  function DemoChatSDK() {
+    _classCallCheck(this, DemoChatSDK);
+    return _super.call(this);
   }
-  createChatAdapter() {
-    return new DemoChatAdapter();
-  }
-}
+  _createClass(DemoChatSDK, [{
+    key: "createChatAdapter",
+    value: function createChatAdapter() {
+      return new DemoChatAdapter();
+    }
+  }]);
+  return DemoChatSDK;
+}(MockChatSDK);