From 514a3f369f04ccca3c7c6358670bdc62bac6f6c3 Mon Sep 17 00:00:00 2001
From: Rodriguez Avila Humberto <humberto.rodriguez_avila@nokia-bell-labs.com>
Date: Thu, 26 Sep 2024 14:09:51 +0200
Subject: [PATCH] feat: highlight valid/invalid connection between nodes

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={{