Img preview (#70)

package.json

@@ -16,6 +16,7 @@
 	"devDependencies": {
 		"@eslint/eslintrc": "^3.3.0",
 		"@eslint/js": "^9.22.0",
+		"@floating-ui/dom": "^1.6.13",
 		"@huggingface/hub": "^1.0.1",
 		"@huggingface/inference": "^3.5.1",
 		"@huggingface/tasks": "^0.17.1",
@@ -36,7 +37,7 @@
 		"globals": "^16.0.0",
 		"highlight.js": "^11.10.0",
 		"jiti": "^2.4.2",
-		"melt": "^0.18.4",
+		"melt": "^0.20.2",
 		"postcss": "^8.4.38",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.2.6",

pnpm-lock.yaml

@@ -21,6 +21,9 @@ importers:
       '@eslint/js':
         specifier: ^9.22.0
         version: 9.22.0
+      '@floating-ui/dom':
+        specifier: ^1.6.13
+        version: 1.6.13
       '@huggingface/hub':
         specifier: ^1.0.1
         version: 1.0.1
@@ -82,8 +85,8 @@ importers:
         specifier: ^2.4.2
         version: 2.4.2
       melt:
-        specifier: ^0.18.4
-        version: 0.18.4(@floating-ui/dom@1.6.13)(svelte@5.23.0)
+        specifier: ^0.20.2
+        version: 0.20.2(@floating-ui/dom@1.6.13)(svelte@5.23.0)
       postcss:
         specifier: ^8.4.38
         version: 8.5.3
@@ -1545,8 +1548,8 @@ packages:
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
-  melt@0.18.4:
-    resolution: {integrity: sha512-AH7im4MEmHS/8MFhGDnfiuF4ibdm0guFWiBvBaF93YIzA0hhuWMcGxD8HdEsQ8q1Q6xIIRm9FdGd0WICc7Nk2A==}
+  melt@0.20.2:
+    resolution: {integrity: sha512-vINBKFVqFN8LVU6K7AbEwlGTOzSi5BQulxhKkIroxPWnCA3LVsQEIDZabtf9TtnzFa/th0Rm8J0N+hW1v7VJDw==}
     peerDependencies:
       '@floating-ui/dom': ^1.6.0
       svelte: ^5.0.0
@@ -3471,7 +3474,7 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  melt@0.18.4(@floating-ui/dom@1.6.13)(svelte@5.23.0):
+  melt@0.20.2(@floating-ui/dom@1.6.13)(svelte@5.23.0):
     dependencies:
       '@floating-ui/dom': 1.6.13
       jest-axe: 9.0.0

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

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { clickOutside } from "$lib/actions/click-outside.js";
+	import { fade, scale } from "svelte/transition";
+	import IconCross from "~icons/carbon/close";
+
+	interface Props {
+		img?: string;
+	}
+
+	let { img = $bindable() }: Props = $props();
+
+	let dialog: HTMLDialogElement | undefined = $state();
+
+	$effect(() => {
+		if (img) {
+			dialog?.showModal();
+		} else {
+			setTimeout(() => dialog?.close(), 250);
+		}
+	});
+</script>
+
+<dialog
+	class="backdrop:bg-transparent"
+	bind:this={dialog}
+	onclose={e => {
+		e.preventDefault();
+		img = undefined;
+	}}
+>
+	{#if img}
+		<!-- Backdrop -->
+		<div
+			class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/50 backdrop-blur-sm"
+			transition:fade={{ duration: 150 }}
+		>
+			<!-- Content -->
+			<img
+				class="max-h-[calc(100vh-120px)] max-w-[calc(100vw-120px)] object-contain"
+				src={img}
+				alt=""
+				use:clickOutside={() => (img = undefined)}
+				transition:scale={{ start: 0.975, duration: 250 }}
+			/>
+
+			<button
+				type="button"
+				class="absolute top-3 right-3 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"
+				onclick={() => (img = undefined)}
+				aria-label="Close modal"
+			>
+				<div class="text-xl">
+					<IconCross />
+				</div>
+			</button>
+		</div>
+	{/if}
+</dialog>

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

@@ -6,6 +6,8 @@
 	import { FileUpload } from "melt/builders";
 	import { fade } from "svelte/transition";
 	import IconImage from "~icons/carbon/image-reference";
+	import IconMaximize from "~icons/carbon/maximize";
+	import ImgPreview from "./img-preview.svelte";
 
 	type Props = {
 		conversation: Conversation;
@@ -41,6 +43,8 @@
 		},
 		disabled: () => !canUploadImgs,
 	});
+
+	let previewImg = $state<string>();
 </script>
 
 <div
@@ -119,16 +123,28 @@
 			</Tooltip>
 		</div>
 	</div>
+
 	{#if message.images?.length}
 		<div class="mt-2">
 			<div class="flex items-center gap-2">
 				{#each message.images as img (img)}
 					<div class="group/img relative">
+						<button
+							aria-label="expand"
+							class="absolute inset-0 z-10 grid place-items-center bg-gray-800/70 opacity-0 group-hover/img:opacity-100"
+							onclick={() => (previewImg = img)}
+						>
+							<IconMaximize />
+						</button>
 						<img src={img} alt="uploaded" class="size-12 rounded-lg object-cover" />
 						<button
+							aria-label="remove"
 							type="button"
-							onclick={() => (message.images = message.images?.filter(i => i !== img))}
-							class="invisible absolute -top-1 -right-1 grid size-5 place-items-center rounded-full bg-gray-800 text-xs text-white group-hover/img:visible hover:bg-gray-700"
+							onclick={e => {
+								e.stopPropagation();
+								message.images = message.images?.filter(i => i !== img);
+							}}
+							class="invisible absolute -top-1 -right-1 z-20 grid size-5 place-items-center rounded-full bg-gray-800 text-xs text-white group-hover/img:visible hover:bg-gray-700"
 						>
 							✕
 						</button>
@@ -138,3 +154,5 @@
 		</div>
 	{/if}
 </div>
+
+<ImgPreview bind:img={previewImg} />

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

@@ -8,6 +8,7 @@
 	import IconSave from "~icons/carbon/save";
 	import IconDelete from "~icons/carbon/trash-can";
 	import { prompt } from "../prompts.svelte";
+	import Tooltip from "../tooltip.svelte";
 
 	interface Props {
 		class?: string;
@@ -47,14 +48,29 @@
 			<IconCaret />
 		</div>
 	</button>
+
 	{#if isDefault}
-		<button class="btn size-[32px] p-0" onclick={saveProject}>
-			<IconSave />
-		</button>
+		<Tooltip>
+			{#snippet trigger(tooltip)}
+				<button class="btn size-[32px] p-0" {...tooltip.trigger} onclick={saveProject}>
+					<IconSave />
+				</button>
+			{/snippet}
+			Save to Project
+		</Tooltip>
 	{:else}
-		<button class="btn size-[32px] p-0" onclick={() => (session.$.activeProjectId = "default")}>
-			<IconCross />
-		</button>
+		<Tooltip>
+			{#snippet trigger(tooltip)}
+				<button
+					class="btn size-[32px] p-0"
+					{...tooltip.trigger}
+					onclick={() => (session.$.activeProjectId = "default")}
+				>
+					<IconCross />
+				</button>
+			{/snippet}
+			Close project
+		</Tooltip>
 	{/if}
 </div>
 

src/lib/components/tooltip.svelte

@@ -1,19 +1,27 @@
 <script lang="ts">
-	import { Tooltip, type TooltipProps } from "melt/builders";
 	import { 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 {
 		children: Snippet;
 		trigger: Snippet<[Tooltip]>;
-		placement?: NonNullable<Extracted<TooltipProps["computePositionOptions"]>>["placement"];
+		placement?: NonNullable<FloatingConfig["computePosition"]>["placement"];
 		openDelay?: ComponentProps<TooltipProps>["openDelay"];
 	}
-	const { children, trigger, placement = "top", openDelay }: Props = $props();
+	const { children, trigger, placement = "top", openDelay = 500 }: Props = $props();
 
 	const tooltip = new Tooltip({
 		forceVisible: true,
-		computePositionOptions: () => ({ placement }),
+		floatingConfig: () => ({
+			computePosition: { placement },
+			flip: {
+				fallbackPlacements: ["bottom"],
+				padding: 10,
+			},
+		}),
 		openDelay: () => openDelay,
 	});
 </script>