BarVisualizer
function BarVisualizer(__namedParameters): Element;Defined in: packages/react/src/components/visualizer/BarVisualizer.tsx:35
A state-driven amplitude bar meter. Reads useVoiceAssistant() for state +
level — no props required. Bars colour by state (accent listening, green
speaking).
Parameters
| Parameter | Type |
|---|---|
__namedParameters | BarVisualizerProps |
Returns
Element
Example
// Basic — render the voice assistant meter.
<VoiceRoom agent={agent}>
<BarVisualizer barCount={9} />
</VoiceRoom>
// Advanced — size the meter from the assistant state.
function VoiceStatus() {
const { state } = useVoiceAssistant();
return (
<VoiceRoom agent={agent}>
<BarVisualizer barCount={state === "speaking" ? 11 : 7} />
<span>{state}</span>
</VoiceRoom>
);
}