@kelet-ai/feedback-ui 0.6.0 → 0.7.0

package/README.md

@@ -193,6 +193,7 @@ Controls how feedback is collected and what data is captured:
 - **When to use**: Content editing, user interactions, workflow analysis
 - **Data captured**: State diffs, interaction patterns, timing data
 - **User experience**: Seamless, no interruption
+- **Smart filtering**: Ignores common loading patterns (null → data) by default
 
 ```tsx
 // Implicit feedback - tracks changes automatically
@@ -201,6 +202,11 @@ const [content, setContent] = useFeedbackState(
   'content-editor'
 );
 // Sends feedback when user stops editing
+
+// Loading pattern - no noise generated
+const [user, setUser] = useFeedbackState(null, 'user-data');
+setUser(userData); // ❌ No feedback sent (ignoreInitialNullish: true)
+setUser(updatedUser); // ✅ Feedback sent for real changes
 ```
 
 ### **🏷️ Trigger Names**
@@ -527,14 +533,15 @@ interface FeedbackData {
 
 #### **useFeedbackState Options**
 
-| Option                 | Type                                 | Default               | Description                   |
-| ---------------------- | ------------------------------------ | --------------------- | ----------------------------- |
-| `debounceMs`           | `number`                             | `1500`                | 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           |
-| `vote`                 | `'upvote' \| 'downvote' \| function` | `auto`                | Vote determination logic      |
-| `default_trigger_name` | `string`                             | `'auto_state_change'` | Default trigger name          |
+| Option                 | Type                                 | Default               | Description                            |
+| ---------------------- | ------------------------------------ | --------------------- | -------------------------------------- |
+| `debounceMs`           | `number`                             | `1500`                | 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                    |
+| `vote`                 | `'upvote' \| 'downvote' \| function` | `auto`                | Vote determination logic               |
+| `default_trigger_name` | `string`                             | `'auto_state_change'` | Default trigger name                   |
+| `ignoreInitialNullish` | `boolean`                            | `true`                | Skip null/undefined → data transitions |
 
 ---
 

package/dist/feedback-ui.es.js

@@ -364,6 +364,9 @@ const useKelet = () => {
 const useDefaultFeedbackHandler = () => {
   const context = useContext(KeletContext);
   if (!context) {
+    console.warn(
+      "No FeedbackHandler found: defaultFeedbackHandler is not possible since there's no KeletProvider wrapping this call, and handler not provided"
+    );
     return async () => {
     };
   } else {
@@ -2006,9 +2009,15 @@ function useStateChangeTracking(currentState, tx_id, options) {
   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 hasHadNonNullishStateRef = useRef(
+    currentState != null
+    // != null catches both null and undefined
+  );
   const timeoutRef = useRef(null);
   const currentTriggerNameRef = useRef(void 0);
   const sendFeedback = useCallback(
@@ -2066,6 +2075,17 @@ function useStateChangeTracking(currentState, tx_id, options) {
     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
+      !hasHadNonNullishStateRef.current && // We haven't had non-nullish state before
+      currentState != null;
+      if (currentState != null) {
+        hasHadNonNullishStateRef.current = true;
+      }
+      if (shouldIgnoreChange) {
+        prevStateRef.current = currentState;
+        changeStartStateRef.current = currentState;
+        return;
+      }
       if (!timeoutRef.current) {
         changeStartStateRef.current = prevState;
       }
@@ -2099,6 +2119,7 @@ function useStateChangeTracking(currentState, tx_id, options) {
     debounceMs,
     compareWith,
     defaultTriggerName,
+    ignoreInitialNullish,
     sendFeedback
   ]);
   return {