# Conversation bar

A React component in [Beamline](https://beamline.io/)'s [Voice & audio](https://beamline.io/components/voice) category. Live demo: https://beamline.io/components/conversation-bar

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](https://beamline.io/components/voice-agent) screen.
- Adding a call to an existing assistant panel.

## Not for

- Text-only assistants ([prompt-bar](https://beamline.io/components/prompt-bar)).
- Dictating into a field ([speech-input](https://beamline.io/components/speech-input)).
- A whole voice screen (the [voice-agent](https://beamline.io/components/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](https://beamline.io/components/bar-visualizer)
- tooltip

## Dependencies

`lucide-react`

## Import

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Voice & audio

- [Audio player](https://beamline.io/components/audio-player): One audio element and its controls: play with a loading state, a scrub bar with time, skip, speed and a playlist whose rows play into the same player…
- [Bar visualizer](https://beamline.io/components/bar-visualizer): A row of bars that says what a voice agent is doing: a sweep while connecting, the person's voice while listening, a slow breath while thinking, the…
- [Live waveform](https://beamline.io/components/live-waveform): Loudness drawn as it happens: a scrolling history of the microphone (or any live source) or its spectrum, a calm processing state while words are…
- [Matrix](https://beamline.io/components/matrix): A dot-matrix display: animated frame sets (loading, pulse, wave, syncing), text and digits in a 5×7 font, or a VU meter of levels or a live source. One…
- [Microphone selector](https://beamline.io/components/mic-selector): Choose the microphone, test it with a live level and mute it, with every permission and device state spelled out: not yet allowed, blocked (and how to…
- [Orb](https://beamline.io/components/orb): The agent's presence: a thin ring of light around a lens in the brand's hue that holds still at rest, sends an arc round while thinking and widens with…
- [Scrub bar](https://beamline.io/components/scrub-bar): A seekable timeline for audio or video: elapsed and total time, what has loaded, chapter marks, a time preview under the pointer, and the full keyboard…
- [Speech input](https://beamline.io/components/speech-input): A text field you can speak into: the mic dictates through any speech-to-text provider, the phrase being heard shows apart from the finished words, and…
- [Transcript viewer](https://beamline.io/components/transcript-viewer): A recording and its words together: the spoken word lights up as it plays and the transcript follows it, any word or paragraph time plays from there…
- [Voice button](https://beamline.io/components/voice-button): The control that starts and stops talking: click to toggle or hold to talk (pointer, Space, Enter or a global shortcut), with a live level while…
- [Voice picker](https://beamline.io/components/voice-picker): Choose a text-to-speech voice from a searchable list (name, accent, tone, use) and hear it first: each voice has its own orb, previews play one at a time…
- [Waveform](https://beamline.io/components/waveform): The shape of a recording: one bar per slice of loudness, fitted to any width, with the played part in the accent, unmeasured slices hatched and a loading…