VoiceLevel
Bars that follow a sound level you pass in, for the microphone (source="user") or for speech the app plays (source="assistant", a quieter color). Give one level per bar, three to five read best, or a single number for three bars around it. Levels are clamped to 0..1 and drawn with transform, without canvas or animation loops; active={false} flattens them. The bars are hidden from screen readers: the component that owns the state announces it.
Getting Started
$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-reactExamples
Input and output
API reference
Prop
Type
Required
levels
number[] | number
Yes
Level from 0 to 1 per bar, three to five bars read best; one number draws three bars around it
source
'user' | 'assistant'
No
`user` for the microphone, `assistant` for speech the app plays, `user` by default
active
boolean
No
Flattens the bars when `false`, `true` by default
size
'xs' | 'sm'
No
Height of the bars, `sm` by default
className
string
No
Class name added to the root element
style
React.CSSProperties
No
Inline styles added to the root element