Data parsed through drop event fixed, data showing at node

space_flow/src/CustomNodes/GenericNode/index.tsx

@@ -9,10 +9,10 @@ import Dropdown from "../../components/dropdownComponent";
 import Input from "../../components/inputComponent";
 import { nodeColors, nodeIcons } from "../../utils";
 
-export default function GenericNode({ data, onDelete, onRun }) {
+export default function GenericNode({ data }) {
   const Icon = nodeIcons[data.type];
   return (
-    <div className="prompt-node relative bg-white h-96 w-96 rounded-lg solid border flex flex-col justify-center">
+    <div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
       <Handle
         type="source"
         position={Position.Left}
@@ -32,21 +32,21 @@ export default function GenericNode({ data, onDelete, onRun }) {
 
       <div className="w-full p-5 h-full">
         <div className="w-full text-gray-500 text-sm truncate">
-          {data.description}
+          {data.node.description}
         </div>
-        {data.template.map((t) => (
+        {Object.keys(data.node.template).map((t, idx) => (
-          <div className="w-full mt-5">
+          <div key={idx} className="w-full mt-5">
-            {t.type === "dropdown" ? (
+            {data.node.template[t].type === "dropdown" ? (
               <Dropdown
-                title={t.title}
+                title={data.node.template[t].title}
-                value={t.options[0]}
+                value={data.node.template[t].options[0]}
-                options={t.options}
+                options={data.node.template[t].options}
                 onSelect={() => {}}
               />
-            ) : t.type === "input" ? (
+            ) : data.node.template[t].type === "str" ? (
               <Input
-                title={t.title}
+                title={t}
-                placeholder={t.placeholder}
+                placeholder="pleicerolder"
                 onChange={() => {}}
               />
             ) : (
@@ -58,10 +58,10 @@ export default function GenericNode({ data, onDelete, onRun }) {
       </div>
 
       <div className="flex w-full justify-between items-center bg-gray-50 gap-2 border-t text-gray-600 p-4 text-sm">
-        <button onClick={onDelete}>
+        <button onClick={data.onDelete}>
           <TrashIcon className="w-6 h-6"></TrashIcon>
         </button>
-        <button onClick={onRun}>
+        <button onClick={data.onRun}>
           <PlayIcon className="w-6 h-6"></PlayIcon>
         </button>
       </div>

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

@@ -14,29 +14,9 @@ export default function ExtraSidebar() {
     getAll().then((d) => { setData(d.data);});
   }, []);
 
-  function onDragStart(event: React.DragEvent<any>, nodeType) {
+  function onDragStart(event: React.DragEvent<any>, data) {
-    let json;
-    event.dataTransfer.setData("application/reactflow", nodeType);
     event.dataTransfer.effectAllowed = "move";
-    if (nodeType === "promptNode") {
+    event.dataTransfer.setData("json", JSON.stringify(data));
-      json = JSON.stringify(prompt);
-    }
-    if (nodeType === "modelNode") {
-      json = JSON.stringify(llm_chain);
-    }
-    if (nodeType === "chainNode") {
-      json = JSON.stringify({ content: "" });
-    }
-    if (nodeType === "agentNode") {
-      json = JSON.stringify({ content: "" });
-    }
-    if (nodeType === "toolNode") {
-      json = JSON.stringify({ content: "" });
-    }
-    if (nodeType === "memoryNode") {
-      json = JSON.stringify({ content: "" });
-    }
-    event.dataTransfer.setData("json", json);
   }
 
   return (
@@ -51,7 +31,7 @@ export default function ExtraSidebar() {
                 draggable
                 className={" cursor-grab border-l-8 rounded-l-md"}
                 style={{ borderLeftColor: nodeColors[d] }}
-                onDragStart={(event) => onDragStart(event, "promptNode")}
+                onDragStart={(event) => onDragStart(event, {type: d, name:t, node: data[d][t]})}
               >
                 <div className="flex w-full 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">
                   <span className="text-black w-36 truncate">{t}</span>

space_flow/src/pages/FlowPage/index.tsx

@@ -18,6 +18,7 @@ import axios from "axios";
 import { generateUiNode } from "../../controllers/UiGenerator";
 import Chat from "../../components/chatComponent";
 import { getAll } from "../../controllers/NodesServices";
+import GenericNode from "../../CustomNodes/GenericNode";
 
 const nodeTypes = {
   promptNode: PromptNode,
@@ -25,7 +26,8 @@ const nodeTypes = {
   chainNode: ChainNode,
   agentNode: AgentNode,
   toolNode: ToolsNode,
-  memoryNode:MemoryNode
+  memoryNode:MemoryNode,
+  genericNode:GenericNode,
 };
 
 export default function FlowPage() {
@@ -72,12 +74,8 @@ export default function FlowPage() {
       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.left,
@@ -85,9 +83,9 @@ export default function FlowPage() {
       });
       const newNode = {
         id: getId(),
-        type,
+        type: 'genericNode',
         position,
-        data: { ...data, delete: () => console.log("asdsdsadad") },
+        data: { ...data, onDelete: () => console.log("asdsdsadad"), onRun: () => {} },
       };
       setNodes((nds) => nds.concat(newNode));
     },