diff --git a/packages/devtools/src/components/layout/tools-list/form/templates.tsx b/packages/devtools/src/components/layout/tools-list/form/templates.tsx index b5bc8ecba..c34a8eac0 100644 --- a/packages/devtools/src/components/layout/tools-list/form/templates.tsx +++ b/packages/devtools/src/components/layout/tools-list/form/templates.tsx @@ -1,3 +1,8 @@ +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@alpic-ai/ui/components/tooltip"; import type { ArrayFieldItemTemplateProps, ArrayFieldTemplateProps, @@ -11,7 +16,7 @@ import type { } from "@rjsf/utils"; import { getInputProps } from "@rjsf/utils"; import { Plus, X } from "lucide-react"; -import type { CSSProperties } from "react"; +import type { CSSProperties, ReactNode } from "react"; import { cn } from "@/lib/utils.js"; import { TruncatedDescription } from "../truncated-description.js"; import { @@ -77,6 +82,55 @@ export function BaseInputTemplate(props: BaseInputTemplateProps) { ); } +// A field label whose param description is revealed in a tooltip on hover, so +// descriptions stay accessible in the panel without opening a dialog. Falls +// back to a plain label when the param has no description. +function FieldLabel({ + htmlFor, + label, + required, + description, + className, +}: { + htmlFor?: string; + label: ReactNode; + required?: boolean; + description?: string; + className?: string; +}) { + const content = ( + <> + {label} + {required && *} + > + ); + const labelNode = htmlFor ? ( + + ) : ( +
{description}
)} {properties @@ -220,12 +278,17 @@ export function ArrayFieldTemplate(props: ArrayFieldTemplateProps) { return ({description}
)} - {description &&{description}
} {/* rjsf v6: items is ReactElement[] (pre-rendered ArrayFieldItemTemplate). */} {items} {canAdd && (