From b88211c5602b552d06081a91be9e61fa9574d3e0 Mon Sep 17 00:00:00 2001
From: Srujan Gurram <srujangs8@gmail.com>
Date: Sun, 26 Nov 2023 20:31:30 +0530
Subject: [PATCH] added image view on click and added disclaimer in code

---
 src/components/Sidebar/chat/FilePreviewBar.tsx | 10 ++++++++--
 src/lib/getScreenshotImage.ts                  |  4 ++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/Sidebar/chat/FilePreviewBar.tsx b/src/components/Sidebar/chat/FilePreviewBar.tsx
index 72a02c2d..0e2b6b95 100644
--- a/src/components/Sidebar/chat/FilePreviewBar.tsx
+++ b/src/components/Sidebar/chat/FilePreviewBar.tsx
@@ -8,17 +8,23 @@ interface FilePreviewBarProps {
 
 const FilePreviewBar = ({ files, removeFile }: FilePreviewBarProps) => {
   if (files.length === 0) return null
+
   return (
     <div className="cdx-flex cdx-gap-2 cdx-m-2">
       {files.map((file) => (
         <div key={file.id} className="cdx-flex cdx-relative">
-          <div className="cdx-flex-grow">
+          <a
+            href={URL.createObjectURL(file.blob)}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="cdx-block cdx-flex-grow"
+          >
             <img
               src={URL.createObjectURL(file.blob)}
               alt="preview"
               className="cdx-w-14 cdx-h-14 cdx-object-contain cdx-rounded dark:cdx-bg-neutral-800 cdx-bg-neutral-400"
             />
-          </div>
+          </a>
           {removeFile && (
             <button
               onClick={() => removeFile(file.id)}
diff --git a/src/lib/getScreenshotImage.ts b/src/lib/getScreenshotImage.ts
index ab4c6a77..92d5b40c 100644
--- a/src/lib/getScreenshotImage.ts
+++ b/src/lib/getScreenshotImage.ts
@@ -6,6 +6,10 @@ import html2canvas from 'html2canvas'
  * 2. Grab the screen image with canvas
  * 3. Crop the image with the user's selection
  * 4. Return the cropped image as a blob
+ *
+ * TODO: This approach is not ideal as the website visible to user may not be the same as the one
+ * captured by html2canvas. For example, if the user has adblock installed, the website may look
+ * different to the one captured by html2canvas. We should consider another approach to capture
  */
 export const getScreenshotImage = async (): Promise<Blob> => {
   // Create a snipping tool view for the user to select the area of the screen