feat: convo tag filtering

src/lib/apis/chats/index.ts

@@ -93,6 +93,68 @@ export const getAllChats = async (token: string) => {
 	return res;
 };
 
+export const getAllChatTags = async (token: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/chats/tags/all`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err;
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const getChatListByTagName = async (token: string = '', tagName: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/chats/tags/tag/${tagName}`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err;
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
 export const getChatById = async (token: string, id: string) => {
 	let error = null;
 

src/lib/components/layout/Navbar.svelte

@@ -6,7 +6,6 @@
 	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';

src/lib/components/layout/Sidebar.svelte

@@ -6,9 +6,14 @@
 
 	import { goto, invalidateAll } from '$app/navigation';
 	import { page } from '$app/stores';
-	import { user, chats, settings, showSettings, chatId } from '$lib/stores';
+	import { user, chats, settings, showSettings, chatId, tags } from '$lib/stores';
 	import { onMount } from 'svelte';
-	import { deleteChatById, getChatList, updateChatById } from '$lib/apis/chats';
+	import {
+		deleteChatById,
+		getChatList,
+		getChatListByTagName,
+		updateChatById
+	} from '$lib/apis/chats';
 
 	let show = false;
 	let navElement;
@@ -28,6 +33,12 @@
 		}
 
 		await chats.set(await getChatList(localStorage.token));
+
+		tags.subscribe(async (value) => {
+			if (value.length === 0) {
+				await chats.set(await getChatList(localStorage.token));
+			}
+		});
 	});
 
 	const loadChat = async (id) => {
@@ -281,6 +292,29 @@
 				</div>
 			</div>
 
+			{#if $tags.length > 0}
+				<div class="px-2.5 mt-0.5 mb-2 flex gap-1 flex-wrap">
+					<button
+						class="px-2.5 text-xs font-medium bg-gray-900 hover:bg-gray-800 transition rounded-full"
+						on:click={async () => {
+							await chats.set(await getChatList(localStorage.token));
+						}}
+					>
+						all
+					</button>
+					{#each $tags as tag}
+						<button
+							class="px-2.5 text-xs font-medium bg-gray-900 hover:bg-gray-800 transition rounded-full"
+							on:click={async () => {
+								await chats.set(await getChatListByTagName(localStorage.token, tag.name));
+							}}
+						>
+							{tag.name}
+						</button>
+					{/each}
+				</div>
+			{/if}
+
 			<div class="pl-2.5 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto">
 				{#each $chats.filter((chat) => {
 					if (search === '') {

src/lib/stores/index.ts

@@ -10,6 +10,7 @@ export const theme = writable('dark');
 export const chatId = writable('');
 
 export const chats = writable([]);
+export const tags = writable([]);
 export const models = writable([]);
 
 export const modelfiles = writable([]);