img preview

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 -->
+			<div
+				class="relative w-lg rounded-xl bg-white shadow-sm dark:bg-gray-900"
+				use:clickOutside={() => (img = undefined)}
+				transition:scale={{ start: 0.975, duration: 250 }}
+			>
+				<img src={img} alt="" />
+			</div>
+
+			<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} />