feat: tag add/remove frontend

src/lib/components/layout/Navbar.svelte

@@ -6,6 +6,7 @@
 	import { getChatById } from '$lib/apis/chats';
 	import { chatId, modelfiles } from '$lib/stores';
 	import ShareChatModal from '../chat/ShareChatModal.svelte';
+	import { stringify } from 'postcss';
 
 	export let initNewChat: Function;
 	export let title: string = 'Ollama Web UI';
@@ -13,6 +14,24 @@
 
 	let showShareChatModal = false;
 
+	let tags = [
+		// {
+		// 	name: 'general'
+		// },
+		// {
+		// 	name: 'medicine'
+		// },
+		// {
+		// 	name: 'cooking'
+		// },
+		// {
+		// 	name: 'education'
+		// }
+	];
+
+	let tagName = '';
+	let showTagInput = false;
+
 	const shareChat = async () => {
 		const chat = (await getChatById(localStorage.token, $chatId)).chat;
 		console.log('share', chat);
@@ -54,6 +73,20 @@
 
 		saveAs(blob, `chat-${chat.title}.txt`);
 	};
+
+	const addTag = () => {
+		if (!tags.find((e) => e.name === tagName)) {
+			tags = [
+				...tags,
+				{
+					name: JSON.parse(JSON.stringify(tagName))
+				}
+			];
+		}
+
+		tagName = '';
+		showTagInput = false;
+	};
 </script>
 
 <ShareChatModal bind:show={showShareChatModal} {downloadChat} {shareChat} />
@@ -93,23 +126,87 @@
 			</div>
 
 			<div class="pl-2 self-center flex items-center space-x-2">
-				<div class="flex flex-row">
-					<div
-						class=" cursor-pointer px-2 py-0.5 space-x-1 flex h-fit items-center dark:hover:bg-gray-700 rounded-full transition border dark:border-gray-600"
-					>
-						<div class=" text-[0.65rem] font-medium">Add Tags</div>
-						<div class=" m-auto self-center">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 16 16"
-								fill="currentColor"
-								class="w-3 h-3"
+				<div class="flex flex-row space-x-0.5 line-clamp-1">
+					{#each tags as tag}
+						<div
+							class="px-2 py-0.5 space-x-1 flex h-fit items-center rounded-full transition border dark:border-gray-600 dark:text-white"
+						>
+							<div class=" text-[0.65rem] font-medium self-center line-clamp-1">
+								{tag.name}
+							</div>
+							<button
+								class=" m-auto self-center cursor-pointer"
+								on:click={() => {
+									console.log(tag.name);
+
+									tags = tags.filter((t) => t.name !== tag.name);
+								}}
 							>
-								<path
-									d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
-								/>
-							</svg>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 16 16"
+									fill="currentColor"
+									class="w-3 h-3"
+								>
+									<path
+										d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"
+									/>
+								</svg>
+							</button>
 						</div>
+					{/each}
+
+					<div class="flex space-x-1 pl-1.5">
+						{#if showTagInput}
+							<div class="flex items-center">
+								<input
+									bind:value={tagName}
+									class=" cursor-pointer self-center text-xs h-fit bg-transparent outline-none line-clamp-1 w-[4rem]"
+									placeholder="Add a tag"
+								/>
+
+								<button
+									on:click={() => {
+										addTag();
+									}}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 16 16"
+										fill="currentColor"
+										class="w-3 h-3"
+									>
+										<path
+											fill-rule="evenodd"
+											d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
+											clip-rule="evenodd"
+										/>
+									</svg>
+								</button>
+							</div>
+
+							<!-- TODO: Tag Suggestions -->
+						{/if}
+
+						<button
+							class=" cursor-pointer self-center p-0.5 space-x-1 flex h-fit items-center dark:hover:bg-gray-700 rounded-full transition border dark:border-gray-600 border-dashed"
+							on:click={() => {
+								showTagInput = !showTagInput;
+							}}
+						>
+							<div class=" m-auto self-center">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 16 16"
+									fill="currentColor"
+									class="w-3 h-3 {showTagInput ? 'rotate-45' : ''} transition-all transform"
+								>
+									<path
+										d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
+									/>
+								</svg>
+							</div>
+						</button>
 					</div>
 				</div>