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

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

@@ -30,15 +30,16 @@ export 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.InternalTelemetryData) === null || _TelemetryManager$Int === void 0 ? void 0 : _TelemetryManager$Int.widgetId) ?? "",
       ChatId: ((_TelemetryManager$Int2 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int2 === void 0 ? void 0 : _TelemetryManager$Int2.chatId) ?? "",
       ChannelId: ((_TelemetryManager$Int3 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int3 === void 0 ? void 0 : _TelemetryManager$Int3.channelId) ?? "lcw2.0",
       ConversationId: ((_TelemetryManager$Int4 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int4 === void 0 ? void 0 : _TelemetryManager$Int4.conversationId) ?? "",
       OrganizationId: ((_TelemetryManager$Int5 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int5 === void 0 ? void 0 : _TelemetryManager$Int5.orgId) ?? "",
-      LCWRuntimeId: ((_TelemetryManager$Int6 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int6 === void 0 ? void 0 : _TelemetryManager$Int6.lcwRuntimeId) ?? "",
-      CurrentRequestId: ((_TelemetryManager$Int7 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int7 === void 0 ? void 0 : _TelemetryManager$Int7.currentRequestId) ?? "",
+      OrganizationUrl: ((_TelemetryManager$Int6 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int6 === void 0 ? void 0 : _TelemetryManager$Int6.orgUrl) ?? "",
+      LCWRuntimeId: ((_TelemetryManager$Int7 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int7 === void 0 ? void 0 : _TelemetryManager$Int7.lcwRuntimeId) ?? "",
+      CurrentRequestId: ((_TelemetryManager$Int8 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int8 === void 0 ? void 0 : _TelemetryManager$Int8.currentRequestId) ?? "",
       LogLevel: level
     };
   }
@@ -73,22 +74,22 @@ export 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.InternalTelemetryData) === null || _TelemetryManager$Int8 === void 0 ? void 0 : _TelemetryManager$Int8.environmentVersion;
+      event.LCWVersion = (_TelemetryManager$Int9 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int9 === void 0 ? void 0 : _TelemetryManager$Int9.environmentVersion;
       event.CloudType = payload.CloudType;
-      event.Domain = (_TelemetryManager$Int9 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int9 === void 0 ? void 0 : _TelemetryManager$Int9.hostName;
+      event.Domain = (_TelemetryManager$Int10 = 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.InternalTelemetryData) === null || _TelemetryManager$Int10 === void 0 ? void 0 : _TelemetryManager$Int10.chatWidgetLocaleLCID) || "";
+      event.Language = ((_TelemetryManager$Int11 = 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;
@@ -97,17 +98,17 @@ export class TelemetryHelper {
       event.ChatType = payload.ChatType;
       event.ElapsedTimeInMilliseconds = payload.ElapsedTimeInMilliseconds;
       event.ExceptionDetails = JSON.stringify(payload.ExceptionDetails);
-      event.OCChatSDKVersion = ((_TelemetryManager$Int11 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int11 === void 0 ? void 0 : _TelemetryManager$Int11.OCChatSDKVersion) ?? "";
-      event.OCChatWidgetVersion = ((_TelemetryManager$Int12 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int12 === void 0 ? void 0 : _TelemetryManager$Int12.chatWidgetVersion) ?? "";
-      event.OCChatComponentsVersion = ((_TelemetryManager$Int13 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int13 === void 0 ? void 0 : _TelemetryManager$Int13.chatComponentVersion) ?? "";
+      event.OCChatSDKVersion = ((_TelemetryManager$Int12 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int12 === void 0 ? void 0 : _TelemetryManager$Int12.OCChatSDKVersion) ?? "";
+      event.OCChatWidgetVersion = ((_TelemetryManager$Int13 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int13 === void 0 ? void 0 : _TelemetryManager$Int13.chatWidgetVersion) ?? "";
+      event.OCChatComponentsVersion = ((_TelemetryManager$Int14 = 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.InternalTelemetryData) === null || _TelemetryManager$Int14 === void 0 ? void 0 : _TelemetryManager$Int14.IC3ClientVersion;
+      event.IC3ClientVersion = (_TelemetryManager$Int15 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int15 === void 0 ? void 0 : _TelemetryManager$Int15.IC3ClientVersion;
       event.SubscriptionId = payload.SubscriptionId;
       event.EndpointUrl = payload.EndpointUrl;
       event.EndpointId = payload.EndpointId;
@@ -160,6 +161,15 @@ export 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;
@@ -213,14 +223,14 @@ _defineProperty(TelemetryHelper, "logActionEvent", (logLevel, payload) => {
   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: newGuid(),
-      RequestId: (_TelemetryManager$Int15 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int15 === void 0 ? void 0 : _TelemetryManager$Int15.currentRequestId
+      RequestId: (_TelemetryManager$Int16 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int16 === void 0 ? void 0 : _TelemetryManager$Int16.currentRequestId
     }
   };
   BroadcastService.postMessage(telemetryEvent);

package/lib/esm/common/utils.js

@@ -1,5 +1,5 @@
 var _this = this;
-import { AriaTelemetryConstants, ChatSDKError, Constants, LocaleConstants } from "./Constants";
+import { AriaTelemetryConstants, ChatSDKError, Constants, HtmlAttributeNames, LocaleConstants } from "./Constants";
 import { BroadcastEvent, LogLevel, TelemetryEvent } from "./telemetry/TelemetryConstants";
 import { BroadcastService } from "@microsoft/omnichannel-chat-components";
 import { DataStoreManager } from "./contextDataStore/DataStoreManager";
@@ -382,4 +382,18 @@ export const checkContactIdError = e => {
     };
     BroadcastService.postMessage(contactIdNotFoundErrorEvent);
   }
+};
+export const createFileAndDownload = (fileName, blobData, mimeType) => {
+  const aElement = document.createElement("a");
+  const blob = new Blob([blobData], {
+    type: mimeType
+  });
+  const objectUrl = URL.createObjectURL(blob);
+  aElement.setAttribute(HtmlAttributeNames.href, objectUrl);
+  aElement.setAttribute(HtmlAttributeNames.download, fileName);
+  aElement.setAttribute(HtmlAttributeNames.ariaHidden, "true");
+  aElement.style.display = "none";
+  document.body.appendChild(aElement);
+  aElement.click();
+  document.body.removeChild(aElement);
 };

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

@@ -0,0 +1,158 @@
+import React, { useCallback, useEffect, useState } from "react";
+import DraggableEventReceiver from "./DraggableEventReceiver";
+import DraggableEventNames from "./DraggableEventNames";
+import useChatContextStore from "../../hooks/useChatContextStore";
+import { ConversationState } from "../../contexts/common/ConversationState";
+import { isNullOrUndefined } from "../../common/utils";
+const DraggableChatWidget = props => {
+  const [state] = useChatContextStore();
+  const [initialPosition, setInitialPosition] = useState({
+    offsetLeft: 0,
+    offsetTop: 0
+  });
+  const [cachedPosition, setCachedPosition] = useState(undefined);
+  const [position, setPosition] = useState({
+    offsetLeft: 0,
+    offsetTop: 0
+  });
+  const [delta, setDelta] = useState({
+    left: 0,
+    top: 0
+  });
+  const repositionElement = (draggableElement, offsetLeft, offsetTop) => {
+    draggableElement.style.left = `${offsetLeft}px`;
+    draggableElement.style.top = `${offsetTop}px`;
+  };
+  const calculateOffsetsWithinViewport = useCallback((id, offset, delta) => {
+    const draggableElement = document.getElementById(id);
+    const positionRelativeToViewport = draggableElement.getBoundingClientRect();
+    if (isNullOrUndefined(draggableElement) || isNullOrUndefined(positionRelativeToViewport) || isNullOrUndefined(offset.offsetLeft) || 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 = useCallback(targetPosition => {
+    calculateOffsetsWithinViewport(props.elementId, targetPosition, delta); // Ensure viewport restriction
+  }, [delta]);
+  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]);
+  useEffect(() => {
+    if (props.disabled === true) {
+      return;
+    }
+    if (state.appStates.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 (!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 = useCallback(event => {
+    if (event.eventName === DraggableEventNames.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.createElement(React.Fragment, null, props.children);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DraggableEventReceiver, {
+    channel: props.channel ?? "lcw",
+    onEvent: onEvent
+  }, props.children));
+};
+export default DraggableChatWidget;

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

@@ -0,0 +1,64 @@
+import React, { useCallback, useEffect, useState } from "react";
+import DraggableEventNames from "./DraggableEventNames";
+/**
+ * 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] = useState(false);
+  const postMessage = useCallback(data => {
+    const targetWindow = props.targetWindow ?? window;
+    targetWindow.postMessage(data, "*");
+  }, [props.targetWindow]);
+  const dragStart = useCallback(event => {
+    postMessage({
+      channel: props.channel,
+      eventName: DraggableEventNames.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.Dragging,
+        offset
+      });
+    };
+    const dragEnd = () => {
+      postMessage({
+        channel: props.channel,
+        eventName: DraggableEventNames.DragEnd
+      });
+      document.removeEventListener("mousemove", dragging);
+      document.removeEventListener("mouseup", dragEnd);
+    };
+    document.addEventListener("mousemove", dragging);
+    document.addEventListener("mouseup", dragEnd);
+  }, [props.channel]);
+  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.createElement(React.Fragment, null, " ", props.children, " ");
+};
+export default DraggableEventEmitter;

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

@@ -0,0 +1,7 @@
+var DraggableEventNames;
+(function (DraggableEventNames) {
+  DraggableEventNames["DragStart"] = "DragStart";
+  DraggableEventNames["Dragging"] = "Dragging";
+  DraggableEventNames["DragEnd"] = "DragEnd";
+})(DraggableEventNames || (DraggableEventNames = {}));
+export default DraggableEventNames;

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

@@ -0,0 +1,25 @@
+import React, { useEffect } from "react";
+/**
+ * Component which would listen to DraggableEvent, update the component position or react accordingly.
+ *
+ * @param props IDraggableEventReceiverProps
+ * @returns
+ */
+const DraggableEventReceiver = props => {
+  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.createElement(React.Fragment, null, " ", props.children, " ");
+};
+export default DraggableEventReceiver;

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

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

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

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

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

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

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

@@ -16,7 +16,7 @@ import useChatSDKStore from "../../hooks/useChatSDKStore";
 export const FooterStateful = props => {
   var _footerProps$controlP3, _footerProps$controlP4;
   const [state, dispatch] = useChatContextStore();
-  // 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 {
@@ -36,7 +36,7 @@ export const FooterStateful = props => {
           Event: TelemetryEvent.DownloadTranscriptButtonClicked,
           Description: "Download Transcript button clicked."
         });
-        await 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 downloadTranscript(chatSDK, downloadTranscriptProps, state);
       } catch (ex) {
         TelemetryHelper.logActionEvent(LogLevel.ERROR, {
           Event: TelemetryEvent.DownloadTranscriptFailed,

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

@@ -1,9 +1,11 @@
-import { Constants, HtmlAttributeNames, TranscriptConstants } from "../../../common/Constants";
+import { Constants, TranscriptConstants } from "../../../common/Constants";
 import { NotificationScenarios } from "../../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
 import { NotificationHandler } from "../../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler";
 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";
 const processDisplayName = displayName => {
   // if displayname matches "teamsvisitor:<some alphanumeric string>", we replace it with "Customer"
   const displayNameRegex = ".+:.+";
@@ -154,7 +156,7 @@ const beautifyChatTranscripts = (chatTranscripts, renderMarkDown, attachmentMess
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const downloadTranscript = async (chatSDK, renderMarkDown, bannerMessageOnError, attachmentMessage, state) => {
+export 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 = {
@@ -167,18 +169,25 @@ export const downloadTranscript = async (chatSDK, renderMarkDown, bannerMessageO
   if (typeof data === Constants.String) {
     data = JSON.parse(data);
   }
+  const {
+    bannerMessageOnError,
+    renderMarkDown,
+    attachmentMessage,
+    webChatTranscript
+  } = downloadTranscriptProps;
   if (data[Constants.ChatMessagesJson] !== null && data[Constants.ChatMessagesJson] !== undefined) {
-    const chatTranscripts = window.btoa(encodeURIComponent(beautifyChatTranscripts(data[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(HtmlAttributeNames.download, TranscriptConstants.ChatTranscriptDownloadFile);
-    link.setAttribute(HtmlAttributeNames.href, URL.createObjectURL(blob));
-    link.setAttribute(HtmlAttributeNames.ariaHidden, "true");
-    link.click();
+    const useWebChatTranscript = 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 createChatTranscript(data[Constants.ChatMessagesJson], chatSDK, false, transcriptOptions);
+    } else {
+      // Legacy Transcript
+      const chatTranscripts = window.btoa(encodeURIComponent(beautifyChatTranscripts(data[Constants.ChatMessagesJson], renderMarkDown, attachmentMessage)));
+      const byteCharacters = decodeURIComponent(window.atob(chatTranscripts));
+      createFileAndDownload(TranscriptConstants.ChatTranscriptDownloadFile, byteCharacters, "text/html;charset=utf-8");
+    }
   } else {
     TelemetryHelper.logActionEvent(LogLevel.ERROR, {
       Event: TelemetryEvent.DownloadTranscriptResponseNullOrUndefined,

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

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

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

@@ -8,6 +8,7 @@ import { defaultOutOfOfficeHeaderStyleProps } from "./common/styleProps/defaultO
 import useChatAdapterStore from "../../hooks/useChatAdapterStore";
 import useChatContextStore from "../../hooks/useChatContextStore";
 import { ConfirmationState } from "../../common/Constants";
+import DraggableEventEmitter from "../draggable/DraggableEventEmitter";
 export const HeaderStateful = props => {
   var _state$domainStates$l, _state$domainStates$l2, _state$domainStates, _headerProps$controlP, _headerProps$controlP2, _headerProps$controlP3, _outOfOfficeHeaderPro, _state$domainStates3;
   const [state, dispatch] = useChatContextStore();
@@ -91,6 +92,32 @@ export 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.OutOfOffice ? outOfOfficeControlProps.id : controlProps.id,
+    targetWindow: props.draggableEventEmitterTargetWindow ?? window
+  };
+  if (props.draggable === true) {
+    var _generalStyleProps;
+    const styleProps = outOfOperatingHours || state.appStates.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.createElement(DraggableEventEmitter, draggableEventEmitterProps, /*#__PURE__*/React.createElement(Header, {
+      componentOverrides: headerProps === null || headerProps === void 0 ? void 0 : headerProps.componentOverrides,
+      controlProps: outOfOperatingHours || state.appStates.conversationState === ConversationState.OutOfOffice ? outOfOfficeControlProps : controlProps,
+      styleProps: draggableStyleProps
+    }));
+  }
   return /*#__PURE__*/React.createElement(Header, {
     componentOverrides: headerProps === null || headerProps === void 0 ? void 0 : headerProps.componentOverrides,
     controlProps: outOfOperatingHours || state.appStates.conversationState === ConversationState.OutOfOffice ? outOfOfficeControlProps : controlProps,

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

@@ -0,0 +1,20 @@
+import { defaultWebChatContainerStatefulProps } from "../../webchatcontainerstateful/common/defaultProps/defaultWebChatContainerStatefulProps";
+const createDownloadTranscriptProps = (downloadTranscriptProps, webChatStyles, webChatContainerProps) => {
+  const disableNewLineMarkdownSupport = (webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.disableNewLineMarkdownSupport) ?? defaultWebChatContainerStatefulProps.disableNewLineMarkdownSupport;
+  const disableMarkdownMessageFormatting = (webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.disableMarkdownMessageFormatting) ?? defaultWebChatContainerStatefulProps.disableMarkdownMessageFormatting;
+  const props = {
+    ...downloadTranscriptProps,
+    webChatTranscript: {
+      ...(downloadTranscriptProps === null || downloadTranscriptProps === void 0 ? void 0 : downloadTranscriptProps.webChatTranscript),
+      disableNewLineMarkdownSupport,
+      disableMarkdownMessageFormatting,
+      transcriptBackgroundColor: webChatStyles === null || webChatStyles === void 0 ? void 0 : webChatStyles.backgroundColor,
+      agentAvatarBackgroundColor: webChatStyles === null || webChatStyles === void 0 ? void 0 : webChatStyles.bubbleBackground,
+      agentAvatarFontColor: webChatStyles === null || webChatStyles === void 0 ? void 0 : webChatStyles.bubbleTextColor,
+      customerAvatarBackgroundColor: webChatStyles === null || webChatStyles === void 0 ? void 0 : webChatStyles.bubbleFromUserBackground,
+      customerAvatarFontColor: webChatStyles === null || webChatStyles === void 0 ? void 0 : webChatStyles.bubbleFromUserTextColor
+    }
+  };
+  return props;
+};
+export default createDownloadTranscriptProps;

package/lib/esm/components/livechatwidget/common/defaultProps/dummyDefaultProps.js

@@ -595,7 +595,15 @@ export const dummyDefaultProps = {
   downloadTranscriptProps: {
     bannerMessageOnError: "Download transcript failed.",
     renderMarkDown: undefined,
-    attachmentMessage: "The following attachment was uploaded during the conversation:"
+    attachmentMessage: "The following attachment was uploaded during the conversation:",
+    webChatTranscript: {
+      disabled: false,
+      fileName: "transcript",
+      pageTitle: "Customer Transcript",
+      attachmentMessage: "The following attachment was uploaded during the conversation: ",
+      networkOnlineMessage: "Connection restored. Please refresh the page",
+      networkOfflineMessage: "Network Error. Please make sure you are connected to the internet."
+    }
   },
   emailTranscriptPane: {
     componentOverrides: {
@@ -1790,7 +1798,10 @@ export const dummyDefaultProps = {
     },
     adaptiveCardStyles: {
       background: "white",
-      color: "black"
+      color: "black",
+      anchorColor: "blue",
+      textWhiteSpace: "normal",
+      buttonWhiteSpace: "normal"
     },
     hyperlinkTextOverride: false
   },

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

@@ -4,6 +4,7 @@ import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
 import { defaultAriaConfig } from "../../../common/telemetry/defaultConfigs/defaultAriaConfig";
 import { defaultInternalTelemetryData } from "../../../common/telemetry/defaultConfigs/defaultTelemetryInternalData";
 import { defaultTelemetryConfiguration } from "../../../common/telemetry/defaultConfigs/defaultTelemetryConfiguration";
+import { newGuid } from "../../../common/utils";
 export const registerTelemetryLoggers = (props, dispatch) => {
   var _props$liveChatContex, _props$liveChatContex2;
   const telemetryConfig = {
@@ -14,7 +15,7 @@ export const registerTelemetryLoggers = (props, dispatch) => {
     var _props$liveChatContex3, _props$liveChatContex4;
     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 = {
       ...defaultInternalTelemetryData,
       telemetryConfig: Object.assign({}, defaultTelemetryConfiguration, telemetryConfig),
@@ -23,13 +24,22 @@ export const registerTelemetryLoggers = (props, dispatch) => {
     if (props.chatConfig) {
       telemetryData = TelemetryHelper.addChatConfigDataToTelemetry(props === null || props === void 0 ? void 0 : props.chatConfig, telemetryData);
     }
-    telemetryData = 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 ?? newGuid();
     TelemetryManager.InternalTelemetryData = telemetryData;
     dispatch({
       type: LiveChatWidgetActionType.SET_TELEMETRY_DATA,

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

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

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

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