feat: chat menu tag

src/lib/components/chat/Tags.svelte

@@ -0,0 +1,52 @@
+<script>
+	import {
+		addTagById,
+		deleteTagById,
+		getAllChatTags,
+		getTagsById,
+		updateChatById
+	} from '$lib/apis/chats';
+	import { tags as _tags } from '$lib/stores';
+	import { onMount } from 'svelte';
+
+	import Tags from '../common/Tags.svelte';
+
+	export let chatId = '';
+	let tags = [];
+
+	const getTags = async () => {
+		return await getTagsById(localStorage.token, chatId).catch(async (error) => {
+			return [];
+		});
+	};
+
+	const addTag = async (tagName) => {
+		const res = await addTagById(localStorage.token, chatId, tagName);
+		tags = await getTags();
+
+		await updateChatById(localStorage.token, chatId, {
+			tags: tags
+		});
+
+		_tags.set(await getAllChatTags(localStorage.token));
+	};
+
+	const deleteTag = async (tagName) => {
+		const res = await deleteTagById(localStorage.token, chatId, tagName);
+		tags = await getTags();
+
+		await updateChatById(localStorage.token, chatId, {
+			tags: tags
+		});
+
+		_tags.set(await getAllChatTags(localStorage.token));
+	};
+
+	onMount(async () => {
+		if (chatId) {
+			tags = await getTags();
+		}
+	});
+</script>
+
+<Tags {tags} {deleteTag} {addTag} />

src/lib/components/common/Dropdown.svelte

@@ -4,10 +4,12 @@
 
 	import { flyAndScale } from '$lib/utils/transitions';
 
+	export let show = false;
 	const dispatch = createEventDispatcher();
 </script>
 
 <DropdownMenu.Root
+	bind:open={show}
 	onOpenChange={(state) => {
 		dispatch('change', state);
 	}}

src/lib/components/layout/Sidebar.svelte

@@ -538,6 +538,7 @@
 							{:else}
 								<div class="flex self-center space-x-1.5 z-10">
 									<ChatMenu
+										chatId={chat.id}
 										renameHandler={() => {
 											chatTitle = chat.title;
 											chatTitleEditId = chat.id;

src/lib/components/layout/Sidebar/ChatMenu.svelte

@@ -6,14 +6,19 @@
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import Pencil from '$lib/components/icons/Pencil.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Tags from '$lib/components/chat/Tags.svelte';
 
 	export let renameHandler: Function;
 	export let deleteHandler: Function;
-
 	export let onClose: Function;
+
+	export let chatId = '';
+
+	let show = false;
 </script>
 
 <Dropdown
+	bind:show
 	on:change={(e) => {
 		if (e.detail === false) {
 			onClose();
@@ -51,6 +56,12 @@
 				<GarbageBin strokeWidth="2" />
 				<div class="flex items-center">Delete</div>
 			</DropdownMenu.Item>
+
+			<hr class="border-gray-100 dark:border-gray-800 mt-2.5 mb-1.5" />
+
+			<div class="flex p-1">
+				<Tags {chatId} />
+			</div>
 		</DropdownMenu.Content>
 	</div>
 </Dropdown>