From 5c9025918af2d7162547a19d3e1f359423971eeb Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Tue, 13 May 2025 14:09:51 +0800
Subject: [PATCH] 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      |  1 +
 .../testing-result/index.less                 |  3 +-
 .../testing-result/index.tsx                  | 34 +++++++++----------
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/web/src/interfaces/database/knowledge.ts b/web/src/interfaces/database/knowledge.ts
index 986798f09..4b357ee88 100644
--- a/web/src/interfaces/database/knowledge.ts
+++ b/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 {
diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.less b/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.less
index 061ec9027..44a886798 100644
--- a/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.less
+++ b/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;
   }
 }
diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx b/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx
index f016eb5c8..17529adc8 100644
--- a/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx
+++ b/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'}>
-                {x.img_id && (
-                  <Popover
-                    placement="left"
-                    content={
-                      <Image
-                        id={x.img_id}
-                        className={styles.imagePreview}
-                      ></Image>
-                    }
-                  >
-                    <Image id={x.img_id} className={styles.image}></Image>
-                  </Popover>
+              <div className="flex justify-center">
+                {showImage(x.doc_type_kwd) && (
+                  <Image
+                    id={x.image_id}
+                    className={'object-contain max-h-[30vh] w-full text-center'}
+                    src={`${api_host}/document/image/${x.image_id}`}
+                  ></Image>
                 )}
-                <div>{x.content_with_weight}</div>
-              </Flex>
+              </div>
+              <div className="pt-4">{x.content_with_weight}</div>
             </Card>
           ))
         ) : isSuccess && chunks.length === 0 ? (