Feat: Bind data to datasets page #3221 (#4938)

### What problem does this PR solve?

Feat: Bind data to datasets page #3221

### Type of change


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

web/src/components/chunk-method-dialog/hooks.ts

@@ -0,0 +1,128 @@
+import { useSelectParserList } from '@/hooks/user-setting-hooks';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+const ParserListMap = new Map([
+  [
+    ['pdf'],
+    [
+      'naive',
+      'resume',
+      'manual',
+      'paper',
+      'book',
+      'laws',
+      'presentation',
+      'one',
+      'qa',
+      'knowledge_graph',
+    ],
+  ],
+  [
+    ['doc', 'docx'],
+    [
+      'naive',
+      'resume',
+      'book',
+      'laws',
+      'one',
+      'qa',
+      'manual',
+      'knowledge_graph',
+    ],
+  ],
+  [
+    ['xlsx', 'xls'],
+    ['naive', 'qa', 'table', 'one', 'knowledge_graph'],
+  ],
+  [['ppt', 'pptx'], ['presentation']],
+  [
+    ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tif', 'tiff', 'webp', 'svg', 'ico'],
+    ['picture'],
+  ],
+  [
+    ['txt'],
+    [
+      'naive',
+      'resume',
+      'book',
+      'laws',
+      'one',
+      'qa',
+      'table',
+      'knowledge_graph',
+    ],
+  ],
+  [
+    ['csv'],
+    [
+      'naive',
+      'resume',
+      'book',
+      'laws',
+      'one',
+      'qa',
+      'table',
+      'knowledge_graph',
+    ],
+  ],
+  [['md'], ['naive', 'qa', 'knowledge_graph']],
+  [['json'], ['naive', 'knowledge_graph']],
+  [['eml'], ['email']],
+]);
+
+const getParserList = (
+  values: string[],
+  parserList: Array<{
+    value: string;
+    label: string;
+  }>,
+) => {
+  return parserList.filter((x) => values?.some((y) => y === x.value));
+};
+
+export const useFetchParserListOnMount = (
+  documentId: string,
+  parserId: string,
+  documentExtension: string,
+  // form: FormInstance,
+) => {
+  const [selectedTag, setSelectedTag] = useState('');
+  const parserList = useSelectParserList();
+  // const handleChunkMethodSelectChange = useHandleChunkMethodSelectChange(form); // TODO
+
+  const nextParserList = useMemo(() => {
+    const key = [...ParserListMap.keys()].find((x) =>
+      x.some((y) => y === documentExtension),
+    );
+    if (key) {
+      const values = ParserListMap.get(key);
+      return getParserList(values ?? [], parserList);
+    }
+
+    return getParserList(
+      ['naive', 'resume', 'book', 'laws', 'one', 'qa', 'table'],
+      parserList,
+    );
+  }, [parserList, documentExtension]);
+
+  useEffect(() => {
+    setSelectedTag(parserId);
+  }, [parserId, documentId]);
+
+  const handleChange = (tag: string) => {
+    // handleChunkMethodSelectChange(tag);
+    setSelectedTag(tag);
+  };
+
+  return { parserList: nextParserList, handleChange, selectedTag };
+};
+
+const hideAutoKeywords = ['qa', 'table', 'resume', 'knowledge_graph', 'tag'];
+
+export const useShowAutoKeywords = () => {
+  const showAutoKeywords = useCallback((selectedTag: string) => {
+    return hideAutoKeywords.every((x) => selectedTag !== x);
+  }, []);
+
+  return showAutoKeywords;
+};

web/src/components/chunk-method-dialog/index.tsx

@@ -0,0 +1,127 @@
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { useTranslate } from '@/hooks/common-hooks';
+import { IModalProps } from '@/interfaces/common';
+import { IParserConfig } from '@/interfaces/database/document';
+import { IChangeParserConfigRequestBody } from '@/interfaces/request/document';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+import { useFetchParserListOnMount } from './hooks';
+
+interface IProps
+  extends IModalProps<{
+    parserId: string;
+    parserConfig: IChangeParserConfigRequestBody;
+  }> {
+  loading: boolean;
+  parserId: string;
+  parserConfig: IParserConfig;
+  documentExtension: string;
+  documentId: string;
+}
+
+export function ChunkMethodDialog({
+  hideModal,
+  onOk,
+  parserId,
+  documentId,
+  documentExtension,
+}: IProps) {
+  const { t } = useTranslate('knowledgeDetails');
+
+  const { parserList } = useFetchParserListOnMount(
+    documentId,
+    parserId,
+    documentExtension,
+    // form,
+  );
+
+  const FormSchema = z.object({
+    name: z
+      .string()
+      .min(1, {
+        message: 'namePlaceholder',
+      })
+      .trim(),
+  });
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: { name: '' },
+  });
+
+  async function onSubmit(data: z.infer<typeof FormSchema>) {
+    const ret = await onOk?.();
+    if (ret) {
+      hideModal?.();
+    }
+  }
+
+  return (
+    <Dialog open onOpenChange={hideModal}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('chunkMethod')}</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('name')}</FormLabel>
+                  <FormControl>
+                    <Select
+                      {...field}
+                      autoComplete="off"
+                      onValueChange={field.onChange}
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select a verified email to display" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {parserList.map((x) => (
+                          <SelectItem value={x.value} key={x.value}>
+                            {x.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
+        <DialogFooter>
+          <Button type="submit">Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}