model node added

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 (
+    <div className="model-Node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center">
+      <Handle type="source" position={Position.Left}></Handle>
+      <label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center">
+        Model
+      </label>
+      <div className="w-full h-min text-xs text-center">
+        {data.llm.model_name}
+      </div>
+      <Handle type="target" position={Position.Right}></Handle>
+    </div>
+  );
+}

space_flow/src/CustomNodes/PromptNode/index.tsx

@@ -10,16 +10,14 @@ export default function PromptNode({ data }) {
       onClick={()=>openPopUp(<div className="absolute top-1/2 left-1/2">teste</div>)}
       className="prompt-Node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center"
     >
-      <Handle type="target" position={Position.Left}></Handle>
+      <Handle type="source" position={Position.Left}></Handle>
       <label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center">
-        {" "}
         Prompt
       </label>
       <div className="w-full h-10 truncate bg-slate-50 text-xs">
-        {" "}
         {data.template}
       </div>
-      <Handle type="source" position={Position.Right}></Handle>
+      <Handle type="target" position={Position.Right}></Handle>
     </div>
   );
 }

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<any>,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(
     <div className="h-full w-48 bg-slate-200 flex flex-col">
         <div className="w-full text-center border border-black cursor-grab" onDragStart={(event)=>onDragStart(event,'promptNode')}> prompt Node</div>
+        <div className="w-full text-center border border-black cursor-grab" onDragStart={(event)=>onDragStart(event,'modelNode')}> Model Node</div>
     </div>
     )
 }

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"