add the ability to add nodes(with the json format for now, changing to templates soon)

src/renderer/components/Experiment/Workflows/NewNodeModal.tsx

+import {
+  Button,
+  DialogContent,
+  DialogTitle,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  Input,
+  Modal,
+  ModalClose,
+  ModalDialog,
+  Stack,
+  Textarea,
+} from '@mui/joy';
+import { useState } from 'react';
+
+import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
+
+export default function NewNodeModal({ open, onClose, workflowId }) {
+  const [state, setState] = useState(null);
+
+  return (
+    <Modal open={open} onClose={() => onClose()}>
+      <ModalDialog>
+        <ModalClose />
+        <DialogTitle>Create new Node</DialogTitle>
+        <DialogContent>Fill in the information.</DialogContent>
+        <form
+          onSubmit={async (event: React.FormEvent<HTMLFormElement>) => {
+            event.preventDefault();
+            const formData = new FormData(event.currentTarget);
+            const node = formData.get('node') as string;
+            //const nodes = formData.get('nodes') as string;
+            await fetch(
+              chatAPI.Endpoints.Workflows.AddNode(
+                workflowId,
+                node
+              )
+            );
+            onClose();
+          }}
+        >
+          <Stack spacing={2}>
+            <FormControl>
+              <FormLabel>Nodes</FormLabel>
+              <Textarea minRows={4} autoFocus required name="node" />
+            </FormControl>
+            <Button type="submit">Submit</Button>
+          </Stack>
+        </form>
+      </ModalDialog>
+    </Modal>
+  );
+}

src/renderer/components/Experiment/Workflows/index.tsx

@@ -12,18 +12,21 @@ import {
 import { Background, ControlButton, Controls, ReactFlow } from '@xyflow/react';
 
 import '@xyflow/react/dist/style.css';
-import { PlayIcon, PlusCircleIcon, WorkflowIcon } from 'lucide-react';
+import { PlayIcon, PlusCircleIcon, PlusIcon, WorkflowIcon } from 'lucide-react';
 import { useState } from 'react';
 
 import * as chatAPI from '../../../lib/transformerlab-api-sdk';
 import useSWR from 'swr';
 import NewWorkflowModal from './NewWorkflowModal';
+import NewNodeModal from './NewNodeModal';
 
 const fetcher = (url: any) => fetch(url).then((res) => res.json());
 
 export default function Workflows({ experimentInfo }) {
   const [selectedWorkflow, setSelectedWorkflow] = useState(null);
   const [newWorkflowModalOpen, setNewWorkflowModalOpen] = useState(false);
+  const [newNodeflowModalOpen, setNewNodeflowModalOpen] = useState(false);
+
   const {
     data: workflowsData,
     error: workflowsError,
@@ -100,6 +103,16 @@ export default function Workflows({ experimentInfo }) {
         }}
         experimentId={experimentInfo?.id}
       />
+      {selectedWorkflow &&
+      <NewNodeModal
+        open={newNodeflowModalOpen}
+        onClose={() => {
+          setNewNodeflowModalOpen(false);
+          mutateWorkflows();
+        }}
+        workflowId={selectedWorkflow?.id}
+      />
+      }
       <Typography level="h1">Workflows</Typography>
       <Typography level="body-lg" mb={3}>
         This is where it will all go
@@ -193,6 +206,12 @@ export default function Workflows({ experimentInfo }) {
                     Running
                   </Button>
                 )}
+                <Button
+                    startDecorator={<PlusIcon />}
+                    onClick={() => setNewNodeflowModalOpen(true)}
+                  >
+                    Add Node
+                </Button>
                 <Button variant="outlined">Edit</Button>
                 <Button variant="outlined">Fight</Button>
               </Box>