ability to scroll when message is being generated

src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte

@@ -12,6 +12,10 @@
 	export let viewCode: boolean;
 	export let hfToken: string;
 
+	let shouldScrollToBottom = true;
+	let isProgrammaticScroll = true;
+	let conversationLength = conversation.messages.length;
+
 	const dispatch = createEventDispatcher<{
 		addMessage: void;
 		deleteMessage: number;
@@ -34,6 +38,7 @@
 
 	function scrollToBottom() {
 		if (messageContainer) {
+			isProgrammaticScroll = true;
 			messageContainer.scrollTop = messageContainer.scrollHeight;
 		}
 	}
@@ -41,22 +46,37 @@
 	$: {
 		if (conversation.messages.at(-1)) {
 			resizeMessageTextAreas();
-			scrollToBottom();
+			if (shouldScrollToBottom) {
+				scrollToBottom();
+			}
 		}
 	}
+
+	$: if (conversation.messages.length !== conversationLength) {
+		// enable automatic scrolling when new message was added
+		conversationLength = conversation.messages.length;
+		shouldScrollToBottom = true;
+	}
 </script>
 
 <div
 	class="flex max-h-[calc(100dvh-5.8rem)] flex-col overflow-y-auto overflow-x-hidden @container"
-	class:pointer-events-none={loading}
 	class:animate-pulse={loading && !conversation.streaming}
 	bind:this={messageContainer}
+	on:scroll={() => {
+		// disable automatic scrolling is user initiates scroll
+		if (!isProgrammaticScroll) {
+			shouldScrollToBottom = false;
+		}
+		isProgrammaticScroll = false;
+	}}
 >
 	{#if !viewCode}
 		{#each conversation.messages as message, messageIdx}
 			<Message
 				class="border-b"
 				{message}
+				{loading}
 				on:input={resizeMessageTextAreas}
 				on:delete={() => dispatch("deleteMessage", messageIdx)}
 				autofocus={!loading && messageIdx === conversation.messages.length - 1}

src/lib/components/InferencePlayground/InferencePlaygroundMessage.svelte

@@ -3,6 +3,7 @@
 	import { createEventDispatcher } from "svelte";
 
 	export let message: ChatCompletionInputMessage;
+	export let loading: boolean = false;
 	export let autofocus: boolean = false;
 
 	const dispatch = createEventDispatcher<{ delete: void; input: void }>();
@@ -10,6 +11,7 @@
 
 <div
 	class="group/message group grid grid-cols-[1fr,2.5rem] items-start gap-2 px-3.5 pb-6 pt-4 hover:bg-gray-100/70 @2xl:grid-cols-[130px,1fr,2.5rem] @2xl:grid-rows-1 @2xl:gap-4 @2xl:px-6 dark:border-gray-800 dark:hover:bg-gray-800/30 {$$props.class}"
+	class:pointer-events-none={loading}
 >
 	<div class="col-span-2 pb-1 pt-3 text-sm font-semibold uppercase @2xl:col-span-1 @2xl:pb-2">
 		{message.role}