mirror of https://github.com/langgenius/dify.git
54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import { RiQuestionLine } from '@remixicon/react'
|
|
import * as React from 'react'
|
|
import { useCallback } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { InputNumber } from '@/app/components/base/input-number'
|
|
import Slider from '@/app/components/base/slider'
|
|
import Tooltip from '@/app/components/base/tooltip'
|
|
|
|
type KeyWordNumberProps = {
|
|
keywordNumber: number
|
|
onKeywordNumberChange: (value: number) => void
|
|
}
|
|
|
|
const KeyWordNumber = ({
|
|
keywordNumber,
|
|
onKeywordNumberChange,
|
|
}: KeyWordNumberProps) => {
|
|
const { t } = useTranslation()
|
|
|
|
const handleInputChange = useCallback((value: number | undefined) => {
|
|
if (value)
|
|
onKeywordNumberChange(value)
|
|
}, [onKeywordNumberChange])
|
|
|
|
return (
|
|
<div className="flex items-center gap-x-1">
|
|
<div className="flex grow items-center gap-x-0.5">
|
|
<div className="system-xs-medium truncate text-text-secondary">
|
|
{t('form.numberOfKeywords', { ns: 'datasetSettings' })}
|
|
</div>
|
|
<Tooltip
|
|
popupContent="number of keywords"
|
|
>
|
|
<RiQuestionLine className="h-3.5 w-3.5 text-text-quaternary" />
|
|
</Tooltip>
|
|
</div>
|
|
<Slider
|
|
className="mr-3 w-[206px] shrink-0"
|
|
value={keywordNumber}
|
|
max={50}
|
|
onChange={onKeywordNumberChange}
|
|
/>
|
|
<InputNumber
|
|
wrapperClassName="shrink-0 w-12"
|
|
type="number"
|
|
value={keywordNumber}
|
|
onChange={handleInputChange}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default React.memo(KeyWordNumber)
|