@vox-ai/react 0.5.0 → 1.0.0

package/README.md

@@ -1,282 +1,252 @@
-# Vox.ai React 라이브러리
+# @vox-ai/react
 
-React 애플리케이션에 음성 AI 기능을 통합하기 위한 SDK 라이브러리입니다.
+vox.ai voice agent를 React 앱에서 사용하기 위한 hook 라이브러리.
 
 ## 설치
 
-패키지 매니저를 통해 프로젝트에 라이브러리를 설치하세요.
-
 ```bash
 npm install @vox-ai/react
-# 또는
+# or
 yarn add @vox-ai/react
-# 또는
-pnpm install @vox-ai/react
+# or
+pnpm add @vox-ai/react
 ```
 
-## 사용법
-
-### useVoxAI
-
-Vox.ai 플랫폼과의 음성 AI 상호작용을 관리하는 React 훅입니다.
-
-#### 초기화
-
-먼저 useVoxAI 훅을 초기화합니다.
+## 빠른 시작
 
 ```tsx
-import { useVoxAI } from "@vox-ai/react";
-
-function VoiceComponent() {
-  const {
-    connect,
-    disconnect,
-    state,
-    messages,
-    send,
-    audioWaveform,
-    toggleMic,
-    setVolume,
-  } = useVoxAI({
-    onConnect: () => console.log("Vox.ai에 연결됨"),
-    onDisconnect: () => console.log("Vox.ai 연결 해제됨"),
-    onError: (error) => console.error("오류:", error),
-    onMessage: (message) => console.log("새 메시지:", message),
+import { useConversation } from "@vox-ai/react";
+
+export function VoiceWidget() {
+  const conversation = useConversation({
+    onConnect: () => console.log("연결됨"),
+    onDisconnect: () => console.log("연결 종료"),
+    onStatusChange: (status) => console.log("status:", status),
+    onModeChange: (mode) => console.log("mode:", mode),
+    onMessage: (message) => console.log(`${message.source}: ${message.text}`),
+    onError: (error) => console.error("error:", error.message),
   });
 
-  // 컴포넌트의 나머지 부분
+  const start = async () => {
+    // 마이크 권한 요청 (UI에서 사전 안내 권장)
+    await navigator.mediaDevices.getUserMedia({ audio: true });
+
+    const conversationId = await conversation.startSession({
+      agentId: "YOUR_AGENT_ID",
+      apiKey: "YOUR_API_KEY",
+    });
+    console.log("session started:", conversationId);
+  };
+
+  return (
+    <div>
+      <button onClick={start} disabled={conversation.status !== "disconnected"}>
+        Start
+      </button>
+      <button onClick={conversation.endSession}>End</button>
+      <p>Status: {conversation.status}</p>
+      <p>Speaking: {conversation.isSpeaking ? "Yes" : "No"}</p>
+    </div>
+  );
 }
 ```
 
-#### 옵션
+## `useConversation(options?)`
 
-- **onConnect** - 음성 AI 연결이 설정되었을 때 호출되는 핸들러
-- **onDisconnect** - 음성 AI 연결이 종료되었을 때 호출되는 핸들러
-- **onMessage** - 새 메시지가 수신되었을 때 호출되는 핸들러
-- **onError** - 오류가 발생했을 때 호출되는 핸들러
+### 콜백 (hook 초기화 시 전달)
 
-#### 메서드
+| 콜백 | 시그니처 | 설명 |
+|------|----------|------|
+| `onConnect` | `() => void` | 연결 성공 |
+| `onDisconnect` | `() => void` | 연결 종료 |
+| `onStatusChange` | `(status: ConversationStatus) => void` | Status 변경 (`"disconnected"` → `"connecting"` → `"connected"`) |
+| `onModeChange` | `(mode: ConversationMode) => void` | Mode 변경 (`"listening"` ⇄ `"speaking"`) |
+| `onMessage` | `(message: ConversationMessage) => void` | 메시지 수신 (user transcription, agent response) |
+| `onError` | `(error: Error) => void` | 에러 발생 |
 
-##### connect
+### Hook 옵션
 
-Vox.ai 서비스에 연결을 설정합니다. 인증 매개변수가 필요합니다.
-
-```tsx
-// 에이전트 ID와 API 키로 Vox.ai에 연결
-connect({
-  agentId: "your-agent-id",
-  apiKey: "your-api-key",
-  dynamicVariables: {
-    // 대화 커스터마이징을 위한 동적 변수
-    userName: "홍길동",
-    context: "고객-지원",
-  },
-  metadata: {
-    // 통화에 대한 메타데이터를 프론트엔드에게 전달
-    callerId: "customer-123",
-    departmentId: "support",
-  },
-});
-```
+| 옵션 | 타입 | 설명 |
+|------|------|------|
+| `textOnly` | `boolean` | Text-only session 기본값. `true`면 microphone/audio 없이 chat mode로 연결 |
 
-##### disconnect
+### React State
 
-음성 AI 세션을 수동으로 종료하는 메서드입니다.
+| State | 타입 | 설명 |
+|-------|------|------|
+| `status` | `ConversationStatus` | `"disconnected"` \| `"connecting"` \| `"connected"` |
+| `isSpeaking` | `boolean` | Agent가 현재 발화 중인지 여부 |
+| `micMuted` | `boolean` | 마이크 음소거 상태 |
+| `messages` | `ConversationMessage[]` | 현재 세션에서 주고받은 메시지 배열 |
 
-```tsx
-disconnect();
-```
+> JS SDK의 `getStatus()`, `getMode()`, `getMicMuted()`에 대응. React에서는 state로 제공되므로 자동 re-render.
 
-##### send
+### 메서드
 
-텍스트 메시지나 DTMF 톤을 에이전트에 전송하는 메서드입니다.
+#### 세션 제어
 
 ```tsx
-// 텍스트 메시지 전송
-send({ message: "안녕하세요, 도움이 필요합니다." });
+// 세션 시작 — conversationId를 반환
+const conversationId = await conversation.startSession({
+  agentId: "YOUR_AGENT_ID",
+  apiKey: "YOUR_API_KEY",
+});
+
+// 세션 종료
+await conversation.endSession();
 
-// DTMF 톤 전송 (0-9, *, #)
-send({ digit: 1 });
+// 세션 ID 조회
+const id = conversation.getId();
+
+// 현재 세션 메시지 조회
+const messages = conversation.getMessages();
 ```
 
-##### audioWaveform
+#### `startSession` 옵션
 
-에이전트나 사용자의 오디오 웨이브폼 데이터를 반환하는 메서드입니다.
+| 옵션 | 타입 | 필수 | 설명 |
+|------|------|------|------|
+| `agentId` | `string` | O | Agent ID |
+| `apiKey` | `string` | O | API key |
+| `agentVersion` | `string` | | Agent version (`"current"`, `"production"`, `"v1"` 등, default: `"current"`) |
+| `textOnly` | `boolean` | | Hook 기본값을 override하는 per-session text-only 설정 |
+| `dynamicVariables` | `Record<string, string \| number \| boolean>` | | Agent prompt에 주입할 dynamic variables |
+| `metadata` | `Record<string, unknown>` | | Call metadata (webhook, call log에 포함) |
 
-```tsx
-// 에이전트 오디오 웨이브폼 데이터 가져오기 (기본값)
-const agentWaveform = audioWaveform({
-  speaker: "agent", // "agent" 또는 "user"
-  barCount: 20, // 반환할 웨이브폼 바의 수
-  updateInterval: 50, // 업데이트 간격 (ms)
-});
+#### 메시지 전송
 
-// 사용자 오디오 웨이브폼 데이터 가져오기
-const userWaveform = audioWaveform({ speaker: "user" });
+```tsx
+// 텍스트 메시지 전송 (음성 대신 텍스트 입력)
+await conversation.sendUserMessage("안녕하세요");
 ```
 
-##### toggleMic
-
-사용자의 마이크를 활성화/비활성화하는 메서드입니다.
+#### 메시지 히스토리
 
 ```tsx
-// 마이크 활성화
-toggleMic(true);
+conversation.messages.forEach((message) => {
+  console.log(message.source, message.text, message.isFinal);
+});
 
-// 마이크 비활성화
-toggleMic(false);
+const snapshot = conversation.getMessages();
 ```
 
-##### setVolume
+- `messages`는 React state라서 메시지 갱신 시 자동 re-render
+- `getMessages()`는 현재 시점의 메시지 배열 snapshot 반환
 
-에이전트의 볼륨을 설정하는 메서드입니다. 값은 0(음소거)부터 1(최대 볼륨)까지입니다.
+#### 마이크 제어
 
 ```tsx
-// 볼륨 50%로 설정
-setVolume(0.5);
-```
+// 음소거
+await conversation.setMicMuted(true);
 
-#### 상태 및 데이터
+// 음소거 해제
+await conversation.setMicMuted(false);
 
-##### state
+// 현재 상태는 conversation.micMuted 로 확인
+```
 
-음성 AI 상호작용의 현재 상태를 포함하는 React 상태입니다.
+#### 볼륨 제어
 
 ```tsx
-const { state } = useVoxAI();
-console.log(state); // "disconnected", "connecting", "initializing", "listening", "thinking", "speaking" 중 하나
+// Agent 음성 볼륨 설정 (0.0 ~ 1.0)
+conversation.setVolume({ volume: 0.5 });
 ```
 
-이 상태를 사용하여 사용자에게 적절한 UI 표시기를 보여줄 수 있습니다.
-
-##### messages
-
-대화 기록을 포함하는 React 상태입니다.
+#### 오디오 모니터링
 
 ```tsx
-const { messages } = useVoxAI();
-console.log(messages); // 메시지 객체 배열
+// 입출력 볼륨 (0.0 ~ 1.0)
+const inputVol = conversation.getInputVolume();
+const outputVol = conversation.getOutputVolume();
+
+// Frequency data (Uint8Array, 시각화용)
+const inputFreq = conversation.getInputByteFrequencyData();
+const outputFreq = conversation.getOutputByteFrequencyData();
 ```
 
-각 메시지는 다음 구조를 가집니다:
+#### 디바이스 전환
 
 ```tsx
-type VoxMessage = {
-  id?: string;
-  name: "agent" | "user" | "tool";
-  message?: string;
-  timestamp: number;
-  isFinal?: boolean;
-  tool?: FunctionToolsExecuted; // 에이전트가 실행한 함수 도구
-};
+// 입력 디바이스 변경
+await conversation.changeInputDevice({ inputDeviceId: "device-id" });
+
+// 출력 디바이스 변경
+await conversation.changeOutputDevice({ outputDeviceId: "device-id" });
 ```
 
-## 예제
+디바이스 목록은 [`navigator.mediaDevices.enumerateDevices()`](https://developer.mozilla.org/docs/Web/API/MediaDevices/enumerateDevices)로 조회.
 
-### 기본 사용법
+## Dynamic Variables / Metadata
 
 ```tsx
-import React, { useState } from "react";
-import { useVoxAI } from "@vox-ai/react";
-
-function VoiceAssistant() {
-  const [isConnected, setIsConnected] = useState(false);
-  const { connect, disconnect, state, messages, send } = useVoxAI({
-    onConnect: () => setIsConnected(true),
-    onDisconnect: () => setIsConnected(false),
-    onError: (error) => console.error("오류:", error),
-  });
-
-  const handleConnect = () => {
-    connect({
-      agentId: "your-agent-id",
-      apiKey: "your-api-key",
-    });
-  };
-
-  const handleSendMessage = () => {
-    send({ message: "안녕하세요, 도움이 필요합니다." });
-  };
-
-  return (
-    <div>
-      <h1>Vox.ai 음성 비서</h1>
-
-      <div>
-        <button onClick={handleConnect} disabled={isConnected}>
-          연결
-        </button>
-        <button onClick={disconnect} disabled={!isConnected}>
-          연결 해제
-        </button>
-        <button onClick={handleSendMessage} disabled={!isConnected}>
-          메시지 전송
-        </button>
-      </div>
-
-      <div>
-        <p>현재 상태: {state}</p>
-      </div>
-
-      <div>
-        <h2>대화</h2>
-        <ul>
-          {messages.map((msg, index) => (
-            <li key={msg.id || index}>
-              <strong>{msg.name}:</strong> {msg.message}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </div>
-  );
-}
+const conversationId = await conversation.startSession({
+  agentId: "YOUR_AGENT_ID",
+  apiKey: "YOUR_API_KEY",
+  agentVersion: "production",
+  dynamicVariables: {
+    userName: "홍길동",
+    userType: "premium",
+    accountBalance: 50000,
+  },
+  metadata: {
+    sessionId: "sess_abc123",
+    source: "mobile-app",
+  },
+});
 ```
 
-### 오디오 웨이브폼 시각화 예제
-
-```tsx
-import React, { useState, useEffect } from "react";
-import { useVoxAI } from "@vox-ai/react";
+- `dynamicVariables` — Agent prompt에서 `{{userName}}` 형식으로 참조
+- `metadata` — Outbound webhook과 call log에 포함
 
-function WaveformVisualizer() {
-  const { audioWaveform, state } = useVoxAI();
-  const [waveformData, setWaveformData] = useState([]);
+## Text Only
 
-  // 웨이브폼 데이터를 정기적으로 업데이트
-  useEffect(() => {
-    if (state === "disconnected") return;
+```tsx
+const conversation = useConversation({
+  textOnly: true,
+});
 
-    const intervalId = setInterval(() => {
-      // 에이전트 오디오 웨이브폼 데이터 가져오기
-      const data = audioWaveform({ speaker: "agent", barCount: 30 });
-      setWaveformData(data);
-    }, 50);
+await conversation.startSession({
+  agentId: "YOUR_AGENT_ID",
+  apiKey: "YOUR_API_KEY",
+});
 
-    return () => clearInterval(intervalId);
-  }, [audioWaveform, state]);
+await conversation.sendUserMessage("텍스트로만 테스트할게요");
+```
 
-  return (
-    <div className="waveform-container">
-      {waveformData.map((value, index) => (
-        <div
-          key={index}
-          className="waveform-bar"
-          style={{
-            height: `${value * 100}%`,
-            width: "10px",
-            backgroundColor: "#3498db",
-            margin: "0 2px",
-          }}
-        />
-      ))}
-    </div>
-  );
-}
+- text-only session은 microphone 권한을 요청하지 않음
+- 에이전트 응답은 LiveKit text stream으로 수신됨
+- audio 전용 API는 안전한 no-op 또는 zero-value를 반환
+
+## Export 타입
+
+```ts
+import type {
+  ConversationMessage,
+  ConversationMode,
+  ConversationSource,
+  ConversationStatus,
+  InputDeviceConfig,
+  OutputDeviceConfig,
+  SetVolumeParams,
+  StartConversationOptions,
+  UseConversationOptions,
+} from "@vox-ai/react";
 ```
 
-## 기여하기
+## JS SDK와의 관계
+
+| JS SDK (`@vox-ai/client`) | React SDK (`@vox-ai/react`) |
+|---------------------------|----------------------------|
+| `Conversation.startSession(opts)` | `conversation.startSession(opts)` |
+| `getMessages()` | `messages` / `getMessages()` |
+| `getStatus()` | `status` (React state) |
+| `getMode()` | `isSpeaking` (React state) |
+| `getMicMuted()` | `micMuted` (React state) |
+| 나머지 method/callback | 동일 |
 
-변경 사항을 제안하기 전에 먼저 이슈를 생성해 주세요. 모든 기여를 환영합니다!
+## 참고
 
-Pull Request를 제출함으로써, 귀하는 코드가 MIT 라이센스 하에 이 라이브러리에 통합되는 것에 동의하는 것입니다.
+- `useVoxAI`는 deprecated — `useConversation` 사용 권장
+- 인증은 `apiKey` 직접 전달 방식
+- 내부 연결은 LiveKit WebRTC 기반
+- 브라우저별 audio device 제약이 있을 수 있음

package/dist/hooks/index.d.ts

@@ -1 +1 @@
-export * from "./useVoxAI";
+export * from "./useConversation";

package/dist/hooks/useConversation.d.ts

@@ -0,0 +1,28 @@
+import { type ConversationMessage, type ConversationMode, type ConversationSource, type ConversationStatus, type InputDeviceConfig, type OutputDeviceConfig, type SetVolumeParams, type StartSessionOptions } from "@vox-ai/client";
+type HookCallbacks = Pick<StartSessionOptions, "onConnect" | "onDisconnect" | "onError" | "onMessage" | "onStatusChange" | "onModeChange">;
+export type UseConversationOptions = HookCallbacks & {
+    textOnly?: boolean;
+};
+export type StartConversationOptions = Omit<StartSessionOptions, keyof HookCallbacks>;
+export declare function useConversation(options?: UseConversationOptions): {
+    startSession: (params: StartConversationOptions) => Promise<string>;
+    endSession: () => Promise<void>;
+    getId: () => string | undefined;
+    getMessages: () => ConversationMessage[];
+    setVolume: (volume: {
+        volume: number;
+    }) => void;
+    setMicMuted: (isMuted: boolean) => Promise<void>;
+    sendUserMessage: (text: string) => Promise<void>;
+    changeInputDevice: (config: InputDeviceConfig) => Promise<boolean>;
+    changeOutputDevice: (config: OutputDeviceConfig) => Promise<boolean>;
+    getInputVolume: () => number;
+    getOutputVolume: () => number;
+    getInputByteFrequencyData: () => Uint8Array<ArrayBufferLike> | undefined;
+    getOutputByteFrequencyData: () => Uint8Array<ArrayBufferLike> | undefined;
+    messages: ConversationMessage[];
+    status: ConversationStatus;
+    isSpeaking: boolean;
+    micMuted: boolean;
+};
+export type { ConversationMessage, ConversationMode, ConversationSource, ConversationStatus, InputDeviceConfig, OutputDeviceConfig, SetVolumeParams, };

package/dist/index.d.ts

@@ -1,6 +1,2 @@
-/**
- * @voxai/react
- * React UI component library for vox.ai
- */
-export { useVoxAI } from "./hooks";
-export type { VoxAgentState, VoxMessage, VoxAIOptions, ConnectParams, FunctionToolsExecuted, FunctionCallInfo, FunctionCallResult, } from "./hooks";
+export { useConversation } from "./hooks";
+export type { ConversationMessage, ConversationMode, ConversationSource, ConversationStatus, InputDeviceConfig, OutputDeviceConfig, SetVolumeParams, StartConversationOptions, UseConversationOptions, } from "./hooks";

package/dist/lib.cjs

@@ -1,2 +1,2 @@
-var e=require("react/jsx-runtime"),t=require("@livekit/components-react"),n=require("livekit-client"),r=require("react"),o=require("react-dom/client");function a(e){let{port:o,initialConfig:a}=e;const{agent:s,state:c}=t.useVoiceAssistant(),{send:i}=t.useChat(),[u,l]=r.useState({speaker:a.speaker||"agent",barCount:a.barCount,updateInterval:a.updateInterval}),p=t.useParticipantTracks([n.Track.Source.Microphone],null==s?void 0:s.identity)[0],d=t.useTrackTranscription(p),m=t.useAudioWaveform(p,{barCount:"agent"===u.speaker?u.barCount:120,updateInterval:"agent"===u.speaker?u.updateInterval:20}),f=t.useLocalParticipant(),g=t.useTrackTranscription({publication:f.microphoneTrack,source:n.Track.Source.Microphone,participant:f.localParticipant}),v=t.useParticipantTracks([n.Track.Source.Microphone],f.localParticipant.identity)[0],y=t.useAudioWaveform(v,{barCount:"user"===u.speaker?u.barCount:120,updateInterval:"user"===u.speaker?u.updateInterval:20});return r.useEffect(()=>{o&&m&&m.bars&&o.postMessage({type:"waveform_update",waveformData:m.bars,speaker:"agent"})},[o,m]),r.useEffect(()=>{o&&y&&y.bars&&o.postMessage({type:"waveform_update",waveformData:y.bars,speaker:"user"})},[o,y]),r.useEffect(()=>{if(!o)return;const e=e=>{const t=e.data;if("waveform_config"===t.type&&t.config)"number"==typeof t.config.barCount&&"number"==typeof t.config.updateInterval&&l(t.config);else if("send_text"===t.type)i?i(t.text):console.error("sendChat function is not available");else if("send_dtmf"===t.type)f.localParticipant?f.localParticipant.publishDtmf(101,t.digit):console.error("Local participant is not available for DTMF");else if("toggle_mic"===t.type&&"boolean"==typeof t.enabled)f.localParticipant?f.localParticipant.setMicrophoneEnabled(t.enabled).catch(e=>{console.error("Failed to toggle microphone:",e)}):console.error("Local participant is not available for mic toggle");else if("set_volume"===t.type&&"number"==typeof t.volume)if(s)try{s.setVolume(t.volume),console.log("Set agent volume to "+t.volume)}catch(e){console.error("Failed to set agent volume:",e)}else console.error("Agent is not available for volume control")};return o.start(),o.addEventListener("message",e),()=>{o.removeEventListener("message",e)}},[o,i,f,s]),r.useEffect(()=>{o&&o.postMessage({type:"state_update",state:c})},[c,o]),r.useEffect(()=>{if(o&&d.segments.length>0){const e=d.segments.map(e=>({id:e.id,text:e.text,isFinal:e.final,timestamp:Date.now(),speaker:"agent"}));o.postMessage({type:"transcription_update",transcriptions:e})}},[d.segments,o]),r.useEffect(()=>{if(o&&g.segments.length>0){const e=g.segments.map(e=>({id:e.id,text:e.text,isFinal:e.final,timestamp:Date.now(),speaker:"user"}));o.postMessage({type:"transcription_update",transcriptions:e})}},[g.segments,o]),t.useDataChannel("function_tools_executed",e=>{if(!o)return;const t=new TextDecoder,n=e.payload instanceof Uint8Array?t.decode(e.payload):String(e.payload);let r;try{r=JSON.parse(n),o.postMessage({type:"function_tools_executed",tool:r})}catch(e){console.error("Failed to parse function call log:",e)}}),null}exports.useVoxAI=function(n){void 0===n&&(n={});const[s,c]=r.useState(null),[i,u]=r.useState("disconnected"),l=r.useRef(Date.now()),[p,d]=r.useState(new Map),[m,f]=r.useState([]),g=r.useRef(""),v=r.useRef(new Set),y=r.useRef(null),b=r.useRef(null),h=r.useRef(null),k=r.useRef(null),[w,C]=r.useState({agent:[],user:[]}),M=r.useRef(null),[E,_]=r.useState(!0);r.useEffect(()=>{const e=Array.from(p.values()).sort((e,t)=>e.timestamp-t.timestamp),t=JSON.stringify(e);t!==g.current&&(g.current=t,f(e),n.onMessage&&e.filter(e=>e.isFinal&&e.id&&!v.current.has(e.id)).forEach(e=>{e.id&&(v.current.add(e.id),null==n.onMessage||n.onMessage(e))}))},[p,n.onMessage]),r.useEffect(()=>{const e=new MessageChannel;return e.port1.onmessage=e=>{const t=e.data;if("state_update"===t.type)u(t.state);else if("transcription_update"===t.type)x(t.transcriptions);else if("waveform_update"===t.type&&t.speaker)C(e=>({...e,[t.speaker]:t.waveformData}));else if("function_tools_executed"===t.type&&t.tool){const e="function-calls-"+Date.now();d(n=>{const r=new Map(n);return r.set(e,{id:e,name:"tool",tool:t.tool,timestamp:Date.now(),isFinal:!0}),r})}},e.port1.start(),h.current=e,()=>{var e,t;null==(e=h.current)||e.port1.close(),null==(t=h.current)||t.port2.close(),h.current=null}},[]);const x=r.useCallback(e=>{d(t=>{const n=new Map(t);return e.forEach(e=>{var r;if(e.timestamp<l.current)return;const o="agent"===e.speaker?"agent":"user",a=(null==(r=t.get(e.id))?void 0:r.timestamp)||e.timestamp;n.set(e.id,{id:e.id,name:o,message:e.text,timestamp:a,isFinal:e.isFinal})}),n})},[]);r.useEffect(()=>{const e=document.createElement("div");return e.style.display="none",document.body.appendChild(e),y.current=e,b.current=o.createRoot(e),()=>{b.current&&b.current.unmount(),y.current&&document.body.removeChild(y.current)}},[]);const D=r.useCallback(function(e){let{agentId:t,agentVersion:r,apiKey:o,dynamicVariables:a,metadata:s}=e;try{return Promise.resolve(function(e,p){try{var d=function(){if("disconnected"!==i){const e="Connection attempt rejected: Already in a connection state ("+i+")";return console.warn(e),n.onError&&n.onError(new Error(e)),Promise.reject(new Error(e))}return l.current=Date.now(),u("connecting"),Promise.resolve(fetch("https://www.tryvox.co/api/agent/sdk",{method:"POST",headers:{Authorization:"Bearer "+o,"Content-Type":"application/json"},body:JSON.stringify({agent_id:t,agent_version:r||"current",metadata:{runtime_context:{source:{type:"react-sdk",version:"0.5.0"}},call_web:{dynamic_variables:a||{},metadata:s||{}}}})})).then(function(e){function t(t){return Promise.resolve(e.json()).then(function(e){c(e),n.onConnect&&n.onConnect()})}const r=function(){if(!e.ok)return Promise.resolve(e.text()).then(function(t){throw new Error("Connection failed ("+e.status+"): "+t)})}();return r&&r.then?r.then(t):t()})}()}catch(e){return p(e)}return d&&d.then?d.then(void 0,p):d}(0,function(e){c(null),d(new Map),f([]),u("disconnected");const t=e instanceof Error?e:new Error(String(e));n.onError&&n.onError(t)}))}catch(e){return Promise.reject(e)}},[n,i]),S=r.useCallback(()=>{l.current=Date.now(),c(null),d(new Map),f([]),u("disconnected"),n.onDisconnect&&n.onDisconnect()},[n]),P=r.useCallback(e=>{let{message:t,digit:n}=e;if("disconnected"!==i){if(t){const e="user-text-"+Date.now();d(n=>{const r=new Map(n);return r.set(e,{id:e,name:"user",message:t,timestamp:Date.now(),isFinal:!0}),r}),h.current?h.current.port1.postMessage({type:"send_text",text:t}):console.error("No message channel available to send message")}void 0!==n&&(h.current?h.current.port1.postMessage({type:"send_dtmf",digit:n}):console.error("No message channel available to send DTMF"))}else console.warn("Cannot send message: Not connected to a conversation")},[i]),T=r.useCallback(e=>{let{speaker:t="agent",barCount:n=10,updateInterval:r=20}=e;M.current={speaker:t,barCount:n,updateInterval:r},h.current&&h.current.port1.postMessage({type:"waveform_config",config:{speaker:t,barCount:n,updateInterval:r}});const o=w[t]||[];return o.length>0?o.slice(0,n):Array(n).fill(0)},[w]),F=r.useCallback(e=>{_(e),h.current?h.current.port1.postMessage({type:"toggle_mic",enabled:e}):console.error("No message channel available to toggle microphone")},[]),I=r.useCallback(e=>{const t=Math.min(Math.max(e,0),1);h.current?h.current.port1.postMessage({type:"set_volume",volume:t}):console.error("No message channel available to set volume")},[]);return r.useEffect(()=>{b.current&&(s?(k.current||(h.current&&h.current.port2.start(),k.current=e.jsxs(t.LiveKitRoom,{serverUrl:s.serverUrl,token:s.participantToken,audio:!0,video:!1,connect:!0,onDisconnected:S,onError:e=>{console.error("LiveKit connection error:",e),S(),n.onError&&n.onError(new Error("LiveKit connection error: "+e.message))},children:[e.jsx(t.RoomAudioRenderer,{}),h.current&&e.jsx(a,{port:h.current.port2,initialConfig:M.current||{barCount:10,updateInterval:20}})]})),b.current.render(k.current)):(k.current=null,b.current.render(e.jsx(e.Fragment,{}))))},[s,S,n.onError]),{connect:D,disconnect:S,state:i,messages:m,send:P,audioWaveform:T,toggleMic:F,setVolume:I}};
+var e=require("@vox-ai/client"),t=require("react");exports.useConversation=function(n){void 0===n&&(n={});const r=t.useRef(null),u=t.useRef(new Map),[s,c]=t.useState("disconnected"),[o,a]=t.useState(!1),[l,i]=t.useState(!1),[g,v]=t.useState([]),d=t.useCallback(function(t){try{function s(){var s;return u.current=new Map,v([]),Promise.resolve(e.Conversation.startSession({...t,textOnly:null!=(s=t.textOnly)?s:n.textOnly,onConnect:()=>{c("connected"),null==n.onConnect||n.onConnect()},onDisconnect:()=>{c("disconnected"),a(!1),null==n.onDisconnect||n.onDisconnect()},onError:e=>{null==n.onError||n.onError(e)},onMessage:e=>{u.current.set(e.id,e),v(Array.from(u.current.values()).sort((e,t)=>e.timestamp-t.timestamp)),null==n.onMessage||n.onMessage(e)},onStatusChange:e=>{c(e),null==n.onStatusChange||n.onStatusChange(e)},onModeChange:e=>{a("speaking"===e),null==n.onModeChange||n.onModeChange(e)}})).then(function(e){var t;return r.current=e,c(e.getStatus()),i(e.getMicMuted()),a("speaking"===e.getMode()),null!=(t=e.getId())?t:""})}const o=function(){if(r.current)return Promise.resolve(r.current.endSession()).then(function(){r.current=null})}();return Promise.resolve(o&&o.then?o.then(s):s())}catch(l){return Promise.reject(l)}},[n]),m=t.useCallback(function(){try{return r.current?Promise.resolve(r.current.endSession()).then(function(){r.current=null,c("disconnected"),a(!1)}):Promise.resolve()}catch(e){return Promise.reject(e)}},[]),C=t.useCallback(()=>{var e;return null==(e=r.current)?void 0:e.getId()},[]),h=t.useCallback(()=>{var e,t;return null!=(e=null==(t=r.current)?void 0:t.getMessages())?e:g},[g]),M=t.useCallback(e=>{var t;null==(t=r.current)||t.setVolume(e)},[]),p=t.useCallback(function(e){try{return r.current?Promise.resolve(r.current.setMicMuted(e)).then(function(){i(r.current.getMicMuted())}):Promise.resolve()}catch(e){return Promise.reject(e)}},[]),f=t.useCallback(function(e){try{return r.current?Promise.resolve(r.current.sendUserMessage(e)).then(function(){}):Promise.resolve()}catch(e){return Promise.reject(e)}},[]),y=t.useCallback(function(e){try{return Promise.resolve(!!r.current&&r.current.changeInputDevice(e))}catch(e){return Promise.reject(e)}},[]),P=t.useCallback(function(e){try{return Promise.resolve(!!r.current&&r.current.changeOutputDevice(e))}catch(e){return Promise.reject(e)}},[]),k=t.useCallback(()=>{var e,t;return null!=(e=null==(t=r.current)?void 0:t.getInputVolume())?e:0},[]),S=t.useCallback(()=>{var e,t;return null!=(e=null==(t=r.current)?void 0:t.getOutputVolume())?e:0},[]),b=t.useCallback(()=>{var e;return null==(e=r.current)?void 0:e.getInputByteFrequencyData()},[]),D=t.useCallback(()=>{var e;return null==(e=r.current)?void 0:e.getOutputByteFrequencyData()},[]);return t.useMemo(()=>({startSession:d,endSession:m,getId:C,getMessages:h,setVolume:M,setMicMuted:p,sendUserMessage:f,changeInputDevice:y,changeOutputDevice:P,getInputVolume:k,getOutputVolume:S,getInputByteFrequencyData:b,getOutputByteFrequencyData:D,messages:g,status:s,isSpeaking:o,micMuted:l}),[d,m,C,h,M,p,f,y,P,k,S,b,D,g,s,o,l])};
 //# sourceMappingURL=lib.cjs.map