@elevenlabs/react-native 0.1.1 → 0.2.0

package/dist/types.d.ts

@@ -11,15 +11,6 @@ export type ConversationStatus = "disconnected" | "connecting" | "connected";
  * Language support
  */
 export type Language = "en" | "ja" | "zh" | "de" | "hi" | "fr" | "ko" | "pt" | "pt-br" | "it" | "es" | "id" | "nl" | "tr" | "pl" | "sv" | "bg" | "ro" | "ar" | "cs" | "el" | "fi" | "ms" | "da" | "ta" | "uk" | "ru" | "hu" | "hr" | "sk" | "no" | "vi";
-/**
- * Client tool call event structure
- */
-export type ClientToolCallEvent = {
-    tool_name: string;
-    tool_call_id: string;
-    parameters: unknown;
-    expects_response: boolean;
-};
 /**
  * Client tools configuration
  */
@@ -31,6 +22,7 @@ export type ClientToolsConfig = {
  */
 export type ConversationOptions = {
     serverUrl?: string;
+    tokenFetchUrl?: string;
     clientTools?: Record<string, (parameters: unknown) => Promise<string | number | undefined> | string | number | undefined>;
 } & Partial<Callbacks>;
 /**
@@ -44,7 +36,7 @@ export type Callbacks = {
     onDisconnect?: (details: string) => void;
     onError?: (message: string, context?: Record<string, unknown>) => void;
     onMessage?: (props: {
-        message: string;
+        message: ConversationEvent;
         source: Role;
     }) => void;
     onModeChange?: (prop: {
@@ -61,6 +53,7 @@ export type Callbacks = {
 export type ConversationConfig = {
     agentId?: string;
     conversationToken?: string;
+    tokenFetchUrl?: string;
     overrides?: {
         agent?: {
             prompt?: {
@@ -84,6 +77,102 @@ export type ConversationConfig = {
     dynamicVariables?: Record<string, string | number | boolean>;
     userId?: string;
 };
+export type UserTranscriptionEvent = {
+    type: "user_transcript";
+    user_transcription_event: {
+        user_transcript: string;
+    };
+};
+export type AgentResponseEvent = {
+    type: "agent_response";
+    agent_response_event: {
+        agent_response: string;
+    };
+};
+export type AgentResponseCorrectionEvent = {
+    type: "agent_response_correction";
+    agent_response_correction_event: {
+        original_agent_response: string;
+        corrected_agent_response: string;
+    };
+};
+export type AgentAudioEvent = {
+    type: "audio";
+    audio_event: {
+        audio_base_64: string;
+        event_id: number;
+    };
+};
+export type InterruptionEvent = {
+    type: "interruption";
+    interruption_event: {
+        event_id: number;
+    };
+};
+export type InternalTentativeAgentResponseEvent = {
+    type: "internal_tentative_agent_response";
+    tentative_agent_response_internal_event: {
+        tentative_agent_response: string;
+    };
+};
+export type ConfigEvent = {
+    type: "conversation_initiation_metadata";
+    conversation_initiation_metadata_event: {
+        conversation_id: string;
+        agent_output_audio_format: string;
+        user_input_audio_format?: string;
+    };
+};
+export type PingEvent = {
+    type: "ping";
+    ping_event: {
+        event_id: number;
+        ping_ms?: number;
+    };
+};
+export type ClientToolCallEvent = {
+    type: "client_tool_call";
+    client_tool_call: {
+        tool_name: string;
+        tool_call_id: string;
+        parameters: any;
+        expects_response: boolean;
+    };
+};
+export type PongEvent = {
+    type: "pong";
+    event_id: number;
+};
+export type UserAudioEvent = {
+    user_audio_chunk: string;
+};
+export type UserFeedbackEvent = {
+    type: "feedback";
+    score: "like" | "dislike";
+    event_id: number;
+};
+export type ClientToolResultEvent = {
+    type: "client_tool_result";
+    tool_call_id: string;
+    result: any;
+    is_error: boolean;
+};
+export type ContextualUpdateEvent = {
+    type: "contextual_update";
+    text: string;
+};
+export type UserMessageEvent = {
+    type: "user_message";
+    text: string;
+};
+export type UserActivityEvent = {
+    type: "user_activity";
+};
+export type MCPToolApprovalResultEvent = {
+    type: "mcp_tool_approval_result";
+    tool_call_id: string;
+    is_approved: boolean;
+};
 export type InitiationClientDataEvent = {
     type: "conversation_initiation_client_data";
     conversation_config_override?: {
@@ -109,3 +198,4 @@ export type InitiationClientDataEvent = {
     dynamic_variables?: Record<string, string | number | boolean>;
     user_id?: string;
 };
+export type ConversationEvent = UserTranscriptionEvent | AgentResponseEvent | AgentResponseCorrectionEvent | AgentAudioEvent | InterruptionEvent | InternalTentativeAgentResponseEvent | ConfigEvent | PingEvent | ClientToolCallEvent;

package/dist/utils/tokenUtils.d.ts

@@ -1,2 +1,2 @@
 export declare const extractRoomIdFromToken: (token: string) => string;
-export declare const getConversationToken: (agentId: string) => Promise<string>;
+export declare const getConversationToken: (agentId: string, tokenFetchUrl?: string) => Promise<string>;

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const PACKAGE_VERSION = "0.1.1";
+export declare const PACKAGE_VERSION = "0.2.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elevenlabs/react-native",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "ElevenLabs React Native SDK for Conversational AI",
   "main": "./dist/lib.js",
   "module": "./dist/lib.module.js",

package/src/ElevenLabsProvider.tsx

@@ -13,9 +13,10 @@ import { LiveKitRoomWrapper } from './components/LiveKitRoomWrapper';
 
 interface ConversationOptions extends Callbacks, Partial<ClientToolsConfig> {
   serverUrl?: string;
+  tokenFetchUrl?: string;
 }
 
-interface Conversation {
+export interface Conversation {
   startSession: (config: ConversationConfig) => Promise<void>;
   endSession: () => Promise<void>;
   status: ConversationStatus;
@@ -33,9 +34,11 @@ interface ElevenLabsContextType {
   conversation: Conversation;
   callbacksRef: { current: Callbacks };
   serverUrl: string;
+  tokenFetchUrl?: string;
   clientTools: ClientToolsConfig['clientTools'];
   setCallbacks: (callbacks: Callbacks) => void;
   setServerUrl: (url: string) => void;
+  setTokenFetchUrl: (url: string) => void;
   setClientTools: (tools: ClientToolsConfig['clientTools']) => void;
 }
 
@@ -47,7 +50,7 @@ export const useConversation = (options: ConversationOptions = {}): Conversation
     throw new Error('useConversation must be used within ElevenLabsProvider');
   }
 
-  const { serverUrl, clientTools, ...callbacks } = options;
+  const { serverUrl, tokenFetchUrl, clientTools, ...callbacks } = options;
 
   React.useEffect(() => {
     if (serverUrl) {
@@ -55,6 +58,12 @@ export const useConversation = (options: ConversationOptions = {}): Conversation
     }
   }, [context, serverUrl]);
 
+  React.useEffect(() => {
+    if (tokenFetchUrl) {
+      context.setTokenFetchUrl(tokenFetchUrl);
+    }
+  }, [context, tokenFetchUrl]);
+
   if (clientTools) {
     context.setClientTools(clientTools);
   }
@@ -77,6 +86,7 @@ export const ElevenLabsProvider: React.FC<ElevenLabsProviderProps> = ({ children
   const [connect, setConnect] = useState(false);
   const [status, setStatus] = useState<ConversationStatus>('disconnected');
   const [serverUrl, setServerUrl] = useState(DEFAULT_SERVER_URL);
+  const [tokenFetchUrl, setTokenFetchUrl] = useState<string | undefined>(undefined);
   const [roomId, setRoomId] = useState<string>('');
   const [isSpeaking, setIsSpeaking] = useState(false);
   const [canSendFeedback, setCanSendFeedback] = useState(false);
@@ -109,7 +119,7 @@ export const ElevenLabsProvider: React.FC<ElevenLabsProviderProps> = ({ children
     overrides,
     customLlmExtraBody,
     dynamicVariables,
-  } = useConversationSession(callbacksRef, setStatus, setConnect, setToken, setRoomId);
+  } = useConversationSession(callbacksRef, setStatus, setConnect, setToken, setRoomId, tokenFetchUrl);
 
   const {
     roomConnected,
@@ -230,9 +240,11 @@ export const ElevenLabsProvider: React.FC<ElevenLabsProviderProps> = ({ children
     conversation,
     callbacksRef,
     serverUrl,
+    tokenFetchUrl,
     clientTools: clientToolsRef.current,
     setCallbacks,
     setServerUrl,
+    setTokenFetchUrl: setTokenFetchUrl,
     setClientTools,
   };
 

package/src/components/MessageHandler.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useLocalParticipant, useDataChannel } from '@livekit/react-native';
 import type { LocalParticipant } from 'livekit-client';
-import type { Callbacks, ClientToolsConfig, ClientToolCallEvent } from '../types';
+import type { Callbacks, ClientToolsConfig, ClientToolCallEvent, ConversationEvent } from '../types';
 import React from 'react';
 
 interface MessageHandlerProps {
@@ -13,6 +13,10 @@ interface MessageHandlerProps {
   updateCurrentEventId?: (eventId: number) => void;
 }
 
+export function isValidEvent(event: any): event is ConversationEvent {
+  return !!event.type;
+}
+
 export const MessageHandler = ({
   onReady,
   isConnected,
@@ -36,13 +40,13 @@ export const MessageHandler = ({
     if (
       Object.prototype.hasOwnProperty.call(
         clientTools,
-        clientToolCall.tool_name
+        clientToolCall.client_tool_call.tool_name
       )
     ) {
       try {
         const result =
-          (await clientTools[clientToolCall.tool_name](
-            clientToolCall.parameters
+          (await clientTools[clientToolCall.client_tool_call.tool_name](
+            clientToolCall.client_tool_call.parameters
           )) ?? "Client tool execution successful."; // default client-tool call response
 
         // The API expects result to be a string, so we need to convert it if it's not already a string
@@ -51,18 +55,18 @@ export const MessageHandler = ({
 
         sendMessage({
           type: "client_tool_result",
-          tool_call_id: clientToolCall.tool_call_id,
+          tool_call_id: clientToolCall.client_tool_call.tool_call_id,
           result: formattedResult,
           is_error: false,
         });
       } catch (e) {
         const errorMessage = `Client tool execution failed with following error: ${(e as Error)?.message}`;
         callbacks.onError?.(errorMessage, {
-          clientToolName: clientToolCall.tool_name,
+          clientToolName: clientToolCall.client_tool_call.tool_name,
         });
         sendMessage({
           type: "client_tool_result",
-          tool_call_id: clientToolCall.tool_call_id,
+          tool_call_id: clientToolCall.client_tool_call.tool_call_id,
           result: `Client tool execution failed: ${(e as Error)?.message}`,
           is_error: true,
         });
@@ -73,13 +77,13 @@ export const MessageHandler = ({
         return;
       }
 
-      const errorMessage = `Client tool with name ${clientToolCall.tool_name} is not defined on client`;
+      const errorMessage = `Client tool with name ${clientToolCall.client_tool_call.tool_name} is not defined on client`;
       callbacks.onError?.(errorMessage, {
-        clientToolName: clientToolCall.tool_name,
+        clientToolName: clientToolCall.client_tool_call.tool_name,
       });
       sendMessage({
         type: "client_tool_result",
-        tool_call_id: clientToolCall.tool_call_id,
+        tool_call_id: clientToolCall.client_tool_call.tool_call_id,
         result: errorMessage,
         is_error: true,
       });
@@ -90,6 +94,14 @@ export const MessageHandler = ({
     const decoder = new TextDecoder();
     const message = JSON.parse(decoder.decode(msg.payload));
 
+    if (!isValidEvent(message)) {
+      callbacks.onDebug?.({
+        type: "invalid_event",
+        message,
+      });
+      return;
+    }
+
     callbacks.onMessage?.({
       message,
       source: msg.from?.isAgent ? 'ai' : 'user',
@@ -115,7 +127,7 @@ export const MessageHandler = ({
         });
         break;
       case "client_tool_call":
-        handleClientToolCall(message.client_tool_call);
+        handleClientToolCall(message);
         break;
       default:
         callbacks.onDebug?.(message);

package/src/hooks/useConversationSession.ts

@@ -14,7 +14,8 @@ export const useConversationSession = (
   setStatus: (status: ConversationStatus) => void,
   setConnect: (connect: boolean) => void,
   setToken: (token: string) => void,
-  setRoomId: (roomId: string) => void
+  setRoomId: (roomId: string) => void,
+  tokenFetchUrl?: string
 ) => {
   const [overrides, setOverrides] = useState<ConversationConfig["overrides"]>(
     {}
@@ -44,7 +45,12 @@ export const useConversationSession = (
             "Getting conversation token for agentId:",
             config.agentId
           );
-          conversationToken = await getConversationToken(config.agentId);
+          // Use tokenFetchUrl from config first, then from hook parameter, then default
+          const urlToUse = config.tokenFetchUrl || tokenFetchUrl;
+          conversationToken = await getConversationToken(
+            config.agentId,
+            urlToUse
+          );
         } else {
           throw new Error("Either conversationToken or agentId is required");
         }
@@ -62,7 +68,7 @@ export const useConversationSession = (
         throw error;
       }
     },
-    [callbacksRef, setStatus, setConnect, setToken, setRoomId]
+    [callbacksRef, setStatus, setConnect, setToken, setRoomId, tokenFetchUrl]
   );
 
   const endSession = useCallback(async () => {

package/src/index.ts

@@ -1,4 +1,8 @@
-export { ElevenLabsProvider, useConversation } from "./ElevenLabsProvider";
+export {
+  ElevenLabsProvider,
+  useConversation,
+  type Conversation,
+} from "./ElevenLabsProvider";
 
 export type {
   ConversationStatus,
@@ -6,4 +10,6 @@ export type {
   Role,
   Callbacks,
   ConversationOptions,
+  ConversationConfig,
+  ConversationEvent,
 } from "./types";

package/src/types.ts

@@ -47,16 +47,6 @@ export type Language =
   | "no"
   | "vi";
 
-/**
- * Client tool call event structure
- */
-export type ClientToolCallEvent = {
-  tool_name: string;
-  tool_call_id: string;
-  parameters: unknown;
-  expects_response: boolean;
-};
-
 /**
  * Client tools configuration
  */
@@ -74,6 +64,7 @@ export type ClientToolsConfig = {
  */
 export type ConversationOptions = {
   serverUrl?: string;
+  tokenFetchUrl?: string;
   clientTools?: Record<
     string,
     (
@@ -91,7 +82,7 @@ export type Callbacks = {
   onDebug?: (props: unknown) => void;
   onDisconnect?: (details: string) => void;
   onError?: (message: string, context?: Record<string, unknown>) => void;
-  onMessage?: (props: { message: string; source: Role }) => void;
+  onMessage?: (props: { message: ConversationEvent; source: Role }) => void;
   onModeChange?: (prop: { mode: Mode }) => void;
   onStatusChange?: (prop: { status: ConversationStatus }) => void;
   onCanSendFeedbackChange?: (prop: { canSendFeedback: boolean }) => void;
@@ -101,6 +92,7 @@ export type Callbacks = {
 export type ConversationConfig = {
   agentId?: string;
   conversationToken?: string;
+  tokenFetchUrl?: string;
   overrides?: {
     agent?: {
       prompt?: {
@@ -125,6 +117,114 @@ export type ConversationConfig = {
   userId?: string;
 };
 
+export type UserTranscriptionEvent = {
+  type: "user_transcript";
+  user_transcription_event: { user_transcript: string };
+};
+
+export type AgentResponseEvent = {
+  type: "agent_response";
+  agent_response_event: { agent_response: string };
+};
+
+export type AgentResponseCorrectionEvent = {
+  type: "agent_response_correction";
+  agent_response_correction_event: {
+    original_agent_response: string;
+    corrected_agent_response: string;
+  };
+};
+export type AgentAudioEvent = {
+  type: "audio";
+  audio_event: {
+    audio_base_64: string;
+    event_id: number;
+  };
+};
+
+export type InterruptionEvent = {
+  type: "interruption";
+  interruption_event: {
+    event_id: number;
+  };
+};
+
+export type InternalTentativeAgentResponseEvent = {
+  type: "internal_tentative_agent_response";
+  tentative_agent_response_internal_event: {
+    tentative_agent_response: string;
+  };
+};
+
+export type ConfigEvent = {
+  type: "conversation_initiation_metadata";
+  conversation_initiation_metadata_event: {
+    conversation_id: string;
+    agent_output_audio_format: string;
+    user_input_audio_format?: string;
+  };
+};
+
+export type PingEvent = {
+  type: "ping";
+  ping_event: {
+    event_id: number;
+    ping_ms?: number;
+  };
+};
+
+export type ClientToolCallEvent = {
+  type: "client_tool_call";
+  client_tool_call: {
+    tool_name: string;
+    tool_call_id: string;
+    parameters: any;
+    expects_response: boolean;
+  };
+};
+
+export type PongEvent = {
+  type: "pong";
+  event_id: number;
+};
+
+export type UserAudioEvent = {
+  user_audio_chunk: string;
+};
+
+export type UserFeedbackEvent = {
+  type: "feedback";
+  score: "like" | "dislike";
+  event_id: number;
+};
+
+export type ClientToolResultEvent = {
+  type: "client_tool_result";
+  tool_call_id: string;
+  result: any;
+  is_error: boolean;
+};
+
+export type ContextualUpdateEvent = {
+  type: "contextual_update";
+  text: string;
+};
+
+export type UserMessageEvent = {
+  type: "user_message";
+  text: string;
+};
+
+export type UserActivityEvent = {
+  type: "user_activity";
+};
+
+export type MCPToolApprovalResultEvent = {
+  type: "mcp_tool_approval_result";
+  tool_call_id: string;
+  is_approved: boolean;
+};
+
 export type InitiationClientDataEvent = {
   type: "conversation_initiation_client_data";
   conversation_config_override?: {
@@ -150,3 +250,14 @@ export type InitiationClientDataEvent = {
   dynamic_variables?: Record<string, string | number | boolean>;
   user_id?: string;
 };
+
+export type ConversationEvent =
+  | UserTranscriptionEvent
+  | AgentResponseEvent
+  | AgentResponseCorrectionEvent
+  | AgentAudioEvent
+  | InterruptionEvent
+  | InternalTentativeAgentResponseEvent
+  | ConfigEvent
+  | PingEvent
+  | ClientToolCallEvent;

package/src/utils/tokenUtils.ts

@@ -11,10 +11,13 @@ export const extractRoomIdFromToken = (token: string): string => {
 };
 
 export const getConversationToken = async (
-  agentId: string
+  agentId: string,
+  tokenFetchUrl?: string
 ): Promise<string> => {
+  const baseUrl =
+    tokenFetchUrl || "https://api.elevenlabs.io/v1/convai/conversation/token";
   const response = await fetch(
-    `https://api.elevenlabs.io/v1/convai/conversation/token?agent_id=${agentId}&source=react_native_sdk&version=${PACKAGE_VERSION}`
+    `${baseUrl}?agent_id=${agentId}&source=react_native_sdk&version=${PACKAGE_VERSION}`
   );
 
   const data = await response.json();

package/src/version.ts

@@ -1,2 +1,2 @@
 // This file is auto-generated during build
-export const PACKAGE_VERSION = "0.1.1";
+export const PACKAGE_VERSION = "0.2.0";