From 10ba2accf7c5a2105b7c9303f5f558797f18be3e Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 26 Jan 2026 16:18:49 +0400
Subject: [PATCH] refac

---
 .../workspace/Prompts/PromptEditor.svelte     | 90 +++++++++++--------
 1 file changed, 55 insertions(+), 35 deletions(-)

diff --git a/src/lib/components/workspace/Prompts/PromptEditor.svelte b/src/lib/components/workspace/Prompts/PromptEditor.svelte
index b89bc3a0a..5f9a0da87 100644
--- a/src/lib/components/workspace/Prompts/PromptEditor.svelte
+++ b/src/lib/components/workspace/Prompts/PromptEditor.svelte
@@ -369,7 +369,7 @@
 	<!-- Edit mode: Read-only view with history -->
 	<div class="flex flex-col w-full h-full max-h-[100dvh]">
 		<!-- Header -->
-		<div class="flex items-start justify-between gap-4 mb-2 shrink-0">
+		<div class="flex items-start justify-between gap-4 shrink-0">
 			<div class="min-w-0 flex-1">
 				<input
 					class="text-2xl font-medium w-full bg-transparent outline-hidden"
@@ -378,7 +378,8 @@
 					on:input={debouncedSaveMetadata}
 					{disabled}
 				/>
-				<div class="flex items-center gap-0.5 text-sm text-gray-500 mt-0.5">
+
+				<div class="flex items-center gap-0.5 text-sm text-gray-500 w-full flex-1">
 					<span>/</span>
 					<input
 						class="bg-transparent outline-hidden"
@@ -388,43 +389,62 @@
 						{disabled}
 					/>
 				</div>
+			</div>
 
-				<div class="mt-2">
-					<Tags
-						{tags}
-						{suggestionTags}
-						on:add={(e) => {
-							tags = [...tags, { name: e.detail }];
-							debouncedSaveMetadata();
-						}}
-						on:delete={(e) => {
-							tags = tags.filter((tag) => tag.name !== e.detail);
-							debouncedSaveMetadata();
-						}}
-					/>
+			<div>
+				<div class="flex items-center gap-2 shrink-0 justify-end">
+					{#if !disabled}
+						<button
+							class="px-4 py-1 text-sm font-medium bg-black text-white dark:bg-white dark:text-black rounded-full hover:opacity-90 transition shadow-xs"
+							on:click={() => (showEditModal = true)}
+						>
+							{$i18n.t('Edit')}
+						</button>
+
+						<button
+							class="bg-gray-50 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2.5 py-1 rounded-full flex gap-1.5 items-center text-sm border border-gray-100 dark:border-gray-800"
+							on:click={() => (showAccessControlModal = true)}
+						>
+							<LockClosed strokeWidth="2.5" className="size-3.5" />
+							{$i18n.t('Access')}
+						</button>
+					{:else}
+						<span class="text-xs text-gray-500 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full"
+							>{$i18n.t('Read Only')}</span
+						>
+					{/if}
+				</div>
+
+				<div class="mt-1.5">
+					<Tooltip content={$i18n.t('Click to copy ID')}>
+						<button
+							class="text-xs text-gray-500 font-mono bg-gray-50 dark:bg-gray-850 px-2 py-1 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 transition"
+							on:click={() => {
+								copyToClipboard(prompt.id);
+								toast.success($i18n.t('ID copied to clipboard'));
+							}}
+						>
+							{prompt.id}
+						</button>
+					</Tooltip>
 				</div>
 			</div>
-			<div class="flex items-center gap-2 shrink-0">
-				{#if !disabled}
-					<button
-						class="px-4 py-1 text-sm font-medium bg-black text-white dark:bg-white dark:text-black rounded-full hover:opacity-90 transition shadow-xs"
-						on:click={() => (showEditModal = true)}
-					>
-						{$i18n.t('Edit')}
-					</button>
+		</div>
 
-					<button
-						class="bg-gray-50 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2.5 py-1 rounded-full flex gap-1.5 items-center text-sm border border-gray-100 dark:border-gray-800"
-						on:click={() => (showAccessControlModal = true)}
-					>
-						<LockClosed strokeWidth="2.5" className="size-3.5" />
-						{$i18n.t('Access')}
-					</button>
-				{:else}
-					<span class="text-xs text-gray-500 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full"
-						>{$i18n.t('Read Only')}</span
-					>
-				{/if}
+		<div class="mb-2 flex justify-between items-center gap-2">
+			<div class="flex-1 min-w-0">
+				<Tags
+					{tags}
+					{suggestionTags}
+					on:add={(e) => {
+						tags = [...tags, { name: e.detail }];
+						debouncedSaveMetadata();
+					}}
+					on:delete={(e) => {
+						tags = tags.filter((tag) => tag.name !== e.detail);
+						debouncedSaveMetadata();
+					}}
+				/>
 			</div>
 		</div>