From e5dd7e65d48dfa3f6eaf158a59388c0e99cf3f47 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sun, 4 Aug 2024 17:31:41 +0200
Subject: [PATCH] refac

---
 src/lib/components/chat/Settings/Chats.svelte | 23 ++++++++------
 src/lib/components/chat/Tags.svelte           | 11 +++++--
 src/lib/components/layout/Sidebar.svelte      | 31 +++++++++++--------
 src/lib/stores/index.ts                       |  2 +-
 src/lib/utils/index.ts                        | 13 +-------
 5 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/src/lib/components/chat/Settings/Chats.svelte b/src/lib/components/chat/Settings/Chats.svelte
index 31e8d7f6a..dce3e9b9f 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 } from '$lib/stores';
+	import { chats, user, settings, scrollPaginationEnabled, currentChatPage } from '$lib/stores';
 
 	import {
 		archiveAllChats,
@@ -12,12 +12,7 @@
 		getAllUserChats,
 		getChatList
 	} from '$lib/apis/chats';
-	import {
-		getImportOrigin,
-		convertOpenAIChats,
-		disablePagination,
-		enablePagination
-	} from '$lib/utils';
+	import { getImportOrigin, convertOpenAIChats } from '$lib/utils';
 	import { onMount, getContext } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { toast } from 'svelte-sonner';
@@ -66,7 +61,10 @@
 				await createNewChat(localStorage.token, chat);
 			}
 		}
-		enablePagination();
+
+		currentChatPage.set(1);
+		await chats.set(await getChatList(localStorage.token, $currentChatPage));
+		scrollPaginationEnabled.set(true);
 	};
 
 	const exportChats = async () => {
@@ -81,7 +79,10 @@
 		await archiveAllChats(localStorage.token).catch((error) => {
 			toast.error(error);
 		});
-		enablePagination();
+
+		currentChatPage.set(1);
+		await chats.set(await getChatList(localStorage.token, $currentChatPage));
+		scrollPaginationEnabled.set(true);
 	};
 
 	const deleteAllChatsHandler = async () => {
@@ -90,7 +91,9 @@
 			toast.error(error);
 		});
 
-		enablePagination();
+		currentChatPage.set(1);
+		await chats.set(await getChatList(localStorage.token, $currentChatPage));
+		scrollPaginationEnabled.set(true);
 	};
 
 	const toggleSaveChatHistory = async () => {
diff --git a/src/lib/components/chat/Tags.svelte b/src/lib/components/chat/Tags.svelte
index 746ca74c2..e6d01b3b5 100644
--- a/src/lib/components/chat/Tags.svelte
+++ b/src/lib/components/chat/Tags.svelte
@@ -8,13 +8,18 @@
 		getTagsById,
 		updateChatById
 	} from '$lib/apis/chats';
-	import { tags as _tags, chats, pinnedChats, currentChatPage } from '$lib/stores';
+	import {
+		tags as _tags,
+		chats,
+		pinnedChats,
+		currentChatPage,
+		scrollPaginationEnabled
+	} from '$lib/stores';
 	import { createEventDispatcher, onMount } from 'svelte';
 
 	const dispatch = createEventDispatcher();
 
 	import Tags from '../common/Tags.svelte';
-	import { enablePagination } from '$lib/utils';
 
 	export let chatId = '';
 	let tags = [];
@@ -60,10 +65,10 @@
 			}
 		} else {
 			// if the tag we deleted is no longer a valid tag, return to main chat list view
-			enablePagination();
 			currentChatPage.set(1);
 			await chats.set(await getChatList(localStorage.token, $currentChatPage));
 			await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
+			await scrollPaginationEnabled.set(true);
 		}
 	};
 
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index bdd3578e0..be2ebb093 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -18,7 +18,6 @@
 	import { onMount, getContext, tick } from 'svelte';
 
 	const i18n = getContext('i18n');
-	import { disablePagination, enablePagination } from '$lib/utils';
 
 	import { updateUserSettings } from '$lib/apis/users';
 	import {
@@ -56,7 +55,7 @@
 	let filteredChatList = [];
 
 	// Pagination variables
-	let chatListLoading = true;
+	let chatListLoading = false;
 	let allChatsLoaded = false;
 
 	$: filteredChatList = $chats.filter((chat) => {
@@ -79,6 +78,16 @@
 		}
 	});
 
+	const enablePagination = async () => {
+		// Reset pagination variables
+		currentChatPage.set(1);
+		allChatsLoaded = false;
+		await chats.set(await getChatList(localStorage.token, $currentChatPage));
+
+		// Enable pagination
+		scrollPaginationEnabled.set(true);
+	};
+
 	const loadMoreChats = async () => {
 		chatListLoading = true;
 
@@ -104,10 +113,8 @@
 		});
 
 		showSidebar.set(window.innerWidth > BREAKPOINT);
-
 		await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
-		await chats.set(await getChatList(localStorage.token, $currentChatPage));
-		chatListLoading = false;
+		await enablePagination();
 
 		let touchstart;
 		let touchend;
@@ -439,7 +446,7 @@
 						bind:value={search}
 						on:focus={async () => {
 							// TODO: migrate backend for more scalable search mechanism
-							disablePagination();
+							scrollPaginationEnabled.set(false);
 							await chats.set(await getChatList(localStorage.token)); // when searching, load all chats
 							enrichChatsWithContent($chats);
 						}}
@@ -452,9 +459,7 @@
 					<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 () => {
-							enablePagination();
-							allChatsLoaded = false;
-							await chats.set(await getChatList(localStorage.token, $currentChatPage));
+							await enablePagination();
 						}}
 					>
 						{$i18n.t('all')}
@@ -463,17 +468,17 @@
 						<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 () => {
-								disablePagination();
+								scrollPaginationEnabled.set(false);
 								let chatIds = await getChatListByTagName(localStorage.token, tag.name);
 								if (chatIds.length === 0) {
 									await tags.set(await getAllChatTags(localStorage.token));
 
 									// if the tag we deleted is no longer a valid tag, return to main chat list view
-									enablePagination();
-									allChatsLoaded = false;
-									chatIds = await getChatList(localStorage.token, $currentChatPage);
+									await enablePagination();
 								}
 								await chats.set(chatIds);
+
+								chatListLoading = false;
 							}}
 						>
 							{tag.name}
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index 48de00d0c..9b3f66cc0 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -42,7 +42,7 @@ export const showArchivedChats = writable(false);
 export const showChangelog = writable(false);
 export const showCallOverlay = writable(false);
 
-export const scrollPaginationEnabled = writable(true);
+export const scrollPaginationEnabled = writable(false);
 export const currentChatPage = writable(1);
 
 export type Model = OpenAIModel | OllamaModel;
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index a550b318c..c4384c92d 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -2,6 +2,7 @@ import { v4 as uuidv4 } from 'uuid';
 import sha256 from 'js-sha256';
 import { WEBUI_BASE_URL } from '$lib/constants';
 import { scrollPaginationEnabled, chats, currentChatPage } from '$lib/stores';
+import { getChatList } from '$lib/apis/chats';
 
 //////////////////////////
 // Helper functions
@@ -780,15 +781,3 @@ export const bestMatchingLanguage = (supportedLanguages, preferredLanguages, def
 	console.log(languages, preferredLanguages, match, defaultLocale);
 	return match || defaultLocale;
 };
-
-export const enablePagination = () => {
-	// Enable infinite scroll pagination
-	chats.set([]);
-	currentChatPage.set(1);
-	scrollPaginationEnabled.set(true);
-};
-
-export const disablePagination = () => {
-	// Disable infinite scroll pagination
-	scrollPaginationEnabled.set(false);
-};