@microsoft/omnichannel-chat-widget 1.7.4-main.9edefc7 → 1.7.4-main.b7b6783

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

@@ -12,7 +12,7 @@ var _defaultTypingIndicatorBubbleStyles = require("./defaultStyles/defaultTyping
 var _defaultTypingIndicatorContainerStyles = require("./defaultStyles/defaultTypingIndicatorContainerStyles");
 var _defaultTypingIndicatorMessageStyles = require("./defaultStyles/defaultTypingIndicatorMessageStyles");
 var _ = require("../../../../..");
-var _useChatSDKStore = _interopRequireDefault(require("../../../../../hooks/useChatSDKStore"));
+var _useFacadeChatSDKStore = _interopRequireDefault(require("../../../../../hooks/useFacadeChatSDKStore"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -29,10 +29,10 @@ const TypingIndicator = _ref => {
     activeTyping,
     visible
   } = _ref;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const chatSDK = (0, _useChatSDKStore.default)();
+  const [facadeChatSDK] = (0, _useFacadeChatSDKStore.default)();
   const [state] = (0, _.useChatContextStore)();
-  const debounceTyping = (0, _react.useCallback)((0, _utils.debounceLeading)(() => chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.sendTypingEvent()), []);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const debounceTyping = (0, _react.useCallback)((0, _utils.debounceLeading)(() => facadeChatSDK === null || facadeChatSDK === void 0 ? void 0 : facadeChatSDK.sendTypingEvent()), []);
   if (!activeTyping || Object.keys(activeTyping).length === 0 || ((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : _state$domainStates$l.LiveChatVersion) === 1 && !visible) {
     return null;
   }

package/lib/cjs/contexts/FacadeChatSDKStore.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FacadeChatSDKStore = void 0;
+var _react = require("react");
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+const FacadeChatSDKStore = /*#__PURE__*/(0, _react.createContext)([undefined, facadeChatSDK => {}]);
+exports.FacadeChatSDKStore = FacadeChatSDKStore;

package/lib/cjs/hooks/useFacadeChatSDKStore.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _FacadeChatSDKStore = require("../contexts/FacadeChatSDKStore");
+var _react = require("react");
+const useFacadeChatSDKStore = () => {
+  const facadeChatSDK = (0, _react.useContext)(_FacadeChatSDKStore.FacadeChatSDKStore);
+  if (!facadeChatSDK) {
+    throw new Error("This hook is not called on component that is descendants of <FacadeSDKStore.Provider>, or FacadeSDKStore is not passed into LiveChatWidget component.");
+  }
+  return facadeChatSDK;
+};
+var _default = useFacadeChatSDKStore;
+exports.default = _default;

package/lib/cjs/index.js

@@ -63,11 +63,18 @@ Object.defineProperty(exports, "useChatSDKStore", {
     return _useChatSDKStore.default;
   }
 });
+Object.defineProperty(exports, "useFacadeChatSDKStore", {
+  enumerable: true,
+  get: function () {
+    return _useFacadeChatSDKStore.default;
+  }
+});
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
-var _useChatContextStore = _interopRequireDefault(require("./hooks/useChatContextStore"));
-var _useChatSDKStore = _interopRequireDefault(require("./hooks/useChatSDKStore"));
 var _utils = require("./common/utils");
 var _ConversationState = require("./contexts/common/ConversationState");
+var _useChatContextStore = _interopRequireDefault(require("./hooks/useChatContextStore"));
+var _useChatSDKStore = _interopRequireDefault(require("./hooks/useChatSDKStore"));
+var _useFacadeChatSDKStore = _interopRequireDefault(require("./hooks/useFacadeChatSDKStore"));
 var _LiveChatWidget = _interopRequireDefault(require("./components/livechatwidget/LiveChatWidget"));
 var _getMockChatSDKIfApplicable = require("./components/livechatwidget/common/getMockChatSDKIfApplicable");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/cjs/plugins/createChatTranscript.js

@@ -653,7 +653,7 @@ class TranscriptHTMLBuilder {
     return htmlData;
   }
 }
-const createChatTranscript = async function (transcript, chatSDK) {
+const createChatTranscript = async function (transcript, facadeChatSDK) {
   let renderAttachments = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   let transcriptOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -680,7 +680,7 @@ const createChatTranscript = async function (transcript, chatSDK) {
           id: references[0],
           type: metadata[0].contentType
         };
-        const blob = await chatSDK.downloadFileAttachment(fileMetadata);
+        const blob = await facadeChatSDK.downloadFileAttachment(fileMetadata);
         const base64 = await convertBlobToBase64(blob);
         message.contentUrl = base64;
       }

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

@@ -182,6 +182,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";
@@ -212,6 +213,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,8 +11,7 @@ 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 { ConversationState } from "../../contexts/common/ConversationState";
+import useFacadeSDKStore from "../../hooks/useFacadeChatSDKStore";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const FooterStateful = props => {
@@ -26,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,
@@ -37,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,

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)));