nested reactFlow inside tab

space_flow/src/App.tsx

@@ -12,6 +12,8 @@ import { locationContext } from "./contexts/locationContext";
 import FlowPage from "./pages/FlowPage";
 import Sidebar from "./components/SidebarComponent";
 import Header from "./components/HeaderComponent";
+import { TabsProvider } from "./contexts/tabsContext";
+import { TabsManager } from "./pages/FlowPage/flowManager";
 
 export default function App() {
   var _ = require("lodash");
@@ -108,7 +110,9 @@ export default function App() {
           <main className="min-w-0 flex-1 border-t border-gray-200 flex">
             {/* Primary column */}
             <div className="w-full h-full">
-              <FlowPage />
+              <TabsProvider>
+                <TabsManager></TabsManager>
+              </TabsProvider>
             </div>
           </main>
         </div>

space_flow/src/contexts/tabsContext.tsx

@@ -23,14 +23,18 @@ export const TabsContext = createContext<TabsContextType>(TabsContextInitialValu
 
 export function TabsProvider({children}){
     const [tabIndex,setTabIndex] = useState(0)
-    const [flows,setFlows] = useState<Array<flow>>([])
+    const [flows,setFlows] = useState<Array<flow>>(JSON.parse(window.sessionStorage.getItem('tabs'))??[])
     function removeFlow(index:number){
         let newFlows = flows
         newFlows.splice(index)
+        window.sessionStorage.setItem('tabs',JSON.stringify(newFlows))
         setFlows(newFlows)
     }
     function addFlow(newFlow:flow){
-        setFlows([...flows,newFlow])
+        let newFlows = [...flows,newFlow]
+        window.sessionStorage.setItem('tabs',JSON.stringify(newFlows))
+        setFlows(newFlows)
+        
     }
 
     return(

space_flow/src/pages/FlowPage/flowManager/index.tsx

@@ -1,52 +1,27 @@
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import FlowPage from '..';
-import 'react-tabs/style/react-tabs.css';
+import { TabsContext } from '../../../contexts/tabsContext';
+import TabComponent from './tabComponent';
+var _ = require("lodash");
 
-interface FlowTabProps {
-  flow:any;
-}
-
-function FlowTab() {
-  return (
-    <FlowPage></FlowPage>
-  );
-}
-
-function App() {
-  const [flows, setFlows] = useState([]); // Start with one flow
-  const [activeIndex, setActiveIndex] = useState(0);
-
-  function onElementsChange(flowIndex: number, elements: any[]) {
-    setFlows((prevFlows) => {
-      const newFlows = [...prevFlows];
-      newFlows[flowIndex] = elements;
-      return newFlows;
-    });
+export function TabsManager(){
+  const {flows,addFlow} = useContext(TabsContext);
+  if(flows.length===0){
+    addFlow({name:"untitled",flow:null,id:_.uniqueId()})
   }
 
-  function addTab() {
-    setFlows([...flows, []]); // Add a new flow to the state
-    setActiveIndex(flows.length); // Activate the new tab
-  }
-
-  return (
-    <Tabs selectedIndex={activeIndex} onSelect={setActiveIndex}>
+  return(
+    <Tabs className="h-full w-full flex flex-col">
       <TabList>
-        {flows.map((flow, index) => (
-          <Tab key={index}>Flow {index + 1}</Tab>
-        ))}
-        <button onClick={addTab}>+</button> {/* Render the plus button */}
+        {flows.map(flow=><Tab key={flow.id}><TabComponent>{flow.name}</TabComponent></Tab>)}
+        <Tab><button>+</button></Tab>
       </TabList>
-
-      {flows.map((flow, index) => (
-        <TabPanel key={index}>
-          <FlowTab />
-        </TabPanel>
-      ))}
+      {flows.map(flow=><TabPanel key={flow.id} className="h-full w-full"><FlowPage></FlowPage></TabPanel>)}
     </Tabs>
-  );
+  )
 }
+
 /*
 tabs initial logic
 TO DO

space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx

@@ -0,0 +1,12 @@
+type tabProps = {
+    name:string;
+}
+
+
+export default function TabComponent({children}){
+    return(
+        <div className="bg-blue-400 w-2">
+            {children}
+        </div>
+    )
+}

space_flow/src/pages/FlowPage/index.tsx

@@ -141,7 +141,7 @@ export default function FlowPage() {
         onDrop={onDrop}
       >
         <Background />
-        <Controls></Controls>
+        <Controls ></Controls>
       </ReactFlow>
       <Chat reactFlowInstance={reactFlowInstance} />
     </div>