Feat: Preview the image at the bottom of the message #12076 (#12225)

### What problem does this PR solve?

Feat: Preview the image at the bottom of the message #12076

### Type of change


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

web/src/components/next-message-item/reference-image-list.tsx

@@ -7,8 +7,11 @@ import {
   CarouselPrevious,
 } from '@/components/ui/carousel';
 import { IReferenceChunk } from '@/interfaces/database/chat';
+import { api_host } from '@/utils/api';
 import { isPlainObject } from 'lodash';
+import { RotateCw, ZoomIn, ZoomOut } from 'lucide-react';
 import { useMemo } from 'react';
+import { PhotoProvider, PhotoView } from 'react-photo-view';
 import { extractNumbersFromMessageContent } from './utils';
 
 type IProps = {
@@ -36,35 +39,60 @@ function ImageCarousel({ images }: { images: ImageItem[] }) {
   const buttonVisibilityClass = getButtonVisibilityClass(images.length);
 
   return (
-    <Carousel
-      className="w-full"
-      opts={{
-        align: 'start',
+    <PhotoProvider
+      // className="[&_.PhotoView-Slider__toolbarIcon]:hidden"
+      toolbarRender={({ rotate, onRotate, scale, onScale }) => {
+        return (
+          <>
+            <RotateCw
+              className="mr-4 cursor-pointer text-text-disabled hover:text-text-primary"
+              onClick={() => onRotate(rotate + 90)}
+            />
+            <ZoomIn
+              className="mr-4 cursor-pointer text-text-disabled hover:text-text-primary"
+              onClick={() => onScale(scale + 1)}
+            />
+            <ZoomOut
+              className="cursor-pointer text-text-disabled hover:text-text-primary"
+              onClick={() => onScale(scale - 1)}
+            />
+            {/* <X className="cursor-pointer text-text-disabled hover:text-text-primary" /> */}
+          </>
+        );
       }}
     >
-      <CarouselContent>
-        {images.map(({ id, index }) => (
-          <CarouselItem
-            key={index}
-            className="
-            basis-full
-            @sm:basis-1/2
-            @md:basis-1/3
-            @lg:basis-1/4
-            @2xl:basis-1/6
-            "
-          >
-            <Image
-              id={id}
-              className="h-40 w-full"
-              label={`Fig. ${(index + 1).toString()}`}
-            />
-          </CarouselItem>
-        ))}
-      </CarouselContent>
-      <CarouselPrevious className={buttonVisibilityClass} />
-      <CarouselNext className={buttonVisibilityClass} />
-    </Carousel>
+      <Carousel
+        className="w-full"
+        opts={{
+          align: 'start',
+        }}
+      >
+        <CarouselContent>
+          {images.map(({ id, index }) => (
+            <CarouselItem
+              key={index}
+              className="
+              basis-full
+              @sm:basis-1/2
+              @md:basis-1/3
+              @lg:basis-1/4
+              @2xl:basis-1/6
+              "
+            >
+              <PhotoView src={`${api_host}/document/image/${id}`}>
+                <Image
+                  id={id}
+                  className="h-40 w-full"
+                  label={`Fig. ${(index + 1).toString()}`}
+                />
+              </PhotoView>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious className={buttonVisibilityClass} />
+        <CarouselNext className={buttonVisibilityClass} />
+      </Carousel>
+    </PhotoProvider>
   );
 }