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

Refactor Agents and Prompts routes

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-30 12:48:10 +00:00
parent d3c2e31d15
commit 954b09f836
4 changed files with 60 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+2 -2
View File
@@ -22,8 +22,8 @@ const App = () => (
<BrowserRouter> <BrowserRouter>
<Routes> <Routes>
<Route element={<AppLayout />}> <Route element={<AppLayout />}>
<Route path="/agents" element={<Agents />} /> <Route path="/" element={<Agents />} />
<Route path="/" element={<Prompts />} /> <Route path="/prompts" element={<Prompts />} />
<Route path="/test" element={<TestPrompt />} /> <Route path="/test" element={<TestPrompt />} />
<Route path="/history" element={<History />} /> <Route path="/history" element={<History />} />
</Route> </Route>
src/components/layout/AppSidebar.tsx
+2 -2
View File
@@ -13,8 +13,8 @@ import { Separator } from "@/components/ui/separator";
import { ThemeToggle } from "./ThemeToggle"; import { ThemeToggle } from "./ThemeToggle";
const menuItems = [ const menuItems = [
{ title: "Agentes", url: "/agents", icon: Bot }, { title: "Agentes", url: "/", icon: Bot },
{ title: "Prompts", url: "/", icon: FileText }, { title: "Prompts", url: "/prompts", icon: FileText },
{ title: "Testar Prompt", url: "/test", icon: TestTube }, { title: "Testar Prompt", url: "/test", icon: TestTube },
]; ];
src/components/layout/MobileNav.tsx
+2 -2
View File
@@ -5,8 +5,8 @@ import { Button } from "@/components/ui/button";
import { ThemeToggle } from "./ThemeToggle"; import { ThemeToggle } from "./ThemeToggle";
const menuItems = [ const menuItems = [
{ title: "Agentes", url: "/agents", icon: Bot }, { title: "Agentes", url: "/", icon: Bot },
{ title: "Prompts", url: "/", icon: FileText }, { title: "Prompts", url: "/prompts", icon: FileText },
{ title: "Testar Prompt", url: "/test", icon: TestTube }, { title: "Testar Prompt", url: "/test", icon: TestTube },
]; ];
src/pages/Agents.tsx
+54 -96
View File
@@ -3,21 +3,14 @@ import { CreateAgentDialog } from "@/components/agents/CreateAgentDialog";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { Plus, Search, MoreVertical, Edit, Trash2 } from "lucide-react"; import { Plus, Search, MoreVertical, Edit, Trash2, Bot, Zap } from "lucide-react";
export default function Agents() { export default function Agents() {
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false); const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
@@ -89,19 +82,29 @@ export default function Agents() {
<p className="text-muted-foreground">Nenhum agente encontrado.</p> <p className="text-muted-foreground">Nenhum agente encontrado.</p>
</div> </div>
) : ( ) : (
<> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Mobile Cards */} {filteredAgents.map((agent) => (
<div className="md:hidden space-y-4"> <Card
{filteredAgents.map((agent) => ( key={agent.id}
<div key={agent.id} className="bg-card border rounded-lg p-4 space-y-3"> className="group relative overflow-hidden border-2 transition-all duration-300 hover:shadow-lg hover:scale-[1.02] bg-gradient-to-br from-card to-card/50"
>
{/* Glow effect on hover */}
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
<CardHeader className="relative pb-3">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div> <div className="flex items-center gap-3">
<h3 className="font-medium text-lg">{agent.name}</h3> <div className="h-12 w-12 rounded-xl bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
<p className="text-sm text-muted-foreground">{agent.createdAt}</p> <Bot className="h-6 w-6 text-primary" />
</div>
<div>
<CardTitle className="text-xl">{agent.name}</CardTitle>
<CardDescription className="text-xs mt-1">{agent.createdAt}</CardDescription>
</div>
</div> </div>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon"> <Button variant="ghost" size="icon" className="h-8 w-8">
<MoreVertical className="h-4 w-4" /> <MoreVertical className="h-4 w-4" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
@@ -120,88 +123,43 @@ export default function Agents() {
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</div> </div>
<div className="space-y-2"> </CardHeader>
<div>
<span className="text-xs text-muted-foreground">Prompt:</span> <CardContent className="relative space-y-4">
<p className="text-sm">{agent.prompt}</p> <div className="space-y-3">
<div className="flex items-start gap-2 p-3 rounded-lg bg-muted/50">
<Zap className="h-4 w-4 text-primary mt-0.5 flex-shrink-0" />
<div className="flex-1 min-w-0">
<p className="text-xs text-muted-foreground mb-1">Prompt</p>
<p className="text-sm font-medium truncate">{agent.prompt}</p>
</div>
</div> </div>
<div>
<span className="text-xs text-muted-foreground">Modelo:</span> <div className="p-3 rounded-lg bg-muted/50">
<p className="text-sm"> <p className="text-xs text-muted-foreground mb-2">Modelo de IA</p>
<code className="text-xs bg-muted px-2 py-1 rounded">{agent.model}</code> <code className="text-xs bg-background/80 px-3 py-1.5 rounded-md border inline-block">
</p> {agent.model}
</code>
</div> </div>
</div> </div>
<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>
</div>
))}
</div>
{/* Desktop Table */} <div className="flex items-center justify-between pt-2 border-t">
<div className="hidden md:block rounded-md border"> <span className="text-xs text-muted-foreground">Status</span>
<Table> <Badge
<TableHeader> variant={agent.status === "active" ? "default" : "secondary"}
<TableRow> className={
<TableHead>Nome</TableHead> agent.status === "active"
<TableHead>Prompt</TableHead> ? "bg-green-600 hover:bg-green-700 shadow-sm"
<TableHead>Modelo</TableHead> : "bg-muted text-muted-foreground hover:bg-muted"
<TableHead>Criado</TableHead> }
<TableHead>Status</TableHead> >
<TableHead className="text-right">Ações</TableHead> {agent.status === "active" ? "● Ativo" : "○ Inativo"}
</TableRow> </Badge>
</TableHeader> </div>
<TableBody> </CardContent>
{filteredAgents.map((agent) => ( </Card>
<TableRow key={agent.id}> ))}
<TableCell className="font-medium">{agent.name}</TableCell> </div>
<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 <CreateAgentDialog