@checkflow/sdk 1.1.4 → 1.1.5

package/dist/react.d.mts

@@ -1,11 +1,27 @@
 import { H as HighlightAnnotation } from './highlighter-D0FpwCSU.mjs';
-import { a as FeedbackResponse, C as CheckflowConfig } from './types-CBCRUGst.mjs';
+import { B as ButtonConfig, U as UserProfile, a as FeedbackResponse, C as CheckflowConfig } from './types-fCeePy5c.mjs';
 
 /**
  * Initialize Checkflow in a React/Next.js app.
  * Call this in your root layout or _app file.
+ *
+ * @param config - SDK configuration including apiKey, user profile, and widget options
  */
 declare function useCheckflowInit(config: CheckflowConfig): void;
+/**
+ * Update the user profile after initialization.
+ * Useful when user logs in/out.
+ */
+declare function setUser(user: UserProfile | undefined): Promise<void>;
+/**
+ * Clear the user profile.
+ */
+declare function clearUser(): Promise<void>;
+/**
+ * Open the feedback modal programmatically.
+ * Use this when you want to trigger the modal from a custom button.
+ */
+declare function openFeedbackModal(): Promise<void>;
 /**
  * Hook to send feedback programmatically from React components.
  */
@@ -20,10 +36,39 @@ declare function useCheckflowFeedback(): {
     highlight: () => Promise<HighlightAnnotation[]>;
     show: () => Promise<void>;
     hide: () => Promise<void>;
+    openModal: typeof openFeedbackModal;
+    setUser: typeof setUser;
+    clearUser: typeof clearUser;
 };
 /**
  * Cleanup function for React useEffect.
  */
 declare function destroyCheckflow(): void;
+/**
+ * Props for the FeedbackButton component.
+ * All button styling can be customized via className, style, or button config.
+ */
+interface FeedbackButtonProps {
+    /** Button text content */
+    children?: string;
+    /** Custom CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: Record<string, string | number>;
+    /** Button configuration for SDK styling */
+    buttonConfig?: ButtonConfig;
+    /** Click handler (called before opening modal) */
+    onClick?: () => void;
+}
+/**
+ * Get the onClick handler for a feedback button.
+ * Use this to create your own custom button that opens the feedback modal.
+ *
+ * @example
+ * ```tsx
+ * <button onClick={getFeedbackButtonHandler()}>Report Bug</button>
+ * ```
+ */
+declare function getFeedbackButtonHandler(onClick?: () => void): () => void;
 
-export { destroyCheckflow, useCheckflowFeedback, useCheckflowInit };
+export { type FeedbackButtonProps, clearUser, destroyCheckflow, getFeedbackButtonHandler, openFeedbackModal, setUser, useCheckflowFeedback, useCheckflowInit };

package/dist/react.d.ts

@@ -1,11 +1,27 @@
 import { H as HighlightAnnotation } from './highlighter-D0FpwCSU.js';
-import { a as FeedbackResponse, C as CheckflowConfig } from './types-CBCRUGst.js';
+import { B as ButtonConfig, U as UserProfile, a as FeedbackResponse, C as CheckflowConfig } from './types-fCeePy5c.js';
 
 /**
  * Initialize Checkflow in a React/Next.js app.
  * Call this in your root layout or _app file.
+ *
+ * @param config - SDK configuration including apiKey, user profile, and widget options
  */
 declare function useCheckflowInit(config: CheckflowConfig): void;
+/**
+ * Update the user profile after initialization.
+ * Useful when user logs in/out.
+ */
+declare function setUser(user: UserProfile | undefined): Promise<void>;
+/**
+ * Clear the user profile.
+ */
+declare function clearUser(): Promise<void>;
+/**
+ * Open the feedback modal programmatically.
+ * Use this when you want to trigger the modal from a custom button.
+ */
+declare function openFeedbackModal(): Promise<void>;
 /**
  * Hook to send feedback programmatically from React components.
  */
@@ -20,10 +36,39 @@ declare function useCheckflowFeedback(): {
     highlight: () => Promise<HighlightAnnotation[]>;
     show: () => Promise<void>;
     hide: () => Promise<void>;
+    openModal: typeof openFeedbackModal;
+    setUser: typeof setUser;
+    clearUser: typeof clearUser;
 };
 /**
  * Cleanup function for React useEffect.
  */
 declare function destroyCheckflow(): void;
+/**
+ * Props for the FeedbackButton component.
+ * All button styling can be customized via className, style, or button config.
+ */
+interface FeedbackButtonProps {
+    /** Button text content */
+    children?: string;
+    /** Custom CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: Record<string, string | number>;
+    /** Button configuration for SDK styling */
+    buttonConfig?: ButtonConfig;
+    /** Click handler (called before opening modal) */
+    onClick?: () => void;
+}
+/**
+ * Get the onClick handler for a feedback button.
+ * Use this to create your own custom button that opens the feedback modal.
+ *
+ * @example
+ * ```tsx
+ * <button onClick={getFeedbackButtonHandler()}>Report Bug</button>
+ * ```
+ */
+declare function getFeedbackButtonHandler(onClick?: () => void): () => void;
 
-export { destroyCheckflow, useCheckflowFeedback, useCheckflowInit };
+export { type FeedbackButtonProps, clearUser, destroyCheckflow, getFeedbackButtonHandler, openFeedbackModal, setUser, useCheckflowFeedback, useCheckflowInit };

package/dist/react.js

@@ -1321,9 +1321,16 @@ var init_editor = __esm({
 });
 
 // src/widget.ts
+var widget_exports = {};
+__export(widget_exports, {
+  mountWidget: () => mountWidget,
+  openFeedbackModal: () => openFeedbackModal,
+  unmountWidget: () => unmountWidget
+});
 function mountWidget(config2 = {}, onSubmit, opts) {
   if (container) return;
   onSubmitCallback = onSubmit;
+  currentUser = opts?.user;
   const cfg = { ...DEFAULT_CONFIG, ...config2 };
   currentCfg = cfg;
   container = document.createElement("div");
@@ -1334,13 +1341,20 @@ function mountWidget(config2 = {}, onSubmit, opts) {
   const btn = container.querySelector("#cf-trigger");
   btn?.addEventListener("click", () => openModal(cfg, opts));
 }
+function openFeedbackModal(config2 = {}, onSubmit, opts) {
+  onSubmitCallback = onSubmit;
+  currentUser = opts?.user;
+  const cfg = { ...DEFAULT_CONFIG, ...config2 };
+  currentCfg = cfg;
+  injectStyles(cfg);
+  openModal(cfg, opts);
+}
 function getBackdropClass(cfg, expanded) {
   if (expanded) return "cf-backdrop--center";
   if (cfg.position === "center") return "cf-backdrop--center";
-  return "cf-backdrop--corner cf-pos-" + cfg.position;
+  return "cf-backdrop--corner cf-pos-" + (cfg.position || "bottom-right");
 }
 function openModal(cfg, opts) {
-  if (!container) return;
   const existing = document.getElementById("cf-modal-backdrop");
   if (existing) existing.remove();
   isExpanded = false;
@@ -1453,8 +1467,10 @@ function bindModalEvents(cfg, opts) {
   });
   backdrop.querySelector("#cf-submit")?.addEventListener("click", () => {
     const desc = backdrop.querySelector("#cf-desc")?.value;
-    const name = backdrop.querySelector("#cf-name")?.value;
-    const email = backdrop.querySelector("#cf-email")?.value;
+    const nameEl = backdrop.querySelector("#cf-name");
+    const emailEl = backdrop.querySelector("#cf-email");
+    const name = nameEl?.value || currentUser?.name;
+    const email = emailEl?.value || currentUser?.email;
     if (!desc?.trim()) {
       const descEl = backdrop.querySelector("#cf-desc");
       if (descEl) {
@@ -1496,33 +1512,93 @@ function showToast(msg) {
   setTimeout(() => toast.remove(), 3e3);
 }
 function injectStyles(cfg) {
+  const existingStyle = document.getElementById("cf-widget-styles");
+  if (existingStyle) existingStyle.remove();
+  const btn = cfg.button || {};
+  const sizePreset = SIZE_PRESETS[btn.size || "default"] || SIZE_PRESETS.default;
+  const variantPreset = VARIANT_PRESETS[btn.variant || "default"] || VARIANT_PRESETS.default;
+  const bgColor = btn.backgroundColor || cfg.color || variantPreset.bg;
+  const textColor = btn.textColor || variantPreset.color;
+  const borderRadius = btn.borderRadius || "8px";
+  const padding = btn.padding || sizePreset.padding;
+  const fontSize = btn.fontSize || sizePreset.fontSize;
+  const fontWeight = btn.fontWeight || "500";
+  const border = btn.border || variantPreset.border;
+  const boxShadow = btn.boxShadow || "0 2px 8px rgba(0,0,0,0.15)";
+  const primaryColor = cfg.color || "#1e3a5f";
   const style = document.createElement("style");
   style.id = "cf-widget-styles";
   style.textContent = `
     @keyframes cf-toast-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
     @keyframes cf-modal-in { from { opacity:0; transform:scale(.96) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }
 
+    /* User card styles */
+    .cf-user-card {
+      display:flex;
+      align-items:center;
+      gap:12px;
+      padding:12px;
+      background:#f8f9fa;
+      border-radius:10px;
+      margin-bottom:4px;
+    }
+    .cf-user-avatar {
+      width:40px;
+      height:40px;
+      border-radius:50%;
+      object-fit:cover;
+    }
+    .cf-user-avatar-placeholder {
+      width:40px;
+      height:40px;
+      border-radius:50%;
+      background:${primaryColor};
+      color:#fff;
+      display:flex;
+      align-items:center;
+      justify-content:center;
+      font-size:16px;
+      font-weight:600;
+    }
+    .cf-user-info {
+      flex:1;
+      min-width:0;
+    }
+    .cf-user-name {
+      font-size:14px;
+      font-weight:600;
+      color:#1a1a2e;
+    }
+    .cf-user-email {
+      font-size:12px;
+      color:#666;
+      overflow:hidden;
+      text-overflow:ellipsis;
+      white-space:nowrap;
+    }
+
+    /* Trigger button - now inline, not fixed position */
     #cf-trigger {
       position:fixed;
-      ${getPositionCSS(cfg.position)}
+      ${getPositionCSS(cfg.position || "bottom-right")}
       z-index:100000;
-      background:${cfg.color};
-      color:#fff;
-      border:none;
-      border-radius:50px;
-      padding:11px 20px;
-      font-size:14px;
-      font-weight:500;
+      background:${bgColor};
+      color:${textColor};
+      border:${border};
+      border-radius:${borderRadius};
+      padding:${padding};
+      font-size:${fontSize};
+      font-weight:${fontWeight};
       font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
       cursor:pointer;
-      box-shadow:0 4px 16px rgba(0,0,0,.18);
-      display:flex;
+      box-shadow:${boxShadow};
+      display:inline-flex;
       align-items:center;
       gap:8px;
-      transition:transform .15s,box-shadow .15s;
+      transition:transform .15s,box-shadow .15s,opacity .15s;
     }
-    #cf-trigger:hover { transform:scale(1.04); box-shadow:0 6px 24px rgba(0,0,0,.22); }
-    #cf-trigger svg { width:18px; height:18px; }
+    #cf-trigger:hover { opacity:0.9; }
+    #cf-trigger svg { width:16px; height:16px; flex-shrink:0; }
 
     #cf-modal-backdrop {
       position:fixed;
@@ -1623,7 +1699,7 @@ function injectStyles(cfg) {
       transition:all .15s;
     }
     .cf-tool-highlight {
-      background:${cfg.color};
+      background:${primaryColor};
       color:#fff;
     }
     .cf-tool-highlight:hover { opacity:.9; }
@@ -1671,8 +1747,8 @@ function injectStyles(cfg) {
     }
     .cf-field input::placeholder, .cf-field textarea::placeholder { color:#bbb; }
     .cf-field input:focus, .cf-field textarea:focus {
-      border-color:${cfg.color};
-      box-shadow:0 0 0 3px ${cfg.color}18;
+      border-color:${primaryColor};
+      box-shadow:0 0 0 3px ${primaryColor}18;
     }
     .cf-field textarea { resize:vertical; min-height:100px; }
 
@@ -1711,7 +1787,7 @@ function injectStyles(cfg) {
       padding:13px;
       border:none;
       border-radius:10px;
-      background:${cfg.color};
+      background:${primaryColor};
       color:#fff;
       font-size:15px;
       font-weight:600;
@@ -1719,7 +1795,7 @@ function injectStyles(cfg) {
       font-family:inherit;
       transition:all .15s;
     }
-    .cf-submit-btn:hover { opacity:.92; transform:translateY(-1px); box-shadow:0 4px 12px ${cfg.color}40; }
+    .cf-submit-btn:hover { opacity:.92; transform:translateY(-1px); box-shadow:0 4px 12px ${primaryColor}40; }
     .cf-submit-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
 
     .cf-cancel-btn {
@@ -1750,7 +1826,7 @@ function injectStyles(cfg) {
       text-decoration:none;
       font-weight:500;
     }
-    .cf-footer a:hover { color:${cfg.color}; }
+    .cf-footer a:hover { color:${primaryColor}; }
   `;
   document.head.appendChild(style);
 }
@@ -1769,10 +1845,15 @@ function getPositionCSS(pos) {
   }
 }
 function getTriggerHTML(cfg) {
+  const btn = cfg.button || {};
+  const text = btn.text || cfg.text || "Report Bug";
+  const showIcon = btn.showIcon !== false;
+  const customClass = btn.className || "";
+  const icon = showIcon ? `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>` : "";
   return `
-    <button id="cf-trigger">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
-      ${cfg.text}
+    <button id="cf-trigger" class="${customClass}">
+      ${icon}
+      ${text}
     </button>
   `;
 }
@@ -1781,15 +1862,29 @@ function getCheckflowLogo() {
 }
 function getModalHTML(cfg, expanded) {
   const modalClass = expanded ? "cf-modal cf-modal--expanded" : "cf-modal cf-modal--compact";
-  const formFields = `
+  const hasUser = currentUser && (currentUser.name || currentUser.email);
+  const userInfoCard = hasUser ? `
+    <div class="cf-user-card">
+      ${currentUser?.avatar ? `<img class="cf-user-avatar" src="${currentUser.avatar}" alt="${currentUser.name || "User"}" />` : `<div class="cf-user-avatar-placeholder">${(currentUser?.name || currentUser?.email || "U").charAt(0).toUpperCase()}</div>`}
+      <div class="cf-user-info">
+        ${currentUser?.name ? `<div class="cf-user-name">${currentUser.name}</div>` : ""}
+        ${currentUser?.email ? `<div class="cf-user-email">${currentUser.email}</div>` : ""}
+      </div>
+    </div>
+  ` : "";
+  const nameEmailFields = hasUser ? "" : `
     <div class="cf-field">
-      <label>Nom <span>(obligatoire)</span></label>
+      <label>Nom <span>(optionnel)</span></label>
       <input id="cf-name" type="text" placeholder="Votre nom" />
     </div>
     <div class="cf-field">
-      <label>Email <span>(obligatoire)</span></label>
+      <label>Email <span>(optionnel)</span></label>
       <input id="cf-email" type="email" placeholder="votre.email@exemple.com" />
     </div>
+  `;
+  const formFields = `
+    ${userInfoCard}
+    ${nameEmailFields}
     <div class="cf-field">
       <label>Description <span>(obligatoire)</span></label>
       <textarea id="cf-desc" placeholder="Quel est le probl\xE8me ? Que vous attendiez-vous \xE0 voir ?"></textarea>
@@ -1838,16 +1933,44 @@ function getModalHTML(cfg, expanded) {
     </div>
   `;
 }
-var DEFAULT_CONFIG, container, onSubmitCallback, screenshotDataUrl, annotatedImageUrl, annotationsData, isExpanded, currentCfg;
+var DEFAULT_BUTTON_CONFIG, SIZE_PRESETS, VARIANT_PRESETS, DEFAULT_CONFIG, container, onSubmitCallback, screenshotDataUrl, annotatedImageUrl, annotationsData, isExpanded, currentCfg, currentUser;
 var init_widget = __esm({
   "src/widget.ts"() {
     "use strict";
     init_editor();
+    DEFAULT_BUTTON_CONFIG = {
+      text: "Report Bug",
+      backgroundColor: "#1e3a5f",
+      textColor: "#ffffff",
+      borderRadius: "8px",
+      padding: "10px 18px",
+      fontSize: "14px",
+      fontWeight: "500",
+      border: "none",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+      className: "",
+      showIcon: true,
+      size: "default",
+      variant: "default"
+    };
+    SIZE_PRESETS = {
+      xs: { padding: "6px 10px", fontSize: "12px" },
+      sm: { padding: "8px 14px", fontSize: "13px" },
+      default: { padding: "10px 18px", fontSize: "14px" },
+      lg: { padding: "12px 24px", fontSize: "15px" }
+    };
+    VARIANT_PRESETS = {
+      default: { bg: "#1e3a5f", color: "#ffffff", border: "none" },
+      outline: { bg: "transparent", color: "#1e3a5f", border: "1px solid #1e3a5f" },
+      ghost: { bg: "transparent", color: "#1e3a5f", border: "none" },
+      link: { bg: "transparent", color: "#1e3a5f", border: "none" }
+    };
     DEFAULT_CONFIG = {
       position: "bottom-right",
       color: "#1e3a5f",
       text: "Report Bug",
-      showOnInit: true
+      showOnInit: true,
+      button: DEFAULT_BUTTON_CONFIG
     };
     container = null;
     onSubmitCallback = null;
@@ -1856,6 +1979,7 @@ var init_widget = __esm({
     annotationsData = [];
     isExpanded = false;
     currentCfg = { ...DEFAULT_CONFIG };
+    currentUser = void 0;
   }
 });
 
@@ -1929,10 +2053,13 @@ var init_screenshot = __esm({
 var index_exports = {};
 __export(index_exports, {
   captureScreenshot: () => captureScreenshot,
+  clearUser: () => clearUser,
   destroy: () => destroy,
   hideWidget: () => hideWidget,
   init: () => init,
+  openFeedbackModal: () => openFeedbackModal2,
   sendFeedback: () => sendFeedback,
+  setUser: () => setUser,
   showWidget: () => showWidget
 });
 function init(cfg) {
@@ -1961,7 +2088,8 @@ function init(cfg) {
         });
       },
       {
-        onScreenshot: () => captureScreenshot()
+        onScreenshot: () => captureScreenshot(),
+        user: config.user
       }
     );
   }
@@ -1991,12 +2119,22 @@ async function sendFeedback(data) {
   if (data.annotations && data.annotations.length > 0) {
     payload.annotations = data.annotations;
   }
-  if (data.reporter_name) {
+  if (config.user?.name) {
+    payload.reporter_name = config.user.name;
+  } else if (data.reporter_name) {
     payload.reporter_name = data.reporter_name;
   }
-  if (data.reporter_email) {
+  if (config.user?.email) {
+    payload.reporter_email = config.user.email;
+  } else if (data.reporter_email) {
     payload.reporter_email = data.reporter_email;
   }
+  if (config.user?.id) {
+    payload.user_id = config.user.id;
+  }
+  if (config.user?.avatar) {
+    payload.user_avatar = config.user.avatar;
+  }
   try {
     const res = await fetch(`${config.endpoint}/sdk/feedback`, {
       method: "POST",
@@ -2032,10 +2170,45 @@ function showWidget() {
       });
     },
     {
-      onScreenshot: () => captureScreenshot()
+      onScreenshot: () => captureScreenshot(),
+      user: config.user
     }
   );
 }
+function setUser(user) {
+  if (config) {
+    config.user = user;
+  }
+}
+function clearUser() {
+  if (config) {
+    config.user = void 0;
+  }
+}
+function openFeedbackModal2() {
+  if (!config) return;
+  Promise.resolve().then(() => (init_widget(), widget_exports)).then(({ openFeedbackModal: openModal2 }) => {
+    openModal2(
+      config.widget,
+      (data) => {
+        sendFeedback({
+          title: data.title,
+          description: data.description,
+          type: data.type,
+          priority: data.priority,
+          screenshot_data: data.screenshot,
+          annotations: data.annotations,
+          reporter_name: data.reporter_name,
+          reporter_email: data.reporter_email
+        });
+      },
+      {
+        onScreenshot: () => captureScreenshot(),
+        user: config.user
+      }
+    );
+  });
+}
 function hideWidget() {
   unmountWidget();
 }
@@ -2203,20 +2376,41 @@ var init_highlighter = __esm({
 // src/react.ts
 var react_exports = {};
 __export(react_exports, {
+  clearUser: () => clearUser2,
   destroyCheckflow: () => destroyCheckflow,
+  getFeedbackButtonHandler: () => getFeedbackButtonHandler,
+  openFeedbackModal: () => openFeedbackModal3,
+  setUser: () => setUser2,
   useCheckflowFeedback: () => useCheckflowFeedback,
   useCheckflowInit: () => useCheckflowInit
 });
 module.exports = __toCommonJS(react_exports);
 var _initialized = false;
+var _config = null;
 function useCheckflowInit(config2) {
   if (typeof window === "undefined") return;
   if (_initialized) return;
   _initialized = true;
+  _config = config2;
   Promise.resolve().then(() => (init_index(), index_exports)).then(({ init: init2 }) => {
     init2(config2);
   });
 }
+async function setUser2(user) {
+  if (typeof window === "undefined") return;
+  const { setUser: sdkSetUser } = await Promise.resolve().then(() => (init_index(), index_exports));
+  sdkSetUser(user);
+}
+async function clearUser2() {
+  if (typeof window === "undefined") return;
+  const { clearUser: sdkClearUser } = await Promise.resolve().then(() => (init_index(), index_exports));
+  sdkClearUser();
+}
+async function openFeedbackModal3() {
+  if (typeof window === "undefined") return;
+  const { openFeedbackModal: sdkOpenModal } = await Promise.resolve().then(() => (init_index(), index_exports));
+  sdkOpenModal();
+}
 function useCheckflowFeedback() {
   return {
     send: async (data) => {
@@ -2243,7 +2437,10 @@ function useCheckflowFeedback() {
       if (typeof window === "undefined") return;
       const { hideWidget: hideWidget2 } = await Promise.resolve().then(() => (init_index(), index_exports));
       hideWidget2();
-    }
+    },
+    openModal: openFeedbackModal3,
+    setUser: setUser2,
+    clearUser: clearUser2
   };
 }
 function destroyCheckflow() {
@@ -2251,11 +2448,22 @@ function destroyCheckflow() {
   Promise.resolve().then(() => (init_index(), index_exports)).then(({ destroy: destroy2 }) => {
     destroy2();
     _initialized = false;
+    _config = null;
   });
 }
+function getFeedbackButtonHandler(onClick) {
+  return () => {
+    onClick?.();
+    openFeedbackModal3();
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  clearUser,
   destroyCheckflow,
+  getFeedbackButtonHandler,
+  openFeedbackModal,
+  setUser,
   useCheckflowFeedback,
   useCheckflowInit
 });

package/dist/react.mjs

@@ -1,13 +1,30 @@
 // src/react.ts
 var _initialized = false;
+var _config = null;
 function useCheckflowInit(config) {
   if (typeof window === "undefined") return;
   if (_initialized) return;
   _initialized = true;
+  _config = config;
   import("./index.mjs").then(({ init }) => {
     init(config);
   });
 }
+async function setUser(user) {
+  if (typeof window === "undefined") return;
+  const { setUser: sdkSetUser } = await import("./index.mjs");
+  sdkSetUser(user);
+}
+async function clearUser() {
+  if (typeof window === "undefined") return;
+  const { clearUser: sdkClearUser } = await import("./index.mjs");
+  sdkClearUser();
+}
+async function openFeedbackModal() {
+  if (typeof window === "undefined") return;
+  const { openFeedbackModal: sdkOpenModal } = await import("./index.mjs");
+  sdkOpenModal();
+}
 function useCheckflowFeedback() {
   return {
     send: async (data) => {
@@ -34,7 +51,10 @@ function useCheckflowFeedback() {
       if (typeof window === "undefined") return;
       const { hideWidget } = await import("./index.mjs");
       hideWidget();
-    }
+    },
+    openModal: openFeedbackModal,
+    setUser,
+    clearUser
   };
 }
 function destroyCheckflow() {
@@ -42,10 +62,21 @@ function destroyCheckflow() {
   import("./index.mjs").then(({ destroy }) => {
     destroy();
     _initialized = false;
+    _config = null;
   });
 }
+function getFeedbackButtonHandler(onClick) {
+  return () => {
+    onClick?.();
+    openFeedbackModal();
+  };
+}
 export {
+  clearUser,
   destroyCheckflow,
+  getFeedbackButtonHandler,
+  openFeedbackModal,
+  setUser,
   useCheckflowFeedback,
   useCheckflowInit
 };