Add Advanced Feature option (make it more clear)

frontend/src/CustomNode.css

@@ -33,7 +33,7 @@
 .custom-node-input-row {
   display: flex;
   flex-direction: column;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
 }
 
 .custom-node-input-row:last-child {
@@ -42,7 +42,7 @@
 
 .custom-node-input-row label {
   font-size: 12px;
-  margin-bottom: 4px;
+  margin-bottom: 5px;
   font-weight: bold;
   color: #555;
 }
@@ -52,7 +52,7 @@
 .custom-node-input-row textarea,
 .custom-node-input-row select {
   width: 100%;
-  padding: 6px;
+  padding: 8px;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-sizing: border-box;
@@ -76,3 +76,55 @@
   margin-bottom: 0;
   font-weight: normal;
 }
+
+.file-input-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.file-input-wrapper input[type="file"] {
+  flex-grow: 1;
+  font-size: 11px;
+}
+
+.file-input-wrapper button {
+  padding: 6px 10px;
+  font-size: 12px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-left: 8px;
+}
+
+.file-input-wrapper button:hover {
+  background-color: #0056b3;
+}
+
+.advanced-settings {
+  margin-top: 15px;
+  border-top: 1px solid #eee;
+  padding-top: 10px;
+}
+
+.advanced-settings-toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: bold;
+  color: #007bff;
+  padding: 0;
+  margin-bottom: 10px;
+}
+
+.advanced-settings-toggle:hover {
+  text-decoration: underline;
+}
+
+.advanced-settings-content {
+  padding: 10px;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+}

frontend/src/CustomNode.js

@@ -1,7 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Handle, Position } from 'reactflow';
 import './CustomNode.css';
 
+// A dedicated component for the slider to manage its own state
+const SliderInput = ({ id, label, props }) => {
+  const [value, setValue] = useState(props.value || props.minimum);
+
+  return (
+    <div className="custom-node-input-row">
+      <label htmlFor={id}>{label} ({value})</label>
+      <input
+        id={id}
+        type="range"
+        min={props.minimum || 0}
+        max={props.maximum || 100}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </div>
+  );
+};
+
 const renderInput = (input) => {
   const { type, label, props = {} } = input;
   const id = `input-${input.id}`;
@@ -11,7 +30,7 @@ const renderInput = (input) => {
       return (
         <div key={id} className="custom-node-input-row">
           <label htmlFor={id}>{label}</label>
-          <textarea id={id} rows={2} defaultValue={props.value || ''} />
+          <textarea id={id} rows={3} defaultValue={props.value || ''} />
         </div>
       );
     case 'number':
@@ -22,18 +41,8 @@ const renderInput = (input) => {
         </div>
       );
     case 'slider':
-      return (
-        <div key={id} className="custom-node-input-row">
-          <label htmlFor={id}>{label} ({props.value || props.minimum})</label>
-          <input
-            id={id}
-            type="range"
-            min={props.minimum || 0}
-            max={props.maximum || 100}
-            defaultValue={props.value || props.minimum}
-          />
-        </div>
-      );
+      // Use the new stateful component for sliders
+      return <SliderInput key={id} id={id} label={label} props={props} />;
     case 'checkbox':
       return (
         <div key={id} className="custom-node-input-row checkbox">
@@ -61,7 +70,10 @@ const renderInput = (input) => {
       return (
         <div key={id} className="custom-node-input-row">
           <label htmlFor={id}>{label} ({type})</label>
-          <input id={id} type="file" />
+          <div className="file-input-wrapper">
+            <input id={id} type="file" />
+            <button>Upload</button>
+          </div>
         </div>
       );
     default:
@@ -75,6 +87,12 @@ const renderInput = (input) => {
 };
 
 const CustomNode = ({ data }) => {
+  const [isAdvancedVisible, setAdvancedVisible] = useState(false);
+
+  const primaryTypes = ['textbox', 'image', 'audio', 'video', 'file'];
+  const primaryInputs = data.inputs?.filter(input => primaryTypes.includes(input.type));
+  const advancedInputs = data.inputs?.filter(input => !primaryTypes.includes(input.type));
+
   return (
     <div className="custom-node">
       <Handle type="target" position={Position.Top} />
@@ -83,7 +101,23 @@ const CustomNode = ({ data }) => {
         <p>/{data.apiName}</p>
       </div>
       <div className="custom-node-content">
-        {data.inputs?.map(renderInput)}
+        {primaryInputs?.map(renderInput)}
+        
+        {advancedInputs && advancedInputs.length > 0 && (
+          <div className="advanced-settings">
+            <button 
+              className="advanced-settings-toggle" 
+              onClick={() => setAdvancedVisible(!isAdvancedVisible)}
+            >
+              {isAdvancedVisible ? '▼' : '►'} Advanced Settings
+            </button>
+            {isAdvancedVisible && (
+              <div className="advanced-settings-content">
+                {advancedInputs.map(renderInput)}
+              </div>
+            )}
+          </div>
+        )}
       </div>
       <Handle type="source" position={Position.Bottom} />
     </div>