MemoryCustom node added

space_flow/src/CustomNodes/MemoryNode/index.tsx

@@ -0,0 +1,31 @@
+import { Transition } from "@headlessui/react";
+import { Handle, Position } from "reactflow";
+
+export default function MemoryNode({ data }) {
+  return (
+    <Transition
+      appear={true}
+      show={true}
+      enter="transition ease-out duration-100"
+      enterFrom="transform opacity-0 scale-95"
+      enterTo="transform opacity-100 scale-100"
+      leave="transition ease-in duration-75"
+      leaveFrom="transform opacity-100 scale-100"
+      leaveTo="transform opacity-0 scale-95"
+    >
+      <div
+        onClick={data.delete}
+        className="memory-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">
+          Memory
+        </label>
+        <div className="w-full h-min text-xs text-center">
+          Memory
+        </div>
+        <Handle type="target" position={Position.Right}></Handle>
+      </div>
+    </Transition>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { Bars2Icon, CommandLineIcon, LightBulbIcon, LinkIcon, RocketLaunchIcon, ShieldCheckIcon, ViewColumnsIcon } from "@heroicons/react/24/outline";
+import { Bars2Icon, CommandLineIcon, CpuChipIcon, LightBulbIcon, LinkIcon, RocketLaunchIcon, ShieldCheckIcon, ViewColumnsIcon } from "@heroicons/react/24/outline";
 import { llm_chain } from "../../../../data_assets/llm_chain";
 import { prompt } from "../../../../data_assets/prompt";
 import DisclosureComponent from "../DisclosureComponent";
@@ -23,6 +23,9 @@ export function ExtraSidebar() {
     if (nodeType === "validatorNode") {
       json = JSON.stringify({ content: "" });
     }
+    if (nodeType === "memoryNode") {
+      json = JSON.stringify({ content: "" });
+    }
     event.dataTransfer.setData("json", json);
   }
 
@@ -80,6 +83,18 @@ export function ExtraSidebar() {
           <Bars2Icon className="w-6 text-gray-400" />
         </div>
       </DisclosureComponent>
+      <DisclosureComponent
+        button={{ title: "Memories", Icon: CpuChipIcon }}
+      >
+        <div
+          draggable
+          className="flex justify-between text-sm p-4 items-center h-12 m-2 border-dashed border-gray-400 rounded-md border-2 cursor-grab"
+          onDragStart={(event) => onDragStart(event, "memoryNode")}
+        >
+          <span className="text-black">Memory</span>
+          <Bars2Icon className="w-6 text-gray-400" />
+        </div>
+      </DisclosureComponent>
     </div>
   );
 }

space_flow/src/pages/FlowPage/index.tsx

@@ -13,13 +13,15 @@ import { ExtraSidebar } from "./components/extraSidebarComponent";
 import AgentNode from "../../CustomNodes/AgentNode";
 import ChainNode from "../../CustomNodes/ChainNode";
 import ValidatorNode from "../../CustomNodes/ValidatorNode";
+import MemoryNode from "../../CustomNodes/MemoryNode";
 
 const nodeTypes = {
   promptNode: PromptNode,
   modelNode: ModelNode,
   chainNode: ChainNode,
   agentNode: AgentNode,
   validatorNode: ValidatorNode,
+  memoryNode:MemoryNode
 };
 
 export default function FlowPage() {