{multipliers.map((multiplier, index) => { const barHeight = minHeight + normalizedAmplitude * maxHeight * multiplier; return (

{/* Top rounded cap */}

{/* Middle straight section */}

{/* Bottom rounded cap */}

); })}

); } ``` ### ConnectionStatusIndicator The `ConnectionStatusIndicator` component is used to display the connection status of the voice agent. It uses the `status` value returned from the useLayercodeAgent hook to display the connection status. ```tsx src/ui/ConnectionStatusIndicator.tsx [expandable] theme={null} export function ConnectionStatusIndicator({ status }: { status: string }) { return (

{status === "connected" ? "Connected" : status === "connecting" ? "Connecting..." : status === "error" ? "Connection Error" : "Disconnected"}

); } ``` ### VoiceAgentPushToTalk (optional) Because the `useLayercodeAgent` hook handles all of the audio streaming and playback, in most cases the microphone button is simply a visual aid and doesn't implement any logic. A simple microphone icon inside a circle will suffice in most cases. Layercode does support 'push-to-talk' turn taking, as an alternative to automatic turn taking (read more about [turn taking](/explanations/turn-taking)). When using 'push-to-talk' turn taking, holding down and releasing the `MicrophoneButton` must send a websocket message to tell Layercode the user has started and finished talking. In this example, we provide an alternative `VoiceAgentPushToTalk` component, that along with the `MicrophoneButtonPushToTalk` component, handles this logic. To use this mode, you'll need to edit `src/App.tsx` to use the `VoiceAgentPushToTalk` component instead of the `VoiceAgent` component. Then in your Layercode Dashboard, you'll need to click Edit in the Transcription section of your voice agent and set the Turn Taking to Push to Talk. ```tsx src/ui/VoiceAgentPushToTalk.tsx [expandable] theme={null} import { useLayercodeAgent } from '@layercode/react-sdk'; import { AudioVisualization } from './AudioVisualization'; import { ConnectionStatusIndicator } from './ConnectionStatusIndicator'; import { MicrophoneButtonPushToTalk } from './MicrophoneButtonPushToTalk'; export default function VoiceAgentPushToTalk() { const { agentAudioAmplitude, status, triggerUserTurnStarted, triggerUserTurnFinished } = useLayercodeAgent({ agentId: "your-agent-id", authorizeSessionEndpoint: '/api/authorize', onDataMessage: (data) => { console.log('Received data msg', data); }, }); return (

Voice Agent Demo

); } ``` ```tsx src/ui/MicrophoneButtonPushToTalk.tsx [expandable] theme={null} import { useButtonHold } from '../hooks/useButtonHold'; import { MicrophoneIcon } from '../icons/MicrophoneIcon'; export function MicrophoneButtonPushToTalk({ triggerUserTurnStarted, triggerUserTurnFinished }: { triggerUserTurnStarted: () => void; triggerUserTurnFinished: () => void }) { // When using push-to-talk turn taking in your Layercode voice agent, you'll need to call triggerUserTurnStarted and triggerUserTurnFinished when the user holds down the microphone button or spacebar. // The useButtonHold hook handles this state, and also includes debouncing so that short accidental clicks are ignored. const { isVisuallyPressed, handlePressStart, handlePressEnd } = useButtonHold({ onPressStart: triggerUserTurnStarted, onPressEnd: triggerUserTurnFinished, key: 'Space', }); return ( ); } ```