From b87c64ce38fbbb489376149c110ee8a3d5f13469 Mon Sep 17 00:00:00 2001 From: Abhimanyu Yadav <122007096+Abhi1992002@users.noreply.github.com> Date: Mon, 5 Jan 2026 15:58:57 +0530 Subject: [PATCH 1/2] feat(frontend): Add delete key bindings to ReactFlow editor (#11693) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Issues fixed by this PR - https://github.com/Significant-Gravitas/AutoGPT/issues/11688 - https://github.com/Significant-Gravitas/AutoGPT/issues/11687 ### **Changes 🏗️** Added keyboard delete functionality to the ReactFlow editor by enabling the `deleteKeyCode` prop with both "Backspace" and "Delete" keys. This allows users to delete selected nodes and edges using standard keyboard shortcuts, improving the editing experience. **Modified:** - `Flow.tsx`: Added `deleteKeyCode={["Backspace", "Delete"]}` prop to the ReactFlow component to enable deletion of selected elements via keyboard ### **Checklist 📋** #### **For code changes:** - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] Select a node in the flow editor and press Delete key to confirm it deletes - [x] Select a node in the flow editor and press Backspace key to confirm it deletes - [x] Verify deletion works for multiple selected elements --- .../(platform)/build/components/FlowEditor/Flow/Flow.tsx | 1 + .../src/app/(platform)/build/stores/edgeStore.ts | 9 +++++---- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx index 4c6796d746..cf6dd1885c 100644 --- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx @@ -99,6 +99,7 @@ export const Flow = () => { nodesDraggable={!isLocked} nodesConnectable={!isLocked} elementsSelectable={!isLocked} + deleteKeyCode={["Backspace", "Delete"]} > diff --git a/autogpt_platform/frontend/src/app/(platform)/build/stores/edgeStore.ts b/autogpt_platform/frontend/src/app/(platform)/build/stores/edgeStore.ts index 0d0e4202fb..cae1d995da 100644 --- a/autogpt_platform/frontend/src/app/(platform)/build/stores/edgeStore.ts +++ b/autogpt_platform/frontend/src/app/(platform)/build/stores/edgeStore.ts @@ -115,10 +115,11 @@ export const useEdgeStore = create((set, get) => ({ edge.data?.beadData ?? new Map(); - if ( - edge.targetHandle && - edge.targetHandle in executionResult.input_data - ) { + const inputValue = edge.targetHandle + ? executionResult.input_data[edge.targetHandle] + : undefined; + + if (inputValue !== undefined && inputValue !== null) { beadData.set(executionResult.node_exec_id, executionResult.status); } From bdba0033de6c09a3e8c7dcc16501d0963d76b383 Mon Sep 17 00:00:00 2001 From: Ubbe Date: Mon, 5 Jan 2026 17:29:12 +0700 Subject: [PATCH 2/2] refactor(frontend): move NodeInput files (#11695) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Changes 🏗️ Move the `` component next to the old builder code where it is used. ## Checklist 📋 ### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] Run app locally and click around, E2E is fine --- .../build/components/FlowEditor/Flow/Flow.tsx | 45 ++++++++++--------- .../components/legacy-builder/NodeInputs.tsx | 2 +- .../legacy-builder/NodeTableInput.tsx} | 12 ++--- .../agent/[creator]/[slug]/page.tsx | 8 ++-- .../marketplace/creator/[creator]/page.tsx | 8 ++-- .../frontend/src/app/global-error.tsx | 11 +++-- 6 files changed, 45 insertions(+), 41 deletions(-) rename autogpt_platform/frontend/src/{components/node-table-input.tsx => app/(platform)/build/components/legacy-builder/NodeTableInput.tsx} (96%) diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx index cf6dd1885c..faaebb6b35 100644 --- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx @@ -1,27 +1,27 @@ -import { ReactFlow, Background } from "@xyflow/react"; -import NewControlPanel from "../../NewControlPanel/NewControlPanel"; -import CustomEdge from "../edges/CustomEdge"; -import { useFlow } from "./useFlow"; -import { useShallow } from "zustand/react/shallow"; -import { useNodeStore } from "../../../stores/nodeStore"; -import { useMemo, useCallback } from "react"; -import { CustomNode } from "../nodes/CustomNode/CustomNode"; -import { useCustomEdge } from "../edges/useCustomEdge"; -import { useFlowRealtime } from "./useFlowRealtime"; -import { GraphLoadingBox } from "./components/GraphLoadingBox"; -import { BuilderActions } from "../../BuilderActions/BuilderActions"; -import { RunningBackground } from "./components/RunningBackground"; -import { useGraphStore } from "../../../stores/graphStore"; -import { useCopyPaste } from "./useCopyPaste"; -import { FloatingReviewsPanel } from "@/components/organisms/FloatingReviewsPanel/FloatingReviewsPanel"; -import { parseAsString, useQueryStates } from "nuqs"; -import { CustomControls } from "./components/CustomControl"; import { useGetV1GetSpecificGraph } from "@/app/api/__generated__/endpoints/graphs/graphs"; import { okData } from "@/app/api/helpers"; +import { FloatingReviewsPanel } from "@/components/organisms/FloatingReviewsPanel/FloatingReviewsPanel"; +import { Background, ReactFlow } from "@xyflow/react"; +import { parseAsString, useQueryStates } from "nuqs"; +import { useCallback, useMemo } from "react"; +import { useShallow } from "zustand/react/shallow"; +import { useGraphStore } from "../../../stores/graphStore"; +import { useNodeStore } from "../../../stores/nodeStore"; +import { BuilderActions } from "../../BuilderActions/BuilderActions"; +import { DraftRecoveryPopup } from "../../DraftRecoveryDialog/DraftRecoveryPopup"; +import { FloatingSafeModeToggle } from "../../FloatingSafeModeToogle"; +import NewControlPanel from "../../NewControlPanel/NewControlPanel"; +import CustomEdge from "../edges/CustomEdge"; +import { useCustomEdge } from "../edges/useCustomEdge"; +import { CustomNode } from "../nodes/CustomNode/CustomNode"; +import { CustomControls } from "./components/CustomControl"; +import { GraphLoadingBox } from "./components/GraphLoadingBox"; +import { RunningBackground } from "./components/RunningBackground"; import { TriggerAgentBanner } from "./components/TriggerAgentBanner"; import { resolveCollisions } from "./helpers/resolve-collision"; -import { FloatingSafeModeToggle } from "../../FloatingSafeModeToogle"; -import { DraftRecoveryPopup } from "../../DraftRecoveryDialog/DraftRecoveryPopup"; +import { useCopyPaste } from "./useCopyPaste"; +import { useFlow } from "./useFlow"; +import { useFlowRealtime } from "./useFlowRealtime"; export const Flow = () => { const [{ flowID, flowExecutionID }] = useQueryStates({ @@ -42,14 +42,18 @@ export const Flow = () => { const nodes = useNodeStore(useShallow((state) => state.nodes)); const setNodes = useNodeStore(useShallow((state) => state.setNodes)); + const onNodesChange = useNodeStore( useShallow((state) => state.onNodesChange), ); + const hasWebhookNodes = useNodeStore( useShallow((state) => state.hasWebhookNodes()), ); + const nodeTypes = useMemo(() => ({ custom: CustomNode }), []); const edgeTypes = useMemo(() => ({ custom: CustomEdge }), []); + const onNodeDragStop = useCallback(() => { setNodes( resolveCollisions(nodes, { @@ -80,6 +84,7 @@ export const Flow = () => { const isGraphRunning = useGraphStore( useShallow((state) => state.isGraphRunning), ); + return (
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeInputs.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeInputs.tsx index 683a854c21..e9d077bde1 100644 --- a/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeInputs.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeInputs.tsx @@ -2,6 +2,7 @@ import { ConnectionData, CustomNodeData, } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode"; +import { NodeTableInput } from "@/app/(platform)/build/components/legacy-builder/NodeTableInput"; import { CredentialsInput } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs"; import { Button } from "@/components/__legacy__/ui/button"; import { Calendar } from "@/components/__legacy__/ui/calendar"; @@ -28,7 +29,6 @@ import { } from "@/components/__legacy__/ui/select"; import { Switch } from "@/components/atoms/Switch/Switch"; import { GoogleDrivePickerInput } from "@/components/contextual/GoogleDrivePicker/GoogleDrivePickerInput"; -import { NodeTableInput } from "@/components/node-table-input"; import { BlockIOArraySubSchema, BlockIOBooleanSubSchema, diff --git a/autogpt_platform/frontend/src/components/node-table-input.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeTableInput.tsx similarity index 96% rename from autogpt_platform/frontend/src/components/node-table-input.tsx rename to autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeTableInput.tsx index 9c1a8003ee..0e27d98ba2 100644 --- a/autogpt_platform/frontend/src/components/node-table-input.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeTableInput.tsx @@ -1,15 +1,15 @@ -import React, { FC, useCallback, useEffect, useState } from "react"; +import { FC, useCallback, useEffect, useState } from "react"; -import { PlusIcon, XIcon } from "@phosphor-icons/react"; -import { cn } from "@/lib/utils"; import NodeHandle from "@/app/(platform)/build/components/legacy-builder/NodeHandle"; import { BlockIOTableSubSchema, - TableRow, TableCellValue, + TableRow, } from "@/lib/autogpt-server-api/types"; -import { Input } from "./atoms/Input/Input"; -import { Button } from "./atoms/Button/Button"; +import { cn } from "@/lib/utils"; +import { PlusIcon, XIcon } from "@phosphor-icons/react"; +import { Button } from "../../../../../components/atoms/Button/Button"; +import { Input } from "../../../../../components/atoms/Input/Input"; interface NodeTableInputProps { /** Unique identifier for the node in the builder graph */ diff --git a/autogpt_platform/frontend/src/app/(platform)/marketplace/agent/[creator]/[slug]/page.tsx b/autogpt_platform/frontend/src/app/(platform)/marketplace/agent/[creator]/[slug]/page.tsx index 124db89385..8106694fe7 100644 --- a/autogpt_platform/frontend/src/app/(platform)/marketplace/agent/[creator]/[slug]/page.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/marketplace/agent/[creator]/[slug]/page.tsx @@ -1,15 +1,15 @@ -import { Metadata } from "next"; -import { getServerUser } from "@/lib/supabase/server/getServerUser"; +import { prefetchGetV2GetAgentByStoreIdQuery } from "@/app/api/__generated__/endpoints/library/library"; import { getV2GetSpecificAgent, prefetchGetV2GetSpecificAgentQuery, prefetchGetV2ListStoreAgentsQuery, } from "@/app/api/__generated__/endpoints/store/store"; import { StoreAgentDetails } from "@/app/api/__generated__/models/storeAgentDetails"; -import { MainAgentPage } from "../../../components/MainAgentPage/MainAgentPage"; import { getQueryClient } from "@/lib/react-query/queryClient"; -import { prefetchGetV2GetAgentByStoreIdQuery } from "@/app/api/__generated__/endpoints/library/library"; +import { getServerUser } from "@/lib/supabase/server/getServerUser"; import { dehydrate, HydrationBoundary } from "@tanstack/react-query"; +import { Metadata } from "next"; +import { MainAgentPage } from "../../../components/MainAgentPage/MainAgentPage"; export const dynamic = "force-dynamic"; diff --git a/autogpt_platform/frontend/src/app/(platform)/marketplace/creator/[creator]/page.tsx b/autogpt_platform/frontend/src/app/(platform)/marketplace/creator/[creator]/page.tsx index 7d8158b123..e2c9f2ee01 100644 --- a/autogpt_platform/frontend/src/app/(platform)/marketplace/creator/[creator]/page.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/marketplace/creator/[creator]/page.tsx @@ -1,13 +1,13 @@ -import { getQueryClient } from "@/lib/react-query/queryClient"; import { getV2GetCreatorDetails, prefetchGetV2GetCreatorDetailsQuery, prefetchGetV2ListStoreAgentsQuery, } from "@/app/api/__generated__/endpoints/store/store"; -import { dehydrate, HydrationBoundary } from "@tanstack/react-query"; -import { MainCreatorPage } from "../../components/MainCreatorPage/MainCreatorPage"; -import { Metadata } from "next"; import { CreatorDetails } from "@/app/api/__generated__/models/creatorDetails"; +import { getQueryClient } from "@/lib/react-query/queryClient"; +import { dehydrate, HydrationBoundary } from "@tanstack/react-query"; +import { Metadata } from "next"; +import { MainCreatorPage } from "../../components/MainCreatorPage/MainCreatorPage"; export const dynamic = "force-dynamic"; diff --git a/autogpt_platform/frontend/src/app/global-error.tsx b/autogpt_platform/frontend/src/app/global-error.tsx index 07b22f1c15..5391c2e433 100644 --- a/autogpt_platform/frontend/src/app/global-error.tsx +++ b/autogpt_platform/frontend/src/app/global-error.tsx @@ -1,16 +1,15 @@ "use client"; -import * as Sentry from "@sentry/nextjs"; import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard"; +import * as Sentry from "@sentry/nextjs"; import { useEffect } from "react"; -export default function GlobalError({ - error, - reset, -}: { +interface Props { error: Error & { digest?: string }; reset: () => void; -}) { +} + +export default function GlobalError({ error, reset }: Props) { useEffect(() => { Sentry.captureException(error); }, [error]);