@intentai/react 2.1.2 → 2.2.0

package/dist/index.d.mts

@@ -31,6 +31,149 @@ interface FeedbackData {
 }
 declare const PremiumVoiceWidget: React.FC<WidgetConfig>;
 
+interface IntentAIProviderConfig {
+    /** Your Intent AI API key (required) */
+    apiKey: string;
+    /** API URL (defaults to production) */
+    apiUrl?: string;
+    /** User information for identifying feedback */
+    user?: IntentAIUser$1;
+    /** Additional metadata to attach to all feedback */
+    metadata?: Record<string, unknown>;
+}
+interface IntentAIUser$1 {
+    id?: string;
+    email?: string;
+    name?: string;
+    [key: string]: unknown;
+}
+interface IntentAIContextValue {
+    /** Identify the current user */
+    identify: (user: IntentAIUser$1) => void;
+    /** Set metadata to attach to feedback */
+    setMetadata: (metadata: Record<string, unknown>) => void;
+    /** Clear the current user */
+    clearUser: () => void;
+    /** Whether the provider is configured */
+    isConfigured: boolean;
+}
+/**
+ * Hook to access Intent AI context for user identification and metadata
+ */
+declare function useIntentAI(): IntentAIContextValue;
+interface IntentAIProviderProps extends IntentAIProviderConfig {
+    /** Widget configuration options */
+    widgetConfig?: Omit<WidgetConfig, 'onSubmit'>;
+    /** Children components */
+    children?: React.ReactNode;
+    /** Disable the widget (only provide context) */
+    disableWidget?: boolean;
+    /** Callback when feedback is submitted successfully */
+    onFeedbackSubmitted?: () => void;
+    /** Callback when there's an error */
+    onError?: (error: Error) => void;
+}
+/**
+ * Intent AI Provider - Wraps your app with feedback collection capabilities
+ *
+ * @example
+ * ```tsx
+ * import { IntentAIProvider } from '@intentai/react';
+ *
+ * function App() {
+ *   return (
+ *     <IntentAIProvider
+ *       apiKey="your-api-key"
+ *       user={{ id: 'user-123', email: 'user@example.com' }}
+ *     >
+ *       <YourApp />
+ *     </IntentAIProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function IntentAIProvider({ apiKey, apiUrl, user: initialUser, metadata: initialMetadata, widgetConfig, children, disableWidget, onFeedbackSubmitted, onError, }: IntentAIProviderProps): React.ReactElement;
+/**
+ * Hook to identify users - convenience wrapper around useIntentAI
+ *
+ * @example
+ * ```tsx
+ * function UserProfile({ user }) {
+ *   const identify = useIdentify();
+ *
+ *   useEffect(() => {
+ *     identify({ id: user.id, email: user.email, name: user.name });
+ *   }, [user]);
+ *
+ *   return <div>...</div>;
+ * }
+ * ```
+ */
+declare function useIdentify(): (user: IntentAIUser$1) => void;
+/**
+ * Hook to set metadata - convenience wrapper around useIntentAI
+ *
+ * @example
+ * ```tsx
+ * function Dashboard({ plan }) {
+ *   const setMetadata = useSetMetadata();
+ *
+ *   useEffect(() => {
+ *     setMetadata({ plan, feature: 'dashboard' });
+ *   }, [plan]);
+ *
+ *   return <div>...</div>;
+ * }
+ * ```
+ */
+declare function useSetMetadata(): (metadata: Record<string, unknown>) => void;
+
+interface FeedbackButtonProps {
+    /** Button variant style */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'minimal';
+    /** Button size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Show icon */
+    showIcon?: boolean;
+    /** Custom icon (React element) */
+    icon?: React.ReactNode;
+    /** Button label */
+    label?: string;
+    /** Additional class name */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Primary color */
+    primaryColor?: string;
+    /** Click handler - if provided, will be called instead of opening widget */
+    onClick?: () => void;
+    /** Disabled state */
+    disabled?: boolean;
+}
+/**
+ * Customizable feedback button that can trigger the widget or custom actions
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - triggers widget
+ * <FeedbackButton />
+ *
+ * // Custom label and style
+ * <FeedbackButton
+ *   label="Give Feedback"
+ *   variant="secondary"
+ *   size="lg"
+ * />
+ *
+ * // With custom click handler
+ * <FeedbackButton
+ *   label="Report Issue"
+ *   onClick={() => console.log('clicked')}
+ * />
+ * ```
+ */
+declare function FeedbackButton({ variant, size, showIcon, icon, label, className, style, primaryColor, onClick, disabled, }: FeedbackButtonProps): React.ReactElement;
+
 interface IntentAIUser {
     id?: string;
     email?: string;
@@ -102,29 +245,30 @@ declare global {
  */
 declare function IntentAIWidget({ apiKey, apiUrl, widgetUrl, position, theme, primaryColor, allowVoice, allowText, allowScreenshot, customMetadata, user, onOpen: _onOpen, onClose: _onClose, onFeedbackSubmitted: _onFeedbackSubmitted, onError, }: IntentAIProps): null;
 /**
- * Hook to control the Intent AI widget programmatically
+ * Hook to control the script-tag widget programmatically
+ * @deprecated Use useIntentAI from IntentAIProvider instead for React apps
  *
  * @example
  * ```tsx
- * import { IntentAIWidget, useIntentAI } from '@intent-ai/react';
+ * import { IntentAIWidget, useWidgetControls } from '@intentai/react';
  *
  * function App() {
- *   const { open, close, identify } = useIntentAI();
+ *   const { open, close, identify } = useWidgetControls();
  *
  *   return (
  *     <>
- *       <IntentAIWidget apiKey="your-api-key" />
+ *       <IntentAIWidget apiKey="your-api-key" widgetUrl="..." apiUrl="..." />
  *       <button onClick={open}>Open Feedback</button>
  *     </>
  *   );
  * }
  * ```
  */
-declare function useIntentAI(): {
+declare function useWidgetControls(): {
     open: () => void;
     close: () => void;
     identify: (user: IntentAIUser) => void;
     setMetadata: (metadata: Record<string, any>) => void;
 };
 
-export { type IntentAIConfig, type IntentAIProps, type IntentAIUser, IntentAIWidget, PremiumVoiceWidget, type WidgetConfig as PremiumWidgetConfig, IntentAIWidget as default, useIntentAI };
+export { FeedbackButton, type FeedbackButtonProps, type IntentAIConfig, type IntentAIContextValue, type IntentAIProps, IntentAIProvider, type IntentAIProviderConfig, type IntentAIProviderProps, type IntentAIUser, IntentAIWidget, PremiumVoiceWidget, type WidgetConfig as PremiumWidgetConfig, IntentAIWidget as default, useIdentify, useIntentAI, useSetMetadata, useWidgetControls };

package/dist/index.d.ts

@@ -31,6 +31,149 @@ interface FeedbackData {
 }
 declare const PremiumVoiceWidget: React.FC<WidgetConfig>;
 
+interface IntentAIProviderConfig {
+    /** Your Intent AI API key (required) */
+    apiKey: string;
+    /** API URL (defaults to production) */
+    apiUrl?: string;
+    /** User information for identifying feedback */
+    user?: IntentAIUser$1;
+    /** Additional metadata to attach to all feedback */
+    metadata?: Record<string, unknown>;
+}
+interface IntentAIUser$1 {
+    id?: string;
+    email?: string;
+    name?: string;
+    [key: string]: unknown;
+}
+interface IntentAIContextValue {
+    /** Identify the current user */
+    identify: (user: IntentAIUser$1) => void;
+    /** Set metadata to attach to feedback */
+    setMetadata: (metadata: Record<string, unknown>) => void;
+    /** Clear the current user */
+    clearUser: () => void;
+    /** Whether the provider is configured */
+    isConfigured: boolean;
+}
+/**
+ * Hook to access Intent AI context for user identification and metadata
+ */
+declare function useIntentAI(): IntentAIContextValue;
+interface IntentAIProviderProps extends IntentAIProviderConfig {
+    /** Widget configuration options */
+    widgetConfig?: Omit<WidgetConfig, 'onSubmit'>;
+    /** Children components */
+    children?: React.ReactNode;
+    /** Disable the widget (only provide context) */
+    disableWidget?: boolean;
+    /** Callback when feedback is submitted successfully */
+    onFeedbackSubmitted?: () => void;
+    /** Callback when there's an error */
+    onError?: (error: Error) => void;
+}
+/**
+ * Intent AI Provider - Wraps your app with feedback collection capabilities
+ *
+ * @example
+ * ```tsx
+ * import { IntentAIProvider } from '@intentai/react';
+ *
+ * function App() {
+ *   return (
+ *     <IntentAIProvider
+ *       apiKey="your-api-key"
+ *       user={{ id: 'user-123', email: 'user@example.com' }}
+ *     >
+ *       <YourApp />
+ *     </IntentAIProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function IntentAIProvider({ apiKey, apiUrl, user: initialUser, metadata: initialMetadata, widgetConfig, children, disableWidget, onFeedbackSubmitted, onError, }: IntentAIProviderProps): React.ReactElement;
+/**
+ * Hook to identify users - convenience wrapper around useIntentAI
+ *
+ * @example
+ * ```tsx
+ * function UserProfile({ user }) {
+ *   const identify = useIdentify();
+ *
+ *   useEffect(() => {
+ *     identify({ id: user.id, email: user.email, name: user.name });
+ *   }, [user]);
+ *
+ *   return <div>...</div>;
+ * }
+ * ```
+ */
+declare function useIdentify(): (user: IntentAIUser$1) => void;
+/**
+ * Hook to set metadata - convenience wrapper around useIntentAI
+ *
+ * @example
+ * ```tsx
+ * function Dashboard({ plan }) {
+ *   const setMetadata = useSetMetadata();
+ *
+ *   useEffect(() => {
+ *     setMetadata({ plan, feature: 'dashboard' });
+ *   }, [plan]);
+ *
+ *   return <div>...</div>;
+ * }
+ * ```
+ */
+declare function useSetMetadata(): (metadata: Record<string, unknown>) => void;
+
+interface FeedbackButtonProps {
+    /** Button variant style */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'minimal';
+    /** Button size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Show icon */
+    showIcon?: boolean;
+    /** Custom icon (React element) */
+    icon?: React.ReactNode;
+    /** Button label */
+    label?: string;
+    /** Additional class name */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Primary color */
+    primaryColor?: string;
+    /** Click handler - if provided, will be called instead of opening widget */
+    onClick?: () => void;
+    /** Disabled state */
+    disabled?: boolean;
+}
+/**
+ * Customizable feedback button that can trigger the widget or custom actions
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - triggers widget
+ * <FeedbackButton />
+ *
+ * // Custom label and style
+ * <FeedbackButton
+ *   label="Give Feedback"
+ *   variant="secondary"
+ *   size="lg"
+ * />
+ *
+ * // With custom click handler
+ * <FeedbackButton
+ *   label="Report Issue"
+ *   onClick={() => console.log('clicked')}
+ * />
+ * ```
+ */
+declare function FeedbackButton({ variant, size, showIcon, icon, label, className, style, primaryColor, onClick, disabled, }: FeedbackButtonProps): React.ReactElement;
+
 interface IntentAIUser {
     id?: string;
     email?: string;
@@ -102,29 +245,30 @@ declare global {
  */
 declare function IntentAIWidget({ apiKey, apiUrl, widgetUrl, position, theme, primaryColor, allowVoice, allowText, allowScreenshot, customMetadata, user, onOpen: _onOpen, onClose: _onClose, onFeedbackSubmitted: _onFeedbackSubmitted, onError, }: IntentAIProps): null;
 /**
- * Hook to control the Intent AI widget programmatically
+ * Hook to control the script-tag widget programmatically
+ * @deprecated Use useIntentAI from IntentAIProvider instead for React apps
  *
  * @example
  * ```tsx
- * import { IntentAIWidget, useIntentAI } from '@intent-ai/react';
+ * import { IntentAIWidget, useWidgetControls } from '@intentai/react';
  *
  * function App() {
- *   const { open, close, identify } = useIntentAI();
+ *   const { open, close, identify } = useWidgetControls();
  *
  *   return (
  *     <>
- *       <IntentAIWidget apiKey="your-api-key" />
+ *       <IntentAIWidget apiKey="your-api-key" widgetUrl="..." apiUrl="..." />
  *       <button onClick={open}>Open Feedback</button>
  *     </>
  *   );
  * }
  * ```
  */
-declare function useIntentAI(): {
+declare function useWidgetControls(): {
     open: () => void;
     close: () => void;
     identify: (user: IntentAIUser) => void;
     setMetadata: (metadata: Record<string, any>) => void;
 };
 
-export { type IntentAIConfig, type IntentAIProps, type IntentAIUser, IntentAIWidget, PremiumVoiceWidget, type WidgetConfig as PremiumWidgetConfig, IntentAIWidget as default, useIntentAI };
+export { FeedbackButton, type FeedbackButtonProps, type IntentAIConfig, type IntentAIContextValue, type IntentAIProps, IntentAIProvider, type IntentAIProviderConfig, type IntentAIProviderProps, type IntentAIUser, IntentAIWidget, PremiumVoiceWidget, type WidgetConfig as PremiumWidgetConfig, IntentAIWidget as default, useIdentify, useIntentAI, useSetMetadata, useWidgetControls };

package/dist/index.js

@@ -21,13 +21,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
+  FeedbackButton: () => FeedbackButton,
+  IntentAIProvider: () => IntentAIProvider,
   IntentAIWidget: () => IntentAIWidget,
   PremiumVoiceWidget: () => PremiumVoiceWidget,
   default: () => index_default,
-  useIntentAI: () => useIntentAI
+  useIdentify: () => useIdentify,
+  useIntentAI: () => useIntentAI,
+  useSetMetadata: () => useSetMetadata,
+  useWidgetControls: () => useWidgetControls
 });
 module.exports = __toCommonJS(index_exports);
-var import_react2 = require("react");
+var import_react4 = require("react");
 
 // src/components/PremiumVoiceWidget.tsx
 var import_react = require("react");
@@ -129,8 +134,9 @@ var useAudioLevel = (isRecording) => {
         streamRef.current.getTracks().forEach((track) => track.stop());
         streamRef.current = null;
       }
-      if (audioContextRef.current) {
-        audioContextRef.current.close();
+      if (audioContextRef.current && audioContextRef.current.state !== "closed") {
+        audioContextRef.current.close().catch(() => {
+        });
         audioContextRef.current = null;
       }
       analyserRef.current = null;
@@ -168,8 +174,9 @@ var useAudioLevel = (isRecording) => {
       if (streamRef.current) {
         streamRef.current.getTracks().forEach((track) => track.stop());
       }
-      if (audioContextRef.current) {
-        audioContextRef.current.close();
+      if (audioContextRef.current && audioContextRef.current.state !== "closed") {
+        audioContextRef.current.close().catch(() => {
+        });
       }
     };
   }, [isRecording]);
@@ -390,12 +397,12 @@ var AmbientOrb = ({ audioLevel, isRecording }) => {
         ]
       }
     ) }),
-    particles.map((particle) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    particles.filter((p) => p.size != null).map((particle) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_framer_motion.motion.circle,
       {
         cx: 70,
         cy: 70,
-        r: particle.size,
+        r: particle.size || 3,
         fill: particle.color,
         initial: { opacity: 0.8, scale: 1 },
         animate: {
@@ -1642,6 +1649,359 @@ function adjustColor(color, amount) {
   return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, "0")}`;
 }
 
+// src/components/IntentAIProvider.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var IntentAIContext = (0, import_react2.createContext)(null);
+function useIntentAI() {
+  const context = (0, import_react2.useContext)(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 = (0, import_react2.useRef)(initialUser);
+  const metadataRef = (0, import_react2.useRef)(initialMetadata || {});
+  const sessionIdRef = (0, import_react2.useRef)(generateSessionId());
+  (0, import_react2.useEffect)(() => {
+    if (initialUser) {
+      userRef.current = initialUser;
+    }
+  }, [initialUser]);
+  (0, import_react2.useEffect)(() => {
+    if (initialMetadata) {
+      metadataRef.current = { ...metadataRef.current, ...initialMetadata };
+    }
+  }, [initialMetadata]);
+  const identify = (0, import_react2.useCallback)((user) => {
+    userRef.current = { ...userRef.current, ...user };
+  }, []);
+  const setMetadata = (0, import_react2.useCallback)((metadata) => {
+    metadataRef.current = { ...metadataRef.current, ...metadata };
+  }, []);
+  const clearUser = (0, import_react2.useCallback)(() => {
+    userRef.current = void 0;
+  }, []);
+  const handleSubmit = (0, import_react2.useCallback)(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 = (0, import_react2.useMemo)(() => ({
+    identify,
+    setMetadata,
+    clearUser,
+    isConfigured: Boolean(apiKey)
+  }), [identify, setMetadata, clearUser, apiKey]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(IntentAIContext.Provider, { value: contextValue, children: [
+    children,
+    !disableWidget && apiKey && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      PremiumVoiceWidget,
+      {
+        ...widgetConfig,
+        onSubmit: handleSubmit
+      }
+    )
+  ] });
+}
+function useIdentify() {
+  const { identify } = useIntentAI();
+  return identify;
+}
+function useSetMetadata() {
+  const { setMetadata } = useIntentAI();
+  return setMetadata;
+}
+
+// src/components/FeedbackButton.tsx
+var import_react3 = require("react");
+var import_framer_motion2 = require("framer-motion");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var FeedbackIcon = ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "9", cy: "10", r: "1", fill: "currentColor" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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] = (0, import_react3.useState)(false);
+  const [isPressed, setIsPressed] = (0, import_react3.useState)(false);
+  const buttonRef = (0, import_react3.useRef)(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 = (0, import_react3.useCallback)(() => {
+    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__ */ (0, import_jsx_runtime3.jsxs)(
+    import_framer_motion2.motion.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__ */ (0, import_jsx_runtime3.jsx)(
+          import_framer_motion2.motion.div,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: isHovered ? 0.1 : 0 },
+            style: {
+              position: "absolute",
+              inset: 0,
+              background: "white",
+              pointerEvents: "none"
+            }
+          }
+        ),
+        variant === "primary" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "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__ */ (0, import_jsx_runtime3.jsx)("span", { style: { display: "flex", alignItems: "center", position: "relative", zIndex: 1 }, children: icon || /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FeedbackIcon, { size: sizeConfig.iconSize }) }),
+        label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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,
@@ -1660,9 +2020,9 @@ function IntentAIWidget({
   onFeedbackSubmitted: _onFeedbackSubmitted,
   onError
 }) {
-  const widgetRef = (0, import_react2.useRef)(null);
-  const scriptLoadedRef = (0, import_react2.useRef)(false);
-  const initWidget = (0, import_react2.useCallback)(() => {
+  const widgetRef = (0, import_react4.useRef)(null);
+  const scriptLoadedRef = (0, import_react4.useRef)(false);
+  const initWidget = (0, import_react4.useCallback)(() => {
     if (!window.FeedbackIQ || widgetRef.current) return;
     try {
       widgetRef.current = new window.FeedbackIQ({
@@ -1685,7 +2045,7 @@ function IntentAIWidget({
     void _onClose;
     void _onFeedbackSubmitted;
   }, [apiKey, apiUrl, widgetUrl, position, theme, primaryColor, allowVoice, allowText, allowScreenshot, customMetadata, user, onError]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!widgetUrl) {
       onError?.(new Error("widgetUrl is required for IntentAIWidget"));
       return;
@@ -1716,39 +2076,39 @@ function IntentAIWidget({
       }
     };
   }, [initWidget, onError, widgetUrl]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (widgetRef.current && user) {
       widgetRef.current.identify(user);
     }
   }, [user]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (widgetRef.current && customMetadata) {
       widgetRef.current.setMetadata(customMetadata);
     }
   }, [customMetadata]);
   return null;
 }
-function useIntentAI() {
-  const open = (0, import_react2.useCallback)(() => {
+function useWidgetControls() {
+  const open = (0, import_react4.useCallback)(() => {
     const widget = document.getElementById("feedbackiq-widget");
     if (widget) {
       const trigger = widget.shadowRoot?.querySelector(".fiq-trigger");
       trigger?.click();
     }
   }, []);
-  const close = (0, import_react2.useCallback)(() => {
+  const close = (0, import_react4.useCallback)(() => {
     const widget = document.getElementById("feedbackiq-widget");
     if (widget) {
       const closeBtn = widget.shadowRoot?.querySelector(".fiq-close");
       closeBtn?.click();
     }
   }, []);
-  const identify = (0, import_react2.useCallback)((user) => {
+  const identify = (0, import_react4.useCallback)((user) => {
     if (window.IntentAI?.widget) {
       window.IntentAI.widget.identify(user);
     }
   }, []);
-  const setMetadata = (0, import_react2.useCallback)((metadata) => {
+  const setMetadata = (0, import_react4.useCallback)((metadata) => {
     if (window.IntentAI?.widget) {
       window.IntentAI.widget.setMetadata(metadata);
     }
@@ -1758,7 +2118,12 @@ function useIntentAI() {
 var index_default = IntentAIWidget;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FeedbackButton,
+  IntentAIProvider,
   IntentAIWidget,
   PremiumVoiceWidget,
-  useIntentAI
+  useIdentify,
+  useIntentAI,
+  useSetMetadata,
+  useWidgetControls
 });

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 {
@@ -111,8 +111,9 @@ var useAudioLevel = (isRecording) => {
         streamRef.current.getTracks().forEach((track) => track.stop());
         streamRef.current = null;
       }
-      if (audioContextRef.current) {
-        audioContextRef.current.close();
+      if (audioContextRef.current && audioContextRef.current.state !== "closed") {
+        audioContextRef.current.close().catch(() => {
+        });
         audioContextRef.current = null;
       }
       analyserRef.current = null;
@@ -150,8 +151,9 @@ var useAudioLevel = (isRecording) => {
       if (streamRef.current) {
         streamRef.current.getTracks().forEach((track) => track.stop());
       }
-      if (audioContextRef.current) {
-        audioContextRef.current.close();
+      if (audioContextRef.current && audioContextRef.current.state !== "closed") {
+        audioContextRef.current.close().catch(() => {
+        });
       }
     };
   }, [isRecording]);
@@ -372,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: {
@@ -1624,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,
@@ -1642,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({
@@ -1667,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;
@@ -1698,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);
     }
@@ -1739,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.2",
+  "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",