@microsoft/omnichannel-chat-widget 1.0.5-main.d908c85 → 1.0.6-main.0c19ff3

package/lib/esm/components/webchatcontainerstateful/common/defaultStyles/defaultAdaptiveCardStyles.js

@@ -1,4 +1,6 @@
 export const defaultAdaptiveCardStyles = {
   background: "white",
-  color: "black"
+  color: "black",
+  textWhiteSpace: "normal",
+  buttonWhiteSpace: "normal"
 };

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultSentMessageAnchorStyles.js

@@ -0,0 +1,3 @@
+export const defaultSentMessageAnchorStyles = {
+  color: "blue"
+};

package/lib/esm/plugins/createChatTranscript.js

@@ -0,0 +1,543 @@
+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); }
+/* eslint-disable no-useless-escape */
+
+import { createFileAndDownload } from "../common/utils";
+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`;
+  createFileAndDownload(fileName, text, "text/html");
+};
+export default createChatTranscript;

package/lib/types/common/Constants.d.ts

@@ -127,6 +127,7 @@ export declare class HtmlAttributeNames {
     static readonly unorderedList = "UL";
     static readonly div = "div";
     static readonly aTagName = "a";
+    static readonly pTagName = "p";
     static readonly noopenerTag = "noopener";
     static readonly noreferrerTag = "noreferrer";
     static readonly adaptiveCardClassName = "ac-adaptiveCard";

package/lib/types/common/telemetry/TelemetryHelper.d.ts

@@ -1,11 +1,11 @@
-import { LogLevel, TelemetryEvent, TelemetryInput } from "./TelemetryConstants";
 import { BaseContract, TelemetryContract } from "./definitions/Contracts";
 import { TelemetryData } from "./definitions/Payload";
+import { LogLevel, TelemetryEvent, TelemetryInput } from "./TelemetryConstants";
 import ChatConfig from "@microsoft/omnichannel-chat-sdk/lib/core/ChatConfig";
-import LiveChatContext from "@microsoft/omnichannel-chat-sdk/lib/core/LiveChatContext";
-import LiveWorkItemDetails from "@microsoft/omnichannel-chat-sdk/lib/core/LiveWorkItemDetails";
 import { IInternalTelemetryData } from "./interfaces/IInternalTelemetryData";
 import { ITelemetryConfig } from "./interfaces/ITelemetryConfig";
+import LiveChatContext from "@microsoft/omnichannel-chat-sdk/lib/core/LiveChatContext";
+import LiveWorkItemDetails from "@microsoft/omnichannel-chat-sdk/lib/core/LiveWorkItemDetails";
 export interface TelemetryEventWrapper {
     Event: TelemetryEvent;
     Description?: string;

package/lib/types/common/telemetry/definitions/Contracts.d.ts

@@ -5,6 +5,7 @@ export interface BaseContract {
     ConversationId: string;
     ElapsedTimeInMilliseconds?: number;
     OrganizationId: string;
+    OrganizationUrl: string;
     LCWRuntimeId: string;
     CurrentRequestId: string;
     ExceptionDetails?: any;

package/lib/types/common/telemetry/definitions/Payload.d.ts

@@ -22,6 +22,7 @@ export interface LoadTelemetryData extends BaseTelemetryData {
     OCChatSDKVersion?: string;
     OCChatWidgetVersion?: string;
     OCChatComponentsVersion?: string;
+    Description?: string;
 }
 export interface MessageProcessingErrorData extends BaseTelemetryData {
     Event: string;

package/lib/types/common/utils.d.ts

@@ -32,3 +32,4 @@ export declare const getWidgetCacheIdfromProps: (props: any, popoutChat?: boolea
 export declare const debounceLeading: (fn: any, ms?: number) => (...args: any[]) => void;
 export declare const getConversationDetailsCall: (chatSDK: any) => Promise<any>;
 export declare const checkContactIdError: (e: any) => void;
+export declare const createFileAndDownload: (fileName: string, blobData: string, mimeType: string) => void;

package/lib/types/components/footerstateful/downloadtranscriptstateful/DownloadTranscriptStateful.d.ts

@@ -1,2 +1,3 @@
 import { ILiveChatWidgetContext } from "../../../contexts/common/ILiveChatWidgetContext";
-export declare const downloadTranscript: (chatSDK: any, renderMarkDown?: ((transcriptContent: string) => string) | undefined, bannerMessageOnError?: string | undefined, attachmentMessage?: string | undefined, state?: ILiveChatWidgetContext | undefined) => Promise<void>;
+import { IDownloadTranscriptProps } from "./interfaces/IDownloadTranscriptProps";
+export declare const downloadTranscript: (chatSDK: any, downloadTranscriptProps: IDownloadTranscriptProps, state?: ILiveChatWidgetContext | undefined) => Promise<void>;

package/lib/types/components/footerstateful/downloadtranscriptstateful/interfaces/IDownloadTranscriptProps.d.ts

@@ -1,3 +1,4 @@
+import { IWebChatTranscriptConfig } from "./IWebChatTranscriptConfig";
 export interface IDownloadTranscriptProps {
     /**
     * Attachment message prefix for download chat transcript
@@ -11,4 +12,8 @@ export interface IDownloadTranscriptProps {
     * Callback function for markdown render for chat transcript
     */
     renderMarkDown?: (transcriptContent: string) => string;
+    /**
+     * WebChat Transcript config
+     */
+    webChatTranscript?: IWebChatTranscriptConfig;
 }

package/lib/types/components/footerstateful/downloadtranscriptstateful/interfaces/IWebChatTranscriptConfig.d.ts

@@ -0,0 +1,13 @@
+export interface IWebChatTranscriptConfig {
+    disabled?: boolean;
+    fileName?: string;
+    pageTitle?: string;
+    attachmentMessage?: string;
+    networkOnlineMessage?: string;
+    networkOfflineMessage?: string;
+    transcriptBackgroundColor?: string;
+    agentAvatarBackgroundColor?: string;
+    agentAvatarFontColor?: string;
+    customerAvatarBackgroundColor?: string;
+    customerAvatarFontColor?: string;
+}

package/lib/types/components/livechatwidget/common/createDownloadTranscriptProps.d.ts

@@ -0,0 +1,24 @@
+import { StyleOptions } from "botframework-webchat-api";
+import { IDownloadTranscriptProps } from "../../footerstateful/downloadtranscriptstateful/interfaces/IDownloadTranscriptProps";
+import { IWebChatContainerStatefulProps } from "../../webchatcontainerstateful/interfaces/IWebChatContainerStatefulProps";
+declare const createDownloadTranscriptProps: (downloadTranscriptProps: IDownloadTranscriptProps, webChatStyles: StyleOptions, webChatContainerProps?: IWebChatContainerStatefulProps | undefined) => {
+    webChatTranscript: {
+        disableNewLineMarkdownSupport: boolean | undefined;
+        disableMarkdownMessageFormatting: boolean | undefined;
+        transcriptBackgroundColor: string | undefined;
+        agentAvatarBackgroundColor: string | undefined;
+        agentAvatarFontColor: string | undefined;
+        customerAvatarBackgroundColor: string | undefined;
+        customerAvatarFontColor: string | undefined;
+        disabled?: boolean | undefined;
+        fileName?: string | undefined;
+        pageTitle?: string | undefined;
+        attachmentMessage?: string | undefined;
+        networkOnlineMessage?: string | undefined;
+        networkOfflineMessage?: string | undefined;
+    };
+    attachmentMessage?: string | undefined;
+    bannerMessageOnError?: string | undefined;
+    renderMarkDown?: ((transcriptContent: string) => string) | undefined;
+};
+export default createDownloadTranscriptProps;