Feat: Adjust the display position of recall test item images #7608 (#7609)

### What problem does this PR solve?
Feat: Adjust the display position of recall test item images #7608


### Type of change


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

web/src/interfaces/database/knowledge.ts

@@ -129,6 +129,7 @@ export interface ITestingChunk {
   highlight: string;
   positions: number[][];
   docnm_kwd: string;
+  doc_type_kwd: string;
 }
 
 export interface ITestingDocument {

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

@@ -34,7 +34,8 @@
     font-weight: 500;
   }
   .image {
-    width: 100px;
+    width: 100%;
+    max-height: 30vh;
     object-fit: contain;
   }
 }

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

@@ -1,5 +1,4 @@
 import { ReactComponent as SelectedFilesCollapseIcon } from '@/assets/svg/selected-files-collapse.svg';
-import Image from '@/components/image';
 import { useTranslate } from '@/hooks/common-hooks';
 import { ITestingChunk } from '@/interfaces/database/knowledge';
 import {
@@ -7,9 +6,9 @@ import {
   Collapse,
   Empty,
   Flex,
+  Image,
   Pagination,
   PaginationProps,
-  Popover,
   Space,
 } from 'antd';
 import camelCase from 'lodash/camelCase';
@@ -20,6 +19,7 @@ import {
   useSelectTestingResult,
 } from '@/hooks/knowledge-hooks';
 import { useGetPaginationWithRouter } from '@/hooks/logic-hooks';
+import { api_host } from '@/utils/api';
 import { useCallback, useState } from 'react';
 import styles from './index.less';
 
@@ -49,6 +49,12 @@ interface IProps {
   handleTesting: (documentIds?: string[]) => Promise<any>;
 }
 
+const ShowImageFields = ['image', 'table'];
+
+function showImage(filed: string) {
+  return ShowImageFields.some((x) => x === filed);
+}
+
 const TestingResult = ({ handleTesting }: IProps) => {
   const [selectedDocumentIds, setSelectedDocumentIds] = useState<string[]>([]);
   const { documents, chunks, total } = useSelectTestingResult();
@@ -113,22 +119,16 @@ const TestingResult = ({ handleTesting }: IProps) => {
         {isSuccess && chunks.length > 0 ? (
           chunks?.map((x) => (
             <Card key={x.chunk_id} title={<ChunkTitle item={x}></ChunkTitle>}>
-              <Flex gap={'middle'}>
+              <div className="flex justify-center">
-                {x.img_id && (
+                {showImage(x.doc_type_kwd) && (
-                  <Popover
-                    placement="left"
-                    content={
                   <Image
-                        id={x.img_id}
+                    id={x.image_id}
-                        className={styles.imagePreview}
+                    className={'object-contain max-h-[30vh] w-full text-center'}
+                    src={`${api_host}/document/image/${x.image_id}`}
                   ></Image>
-                    }
-                  >
-                    <Image id={x.img_id} className={styles.image}></Image>
-                  </Popover>
                 )}
-                <div>{x.content_with_weight}</div>
+              </div>
-              </Flex>
+              <div className="pt-4">{x.content_with_weight}</div>
             </Card>
           ))
         ) : isSuccess && chunks.length === 0 ? (