diff --git a/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx b/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx index c0cd418270d59dbe5a1ae4a9935b00c9281f5f16..ee0b83718ccdc6f003c76375343aee6060ce11d7 100644 --- a/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx +++ b/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx @@ -11,10 +11,11 @@ import { } from '@xyflow/react'; import { PlusCircleIcon } from 'lucide-react'; import { useCallback, useEffect } from 'react'; -import CustomNode from './CustomNode'; +import CustomNode from './nodes/CustomNode'; +import StartNode from './nodes/StartNode'; import * as chatAPI from '../../../lib/transformerlab-api-sdk'; -const nodeTypes = { customNode: CustomNode }; +const nodeTypes = { customNode: CustomNode, startNode: StartNode }; function generateNodes(workflow: any): any[] { const workflowConfig = JSON.parse(workflow?.config); @@ -44,7 +45,7 @@ function generateNodes(workflow: any): any[] { const nextNode = { id: node.id, - type: 'customNode', + type: node?.type == 'START' ? 'startNode' : 'customNode', position: savedPosition, data: data, }; diff --git a/src/renderer/components/Experiment/Workflows/CustomNode.tsx b/src/renderer/components/Experiment/Workflows/nodes/CustomNode.tsx similarity index 100% rename from src/renderer/components/Experiment/Workflows/CustomNode.tsx rename to src/renderer/components/Experiment/Workflows/nodes/CustomNode.tsx diff --git a/src/renderer/components/Experiment/Workflows/nodes/StartNode.tsx b/src/renderer/components/Experiment/Workflows/nodes/StartNode.tsx new file mode 100644 index 0000000000000000000000000000000000000000..baa7562e7c3d361ba4a383cabcfd5d5c6b7d6e74 --- /dev/null +++ b/src/renderer/components/Experiment/Workflows/nodes/StartNode.tsx @@ -0,0 +1,43 @@ +import { Typography } from '@mui/joy'; +import { BuiltInNode, Handle, useReactFlow } from '@xyflow/react'; +import { NodeProps, Position } from '@xyflow/system'; +import { XIcon } from 'lucide-react'; + +export default function memo({ + id, + data, + isConnectable, + targetPosition = Position.Top, + sourcePosition = Position.Bottom, +}: NodeProps<BuiltInNode>) { + const { deleteElements } = useReactFlow(); + + const handleDelete = () => { + deleteElements({ nodes: [{ id }] }); + }; + + return ( + <div className="custom-node" style={{ width: '100%' }}> + <div + className="type-badge" + style={{ + // backgroundColor: 'var(--joy-palette-success-400)', + width: '100%', + borderRadius: '3px', + }} + > + <Typography + level="body-xs" + sx={{ color: 'var(--joy-palette-primary-plainColor)' }} + > + START + </Typography> + </div> + <Handle + type="source" + position={sourcePosition} + isConnectable={isConnectable} + /> + </div> + ); +} diff --git a/src/renderer/styles.css b/src/renderer/styles.css index 24c99bd19621e00447f1400252f1d2a9a7b19b2a..5a6180c83c3489aadfd18ac1ae21624b33d8ecfc 100644 --- a/src/renderer/styles.css +++ b/src/renderer/styles.css @@ -253,6 +253,18 @@ code if we want */ border: var(--xy-node-border, var(--xy-node-border-default)); } +.react-flow__node-startNode { + border: 2px solid var(--joy-palette-primary-plainColor); + background-color: var(--joy-palette-primary-softBg); + border-radius: 20px; + width: 80px; + height: 30px; + display: flex; + justify-content: center; + align-items: center; +} + + .custom-node-delete-button {