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

Fix: Add prompts when merging or deleting metadata. (#12138)

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

Fix: Add prompts when merging or deleting metadata.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

---------

Co-authored-by: Kevin Hu <kevinhu.sh@gmail.com>
This commit is contained in:
chanx
2025-12-24 09:32:41 +08:00
committed by GitHub
parent c33134ea2c
commit d72debf0db
11 changed files with 322 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
web/src/components/dynamic-form.tsx
View File

@ -35,6 +35,7 @@ import { cn } from '@/lib/utils';
import { t } from 'i18next';
import { Loader } from 'lucide-react';
import { MultiSelect, MultiSelectOptionType } from './ui/multi-select';
import { Switch } from './ui/switch';
// Field type enumeration
export enum FormFieldType {
@ -46,6 +47,7 @@ export enum FormFieldType {
Select = 'select',
MultiSelect = 'multi-select',
Checkbox = 'checkbox',
Switch = 'switch',
Tag = 'tag',
Custom = 'custom',
}
@ -154,6 +156,7 @@ export const generateSchema = (fields: FormFieldConfig[]): ZodSchema<any> => {
}
break;
case FormFieldType.Checkbox:
case FormFieldType.Switch:
fieldSchema = z.boolean();
break;
case FormFieldType.Tag:
@ -193,6 +196,8 @@ export const generateSchema = (fields: FormFieldConfig[]): ZodSchema<any> => {
if (
field.type !== FormFieldType.Number &&
field.type !== FormFieldType.Checkbox &&
field.type !== FormFieldType.Switch &&
field.type !== FormFieldType.Custom &&
field.type !== FormFieldType.Tag &&
field.required
) {
@ -289,7 +294,10 @@ const generateDefaultValues = <T extends FieldValues>(
const lastKey = keys[keys.length - 1];
if (field.defaultValue !== undefined) {
current[lastKey] = field.defaultValue;
} else if (field.type === FormFieldType.Checkbox) {
} else if (
field.type === FormFieldType.Checkbox ||
field.type === FormFieldType.Switch
) {
current[lastKey] = false;
} else if (field.type === FormFieldType.Tag) {
current[lastKey] = [];
@ -299,7 +307,10 @@ const generateDefaultValues = <T extends FieldValues>(
} else {
if (field.defaultValue !== undefined) {
defaultValues[field.name] = field.defaultValue;
} else if (field.type === FormFieldType.Checkbox) {
} else if (
field.type === FormFieldType.Checkbox ||
field.type === FormFieldType.Switch
) {
defaultValues[field.name] = false;
} else if (
field.type === FormFieldType.Tag ||
@ -502,6 +513,32 @@ export const RenderField = ({
)}
/>
);
case FormFieldType.Switch:
return (
<RAGFlowFormItem
{...field}
labelClassName={labelClassName || field.labelClassName}
>
{(fieldProps) => {
const finalFieldProps = field.onChange
? {
...fieldProps,
onChange: (checked: boolean) => {
fieldProps.onChange(checked);
field.onChange?.(checked);
},
}
: fieldProps;
return (
<Switch
checked={finalFieldProps.value as boolean}
onCheckedChange={(checked) => finalFieldProps.onChange(checked)}
disabled={field.disabled}
/>
);
}}
</RAGFlowFormItem>
);
case FormFieldType.Tag:
return (

70
web/src/components/list-filter-bar/filter-field.tsx
View File

@ -31,14 +31,16 @@ const handleCheckChange = ({
(value: string) => value !== item.id.toString(),
);
const newValue = {
...currentValue,
[parentId]: newParentValues,
};
const newValue = newParentValues?.length
? {
...currentValue,
[parentId]: newParentValues,
}
: { ...currentValue };
if (newValue[parentId].length === 0) {
delete newValue[parentId];
}
// if (newValue[parentId].length === 0) {
// delete newValue[parentId];
// }
return field.onChange(newValue);
} else {
@ -66,20 +68,31 @@ const FilterItem = memo(
}) => {
return (
<div
className={`flex items-center justify-between text-text-primary text-xs ${level > 0 ? 'ml-4' : ''}`}
className={`flex items-center justify-between text-text-primary text-xs ${level > 0 ? 'ml-1' : ''}`}
>
<FormItem className="flex flex-row space-x-3 space-y-0 items-center">
<FormItem className="flex flex-row space-x-3 space-y-0 items-center ">
<FormControl>
<Checkbox
checked={field.value?.includes(item.id.toString())}
onCheckedChange={(checked: boolean) =>
handleCheckChange({ checked, field, item })
}
/>
<div className="flex space-x-3">
<Checkbox
checked={field.value?.includes(item.id.toString())}
onCheckedChange={(checked: boolean) =>
handleCheckChange({ checked, field, item })
}
// className="hidden group-hover:block"
/>
<FormLabel
onClick={() =>
handleCheckChange({
checked: !field.value?.includes(item.id.toString()),
field,
item,
})
}
>
{item.label}
</FormLabel>
</div>
</FormControl>
<FormLabel onClick={(e) => e.stopPropagation()}>
{item.label}
</FormLabel>
</FormItem>
{item.count !== undefined && (
<span className="text-sm">{item.count}</span>
@ -107,11 +120,11 @@ export const FilterField = memo(
<FormField
key={item.id}
control={form.control}
name={parent.field as string}
name={parent.field?.toString() as string}
render={({ field }) => {
if (hasNestedList) {
return (
<div className={`flex flex-col gap-2 ${level > 0 ? 'ml-4' : ''}`}>
<div className={`flex flex-col gap-2 ${level > 0 ? 'ml-1' : ''}`}>
<div
className="flex items-center justify-between cursor-pointer"
onClick={() => {
@ -138,23 +151,6 @@ export const FilterField = memo(
}}
level={level + 1}
/>
// <FilterItem key={child.id} item={child} field={child.field} level={level+1} />
// <div
// className="flex flex-row space-x-3 space-y-0 items-center"
// key={child.id}
// >
// <FormControl>
// <Checkbox
// checked={field.value?.includes(child.id.toString())}
// onCheckedChange={(checked) =>
// handleCheckChange({ checked, field, item: child })
// }
// />
// </FormControl>
// <FormLabel onClick={(e) => e.stopPropagation()}>
// {child.label}
// </FormLabel>
// </div>
))}
</div>
);

33
web/src/components/list-filter-bar/filter-popover.tsx
View File

@ -11,7 +11,7 @@ import {
useMemo,
useState,
} from 'react';
import { useForm } from 'react-hook-form';
import { FieldPath, useForm } from 'react-hook-form';
import { ZodArray, ZodString, z } from 'zod';
import { Button } from '@/components/ui/button';
@ -178,7 +178,9 @@ function CheckboxFormMultiple({
<FormField
key={x.field}
control={form.control}
name={x.field}
name={
x.field.toString() as FieldPath<z.infer<typeof FormSchema>>
}
render={() => (
<FormItem className="space-y-4">
<div>
@ -186,19 +188,20 @@ function CheckboxFormMultiple({
{x.label}
</FormLabel>
</div>
{x.list.map((item) => {
return (
<FilterField
key={item.id}
item={{ ...item }}
parent={{
...x,
id: x.field,
// field: `${x.field}${item.field ? '.' + item.field : ''}`,
}}
/>
);
})}
{x.list?.length &&
x.list.map((item) => {
return (
<FilterField
key={item.id}
item={{ ...item }}
parent={{
...x,
id: x.field,
// field: `${x.field}${item.field ? '.' + item.field : ''}`,
}}
/>
);
})}
<FormMessage />
</FormItem>
)}

6
web/src/locales/en.ts
View File

@ -176,6 +176,11 @@ Procedural Memory: Learned skills, habits, and automated procedures.`,
},
knowledgeDetails: {
metadata: {
valueExists:
'Value already exists. Confirm to merge duplicates and combine all associated files.',
fieldNameExists:
'Field name already exists. Confirm to merge duplicates and combine all associated files.',
fieldExists: 'Field already exists.',
fieldSetting: 'Field settings',
changesAffectNewParses: 'Changes affect new parses only.',
editMetadataForDataset: 'View and edit metadata for ',
@ -190,6 +195,7 @@ Procedural Memory: Learned skills, habits, and automated procedures.`,
description: 'Description',
fieldName: 'Field name',
editMetadata: 'Edit metadata',
deleteWarn: 'This {{field}} will be removed from all associated files',
},
metadataField: 'Metadata field',
systemAttribute: 'System attribute',

4
web/src/locales/zh.ts
View File

@ -182,6 +182,10 @@ export default {
description: '描述',
fieldName: '字段名',
editMetadata: '编辑元数据',
valueExists: '值已存在。确认合并重复项并组合所有关联文件。',
fieldNameExists: '字段名已存在。确认合并重复项并组合所有关联文件。',
fieldExists: '字段名已存在。',
deleteWarn: '此 {{field}} 将从所有关联文件中移除',
},
localUpload: '本地上传',
fileSize: '文件大小',

14
web/src/pages/dataset/components/metedata/hook.ts
View File

@ -1,11 +1,14 @@
import message from '@/components/ui/message';
import { useSetModalState } from '@/hooks/common-hooks';
import { useSetDocumentMeta } from '@/hooks/use-document-request';
import {
DocumentApiAction,
useSetDocumentMeta,
} from '@/hooks/use-document-request';
import kbService, {
getMetaDataService,
updateMetaData,
} from '@/services/knowledge-service';
import { useQuery } from '@tanstack/react-query';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useParams } from 'umi';
@ -191,7 +194,7 @@ export const useManageMetaDataModal = (
const { data, loading } = useFetchMetaDataManageData(type);
const [tableData, setTableData] = useState<IMetaDataTableData[]>(metaData);
const queryClient = useQueryClient();
const { operations, addDeleteRow, addDeleteValue, addUpdateValue } =
useMetadataOperations();
@ -259,11 +262,14 @@ export const useManageMetaDataModal = (
data: operations,
});
if (res.code === 0) {
queryClient.invalidateQueries({
queryKey: [DocumentApiAction.FetchDocumentList],
});
message.success(t('message.operated'));
callback();
}
},
[operations, id, t],
[operations, id, t, queryClient],
);
const handleSaveUpdateSingle = useCallback(

2
web/src/pages/dataset/components/metedata/interface.ts
View File

@ -39,6 +39,7 @@ export type IManageModalProps = {
export interface IManageValuesProps {
title: ReactNode;
existsKeys: string[];
visible: boolean;
isEditField?: boolean;
isAddValue?: boolean;
@ -46,6 +47,7 @@ export interface IManageValuesProps {
isShowValueSwitch?: boolean;
isVerticalShowValue?: boolean;
data: IMetaDataTableData;
type: MetadataType;
hideModal: () => void;
onSave: (data: IMetaDataTableData) => void;
addUpdateValue: (key: string, value: string | string[]) => void;

82
web/src/pages/dataset/components/metedata/manage-modal.tsx
View File

@ -54,6 +54,7 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
values: [],
});
const [currentValueIndex, setCurrentValueIndex] = useState<number>(0);
const [deleteDialogContent, setDeleteDialogContent] = useState({
visible: false,
title: '',
@ -94,12 +95,12 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
description: '',
values: [],
});
// setCurrentValueIndex(tableData.length || 0);
setCurrentValueIndex(tableData.length || 0);
showManageValuesModal();
};
const handleEditValueRow = useCallback(
(data: IMetaDataTableData) => {
// setCurrentValueIndex(index);
(data: IMetaDataTableData, index: number) => {
setCurrentValueIndex(index);
setValueData(data);
showManageValuesModal();
},
@ -153,10 +154,33 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
variant={'delete'}
className="p-0 bg-transparent"
onClick={() => {
handleDeleteSingleValue(
row.getValue('field'),
value,
);
setDeleteDialogContent({
visible: true,
title:
t('common.delete') +
' ' +
t('knowledgeDetails.metadata.metadata'),
name: row.getValue('field') + '/' + value,
warnText: t(
'knowledgeDetails.metadata.deleteWarn',
{
field:
t('knowledgeDetails.metadata.field') +
'/' +
t('knowledgeDetails.metadata.values'),
},
),
onOk: () => {
hideDeleteModal();
handleDeleteSingleValue(
row.getValue('field'),
value,
);
},
onCancel: () => {
hideDeleteModal();
},
});
}}
>
<Trash2 />
@ -185,7 +209,7 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
variant={'ghost'}
className="bg-transparent px-1 py-0"
onClick={() => {
handleEditValueRow(row.original);
handleEditValueRow(row.original, row.index);
}}
>
<Settings />
@ -201,7 +225,9 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
' ' +
t('knowledgeDetails.metadata.metadata'),
name: row.getValue('field'),
warnText: t('knowledgeDetails.metadata.deleteWarn'),
warnText: t('knowledgeDetails.metadata.deleteWarn', {
field: t('knowledgeDetails.metadata.field'),
}),
onOk: () => {
hideDeleteModal();
handleDeleteSingleRow(row.getValue('field'));
@ -243,12 +269,26 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
const handleSaveValues = (data: IMetaDataTableData) => {
setTableData((prev) => {
//If the keys are the same, they need to be merged.
const fieldMap = new Map<string, any>();
let newData;
if (currentValueIndex >= prev.length) {
// Add operation
newData = [...prev, data];
} else {
// Edit operation
newData = prev.map((item, index) => {
if (index === currentValueIndex) {
return data;
}
return item;
});
}
prev.forEach((item) => {
// Deduplicate by field and merge values
const fieldMap = new Map<string, IMetaDataTableData>();
newData.forEach((item) => {
if (fieldMap.has(item.field)) {
const existingItem = fieldMap.get(item.field);
// Merge values if field exists
const existingItem = fieldMap.get(item.field)!;
const mergedValues = [
...new Set([...existingItem.values, ...item.values]),
];
@ -258,20 +298,14 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
}
});
if (fieldMap.has(data.field)) {
const existingItem = fieldMap.get(data.field);
const mergedValues = [
...new Set([...existingItem.values, ...data.values]),
];
fieldMap.set(data.field, { ...existingItem, values: mergedValues });
} else {
fieldMap.set(data.field, data);
}
return Array.from(fieldMap.values());
});
};
const existsKeys = useMemo(() => {
return tableData.map((item) => item.field);
}, [tableData]);
return (
<>
<Modal
@ -357,6 +391,8 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
: t('knowledgeDetails.metadata.editMetadata')}
</div>
}
type={metadataType}
existsKeys={existsKeys}
visible={manageValuesVisible}
hideModal={hideManageValuesModal}
data={valueData}

164
web/src/pages/dataset/components/metedata/manage-values-modal.tsx
View File

@ -1,3 +1,7 @@
import {
ConfirmDeleteDialog,
ConfirmDeleteDialogNode,
} from '@/components/confirm-delete-dialog';
import EditTag from '@/components/edit-tag';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
@ -7,6 +11,7 @@ import { Textarea } from '@/components/ui/textarea';
import { Plus, Trash2 } from 'lucide-react';
import { memo, useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { MetadataType } from './hook';
import { IManageValuesProps, IMetaDataTableData } from './interface';
// Create a separate input component, wrapped with memo to avoid unnecessary re-renders
@ -63,17 +68,62 @@ export const ManageValuesModal = (props: IManageValuesProps) => {
onSave,
addUpdateValue,
addDeleteValue,
existsKeys,
type,
} = props;
const [metaData, setMetaData] = useState(data);
const { t } = useTranslation();
const [valueError, setValueError] = useState<Record<string, string>>({
field: '',
values: '',
});
const [deleteDialogContent, setDeleteDialogContent] = useState({
visible: false,
title: '',
name: '',
warnText: '',
onOk: () => {},
onCancel: () => {},
});
const hideDeleteModal = () => {
setDeleteDialogContent({
visible: false,
title: '',
name: '',
warnText: '',
onOk: () => {},
onCancel: () => {},
});
};
// Use functional update to avoid closure issues
const handleChange = useCallback((field: string, value: any) => {
setMetaData((prev) => ({
...prev,
[field]: value,
}));
}, []);
const handleChange = useCallback(
(field: string, value: any) => {
if (field === 'field' && existsKeys.includes(value)) {
setValueError((prev) => {
return {
...prev,
field:
type === MetadataType.Setting
? t('knowledgeDetails.metadata.fieldExists')
: t('knowledgeDetails.metadata.fieldNameExists'),
};
});
} else if (field === 'field' && !existsKeys.includes(value)) {
setValueError((prev) => {
return {
...prev,
field: '',
};
});
}
setMetaData((prev) => ({
...prev,
[field]: value,
}));
},
[existsKeys, type, t],
);
// Maintain separate state for each input box
const [tempValues, setTempValues] = useState<string[]>([...data.values]);
@ -89,6 +139,9 @@ export const ManageValuesModal = (props: IManageValuesProps) => {
}, [hideModal]);
const handleSave = useCallback(() => {
if (type === MetadataType.Setting && valueError.field) {
return;
}
if (!metaData.restrictDefinedValues && isShowValueSwitch) {
const newMetaData = { ...metaData, values: [] };
onSave(newMetaData);
@ -96,17 +149,35 @@ export const ManageValuesModal = (props: IManageValuesProps) => {
onSave(metaData);
}
handleHideModal();
}, [metaData, onSave, handleHideModal, isShowValueSwitch]);
}, [metaData, onSave, handleHideModal, isShowValueSwitch, type, valueError]);
// Handle value changes, only update temporary state
const handleValueChange = useCallback((index: number, value: string) => {
setTempValues((prev) => {
const newValues = [...prev];
newValues[index] = value;
const handleValueChange = useCallback(
(index: number, value: string) => {
setTempValues((prev) => {
if (prev.includes(value)) {
setValueError((prev) => {
return {
...prev,
values: t('knowledgeDetails.metadata.valueExists'),
};
});
} else {
setValueError((prev) => {
return {
...prev,
values: '',
};
});
}
const newValues = [...prev];
newValues[index] = value;
return newValues;
});
}, []);
return newValues;
});
},
[t],
);
// Handle blur event, synchronize to main state
const handleValueBlur = useCallback(() => {
@ -137,6 +208,27 @@ export const ManageValuesModal = (props: IManageValuesProps) => {
[addDeleteValue, metaData],
);
const showDeleteModal = (item: string, callback: () => void) => {
setDeleteDialogContent({
visible: true,
title: t('common.delete') + ' ' + t('knowledgeDetails.metadata.metadata'),
name: metaData.field + '/' + item,
warnText: t('knowledgeDetails.metadata.deleteWarn', {
field:
t('knowledgeDetails.metadata.field') +
'/' +
t('knowledgeDetails.metadata.values'),
}),
onOk: () => {
hideDeleteModal();
callback();
},
onCancel: () => {
hideDeleteModal();
},
});
};
// Handle adding new value
const handleAddValue = useCallback(() => {
setTempValues((prev) => [...new Set([...prev, ''])]);
@ -172,9 +264,13 @@ export const ManageValuesModal = (props: IManageValuesProps) => {
<Input
value={metaData.field}
onChange={(e) => {
handleChange('field', e.target?.value || '');
const value = e.target?.value || '';
if (/^[a-zA-Z_]*$/.test(value)) {
handleChange('field', value);
}
}}
/>
<div className="text-state-error text-sm">{valueError.field}</div>
</div>
</div>
)}
@ -230,7 +326,11 @@ export const ManageValuesModal = (props: IManageValuesProps) => {
item={item}
index={index}
onValueChange={handleValueChange}
onDelete={handleDelete}
onDelete={(idx: number) => {
showDeleteModal(item, () => {
handleDelete(idx);
});
}}
onBlur={handleValueBlur}
/>
);
@ -240,11 +340,41 @@ export const ManageValuesModal = (props: IManageValuesProps) => {
{!isVerticalShowValue && (
<EditTag
value={metaData.values}
onChange={(value) => handleChange('values', value)}
onChange={(value) => {
// find deleted value
const item = metaData.values.find(
(item) => !value.includes(item),
);
if (item) {
showDeleteModal(item, () => {
// handleDelete(idx);
handleChange('values', value);
});
} else {
handleChange('values', value);
}
}}
/>
)}
<div className="text-state-error text-sm">{valueError.values}</div>
</div>
)}
{deleteDialogContent.visible && (
<ConfirmDeleteDialog
open={deleteDialogContent.visible}
onCancel={deleteDialogContent.onCancel}
onOk={deleteDialogContent.onOk}
title={deleteDialogContent.title}
content={{
node: (
<ConfirmDeleteDialogNode
name={deleteDialogContent.name}
warnText={deleteDialogContent.warnText}
/>
),
}}
/>
)}
</div>
</Modal>
);

4
web/src/pages/datasets/dataset-creating-dialog.tsx
View File

@ -17,6 +17,7 @@ import {
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { FormLayout } from '@/constants/form';
import { useFetchTenantInfo } from '@/hooks/use-user-setting-request';
import { IModalProps } from '@/interfaces/common';
import { zodResolver } from '@hookform/resolvers/zod';
import { useEffect } from 'react';
@ -33,6 +34,7 @@ const FormId = 'dataset-creating-form';
export function InputForm({ onOk }: IModalProps<any>) {
const { t } = useTranslation();
const { data: tenantInfo } = useFetchTenantInfo();
const FormSchema = z
.object({
@ -80,7 +82,7 @@ export function InputForm({ onOk }: IModalProps<any>) {
name: '',
parseType: 1,
parser_id: '',
embd_id: '',
embd_id: tenantInfo?.embd_id,
},
});

2
web/src/services/knowledge-service.ts
View File

@ -263,7 +263,7 @@ export const documentFilter = (kb_id: string) =>
export const getMetaDataService = ({ kb_id }: { kb_id: string }) =>
request.post(api.getMetaData, { data: { kb_id } });
export const updateMetaData = ({ kb_id, data }: { kb_id: string; data: any }) =>
request.post(api.updateMetaData, { data: { kb_id, data } });
request.post(api.updateMetaData, { data: { kb_id, ...data } });
export const listDataPipelineLogDocument = (
params?: IFetchKnowledgeListRequestParams,