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,22 +23,25 @@
 <div class="flex flex-wrap items-center gap-1 w-full">
 	<TagList
 		{tags}
+		{disabled}
 		on:delete={(e) => {
 			dispatch('delete', e.detail);
 		}}
 	/>
 
-	<input
+	{#if !disabled}
-		bind:value={inputValue}
+		<input
-		class="flex-1 min-w-24 {tags.length > 0
+			bind:value={inputValue}
-			? 'px-0.5'
+			class="flex-1 min-w-24 {tags.length > 0
-			: ''} text-xs bg-transparent outline-hidden placeholder:text-gray-400 dark:placeholder:text-gray-500"
+				? 'px-0.5'
-		placeholder={$i18n.t('Add a tag...')}
+				: ''} text-xs bg-transparent outline-hidden placeholder:text-gray-400 dark:placeholder:text-gray-500"
-		on:keydown={(event) => {
+			placeholder={$i18n.t('Add a tag...')}
-			if (event.key === 'Enter' || event.key === ' ') {
+			on:keydown={(event) => {
-				event.preventDefault();
+				if (event.key === 'Enter' || event.key === ' ') {
-				addTag();
+					event.preventDefault();
-			}
+					addTag();
-		}}
+				}
-	/>
+			}}
+		/>
+	{/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,18 +6,27 @@
 	import XMark from '$lib/components/icons/XMark.svelte';
 
 	export let tag;
+	export let disabled = false;
 	export let onDelete = () => {};
 </script>
 
 {#if tag}
-	<button
+	{#if disabled}
-		type="button"
+		<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 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+			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"
-		on:click={() => {
+		>
-			onDelete();
+			<span class="line-clamp-1">{tag.name}</span>
-		}}
+		</span>
-	>
+	{:else}
-		<span class="line-clamp-1">{tag.name}</span>
+		<button
-		<XMark className="size-3" strokeWidth="2.5" />
+			type="button"
-	</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"
+			on:click={() => {
+				onDelete();
+			}}
+		>
+			<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 }];