diff --git a/space_flow/src/CustomNodes/ModelNode/index.tsx b/space_flow/src/CustomNodes/ModelNode/index.tsx
new file mode 100644
index 000000000..542fe7f88
--- /dev/null
+++ b/space_flow/src/CustomNodes/ModelNode/index.tsx
@@ -0,0 +1,17 @@
+import { Handle, Position } from "reactflow";
+
+export default function ModelNode({ data }) {
+ console.log(data)
+ return (
+
+
+
+
+ {data.llm.model_name}
+
+
+
+ );
+}
diff --git a/space_flow/src/CustomNodes/PromptNode/index.tsx b/space_flow/src/CustomNodes/PromptNode/index.tsx
index ef25fa932..c9f26d21e 100644
--- a/space_flow/src/CustomNodes/PromptNode/index.tsx
+++ b/space_flow/src/CustomNodes/PromptNode/index.tsx
@@ -10,16 +10,14 @@ export default function PromptNode({ data }) {
onClick={()=>openPopUp(teste
)}
className="prompt-Node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center"
>
-
+
- {" "}
{data.template}
-
+
);
}
diff --git a/space_flow/src/components/sidebar.tsx b/space_flow/src/components/sidebar.tsx
index d7b9333c9..f56b5f74d 100644
--- a/space_flow/src/components/sidebar.tsx
+++ b/space_flow/src/components/sidebar.tsx
@@ -1,16 +1,25 @@
import { prompt } from "../data_assets/prompt";
+import { llm_chain } from "../data_assets/llm_chain";
export function Sidebar(){
function onDragStart(event:React.DragEvent,nodeType){
+ let json;
event.dataTransfer.setData('application/reactflow',nodeType)
event.dataTransfer.effectAllowed = 'move'
- event.dataTransfer.setData('json',JSON.stringify(prompt));
+ if(nodeType==="promptNode"){
+ json = JSON.stringify(prompt)
+ }
+ if(nodeType==="modelNode"){
+ json = JSON.stringify(llm_chain)
+ }
+ event.dataTransfer.setData('json',json);
}
return(
onDragStart(event,'promptNode')}> prompt Node
+
onDragStart(event,'modelNode')}> Model Node
)
}
\ No newline at end of file
diff --git a/space_flow/src/flow/index.tsx b/space_flow/src/flow/index.tsx
index 94a47db7b..f2e07245c 100644
--- a/space_flow/src/flow/index.tsx
+++ b/space_flow/src/flow/index.tsx
@@ -7,8 +7,9 @@ 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}
+ const nodeTypes = {textUpdater:TextUpdaterNode, promptNode:PromptNode,modelNode:ModelNode}
const rfStyle={
backgroundCOlor:"#B8CEFF"