Fix scroll to bottom (#78)

* fix snap scroll to bottom not updating properly to bottom when switching conversation

* scroll to bottom when a user sends a new message ( fixes #75)

* update comment to be detailing the scroll offset

Co-authored-by: Eliott C. <[email protected]>

* use tick() instead of afterUpdate

---------

Co-authored-by: Eliott C. <[email protected]>

src/lib/actions/snapScrollToBottom.ts

@@ -1,6 +1,9 @@
 import { navigating } from "$app/stores";
+import { tick } from "svelte";
 import { get } from "svelte/store";
 
+const detachedOffset = 10;
+
 /**
  * @param node element to snap scroll to bottom
  * @param dependency pass in a dependency to update scroll on changes.
@@ -15,24 +18,25 @@ export const snapScrollToBottom = (node: HTMLElement, dependency: any) => {
 			isDetached = true;
 		}
 
-		// if user scrolled back to bottom, we reattach
-		if (node.scrollTop === node.scrollHeight - node.clientHeight) {
+		// if user scrolled back to within 10px of bottom, we reattach
+		if (node.scrollTop - (node.scrollHeight - node.clientHeight) >= -detachedOffset) {
 			isDetached = false;
 		}
 
 		prevScrollValue = node.scrollTop;
 	};
 
-	const updateScroll = (_options: { force?: boolean } = {}) => {
+	const updateScroll = async (_options: { force?: boolean } = {}) => {
 		const defaultOptions = { force: false };
 		const options = { ...defaultOptions, ..._options };
 		const { force } = options;
 
 		if (!force && isDetached && !get(navigating)) return;
 
-		node.scroll({
-			top: node.scrollHeight,
-		});
+		// wait for next tick to ensure that the DOM is updated
+		await tick();
+
+		node.scrollTo({ top: node.scrollHeight });
 	};
 
 	node.addEventListener("scroll", handleScroll);

src/lib/components/chat/ChatMessages.svelte

@@ -2,6 +2,8 @@
 	import type { Message } from "$lib/types/Message";
 	import { snapScrollToBottom } from "$lib/actions/snapScrollToBottom";
 	import ScrollToBottomBtn from "$lib/components/ScrollToBottomBtn.svelte";
+	import { tick } from "svelte";
+
 	import ChatIntroduction from "./ChatIntroduction.svelte";
 	import ChatMessage from "./ChatMessage.svelte";
 
@@ -10,6 +12,16 @@
 	export let pending: boolean;
 
 	let chatContainer: HTMLElement;
+
+	async function scrollToBottom() {
+		await tick();
+		chatContainer.scrollTop = chatContainer.scrollHeight;
+	}
+
+	// If last message is from user, scroll to bottom
+	$: if (messages.at(-1)?.from === "user") {
+		scrollToBottom();
+	}
 </script>
 
 <div class="overflow-y-auto h-full" use:snapScrollToBottom={messages} bind:this={chatContainer}>