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

package/lib/module/components/Embed/EmbedButton.js

@@ -0,0 +1,506 @@
+"use strict";
+
+/**
+ * @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.
+ */
+
+import LottieView from 'lottie-react-native';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Dimensions, Image, Text, TouchableOpacity, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import { useVoiceAgent } from "../../hooks/voiceagent.js";
+import { getAgentData } from "../../store/store.key.js";
+import { createEmbedButtonStyles } from "../styles/EmbedButton.style.js";
+import { getReanimatedAPI, showReanimatedSetupError } from "../../utils/reanimated.helper.js";
+import Voice from "./EmbedVoice.js";
+import { WaveformVisualizer } from "./EmbedAudioWave.js";
+
+// Get reanimated API with fallbacks
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  withSpring,
+  withRepeat,
+  withSequence,
+  runOnJS,
+  Easing,
+  Animated,
+  isAvailable: isReanimatedAvailable
+} = getReanimatedAPI();
+
+// Show warning if reanimated is not available
+if (!isReanimatedAvailable) {
+  showReanimatedSetupError();
+}
+const {
+  width: SCREEN_WIDTH,
+  height: SCREEN_HEIGHT
+} = 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 />}
+ * />
+ * ```
+ */
+export function EmbedButton() {
+  const {
+    initializeVoiceAgent,
+    tokenDetails,
+    endCall,
+    isLoading,
+    isMicMuted,
+    muteMic,
+    unmuteMic,
+    connectionState,
+    roomRef
+  } = useVoiceAgent();
+  // State management
+  const [configData, setConfigData] = useState(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [callDuration, setCallDuration] = useState(0);
+  const timerRef = useRef(null);
+  const lottieRef = useRef(null);
+
+  // 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 = createEmbedButtonStyles(defaultStyles);
+  const [isAutoOpen, setIsAutoOpen] = useState(false);
+  useEffect(() => {
+    const autoOpenTimer = setTimeout(() => {
+      if (!isOpen) {
+        console.log('autoOpenTimer', isOpen);
+        setIsAutoOpen(true);
+      }
+    }, 15000); // 15 seconds
+
+    return () => {
+      clearTimeout(autoOpenTimer);
+    };
+  }, [isOpen]);
+
+  /**
+   * Fetch agent configuration data
+   */
+  useEffect(() => {
+    const fetchAgentData = async () => {
+      try {
+        const data = await getAgentData('@config_data');
+        setConfigData(data?.ui_config);
+      } catch (error) {
+        console.error('Error retrieving agent data:', error);
+      }
+    };
+    fetchAgentData();
+  }, []);
+
+  /**
+   * Set up a timer to track call duration when connected
+   */
+  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
+   */
+  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
+  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 = 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 = useMemo(() => ({
+    uri: configData?.icon_animation || AMPLIFY_ANIMATION
+  }), [configData?.icon_animation]);
+  const renderIcon = () => {
+    // When isAutoOpen is true, we don't play the Lottie animation
+    return /*#__PURE__*/_jsx(View, {
+      children: /*#__PURE__*/_jsx(LottieView, {
+        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?.token) {
+      return `${formatDuration(callDuration)}`;
+    } else {
+      return configData?.agent_type || 'Onboarding Agent';
+    }
+  };
+  if (!configData) return null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [isAutoOpen && !isOpen && /*#__PURE__*/_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: /*#__PURE__*/_jsx(Text, {
+        style: {
+          color: 'white',
+          fontSize: 10,
+          fontWeight: '500'
+        },
+        children: configData?.popup_description || 'Revrag'
+      })
+    }), /*#__PURE__*/_jsx(GestureDetector, {
+      gesture: gesture,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.button, animatedStyles, styles.buttonContent, {
+          pointerEvents: 'auto'
+        }],
+        children: /*#__PURE__*/_jsxs(LinearGradient, {
+          colors: 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?.token && /*#__PURE__*/_jsx(Voice, {
+            url: tokenDetails?.server_url,
+            token: tokenDetails?.token,
+            onDisconnected: handleEndCall,
+            roomRef: roomRef,
+            onConnected: handleConnected
+          }), /*#__PURE__*/_jsx(View, {
+            style: [styles.rowContainer, {
+              flexShrink: 0,
+              width: BUTTON_WIDTH,
+              padding: 0,
+              margin: 0
+            }],
+            children: /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: handlePress,
+              style: styles.pressable,
+              children: renderIcon()
+            })
+          }), isOpen && /*#__PURE__*/_jsxs(View, {
+            style: {
+              flex: 1,
+              flexDirection: 'row',
+              height: BUTTON_HEIGHT - 10,
+              marginLeft: 0,
+              marginRight: 0
+            },
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: {
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'flex-start',
+                paddingLeft: 8,
+                paddingRight: 4
+              },
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: [styles.agentNameText, {
+                  flexShrink: 1,
+                  textAlign: 'left'
+                }],
+                children: configData?.agent_name || 'Revrag'
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.statusText, {
+                  flexShrink: 1,
+                  textAlign: 'left'
+                }],
+                children: getStatusText()
+              })]
+            }), /*#__PURE__*/_jsx(View, {
+              style: {
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'center',
+                paddingHorizontal: 4
+              },
+              children: /*#__PURE__*/_jsx(WaveformVisualizer, {
+                roomRef: roomRef
+              })
+            }), /*#__PURE__*/_jsxs(View, {
+              style: {
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'flex-end',
+                paddingLeft: 4,
+                paddingRight: 8
+              },
+              children: [!tokenDetails?.token && /*#__PURE__*/_jsx(TouchableOpacity, {
+                onPress: handleStartCall,
+                style: styles.startCallButton,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: styles.startCallText,
+                  children: configData?.start_call_text || 'Start Call'
+                })
+              }), tokenDetails?.token && /*#__PURE__*/_jsxs(View, {
+                style: [styles.buttonContainer],
+                children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+                  style: styles.muteButton,
+                  onPress: handleMicToggle,
+                  children: /*#__PURE__*/_jsx(Image, {
+                    source: {
+                      uri: isMicMuted ? MIC_OFF_ICON : MIC_ON_ICON
+                    },
+                    style: styles.buttonImage
+                  })
+                }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                  onPress: handleEndCall,
+                  style: styles.endCallButton,
+                  children: /*#__PURE__*/_jsx(Image, {
+                    source: {
+                      uri: END_CALL_ICON
+                    },
+                    style: styles.buttonImage
+                  })
+                })]
+              })]
+            })]
+          })]
+        })
+      })
+    })]
+  });
+}
+
+// Export default for easier imports
+export default EmbedButton;
+//# sourceMappingURL=EmbedButton.js.map

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

@@ -0,0 +1,127 @@
+"use strict";
+
+import { AudioSession, LiveKitRoom } from '@livekit/react-native';
+import { useEffect, useRef, useState } from 'react';
+
+// export interface VoiceProps {
+//   url: string;
+//   token: string;
+//   onDisconnected: (data: string) => void;
+//   onConnected: (data: string) => void;
+// }
+import { jsx as _jsx } from "react/jsx-runtime";
+// 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] = useState(audioSessionActive);
+  const mountedRef = useRef(true);
+  const connectedRef = 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 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 AudioSession.stopAudioSession();
+      audioSessionActive = false;
+    } catch (err) {
+      console.error('Failed to stop audio session:', err);
+    } finally {
+      audioSessionStopping = false;
+    }
+  };
+
+  // Setup audio session
+  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
+  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__*/_jsx(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');
+    }
+  });
+};
+export default Voice;
+//# sourceMappingURL=EmbedVoice.js.map