@intentai/react 2.0.0 → 2.0.2

package/dist/index.js

@@ -190,9 +190,9 @@ var containerVariants = {
     transition: springPresets.smooth
   },
   expanded: {
-    width: 400,
-    height: 520,
-    borderRadius: 24,
+    width: 360,
+    height: "auto",
+    borderRadius: 20,
     transition: {
       ...springPresets.smooth,
       staggerChildren: 0.05,
@@ -219,30 +219,6 @@ var contentVariants = {
     transition: { duration: 0.2 }
   }
 };
-var categoryVariants = {
-  hidden: { opacity: 0, y: 20, scale: 0.9 },
-  visible: (i) => ({
-    opacity: 1,
-    y: 0,
-    scale: 1,
-    transition: {
-      delay: i * 0.05,
-      ...springPresets.smooth
-    }
-  }),
-  hover: {
-    scale: 1.05,
-    y: -2,
-    transition: springPresets.bouncy
-  },
-  tap: {
-    scale: 0.95
-  },
-  selected: {
-    scale: 1,
-    borderColor: "var(--widget-primary)"
-  }
-};
 var BreathingRing = ({ isActive }) => {
   const { reducedMotion } = useWidget();
   if (reducedMotion) return null;
@@ -277,11 +253,11 @@ var AmbientOrb = ({ audioLevel, isRecording }) => {
     const particleCount = Math.floor(audioLevel * 4);
     const newParticles = Array.from({ length: particleCount }, () => ({
       id: Math.random().toString(36).slice(2, 11),
-      x: 120,
-      y: 120,
+      x: 70,
+      y: 70,
       angle: Math.random() * Math.PI * 2,
       speed: 1 + Math.random() * 3,
-      size: 2 + Math.random() * 4,
+      size: 2 + Math.random() * 3,
       color: Math.random() > 0.5 ? "var(--widget-primary-light)" : "var(--widget-accent)"
     }));
     setParticles((prev) => [...prev, ...newParticles].slice(-40));
@@ -294,7 +270,7 @@ var AmbientOrb = ({ audioLevel, isRecording }) => {
     return () => clearTimeout(timeout);
   }, [particles]);
   const orbScale = 1 + audioLevel * 0.2;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fiq-ambient-orb", style: { position: "relative", width: 240, height: 240 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: 240, height: 240, viewBox: "0 0 240 240", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fiq-ambient-orb", style: { position: "relative", width: 140, height: 140, margin: "0 auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: 140, height: 140, viewBox: "0 0 140 140", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("radialGradient", { id: "orbGradient", cx: "30%", cy: "30%", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: "var(--widget-accent-light)" }),
@@ -309,14 +285,14 @@ var AmbientOrb = ({ audioLevel, isRecording }) => {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_framer_motion.motion.circle,
       {
-        cx: 120,
-        cy: 120,
-        r: 80,
+        cx: 70,
+        cy: 70,
+        r: 50,
         fill: "none",
         stroke: "var(--widget-primary-glow)",
         strokeWidth: 2,
         animate: {
-          r: isRecording ? [80, 90, 80] : 80,
+          r: isRecording ? [50, 58, 50] : 50,
           opacity: isRecording ? [0.3, 0.6, 0.3] : 0.3
         },
         transition: {
@@ -329,9 +305,9 @@ var AmbientOrb = ({ audioLevel, isRecording }) => {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_framer_motion.motion.circle,
       {
-        cx: 120,
-        cy: 120,
-        r: 60,
+        cx: 70,
+        cy: 70,
+        r: 40,
         fill: "url(#orbGradient)",
         filter: "url(#orbGlow)",
         animate: { scale: reducedMotion ? 1 : orbScale },
@@ -339,7 +315,7 @@ var AmbientOrb = ({ audioLevel, isRecording }) => {
         style: { transformOrigin: "center" }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: "translate(100, 95)", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: "translate(58, 55)", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_framer_motion.motion.path,
         {
@@ -371,14 +347,14 @@ var AmbientOrb = ({ audioLevel, isRecording }) => {
     particles.map((particle) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_framer_motion.motion.circle,
       {
-        cx: particle.x,
-        cy: particle.y,
+        cx: 70,
+        cy: 70,
         r: particle.size,
         fill: particle.color,
         initial: { opacity: 0.8, scale: 1 },
         animate: {
-          cx: particle.x + Math.cos(particle.angle) * 80,
-          cy: particle.y + Math.sin(particle.angle) * 80,
+          cx: 70 + Math.cos(particle.angle) * 50,
+          cy: 70 + Math.sin(particle.angle) * 50,
           opacity: 0,
           scale: 0.5
         },
@@ -546,68 +522,47 @@ var CategorySelector = ({ categories, selected, onSelect }) => {
       {
         style: {
           display: "block",
-          fontSize: 13,
-          fontWeight: 600,
-          color: "var(--widget-text-secondary)",
-          marginBottom: 10,
-          textTransform: "uppercase",
-          letterSpacing: "0.05em"
+          fontSize: 12,
+          fontWeight: 500,
+          color: "var(--widget-text-muted)",
+          marginBottom: 10
         },
-        children: "Category"
+        children: "What's this about?"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         style: {
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))",
-          gap: 10
+          display: "flex",
+          flexWrap: "wrap",
+          gap: 8
         },
-        children: categories.map((category, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        children: categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_framer_motion.motion.button,
           {
-            custom: index,
-            variants: categoryVariants,
-            initial: "hidden",
-            animate: selected === category.id ? "selected" : "visible",
-            whileHover: "hover",
-            whileTap: "tap",
+            whileHover: { scale: 1.03 },
+            whileTap: { scale: 0.97 },
             onClick: () => onSelect(category.id),
             style: {
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: 6,
-              padding: "12px 8px",
-              background: selected === category.id ? "var(--widget-primary)" : "var(--widget-glass-bg)",
-              border: `2px solid ${selected === category.id ? "var(--widget-primary)" : "var(--widget-glass-border)"}`,
-              borderRadius: 12,
+              padding: "8px 16px",
+              background: selected === category.id ? "var(--widget-primary)" : "transparent",
+              border: `1.5px solid ${selected === category.id ? "var(--widget-primary)" : "var(--widget-glass-border)"}`,
+              borderRadius: 20,
               cursor: "pointer",
-              transition: "background 0.2s, border-color 0.2s"
+              transition: "all 0.2s ease"
             },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_framer_motion.motion.span,
-                {
-                  style: { fontSize: 20 },
-                  animate: selected === category.id ? { scale: [1, 1.3, 1], rotate: [0, 10, -10, 0] } : {},
-                  transition: { duration: 0.4 },
-                  children: category.icon
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "span",
-                {
-                  style: {
-                    fontSize: 12,
-                    fontWeight: 500,
-                    color: selected === category.id ? "white" : "var(--widget-text-primary)"
-                  },
-                  children: category.label
-                }
-              )
-            ]
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                style: {
+                  fontSize: 13,
+                  fontWeight: 500,
+                  color: selected === category.id ? "white" : "var(--widget-text-primary)"
+                },
+                children: category.label
+              }
+            )
           },
           category.id
         ))
@@ -762,7 +717,7 @@ var SuccessCelebration = ({ onComplete }) => {
     }
   );
 };
-var MagneticButton = ({ children, onClick, variant = "primary", disabled, loading }) => {
+var MagneticButton = ({ children, onClick, onPressStart, onPressEnd, variant = "primary", disabled, loading }) => {
   const buttonRef = (0, import_react.useRef)(null);
   const [magnetOffset, setMagnetOffset] = (0, import_react.useState)({ x: 0, y: 0 });
   const handleMouseMove = (e) => {
@@ -805,8 +760,20 @@ var MagneticButton = ({ children, onClick, variant = "primary", disabled, loadin
     ghost: {
       background: "transparent",
       color: "var(--widget-text-secondary)"
+    },
+    recording: {
+      background: "var(--widget-recording)",
+      color: "white"
     }
   };
+  const handlePressStart = () => {
+    if (disabled || loading) return;
+    onPressStart?.();
+  };
+  const handlePressEnd = () => {
+    if (disabled || loading) return;
+    onPressEnd?.();
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_framer_motion.motion.button,
     {
@@ -814,7 +781,14 @@ var MagneticButton = ({ children, onClick, variant = "primary", disabled, loadin
       onClick,
       disabled: disabled || loading,
       onMouseMove: handleMouseMove,
-      onMouseLeave: handleMouseLeave,
+      onMouseLeave: () => {
+        handleMouseLeave();
+        if (onPressEnd) handlePressEnd();
+      },
+      onMouseDown: onPressStart ? handlePressStart : void 0,
+      onMouseUp: onPressEnd ? handlePressEnd : void 0,
+      onTouchStart: onPressStart ? handlePressStart : void 0,
+      onTouchEnd: onPressEnd ? handlePressEnd : void 0,
       animate: {
         x: magnetOffset.x,
         y: magnetOffset.y,
@@ -842,11 +816,11 @@ var MagneticButton = ({ children, onClick, variant = "primary", disabled, loadin
   );
 };
 var DEFAULT_CATEGORIES = [
-  { id: "bug", label: "Bug", icon: "\u{1F41B}" },
-  { id: "feature", label: "Feature", icon: "\u2728" },
-  { id: "improvement", label: "Improve", icon: "\u{1F4A1}" },
-  { id: "praise", label: "Praise", icon: "\u2764\uFE0F" },
-  { id: "other", label: "Other", icon: "\u{1F4AC}" }
+  { id: "bug", label: "Bug", icon: "" },
+  { id: "feature", label: "Feature", icon: "" },
+  { id: "improvement", label: "Improve", icon: "" },
+  { id: "praise", label: "Praise", icon: "" },
+  { id: "other", label: "Other", icon: "" }
 ];
 var PremiumVoiceWidget = ({
   position = "bottom-right",
@@ -989,6 +963,24 @@ var PremiumVoiceWidget = ({
     return "idle";
   }, [isExpanded, scrollState, state]);
   const shouldShowAttentionPulse = timeOnPage === 60 && !isExpanded && frustrationLevel < 3;
+  const [showPrompt, setShowPrompt] = (0, import_react.useState)(false);
+  const promptMessages = [
+    "Help us improve!",
+    "Got feedback?",
+    "Share your thoughts",
+    "We'd love to hear from you"
+  ];
+  const [promptMessage, setPromptMessage] = (0, import_react.useState)(promptMessages[0]);
+  (0, import_react.useEffect)(() => {
+    if (isExpanded) return;
+    const showTimes = [30, 90, 180];
+    if (showTimes.includes(timeOnPage)) {
+      setPromptMessage(promptMessages[Math.floor(Math.random() * promptMessages.length)]);
+      setShowPrompt(true);
+      const timer = setTimeout(() => setShowPrompt(false), 4e3);
+      return () => clearTimeout(timer);
+    }
+  }, [timeOnPage, isExpanded]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WidgetContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
@@ -1001,111 +993,167 @@ var PremiumVoiceWidget = ({
         fontFamily: "system-ui, -apple-system, sans-serif"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { mode: "wait", children: !isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_framer_motion.motion.button,
-          {
-            ref: triggerRef,
-            variants: triggerVariants,
-            initial: "idle",
-            animate: triggerState,
-            exit: "hidden",
-            whileHover: "hover",
-            whileTap: "tap",
-            onClick: handleOpen,
-            onMouseEnter: () => setState("hover"),
-            onMouseLeave: () => setState("idle"),
-            "aria-label": "Open feedback widget",
-            "aria-expanded": isExpanded,
-            style: {
-              width: 56,
-              height: 56,
-              borderRadius: "50%",
-              border: "none",
-              cursor: "pointer",
-              position: "relative",
-              background: "var(--widget-glass-bg)",
-              backdropFilter: "blur(20px) saturate(180%)",
-              WebkitBackdropFilter: "blur(20px) saturate(180%)",
-              boxShadow: `
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_framer_motion.AnimatePresence, { mode: "wait", children: [
+          !isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_framer_motion.motion.button,
+            {
+              ref: triggerRef,
+              variants: triggerVariants,
+              initial: "idle",
+              animate: triggerState,
+              exit: "hidden",
+              whileHover: "hover",
+              whileTap: "tap",
+              onClick: handleOpen,
+              onMouseEnter: () => setState("hover"),
+              onMouseLeave: () => setState("idle"),
+              "aria-label": "Open feedback widget",
+              "aria-expanded": isExpanded,
+              style: {
+                width: 56,
+                height: 56,
+                borderRadius: "50%",
+                border: "none",
+                cursor: "pointer",
+                position: "relative",
+                background: "var(--widget-glass-bg)",
+                backdropFilter: "blur(20px) saturate(180%)",
+                WebkitBackdropFilter: "blur(20px) saturate(180%)",
+                boxShadow: `
                   inset 0 0 0 1px var(--widget-glass-highlight),
                   0 4px 24px -4px rgba(0, 0, 0, 0.5),
                   0 0 40px -10px var(--widget-primary-glow)
                 `
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreathingRing, { isActive: !reducedMotion && triggerState === "idle" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    inset: 3,
-                    borderRadius: "50%",
-                    background: `linear-gradient(135deg, var(--widget-primary) 0%, var(--widget-accent) 100%)`,
-                    opacity: 0.9
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreathingRing, { isActive: !reducedMotion && triggerState === "idle" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      inset: 3,
+                      borderRadius: "50%",
+                      background: `linear-gradient(135deg, var(--widget-primary) 0%, var(--widget-accent) 100%)`,
+                      opacity: 0.9
+                    }
                   }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                "svg",
-                {
-                  width: 24,
-                  height: 24,
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "white",
-                  strokeWidth: 2,
-                  strokeLinecap: "round",
-                  style: { position: "relative", zIndex: 1 },
-                  children: [
-                    /* @__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" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
-                  ]
-                }
-              ),
-              shouldShowAttentionPulse && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_framer_motion.motion.div,
-                {
-                  initial: { scale: 1, opacity: 1 },
-                  animate: { scale: 1.5, opacity: 0 },
-                  transition: { duration: 1, repeat: 3 },
-                  style: {
-                    position: "absolute",
-                    inset: 0,
-                    borderRadius: "50%",
-                    border: "2px solid var(--widget-primary)",
-                    pointerEvents: "none"
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "svg",
+                  {
+                    width: 24,
+                    height: 24,
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "white",
+                    strokeWidth: 2,
+                    strokeLinecap: "round",
+                    style: {
+                      position: "absolute",
+                      top: "50%",
+                      left: "50%",
+                      transform: "translate(-50%, -50%)",
+                      zIndex: 1
+                    },
+                    children: [
+                      /* @__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" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+                    ]
                   }
-                }
-              ),
-              frustrationLevel >= 5 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_framer_motion.motion.div,
-                {
-                  initial: { scale: 0 },
-                  animate: { scale: 1 },
-                  style: {
-                    position: "absolute",
-                    top: -4,
-                    right: -4,
-                    width: 16,
-                    height: 16,
-                    borderRadius: "50%",
-                    background: "var(--widget-frustrated)",
-                    border: "2px solid var(--widget-glass-bg)",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    fontSize: 10
-                  },
-                  children: "?"
-                }
-              )
-            ]
-          },
-          "trigger"
-        ) }),
+                ),
+                shouldShowAttentionPulse && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_framer_motion.motion.div,
+                  {
+                    initial: { scale: 1, opacity: 1 },
+                    animate: { scale: 1.5, opacity: 0 },
+                    transition: { duration: 1, repeat: 3 },
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      borderRadius: "50%",
+                      border: "2px solid var(--widget-primary)",
+                      pointerEvents: "none"
+                    }
+                  }
+                ),
+                frustrationLevel >= 5 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_framer_motion.motion.div,
+                  {
+                    initial: { scale: 0 },
+                    animate: { scale: 1 },
+                    style: {
+                      position: "absolute",
+                      top: -4,
+                      right: -4,
+                      width: 16,
+                      height: 16,
+                      borderRadius: "50%",
+                      background: "var(--widget-frustrated)",
+                      border: "2px solid var(--widget-glass-bg)",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: 10
+                    },
+                    children: "?"
+                  }
+                )
+              ]
+            },
+            "trigger"
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: showPrompt && !isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_framer_motion.motion.div,
+            {
+              initial: { opacity: 0, x: 10, scale: 0.9 },
+              animate: { opacity: 1, x: 0, scale: 1 },
+              exit: { opacity: 0, x: 10, scale: 0.9 },
+              transition: springPresets.smooth,
+              onClick: handleOpen,
+              style: {
+                position: "absolute",
+                right: 70,
+                top: "50%",
+                transform: "translateY(-50%)",
+                background: "var(--widget-glass-bg)",
+                backdropFilter: "blur(12px)",
+                WebkitBackdropFilter: "blur(12px)",
+                border: "1px solid var(--widget-glass-border)",
+                borderRadius: 12,
+                padding: "10px 16px",
+                boxShadow: "0 4px 20px rgba(0,0,0,0.3)",
+                cursor: "pointer",
+                whiteSpace: "nowrap"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: {
+                  fontSize: 13,
+                  fontWeight: 500,
+                  color: "var(--widget-text-primary)"
+                }, children: promptMessage }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      right: -6,
+                      top: "50%",
+                      transform: "translateY(-50%) rotate(45deg)",
+                      width: 12,
+                      height: 12,
+                      background: "var(--widget-glass-bg)",
+                      borderRight: "1px solid var(--widget-glass-border)",
+                      borderTop: "1px solid var(--widget-glass-border)"
+                    }
+                  }
+                )
+              ]
+            }
+          ) })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { mode: "wait", children: isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_framer_motion.motion.div,
           {
@@ -1241,7 +1289,7 @@ var PremiumVoiceWidget = ({
                       ))
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, overflow: "auto", padding: 24 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "20px 24px" }, children: [
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                       CategorySelector,
                       {
@@ -1267,7 +1315,7 @@ var PremiumVoiceWidget = ({
                             fontSize: 14,
                             marginTop: 16
                           },
-                          children: "Tap the orb to start recording"
+                          children: "Hold to record"
                         }
                       ),
                       (isRecording || transcription) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1280,8 +1328,9 @@ var PremiumVoiceWidget = ({
                       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                         MagneticButton,
                         {
-                          onClick: isRecording ? handleStopRecording : handleStartRecording,
-                          variant: isRecording ? "secondary" : "primary",
+                          onPressStart: handleStartRecording,
+                          onPressEnd: handleStopRecording,
+                          variant: isRecording ? "recording" : "primary",
                           children: isRecording ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
                             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                               "svg",
@@ -1290,11 +1339,11 @@ var PremiumVoiceWidget = ({
                                 height: 16,
                                 viewBox: "0 0 24 24",
                                 fill: "currentColor",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: 6, y: 6, width: 12, height: 12, rx: 2 })
+                                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: 12, cy: 12, r: 6 })
                               }
                             ),
-                            "Stop Recording"
-                          ] }) : recordingSeconds > 0 ? "Record Again" : "Start Recording"
+                            "Recording..."
+                          ] }) : transcription ? "Hold to record more" : "Hold to record"
                         }
                       ) })
                     ] }),

package/dist/index.mjs

@@ -172,9 +172,9 @@ var containerVariants = {
     transition: springPresets.smooth
   },
   expanded: {
-    width: 400,
-    height: 520,
-    borderRadius: 24,
+    width: 360,
+    height: "auto",
+    borderRadius: 20,
     transition: {
       ...springPresets.smooth,
       staggerChildren: 0.05,
@@ -201,30 +201,6 @@ var contentVariants = {
     transition: { duration: 0.2 }
   }
 };
-var categoryVariants = {
-  hidden: { opacity: 0, y: 20, scale: 0.9 },
-  visible: (i) => ({
-    opacity: 1,
-    y: 0,
-    scale: 1,
-    transition: {
-      delay: i * 0.05,
-      ...springPresets.smooth
-    }
-  }),
-  hover: {
-    scale: 1.05,
-    y: -2,
-    transition: springPresets.bouncy
-  },
-  tap: {
-    scale: 0.95
-  },
-  selected: {
-    scale: 1,
-    borderColor: "var(--widget-primary)"
-  }
-};
 var BreathingRing = ({ isActive }) => {
   const { reducedMotion } = useWidget();
   if (reducedMotion) return null;
@@ -259,11 +235,11 @@ var AmbientOrb = ({ audioLevel, isRecording }) => {
     const particleCount = Math.floor(audioLevel * 4);
     const newParticles = Array.from({ length: particleCount }, () => ({
       id: Math.random().toString(36).slice(2, 11),
-      x: 120,
-      y: 120,
+      x: 70,
+      y: 70,
       angle: Math.random() * Math.PI * 2,
       speed: 1 + Math.random() * 3,
-      size: 2 + Math.random() * 4,
+      size: 2 + Math.random() * 3,
       color: Math.random() > 0.5 ? "var(--widget-primary-light)" : "var(--widget-accent)"
     }));
     setParticles((prev) => [...prev, ...newParticles].slice(-40));
@@ -276,7 +252,7 @@ var AmbientOrb = ({ audioLevel, isRecording }) => {
     return () => clearTimeout(timeout);
   }, [particles]);
   const orbScale = 1 + audioLevel * 0.2;
-  return /* @__PURE__ */ jsx("div", { className: "fiq-ambient-orb", style: { position: "relative", width: 240, height: 240 }, children: /* @__PURE__ */ jsxs("svg", { width: 240, height: 240, viewBox: "0 0 240 240", children: [
+  return /* @__PURE__ */ jsx("div", { className: "fiq-ambient-orb", style: { position: "relative", width: 140, height: 140, margin: "0 auto" }, children: /* @__PURE__ */ jsxs("svg", { width: 140, height: 140, viewBox: "0 0 140 140", children: [
     /* @__PURE__ */ jsxs("defs", { children: [
       /* @__PURE__ */ jsxs("radialGradient", { id: "orbGradient", cx: "30%", cy: "30%", children: [
         /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--widget-accent-light)" }),
@@ -291,14 +267,14 @@ var AmbientOrb = ({ audioLevel, isRecording }) => {
     /* @__PURE__ */ jsx(
       motion.circle,
       {
-        cx: 120,
-        cy: 120,
-        r: 80,
+        cx: 70,
+        cy: 70,
+        r: 50,
         fill: "none",
         stroke: "var(--widget-primary-glow)",
         strokeWidth: 2,
         animate: {
-          r: isRecording ? [80, 90, 80] : 80,
+          r: isRecording ? [50, 58, 50] : 50,
           opacity: isRecording ? [0.3, 0.6, 0.3] : 0.3
         },
         transition: {
@@ -311,9 +287,9 @@ var AmbientOrb = ({ audioLevel, isRecording }) => {
     /* @__PURE__ */ jsx(
       motion.circle,
       {
-        cx: 120,
-        cy: 120,
-        r: 60,
+        cx: 70,
+        cy: 70,
+        r: 40,
         fill: "url(#orbGradient)",
         filter: "url(#orbGlow)",
         animate: { scale: reducedMotion ? 1 : orbScale },
@@ -321,7 +297,7 @@ var AmbientOrb = ({ audioLevel, isRecording }) => {
         style: { transformOrigin: "center" }
       }
     ),
-    /* @__PURE__ */ jsxs("g", { transform: "translate(100, 95)", children: [
+    /* @__PURE__ */ jsxs("g", { transform: "translate(58, 55)", children: [
       /* @__PURE__ */ jsx(
         motion.path,
         {
@@ -353,14 +329,14 @@ var AmbientOrb = ({ audioLevel, isRecording }) => {
     particles.map((particle) => /* @__PURE__ */ jsx(
       motion.circle,
       {
-        cx: particle.x,
-        cy: particle.y,
+        cx: 70,
+        cy: 70,
         r: particle.size,
         fill: particle.color,
         initial: { opacity: 0.8, scale: 1 },
         animate: {
-          cx: particle.x + Math.cos(particle.angle) * 80,
-          cy: particle.y + Math.sin(particle.angle) * 80,
+          cx: 70 + Math.cos(particle.angle) * 50,
+          cy: 70 + Math.sin(particle.angle) * 50,
           opacity: 0,
           scale: 0.5
         },
@@ -528,68 +504,47 @@ var CategorySelector = ({ categories, selected, onSelect }) => {
       {
         style: {
           display: "block",
-          fontSize: 13,
-          fontWeight: 600,
-          color: "var(--widget-text-secondary)",
-          marginBottom: 10,
-          textTransform: "uppercase",
-          letterSpacing: "0.05em"
+          fontSize: 12,
+          fontWeight: 500,
+          color: "var(--widget-text-muted)",
+          marginBottom: 10
         },
-        children: "Category"
+        children: "What's this about?"
       }
     ),
     /* @__PURE__ */ jsx(
       "div",
       {
         style: {
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))",
-          gap: 10
+          display: "flex",
+          flexWrap: "wrap",
+          gap: 8
         },
-        children: categories.map((category, index) => /* @__PURE__ */ jsxs(
+        children: categories.map((category) => /* @__PURE__ */ jsx(
           motion.button,
           {
-            custom: index,
-            variants: categoryVariants,
-            initial: "hidden",
-            animate: selected === category.id ? "selected" : "visible",
-            whileHover: "hover",
-            whileTap: "tap",
+            whileHover: { scale: 1.03 },
+            whileTap: { scale: 0.97 },
             onClick: () => onSelect(category.id),
             style: {
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: 6,
-              padding: "12px 8px",
-              background: selected === category.id ? "var(--widget-primary)" : "var(--widget-glass-bg)",
-              border: `2px solid ${selected === category.id ? "var(--widget-primary)" : "var(--widget-glass-border)"}`,
-              borderRadius: 12,
+              padding: "8px 16px",
+              background: selected === category.id ? "var(--widget-primary)" : "transparent",
+              border: `1.5px solid ${selected === category.id ? "var(--widget-primary)" : "var(--widget-glass-border)"}`,
+              borderRadius: 20,
               cursor: "pointer",
-              transition: "background 0.2s, border-color 0.2s"
+              transition: "all 0.2s ease"
             },
-            children: [
-              /* @__PURE__ */ jsx(
-                motion.span,
-                {
-                  style: { fontSize: 20 },
-                  animate: selected === category.id ? { scale: [1, 1.3, 1], rotate: [0, 10, -10, 0] } : {},
-                  transition: { duration: 0.4 },
-                  children: category.icon
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    fontSize: 12,
-                    fontWeight: 500,
-                    color: selected === category.id ? "white" : "var(--widget-text-primary)"
-                  },
-                  children: category.label
-                }
-              )
-            ]
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: 13,
+                  fontWeight: 500,
+                  color: selected === category.id ? "white" : "var(--widget-text-primary)"
+                },
+                children: category.label
+              }
+            )
           },
           category.id
         ))
@@ -744,7 +699,7 @@ var SuccessCelebration = ({ onComplete }) => {
     }
   );
 };
-var MagneticButton = ({ children, onClick, variant = "primary", disabled, loading }) => {
+var MagneticButton = ({ children, onClick, onPressStart, onPressEnd, variant = "primary", disabled, loading }) => {
   const buttonRef = useRef(null);
   const [magnetOffset, setMagnetOffset] = useState({ x: 0, y: 0 });
   const handleMouseMove = (e) => {
@@ -787,8 +742,20 @@ var MagneticButton = ({ children, onClick, variant = "primary", disabled, loadin
     ghost: {
       background: "transparent",
       color: "var(--widget-text-secondary)"
+    },
+    recording: {
+      background: "var(--widget-recording)",
+      color: "white"
     }
   };
+  const handlePressStart = () => {
+    if (disabled || loading) return;
+    onPressStart?.();
+  };
+  const handlePressEnd = () => {
+    if (disabled || loading) return;
+    onPressEnd?.();
+  };
   return /* @__PURE__ */ jsx(
     motion.button,
     {
@@ -796,7 +763,14 @@ var MagneticButton = ({ children, onClick, variant = "primary", disabled, loadin
       onClick,
       disabled: disabled || loading,
       onMouseMove: handleMouseMove,
-      onMouseLeave: handleMouseLeave,
+      onMouseLeave: () => {
+        handleMouseLeave();
+        if (onPressEnd) handlePressEnd();
+      },
+      onMouseDown: onPressStart ? handlePressStart : void 0,
+      onMouseUp: onPressEnd ? handlePressEnd : void 0,
+      onTouchStart: onPressStart ? handlePressStart : void 0,
+      onTouchEnd: onPressEnd ? handlePressEnd : void 0,
       animate: {
         x: magnetOffset.x,
         y: magnetOffset.y,
@@ -824,11 +798,11 @@ var MagneticButton = ({ children, onClick, variant = "primary", disabled, loadin
   );
 };
 var DEFAULT_CATEGORIES = [
-  { id: "bug", label: "Bug", icon: "\u{1F41B}" },
-  { id: "feature", label: "Feature", icon: "\u2728" },
-  { id: "improvement", label: "Improve", icon: "\u{1F4A1}" },
-  { id: "praise", label: "Praise", icon: "\u2764\uFE0F" },
-  { id: "other", label: "Other", icon: "\u{1F4AC}" }
+  { id: "bug", label: "Bug", icon: "" },
+  { id: "feature", label: "Feature", icon: "" },
+  { id: "improvement", label: "Improve", icon: "" },
+  { id: "praise", label: "Praise", icon: "" },
+  { id: "other", label: "Other", icon: "" }
 ];
 var PremiumVoiceWidget = ({
   position = "bottom-right",
@@ -971,6 +945,24 @@ var PremiumVoiceWidget = ({
     return "idle";
   }, [isExpanded, scrollState, state]);
   const shouldShowAttentionPulse = timeOnPage === 60 && !isExpanded && frustrationLevel < 3;
+  const [showPrompt, setShowPrompt] = useState(false);
+  const promptMessages = [
+    "Help us improve!",
+    "Got feedback?",
+    "Share your thoughts",
+    "We'd love to hear from you"
+  ];
+  const [promptMessage, setPromptMessage] = useState(promptMessages[0]);
+  useEffect(() => {
+    if (isExpanded) return;
+    const showTimes = [30, 90, 180];
+    if (showTimes.includes(timeOnPage)) {
+      setPromptMessage(promptMessages[Math.floor(Math.random() * promptMessages.length)]);
+      setShowPrompt(true);
+      const timer = setTimeout(() => setShowPrompt(false), 4e3);
+      return () => clearTimeout(timer);
+    }
+  }, [timeOnPage, isExpanded]);
   return /* @__PURE__ */ jsx(WidgetContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -983,111 +975,167 @@ var PremiumVoiceWidget = ({
         fontFamily: "system-ui, -apple-system, sans-serif"
       },
       children: [
-        /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: !isExpanded && /* @__PURE__ */ jsxs(
-          motion.button,
-          {
-            ref: triggerRef,
-            variants: triggerVariants,
-            initial: "idle",
-            animate: triggerState,
-            exit: "hidden",
-            whileHover: "hover",
-            whileTap: "tap",
-            onClick: handleOpen,
-            onMouseEnter: () => setState("hover"),
-            onMouseLeave: () => setState("idle"),
-            "aria-label": "Open feedback widget",
-            "aria-expanded": isExpanded,
-            style: {
-              width: 56,
-              height: 56,
-              borderRadius: "50%",
-              border: "none",
-              cursor: "pointer",
-              position: "relative",
-              background: "var(--widget-glass-bg)",
-              backdropFilter: "blur(20px) saturate(180%)",
-              WebkitBackdropFilter: "blur(20px) saturate(180%)",
-              boxShadow: `
+        /* @__PURE__ */ jsxs(AnimatePresence, { mode: "wait", children: [
+          !isExpanded && /* @__PURE__ */ jsxs(
+            motion.button,
+            {
+              ref: triggerRef,
+              variants: triggerVariants,
+              initial: "idle",
+              animate: triggerState,
+              exit: "hidden",
+              whileHover: "hover",
+              whileTap: "tap",
+              onClick: handleOpen,
+              onMouseEnter: () => setState("hover"),
+              onMouseLeave: () => setState("idle"),
+              "aria-label": "Open feedback widget",
+              "aria-expanded": isExpanded,
+              style: {
+                width: 56,
+                height: 56,
+                borderRadius: "50%",
+                border: "none",
+                cursor: "pointer",
+                position: "relative",
+                background: "var(--widget-glass-bg)",
+                backdropFilter: "blur(20px) saturate(180%)",
+                WebkitBackdropFilter: "blur(20px) saturate(180%)",
+                boxShadow: `
                   inset 0 0 0 1px var(--widget-glass-highlight),
                   0 4px 24px -4px rgba(0, 0, 0, 0.5),
                   0 0 40px -10px var(--widget-primary-glow)
                 `
-            },
-            children: [
-              /* @__PURE__ */ jsx(BreathingRing, { isActive: !reducedMotion && triggerState === "idle" }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    inset: 3,
-                    borderRadius: "50%",
-                    background: `linear-gradient(135deg, var(--widget-primary) 0%, var(--widget-accent) 100%)`,
-                    opacity: 0.9
+              },
+              children: [
+                /* @__PURE__ */ jsx(BreathingRing, { isActive: !reducedMotion && triggerState === "idle" }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      inset: 3,
+                      borderRadius: "50%",
+                      background: `linear-gradient(135deg, var(--widget-primary) 0%, var(--widget-accent) 100%)`,
+                      opacity: 0.9
+                    }
                   }
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "svg",
-                {
-                  width: 24,
-                  height: 24,
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "white",
-                  strokeWidth: 2,
-                  strokeLinecap: "round",
-                  style: { position: "relative", zIndex: 1 },
-                  children: [
-                    /* @__PURE__ */ jsx("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
-                    /* @__PURE__ */ jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
-                    /* @__PURE__ */ jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
-                    /* @__PURE__ */ jsx("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
-                  ]
-                }
-              ),
-              shouldShowAttentionPulse && /* @__PURE__ */ jsx(
-                motion.div,
-                {
-                  initial: { scale: 1, opacity: 1 },
-                  animate: { scale: 1.5, opacity: 0 },
-                  transition: { duration: 1, repeat: 3 },
-                  style: {
-                    position: "absolute",
-                    inset: 0,
-                    borderRadius: "50%",
-                    border: "2px solid var(--widget-primary)",
-                    pointerEvents: "none"
+                ),
+                /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    width: 24,
+                    height: 24,
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "white",
+                    strokeWidth: 2,
+                    strokeLinecap: "round",
+                    style: {
+                      position: "absolute",
+                      top: "50%",
+                      left: "50%",
+                      transform: "translate(-50%, -50%)",
+                      zIndex: 1
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
+                      /* @__PURE__ */ jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+                      /* @__PURE__ */ jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+                      /* @__PURE__ */ jsx("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+                    ]
                   }
-                }
-              ),
-              frustrationLevel >= 5 && /* @__PURE__ */ jsx(
-                motion.div,
-                {
-                  initial: { scale: 0 },
-                  animate: { scale: 1 },
-                  style: {
-                    position: "absolute",
-                    top: -4,
-                    right: -4,
-                    width: 16,
-                    height: 16,
-                    borderRadius: "50%",
-                    background: "var(--widget-frustrated)",
-                    border: "2px solid var(--widget-glass-bg)",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    fontSize: 10
-                  },
-                  children: "?"
-                }
-              )
-            ]
-          },
-          "trigger"
-        ) }),
+                ),
+                shouldShowAttentionPulse && /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    initial: { scale: 1, opacity: 1 },
+                    animate: { scale: 1.5, opacity: 0 },
+                    transition: { duration: 1, repeat: 3 },
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      borderRadius: "50%",
+                      border: "2px solid var(--widget-primary)",
+                      pointerEvents: "none"
+                    }
+                  }
+                ),
+                frustrationLevel >= 5 && /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    initial: { scale: 0 },
+                    animate: { scale: 1 },
+                    style: {
+                      position: "absolute",
+                      top: -4,
+                      right: -4,
+                      width: 16,
+                      height: 16,
+                      borderRadius: "50%",
+                      background: "var(--widget-frustrated)",
+                      border: "2px solid var(--widget-glass-bg)",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: 10
+                    },
+                    children: "?"
+                  }
+                )
+              ]
+            },
+            "trigger"
+          ),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: showPrompt && !isExpanded && /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: { opacity: 0, x: 10, scale: 0.9 },
+              animate: { opacity: 1, x: 0, scale: 1 },
+              exit: { opacity: 0, x: 10, scale: 0.9 },
+              transition: springPresets.smooth,
+              onClick: handleOpen,
+              style: {
+                position: "absolute",
+                right: 70,
+                top: "50%",
+                transform: "translateY(-50%)",
+                background: "var(--widget-glass-bg)",
+                backdropFilter: "blur(12px)",
+                WebkitBackdropFilter: "blur(12px)",
+                border: "1px solid var(--widget-glass-border)",
+                borderRadius: 12,
+                padding: "10px 16px",
+                boxShadow: "0 4px 20px rgba(0,0,0,0.3)",
+                cursor: "pointer",
+                whiteSpace: "nowrap"
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { style: {
+                  fontSize: 13,
+                  fontWeight: 500,
+                  color: "var(--widget-text-primary)"
+                }, children: promptMessage }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      right: -6,
+                      top: "50%",
+                      transform: "translateY(-50%) rotate(45deg)",
+                      width: 12,
+                      height: 12,
+                      background: "var(--widget-glass-bg)",
+                      borderRight: "1px solid var(--widget-glass-border)",
+                      borderTop: "1px solid var(--widget-glass-border)"
+                    }
+                  }
+                )
+              ]
+            }
+          ) })
+        ] }),
         /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isExpanded && /* @__PURE__ */ jsx(
           motion.div,
           {
@@ -1223,7 +1271,7 @@ var PremiumVoiceWidget = ({
                       ))
                     }
                   ),
-                  /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "auto", padding: 24 }, children: [
+                  /* @__PURE__ */ jsxs("div", { style: { padding: "20px 24px" }, children: [
                     /* @__PURE__ */ jsx("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ jsx(
                       CategorySelector,
                       {
@@ -1249,7 +1297,7 @@ var PremiumVoiceWidget = ({
                             fontSize: 14,
                             marginTop: 16
                           },
-                          children: "Tap the orb to start recording"
+                          children: "Hold to record"
                         }
                       ),
                       (isRecording || transcription) && /* @__PURE__ */ jsx("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ jsx(
@@ -1262,8 +1310,9 @@ var PremiumVoiceWidget = ({
                       /* @__PURE__ */ jsx("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ jsx(
                         MagneticButton,
                         {
-                          onClick: isRecording ? handleStopRecording : handleStartRecording,
-                          variant: isRecording ? "secondary" : "primary",
+                          onPressStart: handleStartRecording,
+                          onPressEnd: handleStopRecording,
+                          variant: isRecording ? "recording" : "primary",
                           children: isRecording ? /* @__PURE__ */ jsxs(Fragment, { children: [
                             /* @__PURE__ */ jsx(
                               "svg",
@@ -1272,11 +1321,11 @@ var PremiumVoiceWidget = ({
                                 height: 16,
                                 viewBox: "0 0 24 24",
                                 fill: "currentColor",
-                                children: /* @__PURE__ */ jsx("rect", { x: 6, y: 6, width: 12, height: 12, rx: 2 })
+                                children: /* @__PURE__ */ jsx("circle", { cx: 12, cy: 12, r: 6 })
                               }
                             ),
-                            "Stop Recording"
-                          ] }) : recordingSeconds > 0 ? "Record Again" : "Start Recording"
+                            "Recording..."
+                          ] }) : transcription ? "Hold to record more" : "Hold to record"
                         }
                       ) })
                     ] }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intentai/react",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "React component for Intent AI feedback widget - easily collect user feedback with AI-powered analysis",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",