From 6d2574ecff4139accff62dfaf86c6c9167435115 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Thu, 3 Sep 2026 13:26:27 +0200
Subject: [PATCH] ui : chat template dialog copy feedback and in-row close
 button

The copy button swaps to a checkmark briefly; the close X moves into
the header row so it lines up with the title.

Assisted-by: pi:zai-org/GLM-5.3
---
 .../ModelsDiscoverChatTemplateDialog.svelte   | 37 ++++++++++++++++---
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverChatTemplateDialog.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverChatTemplateDialog.svelte
index 0cdf105970..d64642676e 100644
--- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverChatTemplateDialog.svelte
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverChatTemplateDialog.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Copy } from '@lucide/svelte';
+	import { Check, Copy, X } from '@lucide/svelte';
 	import * as Dialog from '$lib/components/ui/dialog';
 	import { copyToClipboard } from '$lib/utils';
 
@@ -15,23 +15,50 @@
 		open = value;
 		onOpenChange?.(value);
 	}
+
+	let copied = $state(false);
+
+	async function copy() {
+		await copyToClipboard(chatTemplate);
+		copied = true;
+		setTimeout(() => (copied = false), 1500);
+	}
 </script>
 
 <Dialog.Root onOpenChange={handleOpenChange} {open}>
 	<Dialog.Content
 		class="flex max-h-[calc(100vh-4rem)] flex-col gap-0 p-0 md:w-[calc(100vw-4rem)]! md:max-w-4xl!"
 	>
-		<Dialog.Header class="flex-row items-center justify-between border-b border-border/40 p-4">
+		<!-- The header's corner-pinned close X never lines up with a padded flex row,
+		     so it is replaced by one inside the row, aligned with the title -->
+		<Dialog.Header
+			class="flex-row items-center gap-2 border-b border-border/40 p-4"
+			showCloseButton={false}
+		>
 			<Dialog.Title class="text-sm font-semibold">Chat template</Dialog.Title>
 
 			<button
-				class="inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs font-medium transition-colors hover:bg-muted"
-				onclick={() => copyToClipboard(chatTemplate)}
+				aria-label="Copy chat template"
+				class="inline-flex cursor-pointer items-center gap-1.5 rounded-md border px-2 py-1 text-xs font-medium transition-colors hover:bg-muted"
+				onclick={() => void copy()}
 				type="button"
 			>
-				<Copy class="h-3.5 w-3.5" />
+				{#if copied}
+					<Check class="h-3.5 w-3.5 text-green-500" />
+				{:else}
+					<Copy class="h-3.5 w-3.5" />
+				{/if}
+
 				Copy
 			</button>
+
+			<Dialog.Close
+				aria-label="Close"
+				class="ml-auto inline-flex cursor-pointer items-center justify-center rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-muted-foreground/10 hover:text-foreground"
+				type="button"
+			>
+				<X class="h-4 w-4" />
+			</Dialog.Close>
 		</Dialog.Header>
 
 		<pre