enh: prompt tags

src/lib/components/workspace/Prompts.svelte

@@ -7,7 +7,13 @@
 	import { onMount, getContext, tick } from 'svelte';
 	import { WEBUI_NAME, config, prompts as _prompts, user } from '$lib/stores';
 
-	import { createNewPrompt, deletePromptById, getPrompts, getPromptList } from '$lib/apis/prompts';
+	import {
+		createNewPrompt,
+		deletePromptById,
+		getPrompts,
+		getPromptList,
+		getPromptTags
+	} from '$lib/apis/prompts';
 	import { capitalizeFirstLetter, slugify, copyToClipboard } from '$lib/utils';
 
 	import PromptMenu from './Prompts/PromptMenu.svelte';
@@ -23,6 +29,7 @@
 	import XMark from '../icons/XMark.svelte';
 	import GarbageBin from '../icons/GarbageBin.svelte';
 	import ViewSelector from './common/ViewSelector.svelte';
+	import TagSelector from './common/TagSelector.svelte';
 	import Badge from '$lib/components/common/Badge.svelte';
 	let shiftKey = false;
 
@@ -34,23 +41,25 @@
 	let query = '';
 
 	let prompts = [];
+	let tags = [];
 
 	let showDeleteConfirm = false;
 	let deletePrompt = null;
 
 	let tagsContainerElement: HTMLDivElement;
 	let viewOption = '';
+	let selectedTag = '';
 	let copiedId: string | null = null;
 
 	let filteredItems = [];
 
-	$: if (prompts && query !== undefined && viewOption !== undefined) {
+	$: if (prompts && query !== undefined && viewOption !== undefined && selectedTag !== undefined) {
 		setFilteredItems();
 	}
 
 	const setFilteredItems = () => {
 		filteredItems = prompts.filter((p) => {
-			if (query === '' && viewOption === '') return true;
+			if (query === '' && viewOption === '' && selectedTag === '') return true;
 			const lowerQuery = query.toLowerCase();
 			return (
 				((p.title || '').toLowerCase().includes(lowerQuery) ||
@@ -59,7 +68,8 @@
 					(p.user?.email || '').toLowerCase().includes(lowerQuery)) &&
 				(viewOption === '' ||
 					(viewOption === 'created' && p.user_id === $user?.id) ||
-					(viewOption === 'shared' && p.user_id !== $user?.id))
+					(viewOption === 'shared' && p.user_id !== $user?.id)) &&
+				(selectedTag === '' || (p.tags && p.tags.includes(selectedTag)))
 			);
 		});
 	};
@@ -129,6 +139,7 @@
 
 	const init = async () => {
 		prompts = await getPromptList(localStorage.token);
+		tags = await getPromptTags(localStorage.token);
 		await _prompts.set(await getPrompts(localStorage.token));
 	};
 
@@ -323,6 +334,13 @@
 						await tick();
 					}}
 				/>
+
+				{#if (tags ?? []).length > 0}
+					<TagSelector
+						bind:value={selectedTag}
+						items={tags.map((tag) => ({ value: tag, label: tag }))}
+					/>
+				{/if}
 			</div>
 		</div>
 

src/lib/components/workspace/Prompts/PromptEditor.svelte

@@ -17,12 +17,14 @@
 		getPromptHistory,
 		setProductionPromptVersion,
 		deletePromptHistoryVersion,
-		updatePromptMetadata
+		updatePromptMetadata,
+		getPromptTags
 	} from '$lib/apis/prompts';
 	import dayjs from 'dayjs';
 	import localizedFormat from 'dayjs/plugin/localizedFormat';
 	import PromptHistoryMenu from './PromptHistoryMenu.svelte';
 	import Badge from '$lib/components/common/Badge.svelte';
+	import Tags from '$lib/components/common/Tags.svelte';
 
 	dayjs.extend(localizedFormat);
 
@@ -40,6 +42,7 @@
 	let name = '';
 	let command = '';
 	let content = '';
+	let tags = [];
 	let commitMessage = '';
 	let isProduction = true;
 
@@ -57,8 +60,11 @@
 	// For debounced auto-save of name/command
 	let originalName = '';
 	let originalCommand = '';
+	let originalTags = [];
 	let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 
+	let suggestionTags = [];
+
 	$: if (!edit && !hasManualEdit) {
 		command = name !== '' ? slugify(name) : '';
 	}
@@ -80,6 +86,7 @@
 				name,
 				command,
 				content,
+				tags: tags.map((tag) => tag.name),
 				access_control: accessControl,
 				commit_message: commitMessage || undefined,
 				is_production: isProduction
@@ -207,7 +214,12 @@
 
 		debounceTimer = setTimeout(async () => {
 			// Skip if nothing changed
-			if (name === originalName && command === originalCommand) return;
+			if (
+				name === originalName &&
+				command === originalCommand &&
+				JSON.stringify(tags) === JSON.stringify(originalTags)
+			)
+				return;
 
 			if (!validateCommandString(command)) {
 				toast.error(
@@ -218,16 +230,24 @@
 			}
 
 			try {
-				await updatePromptMetadata(localStorage.token, prompt?.id, name, command);
+				await updatePromptMetadata(
+					localStorage.token,
+					prompt?.id,
+					name,
+					command,
+					tags.map((tag) => tag.name)
+				);
 				// Update originals on success
 				originalName = name;
 				originalCommand = command;
+				originalTags = tags;
 				toast.success($i18n.t('Saved'));
 			} catch (error) {
 				toast.error(`${error}`);
 				// Revert on error (collision)
 				name = originalName;
 				command = originalCommand;
+				tags = originalTags;
 			}
 		}, 500);
 	};
@@ -238,11 +258,13 @@
 			await tick();
 			command = prompt.command.at(0) === '/' ? prompt.command.slice(1) : prompt.command;
 			content = prompt.content;
+			tags = (prompt.tags || []).map((tag) => ({ name: tag }));
 			accessControl = prompt?.access_control === undefined ? {} : prompt?.access_control;
 
 			// Store originals for revert on collision
 			originalName = name;
 			originalCommand = command;
+			originalTags = tags;
 
 			if (edit) {
 				await loadHistory();
@@ -254,6 +276,11 @@
 				}
 			}
 		}
+
+		const res = await getPromptTags(localStorage.token);
+		if (res) {
+			suggestionTags = res.map((tag) => ({ name: tag }));
+		}
 	});
 </script>
 
@@ -361,9 +388,31 @@
 						{disabled}
 					/>
 				</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>
 			<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>
+
 					<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)}
@@ -371,12 +420,6 @@
 						<LockClosed strokeWidth="2.5" className="size-3.5" />
 						{$i18n.t('Access')}
 					</button>
-					<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>
 				{: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
@@ -493,6 +536,19 @@
 								required
 							/>
 						</div>
+
+						<div class="mt-1">
+							<Tags
+								{tags}
+								{suggestionTags}
+								on:add={(e) => {
+									tags = [...tags, { name: e.detail }];
+								}}
+								on:delete={(e) => {
+									tags = tags.filter((tag) => tag.name !== e.detail);
+								}}
+							/>
+						</div>
 					</div>
 				</Tooltip>
 			</div>