Commit inicial - upload de todos os arquivos da pasta

2026-01-04 16:14:31 -03:00
commit e3ed1a734b
310 changed files with 62749 additions and 0 deletions
--- a/frontend/app/agents/workflows/nodes/components/message/MessageForm.tsx
+++ b/frontend/app/agents/workflows/nodes/components/message/MessageForm.tsx
@@ -0,0 +1,292 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/nodes/components/message/MessageForm.tsx        │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+/* eslint-disable jsx-a11y/alt-text */
+import { useEdges, useNodes } from "@xyflow/react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Agent } from "@/types/agent";
+import { listAgents } from "@/services/agentService";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Badge } from "@/components/ui/badge";
+import { 
+  MessageSquare, 
+  Save, 
+  Text, 
+  Image, 
+  File, 
+  Video,
+  AlertCircle
+} from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { 
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function MessageForm({
+  selectedNode,
+  handleUpdateNode,
+  setEdges,
+  setIsOpen,
+  setSelectedNode,
+}: {
+  selectedNode: any;
+  handleUpdateNode: any;
+  setEdges: any;
+  setIsOpen: any;
+  setSelectedNode: any;
+}) {
+  const [node, setNode] = useState(selectedNode);
+  const [messageType, setMessageType] = useState("text");
+  const [content, setContent] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [allAgents, setAllAgents] = useState<Agent[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const edges = useEdges();
+  const nodes = useNodes();
+
+  const connectedNode = useMemo(() => {
+    const edge = edges.find((edge) => edge.source === selectedNode.id);
+    if (!edge) return null;
+    const node = nodes.find((node) => node.id === edge.target);
+    return node || null;
+  }, [edges, nodes, selectedNode.id]);
+  
+  const user = typeof window !== "undefined" ? JSON.parse(localStorage.getItem("user") || '{}') : {};
+  const clientId = user?.client_id || "";
+  
+  const currentAgent = typeof window !== "undefined" ? 
+    JSON.parse(localStorage.getItem("current_workflow_agent") || '{}') : {};
+  const currentAgentId = currentAgent?.id;
+
+  useEffect(() => {
+    if (selectedNode) {
+      setNode(selectedNode);
+      setMessageType(selectedNode.data.message?.type || "text");
+      setContent(selectedNode.data.message?.content || "");
+    }
+  }, [selectedNode]);
+
+  useEffect(() => {
+    if (!clientId) return;
+    setLoading(true);
+    listAgents(clientId)
+      .then((res) => {
+        const filteredAgents = res.data.filter((agent: Agent) => agent.id !== currentAgentId);
+        setAllAgents(filteredAgents);
+        setAgents(filteredAgents);
+      })
+      .catch((error) => console.error("Error loading agents:", error))
+      .finally(() => setLoading(false));
+  }, [clientId, currentAgentId]);
+
+  useEffect(() => {
+    if (searchTerm.trim() === "") {
+      setAgents(allAgents);
+    } else {
+      const filtered = allAgents.filter((agent) => 
+        agent.name.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+      setAgents(filtered);
+    }
+  }, [searchTerm, allAgents]);
+
+  const handleDeleteEdge = useCallback(() => {
+    const id = edges.find((edge: any) => edge.source === selectedNode.id)?.id;
+    setEdges((edges: any) => {
+      const left = edges.filter((edge: any) => edge.id !== id);
+      return left;
+    });
+  }, [nodes, edges, selectedNode, setEdges]);
+
+  const handleSelectAgent = (agent: Agent) => {
+    const updatedNode = {
+      ...node,
+      data: {
+        ...node.data,
+        agent,
+      },
+    };
+    setNode(updatedNode);
+    handleUpdateNode(updatedNode);
+  };
+
+  const getAgentTypeName = (type: string) => {
+    const agentTypes: Record<string, string> = {
+      llm: "LLM Agent",
+      a2a: "A2A Agent",
+      sequential: "Sequential Agent",
+      parallel: "Parallel Agent",
+      loop: "Loop Agent",
+      workflow: "Workflow Agent",
+      task: "Task Agent",
+    };
+    return agentTypes[type] || type;
+  };
+
+  const handleSave = () => {
+    const updatedNode = {
+      ...node,
+      data: {
+        ...node.data,
+        message: {
+          type: messageType,
+          content,
+        },
+      },
+    };
+    setNode(updatedNode);
+    handleUpdateNode(updatedNode);
+  };
+  
+  const messageTypeInfo = {
+    text: {
+      icon: <Text className="h-5 w-5 text-orange-400" />,
+      name: "Text Message",
+      description: "Simple text message",
+      color: "bg-orange-900/30 border-orange-700/50",
+    },
+    image: {
+      icon: <Image className="h-5 w-5 text-blue-400" />,
+      name: "Image",
+      description: "Image URL or base64",
+      color: "bg-blue-900/30 border-blue-700/50",
+    },
+    file: {
+      icon: <File className="h-5 w-5 text-emerald-400" />,
+      name: "File",
+      description: "File URL or base64",
+      color: "bg-emerald-900/30 border-emerald-700/50",
+    },
+    video: {
+      icon: <Video className="h-5 w-5 text-purple-400" />,
+      name: "Video",
+      description: "Video URL or base64",
+      color: "bg-purple-900/30 border-purple-700/50",
+    },
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="p-4 border-b border-neutral-700 flex-shrink-0">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <h3 className="text-md font-medium text-neutral-200">Message Type</h3>
+            <Badge
+              variant="outline"
+              className="text-xs bg-orange-900/20 text-orange-400 border-orange-700/50"
+            >
+              {messageType === "text" ? "TEXT" : messageType.toUpperCase()}
+            </Badge>
+          </div>
+          <Select 
+            value={messageType}
+            onValueChange={setMessageType}
+          >
+            <SelectTrigger className="w-[120px] h-8 bg-neutral-800 border-neutral-700 text-neutral-200">
+              <SelectValue placeholder="Select type" />
+            </SelectTrigger>
+            <SelectContent className="bg-neutral-800 border-neutral-700 text-neutral-200">
+              <SelectItem value="text">Text</SelectItem>
+              {/* Other options can be enabled in the future */}
+              {/* <SelectItem value="image">Image</SelectItem>
+              <SelectItem value="file">File</SelectItem>
+              <SelectItem value="video">Video</SelectItem> */}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4 min-h-0">
+        <div className="grid gap-4">
+          <div className="p-3 rounded-md bg-orange-900/10 border border-orange-700/30 mb-2">
+            <div className="flex items-start gap-2">
+              <div className="bg-orange-900/50 rounded-full p-1.5 flex-shrink-0">
+                <MessageSquare size={18} className="text-orange-300" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <h3 className="font-medium text-neutral-200">{messageTypeInfo.text.name}</h3>
+                <p className="text-sm text-neutral-400 mt-1">{messageTypeInfo.text.description}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="content">Message Content</Label>
+            <Textarea
+              id="content"
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              placeholder="Type your message here..."
+              className="min-h-[150px] bg-neutral-700 border-neutral-600 resize-none"
+            />
+          </div>
+
+          {content.trim() !== "" ? (
+            <div className="rounded-md bg-neutral-700/50 border border-neutral-600 p-3 mt-2">
+              <div className="text-sm font-medium text-neutral-400 mb-1">Preview</div>
+              <div className="flex items-start gap-2 p-2 rounded-md bg-neutral-800/70">
+                <div className="rounded-full bg-orange-900/30 p-1.5 mt-0.5">
+                  <MessageSquare size={15} className="text-orange-400" />
+                </div>
+                <div className="text-sm text-neutral-300 whitespace-pre-wrap">{content}</div>
+              </div>
+            </div>
+          ) : (
+            <div className="rounded-md bg-neutral-700/30 border border-neutral-600/50 p-4 flex flex-col items-center justify-center text-center">
+              <AlertCircle className="h-6 w-6 text-neutral-500 mb-2" />
+              <p className="text-neutral-400 text-sm">Your message will appear here</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="p-4 border-t border-neutral-700 flex-shrink-0">
+        <Button
+          className="w-full bg-orange-700 hover:bg-orange-600 text-white flex items-center gap-2 justify-center"
+          onClick={handleSave}
+        >
+          <Save size={16} />
+          Save Message
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export { MessageForm };
--- a/frontend/app/agents/workflows/nodes/components/message/MessageNode.tsx
+++ b/frontend/app/agents/workflows/nodes/components/message/MessageNode.tsx
@@ -0,0 +1,162 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/agents/workflows/nodes/components/message/MessageNode.tsx        │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Handle, NodeProps, Position, useEdges } from "@xyflow/react";
+import { MessageCircle, Text, Image, File, Video, ArrowRight } from "lucide-react";
+import { MessageType, MessageTypeEnum } from "../../nodeFunctions";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+import { BaseNode } from "../../BaseNode";
+
+export function MessageNode(props: NodeProps) {
+  const { selected, data } = props;
+  const edges = useEdges();
+  const isExecuting = data.isExecuting as boolean | undefined;
+
+  const isHandleConnected = (handleId: string) => {
+    return edges.some(
+      (edge) => edge.source === props.id && edge.sourceHandle === handleId
+    );
+  };
+
+  const isBottomHandleConnected = isHandleConnected("bottom-handle");
+  
+  const message = data.message as MessageType | undefined;
+
+  const getMessageTypeIcon = (type: string) => {
+    switch (type) {
+      case MessageTypeEnum.TEXT:
+        return <Text className="h-4 w-4 text-orange-400" />;
+      case "image":
+        return <Image className="h-4 w-4 text-blue-400" />;
+      case "file":
+        return <File className="h-4 w-4 text-emerald-400" />;
+      case "video":
+        return <Video className="h-4 w-4 text-purple-400" />;
+      default:
+        return <MessageCircle className="h-4 w-4 text-orange-400" />;
+    }
+  };
+
+  const getMessageTypeColor = (type: string) => {
+    switch (type) {
+      case MessageTypeEnum.TEXT:
+        return 'bg-orange-900/30 text-orange-400 border-orange-700/40';
+      case "image":
+        return 'bg-blue-900/30 text-blue-400 border-blue-700/40';
+      case "file":
+        return 'bg-emerald-900/30 text-emerald-400 border-emerald-700/40';
+      case "video":
+        return 'bg-purple-900/30 text-purple-400 border-purple-700/40';
+      default:
+        return 'bg-orange-900/30 text-orange-400 border-orange-700/40';
+    }
+  };
+
+  const getMessageTypeName = (type: string) => {
+    const messageTypes: Record<string, string> = {
+      text: "Text Message",
+      image: "Image",
+      file: "File",
+      video: "Video",
+    };
+    return messageTypes[type] || type;
+  };
+
+  return (
+    <BaseNode hasTarget={true} selected={selected || false} borderColor="orange" isExecuting={isExecuting}>
+      <div className="mb-3 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-orange-900/40 shadow-sm">
+            <MessageCircle className="h-5 w-5 text-orange-400" />
+          </div>
+          <div>
+            <p className="text-lg font-medium text-orange-400">
+              {data.label as string}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {message ? (
+        <div className="mb-3 rounded-lg border border-orange-700/40 bg-orange-950/10 p-3 transition-all duration-200 hover:border-orange-600/50 hover:bg-orange-900/10">
+          <div className="flex flex-col">
+            <div className="flex items-start justify-between gap-2">
+              <div className="flex items-center">
+                {getMessageTypeIcon(message.type)}
+                <span className="ml-1.5 font-medium text-white">{getMessageTypeName(message.type)}</span>
+              </div>
+              <Badge
+                variant="outline"
+                className={cn("px-1.5 py-0 text-xs", getMessageTypeColor(message.type))}
+              >
+                {message.type}
+              </Badge>
+            </div>
+            
+            {message.content && (
+              <p className="mt-2 text-xs text-neutral-400 line-clamp-2">
+                {message.content.slice(0, 80)} {message.content.length > 80 && '...'}
+              </p>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="mb-3 flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-orange-700/40 bg-orange-950/10 p-5 text-center transition-all duration-200 hover:border-orange-600/50 hover:bg-orange-900/20">
+          <MessageCircle className="h-8 w-8 text-orange-700/50 mb-2" />
+          <p className="text-orange-400">No message configured</p>
+          <p className="mt-1 text-xs text-neutral-500">Click to configure</p>
+        </div>
+      )}
+
+      <div className="mt-2 flex items-center justify-end text-sm text-neutral-400 transition-colors">
+        <div className="flex items-center space-x-1 rounded-md py-1 px-2">
+          <span>Next step</span>
+          <ArrowRight className="h-3.5 w-3.5" />
+        </div>
+        <Handle
+          className={cn(
+            "!w-3 !h-3 !rounded-full transition-all duration-300",
+            isBottomHandleConnected ? "!bg-orange-500 !border-orange-400" : "!bg-neutral-400 !border-neutral-500",
+            selected && isBottomHandleConnected && "!bg-orange-400 !border-orange-300"
+          )}
+          style={{
+            right: "-8px",
+            top: "calc(100% - 25px)",
+          }}
+          type="source"
+          position={Position.Right}
+          id="bottom-handle"
+        />
+      </div>
+    </BaseNode>
+  );
+}