Open bannert1337 opened 4 months ago
Here are the code search results. I'm now analyzing these search results to write the PR.
src/lib/components/layout/Sidebar.svelte
Implement lazy loading for chat sessions in the sidebar.
---
+++
@@ -1,5 +1,5 @@
- <div class="pl-2 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto scrollbar-hidden">
- {#each filteredChatList as chat, idx}
+ <div class="pl-2 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto scrollbar-hidden" on:scroll={handleScroll}>
+ {#each filteredChatList.slice(0, loadedChats) as chat, idx}
{#if idx === 0 || (idx > 0 && chat.time_range !== filteredChatList[idx - 1].time_range)}
<div
class="w-full pl-2.5 text-xs text-gray-500 dark:text-gray-500 font-medium {idx === 0
src/lib/components/layout/Sidebar.svelte
Add variables and functions for lazy loading.
---
+++
@@ -1,4 +1,6 @@
let filteredChatList = [];
+ let loadedChats = 20; // Initial number of chats to load
+ let loading = false;
$: filteredChatList = $chats.filter((chat) => {
if (search === '') {
@@ -18,4 +20,21 @@
return title.includes(query) || contentMatches;
}
- });
+ });
+
+ const loadMoreChats = () => {
+ if (!loading) {
+ loading = true;
+ setTimeout(() => {
+ loadedChats += 20;
+ loading = false;
+ }, 500); // Simulating an async loading delay
+ }
+ };
+
+ const handleScroll = (event) => {
+ const { scrollTop, clientHeight, scrollHeight } = event.target;
+ if (scrollTop + clientHeight >= scrollHeight - 100) {
+ loadMoreChats();
+ }
+ };
src/lib/components/layout/Sidebar.svelte
Update the `enrichChatsWithContent` function to work with lazy-loaded chats.
---
+++
@@ -1,7 +1,7 @@
// Helper function to fetch and add chat content to each chat
- const enrichChatsWithContent = async (chatList) => {
+ const enrichChatsWithContent = async (chatList, startIndex, endIndex) => {
const enrichedChats = await Promise.all(
- chatList.map(async (chat) => {
+ chatList.slice(startIndex, endIndex).map(async (chat) => {
const chatDetails = await getChatById(localStorage.token, chat.id).catch((error) => null); // Handle error or non-existent chat gracefully
if (chatDetails) {
chat.chat = chatDetails.chat; // Assuming chatDetails.chat contains the chat content
@@ -10,5 +10,11 @@
})
);
- await chats.set(enrichedChats);
+ chats.update((prevChats) => {
+ const updatedChats = [...prevChats];
+ enrichedChats.forEach((chat, index) => {
+ updatedChats[startIndex + index] = chat;
+ });
+ return updatedChats;
+ });
};
src/lib/components/layout/Sidebar.svelte
Update the `onMount` function to initially load a subset of chats.
---
+++
@@ -10,4 +10,6 @@
});
showSidebar.set(window.innerWidth > BREAKPOINT);
- await chats.set(await getChatList(localStorage.token));
+ const initialChats = await getChatList(localStorage.token);
+ await chats.set(initialChats);
+ enrichChatsWithContent(initialChats, 0, loadedChats);
Your changes have been successfully made to the branch sweep/chat_history_pagination_infinite_scroll
. I have validated these changes using a syntax checker and a linter.
[!TIP] To recreate the pull request, edit the issue title or description.
This is an automated message generated by Sweep AI.
Add tests
Add tests
Bug Report
Description
Bug Summary: When importing and loading a large number of chat sessions into Open WebUI, the application experiences significant performance degradation, causing the interface to freeze temporarily. This issue seems related to the side-panel attempting to load all chat sessions simultaneously.
Steps to Reproduce:
Expected Behavior: The interface should remain responsive and load chat sessions smoothly without causing the entire application to freeze, regardless of the number of chats being loaded.
Actual Behavior: The interface freezes temporarily when trying to load a large number of chat sessions at once, significantly affecting user experience and accessibility.
Environment
Open WebUI Version: 0.1.123
Ollama (if applicable): 0.1.32
Operating System: Debian 12
Browser (if applicable): Floorp 11.12.2 (64-Bit)
Reproduction Details
Confirmation:
Additional Information
One possible improvement could be the implementation of pagination or lazy loading for the chat sessions to avoid overwhelming the browser's capabilities by attempting to load extensive data simultaneously.
Note
If the bug report is incomplete or does not follow the provided instructions, it may not be addressed. Please ensure that you have followed the steps outlined in the README.md and troubleshooting.md documents, and provide all necessary information for us to reproduce and address the issue. Thank you!