pager-widget 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/App.jsx +793 -499
  2. package/contentEditable.js +47 -40
  3. package/dist/lib.js +6 -6
  4. package/md/assistant_md.js +25 -31
  5. package/package.json +1 -1
  6. package/useMessages.js +259 -236
package/App.jsx CHANGED
@@ -14,19 +14,19 @@ import styled from "styled-components";
14
14
  import useWidgetService from "./useWidgetService";
15
15
 
16
16
  const switchSize = (size, small, medium, large) => {
17
- // console.log(size, "tested");
17
+ // ;
18
18
 
19
19
  switch (size) {
20
- case 'small':
20
+ case "small":
21
21
  return small;
22
- case 'medium':
22
+ case "medium":
23
23
  return medium;
24
- case 'large':
24
+ case "large":
25
25
  return large;
26
26
  default:
27
- return small
27
+ return small;
28
28
  }
29
- }
29
+ };
30
30
 
31
31
  const WidgetPreview = styled.div`
32
32
 
@@ -53,7 +53,7 @@ const WidgetPreview = styled.div`
53
53
  width: ${(props) => switchSize(props.size, "460px", "540px", "560px")};
54
54
  }
55
55
  @media (max-width: 1280px) {
56
- width: ${(props) => switchSize(props.size, "360px", "420px", "460px")};
56
+ width: ${(props) => switchSize(props.size, "360px", "400px", "440px")};
57
57
  right: 3rem;
58
58
  bottom: 3rem;
59
59
  }
@@ -74,7 +74,7 @@ const FormHeader = styled.div`
74
74
  align-items: center;
75
75
  width: 100%;
76
76
  float: left;
77
- font-family: 'Gordita-Medium', 'Open Sans', sans-serif;;
77
+ font-family: "Gordita-Medium", "Open Sans", sans-serif;
78
78
  font-size: ${(props) => switchSize(props.size, "15px", "20px", "24px")};
79
79
  color: #000;
80
80
  margin-right: 12px;
@@ -103,17 +103,17 @@ const FormHeader = styled.div`
103
103
  font-size: ${(props) => switchSize(props.size, "10px", "12px", "15px")};
104
104
  }
105
105
 
106
- .target.customTip{
106
+ .target.customTip {
107
107
  width: 12px;
108
108
  top: 1px;
109
109
  margin-left: 5px;
110
110
  }
111
111
 
112
- .target.customTip svg{
112
+ .target.customTip svg {
113
113
  color: #999;
114
114
  }
115
115
 
116
- .show_hide._auto_switch{
116
+ .show_hide._auto_switch {
117
117
  position: absolute;
118
118
  right: 0;
119
119
  }
@@ -121,7 +121,6 @@ const FormHeader = styled.div`
121
121
  const ChatWrapper = styled.div`
122
122
  box-sizing: border-box;
123
123
 
124
- .widget_footer_box{
125
124
  .widget_footer{
126
125
  display: flex;
127
126
  position: relative;
@@ -130,12 +129,12 @@ const ChatWrapper = styled.div`
130
129
  justify-content: center;
131
130
  padding: 4px 0 2px 0;
132
131
  box-sizing: border-box;
133
- height: 43px;
132
+ height: 46px;
134
133
 
135
134
  p{
136
135
  font-family: 'Gordita-Regular', 'Open Sans', sans-serif;;
137
- font-size: 13px;
138
- color: #555555;
136
+ font-size: 12px;
137
+ color: #000;
139
138
  margin: 0;
140
139
  align-items: center;
141
140
  display: flex;
@@ -143,9 +142,7 @@ const ChatWrapper = styled.div`
143
142
  }
144
143
 
145
144
  span{
146
- position: relative;
147
- bottom: 2px;
148
- padding-right: 1px;
145
+ color: #353CED;
149
146
  }
150
147
 
151
148
  svg{
@@ -154,7 +151,6 @@ const ChatWrapper = styled.div`
154
151
  }
155
152
  }
156
153
  }
157
- }
158
154
 
159
155
  .tryit_bot_typing{
160
156
  position: relative;
@@ -244,26 +240,68 @@ const ChatWrapper = styled.div`
244
240
  const ChatContentWrapper = styled.div`
245
241
 
246
242
  @media (min-width: 2160px) {
247
- height: ${(props) => switchSize(props.size, "calc(100vh - 60vh)", "calc(100vh - 56vh)", "calc(100vh - 44vh)")};
243
+ height: ${(props) =>
244
+ switchSize(
245
+ props.size,
246
+ "calc(100vh - 60vh)",
247
+ "calc(100vh - 56vh)",
248
+ "calc(100vh - 44vh)"
249
+ )};
248
250
  }
249
251
  @media (min-width: 2560px) {
250
- height: ${(props) => switchSize(props.size, "calc(100vh - 47.4vh)", "calc(100vh - 41.6vh)", "calc(100vh - 33.9vh)")};
252
+ height: ${(props) =>
253
+ switchSize(
254
+ props.size,
255
+ "calc(100vh - 47.4vh)",
256
+ "calc(100vh - 41.6vh)",
257
+ "calc(100vh - 33.9vh)"
258
+ )};
251
259
  }
252
260
  @media (min-width: 3840px) {
253
- height: ${(props) => switchSize(props.size, "calc(100vh - 48vh)", "calc(100vh - 43vh)", "calc(100vh - 38vh)")};
261
+ height: ${(props) =>
262
+ switchSize(
263
+ props.size,
264
+ "calc(100vh - 48vh)",
265
+ "calc(100vh - 43vh)",
266
+ "calc(100vh - 38vh)"
267
+ )};
254
268
  }
255
269
 
256
270
  @media (max-width: 1920px) {
257
- height: ${(props) => switchSize(props.size, "calc(100vh - 44.8vh)", "calc(100vh - 37.4vh)", "calc(100vh - 28vh)")};
271
+ height: ${(props) =>
272
+ switchSize(
273
+ props.size,
274
+ "calc(100vh - 44.8vh)",
275
+ "calc(100vh - 37.4vh)",
276
+ "calc(100vh - 28vh)"
277
+ )};
258
278
  }
259
279
  @media (max-width: 1680px) {
260
- height: ${(props) => switchSize(props.size, "calc(100vh - 45vh)", "calc(100vh - 37.4vh)", "calc(100vh - 31.5vh)")};
280
+ height: ${(props) =>
281
+ switchSize(
282
+ props.size,
283
+ "calc(100vh - 45vh)",
284
+ "calc(100vh - 37.4vh)",
285
+ "calc(100vh - 31.5vh)"
286
+ )};
261
287
  }
262
288
  @media (max-width: 1440px) {
263
- height: ${(props) => switchSize(props.size, "calc(100vh - 44.8vh)", "calc(100vh - 37.4vh)", "calc(100vh - 31.5vh)")};
289
+ height: ${(props) =>
290
+ switchSize(
291
+ props.size,
292
+ "calc(100vh - 44.8vh)",
293
+ "calc(100vh - 37.4vh)",
294
+ "calc(100vh - 40vh)"
295
+ )};
264
296
  }
265
297
  @media (max-width: 1280px) {
266
- height: ${(props) => switchSize(props.size, "calc(100vh - 53.3vh)", "calc(100vh - 48vh)", "calc(100vh - 42vh)")};
298
+ height: ${(props) =>
299
+ switchSize(
300
+ props.size,
301
+ "calc(100vh - 53.3vh)",
302
+ "calc(100vh - 48vh)",
303
+ "calc(100vh - 42vh)"
304
+ )};
267
305
  }
268
306
  height: calc(100vh - 28vh);
269
307
  width: 100%;
@@ -274,10 +312,10 @@ const ChatContentWrapper = styled.div`
274
312
  background: #F6F8FA;
275
313
  overflow-x: hidden;
276
314
  box-sizing: border-box;
277
- background-position: center;
278
- background-size: contain;
279
- background-image: url("https://workativ-asssistant-widget-images.s3.amazonaws.com/widget_bg.svg");
280
- background-repeat: no-repeat;
315
+ // background-position: center;
316
+ // background-size: contain;
317
+ // background-image: url("https://workativ-asssistant-widget-images.s3.amazonaws.com/widget_bg.svg");
318
+ // background-repeat: no-repeat;
281
319
  }
282
320
  `;
283
321
  const AssistantChat = styled.div`
@@ -291,10 +329,8 @@ const AssistantChat = styled.div`
291
329
  margin-bottom: 12px;
292
330
 
293
331
  @media (min-width: 2160px) {
294
-
295
332
  }
296
333
  @media (min-width: 2560px) {
297
-
298
334
  }
299
335
  @media (min-width: 3840px) {
300
336
  margin-bottom: 30px;
@@ -317,7 +353,7 @@ const AssistantChat = styled.div`
317
353
  // font-size: 10px;
318
354
  // font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
319
355
  // }
320
-
356
+
321
357
  // .tryit_cards h4 {
322
358
  // font-size: 13px;
323
359
  // margin-top: 10px;
@@ -349,7 +385,7 @@ const AssistantChat = styled.div`
349
385
  // margin-left: 12px;
350
386
  // margin-top: 12px;
351
387
  // border: none !important;
352
-
388
+
353
389
  // .adaptive_tail_icon {
354
390
  // position: absolute;
355
391
  // }
@@ -384,7 +420,6 @@ const AssistantChat = styled.div`
384
420
  // background: #fff;
385
421
  // border-radius: 0px 10px 10px 10px;
386
422
  // float: left;
387
-
388
423
 
389
424
  // .tryit_ticket_details_wrapper{
390
425
  // grid-template-columns: auto;
@@ -403,13 +438,13 @@ const AssistantChat = styled.div`
403
438
  // bottom: 0px;
404
439
  // }
405
440
  // }
406
-
441
+
407
442
  // .widget_title{
408
443
  // gap: 0 8px;
409
444
  // align-items: center;
410
445
  // margin-bottom: 2px;
411
446
  // display: flex;
412
-
447
+
413
448
  // h6{
414
449
  // font-size: 13px;
415
450
  // font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
@@ -427,7 +462,7 @@ const AssistantChat = styled.div`
427
462
  // border-bottom-left-radius: 12px;
428
463
  // border: 1px solid #c8c8c8;
429
464
  // }
430
-
465
+
431
466
  // .tryit_ticket_wrapper.tryit_button_wrapper {
432
467
  // padding-top: 0px;
433
468
  // display: flex;
@@ -516,7 +551,7 @@ const ChatHeader = styled.div`
516
551
  display: flex;
517
552
  align-items: center;
518
553
  padding: 0 12px 0 22px;
519
- background: #FFD15C;
554
+ background: #ffd15c;
520
555
  border-top-left-radius: 10px;
521
556
  border-top-right-radius: 10px;
522
557
  background-position: right;
@@ -524,32 +559,32 @@ const ChatHeader = styled.div`
524
559
  justify-content: space-between;
525
560
  box-sizing: border-box;
526
561
 
527
- @media (min-width: 2160px) {
528
- height: ${(props) => switchSize(props.size, "86px", "96px", "110px")};
529
- }
530
- @media (min-width: 2560px) {
531
- height: ${(props) => switchSize(props.size, "120px", "138px", "152px")};
532
- gap: 0px 10px;
533
- padding: 0 22px 0 26px;
534
- }
535
- @media (min-width: 3840px) {
536
- height: ${(props) => switchSize(props.size, "180px", "198px", "224px")};
537
- padding: 0 24px 0 28px;
538
- border-top-left-radius: 20px;
539
- border-top-right-radius: 20px;
540
- }
562
+ @media (min-width: 2160px) {
563
+ height: ${(props) => switchSize(props.size, "86px", "96px", "110px")};
564
+ }
565
+ @media (min-width: 2560px) {
566
+ height: ${(props) => switchSize(props.size, "120px", "138px", "152px")};
567
+ gap: 0px 10px;
568
+ padding: 0 22px 0 26px;
569
+ }
570
+ @media (min-width: 3840px) {
571
+ height: ${(props) => switchSize(props.size, "180px", "198px", "224px")};
572
+ padding: 0 24px 0 28px;
573
+ border-top-left-radius: 20px;
574
+ border-top-right-radius: 20px;
575
+ }
541
576
 
542
- @media (max-width: 1920px) {
543
- height: ${(props) => switchSize(props.size, "90px", "99px", "112px")};
544
- }
545
- @media (max-width: 1680px) {
546
- height: ${(props) => switchSize(props.size, "76px", "89px", "92px")};
547
- }
548
- @media (max-width: 1280px) {
549
- height: ${(props) => switchSize(props.size, "60px", "69px", "76px")};
550
- }
551
-
552
- ${LogoSize}{
577
+ @media (max-width: 1920px) {
578
+ height: ${(props) => switchSize(props.size, "90px", "99px", "112px")};
579
+ }
580
+ @media (max-width: 1680px) {
581
+ height: ${(props) => switchSize(props.size, "76px", "89px", "92px")};
582
+ }
583
+ @media (max-width: 1280px) {
584
+ height: ${(props) => switchSize(props.size, "60px", "69px", "76px")};
585
+ }
586
+
587
+ ${LogoSize} {
553
588
  @media (min-width: 2160px) {
554
589
  width: ${(props) => switchSize(props.size, "52px", "56px", "60px")};
555
590
  height: ${(props) => switchSize(props.size, "52px", "58px", "60px")};
@@ -576,7 +611,7 @@ const ChatHeader = styled.div`
576
611
  height: ${(props) => switchSize(props.size, "32px", "36px", "40px")};
577
612
  }
578
613
 
579
- img{
614
+ img {
580
615
  @media (min-width: 2160px) {
581
616
  width: ${(props) => switchSize(props.size, "46px", "52px", "54px")};
582
617
  height: ${(props) => switchSize(props.size, "46px", "52px", "53px")};
@@ -619,7 +654,7 @@ const ContentHeaderRight = styled.div`
619
654
  align-items: center;
620
655
  span:first-child {
621
656
  margin-right: 6px;
622
-
657
+
623
658
  @media (min-width: 3840px) {
624
659
  margin-right: 12px;
625
660
  }
@@ -630,36 +665,35 @@ const ContentHeaderRight = styled.div`
630
665
  margin-right: 12px;
631
666
  }
632
667
  }
633
- .restart, .close_section{
634
-
635
- @media (min-width: 2160px) {
636
- width: ${(props) => switchSize(props.size, "30px", "32px", "36px")};
637
- height: ${(props) => switchSize(props.size, "30px", "32px", "36px")};
638
- }
639
- @media (min-width: 2560px) {
640
- width: ${(props) => switchSize(props.size, "36px", "40px", "44px")};
641
- height: ${(props) => switchSize(props.size, "36px", "40px", "44px")};
642
- }
643
- @media (min-width: 3840px) {
644
- width: ${(props) => switchSize(props.size, "52px", "58px", "66px")};
645
- height: ${(props) => switchSize(props.size, "53px", "58px", "66px")};
646
- }
647
-
648
- @media (max-width: 1920px) {
649
- width: ${(props) => switchSize(props.size, "26px", "29px", "33px")};
650
- height: ${(props) => switchSize(props.size, "26px", "29px", "33px")};
651
- }
652
- @media (max-width: 1680px) {
653
- width: ${(props) => switchSize(props.size, "22px", "26px", "28px")};
654
- height: ${(props) => switchSize(props.size, "22px", "26px", "28px")};
655
- }
656
- @media (max-width: 1280px) {
657
- width: ${(props) => switchSize(props.size, "18px", "20px", "22px")};
658
- height: ${(props) => switchSize(props.size, "18px", "20px", "22px")};
659
- }
668
+ .restart,
669
+ .close_section {
670
+ @media (min-width: 2160px) {
671
+ width: ${(props) => switchSize(props.size, "30px", "32px", "36px")};
672
+ height: ${(props) => switchSize(props.size, "30px", "32px", "36px")};
673
+ }
674
+ @media (min-width: 2560px) {
675
+ width: ${(props) => switchSize(props.size, "36px", "40px", "44px")};
676
+ height: ${(props) => switchSize(props.size, "36px", "40px", "44px")};
677
+ }
678
+ @media (min-width: 3840px) {
679
+ width: ${(props) => switchSize(props.size, "52px", "58px", "66px")};
680
+ height: ${(props) => switchSize(props.size, "53px", "58px", "66px")};
681
+ }
660
682
 
661
- svg{
683
+ @media (max-width: 1920px) {
684
+ width: ${(props) => switchSize(props.size, "26px", "29px", "33px")};
685
+ height: ${(props) => switchSize(props.size, "26px", "29px", "33px")};
686
+ }
687
+ @media (max-width: 1680px) {
688
+ width: ${(props) => switchSize(props.size, "22px", "26px", "28px")};
689
+ height: ${(props) => switchSize(props.size, "22px", "26px", "28px")};
690
+ }
691
+ @media (max-width: 1280px) {
692
+ width: ${(props) => switchSize(props.size, "18px", "20px", "22px")};
693
+ height: ${(props) => switchSize(props.size, "18px", "20px", "22px")};
694
+ }
662
695
 
696
+ svg {
663
697
  @media (min-width: 2160px) {
664
698
  width: ${(props) => switchSize(props.size, "26px", "30px", "34px")};
665
699
  height: ${(props) => switchSize(props.size, "26px", "30px", "34px")};
@@ -685,11 +719,11 @@ const ContentHeaderRight = styled.div`
685
719
  width: ${(props) => switchSize(props.size, "18px", "20px", "22px")};
686
720
  height: ${(props) => switchSize(props.size, "18px", "20px", "22px")};
687
721
  }
688
- }
722
+ }
689
723
  }
690
724
 
691
- .close_section{
692
- label{
725
+ .close_section {
726
+ label {
693
727
  right: -8px;
694
728
  min-width: 65px;
695
729
  }
@@ -772,7 +806,7 @@ const ChatMessage = styled.div`
772
806
  padding: 12px 10px 8px 16px !important;
773
807
  margin-left: 14px;
774
808
  margin-top: 14px;
775
- font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
809
+ font-family: "Gordita-Regular", "Open Sans", sans-serif;
776
810
  white-space: pre-wrap;
777
811
  box-sizing: border-box;
778
812
  word-break: break-word;
@@ -784,43 +818,79 @@ const ChatMessage = styled.div`
784
818
  border-radius: 0px 10px 10px 10px;
785
819
  // font-size: 13px;
786
820
 
787
- @media (min-width: 2160px) {
788
- font-size: ${(props) => switchSize(props.size, "17px", "19px", "22px")};
789
- padding: ${(props) => switchSize(props.size, "12px 10px 8px 16px !important", "12px 10px 8px 28px !important", "12px 10px 8px 20px !important")};
790
- margin-left: ${(props) => switchSize(props.size, "22px", "22px", "26px")};
791
- margin-top: ${(props) => switchSize(props.size, "32px", "34px", "40px")};
792
- }
793
- @media (min-width: 2560px) {
794
- font-size: ${(props) => switchSize(props.size, "20px", "22px", "26px")};
795
- padding: ${(props) => switchSize(props.size, "20px 28px 16px 16px !important", "20px 28px 16px 26px !important", "20px 28px 16px 26px !important")};
796
- margin-left: ${(props) => switchSize(props.size, "22px", "24px", "30px")};
797
- margin-top: ${(props) => switchSize(props.size, "30px", "36px", "45px")};
798
- }
799
- @media (min-width: 3840px) {
800
- font-size: ${(props) => switchSize(props.size, "30px", "34px", "36px")};
801
- padding: ${(props) => switchSize(props.size, "24px 38px 16px 42px !important", "24px 38px 16px 42px !important", "24px 38px 16px 42px !important")};
802
- margin-left: ${(props) => switchSize(props.size, "26px", "30px", "36px")};
803
- margin-top: ${(props) => switchSize(props.size, "45px", "50px", "60px")};
804
- }
805
-
806
- @media (max-width: 1920px) {
807
- font-size: ${(props) => switchSize(props.size, "15px", "17px", "18px")};
808
- padding: ${(props) => switchSize(props.size, "12px 10px 8px 28px !important", "12px 10px 8px 28px !important", "12px 10px 8px 20px !important")};
809
- margin-left: ${(props) => switchSize(props.size, "22px", "22px", "22px")};
810
- margin-top: ${(props) => switchSize(props.size, "32px", "34px", "34px")};
811
- }
812
- @media (max-width: 1680px) {
813
- font-size: ${(props) => switchSize(props.size, "13px", "15px", "15px")};
814
- padding: ${(props) => switchSize(props.size, "12px 10px 8px 18px !important", "12px 10px 8px 20px !important", "12px 10px 8px 22px !important")};
815
- margin-left: ${(props) => switchSize(props.size, "14px", "16px", "18px")};
816
- margin-top: ${(props) => switchSize(props.size, "26px", "26px", "26px")};
817
- }
818
- @media (max-width: 1280px) {
819
- font-size: ${(props) => switchSize(props.size, "10px", "11px", "13px")};
820
- padding: ${(props) => switchSize(props.size, "12px 10px 8px 16px !important", "12px 10px 8px 16px !important", "12px 10px 8px 16px !important")};
821
- margin-left: ${(props) => switchSize(props.size, "16px", "16px", "16px")};
822
- margin-top: ${(props) => switchSize(props.size, "22px", "22px", "22px")};
823
- }
821
+ @media (min-width: 2160px) {
822
+ font-size: ${(props) => switchSize(props.size, "17px", "19px", "22px")};
823
+ padding: ${(props) =>
824
+ switchSize(
825
+ props.size,
826
+ "12px 10px 8px 16px !important",
827
+ "12px 10px 8px 28px !important",
828
+ "12px 10px 8px 20px !important"
829
+ )};
830
+ margin-left: ${(props) => switchSize(props.size, "22px", "22px", "26px")};
831
+ margin-top: ${(props) => switchSize(props.size, "32px", "34px", "40px")};
832
+ }
833
+ @media (min-width: 2560px) {
834
+ font-size: ${(props) => switchSize(props.size, "20px", "22px", "26px")};
835
+ padding: ${(props) =>
836
+ switchSize(
837
+ props.size,
838
+ "20px 28px 16px 16px !important",
839
+ "20px 28px 16px 26px !important",
840
+ "20px 28px 16px 26px !important"
841
+ )};
842
+ margin-left: ${(props) => switchSize(props.size, "22px", "24px", "30px")};
843
+ margin-top: ${(props) => switchSize(props.size, "30px", "36px", "45px")};
844
+ }
845
+ @media (min-width: 3840px) {
846
+ font-size: ${(props) => switchSize(props.size, "30px", "34px", "36px")};
847
+ padding: ${(props) =>
848
+ switchSize(
849
+ props.size,
850
+ "24px 38px 16px 42px !important",
851
+ "24px 38px 16px 42px !important",
852
+ "24px 38px 16px 42px !important"
853
+ )};
854
+ margin-left: ${(props) => switchSize(props.size, "26px", "30px", "36px")};
855
+ margin-top: ${(props) => switchSize(props.size, "45px", "50px", "60px")};
856
+ }
857
+
858
+ @media (max-width: 1920px) {
859
+ font-size: ${(props) => switchSize(props.size, "15px", "17px", "18px")};
860
+ padding: ${(props) =>
861
+ switchSize(
862
+ props.size,
863
+ "12px 10px 8px 28px !important",
864
+ "12px 10px 8px 28px !important",
865
+ "12px 10px 8px 20px !important"
866
+ )};
867
+ margin-left: ${(props) => switchSize(props.size, "22px", "22px", "22px")};
868
+ margin-top: ${(props) => switchSize(props.size, "32px", "34px", "34px")};
869
+ }
870
+ @media (max-width: 1680px) {
871
+ font-size: ${(props) => switchSize(props.size, "13px", "15px", "15px")};
872
+ padding: ${(props) =>
873
+ switchSize(
874
+ props.size,
875
+ "12px 10px 8px 18px !important",
876
+ "12px 10px 8px 20px !important",
877
+ "12px 10px 8px 22px !important"
878
+ )};
879
+ margin-left: ${(props) => switchSize(props.size, "14px", "16px", "18px")};
880
+ margin-top: ${(props) => switchSize(props.size, "26px", "26px", "26px")};
881
+ }
882
+ @media (max-width: 1280px) {
883
+ font-size: ${(props) => switchSize(props.size, "10px", "11px", "13px")};
884
+ padding: ${(props) =>
885
+ switchSize(
886
+ props.size,
887
+ "12px 10px 8px 16px !important",
888
+ "12px 10px 8px 16px !important",
889
+ "12px 10px 8px 16px !important"
890
+ )};
891
+ margin-left: ${(props) => switchSize(props.size, "16px", "16px", "16px")};
892
+ margin-top: ${(props) => switchSize(props.size, "22px", "22px", "22px")};
893
+ }
824
894
 
825
895
  svg {
826
896
  width: 6px;
@@ -839,7 +909,7 @@ const ChatMessage = styled.div`
839
909
  .timestamp {
840
910
  color: #888;
841
911
  // font-size: 10px;
842
- font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
912
+ font-family: "Gordita-Regular", "Open Sans", sans-serif;
843
913
  position: relative;
844
914
  bottom: 0px;
845
915
  text-transform: uppercase;
@@ -858,27 +928,26 @@ const ChatMessage = styled.div`
858
928
  font-size: ${(props) => switchSize(props.size, "12px", "13px", "15px")};
859
929
  }
860
930
  @media (max-width: 1680px) {
861
- font-size: ${(props) => switchSize(props.size, "10px", "12px", "13px")};
931
+ font-size: ${(props) => switchSize(props.size, "10px", "12px", "13px")};
862
932
  }
863
933
  @media (max-width: 1280px) {
864
- font-size: ${(props) => switchSize(props.size, "7px", "8px", "10px")};
934
+ font-size: ${(props) => switchSize(props.size, "7px", "8px", "10px")};
865
935
  }
866
936
  }
867
937
 
868
- .widget_title{
938
+ .widget_title {
869
939
  gap: 0 8px;
870
940
  align-items: center;
871
941
  margin-bottom: 2px;
872
942
  display: flex;
873
943
  margin-bottom: 4px;
874
944
 
875
- h6{
945
+ h6 {
876
946
  // font-size: 13px;
877
- font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
947
+ font-family: "Gordita-Medium", "Open Sans", sans-serif;
878
948
  color: #333;
879
949
  margin: 0;
880
950
 
881
-
882
951
  @media (min-width: 2160px) {
883
952
  font-size: ${(props) => switchSize(props.size, "16px", "18px", "22px")};
884
953
  }
@@ -893,55 +962,55 @@ const ChatMessage = styled.div`
893
962
  font-size: ${(props) => switchSize(props.size, "14px", "15px", "16px")};
894
963
  }
895
964
  @media (max-width: 1680px) {
896
- font-size: ${(props) => switchSize(props.size, "12px", "14px", "14px")};
965
+ font-size: ${(props) => switchSize(props.size, "12px", "14px", "14px")};
897
966
  }
898
967
  @media (max-width: 1280px) {
899
- font-size: ${(props) => switchSize(props.size, "8px", "9px", "12px")};
968
+ font-size: ${(props) => switchSize(props.size, "8px", "9px", "12px")};
900
969
  }
901
970
  }
902
971
  }
903
972
 
904
- .chatAssistant_one{
905
- h6{
973
+ .chatAssistant_one {
974
+ h6 {
906
975
  font-size: 16px;
907
- font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
976
+ font-family: "Gordita-Regular", "Open Sans", sans-serif;
908
977
  color: #555;
909
978
  margin: 16px 0 0;
910
979
  font-style: italic;
911
980
  }
912
- ol{
981
+ ol {
913
982
  margin: 0;
914
983
  padding: 4px 0 0 2px;
915
984
  list-style: none;
916
- li{
917
- color: #1D48EB;
985
+ li {
986
+ color: #1d48eb;
918
987
  font-size: 16px;
919
- font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
988
+ font-family: "Gordita-Regular", "Open Sans", sans-serif;
920
989
  margin-bottom: 4px;
921
- a{
990
+ a {
922
991
  text-decoration: none;
923
992
  cursor: pointer;
924
- :hover{
993
+ :hover {
925
994
  text-decoration: underline;
926
995
  }
927
996
  }
928
997
  }
929
998
  }
930
- p{
999
+ p {
931
1000
  margin: 6px 0 0;
932
1001
  }
933
1002
  }
934
1003
 
935
- .wid_message{
936
- font-size: 16px;
937
- font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
1004
+ .wid_message {
1005
+ font-size: 16px;
1006
+ font-family: "Gordita-Regular", "Open Sans", sans-serif;
938
1007
  }
939
1008
  `;
940
1009
  const MessageBox = styled.div`
941
1010
  width: 100%;
942
1011
  float: left;
943
1012
  display: flex;
944
-
1013
+
945
1014
  ${LogoSize} {
946
1015
  position: absolute;
947
1016
  z-index: 1;
@@ -974,7 +1043,7 @@ const MessageBox = styled.div`
974
1043
  width: ${(props) => switchSize(props.size, "20px", "24px", "28px")};
975
1044
  height: ${(props) => switchSize(props.size, "20px", "24px", "28px")};
976
1045
  }
977
-
1046
+
978
1047
  img {
979
1048
  // width: 24px;
980
1049
  // height: 24px;
@@ -1012,11 +1081,11 @@ const MessageBox = styled.div`
1012
1081
  }
1013
1082
 
1014
1083
  .left_arrow {
1015
- transform: rotate(180deg);
1084
+ transform: rotate(180deg);
1016
1085
  }
1017
-
1086
+
1018
1087
  .arrows {
1019
- display : flex;
1088
+ display: flex;
1020
1089
  align-items: center;
1021
1090
  margin-top: 28px;
1022
1091
  img {
@@ -1040,7 +1109,7 @@ const MessageBox = styled.div`
1040
1109
  }
1041
1110
 
1042
1111
  .carousal_wrapper {
1043
- display : flex;
1112
+ display: flex;
1044
1113
  @media (max-width: 1920px) {
1045
1114
  position: relative;
1046
1115
  left: 10px;
@@ -1133,7 +1202,7 @@ const MessageBox = styled.div`
1133
1202
  @media (min-width: 3840px) {
1134
1203
  width: ${(props) => switchSize(props.size, "97%", "100%", "100%")};
1135
1204
  }
1136
-
1205
+
1137
1206
  @media (max-width: 1920px) {
1138
1207
  left: 3px;
1139
1208
  }
@@ -1149,7 +1218,8 @@ const MessageBox = styled.div`
1149
1218
  width: 99.7%;
1150
1219
  flex-direction: row-reverse;
1151
1220
  display: flex;
1152
- background: transparent linear-gradient(180deg, #444444 0%, #222222 100%) 0% 0% no-repeat padding-box;
1221
+ background: transparent linear-gradient(180deg, #444444 0%, #222222 100%) 0%
1222
+ 0% no-repeat padding-box;
1153
1223
  justify-content: space-evenly;
1154
1224
  border-radius: 10px 11px 0 0;
1155
1225
  align-items: center;
@@ -1157,22 +1227,40 @@ const MessageBox = styled.div`
1157
1227
  @media (min-width: 2160px) {
1158
1228
  gap: ${(props) => switchSize(props.size, "4%", "6%", "6%")};
1159
1229
  height: ${(props) => switchSize(props.size, "76px", "84px", "90px")};
1160
- border-radius: ${(props) => switchSize(props.size, "10px 12px 0 0;", "12px 14px 0 0;", "16px 18px 0 0;")};
1230
+ border-radius: ${(props) =>
1231
+ switchSize(
1232
+ props.size,
1233
+ "10px 12px 0 0;",
1234
+ "12px 14px 0 0;",
1235
+ "16px 18px 0 0;"
1236
+ )};
1161
1237
  }
1162
1238
  @media (min-width: 2560px) {
1163
1239
  gap: ${(props) => switchSize(props.size, "4%", "6%", "6%")};
1164
1240
  height: ${(props) => switchSize(props.size, "80px", "100px", "110px")};
1165
- border-radius: ${(props) => switchSize(props.size, "16px 18px 0 0;", "20px 22px 0 0;", "20px 22px 0 0;")};
1241
+ border-radius: ${(props) =>
1242
+ switchSize(
1243
+ props.size,
1244
+ "16px 18px 0 0;",
1245
+ "20px 22px 0 0;",
1246
+ "20px 22px 0 0;"
1247
+ )};
1166
1248
  }
1167
1249
  @media (min-width: 3840px) {
1168
1250
  gap: ${(props) => switchSize(props.size, "8%", "10%", "10%")};
1169
1251
  height: ${(props) => switchSize(props.size, "100px", "116px", "124px")};
1170
- border-radius: ${(props) => switchSize(props.size, "16px 18px 0 0;", "20px 22px 0 0;", "20px 22px 0 0;")};
1252
+ border-radius: ${(props) =>
1253
+ switchSize(
1254
+ props.size,
1255
+ "16px 18px 0 0;",
1256
+ "20px 22px 0 0;",
1257
+ "20px 22px 0 0;"
1258
+ )};
1171
1259
  }
1172
1260
 
1173
- .tryit_cards_top_left{
1261
+ .tryit_cards_top_left {
1174
1262
  width: 28px;
1175
- height: 24px;
1263
+ height: 24px;
1176
1264
  margin-right: 0;
1177
1265
  position: relative;
1178
1266
  float: left;
@@ -1193,18 +1281,18 @@ const MessageBox = styled.div`
1193
1281
  }
1194
1282
  @media (min-width: 3840px) {
1195
1283
  width: 56px;
1196
- height: 48px;
1284
+ height: 48px;
1197
1285
  }
1198
1286
 
1199
- img{
1287
+ img {
1200
1288
  max-width: 100%;
1201
1289
  height: auto;
1202
- border-radius: 50%;
1290
+ border-radius: 50%;
1203
1291
  }
1204
1292
  }
1205
1293
  }
1206
1294
 
1207
- .chat_adaptiveCard_section{
1295
+ .chat_adaptiveCard_section {
1208
1296
  margin: 10px 10px 10px 16px;
1209
1297
  width: 100%;
1210
1298
  float: left;
@@ -1230,15 +1318,13 @@ const MessageBox = styled.div`
1230
1318
  @media (min-width: 2160px) {
1231
1319
  width: 74%;
1232
1320
  }
1233
-
1234
1321
  }
1235
1322
 
1236
1323
  .timestamp {
1237
1324
  color: #888;
1238
1325
  font-size: 10px;
1239
- font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
1326
+ font-family: "Gordita-Regular", "Open Sans", sans-serif;
1240
1327
 
1241
-
1242
1328
  @media (min-width: 2160px) {
1243
1329
  font-size: ${(props) => switchSize(props.size, "12px", "12px", "16px")};
1244
1330
  }
@@ -1259,12 +1345,12 @@ const MessageBox = styled.div`
1259
1345
  font-size: ${(props) => switchSize(props.size, "8px", "8px", "10px")};
1260
1346
  }
1261
1347
  }
1262
-
1348
+
1263
1349
  .tryit_cards h4 {
1264
1350
  font-size: 13px;
1265
1351
  margin-top: 10px;
1266
1352
  margin-bottom: 0px;
1267
- font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
1353
+ font-family: "Gordita-Medium", "Open Sans", sans-serif;
1268
1354
  width: 100%;
1269
1355
  color: #fff;
1270
1356
 
@@ -1288,14 +1374,13 @@ const MessageBox = styled.div`
1288
1374
  @media (max-width: 1280px) {
1289
1375
  font-size: ${(props) => switchSize(props.size, "8px", "8px", "11px")};
1290
1376
  }
1291
-
1292
1377
  }
1293
-
1378
+
1294
1379
  .tryit_cards .tryit_cards_top_right p {
1295
1380
  font-size: 12px;
1296
1381
  color: #fff;
1297
1382
  max-width: 100%;
1298
- font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
1383
+ font-family: "Gordita-Regular", "Open Sans", sans-serif;
1299
1384
  margin: 0 0 8px 0;
1300
1385
  display: flex;
1301
1386
 
@@ -1309,7 +1394,7 @@ const MessageBox = styled.div`
1309
1394
  font-size: ${(props) => switchSize(props.size, "24px", "24px", "24px")};
1310
1395
  }
1311
1396
 
1312
- a{
1397
+ a {
1313
1398
  color: #fff;
1314
1399
  text-decoration: none;
1315
1400
  }
@@ -1351,11 +1436,11 @@ const MessageBox = styled.div`
1351
1436
  margin-top: ${(props) => switchSize(props.size, "15px", "15px", "15px")};
1352
1437
  }
1353
1438
 
1354
- @media (max-width: 1280px){
1439
+ @media (max-width: 1280px) {
1355
1440
  margin-left: 16px;
1356
1441
  margin-top: 22px;
1357
1442
  }
1358
-
1443
+
1359
1444
  .adaptive_tail_icon {
1360
1445
  position: absolute;
1361
1446
  }
@@ -1370,29 +1455,47 @@ const MessageBox = styled.div`
1370
1455
  .tryit_cards {
1371
1456
  margin-top: 0px;
1372
1457
  width: 98.2%;
1373
- min-height : 200px;
1374
- background: #FFFFFF 0% 0% no-repeat padding-box ;
1458
+ min-height: 200px;
1459
+ background: #ffffff 0% 0% no-repeat padding-box;
1375
1460
  box-shadow: 0px 3px 6px #00000029 !important;
1376
1461
  border-radius: 10px;
1377
1462
  padding: 12px 30px 12px 0px;
1378
1463
  float: left;
1379
1464
 
1380
1465
  @media (min-width: 2160px) {
1381
- padding: ${(props) => switchSize(props.size, "12px 30px 12px 0px", "12px 30px 12px 0px", "12px 36px 12px 2px")};
1466
+ padding: ${(props) =>
1467
+ switchSize(
1468
+ props.size,
1469
+ "12px 30px 12px 0px",
1470
+ "12px 30px 12px 0px",
1471
+ "12px 36px 12px 2px"
1472
+ )};
1382
1473
  width: 99%;
1383
1474
  }
1384
1475
  @media (min-width: 2560px) {
1385
- padding: ${(props) => switchSize(props.size, "12px 30px 12px 0px", "12px 30px 12px 0px", "24px 44px 24px 20px")};
1476
+ padding: ${(props) =>
1477
+ switchSize(
1478
+ props.size,
1479
+ "12px 30px 12px 0px",
1480
+ "12px 30px 12px 0px",
1481
+ "24px 44px 24px 20px"
1482
+ )};
1386
1483
  }
1387
1484
  @media (min-width: 3840px) {
1388
- padding: ${(props) => switchSize(props.size, "24px 50px 24px 25px", "24px 50px 24px 25px", "24px 50px 24px 25px")};
1485
+ padding: ${(props) =>
1486
+ switchSize(
1487
+ props.size,
1488
+ "24px 50px 24px 25px",
1489
+ "24px 50px 24px 25px",
1490
+ "24px 50px 24px 25px"
1491
+ )};
1389
1492
  }
1390
1493
 
1391
1494
  .widget_title {
1392
- padding-left : 22px;
1495
+ padding-left: 22px;
1393
1496
  }
1394
1497
 
1395
- .tryit_ticket_wrapper{
1498
+ .tryit_ticket_wrapper {
1396
1499
  padding: 16px 0px 0 16px;
1397
1500
  box-shadow: none;
1398
1501
  width: 95.5%;
@@ -1403,64 +1506,72 @@ const MessageBox = styled.div`
1403
1506
  float: left;
1404
1507
 
1405
1508
  @media (min-width: 2160px) {
1406
- max-height: ${(props) => switchSize(props.size, "186px", "190px", "230px")};
1509
+ max-height: ${(props) =>
1510
+ switchSize(props.size, "186px", "190px", "230px")};
1407
1511
  }
1408
1512
  @media (min-width: 2560px) {
1409
- max-height: ${(props) => switchSize(props.size, "186px", "190px", "230px")};
1513
+ max-height: ${(props) =>
1514
+ switchSize(props.size, "186px", "190px", "230px")};
1410
1515
  }
1411
1516
  @media (min-width: 3840px) {
1412
- max-height: ${(props) => switchSize(props.size, "280px", "328px", "328px")};
1517
+ max-height: ${(props) =>
1518
+ switchSize(props.size, "280px", "328px", "328px")};
1413
1519
  }
1414
-
1415
1520
 
1416
- .tryit_ticket_details_wrapper{
1521
+ .tryit_ticket_details_wrapper {
1417
1522
  grid-template-columns: auto;
1418
1523
 
1419
- .tryit_ticket_details{
1420
- .tryit_ticket_colun{
1524
+ .tryit_ticket_details {
1525
+ .tryit_ticket_colun {
1421
1526
  width: auto;
1422
1527
  }
1423
1528
  }
1424
1529
  }
1425
- div:nth-child(3) h6{
1530
+ div:nth-child(3) h6 {
1426
1531
  width: 35%;
1427
1532
  }
1428
- .tryit_ticket_details span{
1533
+ .tryit_ticket_details span {
1429
1534
  position: relative;
1430
1535
  bottom: 0px;
1431
1536
  }
1432
1537
  }
1433
-
1434
- .widget_title{
1538
+
1539
+ .widget_title {
1435
1540
  gap: 0 8px;
1436
1541
  align-items: center;
1437
1542
  margin-bottom: 2px;
1438
1543
  display: flex;
1439
-
1440
- h6{
1544
+
1545
+ h6 {
1441
1546
  font-size: 13px;
1442
- font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
1547
+ font-family: "Gordita-Medium", "Open Sans", sans-serif;
1443
1548
  color: #333;
1444
1549
  margin: 0;
1445
1550
 
1446
1551
  @media (min-width: 2160px) {
1447
- font-size: ${(props) => switchSize(props.size, "16px", "18px", "22px")};
1552
+ font-size: ${(props) =>
1553
+ switchSize(props.size, "16px", "18px", "22px")};
1448
1554
  }
1449
1555
  @media (min-width: 2560px) {
1450
- font-size: ${(props) => switchSize(props.size, "18px", "18px", "24px")};
1556
+ font-size: ${(props) =>
1557
+ switchSize(props.size, "18px", "18px", "24px")};
1451
1558
  }
1452
1559
  @media (min-width: 3840px) {
1453
- font-size: ${(props) => switchSize(props.size, "28px", "30px", "32px")};
1560
+ font-size: ${(props) =>
1561
+ switchSize(props.size, "28px", "30px", "32px")};
1454
1562
  }
1455
1563
 
1456
1564
  @media (max-width: 1920px) {
1457
- font-size: ${(props) => switchSize(props.size, "14px", "15px", "16px")};
1565
+ font-size: ${(props) =>
1566
+ switchSize(props.size, "14px", "15px", "16px")};
1458
1567
  }
1459
1568
  @media (max-width: 1600px) {
1460
- font-size: ${(props) => switchSize(props.size, "12px", "13px", "14px")};
1569
+ font-size: ${(props) =>
1570
+ switchSize(props.size, "12px", "13px", "14px")};
1461
1571
  }
1462
1572
  @media (max-width: 1280px) {
1463
- font-size: ${(props) => switchSize(props.size, "9px", "9px", "12px")};
1573
+ font-size: ${(props) =>
1574
+ switchSize(props.size, "9px", "9px", "12px")};
1464
1575
  }
1465
1576
  }
1466
1577
  }
@@ -1485,7 +1596,7 @@ const MessageBox = styled.div`
1485
1596
  width: 99.3%;
1486
1597
  }
1487
1598
  }
1488
-
1599
+
1489
1600
  .tryit_ticket_wrapper.tryit_button_wrapper {
1490
1601
  padding-top: 0px;
1491
1602
  display: flex;
@@ -1527,7 +1638,7 @@ const MessageBox = styled.div`
1527
1638
  font-size: 12px;
1528
1639
  width: 35%;
1529
1640
  margin: 0;
1530
- font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
1641
+ font-family: "Gordita-Medium", "Open Sans", sans-serif;
1531
1642
 
1532
1643
  @media (min-width: 2160px) {
1533
1644
  font-size: ${(props) => switchSize(props.size, "16px", "18px", "20px")};
@@ -1538,7 +1649,7 @@ const MessageBox = styled.div`
1538
1649
  @media (min-width: 3840px) {
1539
1650
  font-size: ${(props) => switchSize(props.size, "28px", "30px", "32px")};
1540
1651
  }
1541
-
1652
+
1542
1653
  @media (max-width: 1920px) {
1543
1654
  font-size: ${(props) => switchSize(props.size, "14px", "15px", "16px")};
1544
1655
  }
@@ -1549,13 +1660,13 @@ const MessageBox = styled.div`
1549
1660
  font-size: ${(props) => switchSize(props.size, "9px", "9px", "12px")};
1550
1661
  }
1551
1662
  }
1552
- .tryit_ticket_wrapper p{
1663
+ .tryit_ticket_wrapper p {
1553
1664
  font-size: 12px;
1554
1665
  line-height: normal;
1555
1666
  position: relative;
1556
1667
  bottom: 1px;
1557
1668
  width: 60%;
1558
- font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
1669
+ font-family: "Gordita-Regular", "Open Sans", sans-serif;
1559
1670
  margin: 0;
1560
1671
  word-break: break-word;
1561
1672
 
@@ -1580,7 +1691,7 @@ const MessageBox = styled.div`
1580
1691
  }
1581
1692
  }
1582
1693
 
1583
- .tryit_ticket_wrapper p:first-child{
1694
+ .tryit_ticket_wrapper p:first-child {
1584
1695
  bottom: 3px;
1585
1696
  }
1586
1697
  `;
@@ -1605,7 +1716,6 @@ const UserChat = styled.div`
1605
1716
  margin-bottom: 0px;
1606
1717
  }
1607
1718
  ${LogoSize} {
1608
-
1609
1719
  @media (min-width: 2160px) {
1610
1720
  width: ${(props) => switchSize(props.size, "38px", "42px", "46px")};
1611
1721
  height: ${(props) => switchSize(props.size, "38px", "42px", "46px")};
@@ -1651,7 +1761,7 @@ const UserChat = styled.div`
1651
1761
  @media (min-width: 3840px) {
1652
1762
  width: ${(props) => switchSize(props.size, "32px", "36px", "40px")};
1653
1763
  height: ${(props) => switchSize(props.size, "32px", "36px", "40px")};
1654
- }
1764
+ }
1655
1765
 
1656
1766
  @media (max-width: 1920px) {
1657
1767
  width: ${(props) => switchSize(props.size, "16px", "18px", "20px")};
@@ -1670,79 +1780,123 @@ const UserChat = styled.div`
1670
1780
  ${ChatMessage} {
1671
1781
  margin-left: 0px;
1672
1782
  margin-right: 14px;
1673
- padding: 12px 18px 8px 12px !important;
1783
+ padding: 12px 18px 8px 12px !important;
1674
1784
  color: #000;
1675
- background: #F0F7FF 0% 0% no-repeat padding-box;
1785
+ background: #f0f7ff 0% 0% no-repeat padding-box;
1676
1786
  box-shadow: 0px 3px 6px #00000029;
1677
1787
  border-radius: 10px;
1678
1788
 
1679
1789
  @media (min-width: 2160px) {
1680
- margin-right: ${(props) => switchSize(props.size, "16px", "18px", "24px")};
1790
+ margin-right: ${(props) =>
1791
+ switchSize(props.size, "16px", "18px", "24px")};
1681
1792
  margin-top: ${(props) => switchSize(props.size, "20px", "24px", "36px")};
1682
- padding: ${(props) => switchSize(props.size, "12px 28px 8px 12px !important", "12px 28px 8px 12px !important", "12px 28px 8px 12px !important")};
1793
+ padding: ${(props) =>
1794
+ switchSize(
1795
+ props.size,
1796
+ "12px 28px 8px 12px !important",
1797
+ "12px 28px 8px 12px !important",
1798
+ "12px 28px 8px 12px !important"
1799
+ )};
1683
1800
  }
1684
1801
  @media (min-width: 2560px) {
1685
- margin-right: ${(props) => switchSize(props.size, "20px", "24px", "32px")};
1802
+ margin-right: ${(props) =>
1803
+ switchSize(props.size, "20px", "24px", "32px")};
1686
1804
  margin-top: ${(props) => switchSize(props.size, "28px", "36px", "36px")};
1687
- padding: ${(props) => switchSize(props.size, "12px 22px 8px 16px !important", "12px 24px 8px 18px !important", "12px 26px 8px 20px !important")};
1805
+ padding: ${(props) =>
1806
+ switchSize(
1807
+ props.size,
1808
+ "12px 22px 8px 16px !important",
1809
+ "12px 24px 8px 18px !important",
1810
+ "12px 26px 8px 20px !important"
1811
+ )};
1688
1812
  }
1689
1813
  @media (min-width: 3840px) {
1690
- margin-right: ${(props) => switchSize(props.size, "30px", "34px", "40px")};
1814
+ margin-right: ${(props) =>
1815
+ switchSize(props.size, "30px", "34px", "40px")};
1691
1816
  margin-top: ${(props) => switchSize(props.size, "46px", "54px", "60px")};
1692
- padding: ${(props) => switchSize(props.size, "12px 46px 8px 22px !important", "12px 46px 8px 22px !important", "12px 46px 8px 22px !important")};
1693
- }
1817
+ padding: ${(props) =>
1818
+ switchSize(
1819
+ props.size,
1820
+ "12px 46px 8px 22px !important",
1821
+ "12px 46px 8px 22px !important",
1822
+ "12px 46px 8px 22px !important"
1823
+ )};
1824
+ }
1694
1825
 
1695
1826
  @media (max-width: 1920px) {
1696
- margin-right: ${(props) => switchSize(props.size, "10px", "12px", "22px")};
1827
+ margin-right: ${(props) =>
1828
+ switchSize(props.size, "10px", "12px", "22px")};
1697
1829
  margin-top: ${(props) => switchSize(props.size, "14px", "18px", "30px")};
1698
- padding: ${(props) => switchSize(props.size, "12px 28px 8px 12px !important", "12px 28px 8px 12px !important", "12px 28px 8px 12px !important")};
1830
+ padding: ${(props) =>
1831
+ switchSize(
1832
+ props.size,
1833
+ "12px 28px 8px 12px !important",
1834
+ "12px 28px 8px 12px !important",
1835
+ "12px 28px 8px 12px !important"
1836
+ )};
1699
1837
  }
1700
1838
  @media (max-width: 1280px) {
1701
- margin-right: ${(props) => switchSize(props.size, "10px", "12px", "16px")};
1839
+ margin-right: ${(props) =>
1840
+ switchSize(props.size, "10px", "12px", "16px")};
1702
1841
  margin-top: ${(props) => switchSize(props.size, "14px", "18px", "18px")};
1703
- padding: ${(props) => switchSize(props.size, "12px 18px 8px 12px !important", "12px 18px 8px 12px !important", "12px 18px 8px 12px !important")};
1842
+ padding: ${(props) =>
1843
+ switchSize(
1844
+ props.size,
1845
+ "12px 18px 8px 12px !important",
1846
+ "12px 18px 8px 12px !important",
1847
+ "12px 18px 8px 12px !important"
1848
+ )};
1704
1849
  }
1705
1850
 
1706
- .widget_title.user_chat{
1707
- h6{
1851
+ .widget_title.user_chat {
1852
+ h6 {
1708
1853
  @media (min-width: 2160px) {
1709
- font-size: ${(props) => switchSize(props.size, "20px", "21px", "22px")};
1854
+ font-size: ${(props) =>
1855
+ switchSize(props.size, "20px", "21px", "22px")};
1710
1856
  }
1711
1857
  @media (min-width: 2560px) {
1712
- font-size: ${(props) => switchSize(props.size, "18px", "18px", "24px")};
1858
+ font-size: ${(props) =>
1859
+ switchSize(props.size, "18px", "18px", "24px")};
1713
1860
  }
1714
1861
  @media (min-width: 3840px) {
1715
- font-size: ${(props) => switchSize(props.size, "28px", "30px", "32px")};
1862
+ font-size: ${(props) =>
1863
+ switchSize(props.size, "28px", "30px", "32px")};
1716
1864
  }
1717
1865
 
1718
1866
  @media (max-width: 1920px) {
1719
- font-size: ${(props) => switchSize(props.size, "14px", "15px", "16px")};
1867
+ font-size: ${(props) =>
1868
+ switchSize(props.size, "14px", "15px", "16px")};
1720
1869
  }
1721
1870
  @media (max-width: 1600px) {
1722
- font-size: ${(props) => switchSize(props.size, "12px", "13px", "14px")};
1871
+ font-size: ${(props) =>
1872
+ switchSize(props.size, "12px", "13px", "14px")};
1723
1873
  }
1724
1874
  @media (max-width: 1280px) {
1725
1875
  font-size: ${(props) => switchSize(props.size, "9px", "9px", "12px")};
1726
1876
  }
1727
1877
  }
1728
1878
 
1729
- .timestamp{
1730
-
1879
+ .timestamp {
1731
1880
  @media (min-width: 2160px) {
1732
- font-size: ${(props) => switchSize(props.size, "12px", "14px", "16x")};
1881
+ font-size: ${(props) =>
1882
+ switchSize(props.size, "12px", "14px", "16x")};
1733
1883
  }
1734
1884
  @media (min-width: 2560px) {
1735
- font-size: ${(props) => switchSize(props.size, "16px", "16px", "20px")};
1885
+ font-size: ${(props) =>
1886
+ switchSize(props.size, "16px", "16px", "20px")};
1736
1887
  }
1737
1888
  @media (min-width: 3840px) {
1738
- font-size: ${(props) => switchSize(props.size, "24px", "26px", "30px")};
1889
+ font-size: ${(props) =>
1890
+ switchSize(props.size, "24px", "26px", "30px")};
1739
1891
  }
1740
1892
 
1741
1893
  @media (max-width: 1920px) {
1742
- font-size: ${(props) => switchSize(props.size, "12px", "13px", "15px")};
1894
+ font-size: ${(props) =>
1895
+ switchSize(props.size, "12px", "13px", "15px")};
1743
1896
  }
1744
1897
  @media (max-width: 1600px) {
1745
- font-size: ${(props) => switchSize(props.size, "10px", "12px", "13px")};
1898
+ font-size: ${(props) =>
1899
+ switchSize(props.size, "10px", "12px", "13px")};
1746
1900
  }
1747
1901
  @media (max-width: 1280px) {
1748
1902
  font-size: ${(props) => switchSize(props.size, "8px", "8px", "10px")};
@@ -1809,7 +1963,7 @@ export const Button = styled.button`
1809
1963
  color: #000;
1810
1964
  outline: 0;
1811
1965
  cursor: pointer;
1812
- margin-top: 4px;
1966
+ margin-top: 4px;
1813
1967
  font-family: "Gordita-Regular";
1814
1968
  display: inline-flex;
1815
1969
  align-items: center;
@@ -1819,32 +1973,32 @@ export const Button = styled.button`
1819
1973
  overflow: hidden;
1820
1974
  // font-size: 12px;
1821
1975
 
1822
- @media (min-width: 2160px) {
1823
- font-size: ${(props) => switchSize(props.size, "16px", "18px", "20px")};
1824
- height: ${(props) => switchSize(props.size, "38px", "41px", "46px")};
1825
- }
1826
- @media (min-width: 2560px) {
1827
- font-size: ${(props) => switchSize(props.size, "18px", "20px", "24px")};
1828
- height: ${(props) => switchSize(props.size, "48px", "52px", "54px")};
1829
- }
1830
- @media (min-width: 3840px) {
1831
- font-size: ${(props) => switchSize(props.size, "28px", "32px", "36px")};
1832
- height: ${(props) => switchSize(props.size, "48px", "58px", "68px")};
1833
- border-radius: 16px;
1834
- }
1976
+ @media (min-width: 2160px) {
1977
+ font-size: ${(props) => switchSize(props.size, "16px", "18px", "20px")};
1978
+ height: ${(props) => switchSize(props.size, "38px", "41px", "46px")};
1979
+ }
1980
+ @media (min-width: 2560px) {
1981
+ font-size: ${(props) => switchSize(props.size, "18px", "20px", "24px")};
1982
+ height: ${(props) => switchSize(props.size, "48px", "52px", "54px")};
1983
+ }
1984
+ @media (min-width: 3840px) {
1985
+ font-size: ${(props) => switchSize(props.size, "28px", "32px", "36px")};
1986
+ height: ${(props) => switchSize(props.size, "48px", "58px", "68px")};
1987
+ border-radius: 16px;
1988
+ }
1835
1989
 
1836
- @media (max-width: 1920px) {
1837
- font-size: ${(props) => switchSize(props.size, "14px", "16px", "18px")};
1838
- height: ${(props) => switchSize(props.size, "32px", "35px", "40px")};
1839
- }
1840
- @media (max-width: 1600px) {
1841
- font-size: ${(props) => switchSize(props.size, "12px", "13px", "14px")};
1842
- height: ${(props) => switchSize(props.size, "32px", "35px", "40px")};
1843
- }
1844
- @media (max-width: 1280px) {
1845
- font-size: ${(props) => switchSize(props.size, "9px", "10px", "12px")};
1846
- height: ${(props) => switchSize(props.size, "32px", "35px", "40px")};
1847
- }
1990
+ @media (max-width: 1920px) {
1991
+ font-size: ${(props) => switchSize(props.size, "14px", "16px", "18px")};
1992
+ height: ${(props) => switchSize(props.size, "32px", "35px", "40px")};
1993
+ }
1994
+ @media (max-width: 1600px) {
1995
+ font-size: ${(props) => switchSize(props.size, "12px", "13px", "14px")};
1996
+ height: ${(props) => switchSize(props.size, "32px", "35px", "40px")};
1997
+ }
1998
+ @media (max-width: 1280px) {
1999
+ font-size: ${(props) => switchSize(props.size, "9px", "10px", "12px")};
2000
+ height: ${(props) => switchSize(props.size, "32px", "35px", "40px")};
2001
+ }
1848
2002
 
1849
2003
  :hover {
1850
2004
  background: #f0f7ff;
@@ -1904,7 +2058,7 @@ export const Button = styled.button`
1904
2058
  }
1905
2059
  `;
1906
2060
  const InputMessageChat = styled.div`
1907
- flex-shrink: 0;
2061
+ flex-shrink: 0;
1908
2062
  max-width: 100%;
1909
2063
  background: #fff;
1910
2064
  padding: 8px 16px 4px 16px;
@@ -1913,20 +2067,19 @@ const InputMessageChat = styled.div`
1913
2067
  border-bottom-left-radius: 10px;
1914
2068
  border-bottom-right-radius: 10px;
1915
2069
 
1916
- .widget_input_message_section{
2070
+ .widget_input_message_section {
1917
2071
  display: flex;
1918
2072
  width: 100%;
1919
2073
  align-items: center;
1920
2074
  justify-content: space-between;
1921
2075
  flex-wrap: nowrap;
1922
2076
 
1923
- .widget_input_message_box{
2077
+ .widget_input_message_box {
1924
2078
  width: 85%;
1925
2079
  flex-basis: 100%;
1926
-
1927
2080
 
1928
- textarea{
1929
- border-radius: 3px;
2081
+ textarea {
2082
+ border-radius: 3px;
1930
2083
  min-height: 24px;
1931
2084
  max-height: 60px;
1932
2085
  overflow: hidden auto !important;
@@ -1939,7 +2092,7 @@ const InputMessageChat = styled.div`
1939
2092
  cursor: text;
1940
2093
  border: none;
1941
2094
  background-color: transparent;
1942
- outline: none;
2095
+ outline: none;
1943
2096
  font-family: "Gordita-Regular";
1944
2097
  // font-size: 14px !important;
1945
2098
  // margin-top: 5px;
@@ -1947,107 +2100,156 @@ const InputMessageChat = styled.div`
1947
2100
 
1948
2101
  @media (min-width: 2160px) {
1949
2102
  height: ${(props) => switchSize(props.size, "28px", "40px", "52px")};
1950
- margin-top: ${(props) => switchSize(props.size, "8px", "12px", "14px")};
1951
- line-height: ${(props) => switchSize(props.size, "21px", "22px", "24px")};
1952
- font-size: ${(props) => switchSize(props.size, "20px !important", "21px !important", "22px !important")};
2103
+ margin-top: ${(props) =>
2104
+ switchSize(props.size, "8px", "12px", "14px")};
2105
+ line-height: ${(props) =>
2106
+ switchSize(props.size, "21px", "22px", "24px")};
2107
+ font-size: ${(props) =>
2108
+ switchSize(
2109
+ props.size,
2110
+ "20px !important",
2111
+ "21px !important",
2112
+ "22px !important"
2113
+ )};
1953
2114
  }
1954
2115
  @media (min-width: 2560px) {
1955
2116
  height: ${(props) => switchSize(props.size, "74px", "90px", "74px")};
1956
- font-size: ${(props) => switchSize(props.size, "24px !important", "24px !important", "24px !important")};
1957
- margin-top: ${(props) => switchSize(props.size, "12px", "6px", "18px")};
1958
- min-height: ${(props) => switchSize(props.size, "80px", "90px", "100px")};
1959
- max-height: ${(props) => switchSize(props.size, "70px", "80px", "70px")};
1960
- line-height: ${(props) => switchSize(props.size, "36px", "54px", "36px")};
2117
+ font-size: ${(props) =>
2118
+ switchSize(
2119
+ props.size,
2120
+ "24px !important",
2121
+ "24px !important",
2122
+ "24px !important"
2123
+ )};
2124
+ margin-top: ${(props) =>
2125
+ switchSize(props.size, "12px", "6px", "18px")};
2126
+ min-height: ${(props) =>
2127
+ switchSize(props.size, "80px", "90px", "100px")};
2128
+ max-height: ${(props) =>
2129
+ switchSize(props.size, "70px", "80px", "70px")};
2130
+ line-height: ${(props) =>
2131
+ switchSize(props.size, "36px", "54px", "36px")};
1961
2132
  }
1962
2133
  @media (min-width: 3840px) {
1963
- height: ${(props) => switchSize(props.size, "74px", "90px", "104px !important")};
1964
- min-height: ${(props) => switchSize(props.size, "74px", "90px", "110px !important")};
1965
- max-height: ${(props) => switchSize(props.size, "74px", "80px", "90px !important")};
1966
- margin-top: ${(props) => switchSize(props.size, "10px", "12px", "28px")};
1967
- line-height: ${(props) => switchSize(props.size, "48px", "54px", "58px")};
1968
- font-size: ${(props) => switchSize(props.size, "30px !important", "34px !important", "36px !important")};
2134
+ height: ${(props) =>
2135
+ switchSize(props.size, "74px", "90px", "104px !important")};
2136
+ min-height: ${(props) =>
2137
+ switchSize(props.size, "74px", "90px", "110px !important")};
2138
+ max-height: ${(props) =>
2139
+ switchSize(props.size, "74px", "80px", "90px !important")};
2140
+ margin-top: ${(props) =>
2141
+ switchSize(props.size, "10px", "12px", "28px")};
2142
+ line-height: ${(props) =>
2143
+ switchSize(props.size, "48px", "54px", "58px")};
2144
+ font-size: ${(props) =>
2145
+ switchSize(
2146
+ props.size,
2147
+ "30px !important",
2148
+ "34px !important",
2149
+ "36px !important"
2150
+ )};
1969
2151
  }
1970
2152
 
1971
2153
  @media (max-width: 1920px) {
1972
2154
  height: ${(props) => switchSize(props.size, "37px", "40px", "52px")};
1973
- margin-top: ${(props) => switchSize(props.size, "10px", "12px", "14px")};
1974
- line-height: ${(props) => switchSize(props.size, "20px", "22px", "24px")};
1975
- font-size: ${(props) => switchSize(props.size, "15px !important", "17px !important", "18px !important")};
2155
+ margin-top: ${(props) =>
2156
+ switchSize(props.size, "10px", "12px", "14px")};
2157
+ line-height: ${(props) =>
2158
+ switchSize(props.size, "20px", "22px", "24px")};
2159
+ font-size: ${(props) =>
2160
+ switchSize(
2161
+ props.size,
2162
+ "15px !important",
2163
+ "17px !important",
2164
+ "18px !important"
2165
+ )};
1976
2166
  }
1977
2167
  @media (max-width: 1680px) {
1978
2168
  height: ${(props) => switchSize(props.size, "30px", "34px", "37px")};
1979
2169
  margin-top: ${(props) => switchSize(props.size, "4px", "6px", "8px")};
1980
- font-size: ${(props) => switchSize(props.size, "12px !important", "15px !important", "15px !important")};
2170
+ font-size: ${(props) =>
2171
+ switchSize(
2172
+ props.size,
2173
+ "12px !important",
2174
+ "15px !important",
2175
+ "15px !important"
2176
+ )};
1981
2177
  }
1982
- @media (max-width: 1280px) {
1983
- font-size: ${(props) => switchSize(props.size, "9px !important", "10px !important", "12px !important")};
2178
+ @media (max-width: 1280px) {
2179
+ font-size: ${(props) =>
2180
+ switchSize(
2181
+ props.size,
2182
+ "9px !important",
2183
+ "10px !important",
2184
+ "12px !important"
2185
+ )};
1984
2186
  margin-top: ${(props) => switchSize(props.size, "4px", "6px", "8px")};
1985
2187
  }
1986
-
1987
- :empty{
2188
+
2189
+ :empty {
1988
2190
  overflow-y: hidden;
1989
2191
  }
1990
2192
 
1991
- :empty:after{
1992
- display: block;
1993
- content: attr(placeholder);
1994
- position: relative;
1995
- color: #333;
1996
- background-color: transparent;
1997
- cursor: text;
1998
- user-select: none;
1999
- line-height: 22px;
2000
- height: 18px;
2001
- font-size: 12px;
2002
- }
2193
+ :empty:after {
2194
+ display: block;
2195
+ content: attr(placeholder);
2196
+ position: relative;
2197
+ color: #333;
2198
+ background-color: transparent;
2199
+ cursor: text;
2200
+ user-select: none;
2201
+ line-height: 22px;
2202
+ height: 18px;
2203
+ font-size: 12px;
2204
+ }
2003
2205
  }
2004
2206
  }
2005
- }
2006
-
2007
- .send_icon_box {
2008
- position: relative;
2009
- display: flex;
2010
- gap: 0 8px;
2011
- align-items: center;
2012
- margin-top: 5px;
2013
-
2014
- @media (max-width: 1280px) {
2015
- gap: 0 6px;
2016
2207
  }
2017
2208
 
2018
- svg {
2019
- width: 18px;
2020
- height: 18px;
2021
- cursor: pointer;
2022
- fill: #666;
2209
+ .send_icon_box {
2210
+ position: relative;
2211
+ display: flex;
2212
+ gap: 0 8px;
2213
+ align-items: center;
2214
+ margin-top: 5px;
2023
2215
 
2024
- @media (min-width: 2160px) {
2025
- width: ${(props) => switchSize(props.size, "27px", "30px", "32px")};
2026
- height: ${(props) => switchSize(props.size, "25px", "28px", "30px")};
2027
- }
2028
- @media (min-width: 2560px) {
2029
- width: ${(props) => switchSize(props.size, "28px", "32px", "36px")};
2030
- height: ${(props) => switchSize(props.size, "26px", "30px", "32px")};
2031
- }
2032
- @media (min-width: 3840px) {
2033
- width: ${(props) => switchSize(props.size, "42px", "48px", "52px")};
2034
- height: ${(props) => switchSize(props.size, "38px", "44px", "48px")};
2216
+ @media (max-width: 1280px) {
2217
+ gap: 0 6px;
2035
2218
  }
2036
2219
 
2037
- @media (max-width: 1920px) {
2038
- width: ${(props) => switchSize(props.size, "21px", "24px", "26px")};
2039
- height: ${(props) => switchSize(props.size, "19px", "22px", "24px")};
2040
- }
2041
- @media (max-width: 1680px) {
2042
- width: ${(props) => switchSize(props.size, "18px", "21px", "22px")};
2043
- height: ${(props) => switchSize(props.size, "16px", "19px", "20px")};
2044
- }
2045
- @media (max-width: 1280px) {
2046
- width: ${(props) => switchSize(props.size, "14px", "16px", "18px")};
2047
- height: ${(props) => switchSize(props.size, "13px", "15px", "16px")};
2220
+ svg {
2221
+ width: 18px;
2222
+ height: 18px;
2223
+ cursor: pointer;
2224
+ fill: #666;
2225
+
2226
+ @media (min-width: 2160px) {
2227
+ width: ${(props) => switchSize(props.size, "27px", "30px", "32px")};
2228
+ height: ${(props) => switchSize(props.size, "25px", "28px", "30px")};
2229
+ }
2230
+ @media (min-width: 2560px) {
2231
+ width: ${(props) => switchSize(props.size, "28px", "32px", "36px")};
2232
+ height: ${(props) => switchSize(props.size, "26px", "30px", "32px")};
2233
+ }
2234
+ @media (min-width: 3840px) {
2235
+ width: ${(props) => switchSize(props.size, "42px", "48px", "52px")};
2236
+ height: ${(props) => switchSize(props.size, "38px", "44px", "48px")};
2237
+ }
2238
+
2239
+ @media (max-width: 1920px) {
2240
+ width: ${(props) => switchSize(props.size, "21px", "24px", "26px")};
2241
+ height: ${(props) => switchSize(props.size, "19px", "22px", "24px")};
2242
+ }
2243
+ @media (max-width: 1680px) {
2244
+ width: ${(props) => switchSize(props.size, "18px", "21px", "22px")};
2245
+ height: ${(props) => switchSize(props.size, "16px", "19px", "20px")};
2246
+ }
2247
+ @media (max-width: 1280px) {
2248
+ width: ${(props) => switchSize(props.size, "14px", "16px", "18px")};
2249
+ height: ${(props) => switchSize(props.size, "13px", "15px", "16px")};
2250
+ }
2048
2251
  }
2049
2252
  }
2050
- }
2051
2253
  `;
2052
2254
  const CancelButton = styled.div`
2053
2255
  position: fixed;
@@ -2073,8 +2275,7 @@ const CancelButton = styled.div`
2073
2275
  right: 0.8rem;
2074
2276
  }
2075
2277
 
2076
- .close_button{
2077
-
2278
+ .close_button {
2078
2279
  @media (min-width: 2160px) {
2079
2280
  width: 54px !important;
2080
2281
  height: 54px !important;
@@ -2095,7 +2296,7 @@ const CancelButton = styled.div`
2095
2296
 
2096
2297
  border: transparent !important;
2097
2298
 
2098
- svg{
2299
+ svg {
2099
2300
  @media (max-width: 1920px) {
2100
2301
  width: 18px !important;
2101
2302
  height: 18px !important;
@@ -2135,7 +2336,7 @@ const IconSpan = styled.span`
2135
2336
  height: 80px;
2136
2337
  }
2137
2338
 
2138
- label{
2339
+ label {
2139
2340
  position: absolute;
2140
2341
  background: #fff;
2141
2342
  padding: 2px 4px;
@@ -2146,7 +2347,7 @@ const IconSpan = styled.span`
2146
2347
  color: #555;
2147
2348
  min-width: 80px;
2148
2349
  text-align: center;
2149
- transition: .3s;
2350
+ transition: 0.3s;
2150
2351
  }
2151
2352
 
2152
2353
  svg {
@@ -2168,11 +2369,10 @@ const IconSpan = styled.span`
2168
2369
  }
2169
2370
  }
2170
2371
 
2171
- :hover label{
2372
+ :hover label {
2172
2373
  display: block;
2173
- transition: .3s;
2374
+ transition: 0.3s;
2174
2375
  }
2175
-
2176
2376
  `;
2177
2377
  const ButtonWrapper = styled.div`
2178
2378
  width: 100%;
@@ -2201,6 +2401,11 @@ const ButtonWrapper = styled.div`
2201
2401
  display: inline-flex;
2202
2402
  align-items: center;
2203
2403
  padding: 6px 12px;
2404
+
2405
+
2406
+ @media (max-width: 1280px) {
2407
+ min-width: auto;
2408
+ }
2204
2409
 
2205
2410
  text-overflow: ellipsis;
2206
2411
  white-space: nowrap !important;
@@ -2243,7 +2448,7 @@ const style = {
2243
2448
  overflowWrap: "break-word",
2244
2449
  textAlign: "start",
2245
2450
  height: "38px",
2246
- fontFamily: "Gordita-Regular"
2451
+ fontFamily: "Gordita-Regular",
2247
2452
  };
2248
2453
 
2249
2454
  const App = ({
@@ -2256,7 +2461,7 @@ const App = ({
2256
2461
  widget_size,
2257
2462
  style,
2258
2463
  }) => {
2259
- // console.log("APP :: style ::", { style });
2464
+ // ;
2260
2465
  const {
2261
2466
  connected,
2262
2467
  messages,
@@ -2274,8 +2479,6 @@ const App = ({
2274
2479
  newToken,
2275
2480
  userDetails,
2276
2481
  });
2277
- console.log("connected ::: ", { connected })
2278
-
2279
2482
  const [open, setOpen] = useState(openByDefault);
2280
2483
 
2281
2484
  const containerEl = useRef(null);
@@ -2289,8 +2492,6 @@ const App = ({
2289
2492
  return null;
2290
2493
  }
2291
2494
 
2292
- console.log("scale size provider", widget_size)
2293
-
2294
2495
  return (
2295
2496
  <ScaleSizeProvider widgetSize={widget_size}>
2296
2497
  <WidgetPreview size={widget_size} className="widget_preview">
@@ -2323,7 +2524,6 @@ const App = ({
2323
2524
  messages={messages}
2324
2525
  isTypingEnd={isTypingEnd}
2325
2526
  />
2326
-
2327
2527
  </ChatWrapper>
2328
2528
  ) : null}
2329
2529
  <WidgetMenu
@@ -2363,7 +2563,7 @@ const Footer = ({
2363
2563
  const [typing, setBotTyping] = useState(true);
2364
2564
 
2365
2565
  const send = () => {
2366
- // console.log("typedMessage in send", typedMessage)
2566
+ //
2367
2567
  if (typedMessage.trim()) {
2368
2568
  sendMessage(typedMessage);
2369
2569
  }
@@ -2383,7 +2583,6 @@ const Footer = ({
2383
2583
 
2384
2584
  const uploadTag = useRef(null);
2385
2585
  const textareaRef = useRef(null);
2386
- // console.log("TYped message", typedMessage)
2387
2586
 
2388
2587
  useEffect(() => {
2389
2588
  if (textareaRef.current) {
@@ -2391,7 +2590,7 @@ const Footer = ({
2391
2590
  autosize(textareaRef.current);
2392
2591
  }
2393
2592
  }, [textareaRef.current]);
2394
- const scale = useScaleContext()
2593
+ const scale = useScaleContext();
2395
2594
  return (
2396
2595
  <>
2397
2596
  {typing && (
@@ -2407,7 +2606,10 @@ const Footer = ({
2407
2606
  </span>
2408
2607
  </p>
2409
2608
  )}
2410
- <InputMessageChat size={scale.widgetSize} className="widget_input_message">
2609
+ <InputMessageChat
2610
+ size={scale.widgetSize}
2611
+ className="widget_input_message"
2612
+ >
2411
2613
  <div className="widget_input_message_section">
2412
2614
  <div className="widget_input_message_box">
2413
2615
  <textarea
@@ -2420,8 +2622,8 @@ const Footer = ({
2420
2622
  e.preventDefault();
2421
2623
  send();
2422
2624
  if (textareaRef.current) {
2423
- textareaRef.current.style.height = "30px"
2424
- textareaRef.current.style.overflow = "hidden"
2625
+ textareaRef.current.style.height = "30px";
2626
+ textareaRef.current.style.overflow = "hidden";
2425
2627
  }
2426
2628
  }
2427
2629
  }}
@@ -2430,8 +2632,7 @@ const Footer = ({
2430
2632
  rows={1}
2431
2633
  id="typemsg"
2432
2634
  wrap="hard"
2433
- >
2434
- </textarea>
2635
+ ></textarea>
2435
2636
  </div>
2436
2637
  <div className="send_icon_box">
2437
2638
  <span
@@ -2449,7 +2650,12 @@ const Footer = ({
2449
2650
  </svg>
2450
2651
  </span>
2451
2652
  <span onClick={() => send()}>
2452
- <input type="file" hidden ref={uploadTag} onChange={onFileUpload} />
2653
+ <input
2654
+ type="file"
2655
+ hidden
2656
+ ref={uploadTag}
2657
+ onChange={onFileUpload}
2658
+ />
2453
2659
 
2454
2660
  {/* <WidgetSendIcon /> */}
2455
2661
  <svg x="0px" y="0px" viewBox="0 0 32 32" xmlSpace="preserve">
@@ -2460,12 +2666,24 @@ const Footer = ({
2460
2666
  </span>
2461
2667
  </div>
2462
2668
  </div>
2463
- </InputMessageChat >
2669
+ </InputMessageChat>
2670
+
2671
+ <div className="widget_footer">
2672
+ <p>
2673
+ Powered by <span> PagerGPT</span>
2674
+ </p>
2675
+ </div>
2464
2676
  </>
2465
2677
  );
2466
2678
  };
2467
2679
 
2468
- const BodyWrapper = ({ messages, sendMessage, sendFeedback, widget, style }) => {
2680
+ const BodyWrapper = ({
2681
+ messages,
2682
+ sendMessage,
2683
+ sendFeedback,
2684
+ widget,
2685
+ style,
2686
+ }) => {
2469
2687
  // const isSmall = useMedia({ maxWidth: "520px" });
2470
2688
 
2471
2689
  // const containerEl = useRef(null);
@@ -2474,7 +2692,6 @@ const BodyWrapper = ({ messages, sendMessage, sendFeedback, widget, style }) =>
2474
2692
  // containerEl.current.scroll(0, containerEl.current.scrollHeight);
2475
2693
  // }
2476
2694
  // });
2477
- console.log("Service ::messages", messages)
2478
2695
  return (
2479
2696
  <>
2480
2697
  {/* <div
@@ -2502,7 +2719,15 @@ const BodyWrapper = ({ messages, sendMessage, sendFeedback, widget, style }) =>
2502
2719
  );
2503
2720
  };
2504
2721
 
2505
- const Message = ({ type, message, sendMessage, sendFeedback, widget, timestamp, style }) => {
2722
+ const Message = ({
2723
+ type,
2724
+ message,
2725
+ sendMessage,
2726
+ sendFeedback,
2727
+ widget,
2728
+ timestamp,
2729
+ style,
2730
+ }) => {
2506
2731
  switch (type) {
2507
2732
  case "received":
2508
2733
  return (
@@ -2537,32 +2762,32 @@ const ReceivedMessage = ({
2537
2762
  timestamp,
2538
2763
  style,
2539
2764
  }) => {
2540
- console.log("message ::: ", { message })
2541
- const scale = useScaleContext()
2765
+ const scale = useScaleContext();
2542
2766
  return message.output.map((output, key) => {
2543
- return <AssistantChat className="widget_chat_logs_box" key={key}>
2544
- <ChatAssistant
2545
- key={key}
2546
- output={output}
2547
- sendMessage={sendMessage}
2548
- sendFeedback={sendFeedback}
2549
- widget={widget}
2550
- timestamp={timestamp}
2551
- logoshape={style.logo_shape}
2552
- logosize={style.logo_size.size}
2553
- logoborder={style.logo_border}
2554
- event_id={message.event_id}
2555
- />
2556
- </AssistantChat>
2767
+ return (
2768
+ <AssistantChat className="widget_chat_logs_box" key={key}>
2769
+ <ChatAssistant
2770
+ key={key}
2771
+ output={output}
2772
+ sendMessage={sendMessage}
2773
+ sendFeedback={sendFeedback}
2774
+ widget={widget}
2775
+ timestamp={timestamp}
2776
+ logoshape={style.logo_shape}
2777
+ logosize={style.logo_size.size}
2778
+ logoborder={style.logo_border}
2779
+ event_id={message.event_id}
2780
+ />
2781
+ </AssistantChat>
2782
+ );
2557
2783
  });
2558
2784
  };
2559
2785
 
2560
2786
  const SentMessage = (props) => {
2561
- // console.log(props, "propsprops");
2562
2787
  return (
2563
2788
  <UserAssistant
2564
2789
  {...props}
2565
- // backg={props.colors.secondary_color}
2790
+ // backg={props.colors.secondary_color}
2566
2791
  />
2567
2792
  );
2568
2793
  };
@@ -2570,7 +2795,7 @@ const SentMessage = (props) => {
2570
2795
  const AdaptiveCard = (props) => {
2571
2796
  const { widget, timestamp, logoshape } = props;
2572
2797
  // const [hover, setHover] = useState(false);
2573
- const scale = useScaleContext()
2798
+ const scale = useScaleContext();
2574
2799
  return (
2575
2800
  <MessageBox size={scale.widgetSize} className="widget_chat_adaptiveCard">
2576
2801
  <LogoSize style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}>
@@ -2601,18 +2826,21 @@ const AdaptiveCardSingleSlide = ({
2601
2826
  adaptive_card: { title, logo, description, fields, buttons },
2602
2827
  logoshape,
2603
2828
  }) => {
2604
- const scale = useScaleContext()
2829
+ const scale = useScaleContext();
2605
2830
  return (
2606
2831
  <>
2607
2832
  <div className="adaptive_card_box">
2608
- <div className="tryit_cards_top_left" style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}>
2833
+ <div
2834
+ className="tryit_cards_top_left"
2835
+ style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}
2836
+ >
2609
2837
  {logo && <img src={logo} alt="logo" />}
2610
2838
  </div>
2611
2839
  <div className="tryit_cards_top_right">
2612
2840
  {/* <div className="timestamp">10:12 am</div> */}
2613
2841
  <AdaptiveHeader
2614
2842
  className="widget_chat_adaptiveHeader"
2615
- // color={props.colors.primary_color}
2843
+ // color={props.colors.primary_color}
2616
2844
  >
2617
2845
  <AssistantMd mdText={convertToMDText(title)}></AssistantMd>
2618
2846
  </AdaptiveHeader>
@@ -2631,15 +2859,11 @@ const AdaptiveCardSingleSlide = ({
2631
2859
  {fields.map(({ title, value }, key) => (
2632
2860
  <div className="tryit_ticket_details flex" key={key}>
2633
2861
  <h6>
2634
- <AssistantMd
2635
- mdText={convertToMDText(title)}
2636
- ></AssistantMd>{" "}
2862
+ <AssistantMd mdText={convertToMDText(title)}></AssistantMd>{" "}
2637
2863
  </h6>
2638
2864
  <p className="tryit_ticket_colun">:</p>
2639
2865
  <p>
2640
- <AssistantMd
2641
- mdText={convertToMDText(value)}
2642
- ></AssistantMd>
2866
+ <AssistantMd mdText={convertToMDText(value)}></AssistantMd>
2643
2867
  </p>
2644
2868
  </div>
2645
2869
  ))}
@@ -2648,7 +2872,10 @@ const AdaptiveCardSingleSlide = ({
2648
2872
  <div className="tryit_ticket_wrapper tryit_button_wrapper">
2649
2873
  {buttons.map(({ text, url }, key) => (
2650
2874
  <WidgetUpdateButton key={key}>
2651
- <a href={evalNormalOrJoinText(convertToMDText(url))} target="_blank">
2875
+ <a
2876
+ href={evalNormalOrJoinText(convertToMDText(url))}
2877
+ target="_blank"
2878
+ >
2652
2879
  <Button
2653
2880
  // onMouseEnter={() => setHover({ btn: 3 })}
2654
2881
  // onMouseLeave={() => setHover({ btn: 0 })}
@@ -2678,7 +2905,7 @@ const AdaptiveCardcarousalSlide = ({
2678
2905
  index,
2679
2906
  logoshape,
2680
2907
  }) => {
2681
- const scale = useScaleContext()
2908
+ const scale = useScaleContext();
2682
2909
  return (
2683
2910
  <div
2684
2911
  className="slide"
@@ -2686,14 +2913,17 @@ const AdaptiveCardcarousalSlide = ({
2686
2913
  >
2687
2914
  <div className="adaptive_card_box">
2688
2915
  {/* <div className="d-flex"> */}
2689
- <div className="tryit_cards_top_left" style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}>
2916
+ <div
2917
+ className="tryit_cards_top_left"
2918
+ style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}
2919
+ >
2690
2920
  {logo && <img src={logo} alt="logo" />}
2691
2921
  </div>
2692
2922
  <div className="tryit_cards_top_right">
2693
2923
  {/* <div className="timestamp">10:12 am</div> */}
2694
2924
  <AdaptiveHeader
2695
2925
  className="widget_chat_adaptiveHeader"
2696
- // color={props.colors.primary_color}
2926
+ // color={props.colors.primary_color}
2697
2927
  >
2698
2928
  <AssistantMd mdText={convertToMDText(title)}></AssistantMd>
2699
2929
  </AdaptiveHeader>
@@ -2713,15 +2943,11 @@ const AdaptiveCardcarousalSlide = ({
2713
2943
  {fields.map(({ title, value }, key) => (
2714
2944
  <div className="tryit_ticket_details flex" key={key}>
2715
2945
  <h6>
2716
- <AssistantMd
2717
- mdText={convertToMDText(title)}
2718
- ></AssistantMd>{" "}
2946
+ <AssistantMd mdText={convertToMDText(title)}></AssistantMd>{" "}
2719
2947
  </h6>
2720
2948
  <p className="tryit_ticket_colun">:</p>
2721
2949
  <p>
2722
- <AssistantMd
2723
- mdText={convertToMDText(value)}
2724
- ></AssistantMd>
2950
+ <AssistantMd mdText={convertToMDText(value)}></AssistantMd>
2725
2951
  </p>
2726
2952
  </div>
2727
2953
  ))}
@@ -2781,9 +3007,12 @@ const ReceivedCarousalOutput = ({
2781
3007
  };
2782
3008
  let slideRight = slide(addOne, minus);
2783
3009
  let slideLeft = slide(minusOne, add);
2784
- const scale = useScaleContext()
3010
+ const scale = useScaleContext();
2785
3011
  return (
2786
- <MessageBox size={scale.widgetSize} className="widget_chat_adaptiveCard slider">
3012
+ <MessageBox
3013
+ size={scale.widgetSize}
3014
+ className="widget_chat_adaptiveCard slider"
3015
+ >
2787
3016
  <LogoSize style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}>
2788
3017
  <img
2789
3018
  alt={"bot_chat_logo"}
@@ -2806,9 +3035,7 @@ const ReceivedCarousalOutput = ({
2806
3035
  alt={"left_arrow"}
2807
3036
  className="left_arrow"
2808
3037
  src="https://workativ-asssistant-widget-images.s3.amazonaws.com/adaptive_card_arrow.svg"
2809
- style={
2810
- activeSlide.index == 0 ? { visibility: "hidden" } : null
2811
- }
3038
+ style={activeSlide.index == 0 ? { visibility: "hidden" } : null}
2812
3039
  />
2813
3040
  </div>
2814
3041
  <div className="carousal_box_section">
@@ -2828,7 +3055,6 @@ const ReceivedCarousalOutput = ({
2828
3055
  />
2829
3056
  ))}
2830
3057
  </div>
2831
-
2832
3058
  </div>
2833
3059
  </div>
2834
3060
  {/* <div className="widget_arrows">
@@ -2854,18 +3080,23 @@ const ReceivedCarousalOutput = ({
2854
3080
  };
2855
3081
 
2856
3082
  const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
2857
- // ßconsole.log(widget, "widget");
2858
- const scale = useScaleContext()
3083
+ const scale = useScaleContext();
2859
3084
  return (
2860
3085
  <ChatHeader
2861
3086
  className="widget_chat_top"
2862
3087
  style={{
2863
- backgroundImage: `url(https://workativ-asssistant-widget-images.s3.amazonaws.com/widget_header_bg.svg)`,
3088
+ // backgroundImage: `url(https://workativ-asssistant-widget-images.s3.amazonaws.com/widget_header_bg.svg)`,
2864
3089
  backgroundColor: widget ? widget.accent_color : "#FFD15C",
2865
3090
  }}
2866
3091
  size={scale.widgetSize}
2867
3092
  >
2868
- <LogoSize style={{ right: 6, position: "relative", borderRadius: logoshape == "box" ? '5%' : '50%' }}>
3093
+ <LogoSize
3094
+ style={{
3095
+ right: 6,
3096
+ position: "relative",
3097
+ borderRadius: logoshape == "box" ? "5%" : "50%",
3098
+ }}
3099
+ >
2869
3100
  <img
2870
3101
  title={"logo"}
2871
3102
  src={
@@ -2876,11 +3107,25 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
2876
3107
  </LogoSize>
2877
3108
  <ContentHeader>
2878
3109
  <ContentHeaderLeft>
2879
- <FormHeader style={{ color: widget.primary_color }} size={scale.widgetSize}>{widget && widget.name}</FormHeader>
2880
- <Paragraph style={{ color: widget.primary_color }} size={scale.widgetSize}>{widget && widget.description}</Paragraph>
3110
+ <FormHeader
3111
+ style={{ color: widget.primary_color }}
3112
+ size={scale.widgetSize}
3113
+ >
3114
+ {widget && widget.name}
3115
+ </FormHeader>
3116
+ <Paragraph
3117
+ style={{ color: widget.primary_color }}
3118
+ size={scale.widgetSize}
3119
+ >
3120
+ {widget && widget.description}
3121
+ </Paragraph>
2881
3122
  </ContentHeaderLeft>
2882
3123
  <ContentHeaderRight size={scale.widgetSize}>
2883
- <IconSpan className="relative restart" onClick={restart} style={{ fill: widget.primary_color }}>
3124
+ <IconSpan
3125
+ className="relative restart"
3126
+ onClick={restart}
3127
+ style={{ fill: widget.primary_color }}
3128
+ >
2884
3129
  <svg
2885
3130
  xmlns="http://www.w3.org/2000/svg"
2886
3131
  x="0px"
@@ -2897,11 +3142,13 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
2897
3142
  transform="translate(11.158)"
2898
3143
  />
2899
3144
  </svg>
2900
- <label className="restart_content">
2901
- Restart Chat
2902
- </label>
3145
+ <label className="restart_content">Restart Chat</label>
2903
3146
  </IconSpan>
2904
- <IconSpan className="relative close_section" onClick={exit} style={{ fill: widget.primary_color }}>
3147
+ <IconSpan
3148
+ className="relative close_section"
3149
+ onClick={exit}
3150
+ style={{ fill: widget.primary_color }}
3151
+ >
2905
3152
  <svg
2906
3153
  xmlns="http://www.w3.org/2000/svg"
2907
3154
  x="0px"
@@ -2924,36 +3171,47 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
2924
3171
  );
2925
3172
  };
2926
3173
 
2927
- const AiResponse = ({ output, sendFeedback, logoshape, widget, timestamp, event_id }) => {
3174
+ const AiResponse = ({
3175
+ output,
3176
+ sendFeedback,
3177
+ logoshape,
3178
+ widget,
3179
+ timestamp,
3180
+ event_id,
3181
+ sendMessage,
3182
+ }) => {
2928
3183
  const scale = useScaleContext();
2929
- return <>
2930
- <MessageBox size={scale.widgetSize} className="widget_chat_logs">
2931
- <LogoSize style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}>
2932
- <img
2933
- alt={"logo"}
2934
- src={
2935
- (widget && widget.logo_url) ||
2936
- "https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
2937
- }
2938
- />
2939
- </LogoSize>
2940
- <ChatMessage size={scale.widgetSize}>
2941
- <div className="flex widget_title chat_assisitant">
2942
- <h6>{widget && widget.name}</h6>
2943
- <div className="timestamp">{formatTimeAMPM(timestamp)}</div>
2944
- </div>
2945
- <div>
2946
- <AssistantMd mdText={output.text}></AssistantMd>
2947
- </div>
2948
- </ChatMessage>
2949
- </MessageBox>
2950
- <AiFeedbackButtonsWrapper
2951
- options={output.buttons}
2952
- sendFeedback={sendFeedback}
2953
- event_id={event_id}
2954
- />
2955
- </>
2956
- }
3184
+ return (
3185
+ <>
3186
+ <MessageBox size={scale.widgetSize} className="widget_chat_logs">
3187
+ <LogoSize style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}>
3188
+ <img
3189
+ alt={"logo"}
3190
+ src={
3191
+ (widget && widget.logo_url) ||
3192
+ "https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
3193
+ }
3194
+ />
3195
+ </LogoSize>
3196
+ <ChatMessage size={scale.widgetSize}>
3197
+ <div className="flex widget_title chat_assisitant">
3198
+ <h6>{widget && widget.name}</h6>
3199
+ <div className="timestamp">{formatTimeAMPM(timestamp)}</div>
3200
+ </div>
3201
+ <div>
3202
+ <AssistantMd mdText={output.text}></AssistantMd>
3203
+ </div>
3204
+ </ChatMessage>
3205
+ </MessageBox>
3206
+ <AiFeedbackButtonsWrapper
3207
+ options={output.buttons}
3208
+ sendFeedback={sendFeedback}
3209
+ sendMessage={sendMessage}
3210
+ event_id={event_id}
3211
+ />
3212
+ </>
3213
+ );
3214
+ };
2957
3215
 
2958
3216
  const ChatAssistant = ({
2959
3217
  output: { type, ...outputStruct },
@@ -2964,13 +3222,22 @@ const ChatAssistant = ({
2964
3222
  logoshape,
2965
3223
  logosize,
2966
3224
  logoborder,
2967
- event_id
3225
+ event_id,
2968
3226
  }) => {
2969
3227
  // const [hover, setHover] = useState(false);
2970
- // console.log(output, "output");
2971
3228
  const scale = useScaleContext();
2972
3229
  if (outputStruct.response_type === "ai_response") {
2973
- return <AiResponse output={outputStruct} timestamp={timestamp} widget={widget} logoshape={logoshape} sendFeedback={sendFeedback} event_id={event_id} />
3230
+ return (
3231
+ <AiResponse
3232
+ output={outputStruct}
3233
+ sendMessage={sendMessage}
3234
+ timestamp={timestamp}
3235
+ widget={widget}
3236
+ logoshape={logoshape}
3237
+ sendFeedback={sendFeedback}
3238
+ event_id={event_id}
3239
+ />
3240
+ );
2974
3241
  }
2975
3242
  return (
2976
3243
  <>
@@ -2995,9 +3262,7 @@ const ChatAssistant = ({
2995
3262
  </div>
2996
3263
  ) : (
2997
3264
  <div>
2998
- <AssistantMd
2999
- mdText={outputStruct.value}
3000
- ></AssistantMd>
3265
+ <AssistantMd mdText={outputStruct.value}></AssistantMd>
3001
3266
  </div>
3002
3267
  )}
3003
3268
  </ChatMessage>
@@ -3015,7 +3280,7 @@ const ChatAssistant = ({
3015
3280
 
3016
3281
  const WidgetBtn = ({ sendMessage, widget, label, value }) => {
3017
3282
  // const [hovered, setHovered] = useState(false);
3018
- const scale = useScaleContext()
3283
+ const scale = useScaleContext();
3019
3284
  return (
3020
3285
  <WidgetUpdateButton>
3021
3286
  <Button
@@ -3034,9 +3299,15 @@ const WidgetBtn = ({ sendMessage, widget, label, value }) => {
3034
3299
  );
3035
3300
  };
3036
3301
 
3037
- const FeedbackBtn = ({ label, action, sendFeedback, event_id }) => {
3302
+ const FeedbackBtn = ({
3303
+ label,
3304
+ action,
3305
+ sendFeedback,
3306
+ sendMessage,
3307
+ event_id,
3308
+ }) => {
3038
3309
  // const [hovered, setHovered] = useState(false);
3039
- const scale = useScaleContext()
3310
+ const scale = useScaleContext();
3040
3311
  return (
3041
3312
  <WidgetUpdateButton>
3042
3313
  <Button
@@ -3044,7 +3315,16 @@ const FeedbackBtn = ({ label, action, sendFeedback, event_id }) => {
3044
3315
  // onMouseLeave={() => setHovered(false)}
3045
3316
  type="button"
3046
3317
  onClick={() => {
3047
- sendFeedback(action.contract_action.action === "send_satisfied_feedback" ? "satisfied" : "not_satisfied", event_id);
3318
+ if (action.contract_action) {
3319
+ sendFeedback(
3320
+ action.contract_action.action === "send_satisfied_feedback"
3321
+ ? "satisfied"
3322
+ : "not_satisfied",
3323
+ event_id
3324
+ );
3325
+ } else if (action.send_rly) {
3326
+ sendMessage(action.send_rly);
3327
+ }
3048
3328
  }}
3049
3329
  className="widget_btn"
3050
3330
  size={scale.widgetSize}
@@ -3053,9 +3333,14 @@ const FeedbackBtn = ({ label, action, sendFeedback, event_id }) => {
3053
3333
  </Button>
3054
3334
  </WidgetUpdateButton>
3055
3335
  );
3056
- }
3336
+ };
3057
3337
 
3058
- const AiFeedbackButtonsWrapper = ({ options, sendFeedback, event_id }) => {
3338
+ const AiFeedbackButtonsWrapper = ({
3339
+ options,
3340
+ sendFeedback,
3341
+ sendMessage,
3342
+ event_id,
3343
+ }) => {
3059
3344
  return (
3060
3345
  <ButtonWrapper>
3061
3346
  {options.map(({ label, action }, key) => (
@@ -3064,12 +3349,13 @@ const AiFeedbackButtonsWrapper = ({ options, sendFeedback, event_id }) => {
3064
3349
  action={action}
3065
3350
  key={key}
3066
3351
  sendFeedback={sendFeedback}
3352
+ sendMessage={sendMessage}
3067
3353
  event_id={event_id}
3068
3354
  ></FeedbackBtn>
3069
3355
  ))}
3070
3356
  </ButtonWrapper>
3071
3357
  );
3072
- }
3358
+ };
3073
3359
 
3074
3360
  const ButtonsWrapper = ({ options, sendMessage, widget }) => {
3075
3361
  return (
@@ -3126,22 +3412,33 @@ const UserAssistant = ({
3126
3412
  logosize,
3127
3413
  logoborder,
3128
3414
  }) => {
3129
- const scale = useScaleContext()
3415
+ const scale = useScaleContext();
3130
3416
  return (
3131
3417
  <UserChat size={scale.widgetSize}>
3132
3418
  <MessageBox size={scale.widgetSize}>
3133
- <ChatMessage size={scale.widgetSize}>
3134
- <div className="flex widget_title user_chat">
3419
+ <ChatMessage
3420
+ size={scale.widgetSize}
3421
+ style={{ background: widget ? widget.secondary_color : "#fff" }}
3422
+ >
3423
+ <div
3424
+ className="flex widget_title user_chat"
3425
+ style={{ color: "#fff" }}
3426
+ >
3135
3427
  <h6>{SYS_FirstName}</h6>
3136
- <div className="timestamp">{formatTimeAMPM(timestamp)}</div>
3428
+ <div className="timestamp" style={{ color: "#fff", gap: 0 }}>
3429
+ {formatTimeAMPM(timestamp)}
3430
+ </div>
3137
3431
  </div>
3138
- <div>
3432
+ <div style={{ color: "#fff" }}>
3139
3433
  {(SYS_UPLOADED_FILE && "File uploaded") || (
3140
3434
  <DisplayURL text={input.value} />
3141
3435
  )}
3142
3436
  </div>
3143
3437
  </ChatMessage>
3144
- <LogoSize size={scale.widgetSize} style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}>
3438
+ <LogoSize
3439
+ size={scale.widgetSize}
3440
+ style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}
3441
+ >
3145
3442
  {/* <UserIconAnalytics /> */}
3146
3443
  <svg
3147
3444
  id="Layer_1"
@@ -3185,19 +3482,19 @@ const WidgetMenu = ({
3185
3482
  const scaleContext = useScaleContext();
3186
3483
  const style = {
3187
3484
  backgroundColor: widget ? widget.accent_color : "#FFD15C",
3188
- borderRadius: logoshape == "box" ? '0%' : '50%', border: `1px solid ${logoborder.color}`,
3485
+ borderRadius: logoshape == "box" ? "0%" : "50%",
3486
+ border: `1px solid ${logoborder.color}`,
3189
3487
  height: logosize * 12 + 62,
3190
3488
  width: logosize * 12 + 62,
3191
3489
  transform: `scale(${scaleContext.scale})`,
3192
3490
  fill: widget.primary_color,
3193
3491
  };
3194
3492
 
3195
- console.log("WidgetMenu", scaleContext)
3196
-
3197
3493
  return (
3198
3494
  <CancelButton className="widget_cancel_button">
3199
3495
  {open ? (
3200
- <IconSpan className="close_button"
3496
+ <IconSpan
3497
+ className="close_button"
3201
3498
  style={style}
3202
3499
  // backg={props.backg}
3203
3500
  // color={props.color}
@@ -3216,10 +3513,7 @@ const WidgetMenu = ({
3216
3513
  </svg>
3217
3514
  </IconSpan>
3218
3515
  ) : (
3219
- <IconSpan
3220
- style={style}
3221
- onClick={onClick}
3222
- >
3516
+ <IconSpan style={style} onClick={onClick}>
3223
3517
  <img
3224
3518
  src={
3225
3519
  (widget && widget.logo_url) ||
@@ -3228,14 +3522,14 @@ const WidgetMenu = ({
3228
3522
  style={
3229
3523
  logoshape == "box"
3230
3524
  ? {
3231
- width: "100%",
3232
- height: "100%",
3233
- boxShadow: "none",
3234
- }
3525
+ width: "100%",
3526
+ height: "100%",
3527
+ boxShadow: "none",
3528
+ }
3235
3529
  : {
3236
- width: "86px",
3237
- height: "86px",
3238
- }
3530
+ width: "86px",
3531
+ height: "86px",
3532
+ }
3239
3533
  }
3240
3534
  />
3241
3535
  </IconSpan>