Commit inicial - upload de todos os arquivos da pasta
This commit is contained in:
243
frontend/app/agents/forms/BasicInfoTab.tsx
Normal file
243
frontend/app/agents/forms/BasicInfoTab.tsx
Normal file
@@ -0,0 +1,243 @@
|
||||
/*
|
||||
┌──────────────────────────────────────────────────────────────────────────────┐
|
||||
│ @author: Davidson Gomes │
|
||||
│ @file: /app/agents/forms/BasicInfoTab.tsx │
|
||||
│ Developed by: Davidson Gomes │
|
||||
│ Creation date: May 13, 2025 │
|
||||
│ Contact: contato@evolution-api.com │
|
||||
├──────────────────────────────────────────────────────────────────────────────┤
|
||||
│ @copyright © Evolution API 2025. All rights reserved. │
|
||||
│ Licensed under the Apache License, Version 2.0 │
|
||||
│ │
|
||||
│ You may not use this file except in compliance with the License. │
|
||||
│ You may obtain a copy of the License at │
|
||||
│ │
|
||||
│ http://www.apache.org/licenses/LICENSE-2.0 │
|
||||
│ │
|
||||
│ Unless required by applicable law or agreed to in writing, software │
|
||||
│ distributed under the License is distributed on an "AS IS" BASIS, │
|
||||
│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. │
|
||||
│ See the License for the specific language governing permissions and │
|
||||
│ limitations under the License. │
|
||||
├──────────────────────────────────────────────────────────────────────────────┤
|
||||
│ @important │
|
||||
│ For any future changes to the code in this file, it is recommended to │
|
||||
│ include, together with the modification, the information of the developer │
|
||||
│ who changed it and the date of modification. │
|
||||
└──────────────────────────────────────────────────────────────────────────────┘
|
||||
*/
|
||||
"use client";
|
||||
|
||||
import { AgentTypeSelector } from "@/app/agents/AgentTypeSelector";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Agent, AgentType } from "@/types/agent";
|
||||
import { ApiKey } from "@/services/agentService";
|
||||
import { A2AAgentConfig } from "../config/A2AAgentConfig";
|
||||
import { LLMAgentConfig } from "../config/LLMAgentConfig";
|
||||
import { sanitizeAgentName } from "@/lib/utils";
|
||||
|
||||
interface ModelOption {
|
||||
value: string;
|
||||
label: string;
|
||||
provider: string;
|
||||
}
|
||||
|
||||
interface BasicInfoTabProps {
|
||||
values: Partial<Agent>;
|
||||
onChange: (values: Partial<Agent>) => void;
|
||||
apiKeys: ApiKey[];
|
||||
availableModels: ModelOption[];
|
||||
onOpenApiKeysDialog: () => void;
|
||||
clientId: string;
|
||||
}
|
||||
|
||||
export function BasicInfoTab({
|
||||
values,
|
||||
onChange,
|
||||
apiKeys,
|
||||
availableModels,
|
||||
onOpenApiKeysDialog,
|
||||
}: BasicInfoTabProps) {
|
||||
const handleNameBlur = (e: React.FocusEvent<HTMLInputElement>) => {
|
||||
const sanitizedName = sanitizeAgentName(e.target.value);
|
||||
if (sanitizedName !== e.target.value) {
|
||||
onChange({ ...values, name: sanitizedName });
|
||||
}
|
||||
};
|
||||
|
||||
const handleTypeChange = (type: AgentType) => {
|
||||
let newValues: Partial<Agent> = { ...values, type };
|
||||
|
||||
if (type === "llm") {
|
||||
newValues = {
|
||||
...newValues,
|
||||
model: "openai/gpt-4.1-nano",
|
||||
instruction: "",
|
||||
role: "",
|
||||
goal: "",
|
||||
agent_card_url: undefined,
|
||||
config: {
|
||||
tools: [],
|
||||
mcp_servers: [],
|
||||
custom_mcp_servers: [],
|
||||
custom_tools: {
|
||||
http_tools: [],
|
||||
},
|
||||
sub_agents: [],
|
||||
},
|
||||
};
|
||||
} else if (type === "a2a") {
|
||||
newValues = {
|
||||
...newValues,
|
||||
model: undefined,
|
||||
instruction: undefined,
|
||||
role: undefined,
|
||||
goal: undefined,
|
||||
agent_card_url: "",
|
||||
api_key_id: undefined,
|
||||
config: undefined,
|
||||
};
|
||||
} else if (type === "loop") {
|
||||
newValues = {
|
||||
...newValues,
|
||||
model: undefined,
|
||||
instruction: undefined,
|
||||
role: undefined,
|
||||
goal: undefined,
|
||||
agent_card_url: undefined,
|
||||
api_key_id: undefined,
|
||||
config: {
|
||||
sub_agents: [],
|
||||
custom_mcp_servers: [],
|
||||
},
|
||||
};
|
||||
} else if (type === "workflow") {
|
||||
newValues = {
|
||||
...newValues,
|
||||
model: undefined,
|
||||
instruction: undefined,
|
||||
role: undefined,
|
||||
goal: undefined,
|
||||
agent_card_url: undefined,
|
||||
api_key_id: undefined,
|
||||
config: {
|
||||
sub_agents: [],
|
||||
workflow: {
|
||||
nodes: [],
|
||||
edges: [],
|
||||
},
|
||||
},
|
||||
};
|
||||
} else if (type === "task") {
|
||||
newValues = {
|
||||
...newValues,
|
||||
model: undefined,
|
||||
instruction: undefined,
|
||||
role: undefined,
|
||||
goal: undefined,
|
||||
agent_card_url: undefined,
|
||||
api_key_id: undefined,
|
||||
config: {
|
||||
tasks: [],
|
||||
sub_agents: [],
|
||||
},
|
||||
};
|
||||
} else {
|
||||
newValues = {
|
||||
...newValues,
|
||||
model: undefined,
|
||||
instruction: undefined,
|
||||
role: undefined,
|
||||
goal: undefined,
|
||||
agent_card_url: undefined,
|
||||
api_key_id: undefined,
|
||||
config: {
|
||||
sub_agents: [],
|
||||
custom_mcp_servers: [],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
onChange(newValues);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="type" className="text-right text-neutral-300">
|
||||
Agent Type
|
||||
</Label>
|
||||
<div className="col-span-3">
|
||||
<AgentTypeSelector
|
||||
value={values.type || "llm"}
|
||||
onValueChange={handleTypeChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="name" className="text-right text-neutral-300">
|
||||
Name
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={values.name || ""}
|
||||
onChange={(e) => onChange({ ...values, name: e.target.value })}
|
||||
onBlur={handleNameBlur}
|
||||
className="col-span-3 bg-[#222] border-[#444] text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{values.type !== "a2a" && (
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="description" className="text-right text-neutral-300">
|
||||
Description
|
||||
</Label>
|
||||
<Input
|
||||
id="description"
|
||||
value={values.description || ""}
|
||||
onChange={(e) =>
|
||||
onChange({ ...values, description: e.target.value })
|
||||
}
|
||||
className="col-span-3 bg-[#222] border-[#444] text-white"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{values.type === "llm" && (
|
||||
<LLMAgentConfig
|
||||
apiKeys={apiKeys}
|
||||
availableModels={availableModels}
|
||||
values={values}
|
||||
onChange={onChange}
|
||||
onOpenApiKeysDialog={onOpenApiKeysDialog}
|
||||
/>
|
||||
)}
|
||||
|
||||
{values.type === "loop" && values.config?.max_iterations && (
|
||||
<div className="space-y-1 text-xs text-neutral-400">
|
||||
<div>
|
||||
<strong>Max. Iterations:</strong> {values.config.max_iterations}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{values.type === "workflow" && (
|
||||
<div className="space-y-1 text-xs text-neutral-400">
|
||||
<div>
|
||||
<strong>Type:</strong> Visual Flow
|
||||
</div>
|
||||
{values.config?.workflow && (
|
||||
<div>
|
||||
<strong>Elements:</strong>{" "}
|
||||
{values.config.workflow.nodes?.length || 0} nodes,{" "}
|
||||
{values.config.workflow.edges?.length || 0} connections
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user