@intentai/react 2.1.1 → 2.2.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 
 // src/index.tsx
-import { useEffect as useEffect2, useRef as useRef2, useCallback as useCallback2 } from "react";
+import { useEffect as useEffect3, useRef as useRef4, useCallback as useCallback4 } from "react";
 
 // src/components/PremiumVoiceWidget.tsx
 import {
@@ -98,15 +98,33 @@ var useAudioLevel = (isRecording) => {
   const [audioLevel, setAudioLevel] = useState(0);
   const analyserRef = useRef(null);
   const animationRef = useRef();
+  const streamRef = useRef(null);
+  const audioContextRef = useRef(null);
   useEffect(() => {
     if (!isRecording) {
       setAudioLevel(0);
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+        animationRef.current = void 0;
+      }
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((track) => track.stop());
+        streamRef.current = null;
+      }
+      if (audioContextRef.current && audioContextRef.current.state !== "closed") {
+        audioContextRef.current.close().catch(() => {
+        });
+        audioContextRef.current = null;
+      }
+      analyserRef.current = null;
       return;
     }
     const initAudio = async () => {
       try {
         const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        streamRef.current = stream;
         const audioContext = new AudioContext();
+        audioContextRef.current = audioContext;
         const source = audioContext.createMediaStreamSource(stream);
         const analyser = audioContext.createAnalyser();
         analyser.fftSize = 256;
@@ -130,6 +148,13 @@ var useAudioLevel = (isRecording) => {
       if (animationRef.current) {
         cancelAnimationFrame(animationRef.current);
       }
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((track) => track.stop());
+      }
+      if (audioContextRef.current && audioContextRef.current.state !== "closed") {
+        audioContextRef.current.close().catch(() => {
+        });
+      }
     };
   }, [isRecording]);
   return audioLevel;
@@ -349,12 +374,12 @@ var AmbientOrb = ({ audioLevel, isRecording }) => {
         ]
       }
     ) }),
-    particles.map((particle) => /* @__PURE__ */ jsx(
+    particles.filter((p) => p.size != null).map((particle) => /* @__PURE__ */ jsx(
       motion.circle,
       {
         cx: 70,
         cy: 70,
-        r: particle.size,
+        r: particle.size || 3,
         fill: particle.color,
         initial: { opacity: 0.8, scale: 1 },
         animate: {
@@ -1601,6 +1626,359 @@ function adjustColor(color, amount) {
   return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, "0")}`;
 }
 
+// src/components/IntentAIProvider.tsx
+import { createContext as createContext2, useContext as useContext2, useCallback as useCallback2, useMemo as useMemo2, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var IntentAIContext = createContext2(null);
+function useIntentAI() {
+  const context = useContext2(IntentAIContext);
+  if (!context) {
+    throw new Error("useIntentAI must be used within an IntentAIProvider");
+  }
+  return context;
+}
+function generateSessionId() {
+  return `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+}
+function getDeviceInfo() {
+  const ua = navigator.userAgent;
+  let browser = "Unknown";
+  let browserVersion = "Unknown";
+  if (ua.includes("Firefox/")) {
+    browser = "Firefox";
+    const match = ua.match(/Firefox\/(\d+(\.\d+)?)/);
+    if (match) browserVersion = match[1];
+  } else if (ua.includes("Edg/")) {
+    browser = "Edge";
+    const match = ua.match(/Edg\/(\d+(\.\d+)?)/);
+    if (match) browserVersion = match[1];
+  } else if (ua.includes("Chrome/")) {
+    browser = "Chrome";
+    const match = ua.match(/Chrome\/(\d+(\.\d+)?)/);
+    if (match) browserVersion = match[1];
+  } else if (ua.includes("Safari/") && !ua.includes("Chrome")) {
+    browser = "Safari";
+    const match = ua.match(/Version\/(\d+(\.\d+)?)/);
+    if (match) browserVersion = match[1];
+  }
+  let os = "Unknown";
+  if (ua.includes("Windows NT 10")) os = "Windows 10";
+  else if (ua.includes("Windows")) os = "Windows";
+  else if (ua.includes("Mac OS X")) os = "macOS";
+  else if (ua.includes("Android")) os = "Android";
+  else if (ua.includes("iPhone") || ua.includes("iPad")) os = "iOS";
+  else if (ua.includes("Linux")) os = "Linux";
+  let device = "Desktop";
+  if (/iPhone|iPad|iPod/.test(ua)) device = "iOS Device";
+  else if (/Android.*Mobile/.test(ua)) device = "Android Phone";
+  else if (/Android/.test(ua)) device = "Android Tablet";
+  return { browser, browserVersion, os, device };
+}
+var DEFAULT_API_URL = "https://api-production-5b88.up.railway.app";
+function IntentAIProvider({
+  apiKey,
+  apiUrl = DEFAULT_API_URL,
+  user: initialUser,
+  metadata: initialMetadata,
+  widgetConfig,
+  children,
+  disableWidget = false,
+  onFeedbackSubmitted,
+  onError
+}) {
+  const userRef = useRef2(initialUser);
+  const metadataRef = useRef2(initialMetadata || {});
+  const sessionIdRef = useRef2(generateSessionId());
+  useEffect2(() => {
+    if (initialUser) {
+      userRef.current = initialUser;
+    }
+  }, [initialUser]);
+  useEffect2(() => {
+    if (initialMetadata) {
+      metadataRef.current = { ...metadataRef.current, ...initialMetadata };
+    }
+  }, [initialMetadata]);
+  const identify = useCallback2((user) => {
+    userRef.current = { ...userRef.current, ...user };
+  }, []);
+  const setMetadata = useCallback2((metadata) => {
+    metadataRef.current = { ...metadataRef.current, ...metadata };
+  }, []);
+  const clearUser = useCallback2(() => {
+    userRef.current = void 0;
+  }, []);
+  const handleSubmit = useCallback2(async (feedback) => {
+    const deviceInfo = getDeviceInfo();
+    const user = userRef.current;
+    const customMetadata = metadataRef.current;
+    const categoryMap = {
+      bug: "BUG",
+      feature: "FEATURE",
+      improvement: "IMPROVEMENT",
+      praise: "PRAISE",
+      other: "OTHER"
+    };
+    const payload = {
+      sessionId: sessionIdRef.current,
+      type: feedback.type === "voice" ? "VOICE" : "TEXT",
+      category: categoryMap[feedback.category.toLowerCase()] || feedback.category.toUpperCase(),
+      rawText: feedback.type === "text" ? feedback.content : void 0,
+      transcription: feedback.type === "voice" ? feedback.transcription || feedback.content : void 0,
+      pageUrl: typeof window !== "undefined" ? window.location.href : "",
+      pageTitle: typeof document !== "undefined" ? document.title : "",
+      userId: user?.id,
+      userEmail: user?.email,
+      userName: user?.name,
+      customData: {
+        ...customMetadata,
+        ...feedback.metadata
+      },
+      browser: deviceInfo.browser,
+      browserVersion: deviceInfo.browserVersion,
+      os: deviceInfo.os,
+      device: deviceInfo.device,
+      screenWidth: typeof window !== "undefined" ? window.screen.width : void 0,
+      screenHeight: typeof window !== "undefined" ? window.screen.height : void 0
+    };
+    try {
+      const response = await fetch(`${apiUrl}/feedback`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-API-Key": apiKey
+        },
+        body: JSON.stringify(payload)
+      });
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error || `Failed to submit feedback: ${response.status}`);
+      }
+      onFeedbackSubmitted?.();
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error("Failed to submit feedback");
+      onError?.(err);
+      throw err;
+    }
+  }, [apiKey, apiUrl, onFeedbackSubmitted, onError]);
+  const contextValue = useMemo2(() => ({
+    identify,
+    setMetadata,
+    clearUser,
+    isConfigured: Boolean(apiKey)
+  }), [identify, setMetadata, clearUser, apiKey]);
+  return /* @__PURE__ */ jsxs2(IntentAIContext.Provider, { value: contextValue, children: [
+    children,
+    !disableWidget && apiKey && /* @__PURE__ */ jsx2(
+      PremiumVoiceWidget,
+      {
+        ...widgetConfig,
+        onSubmit: handleSubmit
+      }
+    )
+  ] });
+}
+function useIdentify() {
+  const { identify } = useIntentAI();
+  return identify;
+}
+function useSetMetadata() {
+  const { setMetadata } = useIntentAI();
+  return setMetadata;
+}
+
+// src/components/FeedbackButton.tsx
+import { useCallback as useCallback3, useState as useState2, useRef as useRef3 } from "react";
+import { motion as motion2 } from "framer-motion";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var FeedbackIcon = ({ size }) => /* @__PURE__ */ jsxs3(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx3("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }),
+      /* @__PURE__ */ jsx3("circle", { cx: "9", cy: "10", r: "1", fill: "currentColor" }),
+      /* @__PURE__ */ jsx3("circle", { cx: "15", cy: "10", r: "1", fill: "currentColor" })
+    ]
+  }
+);
+function FeedbackButton({
+  variant = "primary",
+  size = "md",
+  showIcon = true,
+  icon,
+  label = "Feedback",
+  className,
+  style,
+  primaryColor = "#10b981",
+  onClick,
+  disabled = false
+}) {
+  const [isHovered, setIsHovered] = useState2(false);
+  const [isPressed, setIsPressed] = useState2(false);
+  const buttonRef = useRef3(null);
+  const sizes = {
+    sm: {
+      padding: "8px 14px",
+      fontSize: 13,
+      iconSize: 14,
+      gap: 6,
+      borderRadius: 8
+    },
+    md: {
+      padding: "10px 18px",
+      fontSize: 14,
+      iconSize: 16,
+      gap: 8,
+      borderRadius: 10
+    },
+    lg: {
+      padding: "14px 24px",
+      fontSize: 15,
+      iconSize: 18,
+      gap: 10,
+      borderRadius: 12
+    }
+  };
+  const sizeConfig = sizes[size];
+  const variants = {
+    primary: {
+      background: `linear-gradient(145deg, ${primaryColor} 0%, ${adjustColor2(primaryColor, -20)} 100%)`,
+      color: "white",
+      border: "none",
+      boxShadow: `0 4px 16px -4px ${primaryColor}66, 0 2px 4px rgba(0, 0, 0, 0.1)`
+    },
+    secondary: {
+      background: "white",
+      color: "#374151",
+      border: "1px solid #e5e7eb",
+      boxShadow: "0 2px 4px rgba(0, 0, 0, 0.05)"
+    },
+    ghost: {
+      background: "transparent",
+      color: "#6b7280",
+      border: "1px solid transparent",
+      boxShadow: "none"
+    },
+    minimal: {
+      background: "transparent",
+      color: primaryColor,
+      border: "none",
+      boxShadow: "none"
+    }
+  };
+  const variantStyle = variants[variant];
+  const handleClick = useCallback3(() => {
+    if (disabled) return;
+    if (onClick) {
+      onClick();
+      return;
+    }
+    const widget = document.querySelector(".fiq-premium-widget");
+    if (widget) {
+      const trigger = widget.querySelector('button[aria-label="Open feedback widget"]');
+      if (trigger) {
+        trigger.click();
+        return;
+      }
+    }
+    const scriptWidget = document.getElementById("feedbackiq-widget");
+    if (scriptWidget?.shadowRoot) {
+      const trigger = scriptWidget.shadowRoot.querySelector(".fiq-trigger");
+      if (trigger) {
+        trigger.click();
+      }
+    }
+  }, [onClick, disabled]);
+  return /* @__PURE__ */ jsxs3(
+    motion2.button,
+    {
+      ref: buttonRef,
+      onClick: handleClick,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => {
+        setIsHovered(false);
+        setIsPressed(false);
+      },
+      onMouseDown: () => setIsPressed(true),
+      onMouseUp: () => setIsPressed(false),
+      disabled,
+      animate: {
+        scale: isPressed ? 0.97 : isHovered ? 1.02 : 1,
+        y: isHovered ? -1 : 0
+      },
+      transition: {
+        type: "spring",
+        stiffness: 400,
+        damping: 25
+      },
+      className,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: sizeConfig.gap,
+        padding: sizeConfig.padding,
+        fontSize: sizeConfig.fontSize,
+        fontWeight: 600,
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        borderRadius: sizeConfig.borderRadius,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        transition: "all 0.2s ease",
+        position: "relative",
+        overflow: "hidden",
+        ...variantStyle,
+        ...style
+      },
+      children: [
+        variant === "primary" && /* @__PURE__ */ jsx3(
+          motion2.div,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: isHovered ? 0.1 : 0 },
+            style: {
+              position: "absolute",
+              inset: 0,
+              background: "white",
+              pointerEvents: "none"
+            }
+          }
+        ),
+        variant === "primary" && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              background: "linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%)",
+              borderRadius: "inherit",
+              pointerEvents: "none"
+            }
+          }
+        ),
+        showIcon && /* @__PURE__ */ jsx3("span", { style: { display: "flex", alignItems: "center", position: "relative", zIndex: 1 }, children: icon || /* @__PURE__ */ jsx3(FeedbackIcon, { size: sizeConfig.iconSize }) }),
+        label && /* @__PURE__ */ jsx3("span", { style: { position: "relative", zIndex: 1 }, children: label })
+      ]
+    }
+  );
+}
+function adjustColor2(color, amount) {
+  const hex = color.replace("#", "");
+  const num = parseInt(hex, 16);
+  const r = Math.min(255, Math.max(0, (num >> 16) + amount));
+  const g = Math.min(255, Math.max(0, (num >> 8 & 255) + amount));
+  const b = Math.min(255, Math.max(0, (num & 255) + amount));
+  return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, "0")}`;
+}
+
 // src/index.tsx
 function IntentAIWidget({
   apiKey,
@@ -1619,9 +1997,9 @@ function IntentAIWidget({
   onFeedbackSubmitted: _onFeedbackSubmitted,
   onError
 }) {
-  const widgetRef = useRef2(null);
-  const scriptLoadedRef = useRef2(false);
-  const initWidget = useCallback2(() => {
+  const widgetRef = useRef4(null);
+  const scriptLoadedRef = useRef4(false);
+  const initWidget = useCallback4(() => {
     if (!window.FeedbackIQ || widgetRef.current) return;
     try {
       widgetRef.current = new window.FeedbackIQ({
@@ -1644,7 +2022,7 @@ function IntentAIWidget({
     void _onClose;
     void _onFeedbackSubmitted;
   }, [apiKey, apiUrl, widgetUrl, position, theme, primaryColor, allowVoice, allowText, allowScreenshot, customMetadata, user, onError]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!widgetUrl) {
       onError?.(new Error("widgetUrl is required for IntentAIWidget"));
       return;
@@ -1675,39 +2053,39 @@ function IntentAIWidget({
       }
     };
   }, [initWidget, onError, widgetUrl]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (widgetRef.current && user) {
       widgetRef.current.identify(user);
     }
   }, [user]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (widgetRef.current && customMetadata) {
       widgetRef.current.setMetadata(customMetadata);
     }
   }, [customMetadata]);
   return null;
 }
-function useIntentAI() {
-  const open = useCallback2(() => {
+function useWidgetControls() {
+  const open = useCallback4(() => {
     const widget = document.getElementById("feedbackiq-widget");
     if (widget) {
       const trigger = widget.shadowRoot?.querySelector(".fiq-trigger");
       trigger?.click();
     }
   }, []);
-  const close = useCallback2(() => {
+  const close = useCallback4(() => {
     const widget = document.getElementById("feedbackiq-widget");
     if (widget) {
       const closeBtn = widget.shadowRoot?.querySelector(".fiq-close");
       closeBtn?.click();
     }
   }, []);
-  const identify = useCallback2((user) => {
+  const identify = useCallback4((user) => {
     if (window.IntentAI?.widget) {
       window.IntentAI.widget.identify(user);
     }
   }, []);
-  const setMetadata = useCallback2((metadata) => {
+  const setMetadata = useCallback4((metadata) => {
     if (window.IntentAI?.widget) {
       window.IntentAI.widget.setMetadata(metadata);
     }
@@ -1716,8 +2094,13 @@ function useIntentAI() {
 }
 var index_default = IntentAIWidget;
 export {
+  FeedbackButton,
+  IntentAIProvider,
   IntentAIWidget,
   PremiumVoiceWidget,
   index_default as default,
-  useIntentAI
+  useIdentify,
+  useIntentAI,
+  useSetMetadata,
+  useWidgetControls
 };

package/package.json

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