feat: Add a note node to the agent canvas #2767 (#2768)

### What problem does this PR solve?

feat: Add a note node to the agent canvas #2767

### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):

web/src/pages/flow/flow-sider/index.tsx

@@ -15,6 +15,14 @@ interface IProps {
   collapsed: boolean;
 }
 
+const dividerProps = {
+  marginTop: 10,
+  marginBottom: 10,
+  padding: 0,
+  borderBlockColor: '#b4afaf',
+  borderStyle: 'dotted',
+};
+
 const FlowSide = ({ setCollapsed, collapsed }: IProps) => {
   const { handleDragStart } = useHandleDrag();
   const { t } = useTranslate('flow');
@@ -31,16 +39,11 @@ const FlowSide = ({ setCollapsed, collapsed }: IProps) => {
         {componentMenuList.map((x) => {
           return (
             <React.Fragment key={x.name}>
+              {x.name === Operator.Note && (
+                <Divider style={dividerProps}></Divider>
+              )}
               {x.name === Operator.DuckDuckGo && (
-                <Divider
-                  style={{
-                    marginTop: 10,
-                    marginBottom: 10,
-                    padding: 0,
-                    borderBlockColor: '#b4afaf',
-                    borderStyle: 'dotted',
-                  }}
-                ></Divider>
+                <Divider style={dividerProps}></Divider>
               )}
               <Card
                 key={x.name}