Repository: Significant-Gravitas/Auto-GPT
File: rnd/autogpt_builder/src/components/Flow.tsx (TypeScript)

Code before:
      copiedEdges,
      addEdges,
      nodeId,
    ],
  );

  useEffect(() => {
    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [handleKeyDown]);

  const onNodesDelete = useCallback(() => {
    clearNodesStatusAndOutput();
  }, [clearNodesStatusAndOutput]);

  // This is to check for the Input and Output block, if they are used they are passed to Runner ui's input and output screen
  const getBlockInputsAndOutputs = useCallback(() => {
    const inputBlocks = nodes.filter(
      (node) => node.data.block_id === "c0a8e994-ebf1-4a9c-a4d8-89d09c86741b",
    );

    const outputBlocks = nodes.filter(
      (node) => node.data.block_id === "363ae599-353e-4804-937e-b2ee3cef3da4",
    );

    const inputs = inputBlocks.map((node) => ({
      id: node.id,
      type: "input" as const,
      inputSchema: node.data.inputSchema,
      hardcodedValues: {
        name: node.data.hardcodedValues.name || "",
        description: node.data.hardcodedValues.description || "",
        value: node.data.hardcodedValues.value,
        placeholder_values: node.data.hardcodedValues.placeholder_values || [],
        limit_to_placeholder_values:
          node.data.hardcodedValues.limit_to_placeholder_values || false,
      },
    }));

    const outputs = outputBlocks.map((node) => {
      return {
        id: node.id,
        type: "output" as const,
        outputSchema: node.data.outputSchema,
        hardcodedValues: {
          name: node.data.hardcodedValues.name || "Output",
          description:
            node.data.hardcodedValues.description || "Output from the agent",
          value: node.data.hardcodedValues.value,

Review comment (suggestion):
I feel there is a better way to go about this but i wasnt sure if there was, if any one has any advice/ideas please let me know, this is just to check if there are input/output blocks in the UI

Code after:
      copiedEdges,
      addEdges,
      nodeId,
    ],
  );

  useEffect(() => {
    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [handleKeyDown]);

  const onNodesDelete = useCallback(() => {
    clearNodesStatusAndOutput();
  }, [clearNodesStatusAndOutput]);

  const editorControls: Control[] = [
    {
      label: "Undo",
      icon: <IconUndo2 />,
      onClick: handleUndo,
    },
    {
      label: "Redo",
      icon: <IconRedo2 />,
      onClick: handleRedo,
    },
    {
      label: !isRunning ? "Run" : "Stop",
      icon: !isRunning ? <IconPlay /> : <IconSquare />,
      onClick: !isRunning
        ? () => runnerUIRef.current?.runOrOpenInput()
        : requestStopRun,
    },
    {
      label: "Runner Output",
      icon: <LogOut size={18} strokeWidth={1.8} />,
      onClick: () => runnerUIRef.current?.openRunnerOutput(),
    },
  ];

  return (
    <FlowContext.Provider
      value={{ visualizeBeads, setIsAnyModalOpen, getNextNodeId }}
    >
      <div className={className}>
        <ReactFlow
          nodes={nodes}
          edges={edges}
          nodeTypes={{ custom: CustomNode }}