@kelet-ai/feedback-ui 1.1.4 → 1.2.0

package/README.md

@@ -126,6 +126,43 @@ function ContentEditor() {
 }
 ```
 
+### **Pattern 4: Manual Signal Sending**
+
+Send signals directly without tying them to component state — useful for custom events, page views, or any interaction not covered by the other patterns:
+
+```tsx
+import { KeletProvider, useKeletSignal } from "@kelet-ai/feedback-ui"
+
+function CopyButton({ sessionId }: { sessionId: string }) {
+  const sendSignal = useKeletSignal()
+
+  return (
+    <button
+      onClick={() => {
+        navigator.clipboard.writeText("...")
+        sendSignal({
+          session_id: sessionId,
+          kind: "feedback",
+          source: "human",
+          score: 1,
+          trigger_name: "copy_button_clicked",
+        })
+      }}
+    >
+      Copy
+    </button>
+  )
+}
+
+function App() {
+  return (
+    <KeletProvider apiKey="..." project="my-project">
+      <CopyButton sessionId="response-abc123" />
+    </KeletProvider>
+  )
+}
+```
+
 ### **Pattern 3: Complex State with Reducer**
 
 For advanced state management with automatic trigger tracking, by using a drop-in replacement for useReducer:
@@ -359,6 +396,39 @@ Context-aware feedback form that appears after voting.
 
 ---
 
+## ✉️ Manual Signal Sending
+
+### **useKeletSignal Hook**
+
+Returns the signal-sending function from the nearest `KeletProvider`. Use this to send signals manually for any event — custom interactions, page views, feature usage — without tying them to component state.
+
+Safe to call outside a provider: returns a no-op and logs a warning.
+
+```tsx
+import { useKeletSignal } from "@kelet-ai/feedback-ui"
+
+function MyComponent() {
+  const sendSignal = useKeletSignal()
+
+  const handleAction = () => {
+    sendSignal({
+      session_id: "my-session",
+      kind: "feedback",
+      source: "human",
+      score: 1,
+      trigger_name: "user_action",
+      metadata: { context: "sidebar" },
+    })
+  }
+
+  return <button onClick={handleAction}>Do something</button>
+}
+```
+
+Requires a `KeletProvider` ancestor to send signals to the API.
+
+---
+
 ## 📊 Automatic Feedback Hooks
 
 ### **useFeedbackState Hook**

package/dist/contexts/kelet.d.ts

@@ -12,6 +12,26 @@ interface KeletProviderProps {
 }
 export declare const KeletContext: React.Context<KeletContextValue | null>;
 export declare const useKelet: () => KeletContextValue;
+/**
+ * Returns the signal-sending function from the nearest KeletProvider.
+ *
+ * Use this hook to send signals manually — e.g. tracking custom events,
+ * page views, or any interaction not covered by useFeedbackState.
+ *
+ * Safe to call outside a provider: returns a no-op and logs a warning.
+ *
+ * @example
+ * const sendSignal = useKeletSignal()
+ *
+ * sendSignal({
+ *   session_id: 'my-session',
+ *   kind: 'feedback',
+ *   source: 'human',
+ *   score: 1,
+ *   trigger_name: 'copy_button_clicked',
+ * })
+ */
+export declare const useKeletSignal: () => ((data: FeedbackData) => Promise<void>);
 export declare const useDefaultFeedbackHandler: () => ((data: FeedbackData) => Promise<void>);
 export declare const KeletProvider: React.FC<React.PropsWithChildren<KeletProviderProps>>;
 export {};

package/dist/feedback-ui.es.js

@@ -443,7 +443,7 @@ const useKelet = () => {
   }
   return context;
 };
-const useDefaultFeedbackHandler = () => {
+const useKeletSignal = () => {
   const context = useContext(KeletContext);
   if (!context) {
     console.warn(
@@ -455,6 +455,7 @@ const useDefaultFeedbackHandler = () => {
     return context.feedback;
   }
 };
+const useDefaultFeedbackHandler = useKeletSignal;
 const KeletProvider = ({ apiKey, project, baseUrl, children }) => {
   useEffect(() => {
     initEventCapture();
@@ -2275,6 +2276,7 @@ export {
   VoteFeedback,
   useDefaultFeedbackHandler,
   useFeedbackState,
-  useKelet
+  useKelet,
+  useKeletSignal
 };
 //# sourceMappingURL=feedback-ui.es.js.map