Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature - Show images in a LightBox when clicked #1473

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

Feature - Show images in a LightBox when clicked #1473

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
38d2693
Update Image.tsx
buzzCraft Oct 23, 2024
4df0870
Added lightbox toggle to config
buzzCraft Oct 23, 2024
dbcd077
added "yet-another-react-lightbox": "^3.21.6" to dependencies
buzzCraft Oct 23, 2024
06962e3
Implementing lightbox
buzzCraft Oct 23, 2024
6beb298
Fixing configs
buzzCraft Oct 23, 2024
3e50101
Fixing image download
buzzCraft Oct 23, 2024
3fce1cb
Merge remote-tracking branch 'upstream/main'
buzzCraft Oct 23, 2024
eb8f30e
Merge branch 'main' into main
buzzCraft Nov 2, 2024
ec3085e
Merge branch 'main' into main
dokterbob Nov 6, 2024
cb86d5a
Reimplementing original imagebox
Nov 6, 2024
52a3817
Reimplementing original imagebox
buzzCraft Nov 6, 2024
ebdb069
Merge branch 'review'
buzzCraft Nov 8, 2024
01afa18
Added trailing new line
buzzCraft Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,4 +59,4 @@ dist-ssr
.aider*
.coverage

backend/README.md
backend/README.md
Copy link
Collaborator

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

Copy link
Author

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

4 changes: 4 additions & 0 deletions backend/chainlit/config.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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()
Expand Down
1 change: 1 addition & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
15 changes: 15 additions & 0 deletions frontend/pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

146 changes: 82 additions & 64 deletions frontend/src/components/atoms/elements/Image.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};
Expand Down
52 changes: 52 additions & 0 deletions frontend/src/components/atoms/elements/LightboxWrapper.tsx
View file
Open in desktop
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);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we have a custom fetch() here rather than just download=true?

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

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had this idea of keeping plugins to a minimum, but with the lazy load you suggested, that might not be needed anymore.
And, to be honest, this is my first try on TS ever, so iv been confused.

Spent way to long trying to make E2E tests, before I had to put everything on hold.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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;
1 change: 1 addition & 0 deletions libs/react-client/src/types/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export interface IChainlitConfig {
unsafe_allow_html?: boolean;
latex?: boolean;
edit_message?: boolean;
image_lightbox?: boolean;
};
debugUrl?: string;
userEnv: string[];
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,4 @@
"micromatch@<4.0.8": ">=4.0.8"
}
}
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing trailing newline. You might want to check your text editor's config!

}