Improve UX when loading images (#1402)

When adding images in the conversation, if the image is big and is not that clear, clicking in the image will attempt to download the image. This PR attempts to improve the UX a bit by just opening the image in a new window (aka popup) to see the image larger. It has a download option on this new popup as well to preserve the original download behaviour, but now the UX is a bit better
Chainlit · Oct 10, 2024 · 15c1691 · 15c1691
1 parent 5918b08
commit 15c1691
Showing 1 changed file with 52 additions and 8 deletions.
diff --git a/frontend/src/components/atoms/elements/Image.tsx b/frontend/src/components/atoms/elements/Image.tsx
@@ -11,14 +11,58 @@ interface Props {
 }
 
 const handleImageClick = (name: string, src: string) => {
-  const link = document.createElement('a');
-  link.href = src;
-  link.target = '_blank';
-  link.download = name;
-  link.style.display = 'none';
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
+  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) => {