From d2d3f3d0cffcf534042f544dbc28a43a2239c57d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Humberto=20Rodr=C3=ADguez=20A=2E?=
 <rhumbertgz@users.noreply.github.com>
Date: Thu, 26 Sep 2024 16:47:43 +0200
Subject: [PATCH] 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 | 10 ++++++++++
 packages/ui/src/views/canvas/index.jsx |  1 +
 2 files changed, 11 insertions(+)

diff --git a/packages/ui/src/views/canvas/index.css b/packages/ui/src/views/canvas/index.css
index 851dee5b923..b7bb04d8f18 100644
--- a/packages/ui/src/views/canvas/index.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/packages/ui/src/views/canvas/index.jsx b/packages/ui/src/views/canvas/index.jsx
index 42605054755..b2cef5600ef 100644
--- a/packages/ui/src/views/canvas/index.jsx
+++ b/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={{