From 76c86023245cf6b659fe5ab4a0f6cef73be0c807 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 23 Dec 2024 00:31:33 -0700
Subject: [PATCH] refac

---
 backend/open_webui/routers/channels.py    |  7 +++----
 src/lib/apis/channels/index.ts            |  4 ++--
 src/lib/components/channel/Channel.svelte | 12 ++++--------
 3 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/backend/open_webui/routers/channels.py b/backend/open_webui/routers/channels.py
index 2cc093e36..d23cbb169 100644
--- a/backend/open_webui/routers/channels.py
+++ b/backend/open_webui/routers/channels.py
@@ -136,7 +136,9 @@ class MessageUserModel(MessageModel):
 
 
 @router.get("/{id}/messages", response_model=list[MessageUserModel])
-async def get_channel_messages(id: str, page: int = 1, user=Depends(get_verified_user)):
+async def get_channel_messages(
+    id: str, skip: int = 0, limit: int = 50, user=Depends(get_verified_user)
+):
     channel = Channels.get_channel_by_id(id)
     if not channel:
         raise HTTPException(
@@ -148,9 +150,6 @@ async def get_channel_messages(id: str, page: int = 1, user=Depends(get_verified
             status_code=status.HTTP_403_FORBIDDEN, detail=ERROR_MESSAGES.DEFAULT()
         )
 
-    limit = 50
-    skip = (page - 1) * limit
-
     message_list = Messages.get_messages_by_channel_id(id, skip, limit)
     users = {}
 
diff --git a/src/lib/apis/channels/index.ts b/src/lib/apis/channels/index.ts
index 5fe3e6452..2b5461551 100644
--- a/src/lib/apis/channels/index.ts
+++ b/src/lib/apis/channels/index.ts
@@ -166,10 +166,10 @@ export const deleteChannelById = async (token: string = '', channel_id: string)
 }
 
 
-export const getChannelMessages = async (token: string = '', channel_id: string, page: number = 1) => {
+export const getChannelMessages = async (token: string = '', channel_id: string, skip: number = 0, limit: number = 50) => {
 	let error = null;
 
-	const res = await fetch(`${WEBUI_API_BASE_URL}/channels/${channel_id}/messages?page=${page}`, {
+	const res = await fetch(`${WEBUI_API_BASE_URL}/channels/${channel_id}/messages?skip=${skip}&limit=${limit}`, {
 		method: 'GET',
 		headers: {
 			Accept: 'application/json',
diff --git a/src/lib/components/channel/Channel.svelte b/src/lib/components/channel/Channel.svelte
index 0b9f5d205..9dc88f192 100644
--- a/src/lib/components/channel/Channel.svelte
+++ b/src/lib/components/channel/Channel.svelte
@@ -16,7 +16,6 @@
 	let messagesContainerElement = null;
 
 	let top = false;
-	let page = 1;
 
 	let channel = null;
 	let messages = null;
@@ -31,7 +30,6 @@
 
 	const initHandler = async () => {
 		top = false;
-		page = 1;
 		messages = null;
 		channel = null;
 
@@ -40,7 +38,7 @@
 		});
 
 		if (channel) {
-			messages = await getChannelMessages(localStorage.token, id, page);
+			messages = await getChannelMessages(localStorage.token, id, 0);
 
 			if (messages) {
 				messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
@@ -117,16 +115,14 @@
 					{messages}
 					{top}
 					onLoad={async () => {
-						page += 1;
+						const newMessages = await getChannelMessages(localStorage.token, id, messages.length);
 
-						const newMessages = await getChannelMessages(localStorage.token, id, page);
+						messages = [...messages, ...newMessages];
 
-						if (newMessages.length === 0) {
+						if (newMessages.length < 50) {
 							top = true;
 							return;
 						}
-
-						messages = [...messages, ...newMessages];
 					}}
 				/>
 			{/key}