From a084938d9cabcf3a93492d2d48032b7d83cef9f1 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sun, 4 Aug 2024 16:58:08 +0200
Subject: [PATCH] refac: chatlist skip, limit -> page

---
 backend/apps/webui/routers/chats.py           | 10 ++++-
 src/lib/apis/chats/index.ts                   |  9 +++-
 src/lib/components/chat/Chat.svelte           | 42 +++++++++----------
 src/lib/components/chat/Messages.svelte       |  5 ++-
 src/lib/components/chat/Settings/Chats.svelte |  2 +-
 src/lib/components/chat/Tags.svelte           |  7 ++--
 src/lib/components/layout/Sidebar.svelte      | 33 +++++++--------
 .../components/layout/Sidebar/ChatItem.svelte | 26 +++++-------
 src/lib/stores/index.ts                       |  3 +-
 src/lib/utils/index.ts                        |  9 ++--
 10 files changed, 72 insertions(+), 74 deletions(-)

diff --git a/backend/apps/webui/routers/chats.py b/backend/apps/webui/routers/chats.py
index 47c7c4a87..0b327d0a0 100644
--- a/backend/apps/webui/routers/chats.py
+++ b/backend/apps/webui/routers/chats.py
@@ -43,9 +43,15 @@ 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 = -1
+    user=Depends(get_verified_user), page: Optional[int] = None
 ):
-    return Chats.get_chat_title_id_list_by_user_id(user.id, skip=skip, limit=limit)
+    if page:
+        limit = 20
+        skip = (page - 1) * limit
+
+        return Chats.get_chat_title_id_list_by_user_id(user.id, skip=skip, limit=limit)
+    else:
+        return Chats.get_chat_title_id_list_by_user_id(user.id)
 
 
 ############################
diff --git a/src/lib/apis/chats/index.ts b/src/lib/apis/chats/index.ts
index 8ff12f4b6..8f4f81aea 100644
--- a/src/lib/apis/chats/index.ts
+++ b/src/lib/apis/chats/index.ts
@@ -32,10 +32,15 @@ export const createNewChat = async (token: string, chat: object) => {
 	return res;
 };
 
-export const getChatList = async (token: string = '', skip: number = 0, limit: number = -1) => {
+export const getChatList = async (token: string = '', page: number | null = null) => {
 	let error = null;
+	const searchParams = new URLSearchParams();
 
-	const res = await fetch(`${WEBUI_API_BASE_URL}/chats/?skip=${skip}&limit=${limit}`, {
+	if (page !== null) {
+		searchParams.append('page', `${page}`);
+	}
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/chats/?${searchParams.toString()}`, {
 		method: 'GET',
 		headers: {
 			Accept: 'application/json',
diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
index 49cecb696..c55605f82 100644
--- a/src/lib/components/chat/Chat.svelte
+++ b/src/lib/components/chat/Chat.svelte
@@ -26,8 +26,7 @@
 		socket,
 		showCallOverlay,
 		tools,
-		pageSkip,
-		pageLimit
+		currentChatPage
 	} from '$lib/stores';
 	import {
 		convertMessagesToHistory,
@@ -423,9 +422,9 @@
 					params: params,
 					files: chatFiles
 				});
-				await chats.set(
-					await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
-				);
+
+				currentChatPage.set(0);
+				await chats.set(await getChatList(localStorage.token, $currentChatPage));
 			}
 		}
 	};
@@ -471,9 +470,9 @@
 					params: params,
 					files: chatFiles
 				});
-				await chats.set(
-					await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
-				);
+
+				currentChatPage.set(0);
+				await chats.set(await getChatList(localStorage.token, $currentChatPage));
 			}
 		}
 	};
@@ -633,9 +632,9 @@
 					tags: [],
 					timestamp: Date.now()
 				});
-				await chats.set(
-					await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
-				);
+
+				currentChatPage.set(0);
+				await chats.set(await getChatList(localStorage.token, $currentChatPage));
 				await chatId.set(chat.id);
 			} else {
 				await chatId.set('local');
@@ -711,7 +710,8 @@
 			})
 		);
 
-		await chats.set(await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit));
+		currentChatPage.set(0);
+		await chats.set(await getChatList(localStorage.token, $currentChatPage));
 
 		return _responses;
 	};
@@ -958,9 +958,9 @@
 						params: params,
 						files: chatFiles
 					});
-					await chats.set(
-						await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
-					);
+
+					currentChatPage.set(0);
+					await chats.set(await getChatList(localStorage.token, $currentChatPage));
 				}
 			}
 		} else {
@@ -1227,9 +1227,9 @@
 							params: params,
 							files: chatFiles
 						});
-						await chats.set(
-							await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
-						);
+
+						currentChatPage.set(0);
+						await chats.set(await getChatList(localStorage.token, $currentChatPage));
 					}
 				}
 			} else {
@@ -1394,9 +1394,9 @@
 
 		if ($settings.saveChatHistory ?? true) {
 			chat = await updateChatById(localStorage.token, _chatId, { title: _title });
-			await chats.set(
-				await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
-			);
+
+			currentChatPage.set(0);
+			await chats.set(await getChatList(localStorage.token, $currentChatPage));
 		}
 	};
 
diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index 8e2946c19..5ba9fefaa 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { v4 as uuidv4 } from 'uuid';
-	import { chats, config, settings, user as _user, mobile, pageSkip, pageLimit } from '$lib/stores';
+	import { chats, config, settings, user as _user, mobile, currentChatPage } from '$lib/stores';
 	import { tick, getContext, onMount } from 'svelte';
 
 	import { toast } from 'svelte-sonner';
@@ -90,7 +90,8 @@
 			history: history
 		});
 
-		await chats.set(await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit));
+		currentChatPage.set(0);
+		await chats.set(await getChatList(localStorage.token, $currentChatPage));
 	};
 
 	const confirmEditResponseMessage = async (messageId, content) => {
diff --git a/src/lib/components/chat/Settings/Chats.svelte b/src/lib/components/chat/Settings/Chats.svelte
index f62e3926e..31e8d7f6a 100644
--- a/src/lib/components/chat/Settings/Chats.svelte
+++ b/src/lib/components/chat/Settings/Chats.svelte
@@ -2,7 +2,7 @@
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
-	import { chats, user, settings, scrollPaginationEnabled, pageSkip, pageLimit } from '$lib/stores';
+	import { chats, user, settings, scrollPaginationEnabled } from '$lib/stores';
 
 	import {
 		archiveAllChats,
diff --git a/src/lib/components/chat/Tags.svelte b/src/lib/components/chat/Tags.svelte
index a806f2aaa..6297d69df 100644
--- a/src/lib/components/chat/Tags.svelte
+++ b/src/lib/components/chat/Tags.svelte
@@ -8,7 +8,7 @@
 		getTagsById,
 		updateChatById
 	} from '$lib/apis/chats';
-	import { tags as _tags, chats, pinnedChats, pageSkip, pageLimit } from '$lib/stores';
+	import { tags as _tags, chats, pinnedChats, currentChatPage } from '$lib/stores';
 	import { createEventDispatcher, onMount } from 'svelte';
 
 	const dispatch = createEventDispatcher();
@@ -61,9 +61,8 @@
 		} else {
 			// if the tag we deleted is no longer a valid tag, return to main chat list view
 			enablePagination();
-			await chats.set(
-				await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
-			);
+			currentChatPage.set(0);
+			await chats.set(await getChatList(localStorage.token, $currentChatPage));
 			await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
 		}
 	};
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 70360a46d..2785266e9 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -12,9 +12,8 @@
 		mobile,
 		showArchivedChats,
 		pinnedChats,
-		pageSkip,
-		pageLimit,
-		scrollPaginationEnabled
+		scrollPaginationEnabled,
+		currentChatPage
 	} from '$lib/stores';
 	import { onMount, getContext, tick } from 'svelte';
 
@@ -60,8 +59,6 @@
 	let chatListLoading = false;
 	let allChatsLoaded = false;
 
-	pageLimit.set(20);
-
 	$: filteredChatList = $chats.filter((chat) => {
 		if (search === '') {
 			return true;
@@ -84,8 +81,9 @@
 
 	const loadMoreChats = async () => {
 		chatListLoading = true;
-		pageSkip.set($pageSkip + 1);
-		const newChatList = await getChatList(localStorage.token, $pageSkip * $pageLimit, $pageLimit);
+
+		currentChatPage.set($currentChatPage + 1);
+		const newChatList = await getChatList(localStorage.token, $currentChatPage);
 
 		// once the bottom of the list has been reached (no results) there is no need to continue querying
 		allChatsLoaded = newChatList.length === 0;
@@ -108,7 +106,7 @@
 		showSidebar.set(window.innerWidth > BREAKPOINT);
 
 		await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
-		await chats.set(await getChatList(localStorage.token, $pageSkip, $pageLimit));
+		await chats.set(await getChatList(localStorage.token, $currentChatPage));
 
 		let touchstart;
 		let touchend;
@@ -209,9 +207,11 @@
 				await tick();
 				goto('/');
 			}
-			await chats.set(
-				await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
-			);
+
+			allChatsLoaded = false;
+			currentChatPage.set(0);
+			await chats.set(await getChatList(localStorage.token, $currentChatPage));
+
 			await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
 		}
 	};
@@ -453,9 +453,6 @@
 						on:click={async () => {
 							enablePagination();
 							allChatsLoaded = false;
-							await chats.set(
-								await getChatList(localStorage.token, $pageSkip * $pageLimit, $pageLimit)
-							);
 						}}
 					>
 						{$i18n.t('all')}
@@ -469,11 +466,9 @@
 								if (chatIds.length === 0) {
 									await tags.set(await getAllChatTags(localStorage.token));
 
-									chatIds = await getChatList(
-										localStorage.token,
-										$pageSkip * $pageLimit,
-										$pageLimit
-									);
+									// if the tag we deleted is no longer a valid tag, return to main chat list view
+									enablePagination();
+									allChatsLoaded = false;
 								}
 								await chats.set(chatIds);
 							}}
diff --git a/src/lib/components/layout/Sidebar/ChatItem.svelte b/src/lib/components/layout/Sidebar/ChatItem.svelte
index a107a5f31..379fee716 100644
--- a/src/lib/components/layout/Sidebar/ChatItem.svelte
+++ b/src/lib/components/layout/Sidebar/ChatItem.svelte
@@ -14,15 +14,7 @@
 		getChatListByTagName,
 		updateChatById
 	} from '$lib/apis/chats';
-	import {
-		chatId,
-		chats,
-		mobile,
-		pageSkip,
-		pageLimit,
-		pinnedChats,
-		showSidebar
-	} from '$lib/stores';
+	import { chatId, chats, mobile, pinnedChats, showSidebar, currentChatPage } from '$lib/stores';
 
 	import ChatMenu from './ChatMenu.svelte';
 	import ShareChatModal from '$lib/components/chat/ShareChatModal.svelte';
@@ -48,9 +40,9 @@
 			await updateChatById(localStorage.token, id, {
 				title: _title
 			});
-			await chats.set(
-				await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
-			);
+
+			currentChatPage.set(0);
+			await chats.set(await getChatList(localStorage.token, $currentChatPage));
 			await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
 		}
 	};
@@ -63,16 +55,18 @@
 
 		if (res) {
 			goto(`/c/${res.id}`);
-			await chats.set(
-				await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
-			);
+
+			currentChatPage.set(0);
+			await chats.set(await getChatList(localStorage.token, $currentChatPage));
 			await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
 		}
 	};
 
 	const archiveChatHandler = async (id) => {
 		await archiveChatById(localStorage.token, id);
-		await chats.set(await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit));
+
+		currentChatPage.set(0);
+		await chats.set(await getChatList(localStorage.token, $currentChatPage));
 		await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
 	};
 
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index 870cc55ff..f76d37fcc 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -43,8 +43,7 @@ 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 currentChatPage = writable(0);
 
 export type Model = OpenAIModel | OllamaModel;
 
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index 55e1a6e95..f93b93612 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -1,7 +1,7 @@
 import { v4 as uuidv4 } from 'uuid';
 import sha256 from 'js-sha256';
 import { WEBUI_BASE_URL } from '$lib/constants';
-import { scrollPaginationEnabled, pageLimit, pageSkip, chats } from '$lib/stores';
+import { scrollPaginationEnabled, chats, currentChatPage } from '$lib/stores';
 
 //////////////////////////
 // Helper functions
@@ -782,14 +782,13 @@ export const bestMatchingLanguage = (supportedLanguages, preferredLanguages, def
 };
 
 export const enablePagination = () => {
+	// Enable infinite scroll pagination
 	chats.set([]);
+	currentChatPage.set(0);
 	scrollPaginationEnabled.set(true);
-	pageLimit.set(20);
-	pageSkip.set(0);
 };
 
 export const disablePagination = () => {
+	// Disable infinite scroll pagination
 	scrollPaginationEnabled.set(false);
-	pageLimit.set(-1);
-	pageSkip.set(0);
 };