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
🔄 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>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
📋 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+)
4919981add: stores for pagination state519375badd: skip and limit use in queryd119616add: use skip and limit in api call62dc486add: add paginated scroll handler2c4bc7arefactor: uses ofchats.set(...)support pagi sidebar06a6421fix: bool eval order6847c2fMerge branch 'origin/dev' into sidebar-pagination [skip ci]067d76ffix: dynamically determine page sizef9e1a93fix: bug in chat deletion pagination interactcdac0cdrefactor: 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
Changed
skipandlimitskipas offset andlimitas limitskipandlimitin the backend are changed to0and-1to 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.chatsstore now use thepageSkipandpageLimitto determine how much of the chat list actually needs to be rehydrated.Additional Information
Math.round(window.innerHeight / 35) + 5where 35 is the approximate height of a single chat in pixels.divis smaller than the viewport height, thedivwill 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 inresolved0.3.11I spent an hour trying to fix this with no progress.progress
pageLimitvalues in different network conditions and screen sizesScreenshots 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.innerHeighthttps://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.