Add a sticky note node under tools

packages/components/nodes/tools/StickyNotes/StickyNote.ts

@@ -0,0 +1,42 @@
+import { INode, INodeOutputsValue, INodeParams } from '../../../src/Interface'
+
+class StickyNote implements INode {
+    label: string
+    name: string
+    version: number
+    description: string
+    type: string
+    icon: string
+    category: string
+    baseClasses: string[]
+    inputs: INodeParams[]
+    disableOutput: boolean
+
+    constructor() {
+        this.label = 'Sticky Note'
+        this.name = 'stickyNote'
+        this.version = 1.0
+        this.type = 'StickyNote'
+        this.icon = 'stickyNote.svg'
+        this.category = 'Tools'
+        this.description = 'Add a note about a node'
+        this.inputs = [
+            {
+                label: 'Note',
+                name: 'note',
+                type: 'string',
+                rows: 4,
+                placeholder: 'Input your notes',
+                optional: true
+            }
+        ]
+        this.disableOutput = true
+        this.baseClasses = [this.type]
+    }
+
+    async init(): Promise<any> {
+        return new StickyNote()
+    }
+}
+
+module.exports = { nodeClass: StickyNote }

packages/components/nodes/tools/StickyNotes/stickyNote.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+     stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M15.5 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V8.5L15.5 3Z"/>
+    <path d="M15 3v6h6"/>
+</svg>

packages/ui/src/views/canvas/CanvasNode.js

@@ -54,6 +54,7 @@ const CanvasNode = ({ data }) => {
     const [infoDialogProps, setInfoDialogProps] = useState({})
     const [warningMessage, setWarningMessage] = useState('')
     const [open, setOpen] = useState(false)
+    const isNote = data.type === 'StickyNote'
 
     const handleClose = () => {
         setOpen(false)
@@ -150,6 +151,7 @@ const CanvasNode = ({ data }) => {
                     placement='right-start'
                 >
                     <Box>
+                        {!isNote && (
                             <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                                 <Box style={{ width: 50, marginRight: 10, padding: 5 }}>
                                     <div
@@ -190,7 +192,8 @@ const CanvasNode = ({ data }) => {
                                     </>
                                 )}
                             </div>
-                        {(data.inputAnchors.length > 0 || data.inputParams.length > 0) && (
+                        )}
+                        {(data.inputAnchors.length > 0 || data.inputParams.length > 0) && !isNote && (
                             <>
                                 <Divider />
                                 <Box sx={{ background: theme.palette.asyncSelect.main, p: 1 }}>
@@ -230,6 +233,8 @@ const CanvasNode = ({ data }) => {
                                 </Button>
                             </div>
                         )}
+                        {!isNote && (
+                            <>
                                 <Divider />
                                 <Box sx={{ background: theme.palette.asyncSelect.main, p: 1 }}>
                                     <Typography
@@ -242,10 +247,11 @@ const CanvasNode = ({ data }) => {
                                     </Typography>
                                 </Box>
                                 <Divider />
-
                                 {data.outputAnchors.map((outputAnchor, index) => (
                                     <NodeOutputHandler key={index} outputAnchor={outputAnchor} data={data} />
                                 ))}
+                            </>
+                        )}
                     </Box>
                 </LightTooltip>
             </CardWrapper>