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

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

@@ -6,28 +6,30 @@
  * Features: draggable, expandable, animated, with call controls and auto-trigger support.
  */
 
+import { ConnectionState } from 'livekit-client';
 import LottieView from 'lottie-react-native';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Image, Text, TouchableOpacity, View } from 'react-native';
-import { GestureDetector } from 'react-native-gesture-handler';
+import { GestureDetector, ScrollView } from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
+import Embed, { AgentEvent, EventKeys } from "../../events/embed.event.js";
 import { useVoiceAgent } from "../../hooks/voiceagent.js";
 import { createEmbedButtonStyles } from "../styles/EmbedButton.style.js";
 import { WaveformVisualizer } from "./EmbedAudioWave.js";
 import Voice from "./EmbedVoice.js";
-import Embed, { AgentEvent } from "../../events/embed.event.js";
 
 // Helpers and constants
-import { BUTTON_DIMENSIONS, DEFAULT_GRADIENT_COLORS, formatDuration, ICON_URLS } from "../../hooks/EmbedButton.helpers.js";
+import { BUTTON_DIMENSIONS, DEFAULT_GRADIENT_COLORS, FOOTER_SAFE_INSET, formatDuration, ICON_URLS } from "../../hooks/EmbedButton.helpers.js";
+import Typewriter from "../DynamicComponent/Typewriter.js";
 
 // Custom hooks
 import { useCallDuration, useCallManagement, useConfigData, useInactivityBehavior } from "../../hooks/EmbedButton.hooks.js";
 
 // Animation hooks
-import { Animated, createPanGesture, useAnimationValues, useBreathingAnimation, useButtonAnimatedStyles, useButtonAnimations, usePopupAnimatedStyles } from "../../hooks/EmbedButton.animations.js";
+import { Animated, createPanGesture, useAnimationValues, useBreathingAnimation, useButtonAnimatedStyles, useButtonAnimations, useExpandedContentAnimatedStyles, useInputSectionAnimations, usePopupAnimatedStyles } from "../../hooks/EmbedButton.animations.js";
 
 // ==================== STYLES CONFIG ====================
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const defaultStyles = {
   buttonWidth: BUTTON_DIMENSIONS.WIDTH,
   buttonHeight: BUTTON_DIMENSIONS.HEIGHT,
@@ -44,35 +46,57 @@ const defaultStyles = {
 };
 
 // ==================== MAIN COMPONENT ====================
+
 /**
  * EmbedButton - Main voice agent floating action button
  *
  * @example
  * ```tsx
  * <EmbedButton />
+ * <EmbedButton containerInset={{ right: 16, bottom: 24 }} />
  * ```
  */
-export function EmbedButton() {
+export function EmbedButton({
+  containerInset
+} = {}) {
   // ==================== VOICE AGENT STATE ====================
   const {
-    initializeVoiceAgent,
     tokenDetails,
-    endCall,
     isLoading,
     isMicMuted,
+    connectionState,
+    roomRef,
     muteMic,
+    endCall,
     unmuteMic,
-    connectionState,
-    roomRef
+    clearDataReceived,
+    dataTranscription: livekitData,
+    initializeVoiceAgent
   } = useVoiceAgent();
 
   // ==================== LOCAL STATE ====================
   const [isOpen, setIsOpen] = useState(false);
+  const [expandDirection, setExpandDirection] = useState('right');
   const lottieRef = useRef(null);
-  const styles = useMemo(() => createEmbedButtonStyles(defaultStyles), []);
+  const calculationScrollRef = useRef(null);
+  const userScrolledUpRef = useRef(false);
+  const SCROLL_END_THRESHOLD = 20;
+
+  // Reset "user scrolled up" when calculation content changes so new content auto-scrolls to bottom
+  useEffect(() => {
+    if (livekitData?.type === 'calculation') {
+      userScrolledUpRef.current = false;
+    }
+  }, [livekitData?.list, livekitData?.type]);
 
   // ==================== CUSTOM HOOKS ====================
   const configData = useConfigData();
+  const styles = useMemo(() => createEmbedButtonStyles({
+    ...defaultStyles,
+    ...(containerInset != null && {
+      containerInset
+    })
+  }, configData), [configData, containerInset]);
   const {
     callDuration,
     resetDuration
@@ -82,13 +106,14 @@ export function EmbedButton() {
     handleEndCall,
     handleMicToggle
   } = useCallManagement({
-    initializeVoiceAgent,
+    isOpen,
+    isMicMuted,
     endCall,
     muteMic,
+    setIsOpen,
     unmuteMic,
-    isMicMuted,
     resetDuration,
-    setIsOpen
+    initializeVoiceAgent
   });
   const {
     isAutoOpen,
@@ -109,86 +134,175 @@ export function EmbedButton() {
     start,
     menuAnimation,
     buttonWidth,
-    buttonScale
+    buttonScale,
+    buttonHeight,
+    inputSectionProgress
   } = animationValues;
-  useButtonAnimations(isOpen, menuAnimation, buttonWidth);
+  useButtonAnimations(isOpen || livekitData && Object.keys(livekitData).length > 0, menuAnimation, buttonWidth, offset, start, expandDirection);
+  useInputSectionAnimations(livekitData && Object.keys(livekitData).length > 0, inputSectionProgress, buttonHeight);
   useBreathingAnimation(isOpen, isAutoOpen, buttonScale);
-  const buttonAnimatedStyles = useButtonAnimatedStyles(isOpen, offset, buttonWidth, isPressed, buttonScale);
-  const popupAnimatedStyles = usePopupAnimatedStyles(offset, isPressed);
-  const panGesture = useMemo(() => createPanGesture(isPressed, offset, start, isOpen, setIsAutoOpen), [isPressed, offset, start, isOpen, setIsAutoOpen]);
+  const buttonAnimatedStyles = useButtonAnimatedStyles(isOpen, offset, buttonWidth, isPressed, buttonScale, buttonHeight);
+  const expandedContentAnimatedStyles = useExpandedContentAnimatedStyles(menuAnimation);
+  const popupAnimatedStyles = usePopupAnimatedStyles(offset, isPressed, expandDirection);
+  const panGesture = useMemo(() => 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 = useRef(connectionState);
+  const lastEmittedEventRef = useRef(null);
   useEffect(() => {
-    const emitConnectionEvent = async () => {
-      if (connectionState === 'connected') {
-        await Embed.event.emit(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 Embed.event.emit(AgentEvent.AGENT_DISCONNECTED, {
-          timestamp: new Date().toISOString(),
-          metadata: {
-            callDuration
-          }
-        });
+    const prevState = prevConnectionStateRef.current;
+
+    // Check if we should emit connected event
+    if (connectionState === ConnectionState.Connected && prevState !== 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
+      Embed.event.emit(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)
+      Embed.Event(EventKeys.ANALYTICS_DATA, {
+        event_name: 'agent_conversation_started'
+      }).catch(error => {
+        console.error('Error sending agent_conversation_started analytics:', error);
+      });
+    } else if (prevState === ConnectionState.Connected && connectionState !== 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
+      Embed.event.emit(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)
   useEffect(() => {
+    const popupVisible = isAutoOpen && !isOpen;
+    if (!popupVisible) return;
     const emitPopupEvent = async () => {
-      await Embed.event.emit(AgentEvent.POPUP_MESSAGE_VISIBLE, {
-        value: isAutoOpen,
+      await Embed.Event(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 = useRef(false);
+  useEffect(() => {
+    const isLivekitData = livekitData && Object.keys(livekitData).length > 0;
+    if (isLivekitData && !prevLivekitDataRef.current) {
+      prevLivekitDataRef.current = true;
+      Embed.Event(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 = useCallback(async () => {
+    const eventName = isOpen ? 'agent_tap_to_close' : 'agent_tap_to_open';
+    try {
+      await Embed.Event(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 = useCallback(() => {
+    // Reserved for connection success side effects (e.g. analytics)
+  }, []);
 
   // ==================== COMPUTED VALUES ====================
   const lottieSource = useMemo(() => ({
-    uri: configData?.icon_animation || ICON_URLS.AMPLIFY_ANIMATION
-  }), [configData?.icon_animation]);
+    uri: configData?.agentAvatar?.avatarUrl || ICON_URLS.AMPLIFY_ANIMATION
+  }), [configData?.agentAvatar?.avatarUrl]);
+  const micIconSource = useMemo(() => ({
+    uri: isMicMuted ? ICON_URLS.MIC_OFF : ICON_URLS.MIC_ON
+  }), [isMicMuted]);
   const statusText = useMemo(() => {
     if (isLoading) return 'Connecting...';
     if (tokenDetails?.token) return formatDuration(callDuration);
-    return configData?.agent_type || 'Onboarding Agent';
-  }, [isLoading, tokenDetails?.token, callDuration, configData?.agent_type]);
-  const gradientColors = configData?.gradient || 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] : 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 = 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__*/_jsxs(View, {
-    style: styles.container,
+    style: [styles.container, isLivekitData && {
+      bottom: FOOTER_SAFE_INSET
+    }],
     children: [isAutoOpen && !isOpen && /*#__PURE__*/_jsx(Animated.View, {
       style: [popupAnimatedStyles, styles.popupContainer],
+      accessibilityLabel: popupText,
+      accessibilityLiveRegion: "polite",
       children: /*#__PURE__*/_jsx(Text, {
         style: styles.popupText,
         children: popupText
@@ -197,7 +311,7 @@ export function EmbedButton() {
       gesture: panGesture,
       children: /*#__PURE__*/_jsx(Animated.View, {
         pointerEvents: "auto",
-        style: [styles.button, buttonAnimatedStyles, styles.buttonContent],
+        style: [styles.button, buttonAnimatedStyles, isLivekitData ? styles.expandedButtonWhite : styles.buttonContent],
         children: /*#__PURE__*/_jsxs(LinearGradient, {
           colors: gradientColors,
           start: {
@@ -208,7 +322,7 @@ export function EmbedButton() {
             x: 1,
             y: 0
           },
-          style: [styles.linearGradient, isOpen ? styles.expandedLinearGradient : styles.collapsedLinearGradient],
+          style: gradientStyle,
           angle: 0,
           angleCenter: {
             x: 0.5,
@@ -220,67 +334,202 @@ export function EmbedButton() {
             onDisconnected: handleEndCall,
             roomRef: roomRef,
             onConnected: handleConnected
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            onPress: handleButtonPress,
-            style: styles.pressable,
-            children: /*#__PURE__*/_jsx(LottieView, {
-              ref: lottieRef,
-              source: lottieSource,
-              autoPlay: true,
-              loop: true,
-              style: styles.iconImage,
-              enableMergePathsAndroidForKitKatAndAbove: true,
-              enableSafeModeAndroid: true
-            })
-          }), isOpen && /*#__PURE__*/_jsxs(View, {
-            style: styles.expandedContentContainer,
+          }), isLivekitData ? /*#__PURE__*/_jsxs(View, {
+            style: styles.expandedCallViewWrapper,
             children: [/*#__PURE__*/_jsxs(View, {
-              style: styles.leftContentSection,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: [styles.agentNameText, styles.leftAlignedText],
-                children: agentName
-              }), /*#__PURE__*/_jsx(Text, {
-                style: [styles.leftAlignedText, styles.statusText],
-                children: statusText
-              })]
-            }), /*#__PURE__*/_jsx(View, {
-              style: styles.middleContentSection,
-              children: /*#__PURE__*/_jsx(WaveformVisualizer, {
-                roomRef: roomRef
-              })
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.rightContentSection,
-              children: [!tokenDetails?.token && /*#__PURE__*/_jsx(View, {
-                style: styles.buttonContainer,
-                children: /*#__PURE__*/_jsx(TouchableOpacity, {
-                  onPress: handleStartCall,
-                  style: styles.startCallButton,
-                  children: /*#__PURE__*/_jsx(Text, {
-                    style: styles.startCallText,
-                    children: connectButtonText
-                  })
+              style: styles.callContentArea,
+              children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+                onPress: () => clearDataReceived(),
+                style: styles.closeButton,
+                accessibilityLabel: "Close",
+                accessibilityRole: "button",
+                children: /*#__PURE__*/_jsx(Image, {
+                  source: {
+                    uri: ICON_URLS.CLOSE_ICON
+                  },
+                  style: styles.popupCloseIcon
                 })
-              }), tokenDetails?.token && /*#__PURE__*/_jsxs(View, {
-                style: styles.buttonContainer,
-                children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-                  style: styles.muteButton,
-                  onPress: handleMicToggle,
-                  children: /*#__PURE__*/_jsx(Image, {
-                    source: {
-                      uri: isMicMuted ? ICON_URLS.MIC_OFF : ICON_URLS.MIC_ON
+              }), livekitData.type === 'calculation' && /*#__PURE__*/_jsx(View, {
+                style: styles.callContentTextContainer,
+                children: /*#__PURE__*/_jsx(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__*/_jsx(Typewriter, {
+                    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__*/_jsx(TouchableOpacity, {
-                  onPress: handleEndCall,
-                  style: styles.endCallButton,
-                  children: /*#__PURE__*/_jsx(Image, {
-                    source: {
-                      uri: ICON_URLS.END_CALL
-                    },
-                    style: styles.buttonImage
+                })
+              })]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.expandedContentContainer,
+              children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+                onPress: handleButtonPress,
+                style: styles.pressable,
+                children: configData?.agentAvatar?.avatarType === 'image' ? /*#__PURE__*/_jsx(Image, {
+                  source: {
+                    uri: configData?.agentAvatar?.avatarUrl
+                  },
+                  style: styles.iconImage
+                }) : /*#__PURE__*/_jsx(LottieView, {
+                  ref: lottieRef,
+                  source: lottieSource,
+                  autoPlay: true,
+                  loop: true,
+                  style: styles.iconImage,
+                  enableMergePathsAndroidForKitKatAndAbove: true,
+                  enableSafeModeAndroid: true
+                })
+              }), /*#__PURE__*/_jsxs(View, {
+                style: styles.leftContentSection,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: [styles.agentNameText, styles.leftAlignedText],
+                  numberOfLines: 1,
+                  ellipsizeMode: "tail",
+                  children: agentName
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: [styles.leftAlignedText, styles.statusText],
+                  numberOfLines: 1,
+                  ellipsizeMode: "tail",
+                  children: statusText
+                })]
+              }), /*#__PURE__*/_jsx(View, {
+                style: styles.middleContentSection,
+                children: /*#__PURE__*/_jsx(WaveformVisualizer, {
+                  roomRef: roomRef
+                })
+              }), /*#__PURE__*/_jsx(View, {
+                style: [styles.rightContentSection, styles.rightContentSectionPadded],
+                children: /*#__PURE__*/_jsx(View, {
+                  style: styles.buttonContainer,
+                  children: !isConnected ? /*#__PURE__*/_jsx(TouchableOpacity, {
+                    onPress: handleStartCall,
+                    style: styles.startCallButton,
+                    accessibilityLabel: `Start call - ${connectButtonText}`,
+                    accessibilityRole: "button",
+                    children: /*#__PURE__*/_jsx(Text, {
+                      style: styles.startCallText,
+                      children: connectButtonText
+                    })
+                  }) : /*#__PURE__*/_jsxs(_Fragment, {
+                    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+                      style: styles.muteButton,
+                      onPress: handleMicToggle,
+                      accessibilityLabel: isMicMuted ? 'Unmute microphone' : 'Mute microphone',
+                      accessibilityRole: "button",
+                      children: /*#__PURE__*/_jsx(Image, {
+                        source: micIconSource,
+                        style: styles.buttonImage
+                      })
+                    }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                      onPress: handleEndCall,
+                      style: styles.endCallButton,
+                      accessibilityLabel: "End call",
+                      accessibilityRole: "button",
+                      children: /*#__PURE__*/_jsx(Image, {
+                        source: {
+                          uri: ICON_URLS.END_CALL
+                        },
+                        style: styles.buttonImage
+                      })
+                    })]
                   })
+                })
+              })]
+            })]
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: handleButtonPress,
+              style: styles.pressable,
+              children: /*#__PURE__*/_jsx(LottieView, {
+                ref: lottieRef,
+                source: lottieSource,
+                autoPlay: true,
+                loop: true,
+                style: styles.iconImage,
+                enableMergePathsAndroidForKitKatAndAbove: true,
+                enableSafeModeAndroid: true
+              })
+            }), isOpen && /*#__PURE__*/_jsxs(Animated.View, {
+              style: [styles.expandedContentContainer, expandedContentAnimatedStyles],
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: styles.leftContentSection,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: [styles.agentNameText, styles.leftAlignedText],
+                  children: agentName
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: [styles.leftAlignedText, styles.statusText],
+                  children: statusText
                 })]
+              }), /*#__PURE__*/_jsx(View, {
+                style: styles.middleContentSection,
+                children: /*#__PURE__*/_jsx(WaveformVisualizer, {
+                  roomRef: roomRef
+                })
+              }), /*#__PURE__*/_jsx(View, {
+                style: styles.rightContentSection,
+                children: /*#__PURE__*/_jsx(View, {
+                  style: styles.buttonContainer,
+                  children: !isConnected ? /*#__PURE__*/_jsx(TouchableOpacity, {
+                    onPress: handleStartCall,
+                    style: styles.startCallButton,
+                    accessibilityLabel: `Start call - ${connectButtonText}`,
+                    accessibilityRole: "button",
+                    children: /*#__PURE__*/_jsx(Text, {
+                      style: styles.startCallText,
+                      children: connectButtonText
+                    })
+                  }) : /*#__PURE__*/_jsxs(_Fragment, {
+                    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+                      style: styles.muteButton,
+                      onPress: handleMicToggle,
+                      accessibilityLabel: isMicMuted ? 'Unmute microphone' : 'Mute microphone',
+                      accessibilityRole: "button",
+                      children: /*#__PURE__*/_jsx(Image, {
+                        source: micIconSource,
+                        style: styles.buttonImage
+                      })
+                    }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                      onPress: handleEndCall,
+                      style: styles.endCallButton,
+                      accessibilityLabel: "End call",
+                      accessibilityRole: "button",
+                      children: /*#__PURE__*/_jsx(Image, {
+                        source: {
+                          uri: ICON_URLS.END_CALL
+                        },
+                        style: styles.buttonImage
+                      })
+                    })]
+                  })
+                })
               })]
             })]
           })]