@revrag-ai/embed-react-native 1.0.6 → 1.0.8

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 revragai
+Copyright (c) 2025 RevragAi
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights

package/README.md

@@ -1,103 +1,39 @@
 # @revrag-ai/embed-react-native
 
-[![npm version](https://badge.fury.io/js/%40revrag-ai%2Fembed-react-native.svg)](https://badge.fury.io/js/%40revrag-ai%2Fembed-react-native)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-
-A powerful Voice Agent SDK for React Native that enables AI-powered voice communication with real-time speech processing. Built with LiveKit for seamless voice interactions.
+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.
 
 ## 🚀 Features
 
-- **Real-time Voice Communication**: High-quality voice chat powered by LiveKit
-- **AI Voice Agent Integration**: Seamless integration with AI voice assistants
-- **Cross-platform Support**: Works on both iOS and Android
+- **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-driven Architecture**: Flexible event system for custom integrations
-- **Secure API Communication**: Protected API calls with automatic initialization
-- **Easy Integration**: Simple hooks and components for quick setup
+- **Event System**: Comprehensive event handling for voice interactions
+- **Audio Visualization**: Built-in waveform visualization for voice activity
 
 ## 📦 Installation
 
-```bash
+```sh
 npm install @revrag-ai/embed-react-native
-# or
-yarn add @revrag-ai/embed-react-native
 ```
 
 ### Peer Dependencies
 
-Make sure you have the following peer dependencies installed:
+Make sure to install the required peer dependencies:
 
-```bash
+```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
 ```
 
-### Important: React Native Reanimated Setup
-
-**This library requires `react-native-reanimated` to be properly installed and configured.** If you encounter errors like "Cannot read property 'makeMutable' of undefined", follow these steps:
-
-1. **Install react-native-reanimated:**
-   ```bash
-   npm install react-native-reanimated
-   # or
-   yarn add react-native-reanimated
-   ```
-
-2. **Add Reanimated's babel plugin to your `babel.config.js`:**
-   ```javascript
-   module.exports = {
-     presets: ['module:@react-native/babel-preset'],
-     plugins: [
-       'react-native-reanimated/plugin',
-     ],
-   };
-   ```
-
-3. **For iOS:** Run `cd ios && pod install`
-
-4. **For Android:** Add the following to `android/app/src/main/java/.../MainApplication.java`:
-   ```java
-   import com.swmansion.reanimated.ReanimatedPackage;
-   
-   @Override
-   protected List<ReactPackage> getPackages() {
-     return Arrays.<ReactPackage>asList(
-       new MainReactPackage(),
-       new ReanimatedPackage() // Add this line
-     );
-   }
-   ```
-
-5. **Clean and rebuild your project:**
-   ```bash
-   # For React Native CLI
-   npx react-native run-android
-   npx react-native run-ios
-   
-   # For Expo (if using)
-   expo run:android
-   expo run:ios
-   ```
-
-For more detailed instructions, visit: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started
-
-### Setup Verification
-
-After installation, you can verify your setup by running:
-
-```bash
-npx @revrag-ai/embed-react-native verify-setup
-```
-
-This will check if all dependencies are properly installed and configured.
-
-## 🛠️ Setup
-
 ### iOS Setup
 
-Add the following to your `ios/Podfile`:
+Add the following to your `ios/YourApp/Info.plist`:
 
-```ruby
-pod 'RNFS', :path => '../node_modules/react-native-fs'
+```xml
+<key>NSMicrophoneUsageDescription</key>
+<string>This app needs microphone access for voice communication</string>
 ```
 
 ### Android Setup
@@ -110,293 +46,336 @@ Add the following permissions to your `android/app/src/main/AndroidManifest.xml`
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 ```
 
-## 🔧 Troubleshooting
+## 🎯 Quick Start
+
+### 1. Initialize the SDK
 
-### "Cannot read property 'makeMutable' of undefined"
+Wrap your app with the initialization hook:
 
-This error occurs when `react-native-reanimated` is not properly installed or configured. Follow these steps:
+```tsx
+import React from 'react';
+import { useInitialize } from '@revrag-ai/embed-react-native';
 
-1. **Ensure react-native-reanimated is installed:**
-   ```bash
-   npm list react-native-reanimated
-   ```
+export default function App() {
+  useInitialize({
+    apiKey: 'your-api-key-here',
+    embedUrl: 'https://your-voice-agent-server.com',
+  });
 
-2. **Check your babel.config.js includes the reanimated plugin:**
-   ```javascript
-   module.exports = {
-     presets: ['module:@react-native/babel-preset'],
-     plugins: [
-       'react-native-reanimated/plugin', // <- This line is crucial
-     ],
-   };
-   ```
+  return <YourAppContent />;
+}
+```
 
-3. **Clear Metro cache and rebuild:**
-   ```bash
-   npx react-native start --reset-cache
-   npx react-native run-android  # or run-ios
-   ```
+### 2. Add the Voice Button
 
-4. **For iOS, ensure pods are installed:**
-   ```bash
-   cd ios && pod install && cd ..
-   ```
+Add the voice interface component to your screen:
 
-### Component Not Rendering
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import { EmbedButton } from '@revrag-ai/embed-react-native';
 
-If the OnwidButton component doesn't appear or crashes:
+export default function HomeScreen() {
+  return (
+    <View style={{ flex: 1 }}>
+      {/* Your app content */}
+      
+      {/* Voice agent button - floats over content */}
+      <EmbedButton />
+    </View>
+  );
+}
+```
 
-- Ensure all peer dependencies are installed
-- Check that your app has proper permissions for microphone access
-- Verify your API key and server URL are correct
+### 3. Handle Voice Events (Optional)
 
-### Voice Connection Issues
+Listen to voice agent events for custom handling:
 
-If voice connection fails:
+```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);
+    });
+  }, []);
 
-- Check your network connection
-- Verify your API key is valid
-- Ensure microphone permissions are granted
-- Check the console for detailed error messages
+  return (
+    // Your component JSX
+  );
+}
+```
 
-## 🎯 Quick Start
+## 📖 API Reference
 
-### 1. Initialize the SDK
+### `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
-import { useInitialize } from '@revrag-ai/embed-react-native';
+useInitialize({
+  apiKey: 'key_abc123',
+  embedUrl: 'https://api.revrag.ai',
+});
+```
 
-function App() {
-  useInitialize({
-    apiKey: 'your-api-key',
-    onwidUrl: 'https://your-onwid-server.com',
-    metadata: {
-      config: {
-        // Your configuration
-      }
-    }
-  });
+### `<EmbedButton />`
 
-  return (
-    // Your app content
-  );
-}
+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
 ```
 
-### 2. Use the Voice Agent
+### `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 VoiceComponent() {
+function CustomVoiceInterface() {
   const {
     initializeVoiceAgent,
     endCall,
+    isMicMuted,
     muteMic,
     unmuteMic,
-    isMicMuted,
     connectionState,
-    isLoading,
-    error
+    isLoading
   } = useVoiceAgent();
 
-  const startVoiceCall = async () => {
+  const handleStartCall = async () => {
     try {
       await initializeVoiceAgent();
     } catch (error) {
-      console.error('Failed to start voice call:', error);
+      console.error('Failed to start call:', error);
     }
   };
 
   return (
     <View>
-      <Button title="Start Voice Call" onPress={startVoiceCall} />
-      <Button title="End Call" onPress={endCall} />
       <Button 
-        title={isMicMuted ? "Unmute" : "Mute"} 
-        onPress={isMicMuted ? unmuteMic : muteMic} 
+        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>
-      {isLoading && <Text>Loading...</Text>}
-      {error && <Text>Error: {error}</Text>}
     </View>
   );
 }
 ```
 
-### 3. Handle Events
+### Event System
 
-```tsx
-import { onwid, EventKeys } from '@revrag-ai/embed-react-native';
-
-// Send user data
-await onwid.Event(EventKeys.USER_DATA, {
-  app_user_id: 'user123',
-  name: 'John Doe',
-  preferences: {
-    language: 'en'
-  }
-});
+The library provides an event system for handling voice agent interactions.
 
-// Send screen state
-await onwid.Event(EventKeys.SCREEN_STATE, {
-  screen: 'home',
-  timestamp: Date.now()
-});
-```
+#### `Embed.on(eventKey: EmbedEventKeys, callback: Function)`
 
-### 4. TypeScript Usage
+Listen to voice agent events.
 
-For TypeScript projects, you can import types for better type safety:
+#### `Embed.Event(eventKey: string, data: any)`
 
-```tsx
-import { 
-  OnwidButton, 
-  useInitialize, 
-  useVoiceAgent,
-  type UseInitializeProps,
-  type UseVoiceAgentReturn,
-  type ApiResponse,
-  EventKeys 
-} from '@revrag-ai/embed-react-native';
-
-// Type-safe initialization
-const initProps: UseInitializeProps = {
-  apiKey: 'your-api-key',
-  onwidUrl: 'https://your-onwid-server.com',
-  metadata: {
-    config: {
-      theme: 'dark'
-    }
-  }
-};
+Send custom events to the voice agent.
 
-function MyVoiceComponent() {
-  useInitialize(initProps);
-  
-  const voiceAgent: UseVoiceAgentReturn = useVoiceAgent();
-  
-  const handleStartCall = async (): Promise<void> => {
-    try {
-      await voiceAgent.initializeVoiceAgent();
-    } catch (error) {
-      console.error('Failed to start call:', error);
-    }
-  };
+#### Event Types
 
-  return (
-    <View>
-      <OnwidButton />
-      <Button title="Start Call" onPress={handleStartCall} />
-    </View>
-  );
+```tsx
+enum EmbedEventKeys {
+  USER_DATA = 'user_data',
+  SCREEN_STATE = 'state_data'
 }
 ```
 
-### 5. Use the OnWid Button Component
+#### Example
 
 ```tsx
-import { OnwidButton } from '@revrag-ai/embed-react-native';
-
-function MyComponent() {
-  return (
-    <View>
-      <OnwidButton />
-    </View>
-  );
-}
-```
+import { Embed, EmbedEventKeys } from '@revrag-ai/embed-react-native';
 
-## 📚 API Reference
+// Listen for events
+Embed.on(EmbedEventKeys.USER_DATA, (userData) => {
+  console.log('Received user data:', userData);
+  // Handle user data updates
+});
 
-### Hooks
+// Send events
+await Embed.Event('custom_event', {
+  action: 'page_view',
+  page: 'profile',
+  timestamp: Date.now()
+});
+```
 
-#### `useInitialize(props: UseInitializeProps)`
+## 🎨 Customization
 
-Initializes the OnWid SDK with your configuration.
+### Styling the Voice Button
 
-**Props:**
-- `apiKey: string` - Your OnWid API key
-- `onwidUrl: string` - Your OnWid server URL
-- `metadata?: object` - Optional metadata configuration
+The `EmbedButton` component comes with built-in styling but can be customized through the configuration metadata:
 
-#### `useVoiceAgent(): UseVoiceAgentReturn`
+```tsx
+useInitialize({
+  apiKey: 'your-api-key',
+  embedUrl: 'your-server-url',
+});
+```
 
-Provides voice agent functionality.
+## 🔧 Advanced Usage
 
-**Returns:**
-- `initializeVoiceAgent: () => Promise<void>` - Start voice agent
-- `endCall: () => Promise<void>` - End the voice call
-- `muteMic: () => void` - Mute microphone
-- `unmuteMic: () => void` - Unmute microphone
-- `isMicMuted: boolean` - Microphone mute state
-- `connectionState: ConnectionState` - Current connection state
-- `isLoading: boolean` - Loading state
-- `error: string | null` - Error message if any
+### Context Data Management
 
-### Components
+Provide rich context to your voice agent for more intelligent conversations:
 
-#### `OnwidButton`
+```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']
+};
 
-A customizable button component with built-in voice agent functionality.
+useInitialize({
+  apiKey: 'your-api-key',
+  embedUrl: 'your-server-url',
+});
+```
 
-### Classes
+### Error Handling
 
-#### `APIService`
+```tsx
+import { useVoiceAgent } from '@revrag-ai/embed-react-native';
 
-Singleton service for API communication.
+function VoiceComponent() {
+  const { error, initializeVoiceAgent } = useVoiceAgent();
 
-```tsx
-import { APIService } from '@revrag-ai/embed-react-native';
+  useEffect(() => {
+    if (error) {
+      console.error('Voice agent error:', error);
+      // Handle error - show user message, retry logic, etc.
+    }
+  }, [error]);
 
-const apiService = APIService.getInstance();
-await apiService.initialize();
+  // Rest of component...
+}
 ```
-### Events
 
-#### `EventKeys`
+## 🛠 Troubleshooting
 
-Available event types:
-- `USER_DATA` - User information events
-- `SCREEN_STATE` - Screen state events
+### Common Issues
 
-## 🔒 Security
+1. **Microphone Permission Denied**
+   - Ensure you've added the microphone permission to your platform-specific config files
+   - Check that users have granted microphone permission
 
-The OnWid SDK includes built-in security features:
+2. **Connection Issues**
+   - Verify your API key is correct
+   - Ensure the `embedUrl` is accessible from your app
+   - Check network connectivity
 
-- Automatic API key management
-- Secure token handling
-- Protected API endpoints
-- Integrity checks
+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
 
-## 🤝 Contributing
+### Debug Mode
 
-We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+Enable detailed logging for debugging:
 
-## 📄 License
+```tsx
+// Add this before initializing
+console.log('Voice Agent Debug Mode Enabled');
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+useInitialize({
+  apiKey: 'your-api-key',
+  embedUrl: 'your-server-url',
+});
+```
 
-## 🆘 Support
+## 📱 Platform Support
 
-- 📧 Email: contact@revrag.ai
-- 🐛 Issues: [GitHub Issues](https://github.com/RevRag-ai/embed-react-native/issues)
-- 📖 Documentation: [Integration Guide](INTEGRATION_GUIDE.md)
+- **iOS**: 12.0+
+- **Android**: API level 21+ (Android 5.0)
+- **React Native**: 0.70+
 
-## 🏷️ Version History
+## 🤝 Contributing
+
+See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
 
-### 1.0.3
-- Enhanced APIService with singleton pattern
-- Improved error handling and initialization
-- Better TypeScript support
-- Fixed voice component compatibility
+## 📄 License
 
-### 1.0.2
-- Initial stable release
-- Core voice agent functionality
-- Event system implementation
+MIT
 
 ---
 
-Made with ❤️ by [RevRag AI](https://www.revrag.ai)
+**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/android/CMakeLists.txt

@@ -0,0 +1,15 @@
+cmake_minimum_required(VERSION 3.4.1)
+project(EmbedReactNative)
+
+set (CMAKE_VERBOSE_MAKEFILE ON)
+set (CMAKE_CXX_STANDARD 14)
+
+add_library(revrag-ai-embed-react-native            SHARED
+            ../cpp/revrag-ai-embed-react-native.cpp
+            cpp-adapter.cpp
+)
+
+# Specifies a path to native header files.
+include_directories(
+            ../cpp
+)