From d70c097341fcee2f8d9210c70d74402b84f4e829 Mon Sep 17 00:00:00 2001
From: Ilango <rajagopalilango@gmail.com>
Date: Thu, 11 Jan 2024 14:37:10 +0530
Subject: [PATCH] Add a sticky note node under tools

---
 .../nodes/tools/StickyNotes/StickyNote.ts     |  42 ++++++
 .../nodes/tools/StickyNotes/stickyNote.svg    |   5 +
 packages/ui/src/views/canvas/CanvasNode.js    | 120 +++++++++---------
 3 files changed, 110 insertions(+), 57 deletions(-)
 create mode 100644 packages/components/nodes/tools/StickyNotes/StickyNote.ts
 create mode 100644 packages/components/nodes/tools/StickyNotes/stickyNote.svg

diff --git a/packages/components/nodes/tools/StickyNotes/StickyNote.ts b/packages/components/nodes/tools/StickyNotes/StickyNote.ts
new file mode 100644
index 000000000..0ae980a0c
--- /dev/null
+++ b/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 }
diff --git a/packages/components/nodes/tools/StickyNotes/stickyNote.svg b/packages/components/nodes/tools/StickyNotes/stickyNote.svg
new file mode 100644
index 000000000..81c45058d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/packages/ui/src/views/canvas/CanvasNode.js b/packages/ui/src/views/canvas/CanvasNode.js
index e52de640c..a039f6d1e 100644
--- a/packages/ui/src/views/canvas/CanvasNode.js
+++ b/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,47 +151,49 @@ const CanvasNode = ({ data }) => {
                     placement='right-start'
                 >
                     <Box>
-                        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                            <Box style={{ width: 50, marginRight: 10, padding: 5 }}>
-                                <div
-                                    style={{
-                                        ...theme.typography.commonAvatar,
-                                        ...theme.typography.largeAvatar,
-                                        borderRadius: '50%',
-                                        backgroundColor: 'white',
-                                        cursor: 'grab'
-                                    }}
-                                >
-                                    <img
-                                        style={{ width: '100%', height: '100%', padding: 5, objectFit: 'contain' }}
-                                        src={`${baseURL}/api/v1/node-icon/${data.name}`}
-                                        alt='Notification'
-                                    />
-                                </div>
-                            </Box>
-                            <Box>
-                                <Typography
-                                    sx={{
-                                        fontSize: '1rem',
-                                        fontWeight: 500,
-                                        mr: 2
-                                    }}
-                                >
-                                    {data.label}
-                                </Typography>
-                            </Box>
-                            {warningMessage && (
-                                <>
-                                    <div style={{ flexGrow: 1 }}></div>
-                                    <Tooltip title={<span style={{ whiteSpace: 'pre-line' }}>{warningMessage}</span>} placement='top'>
-                                        <IconButton sx={{ height: 35, width: 35 }}>
-                                            <IconAlertTriangle size={35} color='orange' />
-                                        </IconButton>
-                                    </Tooltip>
-                                </>
-                            )}
-                        </div>
-                        {(data.inputAnchors.length > 0 || data.inputParams.length > 0) && (
+                        {!isNote && (
+                            <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                                <Box style={{ width: 50, marginRight: 10, padding: 5 }}>
+                                    <div
+                                        style={{
+                                            ...theme.typography.commonAvatar,
+                                            ...theme.typography.largeAvatar,
+                                            borderRadius: '50%',
+                                            backgroundColor: 'white',
+                                            cursor: 'grab'
+                                        }}
+                                    >
+                                        <img
+                                            style={{ width: '100%', height: '100%', padding: 5, objectFit: 'contain' }}
+                                            src={`${baseURL}/api/v1/node-icon/${data.name}`}
+                                            alt='Notification'
+                                        />
+                                    </div>
+                                </Box>
+                                <Box>
+                                    <Typography
+                                        sx={{
+                                            fontSize: '1rem',
+                                            fontWeight: 500,
+                                            mr: 2
+                                        }}
+                                    >
+                                        {data.label}
+                                    </Typography>
+                                </Box>
+                                {warningMessage && (
+                                    <>
+                                        <div style={{ flexGrow: 1 }}></div>
+                                        <Tooltip title={<span style={{ whiteSpace: 'pre-line' }}>{warningMessage}</span>} placement='top'>
+                                            <IconButton sx={{ height: 35, width: 35 }}>
+                                                <IconAlertTriangle size={35} color='orange' />
+                                            </IconButton>
+                                        </Tooltip>
+                                    </>
+                                )}
+                            </div>
+                        )}
+                        {(data.inputAnchors.length > 0 || data.inputParams.length > 0) && !isNote && (
                             <>
                                 <Divider />
                                 <Box sx={{ background: theme.palette.asyncSelect.main, p: 1 }}>
@@ -230,22 +233,25 @@ const CanvasNode = ({ data }) => {
                                 </Button>
                             </div>
                         )}
-                        <Divider />
-                        <Box sx={{ background: theme.palette.asyncSelect.main, p: 1 }}>
-                            <Typography
-                                sx={{
-                                    fontWeight: 500,
-                                    textAlign: 'center'
-                                }}
-                            >
-                                Output
-                            </Typography>
-                        </Box>
-                        <Divider />
-
-                        {data.outputAnchors.map((outputAnchor, index) => (
-                            <NodeOutputHandler key={index} outputAnchor={outputAnchor} data={data} />
-                        ))}
+                        {!isNote && (
+                            <>
+                                <Divider />
+                                <Box sx={{ background: theme.palette.asyncSelect.main, p: 1 }}>
+                                    <Typography
+                                        sx={{
+                                            fontWeight: 500,
+                                            textAlign: 'center'
+                                        }}
+                                    >
+                                        Output
+                                    </Typography>
+                                </Box>
+                                <Divider />
+                                {data.outputAnchors.map((outputAnchor, index) => (
+                                    <NodeOutputHandler key={index} outputAnchor={outputAnchor} data={data} />
+                                ))}
+                            </>
+                        )}
                     </Box>
                 </LightTooltip>
             </CardWrapper>