Update node input component

packages/ui/src/ui-component/input/Input.js

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
-import { FormControl, OutlinedInput, Popover } from '@mui/material'
+import { FormControl, OutlinedInput, InputBase, Popover } from '@mui/material'
 import SelectVariable from 'ui-component/json/SelectVariable'
 import { getAvailableNodesForVariable } from 'utils/genericHelper'
 
@@ -50,6 +50,37 @@ export const Input = ({ inputParam, value, nodes, edges, nodeId, onChange, disab
 
     return (
         <>
+            {inputParam.name === 'note' ? (
+                <FormControl sx={{ width: '100%', height: 'auto' }} size='small'>
+                    <InputBase
+                        id={inputParam.name}
+                        size='small'
+                        disabled={disabled}
+                        type={getInputType(inputParam.type)}
+                        placeholder={inputParam.placeholder}
+                        multiline={!!inputParam.rows}
+                        minRows={inputParam.rows ?? 1}
+                        value={myValue}
+                        name={inputParam.name}
+                        onChange={(e) => {
+                            setMyValue(e.target.value)
+                            onChange(e.target.value)
+                        }}
+                        inputProps={{
+                            step: inputParam.step ?? 1,
+                            style: {
+                                border: 'none',
+                                background: 'none'
+                            }
+                        }}
+                        sx={{
+                            border: 'none',
+                            background: 'none',
+                            padding: '10px 14px'
+                        }}
+                    />
+                </FormControl>
+            ) : (
                 <FormControl sx={{ mt: 1, width: '100%' }} size='small'>
                     <OutlinedInput
                         id={inputParam.name}
@@ -73,6 +104,7 @@ export const Input = ({ inputParam, value, nodes, edges, nodeId, onChange, disab
                         }}
                     />
                 </FormControl>
+            )}
             <div ref={ref}></div>
             {inputParam?.acceptVariable && (
                 <Popover