BarVisualizerDemo() — ui Function Reference

Architecture documentation for the BarVisualizerDemo() function in elevenlabs.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ BarVisualizerDemo() — ui Function Reference

Dependency Diagram

graph TD
  58ca3abc_1612_76cb_07d7_3082bb6b9db0["BarVisualizerDemo()"]
  140880de_8350_c565_0d8f_48f12ee18f06["elevenlabs.tsx"]
  58ca3abc_1612_76cb_07d7_3082bb6b9db0 -->|defined in| 140880de_8350_c565_0d8f_48f12ee18f06
  style 58ca3abc_1612_76cb_07d7_3082bb6b9db0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/blocks/elevenlabs.tsx lines 30–79

function BarVisualizerDemo() {
  const [state, setState] = useState<AgentState>("speaking")

  return (
    <Example title="Bar Visualizer">
      <Card className="">
        <CardHeader>
          <CardTitle>Audio Frequency Visualizer</CardTitle>
          <CardDescription>
            Real-time frequency band visualization with animated state
            transitions
          </CardDescription>
        </CardHeader>
        <CardContent>
          <BarVisualizer
            state={state}
            demo={true}
            barCount={20}
            minHeight={15}
            maxHeight={90}
            className="h-40 max-w-full"
          />
        </CardContent>
        <CardFooter className="gap-2">
          <Button
            size="sm"
            variant={state === "connecting" ? "default" : "outline"}
            onClick={() => setState("connecting")}
          >
            Connecting
          </Button>
          <Button
            size="sm"
            variant={state === "listening" ? "default" : "outline"}
            onClick={() => setState("listening")}
          >
            Listening
          </Button>
          <Button
            size="sm"
            variant={state === "speaking" ? "default" : "outline"}
            onClick={() => setState("speaking")}
          >
            Speaking
          </Button>
        </CardFooter>
      </Card>
    </Example>
  )
}