improve auto scroll

package.json

@@ -41,7 +41,7 @@
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.2.6",
 		"prettier-plugin-tailwindcss": "^0.6.11",
-		"runed": "^0.24.0",
+		"runed": "^0.25.0",
 		"svelte": "^5.20.4",
 		"svelte-check": "^4.0.0",
 		"tailwind-merge": "^3.0.2",

pnpm-lock.yaml

@@ -97,8 +97,8 @@ importers:
         specifier: ^0.6.11
         version: 0.6.11([email protected]([email protected])([email protected]))([email protected])
       runed:
-        specifier: ^0.24.0
-        version: 0.24.0([email protected])
+        specifier: ^0.25.0
+        version: 0.25.0([email protected])
       svelte:
         specifier: ^5.20.4
         version: 5.23.0
@@ -1861,8 +1861,8 @@ packages:
     peerDependencies:
       svelte: ^5.7.0
 
-  runed@0.24.0:
-    resolution: {integrity: sha512-kLp0qUdiwEn1Q9zrQlToN7g1PQ+F0XI7J3eABPi/hSwMMy0vEQAdmZQkCvy1BtynAmGiD8CwNSy06KH7iUsCNg==}
+  runed@0.25.0:
+    resolution: {integrity: sha512-7+ma4AG9FT2sWQEA0Egf6mb7PBT2vHyuHail1ie8ropfSjvZGtEAx8YTmUjv/APCsdRRxEVvArNjALk9zFSOrg==}
     peerDependencies:
       svelte: ^5.7.0
 
@@ -3731,7 +3731,7 @@ snapshots:
       esm-env: 1.2.2
       svelte: 5.23.0
 
-  runed@0.24.0([email protected]):
+  runed@0.25.0([email protected]):
     dependencies:
       esm-env: 1.2.2
       svelte: 5.23.0

src/lib/components/debug-menu.svelte

@@ -9,6 +9,7 @@
 	import type { ToastData } from "./toaster.svelte.js";
 	import { addToast } from "./toaster.svelte.js";
 	import { models } from "$lib/state/models.svelte";
+	import { last } from "$lib/utils/array.js";
 
 	let innerWidth = $state<number>();
 	let innerHeight = $state<number>();
@@ -25,6 +26,13 @@
 	};
 
 	const actions: Action[] = [
+		{
+			label: "Set long text",
+			cb: () => {
+				const conv = session.project.conversations[0]!;
+				last(conv.messages)!.content = "This is a lot of text. ".repeat(10000);
+			},
+		},
 		{ label: "Toggle Theme", cb: toggleTheme },
 		{
 			label: "Log session to console",

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

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import type { Conversation } from "$lib/types.js";
 
+	import { ScrollState } from "$lib/spells/scroll-state.svelte";
+	import { watch } from "runed";
+	import { tick } from "svelte";
 	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;
@@ -20,13 +21,20 @@
 		element: () => messageContainer,
 		offset: { bottom: 100 },
 	});
+	const atBottom = $derived(scrollState.arrived.bottom);
 
 	watch(
 		() => conversation.messages.at(-1)?.content,
 		() => {
-			const shouldScroll = scrollState.arrived.bottom && !scrollState.isScrolling;
+			const shouldScroll = atBottom && !scrollState.isScrolling;
 			if (!shouldScroll) return;
-			scrollState.scrollToBottom();
+			try {
+				tick().then(() => {
+					scrollState.scrollToBottom();
+				});
+			} catch {
+				// noop
+			}
 		}
 	);