Voice Chat 01

1<script lang="ts">
2	import AudioLinesIcon from "@lucide/svelte/icons/audio-lines";
3	import CheckIcon from "@lucide/svelte/icons/check";
4	import CopyIcon from "@lucide/svelte/icons/copy";
5	import PhoneOffIcon from "@lucide/svelte/icons/phone-off";
6	import SendIcon from "@lucide/svelte/icons/send";
7	import { Button } from "$UI$/button/index.js";
8	import { Card, CardContent, CardFooter, CardHeader } from "$UI$/card/index.js";
9	import {
10		Conversation,
11		ConversationContent,
12		ConversationEmptyState,
13		ConversationScrollButton,
14	} from "$UI$/conversation/index.js";
15	import { Input } from "$UI$/input/index.js";
16	import { Message, MessageContent } from "$UI$/message/index.js";
17	import { Orb } from "$UI$/orb/index.js";
18	import { Response } from "$UI$/response/index.js";
19	import { ShimmeringText } from "$UI$/shimmering-text/index.js";
20	import {
21		Tooltip,
22		TooltipContent,
23		TooltipProvider,
24		TooltipTrigger,
25	} from "$UI$/tooltip/index.js";
26	import { cn } from "$UTILS$.js";
27 
28	let { class: className }: { class?: string } = $props();
29 
30	type ChatMessage = {
31		role: "user" | "assistant";
32		content: string;
33	};
34 
35	type AgentState = "disconnected" | "connecting" | "connected" | "disconnecting" | null;
36 
37	const DEFAULT_AGENT = {
38		name: "Customer Support",
39		description: "AI Voice Assistant",
40	};
41 
42	const CANNED_REPLIES = [
43		"Thanks for reaching out — I can help with that. Can you share your order number?",
44		"Got it. Let me pull that up for you.",
45		"I just checked — your order is on track to ship within the next 1-2 business days.",
46		"Anything else I can help with?",
47	];
48 
49	let messages = $state<ChatMessage[]>([]);
50	let agentState = $state<AgentState>("disconnected");
51	let textInput = $state("");
52	let copiedIndex = $state<number | null>(null);
53	let errorMessage = $state<string | null>(null);
54 
55	let timers: ReturnType<typeof setTimeout>[] = [];
56	let replyIndex = 0;
57 
58	function clearTimers() {
59		timers.forEach(clearTimeout);
60		timers = [];
61	}
62 
63	function scheduleAssistantReply() {
64		const reply = CANNED_REPLIES[replyIndex % CANNED_REPLIES.length];
65		replyIndex += 1;
66		timers.push(
67			setTimeout(() => {
68				messages = [...messages, { role: "assistant", content: reply }];
69			}, 1200)
70		);
71	}
72 
73	function handleCall() {
74		clearTimers();
75		if (agentState === "disconnected" || agentState === null) {
76			errorMessage = null;
77			messages = [];
78			agentState = "connecting";
79			timers.push(
80				setTimeout(() => {
81					agentState = "connected";
82					messages = [
83						{
84// … truncated