add node footer, header and properties

rnd/autogpt_builder/src/components/CustomNode/NodeFooter.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Button } from '../ui/button';
+
+interface NodeFooterProps {
+  toggleProperties: () => void;
+  toggleAdvancedSettings: () => void;
+  hasOptionalFields: boolean;
+}
+
+export const NodeFooter: React.FC<NodeFooterProps> = ({
+  toggleProperties,
+  toggleAdvancedSettings,
+  hasOptionalFields,
+}) => {
+  return (
+    <div className="node-footer">
+      <Button onClick={toggleProperties} className="toggle-button">
+        Toggle Properties
+      </Button>
+      {hasOptionalFields && (
+        <Button onClick={toggleAdvancedSettings} className="toggle-button">
+          Toggle Advanced
+        </Button>
+      )}
+    </div>
+  );
+};

rnd/autogpt_builder/src/components/CustomNode/NodeHeader.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { beautifyString } from '@/lib/utils';
+
+interface NodeHeaderProps {
+  title: string;
+}
+
+export const NodeHeader: React.FC<NodeHeaderProps> = ({ title }) => {
+  return (
+    <div className="node-header">
+      <div className="node-title">{beautifyString(title.replace(/Block$/, ''))}</div>
+    </div>
+  );
+};

rnd/autogpt_builder/src/components/CustomNode/NodeProperties.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+interface NodePropertiesProps {
+  status: string | undefined;
+  outputData: any;
+}
+
+export const NodeProperties: React.FC<NodePropertiesProps> = ({ status, outputData }) => {
+  return (
+    <div className="node-properties">
+      <h4>Node Output</h4>
+      <p>
+        <strong>Status:</strong>{' '}
+        {typeof status === 'object' ? JSON.stringify(status) : status || 'N/A'}
+      </p>
+      <p>
+        <strong>Output Data:</strong>{' '}
+        {typeof outputData === 'object'
+          ? JSON.stringify(outputData)
+          : outputData || 'N/A'}
+      </p>
+    </div>
+  );
+};