feat(builder): Support static connections (#7799)

- Add static link/connection support on the frontend and display them as dashed lines
- Remove queueing for static connections - there'll always be only one bead waiting at the end
- Make beads slightly larger and further from the end arrow

rnd/autogpt_builder/src/components/CustomEdge.tsx

@@ -14,6 +14,7 @@ import { FlowContext } from "./Flow";
 export type CustomEdgeData = {
   edgeColor: string;
   sourcePos?: XYPosition;
+  isStatic?: boolean;
   beadUp?: number;
   beadDown?: number;
   beadData?: any[];
@@ -57,7 +58,7 @@ const CustomEdgeFC: FC<EdgeProps<CustomEdgeData>> = ({
   };
 
   const animationDuration = 500; // Duration in milliseconds for bead to travel the curve
-  const beadDiameter = 10;
+  const beadDiameter = 12;
   const deltaTime = 16;
 
   function setTargetPositions(beads: Bead[]) {
@@ -67,7 +68,8 @@ const CustomEdgeFC: FC<EdgeProps<CustomEdgeData>> = ({
     );
 
     return beads.map((bead, index) => {
-      const targetPosition = distanceBetween * index + beadDiameter * 1.3;
+      const distanceFromEnd = beadDiameter * 1.35;
+      const targetPosition = distanceBetween * index + distanceFromEnd;
       const t = getTForDistance(-targetPosition);
 
       return {
@@ -86,6 +88,7 @@ const CustomEdgeFC: FC<EdgeProps<CustomEdgeData>> = ({
 
     const beadUp = data?.beadUp!;
 
+    // Add beads
     setBeads(({ beads, created, destroyed }) => {
       const newBeads = [];
       for (let i = 0; i < beadUp - created; i++) {
@@ -96,6 +99,7 @@ const CustomEdgeFC: FC<EdgeProps<CustomEdgeData>> = ({
       return { beads: b, created: beadUp, destroyed };
     });
 
+    // Remove beads if not animating
     if (visualizeBeads !== "animate") {
       setBeads(({ beads, created, destroyed }) => {
         let destroyedCount = 0;
@@ -105,7 +109,8 @@ const CustomEdgeFC: FC<EdgeProps<CustomEdgeData>> = ({
           .filter((bead, index) => {
             const beadDown = data?.beadDown!;
 
-            const removeCount = beadDown - destroyed;
+            // Remove always one less bead in case of static edge, so it stays at the connection point
+            const removeCount = beadDown - destroyed - (data?.isStatic ? 1 : 0);
             if (bead.t >= bead.targetT && index < removeCount) {
               destroyedCount++;
               return false;
@@ -122,6 +127,7 @@ const CustomEdgeFC: FC<EdgeProps<CustomEdgeData>> = ({
       return;
     }
 
+    // Animate and remove beads
     const interval = setInterval(() => {
       setBeads(({ beads, created, destroyed }) => {
         let destroyedCount = 0;
@@ -142,7 +148,8 @@ const CustomEdgeFC: FC<EdgeProps<CustomEdgeData>> = ({
           .filter((bead, index) => {
             const beadDown = data?.beadDown!;
 
-            const removeCount = beadDown - destroyed;
+            // Remove always one less bead in case of static edge, so it stays at the connection point
+            const removeCount = beadDown - destroyed - (data?.isStatic ? 1 : 0);
             if (bead.t >= bead.targetT && index < removeCount) {
               destroyedCount++;
               return false;
@@ -169,10 +176,11 @@ const CustomEdgeFC: FC<EdgeProps<CustomEdgeData>> = ({
         path={svgPath}
         markerEnd={markerEnd}
         style={{
-          strokeWidth: isHovered ? 3 : 2,
+          strokeWidth: (isHovered ? 3 : 2) + (data?.isStatic ? 0.5 : 0),
           stroke:
             (data?.edgeColor ?? "#555555") +
             (selected || isHovered ? "" : "80"),
+          strokeDasharray: data?.isStatic ? "5 3" : "0",
         }}
       />
       <path

rnd/autogpt_builder/src/components/Flow.tsx

@@ -527,6 +527,7 @@ const FlowEditor: React.FC<{
                   getOutputType(link.source_id, link.source_name!),
                 ),
                 sourcePos: getNode(link.source_id)?.position,
+                isStatic: link.is_static,
                 beadUp: 0,
                 beadDown: 0,
                 beadData: [],
@@ -825,6 +826,12 @@ const FlowEditor: React.FC<{
             );
             outputEdges.forEach((edge) => {
               edge.data!.beadUp = (edge.data!.beadUp ?? 0) + 1;
+              // For static edges beadDown is always one less than beadUp
+              // Because there's no queueing and one bead is always at the connection point
+              if (edge.data?.isStatic) {
+                edge.data!.beadDown = (edge.data!.beadUp ?? 0) - 1;
+                edge.data!.beadData! = edge.data!.beadData!.slice(0, -1);
+              }
               //todo kcze this assumes output at key is always array with one element
               edge.data!.beadData = [
                 exec.output_data[key][0],
@@ -842,9 +849,11 @@ const FlowEditor: React.FC<{
             );
 
             inputEdges.forEach((edge) => {
+              // Skip decreasing bead count if edge doesn't match or if it's static
               if (
                 edge.data!.beadData![edge.data!.beadData!.length - 1] !==
-                exec.input_data[key]
+                  exec.input_data[key] ||
+                edge.data?.isStatic
               ) {
                 return;
               }

rnd/autogpt_builder/src/lib/autogpt-server-api/types.ts

@@ -117,6 +117,7 @@ export type Link = {
   sink_id: string;
   source_name: string;
   sink_name: string;
+  is_static: boolean;
 };
 
 export type LinkCreatable = Omit<Link, "id"> & {