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

package/lib/cjs/components/webchatcontainerstateful/WebChatContainerStateful.js

@@ -7,22 +7,23 @@ exports.default = exports.WebChatContainerStateful = void 0;
 var _react = require("@fluentui/react");
 var _TelemetryConstants = require("../../common/telemetry/TelemetryConstants");
 var _react2 = _interopRequireWildcard(require("react"));
-var _botframeworkWebchat = require("botframework-webchat");
+var _BotMagicCodeStore = require("./webchatcontroller/BotMagicCodeStore");
 var _broadcastChannel = require("broadcast-channel");
+var _botframeworkWebchat = require("botframework-webchat");
+var _Constants = require("../../common/Constants");
 var _LiveChatWidgetActionType = require("../../contexts/common/LiveChatWidgetActionType");
 var _TelemetryHelper = require("../../common/telemetry/TelemetryHelper");
-var _defaultMiddlewareLocalizedTexts = require("./common/defaultProps/defaultMiddlewareLocalizedTexts");
-var _defaultWebChatContainerStatefulProps = require("./common/defaultProps/defaultWebChatContainerStatefulProps");
-var _utils = require("../../common/utils");
-var _ = require("../..");
 var _WebChatActionType = require("./webchatcontroller/enums/WebChatActionType");
 var _WebChatStoreLoader = require("./webchatcontroller/WebChatStoreLoader");
-var _Constants = require("../../common/Constants");
-var _BotMagicCodeStore = require("./webchatcontroller/BotMagicCodeStore");
 var _defaultAdaptiveCardStyles = require("./common/defaultStyles/defaultAdaptiveCardStyles");
+var _defaultMiddlewareLocalizedTexts = require("./common/defaultProps/defaultMiddlewareLocalizedTexts");
 var _defaultReceivedMessageAnchorStyles = require("./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultReceivedMessageAnchorStyles");
-var _defaultUserMessageBoxStyles = require("./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultUserMessageBoxStyles");
 var _defaultSystemMessageBoxStyles = require("./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultSystemMessageBoxStyles");
+var _defaultUserMessageBoxStyles = require("./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultUserMessageBoxStyles");
+var _defaultWebChatContainerStatefulProps = require("./common/defaultProps/defaultWebChatContainerStatefulProps");
+var _utils = require("../../common/utils");
+var _ = require("../..");
+var _defaultSentMessageAnchorStyles = require("./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultSentMessageAnchorStyles");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const broadcastChannelMessageEvent = "message";
@@ -51,7 +52,7 @@ const createMagicCodeSuccessResponse = signin => {
   };
 };
 const WebChatContainerStateful = props => {
-  var _props$adaptiveCardSt, _props$renderingMiddl, _props$renderingMiddl2, _props$renderingMiddl3, _props$renderingMiddl4, _props$adaptiveCardSt2, _props$renderingMiddl5, _props$renderingMiddl6, _props$renderingMiddl7, _props$renderingMiddl8;
+  var _props$adaptiveCardSt, _props$renderingMiddl, _props$renderingMiddl2, _props$renderingMiddl3, _props$renderingMiddl4, _props$adaptiveCardSt2, _props$adaptiveCardSt3, _props$adaptiveCardSt4, _props$renderingMiddl5, _props$renderingMiddl6, _props$renderingMiddl7, _props$renderingMiddl8, _props$renderingMiddl9, _props$renderingMiddl10;
   const {
     BasicWebChat
   } = _botframeworkWebchat.Components;
@@ -132,7 +133,9 @@ const WebChatContainerStateful = props => {
             max-width: ${(props === null || props === void 0 ? void 0 : (_props$renderingMiddl3 = props.renderingMiddlewareProps) === null || _props$renderingMiddl3 === void 0 ? void 0 : (_props$renderingMiddl4 = _props$renderingMiddl3.systemMessageBoxStyles) === null || _props$renderingMiddl4 === void 0 ? void 0 : _props$renderingMiddl4.maxWidth) ?? (_defaultSystemMessageBoxStyles.defaultSystemMessageBoxStyles === null || _defaultSystemMessageBoxStyles.defaultSystemMessageBoxStyles === void 0 ? void 0 : _defaultSystemMessageBoxStyles.defaultSystemMessageBoxStyles.maxWidth)}
         }
 
-        div[class="ac-textBlock"]>p{color:${(props === null || props === void 0 ? void 0 : (_props$adaptiveCardSt2 = props.adaptiveCardStyles) === null || _props$adaptiveCardSt2 === void 0 ? void 0 : _props$adaptiveCardSt2.color) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.color};}
+        div[class="ac-textBlock"]>p{color:${(props === null || props === void 0 ? void 0 : (_props$adaptiveCardSt2 = props.adaptiveCardStyles) === null || _props$adaptiveCardSt2 === void 0 ? void 0 : _props$adaptiveCardSt2.color) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.color}; white-space:${(props === null || props === void 0 ? void 0 : (_props$adaptiveCardSt3 = props.adaptiveCardStyles) === null || _props$adaptiveCardSt3 === void 0 ? void 0 : _props$adaptiveCardSt3.textWhiteSpace) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.textWhiteSpace}}
+        
+        .webchat__stacked-layout__content .ac-actionSet > .ac-pushButton > div {white-space: ${(props === null || props === void 0 ? void 0 : (_props$adaptiveCardSt4 = props.adaptiveCardStyles) === null || _props$adaptiveCardSt4 === void 0 ? void 0 : _props$adaptiveCardSt4.buttonWhiteSpace) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.buttonWhiteSpace} !important;}
 
         .ms_lcw_webchat_received_message img.webchat__markdown__external-link-icon { 
             background-image : url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIzIDMgMTggMTgiICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik03LjI1MDEgNC41MDAxN0gxMC43NDk1QzExLjE2MzcgNC41MDAxNyAxMS40OTk1IDQuODM1OTYgMTEuNDk5NSA1LjI1MDE3QzExLjQ5OTUgNS42Mjk4NiAxMS4yMTczIDUuOTQzNjYgMTAuODUxMyA1Ljk5MzMyTDEwLjc0OTUgNi4wMDAxN0g3LjI0OTc0QzYuMDcwNzkgNS45OTk2MSA1LjEwMzQ5IDYuOTA2NTYgNS4wMDc4NiA4LjA2MTEyTDUuMDAwMjggOC4yMjAwM0w1LjAwMzEyIDE2Ljc1MDdDNS4wMDM0MyAxNy45NDE1IDUuOTI4ODUgMTguOTE2MSA3LjA5OTY2IDE4Ljk5NDlMNy4yNTM3MSAxOS4wMDAxTDE1Ljc1MTggMTguOTg4NEMxNi45NDE1IDE4Ljk4NjggMTcuOTE0NSAxOC4wNjIgMTcuOTkzNSAxNi44OTIzTDE3Ljk5ODcgMTYuNzM4NFYxMy4yMzIxQzE3Ljk5ODcgMTIuODE3OSAxOC4zMzQ1IDEyLjQ4MjEgMTguNzQ4NyAxMi40ODIxQzE5LjEyODQgMTIuNDgyMSAxOS40NDIyIDEyLjc2NDMgMTkuNDkxOCAxMy4xMzAzTDE5LjQ5ODcgMTMuMjMyMVYxNi43Mzg0QzE5LjQ5ODcgMTguNzQwNyAxNy45MjkzIDIwLjM3NjkgMTUuOTUyOCAyMC40ODI5TDE1Ljc1MzggMjAuNDg4NEw3LjI1ODI3IDIwLjUwMDFMNy4wNTQ5NSAyMC40OTQ5QzUuMTQyMzkgMjAuMzk1NCAzLjYwODk1IDE4Ljg2MjcgMy41MDgzNyAxNi45NTAyTDMuNTAzMTIgMTYuNzUxMUwzLjUwMDg5IDguMjUyN0wzLjUwNTI5IDguMDUwMkMzLjYwNTM5IDYuMTM3NDkgNS4xMzg2NyA0LjYwNDQ5IDcuMDUwOTYgNC41MDUyN0w3LjI1MDEgNC41MDAxN0gxMC43NDk1SDcuMjUwMVpNMTMuNzQ4MSAzLjAwMTQ2TDIwLjMwMTggMy4wMDE5N0wyMC40MDE0IDMuMDE1NzVMMjAuNTAyMiAzLjA0MzkzTDIwLjU1OSAzLjA2ODAzQzIwLjYxMjIgMy4wOTEyMiAyMC42NjM0IDMuMTIxNjMgMjAuNzExMSAzLjE1ODg1TDIwLjc4MDQgMy4yMjE1NkwyMC44NjQxIDMuMzIwMTRMMjAuOTE4MyAzLjQxMDI1TDIwLjk1NyAzLjUwMDU3TDIwLjk3NjIgMy41NjQ3NkwyMC45ODk4IDMuNjI4NjJMMjAuOTk5MiAzLjcyMjgyTDIwLjk5OTcgMTAuMjU1NEMyMC45OTk3IDEwLjY2OTYgMjAuNjYzOSAxMS4wMDU0IDIwLjI0OTcgMTEuMDA1NEMxOS44NyAxMS4wMDU0IDE5LjU1NjIgMTAuNzIzMiAxOS41MDY1IDEwLjM1NzFMMTkuNDk5NyAxMC4yNTU0TDE5LjQ5ODkgNS41NjE0N0wxMi4yNzk3IDEyLjc4NDdDMTIuMDEzNCAxMy4wNTEgMTEuNTk2OCAxMy4wNzUzIDExLjMwMzEgMTIuODU3NUwxMS4yMTkgMTIuNzg0OUMxMC45NTI3IDEyLjUxODcgMTAuOTI4NCAxMi4xMDIxIDExLjE0NjIgMTEuODA4NEwxMS4yMTg4IDExLjcyNDNMMTguNDM2OSA0LjUwMTQ2SDEzLjc0ODFDMTMuMzY4NCA0LjUwMTQ2IDEzLjA1NDYgNC4yMTkzMSAxMy4wMDUgMy44NTMyNEwxMi45OTgxIDMuNzUxNDZDMTIuOTk4MSAzLjM3MTc3IDEzLjI4MDMgMy4wNTc5NyAxMy42NDY0IDMuMDA4MzFMMTMuNzQ4MSAzLjAwMTQ2WiIgZmlsbD0iI0ZGRkZGRiIgLz48L3N2Zz4) !important;
@@ -152,7 +155,14 @@ const WebChatContainerStateful = props => {
         .ms_lcw_webchat_received_message a:hover,
         .ms_lcw_webchat_received_message a:active {
             color: ${(props === null || props === void 0 ? void 0 : (_props$renderingMiddl7 = props.renderingMiddlewareProps) === null || _props$renderingMiddl7 === void 0 ? void 0 : (_props$renderingMiddl8 = _props$renderingMiddl7.receivedMessageAnchorStyles) === null || _props$renderingMiddl8 === void 0 ? void 0 : _props$renderingMiddl8.color) ?? (_defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === null || _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === void 0 ? void 0 : _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles.color)};
-        } `), /*#__PURE__*/_react2.default.createElement(_react.Stack, {
+        } 
+        .ms_lcw_webchat_sent_message a:link,
+        .ms_lcw_webchat_sent_message a:visited,
+        .ms_lcw_webchat_sent_message a:hover,
+        .ms_lcw_webchat_sent_message a:active {
+            color: ${(props === null || props === void 0 ? void 0 : (_props$renderingMiddl9 = props.renderingMiddlewareProps) === null || _props$renderingMiddl9 === void 0 ? void 0 : (_props$renderingMiddl10 = _props$renderingMiddl9.sentMessageAnchorStyles) === null || _props$renderingMiddl10 === void 0 ? void 0 : _props$renderingMiddl10.color) ?? (_defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === null || _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === void 0 ? void 0 : _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles.color)};
+        }
+        `), /*#__PURE__*/_react2.default.createElement(_react.Stack, {
     styles: containerStyles
   }, /*#__PURE__*/_react2.default.createElement(BasicWebChat, null)));
 };

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

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultAdaptiveCardStyles = void 0;
 const defaultAdaptiveCardStyles = {
   background: "white",
-  color: "black"
+  color: "black",
+  textWhiteSpace: "normal",
+  buttonWhiteSpace: "normal"
 };
 exports.defaultAdaptiveCardStyles = defaultAdaptiveCardStyles;

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultSentMessageAnchorStyles = void 0;
+const defaultSentMessageAnchorStyles = {
+  color: "blue"
+};
+exports.defaultSentMessageAnchorStyles = defaultSentMessageAnchorStyles;

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/Constants.js

@@ -143,6 +143,7 @@ _defineProperty(HtmlAttributeNames, "listItem", "LI");
 _defineProperty(HtmlAttributeNames, "unorderedList", "UL");
 _defineProperty(HtmlAttributeNames, "div", "div");
 _defineProperty(HtmlAttributeNames, "aTagName", "a");
+_defineProperty(HtmlAttributeNames, "pTagName", "p");
 _defineProperty(HtmlAttributeNames, "noopenerTag", "noopener");
 _defineProperty(HtmlAttributeNames, "noreferrerTag", "noreferrer");
 _defineProperty(HtmlAttributeNames, "adaptiveCardClassName", "ac-adaptiveCard");