[PR #4266] [MERGED] feat: Sidebar infinite scroll (pagination) #8230

New Issue

GiteaMirror · 2025-11-11T17:48:18-06:00

GiteaMirror commented

2025-11-11 17:48:18 -06:00

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/4266
Author: @thearyadev
Created: 8/1/2024
Status: ✅ Merged
Merged: 8/4/2024
Merged by: @tjbck

Base: dev-scroll ← Head: sidebar-pagination

📝 Commits (10+)

4919981 add: stores for pagination state
519375b add: skip and limit use in query
d119616 add: use skip and limit in api call
62dc486 add: add paginated scroll handler
2c4bc7a refactor: uses of chats.set(...) support pagi sidebar
06a6421 fix: bool eval order
6847c2f Merge branch 'origin/dev' into sidebar-pagination [skip ci]
067d76f fix: dynamically determine page size
f9e1a93 fix: bug in chat deletion pagination interact
cdac0cd refactor: disable pagination moved to a function

📊 Changes

11 files changed (+138 additions, -37 deletions)

View changed files

📝 backend/apps/webui/models/chats.py (+5 -4)
📝 backend/apps/webui/routers/chats.py (+1 -1)
📝 src/lib/apis/chats/index.ts (+2 -2)
📝 src/lib/components/chat/Chat.svelte (+23 -8)
📝 src/lib/components/chat/Messages.svelte (+2 -2)
📝 src/lib/components/chat/Settings/Chats.svelte (+5 -3)
📝 src/lib/components/chat/Tags.svelte (+6 -6)
📝 src/lib/components/layout/Sidebar.svelte (+67 -7)
📝 src/lib/components/layout/Sidebar/ChatItem.svelte (+16 -4)
📝 src/lib/stores/index.ts (+4 -0)
📝 src/lib/utils/index.ts (+7 -0)

📄 Description

Changelog Entry

Description

This pr adds scroll pagination to the sidebar chat list.

This will improve first-load performance, and increase ui responsiveness in cases where there are many items in the chat history.

#2078

Added

sidebar now infinitely scrolls

Changed

chat list endpoint uses query params skip and limit
database query function uses skip as offset and limit as limit
default values for skip and limit in the backend are changed to 0 and -1 to ensure that this change does not impact other users of this endpoint, as the frontend api function has been changed to include these default values as well. limit -1 with no offset would work as if those arguments were not passed.
all rehydration calls which update the chats store now use the pageSkip and pageLimit to determine how much of the chat list actually needs to be rehydrated.
- for example, creating a new chat causes the sidebar to rehydrate (to get the new chat in the list), at this point, we only need to re fetch the chats that are visible. So if the user has 40 chats loaded, and they create a new chat, only 40 chats are loaded.
instances where the full chat is required to be loaded (eg: search, import), pagination is disabled, and all components that query the backend will load all the chats (since all the chats are visible)
feature: sidebar uses scroll event to load more chats into the sidebar

Additional Information

this has a very large number of edge cases, which ive made a valiant attempt at resolving.
additional independent testing recommended.
this may become very unresponsive in poor network conditions. Loading the chats still takes some time. this is a tradeoff, we move initial load time to the scroll load time across the full duration of the scroll.
threshold for loading a new set: 60% of the scroll height
number of items loaded on each poll: dynamically evaluated. eq Math.round(window.innerHeight / 35) + 5 where 35 is the approximate height of a single chat in pixels.
new issues:
- if the user zooms out after page load to the point with the chat list div is smaller than the viewport height, the div will no longer be scrollable, so the user can only see the chats that were loaded already.
- viewing the chat list filtered by tag, when the user deletes a tag from a chat, the chat list goes back to showing all chats. this doesn't happen in 0.3.11 I spent an hour trying to fix this with no progress. resolved

progress

basic implementation
fix screen size edge cases
fix rehydration usage
experiment with different pageLimit values in different network conditions and screen sizes
fix tag filter view switch hydration state (when filtered by tag, then rehydrating the chat list, pagination is disabled)
add loading indicator at the bottom of the sidebar
refactor repeated code into a function
remove debugging code / prep for review

Screenshots and Videos

demo

basic functionality

https://github.com/user-attachments/assets/513b601c-b60c-40e3-94ed-3e18be4a9f44

apply filter loads all chats and disabled pagination

https://github.com/user-attachments/assets/ea5c3586-f9f2-4ac6-9354-2570b0f68b9f

search bar focus disables pagination and loads all chats

https://github.com/user-attachments/assets/39bf4a89-adec-4435-8b34-e0fca388ad46

deleting or archiving a chat only rehydrates up to the current page

https://github.com/user-attachments/assets/35dbac2e-3faa-46b5-b52f-21fc5b477e80

attempt chat list refetch while pagination disabled (fetches all chats)

https://github.com/user-attachments/assets/5d1fd869-00fe-41a8-ac94-d8a41c1d8b03

new chat, title gen, and subsequent messages only rehydrates up to the current page

https://github.com/user-attachments/assets/209b99a0-bb6e-4bbf-9066-c35702bb73b9

determine page size based on `window.innerHeight`

https://github.com/user-attachments/assets/477e3681-5fc7-479c-aecf-b06708e523db

mobile experience

https://github.com/user-attachments/assets/1db0c4b4-94ee-4ba6-a46a-e96ecb204b5f

slow network sim

https://github.com/user-attachments/assets/c34b59af-d8ca-4a9e-9983-42dec3bf5326

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/open-webui/open-webui/pull/4266 **Author:** [@thearyadev](https://github.com/thearyadev) **Created:** 8/1/2024 **Status:** ✅ Merged **Merged:** 8/4/2024 **Merged by:** [@tjbck](https://github.com/tjbck) **Base:** `dev-scroll` ← **Head:** `sidebar-pagination` --- ### 📝 Commits (10+) - [`4919981`](https://github.com/open-webui/open-webui/commit/49199819db69837f31227cfef3674fbaf8abca72) add: stores for pagination state - [`519375b`](https://github.com/open-webui/open-webui/commit/519375b4c090d864395b6cacecc5c3b9bb3a0d93) add: skip and limit use in query - [`d119616`](https://github.com/open-webui/open-webui/commit/d11961626c56c30deb165f202e842d2ce283ccff) add: use skip and limit in api call - [`62dc486`](https://github.com/open-webui/open-webui/commit/62dc486c8577bef6d0c65fd3777b9425bd85a06d) add: add paginated scroll handler - [`2c4bc7a`](https://github.com/open-webui/open-webui/commit/2c4bc7a2b24ed1889621366186646dca6d41a78f) refactor: uses of `chats.set(...)` support pagi sidebar - [`06a6421`](https://github.com/open-webui/open-webui/commit/06a64219bc03d3fbf8f767d33c9f10ec8a18a65d) fix: bool eval order - [`6847c2f`](https://github.com/open-webui/open-webui/commit/6847c2fc8c0a3f6794a39264898eefcc97787e7b) Merge branch 'origin/dev' into sidebar-pagination [skip ci] - [`067d76f`](https://github.com/open-webui/open-webui/commit/067d76fecedb79fc2f700983bb5409d30d54700a) fix: dynamically determine page size - [`f9e1a93`](https://github.com/open-webui/open-webui/commit/f9e1a933a9f885efb558be6c19d83fcbc9902bb8) fix: bug in chat deletion pagination interact - [`cdac0cd`](https://github.com/open-webui/open-webui/commit/cdac0cd1df7cfa81dd69a66366c6789eae292c86) refactor: disable pagination moved to a function ### 📊 Changes **11 files changed** (+138 additions, -37 deletions) <details> <summary>View changed files</summary> 📝 `backend/apps/webui/models/chats.py` (+5 -4) 📝 `backend/apps/webui/routers/chats.py` (+1 -1) 📝 `src/lib/apis/chats/index.ts` (+2 -2) 📝 `src/lib/components/chat/Chat.svelte` (+23 -8) 📝 `src/lib/components/chat/Messages.svelte` (+2 -2) 📝 `src/lib/components/chat/Settings/Chats.svelte` (+5 -3) 📝 `src/lib/components/chat/Tags.svelte` (+6 -6) 📝 `src/lib/components/layout/Sidebar.svelte` (+67 -7) 📝 `src/lib/components/layout/Sidebar/ChatItem.svelte` (+16 -4) 📝 `src/lib/stores/index.ts` (+4 -0) 📝 `src/lib/utils/index.ts` (+7 -0) </details> ### 📄 Description # Changelog Entry ## Description This pr adds scroll pagination to the sidebar chat list. This will improve first-load performance, and increase ui responsiveness in cases where there are many items in the chat history. #2078 ## Added - sidebar now infinitely scrolls ## Changed - chat list endpoint uses query params `skip` and `limit` - database query function uses `skip` as offset and `limit` as limit - default values for `skip` and `limit` in the backend are changed to `0` and `-1` to ensure that this change does not impact other users of this endpoint, as the frontend api function has been changed to include these default values as well. limit -1 with no offset would work as if those arguments were not passed. - all rehydration calls which update the `chats` store now use the `pageSkip` and `pageLimit` to determine how much of the chat list actually needs to be rehydrated. - for example, creating a new chat causes the sidebar to rehydrate (to get the new chat in the list), at this point, we only need to re fetch the chats that are visible. So if the user has 40 chats loaded, and they create a new chat, only 40 chats are loaded. - instances where the full chat is required to be loaded (eg: search, import), pagination is disabled, and all components that query the backend will load all the chats (since all the chats are visible) - **feature: sidebar uses scroll event to load more chats into the sidebar** --- # Additional Information - this has a very large number of edge cases, which ive made a valiant attempt at resolving. - additional independent testing recommended. - this may become very unresponsive in poor network conditions. Loading the chats still takes some time. this is a tradeoff, we move initial load time to the scroll load time across the full duration of the scroll. - threshold for loading a new set: 60% of the scroll height - number of items loaded on each poll: dynamically evaluated. eq `Math.round(window.innerHeight / 35) + 5` where 35 is the approximate height of a single chat in pixels. - new issues: - if the user zooms out after page load to the point with the chat list `div` is smaller than the viewport height, the `div` will no longer be scrollable, so the user can only see the chats that were loaded already. - ~~viewing the chat list filtered by tag, when the user deletes a tag from a chat, the chat list goes back to showing all chats. this doesn't happen in `0.3.11` I spent an hour trying to fix this with no progress.~~ resolved # progress - [x] basic implementation - [x] fix screen size edge cases - [x] fix rehydration usage - [x] experiment with different `pageLimit` values in different network conditions and screen sizes - [x] fix tag filter view switch hydration state (when filtered by tag, then rehydrating the chat list, pagination is disabled) - [x] add loading indicator at the bottom of the sidebar - [x] refactor repeated code into a function - [x] remove debugging code / prep for review # Screenshots and Videos <details> <summary>demo</summary> ## basic functionality https://github.com/user-attachments/assets/513b601c-b60c-40e3-94ed-3e18be4a9f44 ## apply filter loads all chats and disabled pagination https://github.com/user-attachments/assets/ea5c3586-f9f2-4ac6-9354-2570b0f68b9f ## search bar focus disables pagination and loads all chats https://github.com/user-attachments/assets/39bf4a89-adec-4435-8b34-e0fca388ad46 ## deleting or archiving a chat only rehydrates up to the current page https://github.com/user-attachments/assets/35dbac2e-3faa-46b5-b52f-21fc5b477e80 ## attempt chat list refetch while pagination disabled (fetches all chats) https://github.com/user-attachments/assets/5d1fd869-00fe-41a8-ac94-d8a41c1d8b03 ## new chat, title gen, and subsequent messages only rehydrates up to the current page https://github.com/user-attachments/assets/209b99a0-bb6e-4bbf-9066-c35702bb73b9 ## determine page size based on `window.innerHeight` https://github.com/user-attachments/assets/477e3681-5fc7-479c-aecf-b06708e523db ## mobile experience https://github.com/user-attachments/assets/1db0c4b4-94ee-4ba6-a46a-e96ecb204b5f ## slow network sim https://github.com/user-attachments/assets/c34b59af-d8ca-4a9e-9983-42dec3bf5326 </details> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2025-11-11 17:48:18 -06:00

GiteaMirror closed this issue

2025-11-11 17:48:18 -06:00

GiteaMirror referenced this issue

2025-11-11 18:11:05 -06:00

[PR #8230] [MERGED] i18n: update fr-FR #8980

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/open-webui#8230

[PR #4266] [MERGED] feat: Sidebar infinite scroll (pagination) #8230