create custom prompt api

src/app.css

@@ -47,6 +47,15 @@
 	@apply -translate-x-1/2;
 }
 
+@utility abs-y-center {
+	top: 50%;
+	@apply -translate-y-1/2;
+}
+
+@utility abs-center {
+	@apply abs-x-center abs-y-center;
+}
+
 @utility btn {
 	@apply flex h-[39px] items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:ring-4 focus:ring-gray-100 focus:outline-hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700;
 }

src/lib/actions/click-outside.ts

@@ -0,0 +1,24 @@
+import type { Action } from "svelte/action";
+
+export const clickOutside: Action<HTMLElement, () => void> = (node, callback) => {
+	let _callback = callback;
+
+	function update(callback: () => void) {
+		_callback = callback;
+	}
+
+	function handleClick(event: MouseEvent) {
+		if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
+			_callback();
+		}
+	}
+
+	document.addEventListener("click", handleClick, true);
+
+	return {
+		update,
+		destroy() {
+			document.removeEventListener("click", handleClick, true);
+		},
+	};
+};

src/lib/components/DebugMenu.svelte

@@ -2,6 +2,8 @@
 	import { dev } from "$app/environment";
 	import { session } from "$lib/stores/session";
 	import { createPopover } from "@melt-ui/svelte";
+	import { prompt } from "./Prompts.svelte";
+	import { token } from "$lib/stores/token";
 
 	let innerWidth: number;
 	let innerHeight: number;
@@ -51,6 +53,23 @@
 					>
 						Log session to console
 					</button>
+					<button
+						class="rounded-md bg-gray-200 px-3 py-1 text-sm hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
+						on:click={async () => {
+							console.log(await prompt("Test prompt"));
+						}}
+					>
+						Test prompt
+					</button>
+
+					<button
+						class="rounded-md bg-gray-200 px-3 py-1 text-sm hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
+						on:click={async () => {
+							$token.showModal = true;
+						}}
+					>
+						Show token modal
+					</button>
 				</div>
 			</div>
 		</div>

src/lib/components/InferencePlayground/InferencePlaygroundHFTokenModal.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { clickOutside } from "$lib/actions/click-outside";
 	import { createEventDispatcher, onDestroy, onMount } from "svelte";
 
 	import IconCross from "~icons/carbon/close";
@@ -18,15 +19,6 @@
 		}
 	}
 
-	function handleBackdropClick(event: MouseEvent) {
-		if (window?.getSelection()?.toString()) {
-			return;
-		}
-		if (event.target === backdropEl) {
-			dispatch("close");
-		}
-	}
-
 	onMount(() => {
 		document.getElementById("app")?.setAttribute("inert", "true");
 		modalEl.focus();
@@ -46,7 +38,6 @@
 	aria-hidden="true"
 	class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/85"
 	bind:this={backdropEl}
-	on:click|stopPropagation={handleBackdropClick}
 >
 	<div
 		role="dialog"
@@ -54,6 +45,7 @@
 		class="relative max-h-full w-full max-w-xl p-4 outline-hidden"
 		bind:this={modalEl}
 		on:keydown={handleKeydown}
+		use:clickOutside={() => dispatch("close")}
 	>
 		<form on:submit|preventDefault class="relative rounded-lg bg-white shadow-sm dark:bg-gray-900">
 			<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/InferencePlayground/InferencePlaygroundProjectSelect.svelte

@@ -7,6 +7,7 @@
 	import IconEdit from "~icons/carbon/edit";
 	import IconSave from "~icons/carbon/save";
 	import IconDelete from "~icons/carbon/trash-can";
+	import { prompt } from "../Prompts.svelte";
 
 	let classNames: string = "";
 	export { classNames as class };
@@ -23,8 +24,8 @@
 		$session.activeProjectId = p?.value;
 	});
 
-	function saveProject() {
-		session.saveProject(prompt("Project name") || "Project #" + ($session.projects.length + 1));
+	async function saveProject() {
+		session.saveProject((await prompt("Project name")) || "Project #" + ($session.projects.length + 1));
 	}
 </script>
 
@@ -68,9 +69,9 @@
 					<div class="ml-auto flex items-center gap-1">
 						<button
 							class="grid place-items-center rounded-md p-1 text-xs hover:bg-gray-300 dark:hover:bg-gray-600"
-							on:click={e => {
+							on:click={async e => {
 								e.stopPropagation();
-								session.updateProject(id, { name: prompt("Project name", name) || name });
+								session.updateProject(id, { name: (await prompt("Project name", name)) || name });
 							}}
 						>
 							<IconEdit />

src/lib/components/Prompts.svelte

@@ -0,0 +1,94 @@
+<script lang="ts" context="module">
+	import { clickOutside } from "$lib/actions/click-outside";
+	import { writable } from "svelte/store";
+	import IconCross from "~icons/carbon/close";
+
+	type Prompt = {
+		label: string;
+		value?: string;
+		placeholder?: string;
+		callback: (value: string) => void;
+	};
+
+	const prompts = writable<Prompt[]>([]);
+
+	export function resolvePrompt() {
+		prompts.update(p => {
+			p[0]?.callback(p[0]?.value ?? "");
+			return p.slice(1);
+		});
+	}
+
+	export async function prompt(label: string, defaultVAlue?: string): Promise<string> {
+		return new Promise(res => {
+			prompts.update(p => [...p, { label, value: defaultVAlue, callback: res }]);
+		});
+	}
+</script>
+
+<script lang="ts">
+	$: current = $prompts?.[0];
+
+	let dialog: HTMLDialogElement | undefined;
+
+	$: if (current) {
+		dialog?.showModal();
+	} else {
+		dialog?.close();
+	}
+
+	function onSubmit(e: Event) {
+		e.preventDefault();
+		resolvePrompt();
+	}
+</script>
+
+<dialog bind:this={dialog} on:close={resolvePrompt}>
+	{#if current}
+		<div class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/85">
+			<form
+				on:submit={onSubmit}
+				class="relative w-xl rounded-lg bg-white shadow-sm dark:bg-gray-900"
+				use:clickOutside={resolvePrompt}
+			>
+				<div class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-800">
+					<h3 class="flex items-center gap-2.5 text-lg font-semibold text-gray-900 dark:text-white">Prompt</h3>
+					<button
+						type="button"
+						class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
+						on:click={resolvePrompt}
+					>
+						<div class="text-xl">
+							<IconCross />
+						</div>
+						<span class="sr-only">Close modal</span>
+					</button>
+				</div>
+				<!-- Modal body -->
+				<div class="p-4 md:p-5">
+					<label class="flex flex-col gap-2 font-medium text-gray-900 dark:text-white">
+						<p>{current.label}</p>
+						<!-- svelte-ignore a11y-autofocus - this is fine in dialogs -->
+						<input
+							bind:value={current.value}
+							placeholder={current.placeholder}
+							autofocus
+							required
+							type="text"
+							class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+						/>
+					</label>
+				</div>
+
+				<!-- Modal footer -->
+				<div class="flex rounded-b border-t border-gray-200 p-4 md:p-5 dark:border-gray-800">
+					<button
+						type="submit"
+						class="ml-auto 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-hidden dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+						>Submit</button
+					>
+				</div>
+			</form>
+		</div>
+	{/if}
+</dialog>

src/routes/+layout.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import "../app.css";
 	import DebugMenu from "$lib/components/DebugMenu.svelte";
+	import Prompts from "$lib/components/Prompts.svelte";
 </script>
 
 <slot />
 <DebugMenu />
+<Prompts />