diff --git a/web/app/components/workflow/nodes/human-input/components/__tests__/form-content-preview.spec.tsx b/web/app/components/workflow/nodes/human-input/components/__tests__/form-content-preview.spec.tsx
index 89b2689761..436793edd4 100644
--- a/web/app/components/workflow/nodes/human-input/components/__tests__/form-content-preview.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/__tests__/form-content-preview.spec.tsx
@@ -64,10 +64,14 @@ vi.mock('../variable-in-markdown', () => ({
rehypeNotes: vi.fn(),
rehypeVariable: vi.fn(),
Variable: ({ path }: { path: string }) =>
{path}
,
- Note: ({ defaultInput, nodeName }: {
- defaultInput: { selector: string[] }
+ Note: ({ input, nodeName }: {
+ input: { type: string, default?: { selector: string[] }, option_source?: { selector: string[] } }
nodeName: (nodeId: string) => string
- }) => {nodeName(defaultInput.selector[0]!)}
,
+ }) => (
+
+ {input.default?.selector?.length ? nodeName(input.default.selector[0]!) : input.option_source?.selector?.join('.') || input.type}
+
+ ),
}))
describe('FormContentPreview', () => {
@@ -131,4 +135,25 @@ describe('FormContentPreview', () => {
expect(onClose).toHaveBeenCalledTimes(1)
})
+
+ it('should pass non-paragraph inputs through the preview note renderer', () => {
+ render(
+ ,
+ )
+
+ expect(screen.getByTestId('note')).toHaveTextContent('node-1.items')
+ })
})
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 1a08c6f1cc..ed14130c40 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,6 +1,6 @@
import type * as React from 'react'
import type { FormInputItem } from '../types'
-import { isParagraphFormInput } from '../types'
+import { isFileFormInput, isFileListFormInput, isSelectFormInput } from '../types'
const variableRegex = /\{\{#(.+?)#\}\}/g
const noteRegex = /\{\{#\$(.+?)#\}\}/g
@@ -134,10 +134,34 @@ export const Variable: React.FC<{ path: string }> = ({ path }) => {
}
export const Note: React.FC<{ input: FormInputItem, nodeName: (nodeId: string) => string }> = ({ input, nodeName }) => {
- if (!isParagraphFormInput(input)) {
+ if (isSelectFormInput(input)) {
+ const isVariable = input.option_source.type === 'variable'
+ const path = `{{#${input.option_source.selector.join('.')}#}}`
+ const newPath = path ? replaceNodeIdsWithNames(path, nodeName) : path
return (
- {input.type}
+ {isVariable ? : {input.option_source.value.join(', ') || input.type}}
+
+ )
+ }
+
+ if (isFileFormInput(input)) {
+ return (
+
+ {input.allowed_file_types.join(', ') || input.type}
+
+ )
+ }
+
+ if (isFileListFormInput(input)) {
+ const summary = [
+ input.allowed_file_types.join(', '),
+ input.max_upload_count ? `max ${input.max_upload_count}` : null,
+ ].filter(Boolean).join(' ยท ')
+
+ return (
+
+ {summary || input.type}
)
}