|
| 1 | +import { useMemo, useState } from "react" |
| 2 | +import { Badge } from "@/components/ui/badge" |
| 3 | +import { Button } from "@/components/ui/button" |
| 4 | +import { |
| 5 | + Command, |
| 6 | + CommandEmpty, |
| 7 | + CommandGroup, |
| 8 | + CommandInput, |
| 9 | + CommandItem, |
| 10 | + CommandList |
| 11 | +} from "@/components/ui/command" |
| 12 | +import { |
| 13 | + Popover, |
| 14 | + PopoverContent, |
| 15 | + PopoverTrigger |
| 16 | +} from "@/components/ui/popover" |
| 17 | +import { Check, ChevronsUpDown, Loader2, Mic } from "@/lib/lucide-icon" |
| 18 | +import { cn } from "@/lib/utils" |
| 19 | + |
| 20 | +interface VoiceSelectorProps { |
| 21 | + voices: SpeechSynthesisVoice[] |
| 22 | + selectedVoiceURI: string | null |
| 23 | + onVoiceChange: (voiceURI: string) => void |
| 24 | + isLoading?: boolean |
| 25 | +} |
| 26 | + |
| 27 | +export const VoiceSelector = ({ |
| 28 | + voices, |
| 29 | + selectedVoiceURI, |
| 30 | + onVoiceChange, |
| 31 | + isLoading = false |
| 32 | +}: VoiceSelectorProps) => { |
| 33 | + const [open, setOpen] = useState(false) |
| 34 | + const [searchQuery, setSearchQuery] = useState("") |
| 35 | + |
| 36 | + const selectedVoice = useMemo( |
| 37 | + () => voices.find((v) => v.voiceURI === selectedVoiceURI), |
| 38 | + [voices, selectedVoiceURI] |
| 39 | + ) |
| 40 | + |
| 41 | + // Group voices by language for better organization |
| 42 | + const groupedVoices = useMemo(() => { |
| 43 | + const grouped = voices.reduce( |
| 44 | + (acc, voice) => { |
| 45 | + const lang = voice.lang || "Unknown" |
| 46 | + if (!acc[lang]) { |
| 47 | + acc[lang] = [] |
| 48 | + } |
| 49 | + acc[lang].push(voice) |
| 50 | + return acc |
| 51 | + }, |
| 52 | + {} as Record<string, SpeechSynthesisVoice[]> |
| 53 | + ) |
| 54 | + |
| 55 | + // Sort languages alphabetically |
| 56 | + return Object.keys(grouped) |
| 57 | + .sort() |
| 58 | + .map((lang) => ({ |
| 59 | + lang, |
| 60 | + voices: grouped[lang].sort((a, b) => a.name.localeCompare(b.name)) |
| 61 | + })) |
| 62 | + }, [voices]) |
| 63 | + |
| 64 | + // Filter voices based on search query |
| 65 | + const filteredGroups = useMemo(() => { |
| 66 | + if (!searchQuery.trim()) { |
| 67 | + return groupedVoices |
| 68 | + } |
| 69 | + |
| 70 | + const query = searchQuery.toLowerCase() |
| 71 | + return groupedVoices |
| 72 | + .map((group) => ({ |
| 73 | + ...group, |
| 74 | + voices: group.voices.filter( |
| 75 | + (voice) => |
| 76 | + voice.name.toLowerCase().includes(query) || |
| 77 | + voice.lang.toLowerCase().includes(query) || |
| 78 | + voice.voiceURI.toLowerCase().includes(query) |
| 79 | + ) |
| 80 | + })) |
| 81 | + .filter((group) => group.voices.length > 0) |
| 82 | + }, [groupedVoices, searchQuery]) |
| 83 | + |
| 84 | + return ( |
| 85 | + <Popover open={open} onOpenChange={setOpen}> |
| 86 | + <PopoverTrigger asChild> |
| 87 | + <Button |
| 88 | + variant="outline" |
| 89 | + role="combobox" |
| 90 | + aria-expanded={open} |
| 91 | + aria-label="Select voice" |
| 92 | + className={cn( |
| 93 | + "h-10 w-full justify-between gap-2 border-input bg-background px-3 text-sm font-normal shadow-sm transition-colors", |
| 94 | + "hover:bg-accent hover:text-accent-foreground", |
| 95 | + "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", |
| 96 | + "disabled:cursor-not-allowed disabled:opacity-50", |
| 97 | + open && "ring-1 ring-ring" |
| 98 | + )} |
| 99 | + disabled={isLoading || voices.length === 0}> |
| 100 | + <div className="flex items-center gap-2 min-w-0 flex-1"> |
| 101 | + {isLoading ? ( |
| 102 | + <> |
| 103 | + <Loader2 className="h-4 w-4 animate-spin text-muted-foreground shrink-0" /> |
| 104 | + <span className="text-muted-foreground text-sm truncate"> |
| 105 | + Loading voices... |
| 106 | + </span> |
| 107 | + </> |
| 108 | + ) : selectedVoice ? ( |
| 109 | + <> |
| 110 | + <span className="text-sm font-medium truncate"> |
| 111 | + {selectedVoice.name} |
| 112 | + </span> |
| 113 | + <Badge |
| 114 | + variant="secondary" |
| 115 | + className="text-[10px] h-5 px-1.5 font-normal shrink-0"> |
| 116 | + {selectedVoice.lang} |
| 117 | + </Badge> |
| 118 | + </> |
| 119 | + ) : ( |
| 120 | + <span className="text-muted-foreground text-sm truncate"> |
| 121 | + Select a voice... |
| 122 | + </span> |
| 123 | + )} |
| 124 | + </div> |
| 125 | + <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" /> |
| 126 | + </Button> |
| 127 | + </PopoverTrigger> |
| 128 | + <PopoverContent |
| 129 | + className="w-[440px] p-0 shadow-lg" |
| 130 | + align="center" |
| 131 | + sideOffset={6}> |
| 132 | + <Command className="rounded-lg border-0" shouldFilter={false}> |
| 133 | + <div className="flex items-center border-b px-3"> |
| 134 | + <CommandInput |
| 135 | + placeholder="Search by name, language, or URI..." |
| 136 | + value={searchQuery} |
| 137 | + onValueChange={setSearchQuery} |
| 138 | + className="h-11 border-0 focus:outline-none focus:ring-0" |
| 139 | + /> |
| 140 | + </div> |
| 141 | + <CommandList className="max-h-[320px] overflow-y-auto"> |
| 142 | + <CommandEmpty className="py-8"> |
| 143 | + <div className="flex flex-col items-center gap-2 text-center"> |
| 144 | + <div className="rounded-full bg-muted p-3"> |
| 145 | + <Mic className="h-5 w-5 text-muted-foreground" /> |
| 146 | + </div> |
| 147 | + <div className="space-y-1"> |
| 148 | + <p className="text-sm font-medium">No voices found</p> |
| 149 | + <p className="text-xs text-muted-foreground"> |
| 150 | + {searchQuery |
| 151 | + ? "Try a different search term" |
| 152 | + : "No voices available on this device"} |
| 153 | + </p> |
| 154 | + </div> |
| 155 | + </div> |
| 156 | + </CommandEmpty> |
| 157 | + <div className="p-1"> |
| 158 | + {filteredGroups.map((group, groupIndex) => ( |
| 159 | + <CommandGroup |
| 160 | + key={group.lang} |
| 161 | + className={cn("px-0 py-0", groupIndex > 0 && "mt-2")}> |
| 162 | + <div className="flex items-center justify-between px-3 py-2 mb-1"> |
| 163 | + <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground"> |
| 164 | + {group.lang} |
| 165 | + </span> |
| 166 | + <Badge |
| 167 | + variant="secondary" |
| 168 | + className="text-[10px] h-4 px-1.5 font-normal"> |
| 169 | + {group.voices.length} |
| 170 | + </Badge> |
| 171 | + </div> |
| 172 | + {group.voices.map((voice) => { |
| 173 | + const isSelected = selectedVoiceURI === voice.voiceURI |
| 174 | + return ( |
| 175 | + <CommandItem |
| 176 | + key={voice.voiceURI} |
| 177 | + value={voice.voiceURI} |
| 178 | + onSelect={() => { |
| 179 | + onVoiceChange(voice.voiceURI) |
| 180 | + setOpen(false) |
| 181 | + setSearchQuery("") |
| 182 | + }} |
| 183 | + className={cn( |
| 184 | + "group mx-1 flex items-center gap-3 rounded-md px-3 py-2.5 cursor-pointer transition-all", |
| 185 | + "aria-selected:bg-accent/50", |
| 186 | + isSelected |
| 187 | + ? "bg-accent text-accent-foreground shadow-sm" |
| 188 | + : "hover:bg-accent/50" |
| 189 | + )}> |
| 190 | + <div className="flex flex-1 items-center justify-between gap-3 min-w-0"> |
| 191 | + <div className="flex flex-col min-w-0"> |
| 192 | + <span |
| 193 | + className={cn( |
| 194 | + "text-sm truncate leading-tight transition-colors", |
| 195 | + isSelected ? "font-semibold" : "font-medium" |
| 196 | + )}> |
| 197 | + {voice.name} |
| 198 | + </span> |
| 199 | + {voice.localService === false && ( |
| 200 | + <span className="text-[10px] text-muted-foreground mt-0.5"> |
| 201 | + Network voice |
| 202 | + </span> |
| 203 | + )} |
| 204 | + </div> |
| 205 | + <div className="flex items-center gap-2 shrink-0"> |
| 206 | + {voice.default && ( |
| 207 | + <Badge |
| 208 | + variant="outline" |
| 209 | + className="text-[10px] h-4 px-1.5 font-normal border-muted-foreground/30"> |
| 210 | + default |
| 211 | + </Badge> |
| 212 | + )} |
| 213 | + {isSelected && ( |
| 214 | + <div className="flex items-center justify-center"> |
| 215 | + <Check className="h-4 w-4 text-primary" /> |
| 216 | + </div> |
| 217 | + )} |
| 218 | + </div> |
| 219 | + </div> |
| 220 | + </CommandItem> |
| 221 | + ) |
| 222 | + })} |
| 223 | + </CommandGroup> |
| 224 | + ))} |
| 225 | + </div> |
| 226 | + </CommandList> |
| 227 | + </Command> |
| 228 | + </PopoverContent> |
| 229 | + </Popover> |
| 230 | + ) |
| 231 | +} |
0 commit comments