text area autosize

package.json

@@ -44,7 +44,7 @@
 		"prettier-plugin-svelte": "^3.2.6",
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"runed": "^0.24.0",
-		"svelte": "^5.0.0",
+		"svelte": "^5.20.4",
 		"svelte-check": "^4.0.0",
 		"tailwind-merge": "^3.0.2",
 		"tailwindcss": "^4.0.9",

pnpm-lock.yaml

@@ -103,7 +103,7 @@ importers:
         specifier: ^0.24.0
         version: 0.24.0([email protected])
       svelte:
-        specifier: ^5.0.0
+        specifier: ^5.20.4
         version: 5.23.0
       svelte-check:
         specifier: ^4.0.0

src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte

@@ -5,6 +5,7 @@
 
 	import IconPlus from "~icons/carbon/add";
 	import CodeSnippets from "./InferencePlaygroundCodeSnippets.svelte";
+	import Message from "./message.svelte";
 
 	interface Props {
 		conversation: Conversation;
@@ -77,32 +78,14 @@
 	}}
 >
 	{#if !viewCode}
-		{#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 conversation.messages as _msg, idx}
+			<Message
+				bind:content={conversation.messages[idx]!.content}
+				role={conversation.messages[idx]!.role}
+				autofocus={idx === conversation.messages.length - 1}
+				{loading}
+				onDelete={() => deleteMessage(idx)}
+			/>
 		{/each}
 
 		<button

src/lib/components/InferencePlayground/InferencePlaygroundConversationHeader.svelte

@@ -8,7 +8,7 @@
 	import IconCog from "~icons/carbon/settings";
 	import GenerationConfig from "./InferencePlaygroundGenerationConfig.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
-	import InferencePlaygroundProviderSelect from "./InferencePlaygroundProviderSelect.svelte";
+	import ProviderSelect from "./provider-select.svelte";
 
 	export let conversation: Conversation;
 	export let conversationIdx: number;
@@ -68,7 +68,7 @@
 		? 'mr-4 max-sm:ml-4'
 		: 'mx-4'}  mt-2 h-11 text-sm leading-none whitespace-nowrap max-sm:mt-4"
 >
-	<InferencePlaygroundProviderSelect
+	<ProviderSelect
 		bind:conversation
 		class="rounded-lg border border-gray-200/80 bg-white dark:border-white/5 dark:bg-gray-800/70 dark:hover:bg-gray-800"
 	/>

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -5,7 +5,7 @@
 	import IconCaret from "~icons/carbon/chevron-down";
 	import Avatar from "../Avatar.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
-	import ProviderSelect from "./InferencePlaygroundProviderSelect.svelte";
+	import ProviderSelect from "./provider-select.svelte";
 	import { defaultSystemMessage } from "./inferencePlaygroundUtils.js";
 
 	export let conversation: Conversation;

src/lib/components/InferencePlayground/message.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { TextareaAutosize } from "$lib/spells/textarea-autosize.svelte.js";
+	import type { ConversationMessage } from "$lib/types.js";
+
+	type Props = {
+		content: ConversationMessage["content"];
+		role: ConversationMessage["role"];
+		loading?: boolean;
+		autofocus?: boolean;
+		onDelete?: () => void;
+	};
+
+	let { content = $bindable(""), role, loading, autofocus, onDelete }: Props = $props();
+
+	let element = $state<HTMLTextAreaElement>();
+	new TextareaAutosize({
+		styleProp: "minHeight",
+		element: () => element,
+		input: () => content,
+	});
+</script>
+
+<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">
+		{role}
+	</div>
+	<!-- svelte-ignore a11y_autofocus -->
+	<!-- svelte-ignore a11y_positive_tabindex -->
+	<textarea
+		bind:this={element}
+		{autofocus}
+		bind:value={content}
+		placeholder="Enter {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={onDelete}
+		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>

src/lib/spells/README.md

@@ -0,0 +1,3 @@
+# Spells
+
+Spells are special functions that use Runes under the hood, akin to Vue's composables or React hooks. They are only meant to be used inside other Spells, or within Svelte components.

src/lib/spells/extract.svelte.ts

@@ -0,0 +1,21 @@
+import { isFunction } from "$lib/utils/is.js";
+import type { MaybeGetter } from "$lib/types.js";
+
+/**
+ * Extracts the value from a getter or a value.
+ * Optionally, a default value can be provided.
+ */
+export function extract<T, D extends T>(
+	value: MaybeGetter<T>,
+	defaultValue?: D
+): D extends undefined | null ? T : Exclude<T, undefined | null> | D {
+	if (isFunction(value)) {
+		const getter = value;
+		const gotten = getter();
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		return (gotten ?? defaultValue ?? gotten) as any;
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	return (value ?? defaultValue ?? value) as any;
+}

src/lib/spells/textarea-autosize.svelte.ts

@@ -0,0 +1,67 @@
+import type { Getter } from "melt";
+import { extract } from "./extract.svelte.js";
+import { useResizeObserver, watch } from "runed";
+import { tick } from "svelte";
+
+export interface TextareaAutosizeOptions {
+	/** Textarea element to autosize. */
+	element: Getter<HTMLElement | undefined>;
+	/** Textarea content. */
+	input: Getter<string>;
+	/** Function called when the textarea size changes. */
+	onResize?: () => void;
+	/**
+	 * Specify the style property that will be used to manipulate height. Can be `height | minHeight`.
+	 * @default `height`
+	 **/
+	styleProp?: "height" | "minHeight";
+}
+
+export class TextareaAutosize {
+	#options: TextareaAutosizeOptions;
+	element = $derived.by(() => extract(this.#options.element));
+	input = $derived.by(() => extract(this.#options.input));
+	styleProp = $derived.by(() => extract(this.#options.styleProp, "height"));
+
+	textareaScrollHeight = $state(1);
+	textareaOldWidth = $state(0);
+
+	constructor(options: TextareaAutosizeOptions) {
+		this.#options = options;
+
+		watch([() => this.input, () => this.element], () => {
+			tick().then(() => this.triggerResize());
+		});
+
+		watch(
+			() => this.textareaScrollHeight,
+			() => options?.onResize?.()
+		);
+
+		useResizeObserver(
+			() => this.element,
+			([entry]) => {
+				if (!entry) return;
+				const { contentRect } = entry;
+				if (this.textareaOldWidth === contentRect.width) return;
+
+				requestAnimationFrame(() => {
+					this.textareaOldWidth = contentRect.width;
+					this.triggerResize();
+				});
+			}
+		);
+	}
+
+	triggerResize() {
+		if (!this.element) return;
+
+		let height = "";
+
+		this.element.style[this.styleProp] = "1px";
+		this.textareaScrollHeight = this.element?.scrollHeight;
+		height = `${this.textareaScrollHeight}px`;
+
+		this.element.style[this.styleProp] = height;
+	}
+}

src/lib/types.ts

@@ -168,3 +168,5 @@ export enum LibraryName {
 export enum PipelineTag {
 	TextGeneration = "text-generation",
 }
+
+export type MaybeGetter<T> = T | (() => T);

src/lib/utils/is.ts

@@ -0,0 +1,37 @@
+import { SvelteSet } from "svelte/reactivity";
+
+export function isHtmlElement(element: unknown): element is HTMLElement {
+	return element instanceof HTMLElement;
+}
+
+export function isFunction(value: unknown): value is (...args: unknown[]) => unknown {
+	return typeof value === "function";
+}
+
+export function isSvelteSet(value: unknown): value is SvelteSet<unknown> {
+	return value instanceof SvelteSet;
+}
+
+export function isIterable(value: unknown): value is Iterable<unknown> {
+	return value !== null && typeof value === "object" && Symbol.iterator in value;
+}
+
+export function isObject(value: unknown): value is Record<PropertyKey, unknown> {
+	return value !== null && typeof value === "object";
+}
+
+export function isHtmlInputElement(element: unknown): element is HTMLInputElement {
+	return element instanceof HTMLInputElement;
+}
+
+export function isString(value: unknown): value is string {
+	return typeof value === "string";
+}
+
+export function isTouch(event: PointerEvent): boolean {
+	return event.pointerType === "touch";
+}
+
+export function isPromise(value: unknown): value is Promise<unknown> {
+	return value instanceof Promise;
+}

tsconfig.json

@@ -9,7 +9,6 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
-		"target": "ES2018",
 		"noUncheckedIndexedAccess": true,
 		"plugins": [
 			{