Conversation bar

A React component in Beamline's Voice & audio category.

The control bar of a voice call with an agent: one button to call and hang up, the agent's state as bars, a call timer, mute, and typing when talking is not an option. Works with any provider through one adapter, or with a session shared by the rest of the screen.

Use it for

The bottom bar of a voice-agent screen.
Adding a call to an existing assistant panel.

Not for

Text-only assistants (prompt-bar).
Dictating into a field (speech-input).
A whole voice screen (the voice-agent block, which uses this).

Anatomy

call / end button
agent state (bar-visualizer; dropped when the bar is narrower than 22rem, so the status words keep their room)
status and call timer
mute toggle
keyboard toggle
message field and send (typing)
failure with fix and retry

Variants

variant: raised (floating pill, default), flat (inside a panel footer)

States

idle (call)
asking for the microphone
connecting
listening
thinking
talking
muted
reconnecting
typing
ended
error: blocked / no microphone / connection / service

Keyboard

Tab: call, mute, keyboard
Enter or Space on Call starts and on End hangs up
Keyboard opens the field (focus moves into it); Enter sends, Escape closes it and returns focus

Motion

Bars move only while connected and on screen; the timer ticks once a second only during a call.

Props

Prop	Type	Default	Description
`session`	`VoiceAgentSession`	—	Share one from useVoiceAgent() with the rest of the screen (a transcript, an orb).
`adapter`	`VoiceAgent`	—	Or let the bar hold its own session. A VoiceAgent adapter's connect({ stream, mode, signal }, on) opens the provider's session and maps its events: agent speaking → on.status('talking'), user speech detected → on.status('listening'), response pending → on.status('thinking'); transcripts → on.transcript({ id, role, text, final }) (re-send the same id while a line grows); socket closed unexpectedly → on.connection('reconnecting') then 'connected', or on.error({ kind: 'network' }). Return { sendText, setMuted, outputLevel, disconnect }; outputLevel can read an AnalyserNode on the agent's audio. ElevenLabs agents: start their conversation session with your agent id (signed URL from your server) and forward its mode-change, message and disconnect callbacks. OpenAI Realtime: add the microphone track to an RTCPeerConnection, play the remote track, and map response.audio_transcript.delta / done and input_audio_buffer.speech_started / stopped events.
`agentName`	`string`	`"the agent"`	Used in labels: Call Northline.
`variant`	`"raised" \| "flat"`	`"raised"`	flat drops the pill's fill and shadow for a footer that is already a frame.
`allowText`	`boolean`	`true`	Offer typing during a call or instead of one.
`placeholder`	`string`	`"Type a message"`
`onMessage / onError / onEnd`	`callbacks`	—	With an adapter (own session).
`classNames`	`ConversationBarClassNames`	—
`style / ref`	`CSSProperties / native Ref`	—
`fieldRef`	`Ref<HTMLInputElement>`	—

Built from

button
bar-visualizer
tooltip

Dependencies

lucide-react

Import

import { ConversationBar } from "@/components/conversation-bar/conversation-bar";

Get it

Conversation bar is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent