[Fix] Autoresize message boxes on browsers other than Chrome (#47)

src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte

@@ -19,6 +19,19 @@
 
 	let messageContainer: HTMLDivElement | null = null;
 
+	function resizeMessageTextAreas() {
+		// ideally we would use CSS "field-sizing:content". However, it is currently only supported on Chrome.
+		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;
+		}
+	}
+
 	function scrollToBottom() {
 		if (messageContainer) {
 			messageContainer.scrollTop = messageContainer.scrollHeight;
@@ -27,6 +40,7 @@
 
 	$: {
 		if (conversation.messages.at(-1)) {
+			resizeMessageTextAreas();
 			scrollToBottom();
 		}
 	}
@@ -43,6 +57,7 @@
 			<Message
 				class="border-b"
 				{message}
+				on:input={resizeMessageTextAreas}
 				on:delete={() => dispatch("deleteMessage", messageIdx)}
 				autofocus={!loading && messageIdx === conversation.messages.length - 1}
 			/>

src/lib/components/InferencePlayground/InferencePlaygroundMessage.svelte

@@ -5,7 +5,7 @@
 	export let message: ChatCompletionInputMessage;
 	export let autofocus: boolean = false;
 
-	const dispatch = createEventDispatcher<{ delete: void }>();
+	const dispatch = createEventDispatcher<{ delete: void; input: void }>();
 </script>
 
 <div
@@ -18,8 +18,11 @@
 		{autofocus}
 		bind:value={message.content}
 		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"
+		class="resize-none rounded bg-transparent px-2 py-2.5 ring-gray-100 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"
+		on:input={() => {
+			dispatch("input");
+		}}
 	></textarea>
 	<button
 		tabindex="1"