conversation to runes

eslint.config.mjs

@@ -67,7 +67,7 @@ export default [
 		rules: {
 			"require-yield": "off",
 			"@typescript-eslint/no-explicit-any": "error",
-			"@typescript-eslint/no-non-null-assertion": "error",
+			// "@typescript-eslint/no-non-null-assertion": "error",
 
 			"@typescript-eslint/no-unused-vars": [
 				"error",

src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte

@@ -1,36 +1,25 @@
 <script lang="ts">
-	import type { Conversation } from "$lib/types.js";
+	import { run } from "svelte/legacy";
 
-	import { tick } from "svelte";
+	import type { Conversation } from "$lib/types.js";
 
 	import IconPlus from "~icons/carbon/add";
 	import CodeSnippets from "./InferencePlaygroundCodeSnippets.svelte";
-	import Message from "./InferencePlaygroundMessage.svelte";
 
-	export let conversation: Conversation;
-	export let loading: boolean;
-	export let viewCode: boolean;
-	export let compareActive: boolean;
+	interface Props {
+		conversation: Conversation;
+		loading: boolean;
+		viewCode: boolean;
+		compareActive: boolean;
+	}
 
-	let shouldScrollToBottom = true;
-	let isProgrammaticScroll = true;
-	let conversationLength = conversation.messages.length;
+	let { conversation = $bindable(), loading, viewCode, compareActive }: Props = $props();
 
-	let messageContainer: HTMLDivElement | null = null;
+	let shouldScrollToBottom = $state(true);
+	let isProgrammaticScroll = $state(true);
+	let conversationLength = $state(conversation.messages.length);
 
-	async function resizeMessageTextAreas() {
-		// ideally we would use CSS "field-sizing:content". However, it is currently only supported on Chrome.
-		await tick();
-		if (messageContainer) {
-			const containerScrollTop = messageContainer.scrollTop;
-			const textareaEls = messageContainer.querySelectorAll("textarea");
-			for (const textarea of textareaEls) {
-				textarea.style.height = "0px";
-				textarea.style.height = textarea.scrollHeight + "px";
-			}
-			messageContainer.scrollTop = containerScrollTop;
-		}
-	}
+	let messageContainer: HTMLDivElement | null = $state(null);
 
 	function scrollToBottom() {
 		if (messageContainer) {
@@ -39,22 +28,21 @@
 		}
 	}
 
-	$: {
+	run(() => {
 		if (conversation.messages.at(-1)) {
-			resizeMessageTextAreas();
 			if (shouldScrollToBottom) {
 				scrollToBottom();
 			}
 		}
-	}
-
-	$: if (conversation.messages.length !== conversationLength) {
-		// enable automatic scrolling when new message was added
-		conversationLength = conversation.messages.length;
-		shouldScrollToBottom = true;
-	}
+	});
 
-	$: viewCode, resizeMessageTextAreas();
+	run(() => {
+		if (conversation.messages.length !== conversationLength) {
+			// enable automatic scrolling when new message was added
+			conversationLength = conversation.messages.length;
+			shouldScrollToBottom = true;
+		}
+	});
 
 	function addMessage() {
 		const msgs = conversation.messages.slice();
@@ -74,15 +62,13 @@
 	}
 </script>
 
-<svelte:window on:resize={resizeMessageTextAreas} />
-
 <div
 	class="@container flex flex-col overflow-x-hidden overflow-y-auto {compareActive
 		? 'max-h-[calc(100dvh-5.8rem-2.5rem-75px)] md:max-h-[calc(100dvh-5.8rem-2.5rem)]'
 		: 'max-h-[calc(100dvh-5.8rem-2.5rem-75px)] md:max-h-[calc(100dvh-5.8rem)]'}"
 	class:animate-pulse={loading && !conversation.streaming}
 	bind:this={messageContainer}
-	on:scroll={() => {
+	onscroll={() => {
 		// disable automatic scrolling is user initiates scroll
 		if (!isProgrammaticScroll) {
 			shouldScrollToBottom = false;
@@ -91,20 +77,37 @@
 	}}
 >
 	{#if !viewCode}
-		{#each conversation.messages as message, messageIdx}
-			<Message
-				class="border-b"
-				bind:message
-				{loading}
-				on:input={resizeMessageTextAreas}
-				on:delete={() => deleteMessage(messageIdx)}
-				autofocus={!loading && messageIdx === conversation.messages.length - 1}
-			/>
+		{#each conversation.messages as msg, idx}
+			<div
+				class=" group/message group grid grid-cols-[1fr_2.5rem] items-start gap-2 border-b px-3.5 pt-4 pb-6 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"
+				class:pointer-events-none={loading}
+			>
+				<div class="col-span-2 pt-3 pb-1 text-sm font-semibold uppercase @2xl:col-span-1 @2xl:pb-2">
+					{msg.role}
+				</div>
+				<!-- svelte-ignore a11y_autofocus -->
+				<!-- svelte-ignore a11y_positive_tabindex -->
+				<textarea
+					autofocus={idx === conversation.messages.length - 1}
+					bind:value={conversation.messages[idx]!.content}
+					placeholder="Enter {msg.role} message"
+					class="resize-none overflow-hidden rounded-sm bg-transparent px-2 py-2.5 ring-gray-100 outline-none group-hover/message:ring-3 hover:resize-y hover:bg-white focus:resize-y focus:bg-white focus:ring-3 @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
+					rows="1"
+					tabindex="2"
+				></textarea>
+				<button
+					tabindex="0"
+					onclick={() => deleteMessage(idx)}
+					type="button"
+					class="mt-1.5 size-8 rounded-lg border border-gray-200 bg-white text-xs font-medium text-gray-900 group-hover/message:block hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 focus:outline-hidden sm:hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+					>✕</button
+				>
+			</div>
 		{/each}
 
 		<button
 			class="flex px-3.5 py-6 hover:bg-gray-50 md:px-6 dark:hover:bg-gray-800/50"
-			on:click={addMessage}
+			onclick={addMessage}
 			disabled={loading}
 		>
 			<div class="flex items-center gap-2 p-0! text-sm font-semibold">

src/lib/components/InferencePlayground/InferencePlaygroundMessage.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from "svelte";
-	import type { ConversationMessage } from "$lib/types.js";
-
-	export let message: ConversationMessage;
-	export let loading: boolean = false;
-	export let autofocus: boolean = false;
-
-	const dispatch = createEventDispatcher<{ delete: void; input: void }>();
-</script>
-
-<div
-	class="group/message group grid grid-cols-[1fr_2.5rem] items-start gap-2 px-3.5 pt-4 pb-6 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 pt-3 pb-1 text-sm font-semibold uppercase @2xl:col-span-1 @2xl:pb-2">
-		{message.role}
-	</div>
-	<!-- svelte-ignore a11y-autofocus -->
-	<!-- svelte-ignore a11y-positive-tabindex -->
-	<textarea
-		{autofocus}
-		bind:value={message.content}
-		placeholder="Enter {message.role} message"
-		class="resize-none overflow-hidden rounded-sm bg-transparent px-2 py-2.5 ring-gray-100 outline-none group-hover/message:ring-3 hover:resize-y hover:bg-white focus:resize-y focus:bg-white focus:ring-3 @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
-		rows="1"
-		tabindex="2"
-		on:input={() => {
-			dispatch("input");
-		}}
-	></textarea>
-	<button
-		tabindex="0"
-		on:click={() => {
-			dispatch("delete");
-		}}
-		type="button"
-		class="mt-1.5 size-8 rounded-lg border border-gray-200 bg-white text-xs font-medium text-gray-900 group-hover/message:block hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 focus:outline-hidden sm:hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
-		>✕</button
-	>
-</div>