@usero/sdk 0.3.2 → 0.4.0

package/dist/react.js

@@ -159,6 +159,111 @@ function getGradientEnd(color) {
   return `#${[shiftedR, shiftedG, shiftedB].map((x) => x.toString(16).padStart(2, "0")).join("")}`;
 }
 
+// src/identity.ts
+var ANON_STORAGE_KEY = "usero:anonymous-id";
+var cachedAnonymousId = null;
+var lastIdentifyFingerprint = null;
+function generateRandomId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  const bytes = new Uint8Array(16);
+  if (typeof crypto !== "undefined" && typeof crypto.getRandomValues === "function") {
+    crypto.getRandomValues(bytes);
+  } else {
+    for (let i = 0; i < bytes.length; i += 1) bytes[i] = Math.floor(Math.random() * 256);
+  }
+  let out = "";
+  for (const b of bytes) out += b.toString(16).padStart(2, "0");
+  return out;
+}
+function safeReadLocalStorage(key) {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.localStorage?.getItem(key) ?? null;
+  } catch {
+    return null;
+  }
+}
+function safeWriteLocalStorage(key, value) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage?.setItem(key, value);
+  } catch {
+  }
+}
+function getOrMintAnonymousId() {
+  if (cachedAnonymousId) return cachedAnonymousId;
+  const existing = safeReadLocalStorage(ANON_STORAGE_KEY);
+  if (existing && /^[a-z0-9-]{8,}$/i.test(existing)) {
+    cachedAnonymousId = existing;
+    return existing;
+  }
+  const id = generateRandomId();
+  safeWriteLocalStorage(ANON_STORAGE_KEY, id);
+  cachedAnonymousId = id;
+  return id;
+}
+function rotateAnonymousId() {
+  const id = generateRandomId();
+  cachedAnonymousId = id;
+  safeWriteLocalStorage(ANON_STORAGE_KEY, id);
+  lastIdentifyFingerprint = null;
+  return id;
+}
+function fingerprintUser(anonymousId, user) {
+  const traits = user.traits ?? {};
+  const keys = Object.keys(traits).sort();
+  const canonical = keys.map((k) => [k, traits[k] ?? null]);
+  return JSON.stringify([anonymousId, user.id, user.email ?? null, user.displayName ?? null, canonical]);
+}
+async function identifyIfChanged(transport, user) {
+  const anonymousId = getOrMintAnonymousId();
+  const fp = fingerprintUser(anonymousId, user);
+  if (fp === lastIdentifyFingerprint) return false;
+  const url = `${transport.apiUrl.replace(/\/$/, "")}/api/identify`;
+  const body = JSON.stringify({
+    clientId: transport.clientId,
+    anonymousId,
+    externalUserId: user.id,
+    email: user.email,
+    displayName: user.displayName,
+    traits: user.traits
+  });
+  if (typeof document !== "undefined" && document.visibilityState === "hidden" && typeof navigator !== "undefined" && typeof navigator.sendBeacon === "function") {
+    try {
+      const blob = new Blob([body], { type: "application/json" });
+      if (navigator.sendBeacon(url, blob)) {
+        lastIdentifyFingerprint = fp;
+        return true;
+      }
+    } catch {
+    }
+  }
+  try {
+    const res = await fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body,
+      // keepalive lets the request survive a tab-close mid-flight on
+      // browsers that support it; sendBeacon above is the primary path.
+      keepalive: true
+    });
+    if (!res.ok) return true;
+    try {
+      const json = await res.json();
+      if (json && json.accepted === true) lastIdentifyFingerprint = fp;
+    } catch {
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+function handleLogout() {
+  rotateAnonymousId();
+}
+
 // src/plugin.ts
 function createPluginLogger(name) {
   const prefix = `[usero:${name}]`;
@@ -704,7 +809,9 @@ function initUseroFeedbackWidget(props) {
       },
       update: () => {
       },
-      whenReady: () => Promise.resolve()
+      whenReady: () => Promise.resolve(),
+      identify: () => {
+      }
     };
   }
   const { clientId, baseUrl } = props;
@@ -720,7 +827,9 @@ function initUseroFeedbackWidget(props) {
       },
       update: () => {
       },
-      whenReady: () => Promise.resolve()
+      whenReady: () => Promise.resolve(),
+      identify: () => {
+      }
     };
   }
   let position = props.position ?? "right";
@@ -736,7 +845,44 @@ function initUseroFeedbackWidget(props) {
   let onError = props.onError;
   let onOpen = props.onOpen;
   let onClose = props.onClose;
+  let getUserFn = props.getUser;
+  let currentUserProp = props.user;
   const apiClient = new FeedbackApiClient(baseUrl);
+  const identifyTransport = { apiUrl: baseUrl ?? DEFAULT_API_URL, clientId };
+  let lastUserId = null;
+  let lastTraitsRef;
+  let lastEmail;
+  let lastDisplayName;
+  function applyResolvedUser(user) {
+    const next = user ?? null;
+    if (next) {
+      const unchanged = next.id === lastUserId && next.traits === lastTraitsRef && next.email === lastEmail && next.displayName === lastDisplayName;
+      if (unchanged) return;
+      void identifyIfChanged(identifyTransport, next);
+      lastUserId = next.id;
+      lastTraitsRef = next.traits;
+      lastEmail = next.email;
+      lastDisplayName = next.displayName;
+    } else if (lastUserId !== null) {
+      handleLogout();
+      lastUserId = null;
+      lastTraitsRef = void 0;
+      lastEmail = void 0;
+      lastDisplayName = void 0;
+    }
+  }
+  function resolveAndApplyGetUser() {
+    if (!getUserFn) return;
+    try {
+      applyResolvedUser(getUserFn() ?? null);
+    } catch {
+    }
+  }
+  if (props.user !== void 0) {
+    applyResolvedUser(props.user);
+  } else if (getUserFn) {
+    resolveAndApplyGetUser();
+  }
   const pluginList = props.plugins ?? [];
   const pluginStores = /* @__PURE__ */ new Map();
   const pluginContexts = /* @__PURE__ */ new Map();
@@ -749,6 +895,18 @@ function initUseroFeedbackWidget(props) {
       getStore: () => pluginStores.get(plugin.name),
       setStore: (value) => {
         pluginStores.set(plugin.name, value);
+      },
+      // Expose the same user-resolution path the widget uses, so plugins
+      // (e.g. session-replay for replay-only installs that never open the
+      // widget) can re-poll user state at their own boundaries. Prefers
+      // the imperative `user` prop when set, falls back to `getUser`.
+      resolveUser: () => {
+        if (destroyed) return;
+        if (currentUserProp !== void 0) {
+          applyResolvedUser(currentUserProp);
+        } else {
+          resolveAndApplyGetUser();
+        }
       }
     };
     pluginContexts.set(plugin.name, ctx);
@@ -782,6 +940,20 @@ function initUseroFeedbackWidget(props) {
   host.style.cssText = "all: initial;";
   document.body.appendChild(host);
   const root = host.attachShadow({ mode: "open" });
+  function pollGetUser() {
+    resolveAndApplyGetUser();
+  }
+  function notifyShadowUpdate(reason) {
+    try {
+      window.dispatchEvent(
+        new CustomEvent("usero:shadow-update", {
+          detail: { host, root, reason }
+        })
+      );
+    } catch {
+    }
+  }
+  notifyShadowUpdate("mount");
   const style = document.createElement("style");
   style.textContent = FEEDBACK_CSS;
   root.appendChild(style);
@@ -806,8 +978,10 @@ function initUseroFeedbackWidget(props) {
     screenshotError = null;
     isUploadingScreenshot = false;
     apiClient.ping();
+    pollGetUser();
     onOpen?.();
     render();
+    notifyShadowUpdate("panel-open");
   }
   async function handleScreenshotFile(file) {
     screenshotError = null;
@@ -1162,6 +1336,11 @@ function initUseroFeedbackWidget(props) {
     open,
     close,
     whenReady: () => readyPromise,
+    identify: (user) => {
+      if (destroyed) return;
+      currentUserProp = user;
+      applyResolvedUser(user);
+    },
     update: (next) => {
       if (destroyed) return;
       let needsRender = false;
@@ -1198,6 +1377,11 @@ function initUseroFeedbackWidget(props) {
       if ("onError" in next) onError = next.onError;
       if ("onOpen" in next) onOpen = next.onOpen;
       if ("onClose" in next) onClose = next.onClose;
+      if ("getUser" in next) getUserFn = next.getUser;
+      if ("user" in next) {
+        currentUserProp = next.user;
+        applyResolvedUser(next.user);
+      }
       if (needsRender) render();
     }
   };
@@ -1262,6 +1446,16 @@ function UseroFeedbackWidget(props) {
     props.environment,
     metadataJson
   ]);
+  const userId = props.user?.id ?? null;
+  const userEmail = props.user?.email ?? null;
+  const userDisplayName = props.user?.displayName ?? null;
+  const userTraitsJson = JSON.stringify(props.user?.traits ?? null);
+  const userIsNull = props.user === null;
+  useEffect(() => {
+    const handle = handleRef.current;
+    if (!handle) return;
+    if (props.user !== void 0) handle.update({ user: props.user });
+  }, [userId, userEmail, userDisplayName, userTraitsJson, userIsNull]);
   return null;
 }