@microsoft/omnichannel-chat-widget 1.0.5 → 1.0.6-main.886ccec
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/common/Constants.js +1 -0
- package/lib/cjs/common/telemetry/TelemetryHelper.js +16 -15
- package/lib/cjs/common/utils.js +17 -2
- package/lib/cjs/components/footerstateful/FooterStateful.js +2 -2
- package/lib/cjs/components/footerstateful/downloadtranscriptstateful/DownloadTranscriptStateful.js +21 -12
- package/lib/cjs/components/footerstateful/downloadtranscriptstateful/interfaces/IWebChatTranscriptConfig.js +1 -0
- package/lib/cjs/components/livechatwidget/common/createDownloadTranscriptProps.js +27 -0
- package/lib/cjs/components/livechatwidget/common/defaultProps/dummyDefaultProps.js +9 -1
- package/lib/cjs/components/livechatwidget/livechatwidgetstateful/LiveChatWidgetStateful.js +13 -9
- package/lib/cjs/components/prechatsurveypanestateful/PreChatSurveyPaneStateful.js +6 -0
- package/lib/cjs/components/webchatcontainerstateful/WebChatContainerStateful.js +21 -11
- package/lib/cjs/components/webchatcontainerstateful/common/defaultStyles/defaultAdaptiveCardStyles.js +3 -1
- package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultSentMessageAnchorStyles.js +10 -0
- package/lib/cjs/plugins/createChatTranscript.js +548 -0
- package/lib/esm/common/Constants.js +1 -0
- package/lib/esm/common/telemetry/TelemetryHelper.js +16 -15
- package/lib/esm/common/utils.js +15 -1
- package/lib/esm/components/footerstateful/FooterStateful.js +2 -2
- package/lib/esm/components/footerstateful/downloadtranscriptstateful/DownloadTranscriptStateful.js +22 -13
- package/lib/esm/components/footerstateful/downloadtranscriptstateful/interfaces/IWebChatTranscriptConfig.js +1 -0
- package/lib/esm/components/livechatwidget/common/createDownloadTranscriptProps.js +20 -0
- package/lib/esm/components/livechatwidget/common/defaultProps/dummyDefaultProps.js +9 -1
- package/lib/esm/components/livechatwidget/livechatwidgetstateful/LiveChatWidgetStateful.js +13 -9
- package/lib/esm/components/prechatsurveypanestateful/PreChatSurveyPaneStateful.js +6 -0
- package/lib/esm/components/webchatcontainerstateful/WebChatContainerStateful.js +21 -11
- package/lib/esm/components/webchatcontainerstateful/common/defaultStyles/defaultAdaptiveCardStyles.js +3 -1
- package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultSentMessageAnchorStyles.js +3 -0
- package/lib/esm/plugins/createChatTranscript.js +543 -0
- package/lib/types/common/Constants.d.ts +1 -0
- package/lib/types/common/telemetry/definitions/Contracts.d.ts +1 -0
- package/lib/types/common/utils.d.ts +1 -0
- package/lib/types/components/footerstateful/downloadtranscriptstateful/DownloadTranscriptStateful.d.ts +2 -1
- package/lib/types/components/footerstateful/downloadtranscriptstateful/interfaces/IDownloadTranscriptProps.d.ts +5 -0
- package/lib/types/components/footerstateful/downloadtranscriptstateful/interfaces/IWebChatTranscriptConfig.d.ts +13 -0
- package/lib/types/components/livechatwidget/common/createDownloadTranscriptProps.d.ts +24 -0
- package/lib/types/components/webchatcontainerstateful/interfaces/IAdaptiveCardStyles.d.ts +2 -0
- package/lib/types/components/webchatcontainerstateful/interfaces/IRenderingMiddlewareProps.d.ts +1 -0
- package/lib/types/components/webchatcontainerstateful/interfaces/IWebChatProps.d.ts +1 -0
- package/lib/types/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultSentMessageAnchorStyles.d.ts +2 -0
- package/lib/types/plugins/createChatTranscript.d.ts +2 -0
- package/package.json +1 -1
|
@@ -0,0 +1,548 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _utils = require("../common/utils");
|
|
8
|
+
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; }
|
|
9
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
10
|
+
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); }
|
|
11
|
+
class TranscriptHTMLBuilder {
|
|
12
|
+
// eslint-disable-line @typescript-eslint/no-explicit-any
|
|
13
|
+
|
|
14
|
+
constructor(options) {
|
|
15
|
+
var _this$options, _this$options2, _this$options3, _this$options4, _this$options5, _this$options6, _this$options7, _this$options8, _this$options9, _this$options10, _this$options11;
|
|
16
|
+
_defineProperty(this, "options", void 0);
|
|
17
|
+
_defineProperty(this, "pageTitle", "Customer Transcript");
|
|
18
|
+
_defineProperty(this, "attachmentMessage", "The following attachment was uploaded during the conversation: ");
|
|
19
|
+
_defineProperty(this, "networkOnlineMessage", "Connection restored. Please refresh the page");
|
|
20
|
+
_defineProperty(this, "networkOfflineMessage", "Network Error. Please make sure you are connected to the internet.");
|
|
21
|
+
_defineProperty(this, "transcriptBackgroundColor", "#FFF");
|
|
22
|
+
_defineProperty(this, "agentAvatarBackgroundColor", "#E8E8E8");
|
|
23
|
+
_defineProperty(this, "agentAvatarFontColor", "#000");
|
|
24
|
+
_defineProperty(this, "customerAvatarBackgroundColor", "#2266E3");
|
|
25
|
+
_defineProperty(this, "customerAvatarFontColor", "#FFF");
|
|
26
|
+
_defineProperty(this, "disableMarkdownMessageFormatting", false);
|
|
27
|
+
_defineProperty(this, "disableNewLineMarkdownSupport", false);
|
|
28
|
+
// eslint-disable-line @typescript-eslint/no-explicit-any
|
|
29
|
+
this.options = options;
|
|
30
|
+
if (!this.options || !this.options.messages) {
|
|
31
|
+
this.options.messages = [];
|
|
32
|
+
}
|
|
33
|
+
if ((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.pageTitle) {
|
|
34
|
+
this.pageTitle = this.options.pageTitle;
|
|
35
|
+
}
|
|
36
|
+
if ((_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.attachmentMessage) {
|
|
37
|
+
this.attachmentMessage = this.options.attachmentMessage;
|
|
38
|
+
}
|
|
39
|
+
if ((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.networkOnlineMessage) {
|
|
40
|
+
this.networkOnlineMessage = this.options.networkOnlineMessage;
|
|
41
|
+
}
|
|
42
|
+
if ((_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.networkOfflineMessage) {
|
|
43
|
+
this.networkOfflineMessage = this.options.networkOfflineMessage;
|
|
44
|
+
}
|
|
45
|
+
if ((_this$options5 = this.options) !== null && _this$options5 !== void 0 && _this$options5.transcriptBackgroundColor) {
|
|
46
|
+
this.transcriptBackgroundColor = this.options.transcriptBackgroundColor;
|
|
47
|
+
}
|
|
48
|
+
if ((_this$options6 = this.options) !== null && _this$options6 !== void 0 && _this$options6.agentAvatarBackgroundColor) {
|
|
49
|
+
this.agentAvatarBackgroundColor = this.options.agentAvatarBackgroundColor;
|
|
50
|
+
}
|
|
51
|
+
if ((_this$options7 = this.options) !== null && _this$options7 !== void 0 && _this$options7.agentAvatarFontColor) {
|
|
52
|
+
this.agentAvatarFontColor = this.options.agentAvatarFontColor;
|
|
53
|
+
}
|
|
54
|
+
if ((_this$options8 = this.options) !== null && _this$options8 !== void 0 && _this$options8.customerAvatarBackgroundColor) {
|
|
55
|
+
this.customerAvatarBackgroundColor = this.options.customerAvatarBackgroundColor;
|
|
56
|
+
}
|
|
57
|
+
if ((_this$options9 = this.options) !== null && _this$options9 !== void 0 && _this$options9.customerAvatarFontColor) {
|
|
58
|
+
this.customerAvatarFontColor = this.options.customerAvatarFontColor;
|
|
59
|
+
}
|
|
60
|
+
if ((_this$options10 = this.options) !== null && _this$options10 !== void 0 && _this$options10.disableMarkdownMessageFormatting) {
|
|
61
|
+
this.disableMarkdownMessageFormatting = this.options.disableMarkdownMessageFormatting;
|
|
62
|
+
}
|
|
63
|
+
if ((_this$options11 = this.options) !== null && _this$options11 !== void 0 && _this$options11.disableNewLineMarkdownSupport) {
|
|
64
|
+
this.disableNewLineMarkdownSupport = this.options.disableNewLineMarkdownSupport;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
createTitleElement() {
|
|
68
|
+
const htmlData = `<title> ${this.pageTitle} </title>`;
|
|
69
|
+
return htmlData;
|
|
70
|
+
}
|
|
71
|
+
createExternalScriptElements() {
|
|
72
|
+
const htmlData = `
|
|
73
|
+
<script src="https://cdn.botframework.com/botframework-webchat/4.15.7/webchat.js"><\/script>
|
|
74
|
+
<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>
|
|
75
|
+
<script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"><\/script>
|
|
76
|
+
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"><\/script>
|
|
77
|
+
<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>
|
|
78
|
+
`;
|
|
79
|
+
return htmlData;
|
|
80
|
+
}
|
|
81
|
+
createHeadElement() {
|
|
82
|
+
const htmlData = `
|
|
83
|
+
<head>
|
|
84
|
+
${this.createTitleElement()}
|
|
85
|
+
${this.createExternalScriptElements()}
|
|
86
|
+
<script>
|
|
87
|
+
function shareObservable(observable) {
|
|
88
|
+
let observers = [];
|
|
89
|
+
let subscription;
|
|
90
|
+
|
|
91
|
+
return new Observable(observer => {
|
|
92
|
+
if (!subscription) {
|
|
93
|
+
subscription = observable.subscribe({
|
|
94
|
+
complete() {
|
|
95
|
+
observers.forEach(observer => observer.complete());
|
|
96
|
+
},
|
|
97
|
+
error(err) {
|
|
98
|
+
observers.forEach(observer => observer.error(err));
|
|
99
|
+
},
|
|
100
|
+
next(value) {
|
|
101
|
+
observers.forEach(observer => observer.next(value));
|
|
102
|
+
}
|
|
103
|
+
});
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
observers.push(observer);
|
|
107
|
+
|
|
108
|
+
return () => {
|
|
109
|
+
observers = observers.filter(o => o !== observer);
|
|
110
|
+
|
|
111
|
+
if (!observers.length) {
|
|
112
|
+
subscription.unsubscribe();
|
|
113
|
+
subscription = null;
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
<\/script>
|
|
119
|
+
<script>
|
|
120
|
+
const messages = ${JSON.stringify(this.options.messages)};
|
|
121
|
+
const disableMarkdownMessageFormatting = ${this.disableMarkdownMessageFormatting};
|
|
122
|
+
const disableNewLineMarkdownSupport = ${this.disableNewLineMarkdownSupport};
|
|
123
|
+
<\/script>
|
|
124
|
+
<script>
|
|
125
|
+
class Translator {
|
|
126
|
+
static convertTranscriptMessageToActivity(message) {
|
|
127
|
+
const {created, isControlMessage, content, tags, from, attachments, amsMetadata, amsReferences} = message;
|
|
128
|
+
const activity = {
|
|
129
|
+
from: {
|
|
130
|
+
role: 'bot'
|
|
131
|
+
},
|
|
132
|
+
type: 'message'
|
|
133
|
+
};
|
|
134
|
+
|
|
135
|
+
// Ignore control messages
|
|
136
|
+
if (isControlMessage) {
|
|
137
|
+
return false;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
if (tags) {
|
|
141
|
+
const formattedTags = tags.split(',');
|
|
142
|
+
|
|
143
|
+
// Ignore system message
|
|
144
|
+
if (formattedTags.includes('system')) {
|
|
145
|
+
return false;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
// Ignore hidden message
|
|
149
|
+
if (formattedTags.includes('Hidden')) {
|
|
150
|
+
return false;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
// Add C1 user display name
|
|
155
|
+
if (from && from.user && from.user.displayName) {
|
|
156
|
+
activity.from.name = from.user.displayName;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
// Add C2 user display name
|
|
160
|
+
if (from && from.application && from.application.displayName && from.application.displayName === 'Customer') {
|
|
161
|
+
activity.from = {
|
|
162
|
+
role: 'user',
|
|
163
|
+
name: from.application.displayName
|
|
164
|
+
};
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
// Attachments
|
|
168
|
+
if (amsReferences && amsMetadata) {
|
|
169
|
+
const metadata = JSON.parse(amsMetadata);
|
|
170
|
+
const { fileName } = metadata[0];
|
|
171
|
+
const text = \`${this.attachmentMessage}\${fileName}\`;
|
|
172
|
+
|
|
173
|
+
if (message.attachments && message.attachments.length > 0 && message.contentUrl) {
|
|
174
|
+
activity.attachments = message.attachments;
|
|
175
|
+
activity.attachments[0].contentUrl = message.contentUrl;
|
|
176
|
+
activity.attachments[0].thumbnailUrl = message.contentUrl;
|
|
177
|
+
};
|
|
178
|
+
|
|
179
|
+
return {
|
|
180
|
+
...activity,
|
|
181
|
+
text,
|
|
182
|
+
timestamp: created
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
// Message
|
|
187
|
+
if (content) {
|
|
188
|
+
// Adaptive card formatting
|
|
189
|
+
if (content.includes('"text"') && content.includes('"attachments"') && content.includes('"suggestedActions"')) {
|
|
190
|
+
try {
|
|
191
|
+
const partialActivity = JSON.parse(content);
|
|
192
|
+
return {
|
|
193
|
+
...activity,
|
|
194
|
+
...partialActivity,
|
|
195
|
+
timestamp: created
|
|
196
|
+
};
|
|
197
|
+
} catch {
|
|
198
|
+
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
return {
|
|
204
|
+
...activity,
|
|
205
|
+
text: content,
|
|
206
|
+
timestamp: created
|
|
207
|
+
};
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
<\/script>
|
|
211
|
+
<script>
|
|
212
|
+
class TranscriptAdapter {
|
|
213
|
+
constructor() {
|
|
214
|
+
this.connectionStatus$ = new window.rxjs.BehaviorSubject(0); // Uninitialized
|
|
215
|
+
this.activity$ = shareObservable(new Observable((observer) => {
|
|
216
|
+
this.activityObserver = observer;
|
|
217
|
+
|
|
218
|
+
this.connectionStatus$.next(1); // Connecting
|
|
219
|
+
this.connectionStatus$.next(2); // Online
|
|
220
|
+
|
|
221
|
+
// Retrieve messages
|
|
222
|
+
if (messages) {
|
|
223
|
+
setTimeout(() => { // setTimeout is needed due to some WebChat issues
|
|
224
|
+
messages.map((message) => {
|
|
225
|
+
this.activityObserver.next({
|
|
226
|
+
...Translator.convertTranscriptMessageToActivity(message),
|
|
227
|
+
type: 'message'
|
|
228
|
+
});
|
|
229
|
+
});
|
|
230
|
+
}, 1);
|
|
231
|
+
}
|
|
232
|
+
}));
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
<\/script>
|
|
236
|
+
<style>
|
|
237
|
+
body {
|
|
238
|
+
margin: 0;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.message-name {
|
|
242
|
+
font-family: Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,sans-serif;
|
|
243
|
+
font-weight: 700;
|
|
244
|
+
font-size: 10px;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.message-timestamp {
|
|
248
|
+
font-family: Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,sans-serif;
|
|
249
|
+
font-weight: 500;
|
|
250
|
+
font-size: 10px;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.avatar {
|
|
254
|
+
width: 40px;
|
|
255
|
+
height: 40px;
|
|
256
|
+
border-radius: 50%;
|
|
257
|
+
text-align: center;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.avatar--bot {
|
|
261
|
+
background-color: ${this.agentAvatarBackgroundColor};
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.avatar--user {
|
|
265
|
+
background-color: ${this.customerAvatarBackgroundColor};
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.avatar > p {
|
|
269
|
+
font-weight: 600;
|
|
270
|
+
text-align: center;
|
|
271
|
+
line-height: 0.5;
|
|
272
|
+
font-family: "Segoe UI", Arial, sans-serif;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.avatar--bot > p {
|
|
276
|
+
color: ${this.agentAvatarFontColor};
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.avatar--user > p {
|
|
280
|
+
color: ${this.customerAvatarFontColor};
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.webchat__bubble__content>div.ms_lcw_webchat_adaptive_card {
|
|
284
|
+
background-color: #FFF;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
div[class="ac-textBlock"] {
|
|
288
|
+
color: #000 !important;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.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 {
|
|
292
|
+
color: #FFF;
|
|
293
|
+
}
|
|
294
|
+
<\/style>
|
|
295
|
+
</head>
|
|
296
|
+
`;
|
|
297
|
+
return htmlData;
|
|
298
|
+
}
|
|
299
|
+
createBodyElement() {
|
|
300
|
+
const htmlData = `
|
|
301
|
+
<body>
|
|
302
|
+
<script>
|
|
303
|
+
if (!navigator.onLine) {
|
|
304
|
+
const offlineText = \`${this.networkOfflineMessage}\`;
|
|
305
|
+
document.body.innerHTML = offlineText;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
window.addEventListener("online", () => {
|
|
309
|
+
document.body.innerHTML = \`${this.networkOnlineMessage} <button onclick="window.location.reload()"> Refresh </button>\`;
|
|
310
|
+
});
|
|
311
|
+
<\/script>
|
|
312
|
+
<div id="transcript"></div>
|
|
313
|
+
<script>
|
|
314
|
+
const getIconText = (text) => {
|
|
315
|
+
if (text) {
|
|
316
|
+
const initials = text.split(/\\s/).reduce((response, word) => response += word.slice(0, 1), '');
|
|
317
|
+
if (initials.length > 1) {
|
|
318
|
+
return initials.substring(0, 2).toUpperCase();
|
|
319
|
+
} else {
|
|
320
|
+
return text.substring(0, 2).toUpperCase();
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
return "";
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
const activityMiddleware = () => (next) => (...args) => {
|
|
328
|
+
const [card] = args;
|
|
329
|
+
|
|
330
|
+
if (card.activity) {
|
|
331
|
+
if (card.activity.from && card.activity.from.role === "channel") {
|
|
332
|
+
return () => false;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
// Incoming text message
|
|
336
|
+
if (card.activity.text && card.activity.from && card.activity.from.role !== "user") {
|
|
337
|
+
return (...renderArgs) => (React.createElement(
|
|
338
|
+
'div',
|
|
339
|
+
{className: 'ms_lcw_webchat_received_message'},
|
|
340
|
+
next(...args)(...renderArgs)
|
|
341
|
+
))
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
return next(...args);
|
|
346
|
+
};
|
|
347
|
+
|
|
348
|
+
const activityStatusMiddleware = () => (next) => (...args) => {
|
|
349
|
+
const [card] = args;
|
|
350
|
+
const {activity} = card;
|
|
351
|
+
|
|
352
|
+
if (activity) {
|
|
353
|
+
const {from, timestamp} = activity;
|
|
354
|
+
|
|
355
|
+
const nameElement = React.createElement(
|
|
356
|
+
'span',
|
|
357
|
+
{className: 'message-name'},
|
|
358
|
+
from.name
|
|
359
|
+
);
|
|
360
|
+
|
|
361
|
+
const formattedDate = new Date(timestamp);
|
|
362
|
+
const formattedTimeString = formattedDate.toLocaleTimeString("en-us", { year: "numeric", month:"numeric", day:"numeric", hour: "2-digit", minute: "2-digit"});
|
|
363
|
+
|
|
364
|
+
const timestampElement = React.createElement(
|
|
365
|
+
'span',
|
|
366
|
+
{className: 'message-timestamp'},
|
|
367
|
+
formattedTimeString
|
|
368
|
+
);
|
|
369
|
+
|
|
370
|
+
return from.name && timestamp && React.createElement('span', null, nameElement, ' - ', timestampElement)
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
return next(...args);
|
|
374
|
+
};
|
|
375
|
+
|
|
376
|
+
const avatarMiddleware = () => (next) => (...args) => {
|
|
377
|
+
const [card] = args;
|
|
378
|
+
const {fromUser, activity} = card;
|
|
379
|
+
const initials = getIconText(activity.from.name);
|
|
380
|
+
|
|
381
|
+
const avatarElement = React.createElement(
|
|
382
|
+
"div",
|
|
383
|
+
{className: fromUser? "avatar avatar--user": "avatar avatar--bot"},
|
|
384
|
+
React.createElement(
|
|
385
|
+
"p",
|
|
386
|
+
null,
|
|
387
|
+
\`\${initials}\`
|
|
388
|
+
)
|
|
389
|
+
);
|
|
390
|
+
|
|
391
|
+
return avatarElement;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
const attachmentMiddleware = () => (next) => (...args) => {
|
|
395
|
+
const [card] = args;
|
|
396
|
+
const {activity} = card;
|
|
397
|
+
|
|
398
|
+
if (activity) {
|
|
399
|
+
const { activity: { attachments }, attachment } = card;
|
|
400
|
+
|
|
401
|
+
// No attachment
|
|
402
|
+
if (!attachments || !attachments.length || !attachment) {
|
|
403
|
+
return next(...args);
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
let { content, contentType } = attachment || { content: "", contentType: "" };
|
|
407
|
+
|
|
408
|
+
// Adaptive card
|
|
409
|
+
if (contentType.startsWith("application/vnd.microsoft.card")) {
|
|
410
|
+
const adaptiveCardElement = React.createElement(
|
|
411
|
+
"div",
|
|
412
|
+
{className: 'ms_lcw_webchat_adaptive_card'},
|
|
413
|
+
next(...args)
|
|
414
|
+
);
|
|
415
|
+
|
|
416
|
+
return adaptiveCardElement;
|
|
417
|
+
}
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
return next(...args);
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
const createMarkdown = (disableMarkdownMessageFormatting, disableNewLineMarkdownSupport) => {
|
|
424
|
+
let markdown;
|
|
425
|
+
if (!disableMarkdownMessageFormatting) {
|
|
426
|
+
markdown = new window.markdownit(
|
|
427
|
+
"default",
|
|
428
|
+
{
|
|
429
|
+
html: true,
|
|
430
|
+
linkify: true,
|
|
431
|
+
breaks: (!disableNewLineMarkdownSupport)
|
|
432
|
+
}
|
|
433
|
+
);
|
|
434
|
+
} else {
|
|
435
|
+
markdown = new window.markdownit(
|
|
436
|
+
"zero",
|
|
437
|
+
{
|
|
438
|
+
html: true,
|
|
439
|
+
linkify: true,
|
|
440
|
+
breaks: (!disableNewLineMarkdownSupport)
|
|
441
|
+
}
|
|
442
|
+
);
|
|
443
|
+
|
|
444
|
+
markdown.enable([
|
|
445
|
+
"entity",
|
|
446
|
+
"linkify",
|
|
447
|
+
"html_block",
|
|
448
|
+
"html_inline",
|
|
449
|
+
"newline"
|
|
450
|
+
]);
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
return markdown;
|
|
454
|
+
};
|
|
455
|
+
|
|
456
|
+
const markdown = createMarkdown(disableMarkdownMessageFormatting, disableNewLineMarkdownSupport);
|
|
457
|
+
const renderMarkdown = (text) => {
|
|
458
|
+
const render = disableNewLineMarkdownSupport? markdown.renderInline.bind(markdown): markdown.render.bind(markdown);
|
|
459
|
+
text = render(text);
|
|
460
|
+
return text;
|
|
461
|
+
};
|
|
462
|
+
|
|
463
|
+
const adapter = new TranscriptAdapter();
|
|
464
|
+
const styleOptions = {
|
|
465
|
+
hideSendBox: true,
|
|
466
|
+
backgroundColor: '${this.transcriptBackgroundColor}',
|
|
467
|
+
bubbleBackground: '${this.agentAvatarBackgroundColor}',
|
|
468
|
+
bubbleTextColor: '${this.agentAvatarFontColor}',
|
|
469
|
+
bubbleBorderRadius: 12,
|
|
470
|
+
bubbleNubSize: 1,
|
|
471
|
+
bubbleFromUserBackground: '${this.customerAvatarBackgroundColor}',
|
|
472
|
+
bubbleFromUserTextColor: '${this.customerAvatarFontColor}',
|
|
473
|
+
bubbleFromUserBorderRadius: 12,
|
|
474
|
+
bubbleFromUserNubSize: 1,
|
|
475
|
+
botAvatarInitials: 'C1',
|
|
476
|
+
userAvatarInitials: 'C2'
|
|
477
|
+
};
|
|
478
|
+
|
|
479
|
+
window.WebChat.renderWebChat({
|
|
480
|
+
directLine: adapter,
|
|
481
|
+
styleOptions,
|
|
482
|
+
activityMiddleware,
|
|
483
|
+
activityStatusMiddleware,
|
|
484
|
+
avatarMiddleware,
|
|
485
|
+
attachmentMiddleware,
|
|
486
|
+
renderMarkdown
|
|
487
|
+
},
|
|
488
|
+
document.getElementById('transcript'));
|
|
489
|
+
<\/script>
|
|
490
|
+
</body>
|
|
491
|
+
`;
|
|
492
|
+
return htmlData;
|
|
493
|
+
}
|
|
494
|
+
createHTML() {
|
|
495
|
+
const htmlData = `
|
|
496
|
+
<html>
|
|
497
|
+
${this.createHeadElement()}
|
|
498
|
+
${this.createBodyElement()}
|
|
499
|
+
</html>
|
|
500
|
+
`;
|
|
501
|
+
return htmlData;
|
|
502
|
+
}
|
|
503
|
+
}
|
|
504
|
+
const createChatTranscript = async function (transcript, chatSDK) {
|
|
505
|
+
let renderAttachments = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
506
|
+
let transcriptOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|
507
|
+
// eslint-disable-line @typescript-eslint/no-explicit-any
|
|
508
|
+
const transcriptMessages = JSON.parse(transcript);
|
|
509
|
+
const convertBlobToBase64 = async blob => {
|
|
510
|
+
return new Promise(resolve => {
|
|
511
|
+
const reader = new FileReader();
|
|
512
|
+
reader.onloadend = () => resolve(reader.result);
|
|
513
|
+
reader.readAsDataURL(blob);
|
|
514
|
+
});
|
|
515
|
+
};
|
|
516
|
+
let messages = transcriptMessages;
|
|
517
|
+
if (renderAttachments) {
|
|
518
|
+
messages = await Promise.all(transcriptMessages.map(async message => {
|
|
519
|
+
// eslint-disable-line @typescript-eslint/no-explicit-any
|
|
520
|
+
const {
|
|
521
|
+
amsReferences,
|
|
522
|
+
amsMetadata
|
|
523
|
+
} = message;
|
|
524
|
+
if (amsReferences && amsMetadata) {
|
|
525
|
+
const references = JSON.parse(amsReferences);
|
|
526
|
+
const metadata = JSON.parse(amsMetadata);
|
|
527
|
+
const fileMetadata = {
|
|
528
|
+
id: references[0],
|
|
529
|
+
type: metadata[0].contentType
|
|
530
|
+
};
|
|
531
|
+
const blob = await chatSDK.downloadFileAttachment(fileMetadata);
|
|
532
|
+
const base64 = await convertBlobToBase64(blob);
|
|
533
|
+
message.contentUrl = base64;
|
|
534
|
+
}
|
|
535
|
+
return message;
|
|
536
|
+
}));
|
|
537
|
+
}
|
|
538
|
+
const options = {
|
|
539
|
+
...transcriptOptions,
|
|
540
|
+
messages
|
|
541
|
+
};
|
|
542
|
+
const htmlBuilder = new TranscriptHTMLBuilder(options);
|
|
543
|
+
const text = htmlBuilder.createHTML();
|
|
544
|
+
const fileName = `${transcriptOptions.fileName || "transcript"}.html`;
|
|
545
|
+
(0, _utils.createFileAndDownload)(fileName, text, "text/html");
|
|
546
|
+
};
|
|
547
|
+
var _default = createChatTranscript;
|
|
548
|
+
exports.default = _default;
|
|
@@ -143,6 +143,7 @@ _defineProperty(HtmlAttributeNames, "listItem", "LI");
|
|
|
143
143
|
_defineProperty(HtmlAttributeNames, "unorderedList", "UL");
|
|
144
144
|
_defineProperty(HtmlAttributeNames, "div", "div");
|
|
145
145
|
_defineProperty(HtmlAttributeNames, "aTagName", "a");
|
|
146
|
+
_defineProperty(HtmlAttributeNames, "pTagName", "p");
|
|
146
147
|
_defineProperty(HtmlAttributeNames, "noopenerTag", "noopener");
|
|
147
148
|
_defineProperty(HtmlAttributeNames, "noreferrerTag", "noreferrer");
|
|
148
149
|
_defineProperty(HtmlAttributeNames, "adaptiveCardClassName", "ac-adaptiveCard");
|
|
@@ -30,15 +30,16 @@ export class TelemetryHelper {
|
|
|
30
30
|
static populateBasicProperties(level,
|
|
31
31
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
32
32
|
telemetryData) {
|
|
33
|
-
var _TelemetryManager$Int, _TelemetryManager$Int2, _TelemetryManager$Int3, _TelemetryManager$Int4, _TelemetryManager$Int5, _TelemetryManager$Int6, _TelemetryManager$Int7;
|
|
33
|
+
var _TelemetryManager$Int, _TelemetryManager$Int2, _TelemetryManager$Int3, _TelemetryManager$Int4, _TelemetryManager$Int5, _TelemetryManager$Int6, _TelemetryManager$Int7, _TelemetryManager$Int8;
|
|
34
34
|
return {
|
|
35
35
|
WidgetId: ((_TelemetryManager$Int = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int === void 0 ? void 0 : _TelemetryManager$Int.widgetId) ?? "",
|
|
36
36
|
ChatId: ((_TelemetryManager$Int2 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int2 === void 0 ? void 0 : _TelemetryManager$Int2.chatId) ?? "",
|
|
37
37
|
ChannelId: ((_TelemetryManager$Int3 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int3 === void 0 ? void 0 : _TelemetryManager$Int3.channelId) ?? "lcw2.0",
|
|
38
38
|
ConversationId: ((_TelemetryManager$Int4 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int4 === void 0 ? void 0 : _TelemetryManager$Int4.conversationId) ?? "",
|
|
39
39
|
OrganizationId: ((_TelemetryManager$Int5 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int5 === void 0 ? void 0 : _TelemetryManager$Int5.orgId) ?? "",
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
OrganizationUrl: ((_TelemetryManager$Int6 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int6 === void 0 ? void 0 : _TelemetryManager$Int6.orgUrl) ?? "",
|
|
41
|
+
LCWRuntimeId: ((_TelemetryManager$Int7 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int7 === void 0 ? void 0 : _TelemetryManager$Int7.lcwRuntimeId) ?? "",
|
|
42
|
+
CurrentRequestId: ((_TelemetryManager$Int8 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int8 === void 0 ? void 0 : _TelemetryManager$Int8.currentRequestId) ?? "",
|
|
42
43
|
LogLevel: level
|
|
43
44
|
};
|
|
44
45
|
}
|
|
@@ -73,22 +74,22 @@ export class TelemetryHelper {
|
|
|
73
74
|
static conformToConfigValidationContract(level, input) {
|
|
74
75
|
const payload = input.payload;
|
|
75
76
|
return TelemetryHelper.populate(level, payload, event => {
|
|
76
|
-
var _TelemetryManager$
|
|
77
|
+
var _TelemetryManager$Int9, _TelemetryManager$Int10, _TelemetryManager$Int11;
|
|
77
78
|
event.Event = payload.Event;
|
|
78
79
|
event.RequestId = payload.RequestId;
|
|
79
|
-
event.LCWVersion = (_TelemetryManager$
|
|
80
|
+
event.LCWVersion = (_TelemetryManager$Int9 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int9 === void 0 ? void 0 : _TelemetryManager$Int9.environmentVersion;
|
|
80
81
|
event.CloudType = payload.CloudType;
|
|
81
|
-
event.Domain = (_TelemetryManager$
|
|
82
|
+
event.Domain = (_TelemetryManager$Int10 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int10 === void 0 ? void 0 : _TelemetryManager$Int10.hostName;
|
|
82
83
|
event.ElapsedTimeInMilliseconds = payload.ElapsedTimeInMilliseconds;
|
|
83
84
|
event.ExceptionDetails = JSON.stringify(payload.ExceptionDetails);
|
|
84
|
-
event.Language = ((_TelemetryManager$
|
|
85
|
+
event.Language = ((_TelemetryManager$Int11 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int11 === void 0 ? void 0 : _TelemetryManager$Int11.chatWidgetLocaleLCID) || "";
|
|
85
86
|
event.Description = payload.Data;
|
|
86
87
|
});
|
|
87
88
|
}
|
|
88
89
|
static conformToLoadContract(level, input) {
|
|
89
90
|
const payload = input.payload;
|
|
90
91
|
return TelemetryHelper.populate(level, payload, event => {
|
|
91
|
-
var _TelemetryManager$
|
|
92
|
+
var _TelemetryManager$Int12, _TelemetryManager$Int13, _TelemetryManager$Int14;
|
|
92
93
|
event.Event = payload.Event;
|
|
93
94
|
event.Description = payload.Description;
|
|
94
95
|
event.ResourcePath = payload.ResourcePath;
|
|
@@ -97,17 +98,17 @@ export class TelemetryHelper {
|
|
|
97
98
|
event.ChatType = payload.ChatType;
|
|
98
99
|
event.ElapsedTimeInMilliseconds = payload.ElapsedTimeInMilliseconds;
|
|
99
100
|
event.ExceptionDetails = JSON.stringify(payload.ExceptionDetails);
|
|
100
|
-
event.OCChatSDKVersion = ((_TelemetryManager$
|
|
101
|
-
event.OCChatWidgetVersion = ((_TelemetryManager$
|
|
102
|
-
event.OCChatComponentsVersion = ((_TelemetryManager$
|
|
101
|
+
event.OCChatSDKVersion = ((_TelemetryManager$Int12 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int12 === void 0 ? void 0 : _TelemetryManager$Int12.OCChatSDKVersion) ?? "";
|
|
102
|
+
event.OCChatWidgetVersion = ((_TelemetryManager$Int13 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int13 === void 0 ? void 0 : _TelemetryManager$Int13.chatWidgetVersion) ?? "";
|
|
103
|
+
event.OCChatComponentsVersion = ((_TelemetryManager$Int14 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int14 === void 0 ? void 0 : _TelemetryManager$Int14.chatComponentVersion) ?? "";
|
|
103
104
|
});
|
|
104
105
|
}
|
|
105
106
|
static conformToIC3ClientContract(level, input) {
|
|
106
107
|
const payload = input.payload;
|
|
107
108
|
return TelemetryHelper.populate(level, payload, event => {
|
|
108
|
-
var _TelemetryManager$
|
|
109
|
+
var _TelemetryManager$Int15;
|
|
109
110
|
event.Event = payload.Event;
|
|
110
|
-
event.IC3ClientVersion = (_TelemetryManager$
|
|
111
|
+
event.IC3ClientVersion = (_TelemetryManager$Int15 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int15 === void 0 ? void 0 : _TelemetryManager$Int15.IC3ClientVersion;
|
|
111
112
|
event.SubscriptionId = payload.SubscriptionId;
|
|
112
113
|
event.EndpointUrl = payload.EndpointUrl;
|
|
113
114
|
event.EndpointId = payload.EndpointId;
|
|
@@ -213,14 +214,14 @@ _defineProperty(TelemetryHelper, "logActionEvent", (logLevel, payload) => {
|
|
|
213
214
|
BroadcastService.postMessage(telemetryEvent);
|
|
214
215
|
});
|
|
215
216
|
_defineProperty(TelemetryHelper, "logSDKEvent", (logLevel, payload) => {
|
|
216
|
-
var _TelemetryManager$
|
|
217
|
+
var _TelemetryManager$Int16;
|
|
217
218
|
const telemetryEvent = {
|
|
218
219
|
eventName: (payload === null || payload === void 0 ? void 0 : payload.Event) ?? "",
|
|
219
220
|
logLevel: logLevel,
|
|
220
221
|
payload: {
|
|
221
222
|
...payload,
|
|
222
223
|
TransactionId: newGuid(),
|
|
223
|
-
RequestId: (_TelemetryManager$
|
|
224
|
+
RequestId: (_TelemetryManager$Int16 = TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int16 === void 0 ? void 0 : _TelemetryManager$Int16.currentRequestId
|
|
224
225
|
}
|
|
225
226
|
};
|
|
226
227
|
BroadcastService.postMessage(telemetryEvent);
|