@ai-chans/sdk-react 0.2.1 → 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.1",
+  "version": "0.3.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -25,13 +25,19 @@
   "scripts": {
     "build": "tsc",
     "dev": "tsc --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
     "lint": "echo 'lint not configured yet'"
   },
   "dependencies": {
     "@ai-chans/sdk-js": "workspace:*"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
     "@types/react": "^19",
+    "happy-dom": "^20.0.11",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {

package/src/index.test.tsx

@@ -0,0 +1,529 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"
+import { render, screen, fireEvent, waitFor, act } from "@testing-library/react"
+import { ChansVoice, useChans } from "./index.js"
+
+// Helper to create a mock ChansClient instance
+function createMockClient() {
+  const listeners = new Map<string, Set<(...args: unknown[]) => void>>()
+
+  const mockClient = {
+    on: vi.fn((event: string, callback: (...args: unknown[]) => void) => {
+      if (!listeners.has(event)) {
+        listeners.set(event, new Set())
+      }
+      listeners.get(event)!.add(callback)
+      return () => listeners.get(event)?.delete(callback)
+    }),
+    off: vi.fn(),
+    connect: vi.fn().mockResolvedValue(undefined),
+    disconnect: vi.fn().mockResolvedValue(undefined),
+    getState: vi.fn().mockReturnValue("idle"),
+    isConnected: vi.fn().mockReturnValue(false),
+    // Helper to emit events in tests
+    _emit: (event: string, ...args: unknown[]) => {
+      listeners.get(event)?.forEach((cb) => cb(...args))
+    },
+    _listeners: listeners,
+  }
+
+  return mockClient
+}
+
+// Store the mock client for test access
+let currentMockClient: ReturnType<typeof createMockClient>
+// Track constructor calls for verification
+let lastConstructorArgs: unknown[] = []
+
+// Mock the sdk-js module with a proper class constructor
+vi.mock("@ai-chans/sdk-js", async () => {
+  const actual = await vi.importActual("@ai-chans/sdk-js")
+  return {
+    ...actual,
+    ChansClient: class MockChansClient {
+      constructor(...args: unknown[]) {
+        lastConstructorArgs = args
+        // Copy all methods from currentMockClient to this instance
+        Object.assign(this, currentMockClient)
+      }
+    },
+  }
+})
+
+describe("ChansVoice", () => {
+  let mockClient: ReturnType<typeof createMockClient>
+
+  beforeEach(() => {
+    mockClient = createMockClient()
+    currentMockClient = mockClient
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe("rendering", () => {
+    it("should render default UI", () => {
+      render(<ChansVoice agentToken="agt_test" autoConnect={false} />)
+
+      expect(screen.getByRole("button")).toBeInTheDocument()
+      expect(screen.getByText("Click to start")).toBeInTheDocument()
+    })
+
+    it("should render custom children", () => {
+      render(
+        <ChansVoice agentToken="agt_test" autoConnect={false}>
+          {({ state }) => <div data-testid="custom">State: {state}</div>}
+        </ChansVoice>
+      )
+
+      expect(screen.getByTestId("custom")).toHaveTextContent("State: idle")
+    })
+
+    it("should apply className to wrapper", () => {
+      const { container } = render(
+        <ChansVoice agentToken="agt_test" autoConnect={false} className="custom-class" />
+      )
+
+      expect(container.querySelector(".custom-class")).toBeInTheDocument()
+    })
+  })
+
+  describe("client initialization", () => {
+    it("should create ChansClient with agentToken", () => {
+      render(<ChansVoice agentToken="agt_test_token" autoConnect={false} />)
+
+      expect(lastConstructorArgs[0]).toEqual({
+        agentToken: "agt_test_token",
+        apiUrl: undefined,
+      })
+    })
+
+    it("should create ChansClient with custom apiUrl", () => {
+      render(
+        <ChansVoice
+          agentToken="agt_test"
+          apiUrl="https://custom.api.com"
+          autoConnect={false}
+        />
+      )
+
+      expect(lastConstructorArgs[0]).toEqual({
+        agentToken: "agt_test",
+        apiUrl: "https://custom.api.com",
+      })
+    })
+
+    it("should set up event listeners on mount", () => {
+      render(<ChansVoice agentToken="agt_test" autoConnect={false} />)
+
+      expect(mockClient.on).toHaveBeenCalledWith("stateChange", expect.any(Function))
+      expect(mockClient.on).toHaveBeenCalledWith("transcript", expect.any(Function))
+      expect(mockClient.on).toHaveBeenCalledWith("response", expect.any(Function))
+      expect(mockClient.on).toHaveBeenCalledWith("error", expect.any(Function))
+      expect(mockClient.on).toHaveBeenCalledWith("connected", expect.any(Function))
+      expect(mockClient.on).toHaveBeenCalledWith("disconnected", expect.any(Function))
+    })
+
+    it("should disconnect on unmount", () => {
+      const { unmount } = render(<ChansVoice agentToken="agt_test" autoConnect={false} />)
+
+      unmount()
+
+      expect(mockClient.disconnect).toHaveBeenCalled()
+    })
+  })
+
+  describe("auto-connect", () => {
+    it("should auto-connect by default", async () => {
+      render(<ChansVoice agentToken="agt_test" />)
+
+      await waitFor(() => {
+        expect(mockClient.connect).toHaveBeenCalledWith({ userId: undefined })
+      })
+    })
+
+    it("should not auto-connect when autoConnect=false", async () => {
+      render(<ChansVoice agentToken="agt_test" autoConnect={false} />)
+
+      // Give it a moment to potentially call connect
+      await new Promise((r) => setTimeout(r, 50))
+
+      expect(mockClient.connect).not.toHaveBeenCalled()
+    })
+
+    it("should pass userId to connect", async () => {
+      render(<ChansVoice agentToken="agt_test" userId="user-123" />)
+
+      await waitFor(() => {
+        expect(mockClient.connect).toHaveBeenCalledWith({ userId: "user-123" })
+      })
+    })
+  })
+
+  describe("state management", () => {
+    it("should update state on stateChange event", async () => {
+      render(
+        <ChansVoice agentToken="agt_test" autoConnect={false}>
+          {({ state }) => <div data-testid="state">{state}</div>}
+        </ChansVoice>
+      )
+
+      expect(screen.getByTestId("state")).toHaveTextContent("idle")
+
+      act(() => {
+        mockClient._emit("stateChange", "connecting")
+      })
+
+      expect(screen.getByTestId("state")).toHaveTextContent("connecting")
+
+      act(() => {
+        mockClient._emit("stateChange", "listening")
+      })
+
+      expect(screen.getByTestId("state")).toHaveTextContent("listening")
+    })
+
+    it("should calculate isConnected correctly", () => {
+      render(
+        <ChansVoice agentToken="agt_test" autoConnect={false}>
+          {({ isConnected }) => (
+            <div data-testid="connected">{isConnected ? "yes" : "no"}</div>
+          )}
+        </ChansVoice>
+      )
+
+      expect(screen.getByTestId("connected")).toHaveTextContent("no")
+
+      act(() => {
+        mockClient._emit("stateChange", "listening")
+      })
+
+      expect(screen.getByTestId("connected")).toHaveTextContent("yes")
+
+      act(() => {
+        mockClient._emit("stateChange", "error")
+      })
+
+      expect(screen.getByTestId("connected")).toHaveTextContent("no")
+    })
+
+    it("should handle errors", async () => {
+      const onError = vi.fn()
+      render(
+        <ChansVoice agentToken="agt_test" autoConnect={false} onError={onError}>
+          {({ error }) => (
+            <div data-testid="error">{error?.message || "no error"}</div>
+          )}
+        </ChansVoice>
+      )
+
+      expect(screen.getByTestId("error")).toHaveTextContent("no error")
+
+      act(() => {
+        mockClient._emit("error", new Error("Connection failed"))
+      })
+
+      expect(screen.getByTestId("error")).toHaveTextContent("Connection failed")
+      expect(onError).toHaveBeenCalledWith(expect.any(Error))
+    })
+
+    it("should clear error on connected event", async () => {
+      render(
+        <ChansVoice agentToken="agt_test" autoConnect={false}>
+          {({ error }) => (
+            <div data-testid="error">{error?.message || "no error"}</div>
+          )}
+        </ChansVoice>
+      )
+
+      // Set an error
+      act(() => {
+        mockClient._emit("error", new Error("Some error"))
+      })
+      expect(screen.getByTestId("error")).toHaveTextContent("Some error")
+
+      // Connect clears error
+      act(() => {
+        mockClient._emit("connected")
+      })
+      expect(screen.getByTestId("error")).toHaveTextContent("no error")
+    })
+  })
+
+  describe("callbacks", () => {
+    it("should call onStateChange", () => {
+      const onStateChange = vi.fn()
+      render(
+        <ChansVoice
+          agentToken="agt_test"
+          autoConnect={false}
+          onStateChange={onStateChange}
+        />
+      )
+
+      act(() => {
+        mockClient._emit("stateChange", "connecting")
+      })
+
+      expect(onStateChange).toHaveBeenCalledWith("connecting")
+    })
+
+    it("should call onTranscript", () => {
+      const onTranscript = vi.fn()
+      render(
+        <ChansVoice
+          agentToken="agt_test"
+          autoConnect={false}
+          onTranscript={onTranscript}
+        />
+      )
+
+      act(() => {
+        mockClient._emit("transcript", "Hello world")
+      })
+
+      expect(onTranscript).toHaveBeenCalledWith("Hello world")
+    })
+
+    it("should call onResponse", () => {
+      const onResponse = vi.fn()
+      render(
+        <ChansVoice
+          agentToken="agt_test"
+          autoConnect={false}
+          onResponse={onResponse}
+        />
+      )
+
+      act(() => {
+        mockClient._emit("response", "Hi there!")
+      })
+
+      expect(onResponse).toHaveBeenCalledWith("Hi there!")
+    })
+
+    it("should call onConnected", () => {
+      const onConnected = vi.fn()
+      render(
+        <ChansVoice
+          agentToken="agt_test"
+          autoConnect={false}
+          onConnected={onConnected}
+        />
+      )
+
+      act(() => {
+        mockClient._emit("connected")
+      })
+
+      expect(onConnected).toHaveBeenCalled()
+    })
+
+    it("should call onDisconnected", () => {
+      const onDisconnected = vi.fn()
+      render(
+        <ChansVoice
+          agentToken="agt_test"
+          autoConnect={false}
+          onDisconnected={onDisconnected}
+        />
+      )
+
+      act(() => {
+        mockClient._emit("disconnected")
+      })
+
+      expect(onDisconnected).toHaveBeenCalled()
+    })
+  })
+
+  describe("connect/disconnect controls", () => {
+    it("should call connect when clicking button in idle state", async () => {
+      render(<ChansVoice agentToken="agt_test" autoConnect={false} />)
+
+      fireEvent.click(screen.getByRole("button"))
+
+      await waitFor(() => {
+        expect(mockClient.connect).toHaveBeenCalled()
+      })
+    })
+
+    it("should call disconnect when clicking button in connected state", async () => {
+      render(
+        <ChansVoice agentToken="agt_test" autoConnect={false}>
+          {({ isConnected, connect, disconnect }) => (
+            <button onClick={isConnected ? disconnect : connect}>
+              {isConnected ? "Stop" : "Start"}
+            </button>
+          )}
+        </ChansVoice>
+      )
+
+      // Simulate connected state
+      act(() => {
+        mockClient._emit("stateChange", "listening")
+      })
+
+      expect(screen.getByRole("button")).toHaveTextContent("Stop")
+
+      fireEvent.click(screen.getByRole("button"))
+
+      await waitFor(() => {
+        expect(mockClient.disconnect).toHaveBeenCalled()
+      })
+    })
+
+    it("should expose connect/disconnect in render props", () => {
+      const connectFn = vi.fn()
+      const disconnectFn = vi.fn()
+
+      render(
+        <ChansVoice agentToken="agt_test" autoConnect={false}>
+          {({ connect, disconnect }) => (
+            <>
+              <button data-testid="connect" onClick={connect}>
+                Connect
+              </button>
+              <button data-testid="disconnect" onClick={disconnect}>
+                Disconnect
+              </button>
+            </>
+          )}
+        </ChansVoice>
+      )
+
+      fireEvent.click(screen.getByTestId("connect"))
+      expect(mockClient.connect).toHaveBeenCalled()
+
+      fireEvent.click(screen.getByTestId("disconnect"))
+      expect(mockClient.disconnect).toHaveBeenCalled()
+    })
+  })
+
+  describe("default UI states", () => {
+    it("should show 'Click to start' in idle state", () => {
+      render(<ChansVoice agentToken="agt_test" autoConnect={false} />)
+      expect(screen.getByText("Click to start")).toBeInTheDocument()
+    })
+
+    it("should show 'Connecting...' in connecting state", () => {
+      render(<ChansVoice agentToken="agt_test" autoConnect={false} />)
+
+      act(() => {
+        mockClient._emit("stateChange", "connecting")
+      })
+
+      expect(screen.getByText("Connecting...")).toBeInTheDocument()
+    })
+
+    it("should show 'Listening...' in ready state", () => {
+      render(<ChansVoice agentToken="agt_test" autoConnect={false} />)
+
+      act(() => {
+        mockClient._emit("stateChange", "ready")
+      })
+
+      expect(screen.getByText("Listening...")).toBeInTheDocument()
+    })
+
+    it("should show 'Agent speaking' in speaking state", () => {
+      render(<ChansVoice agentToken="agt_test" autoConnect={false} />)
+
+      act(() => {
+        mockClient._emit("stateChange", "speaking")
+      })
+
+      expect(screen.getByText("Agent speaking")).toBeInTheDocument()
+    })
+
+    it("should show error message when error occurs", () => {
+      render(<ChansVoice agentToken="agt_test" autoConnect={false} />)
+
+      act(() => {
+        mockClient._emit("error", new Error("Connection failed"))
+        mockClient._emit("stateChange", "error")
+      })
+
+      expect(screen.getByText("Connection failed")).toBeInTheDocument()
+    })
+
+    it("should disable button in connecting state", () => {
+      render(<ChansVoice agentToken="agt_test" autoConnect={false} />)
+
+      act(() => {
+        mockClient._emit("stateChange", "connecting")
+      })
+
+      expect(screen.getByRole("button")).toBeDisabled()
+    })
+  })
+})
+
+describe("useChans", () => {
+  let mockClient: ReturnType<typeof createMockClient>
+
+  beforeEach(() => {
+    mockClient = createMockClient()
+    currentMockClient = mockClient
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it("should throw error when used outside ChansVoice", () => {
+    // Suppress console.error for this test
+    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {})
+
+    function TestComponent() {
+      useChans()
+      return null
+    }
+
+    expect(() => render(<TestComponent />)).toThrow(
+      "useChans must be used within a ChansVoice component"
+    )
+
+    consoleSpy.mockRestore()
+  })
+
+  it("should provide context values when used inside ChansVoice", () => {
+    function ChildComponent() {
+      const { state, isConnected } = useChans()
+      return (
+        <div>
+          <span data-testid="state">{state}</span>
+          <span data-testid="connected">{isConnected ? "yes" : "no"}</span>
+        </div>
+      )
+    }
+
+    render(
+      <ChansVoice agentToken="agt_test" autoConnect={false}>
+        {() => <ChildComponent />}
+      </ChansVoice>
+    )
+
+    expect(screen.getByTestId("state")).toHaveTextContent("idle")
+    expect(screen.getByTestId("connected")).toHaveTextContent("no")
+  })
+
+  it("should update when state changes", () => {
+    function ChildComponent() {
+      const { state } = useChans()
+      return <span data-testid="state">{state}</span>
+    }
+
+    render(
+      <ChansVoice agentToken="agt_test" autoConnect={false}>
+        {() => <ChildComponent />}
+      </ChansVoice>
+    )
+
+    act(() => {
+      mockClient._emit("stateChange", "listening")
+    })
+
+    expect(screen.getByTestId("state")).toHaveTextContent("listening")
+  })
+})

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>