github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-04-08 03:00:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(builder): add button for showing/hiding optional inputs (#7375)

Browse Source 
add button for showing/hiding optional inputs in nodes
This commit is contained in:
Bently
2024-07-11 15:14:07 +01:00
committed by GitHub
parent 0fb8a84382
commit cd9d041fe5
1 changed files with 37 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
rnd/autogpt_builder/src/components/CustomNode.tsx
View File

@@ -33,6 +33,7 @@ type CustomNodeData = {
const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
const [isPropertiesOpen, setIsPropertiesOpen] = useState(data.isPropertiesOpen || false);
const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);
const [keyValuePairs, setKeyValuePairs] = useState<{ key: string, value: string }[]>([]);
const [newKey, setNewKey] = useState<string>('');
const [newValue, setNewValue] = useState<string>('');
@@ -55,6 +56,16 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
setIsPropertiesOpen(!isPropertiesOpen);
};
const toggleAdvancedSettings = () => {
setIsAdvancedOpen(!isAdvancedOpen);
};
const hasOptionalFields = () => {
return data.inputSchema && Object.keys(data.inputSchema.properties).some((key) => {
return !(data.inputSchema.required?.includes(key));
});
};
const generateHandles = (schema: Schema, type: 'source' | 'target') => {
if (!schema?.properties) return null;
const keys = Object.keys(schema.properties);
@@ -395,27 +406,37 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
<div className={`custom-node dark-theme ${data.status === 'RUNNING' ? 'running' : data.status === 'COMPLETED' ? 'completed' : data.status === 'FAILED' ? 'failed' :''}`}>
<div className="node-header">
<div className="node-title">{data.blockType || data.title}</div>
<Button onClick={toggleProperties} className="toggle-button">
&#9776;
</Button>
<div className="node-buttons">
<Button onClick={toggleProperties} className="toggle-button">
&#9776;
</Button>
{hasOptionalFields() && (
<Button onClick={toggleAdvancedSettings} className="toggle-button">
&#9881;
</Button>
)}
</div>
</div>
<div className="node-content">
<div className="input-section">
{data.inputSchema &&
Object.entries(data.inputSchema.properties).map(([key, schema]) => (
<div key={key}>
<div className="handle-container">
<Handle
type="target"
position={Position.Left}
id={key}
style={{ background: '#555', borderRadius: '50%' }}
/>
<span className="handle-label">{key}</span>
Object.entries(data.inputSchema.properties).map(([key, schema]) => {
const isRequired = data.inputSchema.required?.includes(key);
return (isRequired || isAdvancedOpen) && (
<div key={key}>
<div className="handle-container">
<Handle
type="target"
position={Position.Left}
id={key}
style={{ background: '#555', borderRadius: '50%' }}
/>
<span className="handle-label">{key}</span>
</div>
{renderInputField(key, schema)}
</div>
{renderInputField(key, schema)}
</div>
))}
);
})}
</div>
<div className="output-section">
{data.outputSchema && generateHandles(data.outputSchema, 'source')}