@microsoft/omnichannel-chat-widget 1.7.8-main.f60b0b7 → 1.8.0

package/lib/esm/firstresponselatency/FirstMessageTrackerFromBot.js

@@ -0,0 +1,112 @@
+import { BroadcastEvent, LogLevel, TelemetryEvent } from "../common/telemetry/TelemetryConstants";
+import { BroadcastService } from "@microsoft/omnichannel-chat-components";
+import { TelemetryHelper } from "../common/telemetry/TelemetryHelper";
+import { createTrackingMessage } from "./util";
+
+// This tracker is event based, this is since we are tracking events coming from different sources
+//  with different timeline, therefore this is a functional approach to track the events, instead of a class based approach
+export const createTrackingForFirstMessage = () => {
+  // Reset the tracking variables
+  let startTracking = false;
+  let stopTracking = false;
+  let startTime = 0;
+  let stopTime = 0;
+  let stopTrackingMessage;
+  let flag = false;
+  const isMessageFromValidSender = payload => {
+    var _payload$tags;
+    // agent scenario
+    if (payload !== null && payload !== void 0 && (_payload$tags = payload.tags) !== null && _payload$tags !== void 0 && _payload$tags.includes("public")) {
+      return false;
+    }
+    return true;
+  };
+  const widgetLoadListener = BroadcastService.getMessageByEventName(TelemetryEvent.WidgetLoadComplete).subscribe(() => {
+    if (startTracking) return;
+    startTracking = true;
+    startTime = new Date().getTime();
+  });
+  const newMessageListener = BroadcastService.getMessageByEventName(BroadcastEvent.NewMessageReceived).subscribe(message => {
+    const payload = message.payload;
+
+    // we only care for bot, so we need to check if the message is from the bot
+    // pending to add typing message indicator signal detection
+
+    if (isMessageFromValidSender(payload)) {
+      if (startTracking && !stopTracking) {
+        stopTime = new Date().getTime();
+        const elapsedTime = stopTime - startTime;
+        stopTracking = true;
+        stopTrackingMessage = createTrackingMessage(payload, "botMessage");
+        notifyFMLTrackingCompleted();
+        TelemetryHelper.logActionEvent(LogLevel.INFO, {
+          Event: TelemetryEvent.BotFirstMessageLapTrack,
+          Description: "First Message from Bot latency tracking",
+          CustomProperties: {
+            elapsedTime,
+            widgetLoadedAt: startTime,
+            botMessage: stopTrackingMessage
+          }
+        });
+      }
+    }
+
+    // this track only first message, if coming from the bot or not
+    // the only difference is that it logs only those from bot
+    disconnectListener();
+  });
+  const notifyFMLTrackingCompleted = () => {
+    ackListener();
+    // Retry sending until flag is true, but do not block the main thread
+    const interval = setInterval(() => {
+      if (flag) {
+        clearInterval(interval);
+      } else {
+        BroadcastService.postMessage({
+          eventName: BroadcastEvent.FMLTrackingCompleted,
+          payload: null
+        });
+      }
+    }, 100);
+  };
+  const ackListener = () => {
+    const listen = BroadcastService.getMessageByEventName(BroadcastEvent.FMLTrackingCompletedAck).subscribe(() => {
+      flag = true;
+      listen.unsubscribe();
+    });
+  };
+
+  // Rehydrate message is received when the widget is reloaded, this is to ensure that we are not tracking messages that are not part of the current conversation
+  // No need to keep listerning for tracking, enforcing disconnection for the listners
+  const rehydrateListener = BroadcastService.getMessageByEventName(TelemetryEvent.RehydrateMessageReceived).subscribe(() => {
+    startTracking = false;
+    stopTracking = false;
+    disconnectListener();
+  });
+
+  // Rehydrate message is received when the widget is reloaded, this is to ensure that we are not tracking messages that are not part of the current conversation
+  // No need to keep listerning for tracking, enforcing disconnection for the listners
+  const historyListener = BroadcastService.getMessageByEventName(BroadcastEvent.HistoryMessageReceived).subscribe(() => {
+    startTracking = false;
+    stopTracking = false;
+    disconnectListener();
+  });
+  const offlineNetworkListener = BroadcastService.getMessageByEventName(TelemetryEvent.NetworkDisconnected).subscribe(() => {
+    startTracking = false;
+    stopTracking = false;
+    disconnectListener();
+    TelemetryHelper.logActionEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.BotFirstMessageLapTrackError,
+      Description: "Tracker Stopped due to network disconnection"
+    });
+  });
+
+  // this is to ensure that we are not tracking messages that are not part of the current conversation
+  const disconnectListener = () => {
+    historyListener.unsubscribe();
+    rehydrateListener.unsubscribe();
+    newMessageListener.unsubscribe();
+    widgetLoadListener.unsubscribe();
+    offlineNetworkListener.unsubscribe();
+  };
+};

package/lib/esm/firstresponselatency/FirstResponseLatencyTracker.js

@@ -0,0 +1,194 @@
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { BroadcastEvent, LogLevel, TelemetryEvent } from "../common/telemetry/TelemetryConstants";
+import { BroadcastService } from "@microsoft/omnichannel-chat-components";
+import { TelemetryHelper } from "../common/telemetry/TelemetryHelper";
+export let FirstResponseLatencyTracker = /*#__PURE__*/function () {
+  function FirstResponseLatencyTracker() {
+    _classCallCheck(this, FirstResponseLatencyTracker);
+    _defineProperty(this, "isABotConversation", false);
+    _defineProperty(this, "isStarted", false);
+    _defineProperty(this, "isEnded", false);
+    _defineProperty(this, "startTrackingMessage", void 0);
+    _defineProperty(this, "stopTrackingMessage", void 0);
+    _defineProperty(this, "isReady", false);
+    _defineProperty(this, "offlineNetworkListener", BroadcastService.getMessageByEventName(TelemetryEvent.NetworkDisconnected).subscribe(() => {
+      this.isStarted = false;
+      this.isEnded = false;
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.MessageStopLapTrackError,
+        Description: "Tracker Stopped due to network disconnection"
+      });
+    }));
+    _defineProperty(this, "fmltrackingListener", BroadcastService.getMessageByEventName(BroadcastEvent.FMLTrackingCompleted).subscribe(() => {
+      this.isReady = true;
+      BroadcastService.postMessage({
+        eventName: BroadcastEvent.FMLTrackingCompletedAck,
+        payload: null
+      });
+    }));
+    // Rehydrate message is received when the widget is reloaded, this is to ensure that we are not tracking messages that are not part of the current conversation
+    // No need to keep listerning for tracking, enforcing disconnection for the listners
+    _defineProperty(this, "rehydrateListener", BroadcastService.getMessageByEventName(TelemetryEvent.RehydrateMessageReceived).subscribe(() => {
+      this.isReady = true;
+    }));
+    // Rehydrate message is received when the widget is reloaded, this is to ensure that we are not tracking messages that are not part of the current conversation
+    // No need to keep listerning for tracking, enforcing disconnection for the listners
+    _defineProperty(this, "historyListener", BroadcastService.getMessageByEventName(BroadcastEvent.HistoryMessageReceived).subscribe(() => {
+      this.isReady = true;
+    }));
+    // this is a workaround to ensure in reload we track effectively the messages
+    // we do have a mechanism in place to prevent log agent messages.
+    this.isABotConversation = true;
+  }
+  _createClass(FirstResponseLatencyTracker, [{
+    key: "createTrackingMessage",
+    value: function createTrackingMessage(payload, type) {
+      return {
+        Id: payload.Id,
+        role: payload.role,
+        timestamp: payload === null || payload === void 0 ? void 0 : payload.timestamp,
+        tags: payload.tags,
+        messageType: payload.messageType,
+        text: payload.text,
+        type: type,
+        checkTime: new Date().getTime()
+      };
+    }
+
+    // Tracking Functions
+  }, {
+    key: "startTracking",
+    value: function startTracking(payload) {
+      if (!this.isReady) return;
+      //  this prevents to initiate tracking for multiple incoming messages
+      if (this.isStarted) {
+        return;
+      }
+      // this is to ensure we track only messages where bot is engaged
+      if (!this.isABotConversation) {
+        return;
+      }
+      // control of states to prevent clashing of messages
+      this.isStarted = true;
+      this.isEnded = false;
+      // The idea  of using types is to enrich telemetry data 
+      this.startTrackingMessage = this.createTrackingMessage(payload, "userMessage");
+    }
+  }, {
+    key: "handleAgentMessage",
+    value: function handleAgentMessage(payload) {
+      var _payload$tags;
+      // this tag so far is only present in agent messages
+      if (payload !== null && payload !== void 0 && (_payload$tags = payload.tags) !== null && _payload$tags !== void 0 && _payload$tags.includes("public")) {
+        this.deregister();
+      }
+    }
+  }, {
+    key: "stopTracking",
+    value: function stopTracking(payload) {
+      var _this$stopTrackingMes, _this$startTrackingMe;
+      // this prevents execution for multiple incoming messages from the bot.
+      if (this.isEnded && !this.isStarted) {
+        return;
+      }
+
+      // control of states to prevent clashing of messages
+      this.isEnded = true;
+      this.isStarted = false;
+
+      // The idea  of using types is to enrich telemetry data 
+      this.stopTrackingMessage = this.createTrackingMessage(payload, "botMessage");
+      // calculating elapsed time
+      const elapsedTime = (((_this$stopTrackingMes = this.stopTrackingMessage) === null || _this$stopTrackingMes === void 0 ? void 0 : _this$stopTrackingMes.checkTime) ?? 0) - (((_this$startTrackingMe = this.startTrackingMessage) === null || _this$startTrackingMe === void 0 ? void 0 : _this$startTrackingMe.checkTime) ?? 0);
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.MessageLapTrack,
+        Description: "First response latency tracking",
+        CustomProperties: {
+          elapsedTime,
+          userMessage: this.startTrackingMessage,
+          botMessage: this.stopTrackingMessage
+        }
+      });
+    }
+
+    // mechanism to ensure we track only allowed conversations
+  }, {
+    key: "isMessageFromValidSender",
+    value: function isMessageFromValidSender(payload) {
+      var _payload$tags2;
+      // agent scenario
+      if (payload !== null && payload !== void 0 && (_payload$tags2 = payload.tags) !== null && _payload$tags2 !== void 0 && _payload$tags2.includes("public")) {
+        this.handleAgentMessage(payload);
+        return false;
+      }
+      return true;
+    }
+  }, {
+    key: "startClock",
+    value: function startClock(payload) {
+      try {
+        if (!payload || !payload.Id) {
+          throw new Error("Invalid payload");
+        }
+        this.startTracking(payload);
+      } catch (e) {
+        TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+          Event: TelemetryEvent.MessageStartLapTrackError,
+          Description: "Error while starting the clock",
+          ExceptionDetails: e,
+          CustomProperties: {
+            payload: payload
+          }
+        });
+      }
+    }
+  }, {
+    key: "stopClock",
+    value: function stopClock(payload) {
+      try {
+        if (!payload || !payload.Id) {
+          throw new Error("Invalid payload");
+        }
+        if (!this.isMessageFromValidSender(payload)) return;
+        if (this.isABotConversation && this.isStarted) {
+          this.stopTracking(payload);
+        }
+      } catch (e) {
+        console.error("FRL : error while trying to stop the tracker", e);
+        TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+          Event: TelemetryEvent.MessageStopLapTrackError,
+          Description: "Error while stopping the clock",
+          ExceptionDetails: e,
+          CustomProperties: {
+            payload: payload
+          }
+        });
+        //reset state
+        this.startTrackingMessage = undefined;
+        this.stopTrackingMessage = undefined;
+        this.isStarted = false;
+        this.isEnded = false;
+      }
+    }
+  }, {
+    key: "deregister",
+    value: function deregister() {
+      // Reset State
+      this.isABotConversation = false;
+      this.isStarted = false;
+      this.isEnded = false;
+      this.startTrackingMessage = undefined;
+      this.stopTrackingMessage = undefined;
+      this.offlineNetworkListener.unsubscribe();
+      this.fmltrackingListener.unsubscribe();
+      this.rehydrateListener.unsubscribe();
+      this.historyListener.unsubscribe();
+    }
+  }]);
+  return FirstResponseLatencyTracker;
+}();

package/lib/esm/firstresponselatency/util.js

@@ -0,0 +1,87 @@
+import { ScenarioType } from "./Constants";
+import { Constants } from "../common/Constants";
+export const isHistoryMessage = (activity, startTime) => {
+  try {
+    if ((activity === null || activity === void 0 ? void 0 : activity.type) === Constants.message) {
+      var _activity$channelData, _activity$channelData2;
+      // this is an old piece of code, probably no longer relevant
+      if (activity !== null && activity !== void 0 && (_activity$channelData = activity.channelData) !== null && _activity$channelData !== void 0 && (_activity$channelData2 = _activity$channelData.tags) !== null && _activity$channelData2 !== void 0 && _activity$channelData2.includes(Constants.historyMessageTag)) return true;
+
+      // Id is an epoch time in milliseconds , in utc format, for some reason is in a string format
+      if (activity !== null && activity !== void 0 && activity.id) {
+        /// activity.id is an string that contains epoch time in milliseconds
+        const activityId = parseInt(activity === null || activity === void 0 ? void 0 : activity.id);
+
+        // if the activity id is not a number, we default to new message
+        if (isNaN(activityId)) {
+          return false;
+        }
+
+        // if the activity id is less than the start time, it means that the message is a history message
+        if (activityId < startTime) {
+          return true;
+        }
+      }
+      // anything else will be considered a new message
+      return false;
+    }
+  } catch (e) {
+    // if there is an error in parsing the activity id, we will consider it a new message
+    console.error("Error in parsing activity id: ", e);
+  }
+  return false;
+};
+export const buildMessagePayload = (activity, userId) => {
+  var _text, _text2, _activity$channelData3, _activity$from;
+  return {
+    // To identify hidden contents vs empty content
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    text: (activity === null || activity === void 0 ? void 0 : (_text = activity.text) === null || _text === void 0 ? void 0 : _text.length) >= 1 ? `*contents hidden (${activity === null || activity === void 0 ? void 0 : (_text2 = activity.text) === null || _text2 === void 0 ? void 0 : _text2.length} chars)*` : "",
+    type: activity === null || activity === void 0 ? void 0 : activity.type,
+    timestamp: activity === null || activity === void 0 ? void 0 : activity.timestamp,
+    userId: userId,
+    tags: activity === null || activity === void 0 ? void 0 : (_activity$channelData3 = activity.channelData) === null || _activity$channelData3 === void 0 ? void 0 : _activity$channelData3.tags,
+    messageType: "",
+    Id: activity === null || activity === void 0 ? void 0 : activity.id,
+    role: activity === null || activity === void 0 ? void 0 : (_activity$from = activity.from) === null || _activity$from === void 0 ? void 0 : _activity$from.role,
+    isChatComplete: false
+  };
+};
+export const polyfillMessagePayloadForEvent = (activity, payload, conversationId) => {
+  var _activity$conversatio, _attachments, _activity$from2;
+  return {
+    ...payload,
+    channelData: activity === null || activity === void 0 ? void 0 : activity.channelData,
+    chatId: activity === null || activity === void 0 ? void 0 : (_activity$conversatio = activity.conversation) === null || _activity$conversatio === void 0 ? void 0 : _activity$conversatio.id,
+    conversationId: conversationId,
+    Id: activity === null || activity === void 0 ? void 0 : activity.id,
+    isChatComplete: false,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    text: activity === null || activity === void 0 ? void 0 : activity.text,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    attachment: (activity === null || activity === void 0 ? void 0 : (_attachments = activity.attachments) === null || _attachments === void 0 ? void 0 : _attachments.length) >= 1 ? activity === null || activity === void 0 ? void 0 : activity.attachments : [],
+    role: activity === null || activity === void 0 ? void 0 : (_activity$from2 = activity.from) === null || _activity$from2 === void 0 ? void 0 : _activity$from2.role
+  };
+};
+export const getScenarioType = activity => {
+  var _activity$from3, _activity$channelData4, _activity$channelData5;
+  if ((activity === null || activity === void 0 ? void 0 : (_activity$from3 = activity.from) === null || _activity$from3 === void 0 ? void 0 : _activity$from3.role) === Constants.userMessageTag) {
+    return ScenarioType.UserSendMessageStrategy;
+  }
+  if (activity !== null && activity !== void 0 && (_activity$channelData4 = activity.channelData) !== null && _activity$channelData4 !== void 0 && (_activity$channelData5 = _activity$channelData4.tags) !== null && _activity$channelData5 !== void 0 && _activity$channelData5.includes(Constants.systemMessageTag)) {
+    return ScenarioType.SystemMessageStrategy;
+  }
+  return ScenarioType.ReceivedMessageStrategy;
+};
+export const createTrackingMessage = (payload, type) => {
+  return {
+    Id: payload.Id,
+    role: payload.role,
+    timestamp: payload === null || payload === void 0 ? void 0 : payload.timestamp,
+    tags: payload.tags,
+    messageType: payload.messageType,
+    text: payload.text,
+    type: type,
+    checkTime: new Date().getTime()
+  };
+};

package/lib/esm/plugins/createChatTranscript.js

@@ -1,3 +1,6 @@
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
@@ -6,11 +9,12 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 import { createFileAndDownload } from "../common/utils";
 import defaultLibraryScripts from "../components/footerstateful/downloadtranscriptstateful/common/defaultLibraryScripts";
 import DOMPurify from "dompurify";
-class TranscriptHTMLBuilder {
+let TranscriptHTMLBuilder = /*#__PURE__*/function () {
   // eslint-disable-line @typescript-eslint/no-explicit-any
 
-  constructor(options) {
+  function TranscriptHTMLBuilder(options) {
     var _this$options, _this$options2, _this$options3, _this$options4, _this$options5, _this$options6, _this$options7, _this$options8, _this$options9, _this$options10, _this$options11, _this$options12, _this$options13;
+    _classCallCheck(this, TranscriptHTMLBuilder);
     _defineProperty(this, "options", void 0);
     _defineProperty(this, "pageTitle", "Customer Transcript");
     _defineProperty(this, "attachmentMessage", "The following attachment was uploaded during the conversation: ");
@@ -70,59 +74,79 @@ class TranscriptHTMLBuilder {
       this.externalScripts = this.options.externalScripts;
     }
   }
-  createMetaElement() {
-    const htmlData = `
+  _createClass(TranscriptHTMLBuilder, [{
+    key: "createMetaElement",
+    value: function createMetaElement() {
+      const htmlData = `
             <meta charset="UTF-8">
         `;
-    return htmlData;
-  }
-  createTitleElement() {
-    const htmlData = `<title> ${this.pageTitle} </title>`;
-    return htmlData;
-  }
-  createScriptElement(src) {
-    let integrity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
-    let crossOrigin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
-    let referrerPolicy = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
-    return `<script src="${src}" ${integrity ? `integrity="${integrity}"` : ""} ${crossOrigin ? `crossorigin="${crossOrigin}"` : ""} ${referrerPolicy ? `referrerpolicy="${referrerPolicy}"` : ""}><\/script>`;
-  }
-  createWebChatScriptElement() {
-    var _this$externalScripts, _this$externalScripts2, _this$externalScripts3, _this$externalScripts4, _this$externalScripts5, _this$externalScripts6, _this$externalScripts7, _this$externalScripts8, _this$externalScripts9, _this$externalScripts10;
-    return (_this$externalScripts = this.externalScripts) !== null && _this$externalScripts !== void 0 && (_this$externalScripts2 = _this$externalScripts.botframeworkWebChat) !== null && _this$externalScripts2 !== void 0 && _this$externalScripts2.src ? this.createScriptElement((_this$externalScripts3 = this.externalScripts) === null || _this$externalScripts3 === void 0 ? void 0 : (_this$externalScripts4 = _this$externalScripts3.botframeworkWebChat) === null || _this$externalScripts4 === void 0 ? void 0 : _this$externalScripts4.src, (_this$externalScripts5 = this.externalScripts) === null || _this$externalScripts5 === void 0 ? void 0 : (_this$externalScripts6 = _this$externalScripts5.botframeworkWebChat) === null || _this$externalScripts6 === void 0 ? void 0 : _this$externalScripts6.integrity, (_this$externalScripts7 = this.externalScripts) === null || _this$externalScripts7 === void 0 ? void 0 : (_this$externalScripts8 = _this$externalScripts7.botframeworkWebChat) === null || _this$externalScripts8 === void 0 ? void 0 : _this$externalScripts8.crossOrigin, (_this$externalScripts9 = this.externalScripts) === null || _this$externalScripts9 === void 0 ? void 0 : (_this$externalScripts10 = _this$externalScripts9.botframeworkWebChat) === null || _this$externalScripts10 === void 0 ? void 0 : _this$externalScripts10.referrerPolicy) : this.createScriptElement(defaultLibraryScripts.botframeworkWebChat.src);
-  }
-  createRxJsScriptElement() {
-    var _this$externalScripts11, _this$externalScripts12, _this$externalScripts13, _this$externalScripts14, _this$externalScripts15, _this$externalScripts16, _this$externalScripts17, _this$externalScripts18, _this$externalScripts19, _this$externalScripts20;
-    return (_this$externalScripts11 = this.externalScripts) !== null && _this$externalScripts11 !== void 0 && (_this$externalScripts12 = _this$externalScripts11.rxJs) !== null && _this$externalScripts12 !== void 0 && _this$externalScripts12.src ? this.createScriptElement((_this$externalScripts13 = this.externalScripts) === null || _this$externalScripts13 === void 0 ? void 0 : (_this$externalScripts14 = _this$externalScripts13.rxJs) === null || _this$externalScripts14 === void 0 ? void 0 : _this$externalScripts14.src, (_this$externalScripts15 = this.externalScripts) === null || _this$externalScripts15 === void 0 ? void 0 : (_this$externalScripts16 = _this$externalScripts15.rxJs) === null || _this$externalScripts16 === void 0 ? void 0 : _this$externalScripts16.integrity, (_this$externalScripts17 = this.externalScripts) === null || _this$externalScripts17 === void 0 ? void 0 : (_this$externalScripts18 = _this$externalScripts17.rxJs) === null || _this$externalScripts18 === void 0 ? void 0 : _this$externalScripts18.crossOrigin, (_this$externalScripts19 = this.externalScripts) === null || _this$externalScripts19 === void 0 ? void 0 : (_this$externalScripts20 = _this$externalScripts19.rxJs) === null || _this$externalScripts20 === void 0 ? void 0 : _this$externalScripts20.referrerPolicy) : this.createScriptElement(defaultLibraryScripts.rxJs.src, defaultLibraryScripts.rxJs.integrity, defaultLibraryScripts.rxJs.crossOrigin, defaultLibraryScripts.rxJs.referrerPolicy);
-  }
-  createReactScriptElement() {
-    var _this$externalScripts21, _this$externalScripts22, _this$externalScripts23, _this$externalScripts24, _this$externalScripts25, _this$externalScripts26, _this$externalScripts27, _this$externalScripts28, _this$externalScripts29, _this$externalScripts30;
-    return (_this$externalScripts21 = this.externalScripts) !== null && _this$externalScripts21 !== void 0 && (_this$externalScripts22 = _this$externalScripts21.react) !== null && _this$externalScripts22 !== void 0 && _this$externalScripts22.src ? this.createScriptElement((_this$externalScripts23 = this.externalScripts) === null || _this$externalScripts23 === void 0 ? void 0 : (_this$externalScripts24 = _this$externalScripts23.react) === null || _this$externalScripts24 === void 0 ? void 0 : _this$externalScripts24.src, (_this$externalScripts25 = this.externalScripts) === null || _this$externalScripts25 === void 0 ? void 0 : (_this$externalScripts26 = _this$externalScripts25.react) === null || _this$externalScripts26 === void 0 ? void 0 : _this$externalScripts26.integrity, (_this$externalScripts27 = this.externalScripts) === null || _this$externalScripts27 === void 0 ? void 0 : (_this$externalScripts28 = _this$externalScripts27.react) === null || _this$externalScripts28 === void 0 ? void 0 : _this$externalScripts28.crossOrigin, (_this$externalScripts29 = this.externalScripts) === null || _this$externalScripts29 === void 0 ? void 0 : (_this$externalScripts30 = _this$externalScripts29.react) === null || _this$externalScripts30 === void 0 ? void 0 : _this$externalScripts30.referrerPolicy) : this.createScriptElement(defaultLibraryScripts.react.src);
-  }
-  createReactDomScriptElement() {
-    var _this$externalScripts31, _this$externalScripts32, _this$externalScripts33, _this$externalScripts34, _this$externalScripts35, _this$externalScripts36, _this$externalScripts37, _this$externalScripts38, _this$externalScripts39, _this$externalScripts40, _this$externalScripts41, _this$externalScripts42;
-    return (_this$externalScripts31 = this.externalScripts) !== null && _this$externalScripts31 !== void 0 && (_this$externalScripts32 = _this$externalScripts31.reactDom) !== null && _this$externalScripts32 !== void 0 && _this$externalScripts32.src ? this.createScriptElement((_this$externalScripts33 = this.externalScripts) === null || _this$externalScripts33 === void 0 ? void 0 : (_this$externalScripts34 = _this$externalScripts33.reactDom) === null || _this$externalScripts34 === void 0 ? void 0 : _this$externalScripts34.src, (_this$externalScripts35 = this.externalScripts) === null || _this$externalScripts35 === void 0 ? void 0 : (_this$externalScripts36 = _this$externalScripts35.reactDom) === null || _this$externalScripts36 === void 0 ? void 0 : _this$externalScripts36.integrity, (_this$externalScripts37 = this.externalScripts) === null || _this$externalScripts37 === void 0 ? void 0 : (_this$externalScripts38 = _this$externalScripts37.reactDom) === null || _this$externalScripts38 === void 0 ? void 0 : _this$externalScripts38.crossOrigin, (_this$externalScripts39 = this.externalScripts) === null || _this$externalScripts39 === void 0 ? void 0 : (_this$externalScripts40 = _this$externalScripts39.reactDom) === null || _this$externalScripts40 === void 0 ? void 0 : _this$externalScripts40.referrerPolicy) : this.createScriptElement(((_this$externalScripts41 = this.externalScripts) === null || _this$externalScripts41 === void 0 ? void 0 : (_this$externalScripts42 = _this$externalScripts41.reactDom) === null || _this$externalScripts42 === void 0 ? void 0 : _this$externalScripts42.src) ?? defaultLibraryScripts.reactDom.src);
-  }
-  createMarkdownItScriptElement() {
-    var _this$externalScripts43, _this$externalScripts44, _this$externalScripts45, _this$externalScripts46, _this$externalScripts47, _this$externalScripts48, _this$externalScripts49, _this$externalScripts50, _this$externalScripts51, _this$externalScripts52;
-    return (_this$externalScripts43 = this.externalScripts) !== null && _this$externalScripts43 !== void 0 && (_this$externalScripts44 = _this$externalScripts43.markdownIt) !== null && _this$externalScripts44 !== void 0 && _this$externalScripts44.src ? this.createScriptElement((_this$externalScripts45 = this.externalScripts) === null || _this$externalScripts45 === void 0 ? void 0 : (_this$externalScripts46 = _this$externalScripts45.markdownIt) === null || _this$externalScripts46 === void 0 ? void 0 : _this$externalScripts46.src, (_this$externalScripts47 = this.externalScripts) === null || _this$externalScripts47 === void 0 ? void 0 : (_this$externalScripts48 = _this$externalScripts47.markdownIt) === null || _this$externalScripts48 === void 0 ? void 0 : _this$externalScripts48.integrity, (_this$externalScripts49 = this.externalScripts) === null || _this$externalScripts49 === void 0 ? void 0 : (_this$externalScripts50 = _this$externalScripts49.markdownIt) === null || _this$externalScripts50 === void 0 ? void 0 : _this$externalScripts50.crossOrigin, (_this$externalScripts51 = this.externalScripts) === null || _this$externalScripts51 === void 0 ? void 0 : (_this$externalScripts52 = _this$externalScripts51.markdownIt) === null || _this$externalScripts52 === void 0 ? void 0 : _this$externalScripts52.referrerPolicy) : this.createScriptElement(defaultLibraryScripts.markdownIt.src, defaultLibraryScripts.markdownIt.integrity, defaultLibraryScripts.markdownIt.crossOrigin);
-  }
-  createExternalScriptElements() {
-    const webChatScript = this.createWebChatScriptElement();
-    const rxJsScript = this.createRxJsScriptElement();
-    const reactScript = this.createReactScriptElement();
-    const reactDomScript = this.createReactDomScriptElement();
-    const markdownItScript = this.createMarkdownItScriptElement();
-    const htmlData = `
+      return htmlData;
+    }
+  }, {
+    key: "createTitleElement",
+    value: function createTitleElement() {
+      const htmlData = `<title> ${this.pageTitle} </title>`;
+      return htmlData;
+    }
+  }, {
+    key: "createScriptElement",
+    value: function createScriptElement(src) {
+      let integrity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+      let crossOrigin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+      let referrerPolicy = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
+      return `<script src="${src}" ${integrity ? `integrity="${integrity}"` : ""} ${crossOrigin ? `crossorigin="${crossOrigin}"` : ""} ${referrerPolicy ? `referrerpolicy="${referrerPolicy}"` : ""}><\/script>`;
+    }
+  }, {
+    key: "createWebChatScriptElement",
+    value: function createWebChatScriptElement() {
+      var _this$externalScripts, _this$externalScripts2, _this$externalScripts3, _this$externalScripts4, _this$externalScripts5, _this$externalScripts6, _this$externalScripts7, _this$externalScripts8, _this$externalScripts9, _this$externalScripts10;
+      return (_this$externalScripts = this.externalScripts) !== null && _this$externalScripts !== void 0 && (_this$externalScripts2 = _this$externalScripts.botframeworkWebChat) !== null && _this$externalScripts2 !== void 0 && _this$externalScripts2.src ? this.createScriptElement((_this$externalScripts3 = this.externalScripts) === null || _this$externalScripts3 === void 0 ? void 0 : (_this$externalScripts4 = _this$externalScripts3.botframeworkWebChat) === null || _this$externalScripts4 === void 0 ? void 0 : _this$externalScripts4.src, (_this$externalScripts5 = this.externalScripts) === null || _this$externalScripts5 === void 0 ? void 0 : (_this$externalScripts6 = _this$externalScripts5.botframeworkWebChat) === null || _this$externalScripts6 === void 0 ? void 0 : _this$externalScripts6.integrity, (_this$externalScripts7 = this.externalScripts) === null || _this$externalScripts7 === void 0 ? void 0 : (_this$externalScripts8 = _this$externalScripts7.botframeworkWebChat) === null || _this$externalScripts8 === void 0 ? void 0 : _this$externalScripts8.crossOrigin, (_this$externalScripts9 = this.externalScripts) === null || _this$externalScripts9 === void 0 ? void 0 : (_this$externalScripts10 = _this$externalScripts9.botframeworkWebChat) === null || _this$externalScripts10 === void 0 ? void 0 : _this$externalScripts10.referrerPolicy) : this.createScriptElement(defaultLibraryScripts.botframeworkWebChat.src);
+    }
+  }, {
+    key: "createRxJsScriptElement",
+    value: function createRxJsScriptElement() {
+      var _this$externalScripts11, _this$externalScripts12, _this$externalScripts13, _this$externalScripts14, _this$externalScripts15, _this$externalScripts16, _this$externalScripts17, _this$externalScripts18, _this$externalScripts19, _this$externalScripts20;
+      return (_this$externalScripts11 = this.externalScripts) !== null && _this$externalScripts11 !== void 0 && (_this$externalScripts12 = _this$externalScripts11.rxJs) !== null && _this$externalScripts12 !== void 0 && _this$externalScripts12.src ? this.createScriptElement((_this$externalScripts13 = this.externalScripts) === null || _this$externalScripts13 === void 0 ? void 0 : (_this$externalScripts14 = _this$externalScripts13.rxJs) === null || _this$externalScripts14 === void 0 ? void 0 : _this$externalScripts14.src, (_this$externalScripts15 = this.externalScripts) === null || _this$externalScripts15 === void 0 ? void 0 : (_this$externalScripts16 = _this$externalScripts15.rxJs) === null || _this$externalScripts16 === void 0 ? void 0 : _this$externalScripts16.integrity, (_this$externalScripts17 = this.externalScripts) === null || _this$externalScripts17 === void 0 ? void 0 : (_this$externalScripts18 = _this$externalScripts17.rxJs) === null || _this$externalScripts18 === void 0 ? void 0 : _this$externalScripts18.crossOrigin, (_this$externalScripts19 = this.externalScripts) === null || _this$externalScripts19 === void 0 ? void 0 : (_this$externalScripts20 = _this$externalScripts19.rxJs) === null || _this$externalScripts20 === void 0 ? void 0 : _this$externalScripts20.referrerPolicy) : this.createScriptElement(defaultLibraryScripts.rxJs.src, defaultLibraryScripts.rxJs.integrity, defaultLibraryScripts.rxJs.crossOrigin, defaultLibraryScripts.rxJs.referrerPolicy);
+    }
+  }, {
+    key: "createReactScriptElement",
+    value: function createReactScriptElement() {
+      var _this$externalScripts21, _this$externalScripts22, _this$externalScripts23, _this$externalScripts24, _this$externalScripts25, _this$externalScripts26, _this$externalScripts27, _this$externalScripts28, _this$externalScripts29, _this$externalScripts30;
+      return (_this$externalScripts21 = this.externalScripts) !== null && _this$externalScripts21 !== void 0 && (_this$externalScripts22 = _this$externalScripts21.react) !== null && _this$externalScripts22 !== void 0 && _this$externalScripts22.src ? this.createScriptElement((_this$externalScripts23 = this.externalScripts) === null || _this$externalScripts23 === void 0 ? void 0 : (_this$externalScripts24 = _this$externalScripts23.react) === null || _this$externalScripts24 === void 0 ? void 0 : _this$externalScripts24.src, (_this$externalScripts25 = this.externalScripts) === null || _this$externalScripts25 === void 0 ? void 0 : (_this$externalScripts26 = _this$externalScripts25.react) === null || _this$externalScripts26 === void 0 ? void 0 : _this$externalScripts26.integrity, (_this$externalScripts27 = this.externalScripts) === null || _this$externalScripts27 === void 0 ? void 0 : (_this$externalScripts28 = _this$externalScripts27.react) === null || _this$externalScripts28 === void 0 ? void 0 : _this$externalScripts28.crossOrigin, (_this$externalScripts29 = this.externalScripts) === null || _this$externalScripts29 === void 0 ? void 0 : (_this$externalScripts30 = _this$externalScripts29.react) === null || _this$externalScripts30 === void 0 ? void 0 : _this$externalScripts30.referrerPolicy) : this.createScriptElement(defaultLibraryScripts.react.src);
+    }
+  }, {
+    key: "createReactDomScriptElement",
+    value: function createReactDomScriptElement() {
+      var _this$externalScripts31, _this$externalScripts32, _this$externalScripts33, _this$externalScripts34, _this$externalScripts35, _this$externalScripts36, _this$externalScripts37, _this$externalScripts38, _this$externalScripts39, _this$externalScripts40, _this$externalScripts41, _this$externalScripts42;
+      return (_this$externalScripts31 = this.externalScripts) !== null && _this$externalScripts31 !== void 0 && (_this$externalScripts32 = _this$externalScripts31.reactDom) !== null && _this$externalScripts32 !== void 0 && _this$externalScripts32.src ? this.createScriptElement((_this$externalScripts33 = this.externalScripts) === null || _this$externalScripts33 === void 0 ? void 0 : (_this$externalScripts34 = _this$externalScripts33.reactDom) === null || _this$externalScripts34 === void 0 ? void 0 : _this$externalScripts34.src, (_this$externalScripts35 = this.externalScripts) === null || _this$externalScripts35 === void 0 ? void 0 : (_this$externalScripts36 = _this$externalScripts35.reactDom) === null || _this$externalScripts36 === void 0 ? void 0 : _this$externalScripts36.integrity, (_this$externalScripts37 = this.externalScripts) === null || _this$externalScripts37 === void 0 ? void 0 : (_this$externalScripts38 = _this$externalScripts37.reactDom) === null || _this$externalScripts38 === void 0 ? void 0 : _this$externalScripts38.crossOrigin, (_this$externalScripts39 = this.externalScripts) === null || _this$externalScripts39 === void 0 ? void 0 : (_this$externalScripts40 = _this$externalScripts39.reactDom) === null || _this$externalScripts40 === void 0 ? void 0 : _this$externalScripts40.referrerPolicy) : this.createScriptElement(((_this$externalScripts41 = this.externalScripts) === null || _this$externalScripts41 === void 0 ? void 0 : (_this$externalScripts42 = _this$externalScripts41.reactDom) === null || _this$externalScripts42 === void 0 ? void 0 : _this$externalScripts42.src) ?? defaultLibraryScripts.reactDom.src);
+    }
+  }, {
+    key: "createMarkdownItScriptElement",
+    value: function createMarkdownItScriptElement() {
+      var _this$externalScripts43, _this$externalScripts44, _this$externalScripts45, _this$externalScripts46, _this$externalScripts47, _this$externalScripts48, _this$externalScripts49, _this$externalScripts50, _this$externalScripts51, _this$externalScripts52;
+      return (_this$externalScripts43 = this.externalScripts) !== null && _this$externalScripts43 !== void 0 && (_this$externalScripts44 = _this$externalScripts43.markdownIt) !== null && _this$externalScripts44 !== void 0 && _this$externalScripts44.src ? this.createScriptElement((_this$externalScripts45 = this.externalScripts) === null || _this$externalScripts45 === void 0 ? void 0 : (_this$externalScripts46 = _this$externalScripts45.markdownIt) === null || _this$externalScripts46 === void 0 ? void 0 : _this$externalScripts46.src, (_this$externalScripts47 = this.externalScripts) === null || _this$externalScripts47 === void 0 ? void 0 : (_this$externalScripts48 = _this$externalScripts47.markdownIt) === null || _this$externalScripts48 === void 0 ? void 0 : _this$externalScripts48.integrity, (_this$externalScripts49 = this.externalScripts) === null || _this$externalScripts49 === void 0 ? void 0 : (_this$externalScripts50 = _this$externalScripts49.markdownIt) === null || _this$externalScripts50 === void 0 ? void 0 : _this$externalScripts50.crossOrigin, (_this$externalScripts51 = this.externalScripts) === null || _this$externalScripts51 === void 0 ? void 0 : (_this$externalScripts52 = _this$externalScripts51.markdownIt) === null || _this$externalScripts52 === void 0 ? void 0 : _this$externalScripts52.referrerPolicy) : this.createScriptElement(defaultLibraryScripts.markdownIt.src, defaultLibraryScripts.markdownIt.integrity, defaultLibraryScripts.markdownIt.crossOrigin);
+    }
+  }, {
+    key: "createExternalScriptElements",
+    value: function createExternalScriptElements() {
+      const webChatScript = this.createWebChatScriptElement();
+      const rxJsScript = this.createRxJsScriptElement();
+      const reactScript = this.createReactScriptElement();
+      const reactDomScript = this.createReactDomScriptElement();
+      const markdownItScript = this.createMarkdownItScriptElement();
+      const htmlData = `
             ${webChatScript}
             ${rxJsScript}
             ${reactScript}
             ${reactDomScript}
             ${markdownItScript}
         `;
-    return htmlData;
-  }
-  createHeadElement() {
-    const htmlData = `
+      return htmlData;
+    }
+  }, {
+    key: "createHeadElement",
+    value: function createHeadElement() {
+      const htmlData = `
             <head>
                 ${this.createMetaElement()}
                 ${this.createTitleElement()}
@@ -362,10 +386,12 @@ class TranscriptHTMLBuilder {
                 <\/style>
             </head>
         `;
-    return htmlData;
-  }
-  createBodyElement() {
-    const htmlData = `
+      return htmlData;
+    }
+  }, {
+    key: "createBodyElement",
+    value: function createBodyElement() {
+      const htmlData = `
             <body>
                 <script>
                     if (!navigator.onLine) {
@@ -646,18 +672,22 @@ class TranscriptHTMLBuilder {
                 <\/script>
             </body>
         `;
-    return htmlData;
-  }
-  createHTML() {
-    const htmlData = `
+      return htmlData;
+    }
+  }, {
+    key: "createHTML",
+    value: function createHTML() {
+      const htmlData = `
             <html>
                 ${this.createHeadElement()}
                 ${this.createBodyElement()}
             </html>
         `;
-    return htmlData;
-  }
-}
+      return htmlData;
+    }
+  }]);
+  return TranscriptHTMLBuilder;
+}();
 const createChatTranscript = async function (transcript, facadeChatSDK) {
   let renderAttachments = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   let transcriptOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};