feat: sortable title and updated at columns on the knowledge workspace page (#27457)

src/lib/apis/knowledge/index.ts

@@ -375,7 +375,9 @@ export const searchKnowledgeBases = async (
 	query: string | null = null,
 	viewOption: string | null = null,
 	page: number | null = null,
-	source: string | null = null
+	source: string | null = null,
+	orderBy: string | null = null,
+	direction: string | null = null
 ) => {
 	let error = null;
 
@@ -384,6 +386,8 @@ export const searchKnowledgeBases = async (
 	if (viewOption) searchParams.append('view_option', viewOption);
 	if (source) searchParams.append('source', source);
 	if (page) searchParams.append('page', page.toString());
+	if (orderBy) searchParams.append('order_by', orderBy);
+	if (direction) searchParams.append('direction', direction);
 
 	const res = await fetch(`${WEBUI_API_BASE_URL}/knowledge/search?${searchParams.toString()}`, {
 		method: 'GET',

src/lib/components/workspace/Knowledge.svelte

@@ -24,6 +24,8 @@
 	import ItemMenu from './Knowledge/ItemMenu.svelte';
 	import CreateKnowledgeBase from './Knowledge/CreateKnowledgeBase.svelte';
 	import Badge from '../common/Badge.svelte';
+	import ChevronDown from '../icons/ChevronDown.svelte';
+	import ChevronUp from '../icons/ChevronUp.svelte';
 	import Modal from '../common/Modal.svelte';
 	import Search from '../icons/Search.svelte';
 	import Spinner from '../common/Spinner.svelte';
@@ -62,6 +64,8 @@
 	let searchDebounceTimer: ReturnType<typeof setTimeout>;
 	let viewOption = '';
 	let sourceOption = '';
+	let sortKey = 'updated_at';
+	let sortDirection = 'desc';
 
 	let items: KnowledgeListItem[] | null = null;
 	let total: number | null = null;
@@ -92,10 +96,25 @@
 		clearTimeout(searchDebounceTimer);
 	});
 
-	$: if (loaded && viewOption !== undefined && sourceOption !== undefined) {
+	$: if (
+		loaded &&
+		viewOption !== undefined &&
+		sourceOption !== undefined &&
+		sortKey !== undefined &&
+		sortDirection !== undefined
+	) {
 		init();
 	}
 
+	const setSortKey = (key: string) => {
+		if (sortKey === key) {
+			sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
+		} else {
+			sortKey = key;
+			sortDirection = key === 'updated_at' ? 'desc' : 'asc';
+		}
+	};
+
 	const reset = () => {
 		page = 1;
 		items = null;
@@ -124,7 +143,9 @@
 			query,
 			viewOption,
 			page,
-			sourceOption
+			sourceOption,
+			sortKey,
+			sortDirection
 		).catch(() => {
 			return [];
 		});
@@ -355,15 +376,37 @@
 					<div
 						class="flex w-full items-center gap-2 px-1.5 pb-0.5 text-xs text-gray-400 dark:text-gray-600"
 					>
-						<div class="flex min-w-0 flex-1 items-center gap-1 py-0.5 text-left">
+						<button
+							class="flex min-w-0 flex-1 items-center gap-1 py-0.5 text-left"
+							type="button"
+							on:click={() => setSortKey('name')}
+						>
 							{$i18n.t('Title')}
-						</div>
+							{#if sortKey === 'name'}
+								{#if sortDirection === 'asc'}
+									<ChevronUp className="size-2" />
+								{:else}
+									<ChevronDown className="size-2" />
+								{/if}
+							{/if}
+						</button>
 
 						<div class="hidden w-44 shrink-0 md:block"></div>
 
-						<div class="flex w-36 shrink-0 items-center justify-end gap-1 py-0.5 text-right">
+						<button
+							class="flex w-36 shrink-0 items-center justify-end gap-1 py-0.5 text-right"
+							type="button"
+							on:click={() => setSortKey('updated_at')}
+						>
 							{$i18n.t('Updated at')}
-						</div>
+							{#if sortKey === 'updated_at'}
+								{#if sortDirection === 'asc'}
+									<ChevronUp className="size-2" />
+								{:else}
+									<ChevronDown className="size-2" />
+								{/if}
+							{/if}
+						</button>
 					</div>
 
 					<div class="grid gap-y-0.5">