feat(ui): show total archived chat count in ChatsModal title (#25872)

src/lib/apis/chats/index.ts

@@ -255,6 +255,34 @@ export const getArchivedChatList = async (
 	}));
 };
 
+export const getArchivedChatCount = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/chats/archived/count`, {
+		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();
+		})
+		.catch((err) => {
+			error = err;
+			console.error(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
 export const getSharedChatList = async (token: string = '', page: number = 1, filter?: object) => {
 	let error = null;
 

src/lib/components/layout/ArchivedChatsModal.svelte

@@ -9,6 +9,7 @@
 	import {
 		archiveChatById,
 		getAllArchivedChats,
+		getArchivedChatCount,
 		getArchivedChatList,
 		unarchiveAllChats
 	} from '$lib/apis/chats';
@@ -25,6 +26,7 @@
 
 	let loading = false;
 	let chatList: any[] | null = null;
+	let chatCount: number | null = null;
 	let page = 1;
 
 	let query = '';
@@ -110,8 +112,9 @@
 			toast.error(`${error}`);
 		});
 
+		chatList = chatList?.filter((c) => c.id !== chatId) ?? null;
+		if (chatCount !== null) chatCount--;
 		onUpdate();
-		init();
 	};
 
 	const unarchiveAllHandler = async () => {
@@ -130,6 +133,7 @@
 
 	const init = async () => {
 		chatList = await getArchivedChatList(localStorage.token);
+		chatCount = await getArchivedChatCount(localStorage.token);
 	};
 
 	$: if (show) {
@@ -153,13 +157,15 @@
 	bind:direction
 	title={$i18n.t('Archived Chats')}
 	emptyPlaceholder={$i18n.t('You have no archived conversations.')}
+	count={chatCount}
 	{chatList}
 	{allChatsLoaded}
 	{chatListLoading}
 	onUpdate={() => {
-		init();
+		onUpdate();
 	}}
 	onDelete={(id) => {
+		if (chatCount !== null) chatCount--;
 		onDelete(id);
 	}}
 	loadHandler={loadMoreChats}

src/lib/components/layout/ChatsModal.svelte

@@ -36,6 +36,8 @@
 	export let showSearch = true;
 	export let readOnly = false;
 
+	export let count: number | null = null;
+
 	export let query = '';
 
 	export let orderBy = 'updated_at';
@@ -71,6 +73,7 @@
 		});
 
 		if (res) {
+			chatList = chatList?.filter((c) => c.id !== chatId) ?? null;
 			onDelete(chatId);
 		}
 		onUpdate();
@@ -90,7 +93,18 @@
 <Modal size="lg" bind:show>
 	<div>
 		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-1">
-			<div class=" text-lg font-medium self-center">{title}</div>
+			<div class="flex items-center gap-2 text-lg font-medium self-center">
+				<div>{title}</div>
+				{#if count !== null}
+					<div class="text-lg font-medium text-gray-500 dark:text-gray-500">
+						{count}
+					</div>
+				{:else if chatList}
+					<div class="text-lg font-medium text-gray-500 dark:text-gray-500">
+						{chatList.length}
+					</div>
+				{/if}
+			</div>
 			<button
 				class="self-center"
 				on:click={() => {