=> {
+ await api.delete(
+ `/webhook/8099ad7b-0879-4249-8b2a-fb8e1f243772/promptlab/agente-chat/${chat_id}`
+ );
+};
diff --git a/src/lib/constants/aiModels.ts b/src/lib/constants/aiModels.ts
new file mode 100644
index 0000000..826bcf0
--- /dev/null
+++ b/src/lib/constants/aiModels.ts
@@ -0,0 +1,33 @@
+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" },
+];
+
+// 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);
+ 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 ID pelo value
+export const getModelIdByValue = (value: string): number | undefined => {
+ const model = getModelByValue(value);
+ return model?.id;
+};
diff --git a/src/lib/types/agent.ts b/src/lib/types/agent.ts
new file mode 100644
index 0000000..fc5d751
--- /dev/null
+++ b/src/lib/types/agent.ts
@@ -0,0 +1,120 @@
+export interface Agent {
+ agente_id: string;
+ nome_agente: string;
+ versao_agente: string;
+ modelo_ia: string;
+ status: "ativo" | "inativo";
+ created_at: string;
+}
+
+export interface AgentDetails {
+ id: string;
+ estabelecimento_id: number;
+ model_id: number;
+ name: string;
+ system_prompt: string;
+ status: "ativo" | "inativo";
+ version_id: string;
+ created_by: string;
+ updated_by: string;
+ created_at: string;
+ updated_at: string;
+}
+
+export interface AgentVersion {
+ versao_id: string;
+ numero_versao: string;
+ notas_versao: string;
+ modelo_ia_nome: string;
+ system_prompt: string;
+ criado_por: string;
+ data_criacao: string;
+}
+
+export interface CreateAgentRequest {
+ estabelecimento_id: number;
+ user_email: string;
+ nome: string;
+ model_id: number;
+}
+
+export interface CreateAgentResponse {
+ success: boolean;
+ agent_id: string;
+ agent_name: string;
+ version_id: string;
+ version_number: string;
+ version_type: string;
+ model_id: string;
+ system_prompt: string;
+}
+
+export interface EditAgentRequest {
+ user_email: string;
+ model_id: number;
+ system_prompt: string;
+ version_type: "major" | "minor" | "patch";
+ notes: string;
+}
+
+export interface EditAgentResponse {
+ success: boolean;
+ agent_id: string;
+ agent_name: string;
+ version_id: string;
+ version_number: string;
+ version_type: string;
+ model_id: string;
+ system_prompt: string;
+}
+
+export interface EditAgentNameRequest {
+ nome: string;
+ user_email: string;
+}
+
+export interface EditAgentNameResponse {
+ success: boolean;
+ agent_id: string;
+ estabelecimento_id: string;
+ agent_name: string;
+ model_id: string;
+ status: string;
+ updated_by: string;
+ updated_at: string;
+}
+
+export interface ToggleAgentStatusRequest {
+ status: "ativo" | "inativo";
+ user_email: string;
+}
+
+export interface ToggleAgentStatusResponse {
+ success: boolean;
+ agent_id: string;
+ estabelecimento_id: string;
+ model_id: string;
+ agent_name: string;
+ system_prompt: string;
+ status: "ativo" | "inativo";
+ version_id: string;
+ created_by: string;
+ updated_by: string;
+ created_at: string;
+ updated_at: string;
+}
+
+export interface ListAgentsResponse {
+ success: boolean;
+ page: number;
+ per_page: number;
+ total: number;
+ total_pages: number;
+ data: Agent[];
+}
+
+export interface AIModel {
+ id: number;
+ name: string;
+ value: string;
+}
diff --git a/src/lib/types/chat.ts b/src/lib/types/chat.ts
new file mode 100644
index 0000000..356aa8c
--- /dev/null
+++ b/src/lib/types/chat.ts
@@ -0,0 +1,35 @@
+export interface ChatMessage {
+ id: string;
+ agent_chat_id: string;
+ role: "user" | "assistant";
+ content: string;
+ input_tokens: number;
+ output_tokens: number;
+ total_tokens: number;
+ cost_usd: string;
+ created_at: string;
+}
+
+export interface Chat {
+ id: string;
+ agent_id: string;
+ estabelecimento_id: number;
+ user_email: string;
+ title: string;
+ created_at: string;
+ updated_at: string;
+ deleted_at: string | null;
+}
+
+export interface TestAgentRequest {
+ estabelecimento_id: number;
+ user_email: string;
+ chat_id: string;
+ message: string;
+}
+
+export interface TestAgentResponse {
+ success: boolean;
+ chat_id: string;
+ response: string;
+}
diff --git a/src/main.tsx b/src/main.tsx
index 68176a7..84e7e14 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,5 +1,20 @@
import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import App from "./App.tsx";
import "./index.css";
-createRoot(document.getElementById("root")!).render();
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: 1,
+ refetchOnWindowFocus: false,
+ staleTime: 5 * 60 * 1000, // 5 minutos
+ },
+ },
+});
+
+createRoot(document.getElementById("root")!).render(
+
+
+
+);
diff --git a/src/pages/AgentDetails.tsx b/src/pages/AgentDetails.tsx
index cb52dfc..ad504a3 100644
--- a/src/pages/AgentDetails.tsx
+++ b/src/pages/AgentDetails.tsx
@@ -1,11 +1,12 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { ArrowLeft, Save, History, Power, Pencil, Check, X } from "lucide-react";
+import { ArrowLeft, Save, History, Power, Pencil, Check, X, Loader2 } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { VersionHistoryDialog } from "@/components/agents/VersionHistoryDialog";
import { SaveVersionDialog } from "@/components/agents/SaveVersionDialog";
@@ -20,126 +21,214 @@ import {
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
+import {
+ getAgentDetails,
+ editAgent,
+ editAgentName,
+ toggleAgentStatus,
+ getAgentVersions,
+} from "@/lib/api/agents";
+import { AI_MODELS, getModelIdByValue } from "@/lib/constants/aiModels";
export default function AgentDetails() {
const { id } = useParams();
const navigate = useNavigate();
const { toast } = useToast();
+ const queryClient = useQueryClient();
const [isHistoryOpen, setIsHistoryOpen] = useState(false);
const [isSaveVersionOpen, setIsSaveVersionOpen] = useState(false);
const [isDeactivateDialogOpen, setIsDeactivateDialogOpen] = useState(false);
const [isEditingName, setIsEditingName] = useState(false);
const [tempName, setTempName] = useState("");
+ const [selectedModel, setSelectedModel] = useState("");
+ const [systemPrompt, setSystemPrompt] = useState("");
- // Mock data - substituir por dados reais do backend
- const [agent, setAgent] = useState<{
- id: string | undefined;
- name: string;
- status: "active" | "inactive";
- model: string;
- systemPrompt: string;
- }>({
- id: id,
- name: "Agente de Atendimento",
- status: "active",
- model: "google/gemini-2.5-flash",
- systemPrompt: "Você é um assistente de atendimento ao cliente. Seja educado, prestativo e objetivo nas suas respostas. Sempre mantenha um tom profissional e cordial.",
+ // Fetch agent details
+ const {
+ data: agentDetails,
+ isLoading,
+ isError,
+ refetch,
+ } = useQuery({
+ queryKey: ["agent", id],
+ queryFn: () => getAgentDetails(id!),
+ enabled: !!id,
});
- const [versions] = useState([
- {
- id: 1,
- version: "2.1",
- type: "major" as const,
- description: "Melhorias na clareza das respostas",
- model: "Google Gemini 2.5 Flash",
- prompt: "Você é um assistente de atendimento ao cliente. Seja educado, prestativo e objetivo nas suas respostas. Sempre mantenha um tom profissional e cordial.",
- createdAt: "2024-01-15 14:30",
- author: "João Silva",
- },
- {
- id: 2,
- version: "2.0",
- type: "major" as const,
- description: "Reformulação completa do prompt",
- model: "Google Gemini 2.5 Pro",
- prompt: "Você é um assistente de atendimento. Seja cordial e ajude o cliente.",
- createdAt: "2024-01-10 09:15",
- author: "Maria Santos",
- },
- {
- id: 3,
- version: "1.5",
- type: "minor" as const,
- description: "Ajustes de tom",
- model: "OpenAI GPT-5 Mini",
- prompt: "Você é um assistente. Seja educado.",
- createdAt: "2024-01-05 16:45",
- author: "João Silva",
- },
- ]);
+ // Fetch agent versions for history
+ const {
+ data: versions,
+ isLoading: isLoadingVersions,
+ } = useQuery({
+ queryKey: ["agent-versions", id],
+ queryFn: () => getAgentVersions(id!),
+ enabled: !!id && isHistoryOpen,
+ });
- 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" },
- ];
+ // 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 || "");
+ setSystemPrompt(agentDetails.system_prompt);
+ setTempName(agentDetails.name);
+ }
+ }, [agentDetails]);
+
+ // Edit agent mutation (save new version)
+ const editAgentMutation = useMutation({
+ mutationFn: ({
+ model_id,
+ system_prompt,
+ version_type,
+ notes,
+ }: {
+ model_id: number;
+ system_prompt: string;
+ version_type: "major" | "minor" | "patch";
+ notes: string;
+ }) => editAgent(id!, model_id, system_prompt, version_type, notes),
+ onSuccess: (data) => {
+ toast({
+ title: "Agente atualizado",
+ description: `Nova versão ${data.version_type} salva com sucesso.`,
+ });
+ queryClient.invalidateQueries({ queryKey: ["agent", id] });
+ queryClient.invalidateQueries({ queryKey: ["agent-versions", id] });
+ },
+ onError: (error: any) => {
+ toast({
+ title: "Erro ao atualizar agente",
+ description: error.response?.data?.message || "Ocorreu um erro ao atualizar o agente.",
+ variant: "destructive",
+ });
+ },
+ });
+
+ // Edit agent name mutation
+ const editNameMutation = useMutation({
+ mutationFn: (nome: string) => editAgentName(id!, nome),
+ onSuccess: () => {
+ toast({
+ title: "Nome atualizado",
+ description: "O nome do agente foi alterado com sucesso.",
+ });
+ queryClient.invalidateQueries({ queryKey: ["agent", id] });
+ queryClient.invalidateQueries({ queryKey: ["agents"] });
+ setIsEditingName(false);
+ },
+ onError: (error: any) => {
+ toast({
+ title: "Erro ao atualizar nome",
+ description: error.response?.data?.message || "Ocorreu um erro ao atualizar o nome.",
+ variant: "destructive",
+ });
+ },
+ });
+
+ // Toggle status mutation
+ const toggleStatusMutation = useMutation({
+ mutationFn: (status: "ativo" | "inativo") => toggleAgentStatus(id!, status),
+ onSuccess: (data) => {
+ toast({
+ title: "Status atualizado",
+ description: `Agente ${data.status === "ativo" ? "ativado" : "desativado"} com sucesso.`,
+ });
+ queryClient.invalidateQueries({ queryKey: ["agent", id] });
+ queryClient.invalidateQueries({ queryKey: ["agents"] });
+ setIsDeactivateDialogOpen(false);
+ },
+ onError: (error: any) => {
+ toast({
+ title: "Erro ao atualizar status",
+ description: error.response?.data?.message || "Ocorreu um erro ao atualizar o status.",
+ variant: "destructive",
+ });
+ },
+ });
const handleSave = (versionType: "major" | "minor" | "patch", notes: string) => {
- // TODO: Implementar salvamento no backend
- console.log("Saving agent:", agent, "Version type:", versionType, "Notes:", notes);
- toast({
- title: "Agente atualizado",
- description: `Nova versão ${versionType} salva com sucesso.`,
+ const modelId = getModelIdByValue(selectedModel);
+ if (!modelId) {
+ toast({
+ title: "Erro",
+ description: "Modelo de IA inválido.",
+ variant: "destructive",
+ });
+ return;
+ }
+
+ editAgentMutation.mutate({
+ model_id: modelId,
+ system_prompt: systemPrompt,
+ version_type: versionType,
+ notes,
});
};
const handleToggleStatus = () => {
- if (agent.status === "active") {
+ if (agentDetails?.status === "ativo") {
setIsDeactivateDialogOpen(true);
} else {
- // Ativar diretamente sem modal
- setAgent({ ...agent, status: "active" });
- toast({
- title: "Status atualizado",
- description: "Agente ativado com sucesso.",
- });
+ toggleStatusMutation.mutate("ativo");
}
};
const handleConfirmDeactivate = () => {
- setAgent({ ...agent, status: "inactive" });
- toast({
- title: "Status atualizado",
- description: "Agente desativado com sucesso. Esta ação foi registrada.",
- });
- setIsDeactivateDialogOpen(false);
+ toggleStatusMutation.mutate("inativo");
};
const handleStartEditName = () => {
- setTempName(agent.name);
+ setTempName(agentDetails?.name || "");
setIsEditingName(true);
};
const handleSaveName = () => {
if (tempName.trim()) {
- setAgent({ ...agent, name: tempName.trim() });
- setIsEditingName(false);
- toast({
- title: "Nome atualizado",
- description: "O nome do agente foi alterado com sucesso.",
- });
+ editNameMutation.mutate(tempName.trim());
}
};
const handleCancelEditName = () => {
setIsEditingName(false);
- setTempName("");
+ setTempName(agentDetails?.name || "");
};
+ // Format versions for the history dialog
+ const formattedVersions = versions?.map((v, index) => ({
+ id: index + 1,
+ version: v.numero_versao,
+ type: (v.notas_versao.toLowerCase().includes("major")
+ ? "major"
+ : v.notas_versao.toLowerCase().includes("minor")
+ ? "minor"
+ : "patch") as "major" | "minor" | "patch",
+ description: v.notas_versao,
+ model: v.modelo_ia_nome,
+ prompt: v.system_prompt,
+ createdAt: v.data_criacao,
+ author: v.criado_por,
+ })) || [];
+
+ if (isLoading) {
+ return (
+
+
+
+ );
+ }
+
+ if (isError || !agentDetails) {
+ return (
+
+
Erro ao carregar detalhes do agente.
+
+
{/* Header */}
@@ -172,6 +261,7 @@ export default function AgentDetails() {
variant="ghost"
className="h-8 w-8 p-0"
onClick={handleSaveName}
+ disabled={editNameMutation.isPending}
>
@@ -186,7 +276,7 @@ export default function AgentDetails() {
) : (
<>
- {agent.name}
+ {agentDetails.name}