Feat: Add TagTable #4367 (#4368)

### What problem does this PR solve?

Feat: Add TagTable #4367

### Type of change


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

web/src/pages/add-knowledge/components/knowledge-setting/category-panel.tsx

@@ -6,6 +6,7 @@ import DOMPurify from 'dompurify';
 import camelCase from 'lodash/camelCase';
 import { useMemo } from 'react';
 import styles from './index.less';
+import { TagTable } from './tag-table';
 import { ImageMap } from './utils';
 
 const { Title, Text } = Typography;
@@ -68,6 +69,7 @@ const CategoryPanel = ({ chunkMethod }: { chunkMethod: string }) => {
           <SvgIcon name={'chunk-method/chunk-empty'} width={'100%'}></SvgIcon>
         </Empty>
       )}
+      {chunkMethod === 'tag' && <TagTable></TagTable>}
     </section>
   );
 };

web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts

@@ -1,6 +1,8 @@
 import { LlmModelType } from '@/constants/knowledge';
+import { useSetModalState } from '@/hooks/common-hooks';
 import {
   useFetchKnowledgeBaseConfiguration,
+  useRenameTag,
   useUpdateKnowledge,
 } from '@/hooks/knowledge-hooks';
 import { useSelectLlmOptionsByModelType } from '@/hooks/llm-hooks';
@@ -14,7 +16,7 @@ import { useIsFetching } from '@tanstack/react-query';
 import { Form, UploadFile } from 'antd';
 import { FormInstance } from 'antd/lib';
 import pick from 'lodash/pick';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 export const useSubmitKnowledgeConfiguration = (form: FormInstance) => {
   const { saveKnowledgeConfiguration, loading } = useUpdateKnowledge();
@@ -87,3 +89,44 @@ export const useHandleChunkMethodChange = () => {
 
   return { form, chunkMethod };
 };
+
+export const useRenameKnowledgeTag = () => {
+  const [tag, setTag] = useState<string>('');
+  const {
+    visible: tagRenameVisible,
+    hideModal: hideTagRenameModal,
+    showModal: showFileRenameModal,
+  } = useSetModalState();
+  const { renameTag, loading } = useRenameTag();
+
+  const onTagRenameOk = useCallback(
+    async (name: string) => {
+      const ret = await renameTag({
+        fromTag: tag,
+        toTag: name,
+      });
+
+      if (ret === 0) {
+        hideTagRenameModal();
+      }
+    },
+    [renameTag, tag, hideTagRenameModal],
+  );
+
+  const handleShowTagRenameModal = useCallback(
+    (record: string) => {
+      setTag(record);
+      showFileRenameModal();
+    },
+    [showFileRenameModal],
+  );
+
+  return {
+    renameLoading: loading,
+    initialName: tag,
+    onTagRenameOk,
+    tagRenameVisible,
+    hideTagRenameModal,
+    showTagRenameModal: handleShowTagRenameModal,
+  };
+};

web/src/pages/add-knowledge/components/knowledge-setting/tag-table/index.tsx

@@ -0,0 +1,309 @@
+'use client';
+
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { ArrowUpDown, Pencil, Trash2 } from 'lucide-react';
+import * as React from 'react';
+
+import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { useDeleteTag, useFetchTagList } from '@/hooks/knowledge-hooks';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useRenameKnowledgeTag } from '../hooks';
+import { RenameDialog } from './rename-dialog';
+
+export type ITag = {
+  tag: string;
+  frequency: number;
+};
+
+export function TagTable() {
+  const { t } = useTranslation();
+  const { list } = useFetchTagList();
+  const [tagList, setTagList] = useState<ITag[]>([]);
+
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    [],
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = useState({});
+
+  const { deleteTag } = useDeleteTag();
+
+  useEffect(() => {
+    setTagList(list.map((x) => ({ tag: x[0], frequency: x[1] })));
+  }, [list]);
+
+  const handleDeleteTag = useCallback(
+    (tags: string[]) => () => {
+      deleteTag(tags);
+    },
+    [deleteTag],
+  );
+
+  const {
+    showTagRenameModal,
+    hideTagRenameModal,
+    tagRenameVisible,
+    onTagRenameOk,
+    initialName,
+  } = useRenameKnowledgeTag();
+
+  const columns: ColumnDef<ITag>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected() ||
+            (table.getIsSomePageRowsSelected() && 'indeterminate')
+          }
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+          aria-label="Select all"
+        />
+      ),
+      cell: ({ row }) => (
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Select row"
+        />
+      ),
+      enableSorting: false,
+      enableHiding: false,
+    },
+    {
+      accessorKey: 'tag',
+      header: ({ column }) => {
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          >
+            {t('knowledgeConfiguration.tag')}
+            <ArrowUpDown />
+          </Button>
+        );
+      },
+      cell: ({ row }) => {
+        const value: string = row.getValue('tag');
+        return <div>{value}</div>;
+      },
+    },
+    {
+      accessorKey: 'frequency',
+      header: ({ column }) => {
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          >
+            {t('knowledgeConfiguration.frequency')}
+            <ArrowUpDown />
+          </Button>
+        );
+      },
+      cell: ({ row }) => (
+        <div className="capitalize ">{row.getValue('frequency')}</div>
+      ),
+    },
+    {
+      id: 'actions',
+      enableHiding: false,
+      header: t('common.action'),
+      cell: ({ row }) => {
+        return (
+          <div className="flex gap-1">
+            <Tooltip>
+              <ConfirmDeleteDialog onOk={handleDeleteTag([row.original.tag])}>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon">
+                    <Trash2 />
+                  </Button>
+                </TooltipTrigger>
+              </ConfirmDeleteDialog>
+              <TooltipContent>
+                <p>{t('common.delete')}</p>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => showTagRenameModal(row.original.tag)}
+                >
+                  <Pencil />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{t('common.rename')}</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        );
+      },
+    },
+  ];
+
+  const table = useReactTable({
+    data: tagList,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  });
+
+  const selectedRowLength = table.getFilteredSelectedRowModel().rows.length;
+
+  return (
+    <TooltipProvider>
+      <div className="w-full">
+        <div className="flex items-center justify-between py-4 ">
+          <Input
+            placeholder={t('knowledgeConfiguration.searchTags')}
+            value={(table.getColumn('tag')?.getFilterValue() as string) ?? ''}
+            onChange={(event) =>
+              table.getColumn('tag')?.setFilterValue(event.target.value)
+            }
+            className="w-1/2"
+          />
+          {selectedRowLength > 0 && (
+            <ConfirmDeleteDialog
+              onOk={handleDeleteTag(
+                table
+                  .getFilteredSelectedRowModel()
+                  .rows.map((x) => x.original.tag),
+              )}
+            >
+              <Button variant="outline" size="icon">
+                <Trash2 />
+              </Button>
+            </ConfirmDeleteDialog>
+          )}
+        </div>
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => {
+                    return (
+                      <TableHead key={header.id}>
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                      </TableHead>
+                    );
+                  })}
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && 'selected'}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length}
+                    className="h-24 text-center"
+                  >
+                    No results.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+        <div className="flex items-center justify-end space-x-2 py-4">
+          <div className="flex-1 text-sm text-muted-foreground">
+            {selectedRowLength} of {table.getFilteredRowModel().rows.length}{' '}
+            row(s) selected.
+          </div>
+          <div className="space-x-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+            >
+              {t('common.previousPage')}
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              {t('common.nextPage')}
+            </Button>
+          </div>
+        </div>
+      </div>
+      {tagRenameVisible && (
+        <RenameDialog
+          hideModal={hideTagRenameModal}
+          onOk={onTagRenameOk}
+          initialName={initialName}
+        ></RenameDialog>
+      )}
+    </TooltipProvider>
+  );
+}

web/src/pages/add-knowledge/components/knowledge-setting/tag-table/rename-dialog/index.tsx

@@ -0,0 +1,38 @@
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { IModalProps } from '@/interfaces/common';
+import { TagRenameId } from '@/pages/add-knowledge/constant';
+import { useTranslation } from 'react-i18next';
+import { RenameForm } from './rename-form';
+
+export function RenameDialog({
+  hideModal,
+  initialName,
+}: IModalProps<any> & { initialName: string }) {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog open onOpenChange={hideModal}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>{t('common.rename')}</DialogTitle>
+        </DialogHeader>
+        <RenameForm
+          initialName={initialName}
+          hideModal={hideModal}
+        ></RenameForm>
+        <DialogFooter>
+          <Button type="submit" form={TagRenameId}>
+            {t('common.save')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/pages/add-knowledge/components/knowledge-setting/tag-table/rename-dialog/rename-form.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { useRenameTag } from '@/hooks/knowledge-hooks';
+import { IModalProps } from '@/interfaces/common';
+import { TagRenameId } from '@/pages/add-knowledge/constant';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export function RenameForm({
+  initialName,
+  hideModal,
+}: IModalProps<any> & { initialName: string }) {
+  const { t } = useTranslation();
+  const FormSchema = z.object({
+    name: z
+      .string()
+      .min(1, {
+        message: t('common.namePlaceholder'),
+      })
+      .trim(),
+  });
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      name: '',
+    },
+  });
+
+  const { renameTag } = useRenameTag();
+
+  async function onSubmit(data: z.infer<typeof FormSchema>) {
+    const ret = await renameTag({ fromTag: initialName, toTag: data.name });
+    if (ret) {
+      hideModal?.();
+    }
+  }
+
+  useEffect(() => {
+    form.setValue('name', initialName);
+  }, [form, initialName]);
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="space-y-6"
+        id={TagRenameId}
+      >
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('common.name')}</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder={t('common.namePlaceholder')}
+                  {...field}
+                  autoComplete="off"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
+}

web/src/pages/add-knowledge/constant.ts

@@ -17,3 +17,5 @@ export const datasetRouteMap = {
 };
 
 export * from '@/constants/knowledge';
+
+export const TagRenameId = 'tagRename';