voice-picker

1"use client"
2 
3import * as React from "react"
4import type { ElevenLabs } from "@elevenlabs/elevenlabs-js"
5import { Check, ChevronsUpDown, Pause, Play } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8import {
9  AudioPlayerProvider,
10  useAudioPlayer,
11} from "@/components/ui/audio-player"
12import { Button } from "@/components/ui/button"
13import {
14  Command,
15  CommandEmpty,
16  CommandGroup,
17  CommandInput,
18  CommandItem,
19  CommandList,
20} from "@/components/ui/command"
21import { Orb } from "@/components/ui/orb"
22import {
23  Popover,
24  PopoverContent,
25  PopoverTrigger,
26} from "@/components/ui/popover"
27 
28interface VoicePickerProps {
29  voices: ElevenLabs.Voice[]
30  value?: string
31  onValueChange?: (value: string) => void
32  placeholder?: string
33  className?: string
34  open?: boolean
35  onOpenChange?: (open: boolean) => void
36}
37 
38function VoicePicker({
39  voices,
40  value,
41  onValueChange,
42  placeholder = "Select a voice...",
43  className,
44  open,
45  onOpenChange,
46}: VoicePickerProps) {
47  const [internalOpen, setInternalOpen] = React.useState(false)
48  const isControlled = open !== undefined
49  const isOpen = isControlled ? open : internalOpen
50  const setIsOpen = isControlled ? onOpenChange : setInternalOpen
51 
52  const selectedVoice = voices.find((v) => v.voiceId === value)
53 
54  return (
55    <AudioPlayerProvider>
56      <Popover open={isOpen} onOpenChange={setIsOpen}>
57        <PopoverTrigger asChild>
58          <Button
59            variant="outline"
60            role="combobox"
61            aria-expanded={isOpen}
62            className={cn("w-full justify-between", className)}
63          >
64            {selectedVoice ? (
65              <div className="flex items-center gap-2 overflow-hidden">
66                <div className="relative size-6 shrink-0 overflow-visible">
67                  <Orb agentState="thinking" className="absolute inset-0" />
68                </div>
69                <span className="truncate">{selectedVoice.name}</span>
70              </div>
71            ) : (
72              placeholder
73            )}
74            <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
75          </Button>
76        </PopoverTrigger>
77        <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
78          <Command>
79            <CommandInput placeholder="Search voices..." />
80            <CommandList>
81              <CommandEmpty>No voice found.</CommandEmpty>
82              <CommandGroup>
83                {voices.map((voice) => (
84                  <VoicePickerItem
85// … truncated