pager-widget 0.2.7 → 0.2.9

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 (8) hide show
  1. package/App.jsx +370 -318
  2. package/ConsentPopup.jsx +7 -8
  3. package/Dropdown.jsx +2 -2
  4. package/InputConverter.jsx +10 -10
  5. package/dist/lib.js +11 -11
  6. package/fontStyles.js +16 -18
  7. package/md/assistant_md.js +2 -2
  8. package/package.json +1 -1
package/App.jsx CHANGED
@@ -85,7 +85,11 @@ const ThreeDotTyping = styled.div`
85
85
  `;
86
86
 
87
87
  const WidgetPreview = styled.div`
88
- width: ${(props) => (props.isExpanded ? "600px" : "390px")};
88
+ // width: ${(props) => (props.isExpanded ? "600px" : "390px")};
89
+ width: ${({ isExpanded, size }) =>
90
+ isExpanded
91
+ ? switchSize(size, "600px", "600px", "600px")
92
+ : switchSize(size, "400px", "440px", "480px")};
89
93
  height: auto;
90
94
  float: left;
91
95
  position: fixed;
@@ -106,7 +110,7 @@ const FormHeader = styled.div`
106
110
  width: 100%;
107
111
  float: left;
108
112
  font-family: "Inter", "Open Sans";
109
- font-size: 16px;
113
+ font-size: clamp(1rem, calc(0.75rem + 0.3125vw), 1.125rem);
110
114
  color: #020618;
111
115
  margin: 0px 12px;
112
116
  margin-bottom: 0px;
@@ -147,7 +151,7 @@ const ChatWrapper = styled.div`
147
151
 
148
152
  p{
149
153
  font-family: "Inter", "Open Sans";
150
- font-size: 12px;
154
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
151
155
  color: #000;
152
156
  margin: 0;
153
157
  align-items: center;
@@ -168,7 +172,7 @@ const ChatWrapper = styled.div`
168
172
 
169
173
  .tryit_bot_typing{
170
174
  position: relative;
171
- font-size: 14px;
175
+ font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
172
176
  color: #555;
173
177
  width: 100%;
174
178
  padding-left: 16px;
@@ -252,7 +256,7 @@ const ChatWrapper = styled.div`
252
256
 
253
257
  `;
254
258
  const ChatContentWrapper = styled.div`
255
- height: 85%;
259
+ height: ${(props) => (props.isMessageContainer ? "75%" : "85%")};
256
260
  width: 100%;
257
261
  float: left;
258
262
  padding: 12px 20px 20px 15px;
@@ -279,7 +283,7 @@ const BodyNotesWrapper = styled.div`
279
283
  const OperationHourWrapper = styled.span`
280
284
  color: #62748e;
281
285
  text-align: center;
282
- font-size: 12px;
286
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
283
287
  font-family: "Inter", "Open Sans";
284
288
  font-style: normal;
285
289
  font-weight: 400;
@@ -299,7 +303,7 @@ const NotesWrapper = styled.div`
299
303
  const InfoContent = styled.span`
300
304
  color: #1d293d;
301
305
  font-family: "Inter", "Open Sans";
302
- font-size: 12px;
306
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
303
307
  font-style: normal;
304
308
  font-weight: 400;
305
309
  line-height: 18px;
@@ -488,7 +492,7 @@ const Paragraph = styled.p`
488
492
  text-overflow: ellipsis;
489
493
  white-space: nowrap;
490
494
  overflow: hidden;
491
- // font-size: 13px;
495
+ // font-size: clamp(0.8125rem, calc(0.5625rem + 0.3125vw), 0.9375rem);
492
496
 
493
497
  @media (min-width: 2160px) {
494
498
  font-size: ${(props) => switchSize(props.size, "15px", "16px", "18px")};
@@ -517,7 +521,7 @@ const ChatMessage = styled.div`
517
521
  padding: 10px 14px !important;
518
522
  margin-left: 32px;
519
523
  margin-top: 14px;
520
- font-size: 14px;
524
+ font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
521
525
  font-family: "Inter", "Open Sans";
522
526
  white-space: pre-wrap;
523
527
  box-sizing: border-box;
@@ -544,7 +548,7 @@ const ChatMessage = styled.div`
544
548
  }
545
549
  .timestamp {
546
550
  color: #888;
547
- // font-size: 10px;
551
+ // font-size: clamp(0.625rem, calc(0.375rem + 0.3125vw), 0.75rem);
548
552
  font-family: "Inter", "Open Sans";
549
553
  position: relative;
550
554
  bottom: 0px;
@@ -579,7 +583,7 @@ const ChatMessage = styled.div`
579
583
  margin-bottom: 4px;
580
584
 
581
585
  h6 {
582
- // font-size: 13px;
586
+ // font-size: clamp(0.8125rem, calc(0.5625rem + 0.3125vw), 0.9375rem);
583
587
  font-family: "Inter", "Open Sans";
584
588
  color: #333;
585
589
  margin: 0;
@@ -608,7 +612,7 @@ const ChatMessage = styled.div`
608
612
 
609
613
  .chatAssistant_one {
610
614
  h6 {
611
- font-size: 16px;
615
+ font-size: clamp(1rem, calc(0.75rem + 0.3125vw), 1.125rem);
612
616
  font-family: "Inter", "Open Sans";
613
617
  color: #555;
614
618
  margin: 16px 0 0;
@@ -620,7 +624,7 @@ const ChatMessage = styled.div`
620
624
  list-style: none;
621
625
  li {
622
626
  color: #1d48eb;
623
- font-size: 16px;
627
+ font-size: clamp(1rem, calc(0.75rem + 0.3125vw), 1.125rem);
624
628
  font-family: "Inter", "Open Sans";
625
629
  margin-bottom: 4px;
626
630
  a {
@@ -638,7 +642,7 @@ const ChatMessage = styled.div`
638
642
  }
639
643
 
640
644
  .wid_message {
641
- font-size: 16px;
645
+ font-size: clamp(1rem, calc(0.75rem + 0.3125vw), 1.125rem);
642
646
  font-family: "Inter", "Open Sans";
643
647
  }
644
648
  `;
@@ -647,7 +651,7 @@ const FormMessage = styled.div`
647
651
  width: 85%;
648
652
  margin-left: 32px;
649
653
  font-family: "Inter", "Open Sans";
650
- font-size: 14px;
654
+ font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
651
655
  white-space: pre-wrap;
652
656
  box-sizing: border-box;
653
657
  word-break: break-word;
@@ -683,16 +687,19 @@ const MessageBox = styled.div`
683
687
  }
684
688
 
685
689
  @media (max-width: 1920px) {
686
- width: ${(props) => switchSize(props.size, "32px", "36px", "40px")};
687
- height: ${(props) => switchSize(props.size, "32px", "36px", "40px")};
690
+ width: ${(props) => switchSize(props.size, "320px", "36px", "40px")};
691
+ height: ${(props) => switchSize(props.size, "320px", "36px", "40px")};
688
692
  }
689
693
  @media (max-width: 1680px) {
690
- width: ${(props) => switchSize(props.size, "28px", "32px", "34px")};
691
- height: ${(props) => switchSize(props.size, "28px", "32px", "34px")};
694
+ width: ${(props) => switchSize(props.size, "320px", "32px", "34px")};
695
+ height: ${(props) => switchSize(props.size, "320px", "32px", "34px")};
692
696
  }
693
697
  @media (max-width: 1280px) {
694
- width: ${(props) => switchSize(props.size, "20px", "24px", "28px")};
695
- height: ${(props) => switchSize(props.size, "20px", "24px", "28px")};
698
+ width: ${(props) => {
699
+ console.log("props", props);
700
+ return switchSize(props.size, "320px", "24px", "28px");
701
+ }};
702
+ height: ${(props) => switchSize(props.size, "320px", "24px", "28px")};
696
703
  }
697
704
 
698
705
  img {
@@ -947,7 +954,7 @@ const MessageBox = styled.div`
947
954
 
948
955
  .timestamp {
949
956
  color: #888;
950
- font-size: 10px;
957
+ font-size: clamp(0.625rem, calc(0.375rem + 0.3125vw), 0.75rem);
951
958
  font-family: "Inter", "Open Sans";
952
959
 
953
960
  @media (min-width: 2160px) {
@@ -972,7 +979,7 @@ const MessageBox = styled.div`
972
979
  }
973
980
 
974
981
  .tryit_cards h4 {
975
- font-size: 13px;
982
+ font-size: clamp(0.8125rem, calc(0.5625rem + 0.3125vw), 0.9375rem);
976
983
  margin-top: 10px;
977
984
  margin-bottom: 0px;
978
985
  font-family: "Inter", "Open Sans";
@@ -1002,7 +1009,7 @@ const MessageBox = styled.div`
1002
1009
  }
1003
1010
 
1004
1011
  .tryit_cards .tryit_cards_top_right p {
1005
- font-size: 12px;
1012
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
1006
1013
  color: #fff;
1007
1014
  max-width: 100%;
1008
1015
  font-family: "Inter", "Open Sans";
@@ -1168,7 +1175,7 @@ const MessageBox = styled.div`
1168
1175
  display: flex;
1169
1176
 
1170
1177
  h6 {
1171
- font-size: 13px;
1178
+ font-size: clamp(0.8125rem, calc(0.5625rem + 0.3125vw), 0.9375rem);
1172
1179
  font-family: "Inter", "Open Sans";
1173
1180
  color: #333;
1174
1181
  margin: 0;
@@ -1260,7 +1267,7 @@ const MessageBox = styled.div`
1260
1267
  margin-bottom: 10px;
1261
1268
  }
1262
1269
  .tryit_ticket_wrapper h6 {
1263
- font-size: 12px;
1270
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
1264
1271
  width: 35%;
1265
1272
  margin: 0;
1266
1273
  font-family: "Inter", "Open Sans";
@@ -1286,7 +1293,7 @@ const MessageBox = styled.div`
1286
1293
  }
1287
1294
  }
1288
1295
  .tryit_ticket_wrapper p {
1289
- font-size: 12px;
1296
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
1290
1297
  line-height: normal;
1291
1298
  position: relative;
1292
1299
  bottom: 1px;
@@ -1637,7 +1644,7 @@ const FormBox = styled.div`
1637
1644
 
1638
1645
  .timestamp {
1639
1646
  color: #888;
1640
- font-size: 10px;
1647
+ font-size: clamp(0.625rem, calc(0.375rem + 0.3125vw), 0.75rem);
1641
1648
  font-family: "'Inter', 'Open Sans'";
1642
1649
 
1643
1650
  @media (min-width: 2160px) {
@@ -1662,7 +1669,7 @@ const FormBox = styled.div`
1662
1669
  }
1663
1670
 
1664
1671
  .tryit_cards h4 {
1665
- font-size: 13px;
1672
+ font-size: clamp(0.8125rem, calc(0.5625rem + 0.3125vw), 0.9375rem);
1666
1673
  margin-top: 10px;
1667
1674
  margin-bottom: 0px;
1668
1675
  font-family: "'Inter', 'Open Sans'";
@@ -1692,7 +1699,7 @@ const FormBox = styled.div`
1692
1699
  }
1693
1700
 
1694
1701
  .tryit_cards .tryit_cards_top_right p {
1695
- font-size: 12px;
1702
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
1696
1703
  color: #fff;
1697
1704
  max-width: 100%;
1698
1705
  font-family: "'Inter', 'Open Sans'";
@@ -1858,7 +1865,7 @@ const FormBox = styled.div`
1858
1865
  display: flex;
1859
1866
 
1860
1867
  h6 {
1861
- font-size: 13px;
1868
+ font-size: clamp(0.8125rem, calc(0.5625rem + 0.3125vw), 0.9375rem);
1862
1869
  font-family: "'Inter', 'Open Sans'";
1863
1870
  color: #333;
1864
1871
  margin: 0;
@@ -1950,7 +1957,7 @@ const FormBox = styled.div`
1950
1957
  margin-bottom: 10px;
1951
1958
  }
1952
1959
  .tryit_ticket_wrapper h6 {
1953
- font-size: 12px;
1960
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
1954
1961
  width: 35%;
1955
1962
  margin: 0;
1956
1963
  font-family: "'Inter', 'Open Sans'";
@@ -1976,7 +1983,7 @@ const FormBox = styled.div`
1976
1983
  }
1977
1984
  }
1978
1985
  .tryit_ticket_wrapper p {
1979
- font-size: 12px;
1986
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
1980
1987
  line-height: normal;
1981
1988
  position: relative;
1982
1989
  bottom: 1px;
@@ -2238,12 +2245,12 @@ const WidgetUpdateButton = styled.div`
2238
2245
  border-radius: 6px;
2239
2246
  color: #314158;
2240
2247
  font-family: "Inter", sans-serif;
2241
- font-size: 14px;
2248
+ font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
2242
2249
  font-weight: 500;
2243
2250
  line-height: 20px;
2244
2251
  cursor: pointer;
2245
- display: flex;
2246
- align-items: center;
2252
+ display: flex;
2253
+ align-items: center;
2247
2254
  justify-content: center; /* Centers text horizontally */
2248
2255
 
2249
2256
  &:hover {
@@ -2270,11 +2277,11 @@ const WidgetUpdateButton = styled.div`
2270
2277
  // border-radius: 6px;
2271
2278
  // color: #314158;
2272
2279
  // font-family: "Inter", sans-serif;
2273
- // font-size: 14px;
2280
+ // font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
2274
2281
  // font-weight: 500;
2275
2282
  // line-height: 20px;
2276
2283
  // cursor: pointer;
2277
-
2284
+
2278
2285
  // &:hover {
2279
2286
  // background: #ebefff;
2280
2287
  // border: 1px solid #4b2fff;
@@ -2293,7 +2300,7 @@ export const Button = styled.button`
2293
2300
  min-width: 64px;
2294
2301
 
2295
2302
  height: 28px;
2296
-
2303
+
2297
2304
  border: 1px solid #a0a0a0;
2298
2305
  border-radius: 8px;
2299
2306
  background: #ffffff;
@@ -2308,7 +2315,7 @@ export const Button = styled.button`
2308
2315
  text-overflow: ellipsis;
2309
2316
  white-space: nowrap !important;
2310
2317
  overflow: hidden;
2311
- // font-size: 12px;
2318
+ // font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
2312
2319
 
2313
2320
  @media (min-width: 2160px) {
2314
2321
  font-size: ${(props) => switchSize(props.size, "16px", "18px", "20px")};
@@ -2537,7 +2544,7 @@ const InputMessageChat = styled.div`
2537
2544
  user-select: none;
2538
2545
  line-height: 22px;
2539
2546
  height: 18px;
2540
- font-size: 12px;
2547
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
2541
2548
  }
2542
2549
  }
2543
2550
  }
@@ -2680,7 +2687,7 @@ const IconSpan = styled.span`
2680
2687
  border-radius: 4px;
2681
2688
  top: -20px;
2682
2689
  display: none;
2683
- font-size: 12px;
2690
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
2684
2691
  color: #555;
2685
2692
  min-width: 80px;
2686
2693
  text-align: center;
@@ -2733,7 +2740,7 @@ const ButtonWrapper = styled.div`
2733
2740
  outline: 0;
2734
2741
  cursor: pointer;
2735
2742
  margin-top: 12px;
2736
- font-size: 12px;
2743
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
2737
2744
  font-family: "'Inter', 'Open Sans'";
2738
2745
  display: inline-flex;
2739
2746
  align-items: center;
@@ -2793,7 +2800,7 @@ const BotHeader = styled.div`
2793
2800
 
2794
2801
  const BotLabel = styled.span`
2795
2802
  font-family: "Inter", sans-serif;
2796
- font-size: 12px;
2803
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
2797
2804
  font-weight: 500;
2798
2805
  color: #020618;
2799
2806
  line-height: 18px;
@@ -2827,7 +2834,7 @@ const MessageCard = styled.div`
2827
2834
 
2828
2835
  const MessageText = styled.p`
2829
2836
  font-family: "Inter", sans-serif;
2830
- font-size: 14px;
2837
+ font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
2831
2838
  font-weight: 400;
2832
2839
  color: #020618;
2833
2840
  line-height: 20px;
@@ -2850,7 +2857,7 @@ const SuggestionButton = styled.button`
2850
2857
  border-radius: 6px;
2851
2858
  color: #314158;
2852
2859
  font-family: "Inter", sans-serif;
2853
- font-size: 14px;
2860
+ font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
2854
2861
  font-weight: 500;
2855
2862
  line-height: 20px;
2856
2863
  cursor: pointer;
@@ -2879,7 +2886,7 @@ const Timestamp = styled.div`
2879
2886
 
2880
2887
  const TimestampText = styled.span`
2881
2888
  font-family: "Inter", sans-serif;
2882
- font-size: 12px;
2889
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
2883
2890
  font-weight: 400;
2884
2891
  color: #62748e;
2885
2892
  line-height: 18px;
@@ -2889,7 +2896,6 @@ const ReactionContainer = styled.div`
2889
2896
  display: flex;
2890
2897
  align-items: center;
2891
2898
  gap: 4px;
2892
-
2893
2899
  `;
2894
2900
 
2895
2901
  const ReactionButton = styled.button`
@@ -2938,7 +2944,7 @@ const StyledInput = styled.input`
2938
2944
  border: none;
2939
2945
  outline: none;
2940
2946
  color: #020618;
2941
- font-size: 14px;
2947
+ font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
2942
2948
  font-weight: normal;
2943
2949
  background: transparent;
2944
2950
  font-weight: 500;
@@ -2976,7 +2982,7 @@ const style = {
2976
2982
  resize: "none",
2977
2983
  padding: "9px",
2978
2984
  boxSizing: "border-box",
2979
- fontSize: "13px",
2985
+ fontSize: "clamp(0.8125rem, calc(0.5625rem + 0.3125vw), 0.9375rem)",
2980
2986
  width: "100%",
2981
2987
  border: "none",
2982
2988
  overflow: "hidden",
@@ -2985,6 +2991,37 @@ const style = {
2985
2991
  height: "38px",
2986
2992
  fontFamily: "'Inter', 'Open Sans'",
2987
2993
  };
2994
+ export const DropdownContainer = styled.div`
2995
+ width: 72px;
2996
+ height: max-content;
2997
+ position: absolute;
2998
+ top: 30px;
2999
+ right: 10px;
3000
+ padding: 6px;
3001
+ border-radius: 8px;
3002
+ display: flex;
3003
+ flex-direction: column;
3004
+ gap: 4px;
3005
+ background: white;
3006
+ box-shadow: 0px 2px 6px #00000040;
3007
+ z-index: 50;
3008
+ `;
3009
+
3010
+ export const DropdownItem = styled.span`
3011
+ width: 100%;
3012
+ background: white;
3013
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
3014
+ display: flex;
3015
+ align-items: center;
3016
+ cursor: pointer;
3017
+ color: #1f2937; /* Tailwind's text-gray-900 */
3018
+ white-space: nowrap;
3019
+ line-height: normal;
3020
+
3021
+ &:hover {
3022
+ color: #000;
3023
+ }
3024
+ `;
2988
3025
 
2989
3026
  export const SearchIcon = ({ style }) => {
2990
3027
  return (
@@ -3020,6 +3057,8 @@ const App = ({
3020
3057
  }) => {
3021
3058
  // ;
3022
3059
 
3060
+ console.log("widget size", widget_size);
3061
+
3023
3062
  const [sourceState, setSourceState] = useState(widget?.source_id);
3024
3063
  const [isExpanded, setIsExpanded] = useState(false);
3025
3064
 
@@ -3115,60 +3154,58 @@ const App = ({
3115
3154
  }}
3116
3155
  >
3117
3156
  <XIcon width={16} height={16} style={{ color: "black" }} />
3118
-
3119
3157
  </span>
3120
3158
  </NotesWrapper>
3121
3159
  </BodyNotesWrapper>
3122
3160
  );
3123
3161
 
3124
3162
  const GreetingMessageBox = () => {
3125
-
3126
- return(
3127
- <Container>
3128
- <MessageContainer>
3129
- <BotHeader>
3130
- <BotLabel>Bot</BotLabel>
3131
- </BotHeader>
3132
- <MessageBubbleContainer>
3133
- <AvatarContainer>
3134
- <AvatarImage>
3135
- <img
3136
- alt={"logo"}
3137
- src={
3138
- (widget && widget.logo_url) ||
3139
- "https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
3140
- }
3141
- />
3142
- </AvatarImage>
3143
- </AvatarContainer>
3144
- <MessageCard>
3145
- <MessageText>Hi Roger! How may help you today?</MessageText>
3146
- <SuggestionContainer>
3147
- {suggestionOptions.map((option, index) => (
3148
- <SuggestionButton key={index}>{option}</SuggestionButton>
3149
- ))}
3150
- </SuggestionContainer>
3151
- </MessageCard>
3152
- </MessageBubbleContainer>
3153
- <BottomContainer>
3154
- <Timestamp>
3155
- <TimestampText>Just now</TimestampText>
3156
- </Timestamp>
3157
- <ReactionContainer>
3158
- <ReactionButton>
3159
- <ThumbsUpIcon strokeWidth={1.4} color="#45556C" />
3160
- </ReactionButton>
3161
- <ReactionButton>
3162
- <ThumbsDownIcon strokeWidth={1.4} color="#45556C" />
3163
- </ReactionButton>
3164
- <ReactionButton>
3165
- <PersonWithSoundWavesIcon />
3166
- </ReactionButton>
3167
- </ReactionContainer>
3168
- </BottomContainer>
3169
- </MessageContainer>
3170
- </Container>
3171
- )
3163
+ return (
3164
+ <Container>
3165
+ <MessageContainer>
3166
+ <BotHeader>
3167
+ <BotLabel>Bot</BotLabel>
3168
+ </BotHeader>
3169
+ <MessageBubbleContainer>
3170
+ <AvatarContainer>
3171
+ <AvatarImage>
3172
+ <img
3173
+ alt={"logo"}
3174
+ src={
3175
+ (widget && widget.logo_url) ||
3176
+ "https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
3177
+ }
3178
+ />
3179
+ </AvatarImage>
3180
+ </AvatarContainer>
3181
+ <MessageCard>
3182
+ <MessageText>Hi Roger! How may help you today?</MessageText>
3183
+ <SuggestionContainer>
3184
+ {suggestionOptions.map((option, index) => (
3185
+ <SuggestionButton key={index}>{option}</SuggestionButton>
3186
+ ))}
3187
+ </SuggestionContainer>
3188
+ </MessageCard>
3189
+ </MessageBubbleContainer>
3190
+ <BottomContainer>
3191
+ <Timestamp>
3192
+ <TimestampText>Just now</TimestampText>
3193
+ </Timestamp>
3194
+ <ReactionContainer>
3195
+ <ReactionButton>
3196
+ <ThumbsUpIcon strokeWidth={1.4} color="#45556C" />
3197
+ </ReactionButton>
3198
+ <ReactionButton>
3199
+ <ThumbsDownIcon strokeWidth={1.4} color="#45556C" />
3200
+ </ReactionButton>
3201
+ <ReactionButton>
3202
+ <PersonWithSoundWavesIcon />
3203
+ </ReactionButton>
3204
+ </ReactionContainer>
3205
+ </BottomContainer>
3206
+ </MessageContainer>
3207
+ </Container>
3208
+ );
3172
3209
  };
3173
3210
 
3174
3211
  const PersonWithSoundWavesIcon = () => (
@@ -3196,7 +3233,11 @@ const App = ({
3196
3233
 
3197
3234
  return (
3198
3235
  <ScaleSizeProvider widgetSize={widget_size}>
3199
- <WidgetPreview className="widget_preview" isExpanded={isExpanded}>
3236
+ <WidgetPreview
3237
+ className="widget_preview"
3238
+ isExpanded={isExpanded}
3239
+ size={widget_size}
3240
+ >
3200
3241
  {open ? (
3201
3242
  <ChatWrapper className="widget_chat">
3202
3243
  <ChatHeaderTop
@@ -3213,6 +3254,11 @@ const App = ({
3213
3254
  <ChatContentWrapper
3214
3255
  clsassName="widget_chat_content"
3215
3256
  ref={containerEl}
3257
+ isMessageContainer={
3258
+ (sourceState == "new_user" && widget.user_consent == false) ||
3259
+ (sourceState !== "new_user" &&
3260
+ !sourceState?.includes("browser"))
3261
+ }
3216
3262
  >
3217
3263
  {/* notes in the chat */}
3218
3264
  {false && <BodyWrappertopContainer />}
@@ -3226,7 +3272,7 @@ const App = ({
3226
3272
  widget={widget}
3227
3273
  style={style}
3228
3274
  />
3229
-
3275
+
3230
3276
  {sourceState === "new_user" && widget.user_consent == true && (
3231
3277
  <ConsentPopup
3232
3278
  formData={fields}
@@ -3305,9 +3351,11 @@ const App = ({
3305
3351
  </AvatarImage>
3306
3352
  </AvatarContainer>
3307
3353
  <MessageCard>
3308
- <MessageText style={{
3309
- marginBottom: "0px"
3310
- }}>
3354
+ <MessageText
3355
+ style={{
3356
+ marginBottom: "0px",
3357
+ }}
3358
+ >
3311
3359
  <ThreeDotTyping>
3312
3360
  <div class="typing-dots">
3313
3361
  <div class="dot"></div>
@@ -3375,7 +3423,7 @@ const Footer = ({
3375
3423
 
3376
3424
  const send = () => {
3377
3425
  //
3378
- console.log("typed message", typedMessage)
3426
+ console.log("typed message", typedMessage);
3379
3427
  if (typedMessage.trim()) {
3380
3428
  sendMessage(typedMessage);
3381
3429
  }
@@ -3528,7 +3576,8 @@ const BodyWrapper = ({
3528
3576
  {messages.map((message, key) => (
3529
3577
  <>
3530
3578
  {((sourceState == "new_user" && widget.user_consent == false) ||
3531
- sourceState !== "new_user") && (
3579
+ (sourceState !== "new_user" &&
3580
+ !sourceState.includes("browser"))||(widget?.user_consent == true && widget?.lead_form_id === null)) && (
3532
3581
  <Message
3533
3582
  {...{ key, ...message }}
3534
3583
  sendMessage={sendMessage}
@@ -3917,23 +3966,18 @@ const ChatHeaderTop = ({
3917
3966
  }) => {
3918
3967
  const scale = useScaleContext();
3919
3968
  const [isOpen, setIsOpen] = useState(false);
3920
- const dropDownRef = useRef(null)
3921
-
3969
+ const dropDownRef = useRef(null);
3922
3970
 
3923
3971
  const handleClickOutside = (event) => {
3924
3972
  const refData = dropDownRef.current;
3925
- if (
3926
- isOpen &&
3927
- dropDownRef.current &&
3928
- !refData.contains(event.target)
3929
- ) {
3973
+ if (isOpen && dropDownRef.current && !refData.contains(event.target)) {
3930
3974
  setIsOpen(!isOpen);
3931
3975
  }
3932
3976
  };
3933
-
3977
+
3934
3978
  useEffect(() => {
3935
3979
  document.addEventListener("click", handleClickOutside);
3936
-
3980
+
3937
3981
  return () => {
3938
3982
  document.removeEventListener("click", handleClickOutside);
3939
3983
  };
@@ -3960,7 +4004,10 @@ const ChatHeaderTop = ({
3960
4004
  />
3961
4005
  <ContentHeader>
3962
4006
  <ContentHeaderLeft>
3963
- <FormHeader style={{ color: widget.primary_color }}>
4007
+ <FormHeader
4008
+ size={scale.widgetSize}
4009
+ style={{ color: widget.primary_color }}
4010
+ >
3964
4011
  {widget && widget.name}
3965
4012
  </FormHeader>
3966
4013
  {/* <Paragraph
@@ -4060,74 +4107,93 @@ const ChatHeaderTop = ({
4060
4107
  height={20}
4061
4108
  style={{ color: "white", cursor: "pointer" }}
4062
4109
  /> */}
4063
- <div className="relative">
4064
- <EllipsisVertical
4065
- width={20}
4066
- height={20}
4067
- style={{ color: "white", cursor: "pointer" }}
4068
- onClick={() => setIsOpen(!isOpen)}
4069
- />
4110
+ <div className="relative">
4111
+ <EllipsisVertical
4112
+ width={20}
4113
+ height={20}
4114
+ style={{ color: "white", cursor: "pointer" }}
4115
+ onClick={() => setIsOpen(!isOpen)}
4116
+ />
4070
4117
 
4071
- {/* Dropdown Menu */}
4072
- {isOpen && (
4073
- <div style={{
4074
- width: "72px",
4075
- height: "max-content",
4076
- position: "absolute",
4077
- top: "30px",
4078
- right: "10px",
4079
- padding: "6px",
4080
- borderRadius:"8px",
4081
- display: "flex",
4082
- flexDirection:"column",
4083
- gap: "4px",
4084
- background:"white",
4085
- boxShadow: "0px 2px 6px #00000040",
4086
- zIndex: 50
4087
-
4088
- }}
4089
- ref={dropDownRef}
4090
- >
4091
- <span
4092
- style={{
4093
-
4094
- width: "100%",
4095
- background: "white",
4096
- fontSize: "12px",
4097
- display:"flex",
4098
- alignItems: "center",
4099
- cursor: "pointer"
4100
- }}
4101
- className="text-gray-900 hover:text-black whitespace-nowrap leading-normal"
4102
- onClick={() => {
4103
- restart();
4104
- setIsOpen(false);
4105
- }}
4106
- >
4107
- Restart Chat
4108
- </span>
4109
- <span
4110
-
4111
- onClick={() => {
4112
- exit();
4113
- setIsOpen(false);
4114
- }}
4115
- className="text-gray-900 hover:text-black whitespace-nowrap leading-normal"
4118
+ {/* Dropdown Menu
4119
+ {isOpen && (
4120
+ <div
4116
4121
  style={{
4117
-
4118
- width: "100%",
4122
+ width: "72px",
4123
+ height: "max-content",
4124
+ position: "absolute",
4125
+ top: "30px",
4126
+ right: "10px",
4127
+ padding: "6px",
4128
+ borderRadius: "8px",
4129
+ display: "flex",
4130
+ flexDirection: "column",
4131
+ gap: "4px",
4119
4132
  background: "white",
4120
- fontSize: "12px",
4121
- display:"flex",
4122
- alignItems: "center",
4123
- cursor: "pointer"
4133
+ boxShadow: "0px 2px 6px #00000040",
4134
+ zIndex: 50,
4124
4135
  }}
4136
+ ref={dropDownRef}
4125
4137
  >
4126
- End Chat
4127
- </span>
4128
- </div>
4129
- )}
4130
- </div>
4138
+ <span
4139
+ style={{
4140
+ width: "100%",
4141
+ background: "white",
4142
+ fontSize:
4143
+ "clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem)",
4144
+ display: "flex",
4145
+ alignItems: "center",
4146
+ cursor: "pointer",
4147
+ }}
4148
+ className="text-gray-900 hover:text-black whitespace-nowrap leading-normal"
4149
+ onClick={() => {
4150
+ restart();
4151
+ setIsOpen(false);
4152
+ }}
4153
+ >
4154
+ Restart Chat
4155
+ </span>
4156
+ <span
4157
+ onClick={() => {
4158
+ exit();
4159
+ setIsOpen(false);
4160
+ }}
4161
+ className="text-gray-900 hover:text-black whitespace-nowrap leading-normal"
4162
+ style={{
4163
+ width: "100%",
4164
+ background: "white",
4165
+ fontSize:
4166
+ "clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem)",
4167
+ display: "flex",
4168
+ alignItems: "center",
4169
+ cursor: "pointer",
4170
+ }}
4171
+ >
4172
+ End Chat
4173
+ </span>
4174
+ </div>
4175
+ )} */}
4176
+ {isOpen && (
4177
+ <DropdownContainer ref={dropDownRef}>
4178
+ <DropdownItem
4179
+ onClick={() => {
4180
+ restart();
4181
+ setIsOpen(false);
4182
+ }}
4183
+ >
4184
+ Restart Chat
4185
+ </DropdownItem>
4186
+ <DropdownItem
4187
+ onClick={() => {
4188
+ exit();
4189
+ setIsOpen(false);
4190
+ }}
4191
+ >
4192
+ End Chat
4193
+ </DropdownItem>
4194
+ </DropdownContainer>
4195
+ )}
4196
+ </div>
4131
4197
  </div>
4132
4198
  </ContentHeaderRight>
4133
4199
  </ContentHeader>
@@ -4182,16 +4248,15 @@ const AiResponse = ({
4182
4248
  <TimestampText>{formatTimeAMPM(timestamp)}</TimestampText>
4183
4249
  </Timestamp>
4184
4250
  <AiFeedbackButtonsWrapper
4185
- options={output.buttons}
4186
- sendFeedback={sendFeedback}
4187
- sendMessage={sendMessage}
4188
- event_id={event_id}
4189
- />
4251
+ options={output.buttons}
4252
+ sendFeedback={sendFeedback}
4253
+ sendMessage={sendMessage}
4254
+ event_id={event_id}
4255
+ />
4190
4256
  </BottomContainer>
4191
4257
  </MessageContainer>
4192
4258
  </Container>
4193
4259
  </MessageBox>
4194
-
4195
4260
  </>
4196
4261
  );
4197
4262
  };
@@ -4245,10 +4310,12 @@ const ChatAssistant = ({
4245
4310
  </AvatarContainer>
4246
4311
  <MessageCard>
4247
4312
  {type === "text_with_btns" ? (
4248
- <div style={{
4249
- marginBottom: "12px"
4250
- }}>
4251
- {console.log("check scenarios",outputStruct)}
4313
+ <div
4314
+ style={{
4315
+ marginBottom: "12px",
4316
+ }}
4317
+ >
4318
+ {console.log("check scenarios", outputStruct)}
4252
4319
  <AssistantMd mdText={outputStruct.text}></AssistantMd>
4253
4320
  </div>
4254
4321
  ) : (
@@ -4257,16 +4324,15 @@ const ChatAssistant = ({
4257
4324
  <AssistantMd mdText={outputStruct.value}></AssistantMd>
4258
4325
  </div>
4259
4326
  )}
4260
- {type === "text_with_btns" && (
4261
- <>
4262
-
4263
- <ButtonsWrapper
4264
- options={outputStruct.buttons}
4265
- sendMessage={sendMessage}
4266
- widget={widget}
4267
- />
4268
- </>
4269
- )}
4327
+ {type === "text_with_btns" && (
4328
+ <>
4329
+ <ButtonsWrapper
4330
+ options={outputStruct.buttons}
4331
+ sendMessage={sendMessage}
4332
+ widget={widget}
4333
+ />
4334
+ </>
4335
+ )}
4270
4336
  </MessageCard>
4271
4337
  </MessageBubbleContainer>
4272
4338
  <BottomContainer>
@@ -4277,7 +4343,6 @@ const ChatAssistant = ({
4277
4343
  </MessageContainer>
4278
4344
  </Container>
4279
4345
  </MessageBox>
4280
-
4281
4346
  </>
4282
4347
  );
4283
4348
  };
@@ -4331,112 +4396,99 @@ const FeedbackBtn = ({
4331
4396
  </svg>
4332
4397
  );
4333
4398
  return (
4334
-
4335
-
4336
- // <ReactionContainer
4337
- // // onMouseOver={() => setHovered(true)}
4338
- // // onMouseLeave={() => setHovered(false)}
4339
-
4340
- // type="button"
4341
- // onClick={() => {
4342
- // if (action.contract_action) {
4343
- // sendFeedback(
4344
- // action.contract_action.action === "send_satisfied_feedback"
4345
- // ? "satisfied"
4346
- // : "not_satisfied",
4347
- // event_id
4348
- // );
4349
- // } else if (action.send_rly) {
4350
- // sendMessage(action.send_rly);
4351
- // }
4352
- // }}
4353
- // // className="widget_btn"
4354
- // size={scale.widgetSize}
4355
- // >
4356
- // {console.log("label", label)}
4357
- // {/* <AssistantMd mdText={label} /> */}
4358
-
4359
- // {
4360
- // label === "Satisfied" ? (
4361
- // <ReactionButton>
4362
- // <ThumbsUpIcon strokeWidth={1.4} color="#45556C" />
4363
- // </ReactionButton>
4364
- // ) : null
4365
- // // (
4366
- // // <svg
4367
- // // xmlns="
4368
- // // http://www.w3.org/2000/svg"
4369
- // // viewBox="0 0 24 24"
4370
- // // fill="none"
4371
- // // width="24px"
4372
- // // height="24px"
4373
- // // >
4374
- // // <path
4375
- // // d="M16 11.0638V12.5C16 13.8807 17.1193 15 18.5 15C19.8807 15 21 13.8807 21 12.5V6.5C21 5.11929 19.8807 4 18.5 4C17.1193 4 16 5.11929 16 6.5V8.26803M16 11.0638C15.9981 11.8772 15.9848 12.3486 15.9004 12.8057C15.812 13.2848 15.6657 13.7513 15.4645 14.1949C15.2378 14.6948 14.9181 15.154 14.2787 16.0725L11.2669 20.3986C11.1903 20.5085 11.1521 20.5634 11.1167 20.6041C10.764 21.0097 10.1537 21.0639 9.73502 20.7268C9.69309 20.6931 9.64573 20.6457 9.55102 20.551C9.38747 20.3874 9.30569 20.3057 9.23586 20.2251C8.55824 19.4437 8.33094 18.3683 8.63439 17.3796C8.66566 17.2777 8.70737 17.1698 8.79074 16.954L8.83852 16.8304C8.97239 16.484 9.03932 16.3108 9.06475 16.1739C9.21585 15.3603 8.67951 14.578 7.86615 14.4256C7.72925 14.4 7.54357 14.4 7.17222 14.4H4.7857C3.82553 14.4 3.34542 14.4 3.00125 14.2049C2.69915 14.0336 2.46584 13.7628 2.34113 13.4387C2.19905 13.0694 2.27007 12.5946 2.4121 11.645L2.94384 8.08995C3.16087 6.63894 3.26938 5.91343 3.62294 5.36807C3.93452 4.88744 4.3772 4.50605 4.89864 4.26899C5.4903 4 6.22388 4 7.69103 4H11.2C12.8802 4 13.7203 4 14.362 4.32698C14.9265 4.6146 15.3854 5.07354 15.673 5.63803C15.9635 6.20815 15.9964 6.93482 16 8.26803M16 11.0638V8.26803"
4376
- // // stroke="#ED3535"
4377
- // // strokeWidth="1.7"
4378
- // // strokeLinecap="round"
4379
- // // strokeLinejoin="round"
4380
- // // />
4381
- // // </svg>
4382
- // // )
4383
- // }
4384
- // {label === "Not Satisfied" ? (
4385
- // <ReactionButton>
4386
- // <ThumbsDownIcon strokeWidth={1.4} color="#45556C" />
4387
- // </ReactionButton>
4388
- // ) : null}
4389
- // {label === "Hand over to Live agent" ? (
4390
- // <ReactionButton>
4391
- // <PersonWithSoundWavesIcon />
4392
- // </ReactionButton>
4393
- // ) : null}
4394
-
4395
- // </ReactionContainer>
4396
-
4397
- <ReactionButton
4398
- // onMouseOver={() => setHovered(true)}
4399
- // onMouseLeave={() => setHovered(false)}
4400
-
4401
- type="button"
4402
- onClick={() => {
4403
- if (action.contract_action) {
4404
- sendFeedback(
4405
- action.contract_action.action === "send_satisfied_feedback"
4406
- ? "satisfied"
4407
- : "not_satisfied",
4408
- event_id
4409
- );
4410
- } else if (action.send_rly) {
4411
- sendMessage(action.send_rly);
4412
- }
4413
- }}
4414
-
4415
- size={scale.widgetSize}
4416
- >
4417
- {console.log("label", label)}
4418
- {/* <AssistantMd mdText={label} /> */}
4419
- {label === "Satisfied" ? (
4420
-
4421
- <ThumbsUpIcon strokeWidth={1.4} color="#45556C" />
4422
- ) : null
4423
-
4399
+ // <ReactionContainer
4400
+ // // onMouseOver={() => setHovered(true)}
4401
+ // // onMouseLeave={() => setHovered(false)}
4402
+
4403
+ // type="button"
4404
+ // onClick={() => {
4405
+ // if (action.contract_action) {
4406
+ // sendFeedback(
4407
+ // action.contract_action.action === "send_satisfied_feedback"
4408
+ // ? "satisfied"
4409
+ // : "not_satisfied",
4410
+ // event_id
4411
+ // );
4412
+ // } else if (action.send_rly) {
4413
+ // sendMessage(action.send_rly);
4414
+ // }
4415
+ // }}
4416
+ // // className="widget_btn"
4417
+ // size={scale.widgetSize}
4418
+ // >
4419
+ // {console.log("label", label)}
4420
+ // {/* <AssistantMd mdText={label} /> */}
4421
+
4422
+ // {
4423
+ // label === "Satisfied" ? (
4424
+ // <ReactionButton>
4425
+ // <ThumbsUpIcon strokeWidth={1.4} color="#45556C" />
4426
+ // </ReactionButton>
4427
+ // ) : null
4428
+ // // (
4429
+ // // <svg
4430
+ // // xmlns="
4431
+ // // http://www.w3.org/2000/svg"
4432
+ // // viewBox="0 0 24 24"
4433
+ // // fill="none"
4434
+ // // width="24px"
4435
+ // // height="24px"
4436
+ // // >
4437
+ // // <path
4438
+ // // d="M16 11.0638V12.5C16 13.8807 17.1193 15 18.5 15C19.8807 15 21 13.8807 21 12.5V6.5C21 5.11929 19.8807 4 18.5 4C17.1193 4 16 5.11929 16 6.5V8.26803M16 11.0638C15.9981 11.8772 15.9848 12.3486 15.9004 12.8057C15.812 13.2848 15.6657 13.7513 15.4645 14.1949C15.2378 14.6948 14.9181 15.154 14.2787 16.0725L11.2669 20.3986C11.1903 20.5085 11.1521 20.5634 11.1167 20.6041C10.764 21.0097 10.1537 21.0639 9.73502 20.7268C9.69309 20.6931 9.64573 20.6457 9.55102 20.551C9.38747 20.3874 9.30569 20.3057 9.23586 20.2251C8.55824 19.4437 8.33094 18.3683 8.63439 17.3796C8.66566 17.2777 8.70737 17.1698 8.79074 16.954L8.83852 16.8304C8.97239 16.484 9.03932 16.3108 9.06475 16.1739C9.21585 15.3603 8.67951 14.578 7.86615 14.4256C7.72925 14.4 7.54357 14.4 7.17222 14.4H4.7857C3.82553 14.4 3.34542 14.4 3.00125 14.2049C2.69915 14.0336 2.46584 13.7628 2.34113 13.4387C2.19905 13.0694 2.27007 12.5946 2.4121 11.645L2.94384 8.08995C3.16087 6.63894 3.26938 5.91343 3.62294 5.36807C3.93452 4.88744 4.3772 4.50605 4.89864 4.26899C5.4903 4 6.22388 4 7.69103 4H11.2C12.8802 4 13.7203 4 14.362 4.32698C14.9265 4.6146 15.3854 5.07354 15.673 5.63803C15.9635 6.20815 15.9964 6.93482 16 8.26803M16 11.0638V8.26803"
4439
+ // // stroke="#ED3535"
4440
+ // // strokeWidth="1.7"
4441
+ // // strokeLinecap="round"
4442
+ // // strokeLinejoin="round"
4443
+ // // />
4444
+ // // </svg>
4445
+ // // )
4446
+ // }
4447
+ // {label === "Not Satisfied" ? (
4448
+ // <ReactionButton>
4449
+ // <ThumbsDownIcon strokeWidth={1.4} color="#45556C" />
4450
+ // </ReactionButton>
4451
+ // ) : null}
4452
+ // {label === "Hand over to Live agent" ? (
4453
+ // <ReactionButton>
4454
+ // <PersonWithSoundWavesIcon />
4455
+ // </ReactionButton>
4456
+ // ) : null}
4457
+
4458
+ // </ReactionContainer>
4459
+
4460
+ <ReactionButton
4461
+ // onMouseOver={() => setHovered(true)}
4462
+ // onMouseLeave={() => setHovered(false)}
4463
+
4464
+ type="button"
4465
+ onClick={() => {
4466
+ if (action.contract_action) {
4467
+ sendFeedback(
4468
+ action.contract_action.action === "send_satisfied_feedback"
4469
+ ? "satisfied"
4470
+ : "not_satisfied",
4471
+ event_id
4472
+ );
4473
+ } else if (action.send_rly) {
4474
+ sendMessage(action.send_rly);
4424
4475
  }
4425
- {
4426
- label === "Not Satisfied"?(
4427
-
4428
- <ThumbsDownIcon strokeWidth={1.4} color="#45556C" />
4429
- ):null
4430
- }
4431
- {
4432
- label === "Hand over to Live agent"?(
4433
- <PersonWithSoundWavesIcon width="24" height="24" />
4434
- // <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" color="blue" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hand-coins text-brand-primary w-4 h-4"><path d="M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17"></path><path d="m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"></path><path d="m2 16 6 6"></path><circle cx="16" cy="9" r="2.9"></circle><circle cx="6" cy="5" r="3"></circle></svg>
4435
- ):null
4436
- }
4437
- </ReactionButton>
4438
-
4439
-
4476
+ }}
4477
+ size={scale.widgetSize}
4478
+ >
4479
+ {console.log("label", label)}
4480
+ {/* <AssistantMd mdText={label} /> */}
4481
+ {label === "Satisfied" ? (
4482
+ <ThumbsUpIcon strokeWidth={1.4} color="#45556C" />
4483
+ ) : null}
4484
+ {label === "Not Satisfied" ? (
4485
+ <ThumbsDownIcon strokeWidth={1.4} color="#45556C" />
4486
+ ) : null}
4487
+ {label === "Hand over to Live agent" ? (
4488
+ <PersonWithSoundWavesIcon width="24" height="24" />
4489
+ ) : // <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" color="blue" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hand-coins text-brand-primary w-4 h-4"><path d="M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17"></path><path d="m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"></path><path d="m2 16 6 6"></path><circle cx="16" cy="9" r="2.9"></circle><circle cx="6" cy="5" r="3"></circle></svg>
4490
+ null}
4491
+ </ReactionButton>
4440
4492
  );
4441
4493
  };
4442
4494
 
@@ -4465,10 +4517,10 @@ const AiFeedbackButtonsWrapper = ({
4465
4517
  const ButtonsWrapper = ({ options, sendMessage, widget }) => {
4466
4518
  return (
4467
4519
  <SuggestionContainer>
4468
- {options.map(({ label, action }, key) => (
4469
- <>
4470
- {console.log("send message", sendMessage)}
4471
- {/* <SuggestionButton
4520
+ {options.map(({ label, action }, key) => (
4521
+ <>
4522
+ {console.log("send message", sendMessage)}
4523
+ {/* <SuggestionButton
4472
4524
  value={action.send_rly}
4473
4525
  key={key}
4474
4526
  onClick={() => {
@@ -4477,15 +4529,15 @@ const ButtonsWrapper = ({ options, sendMessage, widget }) => {
4477
4529
 
4478
4530
  >{label}</SuggestionButton> */}
4479
4531
  <WidgetBtn
4480
- label={label}
4481
- value={action.send_rly}
4482
- key={key}
4483
- sendMessage={sendMessage}
4484
- widget={widget}
4485
- ></WidgetBtn>
4486
- </>
4487
- ))}
4488
- </SuggestionContainer>
4532
+ label={label}
4533
+ value={action.send_rly}
4534
+ key={key}
4535
+ sendMessage={sendMessage}
4536
+ widget={widget}
4537
+ ></WidgetBtn>
4538
+ </>
4539
+ ))}
4540
+ </SuggestionContainer>
4489
4541
  // <ButtonWrapper>
4490
4542
  // {options.map(({ label, action }, key) => (
4491
4543
  // <WidgetBtn
@@ -4567,7 +4619,7 @@ const UserAssistant = ({
4567
4619
  style={{
4568
4620
  color: `${widget.user_message_text_color}`,
4569
4621
  fontFamily: "'Inter', 'Open Sans'",
4570
- fontSize: "14px",
4622
+ fontSize: "clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem)",
4571
4623
  fontStyle: "normal",
4572
4624
  fontWeight: 400,
4573
4625
  lineHeight: "20px",