Voice Chat 02

1<script lang="ts">
2	import { fly } from "svelte/transition";
3	import Loader2Icon from "@lucide/svelte/icons/loader-2";
4	import PhoneIcon from "@lucide/svelte/icons/phone";
5	import PhoneOffIcon from "@lucide/svelte/icons/phone-off";
6	import { Button } from "$UI$/button/index.js";
7	import { Card } from "$UI$/card/index.js";
8	import { Orb } from "$UI$/orb/index.js";
9	import { ShimmeringText } from "$UI$/shimmering-text/index.js";
10	import { cn } from "$UTILS$.js";
11 
12	const DEFAULT_AGENT = {
13		name: "Customer Support",
14		description: "Tap to start voice chat",
15	};
16 
17	type AgentState = "disconnected" | "connecting" | "connected" | "disconnecting" | null;
18 
19	let agentState = $state<AgentState>("disconnected");
20	let errorMessage = $state<string | null>(null);
21	let timers: ReturnType<typeof setTimeout>[] = [];
22 
23	function clearTimers() {
24		timers.forEach(clearTimeout);
25		timers = [];
26	}
27 
28	function startConversation() {
29		errorMessage = null;
30		agentState = "connecting";
31		timers.push(
32			setTimeout(() => {
33				agentState = "connected";
34			}, 1500)
35		);
36	}
37 
38	function endConversation() {
39		agentState = "disconnecting";
40		timers.push(
41			setTimeout(() => {
42				agentState = "disconnected";
43			}, 1000)
44		);
45	}
46 
47	function handleCall() {
48		clearTimers();
49		if (agentState === "disconnected" || agentState === null) {
50			startConversation();
51		} else if (agentState === "connected") {
52			endConversation();
53		}
54	}
55 
56	$effect(() => {
57		return () => clearTimers();
58	});
59 
60	const isCallActive = $derived(agentState === "connected");
61	const isTransitioning = $derived(agentState === "connecting" || agentState === "disconnecting");
62 
63	// Canned volume: smooth sine waves when connected, zero otherwise.
64	function getInputVolume(): number {
65		if (agentState !== "connected") return 0;
66		return 0.3 + 0.25 * Math.sin(performance.now() / 500);
67	}
68 
69	function getOutputVolume(): number {
70		if (agentState !== "connected") return 0;
71		return 0.3 + 0.25 * Math.sin(performance.now() / 700 + 1);
72	}
73</script>
74 
75<Card class="flex h-[400px] w-full flex-col items-center justify-center overflow-hidden p-6">
76	<div class="flex flex-col items-center gap-6">
77		<div class="relative size-32">
78			<div
79				class="bg-muted relative h-full w-full rounded-full p-1 shadow-[inset_0_2px_8px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_2px_8px_rgba(0,0,0,0.5)]"
80			>
81				<div
82					class="bg-background h-full w-full overflow-hidden rounded-full shadow-[inset_0_0_12px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_0_12px_rgba(0,0,0,0.3)]"
83// … truncated