@revrag-ai/embed-react-native 1.0.5

package/lib/module/NativeOnwid.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_native_1 = require("react-native");
+exports.default = react_native_1.TurboModuleRegistry.getEnforcing('Onwid');

package/lib/module/component/OnwidButton.js

@@ -0,0 +1,366 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnwidButton = OnwidButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lottie_react_native_1 = __importDefault(require("lottie-react-native"));
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_gesture_handler_1 = require("react-native-gesture-handler");
+const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
+const voice_1 = __importDefault(require("../component/voice"));
+const voiceAgent_1 = require("../hooks/voiceAgent");
+const store_key_1 = require("../store.key");
+const onwidButton_style_1 = require("../style/onwidButton.style");
+const reanimatedHelpers_1 = require("../utils/reanimatedHelpers");
+const audiowave_1 = require("./audiowave");
+// Get reanimated API with fallbacks
+const { useSharedValue, useAnimatedStyle, withTiming, withSpring, withRepeat, withSequence, runOnJS, Easing, Animated, isAvailable: isReanimatedAvailable, } = (0, reanimatedHelpers_1.getReanimatedAPI)();
+// Show warning if reanimated is not available
+if (!isReanimatedAvailable) {
+    (0, reanimatedHelpers_1.showReanimatedSetupError)();
+}
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
+const BUTTON_WIDTH = 60;
+const EXPANDED_WIDTH = SCREEN_WIDTH * 0.9;
+const BUTTON_HEIGHT = 60;
+const GRADIENT_COLORS = ['#1E0844', '#B391F3'];
+// Define mic icons as base64 images for portability
+const MIC_ON_ICON = 'https://revrag-dev.s3.ap-south-1.amazonaws.com/Avatars/Mute+button.png';
+const MIC_OFF_ICON = 'https://revrag-dev.s3.ap-south-1.amazonaws.com/Avatars/unmute.png';
+// Add end call icon
+const END_CALL_ICON = 'https://revrag-dev.s3.ap-south-1.amazonaws.com/Avatars/end+button.png';
+const AMPLIFY_ANIMATION = 'https://revrag-dev.s3.ap-south-1.amazonaws.com/Avatars/amplify.json';
+/**
+ * Default styles configuration for the button
+ */
+const defaultStyles = {
+    buttonWidth: 60,
+    buttonHeight: 60,
+    borderRadius: 100,
+    marginBottom: 20,
+    spacing: {
+        SMALL: 10,
+        MEDIUM: 15,
+        LARGE: 25,
+    },
+};
+/**
+ * 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 />}
+ * />
+ * ```
+ */
+function OnwidButton() {
+    var _a;
+    const { initializeVoiceAgent, tokenDetails, endCall, isLoading, isMicMuted, muteMic, unmuteMic, connectionState, roomRef, } = (0, voiceAgent_1.useVoiceAgent)();
+    // State management
+    const [configData, setConfigData] = (0, react_1.useState)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [callDuration, setCallDuration] = (0, react_1.useState)(0);
+    const timerRef = (0, react_1.useRef)(null);
+    const lottieRef = (0, react_1.useRef)(null);
+    console.log('roomRef', (_a = roomRef.current) === null || _a === void 0 ? void 0 : _a.localParticipant);
+    // Animation values
+    const isPressed = useSharedValue(false);
+    const offset = useSharedValue({ x: 0, y: 0 });
+    const start = useSharedValue({ x: 0, y: 0 });
+    const menuAnimation = useSharedValue(0);
+    const buttonWidth = useSharedValue(BUTTON_WIDTH);
+    const buttonScale = useSharedValue(1);
+    // Styles
+    const styles = (0, onwidButton_style_1.createOnwidButtonStyles)(defaultStyles);
+    const [isAutoOpen, setIsAutoOpen] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const autoOpenTimer = setTimeout(() => {
+            if (!isOpen) {
+                console.log('autoOpenTimer', isOpen);
+                setIsAutoOpen(true);
+            }
+        }, 15000); // 15 seconds
+        return () => {
+            clearTimeout(autoOpenTimer);
+        };
+    }, [isOpen]);
+    /**
+     * Fetch agent configuration data
+     */
+    (0, react_1.useEffect)(() => {
+        const fetchAgentData = async () => {
+            try {
+                const data = await (0, store_key_1.getAgentData)('@config_data');
+                setConfigData(data === null || data === void 0 ? void 0 : data.ui_config);
+            }
+            catch (error) {
+                console.error('Error retrieving agent data:', error);
+            }
+        };
+        fetchAgentData();
+    }, []);
+    /**
+     * Set up a timer to track call duration when connected
+     */
+    (0, react_1.useEffect)(() => {
+        if (connectionState === 'connected' && !timerRef.current) {
+            timerRef.current = setInterval(() => {
+                setCallDuration((prev) => prev + 1);
+            }, 1000);
+        }
+        else if (connectionState !== 'connected' && timerRef.current) {
+            clearInterval(timerRef.current);
+            timerRef.current = null;
+            // If we were previously connected and now disconnected, show an error
+            if (callDuration > 0) {
+                console.log('Call unexpectedly disconnected after', callDuration, 'seconds');
+            }
+        }
+        return () => {
+            if (timerRef.current) {
+                clearInterval(timerRef.current);
+                timerRef.current = null;
+            }
+        };
+    }, [connectionState, callDuration]);
+    /**
+     * Handle menu animation and button width transitions
+     */
+    (0, react_1.useEffect)(() => {
+        menuAnimation.value = withTiming(isOpen ? 0.8 : 0, {
+            duration: 300,
+        });
+        buttonWidth.value = withTiming(isOpen ? EXPANDED_WIDTH : BUTTON_WIDTH);
+    }, [isOpen, menuAnimation, buttonWidth]);
+    // Add breathing animation when button is closed but isAutoOpen is true
+    (0, react_1.useEffect)(() => {
+        if (!isOpen && isAutoOpen) {
+            // Start breathing animation with faster speed
+            buttonScale.value = withRepeat(withSequence(withTiming(1.1, {
+                duration: 1500, // Reduced from 1000ms to 600ms
+                easing: Easing.inOut(Easing.ease),
+            }), withTiming(1, {
+                duration: 1500, // Reduced from 1000ms to 600ms
+                easing: Easing.inOut(Easing.ease),
+            })), -1, // Infinite repeat
+            false // Don't reverse
+            );
+        }
+        else {
+            // Reset animation
+            buttonScale.value = withTiming(1, { duration: 300 });
+        }
+    }, [isOpen, isAutoOpen]);
+    /**
+     * Animated styles for the button
+     */
+    const animatedStyles = useAnimatedStyle(() => {
+        const maxX = SCREEN_WIDTH - (isOpen ? EXPANDED_WIDTH : BUTTON_WIDTH) - 35;
+        const clampedX = Math.min(Math.max(offset.value.x, -maxX), 0);
+        return {
+            width: buttonWidth.value,
+            height: BUTTON_HEIGHT,
+            transform: [
+                { translateX: clampedX },
+                { translateY: offset.value.y },
+                { scale: withSpring(isPressed.value ? 0.95 : buttonScale.value) },
+            ],
+            justifyContent: isOpen ? 'space-between' : 'flex-start',
+            overflow: 'hidden',
+        };
+    });
+    /**
+     * Animated styles for the text
+     */
+    const animatedTextStyles = useAnimatedStyle(() => {
+        const maxX = SCREEN_WIDTH;
+        const clampedX = Math.min(Math.max(offset.value.x, -maxX), 0);
+        return {
+            transform: [
+                { translateX: clampedX },
+                { translateY: offset.value.y },
+                { scale: withSpring(isPressed.value ? 1 : 1) },
+            ],
+        };
+    });
+    /**
+     * Pan gesture handler for drag functionality
+     */
+    const gesture = react_native_gesture_handler_1.Gesture.Pan()
+        .onBegin(() => {
+        isPressed.value = true;
+        if (isAutoOpen) {
+            runOnJS(setIsAutoOpen)(false);
+        }
+    })
+        .onUpdate((e) => {
+        const maxX = SCREEN_WIDTH - (isOpen ? EXPANDED_WIDTH : BUTTON_WIDTH) - 0;
+        const newX = Math.min(Math.max(e.translationX + start.value.x, -maxX), 0);
+        const maxY = SCREEN_HEIGHT - 150;
+        const newY = Math.min(Math.max(e.translationY + start.value.y, -maxY), 0);
+        offset.value = {
+            x: newX,
+            y: newY,
+        };
+    })
+        .onEnd(() => {
+        start.value = {
+            x: offset.value.x,
+            y: offset.value.y,
+        };
+    })
+        .onFinalize(() => {
+        isPressed.value = false;
+    });
+    /**
+     * Handle button press events
+     */
+    const handlePress = () => {
+        console.log('handlePress', isOpen);
+        console.log('isAutoOpen', isAutoOpen);
+        // cleanup();
+        setIsOpen(!isOpen);
+        setIsAutoOpen(false);
+    };
+    const handleStartCall = async () => {
+        setCallDuration(0);
+        await initializeVoiceAgent();
+    };
+    /**
+     * Render the button icon/animation
+     */
+    const remoteSource = (0, react_1.useMemo)(() => ({
+        uri: (configData === null || configData === void 0 ? void 0 : configData.icon_animation) || AMPLIFY_ANIMATION,
+    }), [configData === null || configData === void 0 ? void 0 : configData.icon_animation]);
+    const renderIcon = () => {
+        // When isAutoOpen is true, we don't play the Lottie animation
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsx)(lottie_react_native_1.default, { ref: lottieRef, source: remoteSource, autoPlay: true, loop: true, style: styles.iconImage, enableMergePathsAndroidForKitKatAndAbove: true, enableSafeModeAndroid: true }) }));
+    };
+    const handleConnected = () => {
+        console.log('Call connected');
+    };
+    const handleEndCall = async () => {
+        setIsOpen(false);
+        if (timerRef.current) {
+            clearInterval(timerRef.current);
+            timerRef.current = null;
+        }
+        setCallDuration(0);
+        await endCall();
+    };
+    const handleMicToggle = () => {
+        if (isMicMuted) {
+            unmuteMic();
+        }
+        else {
+            muteMic();
+        }
+    };
+    // Format duration to MM:SS
+    const formatDuration = (seconds) => {
+        const minutes = Math.floor(seconds / 60);
+        const remainingSeconds = seconds % 60;
+        return `${minutes.toString().padStart(2, '0')}:${remainingSeconds
+            .toString()
+            .padStart(2, '0')}`;
+    };
+    // Get the status text based on current state
+    const getStatusText = () => {
+        if (isLoading) {
+            return 'Connecting...';
+        }
+        else if (tokenDetails === null || tokenDetails === void 0 ? void 0 : tokenDetails.token) {
+            return `Call Duration: ${formatDuration(callDuration)}`;
+        }
+        else {
+            return (configData === null || configData === void 0 ? void 0 : configData.agent_type) || 'Onboarding Agent';
+        }
+    };
+    if (!configData)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [isAutoOpen && !isOpen && ((0, jsx_runtime_1.jsx)(Animated.View, { style: [
+                    animatedTextStyles,
+                    {
+                        position: 'absolute',
+                        borderRadius: 5,
+                        paddingVertical: 2,
+                        paddingHorizontal: 10,
+                        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                        bottom: BUTTON_HEIGHT + 40,
+                        // right: Math.abs(offset.value.x) + BUTTON_WIDTH + 0,
+                    },
+                ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: 'white', fontSize: 10, fontWeight: '500' }, children: (configData === null || configData === void 0 ? void 0 : configData.popup_description) || 'Revrag' }) })), (0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector, { gesture: gesture, children: (0, jsx_runtime_1.jsx)(Animated.View, { style: [
+                        styles.button,
+                        animatedStyles,
+                        styles.buttonContent,
+                        {
+                            pointerEvents: 'auto',
+                        },
+                    ], children: (0, jsx_runtime_1.jsxs)(react_native_linear_gradient_1.default, { colors: (configData === null || configData === void 0 ? void 0 : configData.gradient) || GRADIENT_COLORS, start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, style: [
+                            styles.linearGradient,
+                            {
+                                width: '100%',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                paddingHorizontal: 0,
+                                paddingLeft: 0,
+                                paddingRight: isOpen ? 5 : 0,
+                            },
+                        ], angle: 0, angleCenter: { x: 0.5, y: 0.5 }, children: [(tokenDetails === null || tokenDetails === void 0 ? void 0 : tokenDetails.token) && ((0, jsx_runtime_1.jsx)(voice_1.default, { url: tokenDetails === null || tokenDetails === void 0 ? void 0 : tokenDetails.server_url, token: tokenDetails === null || tokenDetails === void 0 ? void 0 : tokenDetails.token, onDisconnected: handleEndCall, roomRef: roomRef, onConnected: handleConnected })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                    styles.rowContainer,
+                                    {
+                                        flexShrink: 0,
+                                        width: BUTTON_WIDTH,
+                                        padding: 0,
+                                        margin: 0,
+                                    },
+                                ], children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: handlePress, style: styles.pressable, children: renderIcon() }) }), isOpen && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                                    flex: 1,
+                                    flexDirection: 'row',
+                                    height: BUTTON_HEIGHT - 10,
+                                    marginLeft: 0,
+                                    marginRight: 0,
+                                }, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                                            flex: 1,
+                                            justifyContent: 'center',
+                                            alignItems: 'flex-start',
+                                            paddingLeft: 8,
+                                            paddingRight: 4,
+                                        }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                                    styles.agentNameText,
+                                                    { flexShrink: 1, textAlign: 'left' },
+                                                ], children: (configData === null || configData === void 0 ? void 0 : configData.agent_name) || 'Revrag' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                                    styles.statusText,
+                                                    { flexShrink: 1, textAlign: 'left' },
+                                                ], children: getStatusText() })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                                            flex: 1,
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                            paddingHorizontal: 4,
+                                        }, children: (0, jsx_runtime_1.jsx)(audiowave_1.WaveformVisualizer, { roomRef: roomRef }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                                            flex: 1,
+                                            justifyContent: 'center',
+                                            alignItems: 'flex-end',
+                                            paddingLeft: 4,
+                                            paddingRight: 8,
+                                        }, children: [!(tokenDetails === null || tokenDetails === void 0 ? void 0 : tokenDetails.token) && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: handleStartCall, style: styles.startCallButton, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.startCallText, children: (configData === null || configData === void 0 ? void 0 : configData.start_call_text) || 'Start Call' }) })), (tokenDetails === null || tokenDetails === void 0 ? void 0 : tokenDetails.token) && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.buttonContainer], children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.muteButton, onPress: handleMicToggle, children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { source: {
+                                                                uri: isMicMuted ? MIC_OFF_ICON : MIC_ON_ICON,
+                                                            }, style: styles.buttonImage }) }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: handleEndCall, style: styles.endCallButton, children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: END_CALL_ICON }, style: styles.buttonImage }) })] }))] })] }))] }) }) })] }));
+}
+// Export default for easier imports
+exports.default = OnwidButton;

package/lib/module/component/audiowave.js

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WaveformVisualizer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+// React Native compatible waveform simulator
+const useReactNativeAudioWaveform = (roomRef) => {
+    const [isAudioActive, setIsAudioActive] = (0, react_1.useState)(false);
+    const intervalRef = (0, react_1.useRef)(null);
+    const [currentHeights, setCurrentHeights] = (0, react_1.useState)(Array(10).fill(0));
+    // Create animated values for each bar
+    const barCount = 10;
+    const animatedBars = (0, react_1.useRef)(Array(barCount)
+        .fill(0)
+        .map(() => new react_native_1.Animated.Value(0))).current;
+    (0, react_1.useEffect)(() => {
+        // Check if there's an active room connection AND if agent is talking
+        const checkAudioActivity = () => {
+            const room = roomRef.current;
+            if ((room === null || room === void 0 ? void 0 : room.state) !== 'connected') {
+                setIsAudioActive(false);
+                return;
+            }
+            // Check if any remote participant is currently speaking
+            let isAgentSpeaking = false;
+            // Loop through all remote participants
+            room.remoteParticipants.forEach((participant) => {
+                const audioTrackPublications = Array.from(participant.getTrackPublications().values());
+                const remoteAudioTrack = audioTrackPublications.find((pub) => { var _a; return ((_a = pub.track) === null || _a === void 0 ? void 0 : _a.kind) === 'audio'; });
+                // Check if this participant has audio track, is not muted, and is actively speaking
+                if ((remoteAudioTrack === null || remoteAudioTrack === void 0 ? void 0 : remoteAudioTrack.track) && !(remoteAudioTrack === null || remoteAudioTrack === void 0 ? void 0 : remoteAudioTrack.isMuted)) {
+                    // Check audio level to detect actual speech (optional but more accurate)
+                    const audioLevel = participant.audioLevel || 0;
+                    if (audioLevel > 0.05) {
+                        // Threshold for detecting speech
+                        isAgentSpeaking = true;
+                    }
+                }
+            });
+            setIsAudioActive(isAgentSpeaking);
+        };
+        // Initial check
+        checkAudioActivity();
+        // Set up periodic checking for room state changes
+        intervalRef.current = setInterval(checkAudioActivity, 500);
+        // Clean up on unmount
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+            setIsAudioActive(false);
+        };
+    }, [roomRef]);
+    // Continuous smooth animation
+    (0, react_1.useEffect)(() => {
+        const animateWaveform = () => {
+            // Generate smooth waveform data - stop animation completely when not active
+            const targetHeights = isAudioActive
+                ? Array(barCount)
+                    .fill(0)
+                    .map((_, index) => {
+                    const timeOffset = Date.now() / 800 + index * 0.3;
+                    const baseHeight = 0.5;
+                    const amplitude = 0.5;
+                    const height = baseHeight + amplitude * Math.abs(Math.sin(timeOffset));
+                    return Math.max(0.1, Math.min(1.0, height));
+                })
+                : Array(barCount).fill(0); // Completely freeze animation when mic is muted
+            // Update current heights for conditional logic
+            setCurrentHeights(targetHeights);
+            const animations = animatedBars.map((animatedValue, index) => {
+                const targetHeight = targetHeights[index] || 0;
+                return react_native_1.Animated.timing(animatedValue, {
+                    toValue: targetHeight,
+                    duration: isAudioActive ? 400 : 600, // Slower fade out when going inactive
+                    useNativeDriver: false,
+                });
+            });
+            react_native_1.Animated.parallel(animations).start();
+        };
+        // Start animation immediately and repeat
+        animateWaveform();
+        const animationInterval = setInterval(animateWaveform, 300);
+        return () => {
+            clearInterval(animationInterval);
+        };
+    }, [isAudioActive, animatedBars]);
+    return {
+        animatedBars,
+        currentHeights,
+        isActive: isAudioActive,
+    };
+};
+const WaveformVisualizer = ({ roomRef }) => {
+    const { animatedBars, currentHeights, isActive } = useReactNativeAudioWaveform(roomRef);
+    console.log('animatedBars', animatedBars);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            height: '100%',
+            alignSelf: 'center',
+            // width: '100%',
+            // flex: 1,
+            justifyContent: 'center',
+            // position: 'absolute',
+            zIndex: 1000,
+        }, children: animatedBars.map((animatedHeight, idx) => {
+            // Use the tracked height values instead of trying to access animated value directly
+            const currentHeightValue = currentHeights[idx] || 0.1;
+            // Apply conditional logic based on height
+            let conditionalValue;
+            if (currentHeightValue > 0.7) {
+                conditionalValue = 1;
+            }
+            else if (currentHeightValue >= 0.4 && currentHeightValue <= 0.5) {
+                conditionalValue = 5;
+            }
+            else {
+                conditionalValue = 1;
+            }
+            // You can use conditionalValue for width, color, or other properties
+            return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: {
+                    width: conditionalValue === 10 ? 4 : 4,
+                    borderRadius: 100, // Example: wider bars for value 5
+                    height: animatedHeight.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [0, 25],
+                    }),
+                    alignSelf: 'center',
+                    backgroundColor: idx <= 1 || idx >= 8 ? 'rgba(255, 255, 255, 0.5)' : 'white',
+                    margin: 1.5,
+                } }, idx));
+        }) }));
+};
+exports.WaveformVisualizer = WaveformVisualizer;

package/lib/module/component/voice.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("@livekit/react-native");
+const react_1 = require("react");
+// 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_1.useState)(audioSessionActive);
+    const mountedRef = (0, react_1.useRef)(true);
+    const connectedRef = (0, react_1.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 react_native_1.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 react_native_1.AudioSession.stopAudioSession();
+            audioSessionActive = false;
+        }
+        catch (err) {
+            console.error('Failed to stop audio session:', err);
+        }
+        finally {
+            audioSessionStopping = false;
+        }
+    };
+    // Setup audio session
+    (0, react_1.useEffect)(() => {
+        mountedRef.current = true;
+        startAudioSession();
+        return () => {
+            var _a;
+            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 (((_a = roomRef.current) === null || _a === void 0 ? void 0 : _a.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_1.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 ((0, jsx_runtime_1.jsx)(react_native_1.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');
+        } }));
+};
+exports.default = Voice;