From 8df0bd56ccc132338385fadccfad0f81985be4e5 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 14 Feb 2023 17:50:47 -0300 Subject: [PATCH] got data from server --- .../ExtraSidebarComponent/index.tsx | 2 +- space_flow/src/contexts/locationContext.tsx | 4 +- .../src/controllers/NodesServices/index.ts | 60 +------------------ .../extraSidebarComponent/index.tsx | 55 ++++++++++------- space_flow/src/pages/FlowPage/index.tsx | 11 ++-- space_flow/src/utils.ts | 24 ++++---- 6 files changed, 57 insertions(+), 99 deletions(-) diff --git a/space_flow/src/components/ExtraSidebarComponent/index.tsx b/space_flow/src/components/ExtraSidebarComponent/index.tsx index 2323409ff..d015b5726 100644 --- a/space_flow/src/components/ExtraSidebarComponent/index.tsx +++ b/space_flow/src/components/ExtraSidebarComponent/index.tsx @@ -120,7 +120,7 @@ export default function ExtraSidebar() { ) : ( - <>{extraComponent} + extraComponent )} diff --git a/space_flow/src/contexts/locationContext.tsx b/space_flow/src/contexts/locationContext.tsx index a3a16f099..1f3fe2378 100644 --- a/space_flow/src/contexts/locationContext.tsx +++ b/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 ( {children} diff --git a/space_flow/src/controllers/NodesServices/index.ts b/space_flow/src/controllers/NodesServices/index.ts index e52d2bbf4..8aa2af5fd 100644 --- a/space_flow/src/controllers/NodesServices/index.ts +++ b/space_flow/src/controllers/NodesServices/index.ts @@ -1,61 +1,5 @@ import axios from "axios"; -export async function getPrompts() { - const promises = (await axios.get("http://localhost:5003/list/prompts")).data.map(async (value, index) => { - 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); +export async function getAll() { + return await axios.get("http://localhost:5003/"); } diff --git a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 3f9f5aabb..b694bab5e 100644 --- a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -1,11 +1,19 @@ -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 default function ExtraSidebar() { + + const [data, setData] = useState({}); + + useEffect(() => { + getAll().then((d) => { setData(d.data);}); + }, []); -export function ExtraSidebar() { - function onDragStart(event: React.DragEvent, nodeType) { let json; event.dataTransfer.setData("application/reactflow", nodeType); @@ -32,23 +40,28 @@ export function ExtraSidebar() { } return ( -
- -
-
onDragStart(event, "promptNode")}> -
- Prompt - -
-
-
- +
+ {Object.keys(data).map((d, i) => ( + + {Object.keys(data[d]).map((t, k) => ( +
+
onDragStart(event, "promptNode")} + > +
+ {t} + +
+
+
+ ))} + + ))}
); } diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx index f2cd33611..97a5cbf69 100644 --- a/space_flow/src/pages/FlowPage/index.tsx +++ b/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(); setExtraNavigation({title: "Nodes"}) - }, []); + }, [setExtraComponent, setExtraNavigation]); const [nodes, setNodes, onNodesChange] = useNodesState([]); const [edges, setEdges, onEdgesChange] = useEdgesState([]); diff --git a/space_flow/src/utils.ts b/space_flow/src/utils.ts index a56486b8f..719c6a140 100644 --- a/space_flow/src/utils.ts +++ b/space_flow/src/utils.ts @@ -87,22 +87,22 @@ export function classNames(...classes) { } */ export const nodeColors = { - prompt: "#7C7C7C", - model: "#35ADAE", - chain: "#FFDC35", - agent: "#903BBE", - tool: "#FF3434", - memory: "#FF9135", + prompts: "#7C7C7C", + llms: "#35ADAE", + chains: "#FFDC35", + agents: "#903BBE", + tools: "#FF3434", + memories: "#FF9135", } export const nodeIcons = { - agent: RocketLaunchIcon, - chain: LinkIcon, - memory: CpuChipIcon, - model: LightBulbIcon, - prompt: CommandLineIcon, - tool: WrenchScrewdriverIcon, + agents: RocketLaunchIcon, + chains: LinkIcon, + memories: CpuChipIcon, + llms: LightBulbIcon, + prompts: CommandLineIcon, + tools: WrenchScrewdriverIcon, } export const bgColors = {