wip

chainforge/react-server/src/BaseNode.tsx

@@ -15,6 +15,12 @@ interface BaseNodeProps {
   nodeId: string;
   classNames?: string;
   style?: React.CSSProperties; // Optional prop for inline styles
+  contextMenuItems?: {
+    key: string;
+    icon: JSX.Element;
+    text: string;
+    onClick: () => void;
+  }[];
 }
 
 export const BaseNode: React.FC<BaseNodeProps> = ({
@@ -22,6 +28,7 @@ export const BaseNode: React.FC<BaseNodeProps> = ({
   classNames,
   nodeId,
   style,
+  contextMenuItems,
 }) => {
   const removeNode = useStore((state) => state.removeNode);
   const duplicateNode = useStore((state) => state.duplicateNode);
@@ -105,6 +112,12 @@ export const BaseNode: React.FC<BaseNodeProps> = ({
       >
         {children}
         <Menu.Dropdown>
+          {contextMenuItems &&
+            contextMenuItems.map(({ key, icon, text, onClick }) => (
+              <Menu.Item key={key} onClick={onClick}>
+                {icon}&nbsp;{text}
+              </Menu.Item>
+            ))}
           <Menu.Item key="duplicate" onClick={handleDuplicateNode}>
             <IconCopy size="10pt" />
             &nbsp;Duplicate Node

chainforge/react-server/src/TextFieldsNode.tsx

@@ -8,7 +8,12 @@ import React, {
 } from "react";
 import { Handle, Position } from "reactflow";
 import { Textarea, Tooltip, Skeleton } from "@mantine/core";
-import { IconTextPlus, IconEye, IconEyeOff } from "@tabler/icons-react";
+import {
+  IconTextPlus,
+  IconEye,
+  IconEyeOff,
+  IconTransform,
+} from "@tabler/icons-react";
 import useStore from "./store";
 import NodeLabel from "./NodeLabelComponent";
 import TemplateHooks, {
@@ -417,10 +422,26 @@ const TextFieldsNode: React.FC<TextFieldsNodeProps> = ({ data, id }) => {
     [textfieldsValues, placeholders, fieldVisibility],
   );
 
+  const customContextMenuItems = [
+    {
+      key: "to_item_node",
+      icon: <IconTransform size="11pt" />,
+      text: "To Items Node",
+      onClick: () => {
+        console.log("TODO: Convert to items node.");
+      },
+      sadsd
+    },
+  ];
+
   return (
-    <BaseNode classNames="text-fields-node" nodeId={id}>
+    <BaseNode
+      classNames="text-fields-node"
+      nodeId={id}
+      contextMenuItems={customContextMenuItems}
+    >
       <NodeLabel
-        title={data.title || "TextFields Node"}
+        title={data.title ?? "TextFields Node"}
         nodeId={id}
         icon={<IconTextPlus size="16px" />}
         customButtons={