luis.felipe/PromptLab-Front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix/modelos de IA

Browse Source
This commit is contained in:
luisfepsale
2025-11-19 13:21:02 -03:00
parent f0b86641b6
commit 8cc5954563
5 changed files with 73 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/agents/CreateAgentDialog.tsx
+18 -14
View File
@@ -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 { AI_MODELS, getModelIdByValue } from "@/lib/constants/aiModels";
import { createAgent, getAIModels } from "@/lib/api/agents";
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 (!modelId) {
if (!selectedModelId) {
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) => (
<SelectItem key={model.value} value={model.value}>
{aiModels.filter(model => model.is_active === 1).map((model) => (
<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
+11 -1
View File
@@ -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
+19 -22
View File
@@ -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
export const AI_MODELS: AIModel[] = [
{ 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" },
{ 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" },
];
/**
* Este arquivo contém funções auxiliares para trabalhar com modelos de IA.
* Os modelos agora são buscados dinamicamente da API através da função getAIModels() em @/lib/api/agents
*
* @deprecated AI_MODELS - Use getAIModels() da API ao invés disso
*/
// Função auxiliar para obter o nome do modelo pelo ID
export const getModelNameById = (id: number): string => {
const model = AI_MODELS.find((m) => m.id === id);
export const getModelNameById = (models: AIModel[], id: number): string => {
const model = models.find((m) => m.id === id);
return model?.name || "Modelo Desconhecido";
};
// Função auxiliar para obter o modelo pelo value
export const getModelByValue = (value: string): AIModel | undefined => {
return AI_MODELS.find((m) => m.value === value);
// Função auxiliar para obter o modelo pelo identifier
export const getModelByIdentifier = (models: AIModel[], identifier: string): AIModel | undefined => {
return models.find((m) => m.model_identifier === identifier);
};
// Função auxiliar para obter o ID pelo value
export const getModelIdByValue = (value: string): number | undefined => {
const model = getModelByValue(value);
// Função auxiliar para obter o ID pelo identifier
export const getModelIdByIdentifier = (models: AIModel[], identifier: string): number | undefined => {
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
+7 -1
View File
@@ -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
+18 -13
View File
@@ -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);
setSelectedModel(model?.value || "");
setSelectedModelId(agentDetails.model_id);
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 (!modelId) {
if (!selectedModelId) {
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}
onValueChange={setSelectedModel}
value={selectedModelId?.toString()}
onValueChange={(value) => setSelectedModelId(parseInt(value))}
disabled={isLoadingModels}
>
<SelectTrigger>
<SelectValue />
<SelectValue placeholder={isLoadingModels ? "Carregando modelos..." : "Selecione um modelo"} />
</SelectTrigger>
<SelectContent>
{AI_MODELS.map((model) => (
<SelectItem key={model.value} value={model.value}>
{aiModels.filter(model => model.is_active === 1).map((model) => (
<SelectItem key={model.id} value={model.id.toString()}>
{model.name}
</SelectItem>
))}