Adjustments (#86)

src/lib/components/dialog.svelte

@@ -11,9 +11,10 @@
 		onClose?: () => void;
 		open: boolean;
 		onSubmit?: EventHandler<SubmitEvent>;
+		class?: string;
 	}
 
-	let { children, onClose, open, title, footer, onSubmit }: Props = $props();
+	let { children, onClose, open, title, footer, onSubmit, class: classes }: Props = $props();
 
 	let dialog: HTMLDialogElement | undefined = $state();
 
@@ -30,7 +31,7 @@
 	{#if open}
 		<form class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/85" onsubmit={onSubmit}>
 			<div
-				class="relative w-xl rounded-xl bg-white shadow-sm dark:bg-gray-900"
+				class={["relative w-xl rounded-xl bg-white shadow-sm dark:bg-gray-900", classes]}
 				{@attach clickOutside(() => onClose?.())}
 			>
 				<div class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-800">

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

@@ -147,7 +147,12 @@
 								>
 									<p class="text-2xs pl-1.5 font-mono font-medium text-gray-500 uppercase">
 										temp: {conversation.config.temperature}
-										| max tokens: {conversation.config.max_tokens}
+										{#if conversation.config.max_tokens}
+											| max tokens: {conversation.config.max_tokens}
+										{/if}
+										{#if conversation.structuredOutput?.enabled}
+											| structured output
+										{/if}
 									</p>
 									{#each iterate(sliced) as [msg, isLast]}
 										<div class="flex flex-col gap-1 p-2">

src/lib/components/inference-playground/custom-provider-select.svelte

@@ -30,7 +30,7 @@
 		},
 	});
 
-	const nameMap: Record<InferenceProvider, string> = {
+	const nameMap: Partial<Record<InferenceProvider, string>> = {
 		"sambanova": "SambaNova",
 		"fal-ai": "fal",
 		"cerebras": "Cerebras",

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

@@ -6,6 +6,7 @@
 	import { GENERATION_CONFIG_KEYS, GENERATION_CONFIG_SETTINGS } from "./generation-config-settings.js";
 	import StructuredOutputModal from "./structured-output-modal.svelte";
 	import { maxAllowedTokens } from "./utils.svelte.js";
+	import { structuredForbiddenProviders } from "$lib/state/models.svelte.js";
 
 	interface Props {
 		conversation: ConversationClass;
@@ -99,24 +100,28 @@
 		></div>
 	</label>
 
-	<label class="mt-2 flex cursor-pointer items-center justify-between" for="structured-output">
-		<span class="text-sm font-medium text-gray-900 dark:text-gray-300">Structured Output</span>
-		<div class="flex items-center gap-2">
-			<input
-				type="checkbox"
-				bind:checked={
-					() => conversation.data.structuredOutput?.enabled,
-					v => conversation.update({ structuredOutput: { ...conversation.data.structuredOutput, enabled: v ?? false } })
-				}
-				class="peer sr-only"
-				id="structured-output"
-			/>
-			<button class="btn-mini" type="button" onclick={() => (editingStructuredOutput = true)}> edit </button>
-			<div
-				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>
-		</div>
-	</label>
+	<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+	{#if !structuredForbiddenProviders.includes(conversation.data.provider as any)}
+		<label class="mt-2 flex cursor-pointer items-center justify-between" for="structured-output">
+			<span class="text-sm font-medium text-gray-900 dark:text-gray-300">Structured Output</span>
+			<div class="flex items-center gap-2">
+				<input
+					type="checkbox"
+					bind:checked={
+						() => conversation.data.structuredOutput?.enabled,
+						v =>
+							conversation.update({ structuredOutput: { ...conversation.data.structuredOutput, enabled: v ?? false } })
+					}
+					class="peer sr-only"
+					id="structured-output"
+				/>
+				<button class="btn-mini" type="button" onclick={() => (editingStructuredOutput = true)}> edit </button>
+				<div
+					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>
+			</div>
+		</label>
+	{/if}
 </div>
 
 <StructuredOutputModal {conversation} bind:open={editingStructuredOutput} />

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

@@ -6,7 +6,6 @@
 	import Avatar from "../avatar.svelte";
 	import ModelSelectorModal from "./model-selector-modal.svelte";
 	import ProviderSelect from "./provider-select.svelte";
-	import { defaultSystemMessage } from "./utils.svelte.js";
 
 	interface Props {
 		conversation: ConversationClass;
@@ -24,7 +23,6 @@
 		}
 		conversation.update({
 			modelId: model.id,
-			systemMessage: { role: "system", content: defaultSystemMessage?.[modelId] ?? "" },
 			provider: undefined,
 		});
 	}

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

@@ -105,11 +105,10 @@
 				placeholder={systemPromptSupported
 					? "Enter a custom prompt"
 					: "System prompt is not supported with the chosen model."}
-				value={systemPromptSupported ? conversations.active[0]?.data.systemMessage.content : ""}
-				oninput={e => {
-					for (const c of conversations.active) {
-						c.update({ ...c.data, systemMessage: { ...c.data.systemMessage, content: e.currentTarget.value } });
-					}
+				value={systemPromptSupported ? (projects.current?.systemMessage ?? "") : ""}
+				onchange={e => {
+					if (!projects.current) return;
+					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"
 			></textarea>

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

@@ -0,0 +1,309 @@
+<script lang="ts" module>
+	const propertyTypes = ["string", "integer", "number", "boolean", "object", "enum", "array"] as const;
+	export type PropertyType = (typeof propertyTypes)[number];
+
+	export type PropertyDefinition = {
+		type: PropertyType;
+		description?: string;
+		enum?: string[];
+		properties?: { [key: string]: PropertyDefinition };
+		items?: PropertyDefinition;
+	};
+
+	// Example:
+	// {
+	//   "type": "object",
+	//   "properties": {
+	//     "static": {
+	//       "type": "string"
+	//     },
+	//     "array": {
+	//       "type": "array",
+	//       "items": {
+	//         "type": "string"
+	//       }
+	//     },
+	//     "enum": {
+	//       "type": "string",
+	//       "enum": [
+	//         "V1",
+	//         "V2",
+	//         "V3"
+	//       ]
+	//     },
+	//     "object": {
+	//       "type": "object",
+	//       "properties": {
+	//         "key1": {
+	//           "type": "string"
+	//         },
+	//         "key2": {
+	//           "type": "string"
+	//         }
+	//       }
+	//     }
+	//   }
+	// }
+</script>
+
+<script lang="ts">
+	import { onchange } from "$lib/utils/template.js";
+	import IconX from "~icons/carbon/close";
+	import IconAdd from "~icons/carbon/add-large";
+	import SchemaProperty from "./schema-property.svelte";
+	import Tooltip from "../tooltip.svelte";
+
+	type Props = {
+		name: string;
+		definition: PropertyDefinition;
+		required?: boolean;
+		nesting?: number;
+		onDelete: () => void;
+	};
+
+	let { name = $bindable(), definition = $bindable(), onDelete, required = $bindable(), nesting = 0 }: Props = $props();
+
+	// If isArray, this will be the inner type of the array. Otherwise it will be the definition itself.
+	const innerDefinition = {
+		get $() {
+			if (definition.type === "array") {
+				return definition.items ?? { type: "string" };
+			}
+			return definition;
+		},
+		set $(v) {
+			if (isArray.current) {
+				definition = { ...definition, items: v };
+				return;
+			}
+
+			definition = v;
+		},
+	};
+
+	const type = {
+		get $() {
+			return "enum" in innerDefinition.$ ? "enum" : innerDefinition.$.type;
+		},
+		set $(v) {
+			delete definition.enum;
+			delete definition.properties;
+
+			const inner = { type: v === "enum" ? "string" : v } as PropertyDefinition;
+			if (v === "enum") inner.enum = [];
+
+			if (definition.type === "array") {
+				definition = { ...definition, items: inner };
+			}
+
+			definition = { ...definition, ...inner };
+		},
+	};
+
+	const isArray = {
+		get current() {
+			return definition.type === "array";
+		},
+		set current(v) {
+			delete definition.enum;
+			delete definition.properties;
+
+			if (v) {
+				definition = { ...definition, type: "array", items: { type: definition.type } };
+			} else {
+				const prevType = definition.items?.type ?? "string";
+				delete definition.items;
+				definition = { ...definition, type: prevType };
+			}
+		},
+	};
+
+	const nestingClasses = [
+		"border-gray-300 dark:border-gray-700",
+		"border-gray-300 dark:border-gray-600",
+		"border-gray-300 dark:border-gray-500",
+		"border-gray-300 dark:border-gray-600",
+	];
+</script>
+
+<div
+	class={[
+		"relative space-y-2 border-l-2 bg-white py-2 pl-4 dark:bg-gray-900",
+		...nestingClasses.map((c, i) => {
+			return nesting % nestingClasses.length === i && c;
+		}),
+	]}
+>
+	<div class="flex gap-2">
+		<div class="grow">
+			<label for="{name}-name" class="block text-xs font-medium text-gray-500 dark:text-gray-400"> Name </label>
+			<input
+				type="text"
+				id="{name}-name"
+				class="mt-1 w-full rounded-md border border-gray-300 bg-white px-2 py-1 text-sm text-gray-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+				value={name}
+				{...onchange(v => (name = v))}
+			/>
+		</div>
+
+		<div class="grow">
+			<label for="{name}-type" class="block text-xs font-medium text-gray-500 dark:text-gray-400"> Type </label>
+			<select
+				id="{name}-type"
+				class="mt-1 w-full rounded-md border border-gray-300 bg-white px-2 py-1.25 text-sm text-gray-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+				bind:value={() => type.$, v => (type.$ = v)}
+			>
+				{#each propertyTypes.filter(t => t !== "array") as type}
+					<option value={type}>{type}</option>
+				{/each}
+			</select>
+		</div>
+		{#if type.$ === "object"}
+			<Tooltip>
+				{#snippet trigger(tooltip)}
+					<button
+						type="button"
+						class="btn-xs self-end rounded-md"
+						onclick={() => {
+							const prevProperties = innerDefinition.$.properties || {};
+							innerDefinition.$ = { ...innerDefinition.$, properties: { ...prevProperties, "": { type: "string" } } };
+						}}
+						aria-label="Add nested"
+						{...tooltip.trigger}
+					>
+						<IconAdd />
+					</button>
+				{/snippet}
+				Add nested property
+			</Tooltip>
+		{/if}
+		{#if type.$ === "enum"}
+			<Tooltip>
+				{#snippet trigger(tooltip)}
+					<button
+						type="button"
+						class="btn-xs self-end rounded-md"
+						onclick={() => {
+							const prevValues = innerDefinition.$.enum || [];
+							innerDefinition.$ = { ...innerDefinition.$, enum: [...prevValues, ""] };
+						}}
+						aria-label="Add enum value"
+						{...tooltip.trigger}
+					>
+						<IconAdd />
+					</button>
+				{/snippet}
+				Add enum value
+			</Tooltip>
+		{/if}
+		<button
+			type="button"
+			class="btn-xs self-end rounded-md text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500"
+			onclick={onDelete}
+			aria-label="delete"
+		>
+			<IconX />
+		</button>
+	</div>
+
+	{#if !nesting}
+		<div class="flex items-start">
+			<div class="flex h-5 items-center">
+				<input
+					id="required-{name}"
+					name="required-{name}"
+					type="checkbox"
+					class="h-4 w-4 rounded border border-gray-300 bg-white text-blue-600 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800"
+					bind:checked={required}
+				/>
+			</div>
+			<div class="ml-3 text-sm">
+				<label for="required-{name}" class="font-medium text-gray-700 dark:text-gray-300"> Required </label>
+			</div>
+		</div>
+	{/if}
+
+	<div class="flex items-start">
+		<div class="flex h-5 items-center">
+			<input
+				id="is-array-{name}"
+				name="is-array-{name}"
+				type="checkbox"
+				class="h-4 w-4 rounded border border-gray-300 bg-white text-blue-600 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800"
+				bind:checked={isArray.current}
+			/>
+		</div>
+		<div class="ml-3 text-sm">
+			<label for="is-array-{name}" class="font-medium text-gray-700 dark:text-gray-300"> Array </label>
+		</div>
+	</div>
+
+	{#if type.$ === "object"}
+		{#each Object.entries(innerDefinition.$.properties ?? {}) as [propertyName, propertyDefinition], index (index)}
+			<SchemaProperty
+				bind:name={
+					() => propertyName,
+					value => {
+						const nd = { ...innerDefinition.$ };
+						// eslint-disable-next-line @typescript-eslint/no-explicit-any
+						nd.properties![value] = innerDefinition.$.properties![propertyName] as any;
+						delete nd.properties![propertyName];
+						innerDefinition.$ = nd;
+					}
+				}
+				bind:definition={
+					() => propertyDefinition,
+					v => {
+						innerDefinition.$.properties![propertyName] = v;
+						innerDefinition.$ = innerDefinition.$;
+					}
+				}
+				onDelete={() => {
+					delete innerDefinition.$.properties![propertyName];
+					innerDefinition.$ = innerDefinition.$;
+				}}
+				nesting={nesting + 1}
+			/>
+		{/each}
+	{/if}
+
+	{#if "enum" in innerDefinition.$}
+		<p class="text-xs font-medium text-gray-500 dark:text-gray-400">Values</p>
+		{#each innerDefinition.$.enum ?? [] as val, index (index)}
+			<div
+				class={[
+					"flex border-l-2 pl-2",
+					...nestingClasses.map((c, i) => {
+						return (nesting + 1) % nestingClasses.length === i && c;
+					}),
+				]}
+			>
+				<input
+					id="{name}-enum-{index}"
+					class="block w-full rounded-md border border-gray-300 bg-white px-2 py-1
+		text-sm text-gray-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+					type="text"
+					value={val}
+					{...onchange(v => {
+						innerDefinition.$.enum = innerDefinition.$.enum ?? [];
+						innerDefinition.$.enum[index] = v;
+						innerDefinition.$ = innerDefinition.$;
+					})}
+				/>
+				<button
+					type="button"
+					class="btn-xs ml-2 rounded-md text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500"
+					onclick={() => {
+						innerDefinition.$.enum = innerDefinition.$.enum ?? [];
+						innerDefinition.$.enum.splice(index, 1);
+						innerDefinition.$ = innerDefinition.$;
+					}}
+				>
+					<IconX />
+				</button>
+			</div>
+		{:else}
+			<p class="mt-2 text-xs italic text-gray-400">No enum values defined.</p>
+		{/each}
+	{/if}
+</div>

src/lib/components/inference-playground/structured-output-modal.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
+	import { isDark } from "$lib/spells/is-dark.svelte";
 	import { Synced } from "$lib/spells/synced.svelte";
 	import { TextareaAutosize } from "$lib/spells/textarea-autosize.svelte";
 	import type { ConversationClass } from "$lib/state/conversations.svelte.js";
 	import { safeParse } from "$lib/utils/json.js";
-	import { keys } from "$lib/utils/object.svelte";
+	import { keys, renameKey } from "$lib/utils/object.svelte";
 	import { onchange, oninput } from "$lib/utils/template.js";
 	import { RadioGroup } from "melt/builders";
 	import { codeToHtml } from "shiki";
 	import typia from "typia";
-	import IconX from "~icons/carbon/close";
 	import Dialog from "../dialog.svelte";
-	import { isDark } from "$lib/spells/is-dark.svelte";
+	import SchemaProperty, { type PropertyDefinition } from "./schema-property.svelte";
 
 	interface Props {
 		conversation: ConversationClass;
@@ -27,11 +27,9 @@
 	});
 
 	type Schema = {
-		name?: string;
-		description?: string;
 		schema?: {
 			type?: string;
-			properties?: { [key: string]: { type: string; description?: string } };
+			properties?: { [key: string]: PropertyDefinition };
 			required?: string[];
 			additionalProperties?: boolean;
 		};
@@ -76,8 +74,6 @@
 				keys(v.schema?.properties ?? {}).includes(name)
 			);
 			const validated: Schema = {
-				name: v.name,
-				description: v.description,
 				schema: {
 					...v.schema,
 					required,
@@ -110,7 +106,7 @@
 	});
 </script>
 
-<Dialog title="Edit Structured Output" {open} onClose={() => (open = false)}>
+<Dialog class="!w-2xl max-w-[90vw]" title="Edit Structured Output" {open} onClose={() => (open = false)}>
 	<div class="flex justify-end">
 		<div
 			class="flex items-center gap-0.5 rounded-md border border-gray-300 bg-white p-0.5 text-sm dark:border-gray-600 dark:bg-gray-800"
@@ -133,150 +129,55 @@
 
 	{#if radioGroup.value === "form"}
 		<div class="fade-y -mx-2 mt-2 -mb-4 max-h-200 space-y-4 overflow-auto px-2 py-4 text-left">
-			<!-- Top-level properties -->
-			<div>
-				<label for="schema-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
-				<input
-					type="text"
-					id="schema-name"
-					class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-2 py-1 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
-					value={schemaObj.current.name}
-					{...onchange(value => updateSchema({ name: value }))}
-				/>
-			</div>
-
-			<div>
-				<label for="schema-description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
-					Description
-				</label>
-				<textarea
-					id="schema-description"
-					rows="3"
-					class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-2 py-1 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
-					value={schemaObj.current.description}
-					{...onchange(value => updateSchema({ description: value }))}
-				></textarea>
-			</div>
-
 			<!-- Properties Section -->
 			<div class="border-t border-gray-200 pt-4 dark:border-gray-700">
 				<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Properties</h3>
 				{#if schemaObj.current.schema?.properties}
 					<div class="mt-3 space-y-3">
-						{#each Object.entries(schemaObj.current.schema.properties) as [propertyName, propertyDefinition], index (index)}
-							<div
-								class="relative space-y-2 rounded-md border border-gray-300 bg-white p-3 dark:border-gray-700 dark:bg-gray-900"
-							>
-								<div>
-									<label for="{propertyName}-name" class="block text-xs font-medium text-gray-500 dark:text-gray-400">
-										Name
-									</label>
-									<input
-										type="text"
-										id="{propertyName}-name"
-										class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-2 py-1 text-sm text-gray-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
-										value={propertyName}
-										{...onchange(value => {
-											const updatedProperties = { ...schemaObj.current.schema?.properties };
-											if (!updatedProperties || !updatedProperties[propertyName]) return;
-											updatedProperties[value] = updatedProperties[propertyName];
-											delete updatedProperties[propertyName];
-											updateSchemaNested({ properties: updatedProperties });
-										})}
-									/>
-								</div>
-
-								<button
-									type="button"
-									class="absolute top-2 right-2 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500"
-									onclick={() => {
-										const updatedProperties = { ...schemaObj.current.schema?.properties };
-										if (!updatedProperties || !updatedProperties[propertyName]) return;
-										delete updatedProperties[propertyName];
+						{#each Object.entries(schemaObj.current.schema.properties) as [propertyName, propertyDefinition]}
+							<SchemaProperty
+								bind:name={
+									() => propertyName,
+									value => {
+										const updatedProperties = renameKey(
+											schemaObj.current.schema?.properties ?? {},
+											propertyName,
+											value
+										);
 										updateSchemaNested({ properties: updatedProperties });
-									}}
-									aria-label="delete"
-								>
-									<IconX />
-								</button>
-
-								<div>
-									<label for="{propertyName}-type" class="block text-xs font-medium text-gray-500 dark:text-gray-400">
-										Type
-									</label>
-									<select
-										id="{propertyName}-type"
-										class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-2 py-1 text-sm text-gray-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
-										bind:value={
-											() => propertyDefinition.type,
-											value => {
-												const updatedProperties = { ...schemaObj.current.schema?.properties };
-												if (updatedProperties && updatedProperties[propertyName]) {
-													updatedProperties[propertyName].type = value;
-													updateSchemaNested({ properties: updatedProperties });
-												}
+									}
+								}
+								bind:definition={
+									() => propertyDefinition,
+									v => {
+										const updatedProperties = { ...schemaObj.current.schema?.properties };
+										if (updatedProperties && updatedProperties[propertyName]) {
+											updatedProperties[propertyName] = v;
+											updateSchemaNested({ properties: updatedProperties });
+										}
+									}
+								}
+								bind:required={
+									() => schemaObj.current.schema?.required?.includes(propertyName) ?? false,
+									v => {
+										let updatedRequired = [...(schemaObj.current.schema?.required || [])];
+										if (v) {
+											if (!updatedRequired.includes(propertyName)) {
+												updatedRequired.push(propertyName);
 											}
+										} else {
+											updatedRequired = updatedRequired.filter(name => name !== name);
 										}
-									>
-										<option value="string">string</option>
-										<option value="integer">integer</option>
-										<option value="number">number</option>
-										<option value="boolean">boolean</option>
-										<option value="array">array</option>
-										<option value="object">object</option>
-										<option value="enum">enum</option>
-										<option value="null">null</option>
-									</select>
-								</div>
-
-								<div>
-									<label
-										for="{propertyName}-description"
-										class="block text-xs font-medium text-gray-500 dark:text-gray-400">Description</label
-									>
-									<input
-										type="text"
-										id="{propertyName}-description"
-										class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-2 py-1 text-sm text-gray-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
-										value={propertyDefinition.description}
-										{...onchange(value => {
-											const updatedProperties = { ...schemaObj.current.schema?.properties };
-											if (!updatedProperties || !updatedProperties[propertyName]) return;
-											updatedProperties[propertyName].description = value;
-											updateSchemaNested({ properties: updatedProperties });
-										})}
-									/>
-								</div>
-
-								<div class="flex items-start">
-									<div class="flex h-5 items-center">
-										<input
-											id="required-{propertyName}"
-											aria-describedby="required-{propertyName}-description"
-											name="required-{propertyName}"
-											type="checkbox"
-											class="h-4 w-4 rounded border border-gray-300 bg-white text-blue-600 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800"
-											checked={schemaObj.current.schema?.required?.includes(propertyName)}
-											onchange={e => {
-												let updatedRequired = [...(schemaObj.current.schema?.required || [])];
-												if (e.currentTarget.checked) {
-													if (!updatedRequired.includes(propertyName)) {
-														updatedRequired.push(propertyName);
-													}
-												} else {
-													updatedRequired = updatedRequired.filter(name => name !== propertyName);
-												}
-												updateSchemaNested({ required: updatedRequired });
-											}}
-										/>
-									</div>
-									<div class="ml-3 text-sm">
-										<label for="required-{propertyName}" class="font-medium text-gray-700 dark:text-gray-300">
-											Required
-										</label>
-									</div>
-								</div>
-							</div>
+										updateSchemaNested({ required: updatedRequired });
+									}
+								}
+								onDelete={() => {
+									const updatedProperties = { ...schemaObj.current.schema?.properties };
+									if (!updatedProperties || !updatedProperties[propertyName]) return;
+									delete updatedProperties[propertyName];
+									updateSchemaNested({ properties: updatedProperties });
+								}}
+							/>
 						{:else}
 							<p class="mt-3 text-sm text-gray-500">No properties defined yet.</p>
 						{/each}
@@ -292,12 +193,12 @@
 						const newPropertyName = `newProperty${Object.keys(schemaObj.current.schema?.properties || {}).length + 1}`;
 						const updatedProperties = {
 							...(schemaObj.current.schema?.properties || {}),
-							[newPropertyName]: { type: "string", description: "" },
+							[newPropertyName]: { type: "string" as const },
 						};
 						updateSchemaNested({ properties: updatedProperties });
 					}}
 				>
-					Add Property
+					Add property
 				</button>
 			</div>
 

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

@@ -4,6 +4,7 @@ import { token } from "$lib/state/token.svelte";
 import {
 	isCustomModel,
 	isHFModel,
+	Provider,
 	type Conversation,
 	type ConversationMessage,
 	type CustomModel,
@@ -18,6 +19,8 @@ import { type ChatCompletionOutputMessage } from "@huggingface/tasks";
 import { AutoTokenizer, PreTrainedTokenizer } from "@huggingface/transformers";
 import OpenAI from "openai";
 import { images } from "$lib/state/images.svelte.js";
+import { projects } from "$lib/state/projects.svelte.js";
+import { structuredForbiddenProviders } from "$lib/state/models.svelte.js";
 
 type ChatCompletionInputMessageChunk =
 	NonNullable<ChatCompletionInputMessage["content"]> extends string | (infer U)[] ? U : never;
@@ -84,14 +87,50 @@ async function getCompletionMetadata(
 ): Promise<CompletionMetadata> {
 	const data = conversation instanceof ConversationClass ? conversation.data : conversation;
 	const model = conversation.model;
-	const { systemMessage } = data;
+	const systemMessage = projects.current?.systemMessage;
 
-	const messages = [
-		...(isSystemPromptSupported(model) && systemMessage.content?.length ? [systemMessage] : []),
+	const messages: ConversationMessage[] = [
+		...(isSystemPromptSupported(model) && systemMessage?.length ? [{ role: "system", content: systemMessage }] : []),
 		...data.messages,
 	];
 	const parsed = await Promise.all(messages.map(parseMessage));
 
+	const baseArgs = {
+		...data.config,
+		messages: parsed,
+		model: model.id,
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	} as any;
+
+	const json = safeParse(data.structuredOutput?.schema ?? "");
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	if (json && data.structuredOutput?.enabled && !structuredForbiddenProviders.includes(data.provider as any)) {
+		switch (data.provider) {
+			case "cohere": {
+				baseArgs.response_format = {
+					type: "json_object",
+					...json,
+				};
+				break;
+			}
+			case Provider.Nebius: {
+				baseArgs.response_format = {
+					type: "json_object",
+					json_schema: { ...json, name: "schema" },
+				};
+				break;
+			}
+			default: {
+				baseArgs.response_format = {
+					type: "json_object",
+					json_schema: json,
+				};
+
+				break;
+			}
+		}
+	}
+
 	// Handle OpenAI-compatible models
 	if (isCustomModel(model)) {
 		const openai = new OpenAI({
@@ -104,22 +143,10 @@ async function getCompletionMetadata(
 		});
 
 		const args = {
-			messages: parsed,
-			...data.config,
-			model: model.id,
+			...baseArgs,
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		} as any;
 
-		if (data.structuredOutput?.enabled) {
-			const json = safeParse(data.structuredOutput.schema ?? "");
-			if (json) {
-				args.response_format = {
-					type: "json_schema",
-					json_schema: json,
-				};
-			}
-		}
-
 		return {
 			type: "openai",
 			client: openai,
@@ -127,24 +154,12 @@ async function getCompletionMetadata(
 		};
 	}
 	const args = {
-		model: model.id,
-		messages: parsed,
+		...baseArgs,
 		provider: data.provider,
-		...data.config,
 		// max_tokens: maxAllowedTokens(conversation) - currTokens,
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	} as any;
 
-	if (data.structuredOutput?.enabled) {
-		const json = safeParse(data.structuredOutput.schema ?? "");
-		if (json) {
-			args.response_format = {
-				type: "json_schema",
-				json_schema: json,
-			};
-		}
-	}
-
 	// Handle HuggingFace models
 	return {
 		type: "huggingface",

src/lib/components/local-toasts.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { autoUpdate, computePosition } from "@floating-ui/dom";
+	import { autoUpdate, computePosition, flip, type Placement } from "@floating-ui/dom";
 	import { Toaster } from "melt/builders";
 	import { type Snippet } from "svelte";
 	import { type Attachment } from "svelte/attachments";
-	import { fly } from "svelte/transition";
 
 	interface Props {
 		children: Snippet<[{ addToast: typeof toaster.addToast; trigger: typeof trigger }]>;
@@ -31,21 +30,96 @@
 	export const addToast = toaster.addToast;
 
 	const float: Attachment<HTMLElement> = function (node) {
+		let placement: Placement = $state("top");
+
 		const triggerEl = document.querySelector(`[data-local-toast-trigger=${id}]`);
 		if (!triggerEl) return;
 
 		const compute = () =>
 			computePosition(triggerEl, node, {
-				placement: "top",
 				strategy: "absolute",
-			}).then(({ x, y }) => {
+				placement: "top",
+				middleware: [flip({ fallbackPlacements: ["left"] })],
+			}).then(({ x, y, placement: _placement }) => {
+				placement = _placement;
 				Object.assign(node.style, {
-					left: `${x}px`,
-					top: `${y - 8}px`,
+					left: placement === "top" ? `${x}px` : `${x - 4}px`,
+					top: placement === "top" ? `${y - 6}px` : `${y}px`,
+				});
+
+				// Animate
+				// Cancel any ongoing animations
+				node.getAnimations().forEach(anim => anim.cancel());
+
+				// Determine animation direction based on placement
+				let keyframes: Keyframe[] = [];
+				switch (placement) {
+					case "top":
+						keyframes = [
+							{ opacity: 0, transform: "translateY(8px)", scale: "0.8" },
+							{ opacity: 1, transform: "translateY(0)", scale: "1" },
+						];
+						break;
+					case "left":
+						keyframes = [
+							{ opacity: 0, transform: "translateX(8px)", scale: "0.8" },
+							{ opacity: 1, transform: "translateX(0)", scale: "1" },
+						];
+						break;
+				}
+
+				node.animate(keyframes, {
+					duration: 500,
+					easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+					fill: "forwards",
 				});
 			});
 
-		return autoUpdate(triggerEl, node, compute);
+		const reference = node.cloneNode(true) as HTMLElement;
+		node.before(reference);
+		reference.style.visibility = "hidden";
+
+		const destroyers = [
+			autoUpdate(triggerEl, node, compute),
+			async () => {
+				// clone node
+				const cloned = node.cloneNode(true) as HTMLElement;
+				reference.before(cloned);
+				reference.remove();
+				cloned.getAnimations().forEach(anim => anim.cancel());
+
+				// Animate out
+				// Cancel any ongoing animations
+				cloned.getAnimations().forEach(anim => anim.cancel());
+
+				// Determine animation direction based on placement
+				let keyframes: Keyframe[] = [];
+				switch (placement) {
+					case "top":
+						keyframes = [
+							{ opacity: 1, transform: "translateY(0)" },
+							{ opacity: 0, transform: "translateY(-8px)" },
+						];
+						break;
+					case "left":
+						keyframes = [
+							{ opacity: 1, transform: "translateX(0)" },
+							{ opacity: 0, transform: "translateX(-8px)" },
+						];
+						break;
+				}
+
+				await cloned.animate(keyframes, {
+					duration: 400,
+					easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+					fill: "forwards",
+				}).finished;
+
+				cloned.remove();
+			},
+		];
+
+		return () => destroyers.forEach(d => d());
 	};
 
 	const classMap: Record<ToastData["variant"], string> = {
@@ -62,8 +136,6 @@
 		data-local-toast
 		data-variant={toast.data.variant}
 		class={[!toastSnippet && `${classMap[toast.data.variant]} rounded-full px-2 py-1 text-xs`]}
-		in:fly={{ y: 10 }}
-		out:fly={{ y: -4 }}
 		{@attach float}
 	>
 		{#if toastSnippet}

src/lib/components/share-modal.svelte

@@ -153,7 +153,7 @@
 										saving = false;
 										return;
 									}
-									const projectId = await projects.create(`Saved - ${decoded.name}`);
+									const projectId = await projects.create({ name: `Saved - ${decoded.name}` });
 									await Promise.allSettled(
 										decoded.conversations.map(c => {
 											conversations.create({

src/lib/data/context_length.json

@@ -101,19 +101,19 @@
 		"stability-ai/sdxl": 0
 	},
 	"novita": {
-		"deepseek/deepseek-prover-v2-671b": 160000,
-		"qwen/qwen3-235b-a22b-fp8": 128000,
-		"qwen/qwen3-30b-a3b-fp8": 128000,
-		"qwen/qwen3-32b-fp8": 128000,
 		"deepseek/deepseek-v3-0324": 128000,
+		"qwen/qwen3-235b-a22b-fp8": 40960,
+		"qwen/qwen3-30b-a3b-fp8": 40960,
+		"qwen/qwen3-32b-fp8": 40960,
 		"qwen/qwen2.5-vl-72b-instruct": 96000,
 		"deepseek/deepseek-v3-turbo": 64000,
-		"deepseek/deepseek-r1-turbo": 64000,
 		"meta-llama/llama-4-maverick-17b-128e-instruct-fp8": 1048576,
 		"google/gemma-3-27b-it": 32000,
 		"qwen/qwq-32b": 32768,
+		"deepseek/deepseek-r1-turbo": 64000,
 		"Sao10K/L3-8B-Stheno-v3.2": 8192,
 		"gryphe/mythomax-l2-13b": 4096,
+		"deepseek/deepseek-prover-v2-671b": 160000,
 		"meta-llama/llama-4-scout-17b-16e-instruct": 131072,
 		"deepseek/deepseek-r1-distill-llama-8b": 32000,
 		"deepseek/deepseek_v3": 64000,
@@ -141,7 +141,7 @@
 		"qwen/qwen3-1.7b-fp8": 32000,
 		"qwen/qwen3-8b-fp8": 128000,
 		"qwen/qwen3-4b-fp8": 128000,
-		"qwen/qwen3-14b-fp8": 128000,
+		"qwen/qwen3-14b-fp8": 40960,
 		"thudm/glm-4-9b-0414": 32000,
 		"thudm/glm-z1-9b-0414": 32000,
 		"thudm/glm-z1-32b-0414": 32000,
@@ -211,17 +211,18 @@
 	"together": {
 		"Qwen/QwQ-32B": 131072,
 		"meta-llama/Llama-4-Scout-17B-16E-Instruct": 1048576,
+		"mistralai/Mistral-7B-Instruct-v0.1": 32768,
 		"meta-llama/Llama-Guard-4-12B": 1048576,
 		"togethercomputer/m2-bert-80M-32k-retrieval": 32768,
-		"google/gemma-2-9b-it": 8192,
 		"cartesia/sonic": 0,
+		"meta-llama/Meta-Llama-3.1-405B-Instruct-Turbo": 130815,
 		"Qwen/Qwen2.5-7B-Instruct-Turbo": 32768,
 		"deepseek-ai/DeepSeek-R1-Distill-Llama-70B-free": 8192,
 		"meta-llama-llama-2-70b-hf": 4096,
+		"intfloat/multilingual-e5-large-instruct": 514,
 		"BAAI/bge-base-en-v1.5": 512,
 		"Gryphe/MythoMax-L2-13b": 4096,
-		"deepseek-ai/DeepSeek-V3": 131072,
-		"mistralai/Mistral-7B-Instruct-v0.1": 32768,
+		"Alibaba-NLP/gte-modernbert-base": 8192,
 		"mistralai/Mixtral-8x7B-Instruct-v0.1": 32768,
 		"google/gemma-2-27b-it": 8192,
 		"Qwen/Qwen2-VL-72B-Instruct": 32768,
@@ -229,18 +230,21 @@
 		"cartesia/sonic-2": 0,
 		"togethercomputer/m2-bert-80M-8k-retrieval": 8192,
 		"meta-llama/Llama-3.3-70B-Instruct-Turbo-Free": 131072,
+		"deepseek-ai/DeepSeek-V3": 131072,
 		"scb10x/scb10x-llama3-1-typhoon2-70b-instruct": 8192,
 		"togethercomputer/Refuel-Llm-V2-Small": 8192,
 		"togethercomputer/MoA-1": 32768,
 		"meta-llama/Meta-Llama-3-70B-Instruct-Turbo": 8192,
-		"Qwen/Qwen3-235B-A22B-fp8-tput": 40960,
 		"google/gemma-2b-it": 8192,
 		"meta-llama/Llama-3.2-11B-Vision-Instruct-Turbo": 131072,
 		"Gryphe/MythoMax-L2-13b-Lite": 4096,
+		"Qwen/Qwen3-235B-A22B-fp8": 40960,
 		"scb10x/scb10x-llama3-1-typhoon2-8b-instruct": 8192,
 		"meta-llama/Meta-Llama-Guard-3-8B": 8192,
-		"intfloat/multilingual-e5-large-instruct": 514,
+		"marin-community/marin-8b-instruct": 131072,
 		"deepseek-ai/DeepSeek-R1": 163840,
+		"meta-llama/Meta-Llama-3.1-8B-Instruct-Turbo": 131072,
+		"Qwen/Qwen2.5-VL-72B-Instruct": 32768,
 		"arcee-ai/arcee-blitz": 32768,
 		"arcee_ai/arcee-spotlight": 131072,
 		"arcee-ai/caller": 32768,
@@ -248,20 +252,19 @@
 		"arcee-ai/maestro-reasoning": 131072,
 		"arcee-ai/virtuoso-large": 131072,
 		"arcee-ai/virtuoso-medium-v2": 131072,
-		"mistralai/Mistral-Small-24B-Instruct-2501": 32768,
+		"meta-llama/Llama-3.2-90B-Vision-Instruct-Turbo": 131072,
 		"meta-llama/Llama-3-8b-chat-hf": 8192,
+		"mistralai/Mistral-Small-24B-Instruct-2501": 32768,
+		"Qwen/Qwen3-235B-A22B-fp8-tput": 40960,
+		"perplexity-ai/r1-1776": 163840,
 		"meta-llama/Llama-4-Maverick-17B-128E-Instruct-FP8": 1048576,
 		"togethercomputer/MoA-1-Turbo": 32768,
 		"meta-llama/Llama-3.3-70B-Instruct-Turbo": 131072,
-		"Qwen/Qwen3-235B-A22B-fp8": 40960,
 		"NousResearch/Nous-Hermes-2-Mixtral-8x7B-DPO": 32768,
 		"deepseek-ai/DeepSeek-R1-Distill-Llama-70B": 131072,
 		"deepseek-ai/DeepSeek-R1-Distill-Qwen-1.5B": 131072,
 		"meta-llama/Meta-Llama-3-8B-Instruct-Lite": 8192,
-		"meta-llama/Llama-3.2-90B-Vision-Instruct-Turbo": 131072,
 		"meta-llama/Meta-Llama-3.1-70B-Instruct-Turbo": 131072,
-		"mistralai/Mixtral-8x7B-v0.1": 32768,
-		"meta-llama/Meta-Llama-3.1-8B-Instruct-Turbo": 131072,
 		"mistralai/Mistral-7B-Instruct-v0.2": 32768,
 		"deepseek-ai/DeepSeek-V3-p-dp": 131072,
 		"deepseek-ai/DeepSeek-R1-Distill-Qwen-14B": 131072,
@@ -274,13 +277,9 @@
 		"meta-llama/Llama-Vision-Free": 131072,
 		"meta-llama/Llama-Guard-3-11B-Vision-Turbo": 131072,
 		"meta-llama/Llama-3.2-3B-Instruct-Turbo": 131072,
-		"meta-llama/Meta-Llama-3.1-405B-Instruct-Turbo": 130815,
 		"togethercomputer/Refuel-Llm-V2": 16384,
-		"Alibaba-NLP/gte-modernbert-base": 8192,
 		"Qwen/Qwen2.5-72B-Instruct-Turbo": 131072,
-		"perplexity-ai/r1-1776": 163840,
-		"meta-llama/Llama-2-70b-hf": 4096,
-		"Qwen/Qwen2.5-VL-72B-Instruct": 32768
+		"meta-llama/Llama-2-70b-hf": 4096
 	},
 	"fireworks-ai": {
 		"accounts/fireworks/models/qwq-32b": 131072,

src/lib/state/conversations.svelte.ts

@@ -40,9 +40,6 @@ export class ConversationEntity {
 	@Fields.json()
 	messages!: ConversationMessage[];
 
-	@Fields.json()
-	systemMessage: ConversationMessage = { role: "system" };
-
 	@Fields.boolean()
 	streaming = false;
 
@@ -64,10 +61,6 @@ export type ConversationEntityMembers = MembersOnly<ConversationEntity>;
 const conversationsRepo = repo(ConversationEntity, idb);
 
 const startMessageUser: ConversationMessage = { role: "user", content: "" };
-const systemMessage: ConversationMessage = {
-	role: "system",
-	content: "",
-};
 
 export const emptyModel: Model = {
 	_id: "",
@@ -89,7 +82,6 @@ function getDefaultConversation(projectId: string) {
 		modelId: models.trending[0]?.id ?? models.remote[0]?.id ?? emptyModel.id,
 		config: { ...defaultGenerationConfig },
 		messages: [{ ...startMessageUser }],
-		systemMessage,
 		streaming: true,
 		createdAt: new Date(),
 	} satisfies Partial<ConversationEntityMembers>;

src/lib/state/models.svelte.ts

@@ -1,5 +1,5 @@
 import { page } from "$app/state";
-import { type CustomModel } from "$lib/types.js";
+import { Provider, type CustomModel } from "$lib/types.js";
 import { edit, randomPick } from "$lib/utils/array.js";
 import { safeParse } from "$lib/utils/json.js";
 import typia from "typia";
@@ -10,6 +10,13 @@ const LOCAL_STORAGE_KEY = "hf_inference_playground_custom_models";
 
 const pageData = $derived(page.data as PageData);
 
+export const structuredForbiddenProviders: Provider[] = [
+	Provider.Hyperbolic,
+	Provider.Nebius,
+	Provider.Novita,
+	Provider.Sambanova,
+];
+
 class Models {
 	remote = $derived(pageData.models);
 	trending = $derived(this.remote.toSorted((a, b) => b.trendingScore - a.trendingScore).slice(0, 5));

src/lib/state/projects.svelte.ts

@@ -1,9 +1,9 @@
 import { idb } from "$lib/remult.js";
 import { dequal } from "dequal";
 import { Entity, Fields, repo, type MembersOnly } from "remult";
-import { conversations } from "./conversations.svelte";
 import { PersistedState } from "runed";
 import { checkpoints } from "./checkpoints.svelte";
+import { conversations } from "./conversations.svelte";
 
 @Entity("project")
 export class ProjectEntity {
@@ -12,6 +12,9 @@ export class ProjectEntity {
 
 	@Fields.string()
 	name!: string;
+
+	@Fields.string()
+	systemMessage?: string;
 }
 
 export type ProjectEntityMembers = MembersOnly<ProjectEntity>;
@@ -45,17 +48,17 @@ class Projects {
 		});
 	}
 
-	async create(name: string): Promise<string> {
-		const { id } = await projectsRepo.save({ name });
-		this.#projects[id] = { name, id };
-		return id;
+	async create(args: Omit<ProjectEntity, "id">): Promise<string> {
+		const p = await projectsRepo.save({ ...args });
+		this.#projects[p.id] = p;
+		return p.id;
 	}
 
 	saveProject = async (args: { name: string; moveCheckpoints?: boolean }) => {
 		const defaultProject = this.all.find(p => p.id === DEFAULT_PROJECT_ID);
 		if (!defaultProject) return;
 
-		const id = await this.create(args.name);
+		const id = await this.create({ name: args.name, systemMessage: defaultProject.systemMessage });
 
 		if (args.moveCheckpoints) {
 			checkpoints.migrate(defaultProject.id, id);
@@ -87,7 +90,7 @@ class Projects {
 
 	async update(data: ProjectEntity) {
 		if (!data.id) return;
-		await projectsRepo.update(data.id, data);
+		await projectsRepo.upsert({ where: { id: data.id }, set: data });
 		this.#projects[data.id] = { ...data };
 	}
 

src/lib/utils/object.svelte.ts

@@ -84,3 +84,21 @@ export function deepMerge<T extends DeepMergeable, U extends DeepMergeable>(targ
 
 	return result as T & U;
 }
+
+export function renameKey<T extends object>(
+	obj: T,
+	oldKey: keyof T,
+	newKey: string
+): { [K in keyof T as K extends typeof oldKey ? typeof newKey : K]: T[K] } {
+	const entries = Object.entries(obj);
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const result: any = {};
+	for (const [key, value] of entries) {
+		if (key === oldKey) {
+			result[newKey] = value;
+		} else {
+			result[key] = value;
+		}
+	}
+	return result;
+}