@revrag-ai/embed-react-native 1.0.5

package/lib/module/onwidApi/api.js

@@ -0,0 +1,184 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTokenDetails = exports.updateUserData = exports.registerOnInitialize = exports.initializeApi = exports.APIService = void 0;
+const store_key_1 = require("../store.key");
+/**
+ * APIService class that ensures proper initialization before API calls
+ */
+class APIService {
+    constructor() {
+        this.apiBaseUrl = null;
+        this.isInitialized = false;
+    }
+    /**
+     * Get singleton instance of APIService
+     */
+    static getInstance() {
+        if (!APIService.instance) {
+            APIService.instance = new APIService();
+        }
+        return APIService.instance;
+    }
+    /**
+     * Initialize the API service with the base URL
+     */
+    async initialize() {
+        if (this.isInitialized && this.apiBaseUrl) {
+            return; // Already initialized
+        }
+        const AgentData = await (0, store_key_1.getAgentData)();
+        console.log('AgentData', AgentData);
+        if (AgentData === null || AgentData === void 0 ? void 0 : AgentData.onwidUrl) {
+            this.apiBaseUrl = AgentData.onwidUrl;
+            this.isInitialized = true;
+            console.log('API_BASE_URL initialized:', this.apiBaseUrl);
+        }
+        else {
+            throw new Error('API base URL not found in keychain');
+        }
+    }
+    /**
+     * Ensure the service is initialized before making API calls
+     */
+    async ensureInitialized() {
+        if (!this.isInitialized || !this.apiBaseUrl) {
+            await this.initialize();
+        }
+    }
+    /**
+     * Get headers with stored API key
+     */
+    async getHeaders() {
+        const AgentData = await (0, store_key_1.getAgentData)();
+        if (!(AgentData === null || AgentData === void 0 ? void 0 : AgentData.apiKey)) {
+            throw new Error('API key not found in keychain');
+        }
+        return {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${AgentData.apiKey}`,
+            'X-Revrag-Embedded-Key': AgentData.apiKey,
+        };
+    }
+    /**
+     * Register a new user/device on initialization
+     * @returns Promise with registration response
+     */
+    async registerOnInitialize() {
+        try {
+            await this.ensureInitialized();
+            console.log('registerOnInitialize ApiData', this.apiBaseUrl);
+            const headers = await this.getHeaders();
+            const response = await fetch(`${this.apiBaseUrl}/embedded-agent/initialize`, {
+                method: 'GET',
+                headers: headers,
+            });
+            const data = await response.json();
+            console.log('dat config data after register', data);
+            await (0, store_key_1.setAgentData)(data, '@config_data');
+            if (!response.ok) {
+                console.log('registerOnInitialize error', data.error);
+                throw new Error(data.error || 'Registration failed');
+            }
+            return {
+                success: true,
+                data: data,
+            };
+        }
+        catch (error) {
+            console.log('registerOnInitialize error', error);
+            return {
+                success: false,
+                error: error instanceof Error ? error.message : 'Unknown error occurred',
+            };
+        }
+    }
+    /**
+     * Update user data
+     * @param params Update parameters including userId and data to update
+     * @returns Promise with update response
+     */
+    async updateUserData(params) {
+        try {
+            await this.ensureInitialized();
+            console.log('params', params, `${this.apiBaseUrl}/embedded-agent/user-context/update?app_user_id=${params.data.app_user_id}`);
+            console.log('updateUserData');
+            const headers = await this.getHeaders();
+            const response = await fetch(`${this.apiBaseUrl}/embedded-agent/user-context/update?app_user_id=${params.data.app_user_id}`, {
+                method: 'PUT',
+                headers,
+                body: JSON.stringify({ [params.eventKey]: params.data }),
+            });
+            const data = await response.json();
+            console.log('data after update', data);
+            if (!response.ok) {
+                throw new Error(data.error || 'Update failed');
+            }
+            return {
+                success: true,
+            };
+        }
+        catch (error) {
+            console.log('updateUserData error', error);
+            return {
+                success: false,
+                error: error instanceof Error ? error.message : 'Unknown error occurred',
+            };
+        }
+    }
+    /**
+     * Get token details for a user
+     * @param params Parameters including app_user_id and call_type
+     * @returns Promise with token details
+     */
+    async getTokenDetails(params) {
+        try {
+            await this.ensureInitialized();
+            const headers = await this.getHeaders();
+            console.log('params', this.apiBaseUrl, params, headers, `${this.apiBaseUrl}/embedded-agent/token`);
+            const response = await fetch(`${this.apiBaseUrl}/embedded-agent/token`, {
+                method: 'POST',
+                headers,
+                body: JSON.stringify(params),
+            });
+            const data = await response.json();
+            console.log('data', data);
+            if (!response.ok) {
+                throw new Error(data.error || 'Failed to get token details');
+            }
+            return {
+                success: true,
+                data: data,
+            };
+        }
+        catch (error) {
+            console.log('getTokenDetails error', error);
+            return {
+                success: false,
+                error: error instanceof Error ? error.message : 'Unknown error occurred',
+            };
+        }
+    }
+}
+exports.APIService = APIService;
+APIService.instance = null;
+// Export convenience functions for backward compatibility
+const initializeApi = async () => {
+    const apiService = APIService.getInstance();
+    await apiService.initialize();
+};
+exports.initializeApi = initializeApi;
+const registerOnInitialize = async () => {
+    const apiService = APIService.getInstance();
+    return await apiService.registerOnInitialize();
+};
+exports.registerOnInitialize = registerOnInitialize;
+const updateUserData = async (params) => {
+    const apiService = APIService.getInstance();
+    return await apiService.updateUserData(params);
+};
+exports.updateUserData = updateUserData;
+const getTokenDetails = async (params) => {
+    const apiService = APIService.getInstance();
+    return await apiService.getTokenDetails(params);
+};
+exports.getTokenDetails = getTokenDetails;

package/lib/module/onwidApi/api.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/module/store.key.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteFromDetail = exports.getAgentData = exports.setAgentData = void 0;
+const async_storage_1 = __importDefault(require("@react-native-async-storage/async-storage"));
+const STORAGE_KEY = '@user_data';
+const setAgentData = async (data, key = STORAGE_KEY) => {
+    try {
+        const jsonString = JSON.stringify(data);
+        await async_storage_1.default.setItem(key, jsonString);
+        console.log('Data saved to storage successfully');
+    }
+    catch (error) {
+        console.error('Storage save error:', error);
+        throw error; // Re-throw to allow caller to handle
+    }
+};
+exports.setAgentData = setAgentData;
+const getAgentData = async (key = STORAGE_KEY) => {
+    try {
+        const jsonString = await async_storage_1.default.getItem(key);
+        if (!jsonString) {
+            console.log('No data stored');
+            return null;
+        }
+        const data = JSON.parse(jsonString);
+        return data;
+    }
+    catch (error) {
+        console.error('Storage fetch error:', error);
+        throw error; // Re-throw to allow caller to handle
+    }
+};
+exports.getAgentData = getAgentData;
+const deleteFromDetail = async (key) => {
+    try {
+        await async_storage_1.default.removeItem(key);
+        console.log('Storage data reset successfully');
+    }
+    catch (error) {
+        console.error('Storage reset error:', error);
+        throw error; // Re-throw to allow caller to handle
+    }
+};
+exports.deleteFromDetail = deleteFromDetail;

package/lib/module/style/onwidButton.style.js

@@ -0,0 +1,230 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.onwidButtonStyles = exports.createOnwidButtonStyles = exports.BUTTON_HEIGHT = exports.EXPANDED_WIDTH = exports.BUTTON_WIDTH = void 0;
+const react_native_1 = require("react-native");
+const { width: SCREEN_WIDTH } = react_native_1.Dimensions.get('window');
+// Calculate dynamic dimensions based on screen size
+const calculateDimensions = () => {
+    const isSmallScreen = SCREEN_WIDTH < 375;
+    const isLargeScreen = SCREEN_WIDTH > 768;
+    return {
+        BUTTON_WIDTH: isSmallScreen ? 60 : isLargeScreen ? 60 : 60,
+        EXPANDED_WIDTH: SCREEN_WIDTH * (isSmallScreen ? 0.9 : isLargeScreen ? 0.7 : 0.8),
+        BUTTON_HEIGHT: isSmallScreen ? 60 : isLargeScreen ? 60 : 60,
+        SPACING: {
+            SMALL: isSmallScreen ? 8 : isLargeScreen ? 16 : 12,
+            MEDIUM: isSmallScreen ? 12 : isLargeScreen ? 20 : 16,
+            LARGE: isSmallScreen ? 16 : isLargeScreen ? 24 : 20,
+        },
+        BORDER_RADIUS: {
+            SMALL: isSmallScreen ? 20 : isLargeScreen ? 30 : 25,
+            MEDIUM: isSmallScreen ? 25 : isLargeScreen ? 35 : 30,
+            LARGE: isSmallScreen ? 30 : isLargeScreen ? 40 : 35,
+        },
+    };
+};
+const dimensions = calculateDimensions();
+exports.BUTTON_WIDTH = dimensions.BUTTON_WIDTH;
+exports.EXPANDED_WIDTH = dimensions.EXPANDED_WIDTH;
+exports.BUTTON_HEIGHT = dimensions.BUTTON_HEIGHT;
+const createOnwidButtonStyles = (customStyles) => {
+    const { buttonWidth = exports.BUTTON_WIDTH, buttonHeight = exports.BUTTON_HEIGHT, backgroundColor = 'transparent', borderRadius = dimensions.BORDER_RADIUS.MEDIUM, marginBottom = dimensions.SPACING.LARGE, spacing = dimensions.SPACING, } = customStyles || {};
+    return react_native_1.StyleSheet.create({
+        container: {
+            position: 'absolute',
+            bottom: 0,
+            right: 0,
+            height: '100%',
+            width: '100%',
+            flexDirection: 'row',
+            justifyContent: 'flex-end',
+            alignItems: 'flex-end',
+            padding: spacing.MEDIUM,
+            backgroundColor: 'transparent',
+            pointerEvents: 'box-none',
+        },
+        button: {
+            width: buttonWidth,
+            height: buttonHeight,
+            borderRadius: borderRadius,
+            marginBottom: marginBottom,
+            backgroundColor: backgroundColor,
+        },
+        pressable: {
+            borderRadius: 100,
+            padding: 5,
+            margin: 0,
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100%',
+            width: '100%',
+        },
+        menu: {
+            position: 'absolute',
+            top: 0,
+            backgroundColor: 'white',
+            borderRadius: dimensions.BORDER_RADIUS.SMALL,
+            padding: spacing.MEDIUM,
+        },
+        menuLeft: {
+            right: '100%',
+            marginRight: spacing.SMALL,
+        },
+        menuRight: {
+            left: '100%',
+            marginLeft: spacing.SMALL,
+        },
+        iconText: {
+            color: 'white',
+            fontSize: 20,
+        },
+        buttonContent: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            // height: '100%',
+        },
+        iconImage: {
+            width: buttonWidth - 10,
+            height: buttonHeight - 10,
+            resizeMode: 'contain',
+            justifyContent: 'center',
+            alignItems: 'center',
+            alignSelf: 'center',
+            margin: 0,
+            padding: 0,
+        },
+        startCallButton: {
+            height: 36,
+            borderRadius: dimensions.BORDER_RADIUS.MEDIUM,
+            backgroundColor: '#000',
+            justifyContent: 'center',
+            alignItems: 'center',
+            paddingHorizontal: spacing.SMALL + 5,
+            minWidth: 70,
+            maxWidth: '90%',
+        },
+        startCallText: {
+            color: 'white',
+            fontSize: 12,
+            fontWeight: '500',
+        },
+        rowContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%',
+            margin: 0,
+            padding: 0,
+        },
+        linearGradient: {
+            flex: 1,
+            borderRadius: dimensions.BORDER_RADIUS.LARGE,
+            flexDirection: 'row',
+            width: exports.BUTTON_WIDTH,
+        },
+        buttonContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 4,
+        },
+        endCallButton: {
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: 44,
+            height: 44,
+        },
+        muteButton: {
+            borderRadius: 100,
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: 44,
+            height: 44,
+        },
+        micIcon: {
+            width: 24,
+            height: 24,
+            tintColor: 'white',
+        },
+        endCallIcon: {
+            width: 24,
+            height: 24,
+            tintColor: 'white',
+        },
+        buttonImage: {
+            width: '100%',
+            height: '100%',
+            resizeMode: 'contain',
+        },
+        // New styles for expanded button layout
+        expandedContent: {
+            flexDirection: 'row',
+            flex: 1,
+            alignItems: 'center',
+            width: '100%',
+            justifyContent: 'space-between',
+        },
+        leftSection: {
+            alignItems: 'flex-start',
+        },
+        centerSection: {
+            alignItems: 'center',
+            height: '100%',
+        },
+        rightSection: {
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+        },
+        agentInfoContainer: {
+            height: exports.BUTTON_HEIGHT,
+            flexDirection: 'row',
+            alignItems: 'center',
+            overflow: 'hidden',
+        },
+        agentTextContainer: {
+            justifyContent: 'center',
+            height: '100%',
+            flex: 1,
+        },
+        agentNameText: {
+            fontFamily: 'Inter-Medium',
+            fontSize: 14,
+            fontWeight: '500',
+            color: 'white',
+        },
+        statusText: {
+            fontFamily: 'Inter-Regular',
+            fontSize: 11,
+            fontWeight: '300',
+            color: 'white',
+        },
+        // Chip styles
+        chip: {
+            height: 30,
+            borderRadius: dimensions.BORDER_RADIUS.SMALL,
+            marginBottom: 10,
+            alignSelf: 'flex-end',
+            overflow: 'hidden',
+            elevation: 3,
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.3,
+            shadowRadius: 2,
+        },
+        chipGradient: {
+            height: '100%',
+            paddingHorizontal: spacing.MEDIUM,
+            paddingVertical: spacing.SMALL / 2,
+            borderRadius: dimensions.BORDER_RADIUS.SMALL,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        chipText: {
+            color: 'white',
+            fontSize: 12,
+            fontWeight: '500',
+        },
+    });
+};
+exports.createOnwidButtonStyles = createOnwidButtonStyles;
+// Default styles export with dynamic dimensions
+exports.onwidButtonStyles = (0, exports.createOnwidButtonStyles)();

package/lib/module/utils/reanimatedHelpers.js

@@ -0,0 +1,87 @@
+"use strict";
+/**
+ * @file reanimatedHelpers.ts
+ * @description Utility functions to handle react-native-reanimated configuration and provide fallbacks
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getReanimatedAPI = getReanimatedAPI;
+exports.checkReanimatedSetup = checkReanimatedSetup;
+exports.showReanimatedSetupError = showReanimatedSetupError;
+let reanimatedAPI;
+/**
+ * Safely loads react-native-reanimated and provides fallbacks if not available
+ */
+function getReanimatedAPI() {
+    if (reanimatedAPI) {
+        return reanimatedAPI;
+    }
+    try {
+        const reanimated = require('react-native-reanimated');
+        // Check if makeMutable is available (this is what was causing the original error)
+        if (!reanimated.makeMutable) {
+            throw new Error('makeMutable not found - react-native-reanimated may not be properly configured');
+        }
+        reanimatedAPI = {
+            useSharedValue: reanimated.useSharedValue,
+            useAnimatedStyle: reanimated.useAnimatedStyle,
+            withTiming: reanimated.withTiming,
+            withSpring: reanimated.withSpring,
+            withRepeat: reanimated.withRepeat,
+            withSequence: reanimated.withSequence,
+            runOnJS: reanimated.runOnJS,
+            Easing: reanimated.Easing,
+            Animated: reanimated.default,
+            isAvailable: true,
+        };
+        console.log('✅ react-native-reanimated loaded successfully');
+        return reanimatedAPI;
+    }
+    catch (error) {
+        console.warn('⚠️ react-native-reanimated is not properly installed or configured:', error);
+        console.warn('📚 Please follow the setup guide: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started');
+        // Provide fallback implementations
+        const { View } = require('react-native');
+        reanimatedAPI = {
+            useSharedValue: (value) => ({ value }),
+            useAnimatedStyle: () => ({}),
+            withTiming: (value) => value,
+            withSpring: (value) => value,
+            withRepeat: (value) => value,
+            withSequence: (...args) => args[args.length - 1],
+            runOnJS: (fn) => fn,
+            Easing: {
+                inOut: (easing) => easing,
+                ease: (t) => t,
+            },
+            Animated: View,
+            isAvailable: false,
+        };
+        return reanimatedAPI;
+    }
+}
+/**
+ * Check if react-native-reanimated is properly configured
+ */
+function checkReanimatedSetup() {
+    const api = getReanimatedAPI();
+    return api.isAvailable;
+}
+/**
+ * Display a helpful error message if reanimated is not configured
+ */
+function showReanimatedSetupError() {
+    console.error(`
+🚨 React Native Reanimated Setup Required
+
+The OnwidButton component requires react-native-reanimated to be properly installed and configured.
+
+Quick Fix:
+1. Install: npm install react-native-reanimated
+2. Add to babel.config.js:
+   plugins: ['react-native-reanimated/plugin']
+3. Rebuild your app
+
+For detailed setup instructions, visit:
+https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started
+  `);
+}

package/lib/module/utils/utils.js

@@ -0,0 +1 @@
+"use strict";

package/lib/typescript/Event/onwid.d.ts

@@ -0,0 +1,13 @@
+type EventCallback = (data: any) => void;
+export declare enum EventKeys {
+    USER_DATA = "user_data",
+    SCREEN_STATE = "state_data"
+}
+declare class OnWid {
+    private events;
+    private ensureDefaultListener;
+    Event(eventKey: string, data: any): Promise<void>;
+    on(eventKey: EventKeys, callback: EventCallback): void;
+}
+declare const onwid: OnWid;
+export default onwid;

package/lib/typescript/NativeOnwid.d.ts

@@ -0,0 +1,6 @@
+import type { TurboModule } from 'react-native';
+export interface Spec extends TurboModule {
+    multiply(a: number, b: number): number;
+}
+declare const _default: Spec;
+export default _default;

package/lib/typescript/component/OnwidButton.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @file OnwidButton.tsx
+ * @description A customizable floating action button component for React Native applications.
+ * This component provides a draggable, expandable button with animation support and gradient styling.
+ */
+/**
+ * OnwidButton Component
+ *
+ * A floating action button that can be dragged around the screen and expanded to show additional content.
+ * Features include:
+ * - Draggable functionality
+ * - Expandable menu
+ * - Animated transitions
+ * - Gradient background
+ * - Customizable styling
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <OnwidButton
+ *   isOpen={false}
+ *   onPress={(isOpen) => console.log('Button pressed:', isOpen)}
+ *   menuComponent={<YourMenuComponent />}
+ * />
+ * ```
+ */
+export declare function OnwidButton(): import("react/jsx-runtime").JSX.Element | null;
+export default OnwidButton;

package/lib/typescript/component/audiowave.d.ts

@@ -0,0 +1,6 @@
+import { Room } from 'livekit-client';
+interface WaveformVisualizerProps {
+    roomRef: React.RefObject<Room>;
+}
+export declare const WaveformVisualizer: ({ roomRef }: WaveformVisualizerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/typescript/component/voice.d.ts

@@ -0,0 +1,15 @@
+import { Room } from 'livekit-client';
+import { RefObject } from 'react';
+interface VoiceProps {
+    url: string;
+    token: string;
+    onDisconnected: (data: string) => void;
+    onConnected: (data: string) => void;
+    roomRef: RefObject<Room>;
+}
+export interface VoiceRef {
+    mute: () => void;
+    unmute: () => void;
+}
+declare const Voice: (props: VoiceProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Voice;

package/lib/typescript/hooks/initialize.d.ts

@@ -0,0 +1,2 @@
+import type { UseInitializeProps } from './initialize.types';
+export declare function useInitialize({ apiKey, onwidUrl, metadata, }: UseInitializeProps): void;

package/lib/typescript/hooks/initialize.types.d.ts

@@ -0,0 +1,5 @@
+export type UseInitializeProps = {
+    apiKey: string;
+    onwidUrl: string;
+    metadata?: Record<string, any>;
+};

package/lib/typescript/hooks/initializelivekit.d.ts

@@ -0,0 +1,3 @@
+import { registerGlobals } from '@livekit/react-native';
+declare const registerAgent: typeof registerGlobals;
+export default registerAgent;

package/lib/typescript/hooks/voiceAgent.d.ts

@@ -0,0 +1,2 @@
+import type { UseVoiceAgentReturn } from './voiceAgent.types';
+export declare const useVoiceAgent: () => UseVoiceAgentReturn;

package/lib/typescript/hooks/voiceAgent.types.d.ts

@@ -0,0 +1,16 @@
+import { ConnectionState, Room } from 'livekit-client';
+import { RefObject } from 'react';
+export type UseVoiceAgentReturn = {
+    initializeVoiceAgent: () => Promise<void>;
+    isLoading: boolean;
+    error: string | null;
+    tokenDetails: any;
+    endCall: () => Promise<void>;
+    room: Room;
+    roomRef: RefObject<Room>;
+    isMicMuted: boolean;
+    muteMic: () => void;
+    unmuteMic: () => void;
+    connectionState: ConnectionState;
+    cleanup: () => void;
+};