@microsoft/omnichannel-chat-widget 1.0.6-main.ffb4e2a → 1.1.1-main.1f4a6a7

package/lib/cjs/common/Constants.js

@@ -114,6 +114,7 @@ _defineProperty(Constants, "PopoutCacheSuffix", "popout");
 _defineProperty(Constants, "LWICheckOnVisibilityTimeout", 3 * 60 * 1000);
 // 3 minute
 // Popup mode custom context response event message name
+_defineProperty(Constants, "InitContextParamsRequest", "initContextParamsRequest");
 _defineProperty(Constants, "InitContextParamsResponse", "initContextParamsResponse");
 const Regex = (_class = class Regex {}, _defineProperty(_class, "EmailRegex", "(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])"), _class);
 exports.Regex = Regex;
@@ -155,6 +156,7 @@ _defineProperty(HtmlAttributeNames, "listItem", "LI");
 _defineProperty(HtmlAttributeNames, "unorderedList", "UL");
 _defineProperty(HtmlAttributeNames, "div", "div");
 _defineProperty(HtmlAttributeNames, "aTagName", "a");
+_defineProperty(HtmlAttributeNames, "pTagName", "p");
 _defineProperty(HtmlAttributeNames, "noopenerTag", "noopener");
 _defineProperty(HtmlAttributeNames, "noreferrerTag", "noreferrer");
 _defineProperty(HtmlAttributeNames, "adaptiveCardClassName", "ac-adaptiveCard");

package/lib/cjs/common/storage/default/defaultClientDataStoreProvider.js

@@ -3,30 +3,35 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultClientDataStoreProvider = void 0;
+exports.isCookieAllowed = exports.defaultClientDataStoreProvider = void 0;
 var _TelemetryConstants = require("../../telemetry/TelemetryConstants");
+var _Constants = require("../../Constants");
 var _TelemetryHelper = require("../../telemetry/TelemetryHelper");
 var _defaultInMemoryDataStore = require("./defaultInMemoryDataStore");
-var _Constants = require("../../Constants");
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+const isCookieAllowed = () => {
+  try {
+    localStorage;
+    sessionStorage;
+    return true;
+  } catch (error) {
+    if (!window.TPCWarningLogged) {
+      console.warn("Third party cookies blocked.");
+      _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.WARN, {
+        Event: _TelemetryConstants.TelemetryEvent.ThirdPartyCookiesBlocked,
+        Description: "Third party cookies are blocked. Cannot access local storage or session storage."
+      });
+      window.TPCWarningLogged = true;
+    }
+    return false;
+  }
+};
+exports.isCookieAllowed = isCookieAllowed;
 const defaultClientDataStoreProvider = function () {
   let cacheTtlinMins = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   let storageType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _Constants.StorageType.localStorage;
   let ttlInMs = 0;
-  const isCookieAllowed = () => {
-    try {
-      localStorage;
-      sessionStorage;
-      return true;
-    } catch (error) {
-      if (!window.TPCWarningShown) {
-        console.warn("Third party cookies blocked.");
-        window.TPCWarningShown = true;
-      }
-      return false;
-    }
-  };
   if (ttlInMs == 0) {
     ttlInMs = cacheTtlinMins * 60 * 1000;
   }

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

@@ -164,6 +164,7 @@ exports.TelemetryEvent = TelemetryEvent;
   TelemetryEvent["SetBotAuthProviderHideCard"] = "SetBotAuthProviderHideCard";
   TelemetryEvent["SetBotAuthProviderDisplayCard"] = "SetBotAuthProviderDisplayCard";
   TelemetryEvent["SetBotAuthProviderNotFound"] = "SetBotAuthProviderNotFound";
+  TelemetryEvent["ThirdPartyCookiesBlocked"] = "ThirdPartyCookiesBlocked";
   TelemetryEvent["ProcessingHTMLTextMiddlewareFailed"] = "ProcessingHTMLTextMiddlewareFailed";
   TelemetryEvent["ProcessingSanitizationMiddlewareFailed"] = "ProcessingSanitizationMiddlewareFailed";
   TelemetryEvent["FormatTagsMiddlewareJSONStringifyFailed"] = "FormatTagsMiddlewareJSONStringifyFailed";
@@ -231,6 +232,7 @@ class TelemetryConstants {
       case TelemetryEvent.OutOfOfficePaneLoaded:
       case TelemetryEvent.ConfirmationPaneLoaded:
       case TelemetryEvent.ProactiveChatPaneLoaded:
+      case TelemetryEvent.ThirdPartyCookiesBlocked:
         return ScenarioType.LOAD;
       case TelemetryEvent.PrechatSubmitted:
       case TelemetryEvent.LCWChatButtonClicked:

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

@@ -36,15 +36,16 @@ class TelemetryHelper {
   static populateBasicProperties(level,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   telemetryData) {
-    var _TelemetryManager$Int, _TelemetryManager$Int2, _TelemetryManager$Int3, _TelemetryManager$Int4, _TelemetryManager$Int5, _TelemetryManager$Int6, _TelemetryManager$Int7;
+    var _TelemetryManager$Int, _TelemetryManager$Int2, _TelemetryManager$Int3, _TelemetryManager$Int4, _TelemetryManager$Int5, _TelemetryManager$Int6, _TelemetryManager$Int7, _TelemetryManager$Int8;
     return {
       WidgetId: ((_TelemetryManager$Int = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int === void 0 ? void 0 : _TelemetryManager$Int.widgetId) ?? "",
       ChatId: ((_TelemetryManager$Int2 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int2 === void 0 ? void 0 : _TelemetryManager$Int2.chatId) ?? "",
       ChannelId: ((_TelemetryManager$Int3 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int3 === void 0 ? void 0 : _TelemetryManager$Int3.channelId) ?? "lcw2.0",
       ConversationId: ((_TelemetryManager$Int4 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int4 === void 0 ? void 0 : _TelemetryManager$Int4.conversationId) ?? "",
       OrganizationId: ((_TelemetryManager$Int5 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int5 === void 0 ? void 0 : _TelemetryManager$Int5.orgId) ?? "",
-      LCWRuntimeId: ((_TelemetryManager$Int6 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int6 === void 0 ? void 0 : _TelemetryManager$Int6.lcwRuntimeId) ?? "",
-      CurrentRequestId: ((_TelemetryManager$Int7 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int7 === void 0 ? void 0 : _TelemetryManager$Int7.currentRequestId) ?? "",
+      OrganizationUrl: ((_TelemetryManager$Int6 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int6 === void 0 ? void 0 : _TelemetryManager$Int6.orgUrl) ?? "",
+      LCWRuntimeId: ((_TelemetryManager$Int7 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int7 === void 0 ? void 0 : _TelemetryManager$Int7.lcwRuntimeId) ?? "",
+      CurrentRequestId: ((_TelemetryManager$Int8 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int8 === void 0 ? void 0 : _TelemetryManager$Int8.currentRequestId) ?? "",
       LogLevel: level
     };
   }
@@ -79,22 +80,22 @@ class TelemetryHelper {
   static conformToConfigValidationContract(level, input) {
     const payload = input.payload;
     return TelemetryHelper.populate(level, payload, event => {
-      var _TelemetryManager$Int8, _TelemetryManager$Int9, _TelemetryManager$Int10;
+      var _TelemetryManager$Int9, _TelemetryManager$Int10, _TelemetryManager$Int11;
       event.Event = payload.Event;
       event.RequestId = payload.RequestId;
-      event.LCWVersion = (_TelemetryManager$Int8 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int8 === void 0 ? void 0 : _TelemetryManager$Int8.environmentVersion;
+      event.LCWVersion = (_TelemetryManager$Int9 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int9 === void 0 ? void 0 : _TelemetryManager$Int9.environmentVersion;
       event.CloudType = payload.CloudType;
-      event.Domain = (_TelemetryManager$Int9 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int9 === void 0 ? void 0 : _TelemetryManager$Int9.hostName;
+      event.Domain = (_TelemetryManager$Int10 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int10 === void 0 ? void 0 : _TelemetryManager$Int10.hostName;
       event.ElapsedTimeInMilliseconds = payload.ElapsedTimeInMilliseconds;
       event.ExceptionDetails = JSON.stringify(payload.ExceptionDetails);
-      event.Language = ((_TelemetryManager$Int10 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int10 === void 0 ? void 0 : _TelemetryManager$Int10.chatWidgetLocaleLCID) || "";
+      event.Language = ((_TelemetryManager$Int11 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int11 === void 0 ? void 0 : _TelemetryManager$Int11.chatWidgetLocaleLCID) || "";
       event.Description = payload.Data;
     });
   }
   static conformToLoadContract(level, input) {
     const payload = input.payload;
     return TelemetryHelper.populate(level, payload, event => {
-      var _TelemetryManager$Int11, _TelemetryManager$Int12, _TelemetryManager$Int13;
+      var _TelemetryManager$Int12, _TelemetryManager$Int13, _TelemetryManager$Int14;
       event.Event = payload.Event;
       event.Description = payload.Description;
       event.ResourcePath = payload.ResourcePath;
@@ -103,17 +104,17 @@ class TelemetryHelper {
       event.ChatType = payload.ChatType;
       event.ElapsedTimeInMilliseconds = payload.ElapsedTimeInMilliseconds;
       event.ExceptionDetails = JSON.stringify(payload.ExceptionDetails);
-      event.OCChatSDKVersion = ((_TelemetryManager$Int11 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int11 === void 0 ? void 0 : _TelemetryManager$Int11.OCChatSDKVersion) ?? "";
-      event.OCChatWidgetVersion = ((_TelemetryManager$Int12 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int12 === void 0 ? void 0 : _TelemetryManager$Int12.chatWidgetVersion) ?? "";
-      event.OCChatComponentsVersion = ((_TelemetryManager$Int13 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int13 === void 0 ? void 0 : _TelemetryManager$Int13.chatComponentVersion) ?? "";
+      event.OCChatSDKVersion = ((_TelemetryManager$Int12 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int12 === void 0 ? void 0 : _TelemetryManager$Int12.OCChatSDKVersion) ?? "";
+      event.OCChatWidgetVersion = ((_TelemetryManager$Int13 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int13 === void 0 ? void 0 : _TelemetryManager$Int13.chatWidgetVersion) ?? "";
+      event.OCChatComponentsVersion = ((_TelemetryManager$Int14 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int14 === void 0 ? void 0 : _TelemetryManager$Int14.chatComponentVersion) ?? "";
     });
   }
   static conformToIC3ClientContract(level, input) {
     const payload = input.payload;
     return TelemetryHelper.populate(level, payload, event => {
-      var _TelemetryManager$Int14;
+      var _TelemetryManager$Int15;
       event.Event = payload.Event;
-      event.IC3ClientVersion = (_TelemetryManager$Int14 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int14 === void 0 ? void 0 : _TelemetryManager$Int14.IC3ClientVersion;
+      event.IC3ClientVersion = (_TelemetryManager$Int15 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int15 === void 0 ? void 0 : _TelemetryManager$Int15.IC3ClientVersion;
       event.SubscriptionId = payload.SubscriptionId;
       event.EndpointUrl = payload.EndpointUrl;
       event.EndpointId = payload.EndpointId;
@@ -166,6 +167,15 @@ class TelemetryHelper {
   }
   static addWidgetDataToTelemetry(telemetryConfig, telemetryInternalData) {
     const telemetryDataLocal = telemetryInternalData;
+    if (!(telemetryConfig !== null && telemetryConfig !== void 0 && telemetryConfig.appId) || (telemetryConfig === null || telemetryConfig === void 0 ? void 0 : telemetryConfig.appId.trim()) === "") {
+      throw new Error("TelemetryConfig.appId is not set");
+    }
+    if (!(telemetryConfig !== null && telemetryConfig !== void 0 && telemetryConfig.orgId) || (telemetryConfig === null || telemetryConfig === void 0 ? void 0 : telemetryConfig.orgId.trim()) === "") {
+      throw new Error("TelemetryConfig.orgId is not set");
+    }
+    if (!(telemetryConfig !== null && telemetryConfig !== void 0 && telemetryConfig.orgUrl) || (telemetryConfig === null || telemetryConfig === void 0 ? void 0 : telemetryConfig.orgUrl.trim()) === "") {
+      throw new Error("TelemetryConfig.orgUrl is not set");
+    }
     telemetryDataLocal.widgetId = telemetryConfig === null || telemetryConfig === void 0 ? void 0 : telemetryConfig.appId;
     telemetryDataLocal.orgId = telemetryConfig === null || telemetryConfig === void 0 ? void 0 : telemetryConfig.orgId;
     telemetryDataLocal.orgUrl = telemetryConfig === null || telemetryConfig === void 0 ? void 0 : telemetryConfig.orgUrl;
@@ -220,14 +230,14 @@ _defineProperty(TelemetryHelper, "logActionEvent", (logLevel, payload) => {
   _omnichannelChatComponents.BroadcastService.postMessage(telemetryEvent);
 });
 _defineProperty(TelemetryHelper, "logSDKEvent", (logLevel, payload) => {
-  var _TelemetryManager$Int15;
+  var _TelemetryManager$Int16;
   const telemetryEvent = {
     eventName: (payload === null || payload === void 0 ? void 0 : payload.Event) ?? "",
     logLevel: logLevel,
     payload: {
       ...payload,
       TransactionId: (0, _utils.newGuid)(),
-      RequestId: (_TelemetryManager$Int15 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int15 === void 0 ? void 0 : _TelemetryManager$Int15.currentRequestId
+      RequestId: (_TelemetryManager$Int16 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int16 === void 0 ? void 0 : _TelemetryManager$Int16.currentRequestId
     }
   };
   _omnichannelChatComponents.BroadcastService.postMessage(telemetryEvent);

package/lib/cjs/common/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setTabIndices = exports.setFocusOnSendBox = exports.setFocusOnElement = exports.preventFocusToMoveOutOfElement = exports.parseAdaptiveCardPayload = exports.newGuid = exports.isUndefinedOrEmpty = exports.isNullOrUndefined = exports.isNullOrEmptyString = exports.getWidgetEndChatEventName = exports.getWidgetCacheIdfromProps = exports.getWidgetCacheId = exports.getTimestampHourMinute = exports.getStateFromCache = exports.getLocaleDirection = exports.getIconText = exports.getDomain = exports.getConversationDetailsCall = exports.getBroadcastChannelName = exports.findParentFocusableElementsWithoutChildContainer = exports.findAllFocusableElement = exports.extractPreChatSurveyResponseValues = exports.escapeHtml = exports.debounceLeading = exports.createTimer = exports.checkContactIdError = exports.changeLanguageCodeFormatForWebChat = exports.addDelayInMs = void 0;
+exports.setTabIndices = exports.setFocusOnSendBox = exports.setFocusOnElement = exports.preventFocusToMoveOutOfElement = exports.parseAdaptiveCardPayload = exports.newGuid = exports.isUndefinedOrEmpty = exports.isNullOrUndefined = exports.isNullOrEmptyString = exports.getWidgetEndChatEventName = exports.getWidgetCacheIdfromProps = exports.getWidgetCacheId = exports.getTimestampHourMinute = exports.getStateFromCache = exports.getLocaleDirection = exports.getIconText = exports.getDomain = exports.getConversationDetailsCall = exports.getBroadcastChannelName = exports.findParentFocusableElementsWithoutChildContainer = exports.findAllFocusableElement = exports.extractPreChatSurveyResponseValues = exports.escapeHtml = exports.debounceLeading = exports.createTimer = exports.createFileAndDownload = exports.checkContactIdError = exports.changeLanguageCodeFormatForWebChat = exports.addDelayInMs = void 0;
 var _Constants = require("./Constants");
 var _TelemetryConstants = require("./telemetry/TelemetryConstants");
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
@@ -416,4 +416,19 @@ const checkContactIdError = e => {
     _omnichannelChatComponents.BroadcastService.postMessage(contactIdNotFoundErrorEvent);
   }
 };
-exports.checkContactIdError = checkContactIdError;
+exports.checkContactIdError = checkContactIdError;
+const createFileAndDownload = (fileName, blobData, mimeType) => {
+  const aElement = document.createElement("a");
+  const blob = new Blob([blobData], {
+    type: mimeType
+  });
+  const objectUrl = URL.createObjectURL(blob);
+  aElement.setAttribute(_Constants.HtmlAttributeNames.href, objectUrl);
+  aElement.setAttribute(_Constants.HtmlAttributeNames.download, fileName);
+  aElement.setAttribute(_Constants.HtmlAttributeNames.ariaHidden, "true");
+  aElement.style.display = "none";
+  document.body.appendChild(aElement);
+  aElement.click();
+  document.body.removeChild(aElement);
+};
+exports.createFileAndDownload = createFileAndDownload;

package/lib/cjs/components/draggable/DraggableChatWidget.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _DraggableEventReceiver = _interopRequireDefault(require("./DraggableEventReceiver"));
+var _DraggableEventNames = _interopRequireDefault(require("./DraggableEventNames"));
+var _useChatContextStore = _interopRequireDefault(require("../../hooks/useChatContextStore"));
+var _ConversationState = require("../../contexts/common/ConversationState");
+var _utils = require("../../common/utils");
+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; }
+const DraggableChatWidget = props => {
+  const [state] = (0, _useChatContextStore.default)();
+  const [initialPosition, setInitialPosition] = (0, _react.useState)({
+    offsetLeft: 0,
+    offsetTop: 0
+  });
+  const [cachedPosition, setCachedPosition] = (0, _react.useState)(undefined);
+  const [position, setPosition] = (0, _react.useState)({
+    offsetLeft: 0,
+    offsetTop: 0
+  });
+  const [delta, setDelta] = (0, _react.useState)({
+    left: 0,
+    top: 0
+  });
+  const repositionElement = (draggableElement, offsetLeft, offsetTop) => {
+    draggableElement.style.left = `${offsetLeft}px`;
+    draggableElement.style.top = `${offsetTop}px`;
+  };
+  const calculateOffsetsWithinViewport = (0, _react.useCallback)((id, offset, delta) => {
+    const draggableElement = document.getElementById(id);
+    const positionRelativeToViewport = draggableElement.getBoundingClientRect();
+    if ((0, _utils.isNullOrUndefined)(draggableElement) || (0, _utils.isNullOrUndefined)(positionRelativeToViewport) || (0, _utils.isNullOrUndefined)(offset.offsetLeft) || (0, _utils.isNullOrUndefined)(offset.offsetTop)) {
+      return;
+    }
+    let offsetLeft = offset.offsetLeft;
+    let offsetTop = offset.offsetTop;
+
+    // Widget size larger than viewport would not have any restriction
+    if (positionRelativeToViewport.width > window.innerWidth) {
+      return;
+    }
+    if (positionRelativeToViewport.height > window.innerHeight) {
+      return;
+    }
+
+    // Ensures widget is within viewport
+    if (positionRelativeToViewport.x < 0) {
+      offsetLeft = 0 - delta.left;
+    }
+    if (positionRelativeToViewport.y < 0) {
+      offsetTop = 0 - delta.top;
+    }
+    if (positionRelativeToViewport.x + positionRelativeToViewport.width > window.innerWidth) {
+      offsetLeft = window.innerWidth - positionRelativeToViewport.width - delta.left;
+    }
+    if (positionRelativeToViewport.y + positionRelativeToViewport.height > window.innerHeight) {
+      offsetTop = window.innerHeight - positionRelativeToViewport.height - delta.top;
+    }
+    repositionElement(draggableElement, offsetLeft, offsetTop);
+    setPosition({
+      offsetLeft,
+      offsetTop
+    });
+  }, []);
+  const resetPosition = (0, _react.useCallback)(targetPosition => {
+    calculateOffsetsWithinViewport(props.elementId, targetPosition, delta); // Ensure viewport restriction
+  }, [delta]);
+  (0, _react.useEffect)(() => {
+    if (props.disabled === true) {
+      return;
+    }
+    const cacheInitialPosition = () => {
+      const draggableElement = document.getElementById(props.elementId);
+      const offsetLeft = draggableElement.offsetLeft;
+      const offsetTop = draggableElement.offsetTop;
+      setInitialPosition({
+        offsetLeft,
+        offsetTop
+      });
+    };
+    const calculateOffsets = () => {
+      const draggableElement = document.getElementById(props.elementId);
+      const offsetLeft = draggableElement.offsetLeft;
+      const offsetTop = draggableElement.offsetTop;
+
+      // Calculates the delta between the position of the widget and the position of the widget relative to the viewport which will be used for repositioning
+      const positionRelativeToViewport = draggableElement.getBoundingClientRect();
+      const left = positionRelativeToViewport.left - offsetLeft;
+      const top = positionRelativeToViewport.top - offsetTop;
+      setDelta({
+        left,
+        top
+      });
+      calculateOffsetsWithinViewport(props.elementId, {
+        offsetLeft,
+        offsetTop
+      }, {
+        left,
+        top
+      });
+    };
+    calculateOffsets();
+    cacheInitialPosition();
+    window.addEventListener("resize", calculateOffsets);
+    return () => {
+      window.removeEventListener("resize", calculateOffsets);
+    };
+  }, [props.disabled]);
+  (0, _react.useEffect)(() => {
+    if (props.disabled === true) {
+      return;
+    }
+    if (state.appStates.conversationState == _ConversationState.ConversationState.Closed) {
+      resetPosition(initialPosition);
+    } else if (state.appStates.isMinimized) {
+      const draggableElement = document.getElementById(props.elementId);
+      const offsetLeft = draggableElement.offsetLeft;
+      const offsetTop = draggableElement.offsetTop;
+      if (!cachedPosition) {
+        setCachedPosition({
+          offsetLeft,
+          offsetTop
+        });
+      }
+      resetPosition(initialPosition);
+    } else if (!(0, _utils.isNullOrUndefined)(state.appStates.isMinimized) && !state.appStates.isMinimized) {
+      if (cachedPosition) {
+        resetPosition(cachedPosition);
+        setCachedPosition(undefined);
+      }
+    }
+  }, [props.disabled, state.appStates.isMinimized, state.appStates.conversationState, initialPosition, cachedPosition]);
+  const onEvent = (0, _react.useCallback)(event => {
+    if (event.eventName === _DraggableEventNames.default.Dragging) {
+      if (event.offset) {
+        const offsetLeft = position.offsetLeft + event.offset.x;
+        const offsetTop = position.offsetTop + event.offset.y;
+
+        // Update position via DOM manipulation to prevent <Stack/> continuously rendering on style change causing high CPU spike
+        const draggableElement = document.getElementById(props.elementId);
+        repositionElement(draggableElement, offsetLeft, offsetTop);
+        setPosition({
+          offsetLeft,
+          offsetTop
+        });
+        calculateOffsetsWithinViewport(props.elementId, {
+          offsetLeft,
+          offsetTop
+        }, delta);
+      }
+    }
+  }, [position, delta]);
+  if (props.disabled === true) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.children);
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DraggableEventReceiver.default, {
+    channel: props.channel ?? "lcw",
+    onEvent: onEvent
+  }, props.children));
+};
+var _default = DraggableChatWidget;
+exports.default = _default;

package/lib/cjs/components/draggable/DraggableEventEmitter.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _DraggableEventNames = _interopRequireDefault(require("./DraggableEventNames"));
+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; }
+/**
+ * Trigger component which would send IDraggableEvent to the receiver to update the draggable component position
+ *
+ * @param props IDraggableEventEmitterProps
+ * @returns
+ */
+const DraggableEventEmitter = props => {
+  const [initialized, setInitialized] = (0, _react.useState)(false);
+  const postMessage = (0, _react.useCallback)(data => {
+    const targetWindow = props.targetWindow ?? window;
+    targetWindow.postMessage(data, "*");
+  }, [props.targetWindow]);
+  const dragStart = (0, _react.useCallback)(event => {
+    postMessage({
+      channel: props.channel,
+      eventName: _DraggableEventNames.default.DragStart
+    });
+    let cursor = {
+      x: event.screenX,
+      y: event.screenY
+    }; // Cursor init position
+    const dragging = event => {
+      event.preventDefault();
+      const newX = event.screenX;
+      const newY = event.screenY;
+      const offset = {
+        x: newX - cursor.x,
+        y: newY - cursor.y
+      }; // Calculate cursor position diff
+      cursor = {
+        ...cursor,
+        x: newX,
+        y: newY
+      }; // Update cursor new position
+
+      postMessage({
+        channel: props.channel,
+        eventName: _DraggableEventNames.default.Dragging,
+        offset
+      });
+    };
+    const dragEnd = () => {
+      postMessage({
+        channel: props.channel,
+        eventName: _DraggableEventNames.default.DragEnd
+      });
+      document.removeEventListener("mousemove", dragging);
+      document.removeEventListener("mouseup", dragEnd);
+    };
+    document.addEventListener("mousemove", dragging);
+    document.addEventListener("mouseup", dragEnd);
+  }, [props.channel]);
+  (0, _react.useEffect)(() => {
+    if (!initialized && props.elementId) {
+      const element = document.getElementById(props.elementId);
+      element === null || element === void 0 ? void 0 : element.addEventListener("mousedown", dragStart);
+      setInitialized(true);
+    }
+  }, [dragStart, props.elementId, initialized]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", props.children, " ");
+};
+var _default = DraggableEventEmitter;
+exports.default = _default;

package/lib/cjs/components/draggable/DraggableEventNames.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var DraggableEventNames;
+(function (DraggableEventNames) {
+  DraggableEventNames["DragStart"] = "DragStart";
+  DraggableEventNames["Dragging"] = "Dragging";
+  DraggableEventNames["DragEnd"] = "DragEnd";
+})(DraggableEventNames || (DraggableEventNames = {}));
+var _default = DraggableEventNames;
+exports.default = _default;

package/lib/cjs/components/draggable/DraggableEventReceiver.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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; }
+/**
+ * Component which would listen to DraggableEvent, update the component position or react accordingly.
+ *
+ * @param props IDraggableEventReceiverProps
+ * @returns
+ */
+const DraggableEventReceiver = props => {
+  (0, _react.useEffect)(() => {
+    const listener = event => {
+      const {
+        data
+      } = event;
+      if (data.channel && props.channel && data.channel === props.channel) {
+        props.onEvent(data);
+      }
+    };
+    window.addEventListener("message", listener);
+    return () => {
+      window.removeEventListener("message", listener);
+    };
+  }, [props]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", props.children, " ");
+};
+var _default = DraggableEventReceiver;
+exports.default = _default;

package/lib/cjs/components/draggable/IDraggableElementPosition.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/components/draggable/IDraggableElementPositionDelta.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/components/draggable/IDraggableEvent.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -22,7 +22,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const FooterStateful = props => {
   var _footerProps$controlP3, _footerProps$controlP4;
   const [state, dispatch] = (0, _useChatContextStore.default)();
-  // hideFooterDisplay - the purpose of this is to keep the footer always "active", 
+  // 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).
   // The reason for this approach is to make sure that state variables for audio notification work correctly after minimizing
   const {
@@ -42,7 +42,7 @@ const FooterStateful = props => {
           Event: _TelemetryConstants.TelemetryEvent.DownloadTranscriptButtonClicked,
           Description: "Download Transcript button clicked."
         });
-        await (0, _DownloadTranscriptStateful.downloadTranscript)(chatSDK, downloadTranscriptProps === null || downloadTranscriptProps === void 0 ? void 0 : downloadTranscriptProps.renderMarkDown, downloadTranscriptProps === null || downloadTranscriptProps === void 0 ? void 0 : downloadTranscriptProps.bannerMessageOnError, downloadTranscriptProps === null || downloadTranscriptProps === void 0 ? void 0 : downloadTranscriptProps.attachmentMessage, state);
+        await (0, _DownloadTranscriptStateful.downloadTranscript)(chatSDK, downloadTranscriptProps, state);
       } catch (ex) {
         _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.ERROR, {
           Event: _TelemetryConstants.TelemetryEvent.DownloadTranscriptFailed,

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

@@ -9,7 +9,9 @@ var _NotificationScenarios = require("../../webchatcontainerstateful/webchatcont
 var _NotificationHandler = require("../../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler");
 var _TelemetryHelper = require("../../../common/telemetry/TelemetryHelper");
 var _TelemetryConstants = require("../../../common/telemetry/TelemetryConstants");
+var _createChatTranscript = _interopRequireDefault(require("../../../plugins/createChatTranscript"));
 var _dompurify = _interopRequireDefault(require("dompurify"));
+var _utils = require("../../../common/utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const processDisplayName = displayName => {
   // if displayname matches "teamsvisitor:<some alphanumeric string>", we replace it with "Customer"
@@ -161,7 +163,7 @@ const beautifyChatTranscripts = (chatTranscripts, renderMarkDown, attachmentMess
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const downloadTranscript = async (chatSDK, renderMarkDown, bannerMessageOnError, attachmentMessage, state) => {
+const downloadTranscript = async (chatSDK, downloadTranscriptProps, state) => {
   var _state$domainStates, _state$domainStates2, _state$domainStates2$;
   // Need to keep existing request id for scenarios when trnascript is downloaded after endchat
   const liveChatContext = {
@@ -174,18 +176,25 @@ const downloadTranscript = async (chatSDK, renderMarkDown, bannerMessageOnError,
   if (typeof data === _Constants.Constants.String) {
     data = JSON.parse(data);
   }
+  const {
+    bannerMessageOnError,
+    renderMarkDown,
+    attachmentMessage,
+    webChatTranscript
+  } = downloadTranscriptProps;
   if (data[_Constants.Constants.ChatMessagesJson] !== null && data[_Constants.Constants.ChatMessagesJson] !== undefined) {
-    const chatTranscripts = window.btoa(encodeURIComponent(beautifyChatTranscripts(data[_Constants.Constants.ChatMessagesJson], renderMarkDown, attachmentMessage)));
-    const byteCharacters = decodeURIComponent(window.atob(chatTranscripts));
-    const blob = new Blob([byteCharacters], {
-      "type": "text/html;charset=utf-8"
-    });
-    const link = document.createElement("a");
-    document.body.appendChild(link);
-    link.setAttribute(_Constants.HtmlAttributeNames.download, _Constants.TranscriptConstants.ChatTranscriptDownloadFile);
-    link.setAttribute(_Constants.HtmlAttributeNames.href, URL.createObjectURL(blob));
-    link.setAttribute(_Constants.HtmlAttributeNames.ariaHidden, "true");
-    link.click();
+    const useWebChatTranscript = (0, _utils.isNullOrUndefined)(webChatTranscript === null || webChatTranscript === void 0 ? void 0 : webChatTranscript.disabled) || (webChatTranscript === null || webChatTranscript === void 0 ? void 0 : webChatTranscript.disabled) === false;
+    if (useWebChatTranscript) {
+      const transcriptOptions = {
+        ...webChatTranscript
+      };
+      await (0, _createChatTranscript.default)(data[_Constants.Constants.ChatMessagesJson], chatSDK, false, transcriptOptions);
+    } else {
+      // Legacy Transcript
+      const chatTranscripts = window.btoa(encodeURIComponent(beautifyChatTranscripts(data[_Constants.Constants.ChatMessagesJson], renderMarkDown, attachmentMessage)));
+      const byteCharacters = decodeURIComponent(window.atob(chatTranscripts));
+      (0, _utils.createFileAndDownload)(_Constants.TranscriptConstants.ChatTranscriptDownloadFile, byteCharacters, "text/html;charset=utf-8");
+    }
   } else {
     _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.ERROR, {
       Event: _TelemetryConstants.TelemetryEvent.DownloadTranscriptResponseNullOrUndefined,

package/lib/cjs/components/footerstateful/downloadtranscriptstateful/interfaces/IWebChatTranscriptConfig.js

@@ -0,0 +1 @@
+"use strict";