@greatapps/greatagents-ui 0.1.0 → 0.2.1

package/src/components/agents/agent-tools-list.tsx

@@ -0,0 +1,377 @@
+import { useState } from "react";
+import type { Agent, AgentTool, Tool, ToolCredential } from "../../types";
+import type { GagentsHookConfig } from "../../hooks/types";
+import {
+  useAgentTools,
+  useAddAgentTool,
+  useRemoveAgentTool,
+  useUpdateAgentTool,
+} from "../../hooks";
+import { useTools } from "../../hooks";
+import { useToolCredentials } from "../../hooks";
+import {
+  Switch,
+  Badge,
+  Button,
+  Skeleton,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Input,
+  Textarea,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@greatapps/greatauth-ui/ui";
+import {
+  Trash2,
+  Plus,
+  Wrench,
+  Settings2,
+} from "lucide-react";
+import { toast } from "sonner";
+
+interface AgentToolsListProps {
+  agent: Agent;
+  config: GagentsHookConfig;
+}
+
+export function AgentToolsList({ agent, config }: AgentToolsListProps) {
+  const { data: agentToolsData, isLoading } = useAgentTools(config, agent.id);
+  const { data: allToolsData } = useTools(config);
+  const addMutation = useAddAgentTool(config);
+  const removeMutation = useRemoveAgentTool(config);
+  const updateMutation = useUpdateAgentTool(config);
+
+  const [removeTarget, setRemoveTarget] = useState<AgentTool | null>(null);
+  const [addOpen, setAddOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [configTarget, setConfigTarget] = useState<AgentTool | null>(null);
+  const [configInstructions, setConfigInstructions] = useState("");
+  const [configCredentialId, setConfigCredentialId] = useState<string>("");
+
+  const { data: credentialsData } = useToolCredentials(config);
+  const allCredentials: ToolCredential[] = credentialsData?.data || [];
+
+  const agentTools = agentToolsData?.data || [];
+  const allTools = allToolsData?.data || [];
+  const assignedToolIds = new Set(agentTools.map((at) => at.id_tool));
+  const availableTools = allTools.filter((t) => !assignedToolIds.has(t.id));
+  const filteredAvailable = availableTools.filter((t) =>
+    t.name.toLowerCase().includes(search.toLowerCase()),
+  );
+
+  function getToolInfo(idTool: number): Tool | undefined {
+    return allTools.find((t) => t.id === idTool);
+  }
+
+  async function handleToggleEnabled(agentTool: AgentTool, checked: boolean) {
+    try {
+      await updateMutation.mutateAsync({
+        idAgent: agent.id,
+        id: agentTool.id,
+        body: { enabled: checked },
+      });
+      toast.success(checked ? "Ferramenta ativada" : "Ferramenta desativada");
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Erro ao alterar estado da ferramenta",
+      );
+    }
+  }
+
+  async function handleAdd(tool: Tool) {
+    try {
+      await addMutation.mutateAsync({
+        idAgent: agent.id,
+        body: { id_tool: tool.id },
+      });
+      toast.success("Ferramenta adicionada");
+      setAddOpen(false);
+      setSearch("");
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Erro ao adicionar ferramenta",
+      );
+    }
+  }
+
+  async function handleRemove() {
+    if (!removeTarget) return;
+    try {
+      await removeMutation.mutateAsync({
+        idAgent: agent.id,
+        id: removeTarget.id,
+      });
+      toast.success("Ferramenta removida");
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Erro ao remover ferramenta",
+      );
+    } finally {
+      setRemoveTarget(null);
+    }
+  }
+
+  function openConfig(agentTool: AgentTool) {
+    setConfigTarget(agentTool);
+    setConfigInstructions(agentTool.custom_instructions || "");
+    setConfigCredentialId(agentTool.id_tool_credential ? String(agentTool.id_tool_credential) : "");
+  }
+
+  async function handleSaveConfig() {
+    if (!configTarget) return;
+    try {
+      const newCredentialId = configCredentialId ? parseInt(configCredentialId, 10) : null;
+      await updateMutation.mutateAsync({
+        idAgent: agent.id,
+        id: configTarget.id,
+        body: {
+          custom_instructions: configInstructions.trim() || null,
+          id_tool_credential: newCredentialId,
+        },
+      });
+      toast.success("Configuração atualizada");
+      setConfigTarget(null);
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Erro ao atualizar configuração",
+      );
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="space-y-3 p-4">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <Skeleton key={i} className="h-14 w-full" />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4 p-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          {agentTools.length} ferramenta{agentTools.length !== 1 ? "s" : ""} associada{agentTools.length !== 1 ? "s" : ""}
+        </h3>
+        <Popover open={addOpen} onOpenChange={setAddOpen}>
+          <PopoverTrigger asChild>
+            <Button size="sm" disabled={availableTools.length === 0}>
+              <Plus className="mr-2 h-4 w-4" />
+              Adicionar Ferramenta
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-72 p-0" align="end">
+            <div className="p-2">
+              <Input
+                placeholder="Buscar ferramenta..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="h-8"
+              />
+            </div>
+            <div className="max-h-48 overflow-y-auto">
+              {filteredAvailable.length === 0 ? (
+                <p className="p-3 text-center text-sm text-muted-foreground">
+                  Nenhuma ferramenta disponível
+                </p>
+              ) : (
+                filteredAvailable.map((tool) => (
+                  <button
+                    key={tool.id}
+                    type="button"
+                    className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-accent"
+                    onClick={() => handleAdd(tool)}
+                    disabled={addMutation.isPending}
+                  >
+                    <Wrench className="h-4 w-4 text-muted-foreground" />
+                    <span className="flex-1 font-medium">{tool.name}</span>
+                    <Badge variant="secondary" className="text-xs">
+                      {tool.type}
+                    </Badge>
+                  </button>
+                ))
+              )}
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
+
+      {agentTools.length === 0 ? (
+        <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
+          <Wrench className="mb-2 h-8 w-8 text-muted-foreground" />
+          <p className="text-sm text-muted-foreground">
+            Nenhuma ferramenta associada. Clique em &apos;Adicionar Ferramenta&apos; para começar.
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {agentTools.map((agentTool) => {
+            const tool = getToolInfo(agentTool.id_tool);
+            return (
+              <div
+                key={agentTool.id}
+                className="flex items-center gap-3 rounded-lg border bg-card p-3"
+              >
+                <div className="flex flex-1 flex-col gap-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="truncate font-medium">
+                      {tool?.name || `Ferramenta #${agentTool.id_tool}`}
+                    </span>
+                    {tool?.type && (
+                      <Badge variant="secondary" className="shrink-0 text-xs">
+                        {tool.type}
+                      </Badge>
+                    )}
+                  </div>
+                  {agentTool.custom_instructions && (
+                    <p className="truncate text-xs text-muted-foreground">
+                      {agentTool.custom_instructions}
+                    </p>
+                  )}
+                </div>
+
+                <Switch
+                  checked={agentTool.enabled}
+                  onCheckedChange={(checked) =>
+                    handleToggleEnabled(agentTool, checked)
+                  }
+                  disabled={updateMutation.isPending}
+                />
+
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="shrink-0 text-muted-foreground hover:text-foreground"
+                  onClick={() => openConfig(agentTool)}
+                  title="Configurar instruções"
+                >
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="shrink-0 text-muted-foreground hover:text-destructive"
+                  onClick={() => setRemoveTarget(agentTool)}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Config dialog for custom_instructions */}
+      <Dialog
+        open={!!configTarget}
+        onOpenChange={(open) => !open && setConfigTarget(null)}
+      >
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>
+              Instruções da Ferramenta
+            </DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            {configTarget && getToolInfo(configTarget.id_tool)?.type !== "none" && (
+              <div className="space-y-2">
+                <Label>Credencial</Label>
+                <Select
+                  value={configCredentialId || undefined}
+                  onValueChange={(val) => setConfigCredentialId(val === "__none__" ? "" : val)}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Selecione uma credencial (opcional)" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="__none__">Nenhuma (automático)</SelectItem>
+                    {allCredentials
+                      .filter((c) => configTarget && c.id_tool === configTarget.id_tool && c.status === "active")
+                      .map((c) => (
+                        <SelectItem key={c.id} value={String(c.id)}>
+                          {c.label || `Credencial #${c.id}`}
+                        </SelectItem>
+                      ))}
+                  </SelectContent>
+                </Select>
+                <p className="text-xs text-muted-foreground">
+                  Vincule uma credencial específica a esta ferramenta neste agente.
+                </p>
+              </div>
+            )}
+            <div className="space-y-2">
+              <Label>Instruções Personalizadas</Label>
+              <Textarea
+                value={configInstructions}
+                onChange={(e) => setConfigInstructions(e.target.value)}
+                placeholder="Instruções sobre como e quando o agente deve usar esta ferramenta..."
+                rows={6}
+              />
+              <p className="text-xs text-muted-foreground">
+                Este texto é adicionado ao prompt do agente para orientar o uso da ferramenta.
+              </p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setConfigTarget(null)}
+            >
+              Cancelar
+            </Button>
+            <Button
+              onClick={handleSaveConfig}
+              disabled={updateMutation.isPending}
+            >
+              Salvar
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Remove confirmation */}
+      <AlertDialog
+        open={!!removeTarget}
+        onOpenChange={(open) => !open && setRemoveTarget(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Remover ferramenta?</AlertDialogTitle>
+            <AlertDialogDescription>
+              A ferramenta será desassociada deste agente.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancelar</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleRemove}
+              disabled={removeMutation.isPending}
+            >
+              Remover
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

package/src/components/agents/agents-table.tsx

@@ -0,0 +1,205 @@
+import { useMemo, useState } from "react";
+import type { ColumnDef } from "@tanstack/react-table";
+import { useAgents, useDeleteAgent } from "../../hooks";
+import type { Agent } from "../../types";
+import type { GagentsHookConfig } from "../../hooks/types";
+import { DataTable } from "@greatapps/greatauth-ui";
+import {
+  Input,
+  Badge,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  Button,
+} from "@greatapps/greatauth-ui/ui";
+import { Pencil, Trash2, Search } from "lucide-react";
+import { EntityAvatar } from "@greatapps/greatauth-ui";
+import { format } from "date-fns";
+import { ptBR } from "date-fns/locale";
+import { toast } from "sonner";
+
+function useColumns(
+  onEdit: (agent: Agent) => void,
+  onDelete: (id: number) => void,
+): ColumnDef<Agent>[] {
+  return [
+    {
+      accessorKey: "title",
+      header: "Nome",
+      cell: ({ row }) => (
+        <div className="flex items-center gap-2">
+          <EntityAvatar photo={row.original.photo} name={row.original.title} size="sm" />
+          <span className="font-medium">{row.original.title}</span>
+        </div>
+      ),
+      sortingFn: (rowA, rowB) =>
+        rowA.original.title
+          .toLowerCase()
+          .localeCompare(rowB.original.title.toLowerCase()),
+    },
+    {
+      accessorKey: "active",
+      header: "Status",
+      cell: ({ row }) =>
+        row.original.active ? (
+          <Badge variant="default">Ativo</Badge>
+        ) : (
+          <Badge variant="secondary">Inativo</Badge>
+        ),
+    },
+    {
+      accessorKey: "datetime_add",
+      header: "Criado em",
+      cell: ({ row }) => (
+        <span className="text-muted-foreground text-sm">
+          {format(new Date(row.original.datetime_add), "dd/MM/yyyy", {
+            locale: ptBR,
+          })}
+        </span>
+      ),
+    },
+    {
+      id: "actions",
+      size: 80,
+      enableSorting: false,
+      cell: ({ row }) => (
+        <div className="flex items-center gap-1">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => onEdit(row.original)}
+              >
+                <Pencil className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Editar</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-destructive hover:text-destructive"
+                onClick={() => onDelete(row.original.id)}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Excluir</TooltipContent>
+          </Tooltip>
+        </div>
+      ),
+    },
+  ];
+}
+
+export function AgentsTable({ config, onNavigateToAgent }: { config: GagentsHookConfig; onNavigateToAgent?: (agentId: number) => void }) {
+  const [search, setSearch] = useState("");
+  const [page, setPage] = useState(1);
+
+  const queryParams = useMemo(() => {
+    const params: Record<string, string> = {
+      limit: "15",
+      page: String(page),
+    };
+    if (search) {
+      params.search = search;
+    }
+    return params;
+  }, [search, page]);
+
+  const { data, isLoading } = useAgents(config, queryParams);
+  const deleteAgent = useDeleteAgent(config);
+  const [deleteId, setDeleteId] = useState<number | null>(null);
+
+  const agents = data?.data || [];
+  const total = data?.total || 0;
+
+  const columns = useColumns(
+    (agent) => onNavigateToAgent?.(agent.id),
+    (id) => setDeleteId(id),
+  );
+
+  function handleDelete() {
+    if (!deleteId) return;
+    deleteAgent.mutate(deleteId, {
+      onSuccess: () => {
+        toast.success("Agente excluído");
+        setDeleteId(null);
+      },
+      onError: () => toast.error("Erro ao excluir agente"),
+    });
+  }
+
+  function handleSearchChange(value: string) {
+    setSearch(value);
+    setPage(1);
+  }
+
+  return (
+    <>
+      <div className="flex items-center gap-3">
+        <div className="relative flex-1 max-w-md">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Buscar agentes..."
+            value={search}
+            onChange={(e) => handleSearchChange(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+      </div>
+
+      <DataTable
+        columns={columns}
+        data={agents}
+        isLoading={isLoading}
+        emptyMessage="Nenhum agente encontrado"
+        total={total}
+        page={page}
+        onPageChange={setPage}
+        pageSize={15}
+      />
+
+      {/* Delete confirmation */}
+      <AlertDialog
+        open={!!deleteId}
+        onOpenChange={(open) => !open && setDeleteId(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Excluir agente?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Esta ação não pode ser desfeita. O agente será removido
+              permanentemente.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel variant="outline" size="default">
+              Cancelar
+            </AlertDialogCancel>
+            <AlertDialogAction
+              variant="default"
+              size="default"
+              onClick={handleDelete}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Excluir
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/src/components/conversations/agent-conversations-panel.tsx

@@ -0,0 +1,44 @@
+import type { Agent } from "../../types";
+import type { GagentsHookConfig } from "../../hooks/types";
+import { useAgentConversations, useGagentsContacts, useObjectives } from "../../hooks";
+import { AgentConversationsTable } from "./agent-conversations-table";
+
+interface AgentConversationsPanelProps {
+  agent: Agent;
+  config: GagentsHookConfig;
+  renderChatLink?: (inboxId: number) => React.ReactNode;
+}
+
+export function AgentConversationsPanel({
+  agent,
+  config,
+  renderChatLink,
+}: AgentConversationsPanelProps) {
+  const { data: conversationsData, isLoading } = useAgentConversations(
+    config,
+    agent.id,
+  );
+  const { data: contactsData } = useGagentsContacts(config);
+  const { data: objectivesData } = useObjectives(config, agent.id);
+
+  const conversations = conversationsData?.data || [];
+  const contactsMap = new Map(
+    (contactsData?.data || []).map((c) => [c.id, c.name]),
+  );
+  const objectivesMap = new Map(
+    (objectivesData?.data || []).map((o) => [o.id, o.title]),
+  );
+
+  return (
+    <div className="p-4">
+      <AgentConversationsTable
+        conversations={conversations}
+        isLoading={isLoading}
+        contactsMap={contactsMap}
+        objectivesMap={objectivesMap}
+        config={config}
+        renderChatLink={renderChatLink}
+      />
+    </div>
+  );
+}