fix auto resize

src/lib/components/inference-playground/message.svelte

@@ -28,11 +28,7 @@
 	const { index, conversation, message, autofocus, onDelete, onRegen }: Props = $props();
 	const isLast = $derived(index === conversation.data.messages.length - 1);
 
-	let element = $state<HTMLTextAreaElement>();
-	const autosized = new TextareaAutosize({
-		element: () => element,
-		input: () => message?.content ?? "",
-	});
+	const autosized = new TextareaAutosize();
 	const shouldStick = $derived(autosized.textareaHeight > 92);
 
 	const canUploadImgs = $derived(
@@ -99,7 +95,6 @@
 		</div>
 		<div class="flex w-full gap-4">
 			<textarea
-				bind:this={element}
 				value={message?.content}
 				onchange={e => {
 					const el = e.target as HTMLTextAreaElement;
@@ -112,6 +107,7 @@
 				rows="1"
 				data-message
 				{@attach autofocusAction(autofocus)}
+				{@attach autosized.attachment}
 			></textarea>
 
 			<!-- Sticky wrapper for action buttons -->

src/lib/data/context_length.json

@@ -225,9 +225,7 @@
 		"mistralai/Mistral-7B-Instruct-v0.1": 32768,
 		"Qwen/Qwen2.5-7B-Instruct-Turbo": 32768,
 		"Qwen/Qwen2.5-72B-Instruct-Turbo": 131072,
-		"meta-llama/Llama-3.3-70B-Instruct-Turbo": 131072,
 		"Qwen/QwQ-32B": 131072,
-		"meta-llama/Llama-3-70b-chat-hf": 8192,
 		"mistralai/Mixtral-8x7B-Instruct-v0.1": 32768,
 		"google/gemma-2-27b-it": 8192,
 		"Qwen/Qwen2-VL-72B-Instruct": 32768,
@@ -255,6 +253,7 @@
 		"arcee-ai/virtuoso-large": 131072,
 		"arcee-ai/virtuoso-medium-v2": 131072,
 		"meta-llama/Llama-3.2-90B-Vision-Instruct-Turbo": 131072,
+		"meta-llama/Llama-3-70b-chat-hf": 8192,
 		"meta-llama/Llama-3-8b-chat-hf": 8192,
 		"mistralai/Mistral-Small-24B-Instruct-2501": 32768,
 		"meta-llama/Llama-4-Maverick-17B-128E-Instruct-FP8": 1048576,
@@ -279,6 +278,8 @@
 		"meta-llama/Llama-Vision-Free": 131072,
 		"meta-llama/Llama-Guard-3-11B-Vision-Turbo": 131072,
 		"meta-llama/Llama-3.2-3B-Instruct-Turbo": 131072,
+		"arcee_ai/arcee-spotlight": 131072,
+		"meta-llama/Llama-3.3-70B-Instruct-Turbo": 131072,
 		"meta-llama/Llama-2-70b-hf": 4096
 	},
 	"fireworks-ai": {

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

@@ -1,13 +1,10 @@
-import type { Getter } from "melt";
 import { extract } from "./extract.svelte.js";
 import { useResizeObserver, watch } from "runed";
 import { onDestroy, tick } from "svelte";
+import type { Attachment } from "svelte/attachments";
+import { on } from "svelte/events";
 
 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;
 	/**
@@ -27,14 +24,14 @@ export class TextareaAutosize {
 	#resizeTimeout: number | null = null;
 	#hiddenTextarea: HTMLTextAreaElement | null = null;
 
-	element = $derived.by(() => extract(this.#options.element));
-	input = $derived.by(() => extract(this.#options.input));
+	element = $state<HTMLTextAreaElement>();
+	input = $state("");
 	styleProp = $derived.by(() => extract(this.#options.styleProp, "height"));
 	maxHeight = $derived.by(() => extract(this.#options.maxHeight, undefined));
 	textareaHeight = $state(0);
 	textareaOldWidth = $state(0);
 
-	constructor(options: TextareaAutosizeOptions) {
+	constructor(options: TextareaAutosizeOptions = {}) {
 		this.#options = options;
 
 		// Create hidden textarea for measurements
@@ -158,4 +155,17 @@ export class TextareaAutosize {
 			this.element.style[this.styleProp] = `${newHeight}px`;
 		}
 	};
+
+	attachment: Attachment<HTMLTextAreaElement> = node => {
+		this.element = node;
+		this.input = node.value;
+		const removeListener = on(node, "input", _ => {
+			this.input = node.value;
+		});
+
+		return () => {
+			removeListener();
+			this.element = undefined;
+		};
+	};
 }