enh: archived chats modal

backend/open_webui/models/chats.py

@@ -392,6 +392,17 @@ class ChatTable:
                 if query_key:
                     query = query.filter(Chat.title.ilike(f"%{query_key}%"))
 
+                order_by = filter.get("order_by")
+                direction = filter.get("direction")
+
+                if order_by and direction and getattr(Chat, order_by):
+                    if direction.lower() == "asc":
+                        query = query.order_by(getattr(Chat, order_by).asc())
+                    elif direction.lower() == "desc":
+                        query = query.order_by(getattr(Chat, order_by).desc())
+                    else:
+                        raise ValueError("Invalid direction for ordering")
+            else:
                 query = query.order_by(Chat.updated_at.desc())
 
             if skip:

backend/open_webui/routers/chats.py

@@ -269,6 +269,8 @@ async def get_all_user_chats_in_db(user=Depends(get_admin_user)):
 async def get_archived_session_user_chat_list(
     page: Optional[int] = None,
     query: Optional[str] = None,
+    order_by: Optional[str] = None,
+    direction: Optional[str] = None,
     user=Depends(get_verified_user),
 ):
     if page is None:
@@ -277,13 +279,19 @@ async def get_archived_session_user_chat_list(
     limit = 60
     skip = (page - 1) * limit
 
+    filter = {}
+    if query:
+        filter["query"] = query
+    if order_by:
+        filter["order_by"] = order_by
+    if direction:
+        filter["direction"] = direction
+
     chat_list = [
         ChatTitleIdResponse(**chat.model_dump())
         for chat in Chats.get_archived_chat_list_by_user_id(
             user.id,
-            {
-                "query": query if query else None,
-            },
+            filter=filter,
             skip=skip,
             limit=limit,
         )

src/lib/apis/chats/index.ts

@@ -145,13 +145,22 @@ export const getChatListByUserId = async (token: string = '', userId: string) =>
 	}));
 };
 
-export const getArchivedChatList = async (token: string = '', page: number = 1, query?: string) => {
+export const getArchivedChatList = async (
+	token: string = '',
+	page: number = 1,
+	filter?: object
+) => {
 	let error = null;
 
 	const searchParams = new URLSearchParams();
 	searchParams.append('page', `${page}`);
-	if (query) {
-		searchParams.append('query', query);
+
+	if (filter) {
+		Object.entries(filter).forEach(([key, value]) => {
+			if (value !== undefined && value !== null) {
+				searchParams.append(key, value.toString());
+			}
+		});
 	}
 
 	const res = await fetch(`${WEBUI_API_BASE_URL}/chats/archived?${searchParams.toString()}`, {

src/lib/components/layout/ArchivedChatsModal.svelte

@@ -18,6 +18,8 @@
 	let page = 1;
 
 	let query = '';
+	let orderBy = 'updated_at';
+	let direction = 'desc';
 
 	let allChatsLoaded = false;
 	let chatListLoading = false;
@@ -25,7 +27,14 @@
 
 	let showUnarchiveAllConfirmDialog = false;
 
-	$: if (query !== null) {
+	let filter = {};
+	$: filter = {
+		...(query ? { query } : {}),
+		...(orderBy ? { order_by: orderBy } : {}),
+		...(direction ? { direction } : {})
+	};
+
+	$: if (filter !== null) {
 		searchHandler();
 	}
 
@@ -40,10 +49,10 @@
 		chatList = null;
 
 		if (query === '') {
-			chatList = await getArchivedChatList(localStorage.token, page);
+			chatList = await getArchivedChatList(localStorage.token, page, filter);
 		} else {
 			searchDebounceTimeout = setTimeout(async () => {
-				chatList = await getArchivedChatList(localStorage.token, page, query);
+				chatList = await getArchivedChatList(localStorage.token, page, filter);
 			}, 500);
 		}
 
@@ -61,9 +70,9 @@
 		let newChatList = [];
 
 		if (query) {
-			newChatList = await getArchivedChatList(localStorage.token, page, query);
+			newChatList = await getArchivedChatList(localStorage.token, page, filter);
 		} else {
-			newChatList = await getArchivedChatList(localStorage.token, page);
+			newChatList = await getArchivedChatList(localStorage.token, page, filter);
 		}
 
 		// once the bottom of the list has been reached (no results) there is no need to continue querying
@@ -124,6 +133,8 @@
 <ChatsModal
 	bind:show
 	bind:query
+	bind:orderBy
+	bind:direction
 	title={$i18n.t('Archived Chats')}
 	emptyPlaceholder={$i18n.t('You have no archived conversations.')}
 	{chatList}

src/lib/components/layout/ChatsModal.svelte

@@ -14,6 +14,8 @@
 	import Spinner from '../common/Spinner.svelte';
 	import Loader from '../common/Loader.svelte';
 	import XMark from '../icons/XMark.svelte';
+	import ChevronUp from '../icons/ChevronUp.svelte';
+	import ChevronDown from '../icons/ChevronDown.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -24,6 +26,9 @@
 
 	export let query = '';
 
+	export let orderBy = 'updated_at';
+	export let direction = 'desc'; // 'asc' or 'desc'
+
 	export let chatList = null;
 	export let allChatsLoaded = false;
 	export let chatListLoading = false;
@@ -35,6 +40,15 @@
 	export let loadHandler: null | Function = null;
 	export let unarchiveHandler: null | Function = null;
 
+	const setSortKey = (key) => {
+		if (orderBy === key) {
+			direction = direction === 'asc' ? 'desc' : 'asc';
+		} else {
+			orderBy = key;
+			direction = 'asc';
+		}
+	};
+
 	const deleteHandler = async (chatId) => {
 		const res = await deleteChatById(localStorage.token, chatId).catch((error) => {
 			toast.error(`${error}`);
@@ -111,6 +125,54 @@
 			<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
 				{#if chatList}
 					<div class="w-full">
+						{#if chatList.length > 0}
+							<div class="flex text-xs font-medium">
+								<button
+									class="px-1.5 py-1 cursor-pointer select-none basis-3/5"
+									on:click={() => setSortKey('title')}
+								>
+									<div class="flex gap-1.5 items-center">
+										{$i18n.t('Title')}
+
+										{#if orderBy === 'title'}
+											<span class="font-normal"
+												>{#if direction === 'asc'}
+													<ChevronUp className="size-2" />
+												{:else}
+													<ChevronDown className="size-2" />
+												{/if}
+											</span>
+										{:else}
+											<span class="invisible">
+												<ChevronUp className="size-2" />
+											</span>
+										{/if}
+									</div>
+								</button>
+								<button
+									class="px-1.5 py-1 cursor-pointer select-none hidden sm:flex sm:basis-2/5 justify-end"
+									on:click={() => setSortKey('updated_at')}
+								>
+									<div class="flex gap-1.5 items-center">
+										{$i18n.t('Updated at')}
+
+										{#if orderBy === 'updated_at'}
+											<span class="font-normal"
+												>{#if direction === 'asc'}
+													<ChevronUp className="size-2" />
+												{:else}
+													<ChevronDown className="size-2" />
+												{/if}
+											</span>
+										{:else}
+											<span class="invisible">
+												<ChevronUp className="size-2" />
+											</span>
+										{/if}
+									</div>
+								</button>
+							</div>
+						{/if}
 						<div class="text-left text-sm w-full mb-3 max-h-[22rem] overflow-y-scroll">
 							{#if chatList.length === 0}
 								<div
@@ -121,7 +183,7 @@
 							{/if}
 
 							{#each chatList as chat, idx (chat.id)}
-								{#if idx === 0 || (idx > 0 && chat.time_range !== chatList[idx - 1].time_range)}
+								{#if (idx === 0 || (idx > 0 && chat.time_range !== chatList[idx - 1].time_range)) && chat?.time_range}
 									<div
 										class="w-full text-xs text-gray-500 dark:text-gray-500 font-medium {idx === 0
 											? ''
@@ -153,13 +215,14 @@
 									class=" w-full flex justify-between items-center rounded-lg text-sm py-2 px-3 hover:bg-gray-50 dark:hover:bg-gray-850"
 									draggable="false"
 								>
-									<a class=" flex-1" href="/c/{chat.id}" on:click={() => (show = false)}>
+									<a class=" basis-3/5" href="/c/{chat.id}" on:click={() => (show = false)}>
 										<div class="text-ellipsis line-clamp-1 w-full">
 											{chat?.title}
 										</div>
 									</a>
 
-									<div class=" pl-3 shrink-0 text-gray-500 dark:text-gray-400 text-xs">
+									<div class="basis-2/5 flex items-center justify-end">
+										<div class="hidden sm:flex text-gray-500 dark:text-gray-400 text-xs">
 											{dayjs(chat?.updated_at * 1000).calendar()}
 										</div>
 
@@ -219,6 +282,7 @@
 											</Tooltip>
 										</div>
 									</div>
+								</div>
 							{/each}
 
 							{#if !allChatsLoaded && loadHandler}