fix/modelos de IA

src/components/agents/CreateAgentDialog.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   Dialog,
   DialogContent,
@@ -19,8 +19,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { useToast } from "@/hooks/use-toast";
-import { createAgent } from "@/lib/api/agents";
+import { createAgent, getAIModels } from "@/lib/api/agents";
-import { AI_MODELS, getModelIdByValue } from "@/lib/constants/aiModels";
 
 interface CreateAgentDialogProps {
   open: boolean;
@@ -32,7 +31,13 @@ export function CreateAgentDialog({ open, onOpenChange }: CreateAgentDialogProps
   const { toast } = useToast();
   const queryClient = useQueryClient();
   const [name, setName] = useState("");
-  const [selectedModel, setSelectedModel] = useState("");
+  const [selectedModelId, setSelectedModelId] = useState("");
+
+  // Buscar modelos da API
+  const { data: aiModels = [], isLoading: isLoadingModels } = useQuery({
+    queryKey: ["aiModels"],
+    queryFn: getAIModels,
+  });
 
   const createAgentMutation = useMutation({
     mutationFn: ({ name, modelId }: { name: string; modelId: number }) =>
@@ -53,7 +58,7 @@ export function CreateAgentDialog({ open, onOpenChange }: CreateAgentDialogProps
 
       // Reset form
       setName("");
-      setSelectedModel("");
+      setSelectedModelId("");
     },
     onError: (error: any) => {
       toast({
@@ -65,17 +70,16 @@ export function CreateAgentDialog({ open, onOpenChange }: CreateAgentDialogProps
   });
 
   const handleCreate = () => {
-    const modelId = getModelIdByValue(selectedModel);
+    if (!selectedModelId) {
-    if (!modelId) {
       toast({
         title: "Erro",
-        description: "Modelo de IA inválido.",
+        description: "Selecione um modelo de IA.",
         variant: "destructive",
       });
       return;
     }
 
-    createAgentMutation.mutate({ name, modelId });
+    createAgentMutation.mutate({ name, modelId: parseInt(selectedModelId) });
   };
 
   return (
@@ -101,13 +105,13 @@ export function CreateAgentDialog({ open, onOpenChange }: CreateAgentDialogProps
 
           <div className="space-y-2">
             <Label htmlFor="model">Modelo de IA</Label>
-            <Select value={selectedModel} onValueChange={setSelectedModel}>
+            <Select value={selectedModelId} onValueChange={setSelectedModelId} disabled={isLoadingModels}>
               <SelectTrigger id="model">
-                <SelectValue placeholder="Selecione um modelo" />
+                <SelectValue placeholder={isLoadingModels ? "Carregando modelos..." : "Selecione um modelo"} />
               </SelectTrigger>
               <SelectContent>
-                {AI_MODELS.map((model) => (
+                {aiModels.filter(model => model.is_active === 1).map((model) => (
-                  <SelectItem key={model.value} value={model.value}>
+                  <SelectItem key={model.id} value={model.id.toString()}>
                     {model.name}
                   </SelectItem>
                 ))}
@@ -121,7 +125,7 @@ export function CreateAgentDialog({ open, onOpenChange }: CreateAgentDialogProps
             </Button>
             <Button
               onClick={handleCreate}
-              disabled={!name || !selectedModel || createAgentMutation.isPending}
+              disabled={!name || !selectedModelId || createAgentMutation.isPending || isLoadingModels}
             >
               {createAgentMutation.isPending ? "Criando..." : "Criar Agente"}
             </Button>

src/lib/api/agents.ts

@@ -1,8 +1,8 @@
 import api from "./axios";
 import type {
-  Agent,
   AgentDetails,
   AgentVersion,
+  AIModel,
   CreateAgentRequest,
   CreateAgentResponse,
   EditAgentRequest,
@@ -149,3 +149,13 @@ export const getAgentVersions = async (
   );
   return response.data;
 };
+
+/**
+ * Obtém todos os modelos de IA disponíveis
+ */
+export const getAIModels = async (): Promise<AIModel[]> => {
+  const response = await api.get<AIModel[]>(
+    "/webhook/codex/get_models_ia"
+  );
+  return response.data;
+};

src/lib/constants/aiModels.ts

@@ -1,33 +1,30 @@
 import { AIModel } from "../types/agent";
 
-// Mapeamento de modelos de IA conforme a API
+/**
-// Nota: Os IDs precisam ser confirmados com a API real
+ * Este arquivo contém funções auxiliares para trabalhar com modelos de IA.
-export const AI_MODELS: AIModel[] = [
+ * Os modelos agora são buscados dinamicamente da API através da função getAIModels() em @/lib/api/agents
-  { id: 1, name: "Google Gemini 2.5 Pro", value: "google/gemini-2.5-pro" },
+ *
-  { id: 2, name: "Google Gemini 2.5 Flash", value: "google/gemini-2.5-flash" },
+ * @deprecated AI_MODELS - Use getAIModels() da API ao invés disso
-  { id: 3, name: "Google Gemini 2.5 Flash Lite", value: "google/gemini-2.5-flash-lite" },
+ */
-  { id: 4, name: "OpenAI GPT-5", value: "openai/gpt-5" },
-  { id: 5, name: "OpenAI GPT-5 Mini", value: "openai/gpt-5-mini" },
-  { id: 6, name: "OpenAI GPT-5 Nano", value: "openai/gpt-5-nano" },
-  { id: 7, name: "Anthropic Claude Sonnet 4.5", value: "anthropic/claude-sonnet-4.5" },
-  { id: 8, name: "Anthropic Claude Haiku 4.5", value: "anthropic/claude-haiku-4.5" },
-  { id: 9, name: "Anthropic Claude Opus 4.5", value: "anthropic/claude-opus-4.5" },
-  { id: 10, name: "Claude Haiku 4.5", value: "claude/haiku-4.5" },
-];
 
 // Função auxiliar para obter o nome do modelo pelo ID
-export const getModelNameById = (id: number): string => {
+export const getModelNameById = (models: AIModel[], id: number): string => {
-  const model = AI_MODELS.find((m) => m.id === id);
+  const model = models.find((m) => m.id === id);
   return model?.name || "Modelo Desconhecido";
 };
 
-// Função auxiliar para obter o modelo pelo value
+// Função auxiliar para obter o modelo pelo identifier
-export const getModelByValue = (value: string): AIModel | undefined => {
+export const getModelByIdentifier = (models: AIModel[], identifier: string): AIModel | undefined => {
-  return AI_MODELS.find((m) => m.value === value);
+  return models.find((m) => m.model_identifier === identifier);
 };
 
-// Função auxiliar para obter o ID pelo value
+// Função auxiliar para obter o ID pelo identifier
-export const getModelIdByValue = (value: string): number | undefined => {
+export const getModelIdByIdentifier = (models: AIModel[], identifier: string): number | undefined => {
-  const model = getModelByValue(value);
+  const model = getModelByIdentifier(models, identifier);
   return model?.id;
 };
+
+// Função auxiliar para filtrar apenas modelos ativos
+export const getActiveModels = (models: AIModel[]): AIModel[] => {
+  return models.filter((m) => m.is_active === 1);
+};

src/lib/types/agent.ts

@@ -115,6 +115,12 @@ export interface ListAgentsResponse {
 
 export interface AIModel {
   id: number;
+  provider_id: number;
   name: string;
-  value: string;
+  model_identifier: string;
+  cost_input_per_million: string;
+  cost_output_per_million: string;
+  is_active: number;
+  created_at: string;
+  updated_at: string;
 }

src/pages/AgentDetails.tsx

@@ -27,8 +27,8 @@ import {
   editAgentName,
   toggleAgentStatus,
   getAgentVersions,
+  getAIModels,
 } from "@/lib/api/agents";
-import { AI_MODELS, getModelIdByValue } from "@/lib/constants/aiModels";
 
 export default function AgentDetails() {
   const { id } = useParams();
@@ -40,9 +40,15 @@ export default function AgentDetails() {
   const [isDeactivateDialogOpen, setIsDeactivateDialogOpen] = useState(false);
   const [isEditingName, setIsEditingName] = useState(false);
   const [tempName, setTempName] = useState("");
-  const [selectedModel, setSelectedModel] = useState("");
+  const [selectedModelId, setSelectedModelId] = useState<number | undefined>();
   const [systemPrompt, setSystemPrompt] = useState("");
 
+  // Fetch AI models
+  const { data: aiModels = [], isLoading: isLoadingModels } = useQuery({
+    queryKey: ["aiModels"],
+    queryFn: getAIModels,
+  });
+
   // Fetch agent details
   const {
     data: agentDetails,
@@ -68,8 +74,7 @@ export default function AgentDetails() {
   // Update local state when agent details are loaded
   useEffect(() => {
     if (agentDetails) {
-      const model = AI_MODELS.find((m) => m.id === agentDetails.model_id);
+      setSelectedModelId(agentDetails.model_id);
-      setSelectedModel(model?.value || "");
       setSystemPrompt(agentDetails.system_prompt);
       setTempName(agentDetails.name);
     }
@@ -148,18 +153,17 @@ export default function AgentDetails() {
   });
 
   const handleSave = (versionType: "major" | "minor" | "patch", notes: string) => {
-    const modelId = getModelIdByValue(selectedModel);
+    if (!selectedModelId) {
-    if (!modelId) {
       toast({
         title: "Erro",
-        description: "Modelo de IA inválido.",
+        description: "Selecione um modelo de IA.",
         variant: "destructive",
       });
       return;
     }
 
     editAgentMutation.mutate({
-      model_id: modelId,
+      model_id: selectedModelId,
       system_prompt: systemPrompt,
       version_type: versionType,
       notes,
@@ -341,15 +345,16 @@ export default function AgentDetails() {
           </CardHeader>
           <CardContent>
             <Select
-              value={selectedModel}
+              value={selectedModelId?.toString()}
-              onValueChange={setSelectedModel}
+              onValueChange={(value) => setSelectedModelId(parseInt(value))}
+              disabled={isLoadingModels}
             >
               <SelectTrigger>
-                <SelectValue />
+                <SelectValue placeholder={isLoadingModels ? "Carregando modelos..." : "Selecione um modelo"} />
               </SelectTrigger>
               <SelectContent>
-                {AI_MODELS.map((model) => (
+                {aiModels.filter(model => model.is_active === 1).map((model) => (
-                  <SelectItem key={model.value} value={model.value}>
+                  <SelectItem key={model.id} value={model.id.toString()}>
                     {model.name}
                   </SelectItem>
                 ))}