opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-12 15:58:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): dynamic select display in form content

Browse Source
This commit is contained in:
JzoNg 2026-05-11 17:38:21 +08:00
parent 94ad8674d6
commit 8bb70e78b7
2 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/app/components/workflow/nodes/human-input/components/__tests__/variable-in-markdown.spec.tsx
View File

@ -142,7 +142,7 @@ describe('variable-in-markdown', () => {
expect(screen.getByText('Approved')).toBeInTheDocument()
})
it('should render variable source information for dynamic select inputs', () => {
it('should render dynamic select inputs as variable information without a select control', () => {
render(
<Note
input={{
@ -158,7 +158,8 @@ describe('variable-in-markdown', () => {
/>,
)
expect(screen.getByTestId('human-input-note-select-preview')).toBeInTheDocument()
expect(screen.queryByTestId('human-input-note-select-preview')).not.toBeInTheDocument()
expect(screen.queryByRole('combobox', { name: 'human-input-note-select' })).not.toBeInTheDocument()
expect(screen.getByText('{{Start Node/options}}')).toBeInTheDocument()
})

32
web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx
View File

@ -1,5 +1,4 @@
/* 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'
@ -150,14 +149,14 @@ export const Variable: React.FC<{ path: string }> = ({ path }) => {
)
}
const SelectPreview: React.FC<{ label: string, options: string[], triggerContent?: ReactNode }> = ({ label, options, triggerContent }) => {
const SelectPreview: React.FC<{ label: string, options: string[] }> = ({ label, options }) => {
const [value, setValue] = React.useState(options[0] || label)
return (
<div data-testid="human-input-note-select-preview" className="my-3">
<Select value={value} onValueChange={nextValue => nextValue && setValue(nextValue)}>
<SelectTrigger size="large" className="w-full rounded-[10px]" aria-label="human-input-note-select">
{triggerContent || value}
{value}
</SelectTrigger>
<SelectContent listClassName="max-h-[140px] overflow-y-auto">
{options.map(option => (
@ -214,20 +213,19 @@ export const Note: React.FC<{ input: FormInputItem, nodeName: (nodeId: string) =
const { t } = useTranslation()
if (isSelectFormInput(input)) {
const isVariable = input.option_source.type === 'variable'
const variablePath = isVariable
? sourceToVariablePath(input.option_source, nodeName)
: ''
const label = isVariable
? variablePath || t('nodes.humanInput.insertInputField.variable', { ns: 'workflow' })
: input.option_source.value[0] || t('variableConfig.select', { ns: 'appDebug' })
const options = isVariable ? [label] : input.option_source.value
return (
<SelectPreview
label={label}
options={options}
triggerContent={variablePath ? <Variable path={variablePath} /> : undefined}
/>
)
if (isVariable) {
const variablePath = sourceToVariablePath(input.option_source, nodeName)
return (
<div className="my-3 rounded-[10px] bg-components-input-bg-normal px-2.5 py-2">
{variablePath
? <Variable path={variablePath} />
: <span>{t('nodes.humanInput.insertInputField.variable', { ns: 'workflow' })}</span>}
</div>
)
}
const label = input.option_source.value[0] || t('variableConfig.select', { ns: 'appDebug' })
return <SelectPreview label={label} options={input.option_source.value} />
}
if (isFileFormInput(input)) {