AI/ragflow
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/infiniflow/ragflow.git synced 2025-06-30 20:05:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Render WikipediaForm and BaiduForm with shadcn-ui. #3221 (#5564)

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

Feat: Render WikipediaForm and BaiduForm with shadcn-ui. #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu 2025-03-03 19:01:15 +08:00 committed by GitHub
parent c813c1ff4c
commit 1075b975c5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 215 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/top-n-item.tsx
View File

@ -50,7 +50,7 @@ export function TopNFormField({ max = 30 }: SimilaritySliderFormFieldProps) {
name={'top_n'} name={'top_n'}
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t('topN')}</FormLabel> <FormLabel tooltip={t('topNTip')}>{t('topN')}</FormLabel>
<FormControl> <FormControl>
<SingleFormSlider {...field} max={max}></SingleFormSlider> <SingleFormSlider {...field} max={max}></SingleFormSlider>
</FormControl> </FormControl>

46
web/src/pages/agent/form-sheet/use-form-config-map.tsx
View File

@ -125,23 +125,36 @@ export function useFormConfigMap() {
}, },
[Operator.Baidu]: { [Operator.Baidu]: {
component: BaiduForm, component: BaiduForm,
defaultValues: {}, defaultValues: { top_n: 10 },
schema: z.object({}), schema: z.object({ top_n: z.number() }),
}, },
[Operator.DuckDuckGo]: { [Operator.DuckDuckGo]: {
component: DuckDuckGoForm, component: DuckDuckGoForm,
defaultValues: {}, defaultValues: {
schema: z.object({}), top_n: 10,
channel: 'text',
},
schema: z.object({
top_n: z.number(),
}),
}, },
[Operator.KeywordExtract]: { [Operator.KeywordExtract]: {
component: KeywordExtractForm, component: KeywordExtractForm,
defaultValues: {}, defaultValues: { top_n: 3 },
schema: z.object({}), schema: z.object({
llm_id: z.string(),
top_n: z.number(),
}),
}, },
[Operator.Wikipedia]: { [Operator.Wikipedia]: {
component: WikipediaForm, component: WikipediaForm,
defaultValues: {}, defaultValues: {
schema: z.object({}), top_n: 10,
},
schema: z.object({
language: z.string(),
top_n: z.number(),
}),
}, },
[Operator.PubMed]: { [Operator.PubMed]: {
component: PubMedForm, component: PubMedForm,
@ -206,13 +219,22 @@ export function useFormConfigMap() {
}, },
[Operator.WenCai]: { [Operator.WenCai]: {
component: WenCaiForm, component: WenCaiForm,
defaultValues: {}, defaultValues: {
schema: z.object({}), top_n: 20,
},
schema: z.object({
top_n: z.number(),
query_type: z.string(),
}),
}, },
[Operator.AkShare]: { [Operator.AkShare]: {
component: AkShareForm, component: AkShareForm,
defaultValues: {}, defaultValues: {
schema: z.object({}), top_n: 10,
},
schema: z.object({
top_n: z.number(),
}),
}, },
[Operator.YahooFinance]: { [Operator.YahooFinance]: {
component: YahooFinanceForm, component: YahooFinanceForm,

25
web/src/pages/agent/form/akshare-form/index.tsx
View File

@ -1,19 +1,20 @@
import TopNItem from '@/components/top-n-item'; import { TopNFormField } from '@/components/top-n-item';
import { Form } from 'antd'; import { Form } from '@/components/ui/form';
import { IOperatorForm } from '../../interface'; import { INextOperatorForm } from '../../interface';
import DynamicInputVariable from '../components/dynamic-input-variable'; import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
const AkShareForm = ({ onValuesChange, form, node }: IOperatorForm) => { const AkShareForm = ({ form, node }: INextOperatorForm) => {
return ( return (
<Form <Form {...form}>
name="basic" <form
autoComplete="off" className="space-y-6"
form={form} onSubmit={(e) => {
onValuesChange={onValuesChange} e.preventDefault();
layout={'vertical'} }}
> >
<DynamicInputVariable node={node}></DynamicInputVariable> <DynamicInputVariable node={node}></DynamicInputVariable>
<TopNItem initialValue={10} max={99}></TopNItem> <TopNFormField max={99}></TopNFormField>
</form>
</Form> </Form>
); );
}; };

25
web/src/pages/agent/form/baidu-form/index.tsx
View File

@ -1,19 +1,20 @@
import TopNItem from '@/components/top-n-item'; import { TopNFormField } from '@/components/top-n-item';
import { Form } from 'antd'; import { Form } from '@/components/ui/form';
import { IOperatorForm } from '../../interface'; import { INextOperatorForm } from '../../interface';
import DynamicInputVariable from '../components/dynamic-input-variable'; import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
const BaiduForm = ({ onValuesChange, form, node }: IOperatorForm) => { const BaiduForm = ({ form, node }: INextOperatorForm) => {
return ( return (
<Form <Form {...form}>
name="basic" <form
autoComplete="off" className="space-y-6"
form={form} onSubmit={(e) => {
onValuesChange={onValuesChange} e.preventDefault();
layout={'vertical'} }}
> >
<DynamicInputVariable node={node}></DynamicInputVariable> <DynamicInputVariable node={node}></DynamicInputVariable>
<TopNItem initialValue={10}></TopNItem> <TopNFormField></TopNFormField>
</form>
</Form> </Form>
); );
}; };

54
web/src/pages/agent/form/duckduckgo-form/index.tsx
View File

@ -1,12 +1,20 @@
import TopNItem from '@/components/top-n-item'; import { TopNFormField } from '@/components/top-n-item';
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/components/ui/form';
import { RAGFlowSelect } from '@/components/ui/select';
import { useTranslate } from '@/hooks/common-hooks'; import { useTranslate } from '@/hooks/common-hooks';
import { Form, Select } from 'antd';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { Channel } from '../../constant'; import { Channel } from '../../constant';
import { IOperatorForm } from '../../interface'; import { INextOperatorForm } from '../../interface';
import DynamicInputVariable from '../components/dynamic-input-variable'; import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
const DuckDuckGoForm = ({ onValuesChange, form, node }: IOperatorForm) => { const DuckDuckGoForm = ({ form, node }: INextOperatorForm) => {
const { t } = useTranslate('flow'); const { t } = useTranslate('flow');
const options = useMemo(() => { const options = useMemo(() => {
@ -14,23 +22,29 @@ const DuckDuckGoForm = ({ onValuesChange, form, node }: IOperatorForm) => {
}, [t]); }, [t]);
return ( return (
<Form <Form {...form}>
name="basic" <form
autoComplete="off" className="space-y-6"
form={form} onSubmit={(e) => {
onValuesChange={onValuesChange} e.preventDefault();
layout={'vertical'} }}
> >
<DynamicInputVariable node={node}></DynamicInputVariable> <DynamicInputVariable node={node}></DynamicInputVariable>
<TopNItem initialValue={10}></TopNItem> <TopNFormField></TopNFormField>
<Form.Item <FormField
label={t('channel')} control={form.control}
name={'channel'} name="channel"
tooltip={t('channelTip')} render={({ field }) => (
initialValue={'text'} <FormItem>
> <FormLabel tooltip={t('channelTip')}>{t('channel')}</FormLabel>
<Select options={options}></Select> <FormControl>
</Form.Item> <RAGFlowSelect {...field} options={options} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</form>
</Form> </Form>
); );
}; };

60
web/src/pages/agent/form/keyword-extract-form/index.tsx
View File

@ -1,30 +1,46 @@
import LLMSelect from '@/components/llm-select'; import { NextLLMSelect } from '@/components/llm-select';
import TopNItem from '@/components/top-n-item'; import { TopNFormField } from '@/components/top-n-item';
import { useTranslate } from '@/hooks/common-hooks'; import {
import { Form } from 'antd'; Form,
import { IOperatorForm } from '../../interface'; FormControl,
import DynamicInputVariable from '../components/dynamic-input-variable'; FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/components/ui/form';
import { useTranslation } from 'react-i18next';
import { INextOperatorForm } from '../../interface';
import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
const KeywordExtractForm = ({ onValuesChange, form, node }: IOperatorForm) => { const KeywordExtractForm = ({ form, node }: INextOperatorForm) => {
const { t } = useTranslate('flow'); const { t } = useTranslation();
return ( return (
<Form <Form {...form}>
name="basic" <form
autoComplete="off" className="space-y-6"
form={form} onSubmit={(e) => {
onValuesChange={onValuesChange} e.preventDefault();
layout={'vertical'} }}
> >
<DynamicInputVariable node={node}></DynamicInputVariable> <DynamicInputVariable node={node}></DynamicInputVariable>
<Form.Item <FormField
name={'llm_id'} control={form.control}
label={t('model', { keyPrefix: 'chat' })} name="llm_id"
tooltip={t('modelTip', { keyPrefix: 'chat' })} render={({ field }) => (
> <FormItem>
<LLMSelect></LLMSelect> <FormLabel tooltip={t('chat.modelTip')}>
</Form.Item> {t('chat.model')}
<TopNItem initialValue={3}></TopNItem> </FormLabel>
<FormControl>
<NextLLMSelect {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<TopNFormField></TopNFormField>
</form>
</Form> </Form>
); );
}; };

55
web/src/pages/agent/form/wencai-form/index.tsx
View File

@ -1,34 +1,53 @@
import TopNItem from '@/components/top-n-item'; import { TopNFormField } from '@/components/top-n-item';
import { useTranslate } from '@/hooks/common-hooks'; import {
import { Form, Select } from 'antd'; Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/components/ui/form';
import { RAGFlowSelect } from '@/components/ui/select';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { WenCaiQueryTypeOptions } from '../../constant'; import { WenCaiQueryTypeOptions } from '../../constant';
import { IOperatorForm } from '../../interface'; import { INextOperatorForm } from '../../interface';
import DynamicInputVariable from '../components/dynamic-input-variable'; import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
const WenCaiForm = ({ onValuesChange, form, node }: IOperatorForm) => { const WenCaiForm = ({ form, node }: INextOperatorForm) => {
const { t } = useTranslate('flow'); const { t } = useTranslation();
const wenCaiQueryTypeOptions = useMemo(() => { const wenCaiQueryTypeOptions = useMemo(() => {
return WenCaiQueryTypeOptions.map((x) => ({ return WenCaiQueryTypeOptions.map((x) => ({
value: x, value: x,
label: t(`wenCaiQueryTypeOptions.${x}`), label: t(`flow.wenCaiQueryTypeOptions.${x}`),
})); }));
}, [t]); }, [t]);
return ( return (
<Form <Form {...form}>
name="basic" <form
autoComplete="off" className="space-y-6"
form={form} onSubmit={(e) => {
onValuesChange={onValuesChange} e.preventDefault();
layout={'vertical'} }}
> >
<DynamicInputVariable node={node}></DynamicInputVariable> <DynamicInputVariable node={node}></DynamicInputVariable>
<TopNItem initialValue={20} max={99}></TopNItem> <TopNFormField max={99}></TopNFormField>
<Form.Item label={t('queryType')} name={'query_type'}> <FormField
<Select options={wenCaiQueryTypeOptions}></Select> control={form.control}
</Form.Item> name="query_type"
render={({ field }) => (
<FormItem>
<FormLabel>{t('flow.queryType')}</FormLabel>
<FormControl>
<RAGFlowSelect {...field} options={wenCaiQueryTypeOptions} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</form>
</Form> </Form>
); );
}; };

50
web/src/pages/agent/form/wikipedia-form/index.tsx
View File

@ -1,26 +1,46 @@
import TopNItem from '@/components/top-n-item'; import { TopNFormField } from '@/components/top-n-item';
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/components/ui/form';
import { RAGFlowSelect } from '@/components/ui/select';
import { useTranslate } from '@/hooks/common-hooks'; import { useTranslate } from '@/hooks/common-hooks';
import { Form, Select } from 'antd';
import { LanguageOptions } from '../../constant'; import { LanguageOptions } from '../../constant';
import { IOperatorForm } from '../../interface'; import { INextOperatorForm } from '../../interface';
import DynamicInputVariable from '../components/dynamic-input-variable'; import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
const WikipediaForm = ({ onValuesChange, form, node }: IOperatorForm) => { const WikipediaForm = ({ form, node }: INextOperatorForm) => {
const { t } = useTranslate('common'); const { t } = useTranslate('common');
return ( return (
<Form <Form {...form}>
name="basic" <form
autoComplete="off" className="space-y-6"
form={form} onSubmit={(e) => {
onValuesChange={onValuesChange} e.preventDefault();
layout={'vertical'} }}
> >
<DynamicInputVariable node={node}></DynamicInputVariable> <DynamicInputVariable node={node}></DynamicInputVariable>
<TopNItem initialValue={10}></TopNItem> <TopNFormField></TopNFormField>
<Form.Item label={t('language')} name={'language'}>
<Select options={LanguageOptions}></Select> <FormField
</Form.Item> control={form.control}
name="language"
render={({ field }) => (
<FormItem>
<FormLabel>{t('language')}</FormLabel>
<FormControl>
<RAGFlowSelect {...field} options={LanguageOptions} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</form>
</Form> </Form>
); );
}; };