feat: highlight valid/invalid connection between nodes (#3266)

Change the inputs background to green/red to hint compatible connections, in adition to the `not-allowed` mouse cursor for incompatible connections

packages/ui/src/views/canvas/index.css

@@ -35,3 +35,13 @@
     flex-grow: 1;
     height: 100%;
 }
+
+.chatflow-canvas .react-flow__handle-connecting {
+  cursor: not-allowed;
+  background: #db4e4e !important;
+}
+
+.chatflow-canvas .react-flow__handle-valid {
+  cursor: crosshair;
+  background: #5dba62 !important;
+}

packages/ui/src/views/canvas/index.jsx

@@ -554,6 +554,7 @@ const Canvas = () => {
                                 fitView
                                 deleteKeyCode={canvas.canvasDialogShow ? null : ['Delete']}
                                 minZoom={0.1}
+                                className='chatflow-canvas'
                             >
                                 <Controls
                                     style={{