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 9 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: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,3 +60,5 @@ dist-ssr
.coverage

backend/README.md

myenv
Copy link
Collaborator

Choose a reason for hiding this comment

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

This is specific to your dev environment and should not be in this PR!

Protip: update gitignore in your system's git config/home directory!

Copy link
Author

Choose a reason for hiding this comment

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

😅 Agree, had to swap to my private hardware, and forgot to check that the global git config was set up.

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.

112 changes: 48 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,85 @@
import { useState } from 'react';

import Skeleton from '@mui/material/Skeleton';
import Lightbox from 'yet-another-react-lightbox';
import 'yet-another-react-lightbox/styles.css';
import Zoom from 'yet-another-react-lightbox/plugins/zoom';
import Download from 'yet-another-react-lightbox/plugins/download';
Copy link
Collaborator

Choose a reason for hiding this comment

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

That's a lot of dependencies to import, increasing binary size even if the feature is not turned on. How much larger is the output bundle -- and could we somehow make the lightbox optional in the frontend?

Perhaps we can set up stuff so it's a separate chunk, only importing the chunk in the browser if and when the lightbox feature is enabled?

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.


import { type IImageElement } from 'client-types/';
import { type IImageElement, useConfig } from '@chainlit/react-client';

import { FrameElement } from './Frame';

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);
}
};


Copy link
Collaborator

Choose a reason for hiding this comment

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

I like how this lightbox code is much more minimal. However, if I read this well, with the lightbox disabled the old image click behaviour is entirely removed.

That's not the way forward; developers and users expect what worked before to keep working towards the future and not suddenly disappear. So let's truly make lightbox optional and make sure that we retain the exact legacy behaviour unless the lightbox is enabled.

Copy link
Author

Choose a reason for hiding this comment

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

I agree with this, but since the original feature was not released at the time of making this, i figured that it could be removed all together. Ill fix that.

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 && (
<Lightbox
open={lightboxOpen}
close={() => setLightboxOpen(false)}
slides={[{ src: element.url }]}
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 = element.name || 'image';
link.click();
window.URL.revokeObjectURL(url);
} catch (error) {
console.error('Failed to download image:', error);
}
},
}}
/>
)}
</FrameElement>
);
};
Expand Down
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!

}