feat: add description handling to VariableSelector and OptionCombobox for improved option clarity
This commit is contained in:
@@ -160,9 +160,6 @@ export function NodeConfigPanel({
|
|||||||
})
|
})
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{input.description ? (
|
|
||||||
<div className="text-xs text-muted-foreground">{input.description}</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
|||||||
@@ -25,6 +25,7 @@ export function VariableSelector({
|
|||||||
const options = variables.map((variable) => ({
|
const options = variables.map((variable) => ({
|
||||||
value: `${variable.nodeId}.${variable.field}`,
|
value: `${variable.nodeId}.${variable.field}`,
|
||||||
label: `${variable.nodeName}.${variable.label || variable.field}`,
|
label: `${variable.nodeName}.${variable.label || variable.field}`,
|
||||||
|
description: variable.description,
|
||||||
}))
|
}))
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -23,6 +23,7 @@ import { useI18n } from "@/i18n/provider"
|
|||||||
export type ComboboxOption = {
|
export type ComboboxOption = {
|
||||||
value: string
|
value: string
|
||||||
label: string
|
label: string
|
||||||
|
description?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
type OptionComboboxProps = {
|
type OptionComboboxProps = {
|
||||||
@@ -75,21 +76,28 @@ export function OptionCombobox({
|
|||||||
{options.map((option) => (
|
{options.map((option) => (
|
||||||
<CommandItem
|
<CommandItem
|
||||||
key={option.value}
|
key={option.value}
|
||||||
value={`${option.label} ${option.value}`}
|
value={`${option.label} ${option.value} ${option.description ?? ""}`}
|
||||||
onSelect={() => {
|
onSelect={() => {
|
||||||
onChange(option.value)
|
onChange(option.value)
|
||||||
setOpen(false)
|
setOpen(false)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="flex min-w-0 flex-1 items-center justify-between gap-2">
|
<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
|
<CheckIcon
|
||||||
className={cn(
|
className={cn(
|
||||||
"mr-2 size-4 shrink-0",
|
"mr-2 mt-0.5 size-4 shrink-0",
|
||||||
option.value === value ? "opacity-100" : "opacity-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>
|
</div>
|
||||||
{renderOptionAction ? (
|
{renderOptionAction ? (
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user