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

Feat: Use one-way data flow to synchronize the form data to the canvas #3221 (#7977)

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

Feat: Use one-way data flow to synchronize the form data to the canvas
#3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-05-30 16:02:27 +08:00
committed by GitHub
parent bd4678bca6
commit 9f38b22a3f
16 changed files with 460 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
web/src/pages/agent/form-sheet/next.tsx
View File

@ -10,10 +10,9 @@ import { IModalProps } from '@/interfaces/common';
import { RAGFlowNodeType } from '@/interfaces/database/flow';
import { cn } from '@/lib/utils';
import { zodResolver } from '@hookform/resolvers/zod';
import { get, isPlainObject, lowerFirst } from 'lodash';
import omit from 'lodash/omit';
import { lowerFirst } from 'lodash';
import { Play, X } from 'lucide-react';
import { useEffect, useRef } from 'react';
import { useRef } from 'react';
import { useForm } from 'react-hook-form';
import { BeginId, Operator, operatorMap } from '../constant';
import { FlowFormContext } from '../context';
@ -21,13 +20,10 @@ import { RunTooltip } from '../flow-tooltip';
import { useHandleNodeNameChange } from '../hooks';
import { useHandleFormValuesChange } from '../hooks/use-watch-form-change';
import OperatorIcon from '../operator-icon';
import {
buildCategorizeListFromObject,
convertToObjectArray,
needsSingleStepDebugging,
} from '../utils';
import { needsSingleStepDebugging } from '../utils';
import SingleDebugDrawer from './single-debug-drawer';
import { useFormConfigMap } from './use-form-config-map';
import { useValues } from './use-values';
interface IProps {
node?: RAGFlowNodeType;
@ -54,8 +50,10 @@ const FormSheet = ({
const OperatorForm = currentFormMap.component ?? EmptyContent;
const values = useValues(node);
const form = useForm({
values: currentFormMap.defaultValues,
values: values,
resolver: zodResolver(currentFormMap.schema),
});
@ -74,43 +72,39 @@ const FormSheet = ({
form,
);
useEffect(() => {
if (visible) {
if (node?.id !== previousId.current) {
form.reset();
form.clearErrors();
}
// useEffect(() => {
// if (visible && !form.formState.isDirty) {
// // if (node?.id !== previousId.current) {
// // form.reset();
// // form.clearErrors();
// // }
const formData = node?.data?.form;
// const formData = node?.data?.form;
if (operatorName === Operator.Categorize) {
const items = buildCategorizeListFromObject(
get(node, 'data.form.category_description', {}),
);
if (isPlainObject(formData)) {
// form.setFieldsValue({ ...formData, items });
console.info('xxx');
const nextValues = {
...omit(formData, 'category_description'),
items,
};
// Object.entries(nextValues).forEach(([key, value]) => {
// form.setValue(key, value, { shouldDirty: false });
// });
form.reset(nextValues);
}
} else if (operatorName === Operator.Message) {
form.reset({
...formData,
content: convertToObjectArray(formData.content),
});
} else {
// form.setFieldsValue(node?.data?.form);
form.reset(node?.data?.form);
}
previousId.current = node?.id;
}
}, [visible, form, node?.data?.form, node?.id, node, operatorName]);
// if (operatorName === Operator.Categorize) {
// const items = buildCategorizeListFromObject(
// get(node, 'data.form.category_description', {}),
// );
// if (isPlainObject(formData)) {
// console.info('xxx');
// const nextValues = {
// ...omit(formData, 'category_description'),
// items,
// };
// form.reset(nextValues);
// }
// } else if (operatorName === Operator.Message) {
// form.reset({
// ...formData,
// content: convertToObjectArray(formData.content),
// });
// } else {
// form.reset(node?.data?.form);
// }
// previousId.current = node?.id;
// }
// }, [visible, form, node?.data?.form, node?.id, node, operatorName]);
return (
<Sheet open={visible} modal={false}>

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

@ -1,9 +1,8 @@
import { LlmSettingSchema } from '@/components/llm-setting-items/next';
import { CodeTemplateStrMap, ProgrammingLanguage } from '@/constants/agent';
import { ModelVariableType } from '@/constants/knowledge';
import { useTranslation } from 'react-i18next';
import { z } from 'zod';
import { AgentDialogueMode, Operator } from '../constant';
import { Operator } from '../constant';
import AkShareForm from '../form/akshare-form';
import AnswerForm from '../form/answer-form';
import ArXivForm from '../form/arxiv-form';
@ -45,11 +44,7 @@ export function useFormConfigMap() {
const FormConfigMap = {
[Operator.Begin]: {
component: BeginForm,
defaultValues: {
enablePrologue: true,
prologue: t('chat.setAnOpenerInitial'),
mode: AgentDialogueMode.Conversational,
},
defaultValues: {},
schema: z.object({
enablePrologue: z.boolean().optional(),
prologue: z
@ -116,16 +111,7 @@ export function useFormConfigMap() {
},
[Operator.Categorize]: {
component: CategorizeForm,
defaultValues: {
parameter: ModelVariableType.Precise,
message_history_window_size: 1,
temperatureEnabled: true,
topPEnabled: true,
presencePenaltyEnabled: true,
frequencyPenaltyEnabled: true,
maxTokensEnabled: true,
items: [],
},
defaultValues: {},
schema: z.object({
parameter: z.string().optional(),
...LlmSettingSchema,
@ -149,9 +135,7 @@ export function useFormConfigMap() {
},
[Operator.Message]: {
component: MessageForm,
defaultValues: {
content: [],
},
defaultValues: {},
schema: z.object({
content: z
.array(

42
web/src/pages/agent/form-sheet/use-values.ts Normal file
View File

@ -0,0 +1,42 @@
import { RAGFlowNodeType } from '@/interfaces/database/flow';
import { get, isEmpty, isPlainObject, omit } from 'lodash';
import { useMemo, useRef } from 'react';
import { Operator } from '../constant';
import { buildCategorizeListFromObject, convertToObjectArray } from '../utils';
import { useFormConfigMap } from './use-form-config-map';
export function useValues(node?: RAGFlowNodeType, isDirty?: boolean) {
const operatorName: Operator = node?.data.label as Operator;
const previousId = useRef<string | undefined>(node?.id);
const FormConfigMap = useFormConfigMap();
const currentFormMap = FormConfigMap[operatorName];
const values = useMemo(() => {
const formData = node?.data?.form;
if (operatorName === Operator.Categorize) {
const items = buildCategorizeListFromObject(
get(node, 'data.form.category_description', {}),
);
if (isPlainObject(formData)) {
console.info('xxx');
const nextValues = {
...omit(formData, 'category_description'),
items,
};
return nextValues;
}
} else if (operatorName === Operator.Message) {
return {
...formData,
content: convertToObjectArray(formData.content),
};
} else {
return isEmpty(formData) ? currentFormMap : formData;
}
}, [currentFormMap, node, operatorName]);
return values;
}