@microsoft/omnichannel-chat-widget 1.7.4-main.f0f5d34 → 1.7.4

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

@@ -0,0 +1,291 @@
+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 { BroadcastEvent, LogLevel, TelemetryEvent } from "../telemetry/TelemetryConstants";
+import { getAuthClientFunction, handleAuthentication } from "../../components/livechatwidget/common/authHelper";
+import { BroadcastService } from "@microsoft/omnichannel-chat-components";
+import { TelemetryHelper } from "../telemetry/TelemetryHelper";
+import { isNullOrEmptyString } from "../utils";
+export class FacadeChatSDK {
+  isSDKMocked() {
+    return this.sdkMocked;
+  }
+  getChatSDK() {
+    return this.chatSDK;
+  }
+  destroy() {
+    this.token = null;
+    this.expiration = 0;
+  }
+  isTokenSet() {
+    return !isNullOrEmptyString(this.token);
+  }
+  constructor(input) {
+    _defineProperty(this, "chatSDK", void 0);
+    _defineProperty(this, "chatConfig", void 0);
+    _defineProperty(this, "token", "");
+    _defineProperty(this, "expiration", 0);
+    _defineProperty(this, "isAuthenticated", void 0);
+    _defineProperty(this, "getAuthToken", void 0);
+    _defineProperty(this, "sdkMocked", void 0);
+    this.chatSDK = input.chatSDK;
+    this.chatConfig = input.chatConfig;
+    this.getAuthToken = input.getAuthToken;
+    this.isAuthenticated = input.isAuthenticated;
+    this.sdkMocked = input.isSDKMocked;
+  }
+
+  //set default expiration to zero, for undefined or missed exp in jwt
+  convertExpiration() {
+    let expiration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    // Converting expiration to seconds, if contains decimals or is identified as milliseconds
+    if (expiration.toString().length === 13) {
+      return Math.floor(expiration / 1000);
+    }
+    // If the epoch value is already in seconds, return it as is
+    return expiration;
+  }
+  isTokenExpired() {
+    // if expiration is 0, token is not going to be validated ( this is to cover the case of token with no expiration)
+    if (this.expiration === 0) {
+      return false;
+    }
+
+    // obtain current time in seconds
+    const now = Math.floor(Date.now() / 1000);
+
+    // compare expiration time with current time
+    if (now > this.expiration) {
+      console.log("Token is expired", now, this.expiration, now > this.expiration);
+      return true;
+    }
+    return false;
+  }
+  async setToken(token) {
+    // token must be not null, and must be new
+    if (!isNullOrEmptyString(token) && token !== this.token) {
+      var _this$token;
+      const instant = Math.floor(Date.now() / 1000);
+      this.token = token;
+      // decompose token
+      const tokenParts = (_this$token = this.token) === null || _this$token === void 0 ? void 0 : _this$token.split(".");
+      if (!tokenParts || tokenParts.length <= 1) {
+        TelemetryHelper.logFacadeChatSDKEvent(LogLevel.ERROR, {
+          Event: TelemetryEvent.NewTokenFailed,
+          Description: "Invalid token format",
+          ExceptionDetails: "Token must be in JWT format"
+        });
+        throw new Error("Invalid token format, must be in JWT format");
+      }
+      // decode token
+      const tokenDecoded = JSON.parse(atob(tokenParts[1]));
+      // calculate expiration time
+      this.expiration = this.convertExpiration(tokenDecoded.exp);
+
+      // this is a control , in case the getAuthToken function returns same token
+      if (this.expiration > 0 && this.expiration < instant) {
+        TelemetryHelper.logFacadeChatSDKEvent(LogLevel.ERROR, {
+          Event: TelemetryEvent.NewTokenExpired,
+          Description: "New token is already expired",
+          ExceptionDetails: {
+            "Instant": instant,
+            "Expiration": this.expiration
+          }
+        });
+        throw new Error("New token is already expired, with epoch time " + this.expiration);
+      }
+    }
+  }
+  async tokenRing() {
+    // this is needed for storybooks, specifically for reconnect pane which requires authentication bypass
+    if (this.sdkMocked === true) {
+      return {
+        result: true,
+        message: "Authentication not needed"
+      };
+    }
+    if (!this.isAuthenticated) {
+      return {
+        result: true,
+        message: "Authentication not needed"
+      };
+    }
+    if (this.isTokenSet() && !this.isTokenExpired()) {
+      return {
+        result: true,
+        message: "Token is valid"
+      };
+    }
+    if (this.getAuthToken === undefined) {
+      TelemetryHelper.logFacadeChatSDKEvent(LogLevel.ERROR, {
+        Event: TelemetryEvent.NewTokenFailed,
+        Description: "GetAuthToken function is not present",
+        ExceptionDetails: "Missing function : " + getAuthClientFunction(this.chatConfig)
+      });
+      return {
+        result: false,
+        message: "GetAuthToken function is not present"
+      };
+    }
+
+    // if token is not set, or token is already expired , then go to grab a token
+    this.token = "";
+    this.expiration = 0;
+    try {
+      const ring = await handleAuthentication(this.chatSDK, this.chatConfig, this.getAuthToken);
+      if (ring.result === true && ring.token) {
+        await this.setToken(ring.token);
+        TelemetryHelper.logFacadeChatSDKEvent(LogLevel.INFO, {
+          Event: TelemetryEvent.NewTokenSuccess,
+          Description: "New Token obtained",
+          Data: {
+            "Token_Expiration": this.expiration
+          }
+        });
+        return {
+          result: true,
+          message: "New Token obtained"
+        };
+      } else {
+        var _ring$error, _ring$error2;
+        console.error("Failed to get token", ring);
+        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
+        });
+        return {
+          result: false,
+          message: ((_ring$error2 = ring.error) === null || _ring$error2 === void 0 ? void 0 : _ring$error2.message) || "Failed to get token"
+        };
+      }
+    } catch (e) {
+      console.error("Unexpected error while getting token", e);
+      TelemetryHelper.logFacadeChatSDKEvent(LogLevel.ERROR, {
+        Event: TelemetryEvent.NewTokenFailed,
+        Description: "Unexpected error while getting token",
+        ExceptionDetails: e
+      });
+      return {
+        result: false,
+        message: "Unexpected error while getting token"
+      };
+    }
+  }
+  async validateAndExecuteCall(functionName, fn) {
+    const pingResponse = await this.tokenRing();
+    if (pingResponse.result === true) {
+      return fn();
+    }
+    const executionErrorMessage = `Authentication failed: Process to get a token failed for ${functionName}, ${pingResponse.message}`;
+    //telemetry is already logged in tokenRing, so no need to log again, just return the error and communicate to the console
+    console.error(executionErrorMessage);
+    BroadcastService.postMessage({
+      eventName: BroadcastEvent.OnWidgetError,
+      payload: {
+        errorMessage: executionErrorMessage
+      }
+    });
+    throw new Error(executionErrorMessage);
+  }
+  async initialize() {
+    let optionalParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return this.validateAndExecuteCall("initialize", () => this.chatSDK.initialize(optionalParams));
+  }
+  async getChatReconnectContext() {
+    let optionalParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return this.validateAndExecuteCall("getChatReconnectContext", () => this.chatSDK.getChatReconnectContext(optionalParams));
+  }
+  async startChat() {
+    let optionalParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return this.validateAndExecuteCall("startChat", () => this.chatSDK.startChat(optionalParams));
+  }
+  async endChat() {
+    let optionalParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return this.validateAndExecuteCall("endChat", () => this.chatSDK.endChat(optionalParams));
+  }
+  async getCurrentLiveChatContext() {
+    return this.validateAndExecuteCall("getCurrentLiveChatContext", () => this.chatSDK.getCurrentLiveChatContext());
+  }
+  async getConversationDetails() {
+    let optionalParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return this.validateAndExecuteCall("getConversationDetails", () => this.chatSDK.getConversationDetails(optionalParams));
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async getPreChatSurvey() {
+    let parse = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    //prechat survey is obtained from config object, which is not required to be authenticated
+    // removing the tokenRing function from this call for backward compatibility
+    // TODO ::  wrap this function around authentication
+    return this.chatSDK.getPreChatSurvey(parse);
+  }
+  async getLiveChatConfig(optionalParams) {
+    return this.validateAndExecuteCall("getLiveChatConfig", () => this.chatSDK.getLiveChatConfig(optionalParams));
+  }
+  async getChatToken() {
+    let cached = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    let optionalParams = arguments.length > 1 ? arguments[1] : undefined;
+    return this.validateAndExecuteCall("getChatToken", () => this.chatSDK.getChatToken(cached, optionalParams));
+  }
+  async getCallingToken() {
+    return this.validateAndExecuteCall("getCallingToken", () => this.chatSDK.getCallingToken());
+  }
+  async getMessages() {
+    return this.validateAndExecuteCall("getMessages", () => this.chatSDK.getMessages());
+  }
+  async getDataMaskingRules() {
+    return this.validateAndExecuteCall("getDataMaskingRules", () => this.chatSDK.getDataMaskingRules());
+  }
+  async sendMessage(message) {
+    return this.validateAndExecuteCall("sendMessage", () => this.chatSDK.sendMessage(message));
+  }
+  async onNewMessage(onNewMessageCallback) {
+    let optionalParams = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return this.validateAndExecuteCall("onNewMessage", () => this.chatSDK.onNewMessage(onNewMessageCallback, optionalParams));
+  }
+  async sendTypingEvent() {
+    return this.validateAndExecuteCall("sendTypingEvent", () => this.chatSDK.sendTypingEvent());
+  }
+  async onTypingEvent(onTypingEventCallback) {
+    return this.validateAndExecuteCall("onTypingEvent", () => this.chatSDK.onTypingEvent(onTypingEventCallback));
+  }
+  async onAgentEndSession(onAgentEndSessionCallback) {
+    return this.validateAndExecuteCall("onAgentEndSession", () => this.chatSDK.onAgentEndSession(onAgentEndSessionCallback));
+  }
+  async uploadFileAttachment(fileInfo) {
+    return this.validateAndExecuteCall("uploadFileAttachment", () => this.chatSDK.uploadFileAttachment(fileInfo));
+  }
+  async downloadFileAttachment(fileMetadata) {
+    return this.validateAndExecuteCall("downloadFileAttachment", () => this.chatSDK.downloadFileAttachment(fileMetadata));
+  }
+  async emailLiveChatTranscript(body) {
+    let optionalParams = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return this.validateAndExecuteCall("emailLiveChatTranscript", () => this.chatSDK.emailLiveChatTranscript(body, optionalParams));
+  }
+  async getLiveChatTranscript() {
+    let optionalParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return this.validateAndExecuteCall("getLiveChatTranscript", () => this.chatSDK.getLiveChatTranscript(optionalParams));
+  }
+
+  // response from origin is unknown, but this definition breaks create adapter for shimAdapter, switching to any until type is returned from origin
+  async createChatAdapter() {
+    let optionalParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return this.validateAndExecuteCall("createChatAdapter", () => this.chatSDK.createChatAdapter(optionalParams));
+  }
+  async isVoiceVideoCallingEnabled() {
+    this.tokenRing();
+    return this.chatSDK.isVoiceVideoCallingEnabled();
+  }
+  async getVoiceVideoCalling() {
+    let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return this.validateAndExecuteCall("getVoiceVideoCalling", () => this.chatSDK.getVoiceVideoCalling(params));
+  }
+  async getPostChatSurveyContext() {
+    return this.validateAndExecuteCall("getPostChatSurveyContext", () => this.chatSDK.getPostChatSurveyContext());
+  }
+  async getAgentAvailability() {
+    let optionalParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return this.validateAndExecuteCall("getAgentAvailability", () => this.chatSDK.getAgentAvailability(optionalParams));
+  }
+}

package/lib/esm/common/facades/types/IFacadeChatSDKInput.js

@@ -0,0 +1 @@
+export {};

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

@@ -60,6 +60,7 @@ export let BroadcastEvent;
   BroadcastEvent["UpdateConversationDataForTelemetry"] = "UpdateConversationDataForTelemetry";
   BroadcastEvent["ContactIdNotFound"] = "ContactIdNotFound";
   BroadcastEvent["SyncMinimize"] = "SyncMinimize";
+  BroadcastEvent["OnWidgetError"] = "OnWidgetError";
 })(BroadcastEvent || (BroadcastEvent = {}));
 export let TelemetryEvent;
 (function (TelemetryEvent) {
@@ -115,6 +116,7 @@ export let TelemetryEvent;
   TelemetryEvent["CloseChatCall"] = "CloseChatCall";
   TelemetryEvent["CloseChatMethodException"] = "CloseChatMethodException";
   TelemetryEvent["PrechatSurveyLoaded"] = "PrechatSurveyLoaded";
+  TelemetryEvent["PrechatSurveyExpected"] = "PrechatSurveyExpected";
   TelemetryEvent["PrechatSubmitted"] = "PrechatSubmitted";
   TelemetryEvent["StartChatSDKCall"] = "StartChatCall";
   TelemetryEvent["StartChatEventRecevied"] = "StartChatEventReceived";
@@ -181,6 +183,7 @@ export let TelemetryEvent;
   TelemetryEvent["SendTypingIndicatorSucceeded"] = "SendTypingIndicatorSucceeded";
   TelemetryEvent["SendTypingIndicatorFailed"] = "SendTypingIndicatorFailed";
   TelemetryEvent["WebChatEvent"] = "WebChatEvent";
+  TelemetryEvent["FacadeChatSDKEvent"] = "FacadeChatSDKEvent";
   TelemetryEvent["PreChatSurveyStartChatMethodFailed"] = "PreChatSurveyStartChatMethodFailed";
   TelemetryEvent["ChatAlreadyTriggered"] = "ChatAlreadyTriggered";
   TelemetryEvent["StartProactiveChatEventReceived"] = "StartProactiveChatEventReceived";
@@ -211,6 +214,10 @@ export let TelemetryEvent;
   TelemetryEvent["ChatDisconnectThreadEventReceived"] = "ChatDisconnectThreadEventReceived";
   TelemetryEvent["HiddenAdaptiveCardMessageReceived"] = "HiddenAdaptiveCardMessageReceived";
   TelemetryEvent["EndingAdapterAfterDisconnectionError"] = "EndingAdapterAfterDisconnectionError";
+  TelemetryEvent["NewTokenSuccess"] = "NewTokenSuccess";
+  TelemetryEvent["NewTokenFailed"] = "NewTokenFailed";
+  TelemetryEvent["NewTokenExpired"] = "NewTokenExpired";
+  TelemetryEvent["TokenEmptyOrSame"] = "TokenEmptyOrSame";
 })(TelemetryEvent || (TelemetryEvent = {}));
 export class TelemetryConstants {
   static map(eventTypeOrScenarioType) {

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

@@ -15,6 +15,7 @@ export class TelemetryHelper {
       case ScenarioType.WEBCHAT:
         return TelemetryHelper.conformToWebChatContract(level, input);
       case ScenarioType.OCCHATSDK:
+      case ScenarioType.SDK:
         return TelemetryHelper.conformToOCChatSDKContract(level, input);
       case ScenarioType.ACTIONS:
         return TelemetryHelper.conformToActionsContract(level, input);
@@ -150,6 +151,7 @@ export class TelemetryHelper {
       event.TransactionId = payload.TransactionId;
       event.ElapsedTimeInMilliseconds = payload.ElapsedTimeInMilliseconds;
       event.ExceptionDetails = JSON.stringify(payload.ExceptionDetails);
+      event.Description = payload.Description;
     });
   }
   static addChatConfigDataToTelemetry(chatConfig, telemetryInternalData) {
@@ -255,4 +257,14 @@ _defineProperty(TelemetryHelper, "logWebChatEvent", (logLevel, payload) => {
     }
   };
   BroadcastService.postMessage(telemetryEvent);
+});
+_defineProperty(TelemetryHelper, "logFacadeChatSDKEvent", (logLevel, payload) => {
+  const telemetryEvent = {
+    eventName: (payload === null || payload === void 0 ? void 0 : payload.Event) ?? TelemetryEvent.FacadeChatSDKEvent,
+    logLevel: logLevel,
+    payload: {
+      ...payload
+    }
+  };
+  BroadcastService.postMessage(telemetryEvent);
 });

package/lib/esm/common/utils.js

@@ -357,7 +357,7 @@ export const isThisSessionPopout = href => {
   return false;
 };
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const getConversationDetailsCall = async function (chatSDK) {
+export const getConversationDetailsCall = async function (facadeChatSDK) {
   let liveChatContext = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   let conversationDetails = undefined; // eslint-disable-line @typescript-eslint/no-explicit-any
   const optionalParams = {}; // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -370,7 +370,7 @@ export const getConversationDetailsCall = async function (chatSDK) {
       Event: TelemetryEvent.GetConversationDetailsCallStarted,
       Description: "Conversation details call started"
     });
-    conversationDetails = await chatSDK.getConversationDetails(optionalParams);
+    conversationDetails = await facadeChatSDK.getConversationDetails(optionalParams);
   } catch (error) {
     checkContactIdError(error);
     TelemetryHelper.logSDKEvent(LogLevel.ERROR, {

package/lib/esm/components/callingcontainerstateful/CallingContainerStateful.js

@@ -4,15 +4,11 @@ import { CallingContainer } from "@microsoft/omnichannel-chat-components";
 import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import useChatContextStore from "../../hooks/useChatContextStore";
-import useChatSDKStore from "../../hooks/useChatSDKStore";
+import useFacadeSDKStore from "../../hooks/useFacadeChatSDKStore";
 export const CallingContainerStateful = props => {
   var _props$controlProps, _props$controlProps2, _props$controlProps2$, _props$controlProps3, _props$controlProps3$, _props$controlProps3$2, _props$controlProps4, _props$controlProps4$, _props$controlProps4$2, _props$controlProps5;
-  //TODO : Close button confirmation implmentation is pending
-
   const [state, dispatch] = useChatContextStore();
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const chatSDK = useChatSDKStore();
-
+  const [facadeChatSDK] = useFacadeSDKStore();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const {
     voiceVideoCallingSdk
@@ -45,7 +41,7 @@ export const CallingContainerStateful = props => {
   useEffect(() => {
     const init = async () => {
       try {
-        var _controlProps$current, _controlProps$current2, _controlProps$current3, _controlProps$current4;
+        var _controlProps$current, _controlProps$current2, _controlProps$current3, _controlProps$current4, _facadeChatSDK$getCha;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         TelemetryHelper.callId = callId;
         await voiceVideoCallingSdk.initialize({
@@ -54,7 +50,7 @@ export const CallingContainerStateful = props => {
           // HTML element id where video stream of the agent will be rendered
           remoteVideoHTMLElementId: (_controlProps$current3 = controlProps.currentCallControlProps) === null || _controlProps$current3 === void 0 ? void 0 : (_controlProps$current4 = _controlProps$current3.nonActionIds) === null || _controlProps$current4 === void 0 ? void 0 : _controlProps$current4.remoteVideoTileId,
           // HTML element id where video stream of the customer will be rendered
-          OCClient: chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.OCClient
+          OCClient: (_facadeChatSDK$getCha = facadeChatSDK.getChatSDK()) === null || _facadeChatSDK$getCha === void 0 ? void 0 : _facadeChatSDK$getCha.OCClient
         });
       } catch (e) {
         TelemetryHelper.logCallingEvent(LogLevel.ERROR, {

package/lib/esm/components/emailtranscriptpanestateful/EmailTranscriptPaneStateful.js

@@ -8,16 +8,15 @@ import { NotificationHandler } from "../webchatcontainerstateful/webchatcontroll
 import { NotificationScenarios } from "../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
 import { Regex } from "../../common/Constants";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
-import useChatContextStore from "../../hooks/useChatContextStore";
-import useChatSDKStore from "../../hooks/useChatSDKStore";
 import { defaultMiddlewareLocalizedTexts } from "../webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts";
+import useChatContextStore from "../../hooks/useChatContextStore";
+import useFacadeSDKStore from "../../hooks/useFacadeChatSDKStore";
 export const EmailTranscriptPaneStateful = props => {
   var _props$controlProps;
   const initialTabIndexMap = new Map();
   let elements = [];
   const [state, dispatch] = useChatContextStore();
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const chatSDK = useChatSDKStore();
+  const [facadeChatSDK] = useFacadeSDKStore();
   const [initialEmail, setInitialEmail] = useState("");
   const closeEmailTranscriptPane = () => {
     dispatch({
@@ -45,7 +44,7 @@ export const EmailTranscriptPaneStateful = props => {
       attachmentMessage: (props === null || props === void 0 ? void 0 : props.attachmentMessage) ?? "The following attachment was uploaded during the conversation:"
     };
     try {
-      await (chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.emailLiveChatTranscript(chatTranscriptBody, {
+      await (facadeChatSDK === null || facadeChatSDK === void 0 ? void 0 : facadeChatSDK.emailLiveChatTranscript(chatTranscriptBody, {
         liveChatContext
       }));
       NotificationHandler.notifySuccess(NotificationScenarios.EmailAddressSaved, defaultMiddlewareLocalizedTexts === null || defaultMiddlewareLocalizedTexts === void 0 ? void 0 : defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_SUCCESS);
@@ -63,7 +62,7 @@ export const EmailTranscriptPaneStateful = props => {
       const message = formatTemplateString(defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR, [email]);
       NotificationHandler.notifyError(NotificationScenarios.EmailTranscriptError, (props === null || props === void 0 ? void 0 : props.bannerMessageOnError) ?? message);
     }
-  }, [props.attachmentMessage, props.bannerMessageOnError, chatSDK, state.domainStates.liveChatContext]);
+  }, [props.attachmentMessage, props.bannerMessageOnError, facadeChatSDK, state.domainStates.liveChatContext]);
   const controlProps = {
     id: "oclcw-emailTranscriptDialogContainer",
     dir: state.domainStates.globalDir,

package/lib/esm/components/footerstateful/FooterStateful.js

@@ -2,6 +2,7 @@ import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConsta
 import React, { useEffect } from "react";
 import AudioNotificationStateful from "./audionotificationstateful/AudioNotificationStateful";
 import { Constants } from "../../common/Constants";
+import { ConversationState } from "../../contexts/common/ConversationState";
 import { Footer } from "@microsoft/omnichannel-chat-components";
 import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
 import { NewMessageNotificationSoundBase64 } from "../../assets/Audios";
@@ -10,11 +11,11 @@ import { NotificationScenarios } from "../webchatcontainerstateful/webchatcontro
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { downloadTranscript } from "./downloadtranscriptstateful/DownloadTranscriptStateful";
 import useChatContextStore from "../../hooks/useChatContextStore";
-import useChatSDKStore from "../../hooks/useChatSDKStore";
+import useFacadeSDKStore from "../../hooks/useFacadeChatSDKStore";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const FooterStateful = props => {
-  var _footerProps$controlP3, _footerProps$controlP6;
+  var _footerProps$controlP3;
   const [state, dispatch] = useChatContextStore();
   // hideFooterDisplay - the purpose of this is to keep the footer always "active",
   // but hide it visually in certain states (e.g., loading state) and show in some other states (e.g. active state).
@@ -25,8 +26,7 @@ export const FooterStateful = props => {
     audioNotificationProps,
     hideFooterDisplay
   } = props;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const chatSDK = useChatSDKStore();
+  const [facadeChatSDK] = useFacadeSDKStore();
   const controlProps = {
     id: "oc-lcw-footer",
     dir: state.domainStates.globalDir,
@@ -36,7 +36,7 @@ export const FooterStateful = props => {
           Event: TelemetryEvent.DownloadTranscriptButtonClicked,
           Description: "Download Transcript button clicked."
         });
-        await downloadTranscript(chatSDK, downloadTranscriptProps, state);
+        await downloadTranscript(facadeChatSDK, downloadTranscriptProps, state);
       } catch (ex) {
         TelemetryHelper.logActionEvent(LogLevel.ERROR, {
           Event: TelemetryEvent.DownloadTranscriptFailed,
@@ -82,21 +82,23 @@ export const FooterStateful = props => {
     }
   };
   useEffect(() => {
-    if (state.appStates.isAudioMuted === null) {
-      var _footerProps$controlP4, _footerProps$controlP5;
-      dispatch({
-        type: LiveChatWidgetActionType.SET_AUDIO_NOTIFICATION,
-        payload: (footerProps === null || footerProps === void 0 ? void 0 : (_footerProps$controlP4 = footerProps.controlProps) === null || _footerProps$controlP4 === void 0 ? void 0 : (_footerProps$controlP5 = _footerProps$controlP4.audioNotificationButtonProps) === null || _footerProps$controlP5 === void 0 ? void 0 : _footerProps$controlP5.isAudioMuted) ?? false
-      });
+    if (state.appStates.conversationState === ConversationState.Active) {
+      if (state.appStates.isAudioMuted === null) {
+        var _footerProps$controlP4, _footerProps$controlP5, _footerProps$controlP6;
+        dispatch({
+          type: LiveChatWidgetActionType.SET_AUDIO_NOTIFICATION,
+          payload: footerProps !== null && footerProps !== void 0 && (_footerProps$controlP4 = footerProps.controlProps) !== null && _footerProps$controlP4 !== void 0 && _footerProps$controlP4.hideAudioNotificationButton ? true : (footerProps === null || footerProps === void 0 ? void 0 : (_footerProps$controlP5 = footerProps.controlProps) === null || _footerProps$controlP5 === void 0 ? void 0 : (_footerProps$controlP6 = _footerProps$controlP5.audioNotificationButtonProps) === null || _footerProps$controlP6 === void 0 ? void 0 : _footerProps$controlP6.isAudioMuted) ?? false
+        });
+      }
     }
-  }, []);
+  }, [state.appStates.conversationState]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, !hideFooterDisplay && /*#__PURE__*/React.createElement(Footer, {
     componentOverrides: footerProps === null || footerProps === void 0 ? void 0 : footerProps.componentOverrides,
     controlProps: controlProps,
     styleProps: footerProps === null || footerProps === void 0 ? void 0 : footerProps.styleProps
   }), /*#__PURE__*/React.createElement(AudioNotificationStateful, {
     audioSrc: (audioNotificationProps === null || audioNotificationProps === void 0 ? void 0 : audioNotificationProps.audioSrc) ?? NewMessageNotificationSoundBase64,
-    isAudioMuted: state.appStates.isAudioMuted === null ? (footerProps === null || footerProps === void 0 ? void 0 : (_footerProps$controlP6 = footerProps.controlProps) === null || _footerProps$controlP6 === void 0 ? void 0 : _footerProps$controlP6.hideAudioNotificationButton) ?? false : state.appStates.isAudioMuted ?? false
+    isAudioMuted: state.appStates.isAudioMuted ?? false
   }));
 };
 export default FooterStateful;

package/lib/esm/components/footerstateful/downloadtranscriptstateful/DownloadTranscriptStateful.js

@@ -1,13 +1,13 @@
 import { Constants, TranscriptConstants } from "../../../common/Constants";
-import { NotificationScenarios } from "../../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
+import { LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
+import { createFileAndDownload, isNullOrUndefined } from "../../../common/utils";
+import DOMPurify from "dompurify";
+import { LiveChatWidgetActionType } from "../../../contexts/common/LiveChatWidgetActionType";
 import { NotificationHandler } from "../../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler";
+import { NotificationScenarios } from "../../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
 import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
-import { LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
 import createChatTranscript from "../../../plugins/createChatTranscript";
-import DOMPurify from "dompurify";
-import { createFileAndDownload, isNullOrUndefined } from "../../../common/utils";
 import { executeReducer } from "../../../contexts/createReducer";
-import { LiveChatWidgetActionType } from "../../../contexts/common/LiveChatWidgetActionType";
 const processDisplayName = displayName => {
   // if displayname matches "teamsvisitor:<some alphanumeric string>", we replace it with "Customer"
   const displayNameRegex = ".+:.+";
@@ -156,9 +156,7 @@ const beautifyChatTranscripts = (chatTranscripts, renderMarkDown, attachmentMess
   const str = docTypeTag + docStartTag + docMetaTag + bodyStartTag + mainTranscriptSection + beautifiedChats + divEndTag + bodyEndTag + docEndTag;
   return str;
 };
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const downloadTranscript = async (chatSDK, downloadTranscriptProps, state) => {
+export const downloadTranscript = async (facadeChatSDK, downloadTranscriptProps, state) => {
   var _state$domainStates;
   // Need to keep existing live chat context for scenarios when transcript is downloaded after endchat
   let liveChatContext = state === null || state === void 0 ? void 0 : (_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : _state$domainStates.liveChatContext;
@@ -169,7 +167,7 @@ export const downloadTranscript = async (chatSDK, downloadTranscriptProps, state
     });
     liveChatContext = inMemoryState.domainStates.liveChatContext;
   }
-  let data = await (chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.getLiveChatTranscript({
+  let data = await (facadeChatSDK === null || facadeChatSDK === void 0 ? void 0 : facadeChatSDK.getLiveChatTranscript({
     liveChatContext
   }));
   if (typeof data === Constants.String) {
@@ -187,7 +185,7 @@ export const downloadTranscript = async (chatSDK, downloadTranscriptProps, state
       const transcriptOptions = {
         ...webChatTranscript
       };
-      await createChatTranscript(data[Constants.ChatMessagesJson], chatSDK, false, transcriptOptions);
+      await createChatTranscript(data[Constants.ChatMessagesJson], facadeChatSDK, false, transcriptOptions);
     } else {
       // Legacy Transcript
       const chatTranscripts = window.btoa(encodeURIComponent(beautifyChatTranscripts(data[Constants.ChatMessagesJson], renderMarkDown, attachmentMessage)));

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

@@ -79,6 +79,10 @@ export const HeaderStateful = props => {
       text: "We're Offline"
     },
     onMinimizeClick: () => {
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.HeaderMinimizeButtonClicked,
+        Description: "Header Minimize button clicked."
+      });
       dispatch({
         type: LiveChatWidgetActionType.SET_MINIMIZED,
         payload: true

package/lib/esm/components/livechatwidget/LiveChatWidget.js

@@ -2,25 +2,48 @@ import React, { useReducer, useState } from "react";
 import { ChatAdapterStore } from "../../contexts/ChatAdapterStore";
 import { ChatContextStore } from "../../contexts/ChatContextStore";
 import { ChatSDKStore } from "../../contexts/ChatSDKStore";
+import { FacadeChatSDK } from "../../common/facades/FacadeChatSDK";
+import { FacadeChatSDKStore } from "../../contexts/FacadeChatSDKStore";
 import LiveChatWidgetStateful from "./livechatwidgetstateful/LiveChatWidgetStateful";
 import { createReducer } from "../../contexts/createReducer";
 import { getLiveChatWidgetContextInitialState } from "../../contexts/common/LiveChatWidgetContextInitialState";
 import { getMockChatSDKIfApplicable } from "./common/getMockChatSDKIfApplicable";
+import { isNullOrUndefined } from "../../common/utils";
 import overridePropsOnMockIfApplicable from "./common/overridePropsOnMockIfApplicable";
 export const LiveChatWidget = props => {
-  var _props$mock;
+  var _props$mock, _props$chatConfig, _props$chatConfig$Liv;
   const reducer = createReducer();
   const [state, dispatch] = useReducer(reducer, getLiveChatWidgetContextInitialState(props));
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [adapter, setAdapter] = useState(undefined);
+  const [facadeChatSDK, setFacadeChatSDK] = useState(undefined);
   const chatSDK = getMockChatSDKIfApplicable(props.chatSDK, props === null || props === void 0 ? void 0 : (_props$mock = props.mock) === null || _props$mock === void 0 ? void 0 : _props$mock.type);
   overridePropsOnMockIfApplicable(props);
-  return /*#__PURE__*/React.createElement(ChatSDKStore.Provider, {
+  if (!props.chatConfig) {
+    throw new Error("chatConfig is required");
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const isAuthenticatedChat = !!((_props$chatConfig = props.chatConfig) !== null && _props$chatConfig !== void 0 && (_props$chatConfig$Liv = _props$chatConfig.LiveChatConfigAuthSettings) !== null && _props$chatConfig$Liv !== void 0 && _props$chatConfig$Liv.msdyn_javascriptclientfunction);
+  if (!facadeChatSDK) {
+    var _props$mock2;
+    setFacadeChatSDK(new FacadeChatSDK({
+      "chatSDK": chatSDK,
+      "chatConfig": props.chatConfig,
+      "isAuthenticated": isAuthenticatedChat,
+      "getAuthToken": props === null || props === void 0 ? void 0 : props.getAuthToken,
+      //when type is not undefined, it means the SDK is mocked
+      "isSDKMocked": !isNullOrUndefined(props === null || props === void 0 ? void 0 : (_props$mock2 = props.mock) === null || _props$mock2 === void 0 ? void 0 : _props$mock2.type)
+    }));
+  }
+  return /*#__PURE__*/React.createElement(FacadeChatSDKStore.Provider, {
+    value: [facadeChatSDK, setFacadeChatSDK]
+  }, /*#__PURE__*/React.createElement(ChatSDKStore.Provider, {
     value: chatSDK
   }, /*#__PURE__*/React.createElement(ChatAdapterStore.Provider, {
     value: [adapter, setAdapter]
   }, /*#__PURE__*/React.createElement(ChatContextStore.Provider, {
     value: [state, dispatch]
-  }, /*#__PURE__*/React.createElement(LiveChatWidgetStateful, props))));
+  }, /*#__PURE__*/React.createElement(LiveChatWidgetStateful, props)))));
 };
 export default LiveChatWidget;