Create agent modal
Implement modal for creating agents with name and AI model fields. Upon creation, the user is redirected to the agent details page. The modal now only includes the necessary fields and navigation logic.
This commit is contained in:
@@ -1,4 +1,5 @@
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
DialogContent,
|
DialogContent,
|
||||||
@@ -16,6 +17,7 @@ import {
|
|||||||
SelectTrigger,
|
SelectTrigger,
|
||||||
SelectValue,
|
SelectValue,
|
||||||
} from "@/components/ui/select";
|
} from "@/components/ui/select";
|
||||||
|
import { useToast } from "@/hooks/use-toast";
|
||||||
|
|
||||||
interface CreateAgentDialogProps {
|
interface CreateAgentDialogProps {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
@@ -23,19 +25,37 @@ interface CreateAgentDialogProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function CreateAgentDialog({ open, onOpenChange }: CreateAgentDialogProps) {
|
export function CreateAgentDialog({ open, onOpenChange }: CreateAgentDialogProps) {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { toast } = useToast();
|
||||||
const [name, setName] = useState("");
|
const [name, setName] = useState("");
|
||||||
const [status, setStatus] = useState<"active" | "inactive">("active");
|
|
||||||
const [selectedPrompt, setSelectedPrompt] = useState("");
|
|
||||||
const [selectedModel, setSelectedModel] = useState("");
|
const [selectedModel, setSelectedModel] = useState("");
|
||||||
|
|
||||||
const handleSave = () => {
|
const aiModels = [
|
||||||
console.log("Salvando agente:", { name, status, selectedPrompt, selectedModel });
|
{ value: "google/gemini-2.5-pro", label: "Google Gemini 2.5 Pro" },
|
||||||
// Implementar lógica de salvar no backend
|
{ value: "google/gemini-2.5-flash", label: "Google Gemini 2.5 Flash" },
|
||||||
|
{ value: "google/gemini-2.5-flash-lite", label: "Google Gemini 2.5 Flash Lite" },
|
||||||
|
{ value: "openai/gpt-5", label: "OpenAI GPT-5" },
|
||||||
|
{ value: "openai/gpt-5-mini", label: "OpenAI GPT-5 Mini" },
|
||||||
|
{ value: "openai/gpt-5-nano", label: "OpenAI GPT-5 Nano" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleCreate = () => {
|
||||||
|
// TODO: Implementar criação no backend
|
||||||
|
const newAgentId = Math.floor(Math.random() * 10000); // Gerar ID temporário
|
||||||
|
console.log("Criando agente:", { name, model: selectedModel });
|
||||||
|
|
||||||
|
toast({
|
||||||
|
title: "Agente criado",
|
||||||
|
description: "O agente foi criado com sucesso.",
|
||||||
|
});
|
||||||
|
|
||||||
onOpenChange(false);
|
onOpenChange(false);
|
||||||
|
|
||||||
|
// Navegar para a tela de detalhes do novo agente
|
||||||
|
navigate(`/agents/${newAgentId}`);
|
||||||
|
|
||||||
// Reset form
|
// Reset form
|
||||||
setName("");
|
setName("");
|
||||||
setStatus("active");
|
|
||||||
setSelectedPrompt("");
|
|
||||||
setSelectedModel("");
|
setSelectedModel("");
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -45,7 +65,7 @@ export function CreateAgentDialog({ open, onOpenChange }: CreateAgentDialogProps
|
|||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>Criar Novo Agente</DialogTitle>
|
<DialogTitle>Criar Novo Agente</DialogTitle>
|
||||||
<DialogDescription>
|
<DialogDescription>
|
||||||
Configure o agente selecionando um prompt e modelo de IA
|
Preencha os dados básicos do agente. Você poderá configurar o system prompt na próxima tela.
|
||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
|
||||||
@@ -60,35 +80,6 @@ export function CreateAgentDialog({ open, onOpenChange }: CreateAgentDialogProps
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="status">Status</Label>
|
|
||||||
<Select value={status} onValueChange={(v) => setStatus(v as "active" | "inactive")}>
|
|
||||||
<SelectTrigger id="status">
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="active">Ativo</SelectItem>
|
|
||||||
<SelectItem value="inactive">Inativo</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="prompt">Prompt</Label>
|
|
||||||
<Select value={selectedPrompt} onValueChange={setSelectedPrompt}>
|
|
||||||
<SelectTrigger id="prompt">
|
|
||||||
<SelectValue placeholder="Selecione um prompt" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="atendimento">Prompt de Atendimento v2.1</SelectItem>
|
|
||||||
<SelectItem value="vendas">Prompt de Vendas v1.5</SelectItem>
|
|
||||||
<SelectItem value="analise">Prompt de Análise</SelectItem>
|
|
||||||
<SelectItem value="marketing">Prompt de Marketing</SelectItem>
|
|
||||||
<SelectItem value="suporte">Prompt de Suporte Técnico</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label htmlFor="model">Modelo de IA</Label>
|
<Label htmlFor="model">Modelo de IA</Label>
|
||||||
<Select value={selectedModel} onValueChange={setSelectedModel}>
|
<Select value={selectedModel} onValueChange={setSelectedModel}>
|
||||||
@@ -96,13 +87,11 @@ export function CreateAgentDialog({ open, onOpenChange }: CreateAgentDialogProps
|
|||||||
<SelectValue placeholder="Selecione um modelo" />
|
<SelectValue placeholder="Selecione um modelo" />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectItem value="gemini-2.5-flash">Google Gemini 2.5 Flash</SelectItem>
|
{aiModels.map((model) => (
|
||||||
<SelectItem value="gemini-2.5-pro">Google Gemini 2.5 Pro</SelectItem>
|
<SelectItem key={model.value} value={model.value}>
|
||||||
<SelectItem value="gpt-5">OpenAI GPT-5</SelectItem>
|
{model.label}
|
||||||
<SelectItem value="gpt-5-mini">OpenAI GPT-5 Mini</SelectItem>
|
</SelectItem>
|
||||||
<SelectItem value="gpt-4.1">OpenAI GPT-4.1</SelectItem>
|
))}
|
||||||
<SelectItem value="claude-sonnet-4-5">Anthropic Claude Sonnet 4.5</SelectItem>
|
|
||||||
<SelectItem value="claude-opus-4-1">Anthropic Claude Opus 4.1</SelectItem>
|
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
@@ -112,8 +101,8 @@ export function CreateAgentDialog({ open, onOpenChange }: CreateAgentDialogProps
|
|||||||
Cancelar
|
Cancelar
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
onClick={handleSave}
|
onClick={handleCreate}
|
||||||
disabled={!name || !selectedPrompt || !selectedModel}
|
disabled={!name || !selectedModel}
|
||||||
>
|
>
|
||||||
Criar Agente
|
Criar Agente
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
Reference in New Issue
Block a user