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

### 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>

web/src/components/dynamic-form.tsx

@@ -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 (

web/src/components/list-filter-bar/filter-field.tsx

@@ -31,14 +31,16 @@ const handleCheckChange = ({
           (value: string) => value !== item.id.toString(),
         );
 
-    const newValue = {
+    const newValue = newParentValues?.length
+      ? {
           ...currentValue,
           [parentId]: newParentValues,
-    };
-
-    if (newValue[parentId].length === 0) {
-      delete newValue[parentId];
         }
+      : { ...currentValue };
+
+    // 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 ">
           <FormControl>
+            <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"
               />
-          </FormControl>
+              <FormLabel
-          <FormLabel onClick={(e) => e.stopPropagation()}>
+                onClick={() =>
+                  handleCheckChange({
+                    checked: !field.value?.includes(item.id.toString()),
+                    field,
+                    item,
+                  })
+                }
+              >
                 {item.label}
               </FormLabel>
+            </div>
+          </FormControl>
         </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>
             );

web/src/components/list-filter-bar/filter-popover.tsx

@@ -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,7 +188,8 @@ function CheckboxFormMultiple({
                           {x.label}
                         </FormLabel>
                       </div>
-                      {x.list.map((item) => {
+                      {x.list?.length &&
+                        x.list.map((item) => {
                           return (
                             <FilterField
                               key={item.id}

web/src/locales/en.ts

@@ -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',

web/src/locales/zh.ts

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

web/src/pages/dataset/components/metedata/hook.ts

@@ -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(

web/src/pages/dataset/components/metedata/interface.ts

@@ -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;

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

@@ -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) => {
+    (data: IMetaDataTableData, index: number) => {
-      // setCurrentValueIndex(index);
+      setCurrentValueIndex(index);
       setValueData(data);
       showManageValuesModal();
     },
@@ -153,10 +154,33 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
                               variant={'delete'}
                               className="p-0 bg-transparent"
                               onClick={() => {
+                                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.
+      let newData;
-      const fieldMap = new Map<string, any>();
+      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}

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

@@ -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) => {
+  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) => {
+  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;
       });
-  }, []);
+    },
+    [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>
   );

web/src/pages/datasets/dataset-creating-dialog.tsx

@@ -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,
     },
   });
 

web/src/services/knowledge-service.ts

@@ -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,