pager-widget 0.2.5 → 0.2.7
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/App.jsx +1149 -983
- package/ConsentPopup.jsx +265 -94
- package/Dropdown.jsx +36 -23
- package/InputConverter.jsx +45 -42
- package/dist/lib.js +3144 -10
- package/md/assistant_md.js +32 -22
- package/package.json +2 -1
package/App.jsx
CHANGED
|
@@ -4,6 +4,16 @@ import AssistantMd, {
|
|
|
4
4
|
} from "./md/assistant_md";
|
|
5
5
|
import React, { useEffect, useRef, useState } from "react";
|
|
6
6
|
import { ScaleSizeProvider, useScaleContext } from "./useScale";
|
|
7
|
+
import {
|
|
8
|
+
ChevronLeftIcon,
|
|
9
|
+
InfoIcon,
|
|
10
|
+
Maximize2Icon,
|
|
11
|
+
XIcon,
|
|
12
|
+
ThumbsDownIcon,
|
|
13
|
+
ThumbsUpIcon,
|
|
14
|
+
SendIcon,
|
|
15
|
+
EllipsisVertical,
|
|
16
|
+
} from "lucide-react";
|
|
7
17
|
|
|
8
18
|
import autosize from "autosize";
|
|
9
19
|
// import ContentEditable from './contentEditable'
|
|
@@ -32,36 +42,50 @@ const switchSize = (size, small, medium, large) => {
|
|
|
32
42
|
}
|
|
33
43
|
};
|
|
34
44
|
|
|
35
|
-
const
|
|
45
|
+
const ThreeDotTyping = styled.div`
|
|
46
|
+
padding: 0px;
|
|
47
|
+
margin: 0px;
|
|
48
|
+
|
|
49
|
+
.typing-dots {
|
|
50
|
+
display: flex;
|
|
51
|
+
padding: 0px;
|
|
52
|
+
margin: 0px;
|
|
53
|
+
justify-content: center;
|
|
54
|
+
align-items: center;
|
|
55
|
+
height: auto;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.dot {
|
|
59
|
+
width: 8px;
|
|
60
|
+
height: 8px;
|
|
61
|
+
margin: 0 5px;
|
|
62
|
+
background-color: #564cff;
|
|
63
|
+
border-radius: 50%;
|
|
64
|
+
animation: blink 1.4s infinite both;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.dot:nth-child(2) {
|
|
68
|
+
animation-delay: 0.2s;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.dot:nth-child(3) {
|
|
72
|
+
animation-delay: 0.4s;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@keyframes blink {
|
|
76
|
+
0%,
|
|
77
|
+
80%,
|
|
78
|
+
100% {
|
|
79
|
+
opacity: 0;
|
|
80
|
+
}
|
|
81
|
+
40% {
|
|
82
|
+
opacity: 1;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
`;
|
|
36
86
|
|
|
37
|
-
|
|
38
|
-
width: ${(props) =>
|
|
39
|
-
right: 4.5rem;
|
|
40
|
-
bottom: 4.5rem;
|
|
41
|
-
}
|
|
42
|
-
@media (min-width: 2560px) {
|
|
43
|
-
width ${(props) => switchSize(props.size, "720px", "840px", "920px")};
|
|
44
|
-
right: 5.5rem;
|
|
45
|
-
bottom: 6.5rem;
|
|
46
|
-
}
|
|
47
|
-
@media (min-width: 3840px) {
|
|
48
|
-
width ${(props) => switchSize(props.size, "1080px", "1200px", "1360px")};
|
|
49
|
-
right: 6.5rem;
|
|
50
|
-
bottom: 7.5rem;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
@media (max-width: 1920px) {
|
|
54
|
-
width: ${(props) => switchSize(props.size, "540px", "600px", "680px")};
|
|
55
|
-
}
|
|
56
|
-
@media (max-width: 1680px) {
|
|
57
|
-
width: ${(props) => switchSize(props.size, "460px", "540px", "560px")};
|
|
58
|
-
}
|
|
59
|
-
@media (max-width: 1280px) {
|
|
60
|
-
width: ${(props) => switchSize(props.size, "360px", "400px", "440px")};
|
|
61
|
-
right: 3rem;
|
|
62
|
-
bottom: 3rem;
|
|
63
|
-
}
|
|
64
|
-
width: 680px;
|
|
87
|
+
const WidgetPreview = styled.div`
|
|
88
|
+
width: ${(props) => (props.isExpanded ? "600px" : "390px")};
|
|
65
89
|
height: auto;
|
|
66
90
|
float: left;
|
|
67
91
|
position: fixed;
|
|
@@ -69,9 +93,12 @@ const WidgetPreview = styled.div`
|
|
|
69
93
|
bottom: 3.5rem;
|
|
70
94
|
background: #f6f8fa 0% 0% no-repeat padding-box;
|
|
71
95
|
box-shadow: 0px 15px 30px #00000040;
|
|
72
|
-
border-radius:
|
|
96
|
+
border-radius: 22px;
|
|
73
97
|
box-sizing: border-box;
|
|
74
98
|
font-family: "Open Sans", sans-serif;
|
|
99
|
+
transition: 0.4s;
|
|
100
|
+
transition-property: all;
|
|
101
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
75
102
|
`;
|
|
76
103
|
const FormHeader = styled.div`
|
|
77
104
|
display: flex;
|
|
@@ -79,33 +106,15 @@ const FormHeader = styled.div`
|
|
|
79
106
|
width: 100%;
|
|
80
107
|
float: left;
|
|
81
108
|
font-family: "Inter", "Open Sans";
|
|
82
|
-
font-size:
|
|
83
|
-
color: #
|
|
84
|
-
margin
|
|
109
|
+
font-size: 16px;
|
|
110
|
+
color: #020618;
|
|
111
|
+
margin: 0px 12px;
|
|
85
112
|
margin-bottom: 0px;
|
|
86
113
|
justify-content: space-between;
|
|
87
114
|
max-width: none;
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
margin-bottom: 3px;
|
|
92
|
-
}
|
|
93
|
-
@media (min-width: 2560px) {
|
|
94
|
-
font-size: ${(props) => switchSize(props.size, "20px", "24px", "30px")};
|
|
95
|
-
}
|
|
96
|
-
@media (min-width: 3840px) {
|
|
97
|
-
font-size: ${(props) => switchSize(props.size, "36px", "40px", "44px")};
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
@media (max-width: 1920px) {
|
|
101
|
-
font-size: ${(props) => switchSize(props.size, "18px", "20px", "22px")};
|
|
102
|
-
}
|
|
103
|
-
@media (max-width: 1680px) {
|
|
104
|
-
font-size: ${(props) => switchSize(props.size, "15px", "18px", "18px")};
|
|
105
|
-
}
|
|
106
|
-
@media (max-width: 1280px) {
|
|
107
|
-
font-size: ${(props) => switchSize(props.size, "10px", "12px", "15px")};
|
|
108
|
-
}
|
|
115
|
+
font-style: normal;
|
|
116
|
+
font-weight: 600;
|
|
117
|
+
line-height: 24px;
|
|
109
118
|
|
|
110
119
|
.target.customTip {
|
|
111
120
|
width: 12px;
|
|
@@ -124,6 +133,7 @@ const FormHeader = styled.div`
|
|
|
124
133
|
`;
|
|
125
134
|
const ChatWrapper = styled.div`
|
|
126
135
|
box-sizing: border-box;
|
|
136
|
+
height: 728px;
|
|
127
137
|
|
|
128
138
|
.widget_footer{
|
|
129
139
|
display: flex;
|
|
@@ -242,72 +252,7 @@ const ChatWrapper = styled.div`
|
|
|
242
252
|
|
|
243
253
|
`;
|
|
244
254
|
const ChatContentWrapper = styled.div`
|
|
245
|
-
|
|
246
|
-
@media (min-width: 2160px) {
|
|
247
|
-
height: ${(props) =>
|
|
248
|
-
switchSize(
|
|
249
|
-
props.size,
|
|
250
|
-
"calc(100vh - 60vh)",
|
|
251
|
-
"calc(100vh - 56vh)",
|
|
252
|
-
"calc(100vh - 44vh)"
|
|
253
|
-
)};
|
|
254
|
-
}
|
|
255
|
-
@media (min-width: 2560px) {
|
|
256
|
-
height: ${(props) =>
|
|
257
|
-
switchSize(
|
|
258
|
-
props.size,
|
|
259
|
-
"calc(100vh - 47.4vh)",
|
|
260
|
-
"calc(100vh - 41.6vh)",
|
|
261
|
-
"calc(100vh - 33.9vh)"
|
|
262
|
-
)};
|
|
263
|
-
}
|
|
264
|
-
@media (min-width: 3840px) {
|
|
265
|
-
height: ${(props) =>
|
|
266
|
-
switchSize(
|
|
267
|
-
props.size,
|
|
268
|
-
"calc(100vh - 48vh)",
|
|
269
|
-
"calc(100vh - 43vh)",
|
|
270
|
-
"calc(100vh - 38vh)"
|
|
271
|
-
)};
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
@media (max-width: 1920px) {
|
|
275
|
-
height: ${(props) =>
|
|
276
|
-
switchSize(
|
|
277
|
-
props.size,
|
|
278
|
-
"calc(100vh - 44.8vh)",
|
|
279
|
-
"calc(100vh - 37.4vh)",
|
|
280
|
-
"calc(100vh - 28vh)"
|
|
281
|
-
)};
|
|
282
|
-
}
|
|
283
|
-
@media (max-width: 1680px) {
|
|
284
|
-
height: ${(props) =>
|
|
285
|
-
switchSize(
|
|
286
|
-
props.size,
|
|
287
|
-
"calc(100vh - 45vh)",
|
|
288
|
-
"calc(100vh - 37.4vh)",
|
|
289
|
-
"calc(100vh - 31.5vh)"
|
|
290
|
-
)};
|
|
291
|
-
}
|
|
292
|
-
@media (max-width: 1440px) {
|
|
293
|
-
height: ${(props) =>
|
|
294
|
-
switchSize(
|
|
295
|
-
props.size,
|
|
296
|
-
"calc(100vh - 44.8vh)",
|
|
297
|
-
"calc(100vh - 37.4vh)",
|
|
298
|
-
"calc(100vh - 40vh)"
|
|
299
|
-
)};
|
|
300
|
-
}
|
|
301
|
-
@media (max-width: 1280px) {
|
|
302
|
-
height: ${(props) =>
|
|
303
|
-
switchSize(
|
|
304
|
-
props.size,
|
|
305
|
-
"calc(100vh - 53.3vh)",
|
|
306
|
-
"calc(100vh - 48vh)",
|
|
307
|
-
"calc(100vh - 42vh)"
|
|
308
|
-
)};
|
|
309
|
-
}
|
|
310
|
-
height: calc(100vh - 28vh);
|
|
255
|
+
height: 85%;
|
|
311
256
|
width: 100%;
|
|
312
257
|
float: left;
|
|
313
258
|
padding: 12px 20px 20px 15px;
|
|
@@ -322,6 +267,44 @@ const ChatContentWrapper = styled.div`
|
|
|
322
267
|
// background-repeat: no-repeat;
|
|
323
268
|
}
|
|
324
269
|
`;
|
|
270
|
+
|
|
271
|
+
const BodyNotesWrapper = styled.div`
|
|
272
|
+
display: flex;
|
|
273
|
+
flex-direction: column;
|
|
274
|
+
align-items: flex-start;
|
|
275
|
+
gap: 16px;
|
|
276
|
+
margin-bottom: 12px;
|
|
277
|
+
`;
|
|
278
|
+
|
|
279
|
+
const OperationHourWrapper = styled.span`
|
|
280
|
+
color: #62748e;
|
|
281
|
+
text-align: center;
|
|
282
|
+
font-size: 12px;
|
|
283
|
+
font-family: "Inter", "Open Sans";
|
|
284
|
+
font-style: normal;
|
|
285
|
+
font-weight: 400;
|
|
286
|
+
line-height: 18px;
|
|
287
|
+
`;
|
|
288
|
+
|
|
289
|
+
const NotesWrapper = styled.div`
|
|
290
|
+
display: flex;
|
|
291
|
+
padding: 10px 10px 10px 12px;
|
|
292
|
+
align-items: flex-start;
|
|
293
|
+
gap: 8px;
|
|
294
|
+
align-self: stretch;
|
|
295
|
+
border-radius: 12px;
|
|
296
|
+
border: 1px solid var(--zinc-200, #e4e4e7);
|
|
297
|
+
`;
|
|
298
|
+
|
|
299
|
+
const InfoContent = styled.span`
|
|
300
|
+
color: #1d293d;
|
|
301
|
+
font-family: "Inter", "Open Sans";
|
|
302
|
+
font-size: 12px;
|
|
303
|
+
font-style: normal;
|
|
304
|
+
font-weight: 400;
|
|
305
|
+
line-height: 18px;
|
|
306
|
+
`;
|
|
307
|
+
|
|
325
308
|
const AssistantChat = styled.div`
|
|
326
309
|
width: 100%;
|
|
327
310
|
float: left;
|
|
@@ -331,200 +314,6 @@ const AssistantChat = styled.div`
|
|
|
331
314
|
flex-direction: column;
|
|
332
315
|
position: relative;
|
|
333
316
|
margin-bottom: 12px;
|
|
334
|
-
|
|
335
|
-
@media (min-width: 2160px) {
|
|
336
|
-
}
|
|
337
|
-
@media (min-width: 2560px) {
|
|
338
|
-
}
|
|
339
|
-
@media (min-width: 3840px) {
|
|
340
|
-
margin-bottom: 30px;
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
// .tryit_cards_top_right {
|
|
344
|
-
// position: relative;
|
|
345
|
-
// width: 78%;
|
|
346
|
-
// float: left;
|
|
347
|
-
// padding-left: 0;
|
|
348
|
-
// height: 100%;
|
|
349
|
-
// display: flex;
|
|
350
|
-
// flex-wrap: wrap;
|
|
351
|
-
// align-items: center;
|
|
352
|
-
// padding: 0 4px;
|
|
353
|
-
// min-height: 54px;
|
|
354
|
-
// }
|
|
355
|
-
// .timestamp {
|
|
356
|
-
// color: #888;
|
|
357
|
-
// font-size: 10px;
|
|
358
|
-
// font-family: "Inter", "Open Sans";
|
|
359
|
-
// }
|
|
360
|
-
|
|
361
|
-
// .tryit_cards h4 {
|
|
362
|
-
// font-size: 13px;
|
|
363
|
-
// margin-top: 10px;
|
|
364
|
-
// margin-bottom: 0px;
|
|
365
|
-
// font-family: "Inter", "Open Sans";
|
|
366
|
-
// width: 100%;
|
|
367
|
-
// color: #fff;
|
|
368
|
-
|
|
369
|
-
// @media (max-width: 1280px) {
|
|
370
|
-
// font-size: 11px;
|
|
371
|
-
// }
|
|
372
|
-
// }
|
|
373
|
-
// .tryit_cards .tryit_cards_top_right p {
|
|
374
|
-
// font-size: 12px;
|
|
375
|
-
// color: #fff;
|
|
376
|
-
// max-width: 100%;
|
|
377
|
-
// font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
378
|
-
// margin: 0 0 8px 0;
|
|
379
|
-
|
|
380
|
-
// @media (max-width: 1280px) {
|
|
381
|
-
// font-size: 10px;
|
|
382
|
-
// }
|
|
383
|
-
// }
|
|
384
|
-
// .tryit_ticket_details_wrapper button {
|
|
385
|
-
// min-height: 28px;
|
|
386
|
-
// }
|
|
387
|
-
// .tryit_wrapper_card {
|
|
388
|
-
// width: 90%;
|
|
389
|
-
// margin-left: 12px;
|
|
390
|
-
// margin-top: 12px;
|
|
391
|
-
// border: none !important;
|
|
392
|
-
|
|
393
|
-
// .adaptive_tail_icon {
|
|
394
|
-
// position: absolute;
|
|
395
|
-
// }
|
|
396
|
-
// .adaptive_tail_icon svg {
|
|
397
|
-
// width: 6px;
|
|
398
|
-
// height: 6px;
|
|
399
|
-
// top: 0px;
|
|
400
|
-
// margin-left: -5px;
|
|
401
|
-
// position: absolute;
|
|
402
|
-
// }
|
|
403
|
-
|
|
404
|
-
// .tryit_cards {
|
|
405
|
-
// margin-top: 0px;
|
|
406
|
-
// width: 98.2%;
|
|
407
|
-
// min-height : 200px;
|
|
408
|
-
// background: #FFFFFF 0% 0% no-repeat padding-box ;
|
|
409
|
-
// box-shadow: 0px 3px 6px #00000029 !important;
|
|
410
|
-
// border-radius: 10px;
|
|
411
|
-
// padding: 12px 30px 12px 0px;
|
|
412
|
-
// float: left;
|
|
413
|
-
|
|
414
|
-
// .widget_title {
|
|
415
|
-
// padding-left : 22px;
|
|
416
|
-
// }
|
|
417
|
-
|
|
418
|
-
// .tryit_ticket_wrapper{
|
|
419
|
-
// padding: 16px 0px 0 16px;
|
|
420
|
-
// box-shadow: none;
|
|
421
|
-
// width: 95.5%;
|
|
422
|
-
// max-height: 164px;
|
|
423
|
-
// overflow-y: scroll;
|
|
424
|
-
// background: #fff;
|
|
425
|
-
// border-radius: 0px 10px 10px 10px;
|
|
426
|
-
// float: left;
|
|
427
|
-
|
|
428
|
-
// .tryit_ticket_details_wrapper{
|
|
429
|
-
// grid-template-columns: auto;
|
|
430
|
-
|
|
431
|
-
// .tryit_ticket_details{
|
|
432
|
-
// .tryit_ticket_colun{
|
|
433
|
-
// width: auto;
|
|
434
|
-
// }
|
|
435
|
-
// }
|
|
436
|
-
// }
|
|
437
|
-
// div:nth-child(3) h6{
|
|
438
|
-
// width: 35%;
|
|
439
|
-
// }
|
|
440
|
-
// .tryit_ticket_details span{
|
|
441
|
-
// position: relative;
|
|
442
|
-
// bottom: 0px;
|
|
443
|
-
// }
|
|
444
|
-
// }
|
|
445
|
-
|
|
446
|
-
// .widget_title{
|
|
447
|
-
// gap: 0 8px;
|
|
448
|
-
// align-items: center;
|
|
449
|
-
// margin-bottom: 2px;
|
|
450
|
-
// display: flex;
|
|
451
|
-
|
|
452
|
-
// h6{
|
|
453
|
-
// font-size: 13px;
|
|
454
|
-
// font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
|
|
455
|
-
// color: #333;
|
|
456
|
-
// margin: 0;
|
|
457
|
-
// }
|
|
458
|
-
// }
|
|
459
|
-
// }
|
|
460
|
-
// .tryit_cards .tryit_cards_wrapper {
|
|
461
|
-
// width: 99%;
|
|
462
|
-
// float: left;
|
|
463
|
-
// background: #fff;
|
|
464
|
-
// border-top: none;
|
|
465
|
-
// border-bottom-right-radius: 10px;
|
|
466
|
-
// border-bottom-left-radius: 12px;
|
|
467
|
-
// border: 1px solid #c8c8c8;
|
|
468
|
-
// }
|
|
469
|
-
|
|
470
|
-
// .tryit_ticket_wrapper.tryit_button_wrapper {
|
|
471
|
-
// padding-top: 0px;
|
|
472
|
-
// display: flex;
|
|
473
|
-
// justify-content: flex-start;
|
|
474
|
-
// flex-direction: row;
|
|
475
|
-
// flex-wrap: wrap;
|
|
476
|
-
// gap: 0 8px;
|
|
477
|
-
// margin-bottom: 12px;
|
|
478
|
-
// padding-bottom: 6px;
|
|
479
|
-
// }
|
|
480
|
-
|
|
481
|
-
// .tryit_button_wrapper .tryit_ticket_details_wrapper {
|
|
482
|
-
// left: inherit;
|
|
483
|
-
// width: max-content;
|
|
484
|
-
// width: 100%;
|
|
485
|
-
|
|
486
|
-
// button {
|
|
487
|
-
// margin-top: 0px;
|
|
488
|
-
// min-width: unset;
|
|
489
|
-
// width: 100%;
|
|
490
|
-
// max-width: 100%;
|
|
491
|
-
// margin-right: 0px;
|
|
492
|
-
// margin-bottom: 6px;
|
|
493
|
-
// :hover {
|
|
494
|
-
// box-shadow: 0px 3px 5px #00000029;
|
|
495
|
-
// }
|
|
496
|
-
// }
|
|
497
|
-
// }
|
|
498
|
-
// }
|
|
499
|
-
|
|
500
|
-
// .tryit_ticket_details_wrapper .tryit_ticket_details {
|
|
501
|
-
// // margin-bottom: 10px;
|
|
502
|
-
// flex-direction: row;
|
|
503
|
-
// gap: 0 8px;
|
|
504
|
-
// align-items: baseline;
|
|
505
|
-
// display: flex;
|
|
506
|
-
// margin-bottom: 10px;
|
|
507
|
-
// }
|
|
508
|
-
// .tryit_ticket_wrapper h6 {
|
|
509
|
-
// font-size: 12px;
|
|
510
|
-
// width: 35%;
|
|
511
|
-
// margin: 0;
|
|
512
|
-
// font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
|
|
513
|
-
// }
|
|
514
|
-
// .tryit_ticket_wrapper p{
|
|
515
|
-
// font-size: 12px;
|
|
516
|
-
// line-height: normal;
|
|
517
|
-
// position: relative;
|
|
518
|
-
// bottom: 1px;
|
|
519
|
-
// width: 60%;
|
|
520
|
-
// font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
521
|
-
// margin: 0;
|
|
522
|
-
// word-break: break-word;
|
|
523
|
-
// }
|
|
524
|
-
|
|
525
|
-
// .tryit_ticket_wrapper p:first-child{
|
|
526
|
-
// bottom: 3px;
|
|
527
|
-
// }
|
|
528
317
|
`;
|
|
529
318
|
const LogoSize = styled.div`
|
|
530
319
|
width: 40px;
|
|
@@ -537,6 +326,7 @@ const LogoSize = styled.div`
|
|
|
537
326
|
display: flex;
|
|
538
327
|
justify-content: center;
|
|
539
328
|
align-items: center;
|
|
329
|
+
border: none;
|
|
540
330
|
|
|
541
331
|
img {
|
|
542
332
|
width: 36px;
|
|
@@ -551,104 +341,27 @@ const LogoSize = styled.div`
|
|
|
551
341
|
`;
|
|
552
342
|
const ChatHeader = styled.div`
|
|
553
343
|
width: 100%;
|
|
554
|
-
height:
|
|
344
|
+
height: 60px;
|
|
555
345
|
display: flex;
|
|
556
346
|
align-items: center;
|
|
557
|
-
padding:
|
|
347
|
+
padding: 0px 20px;
|
|
558
348
|
background: #ffd15c;
|
|
559
|
-
border-top-left-radius:
|
|
560
|
-
border-top-right-radius:
|
|
349
|
+
border-top-left-radius: 22px;
|
|
350
|
+
border-top-right-radius: 22px;
|
|
561
351
|
background-position: right;
|
|
562
352
|
background-size: contain;
|
|
563
353
|
justify-content: space-between;
|
|
564
354
|
box-sizing: border-box;
|
|
565
355
|
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
@media (min-width: 2560px) {
|
|
570
|
-
height: ${(props) => switchSize(props.size, "120px", "138px", "152px")};
|
|
571
|
-
gap: 0px 10px;
|
|
572
|
-
padding: 0 22px 0 26px;
|
|
573
|
-
}
|
|
574
|
-
@media (min-width: 3840px) {
|
|
575
|
-
height: ${(props) => switchSize(props.size, "180px", "198px", "224px")};
|
|
576
|
-
padding: 0 24px 0 28px;
|
|
577
|
-
border-top-left-radius: 20px;
|
|
578
|
-
border-top-right-radius: 20px;
|
|
579
|
-
}
|
|
580
|
-
|
|
581
|
-
@media (max-width: 1920px) {
|
|
582
|
-
height: ${(props) => switchSize(props.size, "90px", "99px", "112px")};
|
|
583
|
-
}
|
|
584
|
-
@media (max-width: 1680px) {
|
|
585
|
-
height: ${(props) => switchSize(props.size, "76px", "89px", "92px")};
|
|
586
|
-
}
|
|
587
|
-
@media (max-width: 1280px) {
|
|
588
|
-
height: ${(props) => switchSize(props.size, "60px", "69px", "76px")};
|
|
589
|
-
}
|
|
590
|
-
|
|
591
|
-
${LogoSize} {
|
|
592
|
-
@media (min-width: 2160px) {
|
|
593
|
-
width: ${(props) => switchSize(props.size, "52px", "56px", "60px")};
|
|
594
|
-
height: ${(props) => switchSize(props.size, "52px", "58px", "60px")};
|
|
595
|
-
}
|
|
596
|
-
@media (min-width: 2560px) {
|
|
597
|
-
width: ${(props) => switchSize(props.size, "64px", "72px", "80px")};
|
|
598
|
-
height: ${(props) => switchSize(props.size, "64px", "72px", "80px")};
|
|
599
|
-
}
|
|
600
|
-
@media (min-width: 3840px) {
|
|
601
|
-
width: ${(props) => switchSize(props.size, "92px", "104px", "116px")};
|
|
602
|
-
height: ${(props) => switchSize(props.size, "92px", "104px", "116px")};
|
|
603
|
-
}
|
|
604
|
-
|
|
605
|
-
@media (max-width: 1920px) {
|
|
606
|
-
width: ${(props) => switchSize(props.size, "46px", "52px", "58px")};
|
|
607
|
-
height: ${(props) => switchSize(props.size, "46px", "52px", "58px")};
|
|
608
|
-
}
|
|
609
|
-
@media (max-width: 1680px) {
|
|
610
|
-
width: ${(props) => switchSize(props.size, "40px", "46px", "48px")};
|
|
611
|
-
height: ${(props) => switchSize(props.size, "40px", "46px", "48px")};
|
|
612
|
-
}
|
|
613
|
-
@media (max-width: 1280px) {
|
|
614
|
-
width: ${(props) => switchSize(props.size, "32px", "36px", "40px")};
|
|
615
|
-
height: ${(props) => switchSize(props.size, "32px", "36px", "40px")};
|
|
616
|
-
}
|
|
617
|
-
|
|
618
|
-
img {
|
|
619
|
-
@media (min-width: 2160px) {
|
|
620
|
-
width: ${(props) => switchSize(props.size, "46px", "52px", "54px")};
|
|
621
|
-
height: ${(props) => switchSize(props.size, "46px", "52px", "53px")};
|
|
622
|
-
}
|
|
623
|
-
@media (min-width: 2560px) {
|
|
624
|
-
width: ${(props) => switchSize(props.size, "54px", "60px", "70px")};
|
|
625
|
-
height: ${(props) => switchSize(props.size, "54px", "60px", "70px")};
|
|
626
|
-
}
|
|
627
|
-
@media (min-width: 3840px) {
|
|
628
|
-
width: ${(props) => switchSize(props.size, "80px", "92px", "96px")};
|
|
629
|
-
height: ${(props) => switchSize(props.size, "80px", "92px", "96px")};
|
|
630
|
-
}
|
|
631
|
-
|
|
632
|
-
@media (max-width: 1920px) {
|
|
633
|
-
width: ${(props) => switchSize(props.size, "40px", "46px", "48px")};
|
|
634
|
-
height: ${(props) => switchSize(props.size, "40px", "46px", "48px")};
|
|
635
|
-
}
|
|
636
|
-
@media (max-width: 1680px) {
|
|
637
|
-
width: ${(props) => switchSize(props.size, "35px", "40px", "42px")};
|
|
638
|
-
height: ${(props) => switchSize(props.size, "35px", "40px", "42px")};
|
|
639
|
-
}
|
|
640
|
-
@media (max-width: 1280px) {
|
|
641
|
-
width: ${(props) => switchSize(props.size, "27px", "30px", "35px")};
|
|
642
|
-
height: ${(props) => switchSize(props.size, "27px", "30px", "35px")};
|
|
643
|
-
}
|
|
644
|
-
}
|
|
356
|
+
img {
|
|
357
|
+
width: 30px;
|
|
358
|
+
height: 30px;
|
|
645
359
|
}
|
|
646
360
|
`;
|
|
647
361
|
const ContentHeaderLeft = styled.div`
|
|
648
362
|
width: 82%;
|
|
649
363
|
display: flex;
|
|
650
|
-
|
|
651
|
-
margin-top: 4px;
|
|
364
|
+
align-items: center;
|
|
652
365
|
`;
|
|
653
366
|
const ContentHeaderRight = styled.div`
|
|
654
367
|
width: 15%;
|
|
@@ -766,12 +479,6 @@ const ContentHeader = styled.div`
|
|
|
766
479
|
height: 28px;
|
|
767
480
|
}
|
|
768
481
|
}
|
|
769
|
-
|
|
770
|
-
svg {
|
|
771
|
-
width: 30px;
|
|
772
|
-
height: 30px;
|
|
773
|
-
cursor: pointer;
|
|
774
|
-
}
|
|
775
482
|
`;
|
|
776
483
|
const Paragraph = styled.p`
|
|
777
484
|
font-family: "Inter", "Open Sans";
|
|
@@ -807,94 +514,19 @@ const Paragraph = styled.p`
|
|
|
807
514
|
const ChatMessage = styled.div`
|
|
808
515
|
width: 85%;
|
|
809
516
|
max-width: max-content;
|
|
810
|
-
padding:
|
|
811
|
-
margin-left:
|
|
517
|
+
padding: 10px 14px !important;
|
|
518
|
+
margin-left: 32px;
|
|
812
519
|
margin-top: 14px;
|
|
520
|
+
font-size: 14px;
|
|
813
521
|
font-family: "Inter", "Open Sans";
|
|
814
522
|
white-space: pre-wrap;
|
|
815
523
|
box-sizing: border-box;
|
|
816
524
|
word-break: break-word;
|
|
817
|
-
border-radius: 0px 6px 6px 6px;
|
|
818
525
|
color: #333;
|
|
819
526
|
position: relative;
|
|
820
527
|
background: #f2f4f7 0% 0% no-repeat padding-box;
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
// font-size: 13px;
|
|
824
|
-
|
|
825
|
-
@media (min-width: 2160px) {
|
|
826
|
-
font-size: ${(props) => switchSize(props.size, "17px", "19px", "22px")};
|
|
827
|
-
padding: ${(props) =>
|
|
828
|
-
switchSize(
|
|
829
|
-
props.size,
|
|
830
|
-
"12px 10px 8px 16px !important",
|
|
831
|
-
"12px 10px 8px 28px !important",
|
|
832
|
-
"12px 10px 8px 20px !important"
|
|
833
|
-
)};
|
|
834
|
-
margin-left: ${(props) => switchSize(props.size, "22px", "22px", "26px")};
|
|
835
|
-
margin-top: ${(props) => switchSize(props.size, "32px", "34px", "40px")};
|
|
836
|
-
}
|
|
837
|
-
@media (min-width: 2560px) {
|
|
838
|
-
font-size: ${(props) => switchSize(props.size, "20px", "22px", "26px")};
|
|
839
|
-
padding: ${(props) =>
|
|
840
|
-
switchSize(
|
|
841
|
-
props.size,
|
|
842
|
-
"20px 28px 16px 16px !important",
|
|
843
|
-
"20px 28px 16px 26px !important",
|
|
844
|
-
"20px 28px 16px 26px !important"
|
|
845
|
-
)};
|
|
846
|
-
margin-left: ${(props) => switchSize(props.size, "22px", "24px", "30px")};
|
|
847
|
-
margin-top: ${(props) => switchSize(props.size, "30px", "36px", "45px")};
|
|
848
|
-
}
|
|
849
|
-
@media (min-width: 3840px) {
|
|
850
|
-
font-size: ${(props) => switchSize(props.size, "30px", "34px", "36px")};
|
|
851
|
-
padding: ${(props) =>
|
|
852
|
-
switchSize(
|
|
853
|
-
props.size,
|
|
854
|
-
"24px 38px 16px 42px !important",
|
|
855
|
-
"24px 38px 16px 42px !important",
|
|
856
|
-
"24px 38px 16px 42px !important"
|
|
857
|
-
)};
|
|
858
|
-
margin-left: ${(props) => switchSize(props.size, "26px", "30px", "36px")};
|
|
859
|
-
margin-top: ${(props) => switchSize(props.size, "45px", "50px", "60px")};
|
|
860
|
-
}
|
|
861
|
-
|
|
862
|
-
@media (max-width: 1920px) {
|
|
863
|
-
font-size: ${(props) => switchSize(props.size, "15px", "17px", "18px")};
|
|
864
|
-
padding: ${(props) =>
|
|
865
|
-
switchSize(
|
|
866
|
-
props.size,
|
|
867
|
-
"12px 10px 8px 28px !important",
|
|
868
|
-
"12px 10px 8px 28px !important",
|
|
869
|
-
"12px 10px 8px 20px !important"
|
|
870
|
-
)};
|
|
871
|
-
margin-left: ${(props) => switchSize(props.size, "22px", "22px", "22px")};
|
|
872
|
-
margin-top: ${(props) => switchSize(props.size, "32px", "34px", "34px")};
|
|
873
|
-
}
|
|
874
|
-
@media (max-width: 1680px) {
|
|
875
|
-
font-size: ${(props) => switchSize(props.size, "13px", "15px", "15px")};
|
|
876
|
-
padding: ${(props) =>
|
|
877
|
-
switchSize(
|
|
878
|
-
props.size,
|
|
879
|
-
"12px 10px 8px 18px !important",
|
|
880
|
-
"12px 10px 8px 20px !important",
|
|
881
|
-
"12px 10px 8px 22px !important"
|
|
882
|
-
)};
|
|
883
|
-
margin-left: ${(props) => switchSize(props.size, "14px", "16px", "18px")};
|
|
884
|
-
margin-top: ${(props) => switchSize(props.size, "26px", "26px", "26px")};
|
|
885
|
-
}
|
|
886
|
-
@media (max-width: 1280px) {
|
|
887
|
-
font-size: ${(props) => switchSize(props.size, "10px", "11px", "13px")};
|
|
888
|
-
padding: ${(props) =>
|
|
889
|
-
switchSize(
|
|
890
|
-
props.size,
|
|
891
|
-
"12px 10px 8px 16px !important",
|
|
892
|
-
"12px 10px 8px 16px !important",
|
|
893
|
-
"12px 10px 8px 16px !important"
|
|
894
|
-
)};
|
|
895
|
-
margin-left: ${(props) => switchSize(props.size, "16px", "16px", "16px")};
|
|
896
|
-
margin-top: ${(props) => switchSize(props.size, "22px", "22px", "22px")};
|
|
897
|
-
}
|
|
528
|
+
border-radius: 8px;
|
|
529
|
+
background: #f4f4f5;
|
|
898
530
|
|
|
899
531
|
svg {
|
|
900
532
|
width: 6px;
|
|
@@ -1012,22 +644,18 @@ const ChatMessage = styled.div`
|
|
|
1012
644
|
`;
|
|
1013
645
|
|
|
1014
646
|
const FormMessage = styled.div`
|
|
1015
|
-
width:
|
|
1016
|
-
|
|
1017
|
-
padding: 1px 10px 8px 10px !important;
|
|
1018
|
-
margin-left: 14px;
|
|
1019
|
-
margin-top: 20px;
|
|
647
|
+
width: 85%;
|
|
648
|
+
margin-left: 32px;
|
|
1020
649
|
font-family: "Inter", "Open Sans";
|
|
650
|
+
font-size: 14px;
|
|
1021
651
|
white-space: pre-wrap;
|
|
1022
652
|
box-sizing: border-box;
|
|
1023
653
|
word-break: break-word;
|
|
1024
|
-
border-radius: 0px 6px 6px 6px;
|
|
1025
654
|
color: #333;
|
|
1026
655
|
// position: relative;
|
|
1027
656
|
background: #f6f8fa 0% 0% no-repeat padding-box;
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
// border-radius: 0px 10px 10px 10px;
|
|
657
|
+
border-radius: 8px;
|
|
658
|
+
background: #f4f4f5;
|
|
1031
659
|
`;
|
|
1032
660
|
const MessageBox = styled.div`
|
|
1033
661
|
width: 100%;
|
|
@@ -1068,34 +696,8 @@ const MessageBox = styled.div`
|
|
|
1068
696
|
}
|
|
1069
697
|
|
|
1070
698
|
img {
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
@media (min-width: 2160px) {
|
|
1075
|
-
width: ${(props) => switchSize(props.size, "32px", "40px", "44px")};
|
|
1076
|
-
height: ${(props) => switchSize(props.size, "32px", "40px", "44px")};
|
|
1077
|
-
}
|
|
1078
|
-
@media (min-width: 2560px) {
|
|
1079
|
-
width: ${(props) => switchSize(props.size, "36px", "44px", "52px")};
|
|
1080
|
-
height: ${(props) => switchSize(props.size, "36px", "44px", "52px")};
|
|
1081
|
-
}
|
|
1082
|
-
@media (min-width: 3840px) {
|
|
1083
|
-
width: ${(props) => switchSize(props.size, "64px", "68px", "76px")};
|
|
1084
|
-
height: ${(props) => switchSize(props.size, "64px", "68px", "76px")};
|
|
1085
|
-
}
|
|
1086
|
-
|
|
1087
|
-
@media (max-width: 1920px) {
|
|
1088
|
-
width: ${(props) => switchSize(props.size, "32px", "34px", "38px")};
|
|
1089
|
-
height: ${(props) => switchSize(props.size, "32px", "34px", "38px")};
|
|
1090
|
-
}
|
|
1091
|
-
@media (max-width: 1680px) {
|
|
1092
|
-
width: ${(props) => switchSize(props.size, "26px", "30px", "32px")};
|
|
1093
|
-
height: ${(props) => switchSize(props.size, "26px", "30px", "32px")};
|
|
1094
|
-
}
|
|
1095
|
-
@media (max-width: 1280px) {
|
|
1096
|
-
width: ${(props) => switchSize(props.size, "18px", "22px", "26px")};
|
|
1097
|
-
height: ${(props) => switchSize(props.size, "18px", "22px", "26px")};
|
|
1098
|
-
}
|
|
699
|
+
width: 24px;
|
|
700
|
+
height: 24px;
|
|
1099
701
|
}
|
|
1100
702
|
svg {
|
|
1101
703
|
width: 18px;
|
|
@@ -2496,7 +2098,6 @@ const UserChat = styled.div`
|
|
|
2496
2098
|
padding: 12px 18px 8px 12px !important;
|
|
2497
2099
|
color: #000;
|
|
2498
2100
|
background: #f0f7ff 0% 0% no-repeat padding-box;
|
|
2499
|
-
box-shadow: 0px 3px 6px #00000029;
|
|
2500
2101
|
border-radius: 10px;
|
|
2501
2102
|
|
|
2502
2103
|
@media (min-width: 2160px) {
|
|
@@ -2506,9 +2107,9 @@ const UserChat = styled.div`
|
|
|
2506
2107
|
padding: ${(props) =>
|
|
2507
2108
|
switchSize(
|
|
2508
2109
|
props.size,
|
|
2509
|
-
"
|
|
2510
|
-
"
|
|
2511
|
-
"
|
|
2110
|
+
"10px 14px !important",
|
|
2111
|
+
"10px 14px !important",
|
|
2112
|
+
"10px 14px !important"
|
|
2512
2113
|
)};
|
|
2513
2114
|
}
|
|
2514
2115
|
@media (min-width: 2560px) {
|
|
@@ -2543,9 +2144,9 @@ const UserChat = styled.div`
|
|
|
2543
2144
|
padding: ${(props) =>
|
|
2544
2145
|
switchSize(
|
|
2545
2146
|
props.size,
|
|
2546
|
-
"
|
|
2547
|
-
"
|
|
2548
|
-
"
|
|
2147
|
+
"10px 14px !important",
|
|
2148
|
+
"10px 14px !important",
|
|
2149
|
+
"10px 14px !important"
|
|
2549
2150
|
)};
|
|
2550
2151
|
}
|
|
2551
2152
|
@media (max-width: 1280px) {
|
|
@@ -2627,49 +2228,72 @@ const AdaptiveParagraph = styled.p`
|
|
|
2627
2228
|
const AdaptiveHeader = styled.h4`
|
|
2628
2229
|
color: #000;
|
|
2629
2230
|
`;
|
|
2231
|
+
|
|
2630
2232
|
const WidgetUpdateButton = styled.div`
|
|
2631
2233
|
button {
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
|
|
2234
|
+
width: 100%;
|
|
2235
|
+
padding: 6px;
|
|
2236
|
+
background: white;
|
|
2237
|
+
border: 1px solid #e4e4e7;
|
|
2238
|
+
border-radius: 6px;
|
|
2239
|
+
color: #314158;
|
|
2240
|
+
font-family: "Inter", sans-serif;
|
|
2241
|
+
font-size: 14px;
|
|
2242
|
+
font-weight: 500;
|
|
2243
|
+
line-height: 20px;
|
|
2244
|
+
cursor: pointer;
|
|
2245
|
+
display: flex;
|
|
2246
|
+
align-items: center;
|
|
2247
|
+
justify-content: center; /* Centers text horizontally */
|
|
2248
|
+
|
|
2249
|
+
&:hover {
|
|
2250
|
+
background: #ebefff;
|
|
2251
|
+
border: 1px solid #4b2fff;
|
|
2252
|
+
color: #4b2fff;
|
|
2253
|
+
}
|
|
2254
|
+
|
|
2255
|
+
span {
|
|
2646
2256
|
display: flex;
|
|
2647
2257
|
align-items: center;
|
|
2648
|
-
|
|
2649
|
-
:
|
|
2650
|
-
background: #f0f7ff;
|
|
2651
|
-
color: #000;
|
|
2652
|
-
border: 1px solid #f0f7ff;
|
|
2653
|
-
}
|
|
2654
|
-
:active {
|
|
2655
|
-
background: #f0f7ff;
|
|
2656
|
-
color: #000;
|
|
2657
|
-
border: 1px solid #f0f7ff;
|
|
2658
|
-
}
|
|
2659
|
-
|
|
2660
|
-
span {
|
|
2661
|
-
width: 100%;
|
|
2662
|
-
justify-content: center;
|
|
2663
|
-
height: auto;
|
|
2664
|
-
}
|
|
2258
|
+
justify-content: center;
|
|
2259
|
+
width: 100%;
|
|
2665
2260
|
}
|
|
2666
2261
|
}
|
|
2667
2262
|
`;
|
|
2263
|
+
// const WidgetUpdateButton = styled.div`
|
|
2264
|
+
|
|
2265
|
+
// button {
|
|
2266
|
+
// width: 100%;
|
|
2267
|
+
// padding: 6px;
|
|
2268
|
+
// background: white;
|
|
2269
|
+
// border: 1px solid #e4e4e7;
|
|
2270
|
+
// border-radius: 6px;
|
|
2271
|
+
// color: #314158;
|
|
2272
|
+
// font-family: "Inter", sans-serif;
|
|
2273
|
+
// font-size: 14px;
|
|
2274
|
+
// font-weight: 500;
|
|
2275
|
+
// line-height: 20px;
|
|
2276
|
+
// cursor: pointer;
|
|
2277
|
+
|
|
2278
|
+
// &:hover {
|
|
2279
|
+
// background: #ebefff;
|
|
2280
|
+
// border: 1px solid #4b2fff;
|
|
2281
|
+
// color: #4b2fff;
|
|
2282
|
+
// }
|
|
2283
|
+
|
|
2284
|
+
// span {
|
|
2285
|
+
// width: 100%;
|
|
2286
|
+
// justify-content: center;
|
|
2287
|
+
// height: auto;
|
|
2288
|
+
// }
|
|
2289
|
+
// }
|
|
2290
|
+
// }
|
|
2291
|
+
// `;
|
|
2668
2292
|
export const Button = styled.button`
|
|
2669
2293
|
min-width: 64px;
|
|
2670
|
-
|
|
2294
|
+
|
|
2671
2295
|
height: 28px;
|
|
2672
|
-
|
|
2296
|
+
|
|
2673
2297
|
border: 1px solid #a0a0a0;
|
|
2674
2298
|
border-radius: 8px;
|
|
2675
2299
|
background: #ffffff;
|
|
@@ -2677,7 +2301,7 @@ export const Button = styled.button`
|
|
|
2677
2301
|
outline: 0;
|
|
2678
2302
|
cursor: pointer;
|
|
2679
2303
|
margin-top: 4px;
|
|
2680
|
-
font-family: "Inter";
|
|
2304
|
+
font-family: "'Inter', 'Open Sans'";
|
|
2681
2305
|
display: inline-flex;
|
|
2682
2306
|
align-items: center;
|
|
2683
2307
|
padding: 6px 12px;
|
|
@@ -2806,7 +2430,7 @@ const InputMessageChat = styled.div`
|
|
|
2806
2430
|
border: none;
|
|
2807
2431
|
background-color: transparent;
|
|
2808
2432
|
outline: none;
|
|
2809
|
-
font-family: "Inter";
|
|
2433
|
+
font-family: "'Inter', 'Open Sans'";
|
|
2810
2434
|
// font-size: 14px !important;
|
|
2811
2435
|
// margin-top: 5px;
|
|
2812
2436
|
// line-height: 20px;
|
|
@@ -3099,8 +2723,7 @@ const ButtonWrapper = styled.div`
|
|
|
3099
2723
|
gap: 0 10px;
|
|
3100
2724
|
|
|
3101
2725
|
button {
|
|
3102
|
-
|
|
3103
|
-
max-width: 400px;
|
|
2726
|
+
width: 28px;
|
|
3104
2727
|
height: 28px;
|
|
3105
2728
|
box-shadow: 0px 3px 6px #00000029;
|
|
3106
2729
|
border: 1px solid #A0A0A0;
|
|
@@ -3111,16 +2734,9 @@ const ButtonWrapper = styled.div`
|
|
|
3111
2734
|
cursor: pointer;
|
|
3112
2735
|
margin-top: 12px;
|
|
3113
2736
|
font-size: 12px;
|
|
3114
|
-
font-family: "Inter";
|
|
2737
|
+
font-family: "'Inter', 'Open Sans'";
|
|
3115
2738
|
display: inline-flex;
|
|
3116
2739
|
align-items: center;
|
|
3117
|
-
padding: 6px 12px;
|
|
3118
|
-
|
|
3119
|
-
|
|
3120
|
-
@media (max-width: 1280px) {
|
|
3121
|
-
min-width: auto;
|
|
3122
|
-
}
|
|
3123
|
-
|
|
3124
2740
|
text-overflow: ellipsis;
|
|
3125
2741
|
white-space: nowrap !important;
|
|
3126
2742
|
overflow: hidden;
|
|
@@ -3149,38 +2765,266 @@ const ButtonWrapper = styled.div`
|
|
|
3149
2765
|
}
|
|
3150
2766
|
}
|
|
3151
2767
|
`;
|
|
3152
|
-
const style = {
|
|
3153
|
-
maxHeight: "90px",
|
|
3154
|
-
minHeight: "38px",
|
|
3155
|
-
resize: "none",
|
|
3156
|
-
padding: "9px",
|
|
3157
|
-
boxSizing: "border-box",
|
|
3158
|
-
fontSize: "13px",
|
|
3159
|
-
width: "100%",
|
|
3160
|
-
border: "none",
|
|
3161
|
-
overflow: "hidden",
|
|
3162
|
-
overflowWrap: "break-word",
|
|
3163
|
-
textAlign: "start",
|
|
3164
|
-
height: "38px",
|
|
3165
|
-
fontFamily: "Inter",
|
|
3166
|
-
};
|
|
3167
2768
|
|
|
3168
|
-
const
|
|
3169
|
-
|
|
3170
|
-
|
|
3171
|
-
|
|
3172
|
-
|
|
3173
|
-
|
|
3174
|
-
|
|
3175
|
-
|
|
3176
|
-
style,
|
|
3177
|
-
}) => {
|
|
3178
|
-
// ;
|
|
2769
|
+
const Container = styled.div`
|
|
2770
|
+
display: flex;
|
|
2771
|
+
flex-direction: column;
|
|
2772
|
+
align-items: flex-start;
|
|
2773
|
+
gap: 10px;
|
|
2774
|
+
margin-bottom: 12px;
|
|
2775
|
+
width: 85%;
|
|
2776
|
+
`;
|
|
3179
2777
|
|
|
3180
|
-
|
|
2778
|
+
const MessageContainer = styled.div`
|
|
2779
|
+
display: flex;
|
|
2780
|
+
flex-direction: column;
|
|
2781
|
+
align-items: flex-start;
|
|
2782
|
+
gap: 6px;
|
|
2783
|
+
width: 100%;
|
|
2784
|
+
`;
|
|
3181
2785
|
|
|
3182
|
-
|
|
3183
|
-
|
|
2786
|
+
const BotHeader = styled.div`
|
|
2787
|
+
display: flex;
|
|
2788
|
+
align-items: center;
|
|
2789
|
+
gap: 10px;
|
|
2790
|
+
padding: 0 26px;
|
|
2791
|
+
width: 100%;
|
|
2792
|
+
`;
|
|
2793
|
+
|
|
2794
|
+
const BotLabel = styled.span`
|
|
2795
|
+
font-family: "Inter", sans-serif;
|
|
2796
|
+
font-size: 12px;
|
|
2797
|
+
font-weight: 500;
|
|
2798
|
+
color: #020618;
|
|
2799
|
+
line-height: 18px;
|
|
2800
|
+
`;
|
|
2801
|
+
|
|
2802
|
+
const MessageBubbleContainer = styled.div`
|
|
2803
|
+
display: flex;
|
|
2804
|
+
align-items: flex-start;
|
|
2805
|
+
gap: 4px;
|
|
2806
|
+
`;
|
|
2807
|
+
|
|
2808
|
+
const AvatarContainer = styled.div`
|
|
2809
|
+
width: 26px;
|
|
2810
|
+
height: 26px;
|
|
2811
|
+
border-radius: 50%;
|
|
2812
|
+
display: flex;
|
|
2813
|
+
align-items: center;
|
|
2814
|
+
justify-content: center;
|
|
2815
|
+
`;
|
|
2816
|
+
|
|
2817
|
+
const AvatarImage = styled.div`
|
|
2818
|
+
width: 24px;
|
|
2819
|
+
height: 24px;
|
|
2820
|
+
`;
|
|
2821
|
+
|
|
2822
|
+
const MessageCard = styled.div`
|
|
2823
|
+
background: #f4f4f5;
|
|
2824
|
+
border-radius: 8px;
|
|
2825
|
+
padding: 14px;
|
|
2826
|
+
`;
|
|
2827
|
+
|
|
2828
|
+
const MessageText = styled.p`
|
|
2829
|
+
font-family: "Inter", sans-serif;
|
|
2830
|
+
font-size: 14px;
|
|
2831
|
+
font-weight: 400;
|
|
2832
|
+
color: #020618;
|
|
2833
|
+
line-height: 20px;
|
|
2834
|
+
margin-bottom: 10px;
|
|
2835
|
+
margin-top: 0px;
|
|
2836
|
+
`;
|
|
2837
|
+
|
|
2838
|
+
const SuggestionContainer = styled.div`
|
|
2839
|
+
display: flex;
|
|
2840
|
+
flex-direction: column;
|
|
2841
|
+
gap: 10px;
|
|
2842
|
+
width: 100%;
|
|
2843
|
+
`;
|
|
2844
|
+
|
|
2845
|
+
const SuggestionButton = styled.button`
|
|
2846
|
+
width: 100%;
|
|
2847
|
+
padding: 6px;
|
|
2848
|
+
background: white;
|
|
2849
|
+
border: 1px solid #e4e4e7;
|
|
2850
|
+
border-radius: 6px;
|
|
2851
|
+
color: #314158;
|
|
2852
|
+
font-family: "Inter", sans-serif;
|
|
2853
|
+
font-size: 14px;
|
|
2854
|
+
font-weight: 500;
|
|
2855
|
+
line-height: 20px;
|
|
2856
|
+
cursor: pointer;
|
|
2857
|
+
|
|
2858
|
+
&:hover {
|
|
2859
|
+
background: #ebefff;
|
|
2860
|
+
border: 1px solid #4b2fff;
|
|
2861
|
+
color: #4b2fff;
|
|
2862
|
+
}
|
|
2863
|
+
`;
|
|
2864
|
+
|
|
2865
|
+
const BottomContainer = styled.div`
|
|
2866
|
+
display: flex;
|
|
2867
|
+
width: 100%;
|
|
2868
|
+
align-items: flex-start;
|
|
2869
|
+
gap: 4px;
|
|
2870
|
+
`;
|
|
2871
|
+
|
|
2872
|
+
const Timestamp = styled.div`
|
|
2873
|
+
display: flex;
|
|
2874
|
+
align-items: center;
|
|
2875
|
+
gap: 10px;
|
|
2876
|
+
padding: 0 8px 0 30px;
|
|
2877
|
+
flex: 1;
|
|
2878
|
+
`;
|
|
2879
|
+
|
|
2880
|
+
const TimestampText = styled.span`
|
|
2881
|
+
font-family: "Inter", sans-serif;
|
|
2882
|
+
font-size: 12px;
|
|
2883
|
+
font-weight: 400;
|
|
2884
|
+
color: #62748e;
|
|
2885
|
+
line-height: 18px;
|
|
2886
|
+
`;
|
|
2887
|
+
|
|
2888
|
+
const ReactionContainer = styled.div`
|
|
2889
|
+
display: flex;
|
|
2890
|
+
align-items: center;
|
|
2891
|
+
gap: 4px;
|
|
2892
|
+
|
|
2893
|
+
`;
|
|
2894
|
+
|
|
2895
|
+
const ReactionButton = styled.button`
|
|
2896
|
+
width: 22px;
|
|
2897
|
+
height: 22px;
|
|
2898
|
+
padding: 4px;
|
|
2899
|
+
background: #f4f4f5;
|
|
2900
|
+
border-radius: 50%;
|
|
2901
|
+
border: none;
|
|
2902
|
+
cursor: pointer;
|
|
2903
|
+
display: flex;
|
|
2904
|
+
align-items: center;
|
|
2905
|
+
justify-content: center;
|
|
2906
|
+
|
|
2907
|
+
&:hover {
|
|
2908
|
+
background: #e4e4e7;
|
|
2909
|
+
}
|
|
2910
|
+
|
|
2911
|
+
svg {
|
|
2912
|
+
width: 14px;
|
|
2913
|
+
height: 14px;
|
|
2914
|
+
}
|
|
2915
|
+
`;
|
|
2916
|
+
|
|
2917
|
+
const StyledCard = styled.div`
|
|
2918
|
+
border-radius: 10px;
|
|
2919
|
+
border: 1px solid #e4e4e7;
|
|
2920
|
+
overflow: hidden;
|
|
2921
|
+
margin-bottom: 12px;
|
|
2922
|
+
`;
|
|
2923
|
+
|
|
2924
|
+
const CardContent = styled.div`
|
|
2925
|
+
padding: 0;
|
|
2926
|
+
`;
|
|
2927
|
+
|
|
2928
|
+
const InputContainer = styled.div`
|
|
2929
|
+
display: flex;
|
|
2930
|
+
align-items: center;
|
|
2931
|
+
gap: 10px;
|
|
2932
|
+
padding: 10px 16px;
|
|
2933
|
+
background-color: white;
|
|
2934
|
+
`;
|
|
2935
|
+
|
|
2936
|
+
const StyledInput = styled.input`
|
|
2937
|
+
flex: 1;
|
|
2938
|
+
border: none;
|
|
2939
|
+
outline: none;
|
|
2940
|
+
color: #020618;
|
|
2941
|
+
font-size: 14px;
|
|
2942
|
+
font-weight: normal;
|
|
2943
|
+
background: transparent;
|
|
2944
|
+
font-weight: 500;
|
|
2945
|
+
font-family: "Inter", "Open Sans";
|
|
2946
|
+
|
|
2947
|
+
&:focus {
|
|
2948
|
+
box-shadow: none;
|
|
2949
|
+
}
|
|
2950
|
+
|
|
2951
|
+
&::placeholder {
|
|
2952
|
+
color: #62748e;
|
|
2953
|
+
}
|
|
2954
|
+
`;
|
|
2955
|
+
|
|
2956
|
+
const IconButtonInput = styled.button`
|
|
2957
|
+
padding: 6px;
|
|
2958
|
+
height: auto;
|
|
2959
|
+
width: auto;
|
|
2960
|
+
background: transparent;
|
|
2961
|
+
border: none;
|
|
2962
|
+
cursor: pointer;
|
|
2963
|
+
display: flex;
|
|
2964
|
+
align-items: center;
|
|
2965
|
+
justify-content: center;
|
|
2966
|
+
|
|
2967
|
+
&:hover {
|
|
2968
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
2969
|
+
border-radius: 4px;
|
|
2970
|
+
}
|
|
2971
|
+
`;
|
|
2972
|
+
|
|
2973
|
+
const style = {
|
|
2974
|
+
maxHeight: "90px",
|
|
2975
|
+
minHeight: "38px",
|
|
2976
|
+
resize: "none",
|
|
2977
|
+
padding: "9px",
|
|
2978
|
+
boxSizing: "border-box",
|
|
2979
|
+
fontSize: "13px",
|
|
2980
|
+
width: "100%",
|
|
2981
|
+
border: "none",
|
|
2982
|
+
overflow: "hidden",
|
|
2983
|
+
overflowWrap: "break-word",
|
|
2984
|
+
textAlign: "start",
|
|
2985
|
+
height: "38px",
|
|
2986
|
+
fontFamily: "'Inter', 'Open Sans'",
|
|
2987
|
+
};
|
|
2988
|
+
|
|
2989
|
+
export const SearchIcon = ({ style }) => {
|
|
2990
|
+
return (
|
|
2991
|
+
<svg
|
|
2992
|
+
style={style}
|
|
2993
|
+
xmlns="
|
|
2994
|
+
http://www.w3.org/2000/svg"
|
|
2995
|
+
viewBox="0 0 24 24"
|
|
2996
|
+
fill="none"
|
|
2997
|
+
height={20}
|
|
2998
|
+
width={20}
|
|
2999
|
+
>
|
|
3000
|
+
<path
|
|
3001
|
+
d="M21 21L14.9497 14.9497M14.9497 14.9497C16.2165 13.683 17 11.933 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17C11.933 17 13.683 16.2165 14.9497 14.9497Z"
|
|
3002
|
+
stroke="currentColor"
|
|
3003
|
+
strokeWidth="1.7"
|
|
3004
|
+
strokeLinecap="round"
|
|
3005
|
+
strokeLinejoin="round"
|
|
3006
|
+
/>
|
|
3007
|
+
</svg>
|
|
3008
|
+
);
|
|
3009
|
+
};
|
|
3010
|
+
|
|
3011
|
+
const App = ({
|
|
3012
|
+
endpoint,
|
|
3013
|
+
widget_id,
|
|
3014
|
+
authToken,
|
|
3015
|
+
newToken,
|
|
3016
|
+
openByDefault,
|
|
3017
|
+
userDetails,
|
|
3018
|
+
widget_size,
|
|
3019
|
+
style,
|
|
3020
|
+
}) => {
|
|
3021
|
+
// ;
|
|
3022
|
+
|
|
3023
|
+
const [sourceState, setSourceState] = useState(widget?.source_id);
|
|
3024
|
+
const [isExpanded, setIsExpanded] = useState(false);
|
|
3025
|
+
|
|
3026
|
+
const [enableConsent, setEnableConsent] = useState(false);
|
|
3027
|
+
const [workspace, setWorkspace] = useState(widget?.workspace);
|
|
3184
3028
|
|
|
3185
3029
|
const [fields, setFields] = useState();
|
|
3186
3030
|
const {
|
|
@@ -3205,6 +3049,7 @@ const App = ({
|
|
|
3205
3049
|
});
|
|
3206
3050
|
console.log("widget", widget);
|
|
3207
3051
|
const conversationId = messages[0]?.message?.system?.conversationId;
|
|
3052
|
+
const [typing, setBotTyping] = useState(true);
|
|
3208
3053
|
|
|
3209
3054
|
const [open, setOpen] = useState(openByDefault);
|
|
3210
3055
|
const [isVisible, setIsVisible] = useState(false);
|
|
@@ -3212,6 +3057,10 @@ const App = ({
|
|
|
3212
3057
|
|
|
3213
3058
|
const containerEl = useRef(null);
|
|
3214
3059
|
|
|
3060
|
+
useEffect(() => {
|
|
3061
|
+
setBotTyping(isTypingEnd);
|
|
3062
|
+
}, [isTypingEnd]);
|
|
3063
|
+
|
|
3215
3064
|
useEffect(() => {
|
|
3216
3065
|
if (widget?.source_id !== undefined) {
|
|
3217
3066
|
setSourceState(widget?.source_id);
|
|
@@ -3237,16 +3086,122 @@ const App = ({
|
|
|
3237
3086
|
}
|
|
3238
3087
|
});
|
|
3239
3088
|
|
|
3089
|
+
const BodyWrappertopContainer = () => (
|
|
3090
|
+
<BodyNotesWrapper>
|
|
3091
|
+
<OperationHourWrapper>
|
|
3092
|
+
Thank you for choosing pagergpt! Our hours of operation are Monday to
|
|
3093
|
+
Friday 5am-7pm PST, Sat-Sun, 7am-4pm PST.
|
|
3094
|
+
</OperationHourWrapper>
|
|
3095
|
+
<NotesWrapper>
|
|
3096
|
+
<span
|
|
3097
|
+
style={{
|
|
3098
|
+
width: "24px",
|
|
3099
|
+
marginTop: "4px",
|
|
3100
|
+
cursor: "pointer",
|
|
3101
|
+
}}
|
|
3102
|
+
>
|
|
3103
|
+
<InfoIcon width={16} height={16} style={{ color: "black" }} />
|
|
3104
|
+
</span>
|
|
3105
|
+
<InfoContent>
|
|
3106
|
+
Our specialists are trained to help you with pager gpt’s products and
|
|
3107
|
+
services. However, they cannot suggest you to go for a annual plan or
|
|
3108
|
+
monthly plan advice.
|
|
3109
|
+
</InfoContent>
|
|
3110
|
+
<span
|
|
3111
|
+
style={{
|
|
3112
|
+
width: "24px",
|
|
3113
|
+
marginTop: "4px",
|
|
3114
|
+
cursor: "pointer",
|
|
3115
|
+
}}
|
|
3116
|
+
>
|
|
3117
|
+
<XIcon width={16} height={16} style={{ color: "black" }} />
|
|
3118
|
+
|
|
3119
|
+
</span>
|
|
3120
|
+
</NotesWrapper>
|
|
3121
|
+
</BodyNotesWrapper>
|
|
3122
|
+
);
|
|
3123
|
+
|
|
3124
|
+
const GreetingMessageBox = () => {
|
|
3125
|
+
|
|
3126
|
+
return(
|
|
3127
|
+
<Container>
|
|
3128
|
+
<MessageContainer>
|
|
3129
|
+
<BotHeader>
|
|
3130
|
+
<BotLabel>Bot</BotLabel>
|
|
3131
|
+
</BotHeader>
|
|
3132
|
+
<MessageBubbleContainer>
|
|
3133
|
+
<AvatarContainer>
|
|
3134
|
+
<AvatarImage>
|
|
3135
|
+
<img
|
|
3136
|
+
alt={"logo"}
|
|
3137
|
+
src={
|
|
3138
|
+
(widget && widget.logo_url) ||
|
|
3139
|
+
"https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
|
|
3140
|
+
}
|
|
3141
|
+
/>
|
|
3142
|
+
</AvatarImage>
|
|
3143
|
+
</AvatarContainer>
|
|
3144
|
+
<MessageCard>
|
|
3145
|
+
<MessageText>Hi Roger! How may help you today?</MessageText>
|
|
3146
|
+
<SuggestionContainer>
|
|
3147
|
+
{suggestionOptions.map((option, index) => (
|
|
3148
|
+
<SuggestionButton key={index}>{option}</SuggestionButton>
|
|
3149
|
+
))}
|
|
3150
|
+
</SuggestionContainer>
|
|
3151
|
+
</MessageCard>
|
|
3152
|
+
</MessageBubbleContainer>
|
|
3153
|
+
<BottomContainer>
|
|
3154
|
+
<Timestamp>
|
|
3155
|
+
<TimestampText>Just now</TimestampText>
|
|
3156
|
+
</Timestamp>
|
|
3157
|
+
<ReactionContainer>
|
|
3158
|
+
<ReactionButton>
|
|
3159
|
+
<ThumbsUpIcon strokeWidth={1.4} color="#45556C" />
|
|
3160
|
+
</ReactionButton>
|
|
3161
|
+
<ReactionButton>
|
|
3162
|
+
<ThumbsDownIcon strokeWidth={1.4} color="#45556C" />
|
|
3163
|
+
</ReactionButton>
|
|
3164
|
+
<ReactionButton>
|
|
3165
|
+
<PersonWithSoundWavesIcon />
|
|
3166
|
+
</ReactionButton>
|
|
3167
|
+
</ReactionContainer>
|
|
3168
|
+
</BottomContainer>
|
|
3169
|
+
</MessageContainer>
|
|
3170
|
+
</Container>
|
|
3171
|
+
)
|
|
3172
|
+
};
|
|
3173
|
+
|
|
3174
|
+
const PersonWithSoundWavesIcon = () => (
|
|
3175
|
+
<svg
|
|
3176
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
3177
|
+
width="14"
|
|
3178
|
+
height="14"
|
|
3179
|
+
viewBox="0 0 14 14"
|
|
3180
|
+
fill="none"
|
|
3181
|
+
>
|
|
3182
|
+
<path
|
|
3183
|
+
d="M10.5 2.33341C10.7188 2.87383 10.8392 3.46455 10.8392 4.08341C10.8392 4.70227 10.7188 5.29299 10.5 5.83341M12.1337 1.16675C12.581 2.04183 12.8333 3.03315 12.8333 4.08341C12.8333 5.13366 12.581 6.12499 12.1337 7.00007M8.75 4.08341C8.75 5.37207 7.70533 6.41674 6.41667 6.41674C5.128 6.41674 4.08333 5.37207 4.08333 4.08341C4.08333 2.79474 5.128 1.75007 6.41667 1.75007C7.70533 1.75007 8.75 2.79474 8.75 4.08341ZM4.08333 8.75007H8.75C10.0387 8.75007 11.0833 9.79474 11.0833 11.0834C11.0833 11.7277 10.561 12.2501 9.91667 12.2501H2.91667C2.27233 12.2501 1.75 11.7277 1.75 11.0834C1.75 9.79474 2.79467 8.75007 4.08333 8.75007Z"
|
|
3184
|
+
stroke="#45556C"
|
|
3185
|
+
stroke-linecap="round"
|
|
3186
|
+
stroke-linejoin="round"
|
|
3187
|
+
/>
|
|
3188
|
+
</svg>
|
|
3189
|
+
);
|
|
3190
|
+
|
|
3191
|
+
const suggestionOptions = ["Get me started", "I know few things about start"];
|
|
3192
|
+
|
|
3240
3193
|
if (!widget) {
|
|
3241
3194
|
return null;
|
|
3242
3195
|
}
|
|
3243
3196
|
|
|
3244
3197
|
return (
|
|
3245
3198
|
<ScaleSizeProvider widgetSize={widget_size}>
|
|
3246
|
-
<WidgetPreview
|
|
3199
|
+
<WidgetPreview className="widget_preview" isExpanded={isExpanded}>
|
|
3247
3200
|
{open ? (
|
|
3248
3201
|
<ChatWrapper className="widget_chat">
|
|
3249
3202
|
<ChatHeaderTop
|
|
3203
|
+
setIsExpanded={setIsExpanded}
|
|
3204
|
+
isExpanded={isExpanded}
|
|
3250
3205
|
widget={widget}
|
|
3251
3206
|
onClick={() => setOpen(!open)}
|
|
3252
3207
|
open={open}
|
|
@@ -3255,86 +3210,131 @@ const App = ({
|
|
|
3255
3210
|
logoshape={style.logo_shape}
|
|
3256
3211
|
/>
|
|
3257
3212
|
<EndPointProvider endpoint={endpoint}>
|
|
3258
|
-
|
|
3259
|
-
|
|
3260
|
-
|
|
3261
|
-
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
{
|
|
3266
|
-
|
|
3267
|
-
|
|
3268
|
-
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
{sourceState === "new_user" && widget.user_consent == true && (
|
|
3272
|
-
<ConsentPopup
|
|
3273
|
-
formData={fields}
|
|
3274
|
-
conversationId={conversationId}
|
|
3213
|
+
<ChatContentWrapper
|
|
3214
|
+
clsassName="widget_chat_content"
|
|
3215
|
+
ref={containerEl}
|
|
3216
|
+
>
|
|
3217
|
+
{/* notes in the chat */}
|
|
3218
|
+
{false && <BodyWrappertopContainer />}
|
|
3219
|
+
{/* greeting message */}
|
|
3220
|
+
{false && <GreetingMessageBox />}
|
|
3221
|
+
<BodyWrapper
|
|
3222
|
+
sourceState={sourceState}
|
|
3223
|
+
{...{ messages }}
|
|
3224
|
+
sendMessage={sendMessage}
|
|
3225
|
+
sendFeedback={sendFeedback}
|
|
3275
3226
|
widget={widget}
|
|
3276
|
-
|
|
3277
|
-
setEnableConsent={setEnableConsent}
|
|
3278
|
-
isVisible={isVisible}
|
|
3279
|
-
setIsVisible={setIsVisible}
|
|
3280
|
-
setSourceState={setSourceState}
|
|
3281
|
-
userDetails={userDetails}
|
|
3227
|
+
style={style}
|
|
3282
3228
|
/>
|
|
3283
|
-
|
|
3284
|
-
|
|
3285
|
-
|
|
3286
|
-
|
|
3287
|
-
|
|
3288
|
-
|
|
3289
|
-
|
|
3290
|
-
|
|
3291
|
-
|
|
3292
|
-
|
|
3293
|
-
|
|
3294
|
-
|
|
3295
|
-
|
|
3296
|
-
|
|
3297
|
-
|
|
3298
|
-
|
|
3299
|
-
|
|
3300
|
-
|
|
3301
|
-
|
|
3302
|
-
|
|
3303
|
-
|
|
3304
|
-
|
|
3305
|
-
|
|
3306
|
-
|
|
3307
|
-
|
|
3308
|
-
|
|
3309
|
-
|
|
3229
|
+
|
|
3230
|
+
{sourceState === "new_user" && widget.user_consent == true && (
|
|
3231
|
+
<ConsentPopup
|
|
3232
|
+
formData={fields}
|
|
3233
|
+
conversationId={conversationId}
|
|
3234
|
+
widget={widget}
|
|
3235
|
+
enableConsent={enableConsent}
|
|
3236
|
+
setEnableConsent={setEnableConsent}
|
|
3237
|
+
isVisible={isVisible}
|
|
3238
|
+
setIsVisible={setIsVisible}
|
|
3239
|
+
setSourceState={setSourceState}
|
|
3240
|
+
userDetails={userDetails}
|
|
3241
|
+
/>
|
|
3242
|
+
)}
|
|
3243
|
+
|
|
3244
|
+
{(sourceState &&
|
|
3245
|
+
typeof sourceState === "string" &&
|
|
3246
|
+
sourceState.includes("browser") &&
|
|
3247
|
+
fields &&
|
|
3248
|
+
widget?.lead_form_id !== null) ||
|
|
3249
|
+
(widget.user_consent == false &&
|
|
3250
|
+
sourceState == "new_user" &&
|
|
3251
|
+
widget?.lead_form_id !== null &&
|
|
3252
|
+
fields) ? (
|
|
3253
|
+
<>
|
|
3254
|
+
<FormBox>
|
|
3255
|
+
<LogoSize
|
|
3310
3256
|
style={{
|
|
3311
|
-
|
|
3312
|
-
|
|
3257
|
+
borderRadius: "50%",
|
|
3258
|
+
top: "0px",
|
|
3259
|
+
height: "24.9px",
|
|
3260
|
+
width: "24px",
|
|
3261
|
+
border: "none",
|
|
3313
3262
|
}}
|
|
3314
|
-
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
|
|
3324
|
-
|
|
3325
|
-
|
|
3326
|
-
|
|
3327
|
-
|
|
3328
|
-
|
|
3329
|
-
|
|
3263
|
+
>
|
|
3264
|
+
<img
|
|
3265
|
+
alt={"logo"}
|
|
3266
|
+
src={
|
|
3267
|
+
(widget && widget.logo_url) ||
|
|
3268
|
+
"https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
|
|
3269
|
+
}
|
|
3270
|
+
style={{
|
|
3271
|
+
width: "24px",
|
|
3272
|
+
height: "24px",
|
|
3273
|
+
}}
|
|
3274
|
+
/>
|
|
3275
|
+
</LogoSize>
|
|
3276
|
+
<FormMessage>
|
|
3277
|
+
<InputConverter
|
|
3278
|
+
formData={fields}
|
|
3279
|
+
conversationId={conversationId}
|
|
3280
|
+
widget={widget}
|
|
3281
|
+
workspace={widget?.workspace}
|
|
3282
|
+
setFormSubmit={setFormSubmit}
|
|
3283
|
+
setSourceState={setSourceState}
|
|
3284
|
+
/>
|
|
3285
|
+
</FormMessage>
|
|
3286
|
+
</FormBox>
|
|
3287
|
+
</>
|
|
3288
|
+
) : null}
|
|
3289
|
+
{typing && (
|
|
3290
|
+
<Container>
|
|
3291
|
+
<MessageContainer>
|
|
3292
|
+
<BotHeader>
|
|
3293
|
+
<BotLabel>{widget && widget.name}</BotLabel>
|
|
3294
|
+
</BotHeader>
|
|
3295
|
+
<MessageBubbleContainer>
|
|
3296
|
+
<AvatarContainer>
|
|
3297
|
+
<AvatarImage>
|
|
3298
|
+
<img
|
|
3299
|
+
alt={"logo"}
|
|
3300
|
+
src={
|
|
3301
|
+
(widget && widget.logo_url) ||
|
|
3302
|
+
"https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
|
|
3303
|
+
}
|
|
3304
|
+
/>
|
|
3305
|
+
</AvatarImage>
|
|
3306
|
+
</AvatarContainer>
|
|
3307
|
+
<MessageCard>
|
|
3308
|
+
<MessageText style={{
|
|
3309
|
+
marginBottom: "0px"
|
|
3310
|
+
}}>
|
|
3311
|
+
<ThreeDotTyping>
|
|
3312
|
+
<div class="typing-dots">
|
|
3313
|
+
<div class="dot"></div>
|
|
3314
|
+
<div class="dot"></div>
|
|
3315
|
+
<div class="dot"></div>
|
|
3316
|
+
</div>
|
|
3317
|
+
</ThreeDotTyping>
|
|
3318
|
+
</MessageText>
|
|
3319
|
+
<div className="snippet" data-title=".dot-flashing">
|
|
3320
|
+
<div className="stage">
|
|
3321
|
+
<div className="dot-flashing"></div>
|
|
3322
|
+
</div>
|
|
3323
|
+
</div>
|
|
3324
|
+
</MessageCard>
|
|
3325
|
+
</MessageBubbleContainer>
|
|
3326
|
+
</MessageContainer>
|
|
3327
|
+
</Container>
|
|
3328
|
+
)}
|
|
3329
|
+
</ChatContentWrapper>
|
|
3330
|
+
<Footer
|
|
3331
|
+
sourceState={sourceState}
|
|
3332
|
+
{...{ sendMessage, onFileUpload }}
|
|
3333
|
+
widget={widget}
|
|
3334
|
+
messages={messages}
|
|
3335
|
+
isTypingEnd={isTypingEnd}
|
|
3336
|
+
/>
|
|
3330
3337
|
</EndPointProvider>
|
|
3331
|
-
<Footer
|
|
3332
|
-
sourceState={sourceState}
|
|
3333
|
-
{...{ sendMessage, onFileUpload }}
|
|
3334
|
-
widget={widget}
|
|
3335
|
-
messages={messages}
|
|
3336
|
-
isTypingEnd={isTypingEnd}
|
|
3337
|
-
/>
|
|
3338
3338
|
</ChatWrapper>
|
|
3339
3339
|
) : null}
|
|
3340
3340
|
<WidgetMenu
|
|
@@ -3372,10 +3372,10 @@ const Footer = ({
|
|
|
3372
3372
|
onFileUpload,
|
|
3373
3373
|
}) => {
|
|
3374
3374
|
const [typedMessage, setTypedMessage] = useState("");
|
|
3375
|
-
const [typing, setBotTyping] = useState(true);
|
|
3376
3375
|
|
|
3377
3376
|
const send = () => {
|
|
3378
3377
|
//
|
|
3378
|
+
console.log("typed message", typedMessage)
|
|
3379
3379
|
if (typedMessage.trim()) {
|
|
3380
3380
|
sendMessage(typedMessage);
|
|
3381
3381
|
}
|
|
@@ -3389,10 +3389,6 @@ const Footer = ({
|
|
|
3389
3389
|
setTypedMessage("");
|
|
3390
3390
|
};
|
|
3391
3391
|
|
|
3392
|
-
useEffect(() => {
|
|
3393
|
-
setBotTyping(isTypingEnd);
|
|
3394
|
-
}, [isTypingEnd]);
|
|
3395
|
-
|
|
3396
3392
|
const uploadTag = useRef(null);
|
|
3397
3393
|
const textareaRef = useRef(null);
|
|
3398
3394
|
|
|
@@ -3406,87 +3402,109 @@ const Footer = ({
|
|
|
3406
3402
|
|
|
3407
3403
|
return (
|
|
3408
3404
|
<>
|
|
3409
|
-
{typing && (
|
|
3410
|
-
<p className="tryit_bot_typing font-sans">
|
|
3411
|
-
{widget && widget.name} is typing
|
|
3412
|
-
<span>
|
|
3413
|
-
{/* <img src={require("./images/bot_typing.gif")} />{" "} */}
|
|
3414
|
-
<div className="snippet" data-title=".dot-flashing">
|
|
3415
|
-
<div className="stage">
|
|
3416
|
-
<div className="dot-flashing"></div>
|
|
3417
|
-
</div>
|
|
3418
|
-
</div>
|
|
3419
|
-
</span>
|
|
3420
|
-
</p>
|
|
3421
|
-
)}
|
|
3422
3405
|
{console.log("3420", widget)}
|
|
3423
3406
|
{console.log("source state footer", sourceState)}
|
|
3424
|
-
{
|
|
3425
|
-
(widget?.user_consent === true &&
|
|
3426
|
-
|
|
3427
|
-
|
|
3428
|
-
|
|
3429
|
-
|
|
3430
|
-
|
|
3431
|
-
|
|
3432
|
-
|
|
3433
|
-
|
|
3434
|
-
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
|
|
3438
|
-
|
|
3439
|
-
|
|
3440
|
-
|
|
3441
|
-
|
|
3442
|
-
|
|
3443
|
-
|
|
3444
|
-
|
|
3445
|
-
|
|
3446
|
-
|
|
3407
|
+
{widget?.user_consent === false ||
|
|
3408
|
+
(widget?.user_consent === true &&
|
|
3409
|
+
typeof sourceState === "string" &&
|
|
3410
|
+
sourceState.includes("browser") &&
|
|
3411
|
+
widget?.lead_form_id == null) ||
|
|
3412
|
+
(typeof sourceState == "string" &&
|
|
3413
|
+
!sourceState.includes("browser") &&
|
|
3414
|
+
sourceState !== "new_user" &&
|
|
3415
|
+
widget?.user_consent === true &&
|
|
3416
|
+
widget?.lead_form_id != null) ? (
|
|
3417
|
+
<InputMessageChat
|
|
3418
|
+
size={scale.widgetSize}
|
|
3419
|
+
className="widget_input_message"
|
|
3420
|
+
>
|
|
3421
|
+
{/* <div className="widget_input_message_section">
|
|
3422
|
+
<div className="widget_input_message_box">
|
|
3423
|
+
<textarea
|
|
3424
|
+
placeholder="Write a message"
|
|
3425
|
+
value={typedMessage}
|
|
3426
|
+
onChange={(e) => setTypedMessage(e.target.value)}
|
|
3427
|
+
onKeyDown={(e) => {
|
|
3428
|
+
if (e.key === "Enter") {
|
|
3429
|
+
e.preventDefault();
|
|
3430
|
+
send();
|
|
3431
|
+
if (textareaRef.current) {
|
|
3432
|
+
textareaRef.current.style.height = "30px";
|
|
3433
|
+
textareaRef.current.style.overflow = "hidden";
|
|
3434
|
+
}
|
|
3447
3435
|
}
|
|
3448
|
-
}
|
|
3449
|
-
|
|
3450
|
-
|
|
3451
|
-
|
|
3452
|
-
|
|
3453
|
-
|
|
3454
|
-
|
|
3455
|
-
|
|
3456
|
-
|
|
3457
|
-
|
|
3458
|
-
|
|
3459
|
-
|
|
3460
|
-
|
|
3461
|
-
|
|
3462
|
-
|
|
3463
|
-
|
|
3464
|
-
|
|
3465
|
-
|
|
3466
|
-
|
|
3467
|
-
|
|
3468
|
-
|
|
3436
|
+
}}
|
|
3437
|
+
style={style}
|
|
3438
|
+
ref={textareaRef}
|
|
3439
|
+
rows={1}
|
|
3440
|
+
id="typemsg"
|
|
3441
|
+
wrap="hard"
|
|
3442
|
+
></textarea>
|
|
3443
|
+
</div>
|
|
3444
|
+
<div className="send_icon_box">
|
|
3445
|
+
<span
|
|
3446
|
+
className="attachment_icon"
|
|
3447
|
+
onClick={() => {
|
|
3448
|
+
uploadTag.current && uploadTag.current.click();
|
|
3449
|
+
}}
|
|
3450
|
+
>
|
|
3451
|
+
<svg x="0px" y="0px" viewBox="0 0 24 24" xmlSpace="preserve">
|
|
3452
|
+
<path
|
|
3453
|
+
d="M4.6 22.3c-1 0-2-.4-2.7-1.1-.8-.8-1.3-1.9-1.2-3 .1-1.2.6-2.3 1.7-3.3L13.8 3.4c1.1-1.1 2.5-1.6 4-1.6s2.9.6 4 1.6c2.2 2.2 2.2 5.7 0 7.9l-10 10c-.3.3-.7.3-1 0-.3-.3-.3-.7 0-1l10-10c1.6-1.6 1.6-4.3 0-5.9-.8-.8-1.8-1.2-3-1.2-1.1 0-2.2.4-3 1.2L3.3 15.8c-.8.8-1.2 1.6-1.2 2.4 0 .7.2 1.4.8 2 1.1 1.1 3 .9 4.3-.5l9.4-9.4c.3-.3.4-.6.4-.9 0-.3-.1-.7-.4-.9-.5-.5-1.3-.5-1.8 0l-8 8c-.3.3-.7.3-1 0-.3-.3-.3-.7 0-1l8-8c1.1-1.1 2.8-1.1 3.8 0 .5.5.8 1.2.8 1.9s-.3 1.4-.8 1.9l-9.4 9.4c-1 1-2.3 1.6-3.6 1.6z"
|
|
3454
|
+
fill="fillcolor"
|
|
3455
|
+
/>
|
|
3456
|
+
</svg>
|
|
3457
|
+
</span>
|
|
3458
|
+
<span onClick={() => send()}>
|
|
3459
|
+
<input
|
|
3460
|
+
type="file"
|
|
3461
|
+
hidden
|
|
3462
|
+
ref={uploadTag}
|
|
3463
|
+
onChange={onFileUpload}
|
|
3469
3464
|
/>
|
|
3470
|
-
|
|
3471
|
-
|
|
3472
|
-
|
|
3473
|
-
|
|
3474
|
-
|
|
3475
|
-
|
|
3476
|
-
|
|
3477
|
-
|
|
3478
|
-
|
|
3479
|
-
|
|
3480
|
-
|
|
3481
|
-
|
|
3482
|
-
|
|
3483
|
-
|
|
3484
|
-
|
|
3485
|
-
|
|
3486
|
-
|
|
3487
|
-
|
|
3488
|
-
|
|
3489
|
-
|
|
3465
|
+
<svg x="0px" y="0px" viewBox="0 0 32 32" xmlSpace="preserve">
|
|
3466
|
+
<path d="M24 30c-.2 0-.3 0-.5-.1l-12-7c-.5-.3-.6-.9-.4-1.4.3-.5.9-.6 1.4-.4l10.8 6.3 6.1-24.6L3.2 16l5.6 3.1c.5.3.7.9.4 1.4-.3.5-.9.7-1.4.4l-7.3-4c-.3-.2-.5-.5-.5-.9s.2-.7.6-.9l30-15c.3-.2.8-.1 1.1.1.3.2.4.6.3 1l-7 28c-.1.3-.3.6-.6.7-.1.1-.3.1-.4.1z" />
|
|
3467
|
+
<path d="M12 32h-.3c-.4-.1-.7-.5-.7-1v-9c0-.6.4-1 1-1s1 .4 1 1v5.7l2.2-3.3c.3-.5.9-.6 1.4-.3.5.3.6.9.3 1.4l-4 6c-.3.3-.6.5-.9.5z" />
|
|
3468
|
+
<path d="M12 23c-.2 0-.5-.1-.7-.3-.4-.4-.4-1-.1-1.4l19-21c.4-.4 1-.4 1.4-.1.4.4.4 1 .1 1.4l-19 21c-.2.3-.4.4-.7.4z" />
|
|
3469
|
+
</svg>
|
|
3470
|
+
</span>
|
|
3471
|
+
</div>
|
|
3472
|
+
</div> */}
|
|
3473
|
+
<StyledCard>
|
|
3474
|
+
<CardContent>
|
|
3475
|
+
<InputContainer>
|
|
3476
|
+
<StyledInput
|
|
3477
|
+
value={typedMessage}
|
|
3478
|
+
onChange={(e) => setTypedMessage(e.target.value)}
|
|
3479
|
+
onKeyDown={(e) => {
|
|
3480
|
+
if (e.key === "Enter") {
|
|
3481
|
+
e.preventDefault();
|
|
3482
|
+
send();
|
|
3483
|
+
if (textareaRef.current) {
|
|
3484
|
+
textareaRef.current.style.height = "30px";
|
|
3485
|
+
textareaRef.current.style.overflow = "hidden";
|
|
3486
|
+
}
|
|
3487
|
+
}
|
|
3488
|
+
}}
|
|
3489
|
+
style={style}
|
|
3490
|
+
ref={textareaRef}
|
|
3491
|
+
rows={1}
|
|
3492
|
+
id="typemsg"
|
|
3493
|
+
wrap="hard"
|
|
3494
|
+
placeholder="Enter message"
|
|
3495
|
+
/>
|
|
3496
|
+
<IconButtonInput>
|
|
3497
|
+
<SendIcon
|
|
3498
|
+
style={{ cursor: "pointer" }}
|
|
3499
|
+
size={18}
|
|
3500
|
+
onClick={() => send()}
|
|
3501
|
+
/>
|
|
3502
|
+
</IconButtonInput>
|
|
3503
|
+
</InputContainer>
|
|
3504
|
+
</CardContent>
|
|
3505
|
+
</StyledCard>
|
|
3506
|
+
</InputMessageChat>
|
|
3507
|
+
) : null}
|
|
3490
3508
|
|
|
3491
3509
|
<div className="widget_footer">
|
|
3492
3510
|
<p>
|
|
@@ -3887,9 +3905,39 @@ const ReceivedCarousalOutput = ({
|
|
|
3887
3905
|
);
|
|
3888
3906
|
};
|
|
3889
3907
|
|
|
3890
|
-
const ChatHeaderTop = ({
|
|
3908
|
+
const ChatHeaderTop = ({
|
|
3909
|
+
widget,
|
|
3910
|
+
onClick,
|
|
3911
|
+
open,
|
|
3912
|
+
restart,
|
|
3913
|
+
exit,
|
|
3914
|
+
logoshape,
|
|
3915
|
+
setIsExpanded,
|
|
3916
|
+
isExpanded,
|
|
3917
|
+
}) => {
|
|
3891
3918
|
const scale = useScaleContext();
|
|
3919
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
3920
|
+
const dropDownRef = useRef(null)
|
|
3921
|
+
|
|
3892
3922
|
|
|
3923
|
+
const handleClickOutside = (event) => {
|
|
3924
|
+
const refData = dropDownRef.current;
|
|
3925
|
+
if (
|
|
3926
|
+
isOpen &&
|
|
3927
|
+
dropDownRef.current &&
|
|
3928
|
+
!refData.contains(event.target)
|
|
3929
|
+
) {
|
|
3930
|
+
setIsOpen(!isOpen);
|
|
3931
|
+
}
|
|
3932
|
+
};
|
|
3933
|
+
|
|
3934
|
+
useEffect(() => {
|
|
3935
|
+
document.addEventListener("click", handleClickOutside);
|
|
3936
|
+
|
|
3937
|
+
return () => {
|
|
3938
|
+
document.removeEventListener("click", handleClickOutside);
|
|
3939
|
+
};
|
|
3940
|
+
});
|
|
3893
3941
|
return (
|
|
3894
3942
|
<ChatHeader
|
|
3895
3943
|
className="widget_chat_top"
|
|
@@ -3899,35 +3947,28 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
|
|
|
3899
3947
|
}}
|
|
3900
3948
|
size={scale.widgetSize}
|
|
3901
3949
|
>
|
|
3902
|
-
<
|
|
3903
|
-
|
|
3904
|
-
|
|
3905
|
-
|
|
3906
|
-
|
|
3907
|
-
}
|
|
3908
|
-
|
|
3909
|
-
|
|
3910
|
-
|
|
3911
|
-
|
|
3912
|
-
|
|
3913
|
-
"https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
|
|
3914
|
-
}
|
|
3915
|
-
/>
|
|
3916
|
-
</LogoSize>
|
|
3950
|
+
{/* <ChevronLeftIcon
|
|
3951
|
+
size={24}
|
|
3952
|
+
style={{ marginRight: "8px", color: "white", cursor: "pointer" }}
|
|
3953
|
+
/> */}
|
|
3954
|
+
<img
|
|
3955
|
+
title={"logo"}
|
|
3956
|
+
src={
|
|
3957
|
+
(widget && widget.logo_url) ||
|
|
3958
|
+
"https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
|
|
3959
|
+
}
|
|
3960
|
+
/>
|
|
3917
3961
|
<ContentHeader>
|
|
3918
3962
|
<ContentHeaderLeft>
|
|
3919
|
-
<FormHeader
|
|
3920
|
-
style={{ color: widget.primary_color }}
|
|
3921
|
-
size={scale.widgetSize}
|
|
3922
|
-
>
|
|
3963
|
+
<FormHeader style={{ color: widget.primary_color }}>
|
|
3923
3964
|
{widget && widget.name}
|
|
3924
3965
|
</FormHeader>
|
|
3925
|
-
<Paragraph
|
|
3966
|
+
{/* <Paragraph
|
|
3926
3967
|
style={{ color: widget.primary_color }}
|
|
3927
3968
|
size={scale.widgetSize}
|
|
3928
3969
|
>
|
|
3929
3970
|
{widget && widget.description}
|
|
3930
|
-
</Paragraph>
|
|
3971
|
+
</Paragraph> */}
|
|
3931
3972
|
</ContentHeaderLeft>
|
|
3932
3973
|
<ContentHeaderRight size={scale.widgetSize}>
|
|
3933
3974
|
{/* <IconSpan
|
|
@@ -3955,12 +3996,12 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
|
|
|
3955
3996
|
</IconSpan> */}
|
|
3956
3997
|
<div
|
|
3957
3998
|
style={{
|
|
3958
|
-
|
|
3959
3999
|
display: "flex",
|
|
3960
|
-
gap: "
|
|
4000
|
+
gap: "16px",
|
|
4001
|
+
alignItems: "center",
|
|
3961
4002
|
}}
|
|
3962
4003
|
>
|
|
3963
|
-
<button
|
|
4004
|
+
{/* <button
|
|
3964
4005
|
onClick={restart}
|
|
3965
4006
|
style={{
|
|
3966
4007
|
color: `${widget.primary_color}`,
|
|
@@ -3968,11 +4009,17 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
|
|
|
3968
4009
|
border: "1px solid white",
|
|
3969
4010
|
padding: "6px 12px",
|
|
3970
4011
|
borderRadius: "8px",
|
|
3971
|
-
height: "28px"
|
|
4012
|
+
height: "28px",
|
|
3972
4013
|
}}
|
|
3973
4014
|
>
|
|
3974
4015
|
Restart
|
|
3975
|
-
</button>
|
|
4016
|
+
</button> */}
|
|
4017
|
+
<Maximize2Icon
|
|
4018
|
+
onClick={() => setIsExpanded(!isExpanded)}
|
|
4019
|
+
width={16}
|
|
4020
|
+
height={16}
|
|
4021
|
+
style={{ color: "white", cursor: "pointer" }}
|
|
4022
|
+
/>
|
|
3976
4023
|
{/* <IconSpan
|
|
3977
4024
|
className="relative close_section"
|
|
3978
4025
|
onClick={exit}
|
|
@@ -3994,7 +4041,7 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
|
|
|
3994
4041
|
</svg>
|
|
3995
4042
|
<label className=""> End Chat </label>
|
|
3996
4043
|
</IconSpan> */}
|
|
3997
|
-
<button
|
|
4044
|
+
{/* <button
|
|
3998
4045
|
onClick={exit}
|
|
3999
4046
|
style={{
|
|
4000
4047
|
color: `${widget.primary_color}`,
|
|
@@ -4002,11 +4049,85 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
|
|
|
4002
4049
|
border: "1px solid white",
|
|
4003
4050
|
padding: "6px 12px",
|
|
4004
4051
|
borderRadius: "8px",
|
|
4005
|
-
height: "28px"
|
|
4052
|
+
height: "28px",
|
|
4006
4053
|
}}
|
|
4007
4054
|
>
|
|
4008
4055
|
Exit
|
|
4009
|
-
</button>
|
|
4056
|
+
</button> */}
|
|
4057
|
+
{/* <XIcon
|
|
4058
|
+
onClick={exit}
|
|
4059
|
+
width={20}
|
|
4060
|
+
height={20}
|
|
4061
|
+
style={{ color: "white", cursor: "pointer" }}
|
|
4062
|
+
/> */}
|
|
4063
|
+
<div className="relative">
|
|
4064
|
+
<EllipsisVertical
|
|
4065
|
+
width={20}
|
|
4066
|
+
height={20}
|
|
4067
|
+
style={{ color: "white", cursor: "pointer" }}
|
|
4068
|
+
onClick={() => setIsOpen(!isOpen)}
|
|
4069
|
+
/>
|
|
4070
|
+
|
|
4071
|
+
{/* Dropdown Menu */}
|
|
4072
|
+
{isOpen && (
|
|
4073
|
+
<div style={{
|
|
4074
|
+
width: "72px",
|
|
4075
|
+
height: "max-content",
|
|
4076
|
+
position: "absolute",
|
|
4077
|
+
top: "30px",
|
|
4078
|
+
right: "10px",
|
|
4079
|
+
padding: "6px",
|
|
4080
|
+
borderRadius:"8px",
|
|
4081
|
+
display: "flex",
|
|
4082
|
+
flexDirection:"column",
|
|
4083
|
+
gap: "4px",
|
|
4084
|
+
background:"white",
|
|
4085
|
+
boxShadow: "0px 2px 6px #00000040",
|
|
4086
|
+
zIndex: 50
|
|
4087
|
+
|
|
4088
|
+
}}
|
|
4089
|
+
ref={dropDownRef}
|
|
4090
|
+
>
|
|
4091
|
+
<span
|
|
4092
|
+
style={{
|
|
4093
|
+
|
|
4094
|
+
width: "100%",
|
|
4095
|
+
background: "white",
|
|
4096
|
+
fontSize: "12px",
|
|
4097
|
+
display:"flex",
|
|
4098
|
+
alignItems: "center",
|
|
4099
|
+
cursor: "pointer"
|
|
4100
|
+
}}
|
|
4101
|
+
className="text-gray-900 hover:text-black whitespace-nowrap leading-normal"
|
|
4102
|
+
onClick={() => {
|
|
4103
|
+
restart();
|
|
4104
|
+
setIsOpen(false);
|
|
4105
|
+
}}
|
|
4106
|
+
>
|
|
4107
|
+
Restart Chat
|
|
4108
|
+
</span>
|
|
4109
|
+
<span
|
|
4110
|
+
|
|
4111
|
+
onClick={() => {
|
|
4112
|
+
exit();
|
|
4113
|
+
setIsOpen(false);
|
|
4114
|
+
}}
|
|
4115
|
+
className="text-gray-900 hover:text-black whitespace-nowrap leading-normal"
|
|
4116
|
+
style={{
|
|
4117
|
+
|
|
4118
|
+
width: "100%",
|
|
4119
|
+
background: "white",
|
|
4120
|
+
fontSize: "12px",
|
|
4121
|
+
display:"flex",
|
|
4122
|
+
alignItems: "center",
|
|
4123
|
+
cursor: "pointer"
|
|
4124
|
+
}}
|
|
4125
|
+
>
|
|
4126
|
+
End Chat
|
|
4127
|
+
</span>
|
|
4128
|
+
</div>
|
|
4129
|
+
)}
|
|
4130
|
+
</div>
|
|
4010
4131
|
</div>
|
|
4011
4132
|
</ContentHeaderRight>
|
|
4012
4133
|
</ContentHeader>
|
|
@@ -4026,34 +4147,51 @@ const AiResponse = ({
|
|
|
4026
4147
|
const scale = useScaleContext();
|
|
4027
4148
|
return (
|
|
4028
4149
|
<>
|
|
4029
|
-
|
|
4030
4150
|
<MessageBox size={scale.widgetSize} className="widget_chat_logs">
|
|
4031
|
-
<
|
|
4032
|
-
<img
|
|
4033
|
-
alt={"logo"}
|
|
4034
|
-
src={
|
|
4035
|
-
(widget && widget.logo_url) ||
|
|
4036
|
-
"https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
|
|
4037
|
-
}
|
|
4038
|
-
/>
|
|
4039
|
-
</LogoSize>
|
|
4040
|
-
<ChatMessage size={scale.widgetSize}>
|
|
4151
|
+
{/* <ChatMessage size={scale.widgetSize}>
|
|
4041
4152
|
<div className="flex widget_title chat_assisitant">
|
|
4042
|
-
<h6>{
|
|
4043
|
-
<div className="timestamp">{
|
|
4044
|
-
</div>
|
|
4045
|
-
<div>
|
|
4046
|
-
{console.log("output text", output.text)}
|
|
4047
|
-
<AssistantMd mdText={output.text}></AssistantMd>
|
|
4153
|
+
<h6>{}</h6>
|
|
4154
|
+
<div className="timestamp">{}</div>
|
|
4048
4155
|
</div>
|
|
4049
|
-
|
|
4050
|
-
|
|
4051
|
-
|
|
4156
|
+
<div>{console.log("output text", output.text)}</div>
|
|
4157
|
+
</ChatMessage> */}
|
|
4158
|
+
<Container>
|
|
4159
|
+
<MessageContainer>
|
|
4160
|
+
<BotHeader>
|
|
4161
|
+
<BotLabel>{widget && widget.name}</BotLabel>
|
|
4162
|
+
</BotHeader>
|
|
4163
|
+
<MessageBubbleContainer>
|
|
4164
|
+
<AvatarContainer>
|
|
4165
|
+
<AvatarImage>
|
|
4166
|
+
<img
|
|
4167
|
+
alt={"logo"}
|
|
4168
|
+
src={
|
|
4169
|
+
(widget && widget.logo_url) ||
|
|
4170
|
+
"https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
|
|
4171
|
+
}
|
|
4172
|
+
/>
|
|
4173
|
+
</AvatarImage>
|
|
4174
|
+
</AvatarContainer>
|
|
4175
|
+
<MessageCard>
|
|
4176
|
+
<AssistantMd mdText={output.text}></AssistantMd>
|
|
4177
|
+
</MessageCard>
|
|
4178
|
+
</MessageBubbleContainer>
|
|
4179
|
+
|
|
4180
|
+
<BottomContainer>
|
|
4181
|
+
<Timestamp>
|
|
4182
|
+
<TimestampText>{formatTimeAMPM(timestamp)}</TimestampText>
|
|
4183
|
+
</Timestamp>
|
|
4184
|
+
<AiFeedbackButtonsWrapper
|
|
4052
4185
|
options={output.buttons}
|
|
4053
4186
|
sendFeedback={sendFeedback}
|
|
4054
4187
|
sendMessage={sendMessage}
|
|
4055
4188
|
event_id={event_id}
|
|
4056
4189
|
/>
|
|
4190
|
+
</BottomContainer>
|
|
4191
|
+
</MessageContainer>
|
|
4192
|
+
</Container>
|
|
4193
|
+
</MessageBox>
|
|
4194
|
+
|
|
4057
4195
|
</>
|
|
4058
4196
|
);
|
|
4059
4197
|
};
|
|
@@ -4071,7 +4209,7 @@ const ChatAssistant = ({
|
|
|
4071
4209
|
}) => {
|
|
4072
4210
|
// const [hover, setHover] = useState(false);
|
|
4073
4211
|
const scale = useScaleContext();
|
|
4074
|
-
console.log("chat assistant",
|
|
4212
|
+
console.log("chat assistant", outputStruct);
|
|
4075
4213
|
if (outputStruct.response_type === "ai_response") {
|
|
4076
4214
|
return (
|
|
4077
4215
|
<AiResponse
|
|
@@ -4088,51 +4226,58 @@ const ChatAssistant = ({
|
|
|
4088
4226
|
return (
|
|
4089
4227
|
<>
|
|
4090
4228
|
<MessageBox size={scale.widgetSize} className="widget_chat_logs">
|
|
4091
|
-
<
|
|
4092
|
-
|
|
4093
|
-
|
|
4094
|
-
|
|
4095
|
-
|
|
4096
|
-
|
|
4097
|
-
|
|
4098
|
-
|
|
4099
|
-
|
|
4100
|
-
|
|
4101
|
-
|
|
4102
|
-
|
|
4103
|
-
|
|
4104
|
-
|
|
4105
|
-
|
|
4106
|
-
|
|
4107
|
-
|
|
4108
|
-
|
|
4109
|
-
|
|
4110
|
-
|
|
4111
|
-
|
|
4112
|
-
|
|
4113
|
-
|
|
4114
|
-
|
|
4115
|
-
|
|
4116
|
-
|
|
4117
|
-
|
|
4118
|
-
|
|
4119
|
-
|
|
4120
|
-
|
|
4121
|
-
|
|
4122
|
-
|
|
4123
|
-
|
|
4124
|
-
|
|
4125
|
-
</div>
|
|
4126
|
-
)}
|
|
4127
|
-
</ChatMessage>
|
|
4128
|
-
</MessageBox>
|
|
4129
|
-
{type === "text_with_btns" && (
|
|
4229
|
+
<Container>
|
|
4230
|
+
<MessageContainer>
|
|
4231
|
+
<BotHeader>
|
|
4232
|
+
<BotLabel>{widget && widget.name}</BotLabel>
|
|
4233
|
+
</BotHeader>
|
|
4234
|
+
<MessageBubbleContainer>
|
|
4235
|
+
<AvatarContainer>
|
|
4236
|
+
<AvatarImage>
|
|
4237
|
+
<img
|
|
4238
|
+
alt={"logo"}
|
|
4239
|
+
src={
|
|
4240
|
+
(widget && widget.logo_url) ||
|
|
4241
|
+
"https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
|
|
4242
|
+
}
|
|
4243
|
+
/>
|
|
4244
|
+
</AvatarImage>
|
|
4245
|
+
</AvatarContainer>
|
|
4246
|
+
<MessageCard>
|
|
4247
|
+
{type === "text_with_btns" ? (
|
|
4248
|
+
<div style={{
|
|
4249
|
+
marginBottom: "12px"
|
|
4250
|
+
}}>
|
|
4251
|
+
{console.log("check scenarios",outputStruct)}
|
|
4252
|
+
<AssistantMd mdText={outputStruct.text}></AssistantMd>
|
|
4253
|
+
</div>
|
|
4254
|
+
) : (
|
|
4255
|
+
<div>
|
|
4256
|
+
{console.log("output struct", outputStruct.value)}
|
|
4257
|
+
<AssistantMd mdText={outputStruct.value}></AssistantMd>
|
|
4258
|
+
</div>
|
|
4259
|
+
)}
|
|
4260
|
+
{type === "text_with_btns" && (
|
|
4261
|
+
<>
|
|
4262
|
+
|
|
4130
4263
|
<ButtonsWrapper
|
|
4131
4264
|
options={outputStruct.buttons}
|
|
4132
4265
|
sendMessage={sendMessage}
|
|
4133
4266
|
widget={widget}
|
|
4134
4267
|
/>
|
|
4268
|
+
</>
|
|
4135
4269
|
)}
|
|
4270
|
+
</MessageCard>
|
|
4271
|
+
</MessageBubbleContainer>
|
|
4272
|
+
<BottomContainer>
|
|
4273
|
+
<Timestamp>
|
|
4274
|
+
<TimestampText>{formatTimeAMPM(timestamp)}</TimestampText>
|
|
4275
|
+
</Timestamp>
|
|
4276
|
+
</BottomContainer>
|
|
4277
|
+
</MessageContainer>
|
|
4278
|
+
</Container>
|
|
4279
|
+
</MessageBox>
|
|
4280
|
+
|
|
4136
4281
|
</>
|
|
4137
4282
|
);
|
|
4138
4283
|
};
|
|
@@ -4167,22 +4312,92 @@ const FeedbackBtn = ({
|
|
|
4167
4312
|
}) => {
|
|
4168
4313
|
// const [hovered, setHovered] = useState(false);
|
|
4169
4314
|
const scale = useScaleContext();
|
|
4170
|
-
console.log("labelll", label)
|
|
4315
|
+
console.log("labelll", label);
|
|
4316
|
+
|
|
4317
|
+
const PersonWithSoundWavesIcon = () => (
|
|
4318
|
+
<svg
|
|
4319
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4320
|
+
width="14"
|
|
4321
|
+
height="14"
|
|
4322
|
+
viewBox="0 0 14 14"
|
|
4323
|
+
fill="none"
|
|
4324
|
+
>
|
|
4325
|
+
<path
|
|
4326
|
+
d="M10.5 2.33341C10.7188 2.87383 10.8392 3.46455 10.8392 4.08341C10.8392 4.70227 10.7188 5.29299 10.5 5.83341M12.1337 1.16675C12.581 2.04183 12.8333 3.03315 12.8333 4.08341C12.8333 5.13366 12.581 6.12499 12.1337 7.00007M8.75 4.08341C8.75 5.37207 7.70533 6.41674 6.41667 6.41674C5.128 6.41674 4.08333 5.37207 4.08333 4.08341C4.08333 2.79474 5.128 1.75007 6.41667 1.75007C7.70533 1.75007 8.75 2.79474 8.75 4.08341ZM4.08333 8.75007H8.75C10.0387 8.75007 11.0833 9.79474 11.0833 11.0834C11.0833 11.7277 10.561 12.2501 9.91667 12.2501H2.91667C2.27233 12.2501 1.75 11.7277 1.75 11.0834C1.75 9.79474 2.79467 8.75007 4.08333 8.75007Z"
|
|
4327
|
+
stroke="#45556C"
|
|
4328
|
+
stroke-linecap="round"
|
|
4329
|
+
stroke-linejoin="round"
|
|
4330
|
+
/>
|
|
4331
|
+
</svg>
|
|
4332
|
+
);
|
|
4171
4333
|
return (
|
|
4172
|
-
|
|
4173
|
-
|
|
4334
|
+
|
|
4335
|
+
|
|
4336
|
+
// <ReactionContainer
|
|
4337
|
+
// // onMouseOver={() => setHovered(true)}
|
|
4338
|
+
// // onMouseLeave={() => setHovered(false)}
|
|
4339
|
+
|
|
4340
|
+
// type="button"
|
|
4341
|
+
// onClick={() => {
|
|
4342
|
+
// if (action.contract_action) {
|
|
4343
|
+
// sendFeedback(
|
|
4344
|
+
// action.contract_action.action === "send_satisfied_feedback"
|
|
4345
|
+
// ? "satisfied"
|
|
4346
|
+
// : "not_satisfied",
|
|
4347
|
+
// event_id
|
|
4348
|
+
// );
|
|
4349
|
+
// } else if (action.send_rly) {
|
|
4350
|
+
// sendMessage(action.send_rly);
|
|
4351
|
+
// }
|
|
4352
|
+
// }}
|
|
4353
|
+
// // className="widget_btn"
|
|
4354
|
+
// size={scale.widgetSize}
|
|
4355
|
+
// >
|
|
4356
|
+
// {console.log("label", label)}
|
|
4357
|
+
// {/* <AssistantMd mdText={label} /> */}
|
|
4358
|
+
|
|
4359
|
+
// {
|
|
4360
|
+
// label === "Satisfied" ? (
|
|
4361
|
+
// <ReactionButton>
|
|
4362
|
+
// <ThumbsUpIcon strokeWidth={1.4} color="#45556C" />
|
|
4363
|
+
// </ReactionButton>
|
|
4364
|
+
// ) : null
|
|
4365
|
+
// // (
|
|
4366
|
+
// // <svg
|
|
4367
|
+
// // xmlns="
|
|
4368
|
+
// // http://www.w3.org/2000/svg"
|
|
4369
|
+
// // viewBox="0 0 24 24"
|
|
4370
|
+
// // fill="none"
|
|
4371
|
+
// // width="24px"
|
|
4372
|
+
// // height="24px"
|
|
4373
|
+
// // >
|
|
4374
|
+
// // <path
|
|
4375
|
+
// // d="M16 11.0638V12.5C16 13.8807 17.1193 15 18.5 15C19.8807 15 21 13.8807 21 12.5V6.5C21 5.11929 19.8807 4 18.5 4C17.1193 4 16 5.11929 16 6.5V8.26803M16 11.0638C15.9981 11.8772 15.9848 12.3486 15.9004 12.8057C15.812 13.2848 15.6657 13.7513 15.4645 14.1949C15.2378 14.6948 14.9181 15.154 14.2787 16.0725L11.2669 20.3986C11.1903 20.5085 11.1521 20.5634 11.1167 20.6041C10.764 21.0097 10.1537 21.0639 9.73502 20.7268C9.69309 20.6931 9.64573 20.6457 9.55102 20.551C9.38747 20.3874 9.30569 20.3057 9.23586 20.2251C8.55824 19.4437 8.33094 18.3683 8.63439 17.3796C8.66566 17.2777 8.70737 17.1698 8.79074 16.954L8.83852 16.8304C8.97239 16.484 9.03932 16.3108 9.06475 16.1739C9.21585 15.3603 8.67951 14.578 7.86615 14.4256C7.72925 14.4 7.54357 14.4 7.17222 14.4H4.7857C3.82553 14.4 3.34542 14.4 3.00125 14.2049C2.69915 14.0336 2.46584 13.7628 2.34113 13.4387C2.19905 13.0694 2.27007 12.5946 2.4121 11.645L2.94384 8.08995C3.16087 6.63894 3.26938 5.91343 3.62294 5.36807C3.93452 4.88744 4.3772 4.50605 4.89864 4.26899C5.4903 4 6.22388 4 7.69103 4H11.2C12.8802 4 13.7203 4 14.362 4.32698C14.9265 4.6146 15.3854 5.07354 15.673 5.63803C15.9635 6.20815 15.9964 6.93482 16 8.26803M16 11.0638V8.26803"
|
|
4376
|
+
// // stroke="#ED3535"
|
|
4377
|
+
// // strokeWidth="1.7"
|
|
4378
|
+
// // strokeLinecap="round"
|
|
4379
|
+
// // strokeLinejoin="round"
|
|
4380
|
+
// // />
|
|
4381
|
+
// // </svg>
|
|
4382
|
+
// // )
|
|
4383
|
+
// }
|
|
4384
|
+
// {label === "Not Satisfied" ? (
|
|
4385
|
+
// <ReactionButton>
|
|
4386
|
+
// <ThumbsDownIcon strokeWidth={1.4} color="#45556C" />
|
|
4387
|
+
// </ReactionButton>
|
|
4388
|
+
// ) : null}
|
|
4389
|
+
// {label === "Hand over to Live agent" ? (
|
|
4390
|
+
// <ReactionButton>
|
|
4391
|
+
// <PersonWithSoundWavesIcon />
|
|
4392
|
+
// </ReactionButton>
|
|
4393
|
+
// ) : null}
|
|
4394
|
+
|
|
4395
|
+
// </ReactionContainer>
|
|
4396
|
+
|
|
4397
|
+
<ReactionButton
|
|
4174
4398
|
// onMouseOver={() => setHovered(true)}
|
|
4175
4399
|
// onMouseLeave={() => setHovered(false)}
|
|
4176
|
-
|
|
4177
|
-
display: "flex",
|
|
4178
|
-
justifyContent: "center",
|
|
4179
|
-
width: "32px",
|
|
4180
|
-
height: "32px",
|
|
4181
|
-
padding: "6px",
|
|
4182
|
-
borderRadius: "9999px",
|
|
4183
|
-
border: "none",
|
|
4184
|
-
marginTop: "8px",
|
|
4185
|
-
}}
|
|
4400
|
+
|
|
4186
4401
|
type="button"
|
|
4187
4402
|
onClick={() => {
|
|
4188
4403
|
if (action.contract_action) {
|
|
@@ -4196,82 +4411,32 @@ const FeedbackBtn = ({
|
|
|
4196
4411
|
sendMessage(action.send_rly);
|
|
4197
4412
|
}
|
|
4198
4413
|
}}
|
|
4199
|
-
|
|
4414
|
+
|
|
4200
4415
|
size={scale.widgetSize}
|
|
4201
4416
|
>
|
|
4202
4417
|
{console.log("label", label)}
|
|
4203
4418
|
{/* <AssistantMd mdText={label} /> */}
|
|
4204
4419
|
{label === "Satisfied" ? (
|
|
4205
|
-
|
|
4206
|
-
|
|
4207
|
-
http://www.w3.org/2000/svg"
|
|
4208
|
-
viewBox="0 0 24 24"
|
|
4209
|
-
fill="none"
|
|
4210
|
-
width="24px"
|
|
4211
|
-
height="24px"
|
|
4212
|
-
>
|
|
4213
|
-
<path
|
|
4214
|
-
d="M15.1615 7.17025L15.2093 7.04661C15.2927 6.83088 15.3344 6.72298 15.3656 6.62109C15.6691 5.6323 15.4418 4.55693 14.7642 3.7755C14.6943 3.69498 14.6126 3.6132 14.449 3.44965C14.3543 3.35494 14.3069 3.30758 14.265 3.27382C13.8463 2.93673 13.236 2.99095 12.8833 3.39658C12.848 3.4372 12.8097 3.49217 12.7332 3.60209L9.72134 7.92817C9.08193 8.8466 8.76223 9.30581 8.53555 9.8057C8.33438 10.2494 8.18798 10.7159 8.09959 11.1949C8 11.7347 8 12.2942 8 13.4133V15.2006C8 16.8808 8 17.7209 8.32698 18.3626C8.6146 18.9271 9.07354 19.386 9.63803 19.6737C10.2798 20.0006 11.1198 20.0006 12.8 20.0006H16.309C17.7762 20.0006 18.5097 20.0006 19.1014 19.7317C19.6228 19.4946 20.0655 19.1132 20.3771 18.6326C20.7306 18.0872 20.8392 17.3617 21.0562 15.9107L21.5879 12.3557C21.73 11.4061 21.801 10.9312 21.6589 10.562C21.5342 10.2379 21.3009 9.96707 20.9988 9.79578C20.6546 9.60064 20.1745 9.60064 19.2143 9.60064H16.8278C16.4565 9.60064 16.2708 9.60064 16.1339 9.575C15.3205 9.42264 14.7842 8.64037 14.9353 7.82676C14.9607 7.68983 15.0276 7.51663 15.1615 7.17025Z"
|
|
4215
|
-
stroke="#1EC959"
|
|
4216
|
-
strokeWidth="2"
|
|
4217
|
-
strokeLinecap="round"
|
|
4218
|
-
strokeLinejoin="round"
|
|
4219
|
-
/>
|
|
4220
|
-
<path
|
|
4221
|
-
d="M3 11.5006C3 10.1199 4.11929 9.00064 5.5 9.00064C6.88071 9.00064 8 10.1199 8 11.5006V17.5006C8 18.8814 6.88071 20.0006 5.5 20.0006C4.11929 20.0006 3 18.8814 3 17.5006V11.5006Z"
|
|
4222
|
-
stroke="#1EC959"
|
|
4223
|
-
strokeWidth="1.7"
|
|
4224
|
-
strokeLinecap="round"
|
|
4225
|
-
strokeLinejoin="round"
|
|
4226
|
-
/>
|
|
4227
|
-
</svg>
|
|
4420
|
+
|
|
4421
|
+
<ThumbsUpIcon strokeWidth={1.4} color="#45556C" />
|
|
4228
4422
|
) : null
|
|
4229
|
-
|
|
4230
|
-
// <svg
|
|
4231
|
-
// xmlns="
|
|
4232
|
-
// http://www.w3.org/2000/svg"
|
|
4233
|
-
// viewBox="0 0 24 24"
|
|
4234
|
-
// fill="none"
|
|
4235
|
-
// width="24px"
|
|
4236
|
-
// height="24px"
|
|
4237
|
-
// >
|
|
4238
|
-
// <path
|
|
4239
|
-
// d="M16 11.0638V12.5C16 13.8807 17.1193 15 18.5 15C19.8807 15 21 13.8807 21 12.5V6.5C21 5.11929 19.8807 4 18.5 4C17.1193 4 16 5.11929 16 6.5V8.26803M16 11.0638C15.9981 11.8772 15.9848 12.3486 15.9004 12.8057C15.812 13.2848 15.6657 13.7513 15.4645 14.1949C15.2378 14.6948 14.9181 15.154 14.2787 16.0725L11.2669 20.3986C11.1903 20.5085 11.1521 20.5634 11.1167 20.6041C10.764 21.0097 10.1537 21.0639 9.73502 20.7268C9.69309 20.6931 9.64573 20.6457 9.55102 20.551C9.38747 20.3874 9.30569 20.3057 9.23586 20.2251C8.55824 19.4437 8.33094 18.3683 8.63439 17.3796C8.66566 17.2777 8.70737 17.1698 8.79074 16.954L8.83852 16.8304C8.97239 16.484 9.03932 16.3108 9.06475 16.1739C9.21585 15.3603 8.67951 14.578 7.86615 14.4256C7.72925 14.4 7.54357 14.4 7.17222 14.4H4.7857C3.82553 14.4 3.34542 14.4 3.00125 14.2049C2.69915 14.0336 2.46584 13.7628 2.34113 13.4387C2.19905 13.0694 2.27007 12.5946 2.4121 11.645L2.94384 8.08995C3.16087 6.63894 3.26938 5.91343 3.62294 5.36807C3.93452 4.88744 4.3772 4.50605 4.89864 4.26899C5.4903 4 6.22388 4 7.69103 4H11.2C12.8802 4 13.7203 4 14.362 4.32698C14.9265 4.6146 15.3854 5.07354 15.673 5.63803C15.9635 6.20815 15.9964 6.93482 16 8.26803M16 11.0638V8.26803"
|
|
4240
|
-
// stroke="#ED3535"
|
|
4241
|
-
// strokeWidth="1.7"
|
|
4242
|
-
// strokeLinecap="round"
|
|
4243
|
-
// strokeLinejoin="round"
|
|
4244
|
-
// />
|
|
4245
|
-
// </svg>
|
|
4246
|
-
// )
|
|
4423
|
+
|
|
4247
4424
|
}
|
|
4248
4425
|
{
|
|
4249
4426
|
label === "Not Satisfied"?(
|
|
4250
|
-
|
|
4251
|
-
|
|
4252
|
-
http://www.w3.org/2000/svg"
|
|
4253
|
-
viewBox="0 0 24 24"
|
|
4254
|
-
fill="none"
|
|
4255
|
-
width="24px"
|
|
4256
|
-
height="24px"
|
|
4257
|
-
>
|
|
4258
|
-
<path
|
|
4259
|
-
d="M16 11.0638V12.5C16 13.8807 17.1193 15 18.5 15C19.8807 15 21 13.8807 21 12.5V6.5C21 5.11929 19.8807 4 18.5 4C17.1193 4 16 5.11929 16 6.5V8.26803M16 11.0638C15.9981 11.8772 15.9848 12.3486 15.9004 12.8057C15.812 13.2848 15.6657 13.7513 15.4645 14.1949C15.2378 14.6948 14.9181 15.154 14.2787 16.0725L11.2669 20.3986C11.1903 20.5085 11.1521 20.5634 11.1167 20.6041C10.764 21.0097 10.1537 21.0639 9.73502 20.7268C9.69309 20.6931 9.64573 20.6457 9.55102 20.551C9.38747 20.3874 9.30569 20.3057 9.23586 20.2251C8.55824 19.4437 8.33094 18.3683 8.63439 17.3796C8.66566 17.2777 8.70737 17.1698 8.79074 16.954L8.83852 16.8304C8.97239 16.484 9.03932 16.3108 9.06475 16.1739C9.21585 15.3603 8.67951 14.578 7.86615 14.4256C7.72925 14.4 7.54357 14.4 7.17222 14.4H4.7857C3.82553 14.4 3.34542 14.4 3.00125 14.2049C2.69915 14.0336 2.46584 13.7628 2.34113 13.4387C2.19905 13.0694 2.27007 12.5946 2.4121 11.645L2.94384 8.08995C3.16087 6.63894 3.26938 5.91343 3.62294 5.36807C3.93452 4.88744 4.3772 4.50605 4.89864 4.26899C5.4903 4 6.22388 4 7.69103 4H11.2C12.8802 4 13.7203 4 14.362 4.32698C14.9265 4.6146 15.3854 5.07354 15.673 5.63803C15.9635 6.20815 15.9964 6.93482 16 8.26803M16 11.0638V8.26803"
|
|
4260
|
-
stroke="#ED3535"
|
|
4261
|
-
strokeWidth="1.7"
|
|
4262
|
-
strokeLinecap="round"
|
|
4263
|
-
strokeLinejoin="round"
|
|
4264
|
-
/>
|
|
4265
|
-
</svg>
|
|
4427
|
+
|
|
4428
|
+
<ThumbsDownIcon strokeWidth={1.4} color="#45556C" />
|
|
4266
4429
|
):null
|
|
4267
4430
|
}
|
|
4268
4431
|
{
|
|
4269
4432
|
label === "Hand over to Live agent"?(
|
|
4270
|
-
<
|
|
4433
|
+
<PersonWithSoundWavesIcon width="24" height="24" />
|
|
4434
|
+
// <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" color="blue" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hand-coins text-brand-primary w-4 h-4"><path d="M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17"></path><path d="m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"></path><path d="m2 16 6 6"></path><circle cx="16" cy="9" r="2.9"></circle><circle cx="6" cy="5" r="3"></circle></svg>
|
|
4271
4435
|
):null
|
|
4272
4436
|
}
|
|
4273
|
-
</
|
|
4274
|
-
|
|
4437
|
+
</ReactionButton>
|
|
4438
|
+
|
|
4439
|
+
|
|
4275
4440
|
);
|
|
4276
4441
|
};
|
|
4277
4442
|
|
|
@@ -4282,9 +4447,8 @@ const AiFeedbackButtonsWrapper = ({
|
|
|
4282
4447
|
event_id,
|
|
4283
4448
|
}) => {
|
|
4284
4449
|
return (
|
|
4285
|
-
<
|
|
4450
|
+
<ReactionContainer>
|
|
4286
4451
|
{options.map(({ label, action }, key) => (
|
|
4287
|
-
|
|
4288
4452
|
<FeedbackBtn
|
|
4289
4453
|
label={label}
|
|
4290
4454
|
action={action}
|
|
@@ -4294,23 +4458,45 @@ const AiFeedbackButtonsWrapper = ({
|
|
|
4294
4458
|
event_id={event_id}
|
|
4295
4459
|
></FeedbackBtn>
|
|
4296
4460
|
))}
|
|
4297
|
-
</
|
|
4461
|
+
</ReactionContainer>
|
|
4298
4462
|
);
|
|
4299
4463
|
};
|
|
4300
4464
|
|
|
4301
4465
|
const ButtonsWrapper = ({ options, sendMessage, widget }) => {
|
|
4302
4466
|
return (
|
|
4303
|
-
<
|
|
4304
|
-
|
|
4305
|
-
|
|
4306
|
-
|
|
4307
|
-
|
|
4308
|
-
|
|
4467
|
+
<SuggestionContainer>
|
|
4468
|
+
{options.map(({ label, action }, key) => (
|
|
4469
|
+
<>
|
|
4470
|
+
{console.log("send message", sendMessage)}
|
|
4471
|
+
{/* <SuggestionButton
|
|
4472
|
+
value={action.send_rly}
|
|
4473
|
+
key={key}
|
|
4474
|
+
onClick={() => {
|
|
4475
|
+
sendMessage(evalNormalOrJoinText(value));
|
|
4476
|
+
}}
|
|
4477
|
+
|
|
4478
|
+
>{label}</SuggestionButton> */}
|
|
4479
|
+
<WidgetBtn
|
|
4480
|
+
label={label}
|
|
4481
|
+
value={action.send_rly}
|
|
4482
|
+
key={key}
|
|
4309
4483
|
sendMessage={sendMessage}
|
|
4310
|
-
|
|
4484
|
+
widget={widget}
|
|
4311
4485
|
></WidgetBtn>
|
|
4312
|
-
|
|
4313
|
-
|
|
4486
|
+
</>
|
|
4487
|
+
))}
|
|
4488
|
+
</SuggestionContainer>
|
|
4489
|
+
// <ButtonWrapper>
|
|
4490
|
+
// {options.map(({ label, action }, key) => (
|
|
4491
|
+
// <WidgetBtn
|
|
4492
|
+
// label={label}
|
|
4493
|
+
// value={action.send_rly}
|
|
4494
|
+
// key={key}
|
|
4495
|
+
// sendMessage={sendMessage}
|
|
4496
|
+
// widget={widget}
|
|
4497
|
+
// ></WidgetBtn>
|
|
4498
|
+
// ))}
|
|
4499
|
+
// </ButtonWrapper>
|
|
4314
4500
|
);
|
|
4315
4501
|
};
|
|
4316
4502
|
|
|
@@ -4366,63 +4552,43 @@ const UserAssistant = ({
|
|
|
4366
4552
|
const scale = useScaleContext();
|
|
4367
4553
|
return (
|
|
4368
4554
|
<UserChat size={scale.widgetSize}>
|
|
4369
|
-
<MessageBox
|
|
4555
|
+
<MessageBox
|
|
4556
|
+
size={scale.widgetSize}
|
|
4557
|
+
style={{ flexDirection: "column", alignItems: "flex-end" }}
|
|
4558
|
+
>
|
|
4370
4559
|
<ChatMessage
|
|
4371
4560
|
size={scale.widgetSize}
|
|
4372
|
-
style={{
|
|
4561
|
+
style={{
|
|
4562
|
+
background: widget ? widget.secondary_color : "#fff",
|
|
4563
|
+
marginRight: "0px",
|
|
4564
|
+
}}
|
|
4373
4565
|
>
|
|
4374
4566
|
<div
|
|
4375
|
-
|
|
4376
|
-
|
|
4377
|
-
|
|
4378
|
-
|
|
4379
|
-
color:`${widget.user_message_text_color}`,
|
|
4380
|
-
fontSize: "12px",
|
|
4567
|
+
style={{
|
|
4568
|
+
color: `${widget.user_message_text_color}`,
|
|
4569
|
+
fontFamily: "'Inter', 'Open Sans'",
|
|
4570
|
+
fontSize: "14px",
|
|
4381
4571
|
fontStyle: "normal",
|
|
4382
|
-
fontWeight:
|
|
4383
|
-
lineHeight: "
|
|
4384
|
-
|
|
4385
|
-
|
|
4386
|
-
<div className="timestamp" style={{ color: "#fff", gap: 0 }}>
|
|
4387
|
-
{formatTimeAMPM(timestamp)}
|
|
4388
|
-
</div>
|
|
4389
|
-
</div>
|
|
4390
|
-
<div style={{ color: `${widget.user_message_text_color}` }}>
|
|
4572
|
+
fontWeight: 400,
|
|
4573
|
+
lineHeight: "20px",
|
|
4574
|
+
}}
|
|
4575
|
+
>
|
|
4391
4576
|
{(SYS_UPLOADED_FILE && "File uploaded") || (
|
|
4392
4577
|
<DisplayURL text={input.value} />
|
|
4393
4578
|
)}
|
|
4394
4579
|
</div>
|
|
4395
4580
|
</ChatMessage>
|
|
4396
|
-
<
|
|
4397
|
-
|
|
4398
|
-
|
|
4399
|
-
|
|
4400
|
-
|
|
4401
|
-
|
|
4402
|
-
|
|
4403
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
4404
|
-
x="0px"
|
|
4405
|
-
y="0px"
|
|
4406
|
-
viewBox="0 0 58 58"
|
|
4407
|
-
xmlSpace="preserve"
|
|
4581
|
+
<BottomContainer>
|
|
4582
|
+
<Timestamp
|
|
4583
|
+
style={{
|
|
4584
|
+
justifyContent: "flex-end",
|
|
4585
|
+
paddingRight: "2px",
|
|
4586
|
+
paddingTop: "4px",
|
|
4587
|
+
}}
|
|
4408
4588
|
>
|
|
4409
|
-
<
|
|
4410
|
-
|
|
4411
|
-
|
|
4412
|
-
id="Ellipse_238"
|
|
4413
|
-
cx={452}
|
|
4414
|
-
cy={4561.2}
|
|
4415
|
-
rx={11.8}
|
|
4416
|
-
ry={11.3}
|
|
4417
|
-
/>
|
|
4418
|
-
<path
|
|
4419
|
-
id="Path_4117"
|
|
4420
|
-
// className="st0"
|
|
4421
|
-
d="M427.9 4592.4c3.2-8.9 10.7-15.3 24.1-15.3s20.8 6 24.1 15.3v1.2s-8.5 13.5-24.1 13.3-24.1-14.5-24.1-14.5z"
|
|
4422
|
-
/>
|
|
4423
|
-
</g>
|
|
4424
|
-
</svg>
|
|
4425
|
-
</LogoSize>
|
|
4589
|
+
<TimestampText>{formatTimeAMPM(timestamp)}</TimestampText>
|
|
4590
|
+
</Timestamp>
|
|
4591
|
+
</BottomContainer>
|
|
4426
4592
|
</MessageBox>
|
|
4427
4593
|
</UserChat>
|
|
4428
4594
|
);
|