@usero/sdk 1.1.1 → 1.1.3

package/dist/react.d.ts

@@ -11,6 +11,11 @@ interface PluginContext {
     setStore: <T>(value: T) => void;
     logger: PluginLogger;
     resolveUser?: () => void;
+    getSdkSessionId?: () => string;
+    getAnonymousId?: () => string;
+    getUserId?: () => string | null;
+    getReplayStartMs?: () => number | null;
+    publishReplayStartMs?: (epochMs: number) => void;
 }
 interface UseroPlugin {
     name: string;

package/dist/react.js

@@ -161,7 +161,11 @@ function getGradientEnd(color) {
 
 // src/identity.ts
 var ANON_STORAGE_KEY = "usero:anonymous-id";
+var SDK_SESSION_STORAGE_KEY = "usero:session-replay:sdk-session-id";
 var cachedAnonymousId = null;
+var cachedSdkSessionId = null;
+var currentUserId = null;
+var replayStartMs = null;
 var lastIdentifyFingerprint = null;
 function generateRandomId() {
   if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
@@ -192,6 +196,21 @@ function safeWriteLocalStorage(key, value) {
   } catch {
   }
 }
+function safeReadSessionStorage(key) {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.sessionStorage?.getItem(key) ?? null;
+  } catch {
+    return null;
+  }
+}
+function safeWriteSessionStorage(key, value) {
+  if (typeof window === "undefined") return;
+  try {
+    window.sessionStorage?.setItem(key, value);
+  } catch {
+  }
+}
 function getOrMintAnonymousId() {
   if (cachedAnonymousId) return cachedAnonymousId;
   const existing = safeReadLocalStorage(ANON_STORAGE_KEY);
@@ -209,8 +228,30 @@ function rotateAnonymousId() {
   cachedAnonymousId = id;
   safeWriteLocalStorage(ANON_STORAGE_KEY, id);
   lastIdentifyFingerprint = null;
+  currentUserId = null;
+  return id;
+}
+function getOrMintSdkSessionId() {
+  if (cachedSdkSessionId) return cachedSdkSessionId;
+  const existing = safeReadSessionStorage(SDK_SESSION_STORAGE_KEY);
+  if (existing && /^[a-z0-9-]{8,}$/i.test(existing)) {
+    cachedSdkSessionId = existing;
+    return existing;
+  }
+  const id = generateRandomId();
+  safeWriteSessionStorage(SDK_SESSION_STORAGE_KEY, id);
+  cachedSdkSessionId = id;
   return id;
 }
+function getCurrentUserId() {
+  return currentUserId;
+}
+function publishReplayStartMs(epochMs) {
+  if (replayStartMs === null) replayStartMs = epochMs;
+}
+function getReplayStartMs() {
+  return replayStartMs;
+}
 function fingerprintUser(anonymousId, user) {
   const traits = user.traits ?? {};
   const keys = Object.keys(traits).sort();
@@ -219,6 +260,7 @@ function fingerprintUser(anonymousId, user) {
 }
 async function identifyIfChanged(transport, user) {
   const anonymousId = getOrMintAnonymousId();
+  currentUserId = user.id;
   const fp = fingerprintUser(anonymousId, user);
   if (fp === lastIdentifyFingerprint) return false;
   const url = `${transport.apiUrl.replace(/\/$/, "")}/api/identify`;
@@ -907,7 +949,15 @@ function initUseroFeedbackWidget(props) {
         } else {
           resolveAndApplyGetUser();
         }
-      }
+      },
+      // Core-owned cross-cutting identity. Every plugin reads the same
+      // source of truth in identity.ts, so user-test and session-replay
+      // agree on the per-tab sdkSessionId without importing each other.
+      getSdkSessionId: () => getOrMintSdkSessionId(),
+      getAnonymousId: () => getOrMintAnonymousId(),
+      getUserId: () => getCurrentUserId(),
+      getReplayStartMs: () => getReplayStartMs(),
+      publishReplayStartMs: (epochMs) => publishReplayStartMs(epochMs)
     };
     pluginContexts.set(plugin.name, ctx);
     if (plugin.onInit) {
@@ -989,21 +1039,22 @@ function initUseroFeedbackWidget(props) {
     screenshotError = null;
     if (!file.type.startsWith("image/")) {
       screenshotError = "Image files only";
-      render();
+      updateUploadExtras();
       return;
     }
     if (file.size > MAX_SCREENSHOT_BYTES) {
       screenshotError = "Max 10MB";
-      render();
+      updateUploadExtras();
       return;
     }
     if (screenshots.length >= MAX_SCREENSHOTS) {
       screenshotError = `Max ${MAX_SCREENSHOTS} screenshots`;
-      render();
+      updateUploadExtras();
       return;
     }
     isUploadingScreenshot = true;
-    render();
+    updateUploadButton();
+    updateUploadExtras();
     try {
       const uploaded = await apiClient.uploadScreenshot(file, clientId);
       screenshots = [...screenshots, uploaded];
@@ -1011,12 +1062,14 @@ function initUseroFeedbackWidget(props) {
       screenshotError = err instanceof Error ? err.message : "Upload failed";
     } finally {
       isUploadingScreenshot = false;
-      render();
+      updateUploadButton();
+      updateUploadExtras();
     }
   }
   function removeScreenshot(index) {
     screenshots = screenshots.filter((_, i) => i !== index);
-    render();
+    updateUploadButton();
+    updateUploadExtras();
   }
   function close() {
     if (!isOpen) return;
@@ -1024,6 +1077,57 @@ function initUseroFeedbackWidget(props) {
     onClose?.();
     render();
   }
+  function buildUploadButtonInner() {
+    return isUploadingScreenshot ? '<span class="fb-ups"></span> Uploading...' : "\u{1F4F7} Add screenshot";
+  }
+  function buildUploadButtonHtml() {
+    const atMax = screenshots.length >= MAX_SCREENSHOTS;
+    const btnDisabled = isUploadingScreenshot || atMax;
+    return `
+			<input type="file" accept="image/*" data-role="screenshot-input" style="display:none;" aria-label="Choose screenshot" />
+			<button type="button" class="fb-upb ${btnDisabled ? "fb-upb--dis" : ""}" data-role="screenshot-pick" ${btnDisabled ? "disabled" : ""} style="border:1px solid ${theme.border};color:${theme.text};">
+				${buildUploadButtonInner()}
+			</button>
+		`;
+  }
+  function buildUploadExtrasHtml() {
+    const atMax = screenshots.length >= MAX_SCREENSHOTS;
+    const previewsHtml = screenshots.map(
+      (shot, i) => `
+					<div class="fb-sp">
+						<img src="${escapeHtml(shot.url)}" alt="Screenshot ${i + 1}" class="fb-si" />
+						<button type="button" class="fb-sr" data-role="screenshot-remove" data-index="${i}" aria-label="Remove screenshot">\u2715</button>
+					</div>
+				`
+    ).join("");
+    const errorHtml = screenshotError ? `<div class="fb-upe">\u26A0 ${escapeHtml(screenshotError)}</div>` : "";
+    const limitHtml = atMax ? `<div class="fb-sl">Max ${MAX_SCREENSHOTS}</div>` : "";
+    return screenshotError || screenshots.length > 0 || atMax ? `<div class="fb-up-extras">${errorHtml}${screenshots.length > 0 ? `<div class="fb-ss">${previewsHtml}</div>` : ""}${limitHtml}</div>` : "";
+  }
+  function updateUploadButton() {
+    if (!showScreenshotOption) return;
+    const pickBtn = panelEl.querySelector(
+      'button[data-role="screenshot-pick"]'
+    );
+    if (!pickBtn) return;
+    const atMax = screenshots.length >= MAX_SCREENSHOTS;
+    const btnDisabled = isUploadingScreenshot || atMax;
+    pickBtn.disabled = btnDisabled;
+    pickBtn.classList.toggle("fb-upb--dis", btnDisabled);
+    pickBtn.innerHTML = buildUploadButtonInner();
+  }
+  function updateUploadExtras() {
+    if (!showScreenshotOption) return;
+    const container = panelEl.querySelector(".fb-up");
+    if (!container) return;
+    container.innerHTML = buildUploadExtrasHtml();
+    container.querySelectorAll('button[data-role="screenshot-remove"]').forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const idx = Number(btn.dataset.index);
+        if (Number.isInteger(idx)) removeScreenshot(idx);
+      });
+    });
+  }
   async function submitForm() {
     if (isSubmitting) return;
     isSubmitting = true;
@@ -1141,30 +1245,8 @@ function initUseroFeedbackWidget(props) {
 				`;
     }).join("");
     const messageHtml = submitMessage ? `<div class="fb-msg fb-msg--header ${submitMessage.type === "success" ? "fb-msg--ok" : "fb-msg--err"}">${submitMessage.type === "success" ? "\u2713" : "\u26A0"} ${escapeHtml(submitMessage.text)}</div>` : "";
-    const uploadBtnHtml = showScreenshotOption ? (() => {
-      const atMax = screenshots.length >= MAX_SCREENSHOTS;
-      const btnDisabled = isUploadingScreenshot || atMax;
-      return `
-						<input type="file" accept="image/*" data-role="screenshot-input" style="display:none;" aria-label="Choose screenshot" />
-						<button type="button" class="fb-upb ${btnDisabled ? "fb-upb--dis" : ""}" data-role="screenshot-pick" ${btnDisabled ? "disabled" : ""} style="border:1px solid ${theme.border};color:${theme.text};">
-							${isUploadingScreenshot ? '<span class="fb-ups"></span> Uploading...' : "\u{1F4F7} Add screenshot"}
-						</button>
-					`;
-    })() : "";
-    const uploadExtrasHtml = showScreenshotOption ? (() => {
-      const atMax = screenshots.length >= MAX_SCREENSHOTS;
-      const previewsHtml = screenshots.map(
-        (shot, i) => `
-								<div class="fb-sp">
-									<img src="${escapeHtml(shot.url)}" alt="Screenshot ${i + 1}" class="fb-si" />
-									<button type="button" class="fb-sr" data-role="screenshot-remove" data-index="${i}" aria-label="Remove screenshot">\u2715</button>
-								</div>
-							`
-      ).join("");
-      const errorHtml = screenshotError ? `<div class="fb-upe">\u26A0 ${escapeHtml(screenshotError)}</div>` : "";
-      const limitHtml = atMax ? `<div class="fb-sl">Max ${MAX_SCREENSHOTS}</div>` : "";
-      return screenshotError || screenshots.length > 0 || atMax ? `<div class="fb-up-extras">${errorHtml}${screenshots.length > 0 ? `<div class="fb-ss">${previewsHtml}</div>` : ""}${limitHtml}</div>` : "";
-    })() : "";
+    const uploadBtnHtml = showScreenshotOption ? buildUploadButtonHtml() : "";
+    const uploadExtrasHtml = showScreenshotOption ? buildUploadExtrasHtml() : "";
     const emailBlockHtml = showEmailOption ? `
 				<div class="fb-email">
 					<label class="fb-email-lbl" style="color:${theme.text}">
@@ -1190,7 +1272,7 @@ function initUseroFeedbackWidget(props) {
 						${uploadBtnHtml}
 						<div class="fb-charcount${lowChars ? " fb-charcount--low" : ""}" data-role="charcount" style="color:${lowChars ? "#dc2626" : theme.text};opacity:${lowChars ? 1 : 0.6};">${remaining} chars remaining</div>
 					</div>
-					${uploadExtrasHtml ? `<div class="fb-up">${uploadExtrasHtml}</div>` : ""}
+					${showScreenshotOption ? `<div class="fb-up">${uploadExtrasHtml}</div>` : ""}
 					${emailBlockHtml}
 					<button class="fb-sub ${submitDisabled ? "fb-sub--dis" : ""}" type="submit" aria-label="Submit" ${submitDisabled ? "disabled" : ""} style="${submitStyle}">
 						${isSubmitting ? '<span class="fb-spin"></span>' : ""}
@@ -1287,10 +1369,16 @@ function initUseroFeedbackWidget(props) {
     if (isOpen) close();
     else open();
   });
-  backdropEl.addEventListener("click", close);
+  backdropEl.addEventListener("click", () => {
+    if (isUploadingScreenshot || isSubmitting) return;
+    close();
+  });
   const onKeyDown = (e) => {
     if (!isOpen) return;
-    if (e.key === "Escape") close();
+    if (e.key === "Escape") {
+      if (isUploadingScreenshot || isSubmitting) return;
+      close();
+    }
     if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
       e.preventDefault();
       void submitForm();