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

@@ -86,6 +86,7 @@ export interface IReferenceChunk {
   vector_similarity: number;
   term_similarity: number;
   positions: number[];
+  doc_type?: string;
 }
 
 export interface IReference {

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();

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">

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);
+}