@elevenlabs/react-native 0.5.11 → 1.0.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +2 -12
- package/.turbo/turbo-check-types.log +1 -1
- package/.turbo/turbo-generate-version.log +1 -1
- package/.turbo/turbo-lint$colon$es.log +2 -2
- package/.turbo/turbo-lint$colon$prettier.log +1 -1
- package/CHANGELOG.md +92 -0
- package/README.md +42 -324
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +7 -0
- package/dist/index.js.map +1 -0
- package/dist/index.react-native.d.ts +2 -0
- package/dist/index.react-native.d.ts.map +1 -0
- package/dist/index.react-native.js +35 -0
- package/dist/index.react-native.js.map +1 -0
- package/dist/version.d.ts +2 -1
- package/dist/version.d.ts.map +1 -0
- package/dist/version.js +3 -0
- package/dist/version.js.map +1 -0
- package/package.json +13 -26
- package/src/index.react-native.ts +51 -0
- package/src/index.ts +25 -16
- package/src/version.ts +1 -1
- package/tsconfig.build.json +19 -0
- package/tsconfig.build.tsbuildinfo +1 -0
- package/tsconfig.json +5 -17
- package/dist/ElevenLabsProvider.d.ts +0 -26
- package/dist/ElevenLabsProvider.test.d.ts +0 -1
- package/dist/components/LiveKitRoomWrapper.d.ts +0 -23
- package/dist/components/MessageHandler.d.ts +0 -14
- package/dist/hooks/useConversationCallbacks.d.ts +0 -5
- package/dist/hooks/useConversationSession.d.ts +0 -33
- package/dist/hooks/useLiveKitRoom.d.ts +0 -12
- package/dist/hooks/useMessageSending.d.ts +0 -7
- package/dist/lib.js +0 -2
- package/dist/lib.js.map +0 -1
- package/dist/lib.modern.js +0 -2
- package/dist/lib.modern.js.map +0 -1
- package/dist/lib.module.js +0 -2
- package/dist/lib.module.js.map +0 -1
- package/dist/lib.umd.js +0 -2
- package/dist/lib.umd.js.map +0 -1
- package/dist/types.d.ts +0 -110
- package/dist/utils/constants.d.ts +0 -1
- package/dist/utils/overrides.d.ts +0 -2
- package/dist/utils/text-only.d.ts +0 -2
- package/dist/utils/tokenUtils.d.ts +0 -2
- package/jest.config.cjs +0 -263
- package/jest.rn-mock.js +0 -15
- package/src/ElevenLabsProvider.test.tsx +0 -257
- package/src/ElevenLabsProvider.tsx +0 -349
- package/src/components/LiveKitRoomWrapper.tsx +0 -94
- package/src/components/MessageHandler.tsx +0 -237
- package/src/hooks/useConversationCallbacks.ts +0 -15
- package/src/hooks/useConversationSession.ts +0 -129
- package/src/hooks/useLiveKitRoom.ts +0 -100
- package/src/hooks/useMessageSending.ts +0 -33
- package/src/types.ts +0 -169
- package/src/utils/constants.ts +0 -1
- package/src/utils/overrides.ts +0 -48
- package/src/utils/text-only.ts +0 -22
- package/src/utils/tokenUtils.ts +0 -49
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,14 +1,4 @@
|
|
|
1
1
|
|
|
2
|
-
> @elevenlabs/react-native@0.
|
|
3
|
-
>
|
|
2
|
+
> @elevenlabs/react-native@1.0.0-rc.0 build /home/runner/work/packages/packages/packages/react-native
|
|
3
|
+
> tsc --build tsconfig.build.json
|
|
4
4
|
|
|
5
|
-
No name was provided for external module '@livekit/react-native' in output.globals – guessing 'reactNative'
|
|
6
|
-
Build "@elevenlabs/react-native" to dist:
|
|
7
|
-
5.09 kB: lib.js.gz
|
|
8
|
-
4.52 kB: lib.js.br
|
|
9
|
-
4.64 kB: lib.modern.js.gz
|
|
10
|
-
4.13 kB: lib.modern.js.br
|
|
11
|
-
5.06 kB: lib.module.js.gz
|
|
12
|
-
4.51 kB: lib.module.js.br
|
|
13
|
-
5.15 kB: lib.umd.js.gz
|
|
14
|
-
4.59 kB: lib.umd.js.br
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
|
|
2
|
-
> @elevenlabs/react-native@0.
|
|
2
|
+
> @elevenlabs/react-native@1.0.0-rc.0 generate-version /home/runner/work/packages/packages/packages/react-native
|
|
3
3
|
> printf "// This file is auto-generated during build\nexport const PACKAGE_VERSION = \"%s\";\n" "$npm_package_version" > src/version.ts
|
|
4
4
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
|
-
> @elevenlabs/react-native@0.
|
|
2
|
+
> @elevenlabs/react-native@1.0.0-rc.0 lint:es /home/runner/work/packages/packages/packages/react-native
|
|
3
3
|
> pnpm exec eslint .
|
|
4
4
|
|
|
5
|
-
(node:
|
|
5
|
+
(node:3129) ESLintEmptyConfigWarning: Running ESLint with an empty config (from /home/runner/work/packages/packages/packages/react-native/eslint.config.cjs). Please double-check that this is what you want. If you want to run ESLint with an empty config, export [{}] to remove this warning.
|
|
6
6
|
(Use `node --trace-warnings ...` to show where the warning was created)
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @elevenlabs/react-native@0.
|
|
2
|
+
> @elevenlabs/react-native@1.0.0-rc.0 lint:prettier /home/runner/work/packages/packages/packages/react-native
|
|
3
3
|
> prettier 'src/**/*.ts' --check
|
|
4
4
|
|
|
5
5
|
Checking formatting...
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,97 @@
|
|
|
1
1
|
# @elevenlabs/react-native
|
|
2
2
|
|
|
3
|
+
## 1.0.0-rc.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- 77798c7: **Breaking:** Complete API rewrite. The custom LiveKit-based implementation (`ElevenLabsProvider`, `useConversation`) has been removed and replaced with re-exports from `@elevenlabs/react`.
|
|
8
|
+
|
|
9
|
+
The package now provides `ConversationProvider` and granular hooks (`useConversationControls`, `useConversationStatus`, `useConversationInput`, `useConversationMode`, `useConversationFeedback`) instead of the previous monolithic `useConversation` hook.
|
|
10
|
+
|
|
11
|
+
On React Native, the package performs side-effects on import: polyfilling WebRTC globals, configuring native AudioSession, and registering a platform-specific voice session strategy. On web, it re-exports without side-effects.
|
|
12
|
+
|
|
13
|
+
## Migration
|
|
14
|
+
|
|
15
|
+
**Before:**
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import {
|
|
19
|
+
ElevenLabsProvider,
|
|
20
|
+
useConversation,
|
|
21
|
+
} from "@elevenlabs/react-native";
|
|
22
|
+
|
|
23
|
+
function App() {
|
|
24
|
+
return (
|
|
25
|
+
<ElevenLabsProvider>
|
|
26
|
+
<Conversation />
|
|
27
|
+
</ElevenLabsProvider>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function Conversation() {
|
|
32
|
+
const conversation = useConversation({
|
|
33
|
+
onConnect: ({ conversationId }) =>
|
|
34
|
+
console.log("Connected", conversationId),
|
|
35
|
+
onError: message => console.error(message),
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
return (
|
|
39
|
+
<Button
|
|
40
|
+
onPress={() => conversation.startSession({ agentId: "your-agent-id" })}
|
|
41
|
+
/>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
**After:**
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
import {
|
|
50
|
+
ConversationProvider,
|
|
51
|
+
useConversationControls,
|
|
52
|
+
useConversationStatus,
|
|
53
|
+
} from "@elevenlabs/react-native";
|
|
54
|
+
|
|
55
|
+
function App() {
|
|
56
|
+
return (
|
|
57
|
+
<ConversationProvider
|
|
58
|
+
onConnect={({ conversationId }) =>
|
|
59
|
+
console.log("Connected", conversationId)
|
|
60
|
+
}
|
|
61
|
+
onError={message => console.error(message)}
|
|
62
|
+
>
|
|
63
|
+
<Conversation />
|
|
64
|
+
</ConversationProvider>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
function Conversation() {
|
|
69
|
+
const { startSession } = useConversationControls();
|
|
70
|
+
const { status } = useConversationStatus();
|
|
71
|
+
|
|
72
|
+
return (
|
|
73
|
+
<Button onPress={() => startSession({ agentId: "your-agent-id" })} />
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Patch Changes
|
|
79
|
+
|
|
80
|
+
- ea66b5e: Replace microbundle with rolldown for IIFE builds (client, react) and tsc-only builds (react-native). No public API changes — the CDN bundle format changes from UMD to IIFE.
|
|
81
|
+
- Updated dependencies [81013c0]
|
|
82
|
+
- Updated dependencies [81013c0]
|
|
83
|
+
- Updated dependencies [81013c0]
|
|
84
|
+
- Updated dependencies [81013c0]
|
|
85
|
+
- Updated dependencies [cea40aa]
|
|
86
|
+
- Updated dependencies [81013c0]
|
|
87
|
+
- Updated dependencies [77798c7]
|
|
88
|
+
- Updated dependencies [cea40aa]
|
|
89
|
+
- Updated dependencies [cfea047]
|
|
90
|
+
- Updated dependencies [ea66b5e]
|
|
91
|
+
- Updated dependencies [81013c0]
|
|
92
|
+
- @elevenlabs/client@1.0.0-rc.0
|
|
93
|
+
- @elevenlabs/react@1.0.0-rc.0
|
|
94
|
+
|
|
3
95
|
## 0.5.11
|
|
4
96
|
|
|
5
97
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -2,361 +2,79 @@
|
|
|
2
2
|
|
|
3
3
|
# ElevenAgents React Native SDK
|
|
4
4
|
|
|
5
|
-
Build multimodal agents with [ElevenAgents](https://elevenlabs.io/docs/eleven-agents/overview).
|
|
5
|
+
Build multimodal agents with [ElevenAgents](https://elevenlabs.io/docs/eleven-agents/overview) in React Native.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
This package is a React Native companion to [`@elevenlabs/react`](https://www.npmjs.com/package/@elevenlabs/react). It re-exports the full conversation API and automatically configures the platform for voice conversations on React Native (WebRTC polyfills and native AudioSession setup).
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
- WebRTC communication through LiveKit
|
|
13
|
-
- Expo compatible (development builds only)
|
|
14
|
-
|
|
15
|
-
## Notes
|
|
16
|
-
|
|
17
|
-
This SDK was designed and built for use with the Expo framework. Due to it requiring native code, Expo Go is not supported at this time.
|
|
18
|
-
|
|
19
|
-
## Example app
|
|
20
|
-
|
|
21
|
-
There is an example app using this SDK located in the examples/react-native-expo directory. The readme there includes instructions on how to run the example app.
|
|
9
|
+

|
|
10
|
+
[](https://discord.gg/elevenlabs)
|
|
11
|
+
[](https://twitter.com/ElevenLabs)
|
|
22
12
|
|
|
23
13
|
## Installation
|
|
24
14
|
|
|
25
|
-
```
|
|
26
|
-
npm install @elevenlabs/react-native @livekit/react-native @livekit/react-native-webrtc
|
|
15
|
+
```shell
|
|
16
|
+
npm install @elevenlabs/react-native @livekit/react-native @livekit/react-native-webrtc
|
|
27
17
|
```
|
|
28
18
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
- `@livekit/react-native` - LiveKit React Native SDK (native modules)
|
|
32
|
-
- `@livekit/react-native-webrtc` - WebRTC implementation for React Native
|
|
33
|
-
- `livekit-client` - LiveKit JavaScript client
|
|
34
|
-
|
|
35
|
-
_Note: LiveKit dependencies are required due to React Native's native module architecture and must be installed in your app's root dependencies._
|
|
19
|
+
The LiveKit peer dependencies provide the native WebRTC modules required for voice conversations in React Native.
|
|
36
20
|
|
|
37
|
-
> **
|
|
21
|
+
> **Note:** This SDK requires Expo development builds. Expo Go is not supported due to native module requirements.
|
|
38
22
|
|
|
39
23
|
## Quick Start
|
|
40
24
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
25
|
+
```tsx
|
|
26
|
+
import {
|
|
27
|
+
ConversationProvider,
|
|
28
|
+
useConversationControls,
|
|
29
|
+
useConversationStatus,
|
|
30
|
+
} from "@elevenlabs/react-native";
|
|
46
31
|
|
|
47
32
|
function App() {
|
|
48
33
|
return (
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
34
|
+
{/* replace with your agent's ID */}
|
|
35
|
+
<ConversationProvider agentId="agent_7101k5zvyjhmfg983brhmhkd98n6">
|
|
36
|
+
<Conversation />
|
|
37
|
+
</ConversationProvider>
|
|
52
38
|
);
|
|
53
39
|
}
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
### Audio Session Configuration
|
|
57
|
-
|
|
58
|
-
By default, ElevenLabs uses an exclusive audio session for optimal voice quality. To allow concurrent audio playback (e.g., sound effects, notifications, background music):
|
|
59
40
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
41
|
+
function Conversation() {
|
|
42
|
+
const { startSession, endSession } = useConversationControls();
|
|
43
|
+
const { status } = useConversationStatus();
|
|
63
44
|
|
|
64
|
-
function App() {
|
|
65
45
|
return (
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
46
|
+
<>
|
|
47
|
+
<Text>Status: {status}</Text>
|
|
48
|
+
<Button
|
|
49
|
+
title="Start"
|
|
50
|
+
onPress={() =>
|
|
51
|
+
startSession({
|
|
52
|
+
onConnect: ({ conversationId }) =>
|
|
53
|
+
console.log("Connected:", conversationId),
|
|
54
|
+
onError: (message) => console.error("Error:", message),
|
|
55
|
+
})
|
|
56
|
+
}
|
|
57
|
+
/>
|
|
58
|
+
<Button title="End" onPress={() => endSession()} />
|
|
59
|
+
</>
|
|
73
60
|
);
|
|
74
61
|
}
|
|
75
|
-
|
|
76
|
-
function ConversationComponent() {
|
|
77
|
-
const conversation = useConversation({
|
|
78
|
-
onConnect: ({ conversationId }) => console.log(`Connected to ${conversationId}`),
|
|
79
|
-
onDisconnect: () => console.log('Disconnected'),
|
|
80
|
-
onMessage: (message) => console.log('Message:', message),
|
|
81
|
-
onError: (error) => console.error('Error:', error),
|
|
82
|
-
});
|
|
83
|
-
|
|
84
|
-
const startSession = async () => {
|
|
85
|
-
await conversation.startSession({
|
|
86
|
-
agentId: 'your-agent-id'
|
|
87
|
-
});
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
const endSession = async () => {
|
|
91
|
-
await conversation.endSession();
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
const sendFeedback = (isPositive: boolean) => {
|
|
95
|
-
if (conversation.canSendFeedback) {
|
|
96
|
-
conversation.sendFeedback(isPositive);
|
|
97
|
-
}
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
const sendUserMessage = (text: string) => {
|
|
101
|
-
conversation.sendUserMessage(text);
|
|
102
|
-
};
|
|
103
|
-
|
|
104
|
-
return (
|
|
105
|
-
// Your UI components
|
|
106
|
-
// Use conversation.status, conversation.isSpeaking, conversation.canSendFeedback
|
|
107
|
-
);
|
|
108
|
-
}
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
## API Reference
|
|
112
|
-
|
|
113
|
-
### useConversation Hook
|
|
114
|
-
|
|
115
|
-
Returns a conversation object with the following methods and properties:
|
|
116
|
-
|
|
117
|
-
#### `startSession(config: ConversationConfig): Promise<void>`
|
|
118
|
-
|
|
119
|
-
Starts a new conversation session.
|
|
120
|
-
|
|
121
|
-
**Parameters:**
|
|
122
|
-
|
|
123
|
-
- `config.agentId`: ElevenLabs agent ID, not needed if you provide a conversationToken.
|
|
124
|
-
- `config.conversationToken`: Optional pre-generated token, used for private agents that require authentication via your ElevenLabs API key.
|
|
125
|
-
- `config.userId`: You can optionally pass a user ID to identify the user in the conversation. This can be your own customer identifier. This will be included in the conversation initiation data sent to the server.
|
|
126
|
-
|
|
127
|
-
```typescript
|
|
128
|
-
await conversation.startSession({
|
|
129
|
-
agentId: "your-agent-id",
|
|
130
|
-
});
|
|
131
|
-
```
|
|
132
|
-
|
|
133
|
-
#### `endSession(): Promise<void>`
|
|
134
|
-
|
|
135
|
-
Ends the current conversation session.
|
|
136
|
-
|
|
137
|
-
```typescript
|
|
138
|
-
await conversation.endSession();
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
#### `sendFeedback(like: boolean): void`
|
|
142
|
-
|
|
143
|
-
Sends binary feedback for the most recent agent response.
|
|
144
|
-
|
|
145
|
-
**Parameters:**
|
|
146
|
-
|
|
147
|
-
- `like`: `true` for positive feedback, `false` for negative feedback
|
|
148
|
-
|
|
149
|
-
```typescript
|
|
150
|
-
// Positive feedback
|
|
151
|
-
conversation.sendFeedback(true);
|
|
152
|
-
|
|
153
|
-
// Negative feedback
|
|
154
|
-
conversation.sendFeedback(false);
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
#### `sendContextualUpdate(text: string): void`
|
|
158
|
-
|
|
159
|
-
Sends contextual information to the agent that won't trigger a response.
|
|
160
|
-
|
|
161
|
-
**Parameters:**
|
|
162
|
-
|
|
163
|
-
- `text`: Contextual information for the agent
|
|
164
|
-
|
|
165
|
-
```typescript
|
|
166
|
-
conversation.sendContextualUpdate(
|
|
167
|
-
"User navigated to the profile page. Consider this for next response."
|
|
168
|
-
);
|
|
169
|
-
```
|
|
170
|
-
|
|
171
|
-
#### `sendUserMessage(text: string): void`
|
|
172
|
-
|
|
173
|
-
Sends a text message to the agent as if the user spoke it.
|
|
174
|
-
|
|
175
|
-
**Parameters:**
|
|
176
|
-
|
|
177
|
-
- `text`: The message text to send
|
|
178
|
-
|
|
179
|
-
```typescript
|
|
180
|
-
conversation.sendUserMessage("Hello, how are you today?");
|
|
181
62
|
```
|
|
182
63
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
Notifies the agent about user activity to prevent interruptions.
|
|
186
|
-
|
|
187
|
-
The agent will pause speaking for ~2 seconds after receiving this signal.
|
|
188
|
-
|
|
189
|
-
```typescript
|
|
190
|
-
// Prevent interruption while user is typing
|
|
191
|
-
textInput.addEventListener("input", () => {
|
|
192
|
-
conversation.sendUserActivity();
|
|
193
|
-
});
|
|
194
|
-
```
|
|
195
|
-
|
|
196
|
-
#### `getId(): string`
|
|
197
|
-
|
|
198
|
-
Retrieves the conversation ID.
|
|
199
|
-
|
|
200
|
-
```typescript
|
|
201
|
-
const id = conversation.getId();
|
|
202
|
-
// conv_9001k1zph3fkeh5s8xg9z90swaqa
|
|
203
|
-
console.log(id);
|
|
204
|
-
```
|
|
205
|
-
|
|
206
|
-
#### `setMicMuted(muted: boolean): void`
|
|
207
|
-
|
|
208
|
-
Mutes/unmutes the microphone
|
|
209
|
-
|
|
210
|
-
**Parameters:**
|
|
211
|
-
|
|
212
|
-
- `muted`: Whether the mic should be muted or not
|
|
213
|
-
|
|
214
|
-
```typescript
|
|
215
|
-
conversation.setMicMuted(true); // mute
|
|
216
|
-
conversation.setMicMuted(false); // unmute
|
|
217
|
-
```
|
|
218
|
-
|
|
219
|
-
#### Properties
|
|
220
|
-
|
|
221
|
-
- `status: ConversationStatus` - Current conversation status ('connecting' | 'connected' | 'disconnected')
|
|
222
|
-
- `isSpeaking: boolean` - Whether the agent is currently speaking
|
|
223
|
-
- `canSendFeedback: boolean` - Whether feedback can be sent for the current response
|
|
224
|
-
|
|
225
|
-
```typescript
|
|
226
|
-
console.log(conversation.status);
|
|
227
|
-
console.log(conversation.isSpeaking);
|
|
228
|
-
console.log(conversation.canSendFeedback);
|
|
229
|
-
```
|
|
230
|
-
|
|
231
|
-
### ElevenLabsProvider Configuration
|
|
232
|
-
|
|
233
|
-
Configure the provider with optional settings:
|
|
234
|
-
|
|
235
|
-
#### Audio Session Configuration
|
|
236
|
-
|
|
237
|
-
Control how the SDK manages audio sessions with other audio sources:
|
|
238
|
-
|
|
239
|
-
```typescript
|
|
240
|
-
<ElevenLabsProvider
|
|
241
|
-
audioSessionConfig={{
|
|
242
|
-
allowMixingWithOthers: true, // Default: false
|
|
243
|
-
}}
|
|
244
|
-
>
|
|
245
|
-
{/* Your app */}
|
|
246
|
-
</ElevenLabsProvider>
|
|
247
|
-
```
|
|
248
|
-
|
|
249
|
-
**When to use `allowMixingWithOthers: true`:**
|
|
250
|
-
- Playing connection/disconnection sound effects during conversations
|
|
251
|
-
- Background music in your app
|
|
252
|
-
- Notification sounds while agent is speaking
|
|
253
|
-
- Multiple concurrent audio sources
|
|
254
|
-
|
|
255
|
-
**Default behavior (`false`):**
|
|
256
|
-
- Exclusive audio session for best voice quality
|
|
257
|
-
- Other audio sources will be paused during conversations
|
|
258
|
-
|
|
259
|
-
**Platform Notes:**
|
|
260
|
-
- **iOS**: Adds `AVAudioSessionCategoryOptionMixWithOthers` to the audio session
|
|
261
|
-
- **Android**: Uses `AUDIOFOCUS_GAIN_TRANSIENT_MAY_DUCK` for audio focus
|
|
262
|
-
|
|
263
|
-
### Conversation Hook Options
|
|
264
|
-
|
|
265
|
-
Pass to `useConversation` hook to customize SDK behavior:
|
|
266
|
-
|
|
267
|
-
#### Server URL Override
|
|
268
|
-
|
|
269
|
-
Override the WebRTC server URL (defaults to ElevenLabs' LiveKit server):
|
|
270
|
-
|
|
271
|
-
```typescript
|
|
272
|
-
const conversation = useConversation({
|
|
273
|
-
serverUrl: "wss://your-custom-livekit-server.com",
|
|
274
|
-
});
|
|
275
|
-
```
|
|
276
|
-
|
|
277
|
-
#### Token Fetch URL Override
|
|
278
|
-
|
|
279
|
-
Override the token fetch endpoint (defaults to ElevenLabs' token API):
|
|
280
|
-
|
|
281
|
-
```typescript
|
|
282
|
-
const conversation = useConversation({
|
|
283
|
-
tokenFetchUrl: "https://your-api.com/v1/conversation/token",
|
|
284
|
-
});
|
|
285
|
-
```
|
|
286
|
-
|
|
287
|
-
You can also override the token fetch URL on a per-session basis:
|
|
288
|
-
|
|
289
|
-
```typescript
|
|
290
|
-
await conversation.startSession({
|
|
291
|
-
agentId: "your-agent-id",
|
|
292
|
-
tokenFetchUrl: "https://your-api.com/v1/conversation/token",
|
|
293
|
-
});
|
|
294
|
-
```
|
|
295
|
-
|
|
296
|
-
#### Combined Configuration
|
|
297
|
-
|
|
298
|
-
```typescript
|
|
299
|
-
const conversation = useConversation({
|
|
300
|
-
serverUrl: "wss://your-custom-livekit-server.com",
|
|
301
|
-
tokenFetchUrl: "https://your-api.com/v1/conversation/token",
|
|
302
|
-
onConnect: () => console.log("Connected!"),
|
|
303
|
-
onError: error => console.error("Error:", error),
|
|
304
|
-
});
|
|
305
|
-
```
|
|
306
|
-
|
|
307
|
-
### Callback Options
|
|
308
|
-
|
|
309
|
-
**Note:** Not all client events are enabled by default for an agent. If you have enabled a callback but aren’t seeing events come through, ensure that your ElevenLabs agent has the corresponding event enabled. You can do this in the “Advanced” tab of the agent settings in the ElevenLabs dashboard.
|
|
310
|
-
|
|
311
|
-
Pass to `useConversation` hook to handle various conversation events:
|
|
312
|
-
|
|
313
|
-
#### Connection & Status
|
|
314
|
-
- `onConnect?: (props: { conversationId: string }) => void` - Called when successfully connected to a conversation
|
|
315
|
-
- `onDisconnect?: (details: DisconnectionDetails) => void` - Called when disconnected (includes reason: "user", "agent", or "error")
|
|
316
|
-
- `onStatusChange?: (props: { status: Status }) => void` - Called when connection status changes ("disconnected", "connecting", "connected", "disconnecting")
|
|
317
|
-
- `onError?: (message: string, context?: any) => void` - Called when an error occurs
|
|
318
|
-
|
|
319
|
-
#### Messages & Transcription
|
|
320
|
-
- `onMessage?: (props: { message: string; source: Role }) => void` - Called when a message is received from user or AI
|
|
321
|
-
- `onModeChange?: (props: { mode: Mode }) => void` - Called when conversation mode changes ("speaking" or "listening")
|
|
322
|
-
|
|
323
|
-
#### Audio & Voice Activity
|
|
324
|
-
- `onAudio?: (base64Audio: string) => void` - Called when audio chunks are received from the agent
|
|
325
|
-
- `onVadScore?: (props: { vadScore: number }) => void` - Called with Voice Activity Detection scores
|
|
326
|
-
|
|
327
|
-
#### Conversation Events
|
|
328
|
-
- `onInterruption?: (props: Interruption) => void` - Called when the conversation is interrupted
|
|
329
|
-
- `onAgentChatResponsePart?: (props: AgentChatResponsePart) => void` - Called for streaming agent response parts
|
|
330
|
-
- `onConversationMetadata?: (props: ConversationMetadata) => void` - Called with conversation initiation metadata
|
|
331
|
-
- `onAsrInitiationMetadata?: (props: AsrInitiationMetadata) => void` - Called with ASR (speech recognition) initialization metadata
|
|
332
|
-
- `onAudioAlignment?: (props: AudioAlignmentEvent) => void` - Called with character-level timing data for text-to-speech synchronization
|
|
333
|
-
|
|
334
|
-
#### Feedback
|
|
335
|
-
- `onCanSendFeedbackChange?: (props: { canSendFeedback: boolean }) => void` - Called when feedback availability changes
|
|
336
|
-
|
|
337
|
-
#### Tools & MCP
|
|
338
|
-
- `onUnhandledClientToolCall?: (props: ClientToolCall) => void` - Called when a client tool is invoked but not defined
|
|
339
|
-
- `onMCPToolCall?: (props: McpToolCall) => void` - Called when an MCP (Model Context Protocol) tool is invoked
|
|
340
|
-
- `onMCPConnectionStatus?: (props: McpConnectionStatus) => void` - Called when MCP connection status changes
|
|
341
|
-
- `onAgentToolRequest?: (props: AgentToolRequest) => void` - Called when the agent begins executing a tool
|
|
342
|
-
- `onAgentToolResponse?: (props: AgentToolResponse) => void` - Called when the agent receives a tool execution response
|
|
343
|
-
|
|
344
|
-
#### Debug
|
|
345
|
-
- `onDebug?: (props: any) => void` - Called with debug information (internal events)
|
|
64
|
+
## Example App
|
|
346
65
|
|
|
347
|
-
|
|
66
|
+
See the [Expo example app](../../examples/react-native-expo) for a complete working example.
|
|
348
67
|
|
|
349
|
-
|
|
68
|
+
## Documentation
|
|
350
69
|
|
|
351
|
-
|
|
352
|
-
- Microphone permissions
|
|
70
|
+
For the full API reference, see the [React Native SDK documentation](https://elevenlabs.io/docs/eleven-agents/libraries/react-native).
|
|
353
71
|
|
|
354
72
|
## Development
|
|
355
73
|
|
|
356
|
-
Please
|
|
74
|
+
Please refer to the README.md file in the root of this repository.
|
|
357
75
|
|
|
358
76
|
## Contributing
|
|
359
77
|
|
|
360
|
-
Please
|
|
78
|
+
Please create an issue first to discuss the proposed changes. Any contributions are welcome!
|
|
361
79
|
|
|
362
80
|
Remember, if merged, your code will be used as part of a MIT licensed project. By submitting a Pull Request, you are giving your consent for your code to be integrated into this library.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export {
|
|
2
|
-
|
|
1
|
+
export { ConversationProvider, useConversationControls, useConversationStatus, useConversationInput, useConversationMode, useConversationFeedback, useRawConversation, useConversation, type UseConversationOptions, type ConversationControlsValue, type ConversationInputValue, type ConversationStatus, type ConversationStatusValue, type ConversationModeValue, type ConversationFeedbackValue, type ConversationProviderProps, type HookOptions, type HookCallbacks, } from "@elevenlabs/react";
|
|
2
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,eAAe,EACf,KAAK,sBAAsB,EAC3B,KAAK,yBAAyB,EAC9B,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACvB,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC9B,KAAK,yBAAyB,EAC9B,KAAK,WAAW,EAChB,KAAK,aAAa,GACnB,MAAM,mBAAmB,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { setSourceInfo } from "@elevenlabs/client/internal";
|
|
2
|
+
import { PACKAGE_VERSION } from "./version";
|
|
3
|
+
// Identify as react_native_sdk
|
|
4
|
+
setSourceInfo({ name: "react_native_sdk", version: PACKAGE_VERSION });
|
|
5
|
+
// Conversation context API
|
|
6
|
+
export { ConversationProvider, useConversationControls, useConversationStatus, useConversationInput, useConversationMode, useConversationFeedback, useRawConversation, useConversation, } from "@elevenlabs/react";
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,+BAA+B;AAC/B,aAAa,CAAC,EAAE,IAAI,EAAE,kBAAkB,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC,CAAC;AAEtE,2BAA2B;AAC3B,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,eAAe,GAWhB,MAAM,mBAAmB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.react-native.d.ts","sourceRoot":"","sources":["../src/index.react-native.ts"],"names":[],"mappings":"AAkDA,cAAc,SAAS,CAAC"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { registerGlobals, AudioSession, AndroidAudioTypePresets, } from "@livekit/react-native";
|
|
2
|
+
import { setSetupStrategy, webSessionSetup, } from "@elevenlabs/client/internal";
|
|
3
|
+
// Polyfill WebRTC globals needed by livekit-client in React Native
|
|
4
|
+
registerGlobals();
|
|
5
|
+
/**
|
|
6
|
+
* React Native voice session setup strategy.
|
|
7
|
+
*
|
|
8
|
+
* 1. Configures and starts the native AudioSession
|
|
9
|
+
* 2. Delegates connection + input/output setup to the web strategy
|
|
10
|
+
* 3. Wraps detach to stop the native AudioSession on cleanup
|
|
11
|
+
*/
|
|
12
|
+
async function reactNativeSessionSetup(options) {
|
|
13
|
+
await AudioSession.configureAudio({
|
|
14
|
+
android: {
|
|
15
|
+
preferredOutputList: ["speaker"],
|
|
16
|
+
audioTypeOptions: AndroidAudioTypePresets.communication,
|
|
17
|
+
},
|
|
18
|
+
ios: {
|
|
19
|
+
defaultOutput: "speaker",
|
|
20
|
+
},
|
|
21
|
+
});
|
|
22
|
+
await AudioSession.startAudioSession();
|
|
23
|
+
const result = await webSessionSetup(options);
|
|
24
|
+
const originalDetach = result.detach;
|
|
25
|
+
return {
|
|
26
|
+
...result,
|
|
27
|
+
detach: () => {
|
|
28
|
+
originalDetach();
|
|
29
|
+
AudioSession.stopAudioSession();
|
|
30
|
+
},
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
setSetupStrategy(reactNativeSessionSetup);
|
|
34
|
+
export * from "./index";
|
|
35
|
+
//# sourceMappingURL=index.react-native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.react-native.js","sourceRoot":"","sources":["../src/index.react-native.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,YAAY,EACZ,uBAAuB,GACxB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACL,gBAAgB,EAChB,eAAe,GAEhB,MAAM,6BAA6B,CAAC;AAErC,mEAAmE;AACnE,eAAe,EAAE,CAAC;AAElB;;;;;;GAMG;AACH,KAAK,UAAU,uBAAuB,CACpC,OAAgB;IAEhB,MAAM,YAAY,CAAC,cAAc,CAAC;QAChC,OAAO,EAAE;YACP,mBAAmB,EAAE,CAAC,SAAS,CAAC;YAChC,gBAAgB,EAAE,uBAAuB,CAAC,aAAa;SACxD;QACD,GAAG,EAAE;YACH,aAAa,EAAE,SAAS;SACzB;KACF,CAAC,CAAC;IACH,MAAM,YAAY,CAAC,iBAAiB,EAAE,CAAC;IAEvC,MAAM,MAAM,GAAG,MAAM,eAAe,CAAC,OAAO,CAAC,CAAC;IAE9C,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC;IACrC,OAAO;QACL,GAAG,MAAM;QACT,MAAM,EAAE,GAAG,EAAE;YACX,cAAc,EAAE,CAAC;YACjB,YAAY,CAAC,gBAAgB,EAAE,CAAC;QAClC,CAAC;KACF,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;AAE1C,cAAc,SAAS,CAAC"}
|
package/dist/version.d.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export declare const PACKAGE_VERSION = "0.
|
|
1
|
+
export declare const PACKAGE_VERSION = "1.0.0-rc.0";
|
|
2
|
+
//# sourceMappingURL=version.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,eAAe,eAAe,CAAC"}
|
package/dist/version.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAC3C,MAAM,CAAC,MAAM,eAAe,GAAG,YAAY,CAAC"}
|