[PromptLab first commit]

src/components/agents/CreateAgentDialog.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import {
   Dialog,
   DialogContent,
@@ -18,6 +19,8 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { useToast } from "@/hooks/use-toast";
+import { createAgent } from "@/lib/api/agents";
+import { AI_MODELS, getModelIdByValue } from "@/lib/constants/aiModels";
 
 interface CreateAgentDialogProps {
   open: boolean;
@@ -27,36 +30,52 @@ interface CreateAgentDialogProps {
 export function CreateAgentDialog({ open, onOpenChange }: CreateAgentDialogProps) {
   const navigate = useNavigate();
   const { toast } = useToast();
+  const queryClient = useQueryClient();
   const [name, setName] = useState("");
   const [selectedModel, setSelectedModel] = useState("");
 
-  const aiModels = [
-    { value: "google/gemini-2.5-pro", label: "Google Gemini 2.5 Pro" },
-    { 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 createAgentMutation = useMutation({
+    mutationFn: ({ name, modelId }: { name: string; modelId: number }) =>
+      createAgent(name, modelId),
+    onSuccess: (data) => {
+      toast({
+        title: "Agente criado",
+        description: `${data.agent_name} foi criado com sucesso.`,
+      });
+
+      // Invalidate agents query to refetch the list
+      queryClient.invalidateQueries({ queryKey: ["agents"] });
+
+      onOpenChange(false);
+
+      // Navegar para a tela de detalhes do novo agente
+      navigate(`/agents/${data.agent_id}`);
+
+      // Reset form
+      setName("");
+      setSelectedModel("");
+    },
+    onError: (error: any) => {
+      toast({
+        title: "Erro ao criar agente",
+        description: error.response?.data?.message || "Ocorreu um erro ao criar o agente.",
+        variant: "destructive",
+      });
+    },
+  });
 
   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.",
-    });
+    const modelId = getModelIdByValue(selectedModel);
+    if (!modelId) {
+      toast({
+        title: "Erro",
+        description: "Modelo de IA inválido.",
+        variant: "destructive",
+      });
+      return;
+    }
 
-    onOpenChange(false);
-    
-    // Navegar para a tela de detalhes do novo agente
-    navigate(`/agents/${newAgentId}`);
-    
-    // Reset form
-    setName("");
-    setSelectedModel("");
+    createAgentMutation.mutate({ name, modelId });
   };
 
   return (
@@ -87,9 +106,9 @@ export function CreateAgentDialog({ open, onOpenChange }: CreateAgentDialogProps
                 <SelectValue placeholder="Selecione um modelo" />
               </SelectTrigger>
               <SelectContent>
-                {aiModels.map((model) => (
+                {AI_MODELS.map((model) => (
                   <SelectItem key={model.value} value={model.value}>
-                    {model.label}
+                    {model.name}
                   </SelectItem>
                 ))}
               </SelectContent>
@@ -100,11 +119,11 @@ export function CreateAgentDialog({ open, onOpenChange }: CreateAgentDialogProps
             <Button variant="outline" onClick={() => onOpenChange(false)}>
               Cancelar
             </Button>
-            <Button 
-              onClick={handleCreate} 
-              disabled={!name || !selectedModel}
+            <Button
+              onClick={handleCreate}
+              disabled={!name || !selectedModel || createAgentMutation.isPending}
             >
-              Criar Agente
+              {createAgentMutation.isPending ? "Criando..." : "Criar Agente"}
             </Button>
           </div>
         </div>