diff --git a/rnd/autogpt_builder/src/app/marketplace/[id]/page.tsx b/rnd/autogpt_builder/src/app/marketplace/[id]/page.tsx new file mode 100644 index 0000000000..095af0fa9e --- /dev/null +++ b/rnd/autogpt_builder/src/app/marketplace/[id]/page.tsx @@ -0,0 +1,71 @@ +import { Suspense, useMemo } from 'react'; +import { notFound } from 'next/navigation'; +import Link from 'next/link'; +import MarketplaceAPI from "@/lib/marketplace-api"; +import { AgentDetailResponse } from "@/lib/marketplace-api"; + +async function getAgentDetails(id: string): Promise { + const apiUrl = process.env.AGPT_MARKETPLACE_URL; + const api = new MarketplaceAPI(apiUrl); + try { + console.log(`Fetching agent details for id: ${id}`); // Add logging + const agent = await api.getAgentDetails(id); + console.log(`Agent details fetched:`, agent); // Add logging + return agent; + } catch (error) { + console.error(`Error fetching agent details:`, error); // Add error logging + return notFound(); + } +} + +function AgentDetailContent({ agent }: { agent: AgentDetailResponse }) { + return ( +
+
+

{agent.name}

+ + Back + +
+
+

{agent.description}

+
+
+ + Download + +
+
+ ); +} + +export default async function AgentDetailPage({ params }: { params: { id: string } }) { + console.log(`Rendering AgentDetailPage for id: ${params.id}`); // Add logging + + let agent: AgentDetailResponse | null = null; + let error: Error | null = null; + + try { + agent = await getAgentDetails(params.id); + } catch (e) { + error = e as Error; + console.error(`Error in AgentDetailPage:`, error); + } + + if (error) { + return
Error: {error.message}
; + } + + if (!agent) { + return notFound(); + } + + return ( + Loading...}> + + + ); +} \ No newline at end of file diff --git a/rnd/autogpt_builder/src/app/marketplace/page.tsx b/rnd/autogpt_builder/src/app/marketplace/page.tsx index 5cf28a7b3d..37f24d6eac 100644 --- a/rnd/autogpt_builder/src/app/marketplace/page.tsx +++ b/rnd/autogpt_builder/src/app/marketplace/page.tsx @@ -1,11 +1,97 @@ +"use client"; +import { useEffect, useMemo, useState } from "react"; +import { useRouter } from 'next/navigation'; +import { Input } from "@/components/ui/input"; +import { Button } from "@/components/ui/button"; +import MarketplaceAPI, { AgentResponse, AgentListResponse } from "@/lib/marketplace-api"; +interface AgentRowProps { + agent: AgentResponse; +} -const Marketplace = () => { +const AgentRow = ({ agent }: AgentRowProps) => { + const router = useRouter(); + + const handleClick = () => { + router.push(`/marketplace/${agent.id}`); + }; return ( +
  • +
    + +
    +

    {agent.name}

    +

    {agent.description}

    +
    +
    +
    +
    +

    {agent.categories.join(', ')}

    +

    + Last updated +

    +
    + +
    +
    • + ); +} +const Marketplace = () => { + const apiUrl = process.env.NEXT_PUBLIC_AGPT_MARKETPLACE_URL; + const api = useMemo(() => new MarketplaceAPI(apiUrl), [apiUrl]); + + const [searchValue, setSearchValue] = useState(""); + const [agents, setAgents] = useState([]); + const [page, setPage] = useState(1); + const [totalPages, setTotalPages] = useState(1); + const [isLoading, setIsLoading] = useState(false); + + const fetchAgents = async (searchTerm: string, currentPage: number) => { + setIsLoading(true); + try { + let response: AgentListResponse; + if (searchTerm) { + response = await api.listAgents({ page: currentPage, page_size: 10, keyword: searchTerm }); + } else { + response = await api.getTopDownloadedAgents(currentPage, 10); + } + setAgents(response.agents); + setTotalPages(response.total_pages); + } catch (error) { + console.error("Error fetching agents:", error); + } finally { + console.log("Finished fetching agents"); + setIsLoading(false); + } + }; + + useEffect(() => { + fetchAgents(searchValue, page); + }, [searchValue, page, api]); + + const handleSearch = (e: React.ChangeEvent) => { + setSearchValue(e.target.value); + setPage(1); + }; + + const handleNextPage = () => { + if (page < totalPages) { + setPage(page + 1); + } + }; + + const handlePrevPage = () => { + if (page > 1) { + setPage(page - 1); + } + }; + + return (
    -
    - -
    - + -
    -
      +
    -
  • -
    - - + {isLoading ? ( +
    Loading...
    + ) : ( + <> +
      + {agents.map((agent) => ( + + ))} +
    +
    + + Page {page} of {totalPages} +
    -
    -
    -

    Category

    -

    Last updated

    -
    - -
    -
    • -
  • -
    - - -
    -
    -
    -

    Category

    -

    Last updated

    -
    - -
    -
    • -
  • -
    - - -
    -
    -
    -

    Category

    -

    Last updated

    -
    - -
    -
    • - + + )} ); - }; -export default Marketplace; +export default Marketplace; \ No newline at end of file