fix(platform): Make LibraryAgent image as initial StoreListing image - Followup (#9617)

### Changes 🏗️ This is a follow-up of https://github.com/Significant-Gravitas/AutoGPT/pull/9610 * Addressing the PR comments described in the mentioned PR * Removed debug logging * Fix image state loading logic on agent upload process ### Checklist 📋 #### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] Create an library agent and try to create a store listing. <img width="1409" alt="image" src="https://github.com/user-attachments/assets/dc86dc97-a33f-4336-ab90-19a53c6f7e0f" />
2026-04-08 03:00:28 -04:00 · 2025-03-12 13:12:09 +07:00
parent 942ac0bae4
commit c179a49218
13 changed files with 103 additions and 112 deletions
--- a/autogpt_platform/backend/backend/notifications/notifications.py
+++ b/autogpt_platform/backend/backend/notifications/notifications.py
@@ -86,7 +86,6 @@ def create_notification_config() -> RabbitMQConfig:
            routing_key="notification.summary.#",
            arguments={
                "x-dead-letter-exchange": dead_letter_exchange.name,
-                "x-dead-letter-routing-key": "failed.summary.weekly",
                "x-dead-letter-routing-key": "failed.summary",
            },
        ),
--- a/autogpt_platform/backend/backend/server/v2/store/db.py
+++ b/autogpt_platform/backend/backend/server/v2/store/db.py
@@ -706,12 +706,12 @@ async def get_my_agents(
    logger.debug(f"Getting my agents for user {user_id}, page={page}")

    try:
-        search_filter = prisma.types.LibraryAgentWhereInput(
-            userId=user_id,
-            Agent={"is": {"StoreListing": {"none": {"isDeleted": False}}}},
-            isArchived=False,
-            isDeleted=False,
-        )
+        search_filter: prisma.types.LibraryAgentWhereInput = {
+            "userId": user_id,
+            "Agent": {"is": {"StoreListing": {"none": {"isDeleted": False}}}},
+            "isArchived": False,
+            "isDeleted": False,
+        }

        library_agents = await prisma.models.LibraryAgent.prisma().find_many(
            where=search_filter,
@@ -726,15 +726,15 @@ async def get_my_agents(

        my_agents = [
            backend.server.v2.store.model.MyAgent(
-                agent_id=agent.id,
-                agent_version=agent.version,
-                agent_name=agent.name or "",
-                last_edited=agent.updatedAt or agent.createdAt,
-                description=agent.description or "",
-                agent_image=entry.imageUrl,
+                agent_id=graph.id,
+                agent_version=graph.version,
+                agent_name=graph.name or "",
+                last_edited=graph.updatedAt or graph.createdAt,
+                description=graph.description or "",
+                agent_image=library_agent.imageUrl,
            )
-            for entry in library_agents
-            if (agent := entry.Agent)
+            for library_agent in library_agents
+            if (graph := library_agent.Agent)
        ]

        return backend.server.v2.store.model.MyAgentsResponse(
--- a/autogpt_platform/frontend/src/app/reset_password/actions.ts
+++ b/autogpt_platform/frontend/src/app/reset_password/actions.ts
@@ -29,7 +29,6 @@ export async function sendResetEmail(email: string) {
        return error.message;
      }

-      console.log("Reset email sent");
      redirect("/reset_password");
    },
  );
--- a/autogpt_platform/frontend/src/components/agptui/AgentInfo.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/AgentInfo.tsx
@@ -47,7 +47,6 @@ export const AgentInfo: React.FC<AgentInfoProps> = ({
      const newLibraryAgent = await api.addMarketplaceAgentToLibrary(
        storeListingVersionId,
      );
-      console.log("Agent added to library successfully");
      router.push(`/library/agents/${newLibraryAgent.id}`);
    } catch (error) {
      console.error("Failed to add agent to library:", error);
--- a/autogpt_platform/frontend/src/components/agptui/BecomeACreator.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/BecomeACreator.tsx
@@ -17,7 +17,6 @@ export const BecomeACreator: React.FC<BecomeACreatorProps> = ({
 }) => {
  const handleButtonClick = () => {
    onButtonClick?.();
-    console.log("Become A Creator clicked");
  };

  return (
--- a/autogpt_platform/frontend/src/components/agptui/ProfileInfoForm.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/ProfileInfoForm.tsx
@@ -49,8 +49,6 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
      const formData = new FormData();
      formData.append("file", file);

-      console.log(formData);
-
      // Get auth token
      if (!supabase) {
        throw new Error("Supabase client not initialized");
--- a/autogpt_platform/frontend/src/components/agptui/PublishAgentSelectInfo.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/PublishAgentSelectInfo.tsx
@@ -5,6 +5,7 @@ import Image from "next/image";
 import { Button } from "../agptui/Button";
 import { IconClose, IconPlus } from "../ui/icons";
 import BackendAPI from "@/lib/autogpt-server-api";
+import { toast } from "../ui/use-toast";

 export interface PublishAgentInfoInitialData {
  agent_id: string;
@@ -40,13 +41,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
  initialData,
 }) => {
  const [agentId, setAgentId] = React.useState<string | null>(null);
-  const [images, setImages] = React.useState<string[]>(
-    initialData?.additionalImages
-      ? [initialData.thumbnailSrc, ...initialData.additionalImages]
-      : initialData?.thumbnailSrc
-        ? [initialData.thumbnailSrc]
-        : [],
-  );
+  const [images, setImages] = React.useState<string[]>([]);
  const [selectedImage, setSelectedImage] = React.useState<string | null>(
    initialData?.thumbnailSrc || null,
  );
@@ -66,7 +61,10 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
  React.useEffect(() => {
    if (initialData) {
      setAgentId(initialData.agent_id);
-      setImagesWithValidation(initialData.additionalImages || []);
+      setImagesWithValidation([
+        ...(initialData?.thumbnailSrc ? [initialData.thumbnailSrc] : []),
+        ...(initialData.additionalImages || []),
+      ]);
      setSelectedImage(initialData.thumbnailSrc || null);
      setTitle(initialData.title);
      setSubheader(initialData.subheader);
@@ -94,8 +92,6 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
    }
    if (newImages.length === 0) {
      setSelectedImage(null);
-    } else {
-      console.log("images", newImages);
    }
  };

@@ -134,7 +130,10 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
        setSelectedImage(imageUrl);
      }
    } catch (error) {
-      console.error("Error uploading image:", error);
+      toast({
+        title: "Failed to upload image",
+        description: `Error: ${error}`,
+      });
    }
  };

@@ -150,7 +149,6 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
        throw new Error("Agent ID is required");
      }
      const { image_url } = await api.generateStoreSubmissionImage(agentId);
-      console.log("image_url", image_url);
      setImagesWithValidation([...images, image_url]);
    } catch (error) {
      console.error("Failed to generate image:", error);
--- a/autogpt_platform/frontend/src/components/agptui/StoreCard.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/StoreCard.tsx
@@ -46,20 +46,24 @@ export const StoreCard: React.FC<StoreCardProps> = ({
    >
      {/* Header Image Section with Avatar */}
      <div className="relative h-[200px] w-full overflow-hidden rounded-[20px]">
-        <Image
-          src={agentImage}
-          alt={`${agentName} preview image`}
-          fill
-          className="object-cover"
-          priority
-        />
+        {agentImage && (
+          <Image
+            src={agentImage}
+            alt={`${agentName} preview image`}
+            fill
+            className="object-cover"
+            priority
+          />
+        )}
        {!hideAvatar && (
          <div className="absolute bottom-4 left-4">
            <Avatar className="h-16 w-16 border-2 border-white dark:border-gray-800">
-              <AvatarImage
-                src={avatarSrc}
-                alt={`${creatorName || agentName} creator avatar`}
-              />
+              {avatarSrc && (
+                <AvatarImage
+                  src={avatarSrc}
+                  alt={`${creatorName || agentName} creator avatar`}
+                />
+              )}
              <AvatarFallback>
                {(creatorName || agentName).charAt(0)}
              </AvatarFallback>
--- a/autogpt_platform/frontend/src/components/agptui/composite/PublishAgentPopout.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/composite/PublishAgentPopout.tsx
@@ -76,14 +76,12 @@ export const PublishAgentPopout: React.FC<PublishAgentPopoutProps> = ({
  const { toast } = useToast();

  React.useEffect(() => {
-    console.log("PublishAgentPopout Effect");
    setOpen(openPopout);
    setStep(inputStep);
    setPublishData(submissionData);
  }, [openPopout]); // eslint-disable-line react-hooks/exhaustive-deps

  React.useEffect(() => {
-    console.log("LoadMyAgents Effect");
    if (open) {
      const loadMyAgents = async () => {
        try {
@@ -193,7 +191,6 @@ export const PublishAgentPopout: React.FC<PublishAgentPopoutProps> = ({
        slug: slug.replace(/\s+/g, "-"),
        categories: categories,
      });
-      console.log("Store submission created:", submission);
    } catch (error) {
      console.error("Error creating store submission:", error);
    }
--- a/autogpt_platform/frontend/src/components/library/library-agent-card.tsx
+++ b/autogpt_platform/frontend/src/components/library/library-agent-card.tsx
@@ -17,50 +17,53 @@ export default function LibraryAgentCard({
  agent: LibraryAgent;
 }): React.ReactNode {
  return (
-    <Link href={`/library/agents/${id}`}>
-      <div className="inline-flex w-full max-w-[434px] cursor-pointer flex-col items-start justify-start gap-2.5 rounded-[26px] bg-white transition-all duration-300 hover:shadow-lg dark:bg-transparent dark:hover:shadow-gray-700">
-        <div className="relative h-[200px] w-full overflow-hidden rounded-[20px]">
-          {!image_url ? (
-            <div
-              className={`h-full w-full ${
-                [
-                  "bg-gradient-to-r from-green-200 to-blue-200",
-                  "bg-gradient-to-r from-pink-200 to-purple-200",
-                  "bg-gradient-to-r from-yellow-200 to-orange-200",
-                  "bg-gradient-to-r from-blue-200 to-cyan-200",
-                  "bg-gradient-to-r from-indigo-200 to-purple-200",
-                ][parseInt(id.slice(0, 8), 16) % 5]
-              }`}
-              style={{
-                backgroundSize: "200% 200%",
-                animation: "gradient 15s ease infinite",
-              }}
+    <div className="inline-flex w-full max-w-[434px] flex-col items-start justify-start gap-2.5 rounded-[26px] bg-white transition-all duration-300 hover:shadow-lg dark:bg-transparent dark:hover:shadow-gray-700">
+      <Link
+        href={`/library/agents/${id}`}
+        className="relative h-[200px] w-full overflow-hidden rounded-[20px]"
+      >
+        {!image_url ? (
+          <div
+            className={`h-full w-full ${
+              [
+                "bg-gradient-to-r from-green-200 to-blue-200",
+                "bg-gradient-to-r from-pink-200 to-purple-200",
+                "bg-gradient-to-r from-yellow-200 to-orange-200",
+                "bg-gradient-to-r from-blue-200 to-cyan-200",
+                "bg-gradient-to-r from-indigo-200 to-purple-200",
+              ][parseInt(id.slice(0, 8), 16) % 5]
+            }`}
+            style={{
+              backgroundSize: "200% 200%",
+              animation: "gradient 15s ease infinite",
+            }}
+          />
+        ) : (
+          <Image
+            src={image_url}
+            alt={`${name} preview image`}
+            fill
+            className="object-cover"
+            priority
+          />
+        )}
+        <div className="absolute bottom-4 left-4">
+          <Avatar className="h-16 w-16 border-2 border-white dark:border-gray-800">
+            <AvatarImage
+              src={
+                creator_image_url
+                  ? creator_image_url
+                  : "/avatar-placeholder.png"
+              }
+              alt={`${name} creator avatar`}
            />
-          ) : (
-            <Image
-              src={image_url}
-              alt={`${name} preview image`}
-              fill
-              className="object-cover"
-              priority
-            />
-          )}
-          <div className="absolute bottom-4 left-4">
-            <Avatar className="h-16 w-16 border-2 border-white dark:border-gray-800">
-              <AvatarImage
-                src={
-                  creator_image_url
-                    ? creator_image_url
-                    : "/avatar-placeholder.png"
-                }
-                alt={`${name} creator avatar`}
-              />
-              <AvatarFallback>{name.charAt(0)}</AvatarFallback>
-            </Avatar>
-          </div>
+            <AvatarFallback>{name.charAt(0)}</AvatarFallback>
+          </Avatar>
        </div>
+      </Link>

-        <div className="flex w-full flex-1 flex-col px-4 py-4">
+      <div className="flex w-full flex-1 flex-col px-4 py-4">
+        <Link href={`/library/agents/${id}`}>
          <h3 className="mb-2 font-poppins text-2xl font-semibold leading-tight text-[#272727] dark:text-neutral-100">
            {name}
          </h3>
@@ -68,23 +71,26 @@ export default function LibraryAgentCard({
          <p className="mb-4 flex-1 text-sm text-gray-600 dark:text-gray-400">
            {description}
          </p>
+        </Link>

-          <div className="items-between mt-4 flex w-full justify-between gap-3">
-            <span className="font-geist text-lg font-semibold text-neutral-800 hover:underline dark:text-neutral-200">
-              See runs
-            </span>
+        <div className="items-between mt-4 flex w-full justify-between gap-3">
+          <Link
+            href={`/library/agents/${id}`}
+            className="font-geist text-lg font-semibold text-neutral-800 hover:underline dark:text-neutral-200"
+          >
+            See runs
+          </Link>

-            {can_access_graph && (
-              <Link
-                href={`/build?flowID=${agent_id}`}
-                className="font-geist text-lg font-semibold text-neutral-800 hover:underline dark:text-neutral-200"
-              >
-                Open in builder
-              </Link>
-            )}
-          </div>
+          {can_access_graph && (
+            <Link
+              href={`/build?flowID=${agent_id}`}
+              className="font-geist text-lg font-semibold text-neutral-800 hover:underline dark:text-neutral-200"
+            >
+              Open in builder
+            </Link>
+          )}
        </div>
      </div>
-    </Link>
+    </div>
  );
 }
--- a/autogpt_platform/frontend/src/components/library/library-agent-list.tsx
+++ b/autogpt_platform/frontend/src/components/library/library-agent-list.tsx
@@ -30,7 +30,6 @@ export default function LibraryAgentList(): React.ReactNode {
        } else {
          setAgents(response.agents);
        }
-        console.log(response);
        setHasMore(
          response.pagination.current_page * response.pagination.page_size <
            response.pagination.total_items,
--- a/autogpt_platform/frontend/src/hooks/useAgentGraph.tsx
+++ b/autogpt_platform/frontend/src/hooks/useAgentGraph.tsx
@@ -406,7 +406,6 @@ export default function useAgentGraph(
          errorMessage = error.message || "Invalid input";
          if (path && error.message) {
            const key = path.slice(1);
-            console.log("Error", key, error.message);
            setNestedProperty(
              errors,
              key,
@@ -495,7 +494,6 @@ export default function useAgentGraph(
    // Display error message
    if (saveRunRequest.state === "error") {
      if (saveRunRequest.request === "save") {
-        console.error("Error saving agent");
        toast({
          variant: "destructive",
          title: `Error saving agent`,
@@ -507,9 +505,7 @@ export default function useAgentGraph(
          title: `Error saving&running agent`,
          duration: 2000,
        });
-        console.error(`Error saving&running agent`);
      } else if (saveRunRequest.request === "stop") {
-        console.error(`Error stopping agent`);
        toast({
          variant: "destructive",
          title: `Error stopping agent`,
@@ -539,7 +535,6 @@ export default function useAgentGraph(
      } else if (saveRunRequest.request === "run") {
        const validationError = validateNodes();
        if (validationError) {
-          console.error("Validation failed; aborting run");
          toast({
            title: `Validation failed: ${validationError}`,
            variant: "destructive",
@@ -1034,7 +1029,7 @@ export default function useAgentGraph(
          return;
        }
      } catch (error) {
-        console.log(error);
+        console.error(error);
        toast({
          variant: "destructive",
          title: "Error scheduling agent",
--- a/autogpt_platform/frontend/src/lib/autogpt-server-api/client.ts
+++ b/autogpt_platform/frontend/src/lib/autogpt-server-api/client.ts
@@ -482,7 +482,6 @@ export default class BackendAPI {
    agentName: string,
    review: StoreReviewCreate,
  ): Promise<StoreReview> {
-    console.log("Reviewing agent: ", username, agentName, review);
    return this._request(
      "POST",
      `/store/agents/${encodeURIComponent(username)}/${encodeURIComponent(
@@ -785,7 +784,7 @@ export default class BackendAPI {
        );

        this.heartbeatTimeoutId = window.setTimeout(() => {
-          console.log("Heartbeat timeout - reconnecting");
+          console.warn("Heartbeat timeout - reconnecting");
          this.webSocket?.close();
          this.connectWebSocket();
        }, this.HEARTBEAT_TIMEOUT);
@@ -821,13 +820,12 @@ export default class BackendAPI {
        this.webSocket = new WebSocket(wsUrlWithToken);

        this.webSocket.onopen = () => {
-          console.log("WebSocket connection established");
          this.startHeartbeat(); // Start heartbeat when connection opens
          resolve();
        };

        this.webSocket.onclose = (event) => {
-          console.log("WebSocket connection closed", event);
+          console.warn("WebSocket connection closed", event);
          this.stopHeartbeat(); // Stop heartbeat when connection closes
          this.webSocket = null;
          // Attempt to reconnect after a delay