Add Agents screen to sidebar

2025-10-29 14:57:43 +00:00
parent 6ef80b9726
commit b9d7db533c
4 changed files with 287 additions and 0 deletions
@@ -0,0 +1,158 @@
+import { useState } from "react";
+import { CreateAgentDialog } from "@/components/agents/CreateAgentDialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Plus, Search, MoreVertical, Edit, Trash2 } from "lucide-react";
+
+export default function Agents() {
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const [agents] = useState([
+    {
+      id: 1,
+      name: "Agente de Atendimento",
+      status: "active" as const,
+      prompt: "Prompt de Atendimento v2.1",
+      model: "Google Gemini 2.5 Flash",
+      createdAt: "2 dias atrás",
+    },
+    {
+      id: 2,
+      name: "Agente de Vendas",
+      status: "active" as const,
+      prompt: "Prompt de Vendas v1.5",
+      model: "OpenAI GPT-5",
+      createdAt: "5 dias atrás",
+    },
+    {
+      id: 3,
+      name: "Agente de Análise",
+      status: "inactive" as const,
+      prompt: "Prompt de Análise",
+      model: "Anthropic Claude Sonnet 4.5",
+      createdAt: "1 semana atrás",
+    },
+  ]);
+
+  const filteredAgents = agents.filter(agent =>
+    agent.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <div className="animate-fade-in">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-3xl font-bold text-foreground mb-2">Gestão de Agentes</h1>
+          <p className="text-muted-foreground">
+            Crie e gerencie agentes de IA com prompts e modelos específicos
+          </p>
+        </div>
+        <Button className="gap-2" onClick={() => setIsCreateDialogOpen(true)}>
+          <Plus className="h-4 w-4" />
+          Criar Agente
+        </Button>
+      </div>
+
+      <div className="mb-6">
+        <div className="relative max-w-md">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
+          <Input
+            placeholder="Pesquisar agentes..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-10"
+          />
+        </div>
+        <p className="text-sm text-muted-foreground mt-2">
+          {filteredAgents.length} {filteredAgents.length === 1 ? 'agente encontrado' : 'agentes encontrados'}
+        </p>
+      </div>
+
+      {filteredAgents.length === 0 ? (
+        <div className="text-center py-12">
+          <p className="text-muted-foreground">Nenhum agente encontrado.</p>
+        </div>
+      ) : (
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Nome</TableHead>
+                <TableHead>Prompt</TableHead>
+                <TableHead>Modelo</TableHead>
+                <TableHead>Criado</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead className="text-right">Ações</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredAgents.map((agent) => (
+                <TableRow key={agent.id}>
+                  <TableCell className="font-medium">{agent.name}</TableCell>
+                  <TableCell>{agent.prompt}</TableCell>
+                  <TableCell>
+                    <code className="text-xs bg-muted px-2 py-1 rounded">
+                      {agent.model}
+                    </code>
+                  </TableCell>
+                  <TableCell>{agent.createdAt}</TableCell>
+                  <TableCell>
+                    <Badge 
+                      variant={agent.status === "active" ? "default" : "secondary"}
+                      className={agent.status === "active" ? "bg-green-600 hover:bg-green-700" : "bg-muted text-muted-foreground hover:bg-muted"}
+                    >
+                      {agent.status === "active" ? "Ativo" : "Inativo"}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                          <MoreVertical className="h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem onClick={() => console.log("Edit", agent.id)}>
+                          <Edit className="h-4 w-4 mr-2" />
+                          Editar
+                        </DropdownMenuItem>
+                        <DropdownMenuItem 
+                          onClick={() => console.log("Delete", agent.id)}
+                          className="text-destructive"
+                        >
+                          <Trash2 className="h-4 w-4 mr-2" />
+                          Excluir
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      <CreateAgentDialog
+        open={isCreateDialogOpen}
+        onOpenChange={setIsCreateDialogOpen}
+      />
+    </div>
+  );
+}