AI/ragflow
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/infiniflow/ragflow.git synced 2025-08-14 18:45:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Render QWeatherForm with shadcn-ui. #3221 (#5558)

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

Feat: Render QWeatherForm 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 17:59:55 +08:00 committed by GitHub
parent 76cb4cd174
commit 64e9702a26
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 131 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -186,7 +186,13 @@ export function useFormConfigMap() {
[Operator.QWeather]: { [Operator.QWeather]: {
component: QWeatherForm, component: QWeatherForm,
defaultValues: {}, defaultValues: {},
schema: z.object({}), schema: z.object({
web_apikey: z.string(),
lang: z.string(),
type: z.string(),
user_type: z.string(),
time_period: z.string().optional(),
}),
}, },
[Operator.ExeSQL]: { [Operator.ExeSQL]: {
component: ExeSQLForm, component: ExeSQLForm,

179
web/src/pages/agent/form/qweather-form/index.tsx
View File

@ -1,86 +1,155 @@
import { useTranslate } from '@/hooks/common-hooks'; import {
import { Form, Input, Select } from 'antd'; Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { RAGFlowSelect } from '@/components/ui/select';
import { useCallback, useMemo } from 'react'; import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { import {
QWeatherLangOptions, QWeatherLangOptions,
QWeatherTimePeriodOptions, QWeatherTimePeriodOptions,
QWeatherTypeOptions, QWeatherTypeOptions,
QWeatherUserTypeOptions, QWeatherUserTypeOptions,
} from '../../constant'; } 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';
enum FormFieldName {
Type = 'type',
UserType = 'user_type',
}
const QWeatherForm = ({ form, node }: INextOperatorForm) => {
const { t } = useTranslation();
const typeValue = form.watch(FormFieldName.Type);
const QWeatherForm = ({ onValuesChange, form, node }: IOperatorForm) => {
const { t } = useTranslate('flow');
const qWeatherLangOptions = useMemo(() => { const qWeatherLangOptions = useMemo(() => {
return QWeatherLangOptions.map((x) => ({ return QWeatherLangOptions.map((x) => ({
value: x, value: x,
label: t(`qWeatherLangOptions.${x}`), label: t(`flow.qWeatherLangOptions.${x}`),
})); }));
}, [t]); }, [t]);
const qWeatherTypeOptions = useMemo(() => { const qWeatherTypeOptions = useMemo(() => {
return QWeatherTypeOptions.map((x) => ({ return QWeatherTypeOptions.map((x) => ({
value: x, value: x,
label: t(`qWeatherTypeOptions.${x}`), label: t(`flow.qWeatherTypeOptions.${x}`),
})); }));
}, [t]); }, [t]);
const qWeatherUserTypeOptions = useMemo(() => { const qWeatherUserTypeOptions = useMemo(() => {
return QWeatherUserTypeOptions.map((x) => ({ return QWeatherUserTypeOptions.map((x) => ({
value: x, value: x,
label: t(`qWeatherUserTypeOptions.${x}`), label: t(`flow.qWeatherUserTypeOptions.${x}`),
})); }));
}, [t]); }, [t]);
const getQWeatherTimePeriodOptions = useCallback( const getQWeatherTimePeriodOptions = useCallback(() => {
(userType: string) => { let options = QWeatherTimePeriodOptions;
let options = QWeatherTimePeriodOptions; const userType = form.getValues(FormFieldName.UserType);
if (userType === 'free') { if (userType === 'free') {
options = options.slice(0, 3); options = options.slice(0, 3);
} }
return options.map((x) => ({ return options.map((x) => ({
value: x, value: x,
label: t(`qWeatherTimePeriodOptions.${x}`), label: t(`flow.qWeatherTimePeriodOptions.${x}`),
})); }));
}, }, [form, 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>
<Form.Item label={t('webApiKey')} name={'web_apikey'}> <FormField
<Input></Input> control={form.control}
</Form.Item> name="web_apikey"
<Form.Item label={t('lang')} name={'lang'}> render={({ field }) => (
<Select options={qWeatherLangOptions}></Select> <FormItem>
</Form.Item> <FormLabel>{t('flow.webApiKey')}</FormLabel>
<Form.Item label={t('type')} name={'type'}> <FormControl>
<Select options={qWeatherTypeOptions}></Select> <Input {...field} />
</Form.Item> </FormControl>
<Form.Item label={t('userType')} name={'user_type'}> <FormMessage />
<Select options={qWeatherUserTypeOptions}></Select> </FormItem>
</Form.Item> )}
<Form.Item noStyle dependencies={['type', 'user_type']}> />
{({ getFieldValue }) => <FormField
getFieldValue('type') === 'weather' && ( control={form.control}
<Form.Item label={t('timePeriod')} name={'time_period'}> name="lang"
<Select render={({ field }) => (
options={getQWeatherTimePeriodOptions( <FormItem>
getFieldValue('user_type'), <FormLabel>{t('flow.lang')}</FormLabel>
)} <FormControl>
></Select> <RAGFlowSelect
</Form.Item> {...field}
) options={qWeatherLangOptions}
} ></RAGFlowSelect>
</Form.Item> </FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name={FormFieldName.Type}
render={({ field }) => (
<FormItem>
<FormLabel>{t('flow.type')}</FormLabel>
<FormControl>
<RAGFlowSelect
{...field}
options={qWeatherTypeOptions}
></RAGFlowSelect>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name={FormFieldName.UserType}
render={({ field }) => (
<FormItem>
<FormLabel>{t('flow.userType')}</FormLabel>
<FormControl>
<RAGFlowSelect
{...field}
options={qWeatherUserTypeOptions}
></RAGFlowSelect>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{typeValue === 'weather' && (
<FormField
control={form.control}
name={'time_period'}
render={({ field }) => (
<FormItem>
<FormLabel>{t('flow.timePeriod')}</FormLabel>
<FormControl>
<RAGFlowSelect
{...field}
options={getQWeatherTimePeriodOptions()}
></RAGFlowSelect>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
</form>
</Form> </Form>
); );
}; };