refac: folder page chat list

backend/open_webui/routers/chats.py

@@ -218,7 +218,7 @@ async def get_chat_list_by_folder_id(
     folder_id: str, page: Optional[int] = 1, user=Depends(get_verified_user)
 ):
     try:
-        limit = 60
+        limit = 10
         skip = (page - 1) * limit
 
         return [

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

@@ -7,11 +7,18 @@
 	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';
 
 	dayjs.extend(localizedFormat);
 
 	export let chats = [];
 
+	export let chatListLoading = false;
+	export let allChatsLoaded = false;
+
+	export let loadHandler: Function = null;
+
 	let chatList = null;
 
 	const init = async () => {
@@ -158,7 +165,7 @@
 			</a>
 		{/each}
 
-		<!-- {#if !allChatsLoaded && loadHandler}
+		{#if !allChatsLoaded && loadHandler}
 			<Loader
 				on:visible={(e) => {
 					if (!chatListLoading) {
@@ -171,6 +178,6 @@
 					<div class=" ">Loading...</div>
 				</div>
 			</Loader>
-	{/if} -->
+		{/if}
 	</div>
 {/if}

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

@@ -13,11 +13,38 @@
 
 	let selectedTab = 'chats';
 
-	let chats = null;
 	let page = 1;
 
+	let chats = null;
+	let chatListLoading = false;
+	let allChatsLoaded = false;
+
+	const loadChats = async () => {
+		chatListLoading = true;
+
+		page += 1;
+
+		let newChatList = [];
+
+		newChatList = await getChatListByFolderId(localStorage.token, folder.id, page).catch(
+			(error) => {
+				console.error(error);
+				return [];
+			}
+		);
+
+		// once the bottom of the list has been reached (no results) there is no need to continue querying
+		allChatsLoaded = newChatList.length === 0;
+		chats = [...chats, ...newChatList];
+
+		chatListLoading = false;
+	};
+
 	const setChatList = async () => {
 		chats = null;
+		page = 1;
+		allChatsLoaded = false;
+		chatListLoading = false;
 
 		if (folder && folder.id) {
 			const res = await getChatListByFolderId(localStorage.token, folder.id, page);
@@ -71,7 +98,7 @@
 			<FolderKnowledge />
 		{:else if selectedTab === 'chats'}
 			{#if chats !== null}
-				<ChatList {chats} />
+				<ChatList {chats} {chatListLoading} {allChatsLoaded} loadHandler={loadChats} />
 			{:else}
 				<div class="py-10">
 					<Spinner />