+ {/* 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/Flow.tsx b/autogpt_platform/frontend/src/components/Flow.tsx
index e200a6250..7d7af8c2d 100644
--- a/autogpt_platform/frontend/src/components/Flow.tsx
+++ b/autogpt_platform/frontend/src/components/Flow.tsx
@@ -44,6 +44,7 @@ import RunnerUIWrapper, {
} from "@/components/RunnerUIWrapper";
import PrimaryActionBar from "@/components/PrimaryActionButton";
import { useToast } from "@/components/ui/use-toast";
+import { forceLoad } from "@sentry/nextjs";
// 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
@@ -113,10 +114,20 @@ const FlowEditor: React.FC<{
localStorage.removeItem(TUTORIAL_STORAGE_KEY);
router.push(pathname);
} else if (!localStorage.getItem(TUTORIAL_STORAGE_KEY)) {
- startTutorial(setPinBlocksPopover, setPinSavePopover);
+ const emptyNodes = (forceRemove: boolean = false) =>
+ forceRemove ? (setNodes([]), setEdges([]), true) : nodes.length === 0;
+ startTutorial(emptyNodes, setPinBlocksPopover, setPinSavePopover);
localStorage.setItem(TUTORIAL_STORAGE_KEY, "yes");
}
- }, [availableNodes, router, pathname, params]);
+ }, [
+ availableNodes,
+ router,
+ pathname,
+ params,
+ setEdges,
+ setNodes,
+ nodes.length,
+ ]);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
@@ -423,7 +434,7 @@ const FlowEditor: React.FC<{
history.push({
type: "ADD_NODE",
- payload: { node: newNode.data },
+ payload: { node: { ...newNode, ...newNode.data } },
undo: () => deleteElements({ nodes: [{ id: newNode.id }] }),
redo: () => addNodes(newNode),
});
diff --git a/autogpt_platform/frontend/src/components/NavBar.tsx b/autogpt_platform/frontend/src/components/NavBar.tsx
index 815543189..cd8de5802 100644
--- a/autogpt_platform/frontend/src/components/NavBar.tsx
+++ b/autogpt_platform/frontend/src/components/NavBar.tsx
@@ -18,7 +18,7 @@ export async function NavBar() {
const { user } = await getServerUser();
return (
-
+
diff --git a/autogpt_platform/frontend/src/components/NodeHandle.tsx b/autogpt_platform/frontend/src/components/NodeHandle.tsx
index d059d6567..e42b740d3 100644
--- a/autogpt_platform/frontend/src/components/NodeHandle.tsx
+++ b/autogpt_platform/frontend/src/components/NodeHandle.tsx
@@ -31,20 +31,27 @@ const NodeHandle: FC = ({
const typeClass = `text-sm ${getTypeTextColor(schema.type || "any")} ${side === "left" ? "text-left" : "text-right"}`;
const label = (
-
-
- {schema.title || beautifyString(keyName)}
+
+
+ {schema.title || beautifyString(keyName.toLowerCase())}
{isRequired ? "*" : ""}
- {typeName[schema.type] || "any"}
+
+ ({typeName[schema.type as keyof typeof typeName] || "any"})
+
);
- const dot = (
-
- );
+ const Dot = ({ className = "" }) => {
+ const color = isConnected
+ ? getTypeBgColor(schema.type || "any")
+ : "border-gray-300";
+ return (
+
+ );
+ };
if (side === "left") {
return (
@@ -53,10 +60,10 @@ const NodeHandle: FC = ({
type="target"
position={Position.Left}
id={keyName}
- className="background-color: white; border: 2px solid black; width: 15px; height: 15px; border-radius: 50%; bottom: -7px; left: 20%; group -ml-[26px]"
+ className="-ml-[26px]"
>
- {dot}
+
{label}
@@ -74,7 +81,7 @@ const NodeHandle: FC = ({
>
{label}
- {dot}
+
diff --git a/autogpt_platform/frontend/src/components/NodeOutputs.tsx b/autogpt_platform/frontend/src/components/NodeOutputs.tsx
new file mode 100644
index 000000000..c7b7dc571
--- /dev/null
+++ b/autogpt_platform/frontend/src/components/NodeOutputs.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { ContentRenderer } from "./ui/render";
+import { beautifyString } from "@/lib/utils";
+import * as Separator from "@radix-ui/react-separator";
+
+type NodeOutputsProps = {
+ title?: string;
+ truncateLongData?: boolean;
+ data: { [key: string]: Array };
+};
+
+export default function NodeOutputs({
+ title,
+ truncateLongData,
+ data,
+}: NodeOutputsProps) {
+ return (
+
+ {title &&
{title}}
+ {Object.entries(data).map(([pin, dataArray]) => (
+
+
+ Pin:
+ {beautifyString(pin)}
+
+
+
+
Data:
+
+ {dataArray.map((item, index) => (
+
+
+ {index < dataArray.length - 1 && ", "}
+
+ ))}
+
+
+
+ ))}
+
+ );
+}
diff --git a/autogpt_platform/frontend/src/components/OutputModalComponent.tsx b/autogpt_platform/frontend/src/components/OutputModalComponent.tsx
index fcf33049f..082bdb022 100644
--- a/autogpt_platform/frontend/src/components/OutputModalComponent.tsx
+++ b/autogpt_platform/frontend/src/components/OutputModalComponent.tsx
@@ -26,7 +26,7 @@ const OutputModalComponent: FC = ({
Output Data History
-
+
{executionResults.map((data, i) => (
<>
diff --git a/autogpt_platform/frontend/src/components/PrimaryActionButton.tsx b/autogpt_platform/frontend/src/components/PrimaryActionButton.tsx
index cbcf00ac9..ee3c83784 100644
--- a/autogpt_platform/frontend/src/components/PrimaryActionButton.tsx
+++ b/autogpt_platform/frontend/src/components/PrimaryActionButton.tsx
@@ -59,7 +59,7 @@ const PrimaryActionBar: React.FC
= ({
onClick={runButtonOnClick}
size="primary"
style={{
- background: isRunning ? "#FFB3BA" : "#7544DF",
+ background: isRunning ? "#DF4444" : "#7544DF",
opacity: isDisabled ? 0.5 : 1,
}}
data-id="primary-action-run-agent"
diff --git a/autogpt_platform/frontend/src/components/TallyPopup.tsx b/autogpt_platform/frontend/src/components/TallyPopup.tsx
index e36738598..89b02cf49 100644
--- a/autogpt_platform/frontend/src/components/TallyPopup.tsx
+++ b/autogpt_platform/frontend/src/components/TallyPopup.tsx
@@ -1,7 +1,7 @@
"use client";
import React, { useEffect, useState } from "react";
import { Button } from "./ui/button";
-import { IconMegaphone } from "@/components/ui/icons";
+import { QuestionMarkCircledIcon } from "@radix-ui/react-icons";
import { useRouter } from "next/navigation";
const TallyPopupSimple = () => {
@@ -48,17 +48,22 @@ const TallyPopupSimple = () => {
};
return (
-
-