Speech Input

1<script lang="ts" module>
2	import type { HTMLAttributes } from "svelte/elements";
3	import type { Snippet } from "svelte";
4	import type { TranscriptionAdapter } from "./types.js";
5	import type { SpeechInputData, ButtonSize } from "./context.svelte.js";
6 
7	export type SpeechInputProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onerror"> & {
8		/**
9		 * STT backend bridge that owns the transcription session. Conforms to
10		 * [`TranscriptionAdapter`](/docs/providers#transcriptionadapter).
11		 */
12		adapter: TranscriptionAdapter;
13		/**
14		 * Shared size applied to `SpeechInputRecordButton` and
15		 * `SpeechInputCancelButton` via context.
16		 * @default "default"
17		 */
18		size?: ButtonSize;
19		/** Fired once the adapter reports the connection is ready for audio. */
20		onStart?: (data: SpeechInputData) => void;
21		/**
22		 * Fired when the user stops recording. Receives a snapshot of the
23		 * transcript — any in-flight partial is preserved.
24		 */
25		onStop?: (data: SpeechInputData) => void;
26		/**
27		 * Fired when the user cancels recording. Receives the snapshot taken
28		 * before partial + committed state is cleared.
29		 */
30		onCancel?: (data: SpeechInputData) => void;
31		/** Fired on every partial or committed transcript update. */
32		onChange?: (data: SpeechInputData) => void;
33		/** Fired when the adapter surfaces an error or `start()` rejects. */
34		onError?: (error: Error) => void;
35		/**
36		 * Compound children — typically `SpeechInputRecordButton`,
37		 * `SpeechInputPreview`, and `SpeechInputCancelButton` in any order.
38		 */
39		children?: Snippet;
40		/** Bindable ref to the root `<div>` element. */
41		ref?: HTMLDivElement | null;
42	};
43</script>
44 
45<script lang="ts">
46	import { onDestroy } from "svelte";
47	import { cn } from "$UTILS$.js";
48	import { setSpeechInput } from "./context.svelte.js";
49 
50	let {
51		adapter,
52		size = "default",
53		onStart,
54		onStop,
55		onCancel,
56		onChange,
57		onError,
58		class: className,
59		children,
60		ref = $bindable(null),
61		...rest
62	}: SpeechInputProps = $props();
63 
64	const state = setSpeechInput();
65 
66	// Sync props → state on every render. Adapter reference is stored via
67	// configure() as a plain private field, not reactive state — swapping
68	// adapters mid-recording is explicitly unsupported and does nothing
69	// until the next start() call.
70	$effect(() => {
71		state.configure({
72			adapter,
73			callbacks: { onStart, onStop, onCancel, onChange, onError },
74		});
75		state.size = size;
76	});
77 
78// … truncated