@ai-chans/sdk-react 0.2.0 → 0.2.2

package/README.md

@@ -1,11 +1,11 @@
-# chans-sdk-react
+# @ai-chans/sdk-react
 
 React components and hooks for [chans.ai](https://chans.ai) voice AI.
 
 ## Installation
 
 ```bash
-npm install chans-sdk-react
+npm install @ai-chans/sdk-react
 ```
 
 Requires React 18 or 19.
@@ -17,7 +17,7 @@ Requires React 18 or 19.
 Drop in a ready-to-use voice button:
 
 ```tsx
-import { ChansVoice } from "chans-sdk-react"
+import { ChansVoice } from "@ai-chans/sdk-react"
 
 function App() {
   return (
@@ -35,7 +35,7 @@ function App() {
 Build your own interface with render props:
 
 ```tsx
-import { ChansVoice } from "chans-sdk-react"
+import { ChansVoice } from "@ai-chans/sdk-react"
 
 function App() {
   return (
@@ -64,7 +64,7 @@ function App() {
 Access voice state from nested components:
 
 ```tsx
-import { ChansVoice, useChans } from "chans-sdk-react"
+import { ChansVoice, useChans } from "@ai-chans/sdk-react"
 
 function VoiceButton() {
   const { state, connect, disconnect, isConnected } = useChans()
@@ -145,7 +145,7 @@ type ChansState =
 
 ```tsx
 import { useState } from "react"
-import { ChansVoice } from "chans-sdk-react"
+import { ChansVoice } from "@ai-chans/sdk-react"
 
 function Chat() {
   const [messages, setMessages] = useState<Array<{role: string, text: string}>>([])
@@ -175,7 +175,7 @@ function Chat() {
 ### Manual Connect/Disconnect
 
 ```tsx
-import { ChansVoice } from "chans-sdk-react"
+import { ChansVoice } from "@ai-chans/sdk-react"
 
 function App() {
   return (

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { ChansState } from "@chozzz/chans-sdk-js";
-export type { ChansState } from "@chozzz/chans-sdk-js";
+import { ChansState } from "@ai-chans/sdk-js";
+export type { ChansState } from "@ai-chans/sdk-js";
 export interface ChansVoiceProps {
     /**
      * Agent token from chans.ai dashboard

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,sBAAsB,CAAA;AAG9D,YAAY,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEtD,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,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"}

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback, useRef, useMemo, createContext, useContext, } from "react";
-import { ChansClient } from "@chozzz/chans-sdk-js";
+import { ChansClient } from "@ai-chans/sdk-js";
 const ChansContext = createContext(null);
 /**
  * Hook to access ChansVoice state from child components

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@ai-chans/sdk-react",
-  "version": "0.2.0",
+  "version": "0.2.2",
+  "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/ai-chans/sdk.git",
-    "directory": "react"
+    "directory": "sdk-react"
   },
   "description": "React component for chans.ai voice AI",
   "type": "module",
@@ -24,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 listening state", () => {
+      render(<ChansVoice agentToken="agt_test" autoConnect={false} />)
+
+      act(() => {
+        mockClient._emit("stateChange", "listening")
+      })
+
+      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

@@ -9,10 +9,10 @@ import {
   createContext,
   useContext,
 } from "react"
-import { ChansClient, ChansState } from "@chozzz/chans-sdk-js"
+import { ChansClient, ChansState } from "@ai-chans/sdk-js"
 
 // Re-export client types
-export type { ChansState } from "@chozzz/chans-sdk-js"
+export type { ChansState } from "@ai-chans/sdk-js"
 
 export interface ChansVoiceProps {
   /**