@greatapps/greatagents-ui 0.3.21 → 0.3.22

package/package.json

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

package/src/client/index.ts

@@ -89,8 +89,8 @@ export function createGagentsClient(config: GagentsClientConfig) {
       idAccount: number,
       id: number,
       body: Partial<
-        Pick<Agent, "title" | "photo" | "delay_typing" | "waiting_time" | "active">
-      > & { prompt?: string; change_notes?: string },
+        Pick<Agent, "title" | "photo" | "delay_typing" | "waiting_time" | "active" | "identity" | "mission" | "tone_style_format" | "rules" | "conversation_flow" | "context">
+      > & { change_notes?: string },
     ) => request<Agent>("PUT", idAccount, `agents/${id}`, body),
 
     deleteAgent: (idAccount: number, id: number) =>
@@ -154,14 +154,14 @@ export function createGagentsClient(config: GagentsClientConfig) {
       idAccount: number,
       idAgent: number,
       body: Pick<Objective, "title"> &
-        Partial<Pick<Objective, "slug" | "prompt" | "order" | "active">>,
+        Partial<Pick<Objective, "slug" | "instruction" | "description" | "conversation_flow" | "rules" | "order" | "active">>,
     ) => request<Objective>("POST", idAccount, `agents/${idAgent}/objectives`, body),
 
     updateObjective: (
       idAccount: number,
       idAgent: number,
       id: number,
-      body: Partial<Pick<Objective, "title" | "slug" | "prompt" | "order" | "active">>,
+      body: Partial<Pick<Objective, "title" | "slug" | "instruction" | "description" | "conversation_flow" | "rules" | "order" | "active">>,
     ) => request<Objective>("PUT", idAccount, `agents/${idAgent}/objectives/${id}`, body),
 
     deleteObjective: (idAccount: number, idAgent: number, id: number) =>

package/src/components/agents/agent-definition-editor.tsx

@@ -0,0 +1,305 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+import type { Agent, ConversationFlowStep } from "../../types";
+import type { GagentsHookConfig } from "../../hooks/types";
+import { useUpdateAgent } from "../../hooks";
+import { Button, Input, Label } from "@greatapps/greatauth-ui/ui";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { ConversationFlowEditor } from "./conversation-flow-editor";
+
+// ---------------------------------------------------------------------------
+// Section config
+// ---------------------------------------------------------------------------
+
+interface SectionDef {
+  key: "identity" | "mission" | "tone_style_format" | "rules" | "conversation_flow" | "context";
+  label: string;
+  helper: string;
+  required?: boolean;
+  field: keyof Agent;
+  type: "textarea" | "conversation_flow";
+}
+
+const SECTIONS: SectionDef[] = [
+  {
+    key: "identity",
+    label: "Identidade",
+    helper: "Descreva quem é o agente, o seu nome e personalidade",
+    required: true,
+    field: "identity",
+    type: "textarea",
+  },
+  {
+    key: "mission",
+    label: "Missão",
+    helper: "Qual é a missão principal deste agente",
+    required: true,
+    field: "mission",
+    type: "textarea",
+  },
+  {
+    key: "tone_style_format",
+    label: "Tom, Estilo & Formato",
+    helper: "Defina como o agente comunica e formata as respostas",
+    required: false,
+    field: "tone_style_format",
+    type: "textarea",
+  },
+  {
+    key: "rules",
+    label: "Regras",
+    helper: "Limites, restrições e comportamentos obrigatórios",
+    required: false,
+    field: "rules",
+    type: "textarea",
+  },
+  {
+    key: "conversation_flow",
+    label: "Fluxo de Conversa",
+    helper: "Etapas que o agente segue no início de cada conversa",
+    required: false,
+    field: "conversation_flow",
+    type: "conversation_flow",
+  },
+  {
+    key: "context",
+    label: "Contexto",
+    helper: "Informações adicionais que o agente deve saber",
+    required: false,
+    field: "context",
+    type: "textarea",
+  },
+];
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function parseConversationFlow(raw: string | null | undefined): ConversationFlowStep[] {
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw);
+    if (Array.isArray(parsed)) return parsed;
+    return [];
+  } catch {
+    return [];
+  }
+}
+
+function computeTotals(fields: Record<string, string>, steps: ConversationFlowStep[]) {
+  const textChars = Object.values(fields).reduce((sum, v) => sum + v.length, 0);
+  const flowChars = JSON.stringify(steps).length;
+  const total = textChars + flowChars;
+  return { chars: total, tokens: Math.ceil(total / 4) };
+}
+
+// ---------------------------------------------------------------------------
+// Auto-resize textarea component
+// ---------------------------------------------------------------------------
+
+function AutoTextarea({
+  value,
+  onChange,
+  disabled,
+  placeholder,
+  ariaLabel,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  ariaLabel?: string;
+}) {
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  const autoResize = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.max(120, el.scrollHeight)}px`;
+  }, []);
+
+  useEffect(() => {
+    autoResize();
+  }, [value, autoResize]);
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === "Tab") {
+      e.preventDefault();
+      const el = e.currentTarget;
+      const start = el.selectionStart;
+      const end = el.selectionEnd;
+      const newValue = el.value.substring(0, start) + "  " + el.value.substring(end);
+      onChange(newValue);
+      requestAnimationFrame(() => {
+        el.selectionStart = el.selectionEnd = start + 2;
+      });
+    }
+  }
+
+  return (
+    <textarea
+      ref={ref}
+      aria-label={ariaLabel}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      onKeyDown={handleKeyDown}
+      placeholder={placeholder}
+      disabled={disabled}
+      className="w-full resize-none rounded-lg border bg-background p-3 text-sm leading-relaxed focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
+      style={{ minHeight: "120px" }}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// AgentDefinitionEditor
+// ---------------------------------------------------------------------------
+
+interface AgentDefinitionEditorProps {
+  agent: Agent;
+  config: GagentsHookConfig;
+}
+
+export function AgentDefinitionEditor({ agent, config }: AgentDefinitionEditorProps) {
+  const updateAgent = useUpdateAgent(config);
+
+  // Track agent ID to reset state on agent switch
+  const [trackedAgentId, setTrackedAgentId] = useState(agent.id);
+
+  // Text field state
+  const [fields, setFields] = useState<Record<string, string>>(() => ({
+    identity: agent.identity ?? "",
+    mission: agent.mission ?? "",
+    tone_style_format: agent.tone_style_format ?? "",
+    rules: agent.rules ?? "",
+    context: agent.context ?? "",
+  }));
+
+  // Conversation flow state
+  const [conversationFlowSteps, setConversationFlowSteps] = useState<ConversationFlowStep[]>(
+    () => parseConversationFlow(agent.conversation_flow),
+  );
+
+  const [changeNotes, setChangeNotes] = useState("");
+
+  // Reset state when agent changes
+  if (trackedAgentId !== agent.id) {
+    setTrackedAgentId(agent.id);
+    setFields({
+      identity: agent.identity ?? "",
+      mission: agent.mission ?? "",
+      tone_style_format: agent.tone_style_format ?? "",
+      rules: agent.rules ?? "",
+      context: agent.context ?? "",
+    });
+    setConversationFlowSteps(parseConversationFlow(agent.conversation_flow));
+    setChangeNotes("");
+  }
+
+  function updateField(key: string, value: string) {
+    setFields((prev) => ({ ...prev, [key]: value }));
+  }
+
+  const { chars, tokens } = computeTotals(fields, conversationFlowSteps);
+
+  async function handleSave() {
+    if (!fields.identity.trim() || !fields.mission.trim()) {
+      toast.error("Identidade e Missão são campos obrigatórios");
+      return;
+    }
+
+    const body: Record<string, unknown> = {
+      identity: fields.identity.trim(),
+      mission: fields.mission.trim(),
+      tone_style_format: fields.tone_style_format.trim() || null,
+      rules: fields.rules.trim() || null,
+      conversation_flow: conversationFlowSteps.length > 0
+        ? JSON.stringify(conversationFlowSteps)
+        : null,
+      context: fields.context.trim() || null,
+    };
+
+    if (changeNotes.trim()) {
+      body.change_notes = changeNotes.trim();
+    }
+
+    try {
+      await updateAgent.mutateAsync({ id: agent.id, body });
+      setChangeNotes("");
+      toast.success("Definição do agente salva com sucesso");
+    } catch {
+      toast.error("Erro ao salvar definição do agente");
+    }
+  }
+
+  return (
+    <div className="space-y-6 p-4">
+      {/* Sections */}
+      {SECTIONS.map((section) => (
+        <div key={section.key} className="space-y-2">
+          <Label className="text-sm font-medium">
+            {section.label}
+            {section.required && <span className="ml-0.5 text-destructive">*</span>}
+          </Label>
+          <p className="text-xs text-muted-foreground">{section.helper}</p>
+
+          {section.type === "textarea" ? (
+            <AutoTextarea
+              value={fields[section.key] ?? ""}
+              onChange={(v) => updateField(section.key, v)}
+              disabled={updateAgent.isPending}
+              placeholder={`${section.label}...`}
+              ariaLabel={section.label}
+            />
+          ) : (
+            <ConversationFlowEditor
+              steps={conversationFlowSteps}
+              onChange={setConversationFlowSteps}
+              disabled={updateAgent.isPending}
+            />
+          )}
+        </div>
+      ))}
+
+      {/* Character count + token estimate */}
+      <div className="flex items-center gap-3 text-xs text-muted-foreground">
+        <span className="tabular-nums">{chars.toLocaleString("pt-BR")} caracteres</span>
+        <span>·</span>
+        <span className="tabular-nums">~{tokens.toLocaleString("pt-BR")} tokens</span>
+      </div>
+
+      {/* Footer: change notes + save */}
+      <div className="flex items-center gap-3">
+        <Input
+          aria-label="Notas da alteração"
+          name="changeNotes"
+          value={changeNotes}
+          onChange={(e) => setChangeNotes(e.target.value)}
+          placeholder="O que mudou? (opcional)"
+          disabled={updateAgent.isPending}
+          className="flex-1"
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              handleSave();
+            }
+          }}
+        />
+        <Button
+          onClick={handleSave}
+          disabled={
+            updateAgent.isPending ||
+            !fields.identity.trim() ||
+            !fields.mission.trim()
+          }
+        >
+          {updateAgent.isPending && (
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          )}
+          Salvar
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import type { Agent, Objective } from "../../types";
+import type { Agent, Objective, ConversationFlowStep } from "../../types";
 import type { GagentsHookConfig } from "../../hooks/types";
 import {
   useObjectives,
@@ -36,6 +36,7 @@ import {
   SortableItemHandle,
   SortableOverlay,
 } from "../ui/sortable";
+import { ConversationFlowEditor } from "./conversation-flow-editor";
 import { Trash2, Target, Pencil, Plus, GripVertical } from "lucide-react";
 import { toast } from "sonner";
 
@@ -57,28 +58,12 @@ interface ObjectiveFormState {
   title: string;
   slug: string;
   instruction: string;
-  prompt: string;
+  description: string;
+  conversation_flow: ConversationFlowStep[];
+  rules: string;
 }
 
-const EMPTY_FORM: ObjectiveFormState = { title: "", slug: "", instruction: "", prompt: "" };
-
-/** Split a stored prompt into instruction (first line) and body (rest). */
-function splitPrompt(prompt: string | null | undefined): { instruction: string; body: string } {
-  if (!prompt) return { instruction: "", body: "" };
-  const idx = prompt.indexOf("\n");
-  if (idx === -1) return { instruction: prompt.trim(), body: "" };
-  return { instruction: prompt.slice(0, idx).trim(), body: prompt.slice(idx + 1).trim() };
-}
-
-/** Merge instruction + body into a single prompt string. */
-function mergePrompt(instruction: string, body: string): string {
-  const i = instruction.trim();
-  const b = body.trim();
-  if (!i && !b) return "";
-  if (!b) return i;
-  if (!i) return b;
-  return `${i}\n${b}`;
-}
+const EMPTY_FORM: ObjectiveFormState = { title: "", slug: "", instruction: "", description: "", conversation_flow: [], rules: "" };
 
 export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps) {
   const { data: objectivesData, isLoading } = useObjectives(config, agent.id);
@@ -123,12 +108,17 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
 
   function openEdit(objective: Objective) {
     setEditTarget(objective);
-    const { instruction, body } = splitPrompt(objective.prompt);
+    let parsedFlow: ConversationFlowStep[] = [];
+    if (objective.conversation_flow) {
+      try { parsedFlow = JSON.parse(objective.conversation_flow); } catch { /* invalid JSON */ }
+    }
     setForm({
       title: objective.title,
       slug: objective.slug || "",
-      instruction,
-      prompt: body,
+      instruction: objective.instruction || "",
+      description: objective.description || "",
+      conversation_flow: parsedFlow,
+      rules: objective.rules || "",
     });
     setSlugManual(true);
     setFormOpen(true);
@@ -138,33 +128,32 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
     if (!form.title.trim()) return;
 
     const effectiveSlug = form.slug.trim() || slugify(form.title);
-    const mergedPrompt = mergePrompt(form.instruction, form.prompt) || null;
     const nextOrder =
       sortedObjectives.length > 0
         ? Math.max(...sortedObjectives.map((o) => o.order)) + 1
         : 1;
 
     try {
+      const bodyFields = {
+        title: form.title.trim(),
+        slug: effectiveSlug,
+        instruction: form.instruction.trim() || null,
+        description: form.description.trim() || null,
+        conversation_flow: form.conversation_flow.length > 0 ? JSON.stringify(form.conversation_flow) : null,
+        rules: form.rules.trim() || null,
+      };
+
       if (editTarget) {
         await updateMutation.mutateAsync({
           idAgent: agent.id,
           id: editTarget.id,
-          body: {
-            title: form.title.trim(),
-            slug: effectiveSlug,
-            prompt: mergedPrompt,
-          },
+          body: bodyFields,
         });
         toast.success("Objetivo atualizado");
       } else {
         await createMutation.mutateAsync({
           idAgent: agent.id,
-          body: {
-            title: form.title.trim(),
-            slug: effectiveSlug,
-            prompt: mergedPrompt,
-            order: nextOrder,
-          },
+          body: { ...bodyFields, order: nextOrder },
         });
         toast.success("Objetivo criado");
       }
@@ -274,23 +263,20 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
                       </Badge>
                     )}
                   </div>
-                  {objective.prompt && (() => {
-                    const { instruction, body } = splitPrompt(objective.prompt);
-                    return (
-                      <div className="space-y-0.5">
-                        {instruction && (
-                          <p className="text-xs font-medium text-muted-foreground">
-                            Quando: {instruction}
-                          </p>
-                        )}
-                        {body && (
-                          <p className="line-clamp-1 text-xs text-muted-foreground">
-                            {body}
-                          </p>
-                        )}
-                      </div>
-                    );
-                  })()}
+                  {(objective.instruction || objective.description) && (
+                    <div className="space-y-0.5">
+                      {objective.instruction && (
+                        <p className="text-xs font-medium text-muted-foreground">
+                          Quando: {objective.instruction}
+                        </p>
+                      )}
+                      {objective.description && (
+                        <p className="line-clamp-1 text-xs text-muted-foreground">
+                          {objective.description}
+                        </p>
+                      )}
+                    </div>
+                  )}
                 </div>
 
                 <Switch
@@ -395,24 +381,52 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
                 placeholder="Ex: Quando o utilizador quer agendar uma consulta"
               />
               <p className="text-xs text-muted-foreground">
-                Instrução curta que diz ao agente QUANDO ativar este objetivo. Aparece na secção [SKILLS] do prompt.
+                Instrução curta que diz ao agente QUANDO ativar este objetivo. Aparece na secção [OBJETIVOS] do prompt.
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="objective-description">Descrição</Label>
+              <Textarea
+                id="objective-description"
+                name="description"
+                value={form.description}
+                onChange={(e) =>
+                  setForm((f) => ({ ...f, description: e.target.value }))
+                }
+                placeholder="Descreva o propósito deste objectivo..."
+                rows={3}
+              />
+              <p className="text-xs text-muted-foreground">
+                Missão e propósito deste objectivo — o que o agente deve alcançar.
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Fluxo de Conversa</Label>
+              <ConversationFlowEditor
+                steps={form.conversation_flow}
+                onChange={(steps) => setForm((f) => ({ ...f, conversation_flow: steps }))}
+              />
+              <p className="text-xs text-muted-foreground">
+                Etapas que o agente segue quando este objectivo é activado.
               </p>
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="objective-prompt">Instruções detalhadas</Label>
+              <Label htmlFor="objective-rules">Regras</Label>
               <Textarea
-                id="objective-prompt"
-                name="prompt"
-                value={form.prompt}
+                id="objective-rules"
+                name="rules"
+                value={form.rules}
                 onChange={(e) =>
-                  setForm((f) => ({ ...f, prompt: e.target.value }))
+                  setForm((f) => ({ ...f, rules: e.target.value }))
                 }
-                placeholder="Instruções detalhadas que o agente seguirá quando este objetivo for ativado..."
-                rows={6}
+                placeholder="Regras específicas deste objectivo..."
+                rows={3}
               />
               <p className="text-xs text-muted-foreground">
-                Passos, regras e contexto detalhado para o agente seguir quando este objetivo está ativo.
+                Restrições e limites específicos quando este objectivo está activo.
               </p>
             </div>
           </div>