feat(frontend): Update "Edit a copy" modal and buttons (#9876)

Update "Edit a copy" modal text when copying marketplace agent in
Library. Update agent action buttons to reflect the design accurately.

### Changes 🏗️

- Update modal text
- Disable copying owned agents (only marketplace allowed)
- `Open in Builder` -> `Customize agent`
- Disabled `Customize agent` instead of hiding
- Change `Delete agent` to non-destructive design

### Checklist 📋

#### For code changes:
- [ ] I have clearly listed my changes in the PR description
- [ ] I have made a test plan
- [ ] I have tested my changes according to the test plan:
  - [ ] ...

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/page.tsx

@@ -268,22 +268,22 @@ export default function AgentRunsPage(): React.ReactElement {
 
   const agentActions: ButtonAction[] = useMemo(
     () => [
-      ...(agent?.can_access_graph
+      {
+        label: "Customize agent",
+        href: `/build?flowID=${agent?.graph_id}&flowVersion=${agent?.graph_version}`,
+        disabled: !agent?.can_access_graph,
+      },
+      { label: "Export agent to file", callback: downloadGraph },
+      ...(!agent?.can_access_graph
         ? [
             {
-              label: "Open graph in builder",
-              href: `/build?flowID=${agent.graph_id}&flowVersion=${agent.graph_version}`,
+              label: "Edit a copy",
+              callback: () => setCopyAgentDialogOpen(true),
             },
           ]
         : []),
-      { label: "Export agent to file", callback: downloadGraph },
-      {
-        label: "Edit a copy",
-        callback: () => setCopyAgentDialogOpen(true),
-      },
       {
         label: "Delete agent",
-        variant: "destructive",
         callback: () => setAgentDeleteDialogOpen(true),
       },
     ],
@@ -381,10 +381,11 @@ export default function AgentRunsPage(): React.ReactElement {
             <DialogHeader>
               <DialogTitle>You&apos;re making an editable copy</DialogTitle>
               <DialogDescription className="pt-2">
-                We&apos;ll save a new version of this agent to your library so
-                you can customize it however you&apos;d like. You&apos;ll still
-                have the original from the marketplace too — it won&apos;t be
-                changed and can&apos;t be edited.
+                The original Marketplace agent stays the same and cannot be
+                edited. We&apos;ll save a new version of this agent to your
+                Library. From there, you can customize it however you&apos;d
+                like by clicking &quot;Customize agent&quot; — this will open
+                the builder where you can see and modify the inner workings.
               </DialogDescription>
             </DialogHeader>
             <DialogFooter className="justify-end">

autogpt_platform/frontend/src/components/agptui/action-button-group.tsx

@@ -22,6 +22,7 @@ export default function ActionButtonGroup({
           <Button
             key={i}
             variant={action.variant ?? "outline"}
+            disabled={action.disabled}
             onClick={action.callback}
           >
             {action.label}
@@ -29,7 +30,11 @@ export default function ActionButtonGroup({
         ) : (
           <Link
             key={i}
-            className={buttonVariants({ variant: action.variant })}
+            className={cn(
+              buttonVariants({ variant: action.variant }),
+              action.disabled &&
+                "pointer-events-none border-zinc-400 text-zinc-400",
+            )}
             href={action.href}
           >
             {action.label}

autogpt_platform/frontend/src/components/agptui/types.ts

@@ -4,4 +4,5 @@ import React from "react";
 export type ButtonAction = {
   label: React.ReactNode;
   variant?: ButtonProps["variant"];
+  disabled?: boolean;
 } & ({ callback: () => void } | { href: string });