feat: add corresponding icons to files (#164)

web/src/components/new-document-link.tsx

@@ -3,12 +3,18 @@ import React from 'react';
 
 interface IProps extends React.PropsWithChildren {
   documentId: string;
+  preventDefault?: boolean;
 }
 
-const NewDocumentLink = ({ children, documentId }: IProps) => {
+const NewDocumentLink = ({
+  children,
+  documentId,
+  preventDefault = false,
+}: IProps) => {
   return (
     <a
       target="_blank"
+      onClick={!preventDefault ? undefined : (e) => e.preventDefault()}
       href={`${api_host}/document/get/${documentId}`}
       rel="noreferrer"
     >

web/src/hooks/knowledgeHook.ts

@@ -206,3 +206,26 @@ export const useSelectKnowledgeDetails = () => {
   return knowledgeDetails;
 };
 //#endregion
+
+//#region Retrieval testing
+
+export const useTestChunkRetrieval = () => {
+  const dispatch = useDispatch();
+  const knowledgeBaseId = useKnowledgeBaseId();
+
+  const testChunk = useCallback(
+    (values: any) => {
+      dispatch({
+        type: 'testingModel/testDocumentChunk',
+        payload: {
+          ...values,
+          kb_id: knowledgeBaseId,
+        },
+      });
+    },
+    [dispatch, knowledgeBaseId],
+  );
+
+  return testChunk;
+};
+//#endregion

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;
+    object-fit: contain;
   }
-  .imagePreview {
-    display: block;
-    width: 260px;
-  }
+}
+.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>
       ),

web/src/pages/chat/chat-container/index.less

@@ -64,3 +64,6 @@
   max-height: 45vh;
   overflow-y: auto;
 }
+.documentLink {
+  padding: 0;
+}

web/src/pages/chat/chat-container/index.tsx

@@ -36,6 +36,8 @@ import {
   useSendMessage,
 } from '../hooks';
 
+import SvgIcon from '@/components/svg-icon';
+import { getExtension, isPdf } from '@/utils/documentUtils';
 import styles from './index.less';
 
 const reg = /(#{2}\d+\${2})/g;
@@ -74,7 +76,10 @@ const MessageItem = ({
   const isAssistant = item.role === MessageType.Assistant;
 
   const handleDocumentButtonClick = useCallback(
-    (documentId: string, chunk: IChunk) => () => {
+    (documentId: string, chunk: IChunk, isPdf: boolean) => () => {
+      if (!isPdf) {
+        return;
+      }
       clickDocumentButton(documentId, chunk);
     },
     [clickDocumentButton],
@@ -88,26 +93,31 @@ const MessageItem = ({
         (x) => x?.doc_id === chunkItem?.doc_id,
       );
       const documentId = document?.doc_id;
+      const fileThumbnail = documentId ? fileThumbnails[documentId] : '';
+      const fileExtension = documentId ? getExtension(document?.doc_name) : '';
+      const imageId = chunkItem?.img_id;
       return (
         <Flex
           key={chunkItem?.chunk_id}
           gap={10}
           className={styles.referencePopoverWrapper}
         >
-          <Popover
-            placement="left"
-            content={
+          {imageId && (
+            <Popover
+              placement="left"
+              content={
+                <Image
+                  id={imageId}
+                  className={styles.referenceImagePreview}
+                ></Image>
+              }
+            >
               <Image
-                id={chunkItem?.img_id}
-                className={styles.referenceImagePreview}
+                id={imageId}
+                className={styles.referenceChunkImage}
               ></Image>
-            }
-          >
-            <Image
-              id={chunkItem?.img_id}
-              className={styles.referenceChunkImage}
-            ></Image>
-          </Popover>
+            </Popover>
+          )}
           <Space direction={'vertical'}>
             <div
               dangerouslySetInnerHTML={{
@@ -116,11 +126,23 @@ const MessageItem = ({
               className={styles.chunkContentText}
             ></div>
             {documentId && (
-              <Flex gap={'middle'}>
-                <img src={fileThumbnails[documentId]} alt="" />
+              <Flex gap={'small'}>
+                {fileThumbnail ? (
+                  <img src={fileThumbnail} alt="" />
+                ) : (
+                  <SvgIcon
+                    name={`file-icon/${fileExtension}`}
+                    width={24}
+                  ></SvgIcon>
+                )}
                 <Button
                   type="link"
-                  onClick={handleDocumentButtonClick(documentId, chunkItem)}
+                  className={styles.documentLink}
+                  onClick={handleDocumentButtonClick(
+                    documentId,
+                    chunkItem,
+                    fileExtension === 'pdf',
+                  )}
                 >
                   {document?.doc_name}
                 </Button>
@@ -224,17 +246,31 @@ const MessageItem = ({
               <List
                 bordered
                 dataSource={referenceDocumentList}
-                renderItem={(item) => (
-                  <List.Item>
-                    {/* <SvgIcon name={getFileIcon(item.doc_name)}></SvgIcon> */}
-                    <Flex gap={'middle'}>
-                      <img src={fileThumbnails[item.doc_id]}></img>
-                      <NewDocumentLink documentId={item.doc_id}>
-                        {item.doc_name}
-                      </NewDocumentLink>
-                    </Flex>
-                  </List.Item>
-                )}
+                renderItem={(item) => {
+                  const fileThumbnail = fileThumbnails[item.doc_id];
+                  const fileExtension = getExtension(item.doc_name);
+                  return (
+                    <List.Item>
+                      <Flex gap={'small'} align="center">
+                        {fileThumbnail ? (
+                          <img src={fileThumbnail}></img>
+                        ) : (
+                          <SvgIcon
+                            name={`file-icon/${fileExtension}`}
+                            width={24}
+                          ></SvgIcon>
+                        )}
+
+                        <NewDocumentLink
+                          documentId={item.doc_id}
+                          preventDefault={!isPdf(item.doc_name)}
+                        >
+                          {item.doc_name}
+                        </NewDocumentLink>
+                      </Flex>
+                    </List.Item>
+                  );
+                }}
               />
             )}
           </Flex>

web/src/utils/documentUtils.ts

@@ -38,3 +38,7 @@ export const isFileUploadDone = (file: UploadFile) => file.status === 'done';
 
 export const getExtension = (name: string) =>
   name?.slice(name.lastIndexOf('.') + 1).toLowerCase() ?? '';
+
+export const isPdf = (name: string) => {
+  return getExtension(name) === 'pdf';
+};