fix: issue with scroll sticking in user ui (#1860)

Signed-off-by: Ryan Hopper-Lowe <[email protected]>

Author: ryanhopperlowe

ui/user/src/lib/actions/div.svelte.ts

@@ -0,0 +1,74 @@
+import type { Action } from 'svelte/action';
+
+export type StickToBottomControls = {
+	stickToBottom: () => void;
+};
+
+type StickToBottomOptions = {
+	contentEl?: HTMLElement;
+	setControls?: (controls: StickToBottomControls) => void;
+};
+
+export const sticktobottom: Action<HTMLElement, StickToBottomOptions | undefined> = (
+	node,
+	options = {}
+) => {
+	let shouldStick = true;
+	let resizeObserver: ResizeObserver | null = null;
+
+	function scrollToBottom() {
+		node.scrollTop = node.scrollHeight - node.clientHeight;
+	}
+
+	function isAtBottom() {
+		return node.scrollHeight - node.scrollTop - node.clientHeight <= 40;
+	}
+
+	$effect(() => {
+		if (!options.contentEl) return;
+
+		resizeObserver = new ResizeObserver(() => {
+			if (shouldStick) {
+				scrollToBottom();
+			}
+		});
+
+		resizeObserver.observe(options.contentEl, { box: 'device-pixel-content-box' });
+
+		return () => {
+			if (resizeObserver) {
+				resizeObserver.disconnect();
+				resizeObserver = null;
+			}
+		};
+	});
+
+	// Handle wheel events to determine user scrolling intention
+	$effect(() => {
+		const handleWheel = (e: WheelEvent) => {
+			// If user scrolls up, disable auto-scrolling
+			if (e.deltaY < 0) {
+				shouldStick = false;
+			} else {
+				// If user scrolls down to the bottom, re-enable auto-scrolling
+				shouldStick = isAtBottom();
+			}
+		};
+
+		node.addEventListener('wheel', handleWheel, { passive: true });
+
+		// Clean up event listener when the effect is destroyed
+		return () => node.removeEventListener('wheel', handleWheel);
+	});
+
+	$effect(() => {
+		options.setControls?.({ stickToBottom: () => (shouldStick = true) });
+	});
+
+	// Return the action API
+	return {
+		update(newOptions) {
+			options = { ...options, ...newOptions };
+		}
+	};
+};

ui/user/src/lib/actions/div.ts

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { sticktobottom } from '$lib/actions/div';
+	import { sticktobottom, type StickToBottomControls } from '$lib/actions/div.svelte';
 	import Input from '$lib/components/messages/Input.svelte';
 	import Message from '$lib/components/messages/Message.svelte';
 	import { toHTMLFromMarkdown } from '$lib/markdown';
-	import { type Assistant, EditorService, type Messages } from '$lib/services';
+	import { EditorService, type Assistant, type Messages } from '$lib/services';
 	import { Thread } from '$lib/services/chat/thread.svelte';
 	import { assistants, context } from '$lib/stores';
 	import { onDestroy } from 'svelte';
@@ -78,6 +78,8 @@
 		thread = newThread;
 	});
 
+	let scrollControls = $state<StickToBottomControls>();
+
 	onDestroy(() => {
 		thread?.close?.();
 	});
@@ -96,12 +98,15 @@
 		bind:this={container}
 		class="flex h-full grow justify-center overflow-y-auto scrollbar-none"
 		class:scroll-smooth={scrollSmooth}
-		use:sticktobottom
+		use:sticktobottom={{
+			contentEl: messagesDiv,
+			setControls: (controls) => (scrollControls = controls)
+		}}
 	>
 		<div
 			in:fade|global
 			bind:this={messagesDiv}
-			class="flex w-full max-w-[1000px] flex-col justify-start gap-8 p-5 transition-all"
+			class="flex h-fit w-full max-w-[1000px] flex-col justify-start gap-8 p-5 transition-all"
 			class:justify-center={!thread}
 		>
 			<div class="message-content self-center">
@@ -145,9 +150,9 @@
 					onAbort={async () => {
 						await thread?.abort();
 					}}
-					onSubmit={async (i) => {
-						container?.scrollTo({ top: container?.scrollHeight - container?.clientHeight });
-						await thread?.invoke(i);
+					onSubmit={(i) => {
+						scrollControls?.stickToBottom();
+						thread?.invoke(i);
 					}}
 				/>
 			{/if}

ui/user/src/lib/components/Thread.svelte

@@ -399,7 +399,7 @@
 		class:justify-end={msg.sent}
 	>
 		{#if !msg.sent}
-			<div class="sticky top-10 z-10 mr-3"><MessageIcon {msg} /></div>
+			<div class="mr-3"><MessageIcon {msg} /></div>
 		{/if}
 
 		<div class="flex w-full flex-col" class:w-full={fullWidth}>
@@ -482,7 +482,7 @@
 		}
 
 		.loading-container span[data-end-indicator] {
-			@apply visible ml-1 inline-block size-4 animate-pulse rounded-full bg-gray-700 align-middle text-transparent dark:bg-gray-300;
+			@apply visible relative -mt-[2px] ml-1 inline-block size-4 animate-pulse rounded-full bg-gray-400 align-middle text-transparent;
 		}
 	}
 </style>