@intentai/react 2.0.2 → 2.1.0

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 +417 -222
  2. package/dist/index.mjs +417 -222
  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();
@@ -523,11 +548,13 @@ var CategorySelector = ({ categories, selected, onSelect }) => {
523
548
  style: {
524
549
  display: "block",
525
550
  fontSize: 12,
526
- fontWeight: 500,
551
+ fontWeight: 600,
527
552
  color: "var(--widget-text-muted)",
528
- marginBottom: 10
553
+ marginBottom: 12,
554
+ textTransform: "uppercase",
555
+ letterSpacing: "0.05em"
529
556
  },
530
- children: "What's this about?"
557
+ children: "Category"
531
558
  }
532
559
  ),
533
560
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -538,31 +565,50 @@ var CategorySelector = ({ categories, selected, onSelect }) => {
538
565
  flexWrap: "wrap",
539
566
  gap: 8
540
567
  },
541
- children: categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
568
+ children: categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
542
569
  import_framer_motion.motion.button,
543
570
  {
544
- whileHover: { scale: 1.03 },
545
- whileTap: { scale: 0.97 },
571
+ whileHover: { scale: 1.04, y: -1 },
572
+ whileTap: { scale: 0.96 },
546
573
  onClick: () => onSelect(category.id),
547
574
  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,
575
+ padding: "10px 18px",
576
+ background: selected === category.id ? "linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)" : "var(--widget-glass-bg)",
577
+ border: `1.5px solid ${selected === category.id ? "transparent" : "var(--widget-glass-border)"}`,
578
+ borderRadius: 24,
552
579
  cursor: "pointer",
553
- transition: "all 0.2s ease"
580
+ transition: "all 0.2s ease",
581
+ boxShadow: selected === category.id ? "0 4px 12px -2px var(--widget-primary-glow)" : "0 2px 4px rgba(0,0,0,0.1)",
582
+ position: "relative",
583
+ overflow: "hidden"
554
584
  },
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
- )
585
+ children: [
586
+ selected === category.id && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
587
+ "div",
588
+ {
589
+ style: {
590
+ position: "absolute",
591
+ inset: 0,
592
+ background: "linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%)",
593
+ borderRadius: "inherit",
594
+ pointerEvents: "none"
595
+ }
596
+ }
597
+ ),
598
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
599
+ "span",
600
+ {
601
+ style: {
602
+ fontSize: 13,
603
+ fontWeight: 600,
604
+ color: selected === category.id ? "white" : "var(--widget-text-primary)",
605
+ position: "relative",
606
+ zIndex: 1
607
+ },
608
+ children: category.label
609
+ }
610
+ )
611
+ ]
566
612
  },
567
613
  category.id
568
614
  ))
@@ -726,8 +772,8 @@ var MagneticButton = ({ children, onClick, onPressStart, onPressEnd, variant = "
726
772
  const centerX = rect.left + rect.width / 2;
727
773
  const centerY = rect.top + rect.height / 2;
728
774
  setMagnetOffset({
729
- x: (e.clientX - centerX) * 0.1,
730
- y: (e.clientY - centerY) * 0.1
775
+ x: (e.clientX - centerX) * 0.08,
776
+ y: (e.clientY - centerY) * 0.08
731
777
  });
732
778
  };
733
779
  const handleMouseLeave = () => {
@@ -735,35 +781,49 @@ var MagneticButton = ({ children, onClick, onPressStart, onPressEnd, variant = "
735
781
  };
736
782
  const baseStyles = {
737
783
  width: "100%",
738
- padding: "14px 24px",
784
+ padding: "16px 28px",
739
785
  fontSize: 15,
740
786
  fontWeight: 600,
741
- borderRadius: 12,
787
+ borderRadius: 14,
742
788
  border: "none",
743
789
  cursor: disabled ? "not-allowed" : "pointer",
744
- transition: "background 0.2s, opacity 0.2s",
790
+ transition: "all 0.2s ease",
745
791
  display: "flex",
746
792
  alignItems: "center",
747
793
  justifyContent: "center",
748
- gap: 8
794
+ gap: 10,
795
+ letterSpacing: "0.01em",
796
+ position: "relative",
797
+ overflow: "hidden"
749
798
  };
750
799
  const variantStyles = {
751
800
  primary: {
752
- background: "var(--widget-primary)",
753
- color: "white"
801
+ background: "linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)",
802
+ color: "white",
803
+ boxShadow: `
804
+ 0 4px 16px -2px var(--widget-primary-glow),
805
+ 0 2px 8px -2px rgba(0, 0, 0, 0.3),
806
+ inset 0 1px 1px rgba(255, 255, 255, 0.2)
807
+ `
754
808
  },
755
809
  secondary: {
756
810
  background: "var(--widget-glass-bg)",
757
811
  color: "var(--widget-text-primary)",
758
- border: "1px solid var(--widget-glass-border)"
812
+ border: "1px solid var(--widget-glass-border)",
813
+ boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
759
814
  },
760
815
  ghost: {
761
816
  background: "transparent",
762
817
  color: "var(--widget-text-secondary)"
763
818
  },
764
819
  recording: {
765
- background: "var(--widget-recording)",
766
- color: "white"
820
+ background: "linear-gradient(145deg, #ef4444 0%, #dc2626 100%)",
821
+ color: "white",
822
+ boxShadow: `
823
+ 0 4px 20px -2px var(--widget-recording-glow),
824
+ 0 0 40px -5px var(--widget-recording-glow),
825
+ inset 0 1px 1px rgba(255, 255, 255, 0.2)
826
+ `
767
827
  }
768
828
  };
769
829
  const handlePressStart = () => {
@@ -774,7 +834,7 @@ var MagneticButton = ({ children, onClick, onPressStart, onPressEnd, variant = "
774
834
  if (disabled || loading) return;
775
835
  onPressEnd?.();
776
836
  };
777
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
837
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
778
838
  import_framer_motion.motion.button,
779
839
  {
780
840
  ref: buttonRef,
@@ -794,24 +854,38 @@ var MagneticButton = ({ children, onClick, onPressStart, onPressEnd, variant = "
794
854
  y: magnetOffset.y,
795
855
  opacity: disabled ? 0.5 : 1
796
856
  },
797
- whileHover: { scale: disabled ? 1 : 1.02 },
857
+ whileHover: { scale: disabled ? 1 : 1.02, y: -1 },
798
858
  whileTap: { scale: disabled ? 1 : 0.97 },
799
859
  transition: springPresets.snappy,
800
860
  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%"
861
+ children: [
862
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
863
+ "div",
864
+ {
865
+ style: {
866
+ position: "absolute",
867
+ inset: 0,
868
+ background: "linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%)",
869
+ borderRadius: "inherit",
870
+ pointerEvents: "none"
871
+ }
812
872
  }
813
- }
814
- ) : children
873
+ ),
874
+ loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
875
+ import_framer_motion.motion.div,
876
+ {
877
+ animate: { rotate: 360 },
878
+ transition: { duration: 1, repeat: Infinity, ease: "linear" },
879
+ style: {
880
+ width: 20,
881
+ height: 20,
882
+ border: "2.5px solid rgba(255,255,255,0.3)",
883
+ borderTopColor: "white",
884
+ borderRadius: "50%"
885
+ }
886
+ }
887
+ ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { position: "relative", zIndex: 1, display: "flex", alignItems: "center", gap: 10 }, children })
888
+ ]
815
889
  }
816
890
  );
817
891
  };
@@ -1010,19 +1084,18 @@ var PremiumVoiceWidget = ({
1010
1084
  "aria-label": "Open feedback widget",
1011
1085
  "aria-expanded": isExpanded,
1012
1086
  style: {
1013
- width: 56,
1014
- height: 56,
1087
+ width: 60,
1088
+ height: 60,
1015
1089
  borderRadius: "50%",
1016
1090
  border: "none",
1017
1091
  cursor: "pointer",
1018
1092
  position: "relative",
1019
- background: "var(--widget-glass-bg)",
1020
- backdropFilter: "blur(20px) saturate(180%)",
1021
- WebkitBackdropFilter: "blur(20px) saturate(180%)",
1093
+ background: `linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)`,
1022
1094
  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)
1095
+ 0 8px 32px -4px var(--widget-primary-glow),
1096
+ 0 4px 16px -2px rgba(0, 0, 0, 0.4),
1097
+ inset 0 1px 1px rgba(255, 255, 255, 0.3),
1098
+ inset 0 -1px 1px rgba(0, 0, 0, 0.2)
1026
1099
  `
1027
1100
  },
1028
1101
  children: [
@@ -1032,47 +1105,83 @@ var PremiumVoiceWidget = ({
1032
1105
  {
1033
1106
  style: {
1034
1107
  position: "absolute",
1035
- inset: 3,
1108
+ inset: 0,
1036
1109
  borderRadius: "50%",
1037
- background: `linear-gradient(135deg, var(--widget-primary) 0%, var(--widget-accent) 100%)`,
1038
- opacity: 0.9
1110
+ background: "linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%)",
1111
+ pointerEvents: "none"
1039
1112
  }
1040
1113
  }
1041
1114
  ),
1042
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1043
- "svg",
1115
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1116
+ "div",
1044
1117
  {
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
1118
  style: {
1053
1119
  position: "absolute",
1054
1120
  top: "50%",
1055
1121
  left: "50%",
1056
1122
  transform: "translate(-50%, -50%)",
1057
- zIndex: 1
1123
+ zIndex: 1,
1124
+ display: "flex",
1125
+ alignItems: "center",
1126
+ justifyContent: "center"
1058
1127
  },
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
- ]
1128
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1129
+ "svg",
1130
+ {
1131
+ width: 26,
1132
+ height: 26,
1133
+ viewBox: "0 0 24 24",
1134
+ fill: "none",
1135
+ style: { filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.2))" },
1136
+ children: [
1137
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1138
+ "path",
1139
+ {
1140
+ 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",
1141
+ fill: "white",
1142
+ opacity: "0.15"
1143
+ }
1144
+ ),
1145
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1146
+ "path",
1147
+ {
1148
+ 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",
1149
+ fill: "white"
1150
+ }
1151
+ ),
1152
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1153
+ "path",
1154
+ {
1155
+ d: "M16.5 10.5v1a4.5 4.5 0 0 1-9 0v-1",
1156
+ stroke: "white",
1157
+ strokeWidth: "2",
1158
+ strokeLinecap: "round",
1159
+ fill: "none"
1160
+ }
1161
+ ),
1162
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1163
+ "path",
1164
+ {
1165
+ d: "M12 15.5v2.5M9.5 18h5",
1166
+ stroke: "white",
1167
+ strokeWidth: "2",
1168
+ strokeLinecap: "round"
1169
+ }
1170
+ )
1171
+ ]
1172
+ }
1173
+ )
1065
1174
  }
1066
1175
  ),
1067
1176
  shouldShowAttentionPulse && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1068
1177
  import_framer_motion.motion.div,
1069
1178
  {
1070
1179
  initial: { scale: 1, opacity: 1 },
1071
- animate: { scale: 1.5, opacity: 0 },
1072
- transition: { duration: 1, repeat: 3 },
1180
+ animate: { scale: 1.6, opacity: 0 },
1181
+ transition: { duration: 1.2, repeat: 3 },
1073
1182
  style: {
1074
1183
  position: "absolute",
1075
- inset: 0,
1184
+ inset: -2,
1076
1185
  borderRadius: "50%",
1077
1186
  border: "2px solid var(--widget-primary)",
1078
1187
  pointerEvents: "none"
@@ -1086,19 +1195,22 @@ var PremiumVoiceWidget = ({
1086
1195
  animate: { scale: 1 },
1087
1196
  style: {
1088
1197
  position: "absolute",
1089
- top: -4,
1090
- right: -4,
1091
- width: 16,
1092
- height: 16,
1198
+ top: -2,
1199
+ right: -2,
1200
+ width: 18,
1201
+ height: 18,
1093
1202
  borderRadius: "50%",
1094
- background: "var(--widget-frustrated)",
1095
- border: "2px solid var(--widget-glass-bg)",
1203
+ background: "linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%)",
1204
+ border: "2px solid white",
1096
1205
  display: "flex",
1097
1206
  alignItems: "center",
1098
1207
  justifyContent: "center",
1099
- fontSize: 10
1208
+ fontSize: 11,
1209
+ fontWeight: 700,
1210
+ color: "white",
1211
+ boxShadow: "0 2px 8px rgba(239, 68, 68, 0.5)"
1100
1212
  },
1101
- children: "?"
1213
+ children: "!"
1102
1214
  }
1103
1215
  )
1104
1216
  ]
@@ -1162,11 +1274,15 @@ var PremiumVoiceWidget = ({
1162
1274
  animate: "expanded",
1163
1275
  exit: "trigger",
1164
1276
  style: {
1165
- background: "var(--widget-glass-bg)",
1166
- backdropFilter: "blur(20px) saturate(180%)",
1167
- WebkitBackdropFilter: "blur(20px) saturate(180%)",
1277
+ 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%)",
1278
+ backdropFilter: "blur(24px) saturate(200%)",
1279
+ WebkitBackdropFilter: "blur(24px) saturate(200%)",
1168
1280
  border: "1px solid var(--widget-glass-border)",
1169
- boxShadow: "0 20px 60px -12px rgba(0, 0, 0, 0.5)",
1281
+ boxShadow: `
1282
+ 0 24px 80px -12px rgba(0, 0, 0, 0.6),
1283
+ 0 0 1px 0 rgba(255, 255, 255, 0.1) inset,
1284
+ 0 1px 0 0 rgba(255, 255, 255, 0.05) inset
1285
+ `,
1170
1286
  overflow: "hidden",
1171
1287
  display: "flex",
1172
1288
  flexDirection: "column"
@@ -1191,26 +1307,50 @@ var PremiumVoiceWidget = ({
1191
1307
  justifyContent: "space-between",
1192
1308
  alignItems: "center",
1193
1309
  padding: "20px 24px",
1194
- borderBottom: "1px solid var(--widget-glass-border)"
1310
+ borderBottom: "1px solid var(--widget-glass-border)",
1311
+ 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
1312
  },
1196
1313
  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
- ),
1314
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
1315
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1316
+ "div",
1317
+ {
1318
+ style: {
1319
+ width: 36,
1320
+ height: 36,
1321
+ borderRadius: 10,
1322
+ background: "linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)",
1323
+ display: "flex",
1324
+ alignItems: "center",
1325
+ justifyContent: "center",
1326
+ boxShadow: "0 2px 8px -2px var(--widget-primary-glow)"
1327
+ },
1328
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "white", children: [
1329
+ /* @__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" }),
1330
+ /* @__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" }),
1331
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 15.5v2.5M9.5 18h5", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
1332
+ ] })
1333
+ }
1334
+ ),
1335
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1336
+ "h2",
1337
+ {
1338
+ id: "widget-title",
1339
+ style: {
1340
+ fontSize: 17,
1341
+ fontWeight: 700,
1342
+ color: "var(--widget-text-primary)",
1343
+ margin: 0,
1344
+ letterSpacing: "-0.01em"
1345
+ },
1346
+ children: "Share Feedback"
1347
+ }
1348
+ )
1349
+ ] }),
1210
1350
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1211
1351
  import_framer_motion.motion.button,
1212
1352
  {
1213
- whileHover: { scale: 1.1, rotate: 90 },
1353
+ whileHover: { scale: 1.1, backgroundColor: "var(--widget-glass-border)" },
1214
1354
  whileTap: { scale: 0.9 },
1215
1355
  onClick: handleClose,
1216
1356
  "aria-label": "Close widget",
@@ -1224,17 +1364,19 @@ var PremiumVoiceWidget = ({
1224
1364
  cursor: "pointer",
1225
1365
  display: "flex",
1226
1366
  alignItems: "center",
1227
- justifyContent: "center"
1367
+ justifyContent: "center",
1368
+ transition: "background 0.15s ease"
1228
1369
  },
1229
1370
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1230
1371
  "svg",
1231
1372
  {
1232
- width: 20,
1233
- height: 20,
1373
+ width: 18,
1374
+ height: 18,
1234
1375
  viewBox: "0 0 24 24",
1235
1376
  fill: "none",
1236
1377
  stroke: "currentColor",
1237
- strokeWidth: 2,
1378
+ strokeWidth: 2.5,
1379
+ strokeLinecap: "round",
1238
1380
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6L6 18M6 6l12 12" })
1239
1381
  }
1240
1382
  )
@@ -1248,41 +1390,44 @@ var PremiumVoiceWidget = ({
1248
1390
  {
1249
1391
  style: {
1250
1392
  display: "flex",
1251
- borderBottom: "1px solid var(--widget-glass-border)"
1393
+ padding: "8px 12px",
1394
+ gap: 4,
1395
+ background: "var(--widget-glass-bg)",
1396
+ margin: "0 16px",
1397
+ marginTop: 16,
1398
+ borderRadius: 12,
1399
+ border: "1px solid var(--widget-glass-border)"
1252
1400
  },
1253
1401
  children: ["voice", "text"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1254
1402
  import_framer_motion.motion.button,
1255
1403
  {
1256
1404
  onClick: () => setActiveTab(tab),
1257
- whileHover: { backgroundColor: "rgba(255,255,255,0.05)" },
1258
1405
  style: {
1259
1406
  flex: 1,
1260
- padding: "14px 0",
1407
+ padding: "10px 0",
1261
1408
  border: "none",
1262
- background: "transparent",
1263
- fontSize: 14,
1264
- fontWeight: 500,
1265
- color: activeTab === tab ? "var(--widget-primary)" : "var(--widget-text-secondary)",
1409
+ background: activeTab === tab ? "linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)" : "transparent",
1410
+ fontSize: 13,
1411
+ fontWeight: 600,
1412
+ color: activeTab === tab ? "white" : "var(--widget-text-secondary)",
1266
1413
  cursor: "pointer",
1267
- position: "relative"
1414
+ position: "relative",
1415
+ borderRadius: 8,
1416
+ transition: "all 0.2s ease",
1417
+ display: "flex",
1418
+ alignItems: "center",
1419
+ justifyContent: "center",
1420
+ gap: 6,
1421
+ boxShadow: activeTab === tab ? "0 2px 8px -2px var(--widget-primary-glow)" : "none"
1268
1422
  },
1423
+ whileHover: { scale: activeTab === tab ? 1 : 1.02 },
1424
+ whileTap: { scale: 0.98 },
1269
1425
  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
- )
1426
+ tab === "voice" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "currentColor", children: [
1427
+ /* @__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" }),
1428
+ /* @__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" })
1429
+ ] }) : /* @__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" }) }),
1430
+ tab === "voice" ? "Voice" : "Text"
1286
1431
  ]
1287
1432
  },
1288
1433
  tab
@@ -1299,33 +1444,48 @@ var PremiumVoiceWidget = ({
1299
1444
  }
1300
1445
  ) }),
1301
1446
  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",
1447
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1448
+ "div",
1312
1449
  {
1313
1450
  style: {
1314
- color: "var(--widget-text-secondary)",
1315
- fontSize: 14,
1316
- marginTop: 16
1451
+ background: "var(--widget-glass-bg)",
1452
+ borderRadius: 16,
1453
+ padding: "24px 16px",
1454
+ border: "1px solid var(--widget-glass-border)",
1455
+ marginBottom: 16
1317
1456
  },
1318
- children: "Hold to record"
1457
+ children: [
1458
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AmbientOrb, { audioLevel, isRecording }),
1459
+ isRecording && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1460
+ RecordingTimer,
1461
+ {
1462
+ seconds: recordingSeconds,
1463
+ maxDuration: maxRecordingDuration
1464
+ }
1465
+ ),
1466
+ !isRecording && recordingSeconds === 0 && !transcription && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1467
+ "p",
1468
+ {
1469
+ style: {
1470
+ color: "var(--widget-text-muted)",
1471
+ fontSize: 13,
1472
+ marginTop: 12,
1473
+ marginBottom: 0
1474
+ },
1475
+ children: "Press and hold to record your feedback"
1476
+ }
1477
+ )
1478
+ ]
1319
1479
  }
1320
1480
  ),
1321
- (isRecording || transcription) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1481
+ (isRecording || transcription) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1322
1482
  TranscriptionDisplay,
1323
1483
  {
1324
1484
  text: transcription,
1325
1485
  isLive: isRecording
1326
1486
  }
1327
1487
  ) }),
1328
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1488
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1329
1489
  MagneticButton,
1330
1490
  {
1331
1491
  onPressStart: handleStartRecording,
@@ -1333,74 +1493,109 @@ var PremiumVoiceWidget = ({
1333
1493
  variant: isRecording ? "recording" : "primary",
1334
1494
  children: isRecording ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
1335
1495
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1336
- "svg",
1496
+ import_framer_motion.motion.div,
1337
1497
  {
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 })
1498
+ animate: { scale: [1, 1.2, 1] },
1499
+ transition: { duration: 1, repeat: Infinity },
1500
+ style: {
1501
+ width: 8,
1502
+ height: 8,
1503
+ borderRadius: "50%",
1504
+ background: "white"
1505
+ }
1343
1506
  }
1344
1507
  ),
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
- ]
1508
+ "Recording... Release to stop"
1509
+ ] }) : transcription ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
1510
+ /* @__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" }) }),
1511
+ "Hold to record more"
1512
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
1513
+ /* @__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" }) }),
1514
+ "Hold to Record"
1515
+ ] })
1386
1516
  }
1387
1517
  )
1388
- ] })
1518
+ ] }),
1519
+ activeTab === "text" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1520
+ "div",
1521
+ {
1522
+ style: {
1523
+ position: "relative",
1524
+ background: "var(--widget-glass-bg)",
1525
+ border: "1px solid var(--widget-glass-border)",
1526
+ borderRadius: 14,
1527
+ overflow: "hidden"
1528
+ },
1529
+ children: [
1530
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1531
+ "textarea",
1532
+ {
1533
+ value: textContent,
1534
+ onChange: (e) => setTextContent(e.target.value),
1535
+ placeholder: "Share your thoughts, ideas, or feedback...",
1536
+ style: {
1537
+ width: "100%",
1538
+ minHeight: 140,
1539
+ padding: 16,
1540
+ fontSize: 14,
1541
+ lineHeight: 1.7,
1542
+ color: "var(--widget-text-primary)",
1543
+ background: "transparent",
1544
+ border: "none",
1545
+ resize: "none",
1546
+ fontFamily: "inherit",
1547
+ outline: "none"
1548
+ }
1549
+ }
1550
+ ),
1551
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1552
+ "div",
1553
+ {
1554
+ style: {
1555
+ display: "flex",
1556
+ justifyContent: "flex-end",
1557
+ padding: "8px 12px",
1558
+ borderTop: "1px solid var(--widget-glass-border)",
1559
+ background: theme === "dark" ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.02)"
1560
+ },
1561
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1562
+ "span",
1563
+ {
1564
+ style: {
1565
+ fontSize: 11,
1566
+ fontWeight: 500,
1567
+ color: textContent.length > 4500 ? "var(--widget-recording)" : "var(--widget-text-muted)"
1568
+ },
1569
+ children: [
1570
+ textContent.length.toLocaleString(),
1571
+ " / 5,000"
1572
+ ]
1573
+ }
1574
+ )
1575
+ }
1576
+ )
1577
+ ]
1578
+ }
1579
+ ) })
1389
1580
  ] }),
1390
1581
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1391
1582
  "div",
1392
1583
  {
1393
1584
  style: {
1394
- padding: "16px 24px",
1395
- borderTop: "1px solid var(--widget-glass-border)"
1585
+ padding: "16px 24px 20px",
1586
+ borderTop: "1px solid var(--widget-glass-border)",
1587
+ 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
1588
  },
1397
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1589
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1398
1590
  MagneticButton,
1399
1591
  {
1400
1592
  onClick: handleSubmit,
1401
1593
  disabled: !selectedCategory || activeTab === "voice" && !transcription || activeTab === "text" && !textContent.trim(),
1402
1594
  loading: isSubmitting,
1403
- children: "Submit Feedback"
1595
+ children: [
1596
+ /* @__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" }) }),
1597
+ "Submit Feedback"
1598
+ ]
1404
1599
  }
1405
1600
  )
1406
1601
  }