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

@@ -17,8 +17,10 @@
 }
 
 .referenceChunkImage {
-  width: 10vw;
+  display: block;
   object-fit: contain;
+  max-width: 100%;
+  max-height: 15vh;
 }
 
 .referenceImagePreview {

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} />