@microsoft/omnichannel-chat-widget 1.1.1-main.d9ea24e → 1.1.1-main.fb181a2

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.
Files changed (68) hide show
  1. package/README.md +9 -8
  2. package/lib/cjs/common/storage/default/defaultClientDataStoreProvider.js +20 -15
  3. package/lib/cjs/common/telemetry/TelemetryConstants.js +2 -0
  4. package/lib/cjs/common/telemetry/TelemetryHelper.js +9 -0
  5. package/lib/cjs/components/draggable/DraggableChatWidget.js +168 -0
  6. package/lib/cjs/components/draggable/DraggableEventEmitter.js +74 -0
  7. package/lib/cjs/components/draggable/DraggableEventNames.js +14 -0
  8. package/lib/cjs/components/draggable/DraggableEventReceiver.js +34 -0
  9. package/lib/cjs/components/draggable/IDraggableElementPosition.js +1 -0
  10. package/lib/cjs/components/draggable/IDraggableElementPositionDelta.js +1 -0
  11. package/lib/cjs/components/draggable/IDraggableEvent.js +1 -0
  12. package/lib/cjs/components/headerstateful/HeaderStateful.js +27 -0
  13. package/lib/cjs/components/livechatwidget/common/createMarkdown.js +3 -3
  14. package/lib/cjs/components/livechatwidget/common/registerTelemetryLoggers.js +15 -5
  15. package/lib/cjs/components/livechatwidget/interfaces/IDraggableChatWidgetProps.js +1 -0
  16. package/lib/cjs/components/livechatwidget/livechatwidgetstateful/LiveChatWidgetStateful.js +28 -8
  17. package/lib/cjs/components/webchatcontainerstateful/WebChatContainerStateful.js +34 -14
  18. package/lib/cjs/components/webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts.js +2 -1
  19. package/lib/cjs/components/webchatcontainerstateful/common/defaultProps/defaultWebChatContainerStatefulProps.js +2 -2
  20. package/lib/cjs/components/webchatcontainerstateful/common/defaultStyles/{defaultWebChatContainerStatefulStyles.js → defaultWebChatStyles.js} +3 -3
  21. package/lib/cjs/components/webchatcontainerstateful/common/mockchatsdk.js +5 -0
  22. package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios.js +1 -0
  23. package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultReceivedMessageAnchorStyles.js +2 -1
  24. package/lib/esm/common/storage/default/defaultClientDataStoreProvider.js +18 -14
  25. package/lib/esm/common/telemetry/TelemetryConstants.js +2 -0
  26. package/lib/esm/common/telemetry/TelemetryHelper.js +9 -0
  27. package/lib/esm/components/draggable/DraggableChatWidget.js +158 -0
  28. package/lib/esm/components/draggable/DraggableEventEmitter.js +64 -0
  29. package/lib/esm/components/draggable/DraggableEventNames.js +7 -0
  30. package/lib/esm/components/draggable/DraggableEventReceiver.js +25 -0
  31. package/lib/esm/components/draggable/IDraggableElementPosition.js +1 -0
  32. package/lib/esm/components/draggable/IDraggableElementPositionDelta.js +1 -0
  33. package/lib/esm/components/draggable/IDraggableEvent.js +1 -0
  34. package/lib/esm/components/headerstateful/HeaderStateful.js +27 -0
  35. package/lib/esm/components/livechatwidget/common/createMarkdown.js +3 -3
  36. package/lib/esm/components/livechatwidget/common/registerTelemetryLoggers.js +15 -5
  37. package/lib/esm/components/livechatwidget/interfaces/IDraggableChatWidgetProps.js +1 -0
  38. package/lib/esm/components/livechatwidget/livechatwidgetstateful/LiveChatWidgetStateful.js +28 -8
  39. package/lib/esm/components/webchatcontainerstateful/WebChatContainerStateful.js +34 -14
  40. package/lib/esm/components/webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts.js +2 -1
  41. package/lib/esm/components/webchatcontainerstateful/common/defaultProps/defaultWebChatContainerStatefulProps.js +2 -2
  42. package/lib/esm/components/webchatcontainerstateful/common/defaultStyles/{defaultWebChatContainerStatefulStyles.js → defaultWebChatStyles.js} +1 -1
  43. package/lib/esm/components/webchatcontainerstateful/common/mockchatsdk.js +5 -0
  44. package/lib/esm/components/webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios.js +1 -0
  45. package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultReceivedMessageAnchorStyles.js +2 -1
  46. package/lib/types/common/storage/default/defaultClientDataStoreProvider.d.ts +1 -0
  47. package/lib/types/common/telemetry/TelemetryConstants.d.ts +1 -0
  48. package/lib/types/components/draggable/DraggableChatWidget.d.ts +9 -0
  49. package/lib/types/components/draggable/DraggableEventEmitter.d.ts +27 -0
  50. package/lib/types/components/draggable/DraggableEventNames.d.ts +6 -0
  51. package/lib/types/components/draggable/DraggableEventReceiver.d.ts +27 -0
  52. package/lib/types/components/draggable/IDraggableElementPosition.d.ts +5 -0
  53. package/lib/types/components/draggable/IDraggableElementPositionDelta.d.ts +5 -0
  54. package/lib/types/components/draggable/IDraggableEvent.d.ts +12 -0
  55. package/lib/types/components/headerstateful/interfaces/IHeaderStatefulParams.d.ts +12 -0
  56. package/lib/types/components/livechatwidget/interfaces/IDraggableChatWidgetProps.d.ts +10 -0
  57. package/lib/types/components/livechatwidget/interfaces/ILiveChatWidgetProps.d.ts +2 -0
  58. package/lib/types/components/webchatcontainerstateful/WebChatContainerStateful.d.ts +2 -2
  59. package/lib/types/components/webchatcontainerstateful/common/defaultStyles/defaultWebChatStyles.d.ts +2 -0
  60. package/lib/types/components/webchatcontainerstateful/common/mockchatsdk.d.ts +5 -0
  61. package/lib/types/components/webchatcontainerstateful/interfaces/IRenderingMiddlewareProps.d.ts +2 -1
  62. package/lib/types/components/webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios.d.ts +2 -1
  63. package/lib/types/contexts/common/ILiveChatWidgetLocalizedTexts.d.ts +1 -0
  64. package/package.json +1 -1
  65. package/lib/cjs/components/livechatwidget/common/defaultProps/dummyDefaultProps.js +0 -1818
  66. package/lib/esm/components/livechatwidget/common/defaultProps/dummyDefaultProps.js +0 -1811
  67. package/lib/types/components/livechatwidget/common/defaultProps/dummyDefaultProps.d.ts +0 -2
  68. package/lib/types/components/webchatcontainerstateful/common/defaultStyles/defaultWebChatContainerStatefulStyles.d.ts +0 -2
@@ -1,1811 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any */
2
-
3
- import { ChatReconnectIconBase64, CloseChatButtonIconBase64, ModernChatIconBase64, ProactiveChatBannerBase64 } from "@microsoft/omnichannel-chat-components";
4
- import MockAdapter from "../../../webchatcontainerstateful/common/mockadapter";
5
- import { NewMessageNotificationSoundBase64 } from "../../../../assets/Audios";
6
- import { WebChatStoreLoader } from "../../../webchatcontainerstateful/webchatcontroller/WebChatStoreLoader";
7
- import { activityStatusMiddleware } from "../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityStatusMiddleware";
8
- import { createActivityMiddleware } from "../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityMiddleware";
9
- import createAttachmentMiddleware from "../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/attachmentMiddleware";
10
- import { createAvatarMiddleware } from "../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/avatarMiddleware";
11
- import { createMarkdown } from "../createMarkdown";
12
- import { createWebChatTelemetry } from "../../../webchatcontainerstateful/webchatcontroller/webchattelemetry/WebChatLogger";
13
- import { groupActivitiesMiddleware } from "../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/groupActivitiesMiddleware";
14
- import { typingIndicatorMiddleware } from "../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/typingIndicatorMiddleware";
15
-
16
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
17
- export const dummyDefaultProps = {
18
- audioNotificationProps: {
19
- audioSrc: NewMessageNotificationSoundBase64
20
- },
21
- callingContainerProps: {
22
- controlProps: {
23
- id: "oc-lcw-callingcontainer",
24
- isIncomingCall: false,
25
- dir: "ltr",
26
- incomingCallControlProps: {
27
- id: "oc-lcw-incomingcall",
28
- dir: "ltr",
29
- ariaLabel: "Incoming call area",
30
- hideAudioCall: false,
31
- hideVideoCall: false,
32
- hideDeclineCall: false,
33
- hideIncomingCallTitle: false,
34
- onDeclineCallClick: () => {},
35
- // Detailed implementation omitted
36
- onAudioCallClick: () => {},
37
- // Detailed implementation omitted
38
- onVideoCallClick: () => {},
39
- // Detailed implementation omitted
40
- middleGroup: {
41
- gap: 5,
42
- children: []
43
- },
44
- leftGroup: {
45
- gap: 5,
46
- children: []
47
- },
48
- rightGroup: {
49
- gap: 5,
50
- children: []
51
- },
52
- declineCallButtonProps: {
53
- id: "callRejectButton",
54
- type: "icon",
55
- ariaLabel: "Reject call",
56
- iconName: "DeclineCall",
57
- iconSize: 20
58
- },
59
- audioCallButtonProps: {
60
- id: "callAcceptButton",
61
- type: "icon",
62
- ariaLabel: "Accept voice call",
63
- iconName: "IncomingCall",
64
- iconSize: 20
65
- },
66
- videoCallButtonProps: {
67
- id: "videoCallAcceptButton",
68
- type: "icon",
69
- ariaLabel: "Accept video Call",
70
- iconName: "Video",
71
- iconSize: 20
72
- },
73
- incomingCallTitle: {
74
- id: "incomingCallMessage",
75
- text: "Incoming Call"
76
- }
77
- },
78
- currentCallControlProps: {
79
- id: "currentCall-container",
80
- nonActionIds: {
81
- currentCallActionGroupId: "currentCall-actionicons",
82
- currentCallFooterId: "currentCall-footer",
83
- remoteVideoTileId: "remoteVideo",
84
- selfVideoTileId: "selfVideo",
85
- videoTileGroupId: "currentCall-body"
86
- },
87
- hideMicButton: false,
88
- hideVideoButton: false,
89
- hideEndCallButton: false,
90
- hideCurrentCallTitle: false,
91
- videoCallDisabled: false,
92
- hideCallTimer: false,
93
- onEndCallClick: () => {},
94
- // Detailed implementation omitted
95
- onMicCallClick: () => {},
96
- // Detailed implementation omitted
97
- onVideoOffClick: () => {},
98
- // Detailed implementation omitted
99
- middleGroup: {
100
- gap: 1,
101
- children: []
102
- },
103
- leftGroup: {
104
- gap: 1,
105
- children: []
106
- },
107
- rightGroup: {
108
- gap: 1,
109
- children: []
110
- },
111
- endCallButtonProps: {
112
- id: "callRejectButton",
113
- type: "icon",
114
- ariaLabel: "End Call",
115
- iconName: "DeclineCall",
116
- iconSize: 18
117
- },
118
- micButtonProps: {
119
- id: "toggleAudio",
120
- type: "icon",
121
- ariaLabel: "Mute",
122
- toggleAriaLabel: "Unmute",
123
- iconName: "Microphone",
124
- toggleIconName: "MicOff2",
125
- iconSize: 18
126
- },
127
- videoButtonProps: {
128
- id: "toggleVideo",
129
- type: "icon",
130
- ariaLabel: "Turn on camera",
131
- toggleAriaLabel: "Turn off camera",
132
- iconName: "Video",
133
- toggleIconName: "VideoOff",
134
- iconSize: 18
135
- },
136
- callTimerProps: {
137
- id: "oc-lcw-CurrentCall-timer",
138
- showHours: false,
139
- timerStyles: {
140
- color: "#FFFFFF",
141
- textAlign: "center",
142
- backgroundColor: "#3d3c3c",
143
- height: "45px",
144
- width: "50px",
145
- lineHeight: "40px",
146
- borderRadius: "2px",
147
- margin: "1px"
148
- }
149
- }
150
- },
151
- hideCallingContainer: false
152
- },
153
- styleProps: {
154
- generalStyleProps: {
155
- generalStyleProps: {
156
- background: "#000",
157
- width: "100%",
158
- zIndex: 100,
159
- boxShadow: "0px 0px 2px rgba(0, 0, 0, 0.16), 0px 4px 8px rgba(0, 0, 0, 0.12)"
160
- }
161
- },
162
- className: undefined,
163
- incomingCallStyleProps: {
164
- generalStyleProps: {
165
- background: "#000",
166
- padding: "5px",
167
- height: "60px"
168
- },
169
- audioCallButtonStyleProps: {
170
- borderRadius: "50%",
171
- backgroundColor: "#008000",
172
- lineHeight: "40px",
173
- height: "40px",
174
- width: "40px",
175
- icon: {
176
- fontSize: 18,
177
- color: "#FFFFFF"
178
- }
179
- },
180
- audioCallButtonHoverStyleProps: {
181
- filter: "brightness(0.8)"
182
- },
183
- videoCallButtonStyleProps: {
184
- borderRadius: "50%",
185
- backgroundColor: "#008000",
186
- lineHeight: "40px",
187
- height: "40px",
188
- width: "40px",
189
- icon: {
190
- fontSize: 18,
191
- color: "#FFFFFF"
192
- }
193
- },
194
- videoCallButtonHoverStyleProps: {
195
- filter: "brightness(0.8)"
196
- },
197
- declineCallButtonHoverStyleProps: {
198
- filter: "brightness(0.8)",
199
- border: "1px solid #000"
200
- },
201
- declineCallButtonStyleProps: {
202
- borderRadius: "50%",
203
- backgroundColor: "#DC0000",
204
- lineHeight: "40px",
205
- height: "40px",
206
- width: "40px",
207
- marginLeft: "5px",
208
- icon: {
209
- fontSize: 18,
210
- color: "#FFFFFF"
211
- }
212
- },
213
- incomingCallTitleStyleProps: {
214
- margin: "0 5px",
215
- color: "#FFFFFF",
216
- fontSize: 12,
217
- fontFamily: "Segoe UI, Arial, sans-serif"
218
- },
219
- itemFocusStyleProps: {
220
- outline: "2px solid #FFFFFF"
221
- }
222
- },
223
- currentCallStyleProps: {
224
- generalStyleProps: {
225
- background: "#292828",
226
- minHeight: "55px",
227
- width: "100%",
228
- borderRadius: "0 0 3px 3px"
229
- },
230
- micButtonStyleProps: {
231
- borderRadius: "2px",
232
- color: "#FFFFFF",
233
- backgroundColor: "#3d3c3c",
234
- height: "45px",
235
- width: "50px",
236
- margin: "1px"
237
- },
238
- micButtonHoverStyleProps: {
239
- filter: "brightness(0.8)"
240
- },
241
- videoOffButtonStyleProps: {
242
- borderRadius: "2px",
243
- color: "#FFFFFF",
244
- backgroundColor: "#3d3c3c",
245
- height: "45px",
246
- width: "50px",
247
- margin: "1px"
248
- },
249
- videoOffButtonHoverStyleProps: {
250
- filter: "brightness(0.8)"
251
- },
252
- endCallButtonHoverStyleProps: {
253
- filter: "brightness(0.8)"
254
- },
255
- endCallButtonStyleProps: {
256
- borderRadius: "2px",
257
- color: "#FFFFFF",
258
- backgroundColor: "#DC0000",
259
- lineHeight: "50px",
260
- height: "45px",
261
- width: "50px",
262
- fontSize: "18px"
263
- },
264
- videoTileStyleProps: {
265
- width: "100%",
266
- marginLeft: "auto",
267
- marginRight: "auto",
268
- position: "relative"
269
- },
270
- videoTileStyleWithVideoProps: {
271
- minHeight: "180px",
272
- width: "100%",
273
- marginLeft: "auto",
274
- marginRight: "auto",
275
- position: "relative"
276
- },
277
- remoteVideoStyleProps: {
278
- height: "100%",
279
- width: "100%",
280
- overflow: "hidden"
281
- },
282
- selfVideoStyleProps: {
283
- position: "absolute",
284
- right: "8px",
285
- bottom: "8px",
286
- width: "80px",
287
- minHeight: "50px",
288
- overflow: "hidden",
289
- borderRadius: "2px"
290
- },
291
- selfVideoMaximizeStyleProps: {
292
- position: "relative",
293
- width: "100%",
294
- minHeight: "50px",
295
- overflow: "hidden",
296
- borderRadius: "2px"
297
- },
298
- itemFocusStyleProps: {
299
- outline: "2px solid #fff"
300
- }
301
- }
302
- }
303
- },
304
- chatButtonProps: {
305
- componentOverrides: {
306
- title: undefined,
307
- subtitle: undefined,
308
- notificationBubble: undefined,
309
- iconContainer: undefined,
310
- textContainer: undefined
311
- },
312
- controlProps: {
313
- id: "oc-lcw-chat-button",
314
- dir: "ltr",
315
- role: "button",
316
- ariaLabel: "live chat button",
317
- titleText: "Let's Chat!",
318
- subtitleText: "We're online.",
319
- unreadMessageCount: "0",
320
- onClick: () => {},
321
- // Detailed implementation omitted
322
- hideChatButton: false,
323
- hideChatIcon: false,
324
- hideChatTextContainer: false,
325
- hideChatSubtitle: false,
326
- hideChatTitle: false,
327
- hideNotificationBubble: true,
328
- unreadMessageString: "new messages",
329
- largeUnreadMessageString: "99+",
330
- ariaLabelUnreadMessageString: "you have new messages"
331
- },
332
- styleProps: {
333
- generalStyleProps: {
334
- height: "60px",
335
- width: "180px",
336
- borderRadius: "100px 100px 100px 99px",
337
- position: "absolute",
338
- backgroundColor: "#fff",
339
- borderColor: "#fff",
340
- borderStyle: "solid",
341
- borderWidth: "1px",
342
- boxShadow: "0 0 4px rgb(102 102 102 / 50%)",
343
- margin: "3px 3px 3px 3px",
344
- cursor: "pointer",
345
- bottom: "0px",
346
- display: "flex",
347
- right: "0px",
348
- padding: "0px",
349
- selectors: {
350
- ":hover": {
351
- backgroundColor: "lightgrey"
352
- },
353
- ":focus": {
354
- outline: "dotted 2px #000"
355
- }
356
- }
357
- },
358
- // BUG: NOT IMPLEMENTED chatButtonHoveredStyleProps: IStyle;
359
- iconStyleProps: {
360
- backgroundColor: "#315FA2",
361
- borderStyle: "solid",
362
- borderRadius: "50%",
363
- borderColor: "transparent",
364
- borderWidth: "1px",
365
- align: "center",
366
- width: "62px",
367
- height: "60px",
368
- margin: "-2px -2px -2px -3px",
369
- justifyContent: "center",
370
- backgroundSize: "65% 65%",
371
- backgroundImage: `url(${ModernChatIconBase64})`,
372
- display: "flex",
373
- backgroundRepeat: "no-repeat",
374
- backgroundPosition: "center"
375
- },
376
- notificationBubbleStyleProps: {
377
- backgroundColor: "#cc4a31",
378
- borderRadius: "50%",
379
- color: "#fff",
380
- padding: "1px",
381
- fontWeight: "bold",
382
- lineHeight: "22px",
383
- fontStyle: "normal",
384
- top: "-5px",
385
- textAlign: "center",
386
- position: "absolute",
387
- fontSize: "14px",
388
- fontFamily: "Segoe UI,Arial,sans-serif",
389
- minHeight: "24px",
390
- minWidth: "24px"
391
- },
392
- textContainerStyleProps: {
393
- flexDirection: "column",
394
- justifyContent: "center",
395
- display: "flex"
396
- },
397
- titleStyleProps: {
398
- fontWeight: "bold",
399
- fontSize: "16px",
400
- height: "22px",
401
- color: "#262626",
402
- textOverflow: "ellipsis !important",
403
- lineHeight: "19px",
404
- fontFamily: "'Segoe UI',Arial,sans-serif",
405
- display: "block",
406
- margin: "0px 14px 0px 14px",
407
- width: "90px",
408
- cursor: "pointer",
409
- overflow: "hidden",
410
- padding: "0px",
411
- whiteSpace: "nowrap"
412
- },
413
- subtitleStyleProps: {
414
- fontSize: "12px",
415
- fontWeight: "200",
416
- color: "#666",
417
- overflow: "hidden",
418
- padding: "0px",
419
- fontFamily: "'Segoe UI',Arial,sans-serif",
420
- display: "block",
421
- alignItems: "center",
422
- margin: "0px 14px 0px 14px",
423
- textOverflow: "ellipsis !important",
424
- width: "90px",
425
- whiteSpace: "nowrap",
426
- cursor: "pointer"
427
- },
428
- classNames: {
429
- titleClassName: undefined,
430
- subtitleClassName: undefined,
431
- textContainerClassName: undefined,
432
- notificationBubbleClassName: undefined,
433
- iconContainerClassName: undefined
434
- }
435
- }
436
- },
437
- chatConfig: undefined,
438
- chatSDK: undefined,
439
- // Mandatory
440
- componentOverrides: {
441
- chatButton: undefined,
442
- confirmationPane: undefined,
443
- footer: undefined,
444
- emailTranscriptPane: undefined,
445
- header: undefined,
446
- loadingPane: undefined,
447
- outOfOfficeHoursPane: undefined,
448
- postChatLoadingPane: undefined,
449
- proactiveChatPane: undefined,
450
- reconnectChatPane: undefined,
451
- webChatContainer: undefined
452
- },
453
- confirmationPaneProps: {
454
- componentOverrides: {
455
- title: undefined,
456
- subtitle: undefined,
457
- confirmButton: undefined,
458
- cancelButton: undefined
459
- },
460
- controlProps: {
461
- id: "oc-lcw-confirmation-pane",
462
- dir: "ltr",
463
- hideConfirmationPane: false,
464
- hideTitle: false,
465
- titleText: "Close chat",
466
- hideSubtitle: false,
467
- subtitleText: "Do you really want to close this chat?",
468
- hideConfirmButton: false,
469
- confirmButtonText: "Close",
470
- confirmButtonAriaLabel: "Close Chat",
471
- hideCancelButton: false,
472
- cancelButtonText: "Cancel",
473
- cancelButtonAriaLabel: "Cancel. Return to Chat",
474
- brightnessValueOnDim: "0.2",
475
- onConfirm: () => {},
476
- // Detailed implementation omitted
477
- onCancel: () => {} // Detailed implementation omitted
478
- },
479
-
480
- styleProps: {
481
- generalStyleProps: {
482
- display: "flex",
483
- minHeight: "160px",
484
- maxHeight: "300px",
485
- boxSizing: "border-box",
486
- backgroundColor: "#FFFFFF",
487
- borderRadius: "2px",
488
- color: "black",
489
- fontFamily: "Segoe UI, Arial, sans-serif",
490
- fontSize: "14px",
491
- padding: "10px 20px",
492
- position: "absolute",
493
- justifyContent: "center",
494
- alignItems: "center",
495
- flexFlow: "column",
496
- zIndex: "9999",
497
- left: "26px",
498
- right: "26px"
499
- },
500
- titleStyleProps: {
501
- color: "#323130",
502
- fontFamily: "Segoe UI, Arial, sans-serif",
503
- fontSize: "16px",
504
- fontWeight: "500",
505
- margin: "10px 0 0 0",
506
- width: "100%",
507
- textAlign: "center"
508
- },
509
- subtitleStyleProps: {
510
- color: "#605e5c",
511
- fontFamily: "Segoe UI, Arial, sans-serif",
512
- fontSize: "14px",
513
- fontWeight: "400",
514
- margin: "14px 0px",
515
- width: "100%",
516
- textAlign: "center"
517
- },
518
- buttonGroupStyleProps: {
519
- display: "flex",
520
- width: "auto",
521
- height: "auto",
522
- boxSizing: "border-box",
523
- flexFlow: "row",
524
- justifyContent: "center",
525
- alignItems: "center",
526
- gap: "10px",
527
- marginBottom: "10px"
528
- },
529
- confirmButtonStyleProps: {
530
- backgroundColor: "rgba(9,72,159,1)",
531
- color: "#FFFFFF",
532
- fontFamily: "Segoe UI, Arial, sans-serif",
533
- fontSize: "14px",
534
- fontWeight: "500",
535
- height: "32px",
536
- width: "80px"
537
- },
538
- confirmButtonHoveredStyleProps: {
539
- backgroundColor: "rgba(9,72,159,0.8)"
540
- },
541
- confirmButtonFocusedStyleProps: {
542
- border: "2px dotted #000"
543
- },
544
- cancelButtonStyleProps: {
545
- backgroundColor: "#FFFFFF",
546
- fontFamily: "Segoe UI, Arial, sans-serif",
547
- fontSize: "14px",
548
- fontWeight: "500",
549
- height: "32px",
550
- width: "80px"
551
- },
552
- cancelButtonHoveredStyleProps: {
553
- backgroundColor: "#EFEFEF"
554
- },
555
- cancelButtonFocusedStyleProps: {
556
- border: "2px dotted #000"
557
- },
558
- classNames: {
559
- titleClassName: undefined,
560
- subtitleClassName: undefined,
561
- buttonGroupClassName: undefined,
562
- confirmButtonClassName: undefined,
563
- cancelButtonClassName: undefined
564
- }
565
- },
566
- confirmationPaneLocalizedTexts: {
567
- CLOSE_CONFIRMATION_DIALOG_TITLE_FOR_EMAIL_AND_DOWNLOAD_TRANSCRIPT_ENABLED: "Want a copy of this chat?",
568
- CLOSE_CONFIRMATION_DIALOG_DESCRIPTION_FOR_EMAIL_AND_DOWNLOAD_TRANSCRIPT_ENABLED: "Select Cancel and then select the download or email icon",
569
- CLOSE_CONFIRMATION_DIALOG_TITLE_FOR_EMAIL_TRANSCRIPT_ENABLED: "Want a copy of this chat?",
570
- CLOSE_CONFIRMATION_DIALOG_DESCRIPTION_FOR_EMAIL_TRANSCRIPT_ENABLED: "Select Cancel and then select the email icon.",
571
- CLOSE_CONFIRMATION_DIALOG_TITLE_FOR_DOWNLOAD_TRANSCRIPT_ENABLED: "Want a copy of this chat?",
572
- CLOSE_CONFIRMATION_DIALOG_DESCRIPTION_FOR_DOWNLOAD_TRANSCRIPT_ENABLED: "Select Cancel and then select the download icon.",
573
- CLOSE_CONFIRMATION_DIALOG_TITLE_DEFAULT: "Close Chat",
574
- CLOSE_CONFIRMATION_DIALOG_DESCRIPTION_DEFAULT: "Do you really want to close this chat?"
575
- }
576
- },
577
- controlProps: {
578
- id: "oc-lcw",
579
- hideCallingContainer: false,
580
- hideChatButton: false,
581
- hideConfirmationPane: false,
582
- hideErrorUIPane: false,
583
- hideFooter: false,
584
- hideHeader: false,
585
- hideLoadingPane: false,
586
- hideOutOfOfficeHoursPane: false,
587
- hidePostChatLoadingPane: false,
588
- hidePreChatSurveyPane: false,
589
- hideProactiveChatPane: false,
590
- hideReconnectChatPane: false,
591
- hideWebChatContainer: false,
592
- hideStartChatButton: false
593
- },
594
- directLine: new MockAdapter(),
595
- downloadTranscriptProps: {
596
- bannerMessageOnError: "Download transcript failed.",
597
- renderMarkDown: undefined,
598
- attachmentMessage: "The following attachment was uploaded during the conversation:",
599
- webChatTranscript: {
600
- disabled: false,
601
- fileName: "transcript",
602
- pageTitle: "Customer Transcript",
603
- attachmentMessage: "The following attachment was uploaded during the conversation: ",
604
- networkOnlineMessage: "Connection restored. Please refresh the page",
605
- networkOfflineMessage: "Network Error. Please make sure you are connected to the internet."
606
- }
607
- },
608
- emailTranscriptPane: {
609
- componentOverrides: {
610
- title: undefined,
611
- subtitle: undefined,
612
- input: undefined,
613
- invalidInputErrorMessage: undefined,
614
- sendButton: undefined,
615
- cancelButton: undefined
616
- },
617
- controlProps: {
618
- id: "oclcw-emailTranscriptDialogContainer",
619
- dir: "ltr",
620
- hideInputValidationPane: false,
621
- inputValidationPaneAriaLabel: "Email Chat Transcript Pane",
622
- hideTitle: false,
623
- titleText: "Email this chat transcript",
624
- hideSubtitle: false,
625
- subtitleText: "This will be sent after your chat ends.",
626
- inputId: "oclcw-emailTranscriptDialogTextField",
627
- inputInitialText: "",
628
- hideInput: false,
629
- inputAriaLabel: "Email this chat transcript. This will be sent after your chat ends. Email address text area",
630
- inputWithErrorMessageBorderColor: "rgb(164, 38, 44)",
631
- invalidInputErrorMessageText: "Enter a valid email address.",
632
- isButtonGroupHorizontal: true,
633
- hideSendButton: false,
634
- enableSendButton: undefined,
635
- sendButtonText: "Send",
636
- sendButtonAriaLabel: "Send",
637
- hideCancelButton: false,
638
- cancelButtonText: "Cancel",
639
- cancelButtonAriaLabel: "Cancel",
640
- brightnessValueOnDim: "0.2",
641
- onSend: undefined,
642
- onCancel: undefined,
643
- checkInput: undefined
644
- },
645
- styleProps: {
646
- generalStyleProps: {
647
- backgroundColor: "#fff",
648
- borderBottomLeftRadius: "4px",
649
- borderBottomRightRadius: "4px",
650
- borderColor: "rgba(138, 141, 145, .24)",
651
- borderTop: "solid",
652
- borderTopWidth: "1px",
653
- bottom: "0",
654
- left: "0",
655
- minHeight: "180px",
656
- padding: "10px",
657
- position: "absolute",
658
- width: "100%",
659
- zIndex: "9999"
660
- },
661
- headerGroupStyleProps: {
662
- marginBottom: "15px"
663
- },
664
- titleStyleProps: {
665
- color: "#323130",
666
- fontFamily: "'Segoe UI', Arial, sans-serif",
667
- fontSize: "18px",
668
- fontWeight: "500",
669
- marginBottom: "5px"
670
- },
671
- subtitleStyleProps: {
672
- color: "#262626",
673
- fontFamily: "'Segoe UI', Arial, sans-serif",
674
- fontSize: "14px",
675
- lineHeight: "16px",
676
- marginBottom: "10px"
677
- },
678
- inputStyleProps: {
679
- boxSizing: "border-box",
680
- fontFamily: "'Segoe UI', Arial, sans-serif",
681
- fontSize: "16px",
682
- fontWeight: "400",
683
- textIndent: "10px",
684
- width: "100%"
685
- },
686
- invalidInputErrorMessageStyleProps: {
687
- color: "#a4262c",
688
- fontFamily: "'Segoe UI', Arial, sans-serif",
689
- fontSize: "12px",
690
- height: "16px,",
691
- lineHeight: "16px",
692
- marginTop: "4px"
693
- },
694
- buttonGroupStyleProps: {
695
- gap: "10px"
696
- },
697
- sendButtonStyleProps: {
698
- color: "rgb(255, 255, 255)",
699
- cursor: "pointer",
700
- fontFamily: "'Segoe UI', Arial, sans-serif",
701
- fontSize: "14px",
702
- fontWeight: "500",
703
- lineHeight: "19px",
704
- textOverflow: "ellipsis",
705
- whiteSpace: "nowrap"
706
- },
707
- sendButtonHoveredStyleProps: {},
708
- cancelButtonStyleProps: {
709
- border: "solid",
710
- borderColor: "#e0e3e6",
711
- borderWidth: "2px",
712
- boxSizing: "border-box",
713
- color: "#000",
714
- cursor: "pointer",
715
- fontFamily: "'Segoe UI', Arial, sans-serif",
716
- fontSize: "14px",
717
- fontWeight: "500",
718
- lineHeight: "19px",
719
- textOverflow: "ellipsis",
720
- whiteSpace: "nowrap"
721
- },
722
- cancelButtonHoveredStyleProps: {},
723
- classNames: {
724
- containerClassName: undefined,
725
- headerGroupClassName: undefined,
726
- titleClassName: undefined,
727
- subtitleClassName: undefined,
728
- inputClassName: undefined,
729
- invalidInputErrorMessageClassName: undefined,
730
- buttonGroupClassName: undefined,
731
- sendButtonClassName: undefined,
732
- cancelButtonClassName: undefined
733
- }
734
- },
735
- bannerMessageOnError: "Email transcript to <email> failed.",
736
- attachmentMessage: "The following attachment was uploaded during the conversation:"
737
- },
738
- footerProps: {
739
- componentOverrides: {
740
- DownloadTranscriptButton: undefined,
741
- EmailTranscriptButton: undefined,
742
- AudioNotificationButton: undefined
743
- },
744
- controlProps: {
745
- // BUG
746
- id: "oc-lcw-footer",
747
- leftGroup: {
748
- children: []
749
- },
750
- middleGroup: {
751
- children: []
752
- },
753
- rightGroup: {
754
- children: []
755
- },
756
- hideDownloadTranscriptButton: false,
757
- hideEmailTranscriptButton: false,
758
- hideAudioNotificationButton: false,
759
- onDownloadTranscriptClick: () => {},
760
- // Detailed implementation omitted
761
- onEmailTranscriptClick: () => {},
762
- // Detailed implementation omitted
763
- onAudioNotificationClick: () => {},
764
- // Detailed implementation omitted
765
- downloadTranscriptButtonProps: {
766
- id: "oc-lcw-footer-downloadtranscript-button",
767
- type: "icon",
768
- iconName: "Download",
769
- ariaLabel: "Download chat transcript",
770
- isAudioMuted: undefined,
771
- iconSize: undefined,
772
- imageIconProps: undefined,
773
- toggleIconName: undefined,
774
- imageToggleIconProps: undefined,
775
- toggleAriaLabel: undefined,
776
- text: "Download chat transcript",
777
- onClick: undefined,
778
- className: undefined,
779
- disabled: undefined
780
- },
781
- emailTranscriptButtonProps: {
782
- id: "oc-lcw-footer-emailtranscript-button",
783
- type: "icon",
784
- iconName: "Mail",
785
- ariaLabel: "Email Transcript",
786
- isAudioMuted: undefined,
787
- iconSize: undefined,
788
- imageIconProps: undefined,
789
- toggleIconName: undefined,
790
- imageToggleIconProps: undefined,
791
- toggleAriaLabel: undefined,
792
- text: "Email Transcript",
793
- onClick: undefined,
794
- className: undefined,
795
- disabled: undefined
796
- },
797
- audioNotificationButtonProps: {
798
- id: "oc-lcw-footer-audionotification-button",
799
- type: "icon",
800
- ariaLabel: "Turn sound off",
801
- toggleAriaLabel: "Turn sound on",
802
- iconName: "Volume3",
803
- toggleIconName: "Volume0",
804
- isAudioMuted: undefined,
805
- iconSize: undefined,
806
- imageIconProps: undefined,
807
- imageToggleIconProps: undefined,
808
- text: "Audio Notification off",
809
- onClick: undefined,
810
- className: undefined,
811
- disabled: undefined
812
- },
813
- dir: "ltr"
814
- },
815
- styleProps: {
816
- generalStyleProps: {
817
- background: "#fff",
818
- borderRadius: "0 0 4px 4px",
819
- minHeight: "25px",
820
- width: "100%",
821
- minWidth: "250px",
822
- padding: "5px"
823
- },
824
- downloadTranscriptButtonStyleProps: {
825
- icon: {
826
- color: "blue",
827
- fontSize: 16
828
- },
829
- height: "25px",
830
- lineHeight: "25px",
831
- width: "25px"
832
- },
833
- downloadTranscriptButtonHoverStyleProps: {
834
- filter: "brightness(0.8)",
835
- backgroundColor: "#C8C8C8"
836
- },
837
- emailTranscriptButtonStyleProps: {
838
- cicon: {
839
- color: "blue",
840
- fontSize: 16
841
- },
842
- height: "25px",
843
- lineHeight: "25px",
844
- width: "25px"
845
- },
846
- emailTranscriptButtonHoverStyleProps: {
847
- filter: "brightness(0.8)",
848
- backgroundColor: "#C8C8C8"
849
- },
850
- audioNotificationButtonStyleProps: {
851
- icon: {
852
- color: "blue",
853
- fontSize: 16
854
- },
855
- height: "25px",
856
- lineHeight: "25px",
857
- width: "25px"
858
- },
859
- audioNotificationButtonHoverStyleProps: {
860
- filter: "brightness(0.8)",
861
- backgroundColor: "#C8C8C8"
862
- },
863
- footerItemFocusStyleProps: {
864
- border: "2px dotted #000"
865
- }
866
- }
867
- },
868
- headerProps: {
869
- componentOverrides: {
870
- headerIcon: undefined,
871
- headerTitle: undefined,
872
- headerMinimizeButton: undefined,
873
- headerCloseButton: undefined
874
- },
875
- controlProps: {
876
- id: "oc-lcw-header",
877
- leftGroup: {
878
- children: []
879
- },
880
- middleGroup: {
881
- children: []
882
- },
883
- rightGroup: {
884
- children: []
885
- },
886
- hideIcon: false,
887
- hideTitle: false,
888
- hideMinimizeButton: false,
889
- hideCloseButton: false,
890
- onMinimizeClick: () => {},
891
- // Detailed implementation omitted
892
- onCloseClick: () => {},
893
- // Detailed implementation omitted
894
- minimizeButtonProps: {
895
- id: "oc-lcw-header-minimize-button",
896
- type: "icon",
897
- iconName: "ChromeMinimize",
898
- ariaLabel: "Minimize",
899
- imageIconProps: undefined,
900
- text: "Minimize",
901
- onClick: undefined,
902
- className: undefined
903
- },
904
- closeButtonProps: {
905
- id: "oc-lcw-header-close-button",
906
- type: "icon",
907
- iconName: "ChromeClose",
908
- ariaLabel: "Close",
909
- imageIconProps: undefined,
910
- text: "Close",
911
- onClick: undefined,
912
- className: undefined
913
- },
914
- headerIconProps: {
915
- id: "oc-lcw-header-icon",
916
- src: ModernChatIconBase64,
917
- alt: "Chat Icon",
918
- className: undefined
919
- },
920
- headerTitleProps: {
921
- id: "oc-lcw-header-title",
922
- text: "Let's Chat",
923
- className: undefined
924
- },
925
- dir: "ltr"
926
- },
927
- styleProps: {
928
- generalStyleProps: {
929
- background: "#315fa2",
930
- borderRadius: "4px 4px 0 0",
931
- padding: "5px",
932
- minHeight: "50px",
933
- width: "100%",
934
- minWidth: "250px"
935
- },
936
- iconStyleProps: {
937
- height: "30px",
938
- width: "30px",
939
- margin: "5px 10px"
940
- },
941
- titleStyleProps: {
942
- fontSize: 16,
943
- fontFamily: "Segoe UI, Arial, sans-serif",
944
- fontWeight: "450",
945
- color: "#FFFFFF",
946
- padding: "3px 0"
947
- },
948
- minimizeButtonStyleProps: {
949
- color: "#FFFFFF",
950
- margin: "5px 0",
951
- fontSize: "12px"
952
- },
953
- closeButtonStyleProps: {
954
- color: "#FFFFFF",
955
- margin: "5px 0",
956
- fontSize: "12px"
957
- },
958
- closeButtonHoverStyleProps: {
959
- filter: "brightness(0.8)"
960
- },
961
- minimizeButtonHoverStyleProps: {
962
- filter: "brightness(0.8)"
963
- },
964
- headerItemFocusStyleProps: {
965
- border: "2px dotted #000"
966
- }
967
- }
968
- },
969
- loadingPaneProps: {
970
- componentOverrides: {
971
- icon: undefined,
972
- title: undefined,
973
- subtitle: undefined,
974
- spinner: undefined,
975
- spinnerText: undefined
976
- },
977
- controlProps: {
978
- id: "oc-lcw-loading-pane",
979
- role: undefined,
980
- dir: "auto",
981
- hideLoadingPane: false,
982
- hideIcon: false,
983
- hideTitle: false,
984
- titleText: "Welcome to",
985
- hideSubtitle: false,
986
- subtitleText: "live chat support ...",
987
- hideSpinner: false,
988
- spinnerSize: undefined,
989
- hideSpinnerText: false,
990
- spinnerText: "Loading ..."
991
- },
992
- styleProps: {
993
- generalStyleProps: {
994
- width: "100%",
995
- height: "100%",
996
- borderStyle: "solid",
997
- backgroundColor: "#315fa2",
998
- borderColor: "#F1F1F1",
999
- justifyContent: "center",
1000
- alignItems: "center",
1001
- position: "initial",
1002
- left: "0%",
1003
- top: "0%",
1004
- borderRadius: "0 0 4px 4px",
1005
- borderWidth: "0px"
1006
- },
1007
- titleStyleProps: {
1008
- fontFamily: "'Segoe UI',Arial,sans-serif",
1009
- fontWeight: "normal",
1010
- fontSize: "14px",
1011
- color: "#F1F1F1",
1012
- margin: "0px 0px 0px 0px",
1013
- textAlign: "center",
1014
- display: "flex",
1015
- order: 2,
1016
- alignSelf: "auto"
1017
- },
1018
- subtitleStyleProps: {
1019
- fontFamily: "'Segoe UI',Arial,sans-serif",
1020
- fontWeight: "bold",
1021
- fontSize: "18px",
1022
- color: "#F1F1F1",
1023
- margin: "0px 0px 50px 10px",
1024
- textAlign: "center",
1025
- display: "flex",
1026
- order: 3,
1027
- alignSelf: "auto"
1028
- },
1029
- iconStyleProps: {
1030
- borderRadius: "50%",
1031
- backgroundColor: "#F1F1F1",
1032
- boxShadow: "0px 0px 0.5px 7px #3F75AB",
1033
- width: "86px",
1034
- height: "86px",
1035
- margin: "0px 0px 20px 0px",
1036
- display: "flex",
1037
- order: 1,
1038
- alignSelf: "auto",
1039
- overflow: "visible"
1040
- },
1041
- iconImageProps: {
1042
- src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2lpKSI+DQo8cGF0aCBkPSJNMTUuMTk3MSAxNi4yNzI1VjI1Ljg1MjRDMTUuMTk3MSAyNy4zODExIDE1Ljg0MDEgMjcuNTIwMSAxNi45ODMyIDI3LjUyMDFMMjYuNzA4NCAyNy41NjQ5TDMxLjAwMzkgMzIuMzEyM1YyNy41NjQ5SDMxLjg5N0MzMi4xNzQzIDI3LjU2MzcgMzIuNDQ4NyAyNy41MDc3IDMyLjcwNDUgMjcuNDAwMUMzMi45NjAzIDI3LjI5MjQgMzMuMTkyNSAyNy4xMzUzIDMzLjM4NzggMjYuOTM3NUMzMy41ODMxIDI2LjczOTggMzMuNzM3NyAyNi41MDU0IDMzLjg0MjcgMjYuMjQ3N0MzMy45NDc4IDI1Ljk5IDM0LjAwMTMgMjUuNzE0IDM0LjAwMDEgMjUuNDM1NVYxNi4zMDM4QzM0LjAwMTMgMTYuMDI1NCAzMy45NDc4IDE1Ljc0OTQgMzMuODQyNyAxNS40OTE3QzMzLjczNzcgMTUuMjM0IDMzLjU4MzEgMTQuOTk5NiAzMy4zODc4IDE0LjgwMThDMzMuMTkyNSAxNC42MDQxIDMyLjk2MDMgMTQuNDQ2OSAzMi43MDQ1IDE0LjMzOTNDMzIuNDQ4NyAxNC4yMzE2IDMyLjE3NDMgMTQuMTc1NiAzMS44OTcgMTQuMTc0NEwxNy4zMDQ3IDE0LjE0MzFDMTcuMDI2OSAxNC4xNDM3IDE2Ljc1MiAxNC4xOTkyIDE2LjQ5NTcgMTQuMzA2NkMxNi4yMzk0IDE0LjQxNCAxNi4wMDY3IDE0LjU3MTEgMTUuODEwOSAxNC43Njg5QzE1LjYxNTIgMTQuOTY2NyAxNS40NjAyIDE1LjIwMTMgMTUuMzU0OCAxNS40NTkzQzE1LjI0OTUgMTUuNzE3MyAxNS4xOTU5IDE1Ljk5MzYgMTUuMTk3MSAxNi4yNzI1WiIgZmlsbD0iI0Q2RDZENiIvPg0KPC9nPg0KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjFfZGlpKSI+DQo8cGF0aCBkPSJNMjcuODczNSA2LjY5ODg3VjE4Ljg0MDlDMjcuODczNSAyMC43Nzg1IDI3LjA1NzIgMjAuOTU0NiAyNS42MDU4IDIwLjk1NDZMMTMuMjU4IDIxLjAxMTRMNy44MDQxNCAyNy4wMjg1VjIxLjAxMTRINi42NzAyN0M2LjMxODEyIDIxLjAwOTkgNS45Njk3MSAyMC45Mzg5IDUuNjQ0OTMgMjAuODAyNUM1LjMyMDE2IDIwLjY2NjEgNS4wMjUzOCAyMC40NjY4IDQuNzc3NDIgMjAuMjE2MkM0LjUyOTQ2IDE5Ljk2NTYgNC4zMzMxOSAxOS42Njg1IDQuMTk5OCAxOS4zNDE5QzQuMDY2NDIgMTkuMDE1MiAzLjk5ODUzIDE4LjY2NTUgNC4wMDAwMiAxOC4zMTI1VjYuNzM4NjRDMy45OTg1MyA2LjM4NTcxIDQuMDY2NDIgNi4wMzU5NSA0LjE5OTggNS43MDkzMUM0LjMzMzE5IDUuMzgyNjcgNC41Mjk0NiA1LjA4NTU3IDQuNzc3NDIgNC44MzQ5NUM1LjAyNTM4IDQuNTg0MzQgNS4zMjAxNiA0LjM4NTEzIDUuNjQ0OTMgNC4yNDg2OUM1Ljk2OTcxIDQuMTEyMjUgNi4zMTgxMiA0LjA0MTI2IDYuNjcwMjcgNC4wMzk3N0wyNS4xOTc2IDRDMjUuNTUwMiA0LjAwMDc0IDI1Ljg5OTMgNC4wNzExOCAyNi4yMjQ3IDQuMjA3MjlDMjYuNTUwMSA0LjM0MzM5IDI2Ljg0NTYgNC41NDI0OSAyNy4wOTQxIDQuNzkzMThDMjcuMzQyNyA1LjA0Mzg2IDI3LjUzOTUgNS4zNDEyMiAyNy42NzMyIDUuNjY4MjNDMjcuODA3IDUuOTk1MjMgMjcuODc1IDYuMzQ1NDYgMjcuODczNSA2LjY5ODg3WiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyKSIvPg0KPC9nPg0KPGRlZnM+DQo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2lpIiB4PSIxNS4xOTcxIiB5PSIxNC4xNDMxIiB3aWR0aD0iMTguODAzMSIgaGVpZ2h0PSIxOC4xNjkzIiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+DQo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPg0KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4NCjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPg0KPGZlT2Zmc2V0IGR4PSItMC4yIiBkeT0iLTAuMiIvPg0KPGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgazI9Ii0xIiBrMz0iMSIvPg0KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMCAxIDAgMCAwIDAuMTcgMCIvPg0KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9InNoYXBlIiByZXN1bHQ9ImVmZmVjdDFfaW5uZXJTaGFkb3ciLz4NCjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPg0KPGZlT2Zmc2V0IGR4PSItMC41IiBkeT0iLTAuNSIvPg0KPGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgazI9Ii0xIiBrMz0iMSIvPg0KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMCAxIDAgMCAwIDAuMTYgMCIvPg0KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9ImVmZmVjdDFfaW5uZXJTaGFkb3ciIHJlc3VsdD0iZWZmZWN0Ml9pbm5lclNoYWRvdyIvPg0KPC9maWx0ZXI+DQo8ZmlsdGVyIGlkPSJmaWx0ZXIxX2RpaSIgeD0iMCIgeT0iMCIgd2lkdGg9IjM5Ljg3MzYiIGhlaWdodD0iMzkuMDI4NSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPg0KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4NCjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIi8+DQo8ZmVPZmZzZXQgZHg9IjQiIGR5PSI0Ii8+DQo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI0Ii8+DQo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4yNSAwIi8+DQo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9ImVmZmVjdDFfZHJvcFNoYWRvdyIvPg0KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3ciIHJlc3VsdD0ic2hhcGUiLz4NCjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPg0KPGZlT2Zmc2V0IGR4PSItMiIgZHk9Ii0yIi8+DQo8ZmVDb21wb3NpdGUgaW4yPSJoYXJkQWxwaGEiIG9wZXJhdG9yPSJhcml0aG1ldGljIiBrMj0iLTEiIGszPSIxIi8+DQo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMC4xNyAwIi8+DQo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0ic2hhcGUiIHJlc3VsdD0iZWZmZWN0Ml9pbm5lclNoYWRvdyIvPg0KPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiIHJlc3VsdD0iaGFyZEFscGhhIi8+DQo8ZmVPZmZzZXQgZHg9Ii0xIiBkeT0iLTEiLz4NCjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9ImFyaXRobWV0aWMiIGsyPSItMSIgazM9IjEiLz4NCjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDEgMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwLjE2IDAiLz4NCjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJlZmZlY3QyX2lubmVyU2hhZG93IiByZXN1bHQ9ImVmZmVjdDNfaW5uZXJTaGFkb3ciLz4NCjwvZmlsdGVyPg0KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyIiB4MT0iLTAuMzk1MDAxIiB5MT0iMjMuMTI4MiIgeDI9IjIwLjEwNTgiIHkyPSIzNy44NDc0IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+DQo8c3RvcCBzdG9wLWNvbG9yPSIjRUZFRkVGIi8+DQo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IndoaXRlIi8+DQo8L2xpbmVhckdyYWRpZW50Pg0KPC9kZWZzPg0KPC9zdmc+DQo=",
1043
- imageFit: 0,
1044
- width: "86px",
1045
- height: "86px",
1046
- shouldFadeIn: false,
1047
- shouldStartVisible: true
1048
- },
1049
- spinnerStyleProps: {
1050
- width: "42px",
1051
- height: "42px",
1052
- margin: "0px 0px 0px 0px",
1053
- display: "flex",
1054
- order: 4,
1055
- alignSelf: "auto"
1056
- },
1057
- spinnerTextStyleProps: {
1058
- fontFamily: "'Segoe UI',Arial,sans-serif",
1059
- fontWeight: "normal",
1060
- fontSize: "9px",
1061
- color: "#F1F1F1",
1062
- margin: "0px 0px 0px 5px",
1063
- textAlign: "center",
1064
- order: 5,
1065
- alignSelf: "auto"
1066
- },
1067
- classNames: {
1068
- iconClassName: undefined,
1069
- titleClassName: undefined,
1070
- subtitleClassName: undefined,
1071
- spinnerClassName: undefined,
1072
- spinnerTextClassName: undefined
1073
- }
1074
- }
1075
- },
1076
- outOfOfficeChatButtonProps: {
1077
- // Same interface as chatButtonProps, thus omitting undefined attributes here
1078
- componentOverrides: undefined,
1079
- controlProps: {
1080
- // ...[Existing chat button control props]
1081
- id: "oc-lcw-chat-button",
1082
- titleText: "We're Offline",
1083
- subtitleText: "No agents available",
1084
- onClick: () => {} // Detailed implementation omitted
1085
- },
1086
-
1087
- styleProps: {
1088
- // ...[Existing chat button style props]
1089
- iconStyleProps: {
1090
- backgroundColor: "#000000"
1091
- }
1092
- }
1093
- },
1094
- outOfOfficeHeaderProps: {
1095
- // Same interface as headerProps, thus omitting undefined attributes here
1096
- componentOverrides: undefined,
1097
- controlProps: {
1098
- // ...[Existing chat button control props]
1099
- id: "oc-lcw-header",
1100
- headerTitleProps: {
1101
- text: "We're Offline"
1102
- },
1103
- onMinimizeClick: () => {} // Detailed implementation omitted
1104
- },
1105
-
1106
- styleProps: {
1107
- // ...[Existing chat button style props]
1108
- generalStyleProps: {
1109
- // ...[Existing chat button general style props]
1110
- borderRadius: "0px",
1111
- backgroundColor: "#000000",
1112
- height: "40px"
1113
- },
1114
- titleStyleProps: {
1115
- // ...[Existing chat button title style props]
1116
- margin: "0 0 0 10px",
1117
- color: "#FFFFFF"
1118
- }
1119
- }
1120
- },
1121
- outOfOfficeHoursPaneProps: {
1122
- componentOverrides: {
1123
- title: undefined
1124
- },
1125
- controlProps: {
1126
- id: "oc-lcw-outofofficehours-pane",
1127
- role: undefined,
1128
- dir: "auto",
1129
- hideOOOHPane: false,
1130
- hideTitle: false,
1131
- titleText: "Thanks for contacting us. You have reached us outside of our operating hours. An agent will respond when we open. Please see link https://microsoft.com",
1132
- openLinkInNewTab: true
1133
- },
1134
- styleProps: {
1135
- generalStyleProps: {
1136
- borderStyle: "solid",
1137
- width: "100%",
1138
- height: "100%",
1139
- borderRadius: "0px 0px 4px 4px",
1140
- borderWidth: "3px",
1141
- backgroundColor: "#FFFFFF",
1142
- borderColor: "#F1F1F1",
1143
- position: "absolute",
1144
- justifyContent: "center",
1145
- alignItems: "stretch",
1146
- flexFlow: "column wrap"
1147
- },
1148
- titleStyleProps: {
1149
- fontFamily: "'Segoe UI',Arial,sans-serif",
1150
- fontWeight: "normal",
1151
- fontSize: "14px",
1152
- color: "#000000",
1153
- textAlign: "center",
1154
- alignSelf: "auto"
1155
- },
1156
- classNames: {
1157
- containerClassName: undefined,
1158
- titleClassName: undefined
1159
- }
1160
- }
1161
- },
1162
- postChatLoadingPaneProps: {
1163
- // Same interface as loadingPaneProps, thus omitting undefined attributes here
1164
- componentOverrides: undefined,
1165
- controlProps: {
1166
- // ...[Existing loading pane control props]
1167
- id: "oc-lcw-postchatloading-pane",
1168
- hideIcon: true,
1169
- hideTitle: true,
1170
- hideSpinner: true,
1171
- hideSpinnerText: true,
1172
- subtitleText: "Please take a moment to give us feedback about your chat experience. We are loading the survey for you now."
1173
- },
1174
- styleProps: {
1175
- // ...[Existing loading pane style props]
1176
- generalStyleProps: {
1177
- position: "initial",
1178
- width: "100%",
1179
- height: "100%",
1180
- left: "0%",
1181
- top: "0%",
1182
- borderRadius: "0 0 4px 4px",
1183
- borderWidth: "0px",
1184
- backgroundColor: "#315FA2"
1185
- }
1186
- }
1187
- },
1188
- postChatSurveyPaneProps: {
1189
- controlProps: {
1190
- id: "oc-lcw-postchatsurvey-pane",
1191
- role: undefined,
1192
- title: "Post chat survey pane",
1193
- surveyURL: ""
1194
- },
1195
- styleProps: {
1196
- generalStyleProps: {
1197
- borderStyle: "solid",
1198
- borderRadius: "0 0 4px 4px",
1199
- borderWidth: "3px",
1200
- backgroundColor: "#FFFFFF",
1201
- borderColor: "#F1F1F1",
1202
- position: "initial",
1203
- height: "100%",
1204
- width: "100%",
1205
- left: "0%",
1206
- top: "0%",
1207
- display: "contents"
1208
- }
1209
- },
1210
- isCustomerVoiceSurveyCompact: undefined
1211
- },
1212
- preChatSurveyPaneProps: {
1213
- controlProps: {
1214
- id: "oc-lcw-prechatsurveypane-default",
1215
- dir: "auto",
1216
- hidePreChatSurveyPane: false,
1217
- adaptiveCardHostConfig: "{\"fontFamily\":\"Segoe UI, Helvetica Neue, sans-serif\",\"containerStyles\":{\"default\":{\"foregroundColors\":{\"default\":{\"default\":\"#000000\"}},\"backgroundColor\":\"#FFFFFF\"}},\"actions\":{\"actionsOrientation\":\"Vertical\",\"actionAlignment\":\"stretch\"}}",
1218
- payload: "{\"$schema\":\"http://adaptivecards.io/schemas/adaptive-card.json\",\"type\":\"AdaptiveCard\",\"version\":\"1.1\",\"body\":[{\"type\":\"TextBlock\",\"weight\":\"bolder\",\"text\":\"Please answer below questions.\"},{\"type\":\"Input.Text\",\"id\":\"1e5e4e7a-8f0b-ec11-b6e6-000d3a305d38\",\"label\":\"name pls?\",\"maxLength\":100,\"isRequired\":true,\"errorMessage\":\"Name is required\"},{\"type\":\"Input.Text\",\"id\":\"7f8f5d6d-995e-ec11-8f8f-000d3a31376e\",\"label\":\"multi\\nmulti\\nmulti\",\"style\":\"text\",\"isMultiline\":true,\"maxLength\":250},{\"type\":\"Input.ChoiceSet\",\"id\":\"e4bdf7cb-995e-ec11-8f8f-000d3a31376e\",\"label\":\"options\",\"isMultiSelect\":false,\"value\":\"1\",\"style\":\"compact\",\"choices\":[{\"title\":\"one\",\"value\":\"1\"},{\"title\":\"two\",\"value\":\"2\"},{\"title\":\"three\",\"value\":\"3\"}]},{\"type\":\"Input.Toggle\",\"id\":\"b26011d2-995e-ec11-8f8f-000d3a31376e\",\"title\":\"consent\",\"valueOn\":\"True\",\"valueOff\":\"False\",\"value\":\"false\"},{\"type\":\"TextBlock\",\"isSubtle\":true,\"text\":\"Fields marked with * are mandatory.\",\"wrap\":true}],\"actions\":[{\"type\":\"Action.Submit\",\"title\":\"Submit\",\"data\":{\"Type\":\"InputSubmit\"}}]}",
1219
- onSubmit: function () {} // Detailed implementation omitted
1220
- },
1221
-
1222
- styleProps: {
1223
- generalStyleProps: {
1224
- borderStyle: "solid",
1225
- borderRadius: "4px",
1226
- borderWidth: "0px",
1227
- backgroundColor: "#FFFFFF",
1228
- borderColor: "#F1F1F1",
1229
- overflowY: "auto",
1230
- height: "inherit",
1231
- width: "inherit"
1232
- },
1233
- customButtonStyleProps: {
1234
- backgroundColor: "rgb(49, 95, 162)",
1235
- color: "#FFFFFF",
1236
- fontFamily: "Segoe UI, Arial, sans-serif",
1237
- fontSize: "15px",
1238
- height: "48px"
1239
- },
1240
- adaptiveCardContainerStyleProps: {
1241
- border: "1px solid #ECECEC",
1242
- borderRadius: "4px",
1243
- margin: "3%"
1244
- },
1245
- customTextInputStyleProps: {
1246
- height: "20px"
1247
- },
1248
- customMultilineTextInputStyleProps: {
1249
- height: "52px"
1250
- }
1251
- }
1252
- },
1253
- proactiveChatPaneProps: {
1254
- componentOverrides: {
1255
- title: undefined,
1256
- subtitle: undefined,
1257
- closeButton: undefined,
1258
- bodyTitle: undefined,
1259
- startButton: undefined
1260
- },
1261
- controlProps: {
1262
- id: "oc-lcw-proactivechat",
1263
- dir: "ltr",
1264
- hideProactiveChatPane: false,
1265
- proactiveChatPaneAriaLabel: "Proactive Chat Pane",
1266
- hideTitle: false,
1267
- titleText: "Welcome to",
1268
- hideSubtitle: false,
1269
- subtitleText: "Live chat support!",
1270
- hideCloseButton: false,
1271
- closeButtonProps: {
1272
- id: "oc-lcw-proactivechat-closebutton",
1273
- type: "icon",
1274
- iconName: "ChromeClose",
1275
- ariaLabel: "Close",
1276
- imageIconProps: undefined,
1277
- text: "Close",
1278
- onClick: undefined,
1279
- className: undefined,
1280
- hideButtonTitle: true
1281
- },
1282
- isBodyContainerHorizantal: false,
1283
- hideBodyTitle: false,
1284
- bodyTitleText: "Hi! Have any questions? I am here to help.",
1285
- hideStartButton: false,
1286
- startButtonText: "Chat Now",
1287
- startButtonAriaLabel: "Chat Now",
1288
- onClose: () => {},
1289
- // Detailed implementation omitted
1290
- onStart: () => {} // Detailed implementation omitted
1291
- },
1292
-
1293
- styleProps: {
1294
- generalStyleProps: {
1295
- backgroundColor: "rgb(255, 255, 255)",
1296
- borderRadius: "8px",
1297
- boxShadow: "0 0 4px rgb(102 102 102 / 50%)",
1298
- bottom: "0",
1299
- height: "auto",
1300
- margin: "3px",
1301
- minHeight: "133px",
1302
- position: "absolute",
1303
- right: "0",
1304
- width: "245px",
1305
- zIndex: "9999"
1306
- },
1307
- headerContainerStyleProps: {
1308
- backgroundColor: "rgb(49, 95, 162)",
1309
- backgroundImage: `url(${ProactiveChatBannerBase64})`,
1310
- backgroundPosition: "initial",
1311
- backgroundRepeat: "no-repeat",
1312
- borderTopLeftRadius: "inherit",
1313
- borderTopRightRadius: "inherit",
1314
- height: "90px",
1315
- padding: "10px 16px 10px 16px"
1316
- },
1317
- textContainerStyleProps: {
1318
- color: "rgb(255, 255, 255)",
1319
- fontFamily: "'Segoe UI', Arial, sans-serif",
1320
- fontSize: "14px",
1321
- fontStyle: "normal",
1322
- fontWeight: "400",
1323
- lineHeight: "19px",
1324
- width: "95%"
1325
- },
1326
- titleStyleProps: {
1327
- color: "rgb(255, 255, 255)",
1328
- fontFamily: "'Segoe UI', Arial, sans-serif"
1329
- },
1330
- subtitleStyleProps: {
1331
- color: "rgb(255, 255, 255)",
1332
- fontFamily: "'Segoe UI', Arial, sans-serif",
1333
- fontSize: "18px",
1334
- fontWeight: "600"
1335
- },
1336
- closeButtonStyleProps: {
1337
- backgroundImage: `url(${CloseChatButtonIconBase64})`,
1338
- backgroundPosition: "center",
1339
- backgroundRepeat: "no-repeat",
1340
- color: "#605e5c",
1341
- cursor: "pointer",
1342
- height: "14px",
1343
- lineHeight: "14px",
1344
- textAlign: "center",
1345
- width: "14px",
1346
- zIndex: "inherit"
1347
- },
1348
- closeButtonHoveredStyleProps: {
1349
- backgroundColor: "",
1350
- color: ""
1351
- },
1352
- bodyContainerStyleProps: {},
1353
- bodyTitleStyleProps: {
1354
- color: "rgb(0, 0, 0)",
1355
- display: "inline-block",
1356
- fontFamily: "'Segoe UI', Arial, sans-serif",
1357
- fontSize: "14px",
1358
- lineHeight: "19px",
1359
- padding: "16px",
1360
- overflow: "hidden",
1361
- wordBreak: "break-word"
1362
- },
1363
- startButtonStyleProps: {
1364
- backgroundColor: "rgb(49, 95, 162)",
1365
- borderRadius: "40px",
1366
- color: "rgb(255, 255, 255)",
1367
- cursor: "pointer",
1368
- fontFamily: "'Segoe UI', Arial, sans-serif",
1369
- margin: "20px 16px 20px 16px",
1370
- padding: "6px 23px 6px 23px",
1371
- width: "50%",
1372
- zIndex: "inherit"
1373
- },
1374
- startButtonHoveredStyleProps: {
1375
- backgroundColor: "",
1376
- color: ""
1377
- },
1378
- classNames: {
1379
- containerClassName: undefined,
1380
- headerContainerClassName: undefined,
1381
- textContainerClassName: undefined,
1382
- titleClassName: undefined,
1383
- subtitleClassName: undefined,
1384
- closeButtonClassName: undefined,
1385
- bodyContainerClassName: undefined,
1386
- bodyTitleClassName: undefined,
1387
- startButtonClassName: undefined
1388
- }
1389
- },
1390
- ProactiveChatInviteTimeoutInMs: 60000
1391
- },
1392
- reconnectChatPaneProps: {
1393
- componentOverrides: {
1394
- title: undefined,
1395
- subtitle: undefined,
1396
- icon: undefined,
1397
- continueChatButton: undefined,
1398
- startNewChatButton: undefined
1399
- },
1400
- controlProps: {
1401
- id: "oc-lcw-reconnectchat-pane",
1402
- dir: "ltr",
1403
- hideReconnectChatPane: false,
1404
- reconnectChatPaneAriaLabel: "Reconnect Chat Pane",
1405
- hideTitle: false,
1406
- titleText: "Previous session detected",
1407
- hideSubtitle: false,
1408
- subtitleText: "We have detected a previous chat session. Would you like to continue with your previous session?",
1409
- hideIcon: false,
1410
- iconAriaLabel: "Reconnect Chat Pane Icon",
1411
- isButtonGroupHorizontal: false,
1412
- hideContinueChatButton: false,
1413
- continueChatButtonText: "Continue conversation",
1414
- continueChatButtonAriaLabel: "Continue conversation",
1415
- hideStartNewChatButton: false,
1416
- startNewChatButtonText: "Start new conversation",
1417
- startNewChatButtonAriaLabel: "Start new conversation",
1418
- onContinueChat: () => {},
1419
- // Detailed implementation omitted
1420
- onStartNewChat: () => {},
1421
- // Detailed implementation omitted
1422
- onMinimize: () => {} // Detailed implementation omitted
1423
- },
1424
-
1425
- styleProps: {
1426
- generalStyleProps: {
1427
- backgroundColor: "rgb(255, 255, 255)",
1428
- borderColor: "#E6E6E6",
1429
- borderRadius: "4px",
1430
- borderStyle: "solid",
1431
- borderWidth: "3px",
1432
- padding: "15px",
1433
- height: "100%",
1434
- width: "100%"
1435
- },
1436
- wrapperStyleProps: {
1437
- backgroundColor: "rgb(255, 255, 255)",
1438
- borderColor: "#E6E6E6",
1439
- borderRadius: "0 8px 8px 8px",
1440
- borderStyle: "solid",
1441
- borderWidth: "1px",
1442
- padding: "20px",
1443
- width: "100%"
1444
- },
1445
- titleStyleProps: {
1446
- color: "rgb(0, 0, 0)",
1447
- fontFamily: "'Segoe UI', Arial, sans-serif",
1448
- fontSize: "16px",
1449
- fontWeight: "600",
1450
- lineHeight: "19px"
1451
- },
1452
- subtitleStyleProps: {
1453
- color: "rgb(0, 0, 0)",
1454
- fontFamily: "'Segoe UI', Arial, sans-serif",
1455
- fontSize: "16px",
1456
- fontWeight: "400",
1457
- lineHeight: "19px"
1458
- },
1459
- iconStyleProps: {
1460
- backgroundImage: `url(${ChatReconnectIconBase64})`,
1461
- backgroundPosition: "center",
1462
- backgroundRepeat: "no-repeat",
1463
- backgroundSize: "200px",
1464
- height: "130px",
1465
- margin: "0 auto",
1466
- width: "130px"
1467
- },
1468
- buttonGroupStyleProps: {
1469
- alignItems: "stretch"
1470
- },
1471
- continueChatButtonStyleProps: {
1472
- backgroundColor: "rgb(49, 95, 162)",
1473
- color: "rgb(255, 255, 255)",
1474
- cursor: "pointer",
1475
- fontFamily: "'Segoe UI', Arial, sans-serif",
1476
- fontSize: "16px",
1477
- fontWeight: "600",
1478
- height: "60px",
1479
- marginBottom: "5px",
1480
- padding: "4px 10px 5px 10px"
1481
- },
1482
- continueChatButtonHoveredStyleProps: {
1483
- filter: "brightness(0.8)"
1484
- },
1485
- startNewChatButtonStyleProps: {
1486
- backgroundColor: "rgb(0, 0, 0)",
1487
- color: "rgb(255, 255, 255)",
1488
- cursor: "pointer",
1489
- fontFamily: "'Segoe UI', Arial, sans-serif",
1490
- fontSize: "16px",
1491
- fontWeight: "600",
1492
- height: "60px",
1493
- padding: "4px 10px 5px 10px"
1494
- },
1495
- startNewChatButtonHoveredStyleProps: {
1496
- backgroundColor: "rgb(132, 132, 130)"
1497
- },
1498
- classNames: {
1499
- containerClassName: undefined,
1500
- wrapperClassName: undefined,
1501
- titleClassName: undefined,
1502
- subtitleClassName: undefined,
1503
- iconClassName: undefined,
1504
- buttonGroupClassName: undefined,
1505
- continueChatButtonClassName: undefined,
1506
- startNewChatButtonClassName: undefined
1507
- }
1508
- },
1509
- reconnectId: undefined,
1510
- redirectInSameWindow: undefined
1511
- },
1512
- startChatErrorPaneProps: {
1513
- controlProps: {
1514
- titleText: "We are unable to load chat at this time.",
1515
- subtitleText: "Please try again later."
1516
- }
1517
- },
1518
- styleProps: {
1519
- generalStyles: {
1520
- position: "absolute",
1521
- justifyContent: "center",
1522
- alignItems: "center",
1523
- // Below general style is for chat button only
1524
- boxShadow: "0px 0px 2px rgba(0, 0, 0, 0.16), 0px 4px 8px rgba(0, 0, 0, 0.12)",
1525
- MozBoxShadow: "0px 0px 2px rgba(0, 0, 0, 0.16), 0px 4px 8px rgba(0, 0, 0, 0.12)",
1526
- WebkitBoxShadow: "0px 0px 2px rgba(0, 0, 0, 0.16), 0px 4px 8px rgba(0, 0, 0, 0.12)",
1527
- borderRadius: "4px",
1528
- padding: "0.5"
1529
- },
1530
- className: undefined
1531
- },
1532
- webChatContainerProps: {
1533
- containerStyles: {
1534
- height: "100%",
1535
- width: "100%",
1536
- overflowY: "hidden"
1537
- },
1538
- webChatStyles: {
1539
- // For the full list of WebChat StyleOptions, see https://github.com/microsoft/BotFramework-WebChat/blob/main/packages/api/src/StyleOptions.ts
1540
- avatarSize: 32,
1541
- backgroundColor: "#F7F7F9",
1542
- botAvatarBackgroundColor: "#315FA2",
1543
- botAvatarInitials: "WC",
1544
- bubbleBackground: "#315FA2",
1545
- bubbleBorderRadius: 4,
1546
- bubbleBorderWidth: 0,
1547
- bubbleFromUserBackground: "#FFFFFF",
1548
- bubbleFromUserBorderRadius: 4,
1549
- bubbleFromUserBorderWidth: 1,
1550
- bubbleFromUserTextColor: "Black",
1551
- bubbleImageHeight: 240,
1552
- bubbleMaxWidth: 250,
1553
- bubbleMinHeight: 34,
1554
- bubbleMinWidth: 20,
1555
- bubbleTextColor: "#FFFFFF",
1556
- hideSendBox: false,
1557
- hideUploadButton: true,
1558
- primaryFont: "Segoe UI, Arial, sans-serif",
1559
- rootHeight: "100%",
1560
- rootWidth: "100%",
1561
- sendBoxTextWrap: true,
1562
- sendBoxHeight: 60,
1563
- sendBoxMaxHeight: 96,
1564
- sendBoxBackground: "#FFFFFF",
1565
- showAvatarInGroup: true,
1566
- suggestedActionsStackedHeight: 125,
1567
- suggestedActionsStackedOverflow: "scroll",
1568
- // eslint-disable-line @typescript-eslint/no-explicit-any
1569
- typingAnimationDuration: 3500
1570
- },
1571
- webChatProps: {
1572
- // "core" props: language-neutral, SHOULD work on React Native (if we work on that later)
1573
- activityMiddleware: createActivityMiddleware(),
1574
- activityStatusMiddleware: activityStatusMiddleware,
1575
- attachmentForScreenReaderMiddleware: undefined,
1576
- attachmentMiddleware: createAttachmentMiddleware(true),
1577
- avatarMiddleware: createAvatarMiddleware(),
1578
- cardActionMiddleware: undefined,
1579
- children: undefined,
1580
- dir: "ltr",
1581
- disabled: undefined,
1582
- downscaleImageToDataURL: undefined,
1583
- grammars: undefined,
1584
- groupActivitiesMiddleware: groupActivitiesMiddleware,
1585
- internalErrorBoxClass: undefined,
1586
- internalRenderErrorBox: undefined,
1587
- locale: "en-US",
1588
- onTelemetry: createWebChatTelemetry(),
1589
- overrideLocalizedStrings: undefined,
1590
- renderMarkdown: createMarkdown(false, false),
1591
- scrollToEndButtonMiddleware: undefined,
1592
- selectVoice: undefined,
1593
- sendTypingIndicator: undefined,
1594
- store: WebChatStoreLoader.store,
1595
- toastMiddleware: undefined,
1596
- typingIndicatorMiddleware: typingIndicatorMiddleware,
1597
- userID: undefined,
1598
- username: undefined,
1599
- // "api" props: these stuff probably only works when in a web browser
1600
- extraStyleSet: undefined,
1601
- nonce: undefined,
1602
- styleSet: undefined,
1603
- suggestedActionsAccessKey: undefined,
1604
- webSpeechPonyfillFactory: undefined,
1605
- // "bundle" props: these stuff are not available if you "decompose" or "recompose" Web Chat.
1606
- // I.e. not using composition mode (or <Composer>).
1607
- className: undefined,
1608
- role: undefined
1609
- },
1610
- directLine: undefined,
1611
- storeMiddlewares: undefined,
1612
- // Additional store middlewares
1613
- renderingMiddlewareProps: {
1614
- timestampDir: "ltr",
1615
- disableActivityMiddleware: false,
1616
- disableAttachmentMiddleware: false,
1617
- disableActivityStatusMiddleware: false,
1618
- disableAvatarMiddleware: false,
1619
- disableGroupActivitiesMiddleware: false,
1620
- disableTypingIndicatorMiddleware: false,
1621
- hideSendboxOnConversationEnd: true,
1622
- userMessageStyleProps: {
1623
- fontSize: "14px"
1624
- },
1625
- systemMessageStyleProps: {
1626
- maxWidth: "100%",
1627
- color: "#605E5C",
1628
- background: "transparent",
1629
- fontSize: "12px",
1630
- borderRadius: 0,
1631
- minHeight: "auto",
1632
- fontFamily: "Segoe UI",
1633
- lineHeight: "16px",
1634
- padding: "0px 10px 0 10px"
1635
- },
1636
- userMessageBoxStyles: {
1637
- maxWidth: "90%"
1638
- },
1639
- systemMessageBoxStyles: {
1640
- maxWidth: "90%"
1641
- },
1642
- typingIndicatorStyleProps: {
1643
- marginLeft: "10px",
1644
- marginBottom: "5px",
1645
- display: "flex",
1646
- transition: "all .5s ease",
1647
- alignItems: "center"
1648
- },
1649
- typingIndicatorBubbleStyleProps: {
1650
- height: "6px",
1651
- width: "6px",
1652
- borderRadius: "6px",
1653
- background: "#315FA2",
1654
- animationDuration: "2s",
1655
- animationName: "bounce",
1656
- animationTimingFunction: "ease",
1657
- animationIterationCount: "infinite",
1658
- marginRight: "2px"
1659
- },
1660
- typingIndicatorMessageStyleProps: {
1661
- fontFamily: "\"Segoe UI\", Arial, sans-serif",
1662
- background: "transparent",
1663
- fontSize: "12px",
1664
- lineHeight: "15px",
1665
- color: "#605e5c",
1666
- marginLeft: "6px"
1667
- },
1668
- avatarStyleProps: {
1669
- width: "32px",
1670
- height: "32px",
1671
- borderRadius: "16px",
1672
- textAlign: "center",
1673
- backgroundColor: "#315FA2"
1674
- },
1675
- avatarTextStyleProps: {
1676
- margin: "0",
1677
- fontFamily: "\"Segoe UI\", Arial, sans-serif",
1678
- fontWeight: 600,
1679
- fontSize: "13px",
1680
- lineHeight: "18px",
1681
- color: "#FFFFFF",
1682
- paddingTop: "7px",
1683
- WebkitUserSelect: "none",
1684
- MozUserSelect: "none",
1685
- userSelect: "none"
1686
- },
1687
- timestampContentStyleProps: {
1688
- color: "#565452",
1689
- fontFamily: "\"Segoe UI\", Arial, sans-serif",
1690
- background: "transparent",
1691
- fontSize: "11px",
1692
- lineHeight: "15px",
1693
- paddingTop: 0
1694
- },
1695
- timestampFailedTextStyleProps: {
1696
- fontFamily: "\"Segoe UI\", Arial, sans-serif",
1697
- background: "transparent",
1698
- fontSize: "11px",
1699
- lineHeight: "15px",
1700
- paddingTop: 0,
1701
- color: "#A80000"
1702
- },
1703
- timestampRetryTextStyleProps: {
1704
- fontFamily: "\"Segoe UI\", Arial, sans-serif",
1705
- background: "transparent",
1706
- fontSize: "11px",
1707
- lineHeight: "15px",
1708
- paddingTop: 0,
1709
- color: "#0063B1",
1710
- cursor: "pointer"
1711
- },
1712
- attachmentProps: {
1713
- webChatAttachmentId: "oc-lcw-webchat-attachment",
1714
- adaptiveCardAttachmentId: "ms_lcw_webchat_adaptive_card",
1715
- enableInlinePlaying: true
1716
- },
1717
- attachmentDividerStyles: {
1718
- margin: "0",
1719
- height: "1px",
1720
- border: "0px",
1721
- backgroundColor: "#E8EAEC"
1722
- },
1723
- attachmentStyles: {
1724
- display: "flex",
1725
- alignItems: "center",
1726
- background: "transparent",
1727
- fontSize: "12px",
1728
- lineHeight: "16px",
1729
- boxSizing: "border-box",
1730
- borderRadius: "2px",
1731
- wordBreak: "break-all"
1732
- },
1733
- attachmentIconStyles: {
1734
- direction: "rtl",
1735
- padding: "0 0 0 8px",
1736
- lineHeight: 0
1737
- },
1738
- attachmentAdaptiveCardStyles: {
1739
- borderStyle: "solid",
1740
- borderColor: "rgb(230, 230, 230)",
1741
- borderWidth: "1px"
1742
- },
1743
- attachmentFileNameStyles: {
1744
- minHeight: "15px",
1745
- marginLeft: "5px",
1746
- marginRight: "5px",
1747
- color: "#000000 !important"
1748
- },
1749
- attachmentDownloadIconStyles: {
1750
- height: "12px",
1751
- width: "12px",
1752
- marginLeft: "auto !important",
1753
- padding: "2px !important",
1754
- fill: "#000000 !important"
1755
- },
1756
- attachmentContentStyles: {
1757
- width: "200px"
1758
- },
1759
- attachmentSizeStyles: {
1760
- display: "none"
1761
- },
1762
- receivedMessageAnchorStyles: {
1763
- color: "white"
1764
- }
1765
- },
1766
- localizedTexts: {
1767
- /*
1768
- MIDDLEWARE_BANNER_FILE parameters:
1769
- {0} = File limit size
1770
- {1} = File extension
1771
- {2} = File name
1772
- */
1773
- MIDDLEWARE_BANNER_FILE_NULL_ERROR: "There was an error uploading the file, please try again.",
1774
- MIDDLEWARE_BANNER_FILE_SIZE_WITHOUT_EXTENSION_ERROR: "File {2} exceeds the allowed limit of {0} MB and please upload the file with an appropriate file extension.",
1775
- MIDDLEWARE_BANNER_FILE_SIZE_EXTENSION_ERROR: "File {2} exceeds the allowed limit of {0} MB and {1} files are not supported.",
1776
- MIDDLEWARE_BANNER_FILE_WITHOUT_EXTENSION: "File upload error. Please upload the file {2} with an appropriate file extension.",
1777
- MIDDLEWARE_BANNER_FILE_EXTENSION_ERROR: "{1} files are not supported.",
1778
- MIDDLEWARE_BANNER_FILE_SIZE_ERROR: "File {2} exceeds the allowed limit of {0} MB.",
1779
- MIDDLEWARE_BANNER_FILE_IS_EMPTY_ERROR: "This file {2} can't be attached because it's empty. Please try again with a different file.",
1780
- MIDDLEWARE_BANNER_ERROR_MESSAGE: "Upload failed, please try again.",
1781
- MIDDLEWARE_BANNER_INTERNET_BACK_ONLINE: "You're back online.",
1782
- MIDDLEWARE_BANNER_NO_INTERNET_CONNECTION: "Unable to connect—please check your internet connection.",
1783
- MIDDLEWARE_MAX_CHARACTER_COUNT_EXCEEDED: "This message is too long. Please shorten your message to avoid sending failure.",
1784
- MIDDLEWARE_TYPING_INDICATOR_ONE: "{0} is typing ...",
1785
- MIDDLEWARE_TYPING_INDICATOR_TWO: "{0} and {1} are typing ...",
1786
- MIDDLEWARE_TYPING_INDICATOR_MULTIPLE: "{0} agents are typing ...",
1787
- MIDDLEWARE_MESSAGE_SENDING: "Sending ...",
1788
- MIDDLEWARE_MESSAGE_DELIVERED: "Sent",
1789
- MIDDLEWARE_MESSAGE_NOT_DELIVERED: "Not Delivered",
1790
- MIDDLEWARE_MESSAGE_RETRY: "Retry",
1791
- PRECHAT_REQUIRED_FIELD_MISSING_MESSAGE: "{0} field is required",
1792
- MARKDOWN_EXTERNAL_LINK_ALT: "Opens in a new window; external.",
1793
- MIDDLEWARE_BANNER_CHAT_DISCONNECT: "Your conversation has been disconnected. For additional assistance, please start a new chat."
1794
- },
1795
- botMagicCode: {
1796
- disabled: false,
1797
- fwdUrl: ""
1798
- },
1799
- adaptiveCardStyles: {
1800
- background: "white",
1801
- color: "black",
1802
- anchorColor: "blue",
1803
- textWhiteSpace: "normal",
1804
- buttonWhiteSpace: "normal"
1805
- },
1806
- hyperlinkTextOverride: false
1807
- },
1808
- telemetryConfig: undefined,
1809
- getAuthToken: undefined,
1810
- initialCustomContext: undefined
1811
- };