Merge branch 'fix/png-jpg-view-source-document' into 'develop'

Fix/png jpg view source document

See merge request genaiic-reusable-assets/engagement-artifacts/genaiic-idp-accelerator!225

Author: rstrahan

CHANGELOG.md

@@ -23,14 +23,11 @@ SPDX-License-Identifier: MIT-0
   - Markdown table headers now explicitly left-aligned using `|:-----|:-----------|` format for consistent appearance
 
 
-
 ### Fixed
-- **OCR Service Image Processing for PNG/JPG Files**
-  - Fixed issue where PNG files were being unnecessarily converted to JPEG format and resized
-  - PNG and JPG files now preserve their original format when stored in S3
-  - Image resolution is preserved by default unless explicitly configured via `resize_config`
-  - DPI settings now only apply to PDF files, not to image files
-  - Resolves issue where PNG files were being converted to lower resolution JPG files
+- Fixed issue where PNG files were being unnecessarily converted to JPEG format and resized to lower resolution with lost quality
+- Fixed issue where PNG and JPG image files were not rendering inline in the Document Details page
+- Fixed issue where PDF files were being downloaded instead of displayed inline
+
 
 
 ## [0.3.7]

VERSION

@@ -1 +1 @@
-0.3.8-wip3
+0.3.8-wip4

src/ui/src/components/common/generate-s3-presigned-url.js

@@ -34,7 +34,7 @@ const parseS3Url = (s3Url) => {
   return { bucket, key };
 };
 
-const generateS3PresignedUrl = async (url, credentials) => {
+const generateS3PresignedUrl = async (url, credentials, options = {}) => {
   // If it's already a special URL (like detailType), return as is
   if (url.includes('detailType')) {
     return url;
@@ -72,7 +72,24 @@ const generateS3PresignedUrl = async (url, credentials) => {
 
     // Parse the URL for the presigner
     const s3ObjectUrl = parseUrl(newUrl);
+
+    // Determine file type from key to set appropriate content disposition
+    const fileExtension = key.split('.').pop().toLowerCase();
+    const isDisplayableFile = ['pdf', 'jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'].includes(fileExtension);
+
+    // Add query parameters for inline display if it's a displayable file type
+    if (isDisplayableFile && options.forceInline !== false) {
+      s3ObjectUrl.query = s3ObjectUrl.query || {};
+      s3ObjectUrl.query['response-content-disposition'] = 'inline';
+
+      // Set appropriate content type for PDFs to ensure proper display
+      if (fileExtension === 'pdf') {
+        s3ObjectUrl.query['response-content-type'] = 'application/pdf';
+      }
+    }
+
     logger.debug('Canonical URL:', newUrl);
+    logger.debug('Query parameters:', s3ObjectUrl.query);
 
     // Create presigner instance
     const presigner = new S3RequestPresigner({

src/ui/src/components/document-viewer/FileViewer.jsx

@@ -239,6 +239,44 @@ const FileViewer = ({ objectKey }) => {
         </Box>
       );
     }
+    // For image files, display them inline using img tag
+    if (fileType === 'image') {
+      return (
+        <Box className="document-container" padding={{ top: 's' }}>
+          <Box textAlign="center">
+            <img
+              src={presignedUrl}
+              alt="Document preview"
+              style={{
+                maxWidth: '100%',
+                maxHeight: '800px',
+                height: 'auto',
+                objectFit: 'contain',
+              }}
+              onError={(e) => {
+                // On error, replace the image with a download link
+                const container = e.target.parentElement;
+                container.innerHTML = `
+                  <div style="padding: 48px;">
+                    <h3>🖼️ Image Document</h3>
+                    <p>Unable to display this image.</p>
+                    <p>
+                      <a href="${presignedUrl}" target="_blank" rel="noopener noreferrer" 
+                         style="display: inline-block; padding: 12px 24px; background-color: #0073bb; 
+                                color: white; text-decoration: none; border-radius: 4px; 
+                                font-weight: bold; margin: 10px;">
+                        📥 Download Image
+                      </a>
+                    </p>
+                  </div>
+                `;
+              }}
+            />
+          </Box>
+        </Box>
+      );
+    }
+
     // For Excel and Docx files, provide download link since browsers can't display them inline
     if (fileType === 'excel' || fileType === 'docx') {
       const fileTypeName = fileType === 'excel' ? 'Excel' : 'Word';