@microsoft/omnichannel-chat-widget 1.1.1-main.d37310c → 1.1.1-main.fb181a2

package/README.md

@@ -5,6 +5,8 @@
 
 [@microsoft/omnichannel-chat-widget](https://www.npmjs.com/package/@microsoft/omnichannel-chat-widget) is a React-based UI component library which allows you to build your own live chat widget experience using [@microsoft/omnichannel-chat-sdk](https://www.npmjs.com/package/@microsoft/omnichannel-chat-sdk).
 
+> NEW! Check out our new [Developer Guide](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/customizations/getstarted.md), which has detailed explanations of all component interfaces accompanied with sample code.
+
 ## Table of Contents
 
 1. [Introduction](#introduction)
@@ -58,7 +60,7 @@ import { OmnichannelChatSDK } from "@microsoft/omnichannel-chat-sdk";
 import ReactDOM from "react-dom";
 //Below version numbers will help us to troubleshoot issues with specific package
 import { version as chatSdkVersion } from "@microsoft/omnichannel-chat-sdk/package.json";
-import { version as chatWidgetVersion } from "../package.json";
+import { version as chatWidgetVersion } from "@microsoft/omnichannel-chat-widget/package.json";
 import { version as chatComponentVersion } from "@microsoft/omnichannel-chat-components/package.json";
 
 const render = async () => {
@@ -95,12 +97,14 @@ const render = async () => {
 render();
 ```
 
-A javascript sample widget can be found in this repo [here](https://github.com/microsoft/omnichannel-chat-widget/tree/main/chat-widget/samples/javascript-sample). To build it, do ```yarn build-sample``` or ```yarn build-sample:dev``` from project root. 
+A javascript sample widget can be found in this repo [here](https://github.com/microsoft/omnichannel-chat-widget/tree/main/chat-widget/samples/javascript-sample). To build it, do ```yarn build-sample``` or ```yarn build-sample:dev``` from chat-widget project root.
 
-A typescript sample widget can be found [here](https://github.com/microsoft/omnichannel-chat-widget/tree/main/chat-widget/samples/typescript-sample)
+A typescript sample widget can be found [here](https://github.com/microsoft/omnichannel-chat-widget/tree/main/chat-widget/samples/typescript-sample). To build it, do ```yarn install``` then ```yarn build``` then ```yarn start``` from typescript sample project root. See [Create LiveChatWidget with Webpack5 and TypeScript](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/BuildingUsingWebpack5.md) for additional typescript sample project resources.
 
 ## Components
 
+For a detailed guide on how to customize each component with sample usages, please see our new [Developer Guide](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/customizations/getstarted.md).
+
 ### Stateless UI Components
 
 These are components that are included in the ```@microsoft/omnichannel-chat-components``` package.
@@ -133,10 +137,6 @@ These are components that are included in the ```@microsoft/omnichannel-chat-com
 
 Some of the interfaces listed in the Stateless table have Stateful counterparts defined in the ```@microsoft/omnichannel-chat-widget``` package. For example, [IConfirmationPaneStatefulProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-widget/src/components/confirmationpanestateful/interfaces/IConfirmationPaneStatefulProps.ts) extends [IConfirmationPaneProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/confirmationpane/interfaces/IConfirmationPaneProps.ts) with additional attributes that only makes sense in the stateful context.
 
-### Default Props
-
-For a list of all default props used in the default stateful widget, please see [here](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-widget/src/components/livechatwidget/common/defaultProps/dummyDefaultProps.ts). If you want to change a default prop, you need to explicitly set it and parse the object as the argument to ```<LiveChatWidget/>```
-
 ### Custom Components
 
 There are two ways to custom the components provided in the library - 1) Replacing components using ComponentOverrides, and 2) Adding custom components in header and footer.
@@ -223,8 +223,9 @@ const customizedFooterProp: IFooterProps = {
 
 ## See Also
 
+[Customizations Dev Guide](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/customizations/getstarted.md)\
 [Telemetry](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/Telemetry.md)\
-[Create LCW widget with Webpack5 and TypeScript](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/BuildingUsingWebpack5.md)\
+[Create LiveChatWidget with Webpack5 and TypeScript](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/BuildingUsingWebpack5.md)\
 [Omnichannel Features](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/Features.md)\
 [How to Add Visual Regression Tests](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/VisualRegressionTestingGuide.md)\
 [Security](https://github.com/microsoft/omnichannel-chat-widget/blob/main/SECURITY.md)\

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;

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

@@ -167,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;

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/headerstateful/HeaderStateful.js

@@ -14,6 +14,7 @@ var _defaultOutOfOfficeHeaderStyleProps = require("./common/styleProps/defaultOu
 var _useChatAdapterStore = _interopRequireDefault(require("../../hooks/useChatAdapterStore"));
 var _useChatContextStore = _interopRequireDefault(require("../../hooks/useChatContextStore"));
 var _Constants = require("../../common/Constants");
+var _DraggableEventEmitter = _interopRequireDefault(require("../draggable/DraggableEventEmitter"));
 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; }
@@ -100,6 +101,32 @@ const HeaderStateful = props => {
     var _state$domainStates2;
     localConfirmationPaneState.current = state === null || state === void 0 ? void 0 : (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 ? void 0 : _state$domainStates2.confirmationState;
   }, [state === null || state === void 0 ? void 0 : (_state$domainStates3 = state.domainStates) === null || _state$domainStates3 === void 0 ? void 0 : _state$domainStates3.confirmationState]);
+  const draggableEventEmitterProps = {
+    channel: props.draggableEventChannel ?? "lcw",
+    elementId: outOfOperatingHours || state.appStates.conversationState === _ConversationState.ConversationState.OutOfOffice ? outOfOfficeControlProps.id : controlProps.id,
+    targetWindow: props.draggableEventEmitterTargetWindow ?? window
+  };
+  if (props.draggable === true) {
+    var _generalStyleProps;
+    const styleProps = outOfOperatingHours || state.appStates.conversationState === _ConversationState.ConversationState.OutOfOffice ? outOfOfficeStyleProps : headerProps === null || headerProps === void 0 ? void 0 : headerProps.styleProps;
+    const draggableSelectors = {
+      "&:hover": {
+        cursor: "move"
+      }
+    };
+    const selectors = Object.assign({}, (styleProps === null || styleProps === void 0 ? void 0 : (_generalStyleProps = styleProps.generalStyleProps) === null || _generalStyleProps === void 0 ? void 0 : _generalStyleProps.selectors) || {}, draggableSelectors); // eslint-disable-line @typescript-eslint/no-explicit-any
+    const generalStyleProps = Object.assign({}, styleProps === null || styleProps === void 0 ? void 0 : styleProps.generalStyleProps, {
+      selectors
+    });
+    const draggableStyleProps = Object.assign({}, styleProps, {
+      generalStyleProps
+    });
+    return /*#__PURE__*/_react.default.createElement(_DraggableEventEmitter.default, draggableEventEmitterProps, /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.Header, {
+      componentOverrides: headerProps === null || headerProps === void 0 ? void 0 : headerProps.componentOverrides,
+      controlProps: outOfOperatingHours || state.appStates.conversationState === _ConversationState.ConversationState.OutOfOffice ? outOfOfficeControlProps : controlProps,
+      styleProps: draggableStyleProps
+    }));
+  }
   return /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.Header, {
     componentOverrides: headerProps === null || headerProps === void 0 ? void 0 : headerProps.componentOverrides,
     controlProps: outOfOperatingHours || state.appStates.conversationState === _ConversationState.ConversationState.OutOfOffice ? outOfOfficeControlProps : controlProps,

package/lib/cjs/components/livechatwidget/common/createMarkdown.js

@@ -4,10 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createMarkdown = void 0;
+var _Constants = require("../../../common/Constants");
 var _markdownIt = _interopRequireDefault(require("markdown-it"));
 var _markdownItForInline = _interopRequireDefault(require("markdown-it-for-inline"));
+var _slackMarkdownIt = _interopRequireDefault(require("slack-markdown-it"));
 var _defaultMarkdownLocalizedTexts = require("../../webchatcontainerstateful/common/defaultProps/defaultMarkdownLocalizedTexts");
-var _Constants = require("../../../common/Constants");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const createMarkdown = (disableMarkdownMessageFormatting, disableNewLineMarkdownSupport) => {
@@ -18,8 +19,7 @@ const createMarkdown = (disableMarkdownMessageFormatting, disableNewLineMarkdown
       linkify: true,
       breaks: !disableNewLineMarkdownSupport
     });
-    // ToDo: Commenting below usage of plugin until deferred bug is resolved: https://github.com/mayashavin/markdown-it-slack/issues/1
-    // markdown.use(MarkdownSlack);
+    markdown.use(_slackMarkdownIt.default);
   } else {
     markdown = new _markdownIt.default(_Constants.Constants.Zero, {
       html: true,

package/lib/cjs/components/livechatwidget/common/registerTelemetryLoggers.js

@@ -10,6 +10,7 @@ var _TelemetryHelper = require("../../../common/telemetry/TelemetryHelper");
 var _defaultAriaConfig = require("../../../common/telemetry/defaultConfigs/defaultAriaConfig");
 var _defaultTelemetryInternalData = require("../../../common/telemetry/defaultConfigs/defaultTelemetryInternalData");
 var _defaultTelemetryConfiguration = require("../../../common/telemetry/defaultConfigs/defaultTelemetryConfiguration");
+var _utils = require("../../../common/utils");
 const registerTelemetryLoggers = (props, dispatch) => {
   var _props$liveChatContex, _props$liveChatContex2;
   const telemetryConfig = {
@@ -20,7 +21,7 @@ const registerTelemetryLoggers = (props, dispatch) => {
     var _props$liveChatContex3, _props$liveChatContex4;
     _TelemetryManager.TelemetryManager.InternalTelemetryData = (_props$liveChatContex3 = props.liveChatContextFromCache) === null || _props$liveChatContex3 === void 0 ? void 0 : (_props$liveChatContex4 = _props$liveChatContex3.domainStates) === null || _props$liveChatContex4 === void 0 ? void 0 : _props$liveChatContex4.telemetryInternalData;
   } else {
-    var _props$chatSDK, _props$chatSDK$omnich, _props$chatSDK2, _props$chatSDK2$omnic, _props$chatSDK3, _props$chatSDK3$omnic;
+    var _props$chatSDK, _props$chatSDK$omnich, _props$chatSDK2, _props$chatSDK2$omnic, _props$chatSDK3, _props$chatSDK3$omnic, _props$chatSDK4, _props$chatSDK4$omnic, _props$chatSDK5, _props$chatSDK5$omnic, _props$chatSDK6, _props$chatSDK6$omnic, _props$chatSDK7, _props$chatSDK7$omnic, _props$chatSDK8, _props$chatSDK8$omnic, _props$chatSDK9, _props$chatSDK9$omnic;
     let telemetryData = {
       ..._defaultTelemetryInternalData.defaultInternalTelemetryData,
       telemetryConfig: Object.assign({}, _defaultTelemetryConfiguration.defaultTelemetryConfiguration, telemetryConfig),
@@ -29,13 +30,22 @@ const registerTelemetryLoggers = (props, dispatch) => {
     if (props.chatConfig) {
       telemetryData = _TelemetryHelper.TelemetryHelper.addChatConfigDataToTelemetry(props === null || props === void 0 ? void 0 : props.chatConfig, telemetryData);
     }
-    telemetryData = _TelemetryHelper.TelemetryHelper.addWidgetDataToTelemetry(telemetryConfig, telemetryData);
+    if (!((_props$chatSDK = props.chatSDK) !== null && _props$chatSDK !== void 0 && (_props$chatSDK$omnich = _props$chatSDK.omnichannelConfig) !== null && _props$chatSDK$omnich !== void 0 && _props$chatSDK$omnich.orgId) || ((_props$chatSDK2 = props.chatSDK) === null || _props$chatSDK2 === void 0 ? void 0 : (_props$chatSDK2$omnic = _props$chatSDK2.omnichannelConfig) === null || _props$chatSDK2$omnic === void 0 ? void 0 : _props$chatSDK2$omnic.orgId.trim().length) === 0) {
+      throw new Error("orgId is undefined in ChatSDK");
+    }
+    if (!((_props$chatSDK3 = props.chatSDK) !== null && _props$chatSDK3 !== void 0 && (_props$chatSDK3$omnic = _props$chatSDK3.omnichannelConfig) !== null && _props$chatSDK3$omnic !== void 0 && _props$chatSDK3$omnic.widgetId) || ((_props$chatSDK4 = props.chatSDK) === null || _props$chatSDK4 === void 0 ? void 0 : (_props$chatSDK4$omnic = _props$chatSDK4.omnichannelConfig) === null || _props$chatSDK4$omnic === void 0 ? void 0 : _props$chatSDK4$omnic.widgetId.trim().length) === 0) {
+      throw new Error("widgetId is undefined in ChatSDK");
+    }
+    if (!((_props$chatSDK5 = props.chatSDK) !== null && _props$chatSDK5 !== void 0 && (_props$chatSDK5$omnic = _props$chatSDK5.omnichannelConfig) !== null && _props$chatSDK5$omnic !== void 0 && _props$chatSDK5$omnic.orgUrl) || ((_props$chatSDK6 = props.chatSDK) === null || _props$chatSDK6 === void 0 ? void 0 : (_props$chatSDK6$omnic = _props$chatSDK6.omnichannelConfig) === null || _props$chatSDK6$omnic === void 0 ? void 0 : _props$chatSDK6$omnic.orgUrl.trim().length) === 0) {
+      throw new Error("orgUrl is undefined in ChatSDK");
+    }
     telemetryData.OCChatSDKVersion = telemetryConfig.OCChatSDKVersion ?? "0.0.0-0";
     telemetryData.chatComponentVersion = telemetryConfig.chatComponentVersion ?? "0.0.0-0";
     telemetryData.chatWidgetVersion = telemetryConfig.chatWidgetVersion ?? "0.0.0-0";
-    telemetryData.orgId = (_props$chatSDK = props.chatSDK) === null || _props$chatSDK === void 0 ? void 0 : (_props$chatSDK$omnich = _props$chatSDK.omnichannelConfig) === null || _props$chatSDK$omnich === void 0 ? void 0 : _props$chatSDK$omnich.orgId;
-    telemetryData.widgetId = (_props$chatSDK2 = props.chatSDK) === null || _props$chatSDK2 === void 0 ? void 0 : (_props$chatSDK2$omnic = _props$chatSDK2.omnichannelConfig) === null || _props$chatSDK2$omnic === void 0 ? void 0 : _props$chatSDK2$omnic.widgetId;
-    telemetryData.orgUrl = (_props$chatSDK3 = props.chatSDK) === null || _props$chatSDK3 === void 0 ? void 0 : (_props$chatSDK3$omnic = _props$chatSDK3.omnichannelConfig) === null || _props$chatSDK3$omnic === void 0 ? void 0 : _props$chatSDK3$omnic.orgUrl;
+    telemetryData.orgId = (_props$chatSDK7 = props.chatSDK) === null || _props$chatSDK7 === void 0 ? void 0 : (_props$chatSDK7$omnic = _props$chatSDK7.omnichannelConfig) === null || _props$chatSDK7$omnic === void 0 ? void 0 : _props$chatSDK7$omnic.orgId;
+    telemetryData.widgetId = (_props$chatSDK8 = props.chatSDK) === null || _props$chatSDK8 === void 0 ? void 0 : (_props$chatSDK8$omnic = _props$chatSDK8.omnichannelConfig) === null || _props$chatSDK8$omnic === void 0 ? void 0 : _props$chatSDK8$omnic.widgetId;
+    telemetryData.orgUrl = (_props$chatSDK9 = props.chatSDK) === null || _props$chatSDK9 === void 0 ? void 0 : (_props$chatSDK9$omnic = _props$chatSDK9.omnichannelConfig) === null || _props$chatSDK9$omnic === void 0 ? void 0 : _props$chatSDK9$omnic.orgUrl;
+    telemetryData.lcwRuntimeId = telemetryConfig.LCWRuntimeId ?? (0, _utils.newGuid)();
     _TelemetryManager.TelemetryManager.InternalTelemetryData = telemetryData;
     dispatch({
       type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_TELEMETRY_DATA,

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

@@ -417,7 +417,7 @@ const getInitContextParamForPopoutFromOuterScope = async scope => {
   };
   window.addEventListener("message", getInitContextParamsFromParent, false);
   scope.postMessage({
-    messageName: _Constants.Constants.InitContextParamsResponse
+    messageName: _Constants.Constants.InitContextParamsRequest
   }, "*");
   await waitPromise;
   window.removeEventListener("message", getInitContextParamsFromParent, false);

package/lib/cjs/components/livechatwidget/interfaces/IDraggableChatWidgetProps.js

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