@greatapps/greatagents-ui 0.1.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/greatagents-ui",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Shared agents UI components for Great platform",
   "type": "module",
   "main": "./dist/index.js",
@@ -28,18 +28,28 @@
     "lucide-react": "*",
     "date-fns": "*",
     "sonner": "*",
-    "@greatapps/greatauth-ui": "*"
+    "@greatapps/greatauth-ui": "*",
+    "@dnd-kit/core": "*",
+    "@dnd-kit/modifiers": "*",
+    "@dnd-kit/sortable": "*",
+    "@dnd-kit/utilities": "*",
+    "radix-ui": "*"
   },
   "dependencies": {
     "clsx": "^2",
     "tailwind-merge": "^3"
   },
   "devDependencies": {
-    "@greatapps/greatauth-ui": "0.3.7",
+    "@dnd-kit/core": "latest",
+    "@dnd-kit/modifiers": "latest",
+    "@dnd-kit/sortable": "latest",
+    "@dnd-kit/utilities": "latest",
+    "@greatapps/greatauth-ui": "^0.3.9",
     "@tanstack/react-query": "latest",
     "@tanstack/react-table": "latest",
     "@types/react": "latest",
     "@types/react-dom": "latest",
+    "radix-ui": "latest",
     "react": "^19",
     "react-dom": "^19",
     "tsup": "latest",

package/src/components/agents/agent-edit-form.tsx

@@ -0,0 +1,218 @@
+import { useEffect, useState } from "react";
+import { useUpdateAgent } from "../../hooks";
+import type { Agent } from "../../types";
+import type { GagentsHookConfig } from "../../hooks/types";
+import {
+  Button,
+  Input,
+  Label,
+  Switch,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@greatapps/greatauth-ui/ui";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { ImageCropUpload } from "@greatapps/greatauth-ui";
+
+interface AgentEditFormProps {
+  config: GagentsHookConfig;
+  agent: Agent;
+  idAccount: string | number | null;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+interface FormState {
+  title: string;
+  photo: string;
+  active: boolean;
+  delayTyping: string;
+  waitingTime: string;
+  titleError: boolean;
+}
+
+function msToSeconds(ms: number | null): string {
+  if (ms == null || ms === 0) return "";
+  return String(Math.round(ms / 1000));
+}
+
+function secondsToMs(seconds: string): number | undefined {
+  const val = parseFloat(seconds);
+  if (isNaN(val) || val <= 0) return undefined;
+  return Math.round(val * 1000);
+}
+
+function agentToFormState(agent: Agent): FormState {
+  return {
+    title: agent.title,
+    photo: agent.photo || "",
+    active: agent.active,
+    delayTyping: msToSeconds(agent.delay_typing),
+    waitingTime: msToSeconds(agent.waiting_time),
+    titleError: false,
+  };
+}
+
+export function AgentEditForm({ config, agent, idAccount, open, onOpenChange }: AgentEditFormProps) {
+  const updateAgent = useUpdateAgent(config);
+  const [form, setForm] = useState<FormState>(() => agentToFormState(agent));
+
+  useEffect(() => {
+    setForm(agentToFormState(agent));
+  }, [agent]);
+
+  function updateField<K extends keyof FormState>(key: K, value: FormState[K]) {
+    setForm((prev) => ({ ...prev, [key]: value }));
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+
+    if (!form.title.trim()) {
+      updateField("titleError", true);
+      return;
+    }
+
+    const body: Record<string, unknown> = {
+      title: form.title.trim(),
+      active: form.active,
+    };
+    if (form.photo.trim()) body.photo = form.photo.trim();
+    else body.photo = "";
+
+    const delayMs = secondsToMs(form.delayTyping);
+    if (delayMs !== undefined) body.delay_typing = delayMs;
+    else body.delay_typing = 0;
+
+    const waitingMs = secondsToMs(form.waitingTime);
+    if (waitingMs !== undefined) body.waiting_time = waitingMs;
+    else body.waiting_time = 0;
+
+    try {
+      await updateAgent.mutateAsync({ id: agent.id, body });
+      toast.success("Agente atualizado");
+      onOpenChange?.(false);
+    } catch {
+      toast.error("Erro ao atualizar agente");
+    }
+  }
+
+  const formContent = (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="flex justify-center">
+        <ImageCropUpload
+          value={form.photo || null}
+          onChange={(url) => updateField("photo", url)}
+          onRemove={() => updateField("photo", "")}
+          entityType="agents"
+          entityId={agent.id}
+          idAccount={typeof idAccount === "string" ? Number(idAccount) : (idAccount ?? 0)}
+          name={form.title || null}
+          disabled={updateAgent.isPending}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="edit-title">Nome do Agente *</Label>
+        <Input
+          id="edit-title"
+          value={form.title}
+          onChange={(e) => {
+            setForm((prev) => ({
+              ...prev,
+              title: e.target.value,
+              titleError: e.target.value.trim() ? false : prev.titleError,
+            }));
+          }}
+          placeholder="Ex: Assistente de Agendamento"
+          disabled={updateAgent.isPending}
+        />
+        {form.titleError && (
+          <p className="text-sm text-destructive">Nome é obrigatório</p>
+        )}
+      </div>
+
+      <div className="flex items-center gap-3">
+        <Switch
+          id="edit-active"
+          checked={form.active}
+          onCheckedChange={(checked) => updateField("active", checked)}
+          disabled={updateAgent.isPending}
+        />
+        <Label htmlFor="edit-active" className="cursor-pointer">
+          {form.active ? "Ativo" : "Inativo"}
+        </Label>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="edit-delay">Delay de Digitação (s)</Label>
+          <Input
+            id="edit-delay"
+            type="number"
+            value={form.delayTyping}
+            onChange={(e) => updateField("delayTyping", e.target.value)}
+            placeholder="0"
+            min="0"
+            step="0.5"
+            disabled={updateAgent.isPending}
+          />
+          <p className="text-xs text-muted-foreground">
+            Tempo de simulação de digitação
+          </p>
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="edit-waiting">Tempo de Espera (s)</Label>
+          <Input
+            id="edit-waiting"
+            type="number"
+            value={form.waitingTime}
+            onChange={(e) => updateField("waitingTime", e.target.value)}
+            placeholder="0"
+            min="0"
+            step="0.5"
+            disabled={updateAgent.isPending}
+          />
+          <p className="text-xs text-muted-foreground">
+            Espera por mensagens agrupadas
+          </p>
+        </div>
+      </div>
+
+      <DialogFooter>
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => onOpenChange?.(false)}
+          disabled={updateAgent.isPending}
+        >
+          Cancelar
+        </Button>
+        <Button type="submit" disabled={updateAgent.isPending}>
+          {updateAgent.isPending && (
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          )}
+          Salvar
+        </Button>
+      </DialogFooter>
+    </form>
+  );
+
+  if (open !== undefined && onOpenChange) {
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Editar Agente</DialogTitle>
+          </DialogHeader>
+          {formContent}
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return <div className="max-w-lg pt-4">{formContent}</div>;
+}

package/src/components/agents/agent-form-dialog.tsx

@@ -0,0 +1,177 @@
+import { useEffect, useState } from "react";
+import { useCreateAgent, useUpdateAgent } from "../../hooks";
+import type { Agent } from "../../types";
+import type { GagentsHookConfig } from "../../hooks/types";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  Button,
+  Input,
+  Textarea,
+  Label,
+} from "@greatapps/greatauth-ui/ui";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+
+interface AgentFormDialogProps {
+  config: GagentsHookConfig;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  agent?: Agent;
+}
+
+export function AgentFormDialog({
+  config,
+  open,
+  onOpenChange,
+  agent,
+}: AgentFormDialogProps) {
+  const isEditing = !!agent;
+  const createAgent = useCreateAgent(config);
+  const updateAgent = useUpdateAgent(config);
+
+  const [title, setTitle] = useState("");
+  const [prompt, setPrompt] = useState("");
+  const [photo, setPhoto] = useState("");
+  const [delayTyping, setDelayTyping] = useState("");
+  const [waitingTime, setWaitingTime] = useState("");
+
+  /* eslint-disable react-hooks/set-state-in-effect -- form state sync from props */
+  useEffect(() => {
+    if (agent) {
+      setTitle(agent.title);
+      setPrompt(agent.prompt || "");
+      setPhoto(agent.photo || "");
+      setDelayTyping(agent.delay_typing != null ? String(agent.delay_typing) : "");
+      setWaitingTime(agent.waiting_time != null ? String(agent.waiting_time) : "");
+    } else {
+      setTitle("");
+      setPrompt("");
+      setPhoto("");
+      setDelayTyping("");
+      setWaitingTime("");
+    }
+  }, [agent, open]);
+  /* eslint-enable react-hooks/set-state-in-effect */
+
+  const isPending = createAgent.isPending || updateAgent.isPending;
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!title.trim()) return;
+
+    const body: Record<string, unknown> = {
+      title: title.trim(),
+    };
+    if (prompt.trim()) body.prompt = prompt.trim();
+    if (photo.trim()) body.photo = photo.trim();
+    if (delayTyping.trim()) body.delay_typing = Number(delayTyping);
+    if (waitingTime.trim()) body.waiting_time = Number(waitingTime);
+
+    try {
+      if (isEditing) {
+        await updateAgent.mutateAsync({ id: agent.id, body });
+        toast.success("Agente atualizado");
+      } else {
+        await createAgent.mutateAsync(
+          body as { title: string; prompt?: string; photo?: string; delay_typing?: number; waiting_time?: number },
+        );
+        toast.success("Agente criado");
+      }
+      onOpenChange(false);
+    } catch {
+      toast.error(isEditing ? "Erro ao atualizar agente" : "Erro ao criar agente");
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>
+            {isEditing ? "Editar Agente" : "Novo Agente"}
+          </DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="agent-photo">Foto (URL)</Label>
+            <Input
+              id="agent-photo"
+              value={photo}
+              onChange={(e) => setPhoto(e.target.value)}
+              placeholder="https://exemplo.com/foto.jpg"
+              disabled={isPending}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="agent-title">Nome do Agente *</Label>
+            <Input
+              id="agent-title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Ex: Assistente de Agendamento"
+              required
+              disabled={isPending}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="agent-prompt">Prompt do Sistema</Label>
+            <Textarea
+              id="agent-prompt"
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              placeholder="Instruções para o agente AI..."
+              rows={6}
+              disabled={isPending}
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="agent-delay">Delay de Digitação (ms)</Label>
+              <Input
+                id="agent-delay"
+                type="number"
+                value={delayTyping}
+                onChange={(e) => setDelayTyping(e.target.value)}
+                placeholder="0"
+                min="0"
+                disabled={isPending}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="agent-waiting">Tempo de Espera (ms)</Label>
+              <Input
+                id="agent-waiting"
+                type="number"
+                value={waitingTime}
+                onChange={(e) => setWaitingTime(e.target.value)}
+                placeholder="0"
+                min="0"
+                disabled={isPending}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={isPending}
+            >
+              Cancelar
+            </Button>
+            <Button type="submit" disabled={isPending || !title.trim()}>
+              {isPending ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : null}
+              {isEditing ? "Salvar" : "Criar"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}