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'
import TagInput from '@/app/components/base/tag-input'
export type ParameterValue = number | string | string[] | boolean | undefined
type ParameterItemProps = {
parameterRule: ModelParameterRule
value?: ParameterValue
......@@ -28,48 +29,29 @@ const ParameterItem: FC<ParameterItemProps> = ({
}) => {
const language = useLanguage()
const [localValue, setLocalValue] = useState(value)
const mergedValue = isNullOrUndefined(value) ? localValue : value
const getDefaultValue = () => {
let defaultValue: ParameterValue
if (parameterRule.type === 'int' || parameterRule.type === 'float') {
if (isNullOrUndefined(parameterRule.default)) {
if (parameterRule.min)
defaultValue = parameterRule.min
else
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')
if (parameterRule.type === 'int' || parameterRule.type === 'float')
defaultValue = isNullOrUndefined(parameterRule.default) ? (parameterRule.min || 0) : parameterRule.default
else if (parameterRule.type === 'string')
defaultValue = parameterRule.options?.length ? (parameterRule.default || '') : (parameterRule.default || '')
else if (parameterRule.type === 'boolean')
defaultValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : false
if (parameterRule.type === 'tag')
else if (parameterRule.type === 'tag')
defaultValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : []
return defaultValue
}
const renderValue = isNullOrUndefined(mergedValue) ? getDefaultValue() : mergedValue
const handleChange = (v: ParameterValue) => {
setLocalValue(v)
const renderValue = value ?? localValue ?? getDefaultValue()
if (onChange) {
if (parameterRule.name === 'stop')
onChange(v)
else if (!isNullOrUndefined(value))
onChange(v)
}
const handleInputChange = (newValue: ParameterValue) => {
setLocalValue(newValue)
if (onChange && (parameterRule.name === 'stop' || !isNullOrUndefined(value)))
onChange(newValue)
}
const handleNumberInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
......@@ -81,111 +63,80 @@ const ParameterItem: FC<ParameterItemProps> = ({
if (!isNullOrUndefined(parameterRule.min) && num < parameterRule.min!)
num = parameterRule.min as number
handleChange(num)
handleInputChange(num)
}
const handleSlideChange = (num: number) => {
handleChange(num)
handleInputChange(num)
}
const handleRadioChange = (v: number) => {
handleChange(v === 1)
handleInputChange(v === 1)
}
const handleStringInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
handleChange(e.target.value)
handleInputChange(e.target.value)
}
const handleSelect = (option: { value: string | number; name: string }) => {
handleChange(option.value)
handleInputChange(option.value)
}
const handleTagChange = (newSequences: string[]) => {
handleChange(newSequences)
handleInputChange(newSequences)
}
const handleSwitch = (checked: boolean) => {
if (onSwitch) {
let assignValue: ParameterValue = localValue
if (isNullOrUndefined(localValue))
assignValue = getDefaultValue()
const assignValue: ParameterValue = localValue || getDefaultValue()
onSwitch(checked, assignValue)
}
}
const renderInput = () => {
const numberInputWithSlide = (parameterRule.type === 'int' || parameterRule.type === 'float')
&& !isNullOrUndefined(parameterRule.min)
&& !isNullOrUndefined(parameterRule.max)
const numberInput = (parameterRule.type === 'int' || parameterRule.type === 'float')
&& (isNullOrUndefined(parameterRule.min) || isNullOrUndefined(parameterRule.max))
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>
)
if (parameterRule.type === 'int' || parameterRule.type === 'float') {
let step = 100
if (parameterRule.max) {
if (parameterRule.max < 10)
step = 0.1
else if (parameterRule.max < 100)
step = 1
else if (parameterRule.max < 1000)
step = 10
else if (parameterRule.max < 10000)
step = 100
}
</div>
{
numberInputWithSlide && (
<div className='flex items-center'>
<Slider
return (
<>
{numberInputWithSlide && <Slider
className='w-[120px]'
value={renderValue as number}
min={parameterRule.min}
max={parameterRule.max}
step={+`0.${parameterRule.precision || 0}`}
step={step}
onChange={handleSlideChange}
/>
/>}
<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'
type='number'
max={parameterRule.max}
min={parameterRule.min}
step={+`0.${parameterRule.precision || 0}`}
step={numberInputWithSlide ? step : +`0.${parameterRule.precision || 0}`}
value={renderValue as string}
onChange={handleNumberInputChange}
/>
</div>
</>
)
}
{
parameterRule.type === 'boolean' && (
if (parameterRule.type === 'boolean') {
return (
<Radio.Group
className='w-[200px] flex items-center'
value={renderValue ? 1 : 0}
......@@ -196,18 +147,9 @@ const ParameterItem: FC<ParameterItemProps> = ({
</Radio.Group>
)
}
{
numberInput && (
<input
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 && (
if (parameterRule.type === 'string' && !parameterRule.options?.length) {
return (
<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'
value={renderValue as string}
......@@ -215,8 +157,9 @@ const ParameterItem: FC<ParameterItemProps> = ({
/>
)
}
{
parameterRule.type === 'string' && !!parameterRule?.options?.length && (
if (parameterRule.type === 'string' && !!parameterRule?.options?.length) {
return (
<SimpleSelect
className='!py-0'
wrapperClassName='!w-[200px] !h-8'
......@@ -226,8 +169,9 @@ const ParameterItem: FC<ParameterItemProps> = ({
/>
)
}
{
parameterRule.type === 'tag' && (
if (parameterRule.type === 'tag') {
return (
<div className='w-[200px]'>
<TagInput
items={renderValue as string[]}
......@@ -237,6 +181,51 @@ const ParameterItem: FC<ParameterItemProps> = ({
</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>
)
}
......
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