@greatapps/greatagents-ui 0.3.21 → 0.3.23

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

@@ -1,7 +1,8 @@
 import type { Agent } from "../../types";
 import type { GagentsHookConfig } from "../../hooks/types";
 import { AgentObjectivesList } from "./agent-objectives-list";
-import { AgentPromptEditor } from "./agent-prompt-editor";
+import { AgentDefinitionEditor } from "./agent-definition-editor";
+import { AgentRevisionTab } from "./agent-revision-tab";
 import { AgentConversationsPanel } from "../conversations/agent-conversations-panel";
 import { CapabilitiesTab } from "../capabilities/capabilities-tab";
 import { IntegrationsTab } from "../capabilities/integrations-tab";
@@ -11,7 +12,7 @@ import {
   TabsTrigger,
   TabsContent,
 } from "@greatapps/greatauth-ui/ui";
-import { Target, FileText, MessageCircle, Blocks, Plug } from "lucide-react";
+import { Target, Settings2, MessageCircle, Blocks, Plug, History } from "lucide-react";
 
 interface AgentTabsProps {
   agent: Agent;
@@ -25,11 +26,11 @@ export function AgentTabs({
   renderChatLink,
 }: AgentTabsProps) {
   return (
-    <Tabs defaultValue="prompt">
+    <Tabs defaultValue="definicao">
       <TabsList>
-        <TabsTrigger value="prompt" className="flex items-center gap-1.5">
-          <FileText aria-hidden="true" className="h-3.5 w-3.5" />
-          Prompt
+        <TabsTrigger value="definicao" className="flex items-center gap-1.5">
+          <Settings2 aria-hidden="true" className="h-3.5 w-3.5" />
+          Definição
         </TabsTrigger>
         <TabsTrigger value="objetivos" className="flex items-center gap-1.5">
           <Target aria-hidden="true" className="h-3.5 w-3.5" />
@@ -47,10 +48,14 @@ export function AgentTabs({
           <MessageCircle aria-hidden="true" className="h-3.5 w-3.5" />
           Conversas
         </TabsTrigger>
+        <TabsTrigger value="revisao" className="flex items-center gap-1.5">
+          <History aria-hidden="true" className="h-3.5 w-3.5" />
+          Revisão
+        </TabsTrigger>
       </TabsList>
 
-      <TabsContent value="prompt" className="mt-4">
-        <AgentPromptEditor agent={agent} config={config} />
+      <TabsContent value="definicao" className="mt-4">
+        <AgentDefinitionEditor agent={agent} config={config} />
       </TabsContent>
 
       <TabsContent value="objetivos" className="mt-4">
@@ -72,6 +77,10 @@ export function AgentTabs({
           renderChatLink={renderChatLink}
         />
       </TabsContent>
+
+      <TabsContent value="revisao" className="mt-4">
+        <AgentRevisionTab agent={agent} config={config} />
+      </TabsContent>
     </Tabs>
   );
 }

package/src/components/agents/conversation-flow-editor.tsx

@@ -0,0 +1,180 @@
+import { useCallback, useRef, useState } from "react";
+import type { ConversationFlowStep } from "../../types";
+import { Button, Input } from "@greatapps/greatauth-ui/ui";
+import {
+  Sortable,
+  SortableContent,
+  SortableItem,
+  SortableItemHandle,
+  SortableOverlay,
+} from "../ui/sortable";
+import { GripVertical, Plus, Trash2 } from "lucide-react";
+import { cn } from "../../lib";
+
+interface StepWithKey extends ConversationFlowStep {
+  _key: number;
+}
+
+interface ConversationFlowEditorProps {
+  steps: ConversationFlowStep[];
+  onChange: (steps: ConversationFlowStep[]) => void;
+  disabled?: boolean;
+}
+
+function renumber(steps: ConversationFlowStep[]): ConversationFlowStep[] {
+  return steps.map((s, i) => ({ ...s, order: i + 1 }));
+}
+
+function stripKeys(steps: StepWithKey[]): ConversationFlowStep[] {
+  return steps.map(({ _key, ...rest }) => rest);
+}
+
+export function ConversationFlowEditor({
+  steps,
+  onChange,
+}: ConversationFlowEditorProps) {
+  const nextKey = useRef(steps.length + 1);
+
+  const [internal, setInternal] = useState<StepWithKey[]>(() =>
+    steps.map((s, i) => ({ ...s, _key: i + 1 })),
+  );
+
+  const sync = useCallback(
+    (next: StepWithKey[]) => {
+      const renumbered = renumber(next).map((s, i) => ({
+        ...s,
+        _key: next[i]._key,
+      })) as StepWithKey[];
+      setInternal(renumbered);
+      onChange(stripKeys(renumbered));
+    },
+    [onChange],
+  );
+
+  function handleAdd() {
+    nextKey.current += 1;
+    const newStep: StepWithKey = {
+      order: internal.length + 1,
+      instruction: "",
+      example: null,
+      _key: nextKey.current,
+    };
+    sync([...internal, newStep]);
+  }
+
+  function handleRemove(key: number) {
+    sync(internal.filter((s) => s._key !== key));
+  }
+
+  function handleFieldChange(
+    key: number,
+    field: "instruction" | "example",
+    value: string,
+  ) {
+    const next = internal.map((s) => {
+      if (s._key !== key) return s;
+      if (field === "example") {
+        return { ...s, example: value || null };
+      }
+      return { ...s, [field]: value };
+    });
+    sync(next);
+  }
+
+  function handleReorder(newItems: StepWithKey[]) {
+    sync(newItems);
+  }
+
+  return (
+    <div className="space-y-3">
+      {internal.length === 0 ? (
+        <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
+          <p className="text-sm text-muted-foreground">
+            Nenhuma etapa definida. Adicione a primeira etapa do fluxo de
+            conversa.
+          </p>
+        </div>
+      ) : (
+        <Sortable
+          value={internal}
+          onValueChange={handleReorder}
+          getItemValue={(item) => item._key}
+        >
+          <SortableContent className="space-y-2">
+            {internal.map((step) => (
+              <SortableItem
+                key={step._key}
+                value={step._key}
+                className="flex items-center gap-2 rounded-lg border bg-card p-2"
+              >
+                <SortableItemHandle className="shrink-0 cursor-grab text-muted-foreground hover:text-foreground">
+                  <GripVertical aria-hidden="true" className="h-4 w-4" />
+                </SortableItemHandle>
+
+                <span className="shrink-0 text-xs font-medium text-muted-foreground tabular-nums w-6 text-right">
+                  {step.order}.
+                </span>
+
+                <Input
+                  value={step.instruction}
+                  onChange={(e) =>
+                    handleFieldChange(step._key, "instruction", e.target.value)
+                  }
+                  placeholder="Instrução (obrigatório)"
+                  className="flex-1 min-w-0"
+                  required
+                />
+
+                <Input
+                  value={step.example ?? ""}
+                  onChange={(e) =>
+                    handleFieldChange(step._key, "example", e.target.value)
+                  }
+                  placeholder="Exemplo (opcional)"
+                  className="flex-1 min-w-0"
+                />
+
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  aria-label="Remover etapa"
+                  className={cn(
+                    "shrink-0 text-muted-foreground hover:text-destructive",
+                  )}
+                  onClick={() => handleRemove(step._key)}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </SortableItem>
+            ))}
+          </SortableContent>
+          <SortableOverlay>
+            {({ value }) => {
+              const step = internal.find((s) => s._key === value);
+              return (
+                <div className="flex items-center gap-2 rounded-lg border bg-card p-2 shadow-lg">
+                  <GripVertical
+                    aria-hidden="true"
+                    className="h-4 w-4 text-muted-foreground"
+                  />
+                  <span className="text-xs font-medium text-muted-foreground">
+                    {step?.order}.
+                  </span>
+                  <span className="text-sm truncate">
+                    {step?.instruction || "Etapa sem instrução"}
+                  </span>
+                </div>
+              );
+            }}
+          </SortableOverlay>
+        </Sortable>
+      )}
+
+      <Button type="button" variant="outline" size="sm" onClick={handleAdd}>
+        <Plus className="mr-2 h-4 w-4" />
+        Adicionar etapa
+      </Button>
+    </div>
+  );
+}

package/src/hooks/use-agents.ts

@@ -34,7 +34,6 @@ export function useCreateAgent(config: GagentsHookConfig) {
   return useMutation({
     mutationFn: (body: {
       title: string;
-      prompt?: string;
       photo?: string;
       delay_typing?: number;
       waiting_time?: number;
@@ -57,7 +56,13 @@ export function useUpdateAgent(config: GagentsHookConfig) {
       id: number;
       body: {
         title?: string;
-        prompt?: string;
+        identity?: string | null;
+        mission?: string | null;
+        tone_style_format?: string | null;
+        rules?: string | null;
+        conversation_flow?: string | null;
+        context?: string | null;
+        change_notes?: string;
         photo?: string;
         delay_typing?: number;
         waiting_time?: number;

package/src/hooks/use-objectives.ts

@@ -26,7 +26,10 @@ export function useCreateObjective(config: GagentsHookConfig) {
       body: {
         title: string;
         slug?: string;
-        prompt?: string | null;
+        instruction?: string | null;
+        description?: string | null;
+        conversation_flow?: string | null;
+        rules?: string | null;
         order?: number;
         active?: boolean;
       };
@@ -52,7 +55,10 @@ export function useUpdateObjective(config: GagentsHookConfig) {
       body: Partial<{
         title: string;
         slug: string;
-        prompt: string | null;
+        instruction: string | null;
+        description: string | null;
+        conversation_flow: string | null;
+        rules: string | null;
         order: number;
         active: boolean;
       }>;

package/src/index.ts

@@ -19,6 +19,7 @@ export type {
   CapabilitiesResponse,
   AgentCapability,
   AgentCapabilitiesPayload,
+  ConversationFlowStep,
 } from "./types";
 
 // Client
@@ -36,7 +37,9 @@ export { AgentsTable } from "./components/agents/agents-table";
 export { AgentFormDialog } from "./components/agents/agent-form-dialog";
 export { AgentEditForm } from "./components/agents/agent-edit-form";
 export { AgentTabs } from "./components/agents/agent-tabs";
-export { AgentPromptEditor } from "./components/agents/agent-prompt-editor";
+export { AgentDefinitionEditor } from "./components/agents/agent-definition-editor";
+export { AgentRevisionTab } from "./components/agents/agent-revision-tab";
+export { ConversationFlowEditor } from "./components/agents/conversation-flow-editor";
 export { AgentObjectivesList } from "./components/agents/agent-objectives-list";
 export { AgentToolsList } from "./components/agents/agent-tools-list";
 export { ToolsTable } from "./components/tools/tools-table";

package/src/types/index.ts

@@ -14,19 +14,34 @@ export interface Agent {
   openai_assistant_id: string | null;
   delay_typing: number | null;
   waiting_time: number | null;
+  identity: string | null;
+  mission: string | null;
+  tone_style_format: string | null;
+  rules: string | null;
+  conversation_flow: string | null;
+  context: string | null;
   active: boolean;
   deleted: number;
   datetime_add: string;
   datetime_alt: string | null;
 }
 
+export interface ConversationFlowStep {
+  order: number;
+  instruction: string;
+  example: string | null;
+}
+
 export interface Objective {
   id: number;
   id_account: number;
   id_agent: number;
   title: string;
   slug: string | null;
-  prompt: string | null;
+  instruction: string | null;
+  description: string | null;
+  conversation_flow: string | null;
+  rules: string | null;
   order: number;
   active: boolean;
   deleted: number;