@elevenlabs/react-native 0.2.0 → 0.3.0

package/src/ElevenLabsProvider.tsx

@@ -24,10 +24,12 @@ export interface Conversation {
   // TODO: Implement setVolume when LiveKit React Native supports it
   // setVolume: (volume: number) => void;
   canSendFeedback: boolean;
+  getId: () => string;
   sendFeedback: (like: boolean) => void;
   sendContextualUpdate: (text: string) => void;
   sendUserMessage: (text: string) => void;
   sendUserActivity: () => void;
+  setMicMuted: (muted: boolean) => void;
 }
 
 interface ElevenLabsContextType {
@@ -87,7 +89,7 @@ export const ElevenLabsProvider: React.FC<ElevenLabsProviderProps> = ({ children
   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 [conversationId, setConversationId] = useState<string>('');
   const [isSpeaking, setIsSpeaking] = useState(false);
   const [canSendFeedback, setCanSendFeedback] = useState(false);
 
@@ -119,7 +121,8 @@ export const ElevenLabsProvider: React.FC<ElevenLabsProviderProps> = ({ children
     overrides,
     customLlmExtraBody,
     dynamicVariables,
-  } = useConversationSession(callbacksRef, setStatus, setConnect, setToken, setRoomId, tokenFetchUrl);
+    userId,
+  } = useConversationSession(callbacksRef, setStatus, setConnect, setToken, setConversationId, tokenFetchUrl);
 
   const {
     roomConnected,
@@ -128,7 +131,7 @@ export const ElevenLabsProvider: React.FC<ElevenLabsProviderProps> = ({ children
     handleConnected,
     handleDisconnected,
     handleError,
-  } = useLiveKitRoom(callbacksRef, setStatus, roomId);
+  } = useLiveKitRoom(callbacksRef, setStatus, conversationId);
 
   // Enhanced connection handler to initialize feedback state
   const handleConnectedWithFeedback = React.useCallback(() => {
@@ -184,6 +187,14 @@ export const ElevenLabsProvider: React.FC<ElevenLabsProviderProps> = ({ children
     console.warn('setVolume is not yet implemented in React Native SDK');
   }, []);
 
+  const getId = () => conversationId;
+
+  const setMicMuted = React.useCallback((muted: boolean) => {
+    if (localParticipant) {
+      localParticipant.setMicrophoneEnabled(!muted);
+    }
+  }, [localParticipant]);
+
   // Update current event ID for feedback tracking
   const updateCurrentEventId = React.useCallback((eventId: number) => {
     currentEventIdRef.current = eventId;
@@ -199,10 +210,11 @@ export const ElevenLabsProvider: React.FC<ElevenLabsProviderProps> = ({ children
         overrides,
         customLlmExtraBody,
         dynamicVariables,
+        userId,
       });
       sendMessage(overridesEvent);
     }
-  }, [handleParticipantReady, localParticipant, overrides, customLlmExtraBody, dynamicVariables, sendMessage]);
+  }, [handleParticipantReady, localParticipant, overrides, customLlmExtraBody, dynamicVariables, userId, sendMessage]);
 
   const conversation: Conversation = {
     startSession,
@@ -211,6 +223,8 @@ export const ElevenLabsProvider: React.FC<ElevenLabsProviderProps> = ({ children
     isSpeaking,
     // setVolume,
     canSendFeedback,
+    getId,
+    setMicMuted,
     sendFeedback,
     sendContextualUpdate: (text: string) => {
       sendMessage({

package/src/hooks/useConversationSession.ts

@@ -6,7 +6,7 @@ import type {
 } from "../types";
 import {
   getConversationToken,
-  extractRoomIdFromToken,
+  extractConversationIdFromToken,
 } from "../utils/tokenUtils";
 
 export const useConversationSession = (
@@ -14,7 +14,7 @@ export const useConversationSession = (
   setStatus: (status: ConversationStatus) => void,
   setConnect: (connect: boolean) => void,
   setToken: (token: string) => void,
-  setRoomId: (roomId: string) => void,
+  setConversationId: (conversationId: string) => void,
   tokenFetchUrl?: string
 ) => {
   const [overrides, setOverrides] = useState<ConversationConfig["overrides"]>(
@@ -25,6 +25,7 @@ export const useConversationSession = (
   const [dynamicVariables, setDynamicVariables] = useState<
     ConversationConfig["dynamicVariables"]
   >({});
+  const [userId, setUserId] = useState<ConversationConfig["userId"]>(undefined);
 
   const startSession = useCallback(
     async (config: ConversationConfig) => {
@@ -35,6 +36,7 @@ export const useConversationSession = (
         setOverrides(config.overrides || {});
         setCustomLlmExtraBody(config.customLlmExtraBody || null);
         setDynamicVariables(config.dynamicVariables || {});
+        setUserId(config.userId);
 
         let conversationToken: string;
 
@@ -55,9 +57,9 @@ export const useConversationSession = (
           throw new Error("Either conversationToken or agentId is required");
         }
 
-        // Extract room ID from token
-        const extractedRoomId = extractRoomIdFromToken(conversationToken);
-        setRoomId(extractedRoomId);
+        const extractedConversationId =
+          extractConversationIdFromToken(conversationToken);
+        setConversationId(extractedConversationId);
 
         setToken(conversationToken);
         setConnect(true);
@@ -68,7 +70,14 @@ export const useConversationSession = (
         throw error;
       }
     },
-    [callbacksRef, setStatus, setConnect, setToken, setRoomId, tokenFetchUrl]
+    [
+      callbacksRef,
+      setStatus,
+      setConnect,
+      setToken,
+      setConversationId,
+      tokenFetchUrl,
+    ]
   );
 
   const endSession = useCallback(async () => {
@@ -90,5 +99,6 @@ export const useConversationSession = (
     overrides,
     customLlmExtraBody,
     dynamicVariables,
+    userId,
   };
 };

package/src/hooks/useLiveKitRoom.ts

@@ -6,7 +6,7 @@ import type { ConversationStatus, Callbacks } from "../types";
 export const useLiveKitRoom = (
   callbacksRef: { current: Callbacks },
   setStatus: (status: ConversationStatus) => void,
-  roomId: string
+  conversationId: string
 ) => {
   const [roomConnected, setRoomConnected] = useState(false);
   const [localParticipant, setLocalParticipant] =
@@ -33,8 +33,8 @@ export const useLiveKitRoom = (
   const handleConnected = useCallback(() => {
     setRoomConnected(true);
     setStatus("connected");
-    callbacksRef.current.onConnect?.({ conversationId: roomId });
-  }, [roomId, callbacksRef, setStatus]);
+    callbacksRef.current.onConnect?.({ conversationId });
+  }, [conversationId, callbacksRef, setStatus]);
 
   const handleDisconnected = useCallback(() => {
     setRoomConnected(false);

package/src/utils/overrides.ts

@@ -37,7 +37,7 @@ export function constructOverrides(
   }
 
   if (config.userId) {
-    overridesEvent.user_id = config.userId;
+    overridesEvent.user_id = String(config.userId);
   }
 
   return overridesEvent;

package/src/utils/tokenUtils.ts

@@ -1,11 +1,13 @@
 import { PACKAGE_VERSION } from "../version";
 
-export const extractRoomIdFromToken = (token: string): string => {
+export const extractConversationIdFromToken = (token: string): string => {
   try {
     const tokenPayload = JSON.parse(atob(token.split(".")[1]));
-    return tokenPayload.video?.room || "";
+    const roomId = tokenPayload.video?.room || "";
+
+    return roomId.match(/(conv_[a-zA-Z0-9]+)/)?.[0] || "";
   } catch (error) {
-    console.warn("Could not extract room ID from token");
+    console.warn("Could not extract conversation ID from token");
     return "";
   }
 };

package/src/version.ts

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