From fe3b2acde041285db31deaa50017c4460b6e2639 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Tue, 13 May 2025 19:30:17 +0800
Subject: [PATCH] Feat: Show images in reply messages #7608 (#7625)

### What problem does this PR solve?

Feat: Show images in reply messages #7608

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/pages/chat/markdown-content/index.less | 4 +++-
 web/src/pages/chat/markdown-content/index.tsx  | 6 ++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/chat/markdown-content/index.less b/web/src/pages/chat/markdown-content/index.less
index 5d6c4765c..eefca7c93 100644
--- a/web/src/pages/chat/markdown-content/index.less
+++ b/web/src/pages/chat/markdown-content/index.less
@@ -17,8 +17,10 @@
 }
 
 .referenceChunkImage {
-  width: 10vw;
+  display: block;
   object-fit: contain;
+  max-width: 100%;
+  max-height: 15vh;
 }
 
 .referenceImagePreview {
diff --git a/web/src/pages/chat/markdown-content/index.tsx b/web/src/pages/chat/markdown-content/index.tsx
index d1c6c6af6..3526f8077 100644
--- a/web/src/pages/chat/markdown-content/index.tsx
+++ b/web/src/pages/chat/markdown-content/index.tsx
@@ -108,6 +108,11 @@ const MarkdownContent = ({
       const fileThumbnail = documentId ? fileThumbnails[documentId] : '';
       const fileExtension = documentId ? getExtension(document?.doc_name) : '';
       const imageId = chunkItem?.image_id;
+
+      return (
+        <Image id={imageId} className={styles.referenceChunkImage}></Image>
+      );
+
       return (
         <div key={chunkItem?.id} className="flex gap-2">
           {imageId && (
@@ -172,6 +177,7 @@ const MarkdownContent = ({
     (text: string) => {
       let replacedText = reactStringReplace(text, reg, (match, i) => {
         const chunkIndex = getChunkIndex(match);
+        return getPopoverContent(chunkIndex);
         return (
           <Popover content={getPopoverContent(chunkIndex)} key={i}>
             <InfoCircleOutlined className={styles.referenceIcon} />