pengjunjie/ragflow
1
0
Fork 1
mirror of https://github.com/infiniflow/ragflow.git synced 2025-12-08 20:42:30 +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}>