feat: add corresponding icons to files (#164)

web/src/pages/add-knowledge/components/knowledge-chunk/index.less

@@ -37,6 +37,7 @@
   }
 
   .chunkContainer {
+    display: flex;
     height: calc(100vh - 332px);
   }
 

web/src/pages/add-knowledge/components/knowledge-file/index.less

@@ -22,7 +22,6 @@
 .img {
   height: 24px;
   width: 24px;
-  margin-right: 10px;
   display: inline-block;
   vertical-align: middle;
 }

web/src/pages/add-knowledge/components/knowledge-file/index.tsx

@@ -1,9 +1,12 @@
+import ChunkMethodModal from '@/components/chunk-method-modal';
+import SvgIcon from '@/components/svg-icon';
 import {
   useSelectDocumentList,
   useSetDocumentStatus,
 } from '@/hooks/documentHooks';
 import { useSelectParserList } from '@/hooks/userSettingHook';
 import { IKnowledgeFile } from '@/interfaces/database/knowledge';
+import { getExtension } from '@/utils/documentUtils';
 import {
   FileOutlined,
   FileTextOutlined,
@@ -15,6 +18,7 @@ import {
   Button,
   Divider,
   Dropdown,
+  Flex,
   Input,
   Space,
   Switch,
@@ -38,8 +42,6 @@ import ParsingActionCell from './parsing-action-cell';
 import ParsingStatusCell from './parsing-status-cell';
 import RenameModal from './rename-modal';
 
-import ChunkMethodModal from '@/components/chunk-method-modal';
-import { getExtension } from '@/utils/documentUtils';
 import styles from './index.less';
 
 const KnowledgeFile = () => {
@@ -114,10 +116,19 @@ const KnowledgeFile = () => {
       dataIndex: 'name',
       key: 'name',
       fixed: 'left',
-      render: (text: any, { id, thumbnail }) => (
+      render: (text: any, { id, thumbnail, name }) => (
         <div className={styles.tochunks} onClick={() => toChunk(id)}>
-          <img className={styles.img} src={thumbnail} alt="" />
-          {text}
+          <Flex gap={10} align="center">
+            {thumbnail ? (
+              <img className={styles.img} src={thumbnail} alt="" />
+            ) : (
+              <SvgIcon
+                name={`file-icon/${getExtension(name)}`}
+                width={24}
+              ></SvgIcon>
+            )}
+            {text}
+          </Flex>
         </div>
       ),
     },

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

@@ -1,28 +1,21 @@
+import { useTestChunkRetrieval } from '@/hooks/knowledgeHook';
 import { Flex, Form } from 'antd';
+import { useEffect } from 'react';
+import { useDispatch } from 'umi';
 import TestingControl from './testing-control';
 import TestingResult from './testing-result';
 
-import { useKnowledgeBaseId } from '@/hooks/knowledgeHook';
-import { useEffect } from 'react';
-import { useDispatch } from 'umi';
 import styles from './index.less';
 
 const KnowledgeTesting = () => {
   const [form] = Form.useForm();
+  const testChunk = useTestChunkRetrieval();
 
   const dispatch = useDispatch();
-  const knowledgeBaseId = useKnowledgeBaseId();
 
   const handleTesting = async () => {
     const values = await form.validateFields();
-    console.info(values);
-    dispatch({
-      type: 'testingModel/testDocumentChunk',
-      payload: {
-        ...values,
-        kb_id: knowledgeBaseId,
-      },
-    });
+    testChunk(values);
   };
 
   useEffect(() => {

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

@@ -2,10 +2,9 @@ import SimilaritySlider from '@/components/similarity-slider';
 import { Button, Card, Divider, Flex, Form, Input, Slider, Tag } from 'antd';
 import { FormInstance } from 'antd/lib';
 
+import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
 import styles from './index.less';
 
-const list = [1, 2, 3];
-
 type FieldType = {
   similarity_threshold?: number;
   vector_similarity_weight?: number;
@@ -20,6 +19,9 @@ interface IProps {
 
 const TestingControl = ({ form, handleTesting }: IProps) => {
   const question = Form.useWatch('question', { form, preserve: true });
+  const loading = useOneNamespaceEffectsLoading('testingModel', [
+    'testDocumentChunk',
+  ]);
 
   const buttonDisabled =
     !question || (typeof question === 'string' && question.trim() === '');
@@ -65,6 +67,7 @@ const TestingControl = ({ form, handleTesting }: IProps) => {
                 size="small"
                 onClick={handleTesting}
                 disabled={buttonDisabled}
+                loading={loading}
               >
                 Testing
               </Button>

web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.less

@@ -35,9 +35,11 @@
   }
   .image {
     width: 100px;
-  }
-  .imagePreview {
-    display: block;
-    width: 260px;
+    object-fit: contain;
   }
 }
+.imagePreview {
+  display: block;
+  max-width: 45vw;
+  max-height: 40vh;
+}

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

@@ -104,7 +104,7 @@ const TestingResult = ({ handleTesting }: IProps) => {
             <Flex gap={'middle'}>
               {x.img_id && (
                 <Popover
-                  placement="topRight"
+                  placement="left"
                   content={
                     <Image
                       id={x.img_id}

web/src/pages/add-knowledge/components/knowledge-testing/testing-result/select-files.tsx

@@ -1,6 +1,7 @@
 import { ReactComponent as NavigationPointerIcon } from '@/assets/svg/navigation-pointer.svg';
 import NewDocumentLink from '@/components/new-document-link';
 import { ITestingDocument } from '@/interfaces/database/knowledge';
+import { isPdf } from '@/utils/documentUtils';
 import { Table, TableProps } from 'antd';
 import { useDispatch, useSelector } from 'umi';
 
@@ -33,8 +34,8 @@ const SelectFiles = ({ handleTesting }: IProps) => {
       title: 'View',
       key: 'view',
       width: 50,
-      render: (_, { doc_id }) => (
-        <NewDocumentLink documentId={doc_id}>
+      render: (_, { doc_id, doc_name }) => (
+        <NewDocumentLink documentId={doc_id} preventDefault={!isPdf(doc_name)}>
           <NavigationPointerIcon />
         </NewDocumentLink>
       ),