pengjunjie/ragflow
1
0
Fork 1
mirror of https://github.com/infiniflow/ragflow.git synced 2025-12-25 08:06:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Add the SelectWithSearch component #3221 (#7892)

Browse Source 
### What problem does this PR solve?

Feat: Add the SelectWithSearch component #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-05-28 09:22:09 +08:00
committed by GitHub
parent 273f36cc54
commit 84f5ae20be
12 changed files with 399 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
web/src/components/llm-setting-items/next.tsx
View File

@ -4,6 +4,7 @@ import { useComposeLlmOptionsByModelTypes } from '@/hooks/llm-hooks';
import { camelCase } from 'lodash';
import { useCallback } from 'react';
import { useFormContext } from 'react-hook-form';
import { z } from 'zod';
import {
FormControl,
FormField,
@ -11,7 +12,6 @@ import {
FormLabel,
FormMessage,
} from '../ui/form';
import { Input } from '../ui/input';
import {
Select,
SelectContent,
@ -21,86 +21,20 @@ import {
SelectTrigger,
SelectValue,
} from '../ui/select';
import { FormSlider } from '../ui/slider';
import { Switch } from '../ui/switch';
interface SliderWithInputNumberFormFieldProps {
name: string;
label: string;
checkName: string;
max: number;
min?: number;
step?: number;
}
function SliderWithInputNumberFormField({
name,
label,
checkName,
max,
min = 0,
step = 1,
}: SliderWithInputNumberFormFieldProps) {
const { control, watch } = useFormContext();
const { t } = useTranslate('chat');
const disabled = !watch(checkName);
return (
<FormField
control={control}
name={name}
render={({ field }) => (
<FormItem>
<div className="flex items-center justify-between">
<FormLabel>{t(label)}</FormLabel>
<FormField
control={control}
name={checkName}
render={({ field }) => (
<FormItem>
<FormControl>
<Switch
{...field}
checked={field.value}
onCheckedChange={field.onChange}
></Switch>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormControl>
<div className="flex w-full items-center space-x-2">
<FormSlider
{...field}
disabled={disabled}
max={max}
min={min}
step={step}
></FormSlider>
<Input
type={'number'}
className="w-2/5"
{...field}
disabled={disabled}
max={max}
min={min}
step={step}
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
);
}
import { SliderInputSwitchFormField } from './slider';
interface LlmSettingFieldItemsProps {
prefix?: string;
}
export const LlmSettingSchema = {
llm_id: z.string(),
temperature: z.coerce.number(),
top_p: z.string(),
presence_penalty: z.coerce.number(),
frequency_penalty: z.coerce.number(),
};
export function LlmSettingFieldItems({ prefix }: LlmSettingFieldItemsProps) {
const form = useFormContext();
const { t } = useTranslate('chat');
@ -122,7 +56,7 @@ export function LlmSettingFieldItems({ prefix }: LlmSettingFieldItemsProps) {
);
return (
<div className="space-y-8">
<div className="space-y-5">
<FormField
control={form.control}
name={'llm_id'}
@ -180,40 +114,40 @@ export function LlmSettingFieldItems({ prefix }: LlmSettingFieldItemsProps) {
</FormItem>
)}
/>
<SliderWithInputNumberFormField
<SliderInputSwitchFormField
name={getFieldWithPrefix('temperature')}
checkName="temperatureEnabled"
label="temperature"
max={1}
step={0.01}
></SliderWithInputNumberFormField>
<SliderWithInputNumberFormField
></SliderInputSwitchFormField>
<SliderInputSwitchFormField
name={getFieldWithPrefix('top_p')}
checkName="topPEnabled"
label="topP"
max={1}
step={0.01}
></SliderWithInputNumberFormField>
<SliderWithInputNumberFormField
></SliderInputSwitchFormField>
<SliderInputSwitchFormField
name={getFieldWithPrefix('presence_penalty')}
checkName="presencePenaltyEnabled"
label="presencePenalty"
max={1}
step={0.01}
></SliderWithInputNumberFormField>
<SliderWithInputNumberFormField
></SliderInputSwitchFormField>
<SliderInputSwitchFormField
name={getFieldWithPrefix('frequency_penalty')}
checkName="frequencyPenaltyEnabled"
label="frequencyPenalty"
max={1}
step={0.01}
></SliderWithInputNumberFormField>
<SliderWithInputNumberFormField
></SliderInputSwitchFormField>
<SliderInputSwitchFormField
name={getFieldWithPrefix('max_tokens')}
checkName="maxTokensEnabled"
label="maxTokens"
max={128000}
></SliderWithInputNumberFormField>
></SliderInputSwitchFormField>
</div>
);
}

92
web/src/components/llm-setting-items/slider.tsx Normal file
View File

@ -0,0 +1,92 @@
import { useTranslate } from '@/hooks/common-hooks';
import { cn } from '@/lib/utils';
import { useFormContext } from 'react-hook-form';
import { SingleFormSlider } from '../ui/dual-range-slider';
import {
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '../ui/form';
import { Input } from '../ui/input';
import { Switch } from '../ui/switch';
type SliderInputSwitchFormFieldProps = {
max?: number;
min?: number;
step?: number;
name: string;
label: string;
defaultValue?: number;
className?: string;
checkName: string;
};
export function SliderInputSwitchFormField({
max,
min,
step,
label,
name,
defaultValue,
className,
checkName,
}: SliderInputSwitchFormFieldProps) {
const form = useFormContext();
const disabled = !form.watch(checkName);
const { t } = useTranslate('chat');
return (
<FormField
control={form.control}
name={name}
defaultValue={defaultValue}
render={({ field }) => (
<FormItem>
<FormLabel tooltip={t(`${label}Tip`)}>{t(label)}</FormLabel>
<div
className={cn('flex items-center gap-4 justify-between', className)}
>
<FormField
control={form.control}
name={checkName}
render={({ field }) => (
<FormItem>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormControl>
<SingleFormSlider
{...field}
max={max}
min={min}
step={step}
disabled={disabled}
></SingleFormSlider>
</FormControl>
<FormControl>
<Input
disabled={disabled}
type={'number'}
className="h-7 w-20"
max={max}
min={min}
step={step}
{...field}
></Input>
</FormControl>
</div>
<FormMessage />
</FormItem>
)}
/>
);
}