Chainlit · buzzCraft · Oct 23, 2024 · Oct 23, 2024 · Oct 23, 2024 · Oct 23, 2024
diff --git a/.gitignore b/.gitignore
@@ -59,4 +59,4 @@ dist-ssr
 .aider*
 .coverage
 
-backend/README.md
+backend/README.md
diff --git a/backend/chainlit/config.py b/backend/chainlit/config.py
@@ -87,6 +87,9 @@
 # Allow users to edit their own messages
 edit_message = true
 
+# Enable lightbox for images - making it possible to view images in full screen
+image_lightbox = true
+
 # Authorize users to spontaneously upload files with messages
 [features.spontaneous_file_upload]
     enabled = true
@@ -241,6 +244,7 @@ class FeaturesSettings(DataClassJsonMixin):
     unsafe_allow_html: bool = False
     auto_tag_thread: bool = True
     edit_message: bool = True
+    image_lightbox: bool = True
 
 
 @dataclass()

diff --git a/frontend/package.json b/frontend/package.json
@@ -50,6 +50,7 @@
     "unist-util-visit": "^5.0.0",
     "usehooks-ts": "^2.9.1",
     "uuid": "^9.0.0",
+    "yet-another-react-lightbox": "^3.21.6",
     "yup": "^1.2.0"
   },
   "devDependencies": {

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/components/atoms/elements/Image.tsx b/frontend/src/components/atoms/elements/Image.tsx
@@ -1,101 +1,119 @@
-import { useState } from 'react';
+import { Suspense, lazy, useState } from 'react';
 
 import Skeleton from '@mui/material/Skeleton';
 
-import { type IImageElement } from 'client-types/';
+import { type IImageElement, useConfig } from '@chainlit/react-client';
 
 import { FrameElement } from './Frame';
 
+// Lazy load the Lightbox component and its dependencies
+const LightboxWrapper = lazy(() => import('./LightboxWrapper'));
+
 interface Props {
   element: IImageElement;
 }
 
-const handleImageClick = (name: string, src: string) => {
-  const width = window.innerWidth / 2;
-  const height = window.innerHeight / 2;
-  const left = window.innerWidth / 4;
-  const top = window.innerHeight / 4;
-
-  const newWindow = window.open(
-    '',
-    '_blank',
-    `width=${width},height=${height},left=${left},top=${top}`
-  );
-  if (newWindow) {
-    newWindow.document.write(`
-      <html>
-        <head>
-          <title>${name}</title>
-          <link rel="icon" href="/favicon">
-          <style>
-            body {
-              margin: 0;
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-              align-items: center;
-              height: 100vh;
-              background-color: rgba(0, 0, 0, 0.8);
-            }
-            img {
-              max-width: 100%;
-              max-height: calc(100% - 50px);
-            }
-            a {
-              margin: 10px 0;
-              color: white;
-              text-decoration: none;
-              font-size: 15px;
-              background-color: rgba(255, 255, 255, 0.2);
-              padding: 8px 12px;
-              border-radius: 5px;
-            }
-            a:hover {
-              background-color: rgba(255, 255, 255, 0.4);
-            }
-          </style>
-        </head>
-        <body>
-          <img src="${src}" alt="${name}" />
-          <a href="${src}" download="${name}">Download</a>
-        </body>
-      </html>
-    `);
-    newWindow.document.close();
-  }
-};
-
 const ImageElement = ({ element }: Props) => {
   const [loading, setLoading] = useState(true);
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const config = useConfig();
 
   if (!element.url) {
     return null;
   }
 
+  const enableLightbox =
+    config.config?.features.image_lightbox && element.display === 'inline';
+
+  const handleImageClick = () => {
+    if (enableLightbox) {
+      setLightboxOpen(true);
+    } else {
+      // Fall back to popup window behavior
+      const width = window.innerWidth / 2;
+      const height = window.innerHeight / 2;
+      const left = window.innerWidth / 4;
+      const top = window.innerHeight / 4;
+
+      const newWindow = window.open(
+        '',
+        '_blank',
+        `width=${width},height=${height},left=${left},top=${top}`
+      );
+      if (newWindow) {
+        newWindow.document.write(`
+          <html>
+            <head>
+              <title>${element.name}</title>
+              <link rel="icon" href="/favicon">
+              <style>
+                body {
+                  margin: 0;
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: center;
+                  align-items: center;
+                  height: 100vh;
+                  background-color: rgba(0, 0, 0, 0.8);
+                }
+                img {
+                  max-width: 100%;
+                  max-height: calc(100% - 50px);
+                }
+                a {
+                  margin: 10px 0;
+                  color: white;
+                  text-decoration: none;
+                  font-size: 15px;
+                  background-color: rgba(255, 255, 255, 0.2);
+                  padding: 8px 12px;
+                  border-radius: 5px;
+                }
+                a:hover {
+                  background-color: rgba(255, 255, 255, 0.4);
+                }
+              </style>
+            </head>
+            <body>
+              <img src="${element.url}" alt="${element.name}" />
+              <a href="${element.url}" download="${element.name}">Download</a>
+            </body>
+          </html>
+        `);
+        newWindow.document.close();
+      }
+    }
+  };
+
   return (
     <FrameElement>
       {loading && <Skeleton variant="rectangular" width="100%" height={200} />}
       <img
         className={`${element.display}-image`}
         src={element.url}
         onLoad={() => setLoading(false)}
-        onClick={() => {
-          if (element.display === 'inline') {
-            const name = `${element.name}.png`;
-            handleImageClick(name, element.url!);
-          }
-        }}
+        onClick={handleImageClick}
         style={{
           objectFit: 'cover',
           maxWidth: '100%',
           margin: 'auto',
           height: 'auto',
           display: 'block',
-          cursor: element.display === 'inline' ? 'pointer' : 'default'
+          cursor: enableLightbox ? 'pointer' : 'default'
         }}
         alt={element.name}
         loading="lazy"
       />
+      {enableLightbox && lightboxOpen && (
+        <Suspense fallback={<div>Loading...</div>}>
+          <LightboxWrapper
+            isOpen={lightboxOpen}
+            onClose={() => setLightboxOpen(false)}
+            imageUrl={element.url}
+            imageName={element.name}
+          />
+        </Suspense>
+      )}
     </FrameElement>
   );
 };

diff --git a/frontend/src/components/atoms/elements/LightboxWrapper.tsx b/frontend/src/components/atoms/elements/LightboxWrapper.tsx
@@ -0,0 +1,52 @@
+import Lightbox from 'yet-another-react-lightbox';
+import Download from 'yet-another-react-lightbox/plugins/download';
+import Zoom from 'yet-another-react-lightbox/plugins/zoom';
+
+import 'yet-another-react-lightbox/styles.css';
+
+interface LightboxWrapperProps {
+  isOpen: boolean;
+  onClose: () => void;
+  imageUrl: string;
+  imageName: string;
+}
+
+const LightboxWrapper = ({
+  isOpen,
+  onClose,
+  imageUrl,
+  imageName
+}: LightboxWrapperProps) => {
+  return (
+    <Lightbox
+      open={isOpen}
+      close={onClose}
+      slides={[{ src: imageUrl }]}
+      carousel={{ finite: true }}
+      render={{ buttonPrev: () => null, buttonNext: () => null }}
+      plugins={[Zoom, Download]}
+      zoom={{
+        maxZoomPixelRatio: 5,
+        zoomInMultiplier: 2
+      }}
+      download={{
+        download: async ({ slide }) => {
+          try {
+            const response = await fetch(slide.src, { mode: 'cors' });
+            const blob = await response.blob();
+            const url = window.URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = imageName || 'image';
+            link.click();
+            window.URL.revokeObjectURL(url);
+          } catch (error) {
+            console.error('Failed to download image:', error);
+          }
+        }
+      }}
+    />
+  );
+};
+
+export default LightboxWrapper;
diff --git a/libs/react-client/src/types/config.ts b/libs/react-client/src/types/config.ts
@@ -49,6 +49,7 @@ export interface IChainlitConfig {
     unsafe_allow_html?: boolean;
     latex?: boolean;
     edit_message?: boolean;
+    image_lightbox?: boolean;
   };
   debugUrl?: string;
   userEnv: string[];

diff --git a/package.json b/package.json
@@ -34,4 +34,4 @@
       "micromatch@<4.0.8": ">=4.0.8"
     }
   }
-}
+}