UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2024-11-24 21:13:59 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

add: add paginated scroll handler

Browse Source
This commit is contained in:
Aryan Kothari 2024-08-01 15:19:14 -04:00
parent d11961626c
commit 62dc486c85
1 changed files with 70 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/lib/components/layout/Sidebar.svelte
View File

@ -11,7 +11,10 @@
showSidebar,
mobile,
showArchivedChats,
pinnedChats
pinnedChats,
pageSkip,
pageLimit,
scrollPaginationEnabled
} from '$lib/stores';
import { onMount, getContext, tick } from 'svelte';
@ -49,6 +52,12 @@
let showDropdown = false;
let filteredChatList = [];
let paginationScrollThreashold = 0.6;
let nextPageLoading = false;
let tagView = false;
let chatPagniationComplete = false;
pageLimit.set(20);
$: filteredChatList = $chats.filter((chat) => {
if (search === '') {
@ -84,7 +93,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 +194,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'));
}
};
@ -235,6 +246,9 @@
? ''
: 'invisible'}"
>
<h1 class="text-red-400 text-bold text-xl">
Chats loaded: {$chats.length}
</h1>
<div class="px-2.5 flex justify-between space-x-1 text-gray-600 dark:text-gray-400">
<a
id="sidebar-new-chat-button"
@ -410,7 +424,15 @@
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 () => {
// loading all chats. disable pagination on scrol.
scrollPaginationEnabled.set(false);
// subsequent queries will calculate page size to rehydrate the ui.
// since every chat is already loaded, the calculation should now load all chats.
pageSkip.set(0);
pageLimit.set(-1);
await chats.set(await getChatList(localStorage.token)); // when searching, load all chats
enrichChatsWithContent($chats);
}}
/>
@ -422,7 +444,13 @@
<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));
scrollPaginationEnabled.set(false);
pageSkip.set(0);
pageLimit.set(-1);
await chats.set(
await getChatList(localStorage.token, $pageSkip * $pageLimit, $pageLimit)
);
}}
>
{$i18n.t('all')}
@ -433,9 +461,18 @@
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);
scrollPaginationEnabled.set(false);
pageSkip.set(0);
pageLimit.set(-1);
chatIds = await getChatList(
localStorage.token,
$pageSkip * $pageLimit,
$pageLimit
);
}
tagView = true;
await chats.set(chatIds);
}}
>
@ -477,7 +514,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