@kelet-ai/feedback-ui 0.7.1 → 1.0.1

package/README.md

@@ -261,7 +261,7 @@ For implicit feedback, understanding how state changes are processed:
 // User types: "Hello" → "Hello World" → "Hello World!"
 // Only sends ONE feedback after user stops typing
 const [text, setText] = useFeedbackState('', 'editor', {
-  debounceMs: 1500, // Wait 1.5s after last change
+  debounceMs: 3000, // Wait 3s after last change
 });
 ```
 
@@ -321,18 +321,18 @@ const [data, setData] = useFeedbackState(initial, 'tracker', {
 
 ## 🔗 OpenTelemetry Integration
 
-Automatically extract trace IDs to correlate feedback with distributed traces:
+Prefer W3C traceparent to correlate feedback with distributed traces:
 
 ```tsx
-import { VoteFeedback, getOtelTraceId } from '@kelet-ai/feedback-ui';
+import { VoteFeedback, getTraceParent } from '@kelet-ai/feedback-ui';
 
-<VoteFeedback.Root tx_id={getOtelTraceId} onFeedback={handleFeedback}>
+<VoteFeedback.Root tx_id={getTraceParent} onFeedback={handleFeedback}>
   <VoteFeedback.UpvoteButton>👍</VoteFeedback.UpvoteButton>
   <VoteFeedback.DownvoteButton>👎</VoteFeedback.DownvoteButton>
 </VoteFeedback.Root>;
 ```
 
-Requires `@opentelemetry/api` and active Span to collect the trace_id from.
+Requires `@opentelemetry/api` for active context. If missing at runtime, an error is thrown.
 
 ---
 
@@ -535,7 +535,7 @@ interface FeedbackData {
 
 | Option                 | Type                                 | Default               | Description                            |
 | ---------------------- | ------------------------------------ | --------------------- | -------------------------------------- |
-| `debounceMs`           | `number`                             | `1500`                | Debounce time in milliseconds          |
+| `debounceMs`           | `number`                             | `3000`                | Debounce time in milliseconds          |
 | `diffType`             | `'git' \| 'object' \| 'json'`        | `'git'`               | Diff output format                     |
 | `compareWith`          | `(a: T, b: T) => boolean`            | `undefined`           | Custom equality function               |
 | `metadata`             | `Record<string, any>`                | `{}`                  | Additional metadata                    |

package/dist/feedback-ui.es.js

@@ -1865,7 +1865,7 @@ function splitLines(text) {
   }
   return result;
 }
-function formatDiff(oldValue, newValue, diffType = "git", context = 3) {
+function formatDiff(oldValue, newValue, diffType = "git", context = 1) {
   switch (diffType) {
     case "git":
       return formatGitDiff(oldValue, newValue, context);
@@ -1877,7 +1877,7 @@ function formatDiff(oldValue, newValue, diffType = "git", context = 3) {
       return formatGitDiff(oldValue, newValue, context);
   }
 }
-function formatGitDiff(oldValue, newValue, context = 3) {
+function formatGitDiff(oldValue, newValue, context = 1) {
   const oldStr = stringify(oldValue);
   const newStr = stringify(newValue);
   const patch = createTwoFilesPatch(
@@ -1893,7 +1893,20 @@ function formatGitDiff(oldValue, newValue, context = 3) {
     "",
     { context }
   );
-  return patch.split("\n").slice(2).join("\n");
+  const lines = patch.split("\n");
+  const filtered = lines.filter((line) => {
+    if (!line) return false;
+    if (line === "\") return false;
+    if (line.startsWith("@@")) return false;
+    if (line.startsWith("---") || line.startsWith("+++")) return false;
+    if (line.startsWith(" ")) return false;
+    if (line.startsWith("+") || line.startsWith("-")) return true;
+    return false;
+  });
+  while (filtered.length && filtered[0].trim() === "") filtered.shift();
+  while (filtered.length && filtered[filtered.length - 1].trim() === "")
+    filtered.pop();
+  return filtered.join("\n");
 }
 function formatObjectDiff(oldValue, newValue) {
   const differences = deepDiffExports.diff(oldValue, newValue) || [];
@@ -2006,19 +2019,22 @@ function stringify(value) {
 function useStateChangeTracking(currentState, tx_id, options) {
   const defaultFeedbackHandler = useDefaultFeedbackHandler();
   const feedbackHandler = options?.onFeedback || defaultFeedbackHandler;
-  const debounceMs = options?.debounceMs ?? 1500;
+  const debounceMs = options?.debounceMs ?? 3e3;
   const diffType = options?.diffType ?? "git";
   const compareWith = options?.compareWith;
   const defaultTriggerName = options?.default_trigger_name ?? "auto_state_change";
   const ignoreInitialNullish = options?.ignoreInitialNullish ?? true;
   const prevStateRef = useRef(currentState);
-  const changeStartStateRef = useRef(currentState);
   const isFirstRenderRef = useRef(true);
   const initialStateRef = useRef(currentState);
+  const initialWasNullishRef = useRef(currentState == null);
   const hasHadNonNullishStateRef = useRef(
     currentState != null
     // != null catches both null and undefined
   );
+  const hasEligibleBaselineRef = useRef(
+    !(ignoreInitialNullish && currentState == null)
+  );
   const timeoutRef = useRef(null);
   const currentTriggerNameRef = useRef(void 0);
   const sendFeedback = useCallback(
@@ -2053,7 +2069,7 @@ function useStateChangeTracking(currentState, tx_id, options) {
       const newTriggerName = trigger_name || defaultTriggerName;
       if (timeoutRef.current && currentTriggerNameRef.current && currentTriggerNameRef.current !== newTriggerName) {
         clearTimeout(timeoutRef.current);
-        const startState = changeStartStateRef.current;
+        const startState = initialStateRef.current;
         const currentStateBeforeChange = currentState;
         sendFeedback(
           startState,
@@ -2070,39 +2086,41 @@ function useStateChangeTracking(currentState, tx_id, options) {
     if (isFirstRenderRef.current) {
       isFirstRenderRef.current = false;
       prevStateRef.current = currentState;
-      changeStartStateRef.current = currentState;
+      if (!ignoreInitialNullish || currentState != null) {
+        initialStateRef.current = currentState;
+        hasEligibleBaselineRef.current = true;
+      }
       return;
     }
     const prevState = prevStateRef.current;
     const isEqual = compareWith ? compareWith(prevState, currentState) : JSON.stringify(prevState) === JSON.stringify(currentState);
     if (!isEqual) {
-      const shouldIgnoreChange = ignoreInitialNullish && initialStateRef.current == null && // Initial state was nullish
+      const shouldIgnoreChange = ignoreInitialNullish && initialWasNullishRef.current && // True initial state was nullish
       !hasHadNonNullishStateRef.current && // We haven't had non-nullish state before
       currentState != null;
       if (currentState != null) {
         hasHadNonNullishStateRef.current = true;
       }
       if (shouldIgnoreChange) {
+        initialStateRef.current = currentState;
+        hasEligibleBaselineRef.current = true;
         prevStateRef.current = currentState;
-        changeStartStateRef.current = currentState;
         return;
       }
-      if (!timeoutRef.current) {
-        changeStartStateRef.current = prevState;
-      }
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
       prevStateRef.current = currentState;
       timeoutRef.current = setTimeout(() => {
-        const startState = changeStartStateRef.current;
+        const startState = initialStateRef.current;
         const finalState = currentState;
-        sendFeedback(
-          startState,
-          finalState,
-          currentTriggerNameRef.current || defaultTriggerName
-        );
-        changeStartStateRef.current = finalState;
+        if (hasEligibleBaselineRef.current) {
+          sendFeedback(
+            startState,
+            finalState,
+            currentTriggerNameRef.current || defaultTriggerName
+          );
+        }
         timeoutRef.current = null;
       }, debounceMs);
     }
@@ -2142,43 +2160,42 @@ function useFeedbackState(initialState, tx_id, options) {
   );
   return [state, setState];
 }
-let _loadOtelApi = () => {
-  try {
-    return require("@opentelemetry/api");
-  } catch {
+const _loadOtelApi = () => {
+  const g = globalThis;
+  const store = g[Symbol.for("opentelemetry.js.api.1")];
+  const api = store?.api ?? store;
+  if (!api?.context || !api?.propagation) {
     throw new Error(
-      "OpenTelemetry is not available. Install @opentelemetry/api to use trace ID extraction."
+      "@opentelemetry/api not found. Install it and configure a tracer provider."
     );
   }
+  return api;
 };
-function getOtelTraceId() {
-  const { trace, context } = _loadOtelApi();
+function getTraceParent(_ = null) {
   try {
-    const spanContext = trace.getSpanContext(context.active());
-    if (spanContext?.traceId) {
-      return spanContext.traceId;
-    }
-    const activeSpan = trace.getSpan(context.active());
-    if (activeSpan) {
-      const spanCtx = activeSpan.spanContext();
-      if (spanCtx.traceId) {
-        return spanCtx.traceId;
+    const { context, propagation } = _loadOtelApi();
+    const carrier = {};
+    propagation.inject(context.active(), carrier, {
+      set: (c, k, v) => {
+        c[k] = v;
       }
+    });
+    const traceparent = carrier["traceparent"];
+    if (!traceparent) {
+      throw new Error("traceparent header not available from active context");
     }
+    return traceparent;
   } catch (error) {
     throw new Error(
-      `Failed to extract OpenTelemetry trace ID: ${error instanceof Error ? error.message : "Unknown error"}`
+      `Failed to extract traceparent: ${error instanceof Error ? error.message : "Unknown error"}`
     );
   }
-  throw new Error(
-    "OpenTelemetry trace ID not available. Ensure XHR/Fetch instrumentation is active and a request is in progress."
-  );
 }
 export {
   KeletContext,
   KeletProvider,
   VoteFeedback,
-  getOtelTraceId,
+  getTraceParent,
   useDefaultFeedbackHandler,
   useFeedbackState,
   useKelet