From d73a08b9eb5263670b85e2fb07eb4ef9747b3774 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Fri, 16 May 2025 18:56:25 +0800
Subject: [PATCH] Fix: Fixed the issue where message references could not be
 displayed (#7691)

### What problem does this PR solve?

Fix: Fixed the issue where message references could not be displayed

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 web/src/pages/chat/markdown-content/index.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/web/src/pages/chat/markdown-content/index.tsx b/web/src/pages/chat/markdown-content/index.tsx
index a62de227f..26671b70b 100644
--- a/web/src/pages/chat/markdown-content/index.tsx
+++ b/web/src/pages/chat/markdown-content/index.tsx
@@ -112,11 +112,6 @@ 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 showImage(docType) ? (
-        <Image id={imageId} className={styles.referenceChunkImage}></Image>
-      ) : null;
 
       return (
         <div key={chunkItem?.id} className="flex gap-2">
@@ -181,9 +176,15 @@ const MarkdownContent = ({
   const renderReference = useCallback(
     (text: string) => {
       let replacedText = reactStringReplace(text, reg, (match, i) => {
+        const chunks = reference?.chunks ?? [];
         const chunkIndex = getChunkIndex(match);
-        return getPopoverContent(chunkIndex);
-        return (
+        const chunkItem = chunks[chunkIndex];
+        const imageId = chunkItem?.image_id;
+        const docType = chunkItem?.doc_type;
+
+        return showImage(docType) ? (
+          <Image id={imageId} className={styles.referenceChunkImage}></Image>
+        ) : (
           <Popover content={getPopoverContent(chunkIndex)} key={i}>
             <InfoCircleOutlined className={styles.referenceIcon} />
           </Popover>
@@ -196,7 +197,7 @@ const MarkdownContent = ({
 
       return replacedText;
     },
-    [getPopoverContent],
+    [getPopoverContent, reference?.chunks],
   );
 
   return (