refac

src/lib/components/chat/Tags.svelte

@@ -23,6 +23,7 @@
 	import { toast } from 'svelte-sonner';
 
 	export let chatId = '';
+	export let disabled = false;
 	let tags = [];
 
 	const getTags = async () => {
@@ -73,6 +74,7 @@
 
 <Tags
 	{tags}
+	{disabled}
 	suggestionTags={$_tags ?? []}
 	on:delete={(e) => {
 		deleteTag(e.detail);

src/lib/components/common/Tags.svelte

@@ -7,6 +7,7 @@
 
 	export let tags = [];
 	export let suggestionTags = [];
+	export let disabled = false;
 
 	let inputValue = '';
 
@@ -22,11 +23,13 @@
 <div class="flex flex-wrap items-center gap-1 w-full">
 	<TagList
 		{tags}
+		{disabled}
 		on:delete={(e) => {
 			dispatch('delete', e.detail);
 		}}
 	/>
 
+	{#if !disabled}
 		<input
 			bind:value={inputValue}
 			class="flex-1 min-w-24 {tags.length > 0
@@ -40,4 +43,5 @@
 				}
 			}}
 		/>
+	{/if}
 </div>

src/lib/components/common/Tags/TagInput.svelte

@@ -5,6 +5,7 @@
 	const i18n = getContext('i18n');
 
 	export let suggestionTags = [];
+	export let disabled = false;
 
 	let tagName = '';
 	let showInput = false;
@@ -30,7 +31,9 @@
 	};
 </script>
 
-{#if showInput}
+{#if disabled}
+	<!-- hidden when disabled -->
+{:else if showInput}
 	<div class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-gray-200/80 dark:bg-gray-700">
 		<span class="text-gray-500 dark:text-blue-400">+</span>
 		<input

src/lib/components/common/Tags/TagItem.svelte

@@ -6,10 +6,18 @@
 	import XMark from '$lib/components/icons/XMark.svelte';
 
 	export let tag;
+	export let disabled = false;
 	export let onDelete = () => {};
 </script>
 
 {#if tag}
+	{#if disabled}
+		<span
+			class="flex items-center gap-1 px-1.5 py-[1px] rounded-full bg-gray-100/50 dark:bg-gray-800/50 border border-gray-100 dark:border-gray-800 text-gray-600 dark:text-gray-300 text-xs font-medium"
+		>
+			<span class="line-clamp-1">{tag.name}</span>
+		</span>
+	{:else}
 		<button
 			type="button"
 			class="flex items-center gap-1 px-1.5 py-[1px] rounded-full bg-gray-100/50 dark:bg-gray-800/50 border border-gray-100 dark:border-gray-800 text-gray-600 dark:text-gray-300 text-xs font-medium hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
@@ -20,4 +28,5 @@
 			<span class="line-clamp-1">{tag.name}</span>
 			<XMark className="size-3" strokeWidth="2.5" />
 		</button>
+	{/if}
 {/if}

src/lib/components/common/Tags/TagList.svelte

@@ -7,11 +7,13 @@
 	const dispatch = createEventDispatcher();
 
 	export let tags = [];
+	export let disabled = false;
 </script>
 
 {#each tags as tag}
 	<TagItem
 		{tag}
+		{disabled}
 		onDelete={() => {
 			dispatch('delete', tag.name);
 		}}

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

@@ -435,6 +435,7 @@
 			<div class="flex-1 min-w-0">
 				<Tags
 					{tags}
+					{disabled}
 					{suggestionTags}
 					on:add={(e) => {
 						tags = [...tags, { name: e.detail }];