added image view on click and added disclaimer in code

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

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