50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1c4d,"use client"; import { VoiceSelector, VoiceSelectorAccent, VoiceSelectorAge, VoiceSelectorBullet, VoiceSelectorContent, VoiceSelectorDescription, VoiceSelectorEmpty, VoiceSelectorGender, VoiceSelectorInput, VoiceSelectorItem, VoiceSelectorList, VoiceSelectorName, VoiceSelectorPreview, VoiceSelectorTrigger, } from "@/components/ai-elements/voice-selector"; import { Button } from "@/registry/default/ui/button"; import type { ComponentProps } from "react"; import { memo, useCallback, useRef, useState } from "react"; const voices: { id: string; name: string; description: string; gender: ComponentProps["value"]; accent: ComponentProps["value"]; age: string; previewUrl: string; }[] = [ { accent: "american", age: "20-30", description: "Energetic, Social Media Creator", gender: "male", id: "liam", name: "Liam", previewUrl: "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_16_50_Liam%20-%20Energetic%2C%20Social%20Media%20Creator_pre_sp100_s50_sb75_se0_b_m2.mp3", }, { accent: "american", age: "30-40", description: "Dominant, Firm", gender: "male", id: "adam", name: "Adam", previewUrl: "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_17_00_Adam%20-%20Dominant%2C%20Firm_pre_sp100_s50_sb75_se0_b_m2.mp3", }, { accent: "british", age: "30-40", description: "Clear, Engaging Educator", gender: "female", id: "alice", name: "Alice", previewUrl: "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_17_09_Alice%20-%20Clear%2C%20Engaging%20Educator_pre_sp100_s50_sb75_se0_b_m2.mp3", }, { accent: "american", age: "50-60", description: "Wise, Mature, Balanced", gender: "male", id: "bill", name: "Bill", previewUrl: "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_17_25_Bill%20-%20Wise%2C%20Mature%2C%20Balanced_pre_sp100_s50_sb75_se0_b_m2.mp3", }, { accent: "american", age: "20-30", description: "Playful, Bright, Warm", gender: "female", id: "jessica", name: "Jessica", previewUrl: "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_17_50_Jessica%20-%20Playful%2C%20Bright%2C%20Warm_pre_sp100_s50_sb75_se0_b_m2.mp3", }, { accent: "british", age: "30-40", description: "Velvety Actress", gender: "female", id: "lily", name: "Lily", previewUrl: "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_18_03_Lily%20-%20Velvety%20Actress_pre_sp100_s50_sb75_se0_b_m2.mp3", }, ]; interface VoiceItemProps { voice: (typeof voices)[0]; playingVoice: string | null; loadingVoice: string | null; onSelect: (id: string) => void; onPreview: (id: string) => void; } const VoiceItem = memo( ({ voice, playingVoice, loadingVoice, onSelect, onPreview, }: VoiceItemProps) => { const handleSelect = useCallback( () => onSelect(voice.id), [onSelect, voice.id] ); const handlePreview = useCallback( () => onPreview(voice.id), [onPreview, voice.id] ); return ( {voice.name} {voice.description} {voice.age} ); } ); VoiceItem.displayName = "VoiceItem"; const Example = () => { const [open, setOpen] = useState(false); const [selectedVoice, setSelectedVoice] = useState(null); const [playingVoice, setPlayingVoice] = useState(null); const [loadingVoice, setLoadingVoice] = useState(null); const audioRef = useRef(null); const handleSelect = useCallback((voiceId: string) => { setSelectedVoice(voiceId); setOpen(false); }, []); const handlePreview = useCallback( (voiceId: string) => { const voice = voices.find((v) => v.id === voiceId); if (!voice) { return; } // If clicking the same voice that's playing, pause it if (playingVoice === voiceId) { audioRef.current?.pause(); setPlayingVoice(null); return; } // Stop any currently playing audio if (audioRef.current) { audioRef.current.pause(); audioRef.current = null; } setLoadingVoice(voiceId); const audio = new Audio(voice.previewUrl); audioRef.current = audio; audio.addEventListener("canplaythrough", () => { setLoadingVoice(null); setPlayingVoice(voiceId); audio.play(); }); audio.addEventListener("ended", () => { setPlayingVoice(null); }); audio.addEventListener("error", () => { setLoadingVoice(null); setPlayingVoice(null); }); audio.load(); }, [playingVoice] ); const selectedVoiceData = voices.find((voice) => voice.id === selectedVoice); return (

No voices found. {voices.map((voice) => ( ))}

); }; export default Example; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@ai-elements","registryDependencies":["https://elements.ai-sdk.dev/voice-selector.json","button"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/examples/voice-selector.tsx","content":"$52","type":"registry:block","target":"components/ai-elements/example-voice-selector.tsx"}],"className":"h-[70svh] min-h-80"}]]}]