pager-widget 0.2.6 → 0.2.8
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 +1265 -1045
- package/ConsentPopup.jsx +266 -96
- package/Dropdown.jsx +37 -24
- package/InputConverter.jsx +54 -51
- package/dist/lib.js +3145 -11
- 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,54 @@ 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
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
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")};
|
|
89
|
+
width: ${({ isExpanded, size }) =>
|
|
90
|
+
isExpanded
|
|
91
|
+
? switchSize(size, "600px", "600px", "600px")
|
|
92
|
+
: switchSize(size, "400px", "440px", "480px")};
|
|
65
93
|
height: auto;
|
|
66
94
|
float: left;
|
|
67
95
|
position: fixed;
|
|
@@ -69,9 +97,12 @@ const WidgetPreview = styled.div`
|
|
|
69
97
|
bottom: 3.5rem;
|
|
70
98
|
background: #f6f8fa 0% 0% no-repeat padding-box;
|
|
71
99
|
box-shadow: 0px 15px 30px #00000040;
|
|
72
|
-
border-radius:
|
|
100
|
+
border-radius: 22px;
|
|
73
101
|
box-sizing: border-box;
|
|
74
102
|
font-family: "Open Sans", sans-serif;
|
|
103
|
+
transition: 0.4s;
|
|
104
|
+
transition-property: all;
|
|
105
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
75
106
|
`;
|
|
76
107
|
const FormHeader = styled.div`
|
|
77
108
|
display: flex;
|
|
@@ -79,33 +110,15 @@ const FormHeader = styled.div`
|
|
|
79
110
|
width: 100%;
|
|
80
111
|
float: left;
|
|
81
112
|
font-family: "Inter", "Open Sans";
|
|
82
|
-
font-size:
|
|
83
|
-
color: #
|
|
84
|
-
margin
|
|
113
|
+
font-size: clamp(1rem, calc(0.75rem + 0.3125vw), 1.125rem);
|
|
114
|
+
color: #020618;
|
|
115
|
+
margin: 0px 12px;
|
|
85
116
|
margin-bottom: 0px;
|
|
86
117
|
justify-content: space-between;
|
|
87
118
|
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
|
-
}
|
|
119
|
+
font-style: normal;
|
|
120
|
+
font-weight: 600;
|
|
121
|
+
line-height: 24px;
|
|
109
122
|
|
|
110
123
|
.target.customTip {
|
|
111
124
|
width: 12px;
|
|
@@ -124,6 +137,7 @@ const FormHeader = styled.div`
|
|
|
124
137
|
`;
|
|
125
138
|
const ChatWrapper = styled.div`
|
|
126
139
|
box-sizing: border-box;
|
|
140
|
+
height: 728px;
|
|
127
141
|
|
|
128
142
|
.widget_footer{
|
|
129
143
|
display: flex;
|
|
@@ -137,7 +151,7 @@ const ChatWrapper = styled.div`
|
|
|
137
151
|
|
|
138
152
|
p{
|
|
139
153
|
font-family: "Inter", "Open Sans";
|
|
140
|
-
font-size:
|
|
154
|
+
font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
|
|
141
155
|
color: #000;
|
|
142
156
|
margin: 0;
|
|
143
157
|
align-items: center;
|
|
@@ -158,7 +172,7 @@ const ChatWrapper = styled.div`
|
|
|
158
172
|
|
|
159
173
|
.tryit_bot_typing{
|
|
160
174
|
position: relative;
|
|
161
|
-
font-size:
|
|
175
|
+
font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
|
|
162
176
|
color: #555;
|
|
163
177
|
width: 100%;
|
|
164
178
|
padding-left: 16px;
|
|
@@ -242,72 +256,7 @@ const ChatWrapper = styled.div`
|
|
|
242
256
|
|
|
243
257
|
`;
|
|
244
258
|
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);
|
|
259
|
+
height: ${(props) => (props.isMessageContainer ? "75%" : "85%")};
|
|
311
260
|
width: 100%;
|
|
312
261
|
float: left;
|
|
313
262
|
padding: 12px 20px 20px 15px;
|
|
@@ -322,6 +271,44 @@ const ChatContentWrapper = styled.div`
|
|
|
322
271
|
// background-repeat: no-repeat;
|
|
323
272
|
}
|
|
324
273
|
`;
|
|
274
|
+
|
|
275
|
+
const BodyNotesWrapper = styled.div`
|
|
276
|
+
display: flex;
|
|
277
|
+
flex-direction: column;
|
|
278
|
+
align-items: flex-start;
|
|
279
|
+
gap: 16px;
|
|
280
|
+
margin-bottom: 12px;
|
|
281
|
+
`;
|
|
282
|
+
|
|
283
|
+
const OperationHourWrapper = styled.span`
|
|
284
|
+
color: #62748e;
|
|
285
|
+
text-align: center;
|
|
286
|
+
font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
|
|
287
|
+
font-family: "Inter", "Open Sans";
|
|
288
|
+
font-style: normal;
|
|
289
|
+
font-weight: 400;
|
|
290
|
+
line-height: 18px;
|
|
291
|
+
`;
|
|
292
|
+
|
|
293
|
+
const NotesWrapper = styled.div`
|
|
294
|
+
display: flex;
|
|
295
|
+
padding: 10px 10px 10px 12px;
|
|
296
|
+
align-items: flex-start;
|
|
297
|
+
gap: 8px;
|
|
298
|
+
align-self: stretch;
|
|
299
|
+
border-radius: 12px;
|
|
300
|
+
border: 1px solid var(--zinc-200, #e4e4e7);
|
|
301
|
+
`;
|
|
302
|
+
|
|
303
|
+
const InfoContent = styled.span`
|
|
304
|
+
color: #1d293d;
|
|
305
|
+
font-family: "Inter", "Open Sans";
|
|
306
|
+
font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
|
|
307
|
+
font-style: normal;
|
|
308
|
+
font-weight: 400;
|
|
309
|
+
line-height: 18px;
|
|
310
|
+
`;
|
|
311
|
+
|
|
325
312
|
const AssistantChat = styled.div`
|
|
326
313
|
width: 100%;
|
|
327
314
|
float: left;
|
|
@@ -331,200 +318,6 @@ const AssistantChat = styled.div`
|
|
|
331
318
|
flex-direction: column;
|
|
332
319
|
position: relative;
|
|
333
320
|
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
321
|
`;
|
|
529
322
|
const LogoSize = styled.div`
|
|
530
323
|
width: 40px;
|
|
@@ -537,6 +330,7 @@ const LogoSize = styled.div`
|
|
|
537
330
|
display: flex;
|
|
538
331
|
justify-content: center;
|
|
539
332
|
align-items: center;
|
|
333
|
+
border: none;
|
|
540
334
|
|
|
541
335
|
img {
|
|
542
336
|
width: 36px;
|
|
@@ -551,104 +345,27 @@ const LogoSize = styled.div`
|
|
|
551
345
|
`;
|
|
552
346
|
const ChatHeader = styled.div`
|
|
553
347
|
width: 100%;
|
|
554
|
-
height:
|
|
348
|
+
height: 60px;
|
|
555
349
|
display: flex;
|
|
556
350
|
align-items: center;
|
|
557
|
-
padding:
|
|
351
|
+
padding: 0px 20px;
|
|
558
352
|
background: #ffd15c;
|
|
559
|
-
border-top-left-radius:
|
|
560
|
-
border-top-right-radius:
|
|
353
|
+
border-top-left-radius: 22px;
|
|
354
|
+
border-top-right-radius: 22px;
|
|
561
355
|
background-position: right;
|
|
562
356
|
background-size: contain;
|
|
563
357
|
justify-content: space-between;
|
|
564
358
|
box-sizing: border-box;
|
|
565
359
|
|
|
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
|
-
}
|
|
360
|
+
img {
|
|
361
|
+
width: 30px;
|
|
362
|
+
height: 30px;
|
|
645
363
|
}
|
|
646
364
|
`;
|
|
647
365
|
const ContentHeaderLeft = styled.div`
|
|
648
366
|
width: 82%;
|
|
649
367
|
display: flex;
|
|
650
|
-
|
|
651
|
-
margin-top: 4px;
|
|
368
|
+
align-items: center;
|
|
652
369
|
`;
|
|
653
370
|
const ContentHeaderRight = styled.div`
|
|
654
371
|
width: 15%;
|
|
@@ -766,12 +483,6 @@ const ContentHeader = styled.div`
|
|
|
766
483
|
height: 28px;
|
|
767
484
|
}
|
|
768
485
|
}
|
|
769
|
-
|
|
770
|
-
svg {
|
|
771
|
-
width: 30px;
|
|
772
|
-
height: 30px;
|
|
773
|
-
cursor: pointer;
|
|
774
|
-
}
|
|
775
486
|
`;
|
|
776
487
|
const Paragraph = styled.p`
|
|
777
488
|
font-family: "Inter", "Open Sans";
|
|
@@ -781,7 +492,7 @@ const Paragraph = styled.p`
|
|
|
781
492
|
text-overflow: ellipsis;
|
|
782
493
|
white-space: nowrap;
|
|
783
494
|
overflow: hidden;
|
|
784
|
-
// font-size:
|
|
495
|
+
// font-size: clamp(0.8125rem, calc(0.5625rem + 0.3125vw), 0.9375rem);
|
|
785
496
|
|
|
786
497
|
@media (min-width: 2160px) {
|
|
787
498
|
font-size: ${(props) => switchSize(props.size, "15px", "16px", "18px")};
|
|
@@ -807,94 +518,19 @@ const Paragraph = styled.p`
|
|
|
807
518
|
const ChatMessage = styled.div`
|
|
808
519
|
width: 85%;
|
|
809
520
|
max-width: max-content;
|
|
810
|
-
padding:
|
|
811
|
-
margin-left:
|
|
521
|
+
padding: 10px 14px !important;
|
|
522
|
+
margin-left: 32px;
|
|
812
523
|
margin-top: 14px;
|
|
524
|
+
font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
|
|
813
525
|
font-family: "Inter", "Open Sans";
|
|
814
526
|
white-space: pre-wrap;
|
|
815
527
|
box-sizing: border-box;
|
|
816
528
|
word-break: break-word;
|
|
817
|
-
border-radius: 0px 6px 6px 6px;
|
|
818
529
|
color: #333;
|
|
819
530
|
position: relative;
|
|
820
531
|
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
|
-
}
|
|
532
|
+
border-radius: 8px;
|
|
533
|
+
background: #f4f4f5;
|
|
898
534
|
|
|
899
535
|
svg {
|
|
900
536
|
width: 6px;
|
|
@@ -912,7 +548,7 @@ const ChatMessage = styled.div`
|
|
|
912
548
|
}
|
|
913
549
|
.timestamp {
|
|
914
550
|
color: #888;
|
|
915
|
-
// font-size:
|
|
551
|
+
// font-size: clamp(0.625rem, calc(0.375rem + 0.3125vw), 0.75rem);
|
|
916
552
|
font-family: "Inter", "Open Sans";
|
|
917
553
|
position: relative;
|
|
918
554
|
bottom: 0px;
|
|
@@ -947,7 +583,7 @@ const ChatMessage = styled.div`
|
|
|
947
583
|
margin-bottom: 4px;
|
|
948
584
|
|
|
949
585
|
h6 {
|
|
950
|
-
// font-size:
|
|
586
|
+
// font-size: clamp(0.8125rem, calc(0.5625rem + 0.3125vw), 0.9375rem);
|
|
951
587
|
font-family: "Inter", "Open Sans";
|
|
952
588
|
color: #333;
|
|
953
589
|
margin: 0;
|
|
@@ -976,7 +612,7 @@ const ChatMessage = styled.div`
|
|
|
976
612
|
|
|
977
613
|
.chatAssistant_one {
|
|
978
614
|
h6 {
|
|
979
|
-
font-size:
|
|
615
|
+
font-size: clamp(1rem, calc(0.75rem + 0.3125vw), 1.125rem);
|
|
980
616
|
font-family: "Inter", "Open Sans";
|
|
981
617
|
color: #555;
|
|
982
618
|
margin: 16px 0 0;
|
|
@@ -988,7 +624,7 @@ const ChatMessage = styled.div`
|
|
|
988
624
|
list-style: none;
|
|
989
625
|
li {
|
|
990
626
|
color: #1d48eb;
|
|
991
|
-
font-size:
|
|
627
|
+
font-size: clamp(1rem, calc(0.75rem + 0.3125vw), 1.125rem);
|
|
992
628
|
font-family: "Inter", "Open Sans";
|
|
993
629
|
margin-bottom: 4px;
|
|
994
630
|
a {
|
|
@@ -1006,28 +642,24 @@ const ChatMessage = styled.div`
|
|
|
1006
642
|
}
|
|
1007
643
|
|
|
1008
644
|
.wid_message {
|
|
1009
|
-
font-size:
|
|
645
|
+
font-size: clamp(1rem, calc(0.75rem + 0.3125vw), 1.125rem);
|
|
1010
646
|
font-family: "Inter", "Open Sans";
|
|
1011
647
|
}
|
|
1012
648
|
`;
|
|
1013
649
|
|
|
1014
650
|
const FormMessage = styled.div`
|
|
1015
|
-
width:
|
|
1016
|
-
|
|
1017
|
-
padding: 1px 10px 8px 10px !important;
|
|
1018
|
-
margin-left: 14px;
|
|
1019
|
-
margin-top: 20px;
|
|
651
|
+
width: 85%;
|
|
652
|
+
margin-left: 32px;
|
|
1020
653
|
font-family: "Inter", "Open Sans";
|
|
654
|
+
font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
|
|
1021
655
|
white-space: pre-wrap;
|
|
1022
656
|
box-sizing: border-box;
|
|
1023
657
|
word-break: break-word;
|
|
1024
|
-
border-radius: 0px 6px 6px 6px;
|
|
1025
658
|
color: #333;
|
|
1026
659
|
// position: relative;
|
|
1027
660
|
background: #f6f8fa 0% 0% no-repeat padding-box;
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
// border-radius: 0px 10px 10px 10px;
|
|
661
|
+
border-radius: 8px;
|
|
662
|
+
background: #f4f4f5;
|
|
1031
663
|
`;
|
|
1032
664
|
const MessageBox = styled.div`
|
|
1033
665
|
width: 100%;
|
|
@@ -1055,47 +687,24 @@ const MessageBox = styled.div`
|
|
|
1055
687
|
}
|
|
1056
688
|
|
|
1057
689
|
@media (max-width: 1920px) {
|
|
1058
|
-
width: ${(props) => switchSize(props.size, "
|
|
1059
|
-
height: ${(props) => switchSize(props.size, "
|
|
690
|
+
width: ${(props) => switchSize(props.size, "320px", "36px", "40px")};
|
|
691
|
+
height: ${(props) => switchSize(props.size, "320px", "36px", "40px")};
|
|
1060
692
|
}
|
|
1061
693
|
@media (max-width: 1680px) {
|
|
1062
|
-
width: ${(props) => switchSize(props.size, "
|
|
1063
|
-
height: ${(props) => switchSize(props.size, "
|
|
694
|
+
width: ${(props) => switchSize(props.size, "320px", "32px", "34px")};
|
|
695
|
+
height: ${(props) => switchSize(props.size, "320px", "32px", "34px")};
|
|
1064
696
|
}
|
|
1065
697
|
@media (max-width: 1280px) {
|
|
1066
|
-
width: ${(props) =>
|
|
1067
|
-
|
|
698
|
+
width: ${(props) => {
|
|
699
|
+
console.log("props", props);
|
|
700
|
+
return switchSize(props.size, "320px", "24px", "28px");
|
|
701
|
+
}};
|
|
702
|
+
height: ${(props) => switchSize(props.size, "320px", "24px", "28px")};
|
|
1068
703
|
}
|
|
1069
704
|
|
|
1070
705
|
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
|
-
}
|
|
706
|
+
width: 24px;
|
|
707
|
+
height: 24px;
|
|
1099
708
|
}
|
|
1100
709
|
svg {
|
|
1101
710
|
width: 18px;
|
|
@@ -1345,7 +954,7 @@ const MessageBox = styled.div`
|
|
|
1345
954
|
|
|
1346
955
|
.timestamp {
|
|
1347
956
|
color: #888;
|
|
1348
|
-
font-size:
|
|
957
|
+
font-size: clamp(0.625rem, calc(0.375rem + 0.3125vw), 0.75rem);
|
|
1349
958
|
font-family: "Inter", "Open Sans";
|
|
1350
959
|
|
|
1351
960
|
@media (min-width: 2160px) {
|
|
@@ -1370,7 +979,7 @@ const MessageBox = styled.div`
|
|
|
1370
979
|
}
|
|
1371
980
|
|
|
1372
981
|
.tryit_cards h4 {
|
|
1373
|
-
font-size:
|
|
982
|
+
font-size: clamp(0.8125rem, calc(0.5625rem + 0.3125vw), 0.9375rem);
|
|
1374
983
|
margin-top: 10px;
|
|
1375
984
|
margin-bottom: 0px;
|
|
1376
985
|
font-family: "Inter", "Open Sans";
|
|
@@ -1400,7 +1009,7 @@ const MessageBox = styled.div`
|
|
|
1400
1009
|
}
|
|
1401
1010
|
|
|
1402
1011
|
.tryit_cards .tryit_cards_top_right p {
|
|
1403
|
-
font-size:
|
|
1012
|
+
font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
|
|
1404
1013
|
color: #fff;
|
|
1405
1014
|
max-width: 100%;
|
|
1406
1015
|
font-family: "Inter", "Open Sans";
|
|
@@ -1566,7 +1175,7 @@ const MessageBox = styled.div`
|
|
|
1566
1175
|
display: flex;
|
|
1567
1176
|
|
|
1568
1177
|
h6 {
|
|
1569
|
-
font-size:
|
|
1178
|
+
font-size: clamp(0.8125rem, calc(0.5625rem + 0.3125vw), 0.9375rem);
|
|
1570
1179
|
font-family: "Inter", "Open Sans";
|
|
1571
1180
|
color: #333;
|
|
1572
1181
|
margin: 0;
|
|
@@ -1658,7 +1267,7 @@ const MessageBox = styled.div`
|
|
|
1658
1267
|
margin-bottom: 10px;
|
|
1659
1268
|
}
|
|
1660
1269
|
.tryit_ticket_wrapper h6 {
|
|
1661
|
-
font-size:
|
|
1270
|
+
font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
|
|
1662
1271
|
width: 35%;
|
|
1663
1272
|
margin: 0;
|
|
1664
1273
|
font-family: "Inter", "Open Sans";
|
|
@@ -1684,7 +1293,7 @@ const MessageBox = styled.div`
|
|
|
1684
1293
|
}
|
|
1685
1294
|
}
|
|
1686
1295
|
.tryit_ticket_wrapper p {
|
|
1687
|
-
font-size:
|
|
1296
|
+
font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
|
|
1688
1297
|
line-height: normal;
|
|
1689
1298
|
position: relative;
|
|
1690
1299
|
bottom: 1px;
|
|
@@ -2035,7 +1644,7 @@ const FormBox = styled.div`
|
|
|
2035
1644
|
|
|
2036
1645
|
.timestamp {
|
|
2037
1646
|
color: #888;
|
|
2038
|
-
font-size:
|
|
1647
|
+
font-size: clamp(0.625rem, calc(0.375rem + 0.3125vw), 0.75rem);
|
|
2039
1648
|
font-family: "'Inter', 'Open Sans'";
|
|
2040
1649
|
|
|
2041
1650
|
@media (min-width: 2160px) {
|
|
@@ -2060,7 +1669,7 @@ const FormBox = styled.div`
|
|
|
2060
1669
|
}
|
|
2061
1670
|
|
|
2062
1671
|
.tryit_cards h4 {
|
|
2063
|
-
font-size:
|
|
1672
|
+
font-size: clamp(0.8125rem, calc(0.5625rem + 0.3125vw), 0.9375rem);
|
|
2064
1673
|
margin-top: 10px;
|
|
2065
1674
|
margin-bottom: 0px;
|
|
2066
1675
|
font-family: "'Inter', 'Open Sans'";
|
|
@@ -2090,7 +1699,7 @@ const FormBox = styled.div`
|
|
|
2090
1699
|
}
|
|
2091
1700
|
|
|
2092
1701
|
.tryit_cards .tryit_cards_top_right p {
|
|
2093
|
-
font-size:
|
|
1702
|
+
font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
|
|
2094
1703
|
color: #fff;
|
|
2095
1704
|
max-width: 100%;
|
|
2096
1705
|
font-family: "'Inter', 'Open Sans'";
|
|
@@ -2256,7 +1865,7 @@ const FormBox = styled.div`
|
|
|
2256
1865
|
display: flex;
|
|
2257
1866
|
|
|
2258
1867
|
h6 {
|
|
2259
|
-
font-size:
|
|
1868
|
+
font-size: clamp(0.8125rem, calc(0.5625rem + 0.3125vw), 0.9375rem);
|
|
2260
1869
|
font-family: "'Inter', 'Open Sans'";
|
|
2261
1870
|
color: #333;
|
|
2262
1871
|
margin: 0;
|
|
@@ -2348,7 +1957,7 @@ const FormBox = styled.div`
|
|
|
2348
1957
|
margin-bottom: 10px;
|
|
2349
1958
|
}
|
|
2350
1959
|
.tryit_ticket_wrapper h6 {
|
|
2351
|
-
font-size:
|
|
1960
|
+
font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
|
|
2352
1961
|
width: 35%;
|
|
2353
1962
|
margin: 0;
|
|
2354
1963
|
font-family: "'Inter', 'Open Sans'";
|
|
@@ -2374,7 +1983,7 @@ const FormBox = styled.div`
|
|
|
2374
1983
|
}
|
|
2375
1984
|
}
|
|
2376
1985
|
.tryit_ticket_wrapper p {
|
|
2377
|
-
font-size:
|
|
1986
|
+
font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
|
|
2378
1987
|
line-height: normal;
|
|
2379
1988
|
position: relative;
|
|
2380
1989
|
bottom: 1px;
|
|
@@ -2496,7 +2105,6 @@ const UserChat = styled.div`
|
|
|
2496
2105
|
padding: 12px 18px 8px 12px !important;
|
|
2497
2106
|
color: #000;
|
|
2498
2107
|
background: #f0f7ff 0% 0% no-repeat padding-box;
|
|
2499
|
-
box-shadow: 0px 3px 6px #00000029;
|
|
2500
2108
|
border-radius: 10px;
|
|
2501
2109
|
|
|
2502
2110
|
@media (min-width: 2160px) {
|
|
@@ -2506,9 +2114,9 @@ const UserChat = styled.div`
|
|
|
2506
2114
|
padding: ${(props) =>
|
|
2507
2115
|
switchSize(
|
|
2508
2116
|
props.size,
|
|
2509
|
-
"
|
|
2510
|
-
"
|
|
2511
|
-
"
|
|
2117
|
+
"10px 14px !important",
|
|
2118
|
+
"10px 14px !important",
|
|
2119
|
+
"10px 14px !important"
|
|
2512
2120
|
)};
|
|
2513
2121
|
}
|
|
2514
2122
|
@media (min-width: 2560px) {
|
|
@@ -2543,9 +2151,9 @@ const UserChat = styled.div`
|
|
|
2543
2151
|
padding: ${(props) =>
|
|
2544
2152
|
switchSize(
|
|
2545
2153
|
props.size,
|
|
2546
|
-
"
|
|
2547
|
-
"
|
|
2548
|
-
"
|
|
2154
|
+
"10px 14px !important",
|
|
2155
|
+
"10px 14px !important",
|
|
2156
|
+
"10px 14px !important"
|
|
2549
2157
|
)};
|
|
2550
2158
|
}
|
|
2551
2159
|
@media (max-width: 1280px) {
|
|
@@ -2627,49 +2235,72 @@ const AdaptiveParagraph = styled.p`
|
|
|
2627
2235
|
const AdaptiveHeader = styled.h4`
|
|
2628
2236
|
color: #000;
|
|
2629
2237
|
`;
|
|
2238
|
+
|
|
2630
2239
|
const WidgetUpdateButton = styled.div`
|
|
2631
2240
|
button {
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
|
|
2241
|
+
width: 100%;
|
|
2242
|
+
padding: 6px;
|
|
2243
|
+
background: white;
|
|
2244
|
+
border: 1px solid #e4e4e7;
|
|
2245
|
+
border-radius: 6px;
|
|
2246
|
+
color: #314158;
|
|
2247
|
+
font-family: "Inter", sans-serif;
|
|
2248
|
+
font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
|
|
2249
|
+
font-weight: 500;
|
|
2250
|
+
line-height: 20px;
|
|
2251
|
+
cursor: pointer;
|
|
2252
|
+
display: flex;
|
|
2253
|
+
align-items: center;
|
|
2254
|
+
justify-content: center; /* Centers text horizontally */
|
|
2255
|
+
|
|
2256
|
+
&:hover {
|
|
2257
|
+
background: #ebefff;
|
|
2258
|
+
border: 1px solid #4b2fff;
|
|
2259
|
+
color: #4b2fff;
|
|
2260
|
+
}
|
|
2261
|
+
|
|
2262
|
+
span {
|
|
2646
2263
|
display: flex;
|
|
2647
2264
|
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
|
-
}
|
|
2265
|
+
justify-content: center;
|
|
2266
|
+
width: 100%;
|
|
2665
2267
|
}
|
|
2666
2268
|
}
|
|
2667
2269
|
`;
|
|
2270
|
+
// const WidgetUpdateButton = styled.div`
|
|
2271
|
+
|
|
2272
|
+
// button {
|
|
2273
|
+
// width: 100%;
|
|
2274
|
+
// padding: 6px;
|
|
2275
|
+
// background: white;
|
|
2276
|
+
// border: 1px solid #e4e4e7;
|
|
2277
|
+
// border-radius: 6px;
|
|
2278
|
+
// color: #314158;
|
|
2279
|
+
// font-family: "Inter", sans-serif;
|
|
2280
|
+
// font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
|
|
2281
|
+
// font-weight: 500;
|
|
2282
|
+
// line-height: 20px;
|
|
2283
|
+
// cursor: pointer;
|
|
2284
|
+
|
|
2285
|
+
// &:hover {
|
|
2286
|
+
// background: #ebefff;
|
|
2287
|
+
// border: 1px solid #4b2fff;
|
|
2288
|
+
// color: #4b2fff;
|
|
2289
|
+
// }
|
|
2290
|
+
|
|
2291
|
+
// span {
|
|
2292
|
+
// width: 100%;
|
|
2293
|
+
// justify-content: center;
|
|
2294
|
+
// height: auto;
|
|
2295
|
+
// }
|
|
2296
|
+
// }
|
|
2297
|
+
// }
|
|
2298
|
+
// `;
|
|
2668
2299
|
export const Button = styled.button`
|
|
2669
2300
|
min-width: 64px;
|
|
2670
|
-
|
|
2301
|
+
|
|
2671
2302
|
height: 28px;
|
|
2672
|
-
|
|
2303
|
+
|
|
2673
2304
|
border: 1px solid #a0a0a0;
|
|
2674
2305
|
border-radius: 8px;
|
|
2675
2306
|
background: #ffffff;
|
|
@@ -2677,14 +2308,14 @@ export const Button = styled.button`
|
|
|
2677
2308
|
outline: 0;
|
|
2678
2309
|
cursor: pointer;
|
|
2679
2310
|
margin-top: 4px;
|
|
2680
|
-
font-family: "Inter";
|
|
2311
|
+
font-family: "'Inter', 'Open Sans'";
|
|
2681
2312
|
display: inline-flex;
|
|
2682
2313
|
align-items: center;
|
|
2683
2314
|
padding: 6px 12px;
|
|
2684
2315
|
text-overflow: ellipsis;
|
|
2685
2316
|
white-space: nowrap !important;
|
|
2686
2317
|
overflow: hidden;
|
|
2687
|
-
// font-size:
|
|
2318
|
+
// font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
|
|
2688
2319
|
|
|
2689
2320
|
@media (min-width: 2160px) {
|
|
2690
2321
|
font-size: ${(props) => switchSize(props.size, "16px", "18px", "20px")};
|
|
@@ -2806,7 +2437,7 @@ const InputMessageChat = styled.div`
|
|
|
2806
2437
|
border: none;
|
|
2807
2438
|
background-color: transparent;
|
|
2808
2439
|
outline: none;
|
|
2809
|
-
font-family: "Inter";
|
|
2440
|
+
font-family: "'Inter', 'Open Sans'";
|
|
2810
2441
|
// font-size: 14px !important;
|
|
2811
2442
|
// margin-top: 5px;
|
|
2812
2443
|
// line-height: 20px;
|
|
@@ -2913,7 +2544,7 @@ const InputMessageChat = styled.div`
|
|
|
2913
2544
|
user-select: none;
|
|
2914
2545
|
line-height: 22px;
|
|
2915
2546
|
height: 18px;
|
|
2916
|
-
font-size:
|
|
2547
|
+
font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
|
|
2917
2548
|
}
|
|
2918
2549
|
}
|
|
2919
2550
|
}
|
|
@@ -3056,7 +2687,7 @@ const IconSpan = styled.span`
|
|
|
3056
2687
|
border-radius: 4px;
|
|
3057
2688
|
top: -20px;
|
|
3058
2689
|
display: none;
|
|
3059
|
-
font-size:
|
|
2690
|
+
font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
|
|
3060
2691
|
color: #555;
|
|
3061
2692
|
min-width: 80px;
|
|
3062
2693
|
text-align: center;
|
|
@@ -3099,8 +2730,7 @@ const ButtonWrapper = styled.div`
|
|
|
3099
2730
|
gap: 0 10px;
|
|
3100
2731
|
|
|
3101
2732
|
button {
|
|
3102
|
-
|
|
3103
|
-
max-width: 400px;
|
|
2733
|
+
width: 28px;
|
|
3104
2734
|
height: 28px;
|
|
3105
2735
|
box-shadow: 0px 3px 6px #00000029;
|
|
3106
2736
|
border: 1px solid #A0A0A0;
|
|
@@ -3110,17 +2740,10 @@ const ButtonWrapper = styled.div`
|
|
|
3110
2740
|
outline: 0;
|
|
3111
2741
|
cursor: pointer;
|
|
3112
2742
|
margin-top: 12px;
|
|
3113
|
-
font-size:
|
|
3114
|
-
font-family: "Inter";
|
|
2743
|
+
font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
|
|
2744
|
+
font-family: "'Inter', 'Open Sans'";
|
|
3115
2745
|
display: inline-flex;
|
|
3116
2746
|
align-items: center;
|
|
3117
|
-
padding: 6px 12px;
|
|
3118
|
-
|
|
3119
|
-
|
|
3120
|
-
@media (max-width: 1280px) {
|
|
3121
|
-
min-width: auto;
|
|
3122
|
-
}
|
|
3123
|
-
|
|
3124
2747
|
text-overflow: ellipsis;
|
|
3125
2748
|
white-space: nowrap !important;
|
|
3126
2749
|
overflow: hidden;
|
|
@@ -3149,35 +2772,295 @@ const ButtonWrapper = styled.div`
|
|
|
3149
2772
|
}
|
|
3150
2773
|
}
|
|
3151
2774
|
`;
|
|
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
2775
|
|
|
3168
|
-
const
|
|
3169
|
-
|
|
3170
|
-
|
|
3171
|
-
|
|
3172
|
-
|
|
3173
|
-
|
|
3174
|
-
|
|
3175
|
-
|
|
3176
|
-
style,
|
|
3177
|
-
}) => {
|
|
3178
|
-
// ;
|
|
2776
|
+
const Container = styled.div`
|
|
2777
|
+
display: flex;
|
|
2778
|
+
flex-direction: column;
|
|
2779
|
+
align-items: flex-start;
|
|
2780
|
+
gap: 10px;
|
|
2781
|
+
margin-bottom: 12px;
|
|
2782
|
+
width: 85%;
|
|
2783
|
+
`;
|
|
3179
2784
|
|
|
3180
|
-
|
|
2785
|
+
const MessageContainer = styled.div`
|
|
2786
|
+
display: flex;
|
|
2787
|
+
flex-direction: column;
|
|
2788
|
+
align-items: flex-start;
|
|
2789
|
+
gap: 6px;
|
|
2790
|
+
width: 100%;
|
|
2791
|
+
`;
|
|
2792
|
+
|
|
2793
|
+
const BotHeader = styled.div`
|
|
2794
|
+
display: flex;
|
|
2795
|
+
align-items: center;
|
|
2796
|
+
gap: 10px;
|
|
2797
|
+
padding: 0 26px;
|
|
2798
|
+
width: 100%;
|
|
2799
|
+
`;
|
|
2800
|
+
|
|
2801
|
+
const BotLabel = styled.span`
|
|
2802
|
+
font-family: "Inter", sans-serif;
|
|
2803
|
+
font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
|
|
2804
|
+
font-weight: 500;
|
|
2805
|
+
color: #020618;
|
|
2806
|
+
line-height: 18px;
|
|
2807
|
+
`;
|
|
2808
|
+
|
|
2809
|
+
const MessageBubbleContainer = styled.div`
|
|
2810
|
+
display: flex;
|
|
2811
|
+
align-items: flex-start;
|
|
2812
|
+
gap: 4px;
|
|
2813
|
+
`;
|
|
2814
|
+
|
|
2815
|
+
const AvatarContainer = styled.div`
|
|
2816
|
+
width: 26px;
|
|
2817
|
+
height: 26px;
|
|
2818
|
+
border-radius: 50%;
|
|
2819
|
+
display: flex;
|
|
2820
|
+
align-items: center;
|
|
2821
|
+
justify-content: center;
|
|
2822
|
+
`;
|
|
2823
|
+
|
|
2824
|
+
const AvatarImage = styled.div`
|
|
2825
|
+
width: 24px;
|
|
2826
|
+
height: 24px;
|
|
2827
|
+
`;
|
|
2828
|
+
|
|
2829
|
+
const MessageCard = styled.div`
|
|
2830
|
+
background: #f4f4f5;
|
|
2831
|
+
border-radius: 8px;
|
|
2832
|
+
padding: 14px;
|
|
2833
|
+
`;
|
|
2834
|
+
|
|
2835
|
+
const MessageText = styled.p`
|
|
2836
|
+
font-family: "Inter", sans-serif;
|
|
2837
|
+
font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
|
|
2838
|
+
font-weight: 400;
|
|
2839
|
+
color: #020618;
|
|
2840
|
+
line-height: 20px;
|
|
2841
|
+
margin-bottom: 10px;
|
|
2842
|
+
margin-top: 0px;
|
|
2843
|
+
`;
|
|
2844
|
+
|
|
2845
|
+
const SuggestionContainer = styled.div`
|
|
2846
|
+
display: flex;
|
|
2847
|
+
flex-direction: column;
|
|
2848
|
+
gap: 10px;
|
|
2849
|
+
width: 100%;
|
|
2850
|
+
`;
|
|
2851
|
+
|
|
2852
|
+
const SuggestionButton = styled.button`
|
|
2853
|
+
width: 100%;
|
|
2854
|
+
padding: 6px;
|
|
2855
|
+
background: white;
|
|
2856
|
+
border: 1px solid #e4e4e7;
|
|
2857
|
+
border-radius: 6px;
|
|
2858
|
+
color: #314158;
|
|
2859
|
+
font-family: "Inter", sans-serif;
|
|
2860
|
+
font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
|
|
2861
|
+
font-weight: 500;
|
|
2862
|
+
line-height: 20px;
|
|
2863
|
+
cursor: pointer;
|
|
2864
|
+
|
|
2865
|
+
&:hover {
|
|
2866
|
+
background: #ebefff;
|
|
2867
|
+
border: 1px solid #4b2fff;
|
|
2868
|
+
color: #4b2fff;
|
|
2869
|
+
}
|
|
2870
|
+
`;
|
|
2871
|
+
|
|
2872
|
+
const BottomContainer = styled.div`
|
|
2873
|
+
display: flex;
|
|
2874
|
+
width: 100%;
|
|
2875
|
+
align-items: flex-start;
|
|
2876
|
+
gap: 4px;
|
|
2877
|
+
`;
|
|
2878
|
+
|
|
2879
|
+
const Timestamp = styled.div`
|
|
2880
|
+
display: flex;
|
|
2881
|
+
align-items: center;
|
|
2882
|
+
gap: 10px;
|
|
2883
|
+
padding: 0 8px 0 30px;
|
|
2884
|
+
flex: 1;
|
|
2885
|
+
`;
|
|
2886
|
+
|
|
2887
|
+
const TimestampText = styled.span`
|
|
2888
|
+
font-family: "Inter", sans-serif;
|
|
2889
|
+
font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
|
|
2890
|
+
font-weight: 400;
|
|
2891
|
+
color: #62748e;
|
|
2892
|
+
line-height: 18px;
|
|
2893
|
+
`;
|
|
2894
|
+
|
|
2895
|
+
const ReactionContainer = styled.div`
|
|
2896
|
+
display: flex;
|
|
2897
|
+
align-items: center;
|
|
2898
|
+
gap: 4px;
|
|
2899
|
+
`;
|
|
2900
|
+
|
|
2901
|
+
const ReactionButton = styled.button`
|
|
2902
|
+
width: 22px;
|
|
2903
|
+
height: 22px;
|
|
2904
|
+
padding: 4px;
|
|
2905
|
+
background: #f4f4f5;
|
|
2906
|
+
border-radius: 50%;
|
|
2907
|
+
border: none;
|
|
2908
|
+
cursor: pointer;
|
|
2909
|
+
display: flex;
|
|
2910
|
+
align-items: center;
|
|
2911
|
+
justify-content: center;
|
|
2912
|
+
|
|
2913
|
+
&:hover {
|
|
2914
|
+
background: #e4e4e7;
|
|
2915
|
+
}
|
|
2916
|
+
|
|
2917
|
+
svg {
|
|
2918
|
+
width: 14px;
|
|
2919
|
+
height: 14px;
|
|
2920
|
+
}
|
|
2921
|
+
`;
|
|
2922
|
+
|
|
2923
|
+
const StyledCard = styled.div`
|
|
2924
|
+
border-radius: 10px;
|
|
2925
|
+
border: 1px solid #e4e4e7;
|
|
2926
|
+
overflow: hidden;
|
|
2927
|
+
margin-bottom: 12px;
|
|
2928
|
+
`;
|
|
2929
|
+
|
|
2930
|
+
const CardContent = styled.div`
|
|
2931
|
+
padding: 0;
|
|
2932
|
+
`;
|
|
2933
|
+
|
|
2934
|
+
const InputContainer = styled.div`
|
|
2935
|
+
display: flex;
|
|
2936
|
+
align-items: center;
|
|
2937
|
+
gap: 10px;
|
|
2938
|
+
padding: 10px 16px;
|
|
2939
|
+
background-color: white;
|
|
2940
|
+
`;
|
|
2941
|
+
|
|
2942
|
+
const StyledInput = styled.input`
|
|
2943
|
+
flex: 1;
|
|
2944
|
+
border: none;
|
|
2945
|
+
outline: none;
|
|
2946
|
+
color: #020618;
|
|
2947
|
+
font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
|
|
2948
|
+
font-weight: normal;
|
|
2949
|
+
background: transparent;
|
|
2950
|
+
font-weight: 500;
|
|
2951
|
+
font-family: "Inter", "Open Sans";
|
|
2952
|
+
|
|
2953
|
+
&:focus {
|
|
2954
|
+
box-shadow: none;
|
|
2955
|
+
}
|
|
2956
|
+
|
|
2957
|
+
&::placeholder {
|
|
2958
|
+
color: #62748e;
|
|
2959
|
+
}
|
|
2960
|
+
`;
|
|
2961
|
+
|
|
2962
|
+
const IconButtonInput = styled.button`
|
|
2963
|
+
padding: 6px;
|
|
2964
|
+
height: auto;
|
|
2965
|
+
width: auto;
|
|
2966
|
+
background: transparent;
|
|
2967
|
+
border: none;
|
|
2968
|
+
cursor: pointer;
|
|
2969
|
+
display: flex;
|
|
2970
|
+
align-items: center;
|
|
2971
|
+
justify-content: center;
|
|
2972
|
+
|
|
2973
|
+
&:hover {
|
|
2974
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
2975
|
+
border-radius: 4px;
|
|
2976
|
+
}
|
|
2977
|
+
`;
|
|
2978
|
+
|
|
2979
|
+
const style = {
|
|
2980
|
+
maxHeight: "90px",
|
|
2981
|
+
minHeight: "38px",
|
|
2982
|
+
resize: "none",
|
|
2983
|
+
padding: "9px",
|
|
2984
|
+
boxSizing: "border-box",
|
|
2985
|
+
fontSize: "clamp(0.8125rem, calc(0.5625rem + 0.3125vw), 0.9375rem)",
|
|
2986
|
+
width: "100%",
|
|
2987
|
+
border: "none",
|
|
2988
|
+
overflow: "hidden",
|
|
2989
|
+
overflowWrap: "break-word",
|
|
2990
|
+
textAlign: "start",
|
|
2991
|
+
height: "38px",
|
|
2992
|
+
fontFamily: "'Inter', 'Open Sans'",
|
|
2993
|
+
};
|
|
2994
|
+
export const DropdownContainer = styled.div`
|
|
2995
|
+
width: 72px;
|
|
2996
|
+
height: max-content;
|
|
2997
|
+
position: absolute;
|
|
2998
|
+
top: 30px;
|
|
2999
|
+
right: 10px;
|
|
3000
|
+
padding: 6px;
|
|
3001
|
+
border-radius: 8px;
|
|
3002
|
+
display: flex;
|
|
3003
|
+
flex-direction: column;
|
|
3004
|
+
gap: 4px;
|
|
3005
|
+
background: white;
|
|
3006
|
+
box-shadow: 0px 2px 6px #00000040;
|
|
3007
|
+
z-index: 50;
|
|
3008
|
+
`;
|
|
3009
|
+
|
|
3010
|
+
export const DropdownItem = styled.span`
|
|
3011
|
+
width: 100%;
|
|
3012
|
+
background: white;
|
|
3013
|
+
font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
|
|
3014
|
+
display: flex;
|
|
3015
|
+
align-items: center;
|
|
3016
|
+
cursor: pointer;
|
|
3017
|
+
color: #1f2937; /* Tailwind's text-gray-900 */
|
|
3018
|
+
white-space: nowrap;
|
|
3019
|
+
line-height: normal;
|
|
3020
|
+
|
|
3021
|
+
&:hover {
|
|
3022
|
+
color: #000;
|
|
3023
|
+
}
|
|
3024
|
+
`;
|
|
3025
|
+
|
|
3026
|
+
export const SearchIcon = ({ style }) => {
|
|
3027
|
+
return (
|
|
3028
|
+
<svg
|
|
3029
|
+
style={style}
|
|
3030
|
+
xmlns="
|
|
3031
|
+
http://www.w3.org/2000/svg"
|
|
3032
|
+
viewBox="0 0 24 24"
|
|
3033
|
+
fill="none"
|
|
3034
|
+
height={20}
|
|
3035
|
+
width={20}
|
|
3036
|
+
>
|
|
3037
|
+
<path
|
|
3038
|
+
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"
|
|
3039
|
+
stroke="currentColor"
|
|
3040
|
+
strokeWidth="1.7"
|
|
3041
|
+
strokeLinecap="round"
|
|
3042
|
+
strokeLinejoin="round"
|
|
3043
|
+
/>
|
|
3044
|
+
</svg>
|
|
3045
|
+
);
|
|
3046
|
+
};
|
|
3047
|
+
|
|
3048
|
+
const App = ({
|
|
3049
|
+
endpoint,
|
|
3050
|
+
widget_id,
|
|
3051
|
+
authToken,
|
|
3052
|
+
newToken,
|
|
3053
|
+
openByDefault,
|
|
3054
|
+
userDetails,
|
|
3055
|
+
widget_size,
|
|
3056
|
+
style,
|
|
3057
|
+
}) => {
|
|
3058
|
+
// ;
|
|
3059
|
+
|
|
3060
|
+
console.log("widget size", widget_size);
|
|
3061
|
+
|
|
3062
|
+
const [sourceState, setSourceState] = useState(widget?.source_id);
|
|
3063
|
+
const [isExpanded, setIsExpanded] = useState(false);
|
|
3181
3064
|
|
|
3182
3065
|
const [enableConsent, setEnableConsent] = useState(false);
|
|
3183
3066
|
const [workspace, setWorkspace] = useState(widget?.workspace);
|
|
@@ -3205,6 +3088,7 @@ const App = ({
|
|
|
3205
3088
|
});
|
|
3206
3089
|
console.log("widget", widget);
|
|
3207
3090
|
const conversationId = messages[0]?.message?.system?.conversationId;
|
|
3091
|
+
const [typing, setBotTyping] = useState(true);
|
|
3208
3092
|
|
|
3209
3093
|
const [open, setOpen] = useState(openByDefault);
|
|
3210
3094
|
const [isVisible, setIsVisible] = useState(false);
|
|
@@ -3212,6 +3096,10 @@ const App = ({
|
|
|
3212
3096
|
|
|
3213
3097
|
const containerEl = useRef(null);
|
|
3214
3098
|
|
|
3099
|
+
useEffect(() => {
|
|
3100
|
+
setBotTyping(isTypingEnd);
|
|
3101
|
+
}, [isTypingEnd]);
|
|
3102
|
+
|
|
3215
3103
|
useEffect(() => {
|
|
3216
3104
|
if (widget?.source_id !== undefined) {
|
|
3217
3105
|
setSourceState(widget?.source_id);
|
|
@@ -3237,16 +3125,124 @@ const App = ({
|
|
|
3237
3125
|
}
|
|
3238
3126
|
});
|
|
3239
3127
|
|
|
3128
|
+
const BodyWrappertopContainer = () => (
|
|
3129
|
+
<BodyNotesWrapper>
|
|
3130
|
+
<OperationHourWrapper>
|
|
3131
|
+
Thank you for choosing pagergpt! Our hours of operation are Monday to
|
|
3132
|
+
Friday 5am-7pm PST, Sat-Sun, 7am-4pm PST.
|
|
3133
|
+
</OperationHourWrapper>
|
|
3134
|
+
<NotesWrapper>
|
|
3135
|
+
<span
|
|
3136
|
+
style={{
|
|
3137
|
+
width: "24px",
|
|
3138
|
+
marginTop: "4px",
|
|
3139
|
+
cursor: "pointer",
|
|
3140
|
+
}}
|
|
3141
|
+
>
|
|
3142
|
+
<InfoIcon width={16} height={16} style={{ color: "black" }} />
|
|
3143
|
+
</span>
|
|
3144
|
+
<InfoContent>
|
|
3145
|
+
Our specialists are trained to help you with pager gpt’s products and
|
|
3146
|
+
services. However, they cannot suggest you to go for a annual plan or
|
|
3147
|
+
monthly plan advice.
|
|
3148
|
+
</InfoContent>
|
|
3149
|
+
<span
|
|
3150
|
+
style={{
|
|
3151
|
+
width: "24px",
|
|
3152
|
+
marginTop: "4px",
|
|
3153
|
+
cursor: "pointer",
|
|
3154
|
+
}}
|
|
3155
|
+
>
|
|
3156
|
+
<XIcon width={16} height={16} style={{ color: "black" }} />
|
|
3157
|
+
</span>
|
|
3158
|
+
</NotesWrapper>
|
|
3159
|
+
</BodyNotesWrapper>
|
|
3160
|
+
);
|
|
3161
|
+
|
|
3162
|
+
const GreetingMessageBox = () => {
|
|
3163
|
+
return (
|
|
3164
|
+
<Container>
|
|
3165
|
+
<MessageContainer>
|
|
3166
|
+
<BotHeader>
|
|
3167
|
+
<BotLabel>Bot</BotLabel>
|
|
3168
|
+
</BotHeader>
|
|
3169
|
+
<MessageBubbleContainer>
|
|
3170
|
+
<AvatarContainer>
|
|
3171
|
+
<AvatarImage>
|
|
3172
|
+
<img
|
|
3173
|
+
alt={"logo"}
|
|
3174
|
+
src={
|
|
3175
|
+
(widget && widget.logo_url) ||
|
|
3176
|
+
"https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
|
|
3177
|
+
}
|
|
3178
|
+
/>
|
|
3179
|
+
</AvatarImage>
|
|
3180
|
+
</AvatarContainer>
|
|
3181
|
+
<MessageCard>
|
|
3182
|
+
<MessageText>Hi Roger! How may help you today?</MessageText>
|
|
3183
|
+
<SuggestionContainer>
|
|
3184
|
+
{suggestionOptions.map((option, index) => (
|
|
3185
|
+
<SuggestionButton key={index}>{option}</SuggestionButton>
|
|
3186
|
+
))}
|
|
3187
|
+
</SuggestionContainer>
|
|
3188
|
+
</MessageCard>
|
|
3189
|
+
</MessageBubbleContainer>
|
|
3190
|
+
<BottomContainer>
|
|
3191
|
+
<Timestamp>
|
|
3192
|
+
<TimestampText>Just now</TimestampText>
|
|
3193
|
+
</Timestamp>
|
|
3194
|
+
<ReactionContainer>
|
|
3195
|
+
<ReactionButton>
|
|
3196
|
+
<ThumbsUpIcon strokeWidth={1.4} color="#45556C" />
|
|
3197
|
+
</ReactionButton>
|
|
3198
|
+
<ReactionButton>
|
|
3199
|
+
<ThumbsDownIcon strokeWidth={1.4} color="#45556C" />
|
|
3200
|
+
</ReactionButton>
|
|
3201
|
+
<ReactionButton>
|
|
3202
|
+
<PersonWithSoundWavesIcon />
|
|
3203
|
+
</ReactionButton>
|
|
3204
|
+
</ReactionContainer>
|
|
3205
|
+
</BottomContainer>
|
|
3206
|
+
</MessageContainer>
|
|
3207
|
+
</Container>
|
|
3208
|
+
);
|
|
3209
|
+
};
|
|
3210
|
+
|
|
3211
|
+
const PersonWithSoundWavesIcon = () => (
|
|
3212
|
+
<svg
|
|
3213
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
3214
|
+
width="14"
|
|
3215
|
+
height="14"
|
|
3216
|
+
viewBox="0 0 14 14"
|
|
3217
|
+
fill="none"
|
|
3218
|
+
>
|
|
3219
|
+
<path
|
|
3220
|
+
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"
|
|
3221
|
+
stroke="#45556C"
|
|
3222
|
+
stroke-linecap="round"
|
|
3223
|
+
stroke-linejoin="round"
|
|
3224
|
+
/>
|
|
3225
|
+
</svg>
|
|
3226
|
+
);
|
|
3227
|
+
|
|
3228
|
+
const suggestionOptions = ["Get me started", "I know few things about start"];
|
|
3229
|
+
|
|
3240
3230
|
if (!widget) {
|
|
3241
3231
|
return null;
|
|
3242
3232
|
}
|
|
3243
3233
|
|
|
3244
3234
|
return (
|
|
3245
3235
|
<ScaleSizeProvider widgetSize={widget_size}>
|
|
3246
|
-
<WidgetPreview
|
|
3236
|
+
<WidgetPreview
|
|
3237
|
+
className="widget_preview"
|
|
3238
|
+
isExpanded={isExpanded}
|
|
3239
|
+
size={widget_size}
|
|
3240
|
+
>
|
|
3247
3241
|
{open ? (
|
|
3248
3242
|
<ChatWrapper className="widget_chat">
|
|
3249
3243
|
<ChatHeaderTop
|
|
3244
|
+
setIsExpanded={setIsExpanded}
|
|
3245
|
+
isExpanded={isExpanded}
|
|
3250
3246
|
widget={widget}
|
|
3251
3247
|
onClick={() => setOpen(!open)}
|
|
3252
3248
|
open={open}
|
|
@@ -3255,86 +3251,138 @@ const App = ({
|
|
|
3255
3251
|
logoshape={style.logo_shape}
|
|
3256
3252
|
/>
|
|
3257
3253
|
<EndPointProvider endpoint={endpoint}>
|
|
3258
|
-
|
|
3259
|
-
|
|
3260
|
-
|
|
3261
|
-
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
|
|
3266
|
-
|
|
3267
|
-
|
|
3268
|
-
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
|
|
3272
|
-
|
|
3273
|
-
|
|
3274
|
-
|
|
3254
|
+
<ChatContentWrapper
|
|
3255
|
+
clsassName="widget_chat_content"
|
|
3256
|
+
ref={containerEl}
|
|
3257
|
+
isMessageContainer={
|
|
3258
|
+
(sourceState == "new_user" && widget.user_consent == false) ||
|
|
3259
|
+
(sourceState !== "new_user" &&
|
|
3260
|
+
!sourceState?.includes("browser"))
|
|
3261
|
+
}
|
|
3262
|
+
>
|
|
3263
|
+
{/* notes in the chat */}
|
|
3264
|
+
{false && <BodyWrappertopContainer />}
|
|
3265
|
+
{/* greeting message */}
|
|
3266
|
+
{false && <GreetingMessageBox />}
|
|
3267
|
+
<BodyWrapper
|
|
3268
|
+
sourceState={sourceState}
|
|
3269
|
+
{...{ messages }}
|
|
3270
|
+
sendMessage={sendMessage}
|
|
3271
|
+
sendFeedback={sendFeedback}
|
|
3275
3272
|
widget={widget}
|
|
3276
|
-
|
|
3277
|
-
setEnableConsent={setEnableConsent}
|
|
3278
|
-
isVisible={isVisible}
|
|
3279
|
-
setIsVisible={setIsVisible}
|
|
3280
|
-
setSourceState={setSourceState}
|
|
3281
|
-
userDetails={userDetails}
|
|
3273
|
+
style={style}
|
|
3282
3274
|
/>
|
|
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
|
-
|
|
3275
|
+
|
|
3276
|
+
{sourceState === "new_user" && widget.user_consent == true && (
|
|
3277
|
+
<ConsentPopup
|
|
3278
|
+
formData={fields}
|
|
3279
|
+
conversationId={conversationId}
|
|
3280
|
+
widget={widget}
|
|
3281
|
+
enableConsent={enableConsent}
|
|
3282
|
+
setEnableConsent={setEnableConsent}
|
|
3283
|
+
isVisible={isVisible}
|
|
3284
|
+
setIsVisible={setIsVisible}
|
|
3285
|
+
setSourceState={setSourceState}
|
|
3286
|
+
userDetails={userDetails}
|
|
3287
|
+
/>
|
|
3288
|
+
)}
|
|
3289
|
+
|
|
3290
|
+
{(sourceState &&
|
|
3291
|
+
typeof sourceState === "string" &&
|
|
3292
|
+
sourceState.includes("browser") &&
|
|
3293
|
+
fields &&
|
|
3294
|
+
widget?.lead_form_id !== null) ||
|
|
3295
|
+
(widget.user_consent == false &&
|
|
3296
|
+
sourceState == "new_user" &&
|
|
3297
|
+
widget?.lead_form_id !== null &&
|
|
3298
|
+
fields) ? (
|
|
3299
|
+
<>
|
|
3300
|
+
<FormBox>
|
|
3301
|
+
<LogoSize
|
|
3310
3302
|
style={{
|
|
3311
|
-
|
|
3312
|
-
|
|
3303
|
+
borderRadius: "50%",
|
|
3304
|
+
top: "0px",
|
|
3305
|
+
height: "24.9px",
|
|
3306
|
+
width: "24px",
|
|
3307
|
+
border: "none",
|
|
3313
3308
|
}}
|
|
3314
|
-
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
|
|
3324
|
-
|
|
3325
|
-
|
|
3326
|
-
|
|
3327
|
-
|
|
3328
|
-
|
|
3329
|
-
|
|
3309
|
+
>
|
|
3310
|
+
<img
|
|
3311
|
+
alt={"logo"}
|
|
3312
|
+
src={
|
|
3313
|
+
(widget && widget.logo_url) ||
|
|
3314
|
+
"https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
|
|
3315
|
+
}
|
|
3316
|
+
style={{
|
|
3317
|
+
width: "24px",
|
|
3318
|
+
height: "24px",
|
|
3319
|
+
}}
|
|
3320
|
+
/>
|
|
3321
|
+
</LogoSize>
|
|
3322
|
+
<FormMessage>
|
|
3323
|
+
<InputConverter
|
|
3324
|
+
formData={fields}
|
|
3325
|
+
conversationId={conversationId}
|
|
3326
|
+
widget={widget}
|
|
3327
|
+
workspace={widget?.workspace}
|
|
3328
|
+
setFormSubmit={setFormSubmit}
|
|
3329
|
+
setSourceState={setSourceState}
|
|
3330
|
+
/>
|
|
3331
|
+
</FormMessage>
|
|
3332
|
+
</FormBox>
|
|
3333
|
+
</>
|
|
3334
|
+
) : null}
|
|
3335
|
+
{typing && (
|
|
3336
|
+
<Container>
|
|
3337
|
+
<MessageContainer>
|
|
3338
|
+
<BotHeader>
|
|
3339
|
+
<BotLabel>{widget && widget.name}</BotLabel>
|
|
3340
|
+
</BotHeader>
|
|
3341
|
+
<MessageBubbleContainer>
|
|
3342
|
+
<AvatarContainer>
|
|
3343
|
+
<AvatarImage>
|
|
3344
|
+
<img
|
|
3345
|
+
alt={"logo"}
|
|
3346
|
+
src={
|
|
3347
|
+
(widget && widget.logo_url) ||
|
|
3348
|
+
"https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
|
|
3349
|
+
}
|
|
3350
|
+
/>
|
|
3351
|
+
</AvatarImage>
|
|
3352
|
+
</AvatarContainer>
|
|
3353
|
+
<MessageCard>
|
|
3354
|
+
<MessageText
|
|
3355
|
+
style={{
|
|
3356
|
+
marginBottom: "0px",
|
|
3357
|
+
}}
|
|
3358
|
+
>
|
|
3359
|
+
<ThreeDotTyping>
|
|
3360
|
+
<div class="typing-dots">
|
|
3361
|
+
<div class="dot"></div>
|
|
3362
|
+
<div class="dot"></div>
|
|
3363
|
+
<div class="dot"></div>
|
|
3364
|
+
</div>
|
|
3365
|
+
</ThreeDotTyping>
|
|
3366
|
+
</MessageText>
|
|
3367
|
+
<div className="snippet" data-title=".dot-flashing">
|
|
3368
|
+
<div className="stage">
|
|
3369
|
+
<div className="dot-flashing"></div>
|
|
3370
|
+
</div>
|
|
3371
|
+
</div>
|
|
3372
|
+
</MessageCard>
|
|
3373
|
+
</MessageBubbleContainer>
|
|
3374
|
+
</MessageContainer>
|
|
3375
|
+
</Container>
|
|
3376
|
+
)}
|
|
3377
|
+
</ChatContentWrapper>
|
|
3378
|
+
<Footer
|
|
3379
|
+
sourceState={sourceState}
|
|
3380
|
+
{...{ sendMessage, onFileUpload }}
|
|
3381
|
+
widget={widget}
|
|
3382
|
+
messages={messages}
|
|
3383
|
+
isTypingEnd={isTypingEnd}
|
|
3384
|
+
/>
|
|
3330
3385
|
</EndPointProvider>
|
|
3331
|
-
<Footer
|
|
3332
|
-
sourceState={sourceState}
|
|
3333
|
-
{...{ sendMessage, onFileUpload }}
|
|
3334
|
-
widget={widget}
|
|
3335
|
-
messages={messages}
|
|
3336
|
-
isTypingEnd={isTypingEnd}
|
|
3337
|
-
/>
|
|
3338
3386
|
</ChatWrapper>
|
|
3339
3387
|
) : null}
|
|
3340
3388
|
<WidgetMenu
|
|
@@ -3372,10 +3420,10 @@ const Footer = ({
|
|
|
3372
3420
|
onFileUpload,
|
|
3373
3421
|
}) => {
|
|
3374
3422
|
const [typedMessage, setTypedMessage] = useState("");
|
|
3375
|
-
const [typing, setBotTyping] = useState(true);
|
|
3376
3423
|
|
|
3377
3424
|
const send = () => {
|
|
3378
3425
|
//
|
|
3426
|
+
console.log("typed message", typedMessage);
|
|
3379
3427
|
if (typedMessage.trim()) {
|
|
3380
3428
|
sendMessage(typedMessage);
|
|
3381
3429
|
}
|
|
@@ -3389,10 +3437,6 @@ const Footer = ({
|
|
|
3389
3437
|
setTypedMessage("");
|
|
3390
3438
|
};
|
|
3391
3439
|
|
|
3392
|
-
useEffect(() => {
|
|
3393
|
-
setBotTyping(isTypingEnd);
|
|
3394
|
-
}, [isTypingEnd]);
|
|
3395
|
-
|
|
3396
3440
|
const uploadTag = useRef(null);
|
|
3397
3441
|
const textareaRef = useRef(null);
|
|
3398
3442
|
|
|
@@ -3406,85 +3450,109 @@ const Footer = ({
|
|
|
3406
3450
|
|
|
3407
3451
|
return (
|
|
3408
3452
|
<>
|
|
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
3453
|
{console.log("3420", widget)}
|
|
3423
3454
|
{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
|
-
|
|
3455
|
+
{widget?.user_consent === false ||
|
|
3456
|
+
(widget?.user_consent === true &&
|
|
3457
|
+
typeof sourceState === "string" &&
|
|
3458
|
+
sourceState.includes("browser") &&
|
|
3459
|
+
widget?.lead_form_id == null) ||
|
|
3460
|
+
(typeof sourceState == "string" &&
|
|
3461
|
+
!sourceState.includes("browser") &&
|
|
3462
|
+
sourceState !== "new_user" &&
|
|
3463
|
+
widget?.user_consent === true &&
|
|
3464
|
+
widget?.lead_form_id != null) ? (
|
|
3465
|
+
<InputMessageChat
|
|
3466
|
+
size={scale.widgetSize}
|
|
3467
|
+
className="widget_input_message"
|
|
3468
|
+
>
|
|
3469
|
+
{/* <div className="widget_input_message_section">
|
|
3470
|
+
<div className="widget_input_message_box">
|
|
3471
|
+
<textarea
|
|
3472
|
+
placeholder="Write a message"
|
|
3473
|
+
value={typedMessage}
|
|
3474
|
+
onChange={(e) => setTypedMessage(e.target.value)}
|
|
3475
|
+
onKeyDown={(e) => {
|
|
3476
|
+
if (e.key === "Enter") {
|
|
3477
|
+
e.preventDefault();
|
|
3478
|
+
send();
|
|
3479
|
+
if (textareaRef.current) {
|
|
3480
|
+
textareaRef.current.style.height = "30px";
|
|
3481
|
+
textareaRef.current.style.overflow = "hidden";
|
|
3482
|
+
}
|
|
3445
3483
|
}
|
|
3446
|
-
}
|
|
3447
|
-
|
|
3448
|
-
|
|
3449
|
-
|
|
3450
|
-
|
|
3451
|
-
|
|
3452
|
-
|
|
3453
|
-
|
|
3454
|
-
|
|
3455
|
-
|
|
3456
|
-
|
|
3457
|
-
|
|
3458
|
-
|
|
3459
|
-
|
|
3460
|
-
|
|
3461
|
-
|
|
3462
|
-
|
|
3463
|
-
|
|
3464
|
-
|
|
3465
|
-
|
|
3466
|
-
|
|
3484
|
+
}}
|
|
3485
|
+
style={style}
|
|
3486
|
+
ref={textareaRef}
|
|
3487
|
+
rows={1}
|
|
3488
|
+
id="typemsg"
|
|
3489
|
+
wrap="hard"
|
|
3490
|
+
></textarea>
|
|
3491
|
+
</div>
|
|
3492
|
+
<div className="send_icon_box">
|
|
3493
|
+
<span
|
|
3494
|
+
className="attachment_icon"
|
|
3495
|
+
onClick={() => {
|
|
3496
|
+
uploadTag.current && uploadTag.current.click();
|
|
3497
|
+
}}
|
|
3498
|
+
>
|
|
3499
|
+
<svg x="0px" y="0px" viewBox="0 0 24 24" xmlSpace="preserve">
|
|
3500
|
+
<path
|
|
3501
|
+
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"
|
|
3502
|
+
fill="fillcolor"
|
|
3503
|
+
/>
|
|
3504
|
+
</svg>
|
|
3505
|
+
</span>
|
|
3506
|
+
<span onClick={() => send()}>
|
|
3507
|
+
<input
|
|
3508
|
+
type="file"
|
|
3509
|
+
hidden
|
|
3510
|
+
ref={uploadTag}
|
|
3511
|
+
onChange={onFileUpload}
|
|
3467
3512
|
/>
|
|
3468
|
-
|
|
3469
|
-
|
|
3470
|
-
|
|
3471
|
-
|
|
3472
|
-
|
|
3473
|
-
|
|
3474
|
-
|
|
3475
|
-
|
|
3476
|
-
|
|
3477
|
-
|
|
3478
|
-
|
|
3479
|
-
|
|
3480
|
-
|
|
3481
|
-
|
|
3482
|
-
|
|
3483
|
-
|
|
3484
|
-
|
|
3485
|
-
|
|
3486
|
-
|
|
3487
|
-
|
|
3513
|
+
<svg x="0px" y="0px" viewBox="0 0 32 32" xmlSpace="preserve">
|
|
3514
|
+
<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" />
|
|
3515
|
+
<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" />
|
|
3516
|
+
<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" />
|
|
3517
|
+
</svg>
|
|
3518
|
+
</span>
|
|
3519
|
+
</div>
|
|
3520
|
+
</div> */}
|
|
3521
|
+
<StyledCard>
|
|
3522
|
+
<CardContent>
|
|
3523
|
+
<InputContainer>
|
|
3524
|
+
<StyledInput
|
|
3525
|
+
value={typedMessage}
|
|
3526
|
+
onChange={(e) => setTypedMessage(e.target.value)}
|
|
3527
|
+
onKeyDown={(e) => {
|
|
3528
|
+
if (e.key === "Enter") {
|
|
3529
|
+
e.preventDefault();
|
|
3530
|
+
send();
|
|
3531
|
+
if (textareaRef.current) {
|
|
3532
|
+
textareaRef.current.style.height = "30px";
|
|
3533
|
+
textareaRef.current.style.overflow = "hidden";
|
|
3534
|
+
}
|
|
3535
|
+
}
|
|
3536
|
+
}}
|
|
3537
|
+
style={style}
|
|
3538
|
+
ref={textareaRef}
|
|
3539
|
+
rows={1}
|
|
3540
|
+
id="typemsg"
|
|
3541
|
+
wrap="hard"
|
|
3542
|
+
placeholder="Enter message"
|
|
3543
|
+
/>
|
|
3544
|
+
<IconButtonInput>
|
|
3545
|
+
<SendIcon
|
|
3546
|
+
style={{ cursor: "pointer" }}
|
|
3547
|
+
size={18}
|
|
3548
|
+
onClick={() => send()}
|
|
3549
|
+
/>
|
|
3550
|
+
</IconButtonInput>
|
|
3551
|
+
</InputContainer>
|
|
3552
|
+
</CardContent>
|
|
3553
|
+
</StyledCard>
|
|
3554
|
+
</InputMessageChat>
|
|
3555
|
+
) : null}
|
|
3488
3556
|
|
|
3489
3557
|
<div className="widget_footer">
|
|
3490
3558
|
<p>
|
|
@@ -3508,7 +3576,8 @@ const BodyWrapper = ({
|
|
|
3508
3576
|
{messages.map((message, key) => (
|
|
3509
3577
|
<>
|
|
3510
3578
|
{((sourceState == "new_user" && widget.user_consent == false) ||
|
|
3511
|
-
sourceState !== "new_user"
|
|
3579
|
+
(sourceState !== "new_user" &&
|
|
3580
|
+
!sourceState.includes("browser"))||(widget?.user_consent == true && widget?.lead_form_id === null)) && (
|
|
3512
3581
|
<Message
|
|
3513
3582
|
{...{ key, ...message }}
|
|
3514
3583
|
sendMessage={sendMessage}
|
|
@@ -3885,9 +3954,34 @@ const ReceivedCarousalOutput = ({
|
|
|
3885
3954
|
);
|
|
3886
3955
|
};
|
|
3887
3956
|
|
|
3888
|
-
const ChatHeaderTop = ({
|
|
3957
|
+
const ChatHeaderTop = ({
|
|
3958
|
+
widget,
|
|
3959
|
+
onClick,
|
|
3960
|
+
open,
|
|
3961
|
+
restart,
|
|
3962
|
+
exit,
|
|
3963
|
+
logoshape,
|
|
3964
|
+
setIsExpanded,
|
|
3965
|
+
isExpanded,
|
|
3966
|
+
}) => {
|
|
3889
3967
|
const scale = useScaleContext();
|
|
3968
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
3969
|
+
const dropDownRef = useRef(null);
|
|
3970
|
+
|
|
3971
|
+
const handleClickOutside = (event) => {
|
|
3972
|
+
const refData = dropDownRef.current;
|
|
3973
|
+
if (isOpen && dropDownRef.current && !refData.contains(event.target)) {
|
|
3974
|
+
setIsOpen(!isOpen);
|
|
3975
|
+
}
|
|
3976
|
+
};
|
|
3977
|
+
|
|
3978
|
+
useEffect(() => {
|
|
3979
|
+
document.addEventListener("click", handleClickOutside);
|
|
3890
3980
|
|
|
3981
|
+
return () => {
|
|
3982
|
+
document.removeEventListener("click", handleClickOutside);
|
|
3983
|
+
};
|
|
3984
|
+
});
|
|
3891
3985
|
return (
|
|
3892
3986
|
<ChatHeader
|
|
3893
3987
|
className="widget_chat_top"
|
|
@@ -3897,35 +3991,31 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
|
|
|
3897
3991
|
}}
|
|
3898
3992
|
size={scale.widgetSize}
|
|
3899
3993
|
>
|
|
3900
|
-
<
|
|
3901
|
-
|
|
3902
|
-
|
|
3903
|
-
|
|
3904
|
-
|
|
3905
|
-
}
|
|
3906
|
-
|
|
3907
|
-
|
|
3908
|
-
|
|
3909
|
-
|
|
3910
|
-
|
|
3911
|
-
"https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
|
|
3912
|
-
}
|
|
3913
|
-
/>
|
|
3914
|
-
</LogoSize>
|
|
3994
|
+
{/* <ChevronLeftIcon
|
|
3995
|
+
size={24}
|
|
3996
|
+
style={{ marginRight: "8px", color: "white", cursor: "pointer" }}
|
|
3997
|
+
/> */}
|
|
3998
|
+
<img
|
|
3999
|
+
title={"logo"}
|
|
4000
|
+
src={
|
|
4001
|
+
(widget && widget.logo_url) ||
|
|
4002
|
+
"https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
|
|
4003
|
+
}
|
|
4004
|
+
/>
|
|
3915
4005
|
<ContentHeader>
|
|
3916
4006
|
<ContentHeaderLeft>
|
|
3917
4007
|
<FormHeader
|
|
3918
|
-
style={{ color: widget.primary_color }}
|
|
3919
4008
|
size={scale.widgetSize}
|
|
4009
|
+
style={{ color: widget.primary_color }}
|
|
3920
4010
|
>
|
|
3921
4011
|
{widget && widget.name}
|
|
3922
4012
|
</FormHeader>
|
|
3923
|
-
<Paragraph
|
|
4013
|
+
{/* <Paragraph
|
|
3924
4014
|
style={{ color: widget.primary_color }}
|
|
3925
4015
|
size={scale.widgetSize}
|
|
3926
4016
|
>
|
|
3927
4017
|
{widget && widget.description}
|
|
3928
|
-
</Paragraph>
|
|
4018
|
+
</Paragraph> */}
|
|
3929
4019
|
</ContentHeaderLeft>
|
|
3930
4020
|
<ContentHeaderRight size={scale.widgetSize}>
|
|
3931
4021
|
{/* <IconSpan
|
|
@@ -3953,12 +4043,12 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
|
|
|
3953
4043
|
</IconSpan> */}
|
|
3954
4044
|
<div
|
|
3955
4045
|
style={{
|
|
3956
|
-
|
|
3957
4046
|
display: "flex",
|
|
3958
|
-
gap: "
|
|
4047
|
+
gap: "16px",
|
|
4048
|
+
alignItems: "center",
|
|
3959
4049
|
}}
|
|
3960
4050
|
>
|
|
3961
|
-
<button
|
|
4051
|
+
{/* <button
|
|
3962
4052
|
onClick={restart}
|
|
3963
4053
|
style={{
|
|
3964
4054
|
color: `${widget.primary_color}`,
|
|
@@ -3966,11 +4056,17 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
|
|
|
3966
4056
|
border: "1px solid white",
|
|
3967
4057
|
padding: "6px 12px",
|
|
3968
4058
|
borderRadius: "8px",
|
|
3969
|
-
height: "28px"
|
|
4059
|
+
height: "28px",
|
|
3970
4060
|
}}
|
|
3971
4061
|
>
|
|
3972
4062
|
Restart
|
|
3973
|
-
</button>
|
|
4063
|
+
</button> */}
|
|
4064
|
+
<Maximize2Icon
|
|
4065
|
+
onClick={() => setIsExpanded(!isExpanded)}
|
|
4066
|
+
width={16}
|
|
4067
|
+
height={16}
|
|
4068
|
+
style={{ color: "white", cursor: "pointer" }}
|
|
4069
|
+
/>
|
|
3974
4070
|
{/* <IconSpan
|
|
3975
4071
|
className="relative close_section"
|
|
3976
4072
|
onClick={exit}
|
|
@@ -3992,7 +4088,7 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
|
|
|
3992
4088
|
</svg>
|
|
3993
4089
|
<label className=""> End Chat </label>
|
|
3994
4090
|
</IconSpan> */}
|
|
3995
|
-
<button
|
|
4091
|
+
{/* <button
|
|
3996
4092
|
onClick={exit}
|
|
3997
4093
|
style={{
|
|
3998
4094
|
color: `${widget.primary_color}`,
|
|
@@ -4000,11 +4096,104 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
|
|
|
4000
4096
|
border: "1px solid white",
|
|
4001
4097
|
padding: "6px 12px",
|
|
4002
4098
|
borderRadius: "8px",
|
|
4003
|
-
height: "28px"
|
|
4099
|
+
height: "28px",
|
|
4004
4100
|
}}
|
|
4005
4101
|
>
|
|
4006
4102
|
Exit
|
|
4007
|
-
</button>
|
|
4103
|
+
</button> */}
|
|
4104
|
+
{/* <XIcon
|
|
4105
|
+
onClick={exit}
|
|
4106
|
+
width={20}
|
|
4107
|
+
height={20}
|
|
4108
|
+
style={{ color: "white", cursor: "pointer" }}
|
|
4109
|
+
/> */}
|
|
4110
|
+
<div className="relative">
|
|
4111
|
+
<EllipsisVertical
|
|
4112
|
+
width={20}
|
|
4113
|
+
height={20}
|
|
4114
|
+
style={{ color: "white", cursor: "pointer" }}
|
|
4115
|
+
onClick={() => setIsOpen(!isOpen)}
|
|
4116
|
+
/>
|
|
4117
|
+
|
|
4118
|
+
{/* Dropdown Menu
|
|
4119
|
+
{isOpen && (
|
|
4120
|
+
<div
|
|
4121
|
+
style={{
|
|
4122
|
+
width: "72px",
|
|
4123
|
+
height: "max-content",
|
|
4124
|
+
position: "absolute",
|
|
4125
|
+
top: "30px",
|
|
4126
|
+
right: "10px",
|
|
4127
|
+
padding: "6px",
|
|
4128
|
+
borderRadius: "8px",
|
|
4129
|
+
display: "flex",
|
|
4130
|
+
flexDirection: "column",
|
|
4131
|
+
gap: "4px",
|
|
4132
|
+
background: "white",
|
|
4133
|
+
boxShadow: "0px 2px 6px #00000040",
|
|
4134
|
+
zIndex: 50,
|
|
4135
|
+
}}
|
|
4136
|
+
ref={dropDownRef}
|
|
4137
|
+
>
|
|
4138
|
+
<span
|
|
4139
|
+
style={{
|
|
4140
|
+
width: "100%",
|
|
4141
|
+
background: "white",
|
|
4142
|
+
fontSize:
|
|
4143
|
+
"clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem)",
|
|
4144
|
+
display: "flex",
|
|
4145
|
+
alignItems: "center",
|
|
4146
|
+
cursor: "pointer",
|
|
4147
|
+
}}
|
|
4148
|
+
className="text-gray-900 hover:text-black whitespace-nowrap leading-normal"
|
|
4149
|
+
onClick={() => {
|
|
4150
|
+
restart();
|
|
4151
|
+
setIsOpen(false);
|
|
4152
|
+
}}
|
|
4153
|
+
>
|
|
4154
|
+
Restart Chat
|
|
4155
|
+
</span>
|
|
4156
|
+
<span
|
|
4157
|
+
onClick={() => {
|
|
4158
|
+
exit();
|
|
4159
|
+
setIsOpen(false);
|
|
4160
|
+
}}
|
|
4161
|
+
className="text-gray-900 hover:text-black whitespace-nowrap leading-normal"
|
|
4162
|
+
style={{
|
|
4163
|
+
width: "100%",
|
|
4164
|
+
background: "white",
|
|
4165
|
+
fontSize:
|
|
4166
|
+
"clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem)",
|
|
4167
|
+
display: "flex",
|
|
4168
|
+
alignItems: "center",
|
|
4169
|
+
cursor: "pointer",
|
|
4170
|
+
}}
|
|
4171
|
+
>
|
|
4172
|
+
End Chat
|
|
4173
|
+
</span>
|
|
4174
|
+
</div>
|
|
4175
|
+
)} */}
|
|
4176
|
+
{isOpen && (
|
|
4177
|
+
<DropdownContainer ref={dropDownRef}>
|
|
4178
|
+
<DropdownItem
|
|
4179
|
+
onClick={() => {
|
|
4180
|
+
restart();
|
|
4181
|
+
setIsOpen(false);
|
|
4182
|
+
}}
|
|
4183
|
+
>
|
|
4184
|
+
Restart Chat
|
|
4185
|
+
</DropdownItem>
|
|
4186
|
+
<DropdownItem
|
|
4187
|
+
onClick={() => {
|
|
4188
|
+
exit();
|
|
4189
|
+
setIsOpen(false);
|
|
4190
|
+
}}
|
|
4191
|
+
>
|
|
4192
|
+
End Chat
|
|
4193
|
+
</DropdownItem>
|
|
4194
|
+
</DropdownContainer>
|
|
4195
|
+
)}
|
|
4196
|
+
</div>
|
|
4008
4197
|
</div>
|
|
4009
4198
|
</ContentHeaderRight>
|
|
4010
4199
|
</ContentHeader>
|
|
@@ -4024,34 +4213,50 @@ const AiResponse = ({
|
|
|
4024
4213
|
const scale = useScaleContext();
|
|
4025
4214
|
return (
|
|
4026
4215
|
<>
|
|
4027
|
-
|
|
4028
4216
|
<MessageBox size={scale.widgetSize} className="widget_chat_logs">
|
|
4029
|
-
<
|
|
4030
|
-
<img
|
|
4031
|
-
alt={"logo"}
|
|
4032
|
-
src={
|
|
4033
|
-
(widget && widget.logo_url) ||
|
|
4034
|
-
"https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
|
|
4035
|
-
}
|
|
4036
|
-
/>
|
|
4037
|
-
</LogoSize>
|
|
4038
|
-
<ChatMessage size={scale.widgetSize}>
|
|
4217
|
+
{/* <ChatMessage size={scale.widgetSize}>
|
|
4039
4218
|
<div className="flex widget_title chat_assisitant">
|
|
4040
|
-
<h6>{
|
|
4041
|
-
<div className="timestamp">{
|
|
4042
|
-
</div>
|
|
4043
|
-
<div>
|
|
4044
|
-
{console.log("output text", output.text)}
|
|
4045
|
-
<AssistantMd mdText={output.text}></AssistantMd>
|
|
4219
|
+
<h6>{}</h6>
|
|
4220
|
+
<div className="timestamp">{}</div>
|
|
4046
4221
|
</div>
|
|
4047
|
-
|
|
4222
|
+
<div>{console.log("output text", output.text)}</div>
|
|
4223
|
+
</ChatMessage> */}
|
|
4224
|
+
<Container>
|
|
4225
|
+
<MessageContainer>
|
|
4226
|
+
<BotHeader>
|
|
4227
|
+
<BotLabel>{widget && widget.name}</BotLabel>
|
|
4228
|
+
</BotHeader>
|
|
4229
|
+
<MessageBubbleContainer>
|
|
4230
|
+
<AvatarContainer>
|
|
4231
|
+
<AvatarImage>
|
|
4232
|
+
<img
|
|
4233
|
+
alt={"logo"}
|
|
4234
|
+
src={
|
|
4235
|
+
(widget && widget.logo_url) ||
|
|
4236
|
+
"https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
|
|
4237
|
+
}
|
|
4238
|
+
/>
|
|
4239
|
+
</AvatarImage>
|
|
4240
|
+
</AvatarContainer>
|
|
4241
|
+
<MessageCard>
|
|
4242
|
+
<AssistantMd mdText={output.text}></AssistantMd>
|
|
4243
|
+
</MessageCard>
|
|
4244
|
+
</MessageBubbleContainer>
|
|
4245
|
+
|
|
4246
|
+
<BottomContainer>
|
|
4247
|
+
<Timestamp>
|
|
4248
|
+
<TimestampText>{formatTimeAMPM(timestamp)}</TimestampText>
|
|
4249
|
+
</Timestamp>
|
|
4250
|
+
<AiFeedbackButtonsWrapper
|
|
4251
|
+
options={output.buttons}
|
|
4252
|
+
sendFeedback={sendFeedback}
|
|
4253
|
+
sendMessage={sendMessage}
|
|
4254
|
+
event_id={event_id}
|
|
4255
|
+
/>
|
|
4256
|
+
</BottomContainer>
|
|
4257
|
+
</MessageContainer>
|
|
4258
|
+
</Container>
|
|
4048
4259
|
</MessageBox>
|
|
4049
|
-
<AiFeedbackButtonsWrapper
|
|
4050
|
-
options={output.buttons}
|
|
4051
|
-
sendFeedback={sendFeedback}
|
|
4052
|
-
sendMessage={sendMessage}
|
|
4053
|
-
event_id={event_id}
|
|
4054
|
-
/>
|
|
4055
4260
|
</>
|
|
4056
4261
|
);
|
|
4057
4262
|
};
|
|
@@ -4069,7 +4274,7 @@ const ChatAssistant = ({
|
|
|
4069
4274
|
}) => {
|
|
4070
4275
|
// const [hover, setHover] = useState(false);
|
|
4071
4276
|
const scale = useScaleContext();
|
|
4072
|
-
console.log("chat assistant",
|
|
4277
|
+
console.log("chat assistant", outputStruct);
|
|
4073
4278
|
if (outputStruct.response_type === "ai_response") {
|
|
4074
4279
|
return (
|
|
4075
4280
|
<AiResponse
|
|
@@ -4086,51 +4291,58 @@ const ChatAssistant = ({
|
|
|
4086
4291
|
return (
|
|
4087
4292
|
<>
|
|
4088
4293
|
<MessageBox size={scale.widgetSize} className="widget_chat_logs">
|
|
4089
|
-
<
|
|
4090
|
-
|
|
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
|
-
|
|
4294
|
+
<Container>
|
|
4295
|
+
<MessageContainer>
|
|
4296
|
+
<BotHeader>
|
|
4297
|
+
<BotLabel>{widget && widget.name}</BotLabel>
|
|
4298
|
+
</BotHeader>
|
|
4299
|
+
<MessageBubbleContainer>
|
|
4300
|
+
<AvatarContainer>
|
|
4301
|
+
<AvatarImage>
|
|
4302
|
+
<img
|
|
4303
|
+
alt={"logo"}
|
|
4304
|
+
src={
|
|
4305
|
+
(widget && widget.logo_url) ||
|
|
4306
|
+
"https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
|
|
4307
|
+
}
|
|
4308
|
+
/>
|
|
4309
|
+
</AvatarImage>
|
|
4310
|
+
</AvatarContainer>
|
|
4311
|
+
<MessageCard>
|
|
4312
|
+
{type === "text_with_btns" ? (
|
|
4313
|
+
<div
|
|
4314
|
+
style={{
|
|
4315
|
+
marginBottom: "12px",
|
|
4316
|
+
}}
|
|
4317
|
+
>
|
|
4318
|
+
{console.log("check scenarios", outputStruct)}
|
|
4319
|
+
<AssistantMd mdText={outputStruct.text}></AssistantMd>
|
|
4320
|
+
</div>
|
|
4321
|
+
) : (
|
|
4322
|
+
<div>
|
|
4323
|
+
{console.log("output struct", outputStruct.value)}
|
|
4324
|
+
<AssistantMd mdText={outputStruct.value}></AssistantMd>
|
|
4325
|
+
</div>
|
|
4326
|
+
)}
|
|
4327
|
+
{type === "text_with_btns" && (
|
|
4328
|
+
<>
|
|
4329
|
+
<ButtonsWrapper
|
|
4330
|
+
options={outputStruct.buttons}
|
|
4331
|
+
sendMessage={sendMessage}
|
|
4332
|
+
widget={widget}
|
|
4333
|
+
/>
|
|
4334
|
+
</>
|
|
4335
|
+
)}
|
|
4336
|
+
</MessageCard>
|
|
4337
|
+
</MessageBubbleContainer>
|
|
4338
|
+
<BottomContainer>
|
|
4339
|
+
<Timestamp>
|
|
4340
|
+
<TimestampText>{formatTimeAMPM(timestamp)}</TimestampText>
|
|
4341
|
+
</Timestamp>
|
|
4342
|
+
</BottomContainer>
|
|
4343
|
+
</MessageContainer>
|
|
4344
|
+
</Container>
|
|
4126
4345
|
</MessageBox>
|
|
4127
|
-
{type === "text_with_btns" && (
|
|
4128
|
-
<ButtonsWrapper
|
|
4129
|
-
options={outputStruct.buttons}
|
|
4130
|
-
sendMessage={sendMessage}
|
|
4131
|
-
widget={widget}
|
|
4132
|
-
/>
|
|
4133
|
-
)}
|
|
4134
4346
|
</>
|
|
4135
4347
|
);
|
|
4136
4348
|
};
|
|
@@ -4165,111 +4377,118 @@ const FeedbackBtn = ({
|
|
|
4165
4377
|
}) => {
|
|
4166
4378
|
// const [hovered, setHovered] = useState(false);
|
|
4167
4379
|
const scale = useScaleContext();
|
|
4168
|
-
console.log("labelll", label)
|
|
4380
|
+
console.log("labelll", label);
|
|
4381
|
+
|
|
4382
|
+
const PersonWithSoundWavesIcon = () => (
|
|
4383
|
+
<svg
|
|
4384
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4385
|
+
width="14"
|
|
4386
|
+
height="14"
|
|
4387
|
+
viewBox="0 0 14 14"
|
|
4388
|
+
fill="none"
|
|
4389
|
+
>
|
|
4390
|
+
<path
|
|
4391
|
+
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"
|
|
4392
|
+
stroke="#45556C"
|
|
4393
|
+
stroke-linecap="round"
|
|
4394
|
+
stroke-linejoin="round"
|
|
4395
|
+
/>
|
|
4396
|
+
</svg>
|
|
4397
|
+
);
|
|
4169
4398
|
return (
|
|
4170
|
-
<
|
|
4171
|
-
|
|
4172
|
-
|
|
4173
|
-
|
|
4174
|
-
|
|
4175
|
-
|
|
4176
|
-
|
|
4177
|
-
|
|
4178
|
-
|
|
4179
|
-
|
|
4180
|
-
|
|
4181
|
-
|
|
4182
|
-
|
|
4183
|
-
|
|
4184
|
-
|
|
4185
|
-
|
|
4186
|
-
|
|
4187
|
-
|
|
4188
|
-
|
|
4189
|
-
|
|
4190
|
-
|
|
4191
|
-
|
|
4192
|
-
|
|
4193
|
-
|
|
4194
|
-
|
|
4195
|
-
|
|
4196
|
-
|
|
4197
|
-
|
|
4198
|
-
|
|
4199
|
-
|
|
4200
|
-
|
|
4201
|
-
|
|
4202
|
-
|
|
4203
|
-
|
|
4204
|
-
|
|
4205
|
-
|
|
4206
|
-
|
|
4207
|
-
|
|
4208
|
-
|
|
4209
|
-
|
|
4210
|
-
|
|
4211
|
-
|
|
4212
|
-
|
|
4213
|
-
|
|
4214
|
-
|
|
4215
|
-
|
|
4216
|
-
|
|
4217
|
-
|
|
4218
|
-
|
|
4219
|
-
|
|
4220
|
-
|
|
4221
|
-
|
|
4222
|
-
|
|
4223
|
-
|
|
4224
|
-
|
|
4225
|
-
|
|
4226
|
-
|
|
4227
|
-
//
|
|
4228
|
-
|
|
4229
|
-
//
|
|
4230
|
-
|
|
4231
|
-
|
|
4232
|
-
|
|
4233
|
-
|
|
4234
|
-
|
|
4235
|
-
|
|
4236
|
-
|
|
4237
|
-
|
|
4238
|
-
|
|
4239
|
-
|
|
4240
|
-
|
|
4241
|
-
|
|
4242
|
-
|
|
4243
|
-
|
|
4244
|
-
|
|
4399
|
+
// <ReactionContainer
|
|
4400
|
+
// // onMouseOver={() => setHovered(true)}
|
|
4401
|
+
// // onMouseLeave={() => setHovered(false)}
|
|
4402
|
+
|
|
4403
|
+
// type="button"
|
|
4404
|
+
// onClick={() => {
|
|
4405
|
+
// if (action.contract_action) {
|
|
4406
|
+
// sendFeedback(
|
|
4407
|
+
// action.contract_action.action === "send_satisfied_feedback"
|
|
4408
|
+
// ? "satisfied"
|
|
4409
|
+
// : "not_satisfied",
|
|
4410
|
+
// event_id
|
|
4411
|
+
// );
|
|
4412
|
+
// } else if (action.send_rly) {
|
|
4413
|
+
// sendMessage(action.send_rly);
|
|
4414
|
+
// }
|
|
4415
|
+
// }}
|
|
4416
|
+
// // className="widget_btn"
|
|
4417
|
+
// size={scale.widgetSize}
|
|
4418
|
+
// >
|
|
4419
|
+
// {console.log("label", label)}
|
|
4420
|
+
// {/* <AssistantMd mdText={label} /> */}
|
|
4421
|
+
|
|
4422
|
+
// {
|
|
4423
|
+
// label === "Satisfied" ? (
|
|
4424
|
+
// <ReactionButton>
|
|
4425
|
+
// <ThumbsUpIcon strokeWidth={1.4} color="#45556C" />
|
|
4426
|
+
// </ReactionButton>
|
|
4427
|
+
// ) : null
|
|
4428
|
+
// // (
|
|
4429
|
+
// // <svg
|
|
4430
|
+
// // xmlns="
|
|
4431
|
+
// // http://www.w3.org/2000/svg"
|
|
4432
|
+
// // viewBox="0 0 24 24"
|
|
4433
|
+
// // fill="none"
|
|
4434
|
+
// // width="24px"
|
|
4435
|
+
// // height="24px"
|
|
4436
|
+
// // >
|
|
4437
|
+
// // <path
|
|
4438
|
+
// // 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"
|
|
4439
|
+
// // stroke="#ED3535"
|
|
4440
|
+
// // strokeWidth="1.7"
|
|
4441
|
+
// // strokeLinecap="round"
|
|
4442
|
+
// // strokeLinejoin="round"
|
|
4443
|
+
// // />
|
|
4444
|
+
// // </svg>
|
|
4445
|
+
// // )
|
|
4446
|
+
// }
|
|
4447
|
+
// {label === "Not Satisfied" ? (
|
|
4448
|
+
// <ReactionButton>
|
|
4449
|
+
// <ThumbsDownIcon strokeWidth={1.4} color="#45556C" />
|
|
4450
|
+
// </ReactionButton>
|
|
4451
|
+
// ) : null}
|
|
4452
|
+
// {label === "Hand over to Live agent" ? (
|
|
4453
|
+
// <ReactionButton>
|
|
4454
|
+
// <PersonWithSoundWavesIcon />
|
|
4455
|
+
// </ReactionButton>
|
|
4456
|
+
// ) : null}
|
|
4457
|
+
|
|
4458
|
+
// </ReactionContainer>
|
|
4459
|
+
|
|
4460
|
+
<ReactionButton
|
|
4461
|
+
// onMouseOver={() => setHovered(true)}
|
|
4462
|
+
// onMouseLeave={() => setHovered(false)}
|
|
4463
|
+
|
|
4464
|
+
type="button"
|
|
4465
|
+
onClick={() => {
|
|
4466
|
+
if (action.contract_action) {
|
|
4467
|
+
sendFeedback(
|
|
4468
|
+
action.contract_action.action === "send_satisfied_feedback"
|
|
4469
|
+
? "satisfied"
|
|
4470
|
+
: "not_satisfied",
|
|
4471
|
+
event_id
|
|
4472
|
+
);
|
|
4473
|
+
} else if (action.send_rly) {
|
|
4474
|
+
sendMessage(action.send_rly);
|
|
4245
4475
|
}
|
|
4246
|
-
|
|
4247
|
-
|
|
4248
|
-
|
|
4249
|
-
|
|
4250
|
-
|
|
4251
|
-
|
|
4252
|
-
|
|
4253
|
-
|
|
4254
|
-
|
|
4255
|
-
|
|
4256
|
-
|
|
4257
|
-
|
|
4258
|
-
|
|
4259
|
-
|
|
4260
|
-
|
|
4261
|
-
|
|
4262
|
-
/>
|
|
4263
|
-
</svg>
|
|
4264
|
-
):null
|
|
4265
|
-
}
|
|
4266
|
-
{
|
|
4267
|
-
label === "Hand over to Live agent"?(
|
|
4268
|
-
<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>
|
|
4269
|
-
):null
|
|
4270
|
-
}
|
|
4271
|
-
</Button>
|
|
4272
|
-
</WidgetUpdateButton>
|
|
4476
|
+
}}
|
|
4477
|
+
size={scale.widgetSize}
|
|
4478
|
+
>
|
|
4479
|
+
{console.log("label", label)}
|
|
4480
|
+
{/* <AssistantMd mdText={label} /> */}
|
|
4481
|
+
{label === "Satisfied" ? (
|
|
4482
|
+
<ThumbsUpIcon strokeWidth={1.4} color="#45556C" />
|
|
4483
|
+
) : null}
|
|
4484
|
+
{label === "Not Satisfied" ? (
|
|
4485
|
+
<ThumbsDownIcon strokeWidth={1.4} color="#45556C" />
|
|
4486
|
+
) : null}
|
|
4487
|
+
{label === "Hand over to Live agent" ? (
|
|
4488
|
+
<PersonWithSoundWavesIcon width="24" height="24" />
|
|
4489
|
+
) : // <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>
|
|
4490
|
+
null}
|
|
4491
|
+
</ReactionButton>
|
|
4273
4492
|
);
|
|
4274
4493
|
};
|
|
4275
4494
|
|
|
@@ -4280,9 +4499,8 @@ const AiFeedbackButtonsWrapper = ({
|
|
|
4280
4499
|
event_id,
|
|
4281
4500
|
}) => {
|
|
4282
4501
|
return (
|
|
4283
|
-
<
|
|
4502
|
+
<ReactionContainer>
|
|
4284
4503
|
{options.map(({ label, action }, key) => (
|
|
4285
|
-
|
|
4286
4504
|
<FeedbackBtn
|
|
4287
4505
|
label={label}
|
|
4288
4506
|
action={action}
|
|
@@ -4292,23 +4510,45 @@ const AiFeedbackButtonsWrapper = ({
|
|
|
4292
4510
|
event_id={event_id}
|
|
4293
4511
|
></FeedbackBtn>
|
|
4294
4512
|
))}
|
|
4295
|
-
</
|
|
4513
|
+
</ReactionContainer>
|
|
4296
4514
|
);
|
|
4297
4515
|
};
|
|
4298
4516
|
|
|
4299
4517
|
const ButtonsWrapper = ({ options, sendMessage, widget }) => {
|
|
4300
4518
|
return (
|
|
4301
|
-
<
|
|
4519
|
+
<SuggestionContainer>
|
|
4302
4520
|
{options.map(({ label, action }, key) => (
|
|
4303
|
-
|
|
4304
|
-
|
|
4305
|
-
|
|
4306
|
-
|
|
4307
|
-
|
|
4308
|
-
|
|
4309
|
-
|
|
4521
|
+
<>
|
|
4522
|
+
{console.log("send message", sendMessage)}
|
|
4523
|
+
{/* <SuggestionButton
|
|
4524
|
+
value={action.send_rly}
|
|
4525
|
+
key={key}
|
|
4526
|
+
onClick={() => {
|
|
4527
|
+
sendMessage(evalNormalOrJoinText(value));
|
|
4528
|
+
}}
|
|
4529
|
+
|
|
4530
|
+
>{label}</SuggestionButton> */}
|
|
4531
|
+
<WidgetBtn
|
|
4532
|
+
label={label}
|
|
4533
|
+
value={action.send_rly}
|
|
4534
|
+
key={key}
|
|
4535
|
+
sendMessage={sendMessage}
|
|
4536
|
+
widget={widget}
|
|
4537
|
+
></WidgetBtn>
|
|
4538
|
+
</>
|
|
4310
4539
|
))}
|
|
4311
|
-
</
|
|
4540
|
+
</SuggestionContainer>
|
|
4541
|
+
// <ButtonWrapper>
|
|
4542
|
+
// {options.map(({ label, action }, key) => (
|
|
4543
|
+
// <WidgetBtn
|
|
4544
|
+
// label={label}
|
|
4545
|
+
// value={action.send_rly}
|
|
4546
|
+
// key={key}
|
|
4547
|
+
// sendMessage={sendMessage}
|
|
4548
|
+
// widget={widget}
|
|
4549
|
+
// ></WidgetBtn>
|
|
4550
|
+
// ))}
|
|
4551
|
+
// </ButtonWrapper>
|
|
4312
4552
|
);
|
|
4313
4553
|
};
|
|
4314
4554
|
|
|
@@ -4364,63 +4604,43 @@ const UserAssistant = ({
|
|
|
4364
4604
|
const scale = useScaleContext();
|
|
4365
4605
|
return (
|
|
4366
4606
|
<UserChat size={scale.widgetSize}>
|
|
4367
|
-
<MessageBox
|
|
4607
|
+
<MessageBox
|
|
4608
|
+
size={scale.widgetSize}
|
|
4609
|
+
style={{ flexDirection: "column", alignItems: "flex-end" }}
|
|
4610
|
+
>
|
|
4368
4611
|
<ChatMessage
|
|
4369
4612
|
size={scale.widgetSize}
|
|
4370
|
-
style={{
|
|
4613
|
+
style={{
|
|
4614
|
+
background: widget ? widget.secondary_color : "#fff",
|
|
4615
|
+
marginRight: "0px",
|
|
4616
|
+
}}
|
|
4371
4617
|
>
|
|
4372
4618
|
<div
|
|
4373
|
-
|
|
4374
|
-
|
|
4375
|
-
|
|
4376
|
-
|
|
4377
|
-
color:`${widget.user_message_text_color}`,
|
|
4378
|
-
fontSize: "12px",
|
|
4619
|
+
style={{
|
|
4620
|
+
color: `${widget.user_message_text_color}`,
|
|
4621
|
+
fontFamily: "'Inter', 'Open Sans'",
|
|
4622
|
+
fontSize: "clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem)",
|
|
4379
4623
|
fontStyle: "normal",
|
|
4380
|
-
fontWeight:
|
|
4381
|
-
lineHeight: "
|
|
4382
|
-
|
|
4383
|
-
|
|
4384
|
-
<div className="timestamp" style={{ color: "#fff", gap: 0 }}>
|
|
4385
|
-
{formatTimeAMPM(timestamp)}
|
|
4386
|
-
</div>
|
|
4387
|
-
</div>
|
|
4388
|
-
<div style={{ color: `${widget.user_message_text_color}` }}>
|
|
4624
|
+
fontWeight: 400,
|
|
4625
|
+
lineHeight: "20px",
|
|
4626
|
+
}}
|
|
4627
|
+
>
|
|
4389
4628
|
{(SYS_UPLOADED_FILE && "File uploaded") || (
|
|
4390
4629
|
<DisplayURL text={input.value} />
|
|
4391
4630
|
)}
|
|
4392
4631
|
</div>
|
|
4393
4632
|
</ChatMessage>
|
|
4394
|
-
<
|
|
4395
|
-
|
|
4396
|
-
|
|
4397
|
-
|
|
4398
|
-
|
|
4399
|
-
|
|
4400
|
-
|
|
4401
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
4402
|
-
x="0px"
|
|
4403
|
-
y="0px"
|
|
4404
|
-
viewBox="0 0 58 58"
|
|
4405
|
-
xmlSpace="preserve"
|
|
4633
|
+
<BottomContainer>
|
|
4634
|
+
<Timestamp
|
|
4635
|
+
style={{
|
|
4636
|
+
justifyContent: "flex-end",
|
|
4637
|
+
paddingRight: "2px",
|
|
4638
|
+
paddingTop: "4px",
|
|
4639
|
+
}}
|
|
4406
4640
|
>
|
|
4407
|
-
<
|
|
4408
|
-
|
|
4409
|
-
|
|
4410
|
-
id="Ellipse_238"
|
|
4411
|
-
cx={452}
|
|
4412
|
-
cy={4561.2}
|
|
4413
|
-
rx={11.8}
|
|
4414
|
-
ry={11.3}
|
|
4415
|
-
/>
|
|
4416
|
-
<path
|
|
4417
|
-
id="Path_4117"
|
|
4418
|
-
// className="st0"
|
|
4419
|
-
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"
|
|
4420
|
-
/>
|
|
4421
|
-
</g>
|
|
4422
|
-
</svg>
|
|
4423
|
-
</LogoSize>
|
|
4641
|
+
<TimestampText>{formatTimeAMPM(timestamp)}</TimestampText>
|
|
4642
|
+
</Timestamp>
|
|
4643
|
+
</BottomContainer>
|
|
4424
4644
|
</MessageBox>
|
|
4425
4645
|
</UserChat>
|
|
4426
4646
|
);
|