Feature - Show images in a LightBox when clicked #1473
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -59,4 +59,4 @@ dist-ssr | |
| .aider* | ||
| .coverage | ||
|
|
||
| backend/README.md | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,103 +1,122 @@ | ||
| import { Suspense, lazy, useState } from 'react'; | ||
|
|
||
| import Skeleton from '@mui/material/Skeleton'; | ||
|
|
||
| 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 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={handleImageClick} | ||
| style={{ | ||
| objectFit: 'cover', | ||
| maxWidth: '100%', | ||
| margin: 'auto', | ||
| height: 'auto', | ||
| display: 'block', | ||
| 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> | ||
| ); | ||
| }; | ||
|
|
||
| export { ImageElement }; | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
|
There was a problem hiding this comment. Why do we have a custom Download URL's do not require auth tokens, nor will it in the future (we're using cookie auth instead #1521). Ref: https://yet-another-react-lightbox.com/plugins/download There was a problem hiding this comment. I had this idea of keeping plugins to a minimum, but with the lazy load you suggested, that might not be needed anymore. Spent way to long trying to make E2E tests, before I had to put everything on hold. There was a problem hiding this comment. Pretty good for a first try. :) I know, building these tests, especially in the beginning, is quite tedious. But once you get the hang of it, additional tests (per project), go faster. Really appreciate your work on this, thanks! Now on this issue, you're already using the download plugin. ;) Just putting the URL there might work. Let me know if you're gonna add that to the PR. With that, I'm happy to merge. There was a problem hiding this comment. Ill look into it after work tomorrow and report back. Thanks for the guidance and for all the amazing work you and your team does <3 |
||
| } catch (error) { | ||
| console.error('Failed to download image:', error); | ||
| } | ||
| } | ||
| }} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default LightboxWrapper; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Trailing newline issue. https://thoughtbot.com/blog/no-newline-at-end-of-file
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry for dropping the ball on this a bit, but sometimes too much is happening to do community work :(
All the work has been done on my old private laptop, so yeah, my editor was just set up quick and dirty.. Sorry about that.
Im more than happy to hand this over to someone with more time, as im quite busy two more weeks