From f89c4203a0d62ec2132345562ce08322c3a73e8f Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 16 Apr 2024 14:27:34 +0800
Subject: [PATCH] chore: improve reference variable picker user experience
 (#3517)

---
 .../variable/var-reference-vars.tsx           | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index 93817ab1b2..34fff7e619 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -208,18 +208,24 @@ const VarReferenceVars: FC<Props> = ({
   const filteredVars = vars.filter((v) => {
     const children = v.vars.filter(v => checkKeys([v.variable], false).isValid || v.variable.startsWith('sys.'))
     return children.length > 0
-  }).filter((v) => {
+  }).filter((node) => {
     if (!searchText)
-      return v
-    const children = v.vars.filter(v => v.variable.toLowerCase().includes(searchText.toLowerCase()))
+      return node
+    const children = node.vars.filter((v) => {
+      const searchTextLower = searchText.toLowerCase()
+      return v.variable.toLowerCase().includes(searchTextLower) || node.title.toLowerCase().includes(searchTextLower)
+    })
     return children.length > 0
-  }).map((v) => {
-    let vars = v.vars.filter(v => checkKeys([v.variable], false).isValid || v.variable.startsWith('sys.'))
-    if (searchText)
-      vars = vars.filter(v => v.variable.toLowerCase().includes(searchText.toLowerCase()))
+  }).map((node) => {
+    let vars = node.vars.filter(v => checkKeys([v.variable], false).isValid || v.variable.startsWith('sys.'))
+    if (searchText) {
+      const searchTextLower = searchText.toLowerCase()
+      if (!node.title.toLowerCase().includes(searchTextLower))
+        vars = vars.filter(v => v.variable.toLowerCase().includes(searchText.toLowerCase()))
+    }
 
     return {
-      ...v,
+      ...node,
       vars,
     }
   })
@@ -266,7 +272,7 @@ const VarReferenceVars: FC<Props> = ({
       }
 
       {filteredVars.length > 0
-        ? <div>
+        ? <div className='max-h-[85vh] overflow-y-auto'>
 
           {
             filteredVars.map((item, i) => (