llama.cpp/tools/ui/src/lib/hooks/use-chat-screen-scroll.svelte.ts

/**
 * Scroll container binding and navigation guard for the ChatScreen.
 *
 * Binds the `AutoScrollController` to `document.documentElement`, exposes
 * the container for programmatic scrolling, and flags an `isNavigating`
 * window during route changes so the controller can reset without its
 * scroll handler seeing spurious events from layout shifts.
 */

import { afterNavigate, beforeNavigate } from '$app/navigation';
import type { AutoScrollController } from './use-auto-scroll.svelte';

export function useChatScreenScroll(autoScroll: AutoScrollController) {
	let chatScrollContainer: HTMLElement | undefined = $state();
	let isNavigating = $state(false);

	function handleScroll(event: UIEvent) {
		// Ignore scroll events caused by navigation layout changes or by our own
		// programmatic scrolls so they don't accidentally disable auto-scroll.
		if (isNavigating || !event.isTrusted) return;
		autoScroll.handleScroll();
	}

	beforeNavigate(() => {
		isNavigating = true;
		autoScroll.resetScrollState();
	});

	afterNavigate(() => {
		setTimeout(() => {
			isNavigating = false;
			autoScroll.resetScrollState();
		}, 10);
	});

	$effect(() => {
		chatScrollContainer = document.documentElement;
		autoScroll.setContainer(chatScrollContainer);
	});

	return {
		get chatScrollContainer() {
			return chatScrollContainer;
		},
		handleScroll
	};
}