Merge remote-tracking branch 'origin/zamilmajdy/make-api-host-configu…

…rable' into zamilmajdy/make-api-host-configurable
Significant-Gravitas · Sep 24, 2024 · 5af7a12 · 5af7a12
2 parents 9764450 + 1959e87
commit 5af7a12
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 26 deletions.
diff --git 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/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"
       >
-        <span>Credits: {credit}</span>
+        <span className="flex items-center">
+          <IconCoin /> {credit}
+        </span>
         <IconRefresh />
       </Button>
     )

diff --git 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<CustomNode>) {
         </div>
       </div>
       {blockCost && (
-        <div className="p-3 text-right font-semibold">
-          Cost: {blockCost.cost_amount} / {blockCost.cost_type}
+        <div className="p-3 font-semibold">
+          <span className="ml-auto flex items-center">
+            <IconCoin /> {blockCost.cost_amount} per {blockCost.cost_type}
+          </span>
         </div>
       )}
       {data.uiType !== BlockUIType.NOTE ? (

diff --git 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/components/ui/icons.tsx b/autogpt_platform/frontend/src/components/ui/icons.tsx
@@ -301,6 +301,34 @@ export const IconRefresh = createIcon((props) => (
   </svg>
 ));
 
+/**
+ * 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) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <circle cx="8" cy="8" r="6" />
+    <path d="M18.09 10.37A6 6 0 1 1 10.34 18" />
+    <path d="M7 6h1v4" />
+    <path d="m16.71 13.88.7.71-2.82 2.82" />
+  </svg>
+));
+
 /**
  * Menu icon component.
  *

diff --git a/...rontend/src/lib/marketplace-api/client.ts → ...nd/src/lib/marketplace-api/base-client.ts b/...rontend/src/lib/marketplace-api/client.ts → ...nd/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
@@ -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
@@ -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
@@ -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);
+  }
+}