mirror of
https://github.com/langgenius/dify.git
synced 2026-05-04 01:18:05 +08:00
refactor(web): number inputs to use Base UI NumberField (#33539)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
@ -0,0 +1,35 @@
|
||||
import { fireEvent, render, screen } from '@testing-library/react'
|
||||
import TopKAndScoreThreshold from '../top-k-and-score-threshold'
|
||||
|
||||
describe('TopKAndScoreThreshold', () => {
|
||||
const defaultProps = {
|
||||
topK: 3,
|
||||
onTopKChange: vi.fn(),
|
||||
scoreThreshold: 0.4,
|
||||
onScoreThresholdChange: vi.fn(),
|
||||
isScoreThresholdEnabled: true,
|
||||
onScoreThresholdEnabledChange: vi.fn(),
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
it('should round top-k input values before notifying the parent', () => {
|
||||
render(<TopKAndScoreThreshold {...defaultProps} />)
|
||||
|
||||
const [topKInput] = screen.getAllByRole('textbox')
|
||||
fireEvent.change(topKInput, { target: { value: '3.7' } })
|
||||
|
||||
expect(defaultProps.onTopKChange).toHaveBeenCalledWith(4)
|
||||
})
|
||||
|
||||
it('should round score-threshold input values to two decimals', () => {
|
||||
render(<TopKAndScoreThreshold {...defaultProps} />)
|
||||
|
||||
const [, scoreThresholdInput] = screen.getAllByRole('textbox')
|
||||
fireEvent.change(scoreThresholdInput, { target: { value: '0.456' } })
|
||||
|
||||
expect(defaultProps.onScoreThresholdChange).toHaveBeenCalledWith(0.46)
|
||||
})
|
||||
})
|
||||
@ -1,8 +1,15 @@
|
||||
import { memo, useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { InputNumber } from '@/app/components/base/input-number'
|
||||
import Switch from '@/app/components/base/switch'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import {
|
||||
NumberField,
|
||||
NumberFieldControls,
|
||||
NumberFieldDecrement,
|
||||
NumberFieldGroup,
|
||||
NumberFieldIncrement,
|
||||
NumberFieldInput,
|
||||
} from '@/app/components/base/ui/number-field'
|
||||
import { env } from '@/env'
|
||||
|
||||
export type TopKAndScoreThresholdProps = {
|
||||
@ -40,17 +47,11 @@ const TopKAndScoreThreshold = ({
|
||||
}: TopKAndScoreThresholdProps) => {
|
||||
const { t } = useTranslation()
|
||||
const handleTopKChange = useCallback((value: number) => {
|
||||
let notOutRangeValue = Number.parseInt(value.toFixed(0))
|
||||
notOutRangeValue = Math.max(TOP_K_VALUE_LIMIT.min, notOutRangeValue)
|
||||
notOutRangeValue = Math.min(TOP_K_VALUE_LIMIT.max, notOutRangeValue)
|
||||
onTopKChange?.(notOutRangeValue)
|
||||
onTopKChange?.(Number.parseInt(value.toFixed(0)))
|
||||
}, [onTopKChange])
|
||||
|
||||
const handleScoreThresholdChange = (value: number) => {
|
||||
let notOutRangeValue = Number.parseFloat(value.toFixed(2))
|
||||
notOutRangeValue = Math.max(SCORE_THRESHOLD_VALUE_LIMIT.min, notOutRangeValue)
|
||||
notOutRangeValue = Math.min(SCORE_THRESHOLD_VALUE_LIMIT.max, notOutRangeValue)
|
||||
onScoreThresholdChange?.(notOutRangeValue)
|
||||
onScoreThresholdChange?.(Number.parseFloat(value.toFixed(2)))
|
||||
}
|
||||
|
||||
return (
|
||||
@ -63,14 +64,22 @@ const TopKAndScoreThreshold = ({
|
||||
popupContent={t('datasetConfig.top_kTip', { ns: 'appDebug' })}
|
||||
/>
|
||||
</div>
|
||||
<InputNumber
|
||||
<NumberField
|
||||
disabled={readonly}
|
||||
type="number"
|
||||
{...TOP_K_VALUE_LIMIT}
|
||||
size="regular"
|
||||
step={TOP_K_VALUE_LIMIT.amount}
|
||||
min={TOP_K_VALUE_LIMIT.min}
|
||||
max={TOP_K_VALUE_LIMIT.max}
|
||||
value={topK}
|
||||
onChange={handleTopKChange}
|
||||
/>
|
||||
onValueChange={value => handleTopKChange(value ?? 0)}
|
||||
>
|
||||
<NumberFieldGroup size="regular">
|
||||
<NumberFieldInput size="regular" />
|
||||
<NumberFieldControls>
|
||||
<NumberFieldIncrement size="regular" />
|
||||
<NumberFieldDecrement size="regular" />
|
||||
</NumberFieldControls>
|
||||
</NumberFieldGroup>
|
||||
</NumberField>
|
||||
</div>
|
||||
{
|
||||
!hiddenScoreThreshold && (
|
||||
@ -90,14 +99,22 @@ const TopKAndScoreThreshold = ({
|
||||
popupContent={t('datasetConfig.score_thresholdTip', { ns: 'appDebug' })}
|
||||
/>
|
||||
</div>
|
||||
<InputNumber
|
||||
<NumberField
|
||||
disabled={readonly || !isScoreThresholdEnabled}
|
||||
type="number"
|
||||
{...SCORE_THRESHOLD_VALUE_LIMIT}
|
||||
size="regular"
|
||||
value={scoreThreshold}
|
||||
onChange={handleScoreThresholdChange}
|
||||
/>
|
||||
step={SCORE_THRESHOLD_VALUE_LIMIT.step}
|
||||
min={SCORE_THRESHOLD_VALUE_LIMIT.min}
|
||||
max={SCORE_THRESHOLD_VALUE_LIMIT.max}
|
||||
value={scoreThreshold ?? null}
|
||||
onValueChange={value => handleScoreThresholdChange(value ?? 0)}
|
||||
>
|
||||
<NumberFieldGroup size="regular">
|
||||
<NumberFieldInput size="regular" />
|
||||
<NumberFieldControls>
|
||||
<NumberFieldIncrement size="regular" />
|
||||
<NumberFieldDecrement size="regular" />
|
||||
</NumberFieldControls>
|
||||
</NumberFieldGroup>
|
||||
</NumberField>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user