From 468e4042c262bb34dedaa26d4465adbde57c5d8c Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Thu, 4 Dec 2025 18:49:55 +0800
Subject: [PATCH] Feat: Display the ID of the code image in the dialog.  
 #10427 (#11746)

### What problem does this PR solve?

Feat: Display the ID of the code image in the dialog.   #10427

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/components/markdown-content/index.tsx | 31 ++++++++++---------
 .../next-markdown-content/index.tsx           | 31 ++++++++++---------
 2 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/web/src/components/markdown-content/index.tsx b/web/src/components/markdown-content/index.tsx
index d0c0bf42f..56e7a954e 100644
--- a/web/src/components/markdown-content/index.tsx
+++ b/web/src/components/markdown-content/index.tsx
@@ -217,20 +217,23 @@ const MarkdownContent = ({
         const docType = chunkItem?.doc_type;
 
         return showImage(docType) ? (
-          <Image
-            id={imageId}
-            className={styles.referenceInnerChunkImage}
-            onClick={
-              documentId
-                ? handleDocumentButtonClick(
-                    documentId,
-                    chunkItem,
-                    fileExtension === 'pdf',
-                    documentUrl,
-                  )
-                : () => {}
-            }
-          ></Image>
+          <section>
+            <Image
+              id={imageId}
+              className={styles.referenceInnerChunkImage}
+              onClick={
+                documentId
+                  ? handleDocumentButtonClick(
+                      documentId,
+                      chunkItem,
+                      fileExtension === 'pdf',
+                      documentUrl,
+                    )
+                  : () => {}
+              }
+            ></Image>
+            <span className="text-accent-primary"> {imageId}</span>
+          </section>
         ) : (
           <HoverCard key={i}>
             <HoverCardTrigger>
diff --git a/web/src/components/next-markdown-content/index.tsx b/web/src/components/next-markdown-content/index.tsx
index 8e114f593..71d4611b4 100644
--- a/web/src/components/next-markdown-content/index.tsx
+++ b/web/src/components/next-markdown-content/index.tsx
@@ -220,20 +220,23 @@ function MarkdownContent({
         const docType = chunkItem?.doc_type;
 
         return showImage(docType) ? (
-          <Image
-            id={imageId}
-            className={styles.referenceInnerChunkImage}
-            onClick={
-              documentId
-                ? handleDocumentButtonClick(
-                    documentId,
-                    chunkItem,
-                    fileExtension === 'pdf',
-                    documentUrl,
-                  )
-                : () => {}
-            }
-          ></Image>
+          <section>
+            <Image
+              id={imageId}
+              className={styles.referenceInnerChunkImage}
+              onClick={
+                documentId
+                  ? handleDocumentButtonClick(
+                      documentId,
+                      chunkItem,
+                      fileExtension === 'pdf',
+                      documentUrl,
+                    )
+                  : () => {}
+              }
+            ></Image>
+            <span className="text-accent-primary">{imageId}</span>
+          </section>
         ) : (
           <HoverCard key={i}>
             <HoverCardTrigger>