@revrag-ai/embed-react-native 1.0.26 → 1.0.28

package/dist/commonjs/components/Embed/EmbedButton.js

@@ -5,17 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EmbedButton = EmbedButton;
 exports.default = void 0;
+var _livekitClient = require("livekit-client");
 var _lottieReactNative = _interopRequireDefault(require("lottie-react-native"));
 var _react = require("react");
 var _reactNative = require("react-native");
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _reactNativeLinearGradient = _interopRequireDefault(require("react-native-linear-gradient"));
+var _embedEvent = _interopRequireWildcard(require("../../events/embed.event.js"));
 var _voiceagent = require("../../hooks/voiceagent.js");
 var _EmbedButtonStyle = require("../styles/EmbedButton.style.js");
 var _EmbedAudioWave = require("./EmbedAudioWave.js");
 var _EmbedVoice = _interopRequireDefault(require("./EmbedVoice.js"));
-var _embedEvent = _interopRequireWildcard(require("../../events/embed.event.js"));
 var _EmbedButtonHelpers = require("../../hooks/EmbedButton.helpers.js");
+var _Typewriter = _interopRequireDefault(require("../DynamicComponent/Typewriter.js"));
 var _EmbedButtonHooks = require("../../hooks/EmbedButton.hooks.js");
 var _EmbedButtonAnimations = require("../../hooks/EmbedButton.animations.js");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -50,35 +52,57 @@ const defaultStyles = {
 };
 
 // ==================== MAIN COMPONENT ====================
+
 /**
  * EmbedButton - Main voice agent floating action button
  *
  * @example
  * ```tsx
  * <EmbedButton />
+ * <EmbedButton containerInset={{ right: 16, bottom: 24 }} />
  * ```
  */
-function EmbedButton() {
+function EmbedButton({
+  containerInset
+} = {}) {
   // ==================== VOICE AGENT STATE ====================
   const {
-    initializeVoiceAgent,
     tokenDetails,
-    endCall,
     isLoading,
     isMicMuted,
+    connectionState,
+    roomRef,
     muteMic,
+    endCall,
     unmuteMic,
-    connectionState,
-    roomRef
+    clearDataReceived,
+    dataTranscription: livekitData,
+    initializeVoiceAgent
   } = (0, _voiceagent.useVoiceAgent)();
 
   // ==================== LOCAL STATE ====================
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [expandDirection, setExpandDirection] = (0, _react.useState)('right');
   const lottieRef = (0, _react.useRef)(null);
-  const styles = (0, _react.useMemo)(() => (0, _EmbedButtonStyle.createEmbedButtonStyles)(defaultStyles), []);
+  const calculationScrollRef = (0, _react.useRef)(null);
+  const userScrolledUpRef = (0, _react.useRef)(false);
+  const SCROLL_END_THRESHOLD = 20;
+
+  // Reset "user scrolled up" when calculation content changes so new content auto-scrolls to bottom
+  (0, _react.useEffect)(() => {
+    if (livekitData?.type === 'calculation') {
+      userScrolledUpRef.current = false;
+    }
+  }, [livekitData?.list, livekitData?.type]);
 
   // ==================== CUSTOM HOOKS ====================
   const configData = (0, _EmbedButtonHooks.useConfigData)();
+  const styles = (0, _react.useMemo)(() => (0, _EmbedButtonStyle.createEmbedButtonStyles)({
+    ...defaultStyles,
+    ...(containerInset != null && {
+      containerInset
+    })
+  }, configData), [configData, containerInset]);
   const {
     callDuration,
     resetDuration
@@ -88,13 +112,14 @@ function EmbedButton() {
     handleEndCall,
     handleMicToggle
   } = (0, _EmbedButtonHooks.useCallManagement)({
-    initializeVoiceAgent,
+    isOpen,
+    isMicMuted,
     endCall,
     muteMic,
+    setIsOpen,
     unmuteMic,
-    isMicMuted,
     resetDuration,
-    setIsOpen
+    initializeVoiceAgent
   });
   const {
     isAutoOpen,
@@ -115,86 +140,175 @@ function EmbedButton() {
     start,
     menuAnimation,
     buttonWidth,
-    buttonScale
+    buttonScale,
+    buttonHeight,
+    inputSectionProgress
   } = animationValues;
-  (0, _EmbedButtonAnimations.useButtonAnimations)(isOpen, menuAnimation, buttonWidth);
+  (0, _EmbedButtonAnimations.useButtonAnimations)(isOpen || livekitData && Object.keys(livekitData).length > 0, menuAnimation, buttonWidth, offset, start, expandDirection);
+  (0, _EmbedButtonAnimations.useInputSectionAnimations)(livekitData && Object.keys(livekitData).length > 0, inputSectionProgress, buttonHeight);
   (0, _EmbedButtonAnimations.useBreathingAnimation)(isOpen, isAutoOpen, buttonScale);
-  const buttonAnimatedStyles = (0, _EmbedButtonAnimations.useButtonAnimatedStyles)(isOpen, offset, buttonWidth, isPressed, buttonScale);
-  const popupAnimatedStyles = (0, _EmbedButtonAnimations.usePopupAnimatedStyles)(offset, isPressed);
-  const panGesture = (0, _react.useMemo)(() => (0, _EmbedButtonAnimations.createPanGesture)(isPressed, offset, start, isOpen, setIsAutoOpen), [isPressed, offset, start, isOpen, setIsAutoOpen]);
+  const buttonAnimatedStyles = (0, _EmbedButtonAnimations.useButtonAnimatedStyles)(isOpen, offset, buttonWidth, isPressed, buttonScale, buttonHeight);
+  const expandedContentAnimatedStyles = (0, _EmbedButtonAnimations.useExpandedContentAnimatedStyles)(menuAnimation);
+  const popupAnimatedStyles = (0, _EmbedButtonAnimations.usePopupAnimatedStyles)(offset, isPressed, expandDirection);
+  const panGesture = (0, _react.useMemo)(() => (0, _EmbedButtonAnimations.createPanGesture)(isPressed, offset, start, isOpen, setIsAutoOpen, setExpandDirection), [isPressed, offset, start, isOpen, setIsAutoOpen]);
 
   // ==================== AGENT EVENT EMISSIONS ====================
   // Emit agent connected/disconnected events based on connection state
+  // Track previous connection state to properly detect disconnection
+  const prevConnectionStateRef = (0, _react.useRef)(connectionState);
+  const lastEmittedEventRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
-    const emitConnectionEvent = async () => {
-      if (connectionState === 'connected') {
-        await _embedEvent.default.event.emit(_embedEvent.AgentEvent.AGENT_CONNECTED, {
-          timestamp: new Date().toISOString(),
-          metadata: {
-            callDuration: 0
-          }
-        });
-      } else if (connectionState === 'disconnected' && callDuration > 0) {
-        // Only emit disconnected if we were previously connected
-        await _embedEvent.default.event.emit(_embedEvent.AgentEvent.AGENT_DISCONNECTED, {
-          timestamp: new Date().toISOString(),
-          metadata: {
-            callDuration
-          }
-        });
+    const prevState = prevConnectionStateRef.current;
+
+    // Check if we should emit connected event
+    if (connectionState === _livekitClient.ConnectionState.Connected && prevState !== _livekitClient.ConnectionState.Connected) {
+      // Prevent duplicate connected events
+      if (lastEmittedEventRef.current?.type === 'connected' && lastEmittedEventRef.current?.state === connectionState) {
+        return;
       }
-    };
-    emitConnectionEvent().catch(error => {
-      console.error('Error emitting connection event:', error);
-    });
-  }, [connectionState]);
 
-  // Emit popup visibility events when isAutoOpen changes
+      // Update refs IMMEDIATELY (synchronously) before async emit
+      prevConnectionStateRef.current = connectionState;
+      lastEmittedEventRef.current = {
+        type: 'connected',
+        state: connectionState
+      };
+
+      // Emit connected when entering Connected state
+      _embedEvent.default.event.emit(_embedEvent.AgentEvent.AGENT_CONNECTED, {
+        timestamp: new Date().toISOString(),
+        metadata: {
+          callDuration: 0
+        }
+      }).catch(error => {
+        console.error('Error emitting connected event:', error);
+      });
+
+      // Send analytics to backend when agent conversation has started (connected)
+      _embedEvent.default.Event(_embedEvent.EventKeys.ANALYTICS_DATA, {
+        event_name: 'agent_conversation_started'
+      }).catch(error => {
+        console.error('Error sending agent_conversation_started analytics:', error);
+      });
+    } else if (prevState === _livekitClient.ConnectionState.Connected && connectionState !== _livekitClient.ConnectionState.Connected) {
+      // Prevent duplicate disconnected events
+      if (lastEmittedEventRef.current?.type === 'disconnected') {
+        return;
+      }
+
+      // Update refs IMMEDIATELY (synchronously) before async emit
+      prevConnectionStateRef.current = connectionState;
+      lastEmittedEventRef.current = {
+        type: 'disconnected',
+        state: connectionState
+      };
+
+      // Emit disconnected when LEAVING Connected state (to Connecting or Disconnected)
+      // This catches the transition: Connected -> Connecting -> Disconnected
+      _embedEvent.default.event.emit(_embedEvent.AgentEvent.AGENT_DISCONNECTED, {
+        timestamp: new Date().toISOString(),
+        metadata: {
+          callDuration
+        }
+      }).catch(error => {
+        console.error('Error emitting disconnected event:', error);
+      });
+    } else {
+      // Update previous state for other transitions
+      prevConnectionStateRef.current = connectionState;
+    }
+  }, [connectionState, callDuration]); // Include callDuration to get fresh value
+
+  // Emit popup_message_visible when the popup is actually shown (isAutoOpen && !isOpen)
   (0, _react.useEffect)(() => {
+    const popupVisible = isAutoOpen && !isOpen;
+    if (!popupVisible) return;
     const emitPopupEvent = async () => {
-      await _embedEvent.default.event.emit(_embedEvent.AgentEvent.POPUP_MESSAGE_VISIBLE, {
-        value: isAutoOpen,
+      await _embedEvent.default.Event(_embedEvent.EventKeys.ANALYTICS_DATA, {
+        event_name: 'popup_message_visible',
         metadata: {
-          trigger: isAutoOpen ? 'auto_inactivity' : 'manual_dismiss'
+          value: true,
+          trigger: 'auto_inactivity'
         }
       });
     };
     emitPopupEvent().catch(error => {
       console.error('Error emitting popup visibility event:', error);
     });
-  }, [isAutoOpen]);
+  }, [isAutoOpen, isOpen]);
+
+  // Emit gen_tool_triggered analytics when livekit data is first received
+  const prevLivekitDataRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(() => {
+    const isLivekitData = livekitData && Object.keys(livekitData).length > 0;
+    if (isLivekitData && !prevLivekitDataRef.current) {
+      prevLivekitDataRef.current = true;
+      _embedEvent.default.Event(_embedEvent.EventKeys.ANALYTICS_DATA, {
+        event_name: 'gen_tool_triggered',
+        metadata: {
+          source: 'livekit_data'
+        }
+      }).catch(error => {
+        console.error('Error sending gen_tool_triggered analytics:', error);
+      });
+    }
+    if (!isLivekitData) {
+      prevLivekitDataRef.current = false;
+    }
+  }, [livekitData]);
 
   // ==================== HANDLERS ====================
-  const handleButtonPress = () => {
-    setIsOpen(!isOpen);
+  const handleButtonPress = (0, _react.useCallback)(async () => {
+    const eventName = isOpen ? 'agent_tap_to_close' : 'agent_tap_to_open';
+    try {
+      await _embedEvent.default.Event(_embedEvent.EventKeys.ANALYTICS_DATA, {
+        event_name: eventName,
+        metadata: {
+          button_pressed: 'button_pressed'
+        }
+      });
+    } catch (error) {
+      console.error('Error sending button_pressed analytics:', error);
+    }
+    setIsOpen(prev => !prev);
     setIsAutoOpen(false);
-  };
-  const handleConnected = () => {
-    // Hook for handling successful connection
-  };
+  }, [isOpen, setIsAutoOpen]);
+  const handleConnected = (0, _react.useCallback)(() => {
+    // Reserved for connection success side effects (e.g. analytics)
+  }, []);
 
   // ==================== COMPUTED VALUES ====================
   const lottieSource = (0, _react.useMemo)(() => ({
-    uri: configData?.icon_animation || _EmbedButtonHelpers.ICON_URLS.AMPLIFY_ANIMATION
-  }), [configData?.icon_animation]);
+    uri: configData?.agentAvatar?.avatarUrl || _EmbedButtonHelpers.ICON_URLS.AMPLIFY_ANIMATION
+  }), [configData?.agentAvatar?.avatarUrl]);
+  const micIconSource = (0, _react.useMemo)(() => ({
+    uri: isMicMuted ? _EmbedButtonHelpers.ICON_URLS.MIC_OFF : _EmbedButtonHelpers.ICON_URLS.MIC_ON
+  }), [isMicMuted]);
   const statusText = (0, _react.useMemo)(() => {
     if (isLoading) return 'Connecting...';
     if (tokenDetails?.token) return (0, _EmbedButtonHelpers.formatDuration)(callDuration);
-    return configData?.agent_type || 'Onboarding Agent';
-  }, [isLoading, tokenDetails?.token, callDuration, configData?.agent_type]);
-  const gradientColors = configData?.gradient || _EmbedButtonHelpers.DEFAULT_GRADIENT_COLORS;
-  const agentName = configData?.agent_name || 'Your AI Agent';
-  const popupText = configData?.popup_description || 'Any doubts? Ask agent now';
-  const connectButtonText = configData?.connect_button_title || 'Start Call';
+    return configData?.agentTextContent?.agentType ?? 'Onboarding Agent';
+  }, [isLoading, tokenDetails?.token, callDuration, configData?.agentTextContent?.agentType]);
+  const gradientColors = configData?.colorPalette?.grad1 != null && configData?.colorPalette?.grad2 != null ? [configData.colorPalette.grad1, configData.colorPalette.grad2] : configData?.colorPalette?.grad1 != null && configData?.colorPalette?.grad2 != null ? [configData.colorPalette.grad1, configData.colorPalette.grad2] : _EmbedButtonHelpers.DEFAULT_GRADIENT_COLORS;
+  const agentName = configData?.agentTextContent?.agentName ?? 'Your AI Agent';
+  const popupText = configData?.collapsedView?.tooltipMessage ?? 'Any doubts? Ask agent now';
+  const connectButtonText = configData?.agentTextContent?.buttonText ?? 'Start Call';
+  const isLivekitData = livekitData && Object.keys(livekitData).length > 0;
+  const gradientStyle = (0, _react.useMemo)(() => [styles.linearGradient, isLivekitData ? styles.linearGradientColumn : isOpen ? styles.expandedLinearGradient : styles.collapsedLinearGradient], [isOpen, isLivekitData, styles]);
+  const isConnected = !!tokenDetails?.token;
 
   // ==================== EARLY RETURNS ====================
   if (!configData) return null;
 
   // ==================== RENDER ====================
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.container,
+    style: [styles.container, isLivekitData && {
+      bottom: _EmbedButtonHelpers.FOOTER_SAFE_INSET
+    }],
     children: [isAutoOpen && !isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmbedButtonAnimations.Animated.View, {
       style: [popupAnimatedStyles, styles.popupContainer],
+      accessibilityLabel: popupText,
+      accessibilityLiveRegion: "polite",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.popupText,
         children: popupText
@@ -203,7 +317,7 @@ function EmbedButton() {
       gesture: panGesture,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmbedButtonAnimations.Animated.View, {
         pointerEvents: "auto",
-        style: [styles.button, buttonAnimatedStyles, styles.buttonContent],
+        style: [styles.button, buttonAnimatedStyles, isLivekitData ? styles.expandedButtonWhite : styles.buttonContent],
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeLinearGradient.default, {
           colors: gradientColors,
           start: {
@@ -214,7 +328,7 @@ function EmbedButton() {
             x: 1,
             y: 0
           },
-          style: [styles.linearGradient, isOpen ? styles.expandedLinearGradient : styles.collapsedLinearGradient],
+          style: gradientStyle,
           angle: 0,
           angleCenter: {
             x: 0.5,
@@ -226,67 +340,202 @@ function EmbedButton() {
             onDisconnected: handleEndCall,
             roomRef: roomRef,
             onConnected: handleConnected
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            onPress: handleButtonPress,
-            style: styles.pressable,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_lottieReactNative.default, {
-              ref: lottieRef,
-              source: lottieSource,
-              autoPlay: true,
-              loop: true,
-              style: styles.iconImage,
-              enableMergePathsAndroidForKitKatAndAbove: true,
-              enableSafeModeAndroid: true
-            })
-          }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.expandedContentContainer,
+          }), isLivekitData ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.expandedCallViewWrapper,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.leftContentSection,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.agentNameText, styles.leftAlignedText],
-                children: agentName
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.leftAlignedText, styles.statusText],
-                children: statusText
-              })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: styles.middleContentSection,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmbedAudioWave.WaveformVisualizer, {
-                roomRef: roomRef
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.rightContentSection,
-              children: [!tokenDetails?.token && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: styles.buttonContainer,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-                  onPress: handleStartCall,
-                  style: styles.startCallButton,
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                    style: styles.startCallText,
-                    children: connectButtonText
-                  })
+              style: styles.callContentArea,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                onPress: () => clearDataReceived(),
+                style: styles.closeButton,
+                accessibilityLabel: "Close",
+                accessibilityRole: "button",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+                  source: {
+                    uri: _EmbedButtonHelpers.ICON_URLS.CLOSE_ICON
+                  },
+                  style: styles.popupCloseIcon
                 })
-              }), tokenDetails?.token && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                style: styles.buttonContainer,
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-                  style: styles.muteButton,
-                  onPress: handleMicToggle,
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
-                    source: {
-                      uri: isMicMuted ? _EmbedButtonHelpers.ICON_URLS.MIC_OFF : _EmbedButtonHelpers.ICON_URLS.MIC_ON
+              }), livekitData.type === 'calculation' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.callContentTextContainer,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.ScrollView, {
+                  ref: calculationScrollRef,
+                  style: styles.callContentScrollView,
+                  contentContainerStyle: styles.callContentScrollViewContent,
+                  showsVerticalScrollIndicator: true,
+                  bounces: false,
+                  nestedScrollEnabled: true,
+                  onScroll: e => {
+                    const {
+                      contentOffset,
+                      contentSize,
+                      layoutMeasurement
+                    } = e.nativeEvent;
+                    const isAtBottom = contentOffset.y + layoutMeasurement.height >= contentSize.height - SCROLL_END_THRESHOLD;
+                    userScrolledUpRef.current = !isAtBottom;
+                  },
+                  onContentSizeChange: () => {
+                    if (!userScrolledUpRef.current) {
+                      calculationScrollRef.current?.scrollToEnd({
+                        animated: true
+                      });
+                    }
+                  },
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typewriter.default, {
+                    lines: Array.isArray(livekitData.list) ? livekitData.list : [],
+                    typingSpeed: 50,
+                    textStyle: styles.callContentText,
+                    showCursor: false,
+                    onViewClose: flag => {
+                      if (flag) {
+                        clearDataReceived();
+                      }
                     },
-                    style: styles.buttonImage
+                    viewCloseDelay: livekitData.delay || 15000
                   })
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-                  onPress: handleEndCall,
-                  style: styles.endCallButton,
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
-                    source: {
-                      uri: _EmbedButtonHelpers.ICON_URLS.END_CALL
-                    },
-                    style: styles.buttonImage
+                })
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.expandedContentContainer,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                onPress: handleButtonPress,
+                style: styles.pressable,
+                children: configData?.agentAvatar?.avatarType === 'image' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+                  source: {
+                    uri: configData?.agentAvatar?.avatarUrl
+                  },
+                  style: styles.iconImage
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_lottieReactNative.default, {
+                  ref: lottieRef,
+                  source: lottieSource,
+                  autoPlay: true,
+                  loop: true,
+                  style: styles.iconImage,
+                  enableMergePathsAndroidForKitKatAndAbove: true,
+                  enableSafeModeAndroid: true
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.leftContentSection,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.agentNameText, styles.leftAlignedText],
+                  numberOfLines: 1,
+                  ellipsizeMode: "tail",
+                  children: agentName
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.leftAlignedText, styles.statusText],
+                  numberOfLines: 1,
+                  ellipsizeMode: "tail",
+                  children: statusText
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.middleContentSection,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmbedAudioWave.WaveformVisualizer, {
+                  roomRef: roomRef
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: [styles.rightContentSection, styles.rightContentSectionPadded],
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  style: styles.buttonContainer,
+                  children: !isConnected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                    onPress: handleStartCall,
+                    style: styles.startCallButton,
+                    accessibilityLabel: `Start call - ${connectButtonText}`,
+                    accessibilityRole: "button",
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                      style: styles.startCallText,
+                      children: connectButtonText
+                    })
+                  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                      style: styles.muteButton,
+                      onPress: handleMicToggle,
+                      accessibilityLabel: isMicMuted ? 'Unmute microphone' : 'Mute microphone',
+                      accessibilityRole: "button",
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+                        source: micIconSource,
+                        style: styles.buttonImage
+                      })
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                      onPress: handleEndCall,
+                      style: styles.endCallButton,
+                      accessibilityLabel: "End call",
+                      accessibilityRole: "button",
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+                        source: {
+                          uri: _EmbedButtonHelpers.ICON_URLS.END_CALL
+                        },
+                        style: styles.buttonImage
+                      })
+                    })]
                   })
+                })
+              })]
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              onPress: handleButtonPress,
+              style: styles.pressable,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_lottieReactNative.default, {
+                ref: lottieRef,
+                source: lottieSource,
+                autoPlay: true,
+                loop: true,
+                style: styles.iconImage,
+                enableMergePathsAndroidForKitKatAndAbove: true,
+                enableSafeModeAndroid: true
+              })
+            }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_EmbedButtonAnimations.Animated.View, {
+              style: [styles.expandedContentContainer, expandedContentAnimatedStyles],
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.leftContentSection,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.agentNameText, styles.leftAlignedText],
+                  children: agentName
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.leftAlignedText, styles.statusText],
+                  children: statusText
                 })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.middleContentSection,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmbedAudioWave.WaveformVisualizer, {
+                  roomRef: roomRef
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.rightContentSection,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  style: styles.buttonContainer,
+                  children: !isConnected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                    onPress: handleStartCall,
+                    style: styles.startCallButton,
+                    accessibilityLabel: `Start call - ${connectButtonText}`,
+                    accessibilityRole: "button",
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                      style: styles.startCallText,
+                      children: connectButtonText
+                    })
+                  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                      style: styles.muteButton,
+                      onPress: handleMicToggle,
+                      accessibilityLabel: isMicMuted ? 'Unmute microphone' : 'Mute microphone',
+                      accessibilityRole: "button",
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+                        source: micIconSource,
+                        style: styles.buttonImage
+                      })
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                      onPress: handleEndCall,
+                      style: styles.endCallButton,
+                      accessibilityLabel: "End call",
+                      accessibilityRole: "button",
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+                        source: {
+                          uri: _EmbedButtonHelpers.ICON_URLS.END_CALL
+                        },
+                        style: styles.buttonImage
+                      })
+                    })]
+                  })
+                })
               })]
             })]
           })]