refac

Author: tjbck

backend/open_webui/models/chats.py

@@ -1722,17 +1722,21 @@ async def get_all_chats_by_folder_id(
         folder_id: str,
         skip: int = 0,
         limit: int = 60,
+        sort_by: str = 'updated_at',
+        sort_dir: str = 'desc',
         db: AsyncSession | None = None,
     ) -> list[dict]:
         """Get chats in a folder across ALL users. Returns dicts with user_id."""
         async with get_async_db_context(db) as session:
+            sort_column = Chat.title if sort_by == 'title' else Chat.updated_at
+            order_clause = sort_column.asc() if sort_dir == 'asc' else sort_column.desc()
             stmt = (
                 select(Chat.id, Chat.title, Chat.user_id, Chat.updated_at, Chat.created_at, Chat.last_read_at)
                 .filter_by(folder_id=folder_id)
                 .filter(or_(Chat.pinned == False, Chat.pinned == None))
                 .filter_by(archived=False)
                 .where(Chat.meta['internal'].as_boolean().is_not(True))
-                .order_by(Chat.updated_at.desc(), Chat.id)
+                .order_by(order_clause, Chat.id)
             )
 
             if skip:
@@ -1754,6 +1758,22 @@ async def get_all_chats_by_folder_id(
                 for chat in all_chats
             ]
 
+    async def count_all_chats_by_folder_id(
+        self,
+        folder_id: str,
+        db: AsyncSession | None = None,
+    ) -> int:
+        async with get_async_db_context(db) as session:
+            stmt = (
+                select(func.count(Chat.id))
+                .filter_by(folder_id=folder_id)
+                .filter(or_(Chat.pinned == False, Chat.pinned == None))
+                .filter_by(archived=False)
+                .where(Chat.meta['internal'].as_boolean().is_not(True))
+            )
+            result = await session.execute(stmt)
+            return result.scalar_one()
+
     async def get_chats_by_folder_ids_and_user_id(
         self, folder_ids: list[str], user_id: str, db: AsyncSession | None = None
     ) -> list[ChatModel]:

backend/open_webui/routers/folders.py

@@ -6,7 +6,7 @@
 from pathlib import Path
 from typing import Optional
 
-from fastapi import APIRouter, Depends, File, HTTPException, Request, UploadFile, status
+from fastapi import APIRouter, Depends, File, HTTPException, Query, Request, UploadFile, status
 from fastapi.responses import FileResponse, StreamingResponse
 from open_webui.config import UPLOAD_DIR
 from open_webui.constants import ERROR_MESSAGES
@@ -482,6 +482,9 @@ async def update_folder_access_by_id(
 async def get_shared_folder_chats(
     request: Request,
     id: str,
+    page: int | None = Query(None, ge=1),
+    sort_by: str = Query('updated_at'),
+    sort_dir: str = Query('desc'),
     user=Depends(get_verified_user),
     db: AsyncSession = Depends(get_async_session),
 ):
@@ -505,7 +508,17 @@ async def get_shared_folder_chats(
             detail=ERROR_MESSAGES.ACCESS_PROHIBITED,
         )
 
-    chats = await Chats.get_all_chats_by_folder_id(id, db=db)
+    limit = 10
+    skip = (page - 1) * limit if page is not None else 0
+    chats = await Chats.get_all_chats_by_folder_id(
+        id,
+        skip=skip,
+        limit=limit if page is not None else 60,
+        sort_by=sort_by,
+        sort_dir=sort_dir,
+        db=db,
+    )
+    total = await Chats.count_all_chats_by_folder_id(id, db=db) if page is not None else len(chats)
 
     # Resolve owner names for display (avatar URLs are constructed client-side)
     owner_cache: dict[str, str] = {}
@@ -516,10 +529,13 @@ async def get_shared_folder_chats(
             owner_cache[uid] = u.name if u else 'Unknown'
         chat['owner_name'] = owner_cache[uid]
 
-    return {
+    response = {
         'chats': [{**chat, 'readonly': chat['user_id'] != user.id} for chat in chats],
         'folder_permission': 'write' if has_write else 'read',
     }
+    if page is not None:
+        response.update({'total': total, 'has_more': skip + limit < total})
+    return response
 
 
 ############################

src/lib/apis/folders/index.ts

@@ -290,17 +290,40 @@ export const getSharedFolders = async (token: string) => {
 	return res;
 };
 
-export const getSharedFolderChats = async (token: string, folderId: string) => {
+export const getSharedFolderChats = async (
+	token: string,
+	folderId: string,
+	params: {
+		page?: number | null;
+		sortBy?: 'title' | 'updated_at';
+		sortDir?: 'asc' | 'desc';
+	} = {}
+) => {
 	let error = null;
 
-	const res = await fetch(`${WEBUI_API_BASE_URL}/folders/${folderId}/shared/chats`, {
-		method: 'GET',
-		headers: {
-			Accept: 'application/json',
-			'Content-Type': 'application/json',
-			authorization: `Bearer ${token}`
+	const searchParams = new URLSearchParams();
+	if (params.page !== undefined && params.page !== null) {
+		searchParams.append('page', `${params.page}`);
+	}
+	if (params.sortBy) {
+		searchParams.append('sort_by', params.sortBy);
+	}
+	if (params.sortDir) {
+		searchParams.append('sort_dir', params.sortDir);
+	}
+	const query = searchParams.toString();
+
+	const res = await fetch(
+		`${WEBUI_API_BASE_URL}/folders/${folderId}/shared/chats${query ? `?${query}` : ''}`,
+		{
+			method: 'GET',
+			headers: {
+				Accept: 'application/json',
+				'Content-Type': 'application/json',
+				authorization: `Bearer ${token}`
+			}
 		}
-	})
+	)
 		.then(async (res) => {
 			if (!res.ok) throw await res.json();
 			return res.json();

src/lib/components/chat/Chat.svelte

@@ -1177,7 +1177,7 @@
 		}
 
 		const pageSubscribe = page.subscribe(async (p) => {
-			if (p.url.pathname === '/') {
+			if (p.url.pathname === '/' || p.url.pathname.startsWith('/folders/')) {
 				await tick();
 				initNewChat();
 			}

src/lib/components/chat/Placeholder/ChatList.svelte

@@ -1,27 +1,35 @@
 <script lang="ts">
-	import { getContext, onMount } from 'svelte';
-	const i18n = getContext('i18n');
+	import { getContext } from 'svelte';
+	import type { Writable } from 'svelte/store';
+
+	const i18n: Writable<any> = getContext('i18n');
 
 	import dayjs from 'dayjs';
 	import localizedFormat from 'dayjs/plugin/localizedFormat';
 	import { getTimeRange } from '$lib/utils';
 	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
-	import Loader from '$lib/components/common/Loader.svelte';
-	import Spinner from '$lib/components/common/Spinner.svelte';
+	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
+	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 
 	dayjs.extend(localizedFormat);
 
-	export let chats = [];
+	export let chats: any[] = [];
 
 	export let chatListLoading = false;
-	export let allChatsLoaded = false;
-
-	export let loadHandler: Function = null;
 	export let showOwnerInfo = false;
-
-	let chatList = null;
+	export let page = 1;
+	export let total = 0;
+	export let perPage = 10;
+	export let orderBy: 'title' | 'updated_at' = 'updated_at';
+	export let direction: 'asc' | 'desc' = 'desc';
+	export let onPageChange: Function = () => {};
+	export let onSort: Function = () => {};
+
+	let chatList: any[] | null = null;
+	let totalPages = 1;
+	let pages: (number | 'ellipsis')[] = [];
 
 	const init = async () => {
 		if (chats.length === 0) {
@@ -31,34 +39,43 @@
 				...chat,
 				time_range: getTimeRange(chat.updated_at)
 			}));
-
-			chatList.sort((a, b) => {
-				if (direction === 'asc') {
-					return a[orderBy] > b[orderBy] ? 1 : -1;
-				} else {
-					return a[orderBy] < b[orderBy] ? 1 : -1;
-				}
-			});
 		}
 	};
 
-	const setSortKey = (key) => {
-		if (orderBy === key) {
-			direction = direction === 'asc' ? 'desc' : 'asc';
-		} else {
-			orderBy = key;
-			direction = 'asc';
+	const setSortKey = (key: 'title' | 'updated_at') => {
+		onSort(key);
+	};
+
+	const buildPages = (currentPage: number, pageCount: number): (number | 'ellipsis')[] => {
+		if (pageCount <= 7) {
+			return Array.from({ length: pageCount }, (_, i) => i + 1);
 		}
 
-		init();
-	};
+		const items: (number | 'ellipsis')[] = [1];
+		if (currentPage > 3) {
+			items.push('ellipsis');
+		}
 
-	let orderBy = 'updated_at';
-	let direction = 'desc'; // 'asc' or 'desc'
+		const start = Math.max(2, currentPage - 1);
+		const end = Math.min(pageCount - 1, currentPage + 1);
+		for (let i = start; i <= end; i++) {
+			items.push(i);
+		}
+
+		if (currentPage < pageCount - 2) {
+			items.push('ellipsis');
+		}
+		items.push(pageCount);
+
+		return items;
+	};
 
 	$: if (chats) {
 		init();
 	}
+
+	$: totalPages = Math.max(1, Math.ceil(total / perPage));
+	$: pages = buildPages(page, totalPages);
 </script>
 
 {#if chatList}
@@ -153,7 +170,6 @@
 				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"
 				href={`/c/${chat.id}`}
-				on:click={() => (show = false)}
 			>
 				<div class="text-ellipsis line-clamp-1 w-full sm:basis-3/5">
 					{chat?.title}
@@ -177,19 +193,48 @@
 			</a>
 		{/each}
 
-		{#if !allChatsLoaded && loadHandler}
-			<Loader
-				on:visible={(e) => {
-					if (!chatListLoading) {
-						loadHandler();
-					}
-				}}
-			>
-				<div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2">
-					<Spinner className=" size-4" />
-					<div class=" ">Loading...</div>
-				</div>
-			</Loader>
+		{#if totalPages > 1}
+			<div class="flex items-center justify-center gap-1.5 pt-2">
+				<button
+					class="inline-flex size-7 items-center justify-center rounded-lg text-xs font-medium text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 disabled:cursor-not-allowed disabled:opacity-25 dark:text-gray-500 dark:hover:bg-gray-850 dark:hover:text-gray-300"
+					disabled={chatListLoading || page <= 1}
+					aria-label={$i18n.t('Previous page')}
+					on:click={() => onPageChange(page - 1)}
+				>
+					<ChevronLeft className="size-3.5" strokeWidth="2" />
+				</button>
+
+				{#each pages as item, index (item === 'ellipsis' ? `ellipsis-${index}` : item)}
+					{#if item === 'ellipsis'}
+						<span
+							class="inline-flex size-7 items-center justify-center text-xs text-gray-400 select-none dark:text-gray-600"
+						>
+							...
+						</span>
+					{:else}
+						<button
+							class="inline-flex size-7 items-center justify-center rounded-lg text-xs font-medium transition hover:bg-gray-50 hover:text-gray-700 dark:hover:bg-gray-850 dark:hover:text-gray-300 {item ===
+							page
+								? 'bg-gray-50 text-gray-800 dark:bg-gray-850 dark:text-gray-100'
+								: 'text-gray-500 dark:text-gray-500'}"
+							aria-label={`Page ${item}`}
+							aria-current={item === page ? 'page' : undefined}
+							on:click={() => onPageChange(item)}
+						>
+							{item}
+						</button>
+					{/if}
+				{/each}
+
+				<button
+					class="inline-flex size-7 items-center justify-center rounded-lg text-xs font-medium text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 disabled:cursor-not-allowed disabled:opacity-25 dark:text-gray-500 dark:hover:bg-gray-850 dark:hover:text-gray-300"
+					disabled={chatListLoading || page >= totalPages}
+					aria-label={$i18n.t('Next page')}
+					on:click={() => onPageChange(page + 1)}
+				>
+					<ChevronRight className="size-3.5" strokeWidth="2" />
+				</button>
+			</div>
 		{/if}
 	</div>
 {/if}