Elevenlabs

1"use client"
2 
3import * as React from "react"
4import { useEffect, useMemo, useRef, useState } from "react"
5 
6import { cn } from "@/lib/utils"
7import {
8  Example,
9  ExampleWrapper,
10} from "@/registry/bases/radix/components/example"
11import { Button } from "@/registry/bases/radix/ui/button"
12import {
13  Card,
14  CardContent,
15  CardDescription,
16  CardFooter,
17  CardHeader,
18  CardTitle,
19} from "@/registry/bases/radix/ui/card"
20 
21export default function ElevenlabsBlocks() {
22  return (
23    <ExampleWrapper>
24      <BarVisualizerDemo />
25      <WaveformDemo />
26    </ExampleWrapper>
27  )
28}
29 
30function BarVisualizerDemo() {
31  const [state, setState] = useState<AgentState>("speaking")
32 
33  return (
34    <Example title="Bar Visualizer">
35      <Card className="">
36        <CardHeader>
37          <CardTitle>Audio Frequency Visualizer</CardTitle>
38          <CardDescription>
39            Real-time frequency band visualization with animated state
40            transitions
41          </CardDescription>
42        </CardHeader>
43        <CardContent>
44          <BarVisualizer
45            state={state}
46            demo={true}
47            barCount={20}
48            minHeight={15}
49            maxHeight={90}
50            className="h-40 max-w-full"
51          />
52        </CardContent>
53        <CardFooter className="gap-2">
54          <Button
55            size="sm"
56            variant={state === "connecting" ? "default" : "outline"}
57            onClick={() => setState("connecting")}
58          >
59            Connecting
60          </Button>
61          <Button
62            size="sm"
63            variant={state === "listening" ? "default" : "outline"}
64            onClick={() => setState("listening")}
65          >
66            Listening
67          </Button>
68          <Button
69            size="sm"
70            variant={state === "speaking" ? "default" : "outline"}
71            onClick={() => setState("speaking")}
72          >
73            Speaking
74          </Button>
75        </CardFooter>
76      </Card>
77    </Example>
78  )
79}
80 
81function WaveformDemo() {
82  const [active, setActive] = useState(false)
83  const [processing, setProcessing] = useState(true)
84  const [mode, setMode] = useState<"static" | "scrolling">("static")
85  const handleToggleActive = () => {
86    setActive(!active)
87    if (!active) {
88      setProcessing(false)
89    }
90  }
91  const handleToggleProcessing = () => {
92    setProcessing(!processing)
93    if (!processing) {
94      setActive(false)
95    }
96  }
97  return (
98// … truncated