UX adjustments (#76)

- Fix bug where `new message` is not reachable
- Simplify conversation scroll wrapper logic, avoiding magic `height`
calculations
- Fix some mobile alignments
- Make it so model selector modal is visible even when virtual keyboard
is shown
- Align tokens and latency to conversation window
- Fixes issues where conversation comparisons were not being saved

---------

Co-authored-by: Victor Muštar (aider) <[email protected]>

src/app.css

@@ -41,6 +41,13 @@
 	}
 }
 
+/* Custom variants */
+@custom-variant nd {
+	&:not(:disabled) {
+		@slot;
+	}
+}
+
 /* Utilities */
 @utility abs-x-center {
 	left: 50%;

src/lib/actions/autofocus.ts

@@ -1,7 +1,14 @@
 import { tick } from "svelte";
 
-export function autofocus(node: HTMLElement) {
-	tick().then(() => {
-		node.focus();
-	});
+export function autofocus(node: HTMLElement, enabled = true) {
+	function update(enabled = true) {
+		if (enabled) {
+			tick().then(() => {
+				node.focus();
+			});
+		}
+	}
+	update(enabled);
+
+	return { update };
 }

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

@@ -72,8 +72,8 @@
 									<IconCompare class="text-xs text-gray-400" />
 								{/if}
 								{#each state.conversations as { messages }, i}
-									<span class={["text-gray-200"]}>
-										{messages.length} messages
+									<span class={["text-gray-800 dark:text-gray-200"]}>
+										{messages.length} message{messages.length === 1 ? "" : "s"}
 									</span>
 									{#if multiple && i === 0}
 										<span class="text-gray-500">|</span>
@@ -108,13 +108,15 @@
 
 					{#if tooltip.open}
 						<div
-							class={["flex rounded-xl border border-gray-700 bg-gray-800 p-2 shadow"]}
+							class={[
+								"flex rounded-xl border border-gray-100 bg-gray-50 p-2 shadow dark:border-gray-700 dark:bg-gray-800",
+							]}
 							{...tooltip.content}
 							transition:fly={{ x: -2 }}
 						>
 							<div class="size-4 rounded-tl border-t border-l border-gray-700" {...tooltip.arrow}></div>
 							{#each state.conversations as conversation, i}
-								{@const msgs = conversation.messages.filter(m => m.content?.trim())}
+								{@const msgs = conversation.messages}
 								{@const sliced = msgs.slice(0, 4)}
 								<div
 									class={[
@@ -131,7 +133,11 @@
 										{@const isLast = i === sliced.length - 1}
 										<div class="flex flex-col gap-1 p-2">
 											<p class="font-mono text-xs font-medium text-gray-400 uppercase">{msg.role}</p>
-											<p class="line-clamp-2 text-sm">{msg.content}</p>
+											{#if msg.content?.trim()}
+												<p class="line-clamp-2 text-sm">{msg.content.trim()}</p>
+											{:else}
+												<p class="text-sm text-gray-500 italic">No content</p>
+											{/if}
 										</div>
 										{#if !isLast}
 											<div class="my-2 h-px w-full bg-gray-200 dark:bg-gray-700"></div>

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

@@ -101,7 +101,6 @@
 	};
 
 	function highlight(code?: string, language?: InferenceSnippetLanguage) {
-		console.log({ code, language });
 		if (!code || !language) return "";
 		return hljs.highlight(code, { language: language === "curl" ? "http" : language }).value;
 	}
@@ -196,8 +195,8 @@
 	{/if}
 
 	{#if installInstructions}
-		<div class="flex items-center justify-between px-2 pt-6 pb-4">
-			<h2 class="flex items-baseline gap-2 font-semibold">
+		<div class="flex flex-col justify-between gap-2 px-2 pt-6 pb-4 md:flex-row md:items-center">
+			<h2 class="flex items-center gap-2 font-semibold">
 				{installInstructions.title}
 				<a
 					href={installInstructions.docs}
@@ -208,7 +207,7 @@
 					Docs
 				</a>
 			</h2>
-			<div class="flex items-center gap-x-4">
+			<div class="flex items-center gap-x-4 whitespace-nowrap">
 				<LocalToasts>
 					{#snippet children({ addToast, trigger })}
 						<button

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

@@ -12,10 +12,9 @@
 		conversation: Conversation;
 		loading: boolean;
 		viewCode: boolean;
-		compareActive: boolean;
 	}
 
-	let { conversation = $bindable(), loading, viewCode, compareActive }: Props = $props();
+	let { conversation = $bindable(), loading, viewCode }: Props = $props();
 	let messageContainer: HTMLDivElement | null = $state(null);
 	const scrollState = new ScrollState({
 		element: () => messageContainer,
@@ -56,9 +55,7 @@
 </script>
 
 <div
-	class="@container flex flex-col overflow-x-hidden overflow-y-auto {compareActive
-		? 'max-h-[calc(100dvh-5.8rem-2.5rem-75px)] md:max-h-[calc(100dvh-5.8rem-2.5rem)]'
-		: 'max-h-[calc(100dvh-5.8rem-2.5rem-75px)] md:max-h-[calc(100dvh-5.8rem)]'}"
+	class="@container flex flex-col overflow-x-hidden overflow-y-auto"
 	class:animate-pulse={loading && !conversation.streaming}
 	bind:this={messageContainer}
 	id="test-this"

src/lib/components/inference-playground/custom-model-config.svelte

@@ -30,6 +30,10 @@
 	import IconCross from "~icons/carbon/close";
 	import typia from "typia";
 	import { handleNonStreamingResponse } from "./utils.js";
+	import { watch } from "runed";
+	import Tooltip from "../tooltip.svelte";
+	import { createFieldValidation } from "$lib/utils/form.svelte.js";
+	import { isValidURL } from "$lib/utils/url.js";
 
 	let dialog: HTMLDialogElement | undefined = $state();
 	const exists = $derived(!!models.custom.find(m => m._id === model?._id));
@@ -55,12 +59,24 @@
 	const success = (content: string) => (message = { type: "success", content }) satisfies Message;
 	const clear = () => (message = null);
 
+	watch(
+		() => $state.snapshot(model),
+		(_, prev) => {
+			if (prev === undefined) testSuccessful = exists;
+			else testSuccessful = false;
+		},
+		{ lazy: true }
+	);
+
+	let testing = $state(false);
+	let testSuccessful = $state(false);
 	const onsubmit: HTMLFormAttributes["onsubmit"] = async e => {
 		e.preventDefault();
 		clear();
 		const isTest = e.submitter?.dataset.form === "test";
 		if (isTest) {
 			testing = true;
+			testSuccessful = false;
 
 			const conv: Conversation = {
 				model: {
@@ -83,6 +99,7 @@
 			try {
 				await handleNonStreamingResponse(conv);
 				success("Test successful!");
+				testSuccessful = true;
 			} catch (err) {
 				if (err instanceof Error) {
 					error(`Test failed: ${err.message}`);
@@ -101,7 +118,13 @@
 		}
 	};
 
-	let testing = $state(false);
+	const endpointValidation = createFieldValidation({
+		validate: v => {
+			if (!v) return "Endpoint URL is required";
+			if (!isValidURL(v)) return "Invalid URL";
+			if (!v.endsWith("/v1")) return "Endpoint URL should *probably* end with /v1";
+		},
+	});
 </script>
 
 <dialog class="backdrop:bg-transparent" bind:this={dialog} onclose={() => close()}>
@@ -158,7 +181,9 @@
 							required
 							type="text"
 							class="input block w-full"
+							{...endpointValidation.attrs}
 						/>
+						<p class="text-xs text-red-300">{endpointValidation.msg}</p>
 					</label>
 					<label class="flex flex-col gap-2">
 						<p class="block text-sm font-medium text-gray-900 dark:text-white">Access Token</p>
@@ -204,17 +229,28 @@
 					{/if}
 					<!-- Reverse flex so that submit is the button called on enter -->
 					<div class="ml-auto flex flex-row-reverse items-center gap-2">
-						<button
-							data-form="submit"
-							type="submit"
-							class="rounded-lg bg-black px-5 py-2.5 text-sm font-medium text-white
-									hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 focus:outline-none
-									disabled:!bg-black dark:border-gray-700
-									dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:disabled:!bg-gray-800"
-							disabled={testing}
-						>
-							Submit
-						</button>
+						<Tooltip disabled={testSuccessful} openDelay={0} closeOnPointerDown={false}>
+							{#snippet trigger(tooltip)}
+								<button
+									data-form="submit"
+									type="submit"
+									class={[
+										"rounded-lg bg-black px-5 py-2.5 text-sm",
+										"font-medium text-white",
+										"hover:nd:bg-gray-900 focus:ring-4 focus:ring-gray-300",
+										"focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
+										"dark:hover:nd:bg-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:focus:ring-gray-700",
+									]}
+									disabled={testing || !testSuccessful}
+									{...tooltip.trigger}
+								>
+									Submit
+								</button>
+							{/snippet}
+							{#if !testSuccessful}
+								<p>Test your model before saving</p>
+							{/if}
+						</Tooltip>
 						<button
 							data-form="test"
 							type="submit"

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { autofocus as autofocusAction } from "$lib/actions/autofocus.js";
 	import Tooltip from "$lib/components/tooltip.svelte";
 	import { TextareaAutosize } from "$lib/spells/textarea-autosize.svelte.js";
 	import { PipelineTag, type Conversation, type ConversationMessage } from "$lib/types.js";
@@ -71,16 +72,14 @@
 			{message.role}
 		</div>
 		<div class="flex w-full gap-4">
-			<!-- svelte-ignore a11y_autofocus -->
-			<!-- svelte-ignore a11y_positive_tabindex -->
 			<textarea
 				bind:this={element}
-				{autofocus}
+				use:autofocusAction={autofocus}
 				bind:value={message.content}
 				placeholder="Enter {message.role} message"
 				class="grow 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"
-				tabindex="2"
+				data-message
 			></textarea>
 
 			{#if canUploadImgs}

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

@@ -70,137 +70,135 @@
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <!-- svelte-ignore a11y_click_events_have_key_events -->
-<div
-	class="fixed inset-0 z-10 flex h-screen items-start justify-center bg-black/85 pt-32"
-	bind:this={backdropEl}
-	onclick={handleBackdropClick}
->
-	<div class="flex w-full max-w-[600px] items-start justify-center overflow-hidden p-10 text-left whitespace-nowrap">
+<div class="fixed inset-0 z-10 h-dvh bg-black/85 pt-32" bind:this={backdropEl} onclick={handleBackdropClick}>
+	<div
+		class="abs-x-center md:abs-y-center absolute top-12 flex w-[calc(100%-2rem)] max-w-[600px] flex-col overflow-hidden rounded-lg border bg-white text-gray-900 shadow-md dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"
+	>
+		<div class="flex items-center border-b px-3 dark:border-gray-800">
+			<div class="mr-2 text-sm">
+				<IconSearch />
+			</div>
+			<input
+				{...combobox.input}
+				use:autofocus
+				class="flex h-10 w-full rounded-md bg-transparent py-3 text-sm placeholder-gray-400 outline-hidden"
+				placeholder="Search models ..."
+				bind:value={query}
+			/>
+		</div>
 		<div
-			class="flex h-full w-full flex-col overflow-hidden rounded-lg border bg-white text-gray-900 shadow-md dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"
+			class="max-h-[220px] overflow-x-hidden overflow-y-auto md:max-h-[300px]"
+			{...combobox.content}
+			popover={undefined}
 		>
-			<div class="flex items-center border-b px-3 dark:border-gray-800">
-				<div class="mr-2 text-sm">
-					<IconSearch />
-				</div>
-				<input
-					{...combobox.input}
-					use:autofocus
-					class="flex h-10 w-full rounded-md bg-transparent py-3 text-sm placeholder-gray-400 outline-hidden"
-					placeholder="Search models ..."
-					bind:value={query}
-				/>
-			</div>
-			<div class="max-h-[300px] overflow-x-hidden overflow-y-auto" {...combobox.content} popover={undefined}>
-				{#snippet modelEntry(model: Model | CustomModel, trending?: boolean)}
-					{@const [nameSpace, modelName] = model.id.split("/")}
-					<button
-						class="flex w-full cursor-pointer items-center px-2 py-1.5 text-sm
+			{#snippet modelEntry(model: Model | CustomModel, trending?: boolean)}
+				{@const [nameSpace, modelName] = model.id.split("/")}
+				<button
+					class="flex w-full cursor-pointer items-center px-2 py-1.5 text-sm
 						data-[highlighted]:bg-gray-100 data-[highlighted]:dark:bg-gray-800"
-						data-model
-						{...combobox.getOption(model.id)}
-					>
-						{#if trending}
-							<div class=" mr-1.5 size-4 text-yellow-400">
-								<IconStar />
-							</div>
-						{/if}
+					data-model
+					{...combobox.getOption(model.id)}
+				>
+					{#if trending}
+						<div class=" mr-1.5 size-4 text-yellow-400">
+							<IconStar />
+						</div>
+					{/if}
 
-						{#if modelName}
-							<span class="inline-flex items-center">
-								<span class="text-gray-500 dark:text-gray-400">{nameSpace}</span>
-								<span class="mx-1 text-gray-300 dark:text-gray-700">/</span>
-								<span class="text-black dark:text-white">{modelName}</span>
-							</span>
-						{:else}
-							<span class="text-black dark:text-white">{nameSpace}</span>
-						{/if}
+					{#if modelName}
+						<span class="inline-flex items-center">
+							<span class="text-gray-500 dark:text-gray-400">{nameSpace}</span>
+							<span class="mx-1 text-gray-300 dark:text-gray-700">/</span>
+							<span class="text-black dark:text-white">{modelName}</span>
+						</span>
+					{:else}
+						<span class="text-black dark:text-white">{nameSpace}</span>
+					{/if}
 
-						{#if "pipeline_tag" in model && model.pipeline_tag === "image-text-to-text"}
-							<Tooltip openDelay={100}>
-								{#snippet trigger(tooltip)}
-									<div
-										class="ml-2 grid size-5 place-items-center rounded bg-gray-500/10 text-gray-500 dark:bg-gray-500/20 dark:text-gray-300"
-										{...tooltip.trigger}
-									>
-										<IconEye class="size-3.5" />
-									</div>
-								{/snippet}
-								Image text-to-text
-							</Tooltip>
-						{/if}
+					{#if "pipeline_tag" in model && model.pipeline_tag === "image-text-to-text"}
+						<Tooltip openDelay={100}>
+							{#snippet trigger(tooltip)}
+								<div
+									class="ml-2 grid size-5 place-items-center rounded bg-gray-500/10 text-gray-500 dark:bg-gray-500/20 dark:text-gray-300"
+									{...tooltip.trigger}
+								>
+									<IconEye class="size-3.5" />
+								</div>
+							{/snippet}
+							Image text-to-text
+						</Tooltip>
+					{/if}
 
-						{#if isCustom(model)}
-							<Tooltip openDelay={100}>
-								{#snippet trigger(tooltip)}
-									<div
-										class="ml-2 grid size-5 place-items-center rounded bg-gray-500/10 text-gray-500 dark:bg-gray-500/20 dark:text-gray-300"
-										{...tooltip.trigger}
-									>
-										<IconCube class="size-3.5" />
-									</div>
-								{/snippet}
-								Custom Model
-							</Tooltip>
-							<Tooltip>
-								{#snippet trigger(tooltip)}
-									<button
-										class="mr-1 ml-auto grid size-4.5 place-items-center rounded-sm bg-gray-100 text-xs
+					{#if isCustom(model)}
+						<Tooltip openDelay={100}>
+							{#snippet trigger(tooltip)}
+								<div
+									class="ml-2 grid size-5 place-items-center rounded bg-gray-500/10 text-gray-500 dark:bg-gray-500/20 dark:text-gray-300"
+									{...tooltip.trigger}
+								>
+									<IconCube class="size-3.5" />
+								</div>
+							{/snippet}
+							Custom Model
+						</Tooltip>
+						<Tooltip>
+							{#snippet trigger(tooltip)}
+								<button
+									class="mr-1 ml-auto grid size-4.5 place-items-center rounded-sm bg-gray-100 text-xs
 					hover:bg-gray-200 dark:bg-gray-600 dark:hover:bg-gray-500"
-										aria-label="Add custom model"
-										{...tooltip.trigger}
-										onclick={e => {
-											e.stopPropagation();
-											onClose?.();
-											openCustomModelConfig({
-												model,
-												onSubmit: model => {
-													onModelSelect?.(model.id);
-												},
-											});
-										}}
-									>
-										<IconEdit class="size-3" />
-									</button>
-								{/snippet}
-								<span class="text-sm">Edit</span>
-							</Tooltip>
-						{/if}
-					</button>
-				{/snippet}
-				{#if trending.length > 0}
-					<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Trending</div>
-					{#each trending as model}
-						{@render modelEntry(model, true)}
-					{/each}
-				{/if}
-				<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Custom endpoints</div>
-				{#if custom.length > 0}
-					{#each custom as model}
-						{@render modelEntry(model, false)}
-					{/each}
-				{/if}
-				<button
-					class="flex w-full cursor-pointer items-center gap-2 px-2 py-1.5 text-sm text-gray-500 data-[highlighted]:bg-blue-500/15 data-[highlighted]:text-blue-600 dark:text-gray-400 dark:data-[highlighted]:text-blue-300"
-					{...combobox.getOption("__custom__", () => {
-						onClose?.();
-						openCustomModelConfig({
-							onSubmit: model => {
-								onModelSelect?.(model.id);
-							},
-						});
-					})}
-				>
-					<IconAdd class="rounded bg-blue-500/10 text-blue-600" />
-					Add a custom endpoint
+									aria-label="Add custom model"
+									{...tooltip.trigger}
+									onclick={e => {
+										e.stopPropagation();
+										onClose?.();
+										openCustomModelConfig({
+											model,
+											onSubmit: model => {
+												onModelSelect?.(model.id);
+											},
+										});
+									}}
+								>
+									<IconEdit class="size-3" />
+								</button>
+							{/snippet}
+							<span class="text-sm">Edit</span>
+						</Tooltip>
+					{/if}
 				</button>
-				{#if other.length > 0}
-					<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Other models</div>
-					{#each other as model}
-						{@render modelEntry(model, false)}
-					{/each}
-				{/if}
-			</div>
+			{/snippet}
+			{#if trending.length > 0}
+				<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Trending</div>
+				{#each trending as model}
+					{@render modelEntry(model, true)}
+				{/each}
+			{/if}
+			<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Custom endpoints</div>
+			{#if custom.length > 0}
+				{#each custom as model}
+					{@render modelEntry(model, false)}
+				{/each}
+			{/if}
+			<button
+				class="flex w-full cursor-pointer items-center gap-2 px-2 py-1.5 text-sm text-gray-500 data-[highlighted]:bg-blue-500/15 data-[highlighted]:text-blue-600 dark:text-gray-400 dark:data-[highlighted]:text-blue-300"
+				{...combobox.getOption("__custom__", () => {
+					onClose?.();
+					openCustomModelConfig({
+						onSubmit: model => {
+							onModelSelect?.(model.id);
+						},
+					});
+				})}
+			>
+				<IconAdd class="rounded bg-blue-500/10 text-blue-600" />
+				Add a custom endpoint
+			</button>
+			{#if other.length > 0}
+				<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Other models</div>
+				{#each other as model}
+					{@render modelEntry(model, false)}
+				{/each}
+			{/if}
 		</div>
 	</div>
 </div>

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

@@ -177,7 +177,8 @@
 		const RE_HF_TOKEN = /\bhf_[a-zA-Z0-9]{34}\b/;
 		if (RE_HF_TOKEN.test(submittedHfToken)) {
 			token.value = submittedHfToken;
-			submit();
+			// TODO: Only submit when previous action was trying to submit
+			// submit();
 		} else {
 			alert("Please provide a valid HF token.");
 		}
@@ -211,13 +212,18 @@
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class="motion-safe:animate-fade-in grid h-dvh divide-gray-200 overflow-hidden bg-gray-100/50 max-md:grid-rows-[120px_1fr] max-md:divide-y dark:divide-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:[color-scheme:dark] {compareActive
-		? 'md:grid-cols-[clamp(220px,20%,350px)_minmax(0,1fr)]'
-		: 'md:grid-cols-[clamp(220px,20%,350px)_minmax(0,1fr)_clamp(270px,25%,300px)]'}"
+	class={[
+		"motion-safe:animate-fade-in grid h-dvh divide-gray-200 overflow-hidden bg-gray-100/50",
+		"max-md:grid-rows-[120px_1fr] max-md:divide-y",
+		"dark:divide-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:[color-scheme:dark]",
+		compareActive
+			? "md:grid-cols-[clamp(220px,20%,350px)_minmax(0,1fr)]"
+			: "md:grid-cols-[clamp(220px,20%,350px)_minmax(0,1fr)_clamp(270px,25%,300px)]",
+	]}
 >
 	<!-- First column -->
 	<div class="flex flex-col gap-2 overflow-y-auto py-3 pr-3 max-md:pl-3">
-		<div class="pl-2">
+		<div class="md:pl-2">
 			<ProjectSelect />
 		</div>
 		<div
@@ -245,13 +251,13 @@
 	</div>
 
 	<!-- Center column -->
-	<div class="relative divide-y divide-gray-200 dark:divide-gray-800" onkeydown={onKeydown}>
+	<div class="relative flex h-full flex-col overflow-hidden" onkeydown={onKeydown}>
 		<Toaster />
 		<div
-			class="flex h-[calc(100dvh-5rem-120px)] divide-x divide-gray-200 overflow-x-auto overflow-y-hidden *:w-full max-sm:w-dvw md:h-[calc(100dvh-5rem)] md:pt-3 dark:divide-gray-800"
+			class="flex flex-1 divide-x divide-gray-200 overflow-x-auto overflow-y-hidden *:w-full max-sm:w-dvw md:pt-3 dark:divide-gray-800"
 		>
 			{#each session.project.conversations as conversation, conversationIdx (conversation)}
-				<div class="max-sm:min-w-full">
+				<div class="flex h-full flex-col overflow-hidden max-sm:min-w-full">
 					{#if compareActive}
 						<PlaygroundConversationHeader
 							{conversationIdx}
@@ -266,14 +272,15 @@
 							v => (session.project.conversations[conversationIdx] = v)
 						}
 						{viewCode}
-						{compareActive}
 						on:closeCode={() => (viewCode = false)}
 					/>
 				</div>
 			{/each}
 		</div>
+
+		<!-- Bottom bar -->
 		<div
-			class="fixed inset-x-0 bottom-0 flex h-20 items-center justify-center gap-2 overflow-hidden px-3 whitespace-nowrap md:absolute"
+			class="relative mt-auto flex h-20 shrink-0 items-center justify-center gap-2 overflow-hidden border-t border-gray-200 px-3 whitespace-nowrap dark:border-gray-800"
 		>
 			<div class="flex flex-1 justify-start gap-x-2">
 				{#if !compareActive}
@@ -285,7 +292,7 @@
 						<div class="text-black dark:text-white">
 							<IconSettings />
 						</div>
-						{!viewSettings ? "Settings" : "Hide Settings"}
+						{!viewSettings ? "Settings" : "Hide"}
 					</button>
 				{/if}
 				<Tooltip>
@@ -297,9 +304,11 @@
 					Clear conversation
 				</Tooltip>
 			</div>
-			<div class="flex flex-1 shrink-0 items-center justify-center gap-x-8 text-center text-sm text-gray-500">
+			<div
+				class="pointer-events-none absolute inset-0 flex flex-1 shrink-0 items-center justify-around gap-x-8 text-center text-sm text-gray-500 max-xl:hidden"
+			>
 				{#each generationStats as { latency, generatedTokensCount }}
-					<span class="max-xl:hidden">{generatedTokensCount} tokens · Latency {latency}ms</span>
+					<span>{generatedTokensCount} tokens · Latency {latency}ms</span>
 				{/each}
 			</div>
 			<div class="flex flex-1 justify-end gap-x-2">
@@ -346,74 +355,83 @@
 
 	<!-- Last column -->
 	{#if !compareActive}
-		<div class="flex flex-col p-3 {viewSettings ? 'max-md:fixed' : 'max-md:hidden'} max-md:inset-x-0 max-md:bottom-20">
+		<div class={[viewSettings && "max-md:fixed max-md:inset-0 max-md:bottom-20 max-md:backdrop-blur-lg"]}>
 			<div
-				class="flex flex-1 flex-col gap-6 overflow-y-hidden rounded-xl border border-gray-200/80 bg-white bg-linear-to-b from-white via-white p-3 shadow-xs dark:border-white/5 dark:bg-gray-900 dark:from-gray-800/40 dark:via-gray-800/40"
+				class={[
+					"flex h-full flex-col  p-3 max-md:absolute max-md:inset-x-0 max-md:bottom-0",
+					viewSettings ? "max-md:fixed" : "max-md:hidden",
+				]}
 			>
-				<div class="flex flex-col gap-2">
-					<ModelSelector bind:conversation={session.project.conversations[0]!} />
-					<div class="flex items-center gap-2 self-end px-2 text-xs whitespace-nowrap">
-						<button
-							class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
-							onclick={() => (selectCompareModelOpen = true)}
-						>
-							<IconCompare />
-							Compare
-						</button>
-						<a
-							href="https://huggingface.co/{session.project.conversations[0]?.model.id}?inference_provider={session
-								.project.conversations[0]?.provider}"
-							target="_blank"
-							class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
-						>
-							<IconExternal class="text-2xs" />
-							Model page
-						</a>
+				<div
+					class="flex flex-1 flex-col gap-6 overflow-y-hidden rounded-xl border border-gray-200/80 bg-white bg-linear-to-b from-white via-white p-3 shadow-xs dark:border-white/5 dark:bg-gray-900 dark:from-gray-800/40 dark:via-gray-800/40"
+				>
+					<div class="flex flex-col gap-2">
+						<ModelSelector bind:conversation={session.project.conversations[0]!} />
+						<div class="flex items-center gap-2 self-end px-2 text-xs whitespace-nowrap">
+							<button
+								class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+								onclick={() => (selectCompareModelOpen = true)}
+							>
+								<IconCompare />
+								Compare
+							</button>
+							<a
+								href="https://huggingface.co/{session.project.conversations[0]?.model.id}?inference_provider={session
+									.project.conversations[0]?.provider}"
+								target="_blank"
+								class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+							>
+								<IconExternal class="text-2xs" />
+								Model page
+							</a>
+						</div>
 					</div>
-				</div>
 
-				<GenerationConfig bind:conversation={session.project.conversations[0]!} />
+					<GenerationConfig bind:conversation={session.project.conversations[0]!} />
 
-				<div class="mt-auto flex items-center justify-end gap-4">
-					<button
-						onclick={() => showShareModal(session.project)}
-						class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
-					>
-						<IconShare class="text-xs" />
-						Share
-					</button>
-					{#if token.value}
+					<div class="mt-auto flex items-center justify-end gap-4">
 						<button
-							onclick={token.reset}
+							onclick={() => showShareModal(session.project)}
 							class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
 						>
-							<svg xmlns="http://www.w3.org/2000/svg" class="text-xs" width="1em" height="1em" viewBox="0 0 32 32">
-								<path
-									fill="currentColor"
-									d="M23.216 4H26V2h-7v6h2V5.096A11.96 11.96 0 0 1 28 16c0 6.617-5.383 12-12 12v2c7.72 0 14-6.28 14-14c0-5.009-2.632-9.512-6.784-12"
-								/>
-								<path fill="currentColor" d="M16 20a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3M15 9h2v9h-2z" /><path
-									fill="currentColor"
-									d="M16 4V2C8.28 2 2 8.28 2 16c0 4.977 2.607 9.494 6.784 12H6v2h7v-6h-2v2.903A11.97 11.97 0 0 1 4 16C4 9.383 9.383 4 16 4"
-								/>
-							</svg>
-							Reset token
+							<IconShare class="text-xs" />
+							Share
 						</button>
-					{/if}
-				</div>
-
-				<div class="mt-auto hidden">
-					<div class="mb-3 flex items-center justify-between gap-2">
-						<label for="default-range" class="block text-sm font-medium text-gray-900 dark:text-white">API Quota</label>
-						<span
-							class="rounded-sm bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300"
-							>Free</span
-						>
-
-						<div class="ml-auto w-12 text-right text-sm">76%</div>
+						{#if token.value}
+							<button
+								onclick={token.reset}
+								class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
+							>
+								<svg xmlns="http://www.w3.org/2000/svg" class="text-xs" width="1em" height="1em" viewBox="0 0 32 32">
+									<path
+										fill="currentColor"
+										d="M23.216 4H26V2h-7v6h2V5.096A11.96 11.96 0 0 1 28 16c0 6.617-5.383 12-12 12v2c7.72 0 14-6.28 14-14c0-5.009-2.632-9.512-6.784-12"
+									/>
+									<path fill="currentColor" d="M16 20a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3M15 9h2v9h-2z" /><path
+										fill="currentColor"
+										d="M16 4V2C8.28 2 2 8.28 2 16c0 4.977 2.607 9.494 6.784 12H6v2h7v-6h-2v2.903A11.97 11.97 0 0 1 4 16C4 9.383 9.383 4 16 4"
+									/>
+								</svg>
+								Reset token
+							</button>
+						{/if}
 					</div>
-					<div class="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
-						<div class="h-2 rounded-full bg-black dark:bg-gray-400" style="width: 75%"></div>
+
+					<div class="mt-auto hidden">
+						<div class="mb-3 flex items-center justify-between gap-2">
+							<label for="default-range" class="block text-sm font-medium text-gray-900 dark:text-white"
+								>API Quota</label
+							>
+							<span
+								class="rounded-sm bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300"
+								>Free</span
+							>
+
+							<div class="ml-auto w-12 text-right text-sm">76%</div>
+						</div>
+						<div class="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
+							<div class="h-2 rounded-full bg-black dark:bg-gray-400" style="width: 75%"></div>
+						</div>
 					</div>
 				</div>
 			</div>

src/lib/components/share-modal.svelte

@@ -53,7 +53,7 @@
 		>
 			<!-- Content -->
 			<div
-				class="relative w-xl rounded-xl bg-white shadow-sm dark:bg-gray-900"
+				class="relative w-xl max-w-[calc(100dvw-2rem)] rounded-xl bg-white shadow-sm dark:bg-gray-900"
 				use:clickOutside={() => close()}
 				transition:scale={{ start: 0.975, duration: 250 }}
 			>

src/lib/components/tooltip.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
-	import { type ComponentProps, type Extracted } from "melt";
+	import { getters, type ComponentProps, type Extracted } from "melt";
 	import { Tooltip, type TooltipProps } from "melt/builders";
 	import type { Snippet } from "svelte";
 
 	type FloatingConfig = NonNullable<Extracted<TooltipProps["floatingConfig"]>>;
 
-	interface Props {
+	interface Props extends Omit<ComponentProps<TooltipProps>, "floatingConfig"> {
 		children: Snippet;
 		trigger: Snippet<[Tooltip]>;
 		placement?: NonNullable<FloatingConfig["computePosition"]>["placement"];
 		openDelay?: ComponentProps<TooltipProps>["openDelay"];
+		disabled?: boolean;
 	}
-	const { children, trigger, placement = "top", openDelay = 500 }: Props = $props();
+	const { children, trigger, placement = "top", openDelay = 500, disabled, ...rest }: Props = $props();
 
+	let open = $state(false);
 	const tooltip = new Tooltip({
 		forceVisible: true,
 		floatingConfig: () => ({
@@ -22,7 +24,13 @@
 				padding: 10,
 			},
 		}),
+		open: () => open,
+		onOpenChange(v) {
+			if (disabled) open = false;
+			else open = v;
+		},
 		openDelay: () => openDelay,
+		...getters(rest),
 	});
 </script>
 

src/lib/state/session.svelte.ts

@@ -91,20 +91,22 @@ class SessionState {
 			const searchProviders = searchParams.getAll("provider");
 			const searchModelIds = searchParams.getAll("modelId");
 			const modelsFromSearch = searchModelIds.map(id => models.remote.find(model => model.id === id)).filter(Boolean);
-			if (modelsFromSearch.length > 0) savedSession.activeProjectId = "default";
-
-			let min = Math.min(dp.conversations.length, modelsFromSearch.length, searchProviders.length);
-			min = Math.max(1, min);
-			const convos = dp.conversations.slice(0, min);
-			if (typia.is<Project["conversations"]>(convos)) dp.conversations = convos;
-
-			for (let i = 0; i < min; i++) {
-				const conversation = dp.conversations[i] ?? defaultConversation;
-				dp.conversations[i] = {
-					...conversation,
-					model: modelsFromSearch[i] ?? conversation.model,
-					provider: searchProviders[i] ?? conversation.provider,
-				};
+			if (modelsFromSearch.length > 0) {
+				savedSession.activeProjectId = "default";
+
+				let min = Math.min(dp.conversations.length, modelsFromSearch.length, searchProviders.length);
+				min = Math.max(1, min);
+				const convos = dp.conversations.slice(0, min);
+				if (typia.is<Project["conversations"]>(convos)) dp.conversations = convos;
+
+				for (let i = 0; i < min; i++) {
+					const conversation = dp.conversations[i] ?? defaultConversation;
+					dp.conversations[i] = {
+						...conversation,
+						model: modelsFromSearch[i] ?? conversation.model,
+						provider: searchProviders[i] ?? conversation.provider,
+					};
+				}
 			}
 		}
 

src/lib/utils/form.svelte.ts

@@ -0,0 +1,35 @@
+export type CreateFieldValidationArgs = {
+	validate: (v: string) => string | void | undefined;
+};
+
+export function createFieldValidation(args: CreateFieldValidationArgs) {
+	let valid = $state(true);
+	let msg = $state<string>();
+
+	const onblur = (e: Event & { currentTarget: HTMLInputElement }) => {
+		const v = e.currentTarget?.value;
+		const m = args.validate(v);
+		valid = !m;
+		msg = m ?? undefined;
+	};
+
+	const oninput = (e: Event & { currentTarget: HTMLInputElement }) => {
+		if (valid) return;
+		const v = e.currentTarget.value;
+		const m = args.validate(v);
+		msg = m ? m : undefined;
+	};
+
+	return {
+		get valid() {
+			return valid;
+		},
+		get msg() {
+			return msg;
+		},
+		attrs: {
+			onblur,
+			oninput,
+		},
+	};
+}

src/lib/utils/url.ts

@@ -0,0 +1,8 @@
+export function isValidURL(url: string): boolean {
+	try {
+		new URL(url);
+		return true;
+	} catch {
+		return false;
+	}
+}

vite.config.ts

@@ -3,6 +3,8 @@ import { defineConfig } from "vite";
 import UnpluginTypia from "@ryoppippi/unplugin-typia/vite";
 import Icons from "unplugin-icons/vite";
 
+export const isDev = process.env.NODE_ENV === "development";
+
 export default defineConfig({
 	plugins: [
 		UnpluginTypia({
@@ -15,4 +17,7 @@ export default defineConfig({
 			autoInstall: true,
 		}),
 	],
+	server: {
+		allowedHosts: isDev ? true : undefined,
+	},
 });