pager-widget 0.0.4 → 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 +781 -495
  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 -264
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
  }
@@ -240,26 +240,68 @@ const ChatWrapper = styled.div`
240
240
  const ChatContentWrapper = styled.div`
241
241
 
242
242
  @media (min-width: 2160px) {
243
- 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
+ )};
244
250
  }
245
251
  @media (min-width: 2560px) {
246
- 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
+ )};
247
259
  }
248
260
  @media (min-width: 3840px) {
249
- 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
+ )};
250
268
  }
251
269
 
252
270
  @media (max-width: 1920px) {
253
- 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
+ )};
254
278
  }
255
279
  @media (max-width: 1680px) {
256
- 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
+ )};
257
287
  }
258
288
  @media (max-width: 1440px) {
259
- 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
+ )};
260
296
  }
261
297
  @media (max-width: 1280px) {
262
- 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
+ )};
263
305
  }
264
306
  height: calc(100vh - 28vh);
265
307
  width: 100%;
@@ -270,10 +312,10 @@ const ChatContentWrapper = styled.div`
270
312
  background: #F6F8FA;
271
313
  overflow-x: hidden;
272
314
  box-sizing: border-box;
273
- background-position: center;
274
- background-size: contain;
275
- background-image: url("https://workativ-asssistant-widget-images.s3.amazonaws.com/widget_bg.svg");
276
- 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;
277
319
  }
278
320
  `;
279
321
  const AssistantChat = styled.div`
@@ -287,10 +329,8 @@ const AssistantChat = styled.div`
287
329
  margin-bottom: 12px;
288
330
 
289
331
  @media (min-width: 2160px) {
290
-
291
332
  }
292
333
  @media (min-width: 2560px) {
293
-
294
334
  }
295
335
  @media (min-width: 3840px) {
296
336
  margin-bottom: 30px;
@@ -313,7 +353,7 @@ const AssistantChat = styled.div`
313
353
  // font-size: 10px;
314
354
  // font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
315
355
  // }
316
-
356
+
317
357
  // .tryit_cards h4 {
318
358
  // font-size: 13px;
319
359
  // margin-top: 10px;
@@ -345,7 +385,7 @@ const AssistantChat = styled.div`
345
385
  // margin-left: 12px;
346
386
  // margin-top: 12px;
347
387
  // border: none !important;
348
-
388
+
349
389
  // .adaptive_tail_icon {
350
390
  // position: absolute;
351
391
  // }
@@ -380,7 +420,6 @@ const AssistantChat = styled.div`
380
420
  // background: #fff;
381
421
  // border-radius: 0px 10px 10px 10px;
382
422
  // float: left;
383
-
384
423
 
385
424
  // .tryit_ticket_details_wrapper{
386
425
  // grid-template-columns: auto;
@@ -399,13 +438,13 @@ const AssistantChat = styled.div`
399
438
  // bottom: 0px;
400
439
  // }
401
440
  // }
402
-
441
+
403
442
  // .widget_title{
404
443
  // gap: 0 8px;
405
444
  // align-items: center;
406
445
  // margin-bottom: 2px;
407
446
  // display: flex;
408
-
447
+
409
448
  // h6{
410
449
  // font-size: 13px;
411
450
  // font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
@@ -423,7 +462,7 @@ const AssistantChat = styled.div`
423
462
  // border-bottom-left-radius: 12px;
424
463
  // border: 1px solid #c8c8c8;
425
464
  // }
426
-
465
+
427
466
  // .tryit_ticket_wrapper.tryit_button_wrapper {
428
467
  // padding-top: 0px;
429
468
  // display: flex;
@@ -512,7 +551,7 @@ const ChatHeader = styled.div`
512
551
  display: flex;
513
552
  align-items: center;
514
553
  padding: 0 12px 0 22px;
515
- background: #FFD15C;
554
+ background: #ffd15c;
516
555
  border-top-left-radius: 10px;
517
556
  border-top-right-radius: 10px;
518
557
  background-position: right;
@@ -520,32 +559,32 @@ const ChatHeader = styled.div`
520
559
  justify-content: space-between;
521
560
  box-sizing: border-box;
522
561
 
523
- @media (min-width: 2160px) {
524
- height: ${(props) => switchSize(props.size, "86px", "96px", "110px")};
525
- }
526
- @media (min-width: 2560px) {
527
- height: ${(props) => switchSize(props.size, "120px", "138px", "152px")};
528
- gap: 0px 10px;
529
- padding: 0 22px 0 26px;
530
- }
531
- @media (min-width: 3840px) {
532
- height: ${(props) => switchSize(props.size, "180px", "198px", "224px")};
533
- padding: 0 24px 0 28px;
534
- border-top-left-radius: 20px;
535
- border-top-right-radius: 20px;
536
- }
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
+ }
537
576
 
538
- @media (max-width: 1920px) {
539
- height: ${(props) => switchSize(props.size, "90px", "99px", "112px")};
540
- }
541
- @media (max-width: 1680px) {
542
- height: ${(props) => switchSize(props.size, "76px", "89px", "92px")};
543
- }
544
- @media (max-width: 1280px) {
545
- height: ${(props) => switchSize(props.size, "60px", "69px", "76px")};
546
- }
547
-
548
- ${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} {
549
588
  @media (min-width: 2160px) {
550
589
  width: ${(props) => switchSize(props.size, "52px", "56px", "60px")};
551
590
  height: ${(props) => switchSize(props.size, "52px", "58px", "60px")};
@@ -572,7 +611,7 @@ const ChatHeader = styled.div`
572
611
  height: ${(props) => switchSize(props.size, "32px", "36px", "40px")};
573
612
  }
574
613
 
575
- img{
614
+ img {
576
615
  @media (min-width: 2160px) {
577
616
  width: ${(props) => switchSize(props.size, "46px", "52px", "54px")};
578
617
  height: ${(props) => switchSize(props.size, "46px", "52px", "53px")};
@@ -615,7 +654,7 @@ const ContentHeaderRight = styled.div`
615
654
  align-items: center;
616
655
  span:first-child {
617
656
  margin-right: 6px;
618
-
657
+
619
658
  @media (min-width: 3840px) {
620
659
  margin-right: 12px;
621
660
  }
@@ -626,36 +665,35 @@ const ContentHeaderRight = styled.div`
626
665
  margin-right: 12px;
627
666
  }
628
667
  }
629
- .restart, .close_section{
630
-
631
- @media (min-width: 2160px) {
632
- width: ${(props) => switchSize(props.size, "30px", "32px", "36px")};
633
- height: ${(props) => switchSize(props.size, "30px", "32px", "36px")};
634
- }
635
- @media (min-width: 2560px) {
636
- width: ${(props) => switchSize(props.size, "36px", "40px", "44px")};
637
- height: ${(props) => switchSize(props.size, "36px", "40px", "44px")};
638
- }
639
- @media (min-width: 3840px) {
640
- width: ${(props) => switchSize(props.size, "52px", "58px", "66px")};
641
- height: ${(props) => switchSize(props.size, "53px", "58px", "66px")};
642
- }
643
-
644
- @media (max-width: 1920px) {
645
- width: ${(props) => switchSize(props.size, "26px", "29px", "33px")};
646
- height: ${(props) => switchSize(props.size, "26px", "29px", "33px")};
647
- }
648
- @media (max-width: 1680px) {
649
- width: ${(props) => switchSize(props.size, "22px", "26px", "28px")};
650
- height: ${(props) => switchSize(props.size, "22px", "26px", "28px")};
651
- }
652
- @media (max-width: 1280px) {
653
- width: ${(props) => switchSize(props.size, "18px", "20px", "22px")};
654
- height: ${(props) => switchSize(props.size, "18px", "20px", "22px")};
655
- }
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
+ }
656
682
 
657
- 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
+ }
658
695
 
696
+ svg {
659
697
  @media (min-width: 2160px) {
660
698
  width: ${(props) => switchSize(props.size, "26px", "30px", "34px")};
661
699
  height: ${(props) => switchSize(props.size, "26px", "30px", "34px")};
@@ -681,11 +719,11 @@ const ContentHeaderRight = styled.div`
681
719
  width: ${(props) => switchSize(props.size, "18px", "20px", "22px")};
682
720
  height: ${(props) => switchSize(props.size, "18px", "20px", "22px")};
683
721
  }
684
- }
722
+ }
685
723
  }
686
724
 
687
- .close_section{
688
- label{
725
+ .close_section {
726
+ label {
689
727
  right: -8px;
690
728
  min-width: 65px;
691
729
  }
@@ -768,7 +806,7 @@ const ChatMessage = styled.div`
768
806
  padding: 12px 10px 8px 16px !important;
769
807
  margin-left: 14px;
770
808
  margin-top: 14px;
771
- font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
809
+ font-family: "Gordita-Regular", "Open Sans", sans-serif;
772
810
  white-space: pre-wrap;
773
811
  box-sizing: border-box;
774
812
  word-break: break-word;
@@ -780,43 +818,79 @@ const ChatMessage = styled.div`
780
818
  border-radius: 0px 10px 10px 10px;
781
819
  // font-size: 13px;
782
820
 
783
- @media (min-width: 2160px) {
784
- font-size: ${(props) => switchSize(props.size, "17px", "19px", "22px")};
785
- padding: ${(props) => switchSize(props.size, "12px 10px 8px 16px !important", "12px 10px 8px 28px !important", "12px 10px 8px 20px !important")};
786
- margin-left: ${(props) => switchSize(props.size, "22px", "22px", "26px")};
787
- margin-top: ${(props) => switchSize(props.size, "32px", "34px", "40px")};
788
- }
789
- @media (min-width: 2560px) {
790
- font-size: ${(props) => switchSize(props.size, "20px", "22px", "26px")};
791
- padding: ${(props) => switchSize(props.size, "20px 28px 16px 16px !important", "20px 28px 16px 26px !important", "20px 28px 16px 26px !important")};
792
- margin-left: ${(props) => switchSize(props.size, "22px", "24px", "30px")};
793
- margin-top: ${(props) => switchSize(props.size, "30px", "36px", "45px")};
794
- }
795
- @media (min-width: 3840px) {
796
- font-size: ${(props) => switchSize(props.size, "30px", "34px", "36px")};
797
- padding: ${(props) => switchSize(props.size, "24px 38px 16px 42px !important", "24px 38px 16px 42px !important", "24px 38px 16px 42px !important")};
798
- margin-left: ${(props) => switchSize(props.size, "26px", "30px", "36px")};
799
- margin-top: ${(props) => switchSize(props.size, "45px", "50px", "60px")};
800
- }
801
-
802
- @media (max-width: 1920px) {
803
- font-size: ${(props) => switchSize(props.size, "15px", "17px", "18px")};
804
- padding: ${(props) => switchSize(props.size, "12px 10px 8px 28px !important", "12px 10px 8px 28px !important", "12px 10px 8px 20px !important")};
805
- margin-left: ${(props) => switchSize(props.size, "22px", "22px", "22px")};
806
- margin-top: ${(props) => switchSize(props.size, "32px", "34px", "34px")};
807
- }
808
- @media (max-width: 1680px) {
809
- font-size: ${(props) => switchSize(props.size, "13px", "15px", "15px")};
810
- padding: ${(props) => switchSize(props.size, "12px 10px 8px 18px !important", "12px 10px 8px 20px !important", "12px 10px 8px 22px !important")};
811
- margin-left: ${(props) => switchSize(props.size, "14px", "16px", "18px")};
812
- margin-top: ${(props) => switchSize(props.size, "26px", "26px", "26px")};
813
- }
814
- @media (max-width: 1280px) {
815
- font-size: ${(props) => switchSize(props.size, "10px", "11px", "13px")};
816
- padding: ${(props) => switchSize(props.size, "12px 10px 8px 16px !important", "12px 10px 8px 16px !important", "12px 10px 8px 16px !important")};
817
- margin-left: ${(props) => switchSize(props.size, "16px", "16px", "16px")};
818
- margin-top: ${(props) => switchSize(props.size, "22px", "22px", "22px")};
819
- }
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
+ }
820
894
 
821
895
  svg {
822
896
  width: 6px;
@@ -835,7 +909,7 @@ const ChatMessage = styled.div`
835
909
  .timestamp {
836
910
  color: #888;
837
911
  // font-size: 10px;
838
- font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
912
+ font-family: "Gordita-Regular", "Open Sans", sans-serif;
839
913
  position: relative;
840
914
  bottom: 0px;
841
915
  text-transform: uppercase;
@@ -854,27 +928,26 @@ const ChatMessage = styled.div`
854
928
  font-size: ${(props) => switchSize(props.size, "12px", "13px", "15px")};
855
929
  }
856
930
  @media (max-width: 1680px) {
857
- font-size: ${(props) => switchSize(props.size, "10px", "12px", "13px")};
931
+ font-size: ${(props) => switchSize(props.size, "10px", "12px", "13px")};
858
932
  }
859
933
  @media (max-width: 1280px) {
860
- font-size: ${(props) => switchSize(props.size, "7px", "8px", "10px")};
934
+ font-size: ${(props) => switchSize(props.size, "7px", "8px", "10px")};
861
935
  }
862
936
  }
863
937
 
864
- .widget_title{
938
+ .widget_title {
865
939
  gap: 0 8px;
866
940
  align-items: center;
867
941
  margin-bottom: 2px;
868
942
  display: flex;
869
943
  margin-bottom: 4px;
870
944
 
871
- h6{
945
+ h6 {
872
946
  // font-size: 13px;
873
- font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
947
+ font-family: "Gordita-Medium", "Open Sans", sans-serif;
874
948
  color: #333;
875
949
  margin: 0;
876
950
 
877
-
878
951
  @media (min-width: 2160px) {
879
952
  font-size: ${(props) => switchSize(props.size, "16px", "18px", "22px")};
880
953
  }
@@ -889,55 +962,55 @@ const ChatMessage = styled.div`
889
962
  font-size: ${(props) => switchSize(props.size, "14px", "15px", "16px")};
890
963
  }
891
964
  @media (max-width: 1680px) {
892
- font-size: ${(props) => switchSize(props.size, "12px", "14px", "14px")};
965
+ font-size: ${(props) => switchSize(props.size, "12px", "14px", "14px")};
893
966
  }
894
967
  @media (max-width: 1280px) {
895
- font-size: ${(props) => switchSize(props.size, "8px", "9px", "12px")};
968
+ font-size: ${(props) => switchSize(props.size, "8px", "9px", "12px")};
896
969
  }
897
970
  }
898
971
  }
899
972
 
900
- .chatAssistant_one{
901
- h6{
973
+ .chatAssistant_one {
974
+ h6 {
902
975
  font-size: 16px;
903
- font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
976
+ font-family: "Gordita-Regular", "Open Sans", sans-serif;
904
977
  color: #555;
905
978
  margin: 16px 0 0;
906
979
  font-style: italic;
907
980
  }
908
- ol{
981
+ ol {
909
982
  margin: 0;
910
983
  padding: 4px 0 0 2px;
911
984
  list-style: none;
912
- li{
913
- color: #1D48EB;
985
+ li {
986
+ color: #1d48eb;
914
987
  font-size: 16px;
915
- font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
988
+ font-family: "Gordita-Regular", "Open Sans", sans-serif;
916
989
  margin-bottom: 4px;
917
- a{
990
+ a {
918
991
  text-decoration: none;
919
992
  cursor: pointer;
920
- :hover{
993
+ :hover {
921
994
  text-decoration: underline;
922
995
  }
923
996
  }
924
997
  }
925
998
  }
926
- p{
999
+ p {
927
1000
  margin: 6px 0 0;
928
1001
  }
929
1002
  }
930
1003
 
931
- .wid_message{
932
- font-size: 16px;
933
- font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
1004
+ .wid_message {
1005
+ font-size: 16px;
1006
+ font-family: "Gordita-Regular", "Open Sans", sans-serif;
934
1007
  }
935
1008
  `;
936
1009
  const MessageBox = styled.div`
937
1010
  width: 100%;
938
1011
  float: left;
939
1012
  display: flex;
940
-
1013
+
941
1014
  ${LogoSize} {
942
1015
  position: absolute;
943
1016
  z-index: 1;
@@ -970,7 +1043,7 @@ const MessageBox = styled.div`
970
1043
  width: ${(props) => switchSize(props.size, "20px", "24px", "28px")};
971
1044
  height: ${(props) => switchSize(props.size, "20px", "24px", "28px")};
972
1045
  }
973
-
1046
+
974
1047
  img {
975
1048
  // width: 24px;
976
1049
  // height: 24px;
@@ -1008,11 +1081,11 @@ const MessageBox = styled.div`
1008
1081
  }
1009
1082
 
1010
1083
  .left_arrow {
1011
- transform: rotate(180deg);
1084
+ transform: rotate(180deg);
1012
1085
  }
1013
-
1086
+
1014
1087
  .arrows {
1015
- display : flex;
1088
+ display: flex;
1016
1089
  align-items: center;
1017
1090
  margin-top: 28px;
1018
1091
  img {
@@ -1036,7 +1109,7 @@ const MessageBox = styled.div`
1036
1109
  }
1037
1110
 
1038
1111
  .carousal_wrapper {
1039
- display : flex;
1112
+ display: flex;
1040
1113
  @media (max-width: 1920px) {
1041
1114
  position: relative;
1042
1115
  left: 10px;
@@ -1129,7 +1202,7 @@ const MessageBox = styled.div`
1129
1202
  @media (min-width: 3840px) {
1130
1203
  width: ${(props) => switchSize(props.size, "97%", "100%", "100%")};
1131
1204
  }
1132
-
1205
+
1133
1206
  @media (max-width: 1920px) {
1134
1207
  left: 3px;
1135
1208
  }
@@ -1145,7 +1218,8 @@ const MessageBox = styled.div`
1145
1218
  width: 99.7%;
1146
1219
  flex-direction: row-reverse;
1147
1220
  display: flex;
1148
- 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;
1149
1223
  justify-content: space-evenly;
1150
1224
  border-radius: 10px 11px 0 0;
1151
1225
  align-items: center;
@@ -1153,22 +1227,40 @@ const MessageBox = styled.div`
1153
1227
  @media (min-width: 2160px) {
1154
1228
  gap: ${(props) => switchSize(props.size, "4%", "6%", "6%")};
1155
1229
  height: ${(props) => switchSize(props.size, "76px", "84px", "90px")};
1156
- 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
+ )};
1157
1237
  }
1158
1238
  @media (min-width: 2560px) {
1159
1239
  gap: ${(props) => switchSize(props.size, "4%", "6%", "6%")};
1160
1240
  height: ${(props) => switchSize(props.size, "80px", "100px", "110px")};
1161
- 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
+ )};
1162
1248
  }
1163
1249
  @media (min-width: 3840px) {
1164
1250
  gap: ${(props) => switchSize(props.size, "8%", "10%", "10%")};
1165
1251
  height: ${(props) => switchSize(props.size, "100px", "116px", "124px")};
1166
- 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
+ )};
1167
1259
  }
1168
1260
 
1169
- .tryit_cards_top_left{
1261
+ .tryit_cards_top_left {
1170
1262
  width: 28px;
1171
- height: 24px;
1263
+ height: 24px;
1172
1264
  margin-right: 0;
1173
1265
  position: relative;
1174
1266
  float: left;
@@ -1189,18 +1281,18 @@ const MessageBox = styled.div`
1189
1281
  }
1190
1282
  @media (min-width: 3840px) {
1191
1283
  width: 56px;
1192
- height: 48px;
1284
+ height: 48px;
1193
1285
  }
1194
1286
 
1195
- img{
1287
+ img {
1196
1288
  max-width: 100%;
1197
1289
  height: auto;
1198
- border-radius: 50%;
1290
+ border-radius: 50%;
1199
1291
  }
1200
1292
  }
1201
1293
  }
1202
1294
 
1203
- .chat_adaptiveCard_section{
1295
+ .chat_adaptiveCard_section {
1204
1296
  margin: 10px 10px 10px 16px;
1205
1297
  width: 100%;
1206
1298
  float: left;
@@ -1226,15 +1318,13 @@ const MessageBox = styled.div`
1226
1318
  @media (min-width: 2160px) {
1227
1319
  width: 74%;
1228
1320
  }
1229
-
1230
1321
  }
1231
1322
 
1232
1323
  .timestamp {
1233
1324
  color: #888;
1234
1325
  font-size: 10px;
1235
- font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
1326
+ font-family: "Gordita-Regular", "Open Sans", sans-serif;
1236
1327
 
1237
-
1238
1328
  @media (min-width: 2160px) {
1239
1329
  font-size: ${(props) => switchSize(props.size, "12px", "12px", "16px")};
1240
1330
  }
@@ -1255,12 +1345,12 @@ const MessageBox = styled.div`
1255
1345
  font-size: ${(props) => switchSize(props.size, "8px", "8px", "10px")};
1256
1346
  }
1257
1347
  }
1258
-
1348
+
1259
1349
  .tryit_cards h4 {
1260
1350
  font-size: 13px;
1261
1351
  margin-top: 10px;
1262
1352
  margin-bottom: 0px;
1263
- font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
1353
+ font-family: "Gordita-Medium", "Open Sans", sans-serif;
1264
1354
  width: 100%;
1265
1355
  color: #fff;
1266
1356
 
@@ -1284,14 +1374,13 @@ const MessageBox = styled.div`
1284
1374
  @media (max-width: 1280px) {
1285
1375
  font-size: ${(props) => switchSize(props.size, "8px", "8px", "11px")};
1286
1376
  }
1287
-
1288
1377
  }
1289
-
1378
+
1290
1379
  .tryit_cards .tryit_cards_top_right p {
1291
1380
  font-size: 12px;
1292
1381
  color: #fff;
1293
1382
  max-width: 100%;
1294
- font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
1383
+ font-family: "Gordita-Regular", "Open Sans", sans-serif;
1295
1384
  margin: 0 0 8px 0;
1296
1385
  display: flex;
1297
1386
 
@@ -1305,7 +1394,7 @@ const MessageBox = styled.div`
1305
1394
  font-size: ${(props) => switchSize(props.size, "24px", "24px", "24px")};
1306
1395
  }
1307
1396
 
1308
- a{
1397
+ a {
1309
1398
  color: #fff;
1310
1399
  text-decoration: none;
1311
1400
  }
@@ -1347,11 +1436,11 @@ const MessageBox = styled.div`
1347
1436
  margin-top: ${(props) => switchSize(props.size, "15px", "15px", "15px")};
1348
1437
  }
1349
1438
 
1350
- @media (max-width: 1280px){
1439
+ @media (max-width: 1280px) {
1351
1440
  margin-left: 16px;
1352
1441
  margin-top: 22px;
1353
1442
  }
1354
-
1443
+
1355
1444
  .adaptive_tail_icon {
1356
1445
  position: absolute;
1357
1446
  }
@@ -1366,29 +1455,47 @@ const MessageBox = styled.div`
1366
1455
  .tryit_cards {
1367
1456
  margin-top: 0px;
1368
1457
  width: 98.2%;
1369
- min-height : 200px;
1370
- background: #FFFFFF 0% 0% no-repeat padding-box ;
1458
+ min-height: 200px;
1459
+ background: #ffffff 0% 0% no-repeat padding-box;
1371
1460
  box-shadow: 0px 3px 6px #00000029 !important;
1372
1461
  border-radius: 10px;
1373
1462
  padding: 12px 30px 12px 0px;
1374
1463
  float: left;
1375
1464
 
1376
1465
  @media (min-width: 2160px) {
1377
- 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
+ )};
1378
1473
  width: 99%;
1379
1474
  }
1380
1475
  @media (min-width: 2560px) {
1381
- 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
+ )};
1382
1483
  }
1383
1484
  @media (min-width: 3840px) {
1384
- 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
+ )};
1385
1492
  }
1386
1493
 
1387
1494
  .widget_title {
1388
- padding-left : 22px;
1495
+ padding-left: 22px;
1389
1496
  }
1390
1497
 
1391
- .tryit_ticket_wrapper{
1498
+ .tryit_ticket_wrapper {
1392
1499
  padding: 16px 0px 0 16px;
1393
1500
  box-shadow: none;
1394
1501
  width: 95.5%;
@@ -1399,64 +1506,72 @@ const MessageBox = styled.div`
1399
1506
  float: left;
1400
1507
 
1401
1508
  @media (min-width: 2160px) {
1402
- max-height: ${(props) => switchSize(props.size, "186px", "190px", "230px")};
1509
+ max-height: ${(props) =>
1510
+ switchSize(props.size, "186px", "190px", "230px")};
1403
1511
  }
1404
1512
  @media (min-width: 2560px) {
1405
- max-height: ${(props) => switchSize(props.size, "186px", "190px", "230px")};
1513
+ max-height: ${(props) =>
1514
+ switchSize(props.size, "186px", "190px", "230px")};
1406
1515
  }
1407
1516
  @media (min-width: 3840px) {
1408
- max-height: ${(props) => switchSize(props.size, "280px", "328px", "328px")};
1517
+ max-height: ${(props) =>
1518
+ switchSize(props.size, "280px", "328px", "328px")};
1409
1519
  }
1410
-
1411
1520
 
1412
- .tryit_ticket_details_wrapper{
1521
+ .tryit_ticket_details_wrapper {
1413
1522
  grid-template-columns: auto;
1414
1523
 
1415
- .tryit_ticket_details{
1416
- .tryit_ticket_colun{
1524
+ .tryit_ticket_details {
1525
+ .tryit_ticket_colun {
1417
1526
  width: auto;
1418
1527
  }
1419
1528
  }
1420
1529
  }
1421
- div:nth-child(3) h6{
1530
+ div:nth-child(3) h6 {
1422
1531
  width: 35%;
1423
1532
  }
1424
- .tryit_ticket_details span{
1533
+ .tryit_ticket_details span {
1425
1534
  position: relative;
1426
1535
  bottom: 0px;
1427
1536
  }
1428
1537
  }
1429
-
1430
- .widget_title{
1538
+
1539
+ .widget_title {
1431
1540
  gap: 0 8px;
1432
1541
  align-items: center;
1433
1542
  margin-bottom: 2px;
1434
1543
  display: flex;
1435
-
1436
- h6{
1544
+
1545
+ h6 {
1437
1546
  font-size: 13px;
1438
- font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
1547
+ font-family: "Gordita-Medium", "Open Sans", sans-serif;
1439
1548
  color: #333;
1440
1549
  margin: 0;
1441
1550
 
1442
1551
  @media (min-width: 2160px) {
1443
- font-size: ${(props) => switchSize(props.size, "16px", "18px", "22px")};
1552
+ font-size: ${(props) =>
1553
+ switchSize(props.size, "16px", "18px", "22px")};
1444
1554
  }
1445
1555
  @media (min-width: 2560px) {
1446
- font-size: ${(props) => switchSize(props.size, "18px", "18px", "24px")};
1556
+ font-size: ${(props) =>
1557
+ switchSize(props.size, "18px", "18px", "24px")};
1447
1558
  }
1448
1559
  @media (min-width: 3840px) {
1449
- font-size: ${(props) => switchSize(props.size, "28px", "30px", "32px")};
1560
+ font-size: ${(props) =>
1561
+ switchSize(props.size, "28px", "30px", "32px")};
1450
1562
  }
1451
1563
 
1452
1564
  @media (max-width: 1920px) {
1453
- font-size: ${(props) => switchSize(props.size, "14px", "15px", "16px")};
1565
+ font-size: ${(props) =>
1566
+ switchSize(props.size, "14px", "15px", "16px")};
1454
1567
  }
1455
1568
  @media (max-width: 1600px) {
1456
- font-size: ${(props) => switchSize(props.size, "12px", "13px", "14px")};
1569
+ font-size: ${(props) =>
1570
+ switchSize(props.size, "12px", "13px", "14px")};
1457
1571
  }
1458
1572
  @media (max-width: 1280px) {
1459
- font-size: ${(props) => switchSize(props.size, "9px", "9px", "12px")};
1573
+ font-size: ${(props) =>
1574
+ switchSize(props.size, "9px", "9px", "12px")};
1460
1575
  }
1461
1576
  }
1462
1577
  }
@@ -1481,7 +1596,7 @@ const MessageBox = styled.div`
1481
1596
  width: 99.3%;
1482
1597
  }
1483
1598
  }
1484
-
1599
+
1485
1600
  .tryit_ticket_wrapper.tryit_button_wrapper {
1486
1601
  padding-top: 0px;
1487
1602
  display: flex;
@@ -1523,7 +1638,7 @@ const MessageBox = styled.div`
1523
1638
  font-size: 12px;
1524
1639
  width: 35%;
1525
1640
  margin: 0;
1526
- font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
1641
+ font-family: "Gordita-Medium", "Open Sans", sans-serif;
1527
1642
 
1528
1643
  @media (min-width: 2160px) {
1529
1644
  font-size: ${(props) => switchSize(props.size, "16px", "18px", "20px")};
@@ -1534,7 +1649,7 @@ const MessageBox = styled.div`
1534
1649
  @media (min-width: 3840px) {
1535
1650
  font-size: ${(props) => switchSize(props.size, "28px", "30px", "32px")};
1536
1651
  }
1537
-
1652
+
1538
1653
  @media (max-width: 1920px) {
1539
1654
  font-size: ${(props) => switchSize(props.size, "14px", "15px", "16px")};
1540
1655
  }
@@ -1545,13 +1660,13 @@ const MessageBox = styled.div`
1545
1660
  font-size: ${(props) => switchSize(props.size, "9px", "9px", "12px")};
1546
1661
  }
1547
1662
  }
1548
- .tryit_ticket_wrapper p{
1663
+ .tryit_ticket_wrapper p {
1549
1664
  font-size: 12px;
1550
1665
  line-height: normal;
1551
1666
  position: relative;
1552
1667
  bottom: 1px;
1553
1668
  width: 60%;
1554
- font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
1669
+ font-family: "Gordita-Regular", "Open Sans", sans-serif;
1555
1670
  margin: 0;
1556
1671
  word-break: break-word;
1557
1672
 
@@ -1576,7 +1691,7 @@ const MessageBox = styled.div`
1576
1691
  }
1577
1692
  }
1578
1693
 
1579
- .tryit_ticket_wrapper p:first-child{
1694
+ .tryit_ticket_wrapper p:first-child {
1580
1695
  bottom: 3px;
1581
1696
  }
1582
1697
  `;
@@ -1601,7 +1716,6 @@ const UserChat = styled.div`
1601
1716
  margin-bottom: 0px;
1602
1717
  }
1603
1718
  ${LogoSize} {
1604
-
1605
1719
  @media (min-width: 2160px) {
1606
1720
  width: ${(props) => switchSize(props.size, "38px", "42px", "46px")};
1607
1721
  height: ${(props) => switchSize(props.size, "38px", "42px", "46px")};
@@ -1647,7 +1761,7 @@ const UserChat = styled.div`
1647
1761
  @media (min-width: 3840px) {
1648
1762
  width: ${(props) => switchSize(props.size, "32px", "36px", "40px")};
1649
1763
  height: ${(props) => switchSize(props.size, "32px", "36px", "40px")};
1650
- }
1764
+ }
1651
1765
 
1652
1766
  @media (max-width: 1920px) {
1653
1767
  width: ${(props) => switchSize(props.size, "16px", "18px", "20px")};
@@ -1666,79 +1780,123 @@ const UserChat = styled.div`
1666
1780
  ${ChatMessage} {
1667
1781
  margin-left: 0px;
1668
1782
  margin-right: 14px;
1669
- padding: 12px 18px 8px 12px !important;
1783
+ padding: 12px 18px 8px 12px !important;
1670
1784
  color: #000;
1671
- background: #F0F7FF 0% 0% no-repeat padding-box;
1785
+ background: #f0f7ff 0% 0% no-repeat padding-box;
1672
1786
  box-shadow: 0px 3px 6px #00000029;
1673
1787
  border-radius: 10px;
1674
1788
 
1675
1789
  @media (min-width: 2160px) {
1676
- margin-right: ${(props) => switchSize(props.size, "16px", "18px", "24px")};
1790
+ margin-right: ${(props) =>
1791
+ switchSize(props.size, "16px", "18px", "24px")};
1677
1792
  margin-top: ${(props) => switchSize(props.size, "20px", "24px", "36px")};
1678
- 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
+ )};
1679
1800
  }
1680
1801
  @media (min-width: 2560px) {
1681
- margin-right: ${(props) => switchSize(props.size, "20px", "24px", "32px")};
1802
+ margin-right: ${(props) =>
1803
+ switchSize(props.size, "20px", "24px", "32px")};
1682
1804
  margin-top: ${(props) => switchSize(props.size, "28px", "36px", "36px")};
1683
- 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
+ )};
1684
1812
  }
1685
1813
  @media (min-width: 3840px) {
1686
- margin-right: ${(props) => switchSize(props.size, "30px", "34px", "40px")};
1814
+ margin-right: ${(props) =>
1815
+ switchSize(props.size, "30px", "34px", "40px")};
1687
1816
  margin-top: ${(props) => switchSize(props.size, "46px", "54px", "60px")};
1688
- padding: ${(props) => switchSize(props.size, "12px 46px 8px 22px !important", "12px 46px 8px 22px !important", "12px 46px 8px 22px !important")};
1689
- }
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
+ }
1690
1825
 
1691
1826
  @media (max-width: 1920px) {
1692
- margin-right: ${(props) => switchSize(props.size, "10px", "12px", "22px")};
1827
+ margin-right: ${(props) =>
1828
+ switchSize(props.size, "10px", "12px", "22px")};
1693
1829
  margin-top: ${(props) => switchSize(props.size, "14px", "18px", "30px")};
1694
- 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
+ )};
1695
1837
  }
1696
1838
  @media (max-width: 1280px) {
1697
- margin-right: ${(props) => switchSize(props.size, "10px", "12px", "16px")};
1839
+ margin-right: ${(props) =>
1840
+ switchSize(props.size, "10px", "12px", "16px")};
1698
1841
  margin-top: ${(props) => switchSize(props.size, "14px", "18px", "18px")};
1699
- 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
+ )};
1700
1849
  }
1701
1850
 
1702
- .widget_title.user_chat{
1703
- h6{
1851
+ .widget_title.user_chat {
1852
+ h6 {
1704
1853
  @media (min-width: 2160px) {
1705
- font-size: ${(props) => switchSize(props.size, "20px", "21px", "22px")};
1854
+ font-size: ${(props) =>
1855
+ switchSize(props.size, "20px", "21px", "22px")};
1706
1856
  }
1707
1857
  @media (min-width: 2560px) {
1708
- font-size: ${(props) => switchSize(props.size, "18px", "18px", "24px")};
1858
+ font-size: ${(props) =>
1859
+ switchSize(props.size, "18px", "18px", "24px")};
1709
1860
  }
1710
1861
  @media (min-width: 3840px) {
1711
- font-size: ${(props) => switchSize(props.size, "28px", "30px", "32px")};
1862
+ font-size: ${(props) =>
1863
+ switchSize(props.size, "28px", "30px", "32px")};
1712
1864
  }
1713
1865
 
1714
1866
  @media (max-width: 1920px) {
1715
- font-size: ${(props) => switchSize(props.size, "14px", "15px", "16px")};
1867
+ font-size: ${(props) =>
1868
+ switchSize(props.size, "14px", "15px", "16px")};
1716
1869
  }
1717
1870
  @media (max-width: 1600px) {
1718
- font-size: ${(props) => switchSize(props.size, "12px", "13px", "14px")};
1871
+ font-size: ${(props) =>
1872
+ switchSize(props.size, "12px", "13px", "14px")};
1719
1873
  }
1720
1874
  @media (max-width: 1280px) {
1721
1875
  font-size: ${(props) => switchSize(props.size, "9px", "9px", "12px")};
1722
1876
  }
1723
1877
  }
1724
1878
 
1725
- .timestamp{
1726
-
1879
+ .timestamp {
1727
1880
  @media (min-width: 2160px) {
1728
- font-size: ${(props) => switchSize(props.size, "12px", "14px", "16x")};
1881
+ font-size: ${(props) =>
1882
+ switchSize(props.size, "12px", "14px", "16x")};
1729
1883
  }
1730
1884
  @media (min-width: 2560px) {
1731
- font-size: ${(props) => switchSize(props.size, "16px", "16px", "20px")};
1885
+ font-size: ${(props) =>
1886
+ switchSize(props.size, "16px", "16px", "20px")};
1732
1887
  }
1733
1888
  @media (min-width: 3840px) {
1734
- font-size: ${(props) => switchSize(props.size, "24px", "26px", "30px")};
1889
+ font-size: ${(props) =>
1890
+ switchSize(props.size, "24px", "26px", "30px")};
1735
1891
  }
1736
1892
 
1737
1893
  @media (max-width: 1920px) {
1738
- font-size: ${(props) => switchSize(props.size, "12px", "13px", "15px")};
1894
+ font-size: ${(props) =>
1895
+ switchSize(props.size, "12px", "13px", "15px")};
1739
1896
  }
1740
1897
  @media (max-width: 1600px) {
1741
- font-size: ${(props) => switchSize(props.size, "10px", "12px", "13px")};
1898
+ font-size: ${(props) =>
1899
+ switchSize(props.size, "10px", "12px", "13px")};
1742
1900
  }
1743
1901
  @media (max-width: 1280px) {
1744
1902
  font-size: ${(props) => switchSize(props.size, "8px", "8px", "10px")};
@@ -1805,7 +1963,7 @@ export const Button = styled.button`
1805
1963
  color: #000;
1806
1964
  outline: 0;
1807
1965
  cursor: pointer;
1808
- margin-top: 4px;
1966
+ margin-top: 4px;
1809
1967
  font-family: "Gordita-Regular";
1810
1968
  display: inline-flex;
1811
1969
  align-items: center;
@@ -1815,32 +1973,32 @@ export const Button = styled.button`
1815
1973
  overflow: hidden;
1816
1974
  // font-size: 12px;
1817
1975
 
1818
- @media (min-width: 2160px) {
1819
- font-size: ${(props) => switchSize(props.size, "16px", "18px", "20px")};
1820
- height: ${(props) => switchSize(props.size, "38px", "41px", "46px")};
1821
- }
1822
- @media (min-width: 2560px) {
1823
- font-size: ${(props) => switchSize(props.size, "18px", "20px", "24px")};
1824
- height: ${(props) => switchSize(props.size, "48px", "52px", "54px")};
1825
- }
1826
- @media (min-width: 3840px) {
1827
- font-size: ${(props) => switchSize(props.size, "28px", "32px", "36px")};
1828
- height: ${(props) => switchSize(props.size, "48px", "58px", "68px")};
1829
- border-radius: 16px;
1830
- }
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
+ }
1831
1989
 
1832
- @media (max-width: 1920px) {
1833
- font-size: ${(props) => switchSize(props.size, "14px", "16px", "18px")};
1834
- height: ${(props) => switchSize(props.size, "32px", "35px", "40px")};
1835
- }
1836
- @media (max-width: 1600px) {
1837
- font-size: ${(props) => switchSize(props.size, "12px", "13px", "14px")};
1838
- height: ${(props) => switchSize(props.size, "32px", "35px", "40px")};
1839
- }
1840
- @media (max-width: 1280px) {
1841
- font-size: ${(props) => switchSize(props.size, "9px", "10px", "12px")};
1842
- height: ${(props) => switchSize(props.size, "32px", "35px", "40px")};
1843
- }
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
+ }
1844
2002
 
1845
2003
  :hover {
1846
2004
  background: #f0f7ff;
@@ -1900,7 +2058,7 @@ export const Button = styled.button`
1900
2058
  }
1901
2059
  `;
1902
2060
  const InputMessageChat = styled.div`
1903
- flex-shrink: 0;
2061
+ flex-shrink: 0;
1904
2062
  max-width: 100%;
1905
2063
  background: #fff;
1906
2064
  padding: 8px 16px 4px 16px;
@@ -1909,20 +2067,19 @@ const InputMessageChat = styled.div`
1909
2067
  border-bottom-left-radius: 10px;
1910
2068
  border-bottom-right-radius: 10px;
1911
2069
 
1912
- .widget_input_message_section{
2070
+ .widget_input_message_section {
1913
2071
  display: flex;
1914
2072
  width: 100%;
1915
2073
  align-items: center;
1916
2074
  justify-content: space-between;
1917
2075
  flex-wrap: nowrap;
1918
2076
 
1919
- .widget_input_message_box{
2077
+ .widget_input_message_box {
1920
2078
  width: 85%;
1921
2079
  flex-basis: 100%;
1922
-
1923
2080
 
1924
- textarea{
1925
- border-radius: 3px;
2081
+ textarea {
2082
+ border-radius: 3px;
1926
2083
  min-height: 24px;
1927
2084
  max-height: 60px;
1928
2085
  overflow: hidden auto !important;
@@ -1935,7 +2092,7 @@ const InputMessageChat = styled.div`
1935
2092
  cursor: text;
1936
2093
  border: none;
1937
2094
  background-color: transparent;
1938
- outline: none;
2095
+ outline: none;
1939
2096
  font-family: "Gordita-Regular";
1940
2097
  // font-size: 14px !important;
1941
2098
  // margin-top: 5px;
@@ -1943,107 +2100,156 @@ const InputMessageChat = styled.div`
1943
2100
 
1944
2101
  @media (min-width: 2160px) {
1945
2102
  height: ${(props) => switchSize(props.size, "28px", "40px", "52px")};
1946
- margin-top: ${(props) => switchSize(props.size, "8px", "12px", "14px")};
1947
- line-height: ${(props) => switchSize(props.size, "21px", "22px", "24px")};
1948
- 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
+ )};
1949
2114
  }
1950
2115
  @media (min-width: 2560px) {
1951
2116
  height: ${(props) => switchSize(props.size, "74px", "90px", "74px")};
1952
- font-size: ${(props) => switchSize(props.size, "24px !important", "24px !important", "24px !important")};
1953
- margin-top: ${(props) => switchSize(props.size, "12px", "6px", "18px")};
1954
- min-height: ${(props) => switchSize(props.size, "80px", "90px", "100px")};
1955
- max-height: ${(props) => switchSize(props.size, "70px", "80px", "70px")};
1956
- 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")};
1957
2132
  }
1958
2133
  @media (min-width: 3840px) {
1959
- height: ${(props) => switchSize(props.size, "74px", "90px", "104px !important")};
1960
- min-height: ${(props) => switchSize(props.size, "74px", "90px", "110px !important")};
1961
- max-height: ${(props) => switchSize(props.size, "74px", "80px", "90px !important")};
1962
- margin-top: ${(props) => switchSize(props.size, "10px", "12px", "28px")};
1963
- line-height: ${(props) => switchSize(props.size, "48px", "54px", "58px")};
1964
- 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
+ )};
1965
2151
  }
1966
2152
 
1967
2153
  @media (max-width: 1920px) {
1968
2154
  height: ${(props) => switchSize(props.size, "37px", "40px", "52px")};
1969
- margin-top: ${(props) => switchSize(props.size, "10px", "12px", "14px")};
1970
- line-height: ${(props) => switchSize(props.size, "20px", "22px", "24px")};
1971
- 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
+ )};
1972
2166
  }
1973
2167
  @media (max-width: 1680px) {
1974
2168
  height: ${(props) => switchSize(props.size, "30px", "34px", "37px")};
1975
2169
  margin-top: ${(props) => switchSize(props.size, "4px", "6px", "8px")};
1976
- 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
+ )};
1977
2177
  }
1978
- @media (max-width: 1280px) {
1979
- 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
+ )};
1980
2186
  margin-top: ${(props) => switchSize(props.size, "4px", "6px", "8px")};
1981
2187
  }
1982
-
1983
- :empty{
2188
+
2189
+ :empty {
1984
2190
  overflow-y: hidden;
1985
2191
  }
1986
2192
 
1987
- :empty:after{
1988
- display: block;
1989
- content: attr(placeholder);
1990
- position: relative;
1991
- color: #333;
1992
- background-color: transparent;
1993
- cursor: text;
1994
- user-select: none;
1995
- line-height: 22px;
1996
- height: 18px;
1997
- font-size: 12px;
1998
- }
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
+ }
1999
2205
  }
2000
2206
  }
2001
- }
2002
-
2003
- .send_icon_box {
2004
- position: relative;
2005
- display: flex;
2006
- gap: 0 8px;
2007
- align-items: center;
2008
- margin-top: 5px;
2009
-
2010
- @media (max-width: 1280px) {
2011
- gap: 0 6px;
2012
2207
  }
2013
2208
 
2014
- svg {
2015
- width: 18px;
2016
- height: 18px;
2017
- cursor: pointer;
2018
- fill: #666;
2209
+ .send_icon_box {
2210
+ position: relative;
2211
+ display: flex;
2212
+ gap: 0 8px;
2213
+ align-items: center;
2214
+ margin-top: 5px;
2019
2215
 
2020
- @media (min-width: 2160px) {
2021
- width: ${(props) => switchSize(props.size, "27px", "30px", "32px")};
2022
- height: ${(props) => switchSize(props.size, "25px", "28px", "30px")};
2023
- }
2024
- @media (min-width: 2560px) {
2025
- width: ${(props) => switchSize(props.size, "28px", "32px", "36px")};
2026
- height: ${(props) => switchSize(props.size, "26px", "30px", "32px")};
2027
- }
2028
- @media (min-width: 3840px) {
2029
- width: ${(props) => switchSize(props.size, "42px", "48px", "52px")};
2030
- height: ${(props) => switchSize(props.size, "38px", "44px", "48px")};
2216
+ @media (max-width: 1280px) {
2217
+ gap: 0 6px;
2031
2218
  }
2032
2219
 
2033
- @media (max-width: 1920px) {
2034
- width: ${(props) => switchSize(props.size, "21px", "24px", "26px")};
2035
- height: ${(props) => switchSize(props.size, "19px", "22px", "24px")};
2036
- }
2037
- @media (max-width: 1680px) {
2038
- width: ${(props) => switchSize(props.size, "18px", "21px", "22px")};
2039
- height: ${(props) => switchSize(props.size, "16px", "19px", "20px")};
2040
- }
2041
- @media (max-width: 1280px) {
2042
- width: ${(props) => switchSize(props.size, "14px", "16px", "18px")};
2043
- 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
+ }
2044
2251
  }
2045
2252
  }
2046
- }
2047
2253
  `;
2048
2254
  const CancelButton = styled.div`
2049
2255
  position: fixed;
@@ -2069,8 +2275,7 @@ const CancelButton = styled.div`
2069
2275
  right: 0.8rem;
2070
2276
  }
2071
2277
 
2072
- .close_button{
2073
-
2278
+ .close_button {
2074
2279
  @media (min-width: 2160px) {
2075
2280
  width: 54px !important;
2076
2281
  height: 54px !important;
@@ -2091,7 +2296,7 @@ const CancelButton = styled.div`
2091
2296
 
2092
2297
  border: transparent !important;
2093
2298
 
2094
- svg{
2299
+ svg {
2095
2300
  @media (max-width: 1920px) {
2096
2301
  width: 18px !important;
2097
2302
  height: 18px !important;
@@ -2131,7 +2336,7 @@ const IconSpan = styled.span`
2131
2336
  height: 80px;
2132
2337
  }
2133
2338
 
2134
- label{
2339
+ label {
2135
2340
  position: absolute;
2136
2341
  background: #fff;
2137
2342
  padding: 2px 4px;
@@ -2142,7 +2347,7 @@ const IconSpan = styled.span`
2142
2347
  color: #555;
2143
2348
  min-width: 80px;
2144
2349
  text-align: center;
2145
- transition: .3s;
2350
+ transition: 0.3s;
2146
2351
  }
2147
2352
 
2148
2353
  svg {
@@ -2164,11 +2369,10 @@ const IconSpan = styled.span`
2164
2369
  }
2165
2370
  }
2166
2371
 
2167
- :hover label{
2372
+ :hover label {
2168
2373
  display: block;
2169
- transition: .3s;
2374
+ transition: 0.3s;
2170
2375
  }
2171
-
2172
2376
  `;
2173
2377
  const ButtonWrapper = styled.div`
2174
2378
  width: 100%;
@@ -2197,6 +2401,11 @@ const ButtonWrapper = styled.div`
2197
2401
  display: inline-flex;
2198
2402
  align-items: center;
2199
2403
  padding: 6px 12px;
2404
+
2405
+
2406
+ @media (max-width: 1280px) {
2407
+ min-width: auto;
2408
+ }
2200
2409
 
2201
2410
  text-overflow: ellipsis;
2202
2411
  white-space: nowrap !important;
@@ -2239,7 +2448,7 @@ const style = {
2239
2448
  overflowWrap: "break-word",
2240
2449
  textAlign: "start",
2241
2450
  height: "38px",
2242
- fontFamily: "Gordita-Regular"
2451
+ fontFamily: "Gordita-Regular",
2243
2452
  };
2244
2453
 
2245
2454
  const App = ({
@@ -2252,7 +2461,7 @@ const App = ({
2252
2461
  widget_size,
2253
2462
  style,
2254
2463
  }) => {
2255
- // console.log("APP :: style ::", { style });
2464
+ // ;
2256
2465
  const {
2257
2466
  connected,
2258
2467
  messages,
@@ -2270,8 +2479,6 @@ const App = ({
2270
2479
  newToken,
2271
2480
  userDetails,
2272
2481
  });
2273
- console.log("connected ::: ", { connected })
2274
-
2275
2482
  const [open, setOpen] = useState(openByDefault);
2276
2483
 
2277
2484
  const containerEl = useRef(null);
@@ -2285,8 +2492,6 @@ const App = ({
2285
2492
  return null;
2286
2493
  }
2287
2494
 
2288
- console.log("scale size provider", widget_size)
2289
-
2290
2495
  return (
2291
2496
  <ScaleSizeProvider widgetSize={widget_size}>
2292
2497
  <WidgetPreview size={widget_size} className="widget_preview">
@@ -2319,7 +2524,6 @@ const App = ({
2319
2524
  messages={messages}
2320
2525
  isTypingEnd={isTypingEnd}
2321
2526
  />
2322
-
2323
2527
  </ChatWrapper>
2324
2528
  ) : null}
2325
2529
  <WidgetMenu
@@ -2359,7 +2563,7 @@ const Footer = ({
2359
2563
  const [typing, setBotTyping] = useState(true);
2360
2564
 
2361
2565
  const send = () => {
2362
- // console.log("typedMessage in send", typedMessage)
2566
+ //
2363
2567
  if (typedMessage.trim()) {
2364
2568
  sendMessage(typedMessage);
2365
2569
  }
@@ -2379,7 +2583,6 @@ const Footer = ({
2379
2583
 
2380
2584
  const uploadTag = useRef(null);
2381
2585
  const textareaRef = useRef(null);
2382
- // console.log("TYped message", typedMessage)
2383
2586
 
2384
2587
  useEffect(() => {
2385
2588
  if (textareaRef.current) {
@@ -2387,7 +2590,7 @@ const Footer = ({
2387
2590
  autosize(textareaRef.current);
2388
2591
  }
2389
2592
  }, [textareaRef.current]);
2390
- const scale = useScaleContext()
2593
+ const scale = useScaleContext();
2391
2594
  return (
2392
2595
  <>
2393
2596
  {typing && (
@@ -2403,7 +2606,10 @@ const Footer = ({
2403
2606
  </span>
2404
2607
  </p>
2405
2608
  )}
2406
- <InputMessageChat size={scale.widgetSize} className="widget_input_message">
2609
+ <InputMessageChat
2610
+ size={scale.widgetSize}
2611
+ className="widget_input_message"
2612
+ >
2407
2613
  <div className="widget_input_message_section">
2408
2614
  <div className="widget_input_message_box">
2409
2615
  <textarea
@@ -2416,8 +2622,8 @@ const Footer = ({
2416
2622
  e.preventDefault();
2417
2623
  send();
2418
2624
  if (textareaRef.current) {
2419
- textareaRef.current.style.height = "30px"
2420
- textareaRef.current.style.overflow = "hidden"
2625
+ textareaRef.current.style.height = "30px";
2626
+ textareaRef.current.style.overflow = "hidden";
2421
2627
  }
2422
2628
  }
2423
2629
  }}
@@ -2426,8 +2632,7 @@ const Footer = ({
2426
2632
  rows={1}
2427
2633
  id="typemsg"
2428
2634
  wrap="hard"
2429
- >
2430
- </textarea>
2635
+ ></textarea>
2431
2636
  </div>
2432
2637
  <div className="send_icon_box">
2433
2638
  <span
@@ -2445,7 +2650,12 @@ const Footer = ({
2445
2650
  </svg>
2446
2651
  </span>
2447
2652
  <span onClick={() => send()}>
2448
- <input type="file" hidden ref={uploadTag} onChange={onFileUpload} />
2653
+ <input
2654
+ type="file"
2655
+ hidden
2656
+ ref={uploadTag}
2657
+ onChange={onFileUpload}
2658
+ />
2449
2659
 
2450
2660
  {/* <WidgetSendIcon /> */}
2451
2661
  <svg x="0px" y="0px" viewBox="0 0 32 32" xmlSpace="preserve">
@@ -2456,16 +2666,24 @@ const Footer = ({
2456
2666
  </span>
2457
2667
  </div>
2458
2668
  </div>
2459
- </InputMessageChat >
2669
+ </InputMessageChat>
2460
2670
 
2461
2671
  <div className="widget_footer">
2462
- <p>Powered by <span> PagerGPT</span></p>
2672
+ <p>
2673
+ Powered by <span> PagerGPT</span>
2674
+ </p>
2463
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,37 +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, sendMessage }) => {
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
- sendMessage={sendMessage}
2954
- event_id={event_id}
2955
- />
2956
- </>
2957
- }
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
+ };
2958
3215
 
2959
3216
  const ChatAssistant = ({
2960
3217
  output: { type, ...outputStruct },
@@ -2965,13 +3222,22 @@ const ChatAssistant = ({
2965
3222
  logoshape,
2966
3223
  logosize,
2967
3224
  logoborder,
2968
- event_id
3225
+ event_id,
2969
3226
  }) => {
2970
3227
  // const [hover, setHover] = useState(false);
2971
- // console.log(output, "output");
2972
3228
  const scale = useScaleContext();
2973
3229
  if (outputStruct.response_type === "ai_response") {
2974
- return <AiResponse output={outputStruct} sendMessage={sendMessage} 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
+ );
2975
3241
  }
2976
3242
  return (
2977
3243
  <>
@@ -2996,9 +3262,7 @@ const ChatAssistant = ({
2996
3262
  </div>
2997
3263
  ) : (
2998
3264
  <div>
2999
- <AssistantMd
3000
- mdText={outputStruct.value}
3001
- ></AssistantMd>
3265
+ <AssistantMd mdText={outputStruct.value}></AssistantMd>
3002
3266
  </div>
3003
3267
  )}
3004
3268
  </ChatMessage>
@@ -3016,7 +3280,7 @@ const ChatAssistant = ({
3016
3280
 
3017
3281
  const WidgetBtn = ({ sendMessage, widget, label, value }) => {
3018
3282
  // const [hovered, setHovered] = useState(false);
3019
- const scale = useScaleContext()
3283
+ const scale = useScaleContext();
3020
3284
  return (
3021
3285
  <WidgetUpdateButton>
3022
3286
  <Button
@@ -3035,9 +3299,15 @@ const WidgetBtn = ({ sendMessage, widget, label, value }) => {
3035
3299
  );
3036
3300
  };
3037
3301
 
3038
- const FeedbackBtn = ({ label, action, sendFeedback, sendMessage, event_id }) => {
3302
+ const FeedbackBtn = ({
3303
+ label,
3304
+ action,
3305
+ sendFeedback,
3306
+ sendMessage,
3307
+ event_id,
3308
+ }) => {
3039
3309
  // const [hovered, setHovered] = useState(false);
3040
- const scale = useScaleContext()
3310
+ const scale = useScaleContext();
3041
3311
  return (
3042
3312
  <WidgetUpdateButton>
3043
3313
  <Button
@@ -3046,11 +3316,15 @@ const FeedbackBtn = ({ label, action, sendFeedback, sendMessage, event_id }) =>
3046
3316
  type="button"
3047
3317
  onClick={() => {
3048
3318
  if (action.contract_action) {
3049
- sendFeedback(action.contract_action.action === "send_satisfied_feedback" ? "satisfied" : "not_satisfied", event_id);
3319
+ sendFeedback(
3320
+ action.contract_action.action === "send_satisfied_feedback"
3321
+ ? "satisfied"
3322
+ : "not_satisfied",
3323
+ event_id
3324
+ );
3050
3325
  } else if (action.send_rly) {
3051
3326
  sendMessage(action.send_rly);
3052
3327
  }
3053
-
3054
3328
  }}
3055
3329
  className="widget_btn"
3056
3330
  size={scale.widgetSize}
@@ -3059,10 +3333,14 @@ const FeedbackBtn = ({ label, action, sendFeedback, sendMessage, event_id }) =>
3059
3333
  </Button>
3060
3334
  </WidgetUpdateButton>
3061
3335
  );
3062
- }
3336
+ };
3063
3337
 
3064
- const AiFeedbackButtonsWrapper = ({ options, sendFeedback, sendMessage, event_id }) => {
3065
- console.log({ options })
3338
+ const AiFeedbackButtonsWrapper = ({
3339
+ options,
3340
+ sendFeedback,
3341
+ sendMessage,
3342
+ event_id,
3343
+ }) => {
3066
3344
  return (
3067
3345
  <ButtonWrapper>
3068
3346
  {options.map(({ label, action }, key) => (
@@ -3077,7 +3355,7 @@ const AiFeedbackButtonsWrapper = ({ options, sendFeedback, sendMessage, event_id
3077
3355
  ))}
3078
3356
  </ButtonWrapper>
3079
3357
  );
3080
- }
3358
+ };
3081
3359
 
3082
3360
  const ButtonsWrapper = ({ options, sendMessage, widget }) => {
3083
3361
  return (
@@ -3134,22 +3412,33 @@ const UserAssistant = ({
3134
3412
  logosize,
3135
3413
  logoborder,
3136
3414
  }) => {
3137
- const scale = useScaleContext()
3415
+ const scale = useScaleContext();
3138
3416
  return (
3139
3417
  <UserChat size={scale.widgetSize}>
3140
3418
  <MessageBox size={scale.widgetSize}>
3141
- <ChatMessage size={scale.widgetSize} style={{ background: widget ? widget.secondary_color : "#fff" }}>
3142
- <div className="flex widget_title user_chat" style={{color: "#fff"}}>
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
+ >
3143
3427
  <h6>{SYS_FirstName}</h6>
3144
- <div className="timestamp" style={{color: "#fff", gap: 0}}>{formatTimeAMPM(timestamp)}</div>
3428
+ <div className="timestamp" style={{ color: "#fff", gap: 0 }}>
3429
+ {formatTimeAMPM(timestamp)}
3430
+ </div>
3145
3431
  </div>
3146
- <div style={{color: "#fff"}}>
3432
+ <div style={{ color: "#fff" }}>
3147
3433
  {(SYS_UPLOADED_FILE && "File uploaded") || (
3148
3434
  <DisplayURL text={input.value} />
3149
3435
  )}
3150
3436
  </div>
3151
3437
  </ChatMessage>
3152
- <LogoSize size={scale.widgetSize} style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}>
3438
+ <LogoSize
3439
+ size={scale.widgetSize}
3440
+ style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}
3441
+ >
3153
3442
  {/* <UserIconAnalytics /> */}
3154
3443
  <svg
3155
3444
  id="Layer_1"
@@ -3193,19 +3482,19 @@ const WidgetMenu = ({
3193
3482
  const scaleContext = useScaleContext();
3194
3483
  const style = {
3195
3484
  backgroundColor: widget ? widget.accent_color : "#FFD15C",
3196
- borderRadius: logoshape == "box" ? '0%' : '50%', border: `1px solid ${logoborder.color}`,
3485
+ borderRadius: logoshape == "box" ? "0%" : "50%",
3486
+ border: `1px solid ${logoborder.color}`,
3197
3487
  height: logosize * 12 + 62,
3198
3488
  width: logosize * 12 + 62,
3199
3489
  transform: `scale(${scaleContext.scale})`,
3200
3490
  fill: widget.primary_color,
3201
3491
  };
3202
3492
 
3203
- console.log("WidgetMenu", scaleContext)
3204
-
3205
3493
  return (
3206
3494
  <CancelButton className="widget_cancel_button">
3207
3495
  {open ? (
3208
- <IconSpan className="close_button"
3496
+ <IconSpan
3497
+ className="close_button"
3209
3498
  style={style}
3210
3499
  // backg={props.backg}
3211
3500
  // color={props.color}
@@ -3224,10 +3513,7 @@ const WidgetMenu = ({
3224
3513
  </svg>
3225
3514
  </IconSpan>
3226
3515
  ) : (
3227
- <IconSpan
3228
- style={style}
3229
- onClick={onClick}
3230
- >
3516
+ <IconSpan style={style} onClick={onClick}>
3231
3517
  <img
3232
3518
  src={
3233
3519
  (widget && widget.logo_url) ||
@@ -3236,14 +3522,14 @@ const WidgetMenu = ({
3236
3522
  style={
3237
3523
  logoshape == "box"
3238
3524
  ? {
3239
- width: "100%",
3240
- height: "100%",
3241
- boxShadow: "none",
3242
- }
3525
+ width: "100%",
3526
+ height: "100%",
3527
+ boxShadow: "none",
3528
+ }
3243
3529
  : {
3244
- width: "86px",
3245
- height: "86px",
3246
- }
3530
+ width: "86px",
3531
+ height: "86px",
3532
+ }
3247
3533
  }
3248
3534
  />
3249
3535
  </IconSpan>