From 5d5dbb3bcb0c813dd0225d4f3f19e9a24c341044 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Wed, 14 May 2025 15:44:54 +0800
Subject: [PATCH] Feat: Display inline (non-quoted) images in the chat and
 search modules #7623 (#7638)

### What problem does this PR solve?

Feat: Display inline (non-quoted) images in the chat and search modules
#7623

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/interfaces/database/chat.ts                   |  1 +
 .../knowledge-testing/testing-result/index.tsx        |  7 +------
 web/src/pages/chat/markdown-content/index.tsx         | 11 ++++++++---
 web/src/utils/chat.ts                                 |  6 ++++++
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/web/src/interfaces/database/chat.ts b/web/src/interfaces/database/chat.ts
index 7b3d0e335..a22cb2f67 100644
--- a/web/src/interfaces/database/chat.ts
+++ b/web/src/interfaces/database/chat.ts
@@ -86,6 +86,7 @@ export interface IReferenceChunk {
   vector_similarity: number;
   term_similarity: number;
   positions: number[];
+  doc_type?: string;
 }
 
 export interface IReference {
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 17529adc8..d3c100c8f 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
@@ -20,6 +20,7 @@ import {
 } from '@/hooks/knowledge-hooks';
 import { useGetPaginationWithRouter } from '@/hooks/logic-hooks';
 import { api_host } from '@/utils/api';
+import { showImage } from '@/utils/chat';
 import { useCallback, useState } from 'react';
 import styles from './index.less';
 
@@ -49,12 +50,6 @@ 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();
diff --git a/web/src/pages/chat/markdown-content/index.tsx b/web/src/pages/chat/markdown-content/index.tsx
index 3526f8077..b3c1988f9 100644
--- a/web/src/pages/chat/markdown-content/index.tsx
+++ b/web/src/pages/chat/markdown-content/index.tsx
@@ -20,7 +20,11 @@ import { useTranslation } from 'react-i18next';
 
 import 'katex/dist/katex.min.css'; // `rehype-katex` does not import the CSS for you
 
-import { preprocessLaTeX, replaceThinkToSection } from '@/utils/chat';
+import {
+  preprocessLaTeX,
+  replaceThinkToSection,
+  showImage,
+} from '@/utils/chat';
 import { replaceTextByOldReg } from '../utils';
 
 import classNames from 'classnames';
@@ -108,10 +112,11 @@ const MarkdownContent = ({
       const fileThumbnail = documentId ? fileThumbnails[documentId] : '';
       const fileExtension = documentId ? getExtension(document?.doc_name) : '';
       const imageId = chunkItem?.image_id;
+      const docType = chunkItem?.doc_type;
 
-      return (
+      return showImage(docType) ? (
         <Image id={imageId} className={styles.referenceChunkImage}></Image>
-      );
+      ) : null;
 
       return (
         <div key={chunkItem?.id} className="flex gap-2">
diff --git a/web/src/utils/chat.ts b/web/src/utils/chat.ts
index 245a9f976..475c9b2a0 100644
--- a/web/src/utils/chat.ts
+++ b/web/src/utils/chat.ts
@@ -66,3 +66,9 @@ export function setInitialChatVariableEnabledFieldValue(
 ) {
   return field !== ChatVariableEnabledField.MaxTokensEnabled;
 }
+
+const ShowImageFields = ['image', 'table'];
+
+export function showImage(filed?: string) {
+  return ShowImageFields.some((x) => x === filed);
+}