Project structure changed

space_flow/package-lock.json

@@ -9,6 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "@floating-ui/react": "^0.19.1",
+        "@headlessui/react": "^1.7.10",
+        "@heroicons/react": "^2.0.15",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -18,6 +20,9 @@
         "@types/react-dom": "^18.0.10",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^4.7.1",
+        "react-laag": "^2.0.5",
+        "react-router-dom": "^6.8.1",
         "react-scripts": "5.0.1",
         "reactflow": "^11.5.5",
         "tailwindcss": "^3.2.6",
@@ -2239,6 +2244,29 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/@headlessui/react": {
+      "version": "1.7.10",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.10.tgz",
+      "integrity": "sha512-1m66h/5eayTEZVT2PI13/2PG3EVC7a9XalmUtVSC8X76pcyKYMuyX1XAL2RUtCr8WhoMa/KrDEyoeU5v+kSQOw==",
+      "dependencies": {
+        "client-only": "^0.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
+    "node_modules/@heroicons/react": {
+      "version": "2.0.15",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.15.tgz",
+      "integrity": "sha512-CZ2dGWgWG3/z5LEoD5D3MEr1syn45JM/OB2aDpw531Ryecgkz2V7TWQ808P0lva7zP003PVW6WlwbofsYyga3A==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -3189,6 +3217,14 @@
         "react-dom": ">=17"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.2.tgz",
+      "integrity": "sha512-t54ONhl/h75X94SWsHGQ4G/ZrCEguKSRQr7DrjTciJXW0YU1QhlwYeycvK5JgkzlxmvrK7wq1NB/PLtHxoiDcA==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -5769,6 +5805,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+    },
     "node_modules/cliui": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -14447,11 +14488,31 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-icons": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-laag": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/react-laag/-/react-laag-2.0.5.tgz",
+      "integrity": "sha512-RCvublJhdcgGRHU1wMYJ8kRtnYsKUgYusLvVhMuftg65POnnOB4+fwXvnETm6adc0cMnc1spujlrK6bGIz6aug==",
+      "dependencies": {
+        "tiny-warning": "^1.0.3"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -14460,6 +14521,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.1.tgz",
+      "integrity": "sha512-Jgi8BzAJQ8MkPt8ipXnR73rnD7EmZ0HFFb7jdQU24TynGW1Ooqin2KVDN9voSC+7xhqbbCd2cjGUepb6RObnyg==",
+      "dependencies": {
+        "@remix-run/router": "1.3.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.1.tgz",
+      "integrity": "sha512-67EXNfkQgf34P7+PSb6VlBuaacGhkKn3kpE51+P6zYSG2kiRoumXEL6e27zTa9+PGF2MNXbgIUHTVlleLbIcHQ==",
+      "dependencies": {
+        "@remix-run/router": "1.3.2",
+        "react-router": "6.8.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -16001,6 +16092,11 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",

space_flow/package.json

@@ -4,6 +4,8 @@
   "private": true,
   "dependencies": {
     "@floating-ui/react": "^0.19.1",
+    "@headlessui/react": "^1.7.10",
+    "@heroicons/react": "^2.0.15",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -13,6 +15,9 @@
     "@types/react-dom": "^18.0.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1",
+    "react-laag": "^2.0.5",
+    "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",
     "reactflow": "^11.5.5",
     "tailwindcss": "^3.2.6",

space_flow/public/index.html

@@ -6,10 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
-<body >
+<body class="h-full overflow-hidden">
-    <div id='root'>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
-
+    <div class="w-screen h-screen overflow-hidden" id='root'>
     </div>
-    
 </body>
 </html>

space_flow/src/App.tsx

@@ -1,14 +1,149 @@
-import Flow from "./flow";
+import "reactflow/dist/style.css";
+import { useState, useRef, useEffect, useContext } from "react";
+import { ReactFlowProvider } from "reactflow";
+import "./CustomNodes/inputTextFolder/inputText.css";
 import "./App.css";
-import PopUpProvider from "./context/popUpContext";
+import { useLocation } from "react-router-dom";
-function App() {
+import ErrorAlert from "./alerts/error";
+import NoticeAlert from "./alerts/notice";
+import SuccessAlert from "./alerts/success";
+import ExtraSidebar from "./components/ExtraSidebarComponent";
+import { alertContext } from "./contexts/alertContext"; 
+import { locationContext } from "./contexts/locationContext";
+import FlowPage from "./pages/FlowPage";
+import Sidebar from "./components/SidebarComponent";
+import Header from "./components/HeaderComponent";
+
+export default function App() {
+  var _ = require("lodash");
+  
+
+  let { setAtual, setShowSideBar, setIsStackedOpen} =
+    useContext(locationContext);
+  let location = useLocation();
+  useEffect(() => {
+    setAtual(location.pathname.replace(/\/$/g, "").split("/"));
+    setShowSideBar(true);
+    setIsStackedOpen(true);
+  }, [location.pathname, setAtual, setIsStackedOpen, setShowSideBar]);
+
+  const {
+    errorData,
+    errorOpen,
+    setErrorOpen,
+    noticeData,
+    noticeOpen,
+    setNoticeOpen,
+    successData,
+    successOpen,
+    setSuccessOpen,
+  } = useContext(alertContext);
+
+  const [alertsList, setAlertsList] = useState([]);
+
+  useEffect(() => {
+    if (errorOpen && errorData) {
+      setErrorOpen(false);
+      setAlertsList((old) => {
+        let newAlertsList = [
+          ...old,
+          { type: "error", data: _.cloneDeep(errorData), id: _.uniqueId() },
+        ];
+        return newAlertsList;
+      });
+    } else if (noticeOpen && noticeData) {
+      setNoticeOpen(false);
+      setAlertsList((old) => {
+        let newAlertsList = [
+          ...old,
+          { type: "notice", data: _.cloneDeep(noticeData), id: _.uniqueId() },
+        ];
+        return newAlertsList;
+      });
+    } else if (successOpen && successData) {
+      setSuccessOpen(false);
+      setAlertsList((old) => {
+        let newAlertsList = [
+          ...old,
+          { type: "success", data: _.cloneDeep(successData), id: _.uniqueId() },
+        ];
+        return newAlertsList;
+      });
+    }
+  }, [errorData, errorOpen, noticeData, noticeOpen, successData, successOpen]);
+
+  const removeAlert = (id: number) => {
+    setAlertsList((prevAlertsList) =>
+      prevAlertsList.filter((alert) => alert.id !== id)
+    );
+  };
+
+  const user = {
+    name: "Whitney Francis",
+    email: "whitney.francis@example.com",
+    imageUrl:
+      "https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+  };
+
+  const userNavigation = [
+    { name: "Your Projects", href: "/" },
+    {
+      name: "Account settings",
+      href: "http://localhost:4455/.ory/kratos/public/self-service/settings/browser",
+    },
+    { name: "Sign out", href: "/" },
+  ];
+
   return (
-    <PopUpProvider>
+    //need parent component with width and height
-      <div className="w-screen h-screen">
+    <div className="h-full flex flex-col">
-        <Flow></Flow>
+      <ReactFlowProvider>
-      </div>
+        <div className="flex grow-0 shrink basis-auto">
-    </PopUpProvider>
+          <Header userNavigation={userNavigation} user={user}></Header>
+        </div>
+        <div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
+          <Sidebar />
+          <ExtraSidebar />
+
+          {/* Main area */}
+          <main className="min-w-0 flex-1 border-t border-gray-200 flex">
+            {/* Primary column */}
+            <div className="w-full h-full">
+              <FlowPage />
+            </div>
+          </main>
+        </div>
+        <div className="flex z-50 flex-col-reverse fixed bottom-5 left-5">
+          {alertsList.map((alert) => (
+            <div key={alert.id}>
+              {alert.type === "error" ? (
+                <ErrorAlert
+                  key={alert.id}
+                  title={alert.data.title}
+                  list={alert.data.list}
+                  id={alert.id}
+                  removeAlert={removeAlert}
+                />
+              ) : alert.type === "notice" ? (
+                <NoticeAlert
+                  key={alert.id}
+                  title={alert.data.title}
+                  link={alert.data.link}
+                  id={alert.id}
+                  removeAlert={removeAlert}
+                />
+              ) : (
+                <SuccessAlert
+                  key={alert.id}
+                  title={alert.data.title}
+                  id={alert.id}
+                  removeAlert={removeAlert}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      </ReactFlowProvider>
+    </div>
   );
 }
-
-export default App;

space_flow/src/CustomNodes/PromptNode/index.tsx

@@ -1,6 +1,6 @@
 import { Handle, Position } from "reactflow";
 import { useContext } from "react";
-import { PopUpContext } from "../../context/popUpContext";
+import { PopUpContext } from "../../contexts/popUpContext";
 
 
 export default function PromptNode({ data }) {

space_flow/src/components/sidebar.tsx

@@ -1,25 +0,0 @@
-import { prompt } from "../data_assets/prompt";
-import { llm_chain } from "../data_assets/llm_chain";
-
-export function Sidebar(){
-
-    function onDragStart(event:React.DragEvent<any>,nodeType){
-        let json;
-        event.dataTransfer.setData('application/reactflow',nodeType)
-        event.dataTransfer.effectAllowed = 'move'
-        if(nodeType==="promptNode"){
-            json = JSON.stringify(prompt)
-        }
-        if(nodeType==="modelNode"){
-            json = JSON.stringify(llm_chain)
-        }
-        event.dataTransfer.setData('json',json);
-    }
-
-    return(
-    <div className="h-full w-48 bg-slate-200 flex flex-col">
-        <div className="w-full text-center border border-black cursor-grab" draggable onDragStart={(event)=>onDragStart(event,'promptNode')}> prompt Node</div>
-        <div draggable className="w-full text-center border border-black cursor-grab" onDragStart={(event)=>onDragStart(event,'modelNode')}> Model Node</div>
-    </div>
-    )
-}

space_flow/src/context/popUpContext.tsx

@@ -1,32 +0,0 @@
-import { createContext } from "react";
-import React, { useState } from 'react';
-
-export const PopUpContext = createContext({
-    openPopUp: (popUpElement: JSX.Element) => {},
-    closePopUp: () => {}
-});
-
-interface PopUpProviderProps {
-  children: React.ReactNode;
-}
-
-const PopUpProvider = ({ children }: PopUpProviderProps) => {
-  const [popUpElement, setPopUpElement] = useState<JSX.Element | null>(null);
-
-  const openPopUp = (element: JSX.Element) => {
-    setPopUpElement(element);
-  };
-
-  const closePopUp = () => {
-    setPopUpElement(null);
-  };
-
-  return (
-    <PopUpContext.Provider value={{ openPopUp, closePopUp }}>
-      {children}
-      {popUpElement}
-    </PopUpContext.Provider>
-  );
-};
-
-export default PopUpProvider;

space_flow/src/flow/index.tsx

@@ -1,81 +0,0 @@
-import 'reactflow/dist/style.css';
-import { useState, useCallback, useRef } from 'react';
-import ReactFlow, { addEdge, applyEdgeChanges, applyNodeChanges, Background, Controls, Position, useNodesState, useEdgesState, ReactFlowProvider } from 'reactflow';
-import type { Node, Edge } from 'reactflow';
-import TextUpdaterNode from '../CustomNodes/inputTextFolder';
-import '../CustomNodes/inputTextFolder/inputText.css'
-import PromptNode from '../CustomNodes/PromptNode';
-import { prompt } from '../data_assets/prompt';
-import { Sidebar } from '../components/sidebar';
-import ModelNode from '../CustomNodes/ModelNode';
-    // outside component to avoid render trigger
-    const nodeTypes = {textUpdater:TextUpdaterNode, promptNode:PromptNode,modelNode:ModelNode}
-
-    const rfStyle={
-        backgroundCOlor:"#B8CEFF"
-    }
-    let id = 0;
-    const getId = () => `dndnode_${id++}`;
-
-export default function Flow(){
-    
-    const reactFlowWrapper = useRef(null)
-    const [nodes,setNodes,onNodesChange] =  useNodesState([])
-    const [edges,setEdges, onEdgesChange] = useEdgesState([])
-    const [reactFlowInstance,setReactFlowInstance] = useState(null)
-    const onConnect = useCallback((params)=>setEdges((eds)=>addEdge(params,eds)),[])
-    const onDragOver = useCallback((event) => {
-        event.preventDefault();
-        event.dataTransfer.dropEffect = 'move';
-      }, []);
-    const onDrop = useCallback(
-        (event)=>{
-            event.preventDefault();
-        
-            const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
-            const type = event.dataTransfer.getData('application/reactflow');
-            let data = JSON.parse(event.dataTransfer.getData('json'))
-            // check if the dropped element is valid
-            if (typeof type === 'undefined' || !type) {
-              return;
-            }
-
-            const position = reactFlowInstance.project({x:event.clientX-reactflowBounds.top, y:event.clientY - reactflowBounds.top})
-            const newNode = {
-                id:getId(),
-                type,
-                position,
-                data:{...data,delete:()=>console.log("asdsdsadad")}
-            }
-            setNodes((nds)=>nds.concat(newNode))
-
-
-
-        },[reactFlowInstance])
-
-    return (
-        //need parent component with width and height
-        <div className='w-full h-full flex flex-row'>
-            <ReactFlowProvider>
-            <Sidebar/>
-            <div className='w-screen h-full' ref={reactFlowWrapper}>
-            <ReactFlow 
-            nodes={nodes}
-            edges={edges}
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
-            onConnect = {onConnect}
-            onInit={setReactFlowInstance}
-            nodeTypes={nodeTypes}
-            onDragOver={onDragOver}
-            onDrop={onDrop}
-            fitView
-            >
-                <Background/>
-                    <Controls></Controls>
-            </ReactFlow>
-            </div>
-            </ReactFlowProvider>
-        </div>
-    )
-}

space_flow/src/index.tsx

@@ -2,14 +2,18 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter } from 'react-router-dom';
+import ContextWrapper from './contexts';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
-  <React.StrictMode>
+    <ContextWrapper>
-    <App />
+      <BrowserRouter>
-  </React.StrictMode>
+        <App />
+      </BrowserRouter>
+    </ContextWrapper>
 );
 
 // If you want to start measuring performance in your app, pass a function