elevenlabs.tsx — ui Source File

Source Code

"use client"

import * as React from "react"
import { useEffect, useMemo, useRef, useState } from "react"

import { cn } from "@/lib/utils"
import {
  Example,
  ExampleWrapper,
} from "@/registry/bases/radix/components/example"
import { Button } from "@/registry/bases/radix/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/registry/bases/radix/ui/card"

export default function ElevenlabsBlocks() {
  return (
    <ExampleWrapper>
      <BarVisualizerDemo />
      <WaveformDemo />
    </ExampleWrapper>
  )
}

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>
// ... (1096 more lines)