feat: settings ui for database pre-preprocessing
AkaraChen
2 years ago
parent
bba9301788
commit
1a6a28f650
@ -0,0 +1,57 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import type { FC, SetStateAction } from 'react'
|
||||||
|
import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react'
|
||||||
|
import Input, { type InputProps } from '../input'
|
||||||
|
import classNames from '@/utils/classnames'
|
||||||
|
|
||||||
|
export type InputNumberProps = {
|
||||||
|
unit?: string
|
||||||
|
onChange: (value: number) => void
|
||||||
|
amount?: number
|
||||||
|
size?: 'sm' | 'md'
|
||||||
|
} & Omit<InputProps, 'value' | 'onChange' | 'size'>
|
||||||
|
|
||||||
|
export const InputNumber: FC<InputNumberProps> = (props) => {
|
||||||
|
const { unit, className, onChange, defaultValue = 0, amount = 1, size = 'sm', max, min, ...rest } = props
|
||||||
|
const [val, setVal] = useState<number>(defaultValue as number)
|
||||||
|
const update = (value: SetStateAction<number>) => {
|
||||||
|
const current = typeof value === 'function' ? value(val) : value as number
|
||||||
|
if (max && current >= (max as number))
|
||||||
|
return
|
||||||
|
if (min && current <= (min as number))
|
||||||
|
return
|
||||||
|
setVal(value)
|
||||||
|
}
|
||||||
|
const inc = () => update(val => val + amount)
|
||||||
|
const dec = () => update(val => val - amount)
|
||||||
|
return <div className='flex'>
|
||||||
|
<Input {...rest}
|
||||||
|
className={classNames('rounded-r-none', className)}
|
||||||
|
value={val}
|
||||||
|
max={max}
|
||||||
|
min={min}
|
||||||
|
onChange={(e) => {
|
||||||
|
const parsed = Number(e.target.value)
|
||||||
|
if (Number.isNaN(parsed))
|
||||||
|
return
|
||||||
|
setVal(parsed)
|
||||||
|
onChange(parsed)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{unit && <div className='flex items-center bg-components-input-bg-normal text-[13px] text-text-placeholder pr-2'>{unit}</div>}
|
||||||
|
<div className='flex flex-col bg-components-input-bg-normal rounded-r-md border-l text-text-tertiary'>
|
||||||
|
<button onClick={inc} className={classNames(
|
||||||
|
size === 'sm' ? 'pt-1' : 'pt-1.5',
|
||||||
|
'px-1.5 hover:bg-components-input-bg-hover',
|
||||||
|
)}>
|
||||||
|
<RiArrowUpSLine className='size-3' />
|
||||||
|
</button>
|
||||||
|
<button onClick={dec} className={classNames(
|
||||||
|
size === 'sm' ? 'pb-1' : 'pb-1.5',
|
||||||
|
'px-1.5 hover:bg-components-input-bg-hover',
|
||||||
|
)}>
|
||||||
|
<RiArrowDownSLine className='size-3' />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import GoldIcon from './assets/gold.svg'
|
||||||
|
import Piggybank from './assets/piggy-bank-mod.svg'
|
||||||
|
import Selection from './assets/selection-mod.svg'
|
||||||
|
import Research from './assets/research-mod.svg'
|
||||||
|
import PatternRecognition from './assets/pattern-recognition-mod.svg'
|
||||||
|
|
||||||
|
export const indexMethodIcon = {
|
||||||
|
high_quality: GoldIcon,
|
||||||
|
economical: Piggybank,
|
||||||
|
}
|
||||||
|
|
||||||
|
export const retrievalIcon = {
|
||||||
|
vector: Selection,
|
||||||
|
fullText: Research,
|
||||||
|
hybrid: PatternRecognition,
|
||||||
|
}
|
||||||
@ -1,16 +1,12 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { Stepper } from '../components/datasets/create/stepper'
|
import { useState } from 'react'
|
||||||
|
import { InputNumber } from '../components/base/input-number'
|
||||||
|
// import { Stepper } from '../components/datasets/create/stepper'
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
|
const [step, setStep] = useState(0)
|
||||||
return <div className='p-4'>
|
return <div className='p-4'>
|
||||||
<Stepper
|
<InputNumber onChange={setStep} unit={'tokens'} />
|
||||||
steps={[
|
|
||||||
{ name: 'Data Source' },
|
|
||||||
{ name: 'Document Processing' },
|
|
||||||
{ name: 'Execute & Finish' },
|
|
||||||
]}
|
|
||||||
activeStepIndex={1}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue