Merge pull request #4266 from thearyadev/sidebar-pagination

feat: Sidebar infinite scroll (pagination)

backend/apps/webui/models/chats.py

@@ -250,7 +250,7 @@ class ChatTable:
         user_id: str,
         include_archived: bool = False,
         skip: int = 0,
-        limit: int = 50,
+        limit: int = -1,
     ) -> List[ChatTitleIdResponse]:
         with get_db() as db:
             query = db.query(Chat).filter_by(user_id=user_id)
@@ -260,9 +260,10 @@ class ChatTable:
             all_chats = (
                 query.order_by(Chat.updated_at.desc())
                 # limit cols
-                .with_entities(
-                    Chat.id, Chat.title, Chat.updated_at, Chat.created_at
-                ).all()
+                .with_entities(Chat.id, Chat.title, Chat.updated_at, Chat.created_at)
+                .limit(limit)
+                .offset(skip)
+                .all()
             )
             # result has to be destrctured from sqlalchemy `row` and mapped to a dict since the `ChatModel`is not the returned dataclass.
             return [

backend/apps/webui/routers/chats.py

@@ -43,7 +43,7 @@ router = APIRouter()
 @router.get("/", response_model=List[ChatTitleIdResponse])
 @router.get("/list", response_model=List[ChatTitleIdResponse])
 async def get_session_user_chat_list(
-    user=Depends(get_verified_user), skip: int = 0, limit: int = 50
+    user=Depends(get_verified_user), skip: int = 0, limit: int = -1
 ):
     return Chats.get_chat_title_id_list_by_user_id(user.id, skip=skip, limit=limit)
 

src/lib/apis/chats/index.ts

@@ -32,10 +32,10 @@ export const createNewChat = async (token: string, chat: object) => {
 	return res;
 };
 
-export const getChatList = async (token: string = '') => {
+export const getChatList = async (token: string = '', skip: number = 0, limit: number = -1) => {
 	let error = null;
 
-	const res = await fetch(`${WEBUI_API_BASE_URL}/chats/`, {
+	const res = await fetch(`${WEBUI_API_BASE_URL}/chats/?skip=${skip}&limit=${limit}`, {
 		method: 'GET',
 		headers: {
 			Accept: 'application/json',

src/lib/components/chat/Chat.svelte

@@ -25,7 +25,9 @@
 		user,
 		socket,
 		showCallOverlay,
-		tools
+		tools,
+		pageSkip,
+		pageLimit
 	} from '$lib/stores';
 	import {
 		convertMessagesToHistory,
@@ -421,7 +423,9 @@
 					params: params,
 					files: chatFiles
 				});
-				await chats.set(await getChatList(localStorage.token));
+				await chats.set(
+					await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
+				);
 			}
 		}
 	};
@@ -467,7 +471,9 @@
 					params: params,
 					files: chatFiles
 				});
-				await chats.set(await getChatList(localStorage.token));
+				await chats.set(
+					await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
+				);
 			}
 		}
 	};
@@ -627,7 +633,9 @@
 					tags: [],
 					timestamp: Date.now()
 				});
-				await chats.set(await getChatList(localStorage.token));
+				await chats.set(
+					await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
+				);
 				await chatId.set(chat.id);
 			} else {
 				await chatId.set('local');
@@ -703,7 +711,8 @@
 			})
 		);
 
-		await chats.set(await getChatList(localStorage.token));
+		await chats.set(await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit));
+
 		return _responses;
 	};
 
@@ -949,7 +958,9 @@
 						params: params,
 						files: chatFiles
 					});
-					await chats.set(await getChatList(localStorage.token));
+					await chats.set(
+						await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
+					);
 				}
 			}
 		} else {
@@ -1216,7 +1227,9 @@
 							params: params,
 							files: chatFiles
 						});
-						await chats.set(await getChatList(localStorage.token));
+						await chats.set(
+							await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
+						);
 					}
 				}
 			} else {
@@ -1381,7 +1394,9 @@
 
 		if ($settings.saveChatHistory ?? true) {
 			chat = await updateChatById(localStorage.token, _chatId, { title: _title });
-			await chats.set(await getChatList(localStorage.token));
+			await chats.set(
+				await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
+			);
 		}
 	};
 

src/lib/components/chat/Messages.svelte

 <script lang="ts">
 	import { v4 as uuidv4 } from 'uuid';
-	import { chats, config, settings, user as _user, mobile } from '$lib/stores';
+	import { chats, config, settings, user as _user, mobile, pageSkip, pageLimit } from '$lib/stores';
 	import { tick, getContext, onMount } from 'svelte';
 
 	import { toast } from 'svelte-sonner';
@@ -90,7 +90,7 @@
 			history: history
 		});
 
-		await chats.set(await getChatList(localStorage.token));
+		await chats.set(await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit));
 	};
 
 	const confirmEditResponseMessage = async (messageId, content) => {

src/lib/components/chat/Settings/Chats.svelte

@@ -2,7 +2,7 @@
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
-	import { chats, user, settings } from '$lib/stores';
+	import { chats, user, settings, scrollPaginationEnabled, pageSkip, pageLimit } from '$lib/stores';
 
 	import {
 		archiveAllChats,
@@ -12,7 +12,7 @@
 		getAllUserChats,
 		getChatList
 	} from '$lib/apis/chats';
-	import { getImportOrigin, convertOpenAIChats } from '$lib/utils';
+	import { getImportOrigin, convertOpenAIChats, disablePagination } from '$lib/utils';
 	import { onMount, getContext } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { toast } from 'svelte-sonner';
@@ -61,7 +61,7 @@
 				await createNewChat(localStorage.token, chat);
 			}
 		}
-
+		disablePagination();
 		await chats.set(await getChatList(localStorage.token));
 	};
 
@@ -77,6 +77,7 @@
 		await archiveAllChats(localStorage.token).catch((error) => {
 			toast.error(error);
 		});
+		disablePagination();
 		await chats.set(await getChatList(localStorage.token));
 	};
 
@@ -85,6 +86,7 @@
 		await deleteAllChats(localStorage.token).catch((error) => {
 			toast.error(error);
 		});
+		disablePagination();
 		await chats.set(await getChatList(localStorage.token));
 	};
 

src/lib/components/chat/Tags.svelte

@@ -8,7 +8,7 @@
 		getTagsById,
 		updateChatById
 	} from '$lib/apis/chats';
-	import { tags as _tags, chats, pinnedChats } from '$lib/stores';
+	import { tags as _tags, chats, pinnedChats, pageSkip, pageLimit, tagView } from '$lib/stores';
 	import { createEventDispatcher, onMount } from 'svelte';
 
 	const dispatch = createEventDispatcher();
@@ -46,11 +46,7 @@
 			tags: tags
 		});
 
-		console.log($_tags);
 		await _tags.set(await getAllChatTags(localStorage.token));
-
-		console.log($_tags);
-
 		if ($_tags.map((t) => t.name).includes(tagName)) {
 			if (tagName === 'pinned') {
 				await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
@@ -62,7 +58,11 @@
 				dispatch('close');
 			}
 		} else {
-			await chats.set(await getChatList(localStorage.token));
+			// if the tag we deleted is no longer a valid tag, return to main chat list view
+			tagView.set(false);
+			await chats.set(
+				await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
+			);
 			await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
 		}
 	};

src/lib/components/layout/Sidebar.svelte

@@ -11,11 +11,16 @@
 		showSidebar,
 		mobile,
 		showArchivedChats,
-		pinnedChats
+		pinnedChats,
+		pageSkip,
+		pageLimit,
+		scrollPaginationEnabled,
+		tagView
 	} from '$lib/stores';
 	import { onMount, getContext, tick } from 'svelte';
 
 	const i18n = getContext('i18n');
+	import { disablePagination } from '$lib/utils';
 
 	import { updateUserSettings } from '$lib/apis/users';
 	import {
@@ -34,6 +39,7 @@
 	import UserMenu from './Sidebar/UserMenu.svelte';
 	import ChatItem from './Sidebar/ChatItem.svelte';
 	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+	import Sparkles from '../icons/Sparkles.svelte';
 
 	const BREAKPOINT = 768;
 
@@ -49,6 +55,13 @@
 	let showDropdown = false;
 
 	let filteredChatList = [];
+	let paginationScrollThreashold = 0.6;
+	let nextPageLoading = false;
+	let chatPagniationComplete = false;
+	// number of chats per page depends on screen size.
+	// 35px is the height of each chat item.
+	// load 5 extra chats
+	pageLimit.set(Math.round(window.innerHeight / 35) + 5);
 
 	$: filteredChatList = $chats.filter((chat) => {
 		if (search === '') {
@@ -84,7 +97,7 @@
 		showSidebar.set(window.innerWidth > BREAKPOINT);
 
 		await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
-		await chats.set(await getChatList(localStorage.token));
+		await chats.set(await getChatList(localStorage.token, $pageSkip, $pageLimit));
 
 		let touchstart;
 		let touchend;
@@ -185,7 +198,9 @@
 				await tick();
 				goto('/');
 			}
-			await chats.set(await getChatList(localStorage.token));
+			await chats.set(
+				await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
+			);
 			await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
 		}
 	};
@@ -410,7 +425,10 @@
 						class="w-full rounded-r-xl py-1.5 pl-2.5 pr-4 text-sm bg-transparent dark:text-gray-300 outline-none"
 						placeholder={$i18n.t('Search')}
 						bind:value={search}
-						on:focus={() => {
+						on:focus={async () => {
+							disablePagination();
+							await chats.set(await getChatList(localStorage.token)); // when searching, load all chats
+
 							enrichChatsWithContent($chats);
 						}}
 					/>
@@ -422,7 +440,11 @@
 					<button
 						class="px-2.5 text-xs font-medium bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800 transition rounded-full"
 						on:click={async () => {
-							await chats.set(await getChatList(localStorage.token));
+							disablePagination();
+
+							await chats.set(
+								await getChatList(localStorage.token, $pageSkip * $pageLimit, $pageLimit)
+							);
 						}}
 					>
 						{$i18n.t('all')}
@@ -433,9 +455,16 @@
 							on:click={async () => {
 								let chatIds = await getChatListByTagName(localStorage.token, tag.name);
 								if (chatIds.length === 0) {
+									// no chats found in the tag
 									await tags.set(await getAllChatTags(localStorage.token));
-									chatIds = await getChatList(localStorage.token);
+									disablePagination();
+									chatIds = await getChatList(
+										localStorage.token,
+										$pageSkip * $pageLimit,
+										$pageLimit
+									);
 								}
+								tagView.set(true);
 								await chats.set(chatIds);
 							}}
 						>
@@ -477,7 +506,33 @@
 				</div>
 			{/if}
 
-			<div class="pl-2 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto scrollbar-hidden">
+			<div
+				class="pl-2 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto scrollbar-hidden"
+				on:scroll={async (e) => {
+					if (!$scrollPaginationEnabled) return;
+					if ($tagView) return;
+					if (nextPageLoading) return;
+					if (chatPagniationComplete) return;
+
+					const maxScroll = e.target.scrollHeight - e.target.clientHeight;
+					const currentPos = e.target.scrollTop;
+					const ratio = currentPos / maxScroll;
+					if (ratio >= paginationScrollThreashold) {
+						nextPageLoading = true;
+						pageSkip.set($pageSkip + 1);
+						// extend existing chats
+						const nextPageChats = await getChatList(
+							localStorage.token,
+							$pageSkip * $pageLimit,
+							$pageLimit
+						);
+						// once the bottom of the list has been reached (no results) there is no need to continue querying
+						chatPagniationComplete = nextPageChats.length === 0;
+						await chats.set([...$chats, ...nextPageChats]);
+						nextPageLoading = false;
+					}
+				}}
+			>
 				{#each filteredChatList as chat, idx}
 					{#if idx === 0 || (idx > 0 && chat.time_range !== filteredChatList[idx - 1].time_range)}
 						<div
@@ -527,6 +582,11 @@
 						}}
 					/>
 				{/each}
+				{#if nextPageLoading}
+					<div class="w-full flex justify-center py-4 animate-pulse">
+						<Sparkles />
+					</div>
+				{/if}
 			</div>
 		</div>
 

src/lib/components/layout/Sidebar/ChatItem.svelte

@@ -14,7 +14,15 @@
 		getChatListByTagName,
 		updateChatById
 	} from '$lib/apis/chats';
-	import { chatId, chats, mobile, pinnedChats, showSidebar } from '$lib/stores';
+	import {
+		chatId,
+		chats,
+		mobile,
+		pageSkip,
+		pageLimit,
+		pinnedChats,
+		showSidebar
+	} from '$lib/stores';
 
 	import ChatMenu from './ChatMenu.svelte';
 	import ShareChatModal from '$lib/components/chat/ShareChatModal.svelte';
@@ -40,7 +48,9 @@
 			await updateChatById(localStorage.token, id, {
 				title: _title
 			});
-			await chats.set(await getChatList(localStorage.token));
+			await chats.set(
+				await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
+			);
 			await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
 		}
 	};
@@ -53,14 +63,16 @@
 
 		if (res) {
 			goto(`/c/${res.id}`);
-			await chats.set(await getChatList(localStorage.token));
+			await chats.set(
+				await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
+			);
 			await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
 		}
 	};
 
 	const archiveChatHandler = async (id) => {
 		await archiveChatById(localStorage.token, id);
-		await chats.set(await getChatList(localStorage.token));
+		await chats.set(await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit));
 		await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
 	};
 

src/lib/stores/index.ts

@@ -41,6 +41,10 @@ export const showSettings = writable(false);
 export const showArchivedChats = writable(false);
 export const showChangelog = writable(false);
 export const showCallOverlay = writable(false);
+export const scrollPaginationEnabled = writable(true);
+export const pageSkip = writable(0);
+export const pageLimit = writable(-1);
+export const tagView = writable(false);
 
 export type Model = OpenAIModel | OllamaModel;
 

src/lib/utils/index.ts

 import { v4 as uuidv4 } from 'uuid';
 import sha256 from 'js-sha256';
 import { WEBUI_BASE_URL } from '$lib/constants';
+import { scrollPaginationEnabled, pageLimit, pageSkip } from '$lib/stores';
 
 //////////////////////////
 // Helper functions
@@ -779,3 +780,9 @@ export const bestMatchingLanguage = (supportedLanguages, preferredLanguages, def
 	console.log(languages, preferredLanguages, match, defaultLocale);
 	return match || defaultLocale;
 };
+
+export const disablePagination = () => {
+	scrollPaginationEnabled.set(false);
+	pageLimit.set(-1);
+	pageSkip.set(0);
+};