Skip to content

D
dify
Unverified Commit 3f25e7ec authored by crazywoola's avatar crazywoola Committed by GitHub
Browse files
Options

feat: make default slider behavior better (#1988)

parent 1372bf78
Show whitespace changes
Inline Side-by-side
Showing with 109 additions and 120 deletions
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
View file @ 3f25e7ec
...@@ -12,6 +12,7 @@ import { SimpleSelect } from '@/app/components/base/select' ...@@ -12,6 +12,7 @@ import { SimpleSelect } from '@/app/components/base/select'
import TagInput from '@/app/components/base/tag-input' import TagInput from '@/app/components/base/tag-input'
export type ParameterValue = number | string | string[] | boolean | undefined export type ParameterValue = number | string | string[] | boolean | undefined
type ParameterItemProps = { type ParameterItemProps = {
parameterRule: ModelParameterRule parameterRule: ModelParameterRule
value?: ParameterValue value?: ParameterValue
...@@ -28,48 +29,29 @@ const ParameterItem: FC<ParameterItemProps> = ({ ...@@ -28,48 +29,29 @@ const ParameterItem: FC<ParameterItemProps> = ({
}) => { }) => {
const language = useLanguage() const language = useLanguage()
const [localValue, setLocalValue] = useState(value) const [localValue, setLocalValue] = useState(value)
const mergedValue = isNullOrUndefined(value) ? localValue : value
const getDefaultValue = () => { const getDefaultValue = () => {
let defaultValue: ParameterValue let defaultValue: ParameterValue
if (parameterRule.type === 'int' || parameterRule.type === 'float') { if (parameterRule.type === 'int' || parameterRule.type === 'float')
if (isNullOrUndefined(parameterRule.default)) { defaultValue = isNullOrUndefined(parameterRule.default) ? (parameterRule.min || 0) : parameterRule.default
if (parameterRule.min) else if (parameterRule.type === 'string')
defaultValue = parameterRule.min defaultValue = parameterRule.options?.length ? (parameterRule.default || '') : (parameterRule.default || '')
else else if (parameterRule.type === 'boolean')
defaultValue = 0
}
else {
defaultValue = parameterRule.default
}
}
if (parameterRule.type === 'string' && !parameterRule.options?.length)
defaultValue = parameterRule.default || ''
if (parameterRule.type === 'string' && parameterRule.options?.length)
defaultValue = parameterRule.default || ''
if (parameterRule.type === 'boolean')
defaultValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : false defaultValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : false
else if (parameterRule.type === 'tag')
if (parameterRule.type === 'tag')
defaultValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : [] defaultValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : []
return defaultValue return defaultValue
} }
const renderValue = isNullOrUndefined(mergedValue) ? getDefaultValue() : mergedValue
const handleChange = (v: ParameterValue) => { const renderValue = value ?? localValue ?? getDefaultValue()
setLocalValue(v)
if (onChange) { const handleInputChange = (newValue: ParameterValue) => {
if (parameterRule.name === 'stop') setLocalValue(newValue)
onChange(v)
else if (!isNullOrUndefined(value)) if (onChange && (parameterRule.name === 'stop' || !isNullOrUndefined(value)))
onChange(v) onChange(newValue)
}
} }
const handleNumberInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleNumberInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
...@@ -81,111 +63,80 @@ const ParameterItem: FC<ParameterItemProps> = ({ ...@@ -81,111 +63,80 @@ const ParameterItem: FC<ParameterItemProps> = ({
if (!isNullOrUndefined(parameterRule.min) && num < parameterRule.min!) if (!isNullOrUndefined(parameterRule.min) && num < parameterRule.min!)
num = parameterRule.min as number num = parameterRule.min as number
handleChange(num) handleInputChange(num)
} }
const handleSlideChange = (num: number) => { const handleSlideChange = (num: number) => {
handleChange(num) handleInputChange(num)
} }
const handleRadioChange = (v: number) => { const handleRadioChange = (v: number) => {
handleChange(v === 1) handleInputChange(v === 1)
} }
const handleStringInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleStringInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
handleChange(e.target.value) handleInputChange(e.target.value)
} }
const handleSelect = (option: { value: string | number; name: string }) => { const handleSelect = (option: { value: string | number; name: string }) => {
handleChange(option.value) handleInputChange(option.value)
} }
const handleTagChange = (newSequences: string[]) => { const handleTagChange = (newSequences: string[]) => {
handleChange(newSequences) handleInputChange(newSequences)
} }
const handleSwitch = (checked: boolean) => { const handleSwitch = (checked: boolean) => {
if (onSwitch) { if (onSwitch) {
let assignValue: ParameterValue = localValue const assignValue: ParameterValue = localValue || getDefaultValue()
if (isNullOrUndefined(localValue))
assignValue = getDefaultValue()
onSwitch(checked, assignValue) onSwitch(checked, assignValue)
} }
} }
const renderInput = () => {
const numberInputWithSlide = (parameterRule.type === 'int' || parameterRule.type === 'float') const numberInputWithSlide = (parameterRule.type === 'int' || parameterRule.type === 'float')
&& !isNullOrUndefined(parameterRule.min) && !isNullOrUndefined(parameterRule.min)
&& !isNullOrUndefined(parameterRule.max) && !isNullOrUndefined(parameterRule.max)
const numberInput = (parameterRule.type === 'int' || parameterRule.type === 'float')
&& (isNullOrUndefined(parameterRule.min) || isNullOrUndefined(parameterRule.max))
return ( if (parameterRule.type === 'int' || parameterRule.type === 'float') {
<div className={`flex items-center justify-between ${className}`}> let step = 100
<div> if (parameterRule.max) {
<div className='shrink-0 flex items-center w-[200px]'> if (parameterRule.max < 10)
<div step = 0.1
className='mr-0.5 text-[13px] font-medium text-gray-700 truncate' else if (parameterRule.max < 100)
title={parameterRule.label[language]} step = 1
> else if (parameterRule.max < 1000)
{parameterRule.label[language]} step = 10
</div> else if (parameterRule.max < 10000)
{ step = 100
parameterRule.help && (
<Tooltip
selector={`model-parameter-rule-${parameterRule.name}`}
htmlContent={(
<div className='w-[200px] whitespace-pre-wrap'>{parameterRule.help[language]}</div>
)}
>
<HelpCircle className='mr-1.5 w-3.5 h-3.5 text-gray-400' />
</Tooltip>
)
}
{
!parameterRule.required && parameterRule.name !== 'stop' && (
<Switch
defaultValue={!isNullOrUndefined(value)}
onChange={handleSwitch}
size='md'
/>
)
}
</div>
{
parameterRule.type === 'tag' && (
<div className='w-[200px] text-gray-400 text-xs font-normal'>
{parameterRule?.tagPlaceholder?.[language]}
</div>
)
} }
</div>
{ return (
numberInputWithSlide && ( <>
<div className='flex items-center'> {numberInputWithSlide && <Slider
<Slider
className='w-[120px]' className='w-[120px]'
value={renderValue as number} value={renderValue as number}
min={parameterRule.min} min={parameterRule.min}
max={parameterRule.max} max={parameterRule.max}
step={+`0.${parameterRule.precision || 0}`} step={step}
onChange={handleSlideChange} onChange={handleSlideChange}
/> />}
<input <input
className='shrink-0 block ml-4 pl-3 w-16 h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900' className='shrink-0 block ml-4 pl-3 w-16 h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900'
type='number' type='number'
max={parameterRule.max} max={parameterRule.max}
min={parameterRule.min} min={parameterRule.min}
step={+`0.${parameterRule.precision || 0}`} step={numberInputWithSlide ? step : +`0.${parameterRule.precision || 0}`}
value={renderValue as string} value={renderValue as string}
onChange={handleNumberInputChange} onChange={handleNumberInputChange}
/> />
</div> </>
) )
} }
{
parameterRule.type === 'boolean' && ( if (parameterRule.type === 'boolean') {
return (
<Radio.Group <Radio.Group
className='w-[200px] flex items-center' className='w-[200px] flex items-center'
value={renderValue ? 1 : 0} value={renderValue ? 1 : 0}
...@@ -196,18 +147,9 @@ const ParameterItem: FC<ParameterItemProps> = ({ ...@@ -196,18 +147,9 @@ const ParameterItem: FC<ParameterItemProps> = ({
</Radio.Group> </Radio.Group>
) )
} }
{
numberInput && ( if (parameterRule.type === 'string' && !parameterRule.options?.length) {
<input return (
type='number'
className='flex items-center px-3 w-[200px] h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900'
value={renderValue as string}
onChange={handleNumberInputChange}
/>
)
}
{
parameterRule.type === 'string' && !parameterRule.options?.length && (
<input <input
className='flex items-center px-3 w-[200px] h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900' className='flex items-center px-3 w-[200px] h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900'
value={renderValue as string} value={renderValue as string}
...@@ -215,8 +157,9 @@ const ParameterItem: FC<ParameterItemProps> = ({ ...@@ -215,8 +157,9 @@ const ParameterItem: FC<ParameterItemProps> = ({
/> />
) )
} }
{
parameterRule.type === 'string' && !!parameterRule?.options?.length && ( if (parameterRule.type === 'string' && !!parameterRule?.options?.length) {
return (
<SimpleSelect <SimpleSelect
className='!py-0' className='!py-0'
wrapperClassName='!w-[200px] !h-8' wrapperClassName='!w-[200px] !h-8'
...@@ -226,8 +169,9 @@ const ParameterItem: FC<ParameterItemProps> = ({ ...@@ -226,8 +169,9 @@ const ParameterItem: FC<ParameterItemProps> = ({
/> />
) )
} }
{
parameterRule.type === 'tag' && ( if (parameterRule.type === 'tag') {
return (
<div className='w-[200px]'> <div className='w-[200px]'>
<TagInput <TagInput
items={renderValue as string[]} items={renderValue as string[]}
...@@ -237,6 +181,51 @@ const ParameterItem: FC<ParameterItemProps> = ({ ...@@ -237,6 +181,51 @@ const ParameterItem: FC<ParameterItemProps> = ({
</div> </div>
) )
} }
return null
}
return (
<div className={`flex items-center justify-between ${className}`}>
<div>
<div className='shrink-0 flex items-center w-[200px]'>
<div
className='mr-0.5 text-[13px] font-medium text-gray-700 truncate'
title={parameterRule.label[language]}
>
{parameterRule.label[language]}
</div>
{
parameterRule.help && (
<Tooltip
selector={`model-parameter-rule-${parameterRule.name}`}
htmlContent={(
<div className='w-[200px] whitespace-pre-wrap'>{parameterRule.help[language]}</div>
)}
>
<HelpCircle className='mr-1.5 w-3.5 h-3.5 text-gray-400' />
</Tooltip>
)
}
{
!parameterRule.required && parameterRule.name !== 'stop' && (
<Switch
defaultValue={!isNullOrUndefined(value)}
onChange={handleSwitch}
size='md'
/>
)
}
</div>
{
parameterRule.type === 'tag' && (
<div className='w-[200px] text-gray-400 text-xs font-normal'>
{parameterRule?.tagPlaceholder?.[language]}
</div>
)
}
</div>
{renderInput()}
</div> </div>
) )
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment