feat(ui): add tag suggestions dropdown to model editor

src/lib/components/common/Tags.svelte

@@ -9,6 +9,9 @@
 	export let suggestionTags = [];
 	export let disabled = false;
 
+	$: tagNames = new Set(tags.map((t) => t.name));
+	$: filteredSuggestionTags = suggestionTags.filter((t) => !tagNames.has(t.name));
+
 	let inputValue = '';
 
 	const addTag = () => {
@@ -36,12 +39,25 @@
 				? 'px-0.5'
 				: ''} text-xs bg-transparent outline-hidden placeholder:text-gray-400 dark:placeholder:text-gray-500"
 			placeholder={$i18n.t('Add a tag...')}
+			list="suggestionTagOptions"
 			on:keydown={(event) => {
 				if (event.key === 'Enter' || event.key === ' ') {
 					event.preventDefault();
 					addTag();
 				}
 			}}
+			on:input={() => {
+				const value = inputValue.trim();
+				if (value !== '' && filteredSuggestionTags.some((t) => t.name === value)) {
+					addTag();
+				}
+			}}
 		/>
 	{/if}
+
+	<datalist id="suggestionTagOptions">
+		{#each filteredSuggestionTags as tag}
+			<option value={tag.name} />
+		{/each}
+	</datalist>
 </div>

src/lib/components/workspace/Models/ModelEditor.svelte

@@ -29,6 +29,7 @@
 	import TerminalSelector from './TerminalSelector.svelte';
 	import AccessControlModal from '../common/AccessControlModal.svelte';
 	import LockClosed from '$lib/components/icons/LockClosed.svelte';
+	import { getModelTags } from '$lib/apis/models';
 
 	const i18n = getContext('i18n');
 
@@ -106,6 +107,7 @@
 	let accessGrants = [];
 	let terminalId = '';
 	let tts = { voice: '' };
+	let suggestionTags = [];
 
 	const submitHandler = async () => {
 		loading = true;
@@ -256,6 +258,11 @@
 			await functions.set(await getFunctions(localStorage.token));
 		}
 
+		const modelTags = await getModelTags(localStorage.token).catch(() => null);
+		if (modelTags) {
+			suggestionTags = modelTags.map((t) => ({ name: t }));
+		}
+
 		// Fetch admin-configured default model metadata so the editor
 		// reflects the actual defaults rather than hardcoded values
 		const modelsConfig = await getModelsDefaults(localStorage.token).catch(() => null);
@@ -651,6 +658,7 @@
 								<div class="">
 									<Tags
 										tags={info?.meta?.tags ?? []}
+										{suggestionTags}
 										on:delete={(e) => {
 											const tagName = e.detail;
 											info.meta.tags = info.meta.tags.filter((tag) => tag.name !== tagName);