feat: add ragflow web project & add pnpm workspace file

2025-11-09 11:18:58 +08:00
parent ed6e0ab282
commit b2053760be
1566 changed files with 218623 additions and 57 deletions
--- a/ragflow_web/src/pages/chunk/chunk-card.tsx
+++ b/ragflow_web/src/pages/chunk/chunk-card.tsx
@@ -0,0 +1,45 @@
+import { Card, CardContent } from '@/components/ui/card';
+import { Switch } from '@/components/ui/switch';
+import { Annoyed } from 'lucide-react';
+
+interface ParsedPageCardProps {
+  page: string;
+  content: string;
+}
+
+export function ParsedPageCard({ page, content }: ParsedPageCardProps) {
+  return (
+    <Card className="bg-colors-outline-neutral-standard border-colors-outline-neutral-strong rounded-3xl">
+      <CardContent className="p-4">
+        <p className="text-colors-text-neutral-standard text-base">{page}</p>
+        <div className="text-colors-text-neutral-strong text-lg mt-2">
+          {content}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+interface ChunkCardProps {
+  activated: boolean;
+  content: string;
+}
+
+export function ChunkCard({ content }: ChunkCardProps) {
+  return (
+    <Card className="bg-colors-outline-neutral-standard border-colors-outline-neutral-strong rounded-3xl">
+      <CardContent className="p-4">
+        <div className="flex justify-between items-center">
+          <Annoyed />
+          <div className="flex items-center space-x-2">
+            <Switch />
+            <span className="text-colors-text-neutral-strong">Active</span>
+          </div>
+        </div>
+        <div className="text-colors-text-neutral-strong text-lg mt-2 line-clamp-4">
+          {content}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
--- a/ragflow_web/src/pages/chunk/chunk-result/index.tsx
+++ b/ragflow_web/src/pages/chunk/chunk-result/index.tsx
@@ -0,0 +1,13 @@
+import ChunkedResultPanel from '../chunked-result-panel';
+import ParsedResultPanel from '../parsed-result-panel';
+
+export default function ChunkResult() {
+  return (
+    <section className="flex">
+      <ParsedResultPanel></ParsedResultPanel>
+      <div className="flex-1">
+        <ChunkedResultPanel></ChunkedResultPanel>
+      </div>
+    </section>
+  );
+}
--- a/ragflow_web/src/pages/chunk/chunk-toolbar.tsx
+++ b/ragflow_web/src/pages/chunk/chunk-toolbar.tsx
@@ -0,0 +1,24 @@
+import { Button } from '@/components/ui/button';
+import { Copy } from 'lucide-react';
+
+interface ChunkToolbarProps {
+  text: string;
+}
+
+export function ChunkToolbar({ text }: ChunkToolbarProps) {
+  return (
+    <div className="flex justify-between px-9">
+      <span className="text-colors-text-neutral-strong text-3xl font-bold">
+        {text}
+      </span>
+      <div className="flex items-center gap-3">
+        <Button variant={'icon'} size={'icon'}>
+          <Copy />
+        </Button>
+        <Button variant={'outline'} size={'sm'}>
+          Export
+        </Button>
+      </div>
+    </div>
+  );
+}
--- a/ragflow_web/src/pages/chunk/chunked-result-panel.tsx
+++ b/ragflow_web/src/pages/chunk/chunked-result-panel.tsx
@@ -0,0 +1,31 @@
+import { ChunkCard } from './chunk-card';
+import { ChunkToolbar } from './chunk-toolbar';
+
+const list = new Array(10).fill({
+  page: 'page 1',
+  content: `Word并不像 TeX／LaTeX为我们提供了合适的定理环境，因此需要我们另想办法。
+  
+  第1节 自定义定理环境
+  我们已经使用了“定理样式”作为定理排版的样式，如：
+  
+  定理1.1．对顶角相等。
+  
+  如果大家需要其他的如引理，公理，定义等环境可以仿照定义。
+  
+  定理1.2．三边对应相等的三角形全等。
+  
+  我们将这个过程也定义成了宏，在工具栏Theorem里面。书写过程如下：先写好定理本身，然后在该段落处放置光标，打开Theorem工具栏，点SetTheorem，即可见到效果。请尝试下面一个例子：`,
+});
+
+export default function ChunkedResultPanel() {
+  return (
+    <div className="flex-1 py-6 border-l space-y-6">
+      <ChunkToolbar text="Chunked  results"></ChunkToolbar>
+      <div className="space-y-6  overflow-auto max-h-[87vh] px-9">
+        {list.map((x, idx) => (
+          <ChunkCard key={idx} content={x.content} activated></ChunkCard>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/ragflow_web/src/pages/chunk/index.tsx
+++ b/ragflow_web/src/pages/chunk/index.tsx
@@ -0,0 +1,87 @@
+import { PageHeader } from '@/components/page-header';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+import { Button } from '@/components/ui/button';
+import { Segmented, SegmentedValue } from '@/components/ui/segmented';
+import {
+  QueryStringMap,
+  useNavigatePage,
+} from '@/hooks/logic-hooks/navigate-hooks';
+import { Routes } from '@/routes';
+import { EllipsisVertical, Save } from 'lucide-react';
+import { useMemo } from 'react';
+import { Outlet, useLocation } from 'umi';
+
+export default function ChunkPage() {
+  const { navigateToDataset, getQueryString, navigateToChunk } =
+    useNavigatePage();
+  const location = useLocation();
+
+  const options = useMemo(() => {
+    return [
+      {
+        label: 'Parsed results',
+        value: Routes.ParsedResult,
+      },
+      {
+        label: 'Chunk result',
+        value: Routes.ChunkResult,
+      },
+      {
+        label: 'Result view',
+        value: Routes.ResultView,
+      },
+    ];
+  }, []);
+
+  const path = useMemo(() => {
+    return location.pathname.split('/').slice(0, 3).join('/');
+  }, [location.pathname]);
+
+  return (
+    <section>
+      <PageHeader>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink
+                onClick={navigateToDataset(
+                  getQueryString(QueryStringMap.KnowledgeId) as string,
+                )}
+              >
+                Agent
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>xxx</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <div>
+          <Segmented
+            options={options}
+            value={path}
+            onChange={navigateToChunk as (val: SegmentedValue) => void}
+          ></Segmented>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant={'icon'} size={'icon'}>
+            <EllipsisVertical />
+          </Button>
+          <Button size={'sm'}>
+            <Save />
+            Save
+          </Button>
+        </div>
+      </PageHeader>
+      <Outlet />
+    </section>
+  );
+}
--- a/ragflow_web/src/pages/chunk/parsed-result-panel.tsx
+++ b/ragflow_web/src/pages/chunk/parsed-result-panel.tsx
@@ -0,0 +1,35 @@
+import { ParsedPageCard } from './chunk-card';
+import { ChunkToolbar } from './chunk-toolbar';
+
+const list = new Array(10).fill({
+  page: 'page 1',
+  content: `Word并不像 TeX／LaTeX为我们提供了合适的定理环境，因此需要我们另想办法。
+  
+  第1节 自定义定理环境
+  我们已经使用了“定理样式”作为定理排版的样式，如：
+  
+  定理1.1．对顶角相等。
+  
+  如果大家需要其他的如引理，公理，定义等环境可以仿照定义。
+  
+  定理1.2．三边对应相等的三角形全等。
+  
+  我们将这个过程也定义成了宏，在工具栏Theorem里面。书写过程如下：先写好定理本身，然后在该段落处放置光标，打开Theorem工具栏，点SetTheorem，即可见到效果。请尝试下面一个例子：`,
+});
+
+export default function ParsedResultPanel() {
+  return (
+    <div className="flex-1 py-6 border-l space-y-6">
+      <ChunkToolbar text="Parsed  results"></ChunkToolbar>
+      <div className="space-y-6  overflow-auto max-h-[87vh] px-9">
+        {list.map((x, idx) => (
+          <ParsedPageCard
+            key={idx}
+            page={x.page}
+            content={x.content}
+          ></ParsedPageCard>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less
@@ -0,0 +1,36 @@
+.image {
+  width: 100px !important;
+  object-fit: contain;
+}
+
+.imagePreview {
+  max-width: 50vw;
+  max-height: 50vh;
+  object-fit: contain;
+}
+
+.content {
+  flex: 1;
+  .chunkText;
+}
+
+.contentEllipsis {
+  .multipleLineEllipsis(3);
+}
+
+.contentText {
+  word-break: break-all !important;
+}
+
+.chunkCard {
+  width: 100%;
+  padding: 18px 10px;
+}
+
+.cardSelected {
+  background-color: @selectedBackgroundColor;
+}
+
+.cardSelectedDark {
+  background-color: #ffffff2f;
+}
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx
@@ -0,0 +1,127 @@
+import Image from '@/components/image';
+import { useTheme } from '@/components/theme-provider';
+import { Card } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Switch } from '@/components/ui/switch';
+import { IChunk } from '@/interfaces/database/knowledge';
+import { CheckedState } from '@radix-ui/react-checkbox';
+import classNames from 'classnames';
+import DOMPurify from 'dompurify';
+import { useEffect, useState } from 'react';
+import { ChunkTextMode } from '../../constant';
+import styles from './index.less';
+
+interface IProps {
+  item: IChunk;
+  checked: boolean;
+  switchChunk: (available?: number, chunkIds?: string[]) => void;
+  editChunk: (chunkId: string) => void;
+  handleCheckboxClick: (chunkId: string, checked: boolean) => void;
+  selected: boolean;
+  clickChunkCard: (chunkId: string) => void;
+  textMode: ChunkTextMode;
+}
+
+const ChunkCard = ({
+  item,
+  checked,
+  handleCheckboxClick,
+  editChunk,
+  switchChunk,
+  selected,
+  clickChunkCard,
+  textMode,
+}: IProps) => {
+  const available = Number(item.available_int);
+  const [enabled, setEnabled] = useState(false);
+  const { theme } = useTheme();
+
+  const onChange = (checked: boolean) => {
+    setEnabled(checked);
+    switchChunk(available === 0 ? 1 : 0, [item.chunk_id]);
+  };
+
+  const handleCheck = (e: CheckedState) => {
+    handleCheckboxClick(item.chunk_id, e === 'indeterminate' ? false : e);
+  };
+
+  const handleContentDoubleClick = () => {
+    editChunk(item.chunk_id);
+  };
+
+  const handleContentClick = () => {
+    clickChunkCard(item.chunk_id);
+  };
+
+  useEffect(() => {
+    setEnabled(available === 1);
+  }, [available]);
+  const [open, setOpen] = useState<boolean>(false);
+  return (
+    <Card
+      className={classNames(styles.chunkCard, {
+        [`${theme === 'dark' ? styles.cardSelectedDark : styles.cardSelected}`]:
+          selected,
+      })}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <Checkbox onCheckedChange={handleCheck} checked={checked}></Checkbox>
+        {item.image_id && (
+          <Popover open={open}>
+            <PopoverTrigger
+              asChild
+              onMouseEnter={() => setOpen(true)}
+              onMouseLeave={() => setOpen(false)}
+            >
+              <div>
+                <Image id={item.image_id} className={styles.image}></Image>
+              </div>
+            </PopoverTrigger>
+            <PopoverContent
+              className="p-0"
+              align={'start'}
+              side={'right'}
+              sideOffset={-20}
+            >
+              <div>
+                <Image
+                  id={item.image_id}
+                  className={styles.imagePreview}
+                ></Image>
+              </div>
+            </PopoverContent>
+          </Popover>
+        )}
+        <section
+          onDoubleClick={handleContentDoubleClick}
+          onClick={handleContentClick}
+          className={styles.content}
+        >
+          <div
+            dangerouslySetInnerHTML={{
+              __html: DOMPurify.sanitize(item.content_with_weight),
+            }}
+            className={classNames(styles.contentText, {
+              [styles.contentEllipsis]: textMode === ChunkTextMode.Ellipse,
+            })}
+          ></div>
+        </section>
+        <div>
+          <Switch
+            checked={enabled}
+            onCheckedChange={onChange}
+            aria-readonly
+            className="!m-0"
+          />
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default ChunkCard;
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-creating-modal/index.tsx
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-creating-modal/index.tsx
@@ -0,0 +1,205 @@
+import EditTag from '@/components/edit-tag';
+import Divider from '@/components/ui/divider';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/hover-card';
+import { Modal } from '@/components/ui/modal/modal';
+import Space from '@/components/ui/space';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { useFetchChunk } from '@/hooks/chunk-hooks';
+import { IModalProps } from '@/interfaces/common';
+import React, { useCallback, useEffect, useState } from 'react';
+import { FieldValues, FormProvider, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useDeleteChunkByIds } from '../../hooks';
+import {
+  transformTagFeaturesArrayToObject,
+  transformTagFeaturesObjectToArray,
+} from '../../utils';
+import { TagFeatureItem } from './tag-feature-item';
+
+interface kFProps {
+  doc_id: string;
+  chunkId: string | undefined;
+  parserId: string;
+}
+
+const ChunkCreatingModal: React.FC<IModalProps<any> & kFProps> = ({
+  doc_id,
+  chunkId,
+  hideModal,
+  onOk,
+  loading,
+  parserId,
+}) => {
+  // const [form] = Form.useForm();
+  // const form = useFormContext();
+  const form = useForm<FieldValues>({
+    defaultValues: {
+      content_with_weight: '',
+      tag_kwd: [],
+      question_kwd: [],
+      important_kwd: [],
+      tag_feas: [],
+    },
+  });
+  const [checked, setChecked] = useState(false);
+  const { removeChunk } = useDeleteChunkByIds();
+  const { data } = useFetchChunk(chunkId);
+  const { t } = useTranslation();
+
+  const isTagParser = parserId === 'tag';
+  const onSubmit = useCallback(
+    (values: FieldValues) => {
+      onOk?.({
+        ...values,
+        tag_feas: transformTagFeaturesArrayToObject(values.tag_feas),
+        available_int: checked ? 1 : 0,
+      });
+    },
+    [checked, onOk],
+  );
+
+  const handleOk = form.handleSubmit(onSubmit);
+
+  const handleRemove = useCallback(() => {
+    if (chunkId) {
+      return removeChunk([chunkId], doc_id);
+    }
+  }, [chunkId, doc_id, removeChunk]);
+
+  const handleCheck = useCallback(() => {
+    setChecked(!checked);
+  }, [checked]);
+
+  useEffect(() => {
+    if (data?.code === 0) {
+      const { available_int, tag_feas } = data.data;
+      form.reset({
+        ...data.data,
+        tag_feas: transformTagFeaturesObjectToArray(tag_feas),
+      });
+
+      setChecked(available_int !== 0);
+    }
+  }, [data, form, chunkId]);
+
+  return (
+    <Modal
+      title={`${chunkId ? t('common.edit') : t('common.create')} ${t('chunk.chunk')}`}
+      open={true}
+      onOk={handleOk}
+      onCancel={hideModal}
+      confirmLoading={loading}
+      destroyOnClose
+    >
+      <Form {...form}>
+        <div className="flex flex-col gap-4">
+          <FormField
+            control={form.control}
+            name="content_with_weight"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('chunk.chunk')}</FormLabel>
+                <FormControl>
+                  <Textarea {...field} autoSize={{ minRows: 4, maxRows: 10 }} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="important_kwd"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('chunk.keyword')}</FormLabel>
+                <FormControl>
+                  <EditTag {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="question_kwd"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex justify-start items-start">
+                  <div className="flex items-center gap-1">
+                    <span>{t('chunk.question')}</span>
+                    <HoverCard>
+                      <HoverCardTrigger asChild>
+                        <span className="text-xs mt-[0px] text-center scale-[90%] text-text-secondary cursor-pointer rounded-full w-[17px] h-[17px] border-text-secondary border-2">
+                          ?
+                        </span>
+                      </HoverCardTrigger>
+                      <HoverCardContent className="w-80" side="top">
+                        {t('chunk.questionTip')}
+                      </HoverCardContent>
+                    </HoverCard>
+                  </div>
+                </FormLabel>
+                <FormControl>
+                  <EditTag {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {isTagParser && (
+            <FormField
+              control={form.control}
+              name="tag_kwd"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('knowledgeConfiguration.tagName')}</FormLabel>
+                  <FormControl>
+                    <EditTag {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          {!isTagParser && (
+            <FormProvider {...form}>
+              <TagFeatureItem />
+            </FormProvider>
+          )}
+        </div>
+      </Form>
+
+      {chunkId && (
+        <section>
+          <Divider />
+          <Space size={'large'}>
+            <div className="flex items-center gap-2">
+              {t('chunk.enabled')}
+              <Switch checked={checked} onCheckedChange={handleCheck} />
+            </div>
+            {/* <div className="flex items-center gap-1" onClick={handleRemove}>
+              <Trash2 size={16} /> {t('common.delete')}
+            </div> */}
+          </Space>
+        </section>
+      )}
+    </Modal>
+  );
+};
+export default ChunkCreatingModal;
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-creating-modal/tag-feature-item.tsx
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-creating-modal/tag-feature-item.tsx
@@ -0,0 +1,136 @@
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { Button } from '@/components/ui/button';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { NumberInput } from '@/components/ui/input';
+import { useFetchTagListByKnowledgeIds } from '@/hooks/knowledge-hooks';
+import { useFetchKnowledgeBaseConfiguration } from '@/hooks/use-knowledge-request';
+import { CircleMinus, Plus } from 'lucide-react';
+import { useCallback, useEffect, useMemo } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { FormListItem } from '../../utils';
+
+const FieldKey = 'tag_feas';
+
+export const TagFeatureItem = () => {
+  const { t } = useTranslation();
+  const { setKnowledgeIds, list } = useFetchTagListByKnowledgeIds();
+  const { data: knowledgeConfiguration } = useFetchKnowledgeBaseConfiguration();
+  const form = useFormContext();
+  const tagKnowledgeIds = useMemo(() => {
+    return knowledgeConfiguration?.parser_config?.tag_kb_ids ?? [];
+  }, [knowledgeConfiguration?.parser_config?.tag_kb_ids]);
+
+  const options = useMemo(() => {
+    return list.map((x) => ({
+      value: x[0],
+      label: x[0],
+    }));
+  }, [list]);
+
+  const filterOptions = useCallback(
+    (index: number) => {
+      const tags: FormListItem[] = form.getValues(FieldKey) ?? [];
+
+      // Exclude it's own current data
+      const list = tags
+        .filter((x, idx) => x && index !== idx)
+        .map((x) => x.tag);
+      // Exclude the selected data from other options from one's own options.
+      const resultList = options.filter(
+        (x) => !list.some((y) => x.value === y),
+      );
+      return resultList;
+    },
+    [form, options],
+  );
+
+  useEffect(() => {
+    setKnowledgeIds(tagKnowledgeIds);
+  }, [setKnowledgeIds, tagKnowledgeIds]);
+
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: FieldKey,
+  });
+  return (
+    <FormField
+      control={form.control}
+      name={FieldKey as any}
+      render={() => (
+        <FormItem>
+          <FormLabel>{t('knowledgeConfiguration.tags')}</FormLabel>
+          <div>
+            {fields.map((item, name) => {
+              return (
+                <div key={item.id} className="flex gap-3 items-center mb-4">
+                  <div className="flex flex-1 gap-8">
+                    <FormField
+                      control={form.control}
+                      name={`${FieldKey}.${name}.tag` as any}
+                      render={({ field }) => (
+                        <FormItem className="w-2/3">
+                          <FormControl className="w-full">
+                            <div>
+                              <SelectWithSearch
+                                options={filterOptions(name)}
+                                placeholder={t(
+                                  'knowledgeConfiguration.tagName',
+                                )}
+                                value={field.value}
+                                onChange={field.onChange}
+                              />
+                            </div>
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={form.control}
+                      name={`${FieldKey}.${name}.frequency`}
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <NumberInput
+                              value={field.value}
+                              onChange={field.onChange}
+                              placeholder={t(
+                                'knowledgeConfiguration.frequency',
+                              )}
+                              max={10}
+                              min={0}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                  <CircleMinus
+                    onClick={() => remove(name)}
+                    className="text-red-500"
+                  />
+                </div>
+              );
+            })}
+            <Button
+              variant="dashed"
+              className="w-full flex items-center justify-center gap-2"
+              onClick={() => append({ tag: '', frequency: 0 })}
+            >
+              <Plus size={16} />
+              {t('knowledgeConfiguration.addTag')}
+            </Button>
+          </div>
+        </FormItem>
+      )}
+    />
+  );
+};
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/checkbox-sets.tsx
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/checkbox-sets.tsx
@@ -0,0 +1,85 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { Ban, CircleCheck, Trash2 } from 'lucide-react';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type ICheckboxSetProps = {
+  selectAllChunk: (e: any) => void;
+  removeChunk: (e?: any) => void;
+  switchChunk: (available: number) => void;
+  checked: boolean;
+  selectedChunkIds: string[];
+};
+export default (props: ICheckboxSetProps) => {
+  const {
+    selectAllChunk,
+    removeChunk,
+    switchChunk,
+    checked,
+    selectedChunkIds,
+  } = props;
+  const { t } = useTranslation();
+  const handleSelectAllCheck = useCallback(
+    (e: any) => {
+      console.log('eee=', e);
+      selectAllChunk(e);
+    },
+    [selectAllChunk],
+  );
+
+  const handleDeleteClick = useCallback(() => {
+    removeChunk();
+  }, [removeChunk]);
+
+  const handleEnabledClick = useCallback(() => {
+    switchChunk(1);
+  }, [switchChunk]);
+
+  const handleDisabledClick = useCallback(() => {
+    switchChunk(0);
+  }, [switchChunk]);
+
+  const isSelected = useMemo(() => {
+    return selectedChunkIds?.length > 0;
+  }, [selectedChunkIds]);
+
+  return (
+    <div className="flex gap-[40px] py-4 px-2">
+      <div className="flex items-center gap-3 cursor-pointer text-muted-foreground hover:text-text-primary">
+        <Checkbox
+          id="all_chunks_checkbox"
+          onCheckedChange={handleSelectAllCheck}
+          checked={checked}
+          className=" data-[state=checked]:bg-text-primary data-[state=checked]:border-text-primary data-[state=checked]:text-bg-base  border-muted-foreground text-muted-foreground hover:text-bg-base hover:border-text-primary "
+        />
+        <Label htmlFor="all_chunks_checkbox">{t('chunk.selectAll')}</Label>
+      </div>
+      {isSelected && (
+        <>
+          <div
+            className="flex items-center cursor-pointer text-muted-foreground hover:text-text-primary"
+            onClick={handleEnabledClick}
+          >
+            <CircleCheck size={16} />
+            <span className="block ml-1">{t('chunk.enable')}</span>
+          </div>
+          <div
+            className="flex items-center cursor-pointer text-muted-foreground hover:text-text-primary"
+            onClick={handleDisabledClick}
+          >
+            <Ban size={16} />
+            <span className="block ml-1">{t('chunk.disable')}</span>
+          </div>
+          <div
+            className="flex items-center cursor-pointer text-red-400 hover:text-red-500"
+            onClick={handleDeleteClick}
+          >
+            <Trash2 size={16} />
+            <span className="block ml-1">{t('chunk.delete')}</span>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/index.tsx
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/index.tsx
@@ -0,0 +1,106 @@
+import { Input } from '@/components/originui/input';
+import { Button } from '@/components/ui/button';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Radio } from '@/components/ui/radio';
+import { useTranslate } from '@/hooks/common-hooks';
+import { cn } from '@/lib/utils';
+import { SearchOutlined } from '@ant-design/icons';
+import { ListFilter, Plus } from 'lucide-react';
+import { useState } from 'react';
+import { ChunkTextMode } from '../../constant';
+interface ChunkResultBarProps {
+  changeChunkTextMode: React.Dispatch<React.SetStateAction<string | number>>;
+  available: number | undefined;
+  selectAllChunk: (value: boolean) => void;
+  handleSetAvailable: (value: number | undefined) => void;
+  createChunk: () => void;
+  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  searchString: string;
+}
+export default ({
+  changeChunkTextMode,
+  available,
+  selectAllChunk,
+  handleSetAvailable,
+  createChunk,
+  handleInputChange,
+  searchString,
+}: ChunkResultBarProps) => {
+  const { t } = useTranslate('chunk');
+  const [textSelectValue, setTextSelectValue] = useState<string | number>(
+    ChunkTextMode.Full,
+  );
+  const handleFilterChange = (e: string | number) => {
+    const value = e === -1 ? undefined : (e as number);
+    selectAllChunk(false);
+    handleSetAvailable(value);
+  };
+  const filterContent = (
+    <div className="w-[200px]">
+      <Radio.Group onChange={handleFilterChange} value={available}>
+        <div className="flex flex-col gap-2 p-4">
+          <Radio value={-1}>{t('all')}</Radio>
+          <Radio value={1}>{t('enabled')}</Radio>
+          <Radio value={0}>{t('disabled')}</Radio>
+        </div>
+      </Radio.Group>
+    </div>
+  );
+  const textSelectOptions = [
+    { label: t(ChunkTextMode.Full), value: ChunkTextMode.Full },
+    { label: t(ChunkTextMode.Ellipse), value: ChunkTextMode.Ellipse },
+  ];
+
+  const changeTextSelectValue = (value: string | number) => {
+    setTextSelectValue(value);
+    changeChunkTextMode(value);
+  };
+  return (
+    <div className="flex pr-[25px]">
+      <div className="flex items-center gap-4 bg-bg-card text-muted-foreground w-fit h-[35px] rounded-md px-4 py-2">
+        {textSelectOptions.map((option) => (
+          <div
+            key={option.value}
+            className={cn('flex items-center cursor-pointer', {
+              'text-primary': option.value === textSelectValue,
+            })}
+            onClick={() => changeTextSelectValue(option.value)}
+          >
+            {option.label}
+          </div>
+        ))}
+      </div>
+      <div className="ml-auto"></div>
+      <Input
+        className="bg-bg-card text-muted-foreground"
+        style={{ width: 200 }}
+        placeholder={t('search')}
+        icon={<SearchOutlined />}
+        onChange={handleInputChange}
+        value={searchString}
+      />
+      <div className="w-[20px]"></div>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button className="bg-bg-card text-muted-foreground hover:bg-card">
+            <ListFilter />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="p-0 w-[200px]">
+          {filterContent}
+        </PopoverContent>
+      </Popover>
+      <div className="w-[20px]"></div>
+      <Button
+        onClick={() => createChunk()}
+        className="bg-bg-card text-primary hover:bg-card"
+      >
+        <Plus size={44} />
+      </Button>
+    </div>
+  );
+};
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-toolbar/index.tsx
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-toolbar/index.tsx
@@ -0,0 +1,221 @@
+import { ReactComponent as FilterIcon } from '@/assets/filter.svg';
+import { KnowledgeRouteKey } from '@/constants/knowledge';
+import { IChunkListResult, useSelectChunkList } from '@/hooks/chunk-hooks';
+import { useTranslate } from '@/hooks/common-hooks';
+import { useKnowledgeBaseId } from '@/hooks/knowledge-hooks';
+import {
+  ArrowLeftOutlined,
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  DeleteOutlined,
+  DownOutlined,
+  FilePdfOutlined,
+  PlusOutlined,
+  SearchOutlined,
+} from '@ant-design/icons';
+import {
+  Button,
+  Checkbox,
+  Flex,
+  Input,
+  Menu,
+  MenuProps,
+  Popover,
+  Radio,
+  RadioChangeEvent,
+  Segmented,
+  SegmentedProps,
+  Space,
+  Typography,
+} from 'antd';
+import { useCallback, useMemo, useState } from 'react';
+import { Link } from 'umi';
+import { ChunkTextMode } from '../../constant';
+
+const { Text } = Typography;
+
+interface IProps
+  extends Pick<
+    IChunkListResult,
+    'searchString' | 'handleInputChange' | 'available' | 'handleSetAvailable'
+  > {
+  checked: boolean;
+  selectAllChunk: (checked: boolean) => void;
+  createChunk: () => void;
+  removeChunk: () => void;
+  switchChunk: (available: number) => void;
+  changeChunkTextMode(mode: ChunkTextMode): void;
+}
+
+const ChunkToolBar = ({
+  selectAllChunk,
+  checked,
+  createChunk,
+  removeChunk,
+  switchChunk,
+  changeChunkTextMode,
+  available,
+  handleSetAvailable,
+  searchString,
+  handleInputChange,
+}: IProps) => {
+  const data = useSelectChunkList();
+  const documentInfo = data?.documentInfo;
+  const knowledgeBaseId = useKnowledgeBaseId();
+  const [isShowSearchBox, setIsShowSearchBox] = useState(false);
+  const { t } = useTranslate('chunk');
+
+  const handleSelectAllCheck = useCallback(
+    (e: any) => {
+      selectAllChunk(e.target.checked);
+    },
+    [selectAllChunk],
+  );
+
+  const handleSearchIconClick = () => {
+    setIsShowSearchBox(true);
+  };
+
+  const handleSearchBlur = () => {
+    if (!searchString?.trim()) {
+      setIsShowSearchBox(false);
+    }
+  };
+
+  const handleDelete = useCallback(() => {
+    removeChunk();
+  }, [removeChunk]);
+
+  const handleEnabledClick = useCallback(() => {
+    switchChunk(1);
+  }, [switchChunk]);
+
+  const handleDisabledClick = useCallback(() => {
+    switchChunk(0);
+  }, [switchChunk]);
+
+  const items: MenuProps['items'] = useMemo(() => {
+    return [
+      {
+        key: '1',
+        label: (
+          <>
+            <Checkbox onChange={handleSelectAllCheck} checked={checked}>
+              <b>{t('selectAll')}</b>
+            </Checkbox>
+          </>
+        ),
+      },
+      { type: 'divider' },
+      {
+        key: '2',
+        label: (
+          <Space onClick={handleEnabledClick}>
+            <CheckCircleOutlined />
+            <b>{t('enabledSelected')}</b>
+          </Space>
+        ),
+      },
+      {
+        key: '3',
+        label: (
+          <Space onClick={handleDisabledClick}>
+            <CloseCircleOutlined />
+            <b>{t('disabledSelected')}</b>
+          </Space>
+        ),
+      },
+      { type: 'divider' },
+      {
+        key: '4',
+        label: (
+          <Space onClick={handleDelete}>
+            <DeleteOutlined />
+            <b>{t('deleteSelected')}</b>
+          </Space>
+        ),
+      },
+    ];
+  }, [
+    checked,
+    handleSelectAllCheck,
+    handleDelete,
+    handleEnabledClick,
+    handleDisabledClick,
+    t,
+  ]);
+
+  const content = (
+    <Menu style={{ width: 200 }} items={items} selectable={false} />
+  );
+
+  const handleFilterChange = (e: RadioChangeEvent) => {
+    selectAllChunk(false);
+    handleSetAvailable(e.target.value);
+  };
+
+  const filterContent = (
+    <Radio.Group onChange={handleFilterChange} value={available}>
+      <Space direction="vertical">
+        <Radio value={undefined}>{t('all')}</Radio>
+        <Radio value={1}>{t('enabled')}</Radio>
+        <Radio value={0}>{t('disabled')}</Radio>
+      </Space>
+    </Radio.Group>
+  );
+
+  return (
+    <Flex justify="space-between" align="center">
+      <Space size={'middle'}>
+        <Link
+          to={`/knowledge/${KnowledgeRouteKey.Dataset}?id=${knowledgeBaseId}`}
+        >
+          <ArrowLeftOutlined />
+        </Link>
+        <FilePdfOutlined />
+        <Text ellipsis={{ tooltip: documentInfo?.name }} style={{ width: 150 }}>
+          {documentInfo?.name}
+        </Text>
+      </Space>
+      <Space>
+        <Segmented
+          options={[
+            { label: t(ChunkTextMode.Full), value: ChunkTextMode.Full },
+            { label: t(ChunkTextMode.Ellipse), value: ChunkTextMode.Ellipse },
+          ]}
+          onChange={changeChunkTextMode as SegmentedProps['onChange']}
+        />
+        <Popover content={content} placement="bottom" arrow={false}>
+          <Button>
+            {t('bulk')}
+            <DownOutlined />
+          </Button>
+        </Popover>
+        {isShowSearchBox ? (
+          <Input
+            size="middle"
+            placeholder={t('search')}
+            prefix={<SearchOutlined />}
+            allowClear
+            onChange={handleInputChange}
+            onBlur={handleSearchBlur}
+            value={searchString}
+          />
+        ) : (
+          <Button icon={<SearchOutlined />} onClick={handleSearchIconClick} />
+        )}
+
+        <Popover content={filterContent} placement="bottom" arrow={false}>
+          <Button icon={<FilterIcon />} />
+        </Popover>
+        <Button
+          icon={<PlusOutlined />}
+          type="primary"
+          onClick={() => createChunk()}
+        />
+      </Space>
+    </Flex>
+  );
+};
+
+export default ChunkToolBar;
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/csv-preview.tsx
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/csv-preview.tsx
@@ -0,0 +1,114 @@
+import message from '@/components/ui/message';
+import { Spin } from '@/components/ui/spin';
+import request from '@/utils/request';
+import classNames from 'classnames';
+import React, { useEffect, useRef, useState } from 'react';
+
+interface CSVData {
+  rows: string[][];
+  headers: string[];
+}
+
+interface FileViewerProps {
+  className?: string;
+  url: string;
+}
+
+const CSVFileViewer: React.FC<FileViewerProps> = ({ url }) => {
+  const [data, setData] = useState<CSVData | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const containerRef = useRef<HTMLDivElement>(null);
+  // const url = useGetDocumentUrl();
+  const parseCSV = (csvText: string): CSVData => {
+    console.log('Parsing CSV data:', csvText);
+    const lines = csvText.split('\n');
+    const headers = lines[0].split(',').map((header) => header.trim());
+    const rows = lines
+      .slice(1)
+      .map((line) => line.split(',').map((cell) => cell.trim()));
+
+    return { headers, rows };
+  };
+
+  useEffect(() => {
+    const loadCSV = async () => {
+      try {
+        const res = await request(url, {
+          method: 'GET',
+          responseType: 'blob',
+          onError: () => {
+            message.error('file load failed');
+            setIsLoading(false);
+          },
+        });
+
+        // parse CSV file
+        const reader = new FileReader();
+        reader.readAsText(res.data);
+        reader.onload = () => {
+          const parsedData = parseCSV(reader.result as string);
+          console.log('file loaded successfully', reader.result);
+          setData(parsedData);
+        };
+      } catch (error) {
+        message.error('CSV file parse failed');
+        console.error('Error loading CSV file:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadCSV();
+
+    return () => {
+      setData(null);
+    };
+  }, [url]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={classNames(
+        'relative w-full h-full p-4 bg-background-paper border border-border-normal rounded-md',
+        'overflow-auto max-h-[80vh] p-2',
+      )}
+    >
+      {isLoading ? (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <Spin />
+        </div>
+      ) : data ? (
+        <table className="min-w-full divide-y divide-border-normal">
+          <thead className="bg-background-header-bar">
+            <tr>
+              {data.headers.map((header, index) => (
+                <th
+                  key={`header-${index}`}
+                  className="px-6 py-3 text-left text-sm font-medium text-text-primary"
+                >
+                  {header}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="bg-background-paper divide-y divide-border-normal">
+            {data.rows.map((row, rowIndex) => (
+              <tr key={`row-${rowIndex}`}>
+                {row.map((cell, cellIndex) => (
+                  <td
+                    key={`cell-${rowIndex}-${cellIndex}`}
+                    className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary"
+                  >
+                    {cell || '-'}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      ) : null}
+    </div>
+  );
+};
+
+export default CSVFileViewer;
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/doc-preview.tsx
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/doc-preview.tsx
@@ -0,0 +1,70 @@
+import message from '@/components/ui/message';
+import { Spin } from '@/components/ui/spin';
+import request from '@/utils/request';
+import classNames from 'classnames';
+import mammoth from 'mammoth';
+import { useEffect, useState } from 'react';
+
+interface DocPreviewerProps {
+  className?: string;
+  url: string;
+}
+
+export const DocPreviewer: React.FC<DocPreviewerProps> = ({
+  className,
+  url,
+}) => {
+  // const url = useGetDocumentUrl();
+  const [htmlContent, setHtmlContent] = useState<string>('');
+  const [loading, setLoading] = useState(false);
+  const fetchDocument = async () => {
+    setLoading(true);
+    const res = await request(url, {
+      method: 'GET',
+      responseType: 'blob',
+      onError: () => {
+        message.error('Document parsing failed');
+        console.error('Error loading document:', url);
+      },
+    });
+    try {
+      const arrayBuffer = await res.data.arrayBuffer();
+      const result = await mammoth.convertToHtml(
+        { arrayBuffer },
+        { includeDefaultStyleMap: true },
+      );
+
+      const styledContent = result.value
+        .replace(/<p>/g, '<p class="mb-2">')
+        .replace(/<h(\d)>/g, '<h$1 class="font-semibold mt-4 mb-2">');
+
+      setHtmlContent(styledContent);
+    } catch (err) {
+      message.error('Document parsing failed');
+      console.error('Error parsing document:', err);
+    }
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    if (url) {
+      fetchDocument();
+    }
+  }, [url]);
+  return (
+    <div
+      className={classNames(
+        'relative w-full h-full p-4 bg-background-paper border border-border-normal rounded-md',
+        className,
+      )}
+    >
+      {loading && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <Spin />
+        </div>
+      )}
+
+      {!loading && <div dangerouslySetInnerHTML={{ __html: htmlContent }} />}
+    </div>
+  );
+};
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/document-header.tsx
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/document-header.tsx
@@ -0,0 +1,21 @@
+import { formatDate } from '@/utils/date';
+import { formatBytes } from '@/utils/file-util';
+
+type Props = {
+  size: number;
+  name: string;
+  create_date: string;
+};
+
+export default ({ size, name, create_date }: Props) => {
+  const sizeName = formatBytes(size);
+  const dateStr = formatDate(create_date);
+  return (
+    <div>
+      <h2 className="text-[24px]">{name}</h2>
+      <div className="text-[#979AAB] pt-[5px]">
+        Size：{sizeName} Uploaded Time：{dateStr}
+      </div>
+    </div>
+  );
+};
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/excel-preview.tsx
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/excel-preview.tsx
@@ -0,0 +1,25 @@
+import { useFetchExcel } from '@/pages/document-viewer/hooks';
+import classNames from 'classnames';
+
+interface ExcelCsvPreviewerProps {
+  className?: string;
+  url: string;
+}
+
+export const ExcelCsvPreviewer: React.FC<ExcelCsvPreviewerProps> = ({
+  className,
+  url,
+}) => {
+  // const url = useGetDocumentUrl();
+  const { containerRef } = useFetchExcel(url);
+
+  return (
+    <div
+      ref={containerRef}
+      className={classNames(
+        'relative w-full h-full p-4 bg-background-paper border border-border-normal rounded-md excel-csv-previewer',
+        className,
+      )}
+    ></div>
+  );
+};
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/hooks.ts
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/hooks.ts
@@ -0,0 +1,55 @@
+import { useGetKnowledgeSearchParams } from '@/hooks/route-hook';
+import { api_host } from '@/utils/api';
+import { useSize } from 'ahooks';
+import { CustomTextRenderer } from 'node_modules/react-pdf/dist/esm/shared/types';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+export const useDocumentResizeObserver = () => {
+  const [containerWidth, setContainerWidth] = useState<number>();
+  const [containerRef, setContainerRef] = useState<HTMLElement | null>(null);
+  const size = useSize(containerRef);
+
+  const onResize = useCallback((width?: number) => {
+    if (width) {
+      setContainerWidth(width);
+    }
+  }, []);
+
+  useEffect(() => {
+    onResize(size?.width);
+  }, [size?.width, onResize]);
+
+  return { containerWidth, setContainerRef };
+};
+
+function highlightPattern(text: string, pattern: string, pageNumber: number) {
+  if (pageNumber === 2) {
+    return `<mark>${text}</mark>`;
+  }
+  if (text.trim() !== '' && pattern.match(text)) {
+    // return pattern.replace(text, (value) => `<mark>${value}</mark>`);
+    return `<mark>${text}</mark>`;
+  }
+  return text.replace(pattern, (value) => `<mark>${value}</mark>`);
+}
+
+export const useHighlightText = (searchText: string = '') => {
+  const textRenderer: CustomTextRenderer = useCallback(
+    (textItem) => {
+      return highlightPattern(textItem.str, searchText, textItem.pageNumber);
+    },
+    [searchText],
+  );
+
+  return textRenderer;
+};
+
+export const useGetDocumentUrl = () => {
+  const { documentId } = useGetKnowledgeSearchParams();
+
+  const url = useMemo(() => {
+    return `${api_host}/document/get/${documentId}`;
+  }, [documentId]);
+
+  return url;
+};
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/image-preview.tsx
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/image-preview.tsx
@@ -0,0 +1,74 @@
+import message from '@/components/ui/message';
+import { Spin } from '@/components/ui/spin';
+import request from '@/utils/request';
+import classNames from 'classnames';
+import { useCallback, useEffect, useState } from 'react';
+
+interface ImagePreviewerProps {
+  className?: string;
+  url: string;
+}
+
+export const ImagePreviewer: React.FC<ImagePreviewerProps> = ({
+  className,
+  url,
+}) => {
+  // const url = useGetDocumentUrl();
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  const fetchImage = useCallback(async () => {
+    setIsLoading(true);
+    const res = await request(url, {
+      method: 'GET',
+      responseType: 'blob',
+      onError: () => {
+        message.error('Failed to load image');
+        setIsLoading(false);
+      },
+    });
+    const objectUrl = URL.createObjectURL(res.data);
+    setImageSrc(objectUrl);
+    setIsLoading(false);
+  }, [url]);
+
+  useEffect(() => {
+    if (url) {
+      fetchImage();
+    }
+  }, [url, fetchImage]);
+
+  useEffect(() => {
+    return () => {
+      if (imageSrc) {
+        URL.revokeObjectURL(imageSrc);
+      }
+    };
+  }, [imageSrc]);
+
+  return (
+    <div
+      className={classNames(
+        'relative w-full h-full p-4 bg-background-paper border border-border-normal rounded-md image-previewer',
+        className,
+      )}
+    >
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <Spin />
+        </div>
+      )}
+
+      {!isLoading && imageSrc && (
+        <div className="max-h-[80vh] overflow-auto p-2">
+          <img
+            src={imageSrc}
+            alt={'image'}
+            className="w-full h-auto max-w-full object-contain"
+            onLoad={() => URL.revokeObjectURL(imageSrc!)}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/index.less
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/index.less
@@ -0,0 +1,13 @@
+.documentContainer {
+  width: 100%;
+  // height: calc(100vh - 284px);
+  height: calc(100vh - 180px);
+  position: relative;
+  :global(.PdfHighlighter) {
+    overflow-x: hidden;
+  }
+  :global(.Highlight--scrolledTo .Highlight__part) {
+    overflow-x: hidden;
+    background-color: rgba(255, 226, 143, 1);
+  }
+}
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/index.tsx
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/index.tsx
@@ -0,0 +1,88 @@
+import { memo } from 'react';
+
+import CSVFileViewer from './csv-preview';
+import { DocPreviewer } from './doc-preview';
+import { ExcelCsvPreviewer } from './excel-preview';
+import { ImagePreviewer } from './image-preview';
+import styles from './index.less';
+import PdfPreviewer, { IProps } from './pdf-preview';
+import { PptPreviewer } from './ppt-preview';
+import { TxtPreviewer } from './txt-preview';
+import { VideoPreviewer } from './video-preview';
+
+type PreviewProps = {
+  fileType: string;
+  className?: string;
+  url: string;
+};
+const Preview = ({
+  fileType,
+  className,
+  highlights,
+  setWidthAndHeight,
+  url,
+}: PreviewProps & Partial<IProps>) => {
+  return (
+    <>
+      {fileType === 'pdf' && highlights && setWidthAndHeight && (
+        <section className={styles.documentPreview}>
+          <PdfPreviewer
+            highlights={highlights}
+            setWidthAndHeight={setWidthAndHeight}
+            url={url}
+          ></PdfPreviewer>
+        </section>
+      )}
+      {['doc', 'docx'].indexOf(fileType) > -1 && (
+        <section>
+          <DocPreviewer className={className} url={url} />
+        </section>
+      )}
+      {['txt', 'md'].indexOf(fileType) > -1 && (
+        <section>
+          <TxtPreviewer className={className} url={url} />
+        </section>
+      )}
+      {['jpg', 'png', 'gif', 'jpeg', 'svg', 'bmp', 'ico', 'tif'].indexOf(
+        fileType,
+      ) > -1 && (
+        <section>
+          <ImagePreviewer className={className} url={url} />
+        </section>
+      )}
+      {[
+        'mp4',
+        'avi',
+        'mov',
+        'mkv',
+        'wmv',
+        'flv',
+        'mpeg',
+        'mpg',
+        'asf',
+        'rm',
+        'rmvb',
+      ].indexOf(fileType) > -1 && (
+        <section>
+          <VideoPreviewer className={className} url={url} />
+        </section>
+      )}
+      {['pptx'].indexOf(fileType) > -1 && (
+        <section>
+          <PptPreviewer className={className} url={url} />
+        </section>
+      )}
+      {['xlsx'].indexOf(fileType) > -1 && (
+        <section>
+          <ExcelCsvPreviewer className={className} url={url} />
+        </section>
+      )}
+      {['csv'].indexOf(fileType) > -1 && (
+        <section>
+          <CSVFileViewer className={className} url={url} />
+        </section>
+      )}
+    </>
+  );
+};
+export default memo(Preview);
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/pdf-preview.tsx
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/pdf-preview.tsx
@@ -0,0 +1,127 @@
+import { memo, useEffect, useRef } from 'react';
+import {
+  AreaHighlight,
+  Highlight,
+  IHighlight,
+  PdfHighlighter,
+  PdfLoader,
+  Popup,
+} from 'react-pdf-highlighter';
+
+import { useCatchDocumentError } from '@/components/pdf-previewer/hooks';
+import { Spin } from '@/components/ui/spin';
+import FileError from '@/pages/document-viewer/file-error';
+import styles from './index.less';
+
+export interface IProps {
+  highlights: IHighlight[];
+  setWidthAndHeight: (width: number, height: number) => void;
+  url: string;
+}
+const HighlightPopup = ({
+  comment,
+}: {
+  comment: { text: string; emoji: string };
+}) =>
+  comment.text ? (
+    <div className="Highlight__popup">
+      {comment.emoji} {comment.text}
+    </div>
+  ) : null;
+
+// TODO: merge with DocumentPreviewer
+const PdfPreview = ({ highlights: state, setWidthAndHeight, url }: IProps) => {
+  // const url = useGetDocumentUrl();
+
+  const ref = useRef<(highlight: IHighlight) => void>(() => {});
+  const error = useCatchDocumentError(url);
+
+  const resetHash = () => {};
+
+  useEffect(() => {
+    if (state.length > 0) {
+      ref?.current(state[0]);
+    }
+  }, [state]);
+
+  return (
+    <div
+      className={`${styles.documentContainer} rounded-[10px] overflow-hidden	`}
+    >
+      <PdfLoader
+        url={url}
+        beforeLoad={
+          <div className="absolute inset-0 flex items-center justify-center">
+            <Spin />
+          </div>
+        }
+        workerSrc="/pdfjs-dist/pdf.worker.min.js"
+        errorMessage={<FileError>{error}</FileError>}
+      >
+        {(pdfDocument) => {
+          pdfDocument.getPage(1).then((page) => {
+            const viewport = page.getViewport({ scale: 1 });
+            const width = viewport.width;
+            const height = viewport.height;
+            setWidthAndHeight(width, height);
+          });
+
+          return (
+            <PdfHighlighter
+              pdfDocument={pdfDocument}
+              enableAreaSelection={(event) => event.altKey}
+              onScrollChange={resetHash}
+              scrollRef={(scrollTo) => {
+                ref.current = scrollTo;
+              }}
+              onSelectionFinished={() => null}
+              highlightTransform={(
+                highlight,
+                index,
+                setTip,
+                hideTip,
+                viewportToScaled,
+                screenshot,
+                isScrolledTo,
+              ) => {
+                const isTextHighlight = !Boolean(
+                  highlight.content && highlight.content.image,
+                );
+
+                const component = isTextHighlight ? (
+                  <Highlight
+                    isScrolledTo={isScrolledTo}
+                    position={highlight.position}
+                    comment={highlight.comment}
+                  />
+                ) : (
+                  <AreaHighlight
+                    isScrolledTo={isScrolledTo}
+                    highlight={highlight}
+                    onChange={() => {}}
+                  />
+                );
+
+                return (
+                  <Popup
+                    popupContent={<HighlightPopup {...highlight} />}
+                    onMouseOver={(popupContent) =>
+                      setTip(highlight, () => popupContent)
+                    }
+                    onMouseOut={hideTip}
+                    key={index}
+                  >
+                    {component}
+                  </Popup>
+                );
+              }}
+              highlights={state}
+            />
+          );
+        }}
+      </PdfLoader>
+    </div>
+  );
+};
+
+export default memo(PdfPreview);
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/ppt-preview.tsx
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/ppt-preview.tsx
@@ -0,0 +1,70 @@
+import message from '@/components/ui/message';
+import request from '@/utils/request';
+import classNames from 'classnames';
+import { init } from 'pptx-preview';
+import { useEffect, useRef } from 'react';
+interface PptPreviewerProps {
+  className?: string;
+  url: string;
+}
+
+export const PptPreviewer: React.FC<PptPreviewerProps> = ({
+  className,
+  url,
+}) => {
+  // const url = useGetDocumentUrl();
+  const wrapper = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const fetchDocument = async () => {
+    const res = await request(url, {
+      method: 'GET',
+      responseType: 'blob',
+      onError: () => {
+        message.error('Document parsing failed');
+        console.error('Error loading document:', url);
+      },
+    });
+    console.log(res);
+    try {
+      const arrayBuffer = await res.data.arrayBuffer();
+
+      if (containerRef.current) {
+        let width = 500;
+        let height = 900;
+        if (containerRef.current) {
+          width = containerRef.current.clientWidth - 50;
+          height = containerRef.current.clientHeight - 50;
+        }
+        let pptxPrviewer = init(containerRef.current, {
+          width: width,
+          height: height,
+        });
+        pptxPrviewer.preview(arrayBuffer);
+      }
+    } catch (err) {
+      message.error('ppt parse failed');
+    }
+  };
+
+  useEffect(() => {
+    if (url) {
+      fetchDocument();
+    }
+  }, [url]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={classNames(
+        'relative w-full h-full p-4 bg-background-paper border border-border-normal rounded-md ppt-previewer',
+        className,
+      )}
+    >
+      <div className="overflow-auto p-2">
+        <div className="flex flex-col gap-4">
+          <div ref={wrapper} />
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/txt-preview.tsx
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/txt-preview.tsx
@@ -0,0 +1,56 @@
+import message from '@/components/ui/message';
+import { Spin } from '@/components/ui/spin';
+import request from '@/utils/request';
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+
+type TxtPreviewerProps = { className?: string; url: string };
+export const TxtPreviewer = ({ className, url }: TxtPreviewerProps) => {
+  // const url = useGetDocumentUrl();
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState<string>('');
+  const fetchTxt = async () => {
+    setLoading(true);
+    const res = await request(url, {
+      method: 'GET',
+      responseType: 'blob',
+      onError: (err: any) => {
+        message.error('Failed to load file');
+        console.error('Error loading file:', err);
+      },
+    });
+    // blob to string
+    const reader = new FileReader();
+    reader.readAsText(res.data);
+    reader.onload = () => {
+      setData(reader.result as string);
+      setLoading(false);
+      console.log('file loaded successfully', reader.result);
+    };
+    console.log('file data:', res);
+  };
+  useEffect(() => {
+    if (url) {
+      fetchTxt();
+    } else {
+      setLoading(false);
+      setData('');
+    }
+  }, [url]);
+  return (
+    <div
+      className={classNames(
+        'relative w-full h-full p-4 bg-background-paper border border-border-normal rounded-md',
+        className,
+      )}
+    >
+      {loading && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <Spin />
+        </div>
+      )}
+
+      {!loading && <pre className="whitespace-pre-wrap p-2 ">{data}</pre>}
+    </div>
+  );
+};
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/video-preview.tsx
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/video-preview.tsx
@@ -0,0 +1,74 @@
+import message from '@/components/ui/message';
+import { Spin } from '@/components/ui/spin';
+import request from '@/utils/request';
+import classNames from 'classnames';
+import { useCallback, useEffect, useState } from 'react';
+
+interface VideoPreviewerProps {
+  className?: string;
+  url: string;
+}
+
+export const VideoPreviewer: React.FC<VideoPreviewerProps> = ({
+  className,
+  url,
+}) => {
+  // const url = useGetDocumentUrl();
+  const [videoSrc, setVideoSrc] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  const fetchVideo = useCallback(async () => {
+    setIsLoading(true);
+    const res = await request(url, {
+      method: 'GET',
+      responseType: 'blob',
+      onError: () => {
+        message.error('Failed to load video');
+        setIsLoading(false);
+      },
+    });
+    const objectUrl = URL.createObjectURL(res.data);
+    setVideoSrc(objectUrl);
+    setIsLoading(false);
+  }, [url]);
+
+  useEffect(() => {
+    if (url) {
+      fetchVideo();
+    }
+  }, [url, fetchVideo]);
+
+  useEffect(() => {
+    return () => {
+      if (videoSrc) {
+        URL.revokeObjectURL(videoSrc);
+      }
+    };
+  }, [videoSrc]);
+
+  return (
+    <div
+      className={classNames(
+        'relative w-full h-full p-4 bg-background-paper border border-border-normal rounded-md video-previewer',
+        className,
+      )}
+    >
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <Spin />
+        </div>
+      )}
+
+      {!isLoading && videoSrc && (
+        <div className="max-h-[80vh] overflow-auto p-2">
+          <video
+            src={videoSrc}
+            controls
+            className="w-full h-auto max-w-full object-contain"
+            onLoadedData={() => URL.revokeObjectURL(videoSrc!)}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/constant.ts
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/constant.ts
@@ -0,0 +1,4 @@
+export enum ChunkTextMode {
+  Full = 'full',
+  Ellipse = 'ellipse',
+}
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/hooks.ts
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/hooks.ts
@@ -0,0 +1,129 @@
+import {
+  useCreateChunk,
+  useDeleteChunk,
+  useSelectChunkList,
+} from '@/hooks/chunk-hooks';
+import { useSetModalState, useShowDeleteConfirm } from '@/hooks/common-hooks';
+import { useGetKnowledgeSearchParams } from '@/hooks/route-hook';
+import { IChunk } from '@/interfaces/database/knowledge';
+import { buildChunkHighlights } from '@/utils/document-util';
+import { useCallback, useMemo, useState } from 'react';
+import { IHighlight } from 'react-pdf-highlighter';
+import { ChunkTextMode } from './constant';
+
+export const useHandleChunkCardClick = () => {
+  const [selectedChunkId, setSelectedChunkId] = useState<string>('');
+
+  const handleChunkCardClick = useCallback((chunkId: string) => {
+    setSelectedChunkId(chunkId);
+  }, []);
+
+  return { handleChunkCardClick, selectedChunkId };
+};
+
+export const useGetSelectedChunk = (selectedChunkId: string) => {
+  const data = useSelectChunkList();
+  return (
+    data?.data?.find((x) => x.chunk_id === selectedChunkId) ?? ({} as IChunk)
+  );
+};
+
+export const useGetChunkHighlights = (selectedChunkId: string) => {
+  const [size, setSize] = useState({ width: 849, height: 1200 });
+  const selectedChunk: IChunk = useGetSelectedChunk(selectedChunkId);
+
+  const highlights: IHighlight[] = useMemo(() => {
+    return buildChunkHighlights(selectedChunk, size);
+  }, [selectedChunk, size]);
+
+  const setWidthAndHeight = useCallback((width: number, height: number) => {
+    setSize((pre) => {
+      if (pre.height !== height || pre.width !== width) {
+        return { height, width };
+      }
+      return pre;
+    });
+  }, []);
+
+  return { highlights, setWidthAndHeight };
+};
+
+// Switch chunk text to be fully displayed or ellipse
+export const useChangeChunkTextMode = () => {
+  const [textMode, setTextMode] = useState<ChunkTextMode>(ChunkTextMode.Full);
+
+  const changeChunkTextMode = useCallback((mode: ChunkTextMode) => {
+    setTextMode(mode);
+  }, []);
+
+  return { textMode, changeChunkTextMode };
+};
+
+export const useDeleteChunkByIds = (): {
+  removeChunk: (chunkIds: string[], documentId: string) => Promise<number>;
+} => {
+  const { deleteChunk } = useDeleteChunk();
+  const showDeleteConfirm = useShowDeleteConfirm();
+
+  const removeChunk = useCallback(
+    (chunkIds: string[], documentId: string) => () => {
+      return deleteChunk({ chunkIds, doc_id: documentId });
+    },
+    [deleteChunk],
+  );
+
+  const onRemoveChunk = useCallback(
+    (chunkIds: string[], documentId: string): Promise<number> => {
+      return showDeleteConfirm({ onOk: removeChunk(chunkIds, documentId) });
+    },
+    [removeChunk, showDeleteConfirm],
+  );
+
+  return {
+    removeChunk: onRemoveChunk,
+  };
+};
+
+export const useUpdateChunk = () => {
+  const [chunkId, setChunkId] = useState<string | undefined>('');
+  const {
+    visible: chunkUpdatingVisible,
+    hideModal: hideChunkUpdatingModal,
+    showModal,
+  } = useSetModalState();
+  const { createChunk, loading } = useCreateChunk();
+  const { documentId } = useGetKnowledgeSearchParams();
+
+  const onChunkUpdatingOk = useCallback(
+    async (params: IChunk) => {
+      const code = await createChunk({
+        ...params,
+        doc_id: documentId,
+        chunk_id: chunkId,
+      });
+
+      if (code === 0) {
+        hideChunkUpdatingModal();
+      }
+    },
+    [createChunk, hideChunkUpdatingModal, chunkId, documentId],
+  );
+
+  const handleShowChunkUpdatingModal = useCallback(
+    async (id?: string) => {
+      setChunkId(id);
+      showModal();
+    },
+    [showModal],
+  );
+
+  return {
+    chunkUpdatingLoading: loading,
+    onChunkUpdatingOk,
+    chunkUpdatingVisible,
+    hideChunkUpdatingModal,
+    showChunkUpdatingModal: handleShowChunkUpdatingModal,
+    chunkId,
+    documentId,
+  };
+};
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.less
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.less
@@ -0,0 +1,96 @@
+.chunkPage {
+  padding: 24px;
+  padding-top: 2px;
+
+  display: flex;
+  // height: calc(100vh - 112px);
+  height: 100vh;
+  flex-direction: column;
+
+  .filter {
+    margin: 10px 0;
+    display: flex;
+    height: 32px;
+    justify-content: space-between;
+  }
+
+  .pagePdfWrapper {
+    width: 60%;
+  }
+
+  .pageWrapper {
+    width: 100%;
+  }
+
+  .pageContent {
+    flex: 1;
+    width: 100%;
+    padding-right: 12px;
+    overflow-y: auto;
+
+    .spin {
+      min-height: 400px;
+    }
+  }
+
+  .documentPreview {
+    // width: 40%;
+    height: calc(100vh - 180px);
+    overflow: auto;
+  }
+
+  .chunkContainer {
+    display: flex;
+    height: calc(100vh - 332px);
+  }
+
+  .chunkOtherContainer {
+    width: 100%;
+  }
+
+  .pageFooter {
+    padding-top: 10px;
+    padding-right: 10px;
+    height: 32px;
+  }
+}
+
+.container {
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .content {
+    display: flex;
+    justify-content: space-between;
+
+    .context {
+      flex: 1;
+      // width: 207px;
+      height: 88px;
+      overflow: hidden;
+    }
+  }
+
+  .footer {
+    height: 20px;
+
+    .text {
+      margin-left: 10px;
+    }
+  }
+}
+
+.card {
+  :global {
+    .ant-card-body {
+      padding: 10px;
+      margin: 0;
+    }
+
+    margin-bottom: 10px;
+  }
+
+  cursor: pointer;
+}
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx
@@ -0,0 +1,313 @@
+import {
+  useFetchNextChunkList,
+  useSwitchChunk,
+} from '@/hooks/use-chunk-request';
+import classNames from 'classnames';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import ChunkCard from './components/chunk-card';
+import CreatingModal from './components/chunk-creating-modal';
+import DocumentPreview from './components/document-preview';
+import {
+  useChangeChunkTextMode,
+  useDeleteChunkByIds,
+  useGetChunkHighlights,
+  useHandleChunkCardClick,
+  useUpdateChunk,
+} from './hooks';
+
+import ChunkResultBar from './components/chunk-result-bar';
+import CheckboxSets from './components/chunk-result-bar/checkbox-sets';
+import DocumentHeader from './components/document-preview/document-header';
+
+import { PageHeader } from '@/components/page-header';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+import message from '@/components/ui/message';
+import {
+  RAGFlowPagination,
+  RAGFlowPaginationType,
+} from '@/components/ui/ragflow-pagination';
+import { Spin } from '@/components/ui/spin';
+import {
+  QueryStringMap,
+  useNavigatePage,
+} from '@/hooks/logic-hooks/navigate-hooks';
+import { useFetchKnowledgeBaseConfiguration } from '@/hooks/use-knowledge-request';
+import { useGetDocumentUrl } from './components/document-preview/hooks';
+import styles from './index.less';
+
+const Chunk = () => {
+  const [selectedChunkIds, setSelectedChunkIds] = useState<string[]>([]);
+  const { removeChunk } = useDeleteChunkByIds();
+  const {
+    data: { documentInfo, data = [], total },
+    pagination,
+    loading,
+    searchString,
+    handleInputChange,
+    available,
+    handleSetAvailable,
+  } = useFetchNextChunkList();
+  const { handleChunkCardClick, selectedChunkId } = useHandleChunkCardClick();
+  const isPdf = documentInfo?.type === 'pdf';
+  const { data: dataset } = useFetchKnowledgeBaseConfiguration();
+
+  const { t } = useTranslation();
+  const { changeChunkTextMode, textMode } = useChangeChunkTextMode();
+  const { switchChunk } = useSwitchChunk();
+  const [chunkList, setChunkList] = useState(data);
+  const {
+    chunkUpdatingLoading,
+    onChunkUpdatingOk,
+    showChunkUpdatingModal,
+    hideChunkUpdatingModal,
+    chunkId,
+    chunkUpdatingVisible,
+    documentId,
+  } = useUpdateChunk();
+  const { navigateToDataFile, getQueryString, navigateToDatasetList } =
+    useNavigatePage();
+  const fileUrl = useGetDocumentUrl();
+  useEffect(() => {
+    setChunkList(data);
+  }, [data]);
+  const onPaginationChange: RAGFlowPaginationType['onChange'] = (
+    page,
+    size,
+  ) => {
+    setSelectedChunkIds([]);
+    pagination.onChange?.(page, size);
+  };
+
+  const selectAllChunk = useCallback(
+    (checked: boolean) => {
+      setSelectedChunkIds(checked ? data.map((x) => x.chunk_id) : []);
+    },
+    [data],
+  );
+
+  const handleSingleCheckboxClick = useCallback(
+    (chunkId: string, checked: boolean) => {
+      setSelectedChunkIds((previousIds) => {
+        const idx = previousIds.findIndex((x) => x === chunkId);
+        const nextIds = [...previousIds];
+        if (checked && idx === -1) {
+          nextIds.push(chunkId);
+        } else if (!checked && idx !== -1) {
+          nextIds.splice(idx, 1);
+        }
+        return nextIds;
+      });
+    },
+    [],
+  );
+
+  const showSelectedChunkWarning = useCallback(() => {
+    message.warning(t('message.pleaseSelectChunk'));
+  }, [t]);
+
+  const handleRemoveChunk = useCallback(async () => {
+    if (selectedChunkIds.length > 0) {
+      const resCode: number = await removeChunk(selectedChunkIds, documentId);
+      if (resCode === 0) {
+        setSelectedChunkIds([]);
+      }
+    } else {
+      showSelectedChunkWarning();
+    }
+  }, [selectedChunkIds, documentId, removeChunk, showSelectedChunkWarning]);
+
+  const handleSwitchChunk = useCallback(
+    async (available?: number, chunkIds?: string[]) => {
+      let ids = chunkIds;
+      if (!chunkIds) {
+        ids = selectedChunkIds;
+        if (selectedChunkIds.length === 0) {
+          showSelectedChunkWarning();
+          return;
+        }
+      }
+
+      const resCode: number = await switchChunk({
+        chunk_ids: ids,
+        available_int: available,
+        doc_id: documentId,
+      });
+      if (ids?.length && resCode === 0) {
+        chunkList.forEach((x: any) => {
+          if (ids.indexOf(x['chunk_id']) > -1) {
+            x['available_int'] = available;
+          }
+        });
+        setChunkList(chunkList);
+      }
+    },
+    [
+      switchChunk,
+      documentId,
+      selectedChunkIds,
+      showSelectedChunkWarning,
+      chunkList,
+    ],
+  );
+
+  const { highlights, setWidthAndHeight } =
+    useGetChunkHighlights(selectedChunkId);
+
+  const fileType = useMemo(() => {
+    switch (documentInfo?.type) {
+      case 'doc':
+        return documentInfo?.name.split('.').pop() || 'doc';
+      case 'visual':
+        return documentInfo?.name.split('.').pop() || 'visual';
+      case 'docx':
+      case 'txt':
+      case 'md':
+      case 'pdf':
+        return documentInfo?.type;
+    }
+    return 'unknown';
+  }, [documentInfo]);
+
+  return (
+    <>
+      <PageHeader>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink onClick={navigateToDatasetList}>
+                {t('knowledgeDetails.dataset')}
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink
+                onClick={navigateToDataFile(
+                  getQueryString(QueryStringMap.id) as string,
+                )}
+              >
+                {dataset.name}
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>{documentInfo?.name}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </PageHeader>
+      <div className={styles.chunkPage}>
+        <div className="flex flex-1 gap-8">
+          <div className="w-2/5">
+            <div className="h-[100px] flex flex-col justify-end pb-[5px]">
+              <DocumentHeader {...documentInfo} />
+            </div>
+            <section className={styles.documentPreview}>
+              <DocumentPreview
+                className={styles.documentPreview}
+                fileType={fileType}
+                highlights={highlights}
+                setWidthAndHeight={setWidthAndHeight}
+                url={fileUrl}
+              ></DocumentPreview>
+            </section>
+          </div>
+          <div
+            className={classNames(
+              { [styles.pagePdfWrapper]: isPdf },
+              'flex flex-col w-3/5',
+            )}
+          >
+            <Spin spinning={loading} className={styles.spin} size="large">
+              <div className="h-[100px] flex flex-col justify-end pb-[5px]">
+                <div>
+                  <h2 className="text-[24px]">{t('chunk.chunkResult')}</h2>
+                  <div className="text-[14px] text-[#979AAB]">
+                    {t('chunk.chunkResultTip')}
+                  </div>
+                </div>
+              </div>
+              <div className=" rounded-[16px] bg-[#FFF]/10 pl-[20px] pb-[20px] pt-[20px] box-border	mb-2">
+                <ChunkResultBar
+                  handleInputChange={handleInputChange}
+                  searchString={searchString}
+                  changeChunkTextMode={changeChunkTextMode}
+                  createChunk={showChunkUpdatingModal}
+                  available={available}
+                  selectAllChunk={selectAllChunk}
+                  handleSetAvailable={handleSetAvailable}
+                />
+                <div className="pt-[5px] pb-[5px]">
+                  <CheckboxSets
+                    selectAllChunk={selectAllChunk}
+                    switchChunk={handleSwitchChunk}
+                    removeChunk={handleRemoveChunk}
+                    checked={selectedChunkIds.length === data.length}
+                    selectedChunkIds={selectedChunkIds}
+                  />
+                </div>
+                <div className={styles.pageContent}>
+                  <div
+                    className={classNames(
+                      styles.chunkContainer,
+                      {
+                        [styles.chunkOtherContainer]: !isPdf,
+                      },
+                      'flex flex-col gap-4',
+                    )}
+                  >
+                    {chunkList.map((item) => (
+                      <ChunkCard
+                        item={item}
+                        key={item.chunk_id}
+                        editChunk={showChunkUpdatingModal}
+                        checked={selectedChunkIds.some(
+                          (x) => x === item.chunk_id,
+                        )}
+                        handleCheckboxClick={handleSingleCheckboxClick}
+                        switchChunk={handleSwitchChunk}
+                        clickChunkCard={handleChunkCardClick}
+                        selected={item.chunk_id === selectedChunkId}
+                        textMode={textMode}
+                      ></ChunkCard>
+                    ))}
+                  </div>
+                </div>
+                <div className={styles.pageFooter}>
+                  <RAGFlowPagination
+                    pageSize={pagination.pageSize}
+                    current={pagination.current}
+                    total={total}
+                    onChange={(page, pageSize) => {
+                      onPaginationChange(page, pageSize);
+                    }}
+                  ></RAGFlowPagination>
+                </div>
+              </div>
+            </Spin>
+          </div>
+        </div>
+      </div>
+      {chunkUpdatingVisible && (
+        <CreatingModal
+          doc_id={documentId}
+          chunkId={chunkId}
+          hideModal={hideChunkUpdatingModal}
+          visible={chunkUpdatingVisible}
+          loading={chunkUpdatingLoading}
+          onOk={onChunkUpdatingOk}
+          parserId={documentInfo.parser_id}
+        />
+      )}
+    </>
+  );
+};
+
+export default Chunk;
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/utils.ts
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/utils.ts
@@ -0,0 +1,24 @@
+export type FormListItem = {
+  frequency: number;
+  tag: string;
+};
+
+export function transformTagFeaturesArrayToObject(
+  list: Array<FormListItem> = [],
+) {
+  return list.reduce<Record<string, number>>((pre, cur) => {
+    pre[cur.tag] = cur.frequency;
+
+    return pre;
+  }, {});
+}
+
+export function transformTagFeaturesObjectToArray(
+  object: Record<string, number> = {},
+) {
+  return Object.keys(object).reduce<Array<FormListItem>>((pre, key) => {
+    pre.push({ frequency: object[key], tag: key });
+
+    return pre;
+  }, []);
+}
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/constant.ts
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/constant.ts
@@ -0,0 +1,21 @@
+import { KnowledgeRouteKey } from '@/constants/knowledge';
+
+export const routeMap = {
+  [KnowledgeRouteKey.Dataset]: 'Dataset',
+  [KnowledgeRouteKey.Testing]: 'Retrieval testing',
+  [KnowledgeRouteKey.Configuration]: 'Configuration',
+};
+
+export enum KnowledgeDatasetRouteKey {
+  Chunk = 'chunk',
+  File = 'file',
+}
+
+export const datasetRouteMap = {
+  [KnowledgeDatasetRouteKey.Chunk]: 'Chunk',
+  [KnowledgeDatasetRouteKey.File]: 'File Upload',
+};
+
+export * from '@/constants/knowledge';
+
+export const TagRenameId = 'tagRename';
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/index.less
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/index.less
@@ -0,0 +1,19 @@
+.container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  .contentWrapper {
+    flex: 1;
+    overflow-x: auto;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.1);
+    padding: 16px 20px 28px 40px;
+    display: flex;
+    flex-direction: column;
+  }
+  .content {
+    background-color: rgba(255, 255, 255, 0.1);
+    margin-top: 16px;
+    flex: 1;
+  }
+}
--- a/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/index.tsx
+++ b/ragflow_web/src/pages/chunk/parsed-result/add-knowledge/index.tsx
@@ -0,0 +1,74 @@
+import { useKnowledgeBaseId } from '@/hooks/knowledge-hooks';
+import {
+  useNavigateWithFromState,
+  useSecondPathName,
+  useThirdPathName,
+} from '@/hooks/route-hook';
+import { Breadcrumb } from 'antd';
+import { ItemType } from 'antd/es/breadcrumb/Breadcrumb';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, Outlet } from 'umi';
+import Siderbar from './components/knowledge-sidebar';
+import { KnowledgeDatasetRouteKey, KnowledgeRouteKey } from './constant';
+import styles from './index.less';
+
+const KnowledgeAdding = () => {
+  const knowledgeBaseId = useKnowledgeBaseId();
+
+  const { t } = useTranslation();
+  const activeKey: KnowledgeRouteKey =
+    (useSecondPathName() as KnowledgeRouteKey) || KnowledgeRouteKey.Dataset;
+
+  const datasetActiveKey: KnowledgeDatasetRouteKey =
+    useThirdPathName() as KnowledgeDatasetRouteKey;
+
+  const gotoList = useNavigateWithFromState();
+
+  const breadcrumbItems: ItemType[] = useMemo(() => {
+    const items: ItemType[] = [
+      {
+        title: (
+          <a onClick={() => gotoList('/knowledge')}>
+            {t('header.knowledgeBase')}
+          </a>
+        ),
+      },
+      {
+        title: datasetActiveKey ? (
+          <Link
+            to={`/knowledge/${KnowledgeRouteKey.Dataset}?id=${knowledgeBaseId}`}
+          >
+            {t(`knowledgeDetails.${activeKey}`)}
+          </Link>
+        ) : (
+          t(`knowledgeDetails.${activeKey}`)
+        ),
+      },
+    ];
+
+    if (datasetActiveKey) {
+      items.push({
+        title: t(`knowledgeDetails.${datasetActiveKey}`),
+      });
+    }
+
+    return items;
+  }, [activeKey, datasetActiveKey, gotoList, knowledgeBaseId, t]);
+
+  return (
+    <>
+      <div className={styles.container}>
+        <Siderbar></Siderbar>
+        <div className={styles.contentWrapper}>
+          <Breadcrumb items={breadcrumbItems} />
+          <div className={styles.content}>
+            <Outlet></Outlet>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default KnowledgeAdding;
--- a/ragflow_web/src/pages/chunk/parsed-result/index.tsx
+++ b/ragflow_web/src/pages/chunk/parsed-result/index.tsx
@@ -0,0 +1,10 @@
+import ParsedResultPanel from '../parsed-result-panel';
+
+export default function ParsedResult() {
+  return (
+    <section className="flex">
+      <div className="flex-1"></div>
+      <ParsedResultPanel></ParsedResultPanel>
+    </section>
+  );
+}
--- a/ragflow_web/src/pages/chunk/result-view/index.tsx
+++ b/ragflow_web/src/pages/chunk/result-view/index.tsx
@@ -0,0 +1,12 @@
+import ChunkedResultPanel from '../chunked-result-panel';
+
+export default function ResultView() {
+  return (
+    <section className="flex">
+      <div className="flex-1">xxx</div>
+      <div className="flex-1">
+        <ChunkedResultPanel></ChunkedResultPanel>
+      </div>
+    </section>
+  );
+}