add text size

src/lib/components/inference-playground/generation-config.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { ConversationClass } from "$lib/state/conversations.svelte.js";
+	import { settings } from "$lib/state/settings.svelte.js";
 	import { maxAllowedTokens } from "$lib/utils/business.svelte.js";
 	import { cn } from "$lib/utils/cn.js";
 	import { isNumber } from "$lib/utils/is.js";
@@ -11,6 +12,9 @@
 	import StructuredOutputModal, { openStructuredOutputModal } from "./structured-output-modal.svelte";
 	import { mcpServers } from "$lib/state/mcps.svelte.js";
 	import { isMcpEnabled } from "$lib/constants.js";
+	import IconMinus from "~icons/carbon/subtract";
+	import IconPlus from "~icons/carbon/add-large";
+
 	interface Props {
 		conversation: ConversationClass;
 		classNames?: string;
@@ -166,6 +170,36 @@
 			class="peer relative h-5 w-9 rounded-full bg-gray-200 peer-checked:bg-black peer-focus:outline-hidden 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:after:translate-x-full peer-checked:after:border-white dark:border-gray-600 dark:bg-gray-700 dark:peer-checked:bg-blue-600"
 		></div>
 	</label>
+
+	<!-- Text Size Setting -->
+	<div class="mt-4 flex items-center justify-between">
+		<span class="text-sm font-medium text-gray-900 dark:text-gray-300">Text Size</span>
+		<div class="flex items-center gap-2">
+			<button
+				type="button"
+				onclick={() => {
+					if (settings.textSize > 50) {
+						settings.textSize = settings.textSize - 10;
+					}
+				}}
+				class="btn-mini aspect-square"
+			>
+				<IconMinus />
+			</button>
+			<span class="text-sm">{settings.textSize}%</span>
+			<button
+				type="button"
+				onclick={() => {
+					if (settings.textSize < 200) {
+						settings.textSize = settings.textSize + 10;
+					}
+				}}
+				class="btn-mini aspect-square"
+			>
+				<IconPlus />
+			</button>
+		</div>
+	</div>
 </div>
 
 <StructuredOutputModal {conversation} />

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

@@ -4,6 +4,7 @@
 	import { TextareaAutosize } from "$lib/spells/textarea-autosize.svelte.js";
 	import { conversations } from "$lib/state/conversations.svelte";
 	import { images } from "$lib/state/images.svelte";
+	import { settings } from "$lib/state/settings.svelte.js";
 	import type { ConversationMessage } from "$lib/types.js";
 	import { fileToDataURL } from "$lib/utils/file.js";
 	import { omit } from "$lib/utils/object.svelte";
@@ -14,6 +15,8 @@
 	import IconMaximize from "~icons/carbon/maximize";
 	import Tooltip from "../tooltip.svelte";
 	import { previewImage } from "./img-preview.svelte";
+	import { watch } from "runed";
+	import { tick } from "svelte";
 
 	const multiple = $derived(conversations.active.length > 1);
 	const loading = $derived(conversations.generating);
@@ -92,6 +95,17 @@
 	});
 
 	const autosized = new TextareaAutosize();
+
+	// Watch for text size changes and trigger resize
+	watch(
+		() => settings.textSize,
+		() => {
+			// Trigger resize on next tick to ensure styles are applied
+			tick().then(() => {
+				autosized.triggerResize();
+			});
+		},
+	);
 </script>
 
 <svelte:window onkeydown={onKeydown} />
@@ -118,6 +132,7 @@
 				bind:value={input}
 				{@attach autosized.attachment}
 				{@attach autofocus()}
+				style="font-size: {settings.textSize}%"
 			></textarea>
 			{#if canUploadImgs}
 				<Tooltip openDelay={250}>

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

@@ -4,6 +4,7 @@
 	import { TextareaAutosize } from "$lib/spells/textarea-autosize.svelte.js";
 	import { type ConversationClass } from "$lib/state/conversations.svelte.js";
 	import { images } from "$lib/state/images.svelte";
+	import { settings } from "$lib/state/settings.svelte.js";
 	import { type ConversationMessage } from "$lib/types.js";
 	import { copyToClipboard } from "$lib/utils/copy.js";
 	import { cmdOrCtrl } from "$lib/utils/platform.js";
@@ -11,6 +12,8 @@
 	import { clickOutside } from "$lib/attachments/click-outside.js";
 	import { FileUpload } from "melt/builders";
 	import { fade } from "svelte/transition";
+	import { watch } from "runed";
+	import { tick } from "svelte";
 	import IconCopy from "~icons/carbon/copy";
 	import IconImage from "~icons/carbon/image-reference";
 	import IconMaximize from "~icons/carbon/maximize";
@@ -91,6 +94,18 @@
 		}
 		return marked(parsedMessage.thinking);
 	});
+
+	// Watch for text size changes and trigger resize
+	watch(
+		() => settings.textSize,
+		() => {
+			// Trigger resize on next tick to ensure styles are applied
+			tick().then(() => {
+				autosized.triggerResize();
+				reasoningAutosized.triggerResize();
+			});
+		},
+	);
 </script>
 
 <div
@@ -142,6 +157,7 @@
 							{#if conversation.data.parseMarkdown && !isEditing}
 								<div
 									class="relative w-full max-w-none rounded-lg bg-transparent px-2 py-2.5 ring-gray-100 outline-none group-hover/message:ring-3 hover:bg-white @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900"
+									style="font-size: {settings.textSize}%"
 								>
 									<div class="prose prose-sm dark:prose-invert">
 										{@html parsedReasoning}
@@ -171,6 +187,7 @@
 									class="w-full resize-none overflow-hidden rounded-lg bg-transparent px-2 py-2.5 ring-gray-100 outline-none group-hover/message:ring-3 hover:bg-white 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"
 									{@attach reasoningAutosized.attachment}
+									style="font-size: {settings.textSize}%"
 								></textarea>
 							{/if}
 						{/if}
@@ -184,6 +201,7 @@
 						data-message
 						data-test-id={TEST_IDS.message}
 						{@attach clickOutside(() => (isEditing = false))}
+						style="font-size: {settings.textSize}%"
 					>
 						<Tooltip>
 							{#snippet trigger(tooltip)}
@@ -228,6 +246,7 @@
 								class="w-full resize-none overflow-hidden border-none bg-transparent outline-none"
 								rows="1"
 								{@attach autosized.attachment}
+								style="font-size: {settings.textSize}%"
 							></textarea>
 						{/if}
 					</div>
@@ -257,6 +276,7 @@
 						data-message
 						data-test-id={TEST_IDS.message}
 						{@attach autosized.attachment}
+						style="font-size: {settings.textSize}%"
 					></textarea>
 				{/if}
 			</div>

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

@@ -2,6 +2,7 @@
 	import { observe, observed, ObservedElements } from "$lib/attachments/observe.svelte.js";
 	import { conversations } from "$lib/state/conversations.svelte";
 	import { projects } from "$lib/state/projects.svelte";
+	import { settings } from "$lib/state/settings.svelte.js";
 	import { token } from "$lib/state/token.svelte.js";
 	import { isHFModel } from "$lib/types.js";
 	import { iterate } from "$lib/utils/array.js";
@@ -96,6 +97,7 @@
 					projects.update({ ...projects.current, systemMessage: e.currentTarget.value });
 				}}
 				class="absolute inset-x-0 bottom-0 h-full resize-none bg-transparent px-3 pt-10 text-sm outline-hidden"
+				style="font-size: {settings.textSize}%"
 			></textarea>
 		</div>
 	</div>

src/lib/state/settings.svelte.ts

@@ -0,0 +1,27 @@
+const TEXT_SIZE_KEY = "textSize";
+
+class Settings {
+	#textSize = $state(100);
+
+	constructor() {
+		const storedTextSize = localStorage.getItem(TEXT_SIZE_KEY);
+		const parsed = storedTextSize ? parseInt(storedTextSize, 10) : null;
+		this.textSize = parsed && !isNaN(parsed) ? parsed : 100;
+	}
+
+	get textSize() {
+		return this.#textSize;
+	}
+
+	set textSize(size: number) {
+		localStorage.setItem(TEXT_SIZE_KEY, JSON.stringify(size));
+		this.#textSize = size;
+	}
+
+	// Reset to default
+	resetTextSize = () => {
+		this.textSize = 100;
+	};
+}
+
+export const settings = new Settings();