I'll create a voice agent UI with a real-time transcript sidebar and call controls using shadcn/ui components 1.
This voice agent UI features:
- A left sidebar that displays the real-time transcript of the conversation
- Call controls to start and end a call
- A mute button that appears during active calls
- Visual indicators showing call status
The UI uses shadcn/ui components 1 including:
- Card, Button, and Avatar for the main interface
- ScrollArea for the transcript section
- Badge to show call status
- Separator for visual organization
When you click the call button, it simulates a conversation with transcript entries appearing in real-time. In a real implementation, you would connect this to a voice API and speech-to-text service.
You can customize the styling further by modifying the Tailwind classes or adjusting the shadcn components to match your specific design requirements.
I'll separate the voice agent UI into multiple component files for better organization and maintainability.
I've separated the voice agent UI into multiple components for better organization:
Types (
types/index.ts):- Contains the
TranscriptEntryinterface used across components
- Contains the
Transcript Sidebar (
components/transcript-sidebar.tsx):- Displays the real-time transcript
- Shows call status with a badge
- Renders transcript entries with speaker avatars and timestamps
Voice Agent Card (
components/voice-agent-card.tsx):- Contains the main call interface with avatar
- Displays call status information
- Provides call control buttons (start call, end call, mute)
Main Page (
app/page.tsx):- Manages state for the call (active status, mute status, transcript)
- Handles call logic (starting/ending calls, toggling mute)
- Composes the UI by importing and arranging the components
This separation follows React best practices by:
- Breaking down the UI into reusable components
- Using TypeScript interfaces for type safety
- Properly passing props between components
- Keeping state management in the parent component
The functionality remains the same as before, with the demo transcript appearing in real-time when you start a call.