Conversation

1<script lang="ts">
2	import type { Snippet } from "svelte";
3	import type { HTMLAttributes } from "svelte/elements";
4	import { StickToBottom } from "stick-to-bottom-svelte";
5	import { cn } from "$UTILS$.js";
6	import { setConversationContext } from "./context.js";
7 
8	let {
9		class: className,
10		children,
11		initial = "smooth" as ScrollBehavior,
12		resize = "smooth" as ScrollBehavior,
13		...restProps
14	}: HTMLAttributes<HTMLDivElement> & {
15		/** Conversation body — typically a `Conversation.Content` and optional `Conversation.ScrollButton`. */
16		children?: Snippet;
17		/**
18		 * Scroll behavior used on first mount to anchor to the bottom.
19		 * @default "smooth"
20		 */
21		initial?: ScrollBehavior;
22		/**
23		 * Scroll behavior used when content resizes (e.g. new messages streamed in)
24		 * while the user is anchored to the bottom.
25		 * @default "smooth"
26		 */
27		resize?: ScrollBehavior;
28	} = $props();
29 
30	let scrollEl: HTMLDivElement | null = $state(null);
31	let contentEl: HTMLElement | null = $state(null);
32 
33	const stickToBottom = new StickToBottom({
34		scrollElement: () => scrollEl as HTMLElement,
35		contentElement: () => contentEl as HTMLElement,
36		initial,
37		resize,
38	});
39 
40	setConversationContext({
41		setContentElement(el) {
42			contentEl = el;
43		},
44		get isAtBottom() {
45			return stickToBottom.isAtBottom;
46		},
47		scrollToBottom() {
48			void stickToBottom.scrollToBottom({});
49		},
50	});
51</script>
52 
53<div
54	bind:this={scrollEl}
55	{...restProps}
56	data-slot="conversation"
57	role="log"
58	aria-live="polite"
59	aria-relevant="additions"
60	class={cn("relative flex-1 overflow-y-auto", className)}
61>
62	{@render children?.()}
63</div>