add startNode type

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,
     };

src/renderer/components/Experiment/Workflows/nodes/StartNode.tsx

+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>
+  );
+}

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 {