fix: remove Top K in retrieval testing #770 and if the document parsing fails, the error message returned by the backend is displayed (#782)

### What problem does this PR solve?

fix: remove Top K in retrieval testing #770
fix: if the document parsing fails, the error message returned by the
backend is displayed.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/pdf-previewer/hooks.ts

@@ -0,0 +1,18 @@
+import axios from 'axios';
+import { useCallback, useEffect, useState } from 'react';
+
+export const useCatchDocumentError = (url: string) => {
+  const [error, setError] = useState<string>('');
+
+  const fetchDocument = useCallback(async () => {
+    const { data } = await axios.get(url);
+    if (data.retcode !== 0) {
+      setError(data?.retmsg);
+    }
+  }, [url]);
+  useEffect(() => {
+    fetchDocument();
+  }, [fetchDocument]);
+
+  return error;
+};

web/src/components/pdf-previewer/index.tsx

@@ -14,6 +14,8 @@ import {
   Popup,
 } from 'react-pdf-highlighter';
 
+import FileError from '@/pages/document-viewer/file-error';
+import { useCatchDocumentError } from './hooks';
 import styles from './index.less';
 
 interface IProps {
@@ -38,6 +40,8 @@ const DocumentPreviewer = ({ chunk, documentId, visible }: IProps) => {
   const { highlights: state, setWidthAndHeight } = useGetChunkHighlights(chunk);
   const ref = useRef<(highlight: IHighlight) => void>(() => {});
   const [loaded, setLoaded] = useState(false);
+  const url = getDocumentUrl();
+  const error = useCatchDocumentError(url);
 
   const resetHash = () => {};
 
@@ -55,9 +59,10 @@ const DocumentPreviewer = ({ chunk, documentId, visible }: IProps) => {
   return (
     <div className={styles.documentContainer}>
       <PdfLoader
-        url={getDocumentUrl()}
+        url={url}
         beforeLoad={<Skeleton active />}
         workerSrc="/pdfjs-dist/pdf.worker.min.js"
+        errorMessage={<FileError>{error}</FileError>}
       >
         {(pdfDocument) => {
           pdfDocument.getPage(1).then((page) => {

web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/preview.tsx

@@ -11,6 +11,8 @@ import {
 import { useGetChunkHighlights } from '../../hooks';
 import { useGetDocumentUrl } from './hooks';
 
+import { useCatchDocumentError } from '@/components/pdf-previewer/hooks';
+import FileError from '@/pages/document-viewer/file-error';
 import styles from './index.less';
 
 interface IProps {
@@ -30,9 +32,11 @@ const HighlightPopup = ({
 // TODO: merge with DocumentPreviewer
 const Preview = ({ selectedChunkId }: IProps) => {
   const url = useGetDocumentUrl();
+  useCatchDocumentError(url);
   const { highlights: state, setWidthAndHeight } =
     useGetChunkHighlights(selectedChunkId);
   const ref = useRef<(highlight: IHighlight) => void>(() => {});
+  const error = useCatchDocumentError(url);
 
   const resetHash = () => {};
 
@@ -48,6 +52,7 @@ const Preview = ({ selectedChunkId }: IProps) => {
         url={url}
         beforeLoad={<Skeleton active />}
         workerSrc="/pdfjs-dist/pdf.worker.min.js"
+        errorMessage={<FileError>{error}</FileError>}
       >
         {(pdfDocument) => {
           pdfDocument.getPage(1).then((page) => {

web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx

@@ -1,5 +1,5 @@
 import SimilaritySlider from '@/components/similarity-slider';
-import { Button, Card, Divider, Flex, Form, Input, Slider } from 'antd';
+import { Button, Card, Divider, Flex, Form, Input } from 'antd';
 import { FormInstance } from 'antd/lib';
 
 import { useTranslate } from '@/hooks/commonHooks';
@@ -9,7 +9,6 @@ import styles from './index.less';
 type FieldType = {
   similarity_threshold?: number;
   vector_similarity_weight?: number;
-  top_k?: number;
   question: string;
 };
 
@@ -36,22 +35,8 @@ const TestingControl = ({ form, handleTesting }: IProps) => {
       <p>{t('testingDescription')}</p>
       <Divider></Divider>
       <section>
-        <Form
-          name="testing"
-          layout="vertical"
-          form={form}
-          initialValues={{
-            top_k: 1024,
-          }}
-        >
+        <Form name="testing" layout="vertical" form={form}>
           <SimilaritySlider isTooltipShown></SimilaritySlider>
-          <Form.Item<FieldType>
-            label="Top K"
-            name={'top_k'}
-            tooltip={t('topKTip')}
-          >
-            <Slider marks={{ 0: 0, 2048: 2048 }} max={2048} />
-          </Form.Item>
           <Card size="small" title={t('testText')}>
             <Form.Item<FieldType>
               name={'question'}

web/src/pages/document-viewer/file-error/index.tsx

@@ -1,13 +1,17 @@
 import { Alert, Flex } from 'antd';
 
 import { useTranslate } from '@/hooks/commonHooks';
+import React from 'react';
 import styles from './index.less';
 
-const FileError = () => {
+const FileError = ({ children }: React.PropsWithChildren) => {
   const { t } = useTranslate('fileManager');
   return (
     <Flex align="center" justify="center" className={styles.errorWrapper}>
-      <Alert type="error" message={<h1>{t('fileError')}</h1>}></Alert>
+      <Alert
+        type="error"
+        message={<h2>{children || t('fileError')}</h2>}
+      ></Alert>
     </Flex>
   );
 };