@ai-chans/sdk-react 0.2.2 → 0.3.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { ChansState } from "@ai-chans/sdk-js";
-export type { ChansState } from "@ai-chans/sdk-js";
+export type { ChansState, AgentInfo, SessionInfo } from "@ai-chans/sdk-js";
 export interface ChansVoiceProps {
     /**
      * Agent token from chans.ai dashboard
@@ -41,6 +41,22 @@ export interface ChansVoiceProps {
      * Called when disconnected
      */
     onDisconnected?: () => void;
+    /**
+     * Called when agent joins the room
+     */
+    onAgentConnected?: (agent: import("@ai-chans/sdk-js").AgentInfo) => void;
+    /**
+     * Called when agent leaves the room
+     */
+    onAgentDisconnected?: () => void;
+    /**
+     * Called when user finishes speaking (final transcript)
+     */
+    onUserTurnComplete?: (transcript: string) => void;
+    /**
+     * Called when session is created
+     */
+    onSessionCreated?: (session: import("@ai-chans/sdk-js").SessionInfo) => void;
     /**
      * Custom render function for the voice UI
      */
@@ -86,6 +102,6 @@ export declare function useChans(): ChansContextValue;
  * </ChansVoice>
  * ```
  */
-export declare function ChansVoice({ agentToken, userId, apiUrl, autoConnect, onTranscript, onResponse, onStateChange, onError, onConnected, onDisconnected, children, className, }: ChansVoiceProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChansVoice({ agentToken, userId, apiUrl, autoConnect, onTranscript, onResponse, onStateChange, onError, onConnected, onDisconnected, onAgentConnected, onAgentDisconnected, onUserTurnComplete, onSessionCreated, children, className, }: ChansVoiceProps): import("react/jsx-runtime").JSX.Element;
 export default ChansVoice;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAe,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAG1D,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAElD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAErC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAEnC;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAE3C;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAEhC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAE3B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,KAAK,CAAC,SAAS,CAAA;IAE5D;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,UAAU,CAAA;IACjB,WAAW,EAAE,OAAO,CAAA;IACpB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC5B,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/B,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;CACpB;AAGD,KAAK,iBAAiB,GAAG,qBAAqB,CAAA;AAI9C;;GAEG;AACH,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,MAAM,EACN,MAAM,EACN,WAAkB,EAClB,YAAY,EACZ,UAAU,EACV,aAAa,EACb,OAAO,EACP,WAAW,EACX,cAAc,EACd,QAAQ,EACR,SAAS,GACV,EAAE,eAAe,2CA4GjB;AA8ID,eAAe,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAe,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAG1D,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE1E,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAErC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAEnC;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAE3C;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAEhC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAE3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,kBAAkB,EAAE,SAAS,KAAK,IAAI,CAAA;IAExE;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAA;IAEhC;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAEjD;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,kBAAkB,EAAE,WAAW,KAAK,IAAI,CAAA;IAE5E;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,KAAK,CAAC,SAAS,CAAA;IAE5D;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,UAAU,CAAA;IACjB,WAAW,EAAE,OAAO,CAAA;IACpB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC5B,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/B,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;CACpB;AAGD,KAAK,iBAAiB,GAAG,qBAAqB,CAAA;AAI9C;;GAEG;AACH,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,MAAM,EACN,MAAM,EACN,WAAkB,EAClB,YAAY,EACZ,UAAU,EACV,aAAa,EACb,OAAO,EACP,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAChB,QAAQ,EACR,SAAS,GACV,EAAE,eAAe,2CAgIjB;AA+ID,eAAe,UAAU,CAAA"}

package/dist/index.js

@@ -37,7 +37,7 @@ export function useChans() {
  * </ChansVoice>
  * ```
  */
-export function ChansVoice({ agentToken, userId, apiUrl, autoConnect = true, onTranscript, onResponse, onStateChange, onError, onConnected, onDisconnected, children, className, }) {
+export function ChansVoice({ agentToken, userId, apiUrl, autoConnect = true, onTranscript, onResponse, onStateChange, onError, onConnected, onDisconnected, onAgentConnected, onAgentDisconnected, onUserTurnComplete, onSessionCreated, children, className, }) {
     const [state, setState] = useState("idle");
     const [error, setError] = useState(null);
     const clientRef = useRef(null);
@@ -67,6 +67,18 @@ export function ChansVoice({ agentToken, userId, apiUrl, autoConnect = true, onT
         const unsubDisconnected = client.on("disconnected", () => {
             onDisconnected?.();
         });
+        const unsubAgentConnected = client.on("agentConnected", (agent) => {
+            onAgentConnected?.(agent);
+        });
+        const unsubAgentDisconnected = client.on("agentDisconnected", () => {
+            onAgentDisconnected?.();
+        });
+        const unsubUserTurnComplete = client.on("userTurnComplete", (transcript) => {
+            onUserTurnComplete?.(transcript);
+        });
+        const unsubSessionCreated = client.on("sessionCreated", (session) => {
+            onSessionCreated?.(session);
+        });
         return () => {
             unsubState();
             unsubTranscript();
@@ -74,9 +86,13 @@ export function ChansVoice({ agentToken, userId, apiUrl, autoConnect = true, onT
             unsubError();
             unsubConnected();
             unsubDisconnected();
+            unsubAgentConnected();
+            unsubAgentDisconnected();
+            unsubUserTurnComplete();
+            unsubSessionCreated();
             client.disconnect();
         };
-    }, [agentToken, apiUrl, onStateChange, onTranscript, onResponse, onError, onConnected, onDisconnected]);
+    }, [agentToken, apiUrl, onStateChange, onTranscript, onResponse, onError, onConnected, onDisconnected, onAgentConnected, onAgentDisconnected, onUserTurnComplete, onSessionCreated]);
     // Auto-connect
     useEffect(() => {
         if (autoConnect && clientRef.current && state === "idle") {
@@ -149,7 +165,7 @@ function DefaultVoiceUI({ state, isConnected, connect, disconnect, error, }) {
                     marginTop: "0.5rem",
                     fontSize: "0.75rem",
                     color: "#9ca3af",
-                }, children: [state === "idle" && "Click to start", state === "connecting" && "Connecting...", state === "connected" && "Connected", state === "listening" && "Listening...", state === "speaking" && "Agent speaking", state === "error" && "Error"] })] }));
+                }, children: [state === "idle" && "Click to start", state === "connecting" && "Connecting...", state === "waiting" && "Waiting for agent...", state === "ready" && "Listening...", state === "processing" && "Processing...", state === "speaking" && "Agent speaking", state === "error" && "Error"] })] }));
 }
 function MicIcon() {
     return (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }), _jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }), _jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" }), _jsx("line", { x1: "8", y1: "23", x2: "16", y2: "23" })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-chans/sdk-react",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/src/index.test.tsx

@@ -416,11 +416,11 @@ describe("ChansVoice", () => {
       expect(screen.getByText("Connecting...")).toBeInTheDocument()
     })
 
-    it("should show 'Listening...' in listening state", () => {
+    it("should show 'Listening...' in ready state", () => {
       render(<ChansVoice agentToken="agt_test" autoConnect={false} />)
 
       act(() => {
-        mockClient._emit("stateChange", "listening")
+        mockClient._emit("stateChange", "ready")
       })
 
       expect(screen.getByText("Listening...")).toBeInTheDocument()

package/src/index.tsx

@@ -12,7 +12,7 @@ import {
 import { ChansClient, ChansState } from "@ai-chans/sdk-js"
 
 // Re-export client types
-export type { ChansState } from "@ai-chans/sdk-js"
+export type { ChansState, AgentInfo, SessionInfo } from "@ai-chans/sdk-js"
 
 export interface ChansVoiceProps {
   /**
@@ -65,6 +65,26 @@ export interface ChansVoiceProps {
    */
   onDisconnected?: () => void
 
+  /**
+   * Called when agent joins the room
+   */
+  onAgentConnected?: (agent: import("@ai-chans/sdk-js").AgentInfo) => void
+
+  /**
+   * Called when agent leaves the room
+   */
+  onAgentDisconnected?: () => void
+
+  /**
+   * Called when user finishes speaking (final transcript)
+   */
+  onUserTurnComplete?: (transcript: string) => void
+
+  /**
+   * Called when session is created
+   */
+  onSessionCreated?: (session: import("@ai-chans/sdk-js").SessionInfo) => void
+
   /**
    * Custom render function for the voice UI
    */
@@ -135,6 +155,10 @@ export function ChansVoice({
   onError,
   onConnected,
   onDisconnected,
+  onAgentConnected,
+  onAgentDisconnected,
+  onUserTurnComplete,
+  onSessionCreated,
   children,
   className,
 }: ChansVoiceProps) {
@@ -176,6 +200,22 @@ export function ChansVoice({
       onDisconnected?.()
     })
 
+    const unsubAgentConnected = client.on("agentConnected", (agent) => {
+      onAgentConnected?.(agent)
+    })
+
+    const unsubAgentDisconnected = client.on("agentDisconnected", () => {
+      onAgentDisconnected?.()
+    })
+
+    const unsubUserTurnComplete = client.on("userTurnComplete", (transcript) => {
+      onUserTurnComplete?.(transcript)
+    })
+
+    const unsubSessionCreated = client.on("sessionCreated", (session) => {
+      onSessionCreated?.(session)
+    })
+
     return () => {
       unsubState()
       unsubTranscript()
@@ -183,9 +223,13 @@ export function ChansVoice({
       unsubError()
       unsubConnected()
       unsubDisconnected()
+      unsubAgentConnected()
+      unsubAgentDisconnected()
+      unsubUserTurnComplete()
+      unsubSessionCreated()
       client.disconnect()
     }
-  }, [agentToken, apiUrl, onStateChange, onTranscript, onResponse, onError, onConnected, onDisconnected])
+  }, [agentToken, apiUrl, onStateChange, onTranscript, onResponse, onError, onConnected, onDisconnected, onAgentConnected, onAgentDisconnected, onUserTurnComplete, onSessionCreated])
 
   // Auto-connect
   useEffect(() => {
@@ -322,8 +366,9 @@ function DefaultVoiceUI({
       >
         {state === "idle" && "Click to start"}
         {state === "connecting" && "Connecting..."}
-        {state === "connected" && "Connected"}
-        {state === "listening" && "Listening..."}
+        {state === "waiting" && "Waiting for agent..."}
+        {state === "ready" && "Listening..."}
+        {state === "processing" && "Processing..."}
         {state === "speaking" && "Agent speaking"}
         {state === "error" && "Error"}
       </div>