mirror of
https://github.com/infiniflow/ragflow.git
synced 2025-12-26 17:16:52 +08:00
### What problem does this PR solve? Feat: Adjust the style of the canvas node #10703 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
@ -1,106 +0,0 @@
|
||||
import { crossLanguageOptions } from '@/components/cross-language-form-field';
|
||||
import { LayoutRecognizeFormField } from '@/components/layout-recognize-form-field';
|
||||
import {
|
||||
LLMFormField,
|
||||
LLMFormFieldProps,
|
||||
} from '@/components/llm-setting-items/llm-form-field';
|
||||
import {
|
||||
SelectWithSearch,
|
||||
SelectWithSearchFlagOptionType,
|
||||
} from '@/components/originui/select-with-search';
|
||||
import { RAGFlowFormItem } from '@/components/ragflow-form';
|
||||
import { upperCase, upperFirst } from 'lodash';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
FileType,
|
||||
OutputFormatMap,
|
||||
SpreadsheetOutputFormat,
|
||||
} from '../../constant';
|
||||
import { CommonProps } from './interface';
|
||||
import { buildFieldNameWithPrefix } from './utils';
|
||||
|
||||
const UppercaseFields = [
|
||||
SpreadsheetOutputFormat.Html,
|
||||
SpreadsheetOutputFormat.Json,
|
||||
];
|
||||
|
||||
function buildOutputOptionsFormatMap() {
|
||||
return Object.entries(OutputFormatMap).reduce<
|
||||
Record<string, SelectWithSearchFlagOptionType[]>
|
||||
>((pre, [key, value]) => {
|
||||
pre[key] = Object.values(value).map((v) => ({
|
||||
label: UppercaseFields.some((x) => x === v)
|
||||
? upperCase(v)
|
||||
: upperFirst(v),
|
||||
value: v,
|
||||
}));
|
||||
return pre;
|
||||
}, {});
|
||||
}
|
||||
|
||||
export type OutputFormatFormFieldProps = CommonProps & {
|
||||
fileType: FileType;
|
||||
};
|
||||
|
||||
export function OutputFormatFormField({
|
||||
prefix,
|
||||
fileType,
|
||||
}: OutputFormatFormFieldProps) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<RAGFlowFormItem
|
||||
name={buildFieldNameWithPrefix(`output_format`, prefix)}
|
||||
label={t('dataflow.outputFormat')}
|
||||
>
|
||||
<SelectWithSearch
|
||||
options={buildOutputOptionsFormatMap()[fileType]}
|
||||
></SelectWithSearch>
|
||||
</RAGFlowFormItem>
|
||||
);
|
||||
}
|
||||
|
||||
export function ParserMethodFormField({
|
||||
prefix,
|
||||
optionsWithoutLLM,
|
||||
}: CommonProps & { optionsWithoutLLM?: { value: string; label: string }[] }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<LayoutRecognizeFormField
|
||||
name={buildFieldNameWithPrefix(`parse_method`, prefix)}
|
||||
horizontal={false}
|
||||
optionsWithoutLLM={optionsWithoutLLM}
|
||||
label={t('dataflow.parserMethod')}
|
||||
></LayoutRecognizeFormField>
|
||||
);
|
||||
}
|
||||
|
||||
export function LargeModelFormField({
|
||||
prefix,
|
||||
options,
|
||||
}: CommonProps & Pick<LLMFormFieldProps, 'options'>) {
|
||||
return (
|
||||
<LLMFormField
|
||||
name={buildFieldNameWithPrefix('llm_id', prefix)}
|
||||
options={options}
|
||||
></LLMFormField>
|
||||
);
|
||||
}
|
||||
|
||||
export function LanguageFormField({ prefix }: CommonProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<RAGFlowFormItem
|
||||
name={buildFieldNameWithPrefix(`lang`, prefix)}
|
||||
label={t('dataflow.lang')}
|
||||
>
|
||||
{(field) => (
|
||||
<SelectWithSearch
|
||||
options={crossLanguageOptions}
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
></SelectWithSearch>
|
||||
)}
|
||||
</RAGFlowFormItem>
|
||||
);
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
import { RAGFlowFormItem } from '@/components/ragflow-form';
|
||||
import { MultiSelect } from '@/components/ui/multi-select';
|
||||
import { buildOptions } from '@/utils/form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ParserFields } from '../../constant';
|
||||
import { CommonProps } from './interface';
|
||||
import { buildFieldNameWithPrefix } from './utils';
|
||||
|
||||
const options = buildOptions(ParserFields);
|
||||
|
||||
export function EmailFormFields({ prefix }: CommonProps) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<RAGFlowFormItem
|
||||
name={buildFieldNameWithPrefix(`fields`, prefix)}
|
||||
label={t('dataflow.fields')}
|
||||
>
|
||||
{(field) => (
|
||||
<MultiSelect
|
||||
options={options}
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
variant="inverted"
|
||||
></MultiSelect>
|
||||
)}
|
||||
</RAGFlowFormItem>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
import { RAGFlowFormItem } from '@/components/ragflow-form';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { buildOptions } from '@/utils/form';
|
||||
import { isEmpty } from 'lodash';
|
||||
import { useEffect, useMemo } from 'react';
|
||||
import { useFormContext, useWatch } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ImageParseMethod } from '../../constant';
|
||||
import { LanguageFormField, ParserMethodFormField } from './common-form-fields';
|
||||
import { CommonProps } from './interface';
|
||||
import { useSetInitialLanguage } from './use-set-initial-language';
|
||||
import { buildFieldNameWithPrefix } from './utils';
|
||||
|
||||
export function ImageFormFields({ prefix }: CommonProps) {
|
||||
const { t } = useTranslation();
|
||||
const form = useFormContext();
|
||||
const options = buildOptions(
|
||||
ImageParseMethod,
|
||||
t,
|
||||
'dataflow.imageParseMethodOptions',
|
||||
);
|
||||
const parseMethodName = buildFieldNameWithPrefix('parse_method', prefix);
|
||||
|
||||
const parseMethod = useWatch({
|
||||
name: parseMethodName,
|
||||
});
|
||||
|
||||
const languageShown = useMemo(() => {
|
||||
return !isEmpty(parseMethod) && parseMethod !== ImageParseMethod.OCR;
|
||||
}, [parseMethod]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEmpty(form.getValues(parseMethodName))) {
|
||||
form.setValue(parseMethodName, ImageParseMethod.OCR, {
|
||||
shouldValidate: true,
|
||||
shouldDirty: true,
|
||||
});
|
||||
}
|
||||
}, [form, parseMethodName]);
|
||||
|
||||
useSetInitialLanguage({ prefix, languageShown });
|
||||
|
||||
return (
|
||||
<>
|
||||
<ParserMethodFormField
|
||||
prefix={prefix}
|
||||
optionsWithoutLLM={options}
|
||||
></ParserMethodFormField>
|
||||
{languageShown && <LanguageFormField prefix={prefix}></LanguageFormField>}
|
||||
{languageShown && (
|
||||
<RAGFlowFormItem
|
||||
name={buildFieldNameWithPrefix('system_prompt', prefix)}
|
||||
label={t('dataflow.systemPrompt')}
|
||||
>
|
||||
<Textarea placeholder={t('dataflow.systemPromptPlaceholder')} />
|
||||
</RAGFlowFormItem>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,226 +0,0 @@
|
||||
import {
|
||||
SelectWithSearch,
|
||||
SelectWithSearchFlagOptionType,
|
||||
} from '@/components/originui/select-with-search';
|
||||
import { RAGFlowFormItem } from '@/components/ragflow-form';
|
||||
import { BlockButton, Button } from '@/components/ui/button';
|
||||
import { Form } from '@/components/ui/form';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { buildOptions } from '@/utils/form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useHover } from 'ahooks';
|
||||
import { Trash2 } from 'lucide-react';
|
||||
import { memo, useCallback, useMemo, useRef } from 'react';
|
||||
import {
|
||||
UseFieldArrayRemove,
|
||||
useFieldArray,
|
||||
useForm,
|
||||
useFormContext,
|
||||
} from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { z } from 'zod';
|
||||
import {
|
||||
FileType,
|
||||
InitialOutputFormatMap,
|
||||
initialParserValues,
|
||||
} from '../../constant';
|
||||
import { useFormValues } from '../../hooks/use-form-values';
|
||||
import { useWatchFormChange } from '../../hooks/use-watch-form-change';
|
||||
import { INextOperatorForm } from '../../interface';
|
||||
import { buildOutputList } from '../../utils/build-output-list';
|
||||
import { Output } from '../components/output';
|
||||
import { OutputFormatFormField } from './common-form-fields';
|
||||
import { EmailFormFields } from './email-form-fields';
|
||||
import { ImageFormFields } from './image-form-fields';
|
||||
import { PdfFormFields } from './pdf-form-fields';
|
||||
import { buildFieldNameWithPrefix } from './utils';
|
||||
import { VideoFormFields } from './video-form-fields';
|
||||
|
||||
const outputList = buildOutputList(initialParserValues.outputs);
|
||||
|
||||
const FileFormatWidgetMap = {
|
||||
[FileType.PDF]: PdfFormFields,
|
||||
[FileType.Video]: VideoFormFields,
|
||||
[FileType.Audio]: VideoFormFields,
|
||||
[FileType.Email]: EmailFormFields,
|
||||
[FileType.Image]: ImageFormFields,
|
||||
};
|
||||
|
||||
type ParserItemProps = {
|
||||
name: string;
|
||||
index: number;
|
||||
fieldLength: number;
|
||||
remove: UseFieldArrayRemove;
|
||||
fileFormatOptions: SelectWithSearchFlagOptionType[];
|
||||
};
|
||||
|
||||
export const FormSchema = z.object({
|
||||
setups: z.array(
|
||||
z.object({
|
||||
fileFormat: z.string().nullish(),
|
||||
output_format: z.string().optional(),
|
||||
parse_method: z.string().optional(),
|
||||
lang: z.string().optional(),
|
||||
fields: z.array(z.string()).optional(),
|
||||
llm_id: z.string().optional(),
|
||||
system_prompt: z.string().optional(),
|
||||
}),
|
||||
),
|
||||
});
|
||||
|
||||
export type ParserFormSchemaType = z.infer<typeof FormSchema>;
|
||||
|
||||
function ParserItem({
|
||||
name,
|
||||
index,
|
||||
fieldLength,
|
||||
remove,
|
||||
fileFormatOptions,
|
||||
}: ParserItemProps) {
|
||||
const { t } = useTranslation();
|
||||
const form = useFormContext<ParserFormSchemaType>();
|
||||
const ref = useRef(null);
|
||||
const isHovering = useHover(ref);
|
||||
|
||||
const prefix = `${name}.${index}`;
|
||||
const fileFormat = form.getValues(`setups.${index}.fileFormat`);
|
||||
|
||||
const values = form.getValues();
|
||||
const parserList = values.setups.slice(); // Adding, deleting, or modifying the parser array will not change the reference.
|
||||
|
||||
const filteredFileFormatOptions = useMemo(() => {
|
||||
const otherFileFormatList = parserList
|
||||
.filter((_, idx) => idx !== index)
|
||||
.map((x) => x.fileFormat);
|
||||
|
||||
return fileFormatOptions.filter((x) => {
|
||||
return !otherFileFormatList.includes(x.value);
|
||||
});
|
||||
}, [fileFormatOptions, index, parserList]);
|
||||
|
||||
const Widget =
|
||||
typeof fileFormat === 'string' && fileFormat in FileFormatWidgetMap
|
||||
? FileFormatWidgetMap[fileFormat as keyof typeof FileFormatWidgetMap]
|
||||
: () => <></>;
|
||||
|
||||
const handleFileTypeChange = useCallback(
|
||||
(value: FileType) => {
|
||||
form.setValue(
|
||||
`setups.${index}.output_format`,
|
||||
InitialOutputFormatMap[value],
|
||||
{ shouldDirty: true, shouldValidate: true, shouldTouch: true },
|
||||
);
|
||||
},
|
||||
[form, index],
|
||||
);
|
||||
|
||||
return (
|
||||
<section
|
||||
className={cn('space-y-5 py-2.5 rounded-md', {
|
||||
'bg-state-error-5': isHovering,
|
||||
})}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-text-primary text-sm font-medium">
|
||||
Parser {index + 1}
|
||||
</span>
|
||||
{index > 0 && (
|
||||
<Button variant={'ghost'} onClick={() => remove(index)} ref={ref}>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<RAGFlowFormItem
|
||||
name={buildFieldNameWithPrefix(`fileFormat`, prefix)}
|
||||
label={t('dataflow.fileFormats')}
|
||||
>
|
||||
{(field) => (
|
||||
<SelectWithSearch
|
||||
value={field.value}
|
||||
onChange={(val) => {
|
||||
field.onChange(val);
|
||||
handleFileTypeChange(val as FileType);
|
||||
}}
|
||||
options={filteredFileFormatOptions}
|
||||
></SelectWithSearch>
|
||||
)}
|
||||
</RAGFlowFormItem>
|
||||
<Widget prefix={prefix} fileType={fileFormat as FileType}></Widget>
|
||||
<div className="hidden">
|
||||
<OutputFormatFormField
|
||||
prefix={prefix}
|
||||
fileType={fileFormat as FileType}
|
||||
/>
|
||||
</div>
|
||||
{index < fieldLength - 1 && <Separator />}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const ParserForm = ({ node }: INextOperatorForm) => {
|
||||
const { t } = useTranslation();
|
||||
const defaultValues = useFormValues(initialParserValues, node);
|
||||
|
||||
const FileFormatOptions = buildOptions(
|
||||
FileType,
|
||||
t,
|
||||
'dataflow.fileFormatOptions',
|
||||
).filter(
|
||||
(x) => x.value !== FileType.Video, // Temporarily hide the video option
|
||||
);
|
||||
|
||||
const form = useForm<z.infer<typeof FormSchema>>({
|
||||
defaultValues,
|
||||
resolver: zodResolver(FormSchema),
|
||||
shouldUnregister: true,
|
||||
});
|
||||
|
||||
const name = 'setups';
|
||||
const { fields, remove, append } = useFieldArray({
|
||||
name,
|
||||
control: form.control,
|
||||
});
|
||||
|
||||
const add = useCallback(() => {
|
||||
append({
|
||||
fileFormat: null,
|
||||
output_format: '',
|
||||
parse_method: '',
|
||||
lang: '',
|
||||
fields: [],
|
||||
llm_id: '',
|
||||
});
|
||||
}, [append]);
|
||||
|
||||
useWatchFormChange(node?.id, form);
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form className="px-5">
|
||||
{fields.map((field, index) => {
|
||||
return (
|
||||
<ParserItem
|
||||
key={field.id}
|
||||
name={name}
|
||||
index={index}
|
||||
fieldLength={fields.length}
|
||||
remove={remove}
|
||||
fileFormatOptions={FileFormatOptions}
|
||||
></ParserItem>
|
||||
);
|
||||
})}
|
||||
{fields.length < FileFormatOptions.length && (
|
||||
<BlockButton onClick={add} type="button" className="mt-2.5">
|
||||
{t('dataflow.addParser')}
|
||||
</BlockButton>
|
||||
)}
|
||||
</form>
|
||||
<div className="p-5">
|
||||
<Output list={outputList}></Output>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(ParserForm);
|
||||
@ -1,3 +0,0 @@
|
||||
export type CommonProps = {
|
||||
prefix: string;
|
||||
};
|
||||
@ -1,44 +0,0 @@
|
||||
import { ParseDocumentType } from '@/components/layout-recognize-form-field';
|
||||
import { isEmpty } from 'lodash';
|
||||
import { useEffect, useMemo } from 'react';
|
||||
import { useFormContext, useWatch } from 'react-hook-form';
|
||||
import { LanguageFormField, ParserMethodFormField } from './common-form-fields';
|
||||
import { CommonProps } from './interface';
|
||||
import { useSetInitialLanguage } from './use-set-initial-language';
|
||||
import { buildFieldNameWithPrefix } from './utils';
|
||||
|
||||
export function PdfFormFields({ prefix }: CommonProps) {
|
||||
const form = useFormContext();
|
||||
|
||||
const parseMethodName = buildFieldNameWithPrefix('parse_method', prefix);
|
||||
|
||||
const parseMethod = useWatch({
|
||||
name: parseMethodName,
|
||||
});
|
||||
|
||||
const languageShown = useMemo(() => {
|
||||
return (
|
||||
!isEmpty(parseMethod) &&
|
||||
parseMethod !== ParseDocumentType.DeepDOC &&
|
||||
parseMethod !== ParseDocumentType.PlainText
|
||||
);
|
||||
}, [parseMethod]);
|
||||
|
||||
useSetInitialLanguage({ prefix, languageShown });
|
||||
|
||||
useEffect(() => {
|
||||
if (isEmpty(form.getValues(parseMethodName))) {
|
||||
form.setValue(parseMethodName, ParseDocumentType.DeepDOC, {
|
||||
shouldValidate: true,
|
||||
shouldDirty: true,
|
||||
});
|
||||
}
|
||||
}, [form, parseMethodName]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ParserMethodFormField prefix={prefix}></ParserMethodFormField>
|
||||
{languageShown && <LanguageFormField prefix={prefix}></LanguageFormField>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
import { crossLanguageOptions } from '@/components/cross-language-form-field';
|
||||
import { isEmpty } from 'lodash';
|
||||
import { useEffect } from 'react';
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
import { buildFieldNameWithPrefix } from './utils';
|
||||
|
||||
export function useSetInitialLanguage({
|
||||
prefix,
|
||||
languageShown,
|
||||
}: {
|
||||
prefix: string;
|
||||
languageShown: boolean;
|
||||
}) {
|
||||
const form = useFormContext();
|
||||
const lang = form.getValues(buildFieldNameWithPrefix('lang', prefix));
|
||||
|
||||
useEffect(() => {
|
||||
if (languageShown && isEmpty(lang)) {
|
||||
form.setValue(
|
||||
buildFieldNameWithPrefix('lang', prefix),
|
||||
crossLanguageOptions[0].value,
|
||||
{
|
||||
shouldValidate: true,
|
||||
shouldDirty: true,
|
||||
},
|
||||
);
|
||||
}
|
||||
}, [form, lang, languageShown, prefix]);
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
export function buildFieldNameWithPrefix(name: string, prefix: string) {
|
||||
return `${prefix}.${name}`;
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
import { LlmModelType } from '@/constants/knowledge';
|
||||
import { useComposeLlmOptionsByModelTypes } from '@/hooks/llm-hooks';
|
||||
import {
|
||||
LargeModelFormField,
|
||||
OutputFormatFormFieldProps,
|
||||
} from './common-form-fields';
|
||||
|
||||
export function VideoFormFields({ prefix }: OutputFormatFormFieldProps) {
|
||||
const modelOptions = useComposeLlmOptionsByModelTypes([
|
||||
LlmModelType.Speech2text,
|
||||
]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Multimodal Model */}
|
||||
<LargeModelFormField
|
||||
prefix={prefix}
|
||||
options={modelOptions}
|
||||
></LargeModelFormField>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user