feat(frontend): add infinite scroll to publish agent popout

Co-authored-by: Nicholas Tindle <nicholas.tindle@agpt.co>

autogpt_platform/backend/backend/server/v2/store/routes.py

@@ -389,9 +389,13 @@ async def get_my_agents(
     user_id: typing.Annotated[
         str, fastapi.Depends(autogpt_libs.auth.depends.get_user_id)
     ],
+    page: typing.Annotated[int, fastapi.Query(ge=1)] = 1,
+    page_size: typing.Annotated[int, fastapi.Query(ge=1)] = 20,
 ):
     try:
-        agents = await backend.server.v2.store.db.get_my_agents(user_id)
+        agents = await backend.server.v2.store.db.get_my_agents(
+            user_id, page=page, page_size=page_size
+        )
         return agents
     except Exception:
         logger.exception("Exception occurred whilst getting my agents")

autogpt_platform/frontend/src/components/agptui/composite/PublishAgentPopout.tsx

@@ -68,10 +68,44 @@ export const PublishAgentPopout: React.FC<PublishAgentPopoutProps> = ({
     number | null
   >(null);
   const [open, setOpen] = React.useState(false);
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [loading, setLoading] = React.useState(false);
+  const [loadingMore, setLoadingMore] = React.useState(false);
+  const [hasMore, setHasMore] = React.useState(true);
+
+  const api = useBackendAPI();
+
+  const fetchMyAgents = React.useCallback(
+    async (page: number, append = false) => {
+      try {
+        append ? setLoadingMore(true) : setLoading(true);
+        const response = await api.getMyAgents({
+          page,
+          page_size: 20,
+        });
+        setCurrentPage(response.pagination.current_page);
+        setHasMore(
+          response.pagination.current_page < response.pagination.total_pages,
+        );
+        setMyAgents((prev) =>
+          append && prev
+            ? {
+                agents: [...prev.agents, ...response.agents],
+                pagination: response.pagination,
+              }
+            : response,
+        );
+      } catch (error) {
+        console.error("Failed to load my agents:", error);
+      } finally {
+        append ? setLoadingMore(false) : setLoading(false);
+      }
+    },
+    [api],
+  );
 
   const popupId = React.useId();
   const router = useRouter();
-  const api = useBackendAPI();
 
   const { toast } = useToast();
 
@@ -83,18 +117,16 @@ export const PublishAgentPopout: React.FC<PublishAgentPopoutProps> = ({
 
   React.useEffect(() => {
     if (open) {
-      const loadMyAgents = async () => {
-        try {
-          const response = await api.getMyAgents();
-          setMyAgents(response);
-        } catch (error) {
-          console.error("Failed to load my agents:", error);
-        }
-      };
-
-      loadMyAgents();
+      setCurrentPage(1);
+      setHasMore(true);
     }
-  }, [open, api]);
+  }, [open]);
+
+  React.useEffect(() => {
+    if (open) {
+      fetchMyAgents(1);
+    }
+  }, [open, fetchMyAgents]);
 
   const handleClose = () => {
     setStep("select");
@@ -205,36 +237,64 @@ export const PublishAgentPopout: React.FC<PublishAgentPopoutProps> = ({
     }
   };
 
+  const handleScroll = React.useCallback(
+    (e: React.UIEvent<HTMLDivElement>) => {
+      const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+      if (
+        hasMore &&
+        !loadingMore &&
+        scrollTop + clientHeight >= scrollHeight - 20
+      ) {
+        fetchMyAgents(currentPage + 1, true);
+      }
+    },
+    [hasMore, loadingMore, currentPage, fetchMyAgents],
+  );
+
   const renderContent = () => {
     switch (step) {
       case "select":
         return (
           <div className="flex min-h-screen items-center justify-center">
             <div className="mx-auto flex w-full max-w-[900px] flex-col rounded-3xl bg-white shadow-lg dark:bg-gray-800">
-              <div className="h-full overflow-y-auto">
-                <PublishAgentSelect
-                  agents={
-                    myAgents?.agents
-                      .map((agent) => ({
-                        name: agent.agent_name,
-                        id: agent.agent_id,
-                        version: agent.agent_version,
-                        lastEdited: agent.last_edited,
-                        imageSrc:
-                          agent.agent_image || "https://picsum.photos/300/200",
-                      }))
-                      .sort(
-                        (a, b) =>
-                          new Date(b.lastEdited).getTime() -
-                          new Date(a.lastEdited).getTime(),
-                      ) || []
-                  }
-                  onSelect={handleAgentSelect}
-                  onCancel={handleClose}
-                  onNext={handleNextFromSelect}
-                  onClose={handleClose}
-                  onOpenBuilder={() => router.push("/build")}
-                />
+              <div className="h-full overflow-y-auto" onScroll={handleScroll}>
+                {loading ? (
+                  <div className="flex items-center justify-center p-8 text-gray-600">
+                    Loading agents...
+                  </div>
+                ) : (
+                  <>
+                    <PublishAgentSelect
+                      agents={
+                        myAgents?.agents
+                          .map((agent) => ({
+                            name: agent.agent_name,
+                            id: agent.agent_id,
+                            version: agent.agent_version,
+                            lastEdited: agent.last_edited,
+                            imageSrc:
+                              agent.agent_image ||
+                              "https://picsum.photos/300/200",
+                          }))
+                          .sort(
+                            (a, b) =>
+                              new Date(b.lastEdited).getTime() -
+                              new Date(a.lastEdited).getTime(),
+                          ) || []
+                      }
+                      onSelect={handleAgentSelect}
+                      onCancel={handleClose}
+                      onNext={handleNextFromSelect}
+                      onClose={handleClose}
+                      onOpenBuilder={() => router.push("/build")}
+                    />
+                    {loadingMore && (
+                      <div className="flex items-center justify-center p-4 text-gray-600">
+                        Loading more...
+                      </div>
+                    )}
+                  </>
+                )}
               </div>
             </div>
           </div>