Feat: Enhanced metadata functionality (#12560)

### What problem does this PR solve? Feat: Enhanced metadata functionality - Metadata filtering supports searching. - Values can be directly modified. ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2026-01-23 03:26:53 +08:00 · 2026-01-12 19:05:33 +08:00
parent 653001b14f
commit fd0a1fde6b
9 changed files with 322 additions and 123 deletions
--- a/web/src/components/list-filter-bar/filter-field.tsx
+++ b/web/src/components/list-filter-bar/filter-field.tsx
@ -80,7 +80,7 @@ const FilterItem = memo(
                }
                // className="hidden group-hover:block"
              />
-              <FormLabel
+              <div
                onClick={() =>
                  handleCheckChange({
                    checked: !field.value?.includes(item.id.toString()),
@ -88,9 +88,10 @@ const FilterItem = memo(
                    item,
                  })
                }
+                className="truncate w-[200px] text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-text-secondary"
              >
                {item.label}
-              </FormLabel>
+              </div>
            </div>
          </FormControl>
        </FormItem>
@ -101,7 +102,7 @@ const FilterItem = memo(
    );
  },
 );
-
+FilterItem.displayName = 'FilterItem';
 export const FilterField = memo(
  ({
    item,
--- a/web/src/components/list-filter-bar/filter-popover.tsx
+++ b/web/src/components/list-filter-bar/filter-popover.tsx
@ -15,11 +15,17 @@ import { useForm } from 'react-hook-form';
 import { z, ZodArray, ZodString } from 'zod';

 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';

 import { Form, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
 import { t } from 'i18next';
 import { FilterField } from './filter-field';
-import { FilterChange, FilterCollection, FilterValue } from './interface';
+import {
+  FilterChange,
+  FilterCollection,
+  FilterType,
+  FilterValue,
+} from './interface';

 export type CheckboxFormMultipleProps = {
  filters?: FilterCollection[];
@ -30,6 +36,41 @@ export type CheckboxFormMultipleProps = {
  filterGroup?: Record<string, string[]>;
 };

+const filterNestedList = (
+  list: FilterType[],
+  searchTerm: string,
+): FilterType[] => {
+  if (!searchTerm) return list;
+
+  const term = searchTerm.toLowerCase();
+
+  return list
+    .filter((item) => {
+      if (
+        item.label.toString().toLowerCase().includes(term) ||
+        item.id.toLowerCase().includes(term)
+      ) {
+        return true;
+      }
+
+      if (item.list && item.list.length > 0) {
+        const filteredSubList = filterNestedList(item.list, searchTerm);
+        return filteredSubList.length > 0;
+      }
+
+      return false;
+    })
+    .map((item) => {
+      if (item.list && item.list.length > 0) {
+        return {
+          ...item,
+          list: filterNestedList(item.list, searchTerm),
+        };
+      }
+      return item;
+    });
+};
+
 function CheckboxFormMultiple({
  filters = [],
  value,
@ -37,21 +78,22 @@ function CheckboxFormMultiple({
  setOpen,
  filterGroup,
 }: CheckboxFormMultipleProps) {
-  const [resolvedFilters, setResolvedFilters] =
-    useState<FilterCollection[]>(filters);
+  // const [resolvedFilters, setResolvedFilters] =
+  //   useState<FilterCollection[]>(filters);
+  const [searchTerms, setSearchTerms] = useState<Record<string, string>>({});

-  useEffect(() => {
-    if (filters && filters.length > 0) {
-      setResolvedFilters(filters);
-    }
-  }, [filters]);
+  // useEffect(() => {
+  //   if (filters && filters.length > 0) {
+  //     setResolvedFilters(filters);
+  //   }
+  // }, [filters]);

  const fieldsDict = useMemo(() => {
-    if (resolvedFilters.length === 0) {
+    if (filters.length === 0) {
      return {};
    }

-    return resolvedFilters.reduce<Record<string, any>>((pre, cur) => {
+    return filters.reduce<Record<string, any>>((pre, cur) => {
      const hasNested = cur.list?.some(
        (item) => item.list && item.list.length > 0,
      );
@ -63,14 +105,14 @@ function CheckboxFormMultiple({
      }
      return pre;
    }, {});
-  }, [resolvedFilters]);
+  }, [filters]);

  const FormSchema = useMemo(() => {
-    if (resolvedFilters.length === 0) {
+    if (filters.length === 0) {
      return z.object({});
    }
    return z.object(
-      resolvedFilters.reduce<
+      filters.reduce<
        Record<
          string,
          ZodArray<ZodString, 'many'> | z.ZodObject<any> | z.ZodOptional<any>
@ -90,13 +132,10 @@ function CheckboxFormMultiple({
        return pre;
      }, {}),
    );
-  }, [resolvedFilters]);
-  // const FormSchema = useMemo(() => {
-  //   return z.object({});
-  // }, []);
+  }, [filters]);

  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: resolvedFilters.length > 0 ? zodResolver(FormSchema) : undefined,
+    resolver: filters.length > 0 ? zodResolver(FormSchema) : undefined,
    defaultValues: fieldsDict,
  });

@ -112,10 +151,10 @@ function CheckboxFormMultiple({
  }, [fieldsDict, onChange, setOpen]);

  useEffect(() => {
-    if (resolvedFilters.length > 0) {
+    if (filters.length > 0) {
      form.reset(value || fieldsDict);
    }
-  }, [form, value, resolvedFilters, fieldsDict]);
+  }, [form, value, filters, fieldsDict]);

  const filterList = useMemo(() => {
    const filterSet = filterGroup
@ -131,6 +170,26 @@ function CheckboxFormMultiple({
    return filters.filter((x) => !filterList.includes(x.field));
  }, [filterList, filters]);

+  const handleSearchChange = (field: string, value: string) => {
+    setSearchTerms((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const getFilteredFilters = (originalFilters: FilterCollection[]) => {
+    return originalFilters.map((filter) => {
+      if (filter.canSearch && searchTerms[filter.field]) {
+        const filteredList = filterNestedList(
+          filter.list,
+          searchTerms[filter.field],
+        );
+        return { ...filter, list: filteredList };
+      }
+      return filter;
+    });
+  };
+
  return (
    <Form {...form}>
      <form
@ -142,9 +201,11 @@ function CheckboxFormMultiple({
          {filterGroup &&
            Object.keys(filterGroup).map((key) => {
              const filterKeys = filterGroup[key];
-              const thisFilters = filters.filter((x) =>
+              const originalFilters = filters.filter((x) =>
                filterKeys.includes(x.field),
              );
+              const thisFilters = getFilteredFilters(originalFilters);
+
              return (
                <div
                  key={key}
@ -153,15 +214,29 @@ function CheckboxFormMultiple({
                  <div className="text-text-primary text-sm">{key}</div>
                  <div className="flex flex-col space-y-4">
                    {thisFilters.map((x) => (
-                      <FilterField
-                        key={x.field}
-                        item={{ ...x, id: x.field }}
-                        parent={{
-                          ...x,
-                          id: x.field,
-                          field: ``,
-                        }}
-                      />
+                      <div key={x.field}>
+                        {x.canSearch && (
+                          <div className="mb-2">
+                            <Input
+                              placeholder={t('common.search') + '...'}
+                              value={searchTerms[x.field] || ''}
+                              onChange={(e) =>
+                                handleSearchChange(x.field, e.target.value)
+                              }
+                              className="h-8"
+                            />
+                          </div>
+                        )}
+                        <FilterField
+                          key={x.field}
+                          item={{ ...x, id: x.field }}
+                          parent={{
+                            ...x,
+                            id: x.field,
+                            field: ``,
+                          }}
+                        />
+                      </div>
                    ))}
                  </div>
                </div>
@ -169,15 +244,29 @@ function CheckboxFormMultiple({
            })}
          {notInfilterGroup &&
            notInfilterGroup.map((x) => {
+              const filteredItem = getFilteredFilters([x])[0];
+
              return (
                <FormItem className="space-y-4" key={x.field}>
                  <div>
-                    <FormLabel className="text-text-primary text-sm">
-                      {x.label}
-                    </FormLabel>
+                    <div className="flex justify-between items-center mb-2">
+                      <FormLabel className="text-text-primary text-sm">
+                        {x.label}
+                      </FormLabel>
+                      {x.canSearch && (
+                        <Input
+                          placeholder={t('common.search') + '...'}
+                          value={searchTerms[x.field] || ''}
+                          onChange={(e) =>
+                            handleSearchChange(x.field, e.target.value)
+                          }
+                          className="h-8 w-32 ml-2"
+                        />
+                      )}
+                    </div>
                  </div>
-                  {x.list?.length &&
-                    x.list.map((item) => {
+                  {!!filteredItem.list?.length &&
+                    filteredItem.list.map((item) => {
                      return (
                        <FilterField
                          key={item.id}
--- a/web/src/components/list-filter-bar/index.tsx
+++ b/web/src/components/list-filter-bar/index.tsx
@ -44,6 +44,7 @@ export const FilterButton = React.forwardRef<
  );
 });

+FilterButton.displayName = 'FilterButton';
 export default function ListFilterBar({
  title,
  children,
--- a/web/src/components/list-filter-bar/interface.ts
+++ b/web/src/components/list-filter-bar/interface.ts
@ -5,17 +5,16 @@ export type FilterType = {
  list?: FilterType[];
  value?: string | string[];
  count?: number;
+  canSearch?: boolean;
 };
-
 export type FilterCollection = {
  field: string;
  label: string;
  list: FilterType[];
+  canSearch?: boolean;
 };
-
 export type FilterValue = Record<
  string,
  Array<string> | Record<string, Array<string>>
 >;
-
 export type FilterChange = (value: FilterValue) => void;
--- a/web/src/pages/dataset/components/metedata/manage-modal.tsx
+++ b/web/src/pages/dataset/components/metedata/manage-modal.tsx
@ -5,6 +5,7 @@ import {
 import { EmptyType } from '@/components/empty/constant';
 import Empty from '@/components/empty/empty';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import { Modal } from '@/components/ui/modal/modal';
 import {
  Table,
@ -25,7 +26,13 @@ import {
  getSortedRowModel,
  useReactTable,
 } from '@tanstack/react-table';
-import { Plus, Settings, Trash2 } from 'lucide-react';
+import {
+  ListChevronsDownUp,
+  ListChevronsUpDown,
+  Plus,
+  Settings,
+  Trash2,
+} from 'lucide-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHandleMenuClick } from '../../sidebar/hooks';
@ -61,6 +68,7 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
    values: [],
  });

+  const [expanded, setExpanded] = useState(true);
  const [currentValueIndex, setCurrentValueIndex] = useState<number>(0);
  const [deleteDialogContent, setDeleteDialogContent] = useState({
    visible: false,
@ -70,6 +78,11 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
    onOk: () => {},
    onCancel: () => {},
  });
+  const [editingValue, setEditingValue] = useState<{
+    field: string;
+    value: string;
+    newValue: string;
+  } | null>(null);

  const {
    tableData,
@ -81,6 +94,7 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
    addDeleteValue,
  } = useManageMetaDataModal(originalTableData, metadataType, otherData);
  const { handleMenuClick } = useHandleMenuClick();
+  const [shouldSave, setShouldSave] = useState(false);
  const {
    visible: manageValuesVisible,
    showModal: showManageValuesModal,
@ -96,6 +110,32 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
      onCancel: () => {},
    });
  };
+
+  const handleEditValue = (field: string, value: string) => {
+    setEditingValue({ field, value, newValue: value });
+  };
+
+  const saveEditedValue = useCallback(() => {
+    if (editingValue) {
+      setTableData((prev) => {
+        return prev.map((row) => {
+          if (row.field === editingValue.field) {
+            const updatedValues = row.values.map((v) =>
+              v === editingValue.value ? editingValue.newValue : v,
+            );
+            return { ...row, values: updatedValues };
+          }
+          return row;
+        });
+      });
+      setEditingValue(null);
+      setShouldSave(true);
+    }
+  }, [editingValue, setTableData]);
+
+  const cancelEditValue = () => {
+    setEditingValue(null);
+  };
  const handAddValueRow = () => {
    setValueData({
      field: '',
@ -136,66 +176,119 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
      },
      {
        accessorKey: 'values',
-        header: () => <span>{t('knowledgeDetails.metadata.values')}</span>,
+        header: () => (
+          <div className="flex items-center">
+            <span>{t('knowledgeDetails.metadata.values')}</span>
+            <div
+              className="ml-2 p-1 cursor-pointer"
+              onClick={() => {
+                setExpanded(!expanded);
+              }}
+            >
+              {expanded ? (
+                <ListChevronsDownUp size={14} />
+              ) : (
+                <ListChevronsUpDown size={14} />
+              )}
+              {expanded}
+            </div>
+          </div>
+        ),
        cell: ({ row }) => {
          const values = row.getValue('values') as Array<string>;
+
+          if (!Array.isArray(values) || values.length === 0) {
+            return <div></div>;
+          }
+
+          const displayedValues = expanded ? values : values.slice(0, 2);
+          const hasMore = Array.isArray(values) && values.length > 2;
+
          return (
-            <div className="flex items-center gap-1">
-              {Array.isArray(values) &&
-                values.length > 0 &&
-                values
-                  .filter((value: string, index: number) => index < 2)
-                  ?.map((value: string) => {
-                    return (
-                      <Button
-                        key={value}
-                        variant={'ghost'}
-                        className="border border-border-button"
-                        aria-label="Edit"
-                      >
-                        <div className="flex gap-1 items-center">
-                          <div className="text-sm truncate max-w-24">
-                            {value}
-                          </div>
-                          {isDeleteSingleValue && (
-                            <Button
-                              variant={'delete'}
-                              className="p-0 bg-transparent"
-                              onClick={() => {
-                                setDeleteDialogContent({
-                                  visible: true,
-                                  title:
-                                    t('common.delete') +
-                                    ' ' +
-                                    t('knowledgeDetails.metadata.value'),
-                                  name: value,
-                                  warnText:
-                                    MetadataDeleteMap(t)[
-                                      metadataType as MetadataType
-                                    ].warnValueText,
-                                  onOk: () => {
-                                    hideDeleteModal();
-                                    handleDeleteSingleValue(
-                                      row.getValue('field'),
-                                      value,
-                                    );
-                                  },
-                                  onCancel: () => {
-                                    hideDeleteModal();
-                                  },
-                                });
-                              }}
-                            >
-                              <Trash2 />
-                            </Button>
-                          )}
-                        </div>
-                      </Button>
-                    );
-                  })}
-              {Array.isArray(values) && values.length > 2 && (
-                <div className="text-text-secondary self-end">...</div>
-              )}
+            <div className="flex flex-col gap-1">
+              <div className="flex flex-wrap gap-1">
+                {displayedValues?.map((value: string) => {
+                  const isEditing =
+                    editingValue &&
+                    editingValue.field === row.getValue('field') &&
+                    editingValue.value === value;
+
+                  return isEditing ? (
+                    <div key={value}>
+                      <Input
+                        type="text"
+                        value={editingValue.newValue}
+                        onChange={(e) =>
+                          setEditingValue({
+                            ...editingValue,
+                            newValue: e.target.value,
+                          })
+                        }
+                        onBlur={saveEditedValue}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter') {
+                            saveEditedValue();
+                          } else if (e.key === 'Escape') {
+                            cancelEditValue();
+                          }
+                        }}
+                        autoFocus
+                        // className="text-sm min-w-20 max-w-32 outline-none bg-transparent px-1 py-0.5"
+                      />
+                    </div>
+                  ) : (
+                    <Button
+                      key={value}
+                      variant={'ghost'}
+                      className="border border-border-button"
+                      onClick={() =>
+                        handleEditValue(row.getValue('field'), value)
+                      }
+                      aria-label="Edit"
+                    >
+                      <div className="flex gap-1 items-center">
+                        <div className="text-sm truncate max-w-24">{value}</div>
+                        {isDeleteSingleValue && (
+                          <Button
+                            variant={'delete'}
+                            className="p-0 bg-transparent"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setDeleteDialogContent({
+                                visible: true,
+                                title:
+                                  t('common.delete') +
+                                  ' ' +
+                                  t('knowledgeDetails.metadata.value'),
+                                name: value,
+                                warnText:
+                                  MetadataDeleteMap(t)[
+                                    metadataType as MetadataType
+                                  ].warnValueText,
+                                onOk: () => {
+                                  hideDeleteModal();
+                                  handleDeleteSingleValue(
+                                    row.getValue('field'),
+                                    value,
+                                  );
+                                },
+                                onCancel: () => {
+                                  hideDeleteModal();
+                                },
+                              });
+                            }}
+                          >
+                            <Trash2 />
+                          </Button>
+                        )}
+                      </div>
+                    </Button>
+                  );
+                })}
+                {hasMore && !expanded && (
+                  <div className="text-text-secondary self-end">...</div>
+                )}
+              </div>
            </div>
          );
        },
@ -260,6 +353,9 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
    isDeleteSingleValue,
    handleEditValueRow,
    metadataType,
+    expanded,
+    editingValue,
+    saveEditedValue,
  ]);

  const table = useReactTable({
@ -271,7 +367,7 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
    getFilteredRowModel: getFilteredRowModel(),
    manualPagination: true,
  });
-  const [shouldSave, setShouldSave] = useState(false);
+
  const handleSaveValues = (data: IMetaDataTableData) => {
    setTableData((prev) => {
      let newData;
--- a/web/src/pages/dataset/dataset/index.tsx
+++ b/web/src/pages/dataset/dataset/index.tsx
@ -127,6 +127,7 @@ export default function Dataset() {
                  type: MetadataType.Manage,
                  isCanAdd: false,
                  isEditField: true,
+                  isDeleteSingleValue: true,
                  title: (
                    <div className="flex flex-col gap-2">
                      <div className="text-base font-normal">
--- a/web/src/pages/dataset/dataset/parsing-status-cell.tsx
+++ b/web/src/pages/dataset/dataset/parsing-status-cell.tsx
@ -21,7 +21,6 @@ import { ParsingCard } from './parsing-card';
 import { ReparseDialog } from './reparse-dialog';
 import { UseChangeDocumentParserShowType } from './use-change-document-parser';
 import { useHandleRunDocumentByIds } from './use-run-document';
-import { UseSaveMetaShowType } from './use-save-meta';
 import { isParserRunning } from './utils';
 const IconMap = {
  [RunningStatus.UNSTART]: (
@ -44,13 +43,12 @@ const IconMap = {
 export function ParsingStatusCell({
  record,
  showChangeParserModal,
-  showSetMetaModal,
+  // showSetMetaModal,
  showLog,
 }: {
  record: IDocumentInfo;
  showLog: (record: IDocumentInfo) => void;
-} & UseChangeDocumentParserShowType &
-  UseSaveMetaShowType) {
+} & UseChangeDocumentParserShowType) {
  const { t } = useTranslation();
  const {
    run,
@ -83,10 +81,6 @@ export function ParsingStatusCell({
    showChangeParserModal(record);
  }, [record, showChangeParserModal]);

-  const handleShowSetMetaModal = useCallback(() => {
-    showSetMetaModal(record);
-  }, [record, showSetMetaModal]);
-
  const showParse = useMemo(() => {
    return record.type !== DocumentType.Virtual;
  }, [record]);
@ -124,9 +118,6 @@ export function ParsingStatusCell({
            <DropdownMenuItem onClick={handleShowChangeParserModal}>
              {t('knowledgeDetails.dataPipeline')}
            </DropdownMenuItem>
-            <DropdownMenuItem onClick={handleShowSetMetaModal}>
-              {t('knowledgeDetails.setMetaData')}
-            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
--- a/web/src/pages/dataset/dataset/use-dataset-table-columns.tsx
+++ b/web/src/pages/dataset/dataset/use-dataset-table-columns.tsx
@ -172,17 +172,18 @@ export function useDatasetTableColumns({
      ),
    },
    {
-      accessorKey: 'run',
-      header: t('Parse'),
-      // meta: { cellClassName: 'min-w-[20vw]' },
+      accessorKey: 'meta_fields',
+      header: t('metadata.metadata'),
      cell: ({ row }) => {
+        const length = Object.keys(row.getValue('meta_fields') || {}).length;
        return (
-          <ParsingStatusCell
-            record={row.original}
-            showChangeParserModal={showChangeParserModal}
-            showSetMetaModal={(row) =>
+          <div
+            className="capitalize cursor-pointer"
+            onClick={() => {
              showManageMetadataModal({
-                metadata: util.JSONToMetaDataTableData(row.meta_fields || {}),
+                metadata: util.JSONToMetaDataTableData(
+                  row.original.meta_fields || {},
+                ),
                isCanAdd: true,
                type: MetadataType.UpdateSingle,
                record: row,
@ -193,13 +194,28 @@ export function useDatasetTableColumns({
                    </div>
                    <div className="text-sm text-text-secondary w-full truncate">
                      {t('metadata.editMetadataForDataset')}
-                      {row.name}
+                      {row.original.name}
                    </div>
                  </div>
                ),
                isDeleteSingleValue: true,
-              })
-            }
+              });
+            }}
+          >
+            {length + ' fields'}
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: 'run',
+      header: t('Parse'),
+      // meta: { cellClassName: 'min-w-[20vw]' },
+      cell: ({ row }) => {
+        return (
+          <ParsingStatusCell
+            record={row.original}
+            showChangeParserModal={showChangeParserModal}
            showLog={showLog}
          ></ParsingStatusCell>
        );
--- a/web/src/pages/dataset/dataset/use-select-filters.ts
+++ b/web/src/pages/dataset/dataset/use-select-filters.ts
@ -72,7 +72,12 @@ export function useSelectDatasetFilters() {
    return [
      { field: 'type', label: 'File Type', list: fileTypes },
      { field: 'run', label: 'Status', list: fileStatus },
-      { field: 'metadata', label: 'Metadata field', list: metaDataList },
+      {
+        field: 'metadata',
+        label: 'Metadata field',
+        canSearch: true,
+        list: metaDataList,
+      },
    ] as FilterCollection[];
  }, [fileStatus, fileTypes, metaDataList]);