Update src/App.tsx

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import ReactFlow, { Controls, useNodesState, useEdgesState, addEdge, Node, Edge } from 'reactflow';
 import { FiFile } from 'react-icons/fi';
 
@@ -131,9 +131,25 @@ const defaultEdgeOptions = {
 const App = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const [recursiveSteps, setRecursiveSteps] = useState(1);
+  const [inputData, setInputData] = useState('');
 
   const onConnect = useCallback((params) => setEdges((els) => addEdge(params, els)), []);
 
+  const addRecursiveStep = () => {
+    setRecursiveSteps((prevSteps) => prevSteps + 1);
+  };
+
+  const removeRecursiveStep = () => {
+    if (recursiveSteps > 1) {
+      setRecursiveSteps((prevSteps) => prevSteps - 1);
+    }
+  };
+
+  const handleInputChange = (event) => {
+    setInputData(event.target.value);
+  };
+
   return (
     <div className="flow-container">
       <ReactFlow
@@ -170,6 +186,23 @@ const App = () => {
           </defs>
         </svg>
       </ReactFlow>
+      <div className="options-panel">
+        <div>
+          <label>Recursive Steps:</label>
+          <input
+            type="number"
+            value={recursiveSteps}
+            min={1}
+            onChange={(e) => setRecursiveSteps(parseInt(e.target.value))}
+          />
+          <button onClick={addRecursiveStep}>+</button>
+          <button onClick={removeRecursiveStep}>-</button>
+        </div>
+        <div>
+          <label>Input Data:</label>
+          <textarea value={inputData} onChange={handleInputChange} />
+        </div>
+      </div>
     </div>
   );
 };