Created the needed Conversation.svelte component (#10)

src/lib/components/Conversation.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import PlaygroundCode from '$lib/components/CodeSnippets.svelte';
+	import PlaygroundMessage from '$lib/components/Message.svelte';
+
+	export let loading;
+	export let streamingMessage;
+	export let conversations;
+	export let conversation;
+	export let index;
+	export let currentConversation;
+	export let viewCode;
+	export let messages;
+
+	const dispatch = createEventDispatcher<{ addMessage: void; deleteMessage: number }>();
+
+	let messageContainer: HTMLDivElement | null = null;
+
+	function scrollToBottom() {
+		if (messageContainer) {
+			messageContainer.scrollTop = messageContainer.scrollHeight;
+		}
+	}
+
+	$:{
+		if(currentConversation.messages.at(-1)){
+			scrollToBottom();
+		}
+	}
+</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 && !streamingMessage}
+bind:this={messageContainer}
+>
+{#if conversations.length > 1}
+	<div
+		class="sticky top-0 flex h-11 flex-none items-center gap-2 whitespace-nowrap rounded-lg border border-gray-200/80 bg-white pl-3 pr-2 text-sm leading-none shadow-sm *:flex-none dark:border-gray-800 dark:bg-gray-800/70 dark:hover:bg-gray-800"
+		class:mr-3={index === 0}
+		class:mx-3={index === 1}
+	>
+		<div class="size-3.5 rounded bg-black dark:bg-gray-400"></div>
+		<div>{conversation.model}</div>
+		<button
+			class="ml-auto flex size-6 items-center justify-center rounded bg-gray-50 text-xs hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700"
+			on:click={() => (conversations = conversations.filter((_, i) => i !== index))}
+		>
+			✕
+		</button>
+		<button
+			class=" flex size-6 items-center justify-center rounded bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700"
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"
+				><path
+					fill="currentColor"
+					d="M27 16.76v-1.53l1.92-1.68A2 2 0 0 0 29.3 11l-2.36-4a2 2 0 0 0-1.73-1a2 2 0 0 0-.64.1l-2.43.82a11.35 11.35 0 0 0-1.31-.75l-.51-2.52a2 2 0 0 0-2-1.61h-4.68a2 2 0 0 0-2 1.61l-.51 2.52a11.48 11.48 0 0 0-1.32.75l-2.38-.86A2 2 0 0 0 6.79 6a2 2 0 0 0-1.73 1L2.7 11a2 2 0 0 0 .41 2.51L5 15.24v1.53l-1.89 1.68A2 2 0 0 0 2.7 21l2.36 4a2 2 0 0 0 1.73 1a2 2 0 0 0 .64-.1l2.43-.82a11.35 11.35 0 0 0 1.31.75l.51 2.52a2 2 0 0 0 2 1.61h4.72a2 2 0 0 0 2-1.61l.51-2.52a11.48 11.48 0 0 0 1.32-.75l2.42.82a2 2 0 0 0 .64.1a2 2 0 0 0 1.73-1l2.28-4a2 2 0 0 0-.41-2.51ZM25.21 24l-3.43-1.16a8.86 8.86 0 0 1-2.71 1.57L18.36 28h-4.72l-.71-3.55a9.36 9.36 0 0 1-2.7-1.57L6.79 24l-2.36-4l2.72-2.4a8.9 8.9 0 0 1 0-3.13L4.43 12l2.36-4l3.43 1.16a8.86 8.86 0 0 1 2.71-1.57L13.64 4h4.72l.71 3.55a9.36 9.36 0 0 1 2.7 1.57L25.21 8l2.36 4l-2.72 2.4a8.9 8.9 0 0 1 0 3.13L27.57 20Z"
+				/><path
+					fill="currentColor"
+					d="M16 22a6 6 0 1 1 6-6a5.94 5.94 0 0 1-6 6Zm0-10a3.91 3.91 0 0 0-4 4a3.91 3.91 0 0 0 4 4a3.91 3.91 0 0 0 4-4a3.91 3.91 0 0 0-4-4Z"
+				/></svg
+			>
+		</button>
+	</div>
+{/if}
+{#if !viewCode}
+	{#each messages as message, i}
+		<PlaygroundMessage
+			class="border-b"
+			{message}
+			on:delete={() => dispatch("deleteMessage", i)}
+			autofocus={conversations.length === 1 && !loading && i === messages.length - 1}
+		/>
+	{/each}
+
+	<button
+		class="flex px-6 py-6 hover:bg-gray-50 dark:hover:bg-gray-800/50"
+		on:click={() => dispatch("addMessage")}
+		disabled={loading}
+	>
+		<div class="flex items-center gap-2 !p-0 text-sm font-semibold">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="1em"
+				height="1em"
+				viewBox="0 0 32 32"
+				class="text-lg"
+				><path
+					fill="currentColor"
+					d="M16 2A14.172 14.172 0 0 0 2 16a14.172 14.172 0 0 0 14 14a14.172 14.172 0 0 0 14-14A14.172 14.172 0 0 0 16 2Zm8 15h-7v7h-2v-7H8v-2h7V8h2v7h7Z"
+				/><path fill="none" d="M24 17h-7v7h-2v-7H8v-2h7V8h2v7h7v2z" /></svg
+			>Add message
+		</div>
+	</button>
+{:else}
+	<PlaygroundCode {...currentConversation} {...currentConversation.config} />
+{/if}
+</div>

src/routes/+page.svelte

@@ -6,10 +6,10 @@
 		handleStreamingResponse,
 		handleNonStreamingResponse
 	} from '$lib/components/playgroundUtils';
-	import PlaygroundMessage from '$lib/components/Message.svelte';
 	import PlaygroundOptions from '$lib/components/GenerationConfig.svelte';
 	import PlaygroundTokenModal from '$lib/components/HFTokenModal.svelte';
 	import PlaygroundModelSelector from '$lib/components/ModelSelector.svelte';
+	import Conversation from '$lib/components/Conversation.svelte';
 	import { onDestroy, onMount } from 'svelte';
 	import { type ModelEntry } from "@huggingface/hub";
 	import { type ChatCompletionInputMessage } from "@huggingface/tasks";
@@ -43,7 +43,6 @@
 	let streamingMessage: ChatCompletionInputMessage | null = null;
 	let tokens = 0;
 	let latency = 0;
-	let messageContainer: HTMLDivElement | null = null;
 	let abortController: AbortController | null = null;
 	let waitForNonStreaming = true;
 
@@ -142,7 +141,6 @@
 							streamingMessage.content = content;
 							currentConversation.messages = [...currentConversation.messages];
 							conversations = conversations;
-							scrollToBottom();
 						}
 					},
 					abortController
@@ -162,7 +160,6 @@
 				if(waitForNonStreaming){
 					currentConversation.messages = [...currentConversation.messages, newMessage];
 					conversations = conversations;
-					scrollToBottom();
 				}
 			}
 
@@ -177,7 +174,6 @@
 			loading = false;
 			streamingMessage = null;
 			abortController = null;
-			scrollToBottom();
 		}
 	}
 
@@ -186,12 +182,6 @@
 			submit();
 		}
 	}
-
-	function scrollToBottom() {
-		if (messageContainer) {
-			messageContainer.scrollTop = messageContainer.scrollHeight;
-		}
-	}
 </script>
 
 <svelte:window on:keydown={onKeydown} />
@@ -239,74 +229,19 @@
 					: '*:w-full'} dark:divide-gray-800"
 		>
 			{#each conversations as conversation, index}
-				<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 && !streamingMessage}
-					bind:this={messageContainer}
-				>
-					{#if conversations.length > 1}
-						<div
-							class="sticky top-0 flex h-11 flex-none items-center gap-2 whitespace-nowrap rounded-lg border border-gray-200/80 bg-white pl-3 pr-2 text-sm leading-none shadow-sm *:flex-none dark:border-gray-800 dark:bg-gray-800/70 dark:hover:bg-gray-800"
-							class:mr-3={index === 0}
-							class:mx-3={index === 1}
-						>
-							<div class="size-3.5 rounded bg-black dark:bg-gray-400"></div>
-							<div>{conversation.model}</div>
-							<button
-								class="ml-auto flex size-6 items-center justify-center rounded bg-gray-50 text-xs hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700"
-								on:click={() => (conversations = conversations.filter((_, i) => i !== index))}
-							>
-								✕
-							</button>
-							<button
-								class=" flex size-6 items-center justify-center rounded bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700"
-							>
-								<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"
-									><path
-										fill="currentColor"
-										d="M27 16.76v-1.53l1.92-1.68A2 2 0 0 0 29.3 11l-2.36-4a2 2 0 0 0-1.73-1a2 2 0 0 0-.64.1l-2.43.82a11.35 11.35 0 0 0-1.31-.75l-.51-2.52a2 2 0 0 0-2-1.61h-4.68a2 2 0 0 0-2 1.61l-.51 2.52a11.48 11.48 0 0 0-1.32.75l-2.38-.86A2 2 0 0 0 6.79 6a2 2 0 0 0-1.73 1L2.7 11a2 2 0 0 0 .41 2.51L5 15.24v1.53l-1.89 1.68A2 2 0 0 0 2.7 21l2.36 4a2 2 0 0 0 1.73 1a2 2 0 0 0 .64-.1l2.43-.82a11.35 11.35 0 0 0 1.31.75l.51 2.52a2 2 0 0 0 2 1.61h4.72a2 2 0 0 0 2-1.61l.51-2.52a11.48 11.48 0 0 0 1.32-.75l2.42.82a2 2 0 0 0 .64.1a2 2 0 0 0 1.73-1l2.28-4a2 2 0 0 0-.41-2.51ZM25.21 24l-3.43-1.16a8.86 8.86 0 0 1-2.71 1.57L18.36 28h-4.72l-.71-3.55a9.36 9.36 0 0 1-2.7-1.57L6.79 24l-2.36-4l2.72-2.4a8.9 8.9 0 0 1 0-3.13L4.43 12l2.36-4l3.43 1.16a8.86 8.86 0 0 1 2.71-1.57L13.64 4h4.72l.71 3.55a9.36 9.36 0 0 1 2.7 1.57L25.21 8l2.36 4l-2.72 2.4a8.9 8.9 0 0 1 0 3.13L27.57 20Z"
-									/><path
-										fill="currentColor"
-										d="M16 22a6 6 0 1 1 6-6a5.94 5.94 0 0 1-6 6Zm0-10a3.91 3.91 0 0 0-4 4a3.91 3.91 0 0 0 4 4a3.91 3.91 0 0 0 4-4a3.91 3.91 0 0 0-4-4Z"
-									/></svg
-								>
-							</button>
-						</div>
-					{/if}
-					{#if !viewCode}
-						{#each messages as message, i}
-							<PlaygroundMessage
-								class="border-b"
-								{message}
-								on:delete={() => deleteMessage(i)}
-								autofocus={conversations.length === 1 && !loading && i === messages.length - 1}
-							/>
-						{/each}
+				<Conversation
+					{loading}
+					{streamingMessage}
+					{conversations}
+					{conversation}
+					{index}
+					{currentConversation}
+					{viewCode}
+					{messages}
+					on:addMessage={addMessage}
+					on:deleteMessage={(e) => deleteMessage(e.detail)}
+				/>
 
-						<button
-							class="flex px-6 py-6 hover:bg-gray-50 dark:hover:bg-gray-800/50"
-							on:click={addMessage}
-							disabled={loading}
-						>
-							<div class="flex items-center gap-2 !p-0 text-sm font-semibold">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									width="1em"
-									height="1em"
-									viewBox="0 0 32 32"
-									class="text-lg"
-									><path
-										fill="currentColor"
-										d="M16 2A14.172 14.172 0 0 0 2 16a14.172 14.172 0 0 0 14 14a14.172 14.172 0 0 0 14-14A14.172 14.172 0 0 0 16 2Zm8 15h-7v7h-2v-7H8v-2h7V8h2v7h7Z"
-									/><path fill="none" d="M24 17h-7v7h-2v-7H8v-2h7V8h2v7h7v2z" /></svg
-								>Add message
-							</div>
-						</button>
-					{:else}
-						<PlaygroundCode {...currentConversation} {...currentConversation.config} />
-					{/if}
-				</div>
 			{/each}
 		</div>
 		<div