From e38c19f8d874acfa792d42bc0d06bcf2ac905c5e Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Sun, 28 Jun 2026 17:53:56 +0800
Subject: [PATCH] feat: add description handling to VariableSelector and
 OptionCombobox for improved option clarity

---
 .../_components/node-config-panel.tsx            |  3 ---
 .../_components/variable-selector.tsx            |  1 +
 web/components/option-combobox.tsx               | 16 ++++++++++++----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/web/app/dashboard/ai-workflows/_components/node-config-panel.tsx b/web/app/dashboard/ai-workflows/_components/node-config-panel.tsx
index c18b013..c7ef493 100644
--- a/web/app/dashboard/ai-workflows/_components/node-config-panel.tsx
+++ b/web/app/dashboard/ai-workflows/_components/node-config-panel.tsx
@@ -160,9 +160,6 @@ export function NodeConfigPanel({
                       })
                     }}
                   />
-                  {input.description ? (
-                    <div className="text-xs text-muted-foreground">{input.description}</div>
-                  ) : null}
                 </div>
               )
             })}
diff --git a/web/app/dashboard/ai-workflows/_components/variable-selector.tsx b/web/app/dashboard/ai-workflows/_components/variable-selector.tsx
index 90639b4..64d3cf2 100644
--- a/web/app/dashboard/ai-workflows/_components/variable-selector.tsx
+++ b/web/app/dashboard/ai-workflows/_components/variable-selector.tsx
@@ -25,6 +25,7 @@ export function VariableSelector({
   const options = variables.map((variable) => ({
     value: `${variable.nodeId}.${variable.field}`,
     label: `${variable.nodeName}.${variable.label || variable.field}`,
+    description: variable.description,
   }))
 
   return (
diff --git a/web/components/option-combobox.tsx b/web/components/option-combobox.tsx
index 84c365b..a8b7631 100644
--- a/web/components/option-combobox.tsx
+++ b/web/components/option-combobox.tsx
@@ -23,6 +23,7 @@ import { useI18n } from "@/i18n/provider"
 export type ComboboxOption = {
   value: string
   label: string
+  description?: string
 }
 
 type OptionComboboxProps = {
@@ -75,21 +76,28 @@ export function OptionCombobox({
               {options.map((option) => (
                 <CommandItem
                   key={option.value}
-                  value={`${option.label} ${option.value}`}
+                  value={`${option.label} ${option.value} ${option.description ?? ""}`}
                   onSelect={() => {
                     onChange(option.value)
                     setOpen(false)
                   }}
                 >
                   <div className="flex min-w-0 flex-1 items-center justify-between gap-2">
-                    <div className="flex min-w-0 items-center">
+                    <div className="flex min-w-0 items-start">
                       <CheckIcon
                         className={cn(
-                          "mr-2 size-4 shrink-0",
+                          "mr-2 mt-0.5 size-4 shrink-0",
                           option.value === value ? "opacity-100" : "opacity-0"
                         )}
                       />
-                      <span className="truncate">{option.label}</span>
+                      <span className="min-w-0">
+                        <span className="block truncate">{option.label}</span>
+                        {option.description ? (
+                          <span className="mt-0.5 line-clamp-2 text-xs leading-4 text-muted-foreground">
+                            {option.description}
+                          </span>
+                        ) : null}
+                      </span>
                     </div>
                     {renderOptionAction ? (
                       <div