@elevenlabs/react-native 0.1.0

package/src/hooks/useConversationCallbacks.ts

@@ -0,0 +1,15 @@
+import { useRef, useCallback } from "react";
+import type { Callbacks } from "../types";
+
+export const useConversationCallbacks = () => {
+  const callbacksRef = useRef<Callbacks>({});
+
+  const setCallbacks = useCallback((callbacks: Callbacks) => {
+    callbacksRef.current = callbacks;
+  }, []);
+
+  return {
+    callbacksRef,
+    setCallbacks,
+  };
+};

package/src/hooks/useConversationSession.ts

@@ -0,0 +1,88 @@
+import { useState, useCallback } from "react";
+import type {
+  ConversationConfig,
+  ConversationStatus,
+  Callbacks,
+} from "../types";
+import {
+  getConversationToken,
+  extractRoomIdFromToken,
+} from "../utils/tokenUtils";
+
+export const useConversationSession = (
+  callbacksRef: { current: Callbacks },
+  setStatus: (status: ConversationStatus) => void,
+  setConnect: (connect: boolean) => void,
+  setToken: (token: string) => void,
+  setRoomId: (roomId: string) => void
+) => {
+  const [overrides, setOverrides] = useState<ConversationConfig["overrides"]>(
+    {}
+  );
+  const [customLlmExtraBody, setCustomLlmExtraBody] =
+    useState<ConversationConfig["customLlmExtraBody"]>(null);
+  const [dynamicVariables, setDynamicVariables] = useState<
+    ConversationConfig["dynamicVariables"]
+  >({});
+
+  const startSession = useCallback(
+    async (config: ConversationConfig) => {
+      try {
+        setStatus("connecting");
+        callbacksRef.current.onStatusChange?.({ status: "connecting" });
+
+        setOverrides(config.overrides || {});
+        setCustomLlmExtraBody(config.customLlmExtraBody || null);
+        setDynamicVariables(config.dynamicVariables || {});
+
+        let conversationToken: string;
+
+        if (config.conversationToken) {
+          conversationToken = config.conversationToken;
+        } else if (config.agentId) {
+          console.info(
+            "Getting conversation token for agentId:",
+            config.agentId
+          );
+          conversationToken = await getConversationToken(config.agentId);
+        } else {
+          throw new Error("Either conversationToken or agentId is required");
+        }
+
+        // Extract room ID from token
+        const extractedRoomId = extractRoomIdFromToken(conversationToken);
+        setRoomId(extractedRoomId);
+
+        setToken(conversationToken);
+        setConnect(true);
+      } catch (error) {
+        setStatus("disconnected");
+        callbacksRef.current.onStatusChange?.({ status: "disconnected" });
+        callbacksRef.current.onError?.(error as string);
+        throw error;
+      }
+    },
+    [callbacksRef, setStatus, setConnect, setToken, setRoomId]
+  );
+
+  const endSession = useCallback(async () => {
+    try {
+      setConnect(false);
+      setToken("");
+      setStatus("disconnected");
+      callbacksRef.current.onStatusChange?.({ status: "disconnected" });
+      callbacksRef.current.onDisconnect?.("User ended conversation");
+    } catch (error) {
+      callbacksRef.current.onError?.(error as string);
+      throw error;
+    }
+  }, [callbacksRef, setConnect, setToken, setStatus]);
+
+  return {
+    startSession,
+    endSession,
+    overrides,
+    customLlmExtraBody,
+    dynamicVariables,
+  };
+};

package/src/hooks/useLiveKitRoom.ts

@@ -0,0 +1,62 @@
+import { useState, useEffect, useCallback } from "react";
+import { AudioSession } from "@livekit/react-native";
+import type { LocalParticipant } from "livekit-client";
+import type { ConversationStatus, Callbacks } from "../types";
+
+export const useLiveKitRoom = (
+  callbacksRef: { current: Callbacks },
+  setStatus: (status: ConversationStatus) => void,
+  roomId: string
+) => {
+  const [roomConnected, setRoomConnected] = useState(false);
+  const [localParticipant, setLocalParticipant] =
+    useState<LocalParticipant | null>(null);
+
+  useEffect(() => {
+    const start = async () => {
+      await AudioSession.startAudioSession();
+    };
+
+    start();
+    return () => {
+      AudioSession.stopAudioSession();
+    };
+  }, []);
+
+  const handleParticipantReady = useCallback(
+    (participant: LocalParticipant) => {
+      setLocalParticipant(participant);
+    },
+    []
+  );
+
+  const handleConnected = useCallback(() => {
+    setRoomConnected(true);
+    setStatus("connected");
+    callbacksRef.current.onConnect?.({ conversationId: roomId });
+  }, [roomId, callbacksRef, setStatus]);
+
+  const handleDisconnected = useCallback(() => {
+    setRoomConnected(false);
+    setStatus("disconnected");
+    setLocalParticipant(null);
+    callbacksRef.current.onDisconnect?.("disconnected");
+  }, [callbacksRef, setStatus]);
+
+  const handleError = useCallback(
+    (error: Error) => {
+      console.error("LiveKit error:", error);
+      callbacksRef.current.onError?.(error.message, undefined);
+    },
+    [callbacksRef]
+  );
+
+  return {
+    roomConnected,
+    localParticipant,
+    handleParticipantReady,
+    handleConnected,
+    handleDisconnected,
+    handleError,
+  };
+};

package/src/hooks/useMessageSending.ts

@@ -0,0 +1,33 @@
+import { useCallback } from "react";
+import type { LocalParticipant } from "livekit-client";
+import type { ConversationStatus, Callbacks } from "../types";
+
+export const useMessageSending = (
+  status: ConversationStatus,
+  localParticipant: LocalParticipant | null,
+  callbacksRef: { current: Callbacks }
+) => {
+  const sendMessage = useCallback(
+    async (message: unknown) => {
+      if (status !== "connected" || !localParticipant) {
+        console.warn(
+          "Cannot send message: room not connected or no local participant"
+        );
+        return;
+      }
+      try {
+        const encoder = new TextEncoder();
+        const data = encoder.encode(JSON.stringify(message));
+
+        await localParticipant.publishData(data, { reliable: true });
+      } catch (error) {
+        console.error("Failed to send message via WebRTC:", error);
+        console.error("Error details:", error);
+        callbacksRef.current.onError?.(error as string);
+      }
+    },
+    [status, localParticipant, callbacksRef]
+  );
+
+  return { sendMessage };
+};

package/src/index.ts

@@ -0,0 +1,9 @@
+export { ElevenLabsProvider, useConversation } from "./ElevenLabsProvider";
+
+export type {
+  ConversationStatus,
+  Mode,
+  Role,
+  Callbacks,
+  ConversationOptions,
+} from "./types";

package/src/types.ts

@@ -0,0 +1,150 @@
+/**
+ * Role in the conversation
+ */
+export type Role = "user" | "ai";
+
+/**
+ * Current mode of the conversation
+ */
+export type Mode = "speaking" | "listening";
+
+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
+ */
+export type ClientToolsConfig = {
+  clientTools: Record<
+    string,
+    (
+      parameters: unknown
+    ) => Promise<string | number | undefined> | string | number | undefined
+  >;
+};
+
+/**
+ * Options for useConversation hook
+ */
+export type ConversationOptions = {
+  serverUrl?: string;
+  clientTools?: Record<
+    string,
+    (
+      parameters: unknown
+    ) => Promise<string | number | undefined> | string | number | undefined
+  >;
+} & Partial<Callbacks>;
+
+/**
+ * Callbacks configuration
+ */
+export type Callbacks = {
+  onConnect?: (props: { conversationId: string }) => void;
+  // internal debug events, not to be used
+  onDebug?: (props: unknown) => void;
+  onDisconnect?: (details: string) => void;
+  onError?: (message: string, context?: Record<string, unknown>) => void;
+  onMessage?: (props: { message: string; source: Role }) => void;
+  onModeChange?: (prop: { mode: Mode }) => void;
+  onStatusChange?: (prop: { status: ConversationStatus }) => void;
+  onCanSendFeedbackChange?: (prop: { canSendFeedback: boolean }) => void;
+  onUnhandledClientToolCall?: (params: ClientToolCallEvent) => void;
+};
+
+export type ConversationConfig = {
+  agentId?: string;
+  conversationToken?: string;
+  overrides?: {
+    agent?: {
+      prompt?: {
+        prompt?: string;
+      };
+      firstMessage?: string;
+      language?: Language;
+    };
+    tts?: {
+      voiceId?: string;
+    };
+    conversation?: {
+      textOnly?: boolean;
+    };
+    client?: {
+      source?: string;
+      version?: string;
+    };
+  };
+  customLlmExtraBody?: unknown;
+  dynamicVariables?: Record<string, string | number | boolean>;
+};
+
+export type InitiationClientDataEvent = {
+  type: "conversation_initiation_client_data";
+  conversation_config_override?: {
+    agent?: {
+      prompt?: {
+        prompt?: string;
+      };
+      first_message?: string;
+      language?: Language;
+    };
+    tts?: {
+      voice_id?: string;
+    };
+    conversation?: {
+      text_only?: boolean;
+    };
+    client?: {
+      source?: string;
+      version?: string;
+    };
+  };
+  custom_llm_extra_body?: unknown;
+  dynamic_variables?: Record<string, string | number | boolean>;
+};

package/src/utils/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_SERVER_URL = "wss://livekit.rtc.elevenlabs.io";

package/src/utils/overrides.ts

@@ -0,0 +1,40 @@
+import type { ConversationConfig, InitiationClientDataEvent } from "../types";
+import { PACKAGE_VERSION } from "../version";
+
+export function constructOverrides(
+  config: ConversationConfig
+): InitiationClientDataEvent {
+  const overridesEvent: InitiationClientDataEvent = {
+    type: "conversation_initiation_client_data",
+  };
+
+  if (config.overrides) {
+    overridesEvent.conversation_config_override = {
+      agent: {
+        prompt: config.overrides.agent?.prompt,
+        first_message: config.overrides.agent?.firstMessage,
+        language: config.overrides.agent?.language,
+      },
+      tts: {
+        voice_id: config.overrides.tts?.voiceId,
+      },
+      conversation: {
+        text_only: config.overrides.conversation?.textOnly,
+      },
+      client: {
+        source: config.overrides?.client?.source || "react_native_sdk",
+        version: config.overrides?.client?.version || PACKAGE_VERSION,
+      },
+    };
+  }
+
+  if (config.customLlmExtraBody) {
+    overridesEvent.custom_llm_extra_body = config.customLlmExtraBody;
+  }
+
+  if (config.dynamicVariables) {
+    overridesEvent.dynamic_variables = config.dynamicVariables;
+  }
+
+  return overridesEvent;
+}

package/src/utils/tokenUtils.ts

@@ -0,0 +1,31 @@
+import { PACKAGE_VERSION } from "../version";
+
+export const extractRoomIdFromToken = (token: string): string => {
+  try {
+    const tokenPayload = JSON.parse(atob(token.split(".")[1]));
+    return tokenPayload.video?.room || "";
+  } catch (error) {
+    console.warn("Could not extract room ID from token");
+    return "";
+  }
+};
+
+export const getConversationToken = async (
+  agentId: string
+): Promise<string> => {
+  const response = await fetch(
+    `https://api.elevenlabs.io/v1/convai/conversation/token?agent_id=${agentId}&source=react_native_sdk&version=${PACKAGE_VERSION}`
+  );
+
+  const data = await response.json();
+
+  if (!response.ok) {
+    throw new Error(`Failed to get conversation token: ${data.detail.message}`);
+  }
+
+  if (!data.token) {
+    throw new Error("No conversation token received from API");
+  }
+
+  return data.token;
+};

package/src/version.ts

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

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "lib": ["es2015", "dom"],
+    "target": "es5",
+    "module": "esnext",
+    "jsx": "react",
+    "sourceMap": true,
+    "outDir": "dist",
+    "strict": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*"]
+}