Chat snap scroll bottom (#10)

* only snap scroll to bottom if user didn't scroll up

* add scroll to bottom button when user scrolls up in the chat

* remove unecessary export

* rename scrollToBottom action to snapScrollToBottom + remove anim for now as it's stuttering

src/lib/actions/snapScrollToBottom.ts

@@ -0,0 +1,45 @@
+/**
+ * @param node element to snap scroll to bottom
+ * @param dependency pass in a dependency to update scroll on changes.
+ */
+export const snapScrollToBottom = (node: HTMLElement, dependency: any) => {
+	let prevScrollValue = node.scrollTop;
+	let isDetached = false;
+
+	const handleScroll = () => {
+		// if user scrolled up, we detach
+		if (node.scrollTop < prevScrollValue) {
+			isDetached = true;
+		}
+
+		// if user scrolled back to bottom, we reattach
+		if (node.scrollTop === node.scrollHeight - node.clientHeight) {
+			isDetached = false;
+		}
+
+		prevScrollValue = node.scrollTop;
+	};
+
+	const updateScroll = (_options: { force?: boolean } = {}) => {
+		const defaultOptions = { force: false };
+		const options = { ...defaultOptions, ..._options };
+		const { force } = options;
+
+		if (!force && isDetached) return;
+
+		node.scroll({
+			top: node.scrollHeight
+		});
+	};
+
+	node.addEventListener('scroll', handleScroll);
+
+	updateScroll({ force: true });
+
+	return {
+		update: updateScroll,
+		destroy: () => {
+			node.removeEventListener('scroll', handleScroll);
+		}
+	};
+};

src/lib/components/ScrollToBottomBtn.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import Chevron from './icons/Chevron.svelte';
+	import { onDestroy } from 'svelte';
+
+	export let scrollNode: HTMLElement;
+	export { className as class };
+
+	let visible: boolean = false;
+	let className = '';
+
+	$: if (scrollNode) {
+		scrollNode.addEventListener('scroll', onScroll);
+	}
+
+	function onScroll() {
+		visible =
+			Math.ceil(scrollNode.scrollTop) + 200 < scrollNode.scrollHeight - scrollNode.clientHeight;
+	}
+
+	onDestroy(() => {
+		if (!scrollNode) return;
+		scrollNode.removeEventListener('scroll', onScroll);
+	});
+</script>
+
+{#if visible}
+	<button
+		transition:fade={{ duration: 150 }}
+		on:click={() => scrollNode.scrollTo({ top: scrollNode.scrollHeight, behavior: 'smooth' })}
+		class="absolute flex rounded-full border w-10 h-10 items-center justify-center shadow bg-white dark:bg-gray-700 dark:border-gray-600 {className}"
+		><Chevron /></button
+	>
+{/if}

src/lib/components/icons/Chevron.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let classNames: string = '';
+</script>
+
+<svg
+	width="15"
+	height="8"
+	viewBox="0 0 15 8"
+	class={classNames}
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M1.67236 1L7.67236 7L13.6724 1"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

src/routes/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { Message } from '$lib/Types';
 
-	import { afterUpdate } from 'svelte';
 	import { HfInference } from '@huggingface/inference';
 
 	import ChatMessage from '$lib/components/chat/ChatMessage.svelte';
@@ -21,18 +20,15 @@
 	const userToken = PUBLIC_USER_MESSAGE_TOKEN || '<|prompter|>';
 	const assistantToken = PUBLIC_ASSISTANT_MESSAGE_TOKEN || '<|assistant|>';
 	const sepToken = PUBLIC_SEP_TOKEN || '<|endoftext|>';
+	import { snapScrollToBottom } from '$lib/actions/snapScrollToBottom';
+	import ScrollToBottomBtn from '$lib/components/ScrollToBottomBtn.svelte';
 
 	const hf = new HfInference();
 	const model = hf.endpoint(`${$page.url.origin}/api/conversation`);
 
 	let messages: Message[] = [];
 	let message = '';
-
-	let messagesContainer: HTMLElement;
-
-	afterUpdate(() => {
-		messagesContainer.scrollTo(0, messagesContainer.scrollHeight);
-	});
+	let chatContainer: HTMLElement;
 
 	function switchTheme() {
 		const { classList } = document.querySelector('html') as HTMLElement;
@@ -156,7 +152,7 @@
 			<button>New Chat</button>
 			<button>+</button>
 		</nav>
-		<div class="overflow-y-auto h-full" bind:this={messagesContainer}>
+		<div class="overflow-y-auto h-full" use:snapScrollToBottom={messages} bind:this={chatContainer}>
 			<div class="max-w-3xl xl:max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8 h-full">
 				{#each messages as message}
 					<ChatMessage {message} />
@@ -165,6 +161,7 @@
 				{/each}
 				<div class="h-32 flex-none" />
 			</div>
+			<ScrollToBottomBtn class="bottom-10 right-12" scrollNode={chatContainer} />
 		</div>
 		<div
 			class="flex max-md:border-t dark:border-gray-800 items-center max-md:dark:bg-gray-900 max-md:bg-white bg-gradient-to-t from-white dark:from-gray-900 to-transparent justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-5 bottom-0 py-4 md:py-8 w-full"