WaveformDemo() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ WaveformDemo() — ui Function Reference

Dependency Diagram

graph TD
  6e56ab5b_413c_a721_1509_71f34fe2c971["WaveformDemo()"]
  a1a6ebaf_3f49_5bb2_b404_b9f06dce2cab["elevenlabs.tsx"]
  6e56ab5b_413c_a721_1509_71f34fe2c971 -->|defined in| a1a6ebaf_3f49_5bb2_b404_b9f06dce2cab
  style 6e56ab5b_413c_a721_1509_71f34fe2c971 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/blocks/elevenlabs.tsx lines 81–145

function WaveformDemo() {
  const [active, setActive] = useState(false)
  const [processing, setProcessing] = useState(true)
  const [mode, setMode] = useState<"static" | "scrolling">("static")
  const handleToggleActive = () => {
    setActive(!active)
    if (!active) {
      setProcessing(false)
    }
  }
  const handleToggleProcessing = () => {
    setProcessing(!processing)
    if (!processing) {
      setActive(false)
    }
  }
  return (
    <Example title="Waveform" className="items-center justify-center">
      <Card>
        <CardHeader>
          <CardTitle>Live Audio Waveform</CardTitle>
          <CardDescription>
            Real-time microphone input visualization with audio reactivity
          </CardDescription>
        </CardHeader>
        <CardContent>
          <LiveWaveform
            active={active}
            processing={processing}
            height={80}
            barWidth={3}
            barGap={2}
            mode={mode}
            fadeEdges={true}
            barColor="gray"
            historySize={120}
          />
        </CardContent>
        <CardFooter className="gap-2">
          <Button
            size="sm"
            variant={active ? "default" : "outline"}
            onClick={handleToggleActive}
          >
            {active ? "Stop" : "Start"} Listening
          </Button>
          <Button
            size="sm"
            variant={processing ? "default" : "outline"}
            onClick={handleToggleProcessing}
          >
            {processing ? "Stop" : "Start"} Processing
          </Button>
          <Button
            size="sm"
            variant="outline"
            onClick={() => setMode(mode === "static" ? "scrolling" : "static")}
          >
            {mode === "static" ? "Static" : "Scrolling"}
          </Button>
        </CardFooter>
      </Card>
    </Example>
  )
}