github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-02-04 20:05:11 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): Publish Agent Dialog Agent List Pagination (#9833)

Browse Source 
Co-authored-by: Nicholas Tindle <nicholas.tindle@agpt.co>
This commit is contained in:
Venkat Sai Kedari Nath Gandham
2025-05-22 09:00:44 -07:00
committed by GitHub
parent 8f1b3eb8ba
commit 1b721aedc8
2 changed files with 79 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
autogpt_platform/backend/backend/server/v2/store/routes.py
View File

@@ -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")

99
autogpt_platform/frontend/src/components/agptui/composite/PublishAgentPopout.tsx
View File

@@ -68,6 +68,9 @@ export const PublishAgentPopout: React.FC<PublishAgentPopoutProps> = ({
number | null
>(null);
const [open, setOpen] = React.useState(false);
const [currentPage, setCurrentPage] = React.useState(1);
const [totalPages, setTotalPages] = React.useState(1);
const [loading, setLoading] = React.useState(false);
const popupId = React.useId();
const router = useRouter();
@@ -81,20 +84,34 @@ export const PublishAgentPopout: React.FC<PublishAgentPopoutProps> = ({
setPublishData(submissionData);
}, [openPopout]); // eslint-disable-line react-hooks/exhaustive-deps
React.useEffect(() => {
if (open) {
setCurrentPage(1);
}
}, [open]);
React.useEffect(() => {
if (open) {
const loadMyAgents = async () => {
try {
const response = await api.getMyAgents();
setLoading(true);
const response = await api.getMyAgents({
page: currentPage,
page_size: 20,
});
setMyAgents(response);
setCurrentPage(response.pagination.current_page);
setTotalPages(response.pagination.total_pages);
} catch (error) {
console.error("Failed to load my agents:", error);
} finally {
setLoading(false);
}
};
loadMyAgents();
}
}, [open, api]);
}, [open, currentPage, api]);
const handleClose = () => {
setStep("select");
@@ -212,29 +229,61 @@ export const PublishAgentPopout: React.FC<PublishAgentPopoutProps> = ({
<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")}
/>
{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")}
/>
<div className="flex items-center justify-between p-4">
<button
onClick={() =>
setCurrentPage((p) => Math.max(1, p - 1))
}
disabled={currentPage === 1}
className="text-sm font-medium text-blue-600 disabled:text-gray-400"
>
← Previous
</button>
<span className="text-sm text-gray-700">
Page {currentPage} of {totalPages}
</span>
<button
onClick={() =>
setCurrentPage((p) => Math.min(totalPages, p + 1))
}
disabled={currentPage === totalPages}
className="text-sm font-medium text-blue-600 disabled:text-gray-400"
>
Next →
</button>
</div>
</>
)}
</div>
</div>
</div>