github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-04-08 03:00:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

removed templates form ui

Browse Source
This commit is contained in:
SwiftyOS
2024-12-11 14:46:06 +01:00
parent c35453f41e
commit ac03211c59
6 changed files with 42 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
autogpt_platform/frontend/src/components/agent-import-form.tsx
View File

@@ -198,29 +198,6 @@ export const AgentImportForm: React.FC<
</FormItem>
)}
/>
<FormField
control={form.control}
name="importAsTemplate"
disabled={!agentObject}
render={({ field }) => (
<FormItem>
<FormLabel>Import as</FormLabel>
<FormControl>
<div className="flex items-center space-x-2">
<span
className={
field.value ? "text-gray-400 dark:text-gray-600" : ""
}
>
Agent
</span>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button
type="submit"
className="w-full"

116
autogpt_platform/frontend/src/components/marketplace/AgentDetailContent.tsx
View File

@@ -1,100 +1,43 @@
"use client";
import Link from "next/link";
import { ArrowLeft, Download, Calendar, Tag } from "lucide-react";
import { ArrowLeft, Download } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
AgentDetailResponse,
InstallationLocation,
} from "@/lib/marketplace-api";
import MarketplaceAPI from "@/lib/marketplace-api";
import AutoGPTServerAPI, { GraphCreatable } from "@/lib/autogpt-server-api";
import "@xyflow/react/dist/style.css";
import { makeAnalyticsEvent } from "./actions";
import { useToast } from "../ui/use-toast";
function AgentDetailContent({ agent }: { agent: AgentDetailResponse }) {
function AgentDetailContent({ agent }: { agent: GraphCreatable }) {
const { toast } = useToast();
const downloadAgent = async (id: string): Promise<void> => {
const api = new MarketplaceAPI();
try {
const file = await api.downloadAgentFile(id);
console.debug(`Agent file downloaded:`, file);
// const downloadAgent = async (id: string): Promise<void> => {
// const api = new MarketplaceAPI();
// try {
// const file = await api.downloadAgentFile(id);
// console.debug(`Agent file downloaded:`, file);
// Create a Blob from the file content
const blob = new Blob([file], { type: "application/json" });
// // Create a Blob from the file content
// const blob = new Blob([file], { type: "application/json" });
// Create a temporary URL for the Blob
const url = window.URL.createObjectURL(blob);
// // Create a temporary URL for the Blob
// const url = window.URL.createObjectURL(blob);
// Create a temporary anchor element
const a = document.createElement("a");
a.href = url;
a.download = `agent_${id}.json`; // Set the filename
// // Create a temporary anchor element
// const a = document.createElement("a");
// a.href = url;
// a.download = `agent_${id}.json`; // Set the filename
// Append the anchor to the body, click it, and remove it
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
// // Append the anchor to the body, click it, and remove it
// document.body.appendChild(a);
// a.click();
// document.body.removeChild(a);
// Revoke the temporary URL
window.URL.revokeObjectURL(url);
} catch (error) {
console.error(`Error downloading agent:`, error);
throw error;
}
};
const installGraph = async (id: string): Promise<void> => {
toast({
title: "Saving and opening a new agent...",
duration: 2000,
});
const apiUrl =
process.env.NEXT_PUBLIC_AGPT_MARKETPLACE_URL ||
"http://localhost:8015/api/v1/market";
const serverAPIUrl = process.env.NEXT_PUBLIC_AGPT_SERVER_API_URL;
const serverAPI = new AutoGPTServerAPI(serverAPIUrl);
try {
console.debug(`Installing agent with id: ${id}`);
let agent = await api.downloadAgent(id);
console.debug(`Agent downloaded:`, agent);
const data: GraphCreatable = {
id: agent.id,
version: agent.version,
is_active: true,
name: agent.name,
description: agent.description,
nodes: agent.graph.nodes,
links: agent.graph.links,
};
const result = await serverAPI.createGraph(data);
makeAnalyticsEvent({
event_name: "agent_installed_from_marketplace",
event_data: {
marketplace_agent_id: id,
installed_agent_id: result.id,
installation_location: InstallationLocation.CLOUD,
},
});
console.debug(`Agent installed successfully`, result);
serverAPI.createGraph(result.id, agent.version).then((newGraph) => {
window.location.href = `/build?flowID=${newGraph.id}`;
});
} catch (error) {
console.error(`Error installing agent:`, error);
toast({
title: "Error saving template",
variant: "destructive",
duration: 2000,
});
throw error;
}
};
// // Revoke the temporary URL
// window.URL.revokeObjectURL(url);
// } catch (error) {
// console.error(`Error downloading agent:`, error);
// throw error;
// }
// };
return (
<div className="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
@@ -107,13 +50,6 @@ function AgentDetailContent({ agent }: { agent: AgentDetailResponse }) {
Back to Marketplace
</Link>
<div className="flex space-x-4">
<Button
onClick={() => installGraph(agent.id)}
className="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
<Download className="mr-2" size={16} />
Save to Templates
</Button>
<Button
onClick={() => downloadAgent(agent.id)}
className="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"

34
autogpt_platform/frontend/src/components/monitor/AgentFlowList.tsx
View File

@@ -1,5 +1,5 @@
import AutoGPTServerAPI, { GraphMeta } from "@/lib/autogpt-server-api";
import React, { useEffect, useMemo, useState } from "react";
import React, { useMemo } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { TextRenderer } from "@/components/ui/render";
@@ -14,8 +14,6 @@ import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ChevronDownIcon, EnterIcon } from "@radix-ui/react-icons";
@@ -45,11 +43,7 @@ export const AgentFlowList = ({
onSelectFlow: (f: GraphMeta) => void;
className?: string;
}) => {
const [templates, setTemplates] = useState<GraphMeta[]>([]);
const api = useMemo(() => new AutoGPTServerAPI(), []);
useEffect(() => {
api.listTemplates().then((templates) => setTemplates(templates));
}, [api]);
return (
<Card className={className}>
@@ -80,30 +74,6 @@ export const AgentFlowList = ({
<EnterIcon className="mr-2" /> Import from file
</DropdownMenuItem>
</DialogTrigger>
{templates.length > 0 && (
<>
{/* List of templates */}
<DropdownMenuSeparator />
<DropdownMenuLabel>Use a template</DropdownMenuLabel>
{templates.map((template) => (
<DropdownMenuItem
key={template.id}
onClick={() => {
api
.createGraph(template.id, template.version)
.then((newGraph) => {
window.location.href = `/build?flowID=${newGraph.id}`;
});
}}
>
<TextRenderer
value={template.name}
truncateLengthLimit={30}
/>
</DropdownMenuItem>
))}
</>
)}
</DropdownMenuContent>
</DropdownMenu>
@@ -111,7 +81,7 @@ export const AgentFlowList = ({
<DialogHeader>
<DialogTitle className="sr-only">Import Agent</DialogTitle>
<h2 className="text-lg font-semibold">
Import an Agent (template) from a file
Import an Agent from a file
</h2>
</DialogHeader>
<AgentImportForm />

36
autogpt_platform/frontend/src/hooks/useAgentGraph.ts
View File

@@ -24,11 +24,7 @@ import { GraphMeta } from "@/lib/autogpt-server-api";
const ajv = new Ajv({ strict: false, allErrors: true });
export default function useAgentGraph(
flowID?: string,
template?: boolean,
passDataToBeads?: boolean,
) {
export default function useAgentGraph(flowID?: string, passDataToBeads?: boolean) {
const { toast } = useToast();
const [router, searchParams, pathname] = [
useRouter(),
@@ -333,13 +329,11 @@ export default function useAgentGraph(
useEffect(() => {
if (!flowID || availableNodes.length == 0) return;
(template ? api.getTemplate(flowID) : api.getGraph(flowID)).then(
(graph) => {
console.debug("Loading graph");
loadGraph(graph);
},
);
}, [flowID, template, availableNodes, api, loadGraph]);
api.getGraph(flowID).then((graph) => {
console.debug("Loading graph");
loadGraph(graph);
});
}, [flowID, availableNodes, api, loadGraph]);
// Update nodes with execution data
useEffect(() => {
@@ -644,7 +638,7 @@ export default function useAgentGraph(
);
const _saveAgent = useCallback(
async (asTemplate: boolean = false) => {
async () => {
//FIXME frontend ids should be resolved better (e.g. returned from the server)
// currently this relays on block_id and position
const blockIdToNodeIdMap: Record<string, string> = {};
@@ -737,12 +731,8 @@ export default function useAgentGraph(
setNodesSyncedWithSavedAgent(false);
newSavedAgent = savedAgent
? await (savedAgent.is_template
? api.updateTemplate(savedAgent.id, payload)
: api.updateGraph(savedAgent.id, payload))
: await (asTemplate
? api.createTemplate(payload)
: api.createGraph(payload));
? await api.updateGraph(savedAgent.id, payload)
: await api.createGraph(payload);
console.debug("Response from the API:", newSavedAgent);
}
@@ -814,9 +804,9 @@ export default function useAgentGraph(
);
const saveAgent = useCallback(
async (asTemplate: boolean = false) => {
async () => {
try {
await _saveAgent(asTemplate);
await _saveAgent();
} catch (error) {
const errorMessage =
error instanceof Error ? error.message : String(error);
@@ -832,8 +822,8 @@ export default function useAgentGraph(
);
const requestSave = useCallback(
(asTemplate: boolean) => {
saveAgent(asTemplate);
() => {
saveAgent();
setSaveRunRequest({
request: "save",
state: "saving",

1
autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts
View File

@@ -203,7 +203,6 @@ export type GraphMeta = {
id: string;
version: number;
is_active: boolean;
is_template: boolean;
name: string;
description: string;
input_schema: BlockIOObjectSubSchema;

12
autogpt_platform/frontend/src/tests/pages/monitor.page.ts
View File

@@ -30,11 +30,6 @@ interface Schedule {
actions: string[];
}
enum ImportType {
AGENT = "agent",
TEMPLATE = "template",
}
export class MonitorPage extends BasePage {
constructor(page: Page) {
super(page);
@@ -177,10 +172,9 @@ export class MonitorPage extends BasePage {
file: string,
name?: string,
description?: string,
importType: ImportType = ImportType.AGENT,
) {
console.log(
`importing from directory: ${directory} file: ${file} name: ${name} description: ${description} importType: ${importType}`,
`importing from directory: ${directory} file: ${file} name: ${name} description: ${description}`,
);
await this.page.getByTestId("create-agent-dropdown").click();
await this.page.getByTestId("import-agent-from-file").click();
@@ -196,10 +190,6 @@ export class MonitorPage extends BasePage {
console.log(`filling agent description: ${description}`);
await this.page.getByTestId("agent-description-input").fill(description);
}
if (importType === ImportType.TEMPLATE) {
console.log(`clicking import as template switch`);
await this.page.getByTestId("import-as-template-switch").click();
}
console.log(`clicking import agent submit`);
await this.page.getByTestId("import-agent-submit").click();
}