@microsoft/omnichannel-chat-widget 1.0.6-main.3aba33c → 1.0.6-main.ec7a5f0

package/lib/cjs/plugins/createChatTranscript.js

@@ -0,0 +1,548 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _utils = require("../common/utils");
+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); }
+class TranscriptHTMLBuilder {
+  // eslint-disable-line @typescript-eslint/no-explicit-any
+
+  constructor(options) {
+    var _this$options, _this$options2, _this$options3, _this$options4, _this$options5, _this$options6, _this$options7, _this$options8, _this$options9, _this$options10, _this$options11;
+    _defineProperty(this, "options", void 0);
+    _defineProperty(this, "pageTitle", "Customer Transcript");
+    _defineProperty(this, "attachmentMessage", "The following attachment was uploaded during the conversation: ");
+    _defineProperty(this, "networkOnlineMessage", "Connection restored. Please refresh the page");
+    _defineProperty(this, "networkOfflineMessage", "Network Error. Please make sure you are connected to the internet.");
+    _defineProperty(this, "transcriptBackgroundColor", "#FFF");
+    _defineProperty(this, "agentAvatarBackgroundColor", "#E8E8E8");
+    _defineProperty(this, "agentAvatarFontColor", "#000");
+    _defineProperty(this, "customerAvatarBackgroundColor", "#2266E3");
+    _defineProperty(this, "customerAvatarFontColor", "#FFF");
+    _defineProperty(this, "disableMarkdownMessageFormatting", false);
+    _defineProperty(this, "disableNewLineMarkdownSupport", false);
+    // eslint-disable-line @typescript-eslint/no-explicit-any
+    this.options = options;
+    if (!this.options || !this.options.messages) {
+      this.options.messages = [];
+    }
+    if ((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.pageTitle) {
+      this.pageTitle = this.options.pageTitle;
+    }
+    if ((_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.attachmentMessage) {
+      this.attachmentMessage = this.options.attachmentMessage;
+    }
+    if ((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.networkOnlineMessage) {
+      this.networkOnlineMessage = this.options.networkOnlineMessage;
+    }
+    if ((_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.networkOfflineMessage) {
+      this.networkOfflineMessage = this.options.networkOfflineMessage;
+    }
+    if ((_this$options5 = this.options) !== null && _this$options5 !== void 0 && _this$options5.transcriptBackgroundColor) {
+      this.transcriptBackgroundColor = this.options.transcriptBackgroundColor;
+    }
+    if ((_this$options6 = this.options) !== null && _this$options6 !== void 0 && _this$options6.agentAvatarBackgroundColor) {
+      this.agentAvatarBackgroundColor = this.options.agentAvatarBackgroundColor;
+    }
+    if ((_this$options7 = this.options) !== null && _this$options7 !== void 0 && _this$options7.agentAvatarFontColor) {
+      this.agentAvatarFontColor = this.options.agentAvatarFontColor;
+    }
+    if ((_this$options8 = this.options) !== null && _this$options8 !== void 0 && _this$options8.customerAvatarBackgroundColor) {
+      this.customerAvatarBackgroundColor = this.options.customerAvatarBackgroundColor;
+    }
+    if ((_this$options9 = this.options) !== null && _this$options9 !== void 0 && _this$options9.customerAvatarFontColor) {
+      this.customerAvatarFontColor = this.options.customerAvatarFontColor;
+    }
+    if ((_this$options10 = this.options) !== null && _this$options10 !== void 0 && _this$options10.disableMarkdownMessageFormatting) {
+      this.disableMarkdownMessageFormatting = this.options.disableMarkdownMessageFormatting;
+    }
+    if ((_this$options11 = this.options) !== null && _this$options11 !== void 0 && _this$options11.disableNewLineMarkdownSupport) {
+      this.disableNewLineMarkdownSupport = this.options.disableNewLineMarkdownSupport;
+    }
+  }
+  createTitleElement() {
+    const htmlData = `<title> ${this.pageTitle} </title>`;
+    return htmlData;
+  }
+  createExternalScriptElements() {
+    const htmlData = `
+            <script src="https://cdn.botframework.com/botframework-webchat/4.15.7/webchat.js"><\/script>
+            <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.8.0/rxjs.umd.min.js" integrity="sha512-v0/YVjBcbjLN6scjmmJN+h86koeB7JhY4/2YeyA5l+rTdtKLv0VbDBNJ32rxJpsaW1QGMd1Z16lsLOSGI38Rbg==" crossorigin="anonymous" referrerpolicy="no-referrer"><\/script>
+            <script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"><\/script>
+            <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"><\/script>
+            <script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js" integrity="sha256-hNyljag6giCsjv/yKmxK8/VeHzvMDvc5u8AzmRvm1BI=" crossorigin="anonymous"><\/script>
+        `;
+    return htmlData;
+  }
+  createHeadElement() {
+    const htmlData = `
+            <head>
+                ${this.createTitleElement()}
+                ${this.createExternalScriptElements()}
+                <script>
+                    function shareObservable(observable) {
+                        let observers = [];
+                        let subscription;
+
+                        return new Observable(observer => {
+                            if (!subscription) {
+                                subscription = observable.subscribe({
+                                    complete() {
+                                        observers.forEach(observer => observer.complete());
+                                    },
+                                    error(err) {
+                                        observers.forEach(observer => observer.error(err));
+                                    },
+                                    next(value) {
+                                        observers.forEach(observer => observer.next(value));
+                                    }
+                                });
+                            }
+
+                            observers.push(observer);
+
+                            return () => {
+                                observers = observers.filter(o => o !== observer);
+
+                                if (!observers.length) {
+                                    subscription.unsubscribe();
+                                    subscription = null;
+                                }
+                            };
+                        });
+                    }
+                <\/script>
+                <script>
+                    const messages = ${JSON.stringify(this.options.messages)};
+                    const disableMarkdownMessageFormatting = ${this.disableMarkdownMessageFormatting};
+                    const disableNewLineMarkdownSupport = ${this.disableNewLineMarkdownSupport};
+                <\/script>
+                <script>
+                    class Translator {
+                        static convertTranscriptMessageToActivity(message) {
+                            const {created, isControlMessage, content, tags, from, attachments, amsMetadata, amsReferences} = message;
+                            const activity = {
+                                from: {
+                                    role: 'bot'
+                                },
+                                type: 'message'
+                            };
+
+                            // Ignore control messages
+                            if (isControlMessage) {
+                                return false;
+                            }
+
+                            if (tags) {
+                                const formattedTags = tags.split(',');
+
+                                // Ignore system message
+                                if (formattedTags.includes('system')) {
+                                    return false;
+                                }
+
+                                // Ignore hidden message
+                                if (formattedTags.includes('Hidden')) {
+                                    return false;
+                                }
+                            }
+
+                            // Add C1 user display name
+                            if (from && from.user && from.user.displayName) {
+                                activity.from.name = from.user.displayName;
+                            }
+
+                            // Add C2 user display name
+                            if (from && from.application && from.application.displayName && from.application.displayName === 'Customer') {
+                                activity.from = {
+                                    role: 'user',
+                                    name: from.application.displayName
+                                };
+                            }
+
+                            // Attachments
+                            if (amsReferences && amsMetadata) {
+                                const metadata = JSON.parse(amsMetadata);
+                                const { fileName } = metadata[0];
+                                const text = \`${this.attachmentMessage}\${fileName}\`;
+
+                                if (message.attachments && message.attachments.length > 0 && message.contentUrl) {
+                                    activity.attachments = message.attachments;
+                                    activity.attachments[0].contentUrl = message.contentUrl;
+                                    activity.attachments[0].thumbnailUrl =  message.contentUrl;
+                                };
+
+                                return {
+                                    ...activity,
+                                    text,
+                                    timestamp: created
+                                }
+                            }
+
+                            // Message
+                            if (content) {
+                                // Adaptive card formatting
+                                if (content.includes('"text"') && content.includes('"attachments"') && content.includes('"suggestedActions"')) {
+                                    try {
+                                        const partialActivity = JSON.parse(content);
+                                        return {
+                                            ...activity,
+                                            ...partialActivity,
+                                            timestamp: created
+                                        };
+                                    } catch {
+
+                                    }
+                                }
+                            }
+
+                            return {
+                                ...activity,
+                                text: content,
+                                timestamp: created
+                            };
+                        }
+                    }
+                <\/script>
+                <script>
+                    class TranscriptAdapter {
+                        constructor() {
+                            this.connectionStatus$ = new window.rxjs.BehaviorSubject(0); // Uninitialized
+                            this.activity$ = shareObservable(new Observable((observer) => {
+                                this.activityObserver = observer;
+
+                                this.connectionStatus$.next(1); // Connecting
+                                this.connectionStatus$.next(2); // Online
+
+                                // Retrieve messages
+                                if (messages) {
+                                    setTimeout(() => { // setTimeout is needed due to some WebChat issues
+                                        messages.map((message) => {
+                                            this.activityObserver.next({
+                                                ...Translator.convertTranscriptMessageToActivity(message),
+                                                type: 'message'
+                                            });
+                                        });
+                                    }, 1);
+                                }
+                            }));
+                        }
+                    }
+                <\/script>
+                <style>
+                    body {
+                        margin: 0;
+                    }
+
+                    .message-name {
+                        font-family: Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,sans-serif;
+                        font-weight: 700;
+                        font-size: 10px;
+                    }
+
+                    .message-timestamp {
+                        font-family: Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,sans-serif;
+                        font-weight: 500;
+                        font-size: 10px;
+                    }
+
+                    .avatar {
+                        width: 40px;
+                        height: 40px;
+                        border-radius: 50%;
+                        text-align: center;
+                    }
+
+                    .avatar--bot {
+                        background-color: ${this.agentAvatarBackgroundColor};
+                    }
+
+                    .avatar--user {
+                        background-color: ${this.customerAvatarBackgroundColor};
+                    }
+
+                    .avatar > p {
+                        font-weight: 600;
+                        text-align: center;
+                        line-height: 0.5;
+                        font-family: "Segoe UI", Arial, sans-serif;
+                    }
+
+                    .avatar--bot > p {
+                        color: ${this.agentAvatarFontColor};
+                    }
+
+                    .avatar--user > p {
+                        color: ${this.customerAvatarFontColor};
+                    }
+
+                    .webchat__bubble__content>div.ms_lcw_webchat_adaptive_card {
+                        background-color: #FFF;
+                    }
+
+                    div[class="ac-textBlock"] {
+                        color: #000 !important;
+                    }
+
+                    .ms_lcw_webchat_received_message a:link, .ms_lcw_webchat_received_message a:visited, .ms_lcw_webchat_received_message a:hover, .ms_lcw_webchat_received_message a:active {
+                        color: #FFF;
+                    }
+                <\/style>
+            </head>
+        `;
+    return htmlData;
+  }
+  createBodyElement() {
+    const htmlData = `
+            <body>
+                <script>
+                    if (!navigator.onLine) {
+                        const offlineText = \`${this.networkOfflineMessage}\`;
+                        document.body.innerHTML = offlineText;
+                    }
+
+                    window.addEventListener("online", () => {
+                        document.body.innerHTML = \`${this.networkOnlineMessage} <button onclick="window.location.reload()"> Refresh </button>\`;
+                    });
+                <\/script>
+                <div id="transcript"></div>
+                <script>
+                    const getIconText = (text) => {
+                        if (text) {
+                            const initials = text.split(/\\s/).reduce((response, word) => response += word.slice(0, 1), '');
+                            if (initials.length > 1) {
+                                return initials.substring(0, 2).toUpperCase();
+                            } else {
+                                return text.substring(0, 2).toUpperCase();
+                            }
+                        }
+
+                        return "";
+                    }
+
+                    const activityMiddleware = () => (next) => (...args) => {
+                        const [card] = args;
+
+                        if (card.activity) {
+                            if (card.activity.from && card.activity.from.role === "channel") {
+                                return () => false;
+                            }
+
+                            // Incoming text message
+                            if (card.activity.text && card.activity.from && card.activity.from.role !== "user") {
+                                return (...renderArgs) => (React.createElement(
+                                    'div',
+                                    {className: 'ms_lcw_webchat_received_message'},
+                                    next(...args)(...renderArgs)
+                                ))
+                            }
+                        }
+
+                        return next(...args);
+                    };
+
+                    const activityStatusMiddleware = () => (next) => (...args) => {
+                        const [card] = args;
+                        const {activity} = card;
+
+                        if (activity) {
+                            const {from, timestamp} = activity;
+
+                            const nameElement = React.createElement(
+                                'span',
+                                {className: 'message-name'},
+                                from.name
+                            );
+
+                            const formattedDate = new Date(timestamp);
+                            const formattedTimeString = formattedDate.toLocaleTimeString("en-us", { year: "numeric", month:"numeric", day:"numeric", hour: "2-digit", minute: "2-digit"});
+
+                            const timestampElement = React.createElement(
+                                'span',
+                                {className: 'message-timestamp'},
+                                formattedTimeString
+                            );
+
+                            return from.name && timestamp && React.createElement('span', null, nameElement, ' - ', timestampElement)
+                        }
+
+                        return next(...args);
+                    };
+
+                    const avatarMiddleware = () => (next) => (...args) => {
+                        const [card] = args;
+                        const {fromUser, activity} = card;
+                        const initials = getIconText(activity.from.name);
+
+                        const avatarElement = React.createElement(
+                            "div",
+                            {className: fromUser? "avatar avatar--user": "avatar avatar--bot"},
+                            React.createElement(
+                                "p",
+                                null,
+                                \`\${initials}\`
+                            )
+                        );
+
+                        return avatarElement;
+                    }
+
+                    const attachmentMiddleware = () => (next) => (...args) => {
+                        const [card] = args;
+                        const {activity} = card;
+
+                        if (activity) {
+                            const { activity: { attachments }, attachment } = card;
+
+                            // No attachment
+                            if (!attachments || !attachments.length || !attachment) {
+                                return next(...args);
+                            }
+
+                            let { content, contentType } = attachment || { content: "", contentType: "" };
+
+                            // Adaptive card
+                            if (contentType.startsWith("application/vnd.microsoft.card")) {
+                                const adaptiveCardElement = React.createElement(
+                                    "div",
+                                    {className: 'ms_lcw_webchat_adaptive_card'},
+                                    next(...args)
+                                );
+
+                                return adaptiveCardElement;
+                            }
+                        }
+
+                        return next(...args);
+                    }
+
+                    const createMarkdown = (disableMarkdownMessageFormatting, disableNewLineMarkdownSupport) => {
+                        let markdown;
+                        if (!disableMarkdownMessageFormatting) {
+                            markdown = new window.markdownit(
+                                "default",
+                                {
+                                    html: true,
+                                    linkify: true,
+                                    breaks: (!disableNewLineMarkdownSupport)
+                                }
+                            );
+                        } else {
+                            markdown = new window.markdownit(
+                                "zero",
+                                {
+                                    html: true,
+                                    linkify: true,
+                                    breaks: (!disableNewLineMarkdownSupport)
+                                }
+                            );
+
+                            markdown.enable([
+                                "entity",
+                                "linkify",
+                                "html_block",
+                                "html_inline",
+                                "newline"
+                            ]);
+                        }
+
+                        return markdown;
+                    };
+
+                    const markdown = createMarkdown(disableMarkdownMessageFormatting, disableNewLineMarkdownSupport);
+                    const renderMarkdown = (text) => {
+                        const render = disableNewLineMarkdownSupport? markdown.renderInline.bind(markdown): markdown.render.bind(markdown);
+                        text = render(text);
+                        return text;
+                    };
+
+                    const adapter = new TranscriptAdapter();
+                    const styleOptions = {
+                        hideSendBox: true,
+                        backgroundColor: '${this.transcriptBackgroundColor}',
+                        bubbleBackground: '${this.agentAvatarBackgroundColor}',
+                        bubbleTextColor: '${this.agentAvatarFontColor}',
+                        bubbleBorderRadius: 12,
+                        bubbleNubSize: 1,
+                        bubbleFromUserBackground: '${this.customerAvatarBackgroundColor}',
+                        bubbleFromUserTextColor: '${this.customerAvatarFontColor}',
+                        bubbleFromUserBorderRadius: 12,
+                        bubbleFromUserNubSize: 1,
+                        botAvatarInitials: 'C1',
+                        userAvatarInitials: 'C2'
+                    };
+
+                    window.WebChat.renderWebChat({
+                        directLine: adapter,
+                        styleOptions,
+                        activityMiddleware,
+                        activityStatusMiddleware,
+                        avatarMiddleware,
+                        attachmentMiddleware,
+                        renderMarkdown
+                    },
+                    document.getElementById('transcript'));
+                <\/script>
+            </body>
+        `;
+    return htmlData;
+  }
+  createHTML() {
+    const htmlData = `
+            <html>
+                ${this.createHeadElement()}
+                ${this.createBodyElement()}
+            </html>
+        `;
+    return htmlData;
+  }
+}
+const createChatTranscript = async function (transcript, chatSDK) {
+  let renderAttachments = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  let transcriptOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  // eslint-disable-line @typescript-eslint/no-explicit-any
+  const transcriptMessages = JSON.parse(transcript);
+  const convertBlobToBase64 = async blob => {
+    return new Promise(resolve => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result);
+      reader.readAsDataURL(blob);
+    });
+  };
+  let messages = transcriptMessages;
+  if (renderAttachments) {
+    messages = await Promise.all(transcriptMessages.map(async message => {
+      // eslint-disable-line @typescript-eslint/no-explicit-any
+      const {
+        amsReferences,
+        amsMetadata
+      } = message;
+      if (amsReferences && amsMetadata) {
+        const references = JSON.parse(amsReferences);
+        const metadata = JSON.parse(amsMetadata);
+        const fileMetadata = {
+          id: references[0],
+          type: metadata[0].contentType
+        };
+        const blob = await chatSDK.downloadFileAttachment(fileMetadata);
+        const base64 = await convertBlobToBase64(blob);
+        message.contentUrl = base64;
+      }
+      return message;
+    }));
+  }
+  const options = {
+    ...transcriptOptions,
+    messages
+  };
+  const htmlBuilder = new TranscriptHTMLBuilder(options);
+  const text = htmlBuilder.createHTML();
+  const fileName = `${transcriptOptions.fileName || "transcript"}.html`;
+  (0, _utils.createFileAndDownload)(fileName, text, "text/html");
+};
+var _default = createChatTranscript;
+exports.default = _default;

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/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 {};