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

package/lib/commonjs/components/Embed/EmbedVoice.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactNative = require("@livekit/react-native");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+// export interface VoiceProps {
+//   url: string;
+//   token: string;
+//   onDisconnected: (data: string) => void;
+//   onConnected: (data: string) => void;
+// }
+
+// Track audio session state globally to prevent multiple starts/stops
+let audioSessionActive = false;
+let audioSessionStarting = false;
+let audioSessionStopping = false;
+
+// Track connection to prevent unmounting while connected
+let activeConnectionToken = null;
+const Voice = props => {
+  const {
+    url,
+    token,
+    onDisconnected,
+    onConnected,
+    roomRef
+  } = props;
+  const [audioSessionStarted, setAudioSessionStarted] = (0, _react.useState)(audioSessionActive);
+  const mountedRef = (0, _react.useRef)(true);
+  const connectedRef = (0, _react.useRef)(false);
+
+  // Start audio session safely - prevent multiple simultaneous starts
+  const startAudioSession = async () => {
+    if (audioSessionActive || audioSessionStarting) {
+      console.log('Audio session already active or starting, skipping');
+      return;
+    }
+    try {
+      audioSessionStarting = true;
+      console.log('Starting audio session');
+      await _reactNative.AudioSession.startAudioSession();
+      audioSessionActive = true;
+      if (mountedRef.current) {
+        setAudioSessionStarted(true);
+      }
+    } catch (err) {
+      console.error('Failed to start audio session:', err);
+    } finally {
+      audioSessionStarting = false;
+    }
+  };
+
+  // Stop audio session safely - prevent multiple simultaneous stops
+  const stopAudioSession = async () => {
+    if (!audioSessionActive || audioSessionStopping) {
+      console.log('Audio session already inactive or stopping, skipping');
+      return;
+    }
+    try {
+      audioSessionStopping = true;
+      console.log('Stopping audio session');
+      await _reactNative.AudioSession.stopAudioSession();
+      audioSessionActive = false;
+    } catch (err) {
+      console.error('Failed to stop audio session:', err);
+    } finally {
+      audioSessionStopping = false;
+    }
+  };
+
+  // Setup audio session
+  (0, _react.useEffect)(() => {
+    mountedRef.current = true;
+    startAudioSession();
+    return () => {
+      mountedRef.current = false;
+
+      // IMPORTANT: Don't stop the audio session on unmount if there might be an active call
+      // This prevents audio session start/stop loops when components remount
+      if (roomRef.current?.state !== 'connected' && !connectedRef.current) {
+        stopAudioSession();
+      } else {
+        console.log('Skipping audio session stop because room is still connected');
+      }
+    };
+  }, []);
+
+  // Track connection state changes to avoid unmounting while connected
+  (0, _react.useEffect)(() => {
+    if (token) {
+      activeConnectionToken = token;
+    }
+    return () => {
+      // Only clear token when unmounting with this specific token
+      if (activeConnectionToken === token) {
+        activeConnectionToken = null;
+      }
+    };
+  }, [token]);
+
+  // Only render LiveKitRoom when audio session is ready
+  if (!audioSessionStarted) {
+    return null;
+  }
+
+  // IMPORTANT: Never return empty fragment when connected!
+  // Instead, always render the LiveKitRoom component to maintain the connection
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.LiveKitRoom, {
+    serverUrl: url,
+    token: token,
+    screen: false,
+    audio: true,
+    onConnected: () => {
+      console.log('LiveKitRoom connected');
+      connectedRef.current = true;
+      onConnected('connected');
+    },
+    room: roomRef.current || undefined,
+    onDisconnected: () => {
+      console.log('LiveKitRoom disconnected');
+      connectedRef.current = false;
+      onDisconnected('disconnected');
+    }
+  });
+};
+var _default = exports.default = Voice;
+//# sourceMappingURL=EmbedVoice.js.map

package/lib/commonjs/components/styles/EmbedButton.style.js

@@ -0,0 +1,248 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onwidButtonStyles = exports.createEmbedButtonStyles = exports.EXPANDED_WIDTH = exports.BUTTON_WIDTH = exports.BUTTON_HEIGHT = void 0;
+var _reactNative = require("react-native");
+const {
+  width: SCREEN_WIDTH
+} = _reactNative.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();
+const BUTTON_WIDTH = exports.BUTTON_WIDTH = dimensions.BUTTON_WIDTH;
+const EXPANDED_WIDTH = exports.EXPANDED_WIDTH = dimensions.EXPANDED_WIDTH;
+const BUTTON_HEIGHT = exports.BUTTON_HEIGHT = dimensions.BUTTON_HEIGHT;
+const createEmbedButtonStyles = customStyles => {
+  const {
+    buttonWidth = BUTTON_WIDTH,
+    buttonHeight = BUTTON_HEIGHT,
+    backgroundColor = 'transparent',
+    borderRadius = dimensions.BORDER_RADIUS.MEDIUM,
+    marginBottom = dimensions.SPACING.LARGE,
+    spacing = dimensions.SPACING
+  } = customStyles || {};
+  return _reactNative.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 + 1,
+      minWidth: 80,
+      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: 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: 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: 10,
+      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'
+    }
+  });
+};
+
+// Default styles export with dynamic dimensions
+exports.createEmbedButtonStyles = createEmbedButtonStyles;
+const onwidButtonStyles = exports.onwidButtonStyles = createEmbedButtonStyles();
+//# sourceMappingURL=EmbedButton.style.js.map

package/lib/commonjs/events/embed.event.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.EventKeys = void 0;
+var _storeKey = require("../store/store.key.js");
+var _api = require("../api/api.js");
+// Predefined event keys
+let EventKeys = exports.EventKeys = /*#__PURE__*/function (EventKeys) {
+  EventKeys["USER_DATA"] = "user_data";
+  EventKeys["SCREEN_STATE"] = "state_data";
+  return EventKeys;
+}({});
+class Embed {
+  events = {};
+
+  // Automatically adds a default listener if none exists
+  ensureDefaultListener(eventKey) {
+    if (!this.events[eventKey]) {
+      this.events[eventKey] = [data => {
+        console.log(`[Default] Event handled for ${eventKey}:`, data);
+      }];
+    }
+  }
+  async Event(eventKey, data) {
+    if (!Object.values(EventKeys).includes(eventKey)) {
+      console.error(`Invalid event key: ${eventKey}`);
+      throw new Error(`Invalid event key: ${eventKey}. Must be one of: ${Object.values(EventKeys).join(', ')}`);
+    }
+    const key = eventKey;
+    if (key !== EventKeys.USER_DATA) {
+      const userIdentity = await (0, _storeKey.getAgentData)(EventKeys.USER_DATA);
+      if (userIdentity) {
+        data.app_user_id = userIdentity.app_user_id;
+      } else {
+        throw new Error('User identity not found');
+      }
+    }
+
+    // Ensure a default listener is registered if not already
+    this.ensureDefaultListener(key);
+    console.log('response,updateUserDatniuioioioa');
+    // Trigger API call
+    try {
+      const apiService = _api.APIService.getInstance();
+      const response = await apiService.updateUserData({
+        eventKey: key,
+        data
+      });
+      console.log('response,updateUserData', response);
+      if (!response.success) {
+        console.error('Failed to trigger API for event:', eventKey);
+      }
+      (0, _storeKey.setAgentData)(data, key);
+    } catch (error) {
+      console.error('Error triggering API:', error);
+    }
+
+    // Trigger event listeners
+    this.events[key]?.forEach(callback => callback(data));
+  }
+
+  // Still allow custom listeners (optional)
+  on(eventKey, callback) {
+    if (!this.events[eventKey]) {
+      this.events[eventKey] = [];
+    }
+    this.events[eventKey]?.push(callback);
+  }
+}
+const embed = new Embed();
+var _default = exports.default = embed;
+//# sourceMappingURL=embed.event.js.map

package/lib/commonjs/hooks/initialize.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInitialize = useInitialize;
+var _storeKey = require("../store/store.key.js");
+var _api = require("../api/api.js");
+var _initializeLivekit = _interopRequireDefault(require("./initialize.livekit.js"));
+var _reactNative = require("react-native");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Custom hook for initializing the OnWid SDK
+ *
+ * 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
+ * 2. Stores API key securely in keychain
+ * 3. Registers the device with provided details
+ */
+
+function useInitialize({
+  apiKey,
+  onwidUrl,
+  metadata
+}) {
+  const checkPermissions = async () => {
+    try {
+      // Check for required permissions on Android
+      if (_reactNative.Platform.OS === 'android') {
+        const recordAudioPermission = _reactNative.PermissionsAndroid.PERMISSIONS.RECORD_AUDIO;
+        if (!recordAudioPermission) {
+          throw new Error('RECORD_AUDIO permission not available');
+        }
+        const permissions = [recordAudioPermission];
+        const results = await Promise.all(permissions.map(permission => _reactNative.PermissionsAndroid.request(permission)));
+        const allGranted = results.every(result => result === _reactNative.PermissionsAndroid.RESULTS.GRANTED);
+        if (!allGranted) {
+          throw new Error('Required permissions not granted');
+        }
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to check permissions';
+      throw new Error(errorMessage);
+    }
+  };
+
+  /**
+   * Validates required initialization parameters
+   * @throws Error if any required parameter is missing or invalid
+   */
+  const validateInputs = () => {
+    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');
+    }
+  };
+  const initialize = async () => {
+    try {
+      await checkPermissions();
+      (0, _initializeLivekit.default)();
+
+      // Validate required parameters before proceeding
+      validateInputs();
+
+      // Store API key in keychain
+      await (0, _storeKey.setAgentData)({
+        apiKey,
+        onwidUrl
+      });
+
+      // Get the APIService instance and initialize it
+      const apiService = _api.APIService.getInstance();
+      await apiService.initialize();
+      console.log('registerOnInitialize');
+      // Register new device with provided details
+      const registerResponse = await apiService.registerOnInitialize();
+      if (!registerResponse.success) {
+        throw new Error(registerResponse.error || 'Device registration failed');
+      }
+      if (registerResponse.data) {
+        // todo: store config
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Initialization failed';
+      throw new Error(errorMessage);
+    }
+  };
+
+  // Initialize immediately when hook is called
+  initialize().catch(console.error);
+}
+//# sourceMappingURL=initialize.js.map

package/lib/commonjs/hooks/initialize.livekit.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactNative = require("@livekit/react-native");
+// This module imports the `registerGlobals` function from the LiveKit React Native library.
+// The `registerGlobals` function is used to register global settings and configurations
+// for the LiveKit service, which is essential for managing real-time audio and video
+// communication in the application. The `registerAgent` constant is created as an alias
+// for `registerGlobals`, allowing for easier reference in other parts of the application.
+// Finally, the `registerAgent` is exported as the default export of this module, making
+// it available for use in other modules that require the registration of LiveKit globals.
+
+// The registerAgent constant is an alias for the registerGlobals function,
+// which is used to set up global configurations for the LiveKit service.
+const registerAgent = _reactNative.registerGlobals;
+var _default = exports.default = registerAgent;
+//# sourceMappingURL=initialize.livekit.js.map

package/lib/commonjs/hooks/types/initialize.types.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=initialize.types.js.map

package/lib/commonjs/hooks/types/voiceAgent.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=voiceAgent.types.js.map