fix PublishAgentSelect and PublishAgentPopoutcomponent

2026-04-08 03:00:28 -04:00 · 2025-04-28 15:43:16 +05:30
parent a6fcb3abcd
commit 36578e29c3
4 changed files with 61 additions and 53 deletions
--- a/autogpt_platform/frontend/src/app/(platform)/marketplace/page.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/marketplace/page.tsx
@@ -149,7 +149,7 @@ export default async function Page({}: {}) {
  const { featuredAgents, topAgents, featuredCreators } = await getStoreData();

  return (
-    <div className="mx-auto w-screen max-w-[1360px]">
+    <div className="mx-auto w-screen max-w-[1360px] overflow-x-hidden">
      <main className="px-4">
        <HeroSection />
        <FeaturedSection featuredAgents={featuredAgents.agents} />
--- a/autogpt_platform/frontend/src/components/agptui/PublishAgentSelect.stories.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/PublishAgentSelect.stories.tsx
@@ -1,8 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Agent, PublishAgentSelect } from "./PublishAgentSelect";
+import { userEvent, within, expect } from "@storybook/test";

 const meta: Meta<typeof PublishAgentSelect> = {
  title: "AGPT UI/Publish Agent Select",
+  decorators: [
+    (Story) => (
+      <div className="flex items-center justify-center py-4 md:p-4">
+        <Story />
+      </div>
+    ),
+  ],
  component: PublishAgentSelect,
  tags: ["autodocs"],
 };
@@ -22,56 +30,56 @@ const mockAgents: Agent[] = [
    name: "Content Writer",
    lastEdited: "5 days ago",
    imageSrc: "https://picsum.photos/seed/writer/300/200",
-    id: "1",
+    id: "2",
    version: 1,
  },
  {
    name: "Data Analyzer",
    lastEdited: "1 week ago",
    imageSrc: "https://picsum.photos/seed/data/300/200",
-    id: "1",
+    id: "3",
    version: 1,
  },
  {
    name: "Image Recognition",
    lastEdited: "2 weeks ago",
    imageSrc: "https://picsum.photos/seed/image/300/200",
-    id: "1",
+    id: "9",
    version: 1,
  },
  {
    name: "Chatbot Assistant",
    lastEdited: "3 weeks ago",
    imageSrc: "https://picsum.photos/seed/chat/300/200",
-    id: "1",
+    id: "4",
    version: 1,
  },
  {
    name: "Code Generator",
    lastEdited: "1 month ago",
    imageSrc: "https://picsum.photos/seed/code/300/200",
-    id: "1",
+    id: "5",
    version: 1,
  },
  {
    name: "AI Translator",
    lastEdited: "6 weeks ago",
    imageSrc: "https://picsum.photos/seed/translate/300/200",
-    id: "1",
+    id: "6",
    version: 1,
  },
  {
    name: "Voice Assistant",
    lastEdited: "2 months ago",
    imageSrc: "https://picsum.photos/seed/voice/300/200",
-    id: "1",
+    id: "7",
    version: 1,
  },
  {
    name: "Data Visualizer",
    lastEdited: "3 months ago",
    imageSrc: "https://picsum.photos/seed/visualize/300/200",
-    id: "1",
+    id: "8",
    version: 1,
  },
 ];
@@ -117,3 +125,21 @@ export const NineAgents: Story = {
    agents: mockAgents,
  },
 };
+
+export const WithInteraction: Story = {
+  args: {
+    ...defaultArgs,
+    agents: mockAgents,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Select an agent
+    const agentCard = canvas.getByText("SEO Optimizer");
+    await userEvent.click(agentCard);
+
+    // Click next button
+    const nextButton = canvas.getByText(/next/i);
+    await userEvent.click(nextButton);
+  },
+};
--- a/autogpt_platform/frontend/src/components/agptui/PublishAgentSelect.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/PublishAgentSelect.tsx
@@ -3,7 +3,7 @@
 import * as React from "react";
 import Image from "next/image";
 import { Button } from "../agptui/Button";
-import { IconClose } from "../ui/icons";
+import { X } from "lucide-react";

 export interface Agent {
  name: string;
@@ -49,24 +49,22 @@ export const PublishAgentSelect: React.FC<PublishAgentSelectProps> = ({

  return (
    <div className="mx-auto flex w-full max-w-[900px] flex-col rounded-3xl bg-white shadow-lg dark:bg-gray-800">
-      <div className="relative border-b border-slate-200 p-4 dark:border-slate-700 sm:p-6">
+      {/* Top */}
+      <div className="relative flex h-28 items-center justify-center border-b border-slate-200 dark:border-slate-700">
        <div className="absolute right-4 top-4">
-          <button
+          <Button
            onClick={onClose}
-            className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600"
+            className="flex h-8 w-8 items-center justify-center rounded-full bg-transparent p-0 transition-colors hover:bg-gray-200"
            aria-label="Close"
          >
-            <IconClose
-              size="default"
-              className="text-neutral-600 dark:text-neutral-400"
-            />
-          </button>
+            <X className="h-4 w-4" />
+          </Button>
        </div>
        <div className="text-center">
-          <h3 className="font-poppins text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
+          <h3 className="font-poppins text-2xl font-semibold text-neutral-900">
            Publish Agent
          </h3>
-          <p className="font-geist text-sm font-normal text-neutral-600 dark:text-neutral-400">
+          <p className="font-sans text-base font-normal text-neutral-600">
            Select your project that you&apos;d like to publish
          </p>
        </div>
@@ -90,10 +88,10 @@ export const PublishAgentSelect: React.FC<PublishAgentSelectProps> = ({
        </div>
      ) : (
        <>
-          <div className="flex-grow overflow-hidden p-4 sm:p-6">
+          <div className="flex-grow overflow-hidden">
            <h3 className="sr-only">List of agents</h3>
            <div
-              className="h-[300px] overflow-y-auto pr-2 sm:h-[400px] md:h-[500px]"
+              className="h-[300px] overflow-y-auto px-6 py-6 sm:h-[400px] md:h-[500px]"
              role="region"
              aria-labelledby="agentListHeading"
            >
@@ -135,7 +133,7 @@ export const PublishAgentSelect: React.FC<PublishAgentSelectProps> = ({
                        <p className="font-poppins text-base font-medium leading-normal text-neutral-800 dark:text-neutral-100 sm:text-base">
                          {agent.name}
                        </p>
-                        <small className="font-geist text-xs font-normal leading-[14px] text-neutral-500 dark:text-neutral-400 sm:text-sm">
+                        <small className="font-sans text-xs font-normal leading-[14px] text-neutral-500 dark:text-neutral-400 sm:text-sm">
                          Edited {agent.lastEdited}
                        </small>
                      </div>
@@ -147,7 +145,11 @@ export const PublishAgentSelect: React.FC<PublishAgentSelectProps> = ({
          </div>

          <div className="flex justify-between gap-4 border-t border-slate-200 p-4 dark:border-slate-700 sm:p-6">
-            <Button onClick={onCancel} size="lg" className="w-full sm:flex-1">
+            <Button
+              onClick={onCancel}
+              size="lg"
+              className="flex w-full items-center justify-center sm:flex-1"
+            >
              Back
            </Button>
            <Button
@@ -158,7 +160,7 @@ export const PublishAgentSelect: React.FC<PublishAgentSelectProps> = ({
              }}
              disabled={!selectedAgentId || !selectedAgentVersion}
              size="lg"
-              className="w-full bg-neutral-800 text-white hover:bg-neutral-900 sm:flex-1"
+              className="flex w-full items-center justify-center bg-neutral-800 text-white hover:bg-neutral-900 sm:flex-1"
            >
              Next
            </Button>
--- a/autogpt_platform/frontend/src/components/agptui/composite/PublishAgentPopout.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/composite/PublishAgentPopout.tsx
@@ -1,12 +1,7 @@
 "use client";

 import * as React from "react";
-import {
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverAnchor,
-} from "@/components/ui/popover";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { PublishAgentSelect } from "../PublishAgentSelect";
 import {
  PublishAgentInfo,
@@ -21,6 +16,7 @@ import {
 import { useRouter } from "next/navigation";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";
 import { useToast } from "@/components/ui/use-toast";
+
 interface PublishAgentPopoutProps {
  trigger?: React.ReactNode;
  openPopout?: boolean;
@@ -69,7 +65,6 @@ export const PublishAgentPopout: React.FC<PublishAgentPopoutProps> = ({
  >(null);
  const [open, setOpen] = React.useState(false);

-  const popupId = React.useId();
  const router = useRouter();
  const api = useBackendAPI();

@@ -279,28 +274,13 @@ export const PublishAgentPopout: React.FC<PublishAgentPopoutProps> = ({
  };

  return (
-    <Popover
-      open={open}
-      onOpenChange={(isOpen) => {
-        if (isOpen !== open) {
-          setOpen(isOpen);
-        }
-      }}
-    >
-      <PopoverTrigger asChild>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
        {trigger || <Button>Publish Agent</Button>}
-      </PopoverTrigger>
-      <PopoverAnchor asChild>
-        <div className="fixed left-0 top-0 hidden h-screen w-screen items-center justify-center"></div>
-      </PopoverAnchor>
-
-      <PopoverContent
-        id={popupId}
-        align="center"
-        className="z-50 h-screen w-screen bg-transparent"
-      >
+      </DialogTrigger>
+      <DialogContent className="bg-blck/40 h-screen w-screen max-w-full rounded-none border-none backdrop-blur-[0.375rem]">
        {renderContent()}
-      </PopoverContent>
-    </Popover>
+      </DialogContent>
+    </Dialog>
  );
 };