Feat: Display the document configuration dialog with shadcn #3221 (#7302)

### What problem does this PR solve?

Feat: Display the document configuration dialog with shadcn #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/dataset/dataset/dataset-table.tsx

@@ -29,7 +29,7 @@ import { useFetchDocumentList } from '@/hooks/use-document-request';
 import { IDocumentInfo } from '@/interfaces/database/document';
 import { getExtension } from '@/utils/document-util';
 import { useMemo } from 'react';
-import { useChangeDocumentParser } from './hooks';
+import { useChangeDocumentParser } from './use-change-document-parser';
 import { useDatasetTableColumns } from './use-dataset-table-columns';
 import { useRenameDocument } from './use-rename-document';
 
@@ -57,7 +57,8 @@ export function DatasetTable() {
     changeParserVisible,
     hideChangeParserModal,
     showChangeParserModal,
-  } = useChangeDocumentParser(currentRecord.id);
+    changeParserRecord,
+  } = useChangeDocumentParser();
 
   const {
     renameLoading,
@@ -198,10 +199,10 @@ export function DatasetTable() {
       </div>
       {changeParserVisible && (
         <ChunkMethodDialog
-          documentId={currentRecord.id}
-          parserId={currentRecord.parser_id}
-          parserConfig={currentRecord.parser_config}
-          documentExtension={getExtension(currentRecord.name)}
+          documentId={changeParserRecord.id}
+          parserId={changeParserRecord.parser_id}
+          parserConfig={changeParserRecord.parser_config}
+          documentExtension={getExtension(changeParserRecord.name)}
           onOk={onChangeParserOk}
           visible={changeParserVisible}
           hideModal={hideChangeParserModal}

web/src/pages/dataset/dataset/hooks.ts

@@ -1,11 +1,6 @@
 import { useSetModalState } from '@/hooks/common-hooks';
-import {
-  useCreateNextDocument,
-  useNextWebCrawl,
-  useSetNextDocumentParser,
-} from '@/hooks/document-hooks';
+import { useCreateNextDocument, useNextWebCrawl } from '@/hooks/document-hooks';
 import { useGetKnowledgeSearchParams } from '@/hooks/route-hook';
-import { IChangeParserConfigRequestBody } from '@/interfaces/request/document';
 import { useCallback, useState } from 'react';
 import { useNavigate } from 'umi';
 
@@ -50,44 +45,6 @@ export const useCreateEmptyDocument = () => {
   };
 };
 
-export const useChangeDocumentParser = (documentId: string) => {
-  const { setDocumentParser, loading } = useSetNextDocumentParser();
-
-  const {
-    visible: changeParserVisible,
-    hideModal: hideChangeParserModal,
-    showModal: showChangeParserModal,
-  } = useSetModalState();
-
-  const onChangeParserOk = useCallback(
-    async ({
-      parserId,
-      parserConfig,
-    }: {
-      parserId: string;
-      parserConfig: IChangeParserConfigRequestBody;
-    }) => {
-      const ret = await setDocumentParser({
-        parserId,
-        documentId,
-        parserConfig,
-      });
-      if (ret === 0) {
-        hideChangeParserModal();
-      }
-    },
-    [hideChangeParserModal, setDocumentParser, documentId],
-  );
-
-  return {
-    changeParserLoading: loading,
-    onChangeParserOk,
-    changeParserVisible,
-    hideChangeParserModal,
-    showChangeParserModal,
-  };
-};
-
 export const useGetRowSelection = () => {
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
 

web/src/pages/dataset/dataset/parsing-status-cell.tsx

@@ -1,12 +1,20 @@
 import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
 import { Button } from '@/components/ui/button';
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/hover-card';
 import { Progress } from '@/components/ui/progress';
 import { Separator } from '@/components/ui/separator';
 import { IDocumentInfo } from '@/interfaces/database/document';
+import { cn } from '@/lib/utils';
 import { CircleX, Play, RefreshCw } from 'lucide-react';
+import { PropsWithChildren, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RunningStatus } from './constant';
 import { ParsingCard } from './parsing-card';
+import { UseChangeDocumentParserShowType } from './use-change-document-parser';
 import { useHandleRunDocumentByIds } from './use-run-document';
 import { isParserRunning } from './utils';
 
@@ -18,7 +26,26 @@ const IconMap = {
   [RunningStatus.FAIL]: <RefreshCw />,
 };
 
-export function ParsingStatusCell({ record }: { record: IDocumentInfo }) {
+function MenuItem({
+  children,
+  onClick,
+}: PropsWithChildren & { onClick?(): void }) {
+  return (
+    <div
+      onClick={onClick}
+      className={cn(
+        'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ParsingStatusCell({
+  record,
+  showChangeParserModal,
+}: { record: IDocumentInfo } & UseChangeDocumentParserShowType) {
   const { t } = useTranslation();
   const { run, parser_id, progress, chunk_num, id } = record;
   const operationIcon = IconMap[run];
@@ -33,12 +60,27 @@ export function ParsingStatusCell({ record }: { record: IDocumentInfo }) {
       handleRunDocumentByIds(record.id, isRunning, shouldDelete);
     };
 
+  const handleShowChangeParserModal = useCallback(() => {
+    showChangeParserModal(record);
+  }, [record, showChangeParserModal]);
+
   return (
     <section className="flex gap-2 items-center ">
       <div>
-        <Button variant={'ghost'} size={'sm'}>
-          {parser_id}
-        </Button>
+        <HoverCard>
+          <HoverCardTrigger>
+            <Button variant={'ghost'} size={'sm'}>
+              {parser_id}
+            </Button>
+          </HoverCardTrigger>
+          <HoverCardContent>
+            <MenuItem onClick={handleShowChangeParserModal}>
+              {t('knowledgeDetails.chunkMethod')}
+            </MenuItem>
+            <MenuItem>{t('knowledgeDetails.setMetaData')}</MenuItem>
+          </HoverCardContent>
+        </HoverCard>
+
         <Separator orientation="vertical" />
       </div>
       <ConfirmDeleteDialog

web/src/pages/dataset/dataset/use-change-document-parser.ts

@@ -0,0 +1,54 @@
+import { useSetModalState } from '@/hooks/common-hooks';
+import { useSetDocumentParser } from '@/hooks/use-document-request';
+import { IDocumentInfo } from '@/interfaces/database/document';
+import { IChangeParserConfigRequestBody } from '@/interfaces/request/document';
+import { useCallback, useState } from 'react';
+
+export const useChangeDocumentParser = () => {
+  const { setDocumentParser, loading } = useSetDocumentParser();
+  const [record, setRecord] = useState<IDocumentInfo>({} as IDocumentInfo);
+
+  const {
+    visible: changeParserVisible,
+    hideModal: hideChangeParserModal,
+    showModal: showChangeParserModal,
+  } = useSetModalState();
+
+  const onChangeParserOk = useCallback(
+    async (parserId: string, parserConfig: IChangeParserConfigRequestBody) => {
+      if (record?.id) {
+        const ret = await setDocumentParser({
+          parserId,
+          documentId: record?.id,
+          parserConfig,
+        });
+        if (ret === 0) {
+          hideChangeParserModal();
+        }
+      }
+    },
+    [record?.id, setDocumentParser, hideChangeParserModal],
+  );
+
+  const handleShowChangeParserModal = useCallback(
+    (row: IDocumentInfo) => {
+      setRecord(row);
+      showChangeParserModal();
+    },
+    [showChangeParserModal],
+  );
+
+  return {
+    changeParserLoading: loading,
+    onChangeParserOk,
+    changeParserVisible,
+    hideChangeParserModal,
+    showChangeParserModal: handleShowChangeParserModal,
+    changeParserRecord: record,
+  };
+};
+
+export type UseChangeDocumentParserShowType = Pick<
+  ReturnType<typeof useChangeDocumentParser>,
+  'showChangeParserModal'
+>;

web/src/pages/dataset/dataset/use-dataset-table-columns.tsx

@@ -15,17 +15,13 @@ import { formatDate } from '@/utils/date';
 import { getExtension } from '@/utils/document-util';
 import { ColumnDef } from '@tanstack/table-core';
 import { ArrowUpDown } from 'lucide-react';
-import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DatasetActionCell } from './dataset-action-cell';
-import { useChangeDocumentParser } from './hooks';
 import { ParsingStatusCell } from './parsing-status-cell';
+import { UseChangeDocumentParserShowType } from './use-change-document-parser';
 import { UseRenameDocumentShowType } from './use-rename-document';
 
-type UseDatasetTableColumnsType = Pick<
-  ReturnType<typeof useChangeDocumentParser>,
-  'showChangeParserModal'
-> & {
+type UseDatasetTableColumnsType = UseChangeDocumentParserShowType & {
   setCurrentRecord: (record: IDocumentInfo) => void;
 } & UseRenameDocumentShowType;
 
@@ -42,13 +38,6 @@ export function useDatasetTableColumns({
   //   setCurrentRecord(record);
   //   showRenameModal();
   // };
-  const onShowChangeParserModal = useCallback(
-    (record: IDocumentInfo) => () => {
-      setCurrentRecord(record);
-      showChangeParserModal();
-    },
-    [setCurrentRecord, showChangeParserModal],
-  );
 
   // const onShowSetMetaModal = useCallback(() => {
   //   setRecord();
@@ -168,7 +157,12 @@ export function useDatasetTableColumns({
       header: t('parsingStatus'),
       // meta: { cellClassName: 'min-w-[20vw]' },
       cell: ({ row }) => {
-        return <ParsingStatusCell record={row.original}></ParsingStatusCell>;
+        return (
+          <ParsingStatusCell
+            record={row.original}
+            showChangeParserModal={showChangeParserModal}
+          ></ParsingStatusCell>
+        );
       },
     },
     {