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/package-lock.json

@@ -90,6 +90,7 @@
         "react-infinite-scroll-component": "^6.1.0",
         "react-markdown": "^9.0.1",
         "react-pdf-highlighter": "^6.1.0",
+        "react-photo-view": "^1.2.7",
         "react-resizable-panels": "^3.0.6",
         "react-string-replace": "^1.1.1",
         "react-syntax-highlighter": "^15.5.0",
@@ -30404,6 +30405,16 @@
         }
       }
     },
+    "node_modules/react-photo-view": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmmirror.com/react-photo-view/-/react-photo-view-1.2.7.tgz",
+      "integrity": "sha512-MfOWVPxuibncRLaycZUNxqYU8D9IA+rbGDDaq6GM8RIoGJal592hEJoRAyRSI7ZxyyJNJTLMUWWL3UIXHJJOpw==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -36191,6 +36202,21 @@
         }
       }
     },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/tinyrainbow": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/tinyrainbow/-/tinyrainbow-2.0.0.tgz",

web/package.json

@@ -103,6 +103,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^9.0.1",
     "react-pdf-highlighter": "^6.1.0",
+    "react-photo-view": "^1.2.7",
     "react-resizable-panels": "^3.0.6",
     "react-string-replace": "^1.1.1",
     "react-syntax-highlighter": "^15.5.0",

web/src/app.tsx

@@ -2,6 +2,7 @@ import { Toaster as Sonner } from '@/components/ui/sonner';
 import { Toaster } from '@/components/ui/toaster';
 import i18n from '@/locales/config';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { configResponsive } from 'ahooks';
 import { App, ConfigProvider, ConfigProviderProps, theme } from 'antd';
 import pt_BR from 'antd/lib/locale/pt_BR';
 import deDE from 'antd/locale/de_DE';
@@ -24,7 +25,7 @@ import { TooltipProvider } from './components/ui/tooltip';
 import { ThemeEnum } from './constants/common';
 import storage from './utils/authorization-util';
 
-import { configResponsive } from 'ahooks';
+import 'react-photo-view/dist/react-photo-view.css';
 
 configResponsive({
   sm: 640,

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
+    <PhotoProvider
-      className="w-full"
+      // className="[&_.PhotoView-Slider__toolbarIcon]:hidden"
-      opts={{
+      toolbarRender={({ rotate, onRotate, scale, onScale }) => {
-        align: 'start',
+        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>
+      <Carousel
-        {images.map(({ id, index }) => (
+        className="w-full"
-          <CarouselItem
+        opts={{
-            key={index}
+          align: 'start',
-            className="
+        }}
-            basis-full
+      >
-            @sm:basis-1/2
+        <CarouselContent>
-            @md:basis-1/3
+          {images.map(({ id, index }) => (
-            @lg:basis-1/4
+            <CarouselItem
-            @2xl:basis-1/6
+              key={index}
-            "
+              className="
-          >
+              basis-full
-            <Image
+              @sm:basis-1/2
-              id={id}
+              @md:basis-1/3
-              className="h-40 w-full"
+              @lg:basis-1/4
-              label={`Fig. ${(index + 1).toString()}`}
+              @2xl:basis-1/6
-            />
+              "
-          </CarouselItem>
+            >
-        ))}
+              <PhotoView src={`${api_host}/document/image/${id}`}>
-      </CarouselContent>
+                <Image
-      <CarouselPrevious className={buttonVisibilityClass} />
+                  id={id}
-      <CarouselNext className={buttonVisibilityClass} />
+                  className="h-40 w-full"
-    </Carousel>
+                  label={`Fig. ${(index + 1).toString()}`}
+                />
+              </PhotoView>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious className={buttonVisibilityClass} />
+        <CarouselNext className={buttonVisibilityClass} />
+      </Carousel>
+    </PhotoProvider>
   );
 }