Voice Picker

1<script lang="ts" module>
2	import type { Voice } from "./types.js";
3 
4	export type VoicePickerProps = {
5		/** Voices to display in the picker. Any object conforming to `Voice` works. */
6		voices: Voice[];
7		/** Selected voice ID for controlled usage. */
8		value?: string;
9		/** Called with the voice ID when the user picks a voice. */
10		onValueChange?: (value: string) => void;
11		/**
12		 * Placeholder shown on the trigger when no voice is selected.
13		 * @default "Select a voice..."
14		 */
15		placeholder?: string;
16		/** Extra classes forwarded to the trigger button. */
17		class?: string;
18		/** Controlled popover open state. Leave undefined for uncontrolled. */
19		open?: boolean;
20		/** Called when the popover open state changes. */
21		onOpenChange?: (open: boolean) => void;
22	};
23</script>
24 
25<script lang="ts">
26	import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
27	import { AudioPlayer } from "../audio-player/index.js";
28	import { Button } from "../button/index.js";
29	import * as Command from "../command/index.js";
30	import { Orb } from "../orb/index.js";
31	import * as Popover from "../popover/index.js";
32	import { cn } from "$UTILS$.js";
33	import VoicePickerItem from "./voice-picker-item.svelte";
34 
35	let {
36		voices,
37		value,
38		onValueChange,
39		placeholder = "Select a voice...",
40		open,
41		onOpenChange,
42		class: className,
43	}: VoicePickerProps = $props();
44 
45	let internalOpen = $state(false);
46	const isOpenControlled = $derived(open !== undefined);
47	const isOpen = $derived(isOpenControlled ? open! : internalOpen);
48 
49	function setIsOpen(next: boolean) {
50		if (isOpenControlled) onOpenChange?.(next);
51		else internalOpen = next;
52	}
53 
54	const selectedVoice = $derived(voices.find((v) => v.id === value));
55</script>
56 
57<AudioPlayer>
58	<Popover.Root open={isOpen} onOpenChange={setIsOpen}>
59		<Popover.Trigger>
60			{#snippet child({ props })}
61				<Button
62					{...props}
63					variant="outline"
64					role="combobox"
65					aria-expanded={isOpen}
66					class={cn("w-full justify-between", className)}
67				>
68					{#if selectedVoice}
69						<div class="flex items-center gap-2 overflow-hidden">
70							<div class="relative size-6 shrink-0 overflow-visible">
71								<Orb agentState="thinking" class="absolute inset-0" />
72							</div>
73							<span class="truncate">{selectedVoice.name}</span>
74						</div>
75					{:else}
76						{placeholder}
77					{/if}
78					<ChevronsUpDownIcon class="ml-2 size-4 shrink-0 opacity-50" />
79				</Button>
80			{/snippet}
81		</Popover.Trigger>
82// … truncated