diff --git a/app/assistant/ui/AgentVisualization.tsx b/app/assistant/ui/AgentVisualization.tsx index df68e67..fd54189 100644 --- a/app/assistant/ui/AgentVisualization.tsx +++ b/app/assistant/ui/AgentVisualization.tsx @@ -1,10 +1,11 @@ -import { useAgent } from '@livekit/components-react'; +import { useAgent, useRemoteParticipants } from '@livekit/components-react'; import { BarVisualizer, VideoTrack } from '@livekit/react-native'; import React, { useCallback, useState } from 'react'; import { LayoutChangeEvent, StyleProp, StyleSheet, + Text, View, ViewStyle, } from 'react-native'; @@ -17,6 +18,10 @@ const barSize = 0.2; export default function AgentVisualization({ style }: AgentVisualizationProps) { const { state, microphoneTrack, cameraTrack } = useAgent(); + const remoteParticipants = useRemoteParticipants(); + const hasAgent = remoteParticipants.some( + (participant) => participant.isAgent + ); const [barWidth, setBarWidth] = useState(0); const [barBorderRadius, setBarBorderRadius] = useState(0); @@ -46,6 +51,7 @@ export default function AgentVisualization({ style }: AgentVisualizationProps) { style={styles.barVisualizer} /> + {!hasAgent && Waiting for agent} {videoView} ); @@ -71,4 +77,10 @@ const styles = StyleSheet.create({ width: '100%', height: '100%', }, + waitingText: { + position: 'absolute', + top: '68%', + color: '#FFFFFF', + fontSize: 16, + }, });