From 339e4d28c1adcba455d85ab009148579e4d37af5 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Date: Tue, 11 Mar 2025 12:19:39 -0300
Subject: [PATCH] feat: display the color itself instead of gray if there's
 only one color in the handle (#6980)

refactor: Improve handle color rendering with unique color handling
---
 .../components/handleRenderComponent/index.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
index 874989b66..8179feb09 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
@@ -278,11 +278,17 @@ const HandleRenderComponent = memo(function HandleRenderComponent({
     const isNullHandle =
       filterPresent && !(openHandle || ownDraggingHandle || ownFilterHandle);
 
+    // Create a Set from colorName to remove duplicates
+    const colorNameSet = new Set(colorName || []);
+    const uniqueColorCount = colorNameSet.size;
+    const firstUniqueColor =
+      colorName && colorName.length > 0 ? colorName[0] : "";
+
     const handleColorName = connectedEdge
       ? connectedColor
-      : colorName!.length > 1
+      : uniqueColorCount > 1
         ? "secondary-foreground"
-        : "datatype-" + colorName![0];
+        : "datatype-" + firstUniqueColor;
 
     const handleColor = isNullHandle
       ? dark
@@ -290,15 +296,15 @@ const HandleRenderComponent = memo(function HandleRenderComponent({
         : "hsl(var(--accent-gray-foreground)"
       : connectedEdge
         ? "hsl(var(--datatype-" + connectedColor + "))"
-        : colorName!.length > 1
+        : uniqueColorCount > 1
           ? "hsl(var(--secondary-foreground))"
-          : "hsl(var(--datatype-" + colorName![0] + "))";
+          : "hsl(var(--datatype-" + firstUniqueColor + "))";
 
     const accentForegroundColorName = connectedEdge
       ? "hsl(var(--datatype-" + connectedColor + "-foreground))"
-      : colorName!.length > 1
+      : uniqueColorCount > 1
         ? "hsl(var(--input))"
-        : "hsl(var(--datatype-" + colorName![0] + "-foreground))";
+        : "hsl(var(--datatype-" + firstUniqueColor + "-foreground))";
 
     const currentFilter = left
       ? {