fix auto scroll behaviour

src/lib/components/inference-playground/conversation.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { run } from "svelte/legacy";
-
 	import type { Conversation } from "$lib/types.js";
 
 	import IconPlus from "~icons/carbon/add";
 	import CodeSnippets from "./code-snippets.svelte";
 	import Message from "./message.svelte";
+	import { ScrollState } from "$lib/spells/scroll-state.svelte";
+	import { watch } from "runed";
 
 	interface Props {
 		conversation: Conversation;
@@ -15,35 +15,20 @@
 	}
 
 	let { conversation = $bindable(), loading, viewCode, compareActive }: Props = $props();
-
-	let shouldScrollToBottom = $state(true);
-	let isProgrammaticScroll = $state(true);
-	let conversationLength = $state(conversation.messages.length);
-
 	let messageContainer: HTMLDivElement | null = $state(null);
-
-	function scrollToBottom() {
-		if (messageContainer) {
-			isProgrammaticScroll = true;
-			messageContainer.scrollTop = messageContainer.scrollHeight;
-		}
-	}
-
-	run(() => {
-		if (conversation.messages.at(-1)) {
-			if (shouldScrollToBottom) {
-				scrollToBottom();
-			}
-		}
+	const scrollState = new ScrollState({
+		element: () => messageContainer,
+		offset: { bottom: 100 },
 	});
 
-	run(() => {
-		if (conversation.messages.length !== conversationLength) {
-			// enable automatic scrolling when new message was added
-			conversationLength = conversation.messages.length;
-			shouldScrollToBottom = true;
+	watch(
+		() => conversation.messages.at(-1)?.content,
+		() => {
+			const shouldScroll = scrollState.arrived.bottom && !scrollState.isScrolling;
+			if (!shouldScroll) return;
+			scrollState.scrollToBottom();
 		}
-	});
+	);
 
 	function addMessage() {
 		const msgs = conversation.messages.slice();
@@ -68,13 +53,7 @@
 		: 'max-h-[calc(100dvh-5.8rem-2.5rem-75px)] md:max-h-[calc(100dvh-5.8rem)]'}"
 	class:animate-pulse={loading && !conversation.streaming}
 	bind:this={messageContainer}
-	onscroll={() => {
-		// disable automatic scrolling is user initiates scroll
-		if (!isProgrammaticScroll) {
-			shouldScrollToBottom = false;
-		}
-		isProgrammaticScroll = false;
-	}}
+	id="test-this"
 >
 	{#if !viewCode}
 		{#each conversation.messages as _msg, idx}

src/lib/components/inference-playground/message.svelte

@@ -14,7 +14,6 @@
 
 	let element = $state<HTMLTextAreaElement>();
 	new TextareaAutosize({
-		styleProp: "minHeight",
 		element: () => element,
 		input: () => content,
 	});
@@ -34,7 +33,7 @@
 		{autofocus}
 		bind:value={content}
 		placeholder="Enter {role} message"
-		class="resize-none overflow-hidden rounded-sm bg-transparent px-2 py-2.5 ring-gray-100 outline-none group-hover/message:ring-3 hover:resize-y hover:bg-white focus:resize-y focus:bg-white focus:ring-3 @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
+		class="resize-none overflow-hidden rounded-sm bg-transparent px-2 py-2.5 ring-gray-100 outline-none group-hover/message:ring-3 hover:bg-white focus:bg-white focus:ring-3 @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
 		rows="1"
 		tabindex="2"
 	></textarea>

src/lib/spells/scroll-state.svelte.ts

@@ -0,0 +1,299 @@
+import type { MaybeGetter } from "$lib/types.js";
+import { AnimationFrames, useDebounce, useEventListener } from "runed";
+import { onMount } from "svelte";
+import { extract } from "./extract.svelte.js";
+import { noop } from "$lib/utils/noop.js";
+
+export interface ScrollStateOptions {
+	/**
+	 * The target element.
+	 */
+	element: MaybeGetter<HTMLElement | Window | Document | null | undefined>;
+
+	// /**
+	//  * Throttle time for scroll event, it’s disabled by default.
+	//  *
+	//  * @default 0
+	//  */
+	// throttle?: MaybeGetter<number | undefined>;
+
+	/**
+	 * The check time when scrolling ends.
+	 * This configuration will be setting to (throttle + idle) when the `throttle` is configured.
+	 *
+	 * @default 200
+	 */
+	idle?: MaybeGetter<number | undefined>;
+
+	/**
+	 * Offset arrived states by x pixels
+	 *
+	 */
+	offset?: MaybeGetter<
+		| {
+				left?: number;
+				right?: number;
+				top?: number;
+				bottom?: number;
+		  }
+		| undefined
+	>;
+
+	/**
+	 * Trigger it when scrolling.
+	 *
+	 */
+	onScroll?: (e: Event) => void;
+
+	/**
+	 * Trigger it when scrolling ends.
+	 *
+	 */
+	onStop?: (e: Event) => void;
+
+	/**
+	 * Listener options for scroll event.
+	 *
+	 * @default {capture: false, passive: true}
+	 */
+	eventListenerOptions?: AddEventListenerOptions;
+
+	/**
+	 * Optionally specify a scroll behavior of `auto` (default, not smooth scrolling) or
+	 * `smooth` (for smooth scrolling) which takes effect when changing the `x` or `y` refs.
+	 *
+	 * @default 'auto'
+	 */
+	behavior?: MaybeGetter<ScrollBehavior | undefined>;
+
+	/**
+	 * On error callback
+	 *
+	 * Default log error to `console.error`
+	 */
+	onError?: (error: unknown) => void;
+}
+
+/**
+ * We have to check if the scroll amount is close enough to some threshold in order to
+ * more accurately calculate arrivedState. This is because scrollTop/scrollLeft are non-rounded
+ * numbers, while scrollHeight/scrollWidth and clientHeight/clientWidth are rounded.
+ * https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
+ */
+const ARRIVED_STATE_THRESHOLD_PIXELS = 1;
+
+/**
+ * Reactive scroll.
+ *
+ * @see https://vueuse.org/useScroll for the inspiration behind this utility.
+ * @param element
+ * @param options
+ */
+export class ScrollState {
+	#options!: ScrollStateOptions;
+	element = $derived(extract(this.#options.element));
+	// throttle = $derived(extract(this.#options.throttle, 0));
+	idle = $derived(extract(this.#options.idle, 200));
+	offset = $derived(
+		extract(this.#options.offset, {
+			left: 0,
+			right: 0,
+			top: 0,
+			bottom: 0,
+		})
+	);
+	onScroll = $derived(this.#options.onScroll ?? noop);
+	onStop = $derived(this.#options.onStop ?? noop);
+	eventListenerOptions = $derived(
+		this.#options.eventListenerOptions ?? {
+			capture: false,
+			passive: true,
+		}
+	);
+	behavior = $derived(extract(this.#options.behavior, "auto"));
+	onError = $derived(
+		this.#options.onError ??
+			((e: unknown) => {
+				console.error(e);
+			})
+	);
+
+	/** State */
+	internalX = $state(0);
+	internalY = $state(0);
+
+	// Use a get/set pair for x and y because we want to write the value to the refs
+	// during a `scrollTo()` without firing additional `scrollTo()`s in the process.
+	#x = $derived(this.internalX);
+	get x() {
+		return this.#x;
+	}
+	set x(v) {
+		this.scrollTo(v, undefined);
+	}
+
+	#y = $derived(this.internalY);
+	get y() {
+		return this.#y;
+	}
+	set y(v) {
+		this.scrollTo(undefined, v);
+	}
+
+	isScrolling = $state(false);
+	arrived = $state({
+		left: true,
+		right: false,
+		top: true,
+		bottom: false,
+	});
+	directions = $state({
+		left: false,
+		right: false,
+		top: false,
+		bottom: false,
+	});
+
+	constructor(options: ScrollStateOptions) {
+		this.#options = options;
+
+		useEventListener(
+			() => this.element,
+			"scroll",
+			// throttle ? useThrottleFn(onScrollHandler, throttle, true, false) : onScrollHandler,
+			this.onScrollHandler,
+			this.eventListenerOptions
+		);
+
+		useEventListener(
+			() => this.element,
+			"scrollend",
+			e => this.onScrollEnd(e),
+			this.eventListenerOptions
+		);
+
+		onMount(() => {
+			this.setArrivedState();
+		});
+
+		// useResizeObserver(
+		// 	() => (isHtmlElement(this.element) ? this.element : null),
+		// 	() => {
+		// 		setTimeout(() => {
+		// 			this.setArrivedState();
+		// 		}, 100);
+		// 	}
+		// );
+
+		// overkill?
+		new AnimationFrames(() => this.setArrivedState());
+	}
+
+	setArrivedState = () => {
+		if (!window || !this.element) return;
+
+		const el: Element = ((this.element as Window)?.document?.documentElement ||
+			(this.element as Document)?.documentElement ||
+			(this.element as HTMLElement | SVGElement)) as Element;
+
+		const { display, flexDirection, direction } = getComputedStyle(el);
+		const directionMultipler = direction === "rtl" ? -1 : 1;
+
+		const scrollLeft = el.scrollLeft;
+		this.directions.left = scrollLeft < this.internalX;
+		this.directions.right = scrollLeft > this.internalX;
+
+		const left = scrollLeft * directionMultipler <= (this.offset.left || 0);
+		const right =
+			scrollLeft * directionMultipler + el.clientWidth >=
+			el.scrollWidth - (this.offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+
+		if (display === "flex" && flexDirection === "row-reverse") {
+			this.arrived.left = right;
+			this.arrived.right = left;
+		} else {
+			this.arrived.left = left;
+			this.arrived.right = right;
+		}
+
+		this.internalX = scrollLeft;
+
+		let scrollTop = el.scrollTop;
+
+		// patch for mobile compatible
+		if (this.element === window.document && !scrollTop) scrollTop = window.document.body.scrollTop;
+
+		this.directions.top = scrollTop < this.internalY;
+		this.directions.bottom = scrollTop > this.internalY;
+		const top = scrollTop <= (this.offset.top || 0);
+		const bottom =
+			scrollTop + el.clientHeight >= el.scrollHeight - (this.offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+
+		/**
+		 * reverse columns and rows behave exactly the other way around,
+		 * bottom is treated as top and top is treated as the negative version of bottom
+		 */
+		if (display === "flex" && flexDirection === "column-reverse") {
+			this.arrived.top = bottom;
+			this.arrived.bottom = top;
+		} else {
+			this.arrived.top = top;
+			this.arrived.bottom = bottom;
+		}
+
+		this.internalY = scrollTop;
+	};
+
+	onScrollHandler = (e: Event) => {
+		if (!window) return;
+
+		this.setArrivedState();
+
+		this.isScrolling = true;
+		this.onScrollEndDebounced(e);
+		this.onScroll(e);
+	};
+
+	scrollTo(x: number | undefined, y: number | undefined) {
+		if (!window) return;
+
+		(this.element instanceof Document ? window.document.body : this.element)?.scrollTo({
+			top: y ?? this.y,
+			left: x ?? this.x,
+			behavior: this.behavior,
+		});
+		const scrollContainer =
+			(this.element as Window)?.document?.documentElement ||
+			(this.element as Document)?.documentElement ||
+			(this.element as Element);
+		if (x != null) this.internalX = scrollContainer.scrollLeft;
+		if (y != null) this.internalY = scrollContainer.scrollTop;
+	}
+
+	scrollToTop() {
+		this.scrollTo(undefined, 0);
+	}
+
+	scrollToBottom() {
+		if (!window) return;
+
+		const scrollContainer =
+			(this.element as Window)?.document?.documentElement ||
+			(this.element as Document)?.documentElement ||
+			(this.element as Element);
+		this.scrollTo(undefined, scrollContainer.scrollHeight);
+	}
+
+	onScrollEnd = (e: Event) => {
+		// dedupe if support native scrollend event
+		if (!this.isScrolling) return;
+
+		this.isScrolling = false;
+		this.directions.left = false;
+		this.directions.right = false;
+		this.directions.top = false;
+		this.directions.bottom = false;
+		this.onStop(e);
+	};
+	onScrollEndDebounced = useDebounce(this.onScrollEnd, () => this.idle);
+}

src/lib/spells/textarea-autosize.svelte.ts

@@ -1,7 +1,7 @@
 import type { Getter } from "melt";
 import { extract } from "./extract.svelte.js";
 import { useResizeObserver, watch } from "runed";
-import { tick } from "svelte";
+import { onDestroy, tick } from "svelte";
 
 export interface TextareaAutosizeOptions {
 	/** Textarea element to autosize. */
@@ -15,26 +15,37 @@ export interface TextareaAutosizeOptions {
 	 * @default `height`
 	 **/
 	styleProp?: "height" | "minHeight";
+	/**
+	 * Maximum height of the textarea before enabling scrolling.
+	 * @default `undefined` (no maximum)
+	 */
+	maxHeight?: number;
 }
 
 export class TextareaAutosize {
 	#options: TextareaAutosizeOptions;
+	#resizeTimeout: number | null = null;
+	#hiddenTextarea: HTMLTextAreaElement | null = null;
+
 	element = $derived.by(() => extract(this.#options.element));
 	input = $derived.by(() => extract(this.#options.input));
 	styleProp = $derived.by(() => extract(this.#options.styleProp, "height"));
-
-	textareaScrollHeight = $state(1);
+	maxHeight = $derived.by(() => extract(this.#options.maxHeight, undefined));
+	textareaHeight = $state(0);
 	textareaOldWidth = $state(0);
 
 	constructor(options: TextareaAutosizeOptions) {
 		this.#options = options;
 
+		// Create hidden textarea for measurements
+		this.#createHiddenTextarea();
+
 		watch([() => this.input, () => this.element], () => {
 			tick().then(() => this.triggerResize());
 		});
 
 		watch(
-			() => this.textareaScrollHeight,
+			() => this.textareaHeight,
 			() => options?.onResize?.()
 		);
 
@@ -45,23 +56,106 @@ export class TextareaAutosize {
 				const { contentRect } = entry;
 				if (this.textareaOldWidth === contentRect.width) return;
 
-				requestAnimationFrame(() => {
-					this.textareaOldWidth = contentRect.width;
-					this.triggerResize();
-				});
+				this.textareaOldWidth = contentRect.width;
+				this.triggerResize();
 			}
 		);
+
+		onDestroy(() => {
+			// Clean up
+			if (this.#hiddenTextarea) {
+				this.#hiddenTextarea.remove();
+				this.#hiddenTextarea = null;
+			}
+
+			if (this.#resizeTimeout) {
+				window.cancelAnimationFrame(this.#resizeTimeout);
+				this.#resizeTimeout = null;
+			}
+		});
+	}
+
+	#createHiddenTextarea() {
+		// Create a hidden textarea that will be used for measurements
+		// This avoids layout shifts caused by manipulating the actual textarea
+		if (typeof window === "undefined") return;
+
+		this.#hiddenTextarea = document.createElement("textarea");
+		const style = this.#hiddenTextarea.style;
+
+		// Make it invisible but keep same text layout properties
+		style.visibility = "hidden";
+		style.position = "absolute";
+		style.overflow = "hidden";
+		style.height = "0";
+		style.top = "0";
+		style.left = "-9999px";
+
+		document.body.appendChild(this.#hiddenTextarea);
+	}
+
+	#copyStyles() {
+		if (!this.element || !this.#hiddenTextarea) return;
+
+		const computed = window.getComputedStyle(this.element);
+
+		// Copy all the styles that affect text layout
+		const stylesToCopy = [
+			"box-sizing",
+			"width",
+			"padding-top",
+			"padding-right",
+			"padding-bottom",
+			"padding-left",
+			"border-top-width",
+			"border-right-width",
+			"border-bottom-width",
+			"border-left-width",
+			"font-family",
+			"font-size",
+			"font-weight",
+			"font-style",
+			"letter-spacing",
+			"text-indent",
+			"text-transform",
+			"line-height",
+			"word-spacing",
+			"word-wrap",
+			"word-break",
+			"white-space",
+		];
+
+		stylesToCopy.forEach(style => {
+			this.#hiddenTextarea!.style.setProperty(style, computed.getPropertyValue(style));
+		});
+
+		// Ensure the width matches exactly
+		this.#hiddenTextarea.style.width = `${this.element.clientWidth}px`;
 	}
 
 	triggerResize = () => {
-		if (!this.element) return;
+		if (!this.element || !this.#hiddenTextarea) return;
+
+		// Copy current styles and content to hidden textarea
+		this.#copyStyles();
+		this.#hiddenTextarea.value = this.input || "";
 
-		let height = "";
+		// Measure the hidden textarea
+		const scrollHeight = this.#hiddenTextarea.scrollHeight;
 
-		this.element.style[this.styleProp] = "1px";
-		this.textareaScrollHeight = this.element?.scrollHeight;
-		height = `${this.textareaScrollHeight}px`;
+		// Apply the height, respecting maxHeight if set
+		let newHeight = scrollHeight;
+		if (this.maxHeight && newHeight > this.maxHeight) {
+			newHeight = this.maxHeight;
+			this.element.style.overflowY = "auto";
+		} else {
+			this.element.style.overflowY = "hidden";
+		}
 
-		this.element.style[this.styleProp] = height;
+		// Only update if height actually changed
+		if (this.textareaHeight !== newHeight) {
+			this.textareaHeight = newHeight;
+			this.element.style[this.styleProp] = `${newHeight}px`;
+		}
 	};
 }