mirror of
https://github.com/domfelipe/mika-agent-assist.git
synced 2026-08-07 06:56:44 +00:00
Changes
Co-authored-by: domfelipe <53182096+domfelipe@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
parent
124f70528b
commit
a32c05a679
10 changed files with 721 additions and 0 deletions
230
src/components/mika/skills/SkillCard.tsx
Normal file
230
src/components/mika/skills/SkillCard.tsx
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Link, useNavigate } from "@tanstack/react-router";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { MoreVertical, Edit, Play, Power, Copy, Archive, RotateCcw, Trash2 } from "lucide-react";
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
import { ptBR } from "date-fns/locale";
|
||||
import { toast } from "sonner";
|
||||
import { supabase } from "@/integrations/supabase/client";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { SkillStatusBadge } from "./SkillStatusBadge";
|
||||
import type { Skill } from "@/hooks/use-skills";
|
||||
import { SkillTestPanel } from "./SkillTestPanel";
|
||||
|
||||
export function SkillCard({ skill }: { skill: Skill }) {
|
||||
const navigate = useNavigate();
|
||||
const qc = useQueryClient();
|
||||
const [confirmArchive, setConfirmArchive] = useState(false);
|
||||
const [confirmDelete, setConfirmDelete] = useState(false);
|
||||
const [testOpen, setTestOpen] = useState(false);
|
||||
|
||||
const isArchived = skill.status === "archived";
|
||||
|
||||
const updateStatus = useMutation({
|
||||
mutationFn: async (newStatus: string) => {
|
||||
const { error } = await supabase
|
||||
.from("skills")
|
||||
.update({ status: newStatus, updated_at: new Date().toISOString() })
|
||||
.eq("id", skill.id);
|
||||
if (error) throw error;
|
||||
},
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ["skills"] });
|
||||
qc.invalidateQueries({ queryKey: ["user-limits"] });
|
||||
},
|
||||
});
|
||||
|
||||
const handleToggleActive = () => {
|
||||
const next = skill.status === "active" ? "disabled" : "active";
|
||||
updateStatus.mutate(next, {
|
||||
onSuccess: () => toast.success(next === "active" ? "Skill ativada" : "Skill desativada"),
|
||||
onError: (e: unknown) => toast.error(e instanceof Error ? e.message : "Erro ao atualizar"),
|
||||
});
|
||||
};
|
||||
|
||||
const handleArchive = () => {
|
||||
updateStatus.mutate("archived", {
|
||||
onSuccess: () => {
|
||||
toast.success("Skill arquivada");
|
||||
setConfirmArchive(false);
|
||||
},
|
||||
onError: (e: unknown) => toast.error(e instanceof Error ? e.message : "Erro ao arquivar"),
|
||||
});
|
||||
};
|
||||
|
||||
const handleRestore = () => {
|
||||
updateStatus.mutate("draft", {
|
||||
onSuccess: () => toast.success("Skill restaurada como rascunho"),
|
||||
onError: (e: unknown) => {
|
||||
if ((e as { code?: string })?.code === "23505") {
|
||||
toast.error("Já existe outra skill ativa com esse nome. Renomeie antes de restaurar.");
|
||||
} else {
|
||||
toast.error(e instanceof Error ? e.message : "Erro ao restaurar");
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = useMutation({
|
||||
mutationFn: async () => {
|
||||
const { error } = await supabase.from("skills").delete().eq("id", skill.id);
|
||||
if (error) throw error;
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success("Skill deletada");
|
||||
qc.invalidateQueries({ queryKey: ["skills"] });
|
||||
qc.invalidateQueries({ queryKey: ["user-limits"] });
|
||||
setConfirmDelete(false);
|
||||
},
|
||||
onError: (e: unknown) => toast.error(e instanceof Error ? e.message : "Erro ao deletar"),
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="group rounded-xl border border-border bg-card p-5 shadow-soft hover:shadow-glow transition-shadow">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0 flex-1">
|
||||
<button
|
||||
onClick={() => navigate({ to: "/painel/skills/$id", params: { id: skill.id } })}
|
||||
className="text-left font-semibold text-base hover:text-primary transition-colors truncate w-full"
|
||||
>
|
||||
{skill.name}
|
||||
</button>
|
||||
<p className="mt-1 text-sm text-muted-foreground line-clamp-2">
|
||||
{skill.description}
|
||||
</p>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 -mt-1 -mr-1 shrink-0">
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-44">
|
||||
{isArchived ? (
|
||||
<>
|
||||
<DropdownMenuItem onClick={handleRestore} className="cursor-pointer">
|
||||
<RotateCcw className="h-4 w-4 mr-2" /> Restaurar
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={() => setConfirmDelete(true)}
|
||||
className="cursor-pointer text-destructive focus:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" /> Deletar
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<DropdownMenuItem asChild className="cursor-pointer">
|
||||
<Link to="/painel/skills/$id" params={{ id: skill.id }}>
|
||||
<Edit className="h-4 w-4 mr-2" /> Editar
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => setTestOpen(true)}
|
||||
disabled={!skill.current_version_id}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<Play className="h-4 w-4 mr-2" /> Testar
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={handleToggleActive}
|
||||
disabled={!skill.current_version_id && skill.status !== "active"}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<Power className="h-4 w-4 mr-2" />
|
||||
{skill.status === "active" ? "Desativar" : "Ativar"}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem disabled className="cursor-not-allowed opacity-50">
|
||||
<Copy className="h-4 w-4 mr-2" /> Duplicar
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={() => setConfirmArchive(true)}
|
||||
className="cursor-pointer text-destructive focus:text-destructive"
|
||||
>
|
||||
<Archive className="h-4 w-4 mr-2" /> Arquivar
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex items-center justify-between gap-2">
|
||||
<SkillStatusBadge status={skill.status} />
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatDistanceToNow(new Date(skill.updated_at), { addSuffix: true, locale: ptBR })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AlertDialog open={confirmArchive} onOpenChange={setConfirmArchive}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Arquivar esta skill?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
A skill <strong>{skill.name}</strong> ficará invisível para o agente. Você
|
||||
poderá restaurá-la depois sem perder o histórico.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancelar</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleArchive}>Arquivar</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
<AlertDialog open={confirmDelete} onOpenChange={setConfirmDelete}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Deletar definitivamente?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Esta ação remove <strong>{skill.name}</strong> e todo o histórico de versões.
|
||||
Não é possível desfazer.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancelar</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => handleDelete.mutate()}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
Deletar
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{testOpen && skill.current_version_id && (
|
||||
<SkillTestPanel
|
||||
open={testOpen}
|
||||
onOpenChange={setTestOpen}
|
||||
skillName={skill.name}
|
||||
skillVersionId={skill.current_version_id}
|
||||
triggerKeywords={skill.trigger_keywords}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue