@greatapps/greatagents-ui 0.3.3 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/greatagents-ui",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "Shared agents UI components for Great platform",
   "type": "module",
   "main": "./dist/index.js",

package/src/client/index.ts

@@ -12,6 +12,7 @@ import type {
   Tool,
   ToolCredential,
 } from "../types";
+import type { AgentCapability, AgentCapabilitiesPayload, CapabilitiesResponse } from "../types/capabilities";
 
 export interface GagentsClientConfig {
   baseUrl: string;
@@ -248,6 +249,19 @@ export function createGagentsClient(config: GagentsClientConfig) {
         undefined,
         { provider },
       ),
+
+    // --- Capabilities ---
+    getCapabilities: (idAccount: number) =>
+      request<CapabilitiesResponse>("GET", idAccount, "capabilities"),
+
+    getAgentCapabilities: (idAccount: number, idAgent: number) =>
+      request<AgentCapability[]>("GET", idAccount, `agents/${idAgent}/capabilities`),
+
+    updateAgentCapabilities: (
+      idAccount: number,
+      idAgent: number,
+      body: AgentCapabilitiesPayload,
+    ) => request<AgentCapability[]>("PUT", idAccount, `agents/${idAgent}/capabilities`, body),
   };
 }
 

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

@@ -10,8 +10,8 @@ import {
   DialogFooter,
   Button,
   Input,
-
   Label,
+  Switch,
 } from "@greatapps/greatauth-ui/ui";
 import { Loader2 } from "lucide-react";
 import { toast } from "sonner";
@@ -23,6 +23,46 @@ interface AgentFormDialogProps {
   agent?: Agent;
 }
 
+interface FormState {
+  title: string;
+  photo: string;
+  active: boolean;
+  delayTyping: string;
+  waitingTime: string;
+  titleError: boolean;
+}
+
+function msToSeconds(ms: number | null | undefined): 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,
+  };
+}
+
+const emptyFormState: FormState = {
+  title: "",
+  photo: "",
+  active: true,
+  delayTyping: "",
+  waitingTime: "",
+  titleError: false,
+};
+
 export function AgentFormDialog({
   config,
   open,
@@ -33,39 +73,46 @@ export function AgentFormDialog({
   const createAgent = useCreateAgent(config);
   const updateAgent = useUpdateAgent(config);
 
-  const [title, setTitle] = useState("");
-  const [photo, setPhoto] = useState("");
-  const [delayTyping, setDelayTyping] = useState("");
-  const [waitingTime, setWaitingTime] = useState("");
+  const [form, setForm] = useState<FormState>(emptyFormState);
 
   /* eslint-disable react-hooks/set-state-in-effect -- form state sync from props */
   useEffect(() => {
     if (agent) {
-      setTitle(agent.title);
-      setPhoto(agent.photo || "");
-      setDelayTyping(agent.delay_typing != null ? String(agent.delay_typing) : "");
-      setWaitingTime(agent.waiting_time != null ? String(agent.waiting_time) : "");
+      setForm(agentToFormState(agent));
     } else {
-      setTitle("");
-      setPhoto("");
-      setDelayTyping("");
-      setWaitingTime("");
+      setForm(emptyFormState);
     }
   }, [agent, open]);
   /* eslint-enable react-hooks/set-state-in-effect */
 
+  function updateField<K extends keyof FormState>(key: K, value: FormState[K]) {
+    setForm((prev) => ({ ...prev, [key]: value }));
+  }
+
   const isPending = createAgent.isPending || updateAgent.isPending;
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
-    if (!title.trim()) return;
+
+    if (!form.title.trim()) {
+      updateField("titleError", true);
+      return;
+    }
 
     const body: Record<string, unknown> = {
-      title: title.trim(),
+      title: form.title.trim(),
+      active: form.active,
     };
-    if (photo.trim()) body.photo = photo.trim();
-    if (delayTyping.trim()) body.delay_typing = Number(delayTyping);
-    if (waitingTime.trim()) body.waiting_time = Number(waitingTime);
+    if (form.photo.trim()) body.photo = form.photo.trim();
+    else if (isEditing) body.photo = "";
+
+    const delayMs = secondsToMs(form.delayTyping);
+    if (delayMs !== undefined) body.delay_typing = delayMs;
+    else if (isEditing) body.delay_typing = 0;
+
+    const waitingMs = secondsToMs(form.waitingTime);
+    if (waitingMs !== undefined) body.waiting_time = waitingMs;
+    else if (isEditing) body.waiting_time = 0;
 
     try {
       if (isEditing) {
@@ -97,50 +144,83 @@ export function AgentFormDialog({
             <Input
               id="agent-photo"
               name="photo"
-              value={photo}
-              onChange={(e) => setPhoto(e.target.value)}
+              value={form.photo}
+              onChange={(e) => updateField("photo", e.target.value)}
               placeholder="https://exemplo.com/foto.jpg"
               disabled={isPending}
             />
+            <p className="text-xs text-muted-foreground">
+              URL da imagem de avatar do agente
+            </p>
           </div>
           <div className="space-y-2">
             <Label htmlFor="agent-title">Nome do Agente *</Label>
             <Input
               id="agent-title"
               name="title"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
+              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"
               required
               disabled={isPending}
             />
+            {form.titleError && (
+              <p className="text-sm text-destructive">Nome é obrigatório</p>
+            )}
           </div>
+
+          <div className="flex items-center gap-3">
+            <Switch
+              id="agent-active"
+              checked={form.active}
+              onCheckedChange={(checked) => updateField("active", checked)}
+              disabled={isPending}
+            />
+            <Label htmlFor="agent-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="agent-delay">Delay de Digitação (ms)</Label>
+              <Label htmlFor="agent-delay">Delay de Digitação (s)</Label>
               <Input
                 id="agent-delay"
                 name="delay"
                 type="number"
-                value={delayTyping}
-                onChange={(e) => setDelayTyping(e.target.value)}
+                value={form.delayTyping}
+                onChange={(e) => updateField("delayTyping", e.target.value)}
                 placeholder="0"
                 min="0"
+                step="0.5"
                 disabled={isPending}
               />
+              <p className="text-xs text-muted-foreground">
+                Tempo de simulação de digitação
+              </p>
             </div>
             <div className="space-y-2">
-              <Label htmlFor="agent-waiting">Tempo de Espera (ms)</Label>
+              <Label htmlFor="agent-waiting">Tempo de Espera (s)</Label>
               <Input
                 id="agent-waiting"
                 name="waiting"
                 type="number"
-                value={waitingTime}
-                onChange={(e) => setWaitingTime(e.target.value)}
+                value={form.waitingTime}
+                onChange={(e) => updateField("waitingTime", e.target.value)}
                 placeholder="0"
                 min="0"
+                step="0.5"
                 disabled={isPending}
               />
+              <p className="text-xs text-muted-foreground">
+                Espera por mensagens agrupadas
+              </p>
             </div>
           </div>
           <DialogFooter>
@@ -152,7 +232,7 @@ export function AgentFormDialog({
             >
               Cancelar
             </Button>
-            <Button type="submit" disabled={isPending || !title.trim()}>
+            <Button type="submit" disabled={isPending || !form.title.trim()}>
               {isPending ? (
                 <Loader2 aria-hidden="true" className="mr-2 h-4 w-4 animate-spin" />
               ) : null}

package/src/components/agents/agent-tabs.tsx

@@ -1,24 +1,46 @@
 import type { Agent } from "../../types";
 import type { GagentsHookConfig } from "../../hooks/types";
+import type { IntegrationCardData } from "../../hooks/use-integrations";
+import type { WizardIntegrationMeta } from "../capabilities/types";
+import type { ConfigOption } from "../capabilities/wizard-steps/config-step";
 import { AgentToolsList } from "./agent-tools-list";
 import { AgentObjectivesList } from "./agent-objectives-list";
 import { AgentPromptEditor } from "./agent-prompt-editor";
 import { AgentConversationsPanel } from "../conversations/agent-conversations-panel";
+import { AgentCapabilitiesPage } from "../../pages/agent-capabilities-page";
 import {
   Tabs,
   TabsList,
   TabsTrigger,
   TabsContent,
 } from "@greatapps/greatauth-ui/ui";
-import { Wrench, Target, FileText, MessageCircle } from "lucide-react";
+import { Wrench, Target, FileText, MessageCircle, Blocks } from "lucide-react";
 
 interface AgentTabsProps {
   agent: Agent;
   config: GagentsHookConfig;
   renderChatLink?: (inboxId: number) => React.ReactNode;
+  /** Required for the Capacidades tab — gagents API URL for OAuth flows and advanced features. Falls back to config.baseUrl. */
+  gagentsApiUrl?: string;
+  /** Resolve wizard metadata for a given integration card. */
+  resolveWizardMeta?: (card: IntegrationCardData) => WizardIntegrationMeta;
+  /** Callback to load config options after OAuth completes. */
+  loadConfigOptions?: (credentialId: number) => Promise<ConfigOption[]>;
+  /** Called after wizard completes successfully. */
+  onWizardComplete?: () => void;
 }
 
-export function AgentTabs({ agent, config, renderChatLink }: AgentTabsProps) {
+export function AgentTabs({
+  agent,
+  config,
+  renderChatLink,
+  gagentsApiUrl,
+  resolveWizardMeta,
+  loadConfigOptions,
+  onWizardComplete,
+}: AgentTabsProps) {
+  const apiUrl = gagentsApiUrl || config.baseUrl;
+
   return (
     <Tabs defaultValue="prompt">
       <TabsList>
@@ -34,6 +56,10 @@ export function AgentTabs({ agent, config, renderChatLink }: AgentTabsProps) {
           <Wrench aria-hidden="true" className="h-3.5 w-3.5" />
           Ferramentas
         </TabsTrigger>
+        <TabsTrigger value="capacidades" className="flex items-center gap-1.5">
+          <Blocks aria-hidden="true" className="h-3.5 w-3.5" />
+          Capacidades
+        </TabsTrigger>
         <TabsTrigger value="conversas" className="flex items-center gap-1.5">
           <MessageCircle aria-hidden="true" className="h-3.5 w-3.5" />
           Conversas
@@ -52,6 +78,17 @@ export function AgentTabs({ agent, config, renderChatLink }: AgentTabsProps) {
         <AgentToolsList agent={agent} config={config} />
       </TabsContent>
 
+      <TabsContent value="capacidades" className="mt-4">
+        <AgentCapabilitiesPage
+          config={config}
+          agentId={agent.id}
+          gagentsApiUrl={apiUrl}
+          resolveWizardMeta={resolveWizardMeta}
+          loadConfigOptions={loadConfigOptions}
+          onWizardComplete={onWizardComplete}
+        />
+      </TabsContent>
+
       <TabsContent value="conversas" className="mt-4">
         <AgentConversationsPanel
           agent={agent}

package/src/components/capabilities/advanced-tab.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useState } from "react";
+import type { GagentsHookConfig } from "../../hooks/types";
+import { useToolCredentials } from "../../hooks";
+import { ToolsTable } from "../tools/tools-table";
+import { ToolCredentialsForm } from "../tools/tool-credentials-form";
+import { ToolFormDialog } from "../tools/tool-form-dialog";
+import type { Tool } from "../../types";
+import { Info } from "lucide-react";
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface AdvancedTabProps {
+  config: GagentsHookConfig;
+  agentId: number;
+  gagentsApiUrl: string;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function AdvancedTab({ config, agentId, gagentsApiUrl }: AdvancedTabProps) {
+  const { data: credentialsData, isLoading: isLoadingCredentials } =
+    useToolCredentials(config);
+  const credentials = credentialsData?.data ?? [];
+
+  const [editingTool, setEditingTool] = useState<Tool | null>(null);
+  const [showToolForm, setShowToolForm] = useState(false);
+
+  function handleEditTool(tool: Tool) {
+    setEditingTool(tool);
+    setShowToolForm(true);
+  }
+
+  function handleToolFormOpenChange(open: boolean) {
+    setShowToolForm(open);
+    if (!open) setEditingTool(null);
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Info banner */}
+      <div className="flex items-start gap-3 rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-900 dark:bg-blue-950/30">
+        <Info className="mt-0.5 h-4 w-4 shrink-0 text-blue-600 dark:text-blue-400" />
+        <p className="text-sm text-blue-800 dark:text-blue-300">
+          Use as abas <strong>Capacidades</strong> e <strong>Integrações</strong> para
+          configuração simplificada. Esta aba oferece controlo manual avançado sobre
+          ferramentas e credenciais.
+        </p>
+      </div>
+
+      {/* Ferramentas section */}
+      <section className="space-y-3">
+        <h3 className="text-sm font-medium">Ferramentas</h3>
+        <ToolsTable onEdit={handleEditTool} config={config} />
+      </section>
+
+      {/* Credenciais section */}
+      <section className="space-y-3">
+        <h3 className="text-sm font-medium">Credenciais</h3>
+        <ToolCredentialsForm
+          credentials={credentials}
+          isLoading={isLoadingCredentials}
+          config={config}
+          gagentsApiUrl={gagentsApiUrl}
+        />
+      </section>
+
+      {/* Tool edit dialog */}
+      <ToolFormDialog
+        open={showToolForm}
+        onOpenChange={handleToolFormOpenChange}
+        tool={editingTool ?? undefined}
+        config={config}
+      />
+    </div>
+  );
+}