diff --git a/web/app/components/workflow/nodes/human-input/components/__tests__/variable-in-markdown.spec.tsx b/web/app/components/workflow/nodes/human-input/components/__tests__/variable-in-markdown.spec.tsx index bbb47288bb..b036919bbd 100644 --- a/web/app/components/workflow/nodes/human-input/components/__tests__/variable-in-markdown.spec.tsx +++ b/web/app/components/workflow/nodes/human-input/components/__tests__/variable-in-markdown.spec.tsx @@ -142,6 +142,26 @@ describe('variable-in-markdown', () => { expect(screen.getByText('Approved')).toBeInTheDocument() }) + it('should render variable source information for dynamic select inputs', () => { + render( + nodeId === 'node-1' ? 'Start Node' : nodeId} + />, + ) + + expect(screen.getByTestId('human-input-note-select-preview')).toBeInTheDocument() + expect(screen.getByText('{{Start Node/options}}')).toBeInTheDocument() + }) + it('should open the select preview and show option items', async () => { const user = userEvent.setup() diff --git a/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx b/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx index 2a3367ffd7..54f4289a35 100644 --- a/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx +++ b/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx @@ -1,4 +1,5 @@ /* eslint-disable react-refresh/only-export-components */ +import type { ReactNode } from 'react' import type { FormInputItem } from '../types' import { cn } from '@langgenius/dify-ui/cn' import { Select, SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger } from '@langgenius/dify-ui/select' @@ -93,6 +94,17 @@ const formatVariablePath = (path: string) => { .replace('#}}', '}}') } +const sourceToVariablePath = ( + source: { selector: string[] }, + nodeName: (nodeId: string) => string, +) => { + if (!source.selector.length) + return '' + + const path = `{{#${source.selector.join('.')}#}}` + return replaceNodeIdsWithNames(path, nodeName) +} + export function rehypeVariable() { return (tree: MarkdownNode) => { visitTextNodes(tree, (value) => { @@ -138,14 +150,14 @@ export const Variable: React.FC<{ path: string }> = ({ path }) => { ) } -const SelectPreview: React.FC<{ label: string, options: string[] }> = ({ label, options }) => { +const SelectPreview: React.FC<{ label: string, options: string[], triggerContent?: ReactNode }> = ({ label, options, triggerContent }) => { const [value, setValue] = React.useState(options[0] || label) return (