github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-01-10 15:47:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into toran/open-1475-add-webscraper-block

Browse Source
This commit is contained in:
Toran Bruce Richards
2024-07-14 19:43:28 +01:00
committed by GitHub
parent e0387bd857 2355d56801
commit 8ce231f670
2 changed files with 60 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -77,7 +77,7 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
type={type}
position={Position.Left}
id={key}
style={{ background: '#555', borderRadius: '50%' }}
style={{ background: '#555', borderRadius: '50%', width: '10px', height: '10px' }}
/>
<span className="handle-label">{key}</span>
</>
@@ -89,7 +89,7 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
type={type}
position={Position.Right}
id={key}
style={{ background: '#555', borderRadius: '50%' }}
style={{ background: '#555', borderRadius: '50%', width: '10px', height: '10px' }}
/>
</>
)}
@@ -406,16 +406,6 @@ 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>
<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">
@@ -429,7 +419,7 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
type="target"
position={Position.Left}
id={key}
style={{ background: '#555', borderRadius: '50%' }}
style={{ background: '#555', borderRadius: '50%', width: '10px', height: '10px' }}
/>
<span className="handle-label">{key}</span>
</div>
@@ -457,6 +447,16 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
</p>
</div>
)}
<div className="node-footer">
<Button onClick={toggleProperties} className="toggle-button">
Toggle Properties
</Button>
{hasOptionalFields() && (
<Button onClick={toggleAdvancedSettings} className="toggle-button">
Toggle Advanced
</Button>
)}
</div>
<ModalComponent
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}

98
rnd/autogpt_builder/src/components/customnode.css
View File

@@ -1,12 +1,12 @@
.custom-node {
padding: 15px;
border: 2px solid #fff;
border: 3px solid #000; /* Thicker border */
border-radius: 12px;
background: #ffffff;
background: #ffffff; /* White background */
color: #000000;
width: 500px;
box-sizing: border-box;
transition: background-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
}
.node-header {
@@ -21,11 +21,10 @@
font-weight: bold;
}
.toggle-button {
background: transparent;
border: none;
cursor: pointer;
color: #000000;
.node-footer {
display: flex;
align-items: center;
margin-top: 10px;
}
.node-content {
@@ -41,6 +40,16 @@
flex: 1;
}
.toggle-button {
color: #000000;
background: #ffffff;
}
.toggle-button:hover {
color: #000000;
background: #d1d1d1;
}
.handle-label {
color: #000000;
margin-left: 10px;
@@ -54,10 +63,6 @@
align-items: flex-end;
}
.handle-label {
margin-left: 10px;
}
.handle-container {
display: flex;
position: relative;
@@ -72,7 +77,8 @@
padding: 5px;
width: 325px;
border-radius: 4px;
background: #d1d1d1;
background: #ffffff;
border: 1px solid #d1d1d1;
color: #000000;
cursor: pointer;
word-break: break-all;
@@ -95,24 +101,24 @@
width: 100%;
padding: 5px;
border-radius: 4px;
border: 1px solid #555;
background: #444;
color: #e0e0e0;
border: 1px solid #000;
background: #fff;
color: #000;
}
.radio-label {
display: block;
margin: 5px 0;
color: #e0e0e0;
color: #000;
}
.number-input {
width: 100%;
padding: 5px;
border-radius: 4px;
border: 1px solid #555;
background: #444;
color: #e0e0e0;
border: 1px solid #000;
background: #fff;
color: #000;
}
.array-item-container {
@@ -125,9 +131,9 @@
flex-grow: 1;
padding: 5px;
border-radius: 4px;
border: 1px solid #555;
background: #444;
color: #e0e0e0;
border: 1px solid #000;
background: #fff;
color: #000;
}
.array-item-remove {
@@ -153,10 +159,11 @@
.node-properties {
margin-top: 5px;
margin-bottom: 5px;
background: #d1d1d1;
background: #fff;
border: 1px solid #000; /* Border for properties section */
padding: 10px;
border-radius: 10px;
width: 325px;
width: 100%;
}
.error-message {
@@ -167,7 +174,7 @@
.object-input {
margin-left: 10px;
border-left: 1px solid #d1d1d1;
border-left: 1px solid #000; /* Border for nested inputs */
padding-left: 10px;
}
@@ -186,37 +193,26 @@
flex-grow: 1;
}
@keyframes runningAnimation {
0% { background-color: #f39c12; }
50% { background-color: #e67e22; }
100% { background-color: #f39c12; }
/* Styles for node states */
.completed {
border-color: #27ae60; /* Green border for completed nodes */
}
.running {
animation: runningAnimation 0.5s infinite alternate;
}
/* Animation for completed status */
@keyframes completedAnimation {
0% { background-color: #27ae60; }
100% { background-color: #2ecc71; }
}
.completed {
animation: completedAnimation 0.5s infinite alternate;
}
/* Animation for failed status */
@keyframes failedAnimation {
0% { background-color: #c0392b; }
100% { background-color: #e74c3c; }
border-color: #f39c12; /* Orange border for running nodes */
}
.failed {
animation: failedAnimation 0.5s infinite alternate;
border-color: #c0392b; /* Red border for failed nodes */
}
/* Add more styles for better look */
.custom-node {
transition: all 0.3s ease-in-out;
/* Adjust handle size */
.custom-node .react-flow__handle {
width: 10px;
height: 10px;
}
/* Make edges thicker */
.react-flow__edge {
stroke-width: 2px !important;
}