fix: run button disappeared when where is no inputs in form (#17854)

This commit is contained in:
NFish 2025-04-11 13:52:19 +08:00 committed by GitHub
parent 7ee5cc80a2
commit bf26f1129e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,4 +1,4 @@
import type { FC, FormEvent } from 'react' import type { ChangeEvent, FC, FormEvent } from 'react'
import { useEffect } from 'react' import { useEffect } from 'react'
import React, { useCallback } from 'react' import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
@ -66,75 +66,73 @@ const RunOnce: FC<IRunOnceProps> = ({
newInputs[item.key] = '' newInputs[item.key] = ''
}) })
onInputsChange(newInputs) onInputsChange(newInputs)
}, [promptConfig.prompt_variables]) }, [promptConfig.prompt_variables, onInputsChange])
if (inputs === null || inputs === undefined || Object.keys(inputs).length === 0)
return null
return ( return (
<div className=""> <div className="">
<section> <section>
{/* input form */} {/* input form */}
<form onSubmit={onSubmit}> <form onSubmit={onSubmit}>
{promptConfig.prompt_variables.map(item => ( {(inputs === null || inputs === undefined || Object.keys(inputs).length === 0) ? null
<div className='mt-4 w-full' key={item.key}> : promptConfig.prompt_variables.map(item => (
<label className='system-md-semibold flex h-6 items-center text-text-secondary'>{item.name}</label> <div className='mt-4 w-full' key={item.key}>
<div className='mt-1'> <label className='system-md-semibold flex h-6 items-center text-text-secondary'>{item.name}</label>
{item.type === 'select' && ( <div className='mt-1'>
<Select {item.type === 'select' && (
className='w-full' <Select
defaultValue={inputs[item.key]} className='w-full'
onSelect={(i) => { handleInputsChange({ ...inputsRef.current, [item.key]: i.value }) }} defaultValue={inputs[item.key]}
items={(item.options || []).map(i => ({ name: i, value: i }))} onSelect={(i) => { handleInputsChange({ ...inputsRef.current, [item.key]: i.value }) }}
allowSearch={false} items={(item.options || []).map(i => ({ name: i, value: i }))}
/> allowSearch={false}
)} />
{item.type === 'string' && ( )}
<Input {item.type === 'string' && (
type="text" <Input
placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`} type="text"
value={inputs[item.key]} placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
onChange={(e) => { handleInputsChange({ ...inputsRef.current, [item.key]: e.target.value }) }} value={inputs[item.key]}
maxLength={item.max_length || DEFAULT_VALUE_MAX_LEN} onChange={(e: ChangeEvent<HTMLInputElement>) => { handleInputsChange({ ...inputsRef.current, [item.key]: e.target.value }) }}
/> maxLength={item.max_length || DEFAULT_VALUE_MAX_LEN}
)} />
{item.type === 'paragraph' && ( )}
<Textarea {item.type === 'paragraph' && (
className='h-[104px] sm:text-xs' <Textarea
placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`} className='h-[104px] sm:text-xs'
value={inputs[item.key]} placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
onChange={(e) => { handleInputsChange({ ...inputsRef.current, [item.key]: e.target.value }) }} value={inputs[item.key]}
/> onChange={(e: ChangeEvent<HTMLInputElement>) => { handleInputsChange({ ...inputsRef.current, [item.key]: e.target.value }) }}
)} />
{item.type === 'number' && ( )}
<Input {item.type === 'number' && (
type="number" <Input
placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`} type="number"
value={inputs[item.key]} placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
onChange={(e) => { handleInputsChange({ ...inputsRef.current, [item.key]: e.target.value }) }} value={inputs[item.key]}
/> onChange={(e: ChangeEvent<HTMLInputElement>) => { handleInputsChange({ ...inputsRef.current, [item.key]: e.target.value }) }}
)} />
{item.type === 'file' && ( )}
<FileUploaderInAttachmentWrapper {item.type === 'file' && (
onChange={(files) => { handleInputsChange({ ...inputsRef.current, [item.key]: getProcessedFiles(files)[0] }) }} <FileUploaderInAttachmentWrapper
fileConfig={{ onChange={(files) => { handleInputsChange({ ...inputsRef.current, [item.key]: getProcessedFiles(files)[0] }) }}
...item.config, fileConfig={{
fileUploadConfig: (visionConfig as any).fileUploadConfig, ...item.config,
}} fileUploadConfig: (visionConfig as any).fileUploadConfig,
/> }}
)} />
{item.type === 'file-list' && ( )}
<FileUploaderInAttachmentWrapper {item.type === 'file-list' && (
onChange={(files) => { handleInputsChange({ ...inputsRef.current, [item.key]: getProcessedFiles(files) }) }} <FileUploaderInAttachmentWrapper
fileConfig={{ onChange={(files) => { handleInputsChange({ ...inputsRef.current, [item.key]: getProcessedFiles(files) }) }}
...item.config, fileConfig={{
fileUploadConfig: (visionConfig as any).fileUploadConfig, ...item.config,
}} fileUploadConfig: (visionConfig as any).fileUploadConfig,
/> }}
)} />
)}
</div>
</div> </div>
</div> ))}
))}
{ {
visionConfig?.enabled && ( visionConfig?.enabled && (
<div className="mt-4 w-full"> <div className="mt-4 w-full">