- {beautifyString(
- data.blockType?.replace(/Block$/, "") || data.title,
- )}
+
+
+ );
+
+ const onContextButtonTrigger = (e: React.MouseEvent) => {
+ e.preventDefault();
+ const rect = e.currentTarget.getBoundingClientRect();
+ const event = new MouseEvent("contextmenu", {
+ bubbles: true,
+ clientX: rect.left + rect.width / 2,
+ clientY: rect.top + rect.height / 2,
+ });
+ e.currentTarget.dispatchEvent(event);
+ };
+
+ const stripeColor = getPrimaryCategoryColor(data.categories);
+
+ const nodeContent = () => (
+
+ {/* Header */}
+
+ {/* Color Stripe */}
+
+
+
+
+
+ {beautifyString(
+ data.blockType?.replace(/Block$/, "") || data.title,
+ )}
+
-
-
-
- {isHovered && (
- <>
-
-
-
+ {blockCost && (
+
+
+ {" "}
+ {blockCost.cost_amount}{" "}
+ credits/{blockCost.cost_type}
+
+
)}
+ {data.categories.map((category) => (
+
+ {beautifyString(category.category.toLowerCase())}
+
+ ))}
+
+
+
- {blockCost && (
-
-
- {blockCost.cost_amount} per {blockCost.cost_type}
-
-
- )}
- {data.uiType !== BlockUIType.NOTE ? (
-
+ {/* Body */}
+
+ {/* Input Handles */}
+ {data.uiType !== BlockUIType.NOTE ? (
+
+
+ {data.inputSchema &&
+ generateInputHandles(data.inputSchema, data.uiType)}
+
+
+ ) : (
{data.inputSchema &&
generateInputHandles(data.inputSchema, data.uiType)}
-
- {data.outputSchema &&
- generateOutputHandles(data.outputSchema, data.uiType)}
-
-
- ) : (
-
- {data.inputSchema &&
- generateInputHandles(data.inputSchema, data.uiType)}
-
- )}
- {isOutputOpen && data.uiType !== BlockUIType.NOTE && (
-
- {(data.executionResults?.length ?? 0) > 0 ? (
- <>
-
+
+
+ Advanced
+
-
-
+
+
+ )}
+ {/* Output Handles */}
+ {data.uiType !== BlockUIType.NOTE && (
+ <>
+
+
+
+ {data.outputSchema &&
+ generateOutputHandles(data.outputSchema, data.uiType)}
-
- ) : (
-
No outputs yet
- )}
-
- )}
- {data.uiType !== BlockUIType.NOTE && (
-
-
- Output
- {hasAdvancedFields && (
- <>
-
- Advanced
-
- )}
- {data.status && (
-
+
+ )}
+
+ {/* End Body */}
+ {/* Footer */}
+
+ {/* Display Outputs */}
+ {isOutputOpen && data.uiType !== BlockUIType.NOTE && (
+
+ {(data.executionResults?.length ?? 0) > 0 ? (
+
+
+
+
+
+
+
+ ) : (
+
+ )}
+
- {data.status}
-
- )}
-
- )}
+
+ {hasConfigErrors || hasOutputError
+ ? "Error"
+ : data.status
+ ? beautifyString(data.status)
+ : "Not Run"}
+
+
+
+ )}
+
);
+
+ return (
+
+ {nodeContent()}
+
+ );
}
diff --git a/autogpt_platform/frontend/src/components/DataTable.tsx b/autogpt_platform/frontend/src/components/DataTable.tsx
index 6ab4a42e9b..aba62af6c2 100644
--- a/autogpt_platform/frontend/src/components/DataTable.tsx
+++ b/autogpt_platform/frontend/src/components/DataTable.tsx
@@ -1,3 +1,4 @@
+import React from "react";
import { beautifyString } from "@/lib/utils";
import { Button } from "./ui/button";
import {
@@ -10,6 +11,7 @@ import {
} from "./ui/table";
import { Clipboard } from "lucide-react";
import { useToast } from "./ui/use-toast";
+import { ContentRenderer } from "./ui/render";
type DataTableProps = {
title?: string;
@@ -72,17 +74,15 @@ export default function DataTable({
>
- {value
- .map((i) => {
- const text =
- typeof i === "object"
- ? JSON.stringify(i, null, 2)
- : String(i);
- return truncateLongData && text.length > maxChars
- ? text.slice(0, maxChars) + "..."
- : text;
- })
- .join(", ")}
+ {value.map((item, index) => (
+
+
+ {index < value.length - 1 && ", "}
+
+ ))}
diff --git a/autogpt_platform/frontend/src/components/Flow.tsx b/autogpt_platform/frontend/src/components/Flow.tsx
index a55fd5fc4e..8fb1505788 100644
--- a/autogpt_platform/frontend/src/components/Flow.tsx
+++ b/autogpt_platform/frontend/src/components/Flow.tsx
@@ -26,8 +26,12 @@ import {
import "@xyflow/react/dist/style.css";
import { CustomNode } from "./CustomNode";
import "./flow.css";
-import { Link } from "@/lib/autogpt-server-api";
-import { getTypeColor, filterBlocksByType } from "@/lib/utils";
+import { BlockUIType, Link } from "@/lib/autogpt-server-api";
+import {
+ getTypeColor,
+ filterBlocksByType,
+ findNewlyAddedBlockCoordinates,
+} from "@/lib/utils";
import { history } from "./history";
import { CustomEdge } from "./CustomEdge";
import ConnectionLine from "./ConnectionLine";
@@ -38,12 +42,14 @@ import { IconUndo2, IconRedo2 } from "@/components/ui/icons";
import { startTutorial } from "./tutorial";
import useAgentGraph from "@/hooks/useAgentGraph";
import { v4 as uuidv4 } from "uuid";
-import { useRouter, usePathname } from "next/navigation";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
import RunnerUIWrapper, {
RunnerUIWrapperRef,
} from "@/components/RunnerUIWrapper";
import PrimaryActionBar from "@/components/PrimaryActionButton";
import { useToast } from "@/components/ui/use-toast";
+import { forceLoad } from "@sentry/nextjs";
+import { useCopyPaste } from "../hooks/useCopyPaste";
// This is for the history, this is the minimum distance a block must move before it is logged
// It helps to prevent spamming the history with small movements especially when pressing on a input in a block
@@ -55,6 +61,15 @@ type FlowContextType = {
getNextNodeId: () => string;
};
+export type NodeDimension = {
+ [nodeId: string]: {
+ x: number;
+ y: number;
+ width: number;
+ height: number;
+ };
+};
+
export const FlowContext = createContext
(null);
const FlowEditor: React.FC<{
@@ -62,8 +77,14 @@ const FlowEditor: React.FC<{
template?: boolean;
className?: string;
}> = ({ flowID, template, className }) => {
- const { addNodes, addEdges, getNode, deleteElements, updateNode } =
- useReactFlow();
+ const {
+ addNodes,
+ addEdges,
+ getNode,
+ deleteElements,
+ updateNode,
+ setViewport,
+ } = useReactFlow();
const [nodeId, setNodeId] = useState(1);
const [copiedNodes, setCopiedNodes] = useState([]);
const [copiedEdges, setCopiedEdges] = useState([]);
@@ -91,41 +112,45 @@ const FlowEditor: React.FC<{
const router = useRouter();
const pathname = usePathname();
+ const params = useSearchParams();
const initialPositionRef = useRef<{
[key: string]: { x: number; y: number };
}>({});
const isDragging = useRef(false);
- // State to control if tutorial has started
- const [tutorialStarted, setTutorialStarted] = useState(false);
// State to control if blocks menu should be pinned open
const [pinBlocksPopover, setPinBlocksPopover] = useState(false);
+ // State to control if save popover should be pinned open
+ const [pinSavePopover, setPinSavePopover] = useState(false);
const runnerUIRef = useRef(null);
const { toast } = useToast();
- useEffect(() => {
- const params = new URLSearchParams(window.location.search);
+ const TUTORIAL_STORAGE_KEY = "shepherd-tour";
- // If resetting tutorial
+ // It stores the dimension of all nodes with position as well
+ const [nodeDimensions, setNodeDimensions] = useState({});
+
+ useEffect(() => {
if (params.get("resetTutorial") === "true") {
- localStorage.removeItem("shepherd-tour"); // Clear tutorial flag
+ localStorage.removeItem(TUTORIAL_STORAGE_KEY);
router.push(pathname);
- } else {
- // Otherwise, start tutorial if conditions are met
- const shouldStartTutorial = !localStorage.getItem("shepherd-tour");
- if (
- shouldStartTutorial &&
- availableNodes.length > 0 &&
- !tutorialStarted
- ) {
- startTutorial(setPinBlocksPopover);
- setTutorialStarted(true);
- localStorage.setItem("shepherd-tour", "yes");
- }
+ } else if (!localStorage.getItem(TUTORIAL_STORAGE_KEY)) {
+ const emptyNodes = (forceRemove: boolean = false) =>
+ forceRemove ? (setNodes([]), setEdges([]), true) : nodes.length === 0;
+ startTutorial(emptyNodes, setPinBlocksPopover, setPinSavePopover);
+ localStorage.setItem(TUTORIAL_STORAGE_KEY, "yes");
}
- }, [availableNodes, tutorialStarted, router, pathname]);
+ }, [
+ availableNodes,
+ router,
+ pathname,
+ params,
+ setEdges,
+ setNodes,
+ nodes.length,
+ ]);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
@@ -399,16 +424,36 @@ const FlowEditor: React.FC<{
return;
}
- // Calculate the center of the viewport considering zoom
- const viewportCenter = {
- x: (window.innerWidth / 2 - x) / zoom,
- y: (window.innerHeight / 2 - y) / zoom,
- };
+ /*
+ Calculate a position to the right of the newly added block, allowing for some margin.
+ If adding to the right side causes the new block to collide with an existing block, attempt to place it at the bottom or left.
+ Why not the top? Because the height of the new block is unknown.
+ If it still collides, run a loop to find the best position where it does not collide.
+ Then, adjust the canvas to center on the newly added block.
+ Note: The width is known, e.g., w = 300px for a note and w = 500px for others, but the height is dynamic.
+ */
+
+ // Alternative: We could also use D3 force, Intersection for this (React flow Pro examples)
+
+ const viewportCoordinates =
+ nodeDimensions && Object.keys(nodeDimensions).length > 0
+ ? // we will get all the dimension of nodes, then store
+ findNewlyAddedBlockCoordinates(
+ nodeDimensions,
+ (nodeSchema.uiType == BlockUIType.NOTE ? 300 : 500) / zoom,
+ 60 / zoom,
+ zoom,
+ )
+ : // we will get all the dimension of nodes, then store
+ {
+ x: (window.innerWidth / 2 - x) / zoom,
+ y: (window.innerHeight / 2 - y) / zoom,
+ };
const newNode: CustomNode = {
id: nodeId.toString(),
type: "custom",
- position: viewportCenter, // Set the position to the calculated viewport center
+ position: viewportCoordinates, // Set the position to the calculated viewport center
data: {
blockType: nodeType,
blockCosts: nodeSchema.costs,
@@ -430,17 +475,28 @@ const FlowEditor: React.FC<{
setNodeId((prevId) => prevId + 1);
clearNodesStatusAndOutput(); // Clear status and output when a new node is added
+ setViewport(
+ {
+ x: -viewportCoordinates.x * zoom + window.innerWidth / 2,
+ y: -viewportCoordinates.y * zoom + window.innerHeight / 2 - 100,
+ zoom: 0.8,
+ },
+ { duration: 500 },
+ );
+
history.push({
type: "ADD_NODE",
- payload: { node: newNode.data },
+ payload: { node: { ...newNode, ...newNode.data } },
undo: () => deleteElements({ nodes: [{ id: newNode.id }] }),
redo: () => addNodes(newNode),
});
},
[
nodeId,
+ setViewport,
availableNodes,
addNodes,
+ nodeDimensions,
deleteElements,
clearNodesStatusAndOutput,
x,
@@ -449,6 +505,38 @@ const FlowEditor: React.FC<{
],
);
+ const findNodeDimensions = useCallback(() => {
+ const newNodeDimensions: NodeDimension = nodes.reduce((acc, node) => {
+ const nodeElement = document.querySelector(
+ `[data-id="custom-node-${node.id}"]`,
+ );
+ if (nodeElement) {
+ const rect = nodeElement.getBoundingClientRect();
+ const { left, top, width, height } = rect;
+
+ // Convert screen coordinates to flow coordinates
+ const flowX = (left - x) / zoom;
+ const flowY = (top - y) / zoom;
+ const flowWidth = width / zoom;
+ const flowHeight = height / zoom;
+
+ acc[node.id] = {
+ x: flowX,
+ y: flowY,
+ width: flowWidth,
+ height: flowHeight,
+ };
+ }
+ return acc;
+ }, {} as NodeDimension);
+
+ setNodeDimensions(newNodeDimensions);
+ }, [nodes, x, y, zoom]);
+
+ useEffect(() => {
+ findNodeDimensions();
+ }, [nodes, findNodeDimensions]);
+
const handleUndo = () => {
history.undo();
};
@@ -457,6 +545,8 @@ const FlowEditor: React.FC<{
history.redo();
};
+ const handleCopyPaste = useCopyPaste(getNextNodeId);
+
const handleKeyDown = useCallback(
(event: KeyboardEvent) => {
// Prevent copy/paste if any modal is open or if the focus is on an input element
@@ -468,68 +558,9 @@ const FlowEditor: React.FC<{
if (isAnyModalOpen || isInputField) return;
- if (event.ctrlKey || event.metaKey) {
- if (event.key === "c" || event.key === "C") {
- // Copy selected nodes
- const selectedNodes = nodes.filter((node) => node.selected);
- const selectedEdges = edges.filter((edge) => edge.selected);
- setCopiedNodes(selectedNodes);
- setCopiedEdges(selectedEdges);
- }
- if (event.key === "v" || event.key === "V") {
- // Paste copied nodes
- if (copiedNodes.length > 0) {
- const oldToNewNodeIDMap: Record = {};
- const pastedNodes = copiedNodes.map((node, index) => {
- const newNodeId = (nodeId + index).toString();
- oldToNewNodeIDMap[node.id] = newNodeId;
- return {
- ...node,
- id: newNodeId,
- position: {
- x: node.position.x + 20, // Offset pasted nodes
- y: node.position.y + 20,
- },
- data: {
- ...node.data,
- status: undefined, // Reset status
- executionResults: undefined, // Clear output data
- },
- };
- });
- setNodes((existingNodes) =>
- // Deselect copied nodes
- existingNodes.map((node) => ({ ...node, selected: false })),
- );
- addNodes(pastedNodes);
- setNodeId((prevId) => prevId + copiedNodes.length);
-
- const pastedEdges = copiedEdges.map((edge) => {
- const newSourceId = oldToNewNodeIDMap[edge.source] ?? edge.source;
- const newTargetId = oldToNewNodeIDMap[edge.target] ?? edge.target;
- return {
- ...edge,
- id: `${newSourceId}_${edge.sourceHandle}_${newTargetId}_${edge.targetHandle}_${Date.now()}`,
- source: newSourceId,
- target: newTargetId,
- };
- });
- addEdges(pastedEdges);
- }
- }
- }
+ handleCopyPaste(event);
},
- [
- isAnyModalOpen,
- nodes,
- edges,
- copiedNodes,
- setNodes,
- addNodes,
- copiedEdges,
- addEdges,
- nodeId,
- ],
+ [isAnyModalOpen, handleCopyPaste],
);
useEffect(() => {
@@ -579,21 +610,28 @@ const FlowEditor: React.FC<{
>
-
-
- requestSave(isTemplate ?? false)}
- agentDescription={agentDescription}
- onDescriptionChange={setAgentDescription}
- agentName={agentName}
- onNameChange={setAgentName}
- />
-
+
+ }
+ botChildren={
+ requestSave(isTemplate ?? false)}
+ agentDescription={agentDescription}
+ onDescriptionChange={setAgentDescription}
+ agentName={agentName}
+ onNameChange={setAgentName}
+ pinSavePopover={pinSavePopover}
+ />
+ }
+ >
runnerUIRef.current?.openRunnerOutput()}
onClickRunAgent={() => {
diff --git a/autogpt_platform/frontend/src/components/NavBar.tsx b/autogpt_platform/frontend/src/components/NavBar.tsx
index 2ae259d880..cd8de5802d 100644
--- a/autogpt_platform/frontend/src/components/NavBar.tsx
+++ b/autogpt_platform/frontend/src/components/NavBar.tsx
@@ -5,19 +5,10 @@ import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import Image from "next/image";
import getServerUser from "@/hooks/getServerUser";
import ProfileDropdown from "./ProfileDropdown";
-import {
- IconCircleUser,
- IconMenu,
- IconPackage2,
- IconRefresh,
- IconSquareActivity,
- IconWorkFlow,
-} from "@/components/ui/icons";
-import AutoGPTServerAPI from "@/lib/autogpt-server-api";
-import CreditButton from "@/components/CreditButton";
-import { BsBoxes } from "react-icons/bs";
-import { LuLaptop } from "react-icons/lu";
-import { LuShoppingCart } from "react-icons/lu";
+import { IconCircleUser, IconMenu } from "@/components/ui/icons";
+import CreditButton from "@/components/nav/CreditButton";
+
+import { NavBarButtons } from "./nav/NavBarButtons";
export async function NavBar() {
const isAvailable = Boolean(
@@ -27,7 +18,7 @@ export async function NavBar() {
const { user } = await getServerUser();
return (
-