got data from server

space_flow/src/components/ExtraSidebarComponent/index.tsx

@@ -120,7 +120,7 @@ export default function ExtraSidebar() {
                 </nav>
               </div>
             ) : (
-              <>{extraComponent}</>
+              extraComponent
             )}
           </div>
         </div>

space_flow/src/contexts/locationContext.tsx

@@ -23,7 +23,7 @@ const initialValue= {
     setShowSideBar:()=>{},
     extraNavigation: {title:""},
     setExtraNavigation:()=>{},
-    extraComponent: null,
+    extraComponent: <></>,
     setExtraComponent:()=>{},
 }
 
@@ -36,7 +36,7 @@ export function LocationProvider({children}){
     const [isStackedOpen,setIsStackedOpen] = useState(initialValue.isStackedOpen)
     const [showSideBar,setShowSideBar] = useState(initialValue.showSideBar)
     const [extraNavigation, setExtraNavigation] = useState({title:""})
-    const [extraComponent, setExtraComponent] = useState(null)
+    const [extraComponent, setExtraComponent] = useState(<></>)
     return (
         <locationContext.Provider value={{isStackedOpen,setIsStackedOpen,atual,setAtual, showSideBar, setShowSideBar,extraNavigation, setExtraNavigation, extraComponent, setExtraComponent}}>
             {children}

space_flow/src/controllers/NodesServices/index.ts

@@ -1,61 +1,5 @@
 import axios from "axios";
 
-export async function getPrompts() {
+export async function getAll() {
-  const promises = (await axios.get("http://localhost:5003/list/prompts")).data.map(async (value, index) => {
+    return await axios.get("http://localhost:5003/");
-    const prompt = await axios.get("http://localhost:5003/signatures/prompt", {
-      params: { name: value },
-    });
-    return { name: value, type: "promptNode", ...prompt.data };
-  });
-  return Promise.all(promises);
-}
-
-export async function getChains() {
-  const promises = (await axios.get("http://localhost:5003/list/chains")).data.map(async (value, index) => {
-    const chain = await axios.get("http://localhost:5003/signatures/chain", {
-      params: { name: value },
-    });
-    return { name: value, type: "chainNode", ...chain.data };
-  });
-  return Promise.all(promises);
-}
-
-export async function getAgents() {
-  const promises = (await axios.get("http://localhost:5003/list/agents")).data.map(async (value, index) => {
-    const chain = await axios.get("http://localhost:5003/signatures/agent", {
-      params: { name: value },
-    });
-    return { name: value, type: "agentNode", ...chain.data };
-  });
-  return Promise.all(promises);
-}
-
-export async function getMemories() {
-  const promises = (await axios.get("http://localhost:5003/list/memories")).data.map(async (value, index) => {
-    const chain = await axios.get("http://localhost:5003/signatures/memory", {
-      params: { name: value },
-    });
-    return { name: value, type: "memoryNode", ...chain.data };
-  });
-  return Promise.all(promises);
-}
-
-export async function getTools() {
-  const promises = (await axios.get("http://localhost:5003/list/tools")).data.map(async (value, index) => {
-    const prompt = await axios.get("http://localhost:5003/signatures/tool", {
-      params: { name: value },
-    });
-    return { name: value, type: "toolNode", ...prompt.data };
-  });
-  return Promise.all(promises);
-}
-
-export async function getModels() {
-  const promises = (await axios.get("http://localhost:5003/list/llms")).data.map(async (value, index) => {
-    const prompt = await axios.get("http://localhost:5003/signatures/llm", {
-      params: { name: value },
-    });
-    return { name: value, type: "modelNode", ...prompt.data };
-  });
-  return Promise.all(promises);
 }

space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -1,10 +1,18 @@
-import { Bars2Icon, CommandLineIcon, CpuChipIcon, LightBulbIcon, LinkIcon, RocketLaunchIcon, WrenchScrewdriverIcon, ViewColumnsIcon } from "@heroicons/react/24/outline";
+import { Bars2Icon, ChartBarIcon } from "@heroicons/react/24/outline";
 import { llm_chain } from "../../../../data_assets/llm_chain";
 import { prompt } from "../../../../data_assets/prompt";
 import DisclosureComponent from "../DisclosureComponent";
-import { borderLColors, nodeColors, nodeIcons } from "../../../../utils";
+import { nodeColors, nodeIcons, toFirstUpperCase } from "../../../../utils";
+import { useEffect, useState } from "react";
+import { getAll } from "../../../../controllers/NodesServices";
 
-export function ExtraSidebar() {
+export default function ExtraSidebar() {
+
+  const [data, setData] = useState({});
+
+  useEffect(() => {
+    getAll().then((d) => { setData(d.data);});
+  }, []);
 
   function onDragStart(event: React.DragEvent<any>, nodeType) {
     let json;
@@ -33,22 +41,27 @@ export function ExtraSidebar() {
 
   return (
       <div className="mt-4">
+      {Object.keys(data).map((d, i) => (
         <DisclosureComponent
-        button={{ title: "Prompts", Icon: nodeIcons['prompt'] }}
+          key={i} button={{ title: toFirstUpperCase(d), Icon: nodeIcons[d] }}
         >
-        <div className="p-2">
+          {Object.keys(data[d]).map((t, k) => (
-          <div draggable className={" cursor-grab border-l-8 rounded-l-md"} style={{borderLeftColor: nodeColors['prompt']}} onDragStart={(event) => onDragStart(event, "promptNode")}>
+            <div key={k} className="p-2 pb-0">
               <div
-            
+                draggable
-            className="flex justify-between text-sm p-4 items-center h-12 border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2"
+                className={" cursor-grab border-l-8 rounded-l-md"}
-            
+                style={{ borderLeftColor: nodeColors[d] }}
+                onDragStart={(event) => onDragStart(event, "promptNode")}
               >
-            <span className="text-black">Prompt</span>
+                <div className="flex justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
-            <Bars2Icon className="w-6 text-gray-400" />
+                  <span className="text-black truncate">{t}</span>
+                  <Bars2Icon className="ml-3 w-6 h-6 text-gray-400" />
                 </div>
               </div>
             </div>
+          ))}
         </DisclosureComponent>
+      ))}
     </div>
   );
 }

space_flow/src/pages/FlowPage/index.tsx

@@ -9,15 +9,15 @@ import ReactFlow, {
 import PromptNode from "../../CustomNodes/PromptNode";
 import ModelNode from "../../CustomNodes/ModelNode";
 import { locationContext } from "../../contexts/locationContext";
-import { ExtraSidebar } from "./components/extraSidebarComponent";
+import ExtraSidebar from "./components/extraSidebarComponent";
 import AgentNode from "../../CustomNodes/AgentNode";
 import ChainNode from "../../CustomNodes/ChainNode";
 import ToolsNode from "../../CustomNodes/ToolsNode";
 import MemoryNode from "../../CustomNodes/MemoryNode";
 import axios from "axios";
-import {getPrompts, getChains,getAgents,getMemories, getModels,getTools} from "../../controllers/NodesServices";
 import { generateUiNode } from "../../controllers/UiGenerator";
 import Chat from "../../components/chatComponent";
+import { getAll } from "../../controllers/NodesServices";
 
 const nodeTypes = {
   promptNode: PromptNode,
@@ -34,10 +34,11 @@ export default function FlowPage() {
   // getAgents().then(result=>console.log(result))
   // getMemories().then(result=>console.log(result))
   // getModels().then(result=>result.forEach(model=>console.log(model)))
-  getTools().then(result=>result.forEach(tool=>console.log(tool)))
 
   // outside component to avoid render trigger
 
+  
+
   const reactFlowWrapper = useRef(null);
 
   const rfStyle = {
@@ -51,9 +52,9 @@ export default function FlowPage() {
   const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
 
   useEffect(() => {
-    setExtraComponent(ExtraSidebar);
+    setExtraComponent(<ExtraSidebar />);
     setExtraNavigation({title: "Nodes"})
-  }, []);
+  }, [setExtraComponent, setExtraNavigation]);
 
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);

space_flow/src/utils.ts

@@ -87,22 +87,22 @@ export function classNames(...classes) {
   } */
 
   export const nodeColors = {
-    prompt: "#7C7C7C",
+    prompts: "#7C7C7C",
-    model: "#35ADAE",
+    llms: "#35ADAE",
-    chain: "#FFDC35",
+    chains: "#FFDC35",
-    agent: "#903BBE",
+    agents: "#903BBE",
-    tool: "#FF3434",
+    tools: "#FF3434",
-    memory: "#FF9135",
+    memories: "#FF9135",
   }
 
 
   export const nodeIcons = {
-    agent: RocketLaunchIcon,
+    agents: RocketLaunchIcon,
-    chain: LinkIcon,
+    chains: LinkIcon,
-    memory: CpuChipIcon,
+    memories: CpuChipIcon,
-    model: LightBulbIcon,
+    llms: LightBulbIcon,
-    prompt: CommandLineIcon,
+    prompts: CommandLineIcon,
-    tool: WrenchScrewdriverIcon,
+    tools: WrenchScrewdriverIcon,
   }
   
   export const bgColors = {