bannert1337 / open-webui

User-friendly WebUI for LLMs (Formerly Ollama WebUI)
https://openwebui.com
MIT License
0 stars 0 forks source link

sweep: chat history pagination (infinite scroll) #2

Open bannert1337 opened 4 months ago

bannert1337 commented 4 months ago

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:

  1. Export a large set of ChatGPT chat sessions.
  2. Import these sessions into Open WebUI.
  3. Access the Open WebUI to observe the loading process.
  4. Notice that the interface freezes for a duration, particularly when the side-panel attempts to load all chats.

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

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!

sweep-ai[bot] commented 4 months ago

🚀 Here's the PR! #3

💎 Sweep Pro: You have unlimited Sweep issues

Actions

Relevant files (click to expand). Mentioned files will always appear here. https://github.com/bannert1337/open-webui/blob/d43ee0fc5b018cec183de99e8047472c454737ae/src/lib/components/layout/Sidebar.svelte#L1-L749

Step 2: ⌨️ Coding

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);

Step 3: 🔄️ Validating

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.

bannert1337 commented 4 months ago

Add tests

bannert1337 commented 4 months ago

Add tests