Feature: chat with two models simultaneously (#11)

src/lib/components/CodeSnippets.svelte

@@ -7,8 +7,6 @@
 	export let maxTokens: number;
 	export let messages: ChatCompletionInputMessage[];
 
-	$: console.log(messages);
-
 	const npmSnippet = `import { HfInference } from '@huggingface/inference'
 
 const hf = new HfInference('your access token')`;

src/lib/components/Conversation.svelte

@@ -1,18 +1,15 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
-	import PlaygroundCode from '$lib/components/CodeSnippets.svelte';
-	import PlaygroundMessage from '$lib/components/Message.svelte';
+	import CodeSnippets from '$lib/components/CodeSnippets.svelte';
+	import Message 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;
+	export let sideBySide = false;
 
-	const dispatch = createEventDispatcher<{ addMessage: void; deleteMessage: number }>();
+	const dispatch = createEventDispatcher<{ addMessage: void; deleteMessage: number, deleteConversation: number }>();
 
 	let messageContainer: HTMLDivElement | null = null;
 
@@ -23,7 +20,7 @@
 	}
 
 	$: {
-		if (currentConversation.messages.at(-1)) {
+		if (conversation.messages.at(-1)) {
 			scrollToBottom();
 		}
 	}
@@ -32,10 +29,10 @@
 <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}
+	class:animate-pulse={loading && !conversation.config.streaming}
 	bind:this={messageContainer}
 >
-	{#if conversations.length > 1}
+	{#if sideBySide}
 		<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}
@@ -45,7 +42,7 @@
 			<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))}
+				on:click={() => dispatch('deleteConversation', index)}
 			>
 				✕
 			</button>
@@ -65,12 +62,15 @@
 		</div>
 	{/if}
 	{#if !viewCode}
-		{#each messages as message, i}
-			<PlaygroundMessage
+		{#each conversation.messages as message, messageIdx}
+			<Message
 				class="border-b"
 				{message}
-				on:delete={() => dispatch('deleteMessage', i)}
-				autofocus={conversations.length === 1 && !loading && i === messages.length - 1}
+				conversationIdx={index}
+				{messageIdx}
+				on:messageValueChanged
+				on:delete={() => dispatch('deleteMessage', messageIdx)}
+				autofocus={!sideBySide && !loading && messageIdx === conversation.messages.length - 1}
 			/>
 		{/each}
 
@@ -94,6 +94,6 @@
 			</div>
 		</button>
 	{:else}
-		<PlaygroundCode {...currentConversation} {...currentConversation.config} />
+		<CodeSnippets {...conversation} {...conversation.config} />
 	{/if}
 </div>

src/lib/components/GenerationConfig.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-	export let temperature = 0.5;
-	export let maxTokens = 2048;
-	export let streaming = true;
-	export let jsonMode = true;
+	// export let temperature = 0.5;
+	// export let maxTokens = 2048;
+	// export let streaming = true;
+	// export let jsonMode = true;
+
+	export let config;
 </script>
 
 <div>
@@ -14,7 +16,7 @@
 		<input
 			type="number"
 			class="w-16 rounded border bg-transparent px-1 py-0.5 text-right text-sm dark:border-gray-700"
-			bind:value={temperature}
+			bind:value={config.temperature}
 			min="0"
 			max="1"
 			step="0.1"
@@ -23,7 +25,7 @@
 	<input
 		id="temperature-range"
 		type="range"
-		bind:value={temperature}
+		bind:value={config.temperature}
 		min="0"
 		max="1"
 		step="0.1"
@@ -39,7 +41,7 @@
 		<input
 			type="number"
 			class="w-20 rounded border bg-transparent px-1 py-0.5 text-right text-sm dark:border-gray-700"
-			bind:value={maxTokens}
+			bind:value={config.maxTokens}
 			min="0"
 			max="4096"
 			step="512"
@@ -48,7 +50,7 @@
 	<input
 		id="max-tokens-range"
 		type="range"
-		bind:value={maxTokens}
+		bind:value={config.maxTokens}
 		min="0"
 		max="4096"
 		step="512"
@@ -57,7 +59,7 @@
 </div>
 <div class="mt-2">
 	<label class="flex cursor-pointer items-center justify-between">
-		<input type="checkbox" bind:checked={streaming} class="peer sr-only" />
+		<input type="checkbox" bind:checked={config.streaming} class="peer sr-only" />
 		<span class="text-sm font-medium text-gray-900 dark:text-gray-300">Streaming</span>
 		<div
 			class="peer relative h-5 w-9 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-black peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:peer-checked:bg-blue-600"
@@ -66,7 +68,7 @@
 </div>
 <div class="mt-2">
 	<label class="flex cursor-pointer items-center justify-between">
-		<input type="checkbox" value="" class="peer sr-only" disabled bind:checked={jsonMode} />
+		<input type="checkbox" value="" class="peer sr-only" disabled bind:checked={config.jsonMode} />
 		<span class="text-sm font-medium text-gray-900 dark:text-gray-300">JSON Mode</span>
 		<div
 			class="peer relative h-5 w-9 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-black peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:peer-checked:bg-blue-600"

src/lib/components/Message.svelte

@@ -3,9 +3,11 @@
 	import { type ChatCompletionInputMessage } from '@huggingface/tasks';
 
 	export let message: ChatCompletionInputMessage;
+	export let conversationIdx: number;
+	export let messageIdx: number;
 	export let autofocus: boolean = false;
 
-	const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher<{ delete: void; messageValueChanged: {conversationIdx: number, messageIdx: number, value: string} }>();
 </script>
 
 <div
@@ -16,7 +18,8 @@
 	</div>
 	<textarea
 		{autofocus}
-		bind:value={message.content}
+		value={message.content}
+		on:input={(e) => dispatch("messageValueChanged", {conversationIdx, messageIdx, value: e.target.value})}
 		placeholder="Enter {message.role} message"
 		class="resize-none rounded bg-transparent px-2 py-2.5 ring-gray-100 [field-sizing:content] hover:resize-y hover:bg-white focus:resize-y focus:bg-white focus:ring group-hover/message:ring @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
 		rows="1"

src/routes/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import PlaygroundCode from '$lib/components/CodeSnippets.svelte';
 	import {
 		createHfInference,
 		prepareRequestMessages,
@@ -10,7 +9,7 @@
 	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 { onMount } from 'svelte';
 	import { type ModelEntry } from '@huggingface/hub';
 	import { type ChatCompletionInputMessage } from '@huggingface/tasks';
 
@@ -31,18 +30,14 @@
 		viewCode = false;
 	}
 
-	let currentConversation = conversations[0];
 	let systemMessage: ChatCompletionInputMessage = { role: 'system', content: '' };
-	$: messages = currentConversation.messages;
-
 	let hfToken: string | null = import.meta.env.VITE_HF_TOKEN;
 	let viewCode = false;
 	let showTokenModal = false;
 	let loading = false;
-	let streamingMessage: ChatCompletionInputMessage | null = null;
 	let tokens = 0;
 	let latency = 0;
-	let abortController: AbortController | null = null;
+	let abortControllers: AbortController[] = []
 	let waitForNonStreaming = true;
 
 	onMount(() => {
@@ -54,22 +49,38 @@
 			compatibleModels = (await res.json()) as ModelEntry[];
 			compatibleModels.sort((a, b) => a.id.toLowerCase().localeCompare(b.id.toLowerCase()));
 		})();
-	});
 
-	onDestroy(() => {
-		if (abortController) {
-			abortController.abort();
+		return () => {
+			for(const abortController of abortControllers){
+				abortController.abort();
+			}
 		}
 	});
 
 	function addMessage() {
-		currentConversation.messages = [
-			...currentConversation.messages,
-			{
-				role: currentConversation.messages.at(-1)?.role === 'user' ? 'assistant' : 'user',
-				content: ''
-			}
-		];
+		conversations = conversations.map(conversation => {
+			conversation.messages = [
+				...conversation.messages,
+				{
+					role: conversation.messages.at(-1)?.role === 'user' ? 'assistant' : 'user',
+					content: ''
+				}
+			];
+			return conversation;
+		});
+	}
+
+	function updateMessage(value: string, conversationIdx: number, messageIdx: number) {
+		const lastMsgIdx = conversations[0].messages.length - 1;
+		const msg = conversations[conversationIdx].messages[messageIdx];
+		msg.content = value;
+		const { role } = msg;
+		if(messageIdx === lastMsgIdx && role === "user"){
+			conversations = conversations.map(conversation => {
+				conversation.messages[messageIdx].content = value;
+				return conversation;
+			});
+		}
 		conversations = conversations;
 	}
 
@@ -81,103 +92,117 @@
 	}
 
 	function deleteMessage(idx: number) {
-		const deletedMsg = deleteAndGetItem<ChatCompletionInputMessage>(
-			currentConversation.messages,
-			idx
-		);
-		// delete messages in user/assistant pairs. otherwise, the chat template will be broken
-		if (deletedMsg) {
-			const { role } = deletedMsg;
-			const pairIdx = role === 'user' ? idx : idx - 1;
-			deleteAndGetItem<ChatCompletionInputMessage>(currentConversation.messages, pairIdx);
-		}
+		conversations = conversations.map(conversation => {
+			const deletedMsg = deleteAndGetItem<ChatCompletionInputMessage>(
+				conversation.messages,
+				idx
+			);
+			// delete messages in user/assistant pairs. otherwise, the chat template will be broken
+			if (deletedMsg) {
+				const { role } = deletedMsg;
+				const pairIdx = role === 'user' ? idx : idx - 1;
+				deleteAndGetItem<ChatCompletionInputMessage>(conversation.messages, pairIdx);
+			}
+			return conversation;
+		});
+	}
+
+	function deleteConversation(idx: number) {
+		deleteAndGetItem(conversations, idx);
 		conversations = conversations;
 	}
 
 	function reset() {
-		currentConversation.messages = [...startMessages];
 		systemMessage.content = '';
-		conversations = conversations;
+		conversations = conversations.map(conversation => {
+			conversation.messages = [...startMessages];
+			return conversation;
+		});
 	}
 
 	function abort() {
-		if (streamingMessage && abortController) {
-			abortController.abort();
-			abortController = null;
+		if (abortControllers.length) {
+			for(const abortController of abortControllers){
+				abortController.abort();
+			}
+			abortControllers = [];
 		}
 		loading = false;
-		streamingMessage = null;
 		waitForNonStreaming = false;
 	}
 
-	async function submit() {
-		// last message has to be from user
-		if (currentConversation.messages?.at(-1)?.role !== 'user') {
-			addMessage();
-			return;
+	async function runInference(conversation: Conversation){
+		const startTime = performance.now();
+		const hf = createHfInference(hfToken);
+		const requestMessages = prepareRequestMessages(systemMessage, conversation.messages);
+
+		if (conversation.config.streaming) {
+			const streamingMessage = { role: 'assistant', content: '' };
+			conversation.messages = [...conversation.messages, streamingMessage];
+			const abortController = new AbortController();
+			abortControllers.push(abortController)
+
+			await handleStreamingResponse(
+				hf,
+				conversation.model,
+				requestMessages,
+				conversation.config.temperature,
+				conversation.config.maxTokens,
+				conversation.config.jsonMode,
+				(content) => {
+					if (streamingMessage) {
+						streamingMessage.content = content;
+						conversation.messages = [...conversation.messages];
+						conversations = conversations;
+					}
+				},
+				abortController
+			);
+		} else {
+			waitForNonStreaming = true;
+			const newMessage = await handleNonStreamingResponse(
+				hf,
+				conversation.model,
+				requestMessages,
+				conversation.config.temperature,
+				conversation.config.maxTokens,
+				conversation.config.jsonMode
+			);
+			// check if the user did not abort the request
+			if (waitForNonStreaming) {
+				conversation.messages = [...conversation.messages, newMessage];
+				conversations = conversations;
+			}
 		}
+
+		const endTime = performance.now();
+		latency = Math.round(endTime - startTime);
+	}
+
+	async function submit() {
+		// // last message has to be from user
+		// if (currentConversation.messages?.at(-1)?.role !== 'user') {
+		// 	addMessage();
+		// 	return;
+		// }
 		if (!hfToken) {
 			showTokenModal = true;
 			return;
 		}
 		(document.activeElement as HTMLElement).blur();
 		loading = true;
-		const startTime = performance.now();
-
-		try {
-			const hf = createHfInference(hfToken);
-			const requestMessages = prepareRequestMessages(systemMessage, messages);
-
-			if (currentConversation.config.streaming) {
-				streamingMessage = { role: 'assistant', content: '' };
-				currentConversation.messages = [...currentConversation.messages, streamingMessage];
-				abortController = new AbortController();
-
-				await handleStreamingResponse(
-					hf,
-					currentConversation.model,
-					requestMessages,
-					currentConversation.config.temperature,
-					currentConversation.config.maxTokens,
-					currentConversation.config.jsonMode,
-					(content) => {
-						if (streamingMessage) {
-							streamingMessage.content = content;
-							currentConversation.messages = [...currentConversation.messages];
-							conversations = conversations;
-						}
-					},
-					abortController
-				);
-			} else {
-				streamingMessage = null;
-				waitForNonStreaming = true;
-				const newMessage = await handleNonStreamingResponse(
-					hf,
-					currentConversation.model,
-					requestMessages,
-					currentConversation.config.temperature,
-					currentConversation.config.maxTokens,
-					currentConversation.config.jsonMode
-				);
-				// check if the user did not abort the request
-				if (waitForNonStreaming) {
-					currentConversation.messages = [...currentConversation.messages, newMessage];
-					conversations = conversations;
-				}
-			}
 
+		try{
+			const promises = conversations.map(conversation => runInference(conversation));
+			await Promise.all(promises);
 			addMessage();
-		} catch (error) {
+		}catch (error){
 			if (error.name !== 'AbortError') {
 				alert('error: ' + (error as Error).message);
 			}
 		} finally {
-			const endTime = performance.now();
-			latency = Math.round(endTime - startTime);
 			loading = false;
-			streamingMessage = null;
-			abortController = null;
+			abortControllers = [];
 		}
 	}
 
@@ -235,15 +260,17 @@
 			{#each conversations as conversation, index}
 				<Conversation
 					{loading}
-					{streamingMessage}
-					{conversations}
 					{conversation}
 					{index}
-					{currentConversation}
 					{viewCode}
-					{messages}
+					sideBySide={conversations.length > 1}
 					on:addMessage={addMessage}
+					on:messageValueChanged={(e) => {
+						const {conversationIdx, messageIdx, value} = e.detail;
+						updateMessage(value, conversationIdx, messageIdx);
+					}}
 					on:deleteMessage={(e) => deleteMessage(e.detail)}
+					on:deleteConversation={(e) => deleteConversation(e.detail)}
 				/>
 			{/each}
 		</div>
@@ -348,7 +375,7 @@
 			<div
 				class="flex flex-1 flex-col gap-6 overflow-y-hidden rounded-xl border border-gray-200/80 bg-gradient-to-b from-white via-white p-3 shadow-sm dark:border-white/5 dark:from-gray-800/40 dark:via-gray-800/40"
 			>
-				<PlaygroundModelSelector {compatibleModels} bind:currentModel={currentConversation.model} />
+				<PlaygroundModelSelector {compatibleModels} bind:currentModel={conversations[0].model} />
 				<div
 					class="group relative -mt-4 flex h-[26px] w-full items-center justify-center gap-2 rounded-lg bg-black px-5 text-sm text-white hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:border-gray-700 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-gray-700"
 				>
@@ -377,7 +404,7 @@
 									id: String(Math.random()),
 									model: e.target.value,
 									config: { temperature: 0.5, maxTokens: 2048, streaming: true, jsonMode: false },
-									messages: startMessages
+									messages: conversations[0].messages
 								}
 							];
 						}}
@@ -388,12 +415,7 @@
 					</select>
 				</div>
 
-				<PlaygroundOptions
-					bind:temperature={currentConversation.config.temperature}
-					bind:maxTokens={currentConversation.config.maxTokens}
-					bind:jsonMode={currentConversation.config.jsonMode}
-					bind:streaming={currentConversation.config.streaming}
-				/>
+				<PlaygroundOptions bind:config={conversations[0].config} />
 				<div class="mt-auto">
 					<div class="mb-3 flex items-center justify-between gap-2">
 						<label