UI tweaks (#80)

Co-authored-by: Thomas G. Lopes <26071571+TGlide@users.noreply.github.com>

src/lib/components/icon-custom.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { SVGAttributes } from "svelte/elements";
 
-	type Icon = "regen";
+	type Icon = "regen" | "refresh";
 
 	interface Props extends SVGAttributes<SVGElement> {
 		icon: Icon;
@@ -18,3 +18,12 @@
 		/>
 	</svg>
 {/if}
+
+{#if icon === "refresh"}
+	<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
+		><path
+			d="M9.02 3.54A5.73 5.73 0 0 0 5.9 14.05v-2.71h1.04v4.16H2.77v-1.04H4.7A6.76 6.76 0 0 1 9.02 2.5v1.04Zm6.17 0h-1.92A6.76 6.76 0 0 1 8.94 15.5v-1.04a5.73 5.73 0 0 0 3.13-10.51v2.71h-1.04V2.5h4.16v1.04Z"
+			fill="currentColor"
+		/></svg
+	>
+{/if}

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

@@ -33,7 +33,7 @@
 
 		<div>
 			<div class="flex items-center justify-between">
-				<label for={key} class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
+				<label for={key} class="mb-0.5 block text-sm font-medium text-gray-900 dark:text-white">
 					{label}
 				</label>
 				<div class="flex items-center gap-2">

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

@@ -3,13 +3,16 @@
 	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";
+	import { copyToClipboard } from "$lib/utils/copy.js";
 	import { fileToDataURL } from "$lib/utils/file.js";
 	import { FileUpload } from "melt/builders";
 	import { fade } from "svelte/transition";
+	import IconCopy from "~icons/carbon/copy";
 	import IconImage from "~icons/carbon/image-reference";
 	import IconMaximize from "~icons/carbon/maximize";
 	import IconCustom from "../icon-custom.svelte";
 	import ImgPreview from "./img-preview.svelte";
+	import LocalToasts from "../local-toasts.svelte";
 
 	type Props = {
 		conversation: Conversation;
@@ -24,10 +27,11 @@
 	let { message = $bindable(), conversation, loading, autofocus, onDelete, onRegen, isLast }: Props = $props();
 
 	let element = $state<HTMLTextAreaElement>();
-	new TextareaAutosize({
+	const autosized = new TextareaAutosize({
 		element: () => element,
 		input: () => message.content ?? "",
 	});
+	const shouldStick = $derived(autosized.textareaHeight > 92);
 
 	const canUploadImgs = $derived(
 		message.role === "user" &&
@@ -59,13 +63,13 @@
 </script>
 
 <div
-	class="group/message group relative flex flex-col items-start gap-x-4 gap-y-2 border-b px-3.5 pt-4 pb-6 hover:bg-gray-100/70
-	 @2xl:px-6 dark:border-gray-800 dark:hover:bg-gray-800/30"
+	class="group/message group relative flex flex-col items-start gap-x-4 gap-y-2 border-b bg-white px-3.5 pt-4 pb-6 hover:bg-gray-100/70
+	 @2xl:px-6 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/30"
 	class:pointer-events-none={loading}
 	{...fileUpload.dropzone}
 	onclick={undefined}
 >
-	<div class=" flex w-full flex-col items-start gap-x-4 gap-y-2 @2xl:flex-row">
+	<div class="flex w-full flex-col items-start gap-x-4 gap-y-2 max-md:text-sm @2xl:flex-row">
 		{#if fileUpload.isDragging}
 			<div
 				class="absolute inset-2 z-10 flex flex-col items-center justify-center rounded-xl bg-gray-800/50 backdrop-blur-md"
@@ -76,7 +80,12 @@
 			</div>
 		{/if}
 
-		<div class="pt-3 text-sm font-semibold uppercase @2xl:basis-[130px]">
+		<div
+			class={[
+				"top-8 z-10 bg-inherit pt-3 text-sm font-semibold uppercase @2xl:basis-[130px] @2xl:self-start",
+				shouldStick && "@min-2xl:sticky",
+			]}
+		>
 			{message.role}
 		</div>
 		<div class="flex w-full gap-4">
@@ -90,65 +99,97 @@
 				data-message
 			></textarea>
 
-			{#if canUploadImgs}
-				<Tooltip openDelay={250}>
-					{#snippet trigger(tooltip)}
-						<button
-							tabindex="0"
-							type="button"
-							class="mt-1.5 -mr-2 grid size-8 place-items-center rounded-lg border border-gray-200 bg-white text-xs font-medium
-			text-gray-900 group-focus-within/message:visible group-hover/message:visible
-			hover:bg-gray-100 hover:text-blue-700 focus:z-10
-			focus:ring-4 focus:ring-gray-100 focus:outline-hidden sm:invisible 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"
-							{...tooltip.trigger}
-							{...fileUpload.trigger}
-						>
-							<IconImage />
-						</button>
-						<input {...fileUpload.input} />
-					{/snippet}
-					Add image
-				</Tooltip>
-			{/if}
-
-			<Tooltip>
-				{#snippet trigger(tooltip)}
-					<button
-						tabindex="0"
-						onclick={onRegen}
-						type="button"
-						class="mt-1.5 -mr-2 grid size-8 place-items-center rounded-lg border border-gray-200 bg-white text-xs font-medium text-gray-900
-			group-focus-within/message:visible group-hover/message:visible hover:bg-gray-100
-			hover:text-blue-700 focus:z-10 focus:ring-4
-			focus:ring-gray-100 focus:outline-hidden sm:invisible 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"
-						{...tooltip.trigger}
-					>
-						<IconCustom icon="regen" />
-					</button>
-				{/snippet}
-				{regenLabel}
-			</Tooltip>
-
-			<Tooltip>
-				{#snippet trigger(tooltip)}
-					<button
-						tabindex="0"
-						onclick={onDelete}
-						type="button"
-						class="mt-1.5 size-8 rounded-lg border border-gray-200 bg-white text-xs font-medium text-gray-900
-			group-focus-within/message:visible group-hover/message:visible hover:bg-gray-100
-			hover:text-blue-700 focus:z-10 focus:ring-4
-			focus:ring-gray-100 focus:outline-hidden sm:invisible 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"
-						{...tooltip.trigger}
-					>
-						✕
-					</button>
-				{/snippet}
-				Delete
-			</Tooltip>
+			<!-- Sticky wrapper for action buttons -->
+			<div class={["top-8 z-10 self-start", shouldStick && "sticky"]}>
+				<div class="flex flex-col items-start gap-1 @2xl:flex-row @2xl:gap-4">
+					{#if canUploadImgs}
+						<Tooltip openDelay={250}>
+							{#snippet trigger(tooltip)}
+								<button
+									tabindex="0"
+									type="button"
+									class="mt-1.5 grid size-7 place-items-center rounded-lg border border-gray-200 bg-white text-xs font-medium text-gray-900
+					hover:bg-gray-100
+					hover:text-blue-700 focus:z-10 focus:ring-4
+					focus:ring-gray-100 focus:outline-hidden md:-mr-2 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"
+									{...tooltip.trigger}
+									{...fileUpload.trigger}
+								>
+									<IconImage />
+								</button>
+								<input {...fileUpload.input} />
+							{/snippet}
+							Add image
+						</Tooltip>
+					{/if}
+
+					<Tooltip>
+						{#snippet trigger(tooltip)}
+							<LocalToasts>
+								{#snippet children({ trigger, addToast })}
+									<button
+										tabindex="0"
+										onclick={() => {
+											copyToClipboard(message.content ?? "");
+											addToast({ data: { content: "✓", variant: "info" } });
+										}}
+										type="button"
+										class="mt-1.5 grid size-7 place-items-center rounded-lg border border-gray-200 bg-white text-xs font-medium text-gray-900 hover:bg-gray-100
+					hover:text-blue-700
+					focus:z-10 focus:ring-4 focus:ring-gray-100
+					focus:outline-hidden md:-mr-2 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"
+										{...tooltip.trigger}
+										{...trigger}
+									>
+										<IconCopy />
+									</button>
+								{/snippet}
+							</LocalToasts>
+						{/snippet}
+						Copy
+					</Tooltip>
+
+					<Tooltip>
+						{#snippet trigger(tooltip)}
+							<button
+								tabindex="0"
+								onclick={onRegen}
+								type="button"
+								class="mt-1.5 grid size-7 place-items-center rounded-lg border border-gray-200 bg-white text-xs font-medium text-gray-900 hover:bg-gray-100
+					hover:text-blue-700
+					focus:z-10 focus:ring-4 focus:ring-gray-100
+					focus:outline-hidden md:-mr-2 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"
+								{...tooltip.trigger}
+							>
+								<IconCustom icon={message.role === "user" ? "regen" : "refresh"} />
+							</button>
+						{/snippet}
+						{regenLabel}
+					</Tooltip>
+
+					<Tooltip>
+						{#snippet trigger(tooltip)}
+							<button
+								tabindex="0"
+								onclick={onDelete}
+								type="button"
+								class="mt-1.5 grid size-7 place-items-center rounded-lg border border-gray-200 bg-white text-xs font-medium text-gray-900 hover:bg-gray-100
+					hover:text-blue-700
+					focus:z-10 focus:ring-4 focus:ring-gray-100
+					focus:outline-hidden md:-mr-2 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"
+								{...tooltip.trigger}
+							>
+								✕
+							</button>
+						{/snippet}
+						Delete
+					</Tooltip>
+				</div>
+			</div>
 		</div>
 	</div>
 

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

@@ -70,7 +70,7 @@
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <!-- svelte-ignore a11y_click_events_have_key_events -->
-<div class="fixed inset-0 z-10 h-dvh bg-black/85 pt-32" bind:this={backdropEl} onclick={handleBackdropClick}>
+<div class="fixed inset-0 z-50 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"
 	>

src/lib/components/local-toasts.svelte

@@ -14,7 +14,7 @@
 	const id = $props.id();
 
 	export const trigger = {
-		id,
+		"data-local-toast-trigger": id,
 	} as const;
 
 	type ToastData = {
@@ -30,7 +30,7 @@
 	export const addToast = toaster.addToast;
 
 	function float(node: HTMLElement) {
-		const triggerEl = document.getElementById(trigger.id);
+		const triggerEl = document.querySelector(`[data-local-toast-trigger=${id}]`);
 		if (!triggerEl) return;
 
 		const compute = () =>