mirror of
https://github.com/domfelipe/mika-agent-assist.git
synced 2026-08-07 13:16:51 +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
18
src/components/mika/skills/AgentProvisioningState.tsx
Normal file
18
src/components/mika/skills/AgentProvisioningState.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
"use client";
|
||||
|
||||
import { Hourglass } from "lucide-react";
|
||||
|
||||
export function AgentProvisioningState() {
|
||||
return (
|
||||
<div className="rounded-xl border border-border bg-card p-8 sm:p-12 text-center shadow-soft">
|
||||
<div className="mx-auto h-16 w-16 rounded-full bg-amber-500/10 flex items-center justify-center">
|
||||
<Hourglass className="h-8 w-8 text-amber-500 animate-pulse" />
|
||||
</div>
|
||||
<h2 className="mt-6 text-2xl font-bold">Aguardando seu agente ficar pronto</h2>
|
||||
<p className="mt-2 text-muted-foreground max-w-md mx-auto">
|
||||
Estamos provisionando sua instância do Mika. Você poderá criar skills assim
|
||||
que o provisionamento terminar — geralmente em até 10 minutos.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
28
src/components/mika/skills/EmptySkillsState.tsx
Normal file
28
src/components/mika/skills/EmptySkillsState.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
"use client";
|
||||
|
||||
import { Sparkles } from "lucide-react";
|
||||
import { Link } from "@tanstack/react-router";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export function EmptySkillsState({ disabled }: { disabled?: boolean }) {
|
||||
return (
|
||||
<div className="rounded-xl border border-dashed border-border bg-card/50 p-12 text-center">
|
||||
<div className="mx-auto h-20 w-20 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<Sparkles className="h-10 w-10 text-primary/40" />
|
||||
</div>
|
||||
<h2 className="mt-6 text-xl font-bold">Você ainda não tem skills personalizadas</h2>
|
||||
<p className="mt-2 text-muted-foreground max-w-md mx-auto">
|
||||
Crie sua primeira skill em 2 minutos e ensine seu agente Mika a fazer
|
||||
exatamente o que você precisa.
|
||||
</p>
|
||||
<Button
|
||||
asChild
|
||||
size="lg"
|
||||
disabled={disabled}
|
||||
className="mt-6 rounded-lg bg-primary hover:bg-primary-dark text-primary-foreground"
|
||||
>
|
||||
<Link to="/painel/skills/nova">Criar primeira skill</Link>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
31
src/components/mika/skills/NoSubscriptionState.tsx
Normal file
31
src/components/mika/skills/NoSubscriptionState.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
"use client";
|
||||
|
||||
import { Sparkles } from "lucide-react";
|
||||
import { Link } from "@tanstack/react-router";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export function NoSubscriptionState() {
|
||||
return (
|
||||
<div className="rounded-xl border border-border bg-card p-8 sm:p-12 text-center shadow-soft">
|
||||
<div className="mx-auto h-16 w-16 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<Sparkles className="h-8 w-8 text-primary" />
|
||||
</div>
|
||||
<h2 className="mt-6 text-2xl font-bold">
|
||||
Você precisa de uma assinatura ativa para criar skills
|
||||
</h2>
|
||||
<p className="mt-2 text-muted-foreground max-w-md mx-auto">
|
||||
Escolha um plano para liberar o Skill Studio e começar a personalizar
|
||||
seu agente Mika com automações próprias.
|
||||
</p>
|
||||
<Button
|
||||
asChild
|
||||
size="lg"
|
||||
className="mt-6 rounded-lg bg-primary hover:bg-primary-dark text-primary-foreground"
|
||||
>
|
||||
<Link to="/" hash="planos">
|
||||
Ver planos
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
35
src/components/mika/skills/SkillStatusBadge.tsx
Normal file
35
src/components/mika/skills/SkillStatusBadge.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
"use client";
|
||||
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const STATUS_LABELS: Record<string, string> = {
|
||||
draft: "Rascunho",
|
||||
testing: "Em teste",
|
||||
active: "Ativa",
|
||||
disabled: "Desativada",
|
||||
archived: "Arquivada",
|
||||
};
|
||||
|
||||
const STATUS_CLASSES: Record<string, string> = {
|
||||
draft: "bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-500/30",
|
||||
testing: "bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-500/30",
|
||||
active: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/30",
|
||||
disabled: "bg-slate-500/15 text-slate-600 dark:text-slate-400 border-slate-500/30",
|
||||
archived: "bg-slate-500/10 text-slate-500/70 border-slate-500/20",
|
||||
};
|
||||
|
||||
export function SkillStatusBadge({ status, className }: { status: string; className?: string }) {
|
||||
return (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"rounded-md font-medium",
|
||||
STATUS_CLASSES[status] ?? STATUS_CLASSES.draft,
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{STATUS_LABELS[status] ?? status}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
227
src/components/mika/skills/SkillTestPanel.tsx
Normal file
227
src/components/mika/skills/SkillTestPanel.tsx
Normal file
|
|
@ -0,0 +1,227 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { Loader2, Play, X } from "lucide-react";
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
import { ptBR } from "date-fns/locale";
|
||||
import { supabase } from "@/integrations/supabase/client";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
skillName: string;
|
||||
skillVersionId: string;
|
||||
triggerKeywords?: string;
|
||||
// se não houver skill_version_id ainda (preview), passa o markdown direto e usa stateless mode
|
||||
stateless?: { markdown_content: string };
|
||||
}
|
||||
|
||||
interface TestResult {
|
||||
status: "success" | "error";
|
||||
test_output?: string;
|
||||
duration_ms: number;
|
||||
error_message?: string;
|
||||
}
|
||||
|
||||
export function SkillTestPanel({
|
||||
open,
|
||||
onOpenChange,
|
||||
skillName,
|
||||
skillVersionId,
|
||||
triggerKeywords,
|
||||
stateless,
|
||||
}: Props) {
|
||||
const [input, setInput] = useState("");
|
||||
const [result, setResult] = useState<TestResult | null>(null);
|
||||
const inputRef = useRef<HTMLTextAreaElement>(null);
|
||||
const qc = useQueryClient();
|
||||
|
||||
useEffect(() => {
|
||||
if (open) setTimeout(() => inputRef.current?.focus(), 50);
|
||||
}, [open]);
|
||||
|
||||
const placeholder = triggerKeywords
|
||||
? `Ex: "${triggerKeywords.split(",")[0]?.trim() || "..."}"`
|
||||
: "Digite um exemplo de input que você daria ao Mika para acionar esta skill";
|
||||
|
||||
const history = useQuery({
|
||||
queryKey: ["skill-test-runs", skillVersionId],
|
||||
enabled: open && !stateless,
|
||||
queryFn: async () => {
|
||||
const { data, error } = await supabase
|
||||
.from("skill_test_runs")
|
||||
.select("*")
|
||||
.eq("skill_version_id", skillVersionId)
|
||||
.order("created_at", { ascending: false })
|
||||
.limit(5);
|
||||
if (error) throw error;
|
||||
return data ?? [];
|
||||
},
|
||||
});
|
||||
|
||||
const runTest = useMutation({
|
||||
mutationFn: async (): Promise<TestResult> => {
|
||||
if (stateless) {
|
||||
// Modo preview sem persistência: chama AI direto via edge function
|
||||
const start = Date.now();
|
||||
const { data, error } = await supabase.functions.invoke("test-skill-dry-run", {
|
||||
body: { skill_version_id: skillVersionId, test_input: input },
|
||||
});
|
||||
if (error) {
|
||||
return {
|
||||
status: "error",
|
||||
duration_ms: Date.now() - start,
|
||||
error_message: error.message,
|
||||
};
|
||||
}
|
||||
return data as TestResult;
|
||||
}
|
||||
const { data, error } = await supabase.functions.invoke("test-skill-dry-run", {
|
||||
body: { skill_version_id: skillVersionId, test_input: input },
|
||||
});
|
||||
if (error) throw new Error(error.message);
|
||||
return data as TestResult;
|
||||
},
|
||||
onSuccess: (r) => {
|
||||
setResult(r);
|
||||
qc.invalidateQueries({ queryKey: ["skill-test-runs", skillVersionId] });
|
||||
},
|
||||
onError: (e: unknown) => {
|
||||
setResult({
|
||||
status: "error",
|
||||
duration_ms: 0,
|
||||
error_message: e instanceof Error ? e.message : "Erro desconhecido",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Play className="h-5 w-5 text-primary" />
|
||||
Testar skill: <span className="text-primary">{skillName}</span>
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium block mb-2">
|
||||
Digite um exemplo de input
|
||||
</label>
|
||||
<Textarea
|
||||
ref={inputRef}
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
rows={3}
|
||||
className="resize-none"
|
||||
disabled={runTest.isPending}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={() => runTest.mutate()}
|
||||
disabled={!input.trim() || runTest.isPending}
|
||||
className="w-full bg-primary hover:bg-primary-dark text-primary-foreground"
|
||||
>
|
||||
{runTest.isPending ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Mika está pensando...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Play className="h-4 w-4 mr-2" />
|
||||
Executar teste
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{result && (
|
||||
<div
|
||||
className={
|
||||
result.status === "success"
|
||||
? "rounded-xl border border-blue-500/30 bg-blue-500/5 p-4"
|
||||
: "rounded-xl border border-destructive/30 bg-destructive/5 p-4"
|
||||
}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="font-semibold text-sm">
|
||||
{result.status === "success" ? "Resultado do teste" : "Erro no teste"}
|
||||
</h3>
|
||||
{result.status === "success" && (
|
||||
<Badge variant="outline" className="bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-500/30">
|
||||
Dry-run
|
||||
</Badge>
|
||||
)}
|
||||
<button onClick={() => setResult(null)} className="ml-auto text-muted-foreground hover:text-foreground">
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="text-sm whitespace-pre-wrap">
|
||||
{result.status === "success" ? result.test_output : result.error_message}
|
||||
</div>
|
||||
{result.duration_ms > 0 && (
|
||||
<p className="mt-3 text-xs text-muted-foreground">
|
||||
Executado em {(result.duration_ms / 1000).toFixed(1)}s
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!stateless && history.data && history.data.length > 0 && (
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
Histórico ({history.data.length})
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="mt-3 space-y-2">
|
||||
{history.data.map((run) => (
|
||||
<div key={run.id} className="rounded-lg border border-border bg-muted/30 p-3 text-xs">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={
|
||||
run.status === "success"
|
||||
? "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/30"
|
||||
: "bg-destructive/15 text-destructive border-destructive/30"
|
||||
}
|
||||
>
|
||||
{run.status === "success" ? "Sucesso" : "Erro"}
|
||||
</Badge>
|
||||
<span className="text-muted-foreground">
|
||||
{formatDistanceToNow(new Date(run.created_at), { addSuffix: true, locale: ptBR })}
|
||||
</span>
|
||||
</div>
|
||||
<p className="font-medium text-foreground/80 truncate">{run.test_input}</p>
|
||||
</div>
|
||||
))}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
)}
|
||||
|
||||
<p className="text-xs text-muted-foreground border-t border-border pt-3">
|
||||
O teste em modo simulação não executa ferramentas reais. Em breve você poderá
|
||||
testar a skill diretamente no seu agente.
|
||||
</p>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
30
src/hooks/use-agent-instance.ts
Normal file
30
src/hooks/use-agent-instance.ts
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
"use client";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { supabase } from "@/integrations/supabase/client";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
|
||||
export interface AgentInstance {
|
||||
id: string;
|
||||
user_id: string;
|
||||
status: string;
|
||||
telegram_bot_username: string | null;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export function useAgentInstance() {
|
||||
const { user } = useAuth();
|
||||
return useQuery({
|
||||
queryKey: ["agent-instance", user?.id],
|
||||
enabled: !!user,
|
||||
queryFn: async (): Promise<AgentInstance | null> => {
|
||||
const { data, error } = await supabase
|
||||
.from("agent_instances")
|
||||
.select("id, user_id, status, telegram_bot_username, created_at")
|
||||
.eq("user_id", user!.id)
|
||||
.maybeSingle();
|
||||
if (error) throw error;
|
||||
return data;
|
||||
},
|
||||
});
|
||||
}
|
||||
46
src/hooks/use-skills.ts
Normal file
46
src/hooks/use-skills.ts
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
"use client";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { supabase } from "@/integrations/supabase/client";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
import type { Database } from "@/integrations/supabase/types";
|
||||
|
||||
export type Skill = Database["public"]["Tables"]["skills"]["Row"];
|
||||
export type SkillStatus = "draft" | "testing" | "active" | "disabled" | "archived";
|
||||
|
||||
export function useSkills(includeArchived = false) {
|
||||
const { user } = useAuth();
|
||||
return useQuery({
|
||||
queryKey: ["skills", user?.id, includeArchived],
|
||||
enabled: !!user,
|
||||
queryFn: async (): Promise<Skill[]> => {
|
||||
let q = supabase
|
||||
.from("skills")
|
||||
.select("*")
|
||||
.eq("user_id", user!.id)
|
||||
.order("updated_at", { ascending: false });
|
||||
if (!includeArchived) {
|
||||
q = q.neq("status", "archived");
|
||||
}
|
||||
const { data, error } = await q;
|
||||
if (error) throw error;
|
||||
return (data ?? []) as Skill[];
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useSkill(skillId: string | undefined) {
|
||||
return useQuery({
|
||||
queryKey: ["skill", skillId],
|
||||
enabled: !!skillId,
|
||||
queryFn: async (): Promise<Skill | null> => {
|
||||
const { data, error } = await supabase
|
||||
.from("skills")
|
||||
.select("*")
|
||||
.eq("id", skillId!)
|
||||
.maybeSingle();
|
||||
if (error) throw error;
|
||||
return data as Skill | null;
|
||||
},
|
||||
});
|
||||
}
|
||||
29
src/hooks/use-user-skill-limits.ts
Normal file
29
src/hooks/use-user-skill-limits.ts
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
"use client";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { supabase } from "@/integrations/supabase/client";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
|
||||
export interface UserSkillLimits {
|
||||
user_id: string;
|
||||
plan_slug: string | null;
|
||||
max_skills: number | null;
|
||||
current_skills_count: number;
|
||||
}
|
||||
|
||||
export function useUserSkillLimits() {
|
||||
const { user } = useAuth();
|
||||
return useQuery({
|
||||
queryKey: ["user-limits", user?.id],
|
||||
enabled: !!user,
|
||||
queryFn: async (): Promise<UserSkillLimits | null> => {
|
||||
const { data, error } = await supabase
|
||||
.from("user_skill_limits")
|
||||
.select("*")
|
||||
.eq("user_id", user!.id)
|
||||
.maybeSingle();
|
||||
if (error) throw error;
|
||||
return data as UserSkillLimits | null;
|
||||
},
|
||||
});
|
||||
}
|
||||
47
src/lib/skill-schema.ts
Normal file
47
src/lib/skill-schema.ts
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import { z } from "zod";
|
||||
|
||||
export const skillFormSchema = z.object({
|
||||
name: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(2, "Mínimo 2 caracteres")
|
||||
.max(60, "Máximo 60 caracteres"),
|
||||
description: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(10, "Descreva em pelo menos 10 caracteres")
|
||||
.max(200, "Máximo 200 caracteres"),
|
||||
trigger_keywords: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(2, "Adicione ao menos 1 palavra-chave")
|
||||
.max(200, "Máximo 200 caracteres"),
|
||||
expected_inputs: z.string().trim().max(500).nullable().optional(),
|
||||
steps: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(50, "Descreva o passo a passo (mín. 50 caracteres)")
|
||||
.max(3000, "Máximo 3000 caracteres"),
|
||||
required_tools: z
|
||||
.array(z.string())
|
||||
.min(1, "Selecione pelo menos uma ferramenta"),
|
||||
success_criteria: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(5, "Defina o critério de sucesso")
|
||||
.max(300, "Máximo 300 caracteres"),
|
||||
example_use_case: z.string().trim().max(500).nullable().optional(),
|
||||
});
|
||||
|
||||
export type SkillFormValues = z.infer<typeof skillFormSchema>;
|
||||
|
||||
export const AVAILABLE_TOOLS = [
|
||||
"Gmail",
|
||||
"Google Calendar",
|
||||
"Google Drive",
|
||||
"Notion",
|
||||
"Cal.com",
|
||||
"Microsoft Outlook",
|
||||
"Todoist",
|
||||
"Web Search",
|
||||
] as const;
|
||||
Loading…
Add table
Add a link
Reference in a new issue