@revrag-ai/embed-react-native 1.0.7 → 1.0.9

package/README.md

@@ -1,33 +1,381 @@
 # @revrag-ai/embed-react-native
 
-voice agent library
+A powerful React Native library for integrating AI-powered voice agents into your mobile applications. This SDK provides real-time voice communication capabilities with intelligent speech processing, perfect for building conversational AI experiences.
 
-## Installation
+## 🚀 Features
+
+- **AI Voice Agent Integration**: Seamlessly integrate intelligent voice agents into your React Native app
+- **Real-time Voice Communication**: High-quality, low-latency voice chat powered by LiveKit
+- **Voice Activity Detection**: Automatic speech detection and processing
+- **Customizable UI Components**: Pre-built, customizable voice interface components
+- **Cross-platform**: Works on both iOS and Android
+- **TypeScript Support**: Full TypeScript definitions included
+- **Event System**: Comprehensive event handling for voice interactions
+- **Audio Visualization**: Built-in waveform visualization for voice activity
+
+## 📦 Installation
 
 ```sh
 npm install @revrag-ai/embed-react-native
 ```
 
-## Usage
+### Peer Dependencies
+
+Make sure to install the required peer dependencies:
+
+```sh
+npm install @livekit/react-native @livekit/react-native-webrtc @react-native-async-storage/async-storage lottie-react-native react-native-gesture-handler react-native-linear-gradient react-native-reanimated react-native-safe-area-context
+```
+
+### iOS Setup
+
+Add the following to your `ios/YourApp/Info.plist`:
+
+```xml
+<key>NSMicrophoneUsageDescription</key>
+<string>This app needs microphone access for voice communication</string>
+```
+
+### Android Setup
+
+Add the following permissions to your `android/app/src/main/AndroidManifest.xml`:
+
+```xml
+<uses-permission android:name="android.permission.RECORD_AUDIO" />
+<uses-permission android:name="android.permission.INTERNET" />
+<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+```
+
+## 🎯 Quick Start
+
+### 1. Initialize the SDK
+
+Wrap your app with the initialization hook:
+
+```tsx
+import React from 'react';
+import { useInitialize } from '@revrag-ai/embed-react-native';
+
+export default function App() {
+  useInitialize({
+    apiKey: 'your-api-key-here',
+    embedUrl: 'https://your-voice-agent-server.com',
+  });
+
+  return <YourAppContent />;
+}
+```
+
+### 2. Add the Voice Button
+
+Add the voice interface component to your screen:
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import { EmbedButton } from '@revrag-ai/embed-react-native';
+
+export default function HomeScreen() {
+  return (
+    <View style={{ flex: 1 }}>
+      {/* Your app content */}
+      
+      {/* Voice agent button - floats over content */}
+      <EmbedButton />
+    </View>
+  );
+}
+```
+
+### 3. Handle Voice Events (Optional)
+
+Listen to voice agent events for custom handling:
+
+```tsx
+import React, { useEffect } from 'react';
+import { Embed, EmbedEventKeys } from '@revrag-ai/embed-react-native';
+
+export default function VoiceEnabledScreen() {
+  useEffect(() => {
+    // Listen for user data events
+    Embed.on(EmbedEventKeys.USER_DATA, (data) => {
+      console.log('User data received:', data);
+    });
+
+    // Listen for screen state events
+    Embed.on(EmbedEventKeys.SCREEN_STATE, (state) => {
+      console.log('Screen state changed:', state);
+    });
+  }, []);
+
+  return (
+    // Your component JSX
+  );
+}
+```
+
+## 📖 API Reference
+
+### `useInitialize(props: UseInitializeProps)`
+
+Initializes the voice agent SDK with your configuration.
+
+#### Parameters
+
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `apiKey` | `string` | ✅ | Your unique API key from RevRag AI |
+| `embedUrl` | `string` | ✅ | The voice agent server URL |
+
+#### Example
+
+```tsx
+useInitialize({
+  apiKey: 'key_abc123',
+  embedUrl: 'https://api.revrag.ai',
+});
+```
+
+### `<EmbedButton />`
+
+A floating action button that provides the voice interface.
+
+#### Features
+
+- **Draggable**: Users can drag the button around the screen
+- **Expandable**: Expands to show voice controls when active
+- **Auto-opening**: Automatically prompts users after 15 seconds
+- **Visual Feedback**: Shows connection status and audio visualization
+- **Customizable**: Supports custom styling
+
+#### Example
+
+```tsx
+import { EmbedButton } from '@revrag-ai/embed-react-native';
+
+// Basic usage
+<EmbedButton />
+
+// The button automatically handles:
+// - Voice agent connection
+// - Microphone permissions
+// - Audio recording and playback
+// - Call management
+```
+
+### `useVoiceAgent()`
+
+Hook for advanced voice agent control and state management.
+
+#### Returns
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `initializeVoiceAgent` | `() => Promise<void>` | Manually initialize voice connection |
+| `isLoading` | `boolean` | Connection loading state |
+| `error` | `string \| null` | Current error message |
+| `tokenDetails` | `TokenDetails` | Authentication token information |
+| `endCall` | `() => Promise<void>` | End the current voice session |
+| `room` | `Room` | LiveKit room instance |
+| `roomRef` | `RefObject<Room>` | Room reference for advanced usage |
+| `isMicMuted` | `boolean` | Microphone mute state |
+| `muteMic` | `() => void` | Mute the microphone |
+| `unmuteMic` | `() => void` | Unmute the microphone |
+| `connectionState` | `ConnectionState` | Current connection status |
+| `cleanup` | `() => void` | Clean up resources |
+
+#### Example
+
+```tsx
+import { useVoiceAgent } from '@revrag-ai/embed-react-native';
+
+function CustomVoiceInterface() {
+  const {
+    initializeVoiceAgent,
+    endCall,
+    isMicMuted,
+    muteMic,
+    unmuteMic,
+    connectionState,
+    isLoading
+  } = useVoiceAgent();
+
+  const handleStartCall = async () => {
+    try {
+      await initializeVoiceAgent();
+    } catch (error) {
+      console.error('Failed to start call:', error);
+    }
+  };
+
+  return (
+    <View>
+      <Button 
+        title={connectionState === 'connected' ? 'End Call' : 'Start Call'}
+        onPress={connectionState === 'connected' ? endCall : handleStartCall}
+        disabled={isLoading}
+      />
+      
+      {connectionState === 'connected' && (
+        <Button
+          title={isMicMuted ? 'Unmute' : 'Mute'}
+          onPress={isMicMuted ? unmuteMic : muteMic}
+        />
+      )}
+      
+      <Text>Status: {connectionState}</Text>
+    </View>
+  );
+}
+```
+
+### Event System
+
+The library provides an event system for handling voice agent interactions.
+
+#### `Embed.on(eventKey: EmbedEventKeys, callback: Function)`
+
+Listen to voice agent events.
+
+#### `Embed.Event(eventKey: string, data: any)`
+
+Send custom events to the voice agent.
+
+#### Event Types
+
+```tsx
+enum EmbedEventKeys {
+  USER_DATA = 'user_data',
+  SCREEN_STATE = 'state_data'
+}
+```
+
+#### Example
+
+```tsx
+import { Embed, EmbedEventKeys } from '@revrag-ai/embed-react-native';
+
+// Listen for events
+Embed.on(EmbedEventKeys.USER_DATA, (userData) => {
+  console.log('Received user data:', userData);
+  // Handle user data updates
+});
+
+// Send events
+await Embed.Event('custom_event', {
+  action: 'page_view',
+  page: 'profile',
+  timestamp: Date.now()
+});
+```
 
+## 🎨 Customization
 
-```js
-import { multiply } from '@revrag-ai/embed-react-native';
+### Styling the Voice Button
 
-// ...
+The `EmbedButton` component comes with built-in styling but can be customized through the configuration metadata:
 
-const result = multiply(3, 7);
+```tsx
+useInitialize({
+  apiKey: 'your-api-key',
+  embedUrl: 'your-server-url',
+});
 ```
 
+## 🔧 Advanced Usage
 
-## Contributing
+### Context Data Management
+
+Provide rich context to your voice agent for more intelligent conversations:
+
+```tsx
+const contextData = {
+  user: {
+    id: 'U123456',
+    name: 'John Doe',
+    accountDetails: {
+      balance: 1500.50,
+      lastTransaction: '2024-01-15',
+      accountType: 'premium'
+    }
+  },
+  currentScreen: 'dashboard',
+  availableActions: ['transfer', 'balance_inquiry', 'transaction_history']
+};
+
+useInitialize({
+  apiKey: 'your-api-key',
+  embedUrl: 'your-server-url',
+});
+```
+
+### Error Handling
+
+```tsx
+import { useVoiceAgent } from '@revrag-ai/embed-react-native';
+
+function VoiceComponent() {
+  const { error, initializeVoiceAgent } = useVoiceAgent();
+
+  useEffect(() => {
+    if (error) {
+      console.error('Voice agent error:', error);
+      // Handle error - show user message, retry logic, etc.
+    }
+  }, [error]);
+
+  // Rest of component...
+}
+```
+
+## 🛠 Troubleshooting
+
+### Common Issues
+
+1. **Microphone Permission Denied**
+   - Ensure you've added the microphone permission to your platform-specific config files
+   - Check that users have granted microphone permission
+
+2. **Connection Issues**
+   - Verify your API key is correct
+   - Ensure the `embedUrl` is accessible from your app
+   - Check network connectivity
+
+3. **Audio Not Working**
+   - Test on a physical device (audio may not work in simulators)
+   - Verify audio output settings
+   - Check that other apps can use the microphone
+
+### Debug Mode
+
+Enable detailed logging for debugging:
+
+```tsx
+// Add this before initializing
+console.log('Voice Agent Debug Mode Enabled');
+
+useInitialize({
+  apiKey: 'your-api-key',
+  embedUrl: 'your-server-url',
+});
+```
+
+## 📱 Platform Support
+
+- **iOS**: 12.0+
+- **Android**: API level 21+ (Android 5.0)
+- **React Native**: 0.70+
+
+## 🤝 Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
 
-## License
+## 📄 License
 
 MIT
 
 ---
 
-Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+**Made with ❤️ by [RevRag AI](https://www.revrag.ai)**
+
+For support, visit our [documentation](https://docs.revrag.ai) or contact us at [contact@revrag.ai](mailto:contact@revrag.ai).

package/lib/commonjs/api/api.js

@@ -33,8 +33,8 @@ class APIService {
     }
     const AgentData = await (0, _storeKey.getAgentData)();
     console.log('AgentData', AgentData);
-    if (AgentData?.onwidUrl) {
-      this.apiBaseUrl = AgentData.onwidUrl;
+    if (AgentData?.embedUrl) {
+      this.apiBaseUrl = AgentData.embedUrl;
       this.isInitialized = true;
       console.log('API_BASE_URL initialized:', this.apiBaseUrl);
     } else {

package/lib/commonjs/hooks/initialize.js

@@ -14,8 +14,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  * Required Parameters:
  * - apiKey: string - Unique identifier for the user
- * - deviceId: string - Unique identifier for the device
- * - metadata: object - Additional device/user information
  *
  * The initialization process:
  * 1. Validates required input parameters
@@ -25,8 +23,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 
 function useInitialize({
   apiKey,
-  onwidUrl,
-  metadata
+  embedUrl
 }) {
   const checkPermissions = async () => {
     try {
@@ -57,11 +54,8 @@ function useInitialize({
     if (!apiKey || typeof apiKey !== 'string') {
       throw new Error('apiKey is required and must be a string');
     }
-    if (!onwidUrl || typeof onwidUrl !== 'string') {
-      throw new Error('onwidUrl is required and must be a string');
-    }
-    if (metadata && typeof metadata === 'object' && !metadata.config) {
-      throw new Error('metadata must contain a config object');
+    if (!embedUrl || typeof embedUrl !== 'string') {
+      throw new Error('embedUrl is required and must be a string');
     }
   };
   const initialize = async () => {
@@ -75,7 +69,7 @@ function useInitialize({
       // Store API key in keychain
       await (0, _storeKey.setAgentData)({
         apiKey,
-        onwidUrl
+        embedUrl
       });
 
       // Get the APIService instance and initialize it

package/lib/module/api/api.js

@@ -30,8 +30,8 @@ export class APIService {
     }
     const AgentData = await getAgentData();
     console.log('AgentData', AgentData);
-    if (AgentData?.onwidUrl) {
-      this.apiBaseUrl = AgentData.onwidUrl;
+    if (AgentData?.embedUrl) {
+      this.apiBaseUrl = AgentData.embedUrl;
       this.isInitialized = true;
       console.log('API_BASE_URL initialized:', this.apiBaseUrl);
     } else {

package/lib/module/hooks/initialize.js

@@ -5,8 +5,6 @@
  *
  * Required Parameters:
  * - apiKey: string - Unique identifier for the user
- * - deviceId: string - Unique identifier for the device
- * - metadata: object - Additional device/user information
  *
  * The initialization process:
  * 1. Validates required input parameters
@@ -19,8 +17,7 @@ import registerAgent from "./initialize.livekit.js";
 import { PermissionsAndroid, Platform } from 'react-native';
 export function useInitialize({
   apiKey,
-  onwidUrl,
-  metadata
+  embedUrl
 }) {
   const checkPermissions = async () => {
     try {
@@ -51,11 +48,8 @@ export function useInitialize({
     if (!apiKey || typeof apiKey !== 'string') {
       throw new Error('apiKey is required and must be a string');
     }
-    if (!onwidUrl || typeof onwidUrl !== 'string') {
-      throw new Error('onwidUrl is required and must be a string');
-    }
-    if (metadata && typeof metadata === 'object' && !metadata.config) {
-      throw new Error('metadata must contain a config object');
+    if (!embedUrl || typeof embedUrl !== 'string') {
+      throw new Error('embedUrl is required and must be a string');
     }
   };
   const initialize = async () => {
@@ -69,7 +63,7 @@ export function useInitialize({
       // Store API key in keychain
       await setAgentData({
         apiKey,
-        onwidUrl
+        embedUrl
       });
 
       // Get the APIService instance and initialize it

package/package.json

@@ -1,21 +1,20 @@
 {
   "name": "@revrag-ai/embed-react-native",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "source": "./src/index.tsx",
-  "description": "Voice Agent SDK for React Native - AI-powered voice communication with real-time speech processing",
+  "description": "A powerful React Native library for integrating AI-powered voice agents into mobile applications. Features real-time voice communication, intelligent speech processing, customizable UI components, and comprehensive event handling for building conversational AI experiences.",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",
-  "types": "./lib/typescript/commonjs/src/index.d.ts",
+  "types": "./lib/typescript/src/index.d.ts",
   "typesVersions": {
     "*": {
       "*": [
-        "./lib/typescript/commonjs/src/*"
+        "./lib/typescript/src/*"
       ]
     }
   },
   "exports": {
     ".": {
-      "types": "./lib/typescript/commonjs/src/index.d.ts",
       "import": "./lib/module/index.js",
       "require": "./lib/commonjs/index.js",
       "default": "./lib/module/index.js"
@@ -62,7 +61,9 @@
     "protect": "node -e \"const crypto = require('crypto'); const fs = require('fs'); const config = { hash: crypto.randomBytes(32).toString('hex'), createdAt: new Date().toISOString(), note: 'Protected build', version: require('./package.json').version }; fs.writeFileSync('.onwid-security.json', JSON.stringify(config, null, 2)); console.log('✅ Code protected');\"",
     "publish:safe": "yarn clean && bob build && yarn fix-js && yarn protect && npm publish --access public",
     "publish:beta": "yarn clean && bob build && yarn fix-js && yarn protect && npm publish --access public --tag beta",
-    "publish:alpha": "yarn clean && bob build && yarn fix-js && yarn protect && npm publish --access public --tag alpha"
+    "publish:alpha": "yarn clean && bob build && yarn fix-js && yarn protect && npm publish --access public --tag alpha",
+    "docs:check": "echo '📚 Documentation files:' && ls -la *.md && echo '✅ Documentation is up to date'",
+    "docs:validate": "echo '🔍 Validating documentation...' && node -e \"const fs = require('fs'); const files = ['README.md', 'API.md', 'EXAMPLES.md']; files.forEach(f => { if (!fs.existsSync(f)) throw new Error('Missing: ' + f); }); console.log('✅ All documentation files present');\""
   },
   "keywords": [
     "react-native",
@@ -220,8 +221,7 @@
       [
         "typescript",
         {
-          "project": "tsconfig.build.json",
-          "esm": true
+          "project": "tsconfig.build.json"
         }
       ]
     ]

package/lib/typescript/commonjs/package.json

@@ -1 +0,0 @@
-{"type":"commonjs"}

package/lib/typescript/module/package.json

@@ -1 +0,0 @@
-{"type":"module"}