Bar Visualizer

1<script lang="ts" module>
2	import type { HTMLAttributes } from "svelte/elements";
3 
4	export type AgentState = "connecting" | "initializing" | "listening" | "speaking" | "thinking";
5 
6	export type BarVisualizerProps = HTMLAttributes<HTMLDivElement> & {
7		/**
8		 * Voice-agent lifecycle state. Drives the bar highlight sequence and
9		 * animation cadence. Leave undefined for a static row.
10		 */
11		state?: AgentState;
12		/**
13		 * Number of bars to render across the visualizer.
14		 * @default 15
15		 */
16		barCount?: number;
17		/**
18		 * Live audio source used for FFT analysis. Ignored when `demo` is
19		 * `true`. Pass `null` to disable analysis without unmounting.
20		 */
21		mediaStream?: MediaStream | null;
22		/**
23		 * Minimum bar height as a percentage of the container.
24		 * @default 20
25		 */
26		minHeight?: number;
27		/**
28		 * Maximum bar height as a percentage of the container.
29		 * @default 100
30		 */
31		maxHeight?: number;
32		/**
33		 * When `true`, replaces the FFT feed with a synthetic oscillating
34		 * pattern. Useful for previews and documentation.
35		 * @default false
36		 */
37		demo?: boolean;
38		/**
39		 * Align bars from the vertical center rather than growing up from the
40		 * bottom.
41		 * @default false
42		 */
43		centerAlign?: boolean;
44		/** Bound reference to the root container element. */
45		ref?: HTMLDivElement | null;
46	};
47</script>
48 
49<script lang="ts">
50	import { cn } from "$UTILS$.js";
51	import {
52		createAudioAnalyser,
53		generateConnectingSequenceBar,
54		generateListeningSequenceBar,
55		normalizeDb,
56	} from "./utils.js";
57 
58	let {
59		state: agentState,
60		barCount = 15,
61		mediaStream,
62		minHeight = 20,
63		maxHeight = 100,
64		demo = false,
65		centerAlign = false,
66		class: className,
67		style,
68		ref = $bindable(null),
69		...restProps
70	}: BarVisualizerProps = $props();
71 
72	let realBands = $state<number[]>(new Array(barCount).fill(0));
73	let fakeBands = $state<number[]>(new Array(barCount).fill(0.2));
74	let highlightedIndices = $state<number[]>([]);
75 
76	const volumeBands = $derived(demo ? fakeBands : realBands);
77 
78	const animInterval = $derived(
79		agentState === "connecting"
80			? 2000 / barCount
81			: agentState === "thinking"
82				? 150
83				: agentState === "listening"
84					? 500
85					: 1000
86	);
87 
88	// useMultibandVolume — real FFT analysis
89	$effect(() => {
90		if (demo || !mediaStream) {
91			realBands = new Array(barCount).fill(0);
92			return;
93		}
94		const currentBarCount = barCount;
95		const { analyser, cleanup } = createAudioAnalyser(mediaStream, { fftSize: 2048 });
96 
97// … truncated