Conversation Bar

1<script lang="ts" module>
2	import type { HTMLAttributes } from "svelte/elements";
3	import type { ConversationAdapter, ConversationMessage, AgentConnectionState } from "./types.js";
4 
5	export type ConversationBarProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
6		/**
7		 * Backend bridge that owns the session lifecycle — connecting, streaming
8		 * messages, and muting. Conforms to
9		 * [`ConversationAdapter`](/docs/providers#conversationadapter).
10		 */
11		adapter: ConversationAdapter;
12		/**
13		 * Label shown in the waveform slot while the session is disconnected.
14		 * @default "Customer Support"
15		 */
16		disconnectedText?: string;
17		/** Extra classes merged onto the inner waveform container. */
18		waveformClassName?: string;
19		/** Fired after the adapter reports a successful connection. */
20		onConnect?: () => void;
21		/** Fired after the adapter reports disconnection. */
22		onDisconnect?: () => void;
23		/** Fired when the adapter surfaces an error or `connect()` rejects. */
24		onError?: (error: Error) => void;
25		/** Fired for each message emitted by the adapter (both user and AI turns). */
26		onMessage?: (message: ConversationMessage) => void;
27		/** Fired after a text-input message has been handed off to the adapter. */
28		onSendMessage?: (message: string) => void;
29		/** Bindable ref to the root `<div>` element. */
30		ref?: HTMLDivElement | null;
31	};
32</script>
33 
34<script lang="ts">
35	import { onDestroy } from "svelte";
36	import { cn } from "$UTILS$.js";
37	import { Button } from "$UI$/button/index.js";
38	import { Card } from "$UI$/card/index.js";
39	import { LiveWaveform } from "$UI$/live-waveform/index.js";
40	import { Separator } from "$UI$/separator/index.js";
41	import { Textarea } from "$UI$/textarea/index.js";
42	import MicIcon from "@lucide/svelte/icons/mic";
43	import MicOffIcon from "@lucide/svelte/icons/mic-off";
44	import PhoneIcon from "@lucide/svelte/icons/phone";
45	import XIcon from "@lucide/svelte/icons/x";
46	import KeyboardIcon from "@lucide/svelte/icons/keyboard";
47	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
48	import ArrowUpIcon from "@lucide/svelte/icons/arrow-up";
49 
50	let {
51		adapter,
52		disconnectedText = "Customer Support",
53		waveformClassName,
54		onConnect,
55		onDisconnect,
56		onError,
57		onMessage,
58		onSendMessage,
59		class: className,
60		ref = $bindable(null),
61		...restProps
62	}: ConversationBarProps = $props();
63 
64	let isMuted = $state(false);
65	let agentState = $state<AgentConnectionState>("disconnected");
66	let keyboardOpen = $state(false);
67// … truncated