Voice Chat 03

1<script lang="ts">
2	import CheckIcon from "@lucide/svelte/icons/check";
3	import CopyIcon from "@lucide/svelte/icons/copy";
4	import { Button } from "$UI$/button/index.js";
5	import { Card, CardContent } from "$UI$/card/index.js";
6	import {
7		Conversation,
8		ConversationContent,
9		ConversationEmptyState,
10		ConversationScrollButton,
11	} from "$UI$/conversation/index.js";
12	import { ConversationBar } from "$UI$/conversation-bar/index.js";
13	import type {
14		ConversationAdapter,
15		ConversationConfig,
16		ConversationMessage,
17	} from "$UI$/conversation-bar/types.js";
18	import { Message, MessageContent } from "$UI$/message/index.js";
19	import { Orb } from "$UI$/orb/index.js";
20	import { Response } from "$UI$/response/index.js";
21	import {
22		Tooltip,
23		TooltipContent,
24		TooltipProvider,
25		TooltipTrigger,
26	} from "$UI$/tooltip/index.js";
27	import { cn } from "$UTILS$.js";
28 
29	let { class: className }: { class?: string } = $props();
30 
31	type ChatMessage = {
32		role: "user" | "assistant";
33		content: string;
34	};
35 
36	const GREETING = "Hi, I'm your voice assistant. Tap the phone button or type a message to begin.";
37	const CANNED_REPLIES = [
38		"Got it — tell me a bit more about what you're after.",
39		"Sure, happy to help. Could you give me an example?",
40		"Here's what I'd suggest as a starting point — let me know if you want to go deeper on any part.",
41		"That's a good point. Want me to expand on it?",
42	];
43 
44	let messages = $state<ChatMessage[]>([]);
45	let copiedIndex = $state<number | null>(null);
46	let timers: ReturnType<typeof setTimeout>[] = [];
47	let replyIndex = 0;
48 
49	function clearTimers() {
50		timers.forEach(clearTimeout);
51		timers = [];
52	}
53 
54	function pushMessage(message: ChatMessage) {
55		messages = [...messages, message];
56	}
57 
58	const cannedAdapter: ConversationAdapter = {
59		async connect(config: ConversationConfig) {
60			clearTimers();
61			config.onStatusChange("connecting");
62			timers.push(
63				setTimeout(() => {
64					config.onStatusChange("connected");
65					config.onConnect();
66					timers.push(
67						setTimeout(() => {
68							const greeting: ConversationMessage = { source: "ai", message: GREETING };
69							config.onMessage(greeting);
70						}, 600)
71					);
72				}, 900)
73			);
74		},
75		disconnect() {
76			clearTimers();
77		},
78		sendMessage() {
79			const reply = CANNED_REPLIES[replyIndex % CANNED_REPLIES.length];
80			replyIndex += 1;
81			timers.push(
82				setTimeout(() => {
83					pushMessage({ role: "assistant", content: reply });
84				}, 900)
85			);
86		},
87		sendContextualUpdate() {
88// … truncated