@microsoft/omnichannel-chat-widget 1.7.8-main.d38af40 → 1.7.8-main.d71f599

package/lib/esm/common/facades/FacadeChatSDK.js

@@ -142,9 +142,20 @@ export class FacadeChatSDK {
       }
     }
   }
+  async corroborateTokenIsSet(chatSDK) {
+    var _chatSDK$chatSDKConfi;
+    // if getAuthToken is not set, it's because handleAuthentication hasnt being called
+    // so we need to call it 
+    if (this.isAuthenticated && (chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$chatSDKConfi = chatSDK.chatSDKConfig) === null || _chatSDK$chatSDKConfi === void 0 ? void 0 : _chatSDK$chatSDKConfi.getAuthToken) === undefined) {
+      handleAuthentication(this.chatSDK, this.chatConfig, this.getAuthToken);
+    }
+  }
   async tokenRing() {
     var _this$chatSDK$chatSDK;
     if (this.disableReauthentication === true) {
+      // Since we are not validating the token anymore, we at least need to check if the token is set
+      // no need to validate anything other that the token is set
+      await this.corroborateTokenIsSet(this.chatSDK);
       // facade feature is disabled, so we are bypassing the re authentication and let it fail.
       return {
         result: true,
@@ -188,7 +199,7 @@ export class FacadeChatSDK {
     this.expiration = 0;
     try {
       const ring = await handleAuthentication(this.chatSDK, this.chatConfig, this.getAuthToken);
-      if (ring.result === true && ring.token) {
+      if ((ring === null || ring === void 0 ? void 0 : ring.result) === true && ring !== null && ring !== void 0 && ring.token) {
         await this.setToken(ring.token);
         TelemetryHelper.logFacadeChatSDKEvent(LogLevel.INFO, {
           Event: TelemetryEvent.NewTokenSuccess,
@@ -205,12 +216,12 @@ export class FacadeChatSDK {
         var _ring$error, _ring$error2;
         TelemetryHelper.logFacadeChatSDKEvent(LogLevel.ERROR, {
           Event: TelemetryEvent.NewTokenFailed,
-          Description: (_ring$error = ring.error) === null || _ring$error === void 0 ? void 0 : _ring$error.message,
-          ExceptionDetails: ring.error
+          Description: ring === null || ring === void 0 ? void 0 : (_ring$error = ring.error) === null || _ring$error === void 0 ? void 0 : _ring$error.message,
+          ExceptionDetails: ring === null || ring === void 0 ? void 0 : ring.error
         });
         return {
           result: false,
-          message: ((_ring$error2 = ring.error) === null || _ring$error2 === void 0 ? void 0 : _ring$error2.message) || "Failed to get token"
+          message: (ring === null || ring === void 0 ? void 0 : (_ring$error2 = ring.error) === null || _ring$error2 === void 0 ? void 0 : _ring$error2.message) || "Failed to get token"
         };
       }
     } catch (e) {

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

@@ -61,6 +61,8 @@ export let BroadcastEvent;
   BroadcastEvent["ContactIdNotFound"] = "ContactIdNotFound";
   BroadcastEvent["SyncMinimize"] = "SyncMinimize";
   BroadcastEvent["OnWidgetError"] = "OnWidgetError";
+  BroadcastEvent["FMLTrackingCompletedAck"] = "FMLTrackingCompletedAck";
+  BroadcastEvent["FMLTrackingCompleted"] = "FMLTrackingCompleted";
 })(BroadcastEvent || (BroadcastEvent = {}));
 export let TelemetryEvent;
 (function (TelemetryEvent) {
@@ -200,6 +202,8 @@ export let TelemetryEvent;
   TelemetryEvent["MessageSent"] = "MessageSent";
   TelemetryEvent["MessageReceived"] = "MessageReceived";
   TelemetryEvent["MessageLapTrack"] = "MessageLapTrack";
+  TelemetryEvent["BotFirstMessageLapTrack"] = "BotFirstMessageLapTrack";
+  TelemetryEvent["BotFirstMessageLapTrackError"] = "BotFirstMessageLapTrackError";
   TelemetryEvent["MessageStartLapTrackError"] = "MessageStartLapTrackError";
   TelemetryEvent["MessageStopLapTrackError"] = "MessageStopLapTrackError";
   TelemetryEvent["SystemMessageReceived"] = "SystemMessageReceived";

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

@@ -11,7 +11,7 @@ import { defaultOutOfOfficeChatButtonStyleProps } from "./common/styleProps/defa
 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;
+  var _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();
@@ -28,7 +28,8 @@ export const ChatButtonStateful = props => {
     startChat
   } = props;
   //Setting OutOfOperatingHours Flag
-  const [outOfOperatingHours, setOutOfOperatingHours] = useState(((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : (_state$domainStates$l2 = _state$domainStates$l.LiveWSAndLiveChatEngJoin) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.OutOfOperatingHours) === "True");
+  //Setting OutOfOperatingHours Flag - to string conversion to normalize the value (could be boolean from other states or string directly from config)
+  const [outOfOperatingHours, setOutOfOperatingHours] = useState(state.appStates.outsideOperatingHours);
   const ref = useRef(() => {
     return;
   });
@@ -87,9 +88,7 @@ export const ChatButtonStateful = props => {
     ...(outOfOfficeButtonProps === null || outOfOfficeButtonProps === void 0 ? void 0 : outOfOfficeButtonProps.controlProps)
   };
   useEffect(() => {
-    if (state.appStates.outsideOperatingHours) {
-      setOutOfOperatingHours(true);
-    }
+    setOutOfOperatingHours(state.appStates.outsideOperatingHours);
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.LCWChatButtonShow,
       ElapsedTimeInMilliseconds: TelemetryTimers.LcwLoadToChatButtonTimer.milliSecondsElapsed

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

@@ -12,7 +12,7 @@ import useChatAdapterStore from "../../hooks/useChatAdapterStore";
 import useChatContextStore from "../../hooks/useChatContextStore";
 let uiTimer;
 export const HeaderStateful = props => {
-  var _state$domainStates$l, _state$domainStates$l2, _state$domainStates, _headerProps$controlP, _headerProps$controlP2, _headerProps$controlP3, _outOfOfficeHeaderPro, _state$domainStates3;
+  var _state$domainStates, _headerProps$controlP, _headerProps$controlP2, _headerProps$controlP3, _outOfOfficeHeaderPro, _state$domainStates3;
   useEffect(() => {
     uiTimer = createTimer();
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
@@ -28,7 +28,7 @@ export const HeaderStateful = props => {
     endChat
   } = props;
   //Setting OutOfOperatingHours Flag
-  const [outOfOperatingHours, setOutOfOperatingHours] = useState(((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : (_state$domainStates$l2 = _state$domainStates$l.LiveWSAndLiveChatEngJoin) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.OutOfOperatingHours) === "True");
+  const [outOfOperatingHours, setOutOfOperatingHours] = useState(state.appStates.outsideOperatingHours);
   const outOfOfficeStyleProps = Object.assign({}, defaultOutOfOfficeHeaderStyleProps, outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : outOfOfficeHeaderProps.styleProps);
 
   // For some reason state object is not getting updated values in this component
@@ -100,9 +100,7 @@ export const HeaderStateful = props => {
     hideCloseButton: state.appStates.conversationState === ConversationState.OutOfOffice || (outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : (_outOfOfficeHeaderPro = outOfOfficeHeaderProps.controlProps) === null || _outOfOfficeHeaderPro === void 0 ? void 0 : _outOfOfficeHeaderPro.hideCloseButton)
   };
   useEffect(() => {
-    if (state.appStates.outsideOperatingHours) {
-      setOutOfOperatingHours(true);
-    }
+    setOutOfOperatingHours(state.appStates.outsideOperatingHours);
   }, []);
   useEffect(() => {
     var _state$domainStates2;

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

@@ -6,7 +6,7 @@ import { defaultMiddlewareLocalizedTexts } from "../../webchatcontainerstateful/
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const handleChatDisconnect = (props, state, setWebChatStyles) => {
-  var _state$appStates, _state$domainStates, _state$domainStates$m, _props$webChatContain, _props$webChatContain2;
+  var _state$appStates, _state$domainStates, _state$domainStates$m, _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _props$webChatContain4;
   const chatDisconnectState = state === null || state === void 0 ? void 0 : (_state$appStates = state.appStates) === null || _state$appStates === void 0 ? void 0 : _state$appStates.chatDisconnectEventReceived;
   const chatDisconnectMessage = (state === null || state === void 0 ? void 0 : (_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : (_state$domainStates$m = _state$domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_BANNER_CHAT_DISCONNECT) ?? defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_CHAT_DISCONNECT;
   const hideSendBoxOnConversationEnd = props === null || props === void 0 ? void 0 : (_props$webChatContain = props.webChatContainerProps) === null || _props$webChatContain === void 0 ? void 0 : (_props$webChatContain2 = _props$webChatContain.renderingMiddlewareProps) === null || _props$webChatContain2 === void 0 ? void 0 : _props$webChatContain2.hideSendboxOnConversationEnd;
@@ -27,6 +27,8 @@ const handleChatDisconnect = (props, state, setWebChatStyles) => {
       });
       break;
     case false:
+      // this means customer on purpose wants to hide the send box,  we should not override it
+      if ((props === null || props === void 0 ? void 0 : (_props$webChatContain3 = props.webChatContainerProps) === null || _props$webChatContain3 === void 0 ? void 0 : (_props$webChatContain4 = _props$webChatContain3.webChatStyles) === null || _props$webChatContain4 === void 0 ? void 0 : _props$webChatContain4.hideSendBox) === true) return;
       if (hideSendBoxOnConversationEnd !== false) {
         setWebChatStyles(styles => {
           return {

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

@@ -2,7 +2,7 @@ import "regenerator-runtime/runtime";
 import { BroadcastEvent, LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
 import { ConversationMode, WidgetLoadCustomErrorString } from "../../../common/Constants";
 import { checkContactIdError, isNullOrEmptyString, isNullOrUndefined } from "../../../common/utils";
-import { handleAuthentication, removeAuthTokenProvider } from "./authHelper";
+import { removeAuthTokenProvider } from "./authHelper";
 import { BroadcastService } from "@microsoft/omnichannel-chat-components";
 import { ConversationState } from "../../../contexts/common/ConversationState";
 import { LiveChatWidgetActionType } from "../../../contexts/common/LiveChatWidgetActionType";
@@ -61,11 +61,6 @@ const getChatReconnectContext = async (facadeChatSDK, chatConfig, props, isAuthe
     const chatReconnectOptionalParams = {
       reconnectId: (_props$reconnectChatP4 = props.reconnectChatPaneProps) === null || _props$reconnectChatP4 === void 0 ? void 0 : _props$reconnectChatP4.reconnectId
     };
-    // Get auth token for getting chat reconnect context
-    if (isAuthenticatedChat) {
-      // handle authentication will throw error if auth token is not available, so no need to check for response
-      await handleAuthentication(facadeChatSDK.getChatSDK(), chatConfig, props.getAuthToken);
-    }
     const reconnectChatContext = await (facadeChatSDK === null || facadeChatSDK === void 0 ? void 0 : facadeChatSDK.getChatReconnectContext(chatReconnectOptionalParams));
     if (isAuthenticatedChat) {
       // remove auth token after reconnectId is fetched

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);
 };
 
@@ -172,9 +154,6 @@ const initStartChat = async (facadeChatSDK, dispatch, setAdapter, state, props,
       Description: "Widget loading 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;

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

@@ -56,7 +56,7 @@ 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, {
@@ -874,8 +874,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,11 +1,11 @@
 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;
@@ -29,9 +29,11 @@ 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

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,8 +233,9 @@ 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 {

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/timestamps/DeliveredTimestamp.js

@@ -35,6 +35,10 @@ export const DeliveredTimestamp = _ref => {
       return /*#__PURE__*/React.createElement("span", {
         dir: "ltr"
       }, getTimestampHourMinute(timestamp));
+    } else {
+      return /*#__PURE__*/React.createElement("span", {
+        dir: dir
+      }, getTimestampHourMinute(timestamp));
     }
     return timeString;
   };

package/lib/esm/contexts/common/LiveChatWidgetContextInitialState.js

@@ -6,6 +6,10 @@ import { defaultClientDataStoreProvider } from "../../common/storage/default/def
 import { defaultMiddlewareLocalizedTexts } from "../../components/webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts";
 export const getLiveChatWidgetContextInitialState = props => {
   var _props$controlProps, _props$webChatContain;
+  const isOutsideOperatingHours = () => {
+    var _props$chatConfig, _props$chatConfig$Liv, _props$chatConfig$Liv2;
+    return ((_props$chatConfig = props.chatConfig) === null || _props$chatConfig === void 0 ? void 0 : (_props$chatConfig$Liv = _props$chatConfig.LiveWSAndLiveChatEngJoin) === null || _props$chatConfig$Liv === void 0 ? void 0 : (_props$chatConfig$Liv2 = _props$chatConfig$Liv.OutOfOperatingHours) === null || _props$chatConfig$Liv2 === void 0 ? void 0 : _props$chatConfig$Liv2.toString().toLowerCase()) === "true";
+  };
   const widgetCacheId = getWidgetCacheIdfromProps(props);
   const cacheTtlInMins = (props === null || props === void 0 ? void 0 : (_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.cacheTtlInMins) ?? Constants.CacheTtlInMinutes;
   const storageType = (props === null || props === void 0 ? void 0 : props.useSessionStorage) === true ? StorageType.sessionStorage : StorageType.localStorage;
@@ -22,6 +26,14 @@ export const getLiveChatWidgetContextInitialState = props => {
     if (initialStateFromCache.appStates.conversationState === ConversationState.Prechat) {
       initialStateFromCache.appStates.conversationState = ConversationState.Closed;
     }
+
+    // we are always setting the chatConfig from the props to avoid any issues with the cache
+    initialStateFromCache.domainStates.liveChatConfig = props.chatConfig;
+
+    // Cache the result of isOutsideOperatingHours() to ensure consistency
+    const outsideOperatingHours = isOutsideOperatingHours();
+    initialStateFromCache.appStates.outsideOperatingHours = outsideOperatingHours;
+    initialStateFromCache.appStates.conversationState = outsideOperatingHours ? ConversationState.OutOfOffice : initialStateFromCache.appStates.conversationState;
     return initialStateFromCache;
   }
   const LiveChatWidgetContextInitialState = {
@@ -46,11 +58,11 @@ export const getLiveChatWidgetContextInitialState = props => {
       startChatFailureType: StartChatFailureType.Generic
     },
     appStates: {
-      conversationState: ConversationState.Closed,
+      conversationState: isOutsideOperatingHours() ? ConversationState.OutOfOffice : ConversationState.Closed,
       isMinimized: undefined,
       previousElementIdOnFocusBeforeModalOpen: null,
       startChatFailed: false,
-      outsideOperatingHours: false,
+      outsideOperatingHours: isOutsideOperatingHours(),
       preChatResponseEmail: "",
       isAudioMuted: null,
       newMessage: false,

package/lib/esm/firstresponselatency/FirstMessageTrackerFromBot.js

@@ -0,0 +1,112 @@
+import { BroadcastEvent, LogLevel, TelemetryEvent } from "../common/telemetry/TelemetryConstants";
+import { BroadcastService } from "@microsoft/omnichannel-chat-components";
+import { TelemetryHelper } from "../common/telemetry/TelemetryHelper";
+import { createTrackingMessage } from "./util";
+
+// This tracker is event based, this is since we are tracking events coming from different sources
+//  with different timeline, therefore this is a functional approach to track the events, instead of a class based approach
+export const createTrackingForFirstMessage = () => {
+  // Reset the tracking variables
+  let startTracking = false;
+  let stopTracking = false;
+  let startTime = 0;
+  let stopTime = 0;
+  let stopTrackingMessage;
+  let flag = false;
+  const isMessageFromValidSender = payload => {
+    var _payload$tags;
+    // agent scenario
+    if (payload !== null && payload !== void 0 && (_payload$tags = payload.tags) !== null && _payload$tags !== void 0 && _payload$tags.includes("public")) {
+      return false;
+    }
+    return true;
+  };
+  const widgetLoadListener = BroadcastService.getMessageByEventName(TelemetryEvent.WidgetLoadComplete).subscribe(() => {
+    if (startTracking) return;
+    startTracking = true;
+    startTime = new Date().getTime();
+  });
+  const newMessageListener = BroadcastService.getMessageByEventName(BroadcastEvent.NewMessageReceived).subscribe(message => {
+    const payload = message.payload;
+
+    // we only care for bot, so we need to check if the message is from the bot
+    // pending to add typing message indicator signal detection
+
+    if (isMessageFromValidSender(payload)) {
+      if (startTracking && !stopTracking) {
+        stopTime = new Date().getTime();
+        const elapsedTime = stopTime - startTime;
+        stopTracking = true;
+        stopTrackingMessage = createTrackingMessage(payload, "botMessage");
+        notifyFMLTrackingCompleted();
+        TelemetryHelper.logActionEvent(LogLevel.INFO, {
+          Event: TelemetryEvent.BotFirstMessageLapTrack,
+          Description: "First Message from Bot latency tracking",
+          CustomProperties: {
+            elapsedTime,
+            widgetLoadedAt: startTime,
+            botMessage: stopTrackingMessage
+          }
+        });
+      }
+    }
+
+    // this track only first message, if coming from the bot or not
+    // the only difference is that it logs only those from bot
+    disconnectListener();
+  });
+  const notifyFMLTrackingCompleted = () => {
+    ackListener();
+    // Retry sending until flag is true, but do not block the main thread
+    const interval = setInterval(() => {
+      if (flag) {
+        clearInterval(interval);
+      } else {
+        BroadcastService.postMessage({
+          eventName: BroadcastEvent.FMLTrackingCompleted,
+          payload: null
+        });
+      }
+    }, 100);
+  };
+  const ackListener = () => {
+    const listen = BroadcastService.getMessageByEventName(BroadcastEvent.FMLTrackingCompletedAck).subscribe(() => {
+      flag = true;
+      listen.unsubscribe();
+    });
+  };
+
+  // Rehydrate message is received when the widget is reloaded, this is to ensure that we are not tracking messages that are not part of the current conversation
+  // No need to keep listerning for tracking, enforcing disconnection for the listners
+  const rehydrateListener = BroadcastService.getMessageByEventName(TelemetryEvent.RehydrateMessageReceived).subscribe(() => {
+    startTracking = false;
+    stopTracking = false;
+    disconnectListener();
+  });
+
+  // Rehydrate message is received when the widget is reloaded, this is to ensure that we are not tracking messages that are not part of the current conversation
+  // No need to keep listerning for tracking, enforcing disconnection for the listners
+  const historyListener = BroadcastService.getMessageByEventName(BroadcastEvent.HistoryMessageReceived).subscribe(() => {
+    startTracking = false;
+    stopTracking = false;
+    disconnectListener();
+  });
+  const offlineNetworkListener = BroadcastService.getMessageByEventName(TelemetryEvent.NetworkDisconnected).subscribe(() => {
+    startTracking = false;
+    stopTracking = false;
+    disconnectListener();
+    TelemetryHelper.logActionEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.BotFirstMessageLapTrackError,
+      Description: "Tracker Stopped due to network disconnection"
+    });
+  });
+
+  // this is to ensure that we are not tracking messages that are not part of the current conversation
+  const disconnectListener = () => {
+    historyListener.unsubscribe();
+    rehydrateListener.unsubscribe();
+    newMessageListener.unsubscribe();
+    widgetLoadListener.unsubscribe();
+    offlineNetworkListener.unsubscribe();
+  };
+};

package/lib/esm/firstresponselatency/FirstResponseLatencyTracker.js

@@ -1,7 +1,8 @@
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 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); }
-import { LogLevel, TelemetryEvent } from "../common/telemetry/TelemetryConstants";
+import { BroadcastEvent, LogLevel, TelemetryEvent } from "../common/telemetry/TelemetryConstants";
+import { BroadcastService } from "@microsoft/omnichannel-chat-components";
 import { TelemetryHelper } from "../common/telemetry/TelemetryHelper";
 export class FirstResponseLatencyTracker {
   constructor() {
@@ -10,6 +11,32 @@ export class FirstResponseLatencyTracker {
     _defineProperty(this, "isEnded", false);
     _defineProperty(this, "startTrackingMessage", void 0);
     _defineProperty(this, "stopTrackingMessage", void 0);
+    _defineProperty(this, "isReady", false);
+    _defineProperty(this, "offlineNetworkListener", BroadcastService.getMessageByEventName(TelemetryEvent.NetworkDisconnected).subscribe(() => {
+      this.isStarted = false;
+      this.isEnded = false;
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.MessageStopLapTrackError,
+        Description: "Tracker Stopped due to network disconnection"
+      });
+    }));
+    _defineProperty(this, "fmltrackingListener", BroadcastService.getMessageByEventName(BroadcastEvent.FMLTrackingCompleted).subscribe(() => {
+      this.isReady = true;
+      BroadcastService.postMessage({
+        eventName: BroadcastEvent.FMLTrackingCompletedAck,
+        payload: null
+      });
+    }));
+    // Rehydrate message is received when the widget is reloaded, this is to ensure that we are not tracking messages that are not part of the current conversation
+    // No need to keep listerning for tracking, enforcing disconnection for the listners
+    _defineProperty(this, "rehydrateListener", BroadcastService.getMessageByEventName(TelemetryEvent.RehydrateMessageReceived).subscribe(() => {
+      this.isReady = true;
+    }));
+    // Rehydrate message is received when the widget is reloaded, this is to ensure that we are not tracking messages that are not part of the current conversation
+    // No need to keep listerning for tracking, enforcing disconnection for the listners
+    _defineProperty(this, "historyListener", BroadcastService.getMessageByEventName(BroadcastEvent.HistoryMessageReceived).subscribe(() => {
+      this.isReady = true;
+    }));
     // this is a workaround to ensure in reload we track effectively the messages
     // we do have a mechanism in place to prevent log agent messages.
     this.isABotConversation = true;
@@ -29,6 +56,7 @@ export class FirstResponseLatencyTracker {
 
   // Tracking Functions
   startTracking(payload) {
+    if (!this.isReady) return;
     //  this prevents to initiate tracking for multiple incoming messages
     if (this.isStarted) {
       return;
@@ -37,11 +65,9 @@ export class FirstResponseLatencyTracker {
     if (!this.isABotConversation) {
       return;
     }
-
     // control of states to prevent clashing of messages
     this.isStarted = true;
     this.isEnded = false;
-
     // The idea  of using types is to enrich telemetry data 
     this.startTrackingMessage = this.createTrackingMessage(payload, "userMessage");
   }
@@ -93,9 +119,6 @@ export class FirstResponseLatencyTracker {
       if (!payload || !payload.Id) {
         throw new Error("Invalid payload");
       }
-      // in the case of a reload, tracker will be paused, until last history message is received
-      // this is because we dont have a way to identidy send messages as part of the history
-      //if (this.inPause) return;
       this.startTracking(payload);
     } catch (e) {
       TelemetryHelper.logActionEvent(LogLevel.ERROR, {
@@ -141,5 +164,9 @@ export class FirstResponseLatencyTracker {
     this.isEnded = false;
     this.startTrackingMessage = undefined;
     this.stopTrackingMessage = undefined;
+    this.offlineNetworkListener.unsubscribe();
+    this.fmltrackingListener.unsubscribe();
+    this.rehydrateListener.unsubscribe();
+    this.historyListener.unsubscribe();
   }
 }

package/lib/esm/firstresponselatency/util.js

@@ -72,4 +72,16 @@ export const getScenarioType = activity => {
     return ScenarioType.SystemMessageStrategy;
   }
   return ScenarioType.ReceivedMessageStrategy;
+};
+export const createTrackingMessage = (payload, type) => {
+  return {
+    Id: payload.Id,
+    role: payload.role,
+    timestamp: payload === null || payload === void 0 ? void 0 : payload.timestamp,
+    tags: payload.tags,
+    messageType: payload.messageType,
+    text: payload.text,
+    type: type,
+    checkTime: new Date().getTime()
+  };
 };

package/lib/types/common/facades/FacadeChatSDK.d.ts

@@ -43,6 +43,7 @@ export declare class FacadeChatSDK {
     private enforceBase64Encoding;
     private extractExpFromToken;
     private setToken;
+    private corroborateTokenIsSet;
     private tokenRing;
     private validateAndExecuteCall;
     initialize(optionalParams?: InitializeOptionalParams): Promise<ChatConfig>;

package/lib/types/common/telemetry/TelemetryConstants.d.ts

@@ -54,7 +54,9 @@ export declare enum BroadcastEvent {
     UpdateConversationDataForTelemetry = "UpdateConversationDataForTelemetry",
     ContactIdNotFound = "ContactIdNotFound",
     SyncMinimize = "SyncMinimize",
-    OnWidgetError = "OnWidgetError"
+    OnWidgetError = "OnWidgetError",
+    FMLTrackingCompletedAck = "FMLTrackingCompletedAck",
+    FMLTrackingCompleted = "FMLTrackingCompleted"
 }
 export declare enum TelemetryEvent {
     CallAdded = "CallAdded",
@@ -193,6 +195,8 @@ export declare enum TelemetryEvent {
     MessageSent = "MessageSent",
     MessageReceived = "MessageReceived",
     MessageLapTrack = "MessageLapTrack",
+    BotFirstMessageLapTrack = "BotFirstMessageLapTrack",
+    BotFirstMessageLapTrackError = "BotFirstMessageLapTrackError",
     MessageStartLapTrackError = "MessageStartLapTrackError",
     MessageStopLapTrackError = "MessageStopLapTrackError",
     SystemMessageReceived = "SystemMessageReceived",

package/lib/types/firstresponselatency/FirstMessageTrackerFromBot.d.ts

@@ -0,0 +1 @@
+export declare const createTrackingForFirstMessage: () => void;