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

<script lang="ts" module>
	let open = $state(false);

	export function openStructuredOutputModal() {
		open = true;
	}
</script>

<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, 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 Dialog from "../dialog.svelte";
	import SchemaProperty, { type PropertyDefinition } from "./schema-property.svelte";

	interface Props {
		conversation: ConversationClass;
	}

	let { conversation }: Props = $props();

	let tempSchema = $derived(conversation.data.structuredOutput?.schema ?? "");

	const modes = ["form", "code"] as const;
	const radioGroup = new RadioGroup({
		value: modes[0],
		orientation: "horizontal",
	});

	type Schema = {
		schema?: {
			type?: string;
			properties?: { [key: string]: PropertyDefinition };
			required?: string[];
			additionalProperties?: boolean;
		};
		strict?: boolean;
	};

	export function parseJsonSchema(): Schema {
		const parsed = safeParse(conversation.data.structuredOutput?.schema ?? "");
		const baseSchema = {
			schema: {
				type: "object",
				properties: {},
				required: [],
				additionalProperties: true,
			},
			strict: false,
		} satisfies Schema;

		if (typia.is<Schema>(parsed)) {
			return {
				...baseSchema,
				...parsed,
				schema: {
					...baseSchema.schema,
					...parsed.schema,
					properties: {
						...baseSchema.schema.properties,
						...parsed.schema?.properties,
					},
					required: Array.from(new Set([...(baseSchema.schema.required || []), ...(parsed.schema?.required || [])])),
				},
			};
		}

		return baseSchema;
	}

	const schemaObj = new Synced<Schema>({
		value: parseJsonSchema,
		onChange(v) {
			const required = Array.from(new Set(v.schema?.required)).filter(name =>
				keys(v.schema?.properties ?? {}).includes(name),
			);
			const validated: Schema = {
				schema: {
					...v.schema,
					required,
				},
				strict: v.strict,
			};
			conversation.update({
				structuredOutput: { ...conversation.data.structuredOutput, schema: JSON.stringify(validated, null, 2) },
			});
		},
	});

	function updateSchema(obj: Partial<Schema>) {
		schemaObj.current = { ...schemaObj.current, ...obj };
	}

	function updateSchemaNested(nestedObj: Partial<Schema["schema"]>) {
		updateSchema({
			schema: {
				...schemaObj.current.schema,
				...nestedObj,
			},
		});
	}

	const autosized = new TextareaAutosize();
</script>

<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"
			{...radioGroup.root}
		>
			{#each modes as mode}
				{@const item = radioGroup.getItem(mode)}
				<div
					class={[
						"rounded px-2 py-0.5 capitalize select-none",
						item.checked ? "bg-gray-200 dark:bg-gray-700" : "hover:bg-gray-100 dark:hover:bg-gray-700/70",
					]}
					{...item.attrs}
				>
					{mode}
				</div>
			{/each}
		</div>
	</div>

	{#if radioGroup.value === "form"}
		<div class="fade-y -mx-2 -mb-4 max-h-200 space-y-4 overflow-auto px-2 py-4 text-left">
			<!-- Properties Section -->
			<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]}
						<SchemaProperty
							bind:name={
								() => propertyName,
								value => {
									const updatedProperties = renameKey(schemaObj.current.schema?.properties ?? {}, propertyName, 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);
									}
									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}
				</div>
			{:else}
				<p class="mt-3 text-sm text-gray-500">No properties defined yet.</p>
			{/if}

			<button
				type="button"
				class="btn-sm mt-4 flex w-full items-center justify-center rounded-md"
				onclick={() => {
					const newPropertyName = `newProperty${Object.keys(schemaObj.current.schema?.properties || {}).length + 1}`;
					const updatedProperties = {
						...(schemaObj.current.schema?.properties || {}),
						[newPropertyName]: { type: "string" as const },
					};
					updateSchemaNested({ properties: updatedProperties });
				}}
			>
				Add property
			</button>
		</div>

		<!-- Strict and Additional Properties -->
		<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">Options</h3>
			<div class="mt-3 space-y-2">
				<div class="relative flex items-start">
					<div class="flex h-5 items-center">
						<input
							id="additionalProperties"
							name="additionalProperties"
							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?.additionalProperties !== undefined
								? schemaObj.current.schema.additionalProperties
								: true}
							onchange={e => updateSchemaNested({ additionalProperties: e.currentTarget.checked })}
						/>
					</div>
					<div class="ml-3 text-sm">
						<label for="additionalProperties" class="font-medium text-gray-700 dark:text-gray-300">
							Allow additional properties
						</label>
						<p id="additionalProperties-description" class="text-gray-500">
							If unchecked, only properties defined in the schema are allowed.
						</p>
					</div>
				</div>

				<div class="relative flex items-start">
					<div class="flex h-5 items-center">
						<input
							id="strict"
							name="strict"
							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.strict !== undefined ? schemaObj.current.strict : false}
							onchange={e => updateSchema({ strict: e.currentTarget.checked })}
						/>
					</div>
					<div class="ml-3 text-sm">
						<label for="strict" class="font-medium text-gray-700 dark:text-gray-300">Strict mode</label>
						<p id="strict-description" class="text-gray-500">Enforces stricter validation rules.</p>
					</div>
				</div>
			</div>
		</div>
	{:else}
		<!-- inside dialogs its a-ok -->
		<!-- svelte-ignore a11y_autofocus  -->
		<div
			class="relative mt-2 max-h-120 overflow-x-clip overflow-y-auto rounded-lg bg-gray-100 text-left ring-gray-100 focus-within:ring-3 dark:bg-gray-800 dark:ring-gray-600"
		>
			<div class="shiki-container pointer-events-none absolute inset-0" aria-hidden="true">
				{#await codeToHtml(tempSchema, { lang: "json", theme: isDark() ? "catppuccin-macchiato" : "catppuccin-latte" })}
					<!-- nothing -->
				{:then rendered}
					{@html rendered}
				{/await}
			</div>
			<textarea
				autofocus
				value={conversation.data.structuredOutput?.schema ?? ""}
				{...onchange(v => {
					conversation.update({ structuredOutput: { ...conversation.data.structuredOutput, schema: v } });
				})}
				{...oninput(v => (tempSchema = v))}
				class="relative z-10 h-120 w-full resize-none overflow-hidden rounded-lg bg-transparent whitespace-pre-wrap text-transparent caret-black outline-none @2xl:px-3 dark:caret-white"
				{@attach autosized.attachment}
			></textarea>
		</div>
	{/if}

	{#snippet footer()}
		<button class="btn ml-auto" onclick={() => (open = false)}> Save </button>
	{/snippet}
</Dialog>

<style>
	.shiki-container > :global(pre),
	.shiki-container + textarea {
		padding-block: 10px;
		padding-inline: 8px;
		font-family: var(--font-mono) !important;
		font-size: 15px;
	}

	.shiki-container > :global(*) {
		background-color: transparent !important;
		font-family: var(--font-mono) !important;
	}

	.shiki-container > :global(pre) {
		border-radius: 8px;
		height: 100%;
		white-space: pre-wrap;
	}
</style>