Update src/App.tsx

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import ReactFlow, { Controls, useNodesState, useEdgesState, addEdge, Node, Edge } from 'reactflow';
 import { FiFile } from 'react-icons/fi';
 
@@ -7,6 +7,7 @@ import './index.css';
 import TurboNode, { TurboNodeData } from './TurboNode';
 import TurboEdge from './TurboEdge';
 import FunctionIcon from './FunctionIcon';
+import Sidebar from './Sidebar';
 
 const initialNodes: Node<TurboNodeData>[] = [
   {
@@ -146,10 +147,35 @@ const App = () => {
     }
   };
 
-  const handleInputChange = (event) => {
+  const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     setInputData(event.target.value);
   };
 
+  useEffect(() => {
+    // Update nodes based on recursive steps and input data
+    // You can modify the nodes array or create new nodes dynamically
+    // based on the recursiveSteps and inputData values
+    // For example:
+    // const newNodes = [...nodes];
+    // for (let i = 0; i < recursiveSteps; i++) {
+    //   newNodes.push({
+    //     id: `recursive-${i}`,
+    //     position: { x: 100 * i, y: 200 },
+    //     data: {
+    //       icon: <FunctionIcon />,
+    //       title: `Recursive Step ${i + 1}`,
+    //       subline: 'Recursive prompt',
+    //       inputFields: [
+    //         { id: `recursive-input-${i}`, label: `Input ${i + 1}`, value: '' },
+    //       ],
+    //       options: [],
+    //     },
+    //     type: 'turbo',
+    //   });
+    // }
+    // setNodes(newNodes);
+  }, [recursiveSteps, inputData]);
+
   return (
     <div className="flow-container">
       <ReactFlow
@@ -186,23 +212,13 @@ 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>
+      <Sidebar
+        recursiveSteps={recursiveSteps}
+        addRecursiveStep={addRecursiveStep}
+        removeRecursiveStep={removeRecursiveStep}
+        inputData={inputData}
+        handleInputChange={handleInputChange}
+      />
     </div>
   );
 };