@intentai/react 2.0.2 → 2.1.1

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 (3) hide show
  1. package/dist/index.js +442 -253
  2. package/dist/index.mjs +442 -253
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -222,28 +222,53 @@ var contentVariants = {
222
222
  var BreathingRing = ({ isActive }) => {
223
223
  const { reducedMotion } = useWidget();
224
224
  if (reducedMotion) return null;
225
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
226
- import_framer_motion.motion.div,
227
- {
228
- className: "fiq-breathing-ring",
229
- animate: {
230
- scale: isActive ? [1, 1.15, 1] : 1,
231
- opacity: isActive ? [0.5, 0.8, 0.5] : 0.5
232
- },
233
- transition: {
234
- duration: 3,
235
- repeat: Infinity,
236
- ease: "easeInOut"
237
- },
238
- style: {
239
- position: "absolute",
240
- inset: -8,
241
- borderRadius: "50%",
242
- background: "radial-gradient(circle, var(--widget-primary-glow) 0%, transparent 70%)",
243
- pointerEvents: "none"
225
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
226
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
227
+ import_framer_motion.motion.div,
228
+ {
229
+ animate: {
230
+ scale: isActive ? [1, 1.3, 1] : 1,
231
+ opacity: isActive ? [0.2, 0.4, 0.2] : 0.2
232
+ },
233
+ transition: {
234
+ duration: 2.5,
235
+ repeat: Infinity,
236
+ ease: "easeInOut"
237
+ },
238
+ style: {
239
+ position: "absolute",
240
+ inset: -16,
241
+ borderRadius: "50%",
242
+ background: "radial-gradient(circle, var(--widget-primary) 0%, transparent 70%)",
243
+ pointerEvents: "none",
244
+ filter: "blur(8px)"
245
+ }
244
246
  }
245
- }
246
- );
247
+ ),
248
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
249
+ import_framer_motion.motion.div,
250
+ {
251
+ className: "fiq-breathing-ring",
252
+ animate: {
253
+ scale: isActive ? [1, 1.08, 1] : 1,
254
+ opacity: isActive ? [0.6, 1, 0.6] : 0.6
255
+ },
256
+ transition: {
257
+ duration: 2,
258
+ repeat: Infinity,
259
+ ease: "easeInOut"
260
+ },
261
+ style: {
262
+ position: "absolute",
263
+ inset: -4,
264
+ borderRadius: "50%",
265
+ border: "2px solid var(--widget-primary)",
266
+ pointerEvents: "none",
267
+ opacity: 0.5
268
+ }
269
+ }
270
+ )
271
+ ] });
247
272
  };
248
273
  var AmbientOrb = ({ audioLevel, isRecording }) => {
249
274
  const { reducedMotion } = useWidget();
@@ -315,35 +340,33 @@ var AmbientOrb = ({ audioLevel, isRecording }) => {
315
340
  style: { transformOrigin: "center" }
316
341
  }
317
342
  ),
318
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: "translate(58, 55)", children: [
319
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
320
- import_framer_motion.motion.path,
321
- {
322
- d: "M20 4a6 6 0 0 0-6 6v16a6 6 0 0 0 12 0V10a6 6 0 0 0-6-6z",
323
- fill: "none",
324
- stroke: "white",
325
- strokeWidth: "2.5",
326
- strokeLinecap: "round",
327
- animate: {
328
- opacity: isRecording ? [1, 0.7, 1] : 1
329
- },
330
- transition: {
331
- duration: 1,
332
- repeat: isRecording ? Infinity : 0
333
- }
334
- }
335
- ),
336
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
337
- "path",
338
- {
339
- d: "M32 20v4a14 14 0 0 1-28 0v-4M20 38v10M12 48h16",
340
- fill: "none",
341
- stroke: "white",
342
- strokeWidth: "2.5",
343
- strokeLinecap: "round"
344
- }
345
- )
346
- ] }),
343
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: "translate(70, 70)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
344
+ import_framer_motion.motion.g,
345
+ {
346
+ animate: {
347
+ opacity: isRecording ? [1, 0.7, 1] : 1
348
+ },
349
+ transition: {
350
+ duration: 1,
351
+ repeat: isRecording ? Infinity : 0
352
+ },
353
+ children: [
354
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "-8", y: "-20", width: "16", height: "26", rx: "8", fill: "white" }),
355
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
356
+ "path",
357
+ {
358
+ d: "M-14 0 v6 a14 14 0 0 0 28 0 v-6",
359
+ fill: "none",
360
+ stroke: "white",
361
+ strokeWidth: "3",
362
+ strokeLinecap: "round"
363
+ }
364
+ ),
365
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "0", y1: "20", x2: "0", y2: "28", stroke: "white", strokeWidth: "3", strokeLinecap: "round" }),
366
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "-8", y1: "28", x2: "8", y2: "28", stroke: "white", strokeWidth: "3", strokeLinecap: "round" })
367
+ ]
368
+ }
369
+ ) }),
347
370
  particles.map((particle) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
348
371
  import_framer_motion.motion.circle,
349
372
  {
@@ -523,11 +546,13 @@ var CategorySelector = ({ categories, selected, onSelect }) => {
523
546
  style: {
524
547
  display: "block",
525
548
  fontSize: 12,
526
- fontWeight: 500,
549
+ fontWeight: 600,
527
550
  color: "var(--widget-text-muted)",
528
- marginBottom: 10
551
+ marginBottom: 12,
552
+ textTransform: "uppercase",
553
+ letterSpacing: "0.05em"
529
554
  },
530
- children: "What's this about?"
555
+ children: "Category"
531
556
  }
532
557
  ),
533
558
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -538,31 +563,50 @@ var CategorySelector = ({ categories, selected, onSelect }) => {
538
563
  flexWrap: "wrap",
539
564
  gap: 8
540
565
  },
541
- children: categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
566
+ children: categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
542
567
  import_framer_motion.motion.button,
543
568
  {
544
- whileHover: { scale: 1.03 },
545
- whileTap: { scale: 0.97 },
569
+ whileHover: { scale: 1.04, y: -1 },
570
+ whileTap: { scale: 0.96 },
546
571
  onClick: () => onSelect(category.id),
547
572
  style: {
548
- padding: "8px 16px",
549
- background: selected === category.id ? "var(--widget-primary)" : "transparent",
550
- border: `1.5px solid ${selected === category.id ? "var(--widget-primary)" : "var(--widget-glass-border)"}`,
551
- borderRadius: 20,
573
+ padding: "10px 18px",
574
+ background: selected === category.id ? "linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)" : "var(--widget-glass-bg)",
575
+ border: `1.5px solid ${selected === category.id ? "transparent" : "var(--widget-glass-border)"}`,
576
+ borderRadius: 24,
552
577
  cursor: "pointer",
553
- transition: "all 0.2s ease"
578
+ transition: "all 0.2s ease",
579
+ boxShadow: selected === category.id ? "0 4px 12px -2px var(--widget-primary-glow)" : "0 2px 4px rgba(0,0,0,0.1)",
580
+ position: "relative",
581
+ overflow: "hidden"
554
582
  },
555
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
556
- "span",
557
- {
558
- style: {
559
- fontSize: 13,
560
- fontWeight: 500,
561
- color: selected === category.id ? "white" : "var(--widget-text-primary)"
562
- },
563
- children: category.label
564
- }
565
- )
583
+ children: [
584
+ selected === category.id && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
585
+ "div",
586
+ {
587
+ style: {
588
+ position: "absolute",
589
+ inset: 0,
590
+ background: "linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%)",
591
+ borderRadius: "inherit",
592
+ pointerEvents: "none"
593
+ }
594
+ }
595
+ ),
596
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
597
+ "span",
598
+ {
599
+ style: {
600
+ fontSize: 13,
601
+ fontWeight: 600,
602
+ color: selected === category.id ? "white" : "var(--widget-text-primary)",
603
+ position: "relative",
604
+ zIndex: 1
605
+ },
606
+ children: category.label
607
+ }
608
+ )
609
+ ]
566
610
  },
567
611
  category.id
568
612
  ))
@@ -726,8 +770,8 @@ var MagneticButton = ({ children, onClick, onPressStart, onPressEnd, variant = "
726
770
  const centerX = rect.left + rect.width / 2;
727
771
  const centerY = rect.top + rect.height / 2;
728
772
  setMagnetOffset({
729
- x: (e.clientX - centerX) * 0.1,
730
- y: (e.clientY - centerY) * 0.1
773
+ x: (e.clientX - centerX) * 0.08,
774
+ y: (e.clientY - centerY) * 0.08
731
775
  });
732
776
  };
733
777
  const handleMouseLeave = () => {
@@ -735,35 +779,49 @@ var MagneticButton = ({ children, onClick, onPressStart, onPressEnd, variant = "
735
779
  };
736
780
  const baseStyles = {
737
781
  width: "100%",
738
- padding: "14px 24px",
782
+ padding: "16px 28px",
739
783
  fontSize: 15,
740
784
  fontWeight: 600,
741
- borderRadius: 12,
785
+ borderRadius: 14,
742
786
  border: "none",
743
787
  cursor: disabled ? "not-allowed" : "pointer",
744
- transition: "background 0.2s, opacity 0.2s",
788
+ transition: "all 0.2s ease",
745
789
  display: "flex",
746
790
  alignItems: "center",
747
791
  justifyContent: "center",
748
- gap: 8
792
+ gap: 10,
793
+ letterSpacing: "0.01em",
794
+ position: "relative",
795
+ overflow: "hidden"
749
796
  };
750
797
  const variantStyles = {
751
798
  primary: {
752
- background: "var(--widget-primary)",
753
- color: "white"
799
+ background: "linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)",
800
+ color: "white",
801
+ boxShadow: `
802
+ 0 4px 16px -2px var(--widget-primary-glow),
803
+ 0 2px 8px -2px rgba(0, 0, 0, 0.3),
804
+ inset 0 1px 1px rgba(255, 255, 255, 0.2)
805
+ `
754
806
  },
755
807
  secondary: {
756
808
  background: "var(--widget-glass-bg)",
757
809
  color: "var(--widget-text-primary)",
758
- border: "1px solid var(--widget-glass-border)"
810
+ border: "1px solid var(--widget-glass-border)",
811
+ boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
759
812
  },
760
813
  ghost: {
761
814
  background: "transparent",
762
815
  color: "var(--widget-text-secondary)"
763
816
  },
764
817
  recording: {
765
- background: "var(--widget-recording)",
766
- color: "white"
818
+ background: "linear-gradient(145deg, #ef4444 0%, #dc2626 100%)",
819
+ color: "white",
820
+ boxShadow: `
821
+ 0 4px 20px -2px var(--widget-recording-glow),
822
+ 0 0 40px -5px var(--widget-recording-glow),
823
+ inset 0 1px 1px rgba(255, 255, 255, 0.2)
824
+ `
767
825
  }
768
826
  };
769
827
  const handlePressStart = () => {
@@ -774,7 +832,7 @@ var MagneticButton = ({ children, onClick, onPressStart, onPressEnd, variant = "
774
832
  if (disabled || loading) return;
775
833
  onPressEnd?.();
776
834
  };
777
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
835
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
778
836
  import_framer_motion.motion.button,
779
837
  {
780
838
  ref: buttonRef,
@@ -794,24 +852,38 @@ var MagneticButton = ({ children, onClick, onPressStart, onPressEnd, variant = "
794
852
  y: magnetOffset.y,
795
853
  opacity: disabled ? 0.5 : 1
796
854
  },
797
- whileHover: { scale: disabled ? 1 : 1.02 },
855
+ whileHover: { scale: disabled ? 1 : 1.02, y: -1 },
798
856
  whileTap: { scale: disabled ? 1 : 0.97 },
799
857
  transition: springPresets.snappy,
800
858
  style: { ...baseStyles, ...variantStyles[variant] },
801
- children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
802
- import_framer_motion.motion.div,
803
- {
804
- animate: { rotate: 360 },
805
- transition: { duration: 1, repeat: Infinity, ease: "linear" },
806
- style: {
807
- width: 18,
808
- height: 18,
809
- border: "2px solid rgba(255,255,255,0.3)",
810
- borderTopColor: "white",
811
- borderRadius: "50%"
859
+ children: [
860
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
861
+ "div",
862
+ {
863
+ style: {
864
+ position: "absolute",
865
+ inset: 0,
866
+ background: "linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%)",
867
+ borderRadius: "inherit",
868
+ pointerEvents: "none"
869
+ }
812
870
  }
813
- }
814
- ) : children
871
+ ),
872
+ loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
873
+ import_framer_motion.motion.div,
874
+ {
875
+ animate: { rotate: 360 },
876
+ transition: { duration: 1, repeat: Infinity, ease: "linear" },
877
+ style: {
878
+ width: 20,
879
+ height: 20,
880
+ border: "2.5px solid rgba(255,255,255,0.3)",
881
+ borderTopColor: "white",
882
+ borderRadius: "50%"
883
+ }
884
+ }
885
+ ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { position: "relative", zIndex: 1, display: "flex", alignItems: "center", gap: 10 }, children })
886
+ ]
815
887
  }
816
888
  );
817
889
  };
@@ -1010,19 +1082,18 @@ var PremiumVoiceWidget = ({
1010
1082
  "aria-label": "Open feedback widget",
1011
1083
  "aria-expanded": isExpanded,
1012
1084
  style: {
1013
- width: 56,
1014
- height: 56,
1085
+ width: 60,
1086
+ height: 60,
1015
1087
  borderRadius: "50%",
1016
1088
  border: "none",
1017
1089
  cursor: "pointer",
1018
1090
  position: "relative",
1019
- background: "var(--widget-glass-bg)",
1020
- backdropFilter: "blur(20px) saturate(180%)",
1021
- WebkitBackdropFilter: "blur(20px) saturate(180%)",
1091
+ background: `linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)`,
1022
1092
  boxShadow: `
1023
- inset 0 0 0 1px var(--widget-glass-highlight),
1024
- 0 4px 24px -4px rgba(0, 0, 0, 0.5),
1025
- 0 0 40px -10px var(--widget-primary-glow)
1093
+ 0 8px 32px -4px var(--widget-primary-glow),
1094
+ 0 4px 16px -2px rgba(0, 0, 0, 0.4),
1095
+ inset 0 1px 1px rgba(255, 255, 255, 0.3),
1096
+ inset 0 -1px 1px rgba(0, 0, 0, 0.2)
1026
1097
  `
1027
1098
  },
1028
1099
  children: [
@@ -1032,47 +1103,83 @@ var PremiumVoiceWidget = ({
1032
1103
  {
1033
1104
  style: {
1034
1105
  position: "absolute",
1035
- inset: 3,
1106
+ inset: 0,
1036
1107
  borderRadius: "50%",
1037
- background: `linear-gradient(135deg, var(--widget-primary) 0%, var(--widget-accent) 100%)`,
1038
- opacity: 0.9
1108
+ background: "linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%)",
1109
+ pointerEvents: "none"
1039
1110
  }
1040
1111
  }
1041
1112
  ),
1042
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1043
- "svg",
1113
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1114
+ "div",
1044
1115
  {
1045
- width: 24,
1046
- height: 24,
1047
- viewBox: "0 0 24 24",
1048
- fill: "none",
1049
- stroke: "white",
1050
- strokeWidth: 2,
1051
- strokeLinecap: "round",
1052
1116
  style: {
1053
1117
  position: "absolute",
1054
1118
  top: "50%",
1055
1119
  left: "50%",
1056
1120
  transform: "translate(-50%, -50%)",
1057
- zIndex: 1
1121
+ zIndex: 1,
1122
+ display: "flex",
1123
+ alignItems: "center",
1124
+ justifyContent: "center"
1058
1125
  },
1059
- children: [
1060
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
1061
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
1062
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
1063
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
1064
- ]
1126
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1127
+ "svg",
1128
+ {
1129
+ width: 26,
1130
+ height: 26,
1131
+ viewBox: "0 0 24 24",
1132
+ fill: "none",
1133
+ style: { filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.2))" },
1134
+ children: [
1135
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1136
+ "path",
1137
+ {
1138
+ d: "M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z",
1139
+ fill: "white",
1140
+ opacity: "0.15"
1141
+ }
1142
+ ),
1143
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1144
+ "path",
1145
+ {
1146
+ d: "M12 3a2.5 2.5 0 0 0-2.5 2.5v5a2.5 2.5 0 0 0 5 0v-5A2.5 2.5 0 0 0 12 3z",
1147
+ fill: "white"
1148
+ }
1149
+ ),
1150
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1151
+ "path",
1152
+ {
1153
+ d: "M16.5 10.5v1a4.5 4.5 0 0 1-9 0v-1",
1154
+ stroke: "white",
1155
+ strokeWidth: "2",
1156
+ strokeLinecap: "round",
1157
+ fill: "none"
1158
+ }
1159
+ ),
1160
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1161
+ "path",
1162
+ {
1163
+ d: "M12 15.5v2.5M9.5 18h5",
1164
+ stroke: "white",
1165
+ strokeWidth: "2",
1166
+ strokeLinecap: "round"
1167
+ }
1168
+ )
1169
+ ]
1170
+ }
1171
+ )
1065
1172
  }
1066
1173
  ),
1067
1174
  shouldShowAttentionPulse && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1068
1175
  import_framer_motion.motion.div,
1069
1176
  {
1070
1177
  initial: { scale: 1, opacity: 1 },
1071
- animate: { scale: 1.5, opacity: 0 },
1072
- transition: { duration: 1, repeat: 3 },
1178
+ animate: { scale: 1.6, opacity: 0 },
1179
+ transition: { duration: 1.2, repeat: 3 },
1073
1180
  style: {
1074
1181
  position: "absolute",
1075
- inset: 0,
1182
+ inset: -2,
1076
1183
  borderRadius: "50%",
1077
1184
  border: "2px solid var(--widget-primary)",
1078
1185
  pointerEvents: "none"
@@ -1086,19 +1193,22 @@ var PremiumVoiceWidget = ({
1086
1193
  animate: { scale: 1 },
1087
1194
  style: {
1088
1195
  position: "absolute",
1089
- top: -4,
1090
- right: -4,
1091
- width: 16,
1092
- height: 16,
1196
+ top: -2,
1197
+ right: -2,
1198
+ width: 18,
1199
+ height: 18,
1093
1200
  borderRadius: "50%",
1094
- background: "var(--widget-frustrated)",
1095
- border: "2px solid var(--widget-glass-bg)",
1201
+ background: "linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%)",
1202
+ border: "2px solid white",
1096
1203
  display: "flex",
1097
1204
  alignItems: "center",
1098
1205
  justifyContent: "center",
1099
- fontSize: 10
1206
+ fontSize: 11,
1207
+ fontWeight: 700,
1208
+ color: "white",
1209
+ boxShadow: "0 2px 8px rgba(239, 68, 68, 0.5)"
1100
1210
  },
1101
- children: "?"
1211
+ children: "!"
1102
1212
  }
1103
1213
  )
1104
1214
  ]
@@ -1162,11 +1272,15 @@ var PremiumVoiceWidget = ({
1162
1272
  animate: "expanded",
1163
1273
  exit: "trigger",
1164
1274
  style: {
1165
- background: "var(--widget-glass-bg)",
1166
- backdropFilter: "blur(20px) saturate(180%)",
1167
- WebkitBackdropFilter: "blur(20px) saturate(180%)",
1275
+ background: theme === "dark" ? "linear-gradient(180deg, rgba(28, 28, 32, 0.95) 0%, rgba(20, 20, 24, 0.98) 100%)" : "linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 248, 250, 0.98) 100%)",
1276
+ backdropFilter: "blur(24px) saturate(200%)",
1277
+ WebkitBackdropFilter: "blur(24px) saturate(200%)",
1168
1278
  border: "1px solid var(--widget-glass-border)",
1169
- boxShadow: "0 20px 60px -12px rgba(0, 0, 0, 0.5)",
1279
+ boxShadow: `
1280
+ 0 24px 80px -12px rgba(0, 0, 0, 0.6),
1281
+ 0 0 1px 0 rgba(255, 255, 255, 0.1) inset,
1282
+ 0 1px 0 0 rgba(255, 255, 255, 0.05) inset
1283
+ `,
1170
1284
  overflow: "hidden",
1171
1285
  display: "flex",
1172
1286
  flexDirection: "column"
@@ -1191,26 +1305,50 @@ var PremiumVoiceWidget = ({
1191
1305
  justifyContent: "space-between",
1192
1306
  alignItems: "center",
1193
1307
  padding: "20px 24px",
1194
- borderBottom: "1px solid var(--widget-glass-border)"
1308
+ borderBottom: "1px solid var(--widget-glass-border)",
1309
+ background: theme === "dark" ? "linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%)" : "linear-gradient(180deg, rgba(0,0,0,0.01) 0%, transparent 100%)"
1195
1310
  },
1196
1311
  children: [
1197
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1198
- "h2",
1199
- {
1200
- id: "widget-title",
1201
- style: {
1202
- fontSize: 18,
1203
- fontWeight: 700,
1204
- color: "var(--widget-text-primary)",
1205
- margin: 0
1206
- },
1207
- children: "Share Your Thoughts"
1208
- }
1209
- ),
1312
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
1313
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1314
+ "div",
1315
+ {
1316
+ style: {
1317
+ width: 36,
1318
+ height: 36,
1319
+ borderRadius: 10,
1320
+ background: "linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)",
1321
+ display: "flex",
1322
+ alignItems: "center",
1323
+ justifyContent: "center",
1324
+ boxShadow: "0 2px 8px -2px var(--widget-primary-glow)"
1325
+ },
1326
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "white", children: [
1327
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 3a2.5 2.5 0 0 0-2.5 2.5v5a2.5 2.5 0 0 0 5 0v-5A2.5 2.5 0 0 0 12 3z" }),
1328
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16.5 10.5v1a4.5 4.5 0 0 1-9 0v-1", stroke: "white", strokeWidth: "2", strokeLinecap: "round", fill: "none" }),
1329
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 15.5v2.5M9.5 18h5", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
1330
+ ] })
1331
+ }
1332
+ ),
1333
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1334
+ "h2",
1335
+ {
1336
+ id: "widget-title",
1337
+ style: {
1338
+ fontSize: 17,
1339
+ fontWeight: 700,
1340
+ color: "var(--widget-text-primary)",
1341
+ margin: 0,
1342
+ letterSpacing: "-0.01em"
1343
+ },
1344
+ children: "Share Feedback"
1345
+ }
1346
+ )
1347
+ ] }),
1210
1348
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1211
1349
  import_framer_motion.motion.button,
1212
1350
  {
1213
- whileHover: { scale: 1.1, rotate: 90 },
1351
+ whileHover: { scale: 1.1, backgroundColor: "var(--widget-glass-border)" },
1214
1352
  whileTap: { scale: 0.9 },
1215
1353
  onClick: handleClose,
1216
1354
  "aria-label": "Close widget",
@@ -1224,17 +1362,19 @@ var PremiumVoiceWidget = ({
1224
1362
  cursor: "pointer",
1225
1363
  display: "flex",
1226
1364
  alignItems: "center",
1227
- justifyContent: "center"
1365
+ justifyContent: "center",
1366
+ transition: "background 0.15s ease"
1228
1367
  },
1229
1368
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1230
1369
  "svg",
1231
1370
  {
1232
- width: 20,
1233
- height: 20,
1371
+ width: 18,
1372
+ height: 18,
1234
1373
  viewBox: "0 0 24 24",
1235
1374
  fill: "none",
1236
1375
  stroke: "currentColor",
1237
- strokeWidth: 2,
1376
+ strokeWidth: 2.5,
1377
+ strokeLinecap: "round",
1238
1378
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6L6 18M6 6l12 12" })
1239
1379
  }
1240
1380
  )
@@ -1248,41 +1388,44 @@ var PremiumVoiceWidget = ({
1248
1388
  {
1249
1389
  style: {
1250
1390
  display: "flex",
1251
- borderBottom: "1px solid var(--widget-glass-border)"
1391
+ padding: "8px 12px",
1392
+ gap: 4,
1393
+ background: "var(--widget-glass-bg)",
1394
+ margin: "0 16px",
1395
+ marginTop: 16,
1396
+ borderRadius: 12,
1397
+ border: "1px solid var(--widget-glass-border)"
1252
1398
  },
1253
1399
  children: ["voice", "text"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1254
1400
  import_framer_motion.motion.button,
1255
1401
  {
1256
1402
  onClick: () => setActiveTab(tab),
1257
- whileHover: { backgroundColor: "rgba(255,255,255,0.05)" },
1258
1403
  style: {
1259
1404
  flex: 1,
1260
- padding: "14px 0",
1405
+ padding: "10px 0",
1261
1406
  border: "none",
1262
- background: "transparent",
1263
- fontSize: 14,
1264
- fontWeight: 500,
1265
- color: activeTab === tab ? "var(--widget-primary)" : "var(--widget-text-secondary)",
1407
+ background: activeTab === tab ? "linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)" : "transparent",
1408
+ fontSize: 13,
1409
+ fontWeight: 600,
1410
+ color: activeTab === tab ? "white" : "var(--widget-text-secondary)",
1266
1411
  cursor: "pointer",
1267
- position: "relative"
1412
+ position: "relative",
1413
+ borderRadius: 8,
1414
+ transition: "all 0.2s ease",
1415
+ display: "flex",
1416
+ alignItems: "center",
1417
+ justifyContent: "center",
1418
+ gap: 6,
1419
+ boxShadow: activeTab === tab ? "0 2px 8px -2px var(--widget-primary-glow)" : "none"
1268
1420
  },
1421
+ whileHover: { scale: activeTab === tab ? 1 : 1.02 },
1422
+ whileTap: { scale: 0.98 },
1269
1423
  children: [
1270
- tab === "voice" ? "Voice" : "Text",
1271
- activeTab === tab && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1272
- import_framer_motion.motion.div,
1273
- {
1274
- layoutId: "activeTab",
1275
- style: {
1276
- position: "absolute",
1277
- bottom: -1,
1278
- left: 0,
1279
- right: 0,
1280
- height: 2,
1281
- background: "var(--widget-primary)"
1282
- },
1283
- transition: springPresets.smooth
1284
- }
1285
- )
1424
+ tab === "voice" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "currentColor", children: [
1425
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 3a2.5 2.5 0 0 0-2.5 2.5v5a2.5 2.5 0 0 0 5 0v-5A2.5 2.5 0 0 0 12 3z" }),
1426
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16.5 10.5v1a4.5 4.5 0 0 1-9 0v-1", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", fill: "none" })
1427
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 6h16M4 12h16M4 18h10" }) }),
1428
+ tab === "voice" ? "Voice" : "Text"
1286
1429
  ]
1287
1430
  },
1288
1431
  tab
@@ -1299,108 +1442,154 @@ var PremiumVoiceWidget = ({
1299
1442
  }
1300
1443
  ) }),
1301
1444
  activeTab === "voice" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center" }, children: [
1302
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AmbientOrb, { audioLevel, isRecording }),
1303
- isRecording && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1304
- RecordingTimer,
1305
- {
1306
- seconds: recordingSeconds,
1307
- maxDuration: maxRecordingDuration
1308
- }
1309
- ),
1310
- !isRecording && recordingSeconds === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1311
- "p",
1445
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1446
+ "div",
1312
1447
  {
1313
1448
  style: {
1314
- color: "var(--widget-text-secondary)",
1315
- fontSize: 14,
1316
- marginTop: 16
1449
+ background: "var(--widget-glass-bg)",
1450
+ borderRadius: 16,
1451
+ padding: "24px 16px",
1452
+ border: "1px solid var(--widget-glass-border)",
1453
+ marginBottom: 16
1317
1454
  },
1318
- children: "Hold to record"
1455
+ children: [
1456
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AmbientOrb, { audioLevel, isRecording }),
1457
+ isRecording && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1458
+ RecordingTimer,
1459
+ {
1460
+ seconds: recordingSeconds,
1461
+ maxDuration: maxRecordingDuration
1462
+ }
1463
+ ),
1464
+ !isRecording && recordingSeconds === 0 && !transcription && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1465
+ "p",
1466
+ {
1467
+ style: {
1468
+ color: "var(--widget-text-muted)",
1469
+ fontSize: 13,
1470
+ marginTop: 12,
1471
+ marginBottom: 0
1472
+ },
1473
+ children: "Click Record to start"
1474
+ }
1475
+ )
1476
+ ]
1319
1477
  }
1320
1478
  ),
1321
- (isRecording || transcription) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1479
+ (isRecording || transcription) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1322
1480
  TranscriptionDisplay,
1323
1481
  {
1324
1482
  text: transcription,
1325
1483
  isLive: isRecording
1326
1484
  }
1327
1485
  ) }),
1328
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1486
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1329
1487
  MagneticButton,
1330
1488
  {
1331
- onPressStart: handleStartRecording,
1332
- onPressEnd: handleStopRecording,
1489
+ onClick: isRecording ? handleStopRecording : handleStartRecording,
1333
1490
  variant: isRecording ? "recording" : "primary",
1334
1491
  children: isRecording ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
1335
1492
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1336
- "svg",
1493
+ import_framer_motion.motion.div,
1337
1494
  {
1338
- width: 16,
1339
- height: 16,
1340
- viewBox: "0 0 24 24",
1341
- fill: "currentColor",
1342
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: 12, cy: 12, r: 6 })
1495
+ animate: { scale: [1, 1.2, 1] },
1496
+ transition: { duration: 1, repeat: Infinity },
1497
+ style: {
1498
+ width: 10,
1499
+ height: 10,
1500
+ borderRadius: 2,
1501
+ background: "white"
1502
+ }
1343
1503
  }
1344
1504
  ),
1345
- "Recording..."
1346
- ] }) : transcription ? "Hold to record more" : "Hold to record"
1347
- }
1348
- ) })
1349
- ] }),
1350
- activeTab === "text" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
1351
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1352
- "textarea",
1353
- {
1354
- value: textContent,
1355
- onChange: (e) => setTextContent(e.target.value),
1356
- placeholder: "Tell us what you think...",
1357
- style: {
1358
- width: "100%",
1359
- minHeight: 150,
1360
- padding: 16,
1361
- fontSize: 14,
1362
- lineHeight: 1.6,
1363
- color: "var(--widget-text-primary)",
1364
- background: "var(--widget-glass-bg)",
1365
- border: "1px solid var(--widget-glass-border)",
1366
- borderRadius: 12,
1367
- resize: "vertical",
1368
- fontFamily: "inherit"
1369
- }
1370
- }
1371
- ),
1372
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1373
- "div",
1374
- {
1375
- style: {
1376
- display: "flex",
1377
- justifyContent: "flex-end",
1378
- marginTop: 8,
1379
- fontSize: 12,
1380
- color: "var(--widget-text-muted)"
1381
- },
1382
- children: [
1383
- textContent.length,
1384
- " / 5000"
1385
- ]
1505
+ "Stop Recording"
1506
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
1507
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 3a2.5 2.5 0 0 0-2.5 2.5v5a2.5 2.5 0 0 0 5 0v-5A2.5 2.5 0 0 0 12 3z" }) }),
1508
+ transcription ? "Record Again" : "Record"
1509
+ ] })
1386
1510
  }
1387
1511
  )
1388
- ] })
1512
+ ] }),
1513
+ activeTab === "text" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1514
+ "div",
1515
+ {
1516
+ style: {
1517
+ position: "relative",
1518
+ background: "var(--widget-glass-bg)",
1519
+ border: "1px solid var(--widget-glass-border)",
1520
+ borderRadius: 14,
1521
+ overflow: "hidden"
1522
+ },
1523
+ children: [
1524
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1525
+ "textarea",
1526
+ {
1527
+ value: textContent,
1528
+ onChange: (e) => setTextContent(e.target.value),
1529
+ placeholder: "Share your thoughts, ideas, or feedback...",
1530
+ style: {
1531
+ width: "100%",
1532
+ minHeight: 140,
1533
+ padding: 16,
1534
+ fontSize: 14,
1535
+ lineHeight: 1.7,
1536
+ color: "var(--widget-text-primary)",
1537
+ background: "transparent",
1538
+ border: "none",
1539
+ resize: "none",
1540
+ fontFamily: "inherit",
1541
+ outline: "none"
1542
+ }
1543
+ }
1544
+ ),
1545
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1546
+ "div",
1547
+ {
1548
+ style: {
1549
+ display: "flex",
1550
+ justifyContent: "flex-end",
1551
+ padding: "8px 12px",
1552
+ borderTop: "1px solid var(--widget-glass-border)",
1553
+ background: theme === "dark" ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.02)"
1554
+ },
1555
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1556
+ "span",
1557
+ {
1558
+ style: {
1559
+ fontSize: 11,
1560
+ fontWeight: 500,
1561
+ color: textContent.length > 4500 ? "var(--widget-recording)" : "var(--widget-text-muted)"
1562
+ },
1563
+ children: [
1564
+ textContent.length.toLocaleString(),
1565
+ " / 5,000"
1566
+ ]
1567
+ }
1568
+ )
1569
+ }
1570
+ )
1571
+ ]
1572
+ }
1573
+ ) })
1389
1574
  ] }),
1390
1575
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1391
1576
  "div",
1392
1577
  {
1393
1578
  style: {
1394
- padding: "16px 24px",
1395
- borderTop: "1px solid var(--widget-glass-border)"
1579
+ padding: "16px 24px 20px",
1580
+ borderTop: "1px solid var(--widget-glass-border)",
1581
+ background: theme === "dark" ? "linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.2) 100%)" : "linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.02) 100%)"
1396
1582
  },
1397
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1583
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1398
1584
  MagneticButton,
1399
1585
  {
1400
1586
  onClick: handleSubmit,
1401
1587
  disabled: !selectedCategory || activeTab === "voice" && !transcription || activeTab === "text" && !textContent.trim(),
1402
1588
  loading: isSubmitting,
1403
- children: "Submit Feedback"
1589
+ children: [
1590
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" }) }),
1591
+ "Submit Feedback"
1592
+ ]
1404
1593
  }
1405
1594
  )
1406
1595
  }