Fix admin chat pagination

frontend/src/components/Modals/MangeWorkspace/Settings/index.jsx

@@ -31,7 +31,6 @@ export default function WorkspaceSettings({ workspace }) {
   const [totalVectors, setTotalVectors] = useState(null);
   const [canDelete, setCanDelete] = useState(false);
 
-
   useEffect(() => {
     async function fetchKeys() {
       const canDelete = await System.getCanDeleteWorkspaces();

frontend/src/index.css

@@ -355,6 +355,6 @@ dialog::backdrop {
   top: 100%;
 }
 
-.user-reply>div:first-of-type {
+.user-reply > div:first-of-type {
   border: 2px solid white;
-}
\ No newline at end of file
+}

frontend/src/pages/Admin/Chats/index.jsx

@@ -9,6 +9,7 @@ import Admin from "../../../models/admin";
 import useQuery from "../../../hooks/useQuery";
 import ChatRow from "./ChatRow";
 
+const PAGE_SIZE = 20;
 export default function AdminChats() {
   return (
     <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
@@ -45,21 +46,10 @@ function ChatsContainer() {
   const [canNext, setCanNext] = useState(false);
 
   const handlePrevious = () => {
-    if (chats.length === 0) {
-      setOffset(0);
-      return;
-    }
-
-    const chat = chats.at(-1);
-    if (chat.id - 20 <= 0) {
-      setOffset(0);
-      return;
-    }
-
-    setOffset(chat.id - 1);
+    setOffset(Math.max(offset - 1, 0));
   };
   const handleNext = () => {
-    setOffset(chats[0].id + 1);
+    setOffset(offset + 1);
   };
 
   useEffect(() => {

server/endpoints/admin.js

@@ -264,15 +264,15 @@ function adminEndpoints(app) {
 
         const { offset = 0, limit = 20 } = reqBody(request);
         const chats = await WorkspaceChats.whereWithData(
-          { id: { gte: offset } },
-          limit
+          {},
+          limit,
+          offset * limit,
+          { id: "desc" }
         );
         const totalChats = await WorkspaceChats.count();
-        const hasPages = totalChats > offset + limit;
+        const hasPages = totalChats > (offset + 1) * limit;
 
-        response
-          .status(200)
-          .json({ chats: chats.reverse(), hasPages, totalChats });
+        response.status(200).json({ chats: chats, hasPages, totalChats });
       } catch (e) {
         console.error(e);
         response.sendStatus(500).end();

server/endpoints/api/admin/index.js

@@ -513,14 +513,17 @@ function apiAdminEndpoints(app) {
           response.sendStatus(401).end();
           return;
         }
-
+        const pgSize = 20;
         const { offset = 0 } = reqBody(request);
         const chats = await WorkspaceChats.whereWithData(
-          { id: { gte: offset } },
-          20
+          {},
+          pgSize,
+          offset * pgSize,
+          { id: "desc" }
         );
-        const hasPages = (await WorkspaceChats.count()) > 20;
-        response.status(200).json({ chats: chats.reverse(), hasPages });
+
+        const hasPages = (await WorkspaceChats.count()) > (offset + 1) * pgSize;
+        response.status(200).json({ chats: chats, hasPages });
       } catch (e) {
         console.error(e);
         response.sendStatus(500).end();

server/models/workspaceChats.js

@@ -108,11 +108,17 @@ const WorkspaceChats = {
     }
   },
 
-  where: async function (clause = {}, limit = null, orderBy = null) {
+  where: async function (
+    clause = {},
+    limit = null,
+    orderBy = null,
+    offset = null
+  ) {
     try {
       const chats = await prisma.workspace_chats.findMany({
         where: clause,
         ...(limit !== null ? { take: limit } : {}),
+        ...(offset !== null ? { skip: offset } : {}),
         ...(orderBy !== null ? { orderBy } : {}),
       });
       return chats;
@@ -134,12 +140,17 @@ const WorkspaceChats = {
     }
   },
 
-  whereWithData: async function (clause = {}, limit = null, orderBy = null) {
+  whereWithData: async function (
+    clause = {},
+    limit = null,
+    offset = null,
+    orderBy = null
+  ) {
     const { Workspace } = require("./workspace");
     const { User } = require("./user");
 
     try {
-      const results = await this.where(clause, limit, orderBy);
+      const results = await this.where(clause, limit, orderBy, offset);
 
       for (const res of results) {
         const workspace = await Workspace.get({ id: res.workspaceId });