@usero/sdk 0.2.1 → 0.3.0

package/dist/react.d.cts

@@ -1,3 +1,23 @@
+interface PluginLogger {
+    debug: (...args: unknown[]) => void;
+    info: (...args: unknown[]) => void;
+    warn: (...args: unknown[]) => void;
+    error: (...args: unknown[]) => void;
+}
+interface PluginContext {
+    clientId: string;
+    baseUrl: string;
+    getStore: <T>() => T | undefined;
+    setStore: <T>(value: T) => void;
+    logger: PluginLogger;
+}
+interface UseroPlugin {
+    name: string;
+    onInit?: (ctx: PluginContext) => void | Promise<void>;
+    onFeedbackSubmit?: (ctx: PluginContext, submission: FeedbackSubmission) => Promise<Partial<FeedbackSubmission> | undefined> | Partial<FeedbackSubmission> | undefined;
+    onDestroy?: (ctx: PluginContext) => void;
+}
+
 type FeedbackRating = 1 | 2 | 3 | 4;
 interface FeedbackMetadata {
     pageUrl: string;
@@ -24,6 +44,7 @@ interface FeedbackSubmission {
     environment?: string;
     screenshots?: ScreenshotData[];
     metadata?: Record<string, unknown>;
+    replayEvents?: string;
 }
 interface FeedbackData {
     rating?: FeedbackRating;
@@ -51,6 +72,7 @@ interface FeedbackWidgetProps {
     environment?: string;
     baseUrl?: string;
     metadata?: Record<string, unknown>;
+    plugins?: ReadonlyArray<UseroPlugin>;
     onSubmit?: (feedback: FeedbackData) => void;
     onError?: (error: Error) => void;
     onOpen?: () => void;
@@ -65,6 +87,7 @@ interface UseroWidgetHandle {
     open: () => void;
     close: () => void;
     update: (next: Partial<Omit<FeedbackWidgetProps, 'clientId' | 'baseUrl'>>) => void;
+    whenReady: () => Promise<void>;
 }
 
 declare function UseroFeedbackWidget(props: FeedbackWidgetProps): null;

package/dist/react.d.ts

@@ -1,3 +1,23 @@
+interface PluginLogger {
+    debug: (...args: unknown[]) => void;
+    info: (...args: unknown[]) => void;
+    warn: (...args: unknown[]) => void;
+    error: (...args: unknown[]) => void;
+}
+interface PluginContext {
+    clientId: string;
+    baseUrl: string;
+    getStore: <T>() => T | undefined;
+    setStore: <T>(value: T) => void;
+    logger: PluginLogger;
+}
+interface UseroPlugin {
+    name: string;
+    onInit?: (ctx: PluginContext) => void | Promise<void>;
+    onFeedbackSubmit?: (ctx: PluginContext, submission: FeedbackSubmission) => Promise<Partial<FeedbackSubmission> | undefined> | Partial<FeedbackSubmission> | undefined;
+    onDestroy?: (ctx: PluginContext) => void;
+}
+
 type FeedbackRating = 1 | 2 | 3 | 4;
 interface FeedbackMetadata {
     pageUrl: string;
@@ -24,6 +44,7 @@ interface FeedbackSubmission {
     environment?: string;
     screenshots?: ScreenshotData[];
     metadata?: Record<string, unknown>;
+    replayEvents?: string;
 }
 interface FeedbackData {
     rating?: FeedbackRating;
@@ -51,6 +72,7 @@ interface FeedbackWidgetProps {
     environment?: string;
     baseUrl?: string;
     metadata?: Record<string, unknown>;
+    plugins?: ReadonlyArray<UseroPlugin>;
     onSubmit?: (feedback: FeedbackData) => void;
     onError?: (error: Error) => void;
     onOpen?: () => void;
@@ -65,6 +87,7 @@ interface UseroWidgetHandle {
     open: () => void;
     close: () => void;
     update: (next: Partial<Omit<FeedbackWidgetProps, 'clientId' | 'baseUrl'>>) => void;
+    whenReady: () => Promise<void>;
 }
 
 declare function UseroFeedbackWidget(props: FeedbackWidgetProps): null;

package/dist/react.js

@@ -159,6 +159,25 @@ function getGradientEnd(color) {
   return `#${[shiftedR, shiftedG, shiftedB].map((x) => x.toString(16).padStart(2, "0")).join("")}`;
 }
 
+// src/plugin.ts
+function createPluginLogger(name) {
+  const prefix = `[usero:${name}]`;
+  return {
+    debug: (...args) => {
+      if (typeof console !== "undefined") console.debug(prefix, ...args);
+    },
+    info: (...args) => {
+      if (typeof console !== "undefined") console.info(prefix, ...args);
+    },
+    warn: (...args) => {
+      if (typeof console !== "undefined") console.warn(prefix, ...args);
+    },
+    error: (...args) => {
+      if (typeof console !== "undefined") console.error(prefix, ...args);
+    }
+  };
+}
+
 // src/validation.ts
 function validateFeedbackSubmission(data) {
   const errors = [];
@@ -339,10 +358,17 @@ var FEEDBACK_CSS = `
   box-sizing: border-box;
 }
 
+.fb-toolrow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
 .fb-charcount {
   font-size: 12px;
   margin-left: auto;
-  margin-bottom: 6px;
   text-align: right;
 }
 
@@ -638,6 +664,21 @@ function escapeHtml(value) {
     }
   });
 }
+function mergePluginPatches(base, patches) {
+  let result = base;
+  for (const patch of patches) {
+    if (!patch || typeof patch !== "object") continue;
+    const { metadata: patchMetadata, ...rest } = patch;
+    result = { ...result, ...rest };
+    if (patchMetadata && typeof patchMetadata === "object") {
+      result.metadata = {
+        ...result.metadata ?? {},
+        ...patchMetadata
+      };
+    }
+  }
+  return result;
+}
 function readStoredEmail() {
   if (typeof window === "undefined") return "";
   try {
@@ -662,7 +703,8 @@ function initUseroFeedbackWidget(props) {
       close: () => {
       },
       update: () => {
-      }
+      },
+      whenReady: () => Promise.resolve()
     };
   }
   const { clientId, baseUrl } = props;
@@ -677,7 +719,8 @@ function initUseroFeedbackWidget(props) {
       close: () => {
       },
       update: () => {
-      }
+      },
+      whenReady: () => Promise.resolve()
     };
   }
   let position = props.position ?? "right";
@@ -694,6 +737,34 @@ function initUseroFeedbackWidget(props) {
   let onOpen = props.onOpen;
   let onClose = props.onClose;
   const apiClient = new FeedbackApiClient(baseUrl);
+  const pluginList = props.plugins ?? [];
+  const pluginStores = /* @__PURE__ */ new Map();
+  const pluginContexts = /* @__PURE__ */ new Map();
+  const initPromises = [];
+  for (const plugin of pluginList) {
+    const ctx = {
+      clientId,
+      baseUrl: baseUrl ?? DEFAULT_API_URL,
+      logger: createPluginLogger(plugin.name),
+      getStore: () => pluginStores.get(plugin.name),
+      setStore: (value) => {
+        pluginStores.set(plugin.name, value);
+      }
+    };
+    pluginContexts.set(plugin.name, ctx);
+    if (plugin.onInit) {
+      const settled = (async () => {
+        try {
+          await plugin.onInit?.(ctx);
+        } catch (err) {
+          ctx.logger.error("onInit threw", err);
+        }
+      })();
+      initPromises.push(settled);
+    }
+  }
+  const readyPromise = initPromises.length === 0 ? Promise.resolve() : Promise.all(initPromises).then(() => {
+  });
   let isOpen = false;
   let selectedRating = void 0;
   let comment = "";
@@ -812,8 +883,24 @@ function initUseroFeedbackWidget(props) {
       setSubmitMessage({ type: "error", text: validation.errors.join(", ") });
       return;
     }
+    let enrichedSubmission = submission;
+    if (pluginList.length > 0) {
+      const patchPromises = pluginList.map(async (plugin) => {
+        if (!plugin.onFeedbackSubmit) return void 0;
+        const ctx = pluginContexts.get(plugin.name);
+        if (!ctx) return void 0;
+        try {
+          return await plugin.onFeedbackSubmit(ctx, submission);
+        } catch (err) {
+          ctx.logger.error("onFeedbackSubmit threw", err);
+          return void 0;
+        }
+      });
+      const patches = await Promise.all(patchPromises);
+      enrichedSubmission = mergePluginPatches(submission, patches);
+    }
     try {
-      const response = await apiClient.submitFeedback(submission);
+      const response = await apiClient.submitFeedback(enrichedSubmission);
       if (response.success) {
         if (shareEmail && userEmail) writeStoredEmail(userEmail);
         onSubmit?.(feedbackData);
@@ -870,17 +957,26 @@ function initUseroFeedbackWidget(props) {
       const cls = ["fb-ec", sel && "fb-ec--sel"].filter(Boolean).join(" ");
       return `
 					<div class="${cls}" style="background:${bg}">
-						<button type="button" class="fb-eb" data-rating="${r}" role="radio" aria-checked="${sel}" aria-label="${r}: ${RATING_LABELS[r]}">
+						<button type="button" class="fb-eb" data-rating="${r}" role="radio" aria-checked="${sel}" aria-label="${r}: ${RATING_LABELS[r]}" style="color:${theme.text}">
 							<div class="fb-ei"><span role="img" aria-label="${RATING_LABELS[r]}">${EMOJI_MAP[r]}</span></div>
-							<div class="fb-el">${RATING_LABELS[r]}</div>
+							<div class="fb-el" style="color:${theme.text}">${RATING_LABELS[r]}</div>
 						</button>
 					</div>
 				`;
     }).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 screenshotBlockHtml = showScreenshotOption ? (() => {
+    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">
@@ -891,16 +987,7 @@ function initUseroFeedbackWidget(props) {
       ).join("");
       const errorHtml = screenshotError ? `<div class="fb-upe">\u26A0 ${escapeHtml(screenshotError)}</div>` : "";
       const limitHtml = atMax ? `<div class="fb-sl">Max ${MAX_SCREENSHOTS}</div>` : "";
-      const extrasHtml = screenshotError || screenshots.length > 0 || atMax ? `<div class="fb-up-extras">${errorHtml}${screenshots.length > 0 ? `<div class="fb-ss">${previewsHtml}</div>` : ""}${limitHtml}</div>` : "";
-      return `
-						<div class="fb-up">
-							<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>
-							${extrasHtml}
-						</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 emailBlockHtml = showEmailOption ? `
 				<div class="fb-email">
@@ -923,8 +1010,11 @@ function initUseroFeedbackWidget(props) {
 				<form data-role="form">
 					<div class="fb-es" role="radiogroup" aria-label="Rate experience">${ratingsHtml}</div>
 					<textarea class="fb-ta" data-role="comment" placeholder="${escapeHtml(placeholder)}" aria-label="Comments" maxlength="1000" rows="2" style="border:1px solid ${theme.border};color:${theme.text};background-color:${theme.background};">${escapeHtml(comment)}</textarea>
-					<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>
-					${screenshotBlockHtml}
+					<div class="fb-toolrow">
+						${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>` : ""}
 					${emailBlockHtml}
 					<button class="fb-sub ${submitDisabled ? "fb-sub--dis" : ""}" type="submit" aria-label="Submit" ${submitDisabled ? "disabled" : ""} style="${submitStyle}">
 						${isSubmitting ? '<span class="fb-spin"></span>' : ""}
@@ -1055,10 +1145,23 @@ function initUseroFeedbackWidget(props) {
       destroyed = true;
       document.removeEventListener("keydown", onKeyDown);
       detachMqlListener();
+      for (const plugin of pluginList) {
+        if (!plugin.onDestroy) continue;
+        const ctx = pluginContexts.get(plugin.name);
+        if (!ctx) continue;
+        try {
+          plugin.onDestroy(ctx);
+        } catch (err) {
+          ctx.logger.error("onDestroy threw", err);
+        }
+      }
+      pluginStores.clear();
+      pluginContexts.clear();
       host.remove();
     },
     open,
     close,
+    whenReady: () => readyPromise,
     update: (next) => {
       if (destroyed) return;
       let needsRender = false;