Feat: The image displayed in the reply message can also be clicked to display the location of the source document where the slice is located #7623 (#7723)

### What problem does this PR solve?

Feat: The image displayed in the reply message can also be clicked to
display the location of the source document where the slice is located
#7623

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/image/index.tsx

@@ -7,6 +7,7 @@ import styles from './index.less';
 interface IImage {
   id: string;
   className: string;
+  onClick?(): void;
 }
 
 const Image = ({ id, className, ...props }: IImage) => {

web/src/pages/chat/markdown-content/index.less

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

web/src/pages/chat/markdown-content/index.tsx

@@ -101,7 +101,7 @@ const MarkdownContent = ({
     };
   };
 
-  const getPopoverContent = useCallback(
+  const getReferenceInfo = useCallback(
     (chunkIndex: number) => {
       const chunks = reference?.chunks ?? [];
       const chunkItem = chunks[chunkIndex];
@@ -114,6 +114,31 @@ const MarkdownContent = ({
       const fileExtension = documentId ? getExtension(document?.doc_name) : '';
       const imageId = chunkItem?.image_id;
 
+      return {
+        documentUrl,
+        fileThumbnail,
+        fileExtension,
+        imageId,
+        chunkItem,
+        documentId,
+        document,
+      };
+    },
+    [fileThumbnails, reference?.chunks, reference?.doc_aggs],
+  );
+
+  const getPopoverContent = useCallback(
+    (chunkIndex: number) => {
+      const {
+        documentUrl,
+        fileThumbnail,
+        fileExtension,
+        imageId,
+        chunkItem,
+        documentId,
+        document,
+      } = getReferenceInfo(chunkIndex);
+
       return (
         <div key={chunkItem?.id} className="flex gap-2">
           {imageId && (
@@ -171,20 +196,34 @@ const MarkdownContent = ({
         </div>
       );
     },
-    [reference, fileThumbnails, handleDocumentButtonClick],
+    [getReferenceInfo, handleDocumentButtonClick],
   );
 
   const renderReference = useCallback(
     (text: string) => {
       let replacedText = reactStringReplace(text, reg, (match, i) => {
-        const chunks = reference?.chunks ?? [];
         const chunkIndex = getChunkIndex(match);
-        const chunkItem = chunks[chunkIndex];
-        const imageId = chunkItem?.image_id;
+
+        const { documentUrl, fileExtension, imageId, chunkItem, documentId } =
+          getReferenceInfo(chunkIndex);
+
         const docType = chunkItem?.doc_type;
 
         return showImage(docType) ? (
-          <Image id={imageId} className={styles.referenceChunkImage}></Image>
+          <Image
+            id={imageId}
+            className={styles.referenceInnerChunkImage}
+            onClick={
+              documentId
+                ? handleDocumentButtonClick(
+                    documentId,
+                    chunkItem,
+                    fileExtension === 'pdf',
+                    documentUrl,
+                  )
+                : () => {}
+            }
+          ></Image>
         ) : (
           <Popover content={getPopoverContent(chunkIndex)} key={i}>
             <InfoCircleOutlined className={styles.referenceIcon} />
@@ -198,7 +237,7 @@ const MarkdownContent = ({
 
       return replacedText;
     },
-    [getPopoverContent, reference?.chunks],
+    [getPopoverContent, getReferenceInfo, handleDocumentButtonClick],
   );
 
   return (