From 6e205cb8507bab44f2a8fe25ecde202b3593accf Mon Sep 17 00:00:00 2001 From: Zamil Majdy Date: Mon, 23 Sep 2024 14:24:31 -0500 Subject: [PATCH 1/2] feat(platform): Add coin icon on block cost & current credits (#8124) --- .../frontend/src/components/CreditButton.tsx | 6 ++-- .../frontend/src/components/CustomNode.tsx | 7 +++-- .../frontend/src/components/ui/icons.tsx | 28 +++++++++++++++++++ 3 files changed, 37 insertions(+), 4 deletions(-) diff --git a/autogpt_platform/frontend/src/components/CreditButton.tsx b/autogpt_platform/frontend/src/components/CreditButton.tsx index 9d9514bf1bcf..9663c7bde0b4 100644 --- a/autogpt_platform/frontend/src/components/CreditButton.tsx +++ b/autogpt_platform/frontend/src/components/CreditButton.tsx @@ -2,7 +2,7 @@ import { useState, useEffect } from "react"; import { Button } from "@/components/ui/button"; -import { IconRefresh } from "@/components/ui/icons"; +import { IconRefresh, IconCoin } from "@/components/ui/icons"; import AutoGPTServerAPI from "@/lib/autogpt-server-api"; export default function CreditButton() { @@ -24,7 +24,9 @@ export default function CreditButton() { variant="outline" className="flex items-center space-x-2 text-muted-foreground" > - Credits: {credit} + + {credit} + ) diff --git a/autogpt_platform/frontend/src/components/CustomNode.tsx b/autogpt_platform/frontend/src/components/CustomNode.tsx index 3cd58c7a2801..778de86be55a 100644 --- a/autogpt_platform/frontend/src/components/CustomNode.tsx +++ b/autogpt_platform/frontend/src/components/CustomNode.tsx @@ -33,6 +33,7 @@ import { getPrimaryCategoryColor } from "@/lib/utils"; import { FlowContext } from "./Flow"; import { Badge } from "./ui/badge"; import DataTable from "./DataTable"; +import { IconCoin } from "./ui/icons"; type ParsedKey = { key: string; index?: number }; @@ -577,8 +578,10 @@ export function CustomNode({ data, id, width, height }: NodeProps) { {blockCost && ( -
- Cost: {blockCost.cost_amount} / {blockCost.cost_type} +
+ + {blockCost.cost_amount} per {blockCost.cost_type} +
)} {data.uiType !== BlockUIType.NOTE ? ( diff --git a/autogpt_platform/frontend/src/components/ui/icons.tsx b/autogpt_platform/frontend/src/components/ui/icons.tsx index 4f9c85d3bd09..46a6ca44a959 100644 --- a/autogpt_platform/frontend/src/components/ui/icons.tsx +++ b/autogpt_platform/frontend/src/components/ui/icons.tsx @@ -301,6 +301,34 @@ export const IconRefresh = createIcon((props) => ( )); +/** + * Coin icon component. + * + * @component IconCoin + * @param {IconProps} props - The props object containing additional attributes and event handlers for the icon. + * @returns {JSX.Element} - The coins icon. + * + */ +export const IconCoin = createIcon((props) => ( + + + + + + +)); + /** * Menu icon component. * From 198a1048e8b8f365180415dfc0fb02818111be87 Mon Sep 17 00:00:00 2001 From: Nicholas Tindle Date: Mon, 23 Sep 2024 14:44:56 -0500 Subject: [PATCH 2/2] feat(frontend): add marketplace server side client (#8129) --- .vscode/all-projects.code-workspace | 17 +++++++++-------- .../components/admin/marketplace/actions.ts | 19 ++++++++++--------- .../{client.ts => base-client.ts} | 18 ++++++++++++++---- .../src/lib/marketplace-api/browser-client.ts | 12 ++++++++++++ .../frontend/src/lib/marketplace-api/index.ts | 2 +- .../src/lib/marketplace-api/server-client.ts | 12 ++++++++++++ 6 files changed, 58 insertions(+), 22 deletions(-) rename autogpt_platform/frontend/src/lib/marketplace-api/{client.ts => base-client.ts} (93%) create mode 100644 autogpt_platform/frontend/src/lib/marketplace-api/browser-client.ts create mode 100644 autogpt_platform/frontend/src/lib/marketplace-api/server-client.ts diff --git a/.vscode/all-projects.code-workspace b/.vscode/all-projects.code-workspace index 14f0c06b19c9..aa3b35b10c78 100644 --- a/.vscode/all-projects.code-workspace +++ b/.vscode/all-projects.code-workspace @@ -1,12 +1,12 @@ { "folders": [ { - "name": "autogpt_server", - "path": "../autogpt_platform/autogpt_server" + "name": "frontend", + "path": "../autogpt_platform/frontend" }, { - "name": "autogpt_builder", - "path": "../autogpt_platform/autogpt_builder" + "name": "backend", + "path": "../autogpt_platform/backend" }, { "name": "market", @@ -24,10 +24,7 @@ "name": "docs", "path": "../docs" }, - { - "name": "[root]", - "path": ".." - }, + { "name": "classic - autogpt", "path": "../classic/original_autogpt" @@ -44,6 +41,10 @@ "name": "classic - frontend", "path": "../classic/frontend" }, + { + "name": "[root]", + "path": ".." + } ], "settings": { "python.analysis.typeCheckingMode": "basic" diff --git a/autogpt_platform/frontend/src/components/admin/marketplace/actions.ts b/autogpt_platform/frontend/src/components/admin/marketplace/actions.ts index 17f836fc20fc..80b871585694 100644 --- a/autogpt_platform/frontend/src/components/admin/marketplace/actions.ts +++ b/autogpt_platform/frontend/src/components/admin/marketplace/actions.ts @@ -1,5 +1,6 @@ "use server"; import MarketplaceAPI from "@/lib/marketplace-api"; +import ServerSideMarketplaceAPI from "@/lib/marketplace-api/server-client"; import { revalidatePath } from "next/cache"; import * as Sentry from "@sentry/nextjs"; @@ -12,7 +13,7 @@ export async function approveAgent( "approveAgent", {}, async () => { - const api = new MarketplaceAPI(); + const api = new ServerSideMarketplaceAPI(); await api.approveAgentSubmission(agentId, version, comment); console.debug(`Approving agent ${agentId}`); revalidatePath("/marketplace"); @@ -29,7 +30,7 @@ export async function rejectAgent( "rejectAgent", {}, async () => { - const api = new MarketplaceAPI(); + const api = new ServerSideMarketplaceAPI(); await api.rejectAgentSubmission(agentId, version, comment); console.debug(`Rejecting agent ${agentId}`); revalidatePath("/marketplace"); @@ -42,7 +43,7 @@ export async function getReviewableAgents() { "getReviewableAgents", {}, async () => { - const api = new MarketplaceAPI(); + const api = new ServerSideMarketplaceAPI(); return api.getAgentSubmissions(); }, ); @@ -56,7 +57,7 @@ export async function getFeaturedAgents( "getFeaturedAgents", {}, async () => { - const api = new MarketplaceAPI(); + const api = new ServerSideMarketplaceAPI(); const featured = await api.getFeaturedAgents(page, pageSize); console.debug(`Getting featured agents ${featured.agents.length}`); return featured; @@ -69,7 +70,7 @@ export async function getFeaturedAgent(agentId: string) { "getFeaturedAgent", {}, async () => { - const api = new MarketplaceAPI(); + const api = new ServerSideMarketplaceAPI(); const featured = await api.getFeaturedAgent(agentId); console.debug(`Getting featured agent ${featured.agentId}`); return featured; @@ -85,7 +86,7 @@ export async function addFeaturedAgent( "addFeaturedAgent", {}, async () => { - const api = new MarketplaceAPI(); + const api = new ServerSideMarketplaceAPI(); await api.addFeaturedAgent(agentId, categories); console.debug(`Adding featured agent ${agentId}`); revalidatePath("/marketplace"); @@ -101,7 +102,7 @@ export async function removeFeaturedAgent( "removeFeaturedAgent", {}, async () => { - const api = new MarketplaceAPI(); + const api = new ServerSideMarketplaceAPI(); await api.removeFeaturedAgent(agentId, categories); console.debug(`Removing featured agent ${agentId}`); revalidatePath("/marketplace"); @@ -114,7 +115,7 @@ export async function getCategories() { "getCategories", {}, async () => { - const api = new MarketplaceAPI(); + const api = new ServerSideMarketplaceAPI(); const categories = await api.getCategories(); console.debug( `Getting categories ${categories.unique_categories.length}`, @@ -132,7 +133,7 @@ export async function getNotFeaturedAgents( "getNotFeaturedAgents", {}, async () => { - const api = new MarketplaceAPI(); + const api = new ServerSideMarketplaceAPI(); const agents = await api.getNotFeaturedAgents(page, pageSize); console.debug(`Getting not featured agents ${agents.agents.length}`); return agents; diff --git a/autogpt_platform/frontend/src/lib/marketplace-api/client.ts b/autogpt_platform/frontend/src/lib/marketplace-api/base-client.ts similarity index 93% rename from autogpt_platform/frontend/src/lib/marketplace-api/client.ts rename to autogpt_platform/frontend/src/lib/marketplace-api/base-client.ts index 48cfaeccab58..9d3866779974 100644 --- a/autogpt_platform/frontend/src/lib/marketplace-api/client.ts +++ b/autogpt_platform/frontend/src/lib/marketplace-api/base-client.ts @@ -1,4 +1,4 @@ -import { createClient } from "../supabase/client"; +import { SupabaseClient } from "@supabase/supabase-js"; import { AddAgentRequest, AgentResponse, @@ -11,15 +11,17 @@ import { AnalyticsEvent, } from "./types"; -export default class MarketplaceAPI { +export default class BaseMarketplaceAPI { private baseUrl: string; - private supabaseClient = createClient(); + private supabaseClient: SupabaseClient | null = null; constructor( baseUrl: string = process.env.NEXT_PUBLIC_AGPT_MARKETPLACE_URL || "http://localhost:8015/api/v1/market", + supabaseClient: SupabaseClient | null = null, ) { this.baseUrl = baseUrl; + this.supabaseClient = supabaseClient; } async checkHealth(): Promise<{ status: string }> { @@ -262,7 +264,15 @@ export default class MarketplaceAPI { response_data.detail, response, ); - throw new Error(`HTTP error ${response.status}! ${response_data.detail}`); + try { + const response_data = await response.json(); + } catch (e) { + console.warn("Failed to parse response body", e); + } + + throw new Error( + `HTTP error ${response.status}! ${response_data.detail} ${method} ${response.url}`, + ); } return response_data; } diff --git a/autogpt_platform/frontend/src/lib/marketplace-api/browser-client.ts b/autogpt_platform/frontend/src/lib/marketplace-api/browser-client.ts new file mode 100644 index 000000000000..ae12f1b25d40 --- /dev/null +++ b/autogpt_platform/frontend/src/lib/marketplace-api/browser-client.ts @@ -0,0 +1,12 @@ +import { createClient } from "../supabase/client"; +import BaseMarketplaceAPI from "./base-client"; + +export default class ClientSideMarketplaceAPI extends BaseMarketplaceAPI { + constructor( + baseUrl: string = process.env.NEXT_PUBLIC_AGPT_MARKETPLACE_URL || + "http://localhost:8015/api/v1/market", + ) { + const supabaseClient = createClient(); + super(baseUrl, supabaseClient); + } +} diff --git a/autogpt_platform/frontend/src/lib/marketplace-api/index.ts b/autogpt_platform/frontend/src/lib/marketplace-api/index.ts index f401d62bfdc5..8542abbbcb1f 100644 --- a/autogpt_platform/frontend/src/lib/marketplace-api/index.ts +++ b/autogpt_platform/frontend/src/lib/marketplace-api/index.ts @@ -1,4 +1,4 @@ -import MarketplaceAPI from "./client"; +import MarketplaceAPI from "./browser-client"; export default MarketplaceAPI; export * from "./types"; diff --git a/autogpt_platform/frontend/src/lib/marketplace-api/server-client.ts b/autogpt_platform/frontend/src/lib/marketplace-api/server-client.ts new file mode 100644 index 000000000000..f3f91e8a17a8 --- /dev/null +++ b/autogpt_platform/frontend/src/lib/marketplace-api/server-client.ts @@ -0,0 +1,12 @@ +import { createServerClient } from "../supabase/server"; +import BaseMarketplaceAPI from "./base-client"; + +export default class ServerSideMarketplaceAPI extends BaseMarketplaceAPI { + constructor( + baseUrl: string = process.env.NEXT_PUBLIC_AGPT_MARKETPLACE_URL || + "http://localhost:8015/api/v1/market", + ) { + const supabaseClient = createServerClient(); + super(baseUrl, supabaseClient); + } +}