From 29751df426cb268bf605f50a8af75f1c4f919e82 Mon Sep 17 00:00:00 2001
From: KrishnaShuk <shuklakrishna.kris@gmail.com>
Date: Wed, 12 Feb 2025 18:07:57 +0530
Subject: [PATCH 1/4] fix: Improve GIF URL handling and add debugging logs

---
 .../src/views/AttachmentHandler/Attachment.js | 51 +++++++++++++++-
 .../AttachmentHandler/ImageAttachment.js      | 59 +++++++++++++++++--
 2 files changed, 102 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/Attachment.js b/packages/react/src/views/AttachmentHandler/Attachment.js
index ec752e9bcd..c0a3d6ebd7 100644
--- a/packages/react/src/views/AttachmentHandler/Attachment.js
+++ b/packages/react/src/views/AttachmentHandler/Attachment.js
@@ -34,14 +34,61 @@ const Attachment = ({ attachment, host, type, variantStyles = {}, msg }) => {
       />
     );
   }
-  if (attachment && attachment.image_url) {
+  if (attachment && (attachment.image_url || attachment.title_link)) {
+    console.log('Attachment Data:', {
+      attachment,
+      host,
+      type
+    });
+
+    // Check if it's a GIF by checking the URL or title_link
+    const url = attachment.image_url || attachment.title_link;
+    console.log('Processing URL:', url);
+
+    const isGif = url && (
+      url.toLowerCase().endsWith('.gif') || 
+      (attachment.image_type && attachment.image_type.toLowerCase() === 'image/gif') ||
+      (attachment.description && attachment.description.toLowerCase().includes('gif'))
+    );
+
+    console.log('Is GIF:', isGif);
+
+    // Ensure we have a complete URL
+    const imageUrl = url.startsWith('http') ? url : (host + url);
+    console.log('Final Image URL:', imageUrl);
+
+    // Check if the URL has a file-upload path
+    if (url && url.includes('/file-upload/')) {
+      // For file uploads, always prepend host if not already present
+      const fullUrl = url.startsWith('http') ? url : `${host}/file-upload/${url.split('/file-upload/')[1]}`;
+      console.log('File Upload URL:', fullUrl);
+      
+      return (
+        <ImageAttachment
+          attachment={{
+            ...attachment,
+            image_url: fullUrl
+          }}
+          host={host}
+          author={author}
+          variantStyles={variantStyles}
+          msg={msg}
+          isGif={isGif}
+        />
+      );
+    }
+
     return (
       <ImageAttachment
-        attachment={attachment}
+        attachment={{
+          ...attachment,
+          image_url: imageUrl
+        }}
         host={host}
         author={author}
         variantStyles={variantStyles}
         msg={msg}
+        isGif={isGif}
       />
     );
   }
diff --git a/packages/react/src/views/AttachmentHandler/ImageAttachment.js b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
index 84516ce65a..2e0493dc3d 100644
--- a/packages/react/src/views/AttachmentHandler/ImageAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
@@ -13,9 +13,19 @@ const ImageAttachment = ({
   author,
   variantStyles = {},
   msg,
+  isGif = false,
 }) => {
   const { RCInstance } = useContext(RCContext);
   const [showGallery, setShowGallery] = useState(false);
+  const [imageError, setImageError] = useState(false);
+
+  console.log('ImageAttachment Render:', {
+    attachment,
+    host,
+    isGif,
+    imageUrl: attachment.image_url
+  });
+
   const getUserAvatarUrl = (icon) => {
     const instanceHost = RCInstance.getHost();
     const URL = `${instanceHost}${icon}`;
@@ -94,16 +104,53 @@ const ImageAttachment = ({
           />
         </Box>
         {isExpanded && (
-          <Box onClick={() => setShowGallery(true)}>
+          <Box 
+            onClick={() => !isGif && setShowGallery(true)}
+            css={css`
+              width: ${isGif ? '200px' : '300px'};
+              height: ${isGif ? '200px' : 'auto'};
+              overflow: hidden;
+              border-radius: inherit;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              background-color: ${theme.colors.surface};
+            `}
+          >
             <img
-              src={host + attachment.image_url}
+              src={attachment.image_url} // URL is now fully formed from Attachment component
               style={{
-                maxWidth: '100%',
-                objectFit: 'contain',
-                borderBottomLeftRadius: 'inherit',
-                borderBottomRightRadius: 'inherit',
+                width: isGif ? '200px' : '100%',
+                height: isGif ? '200px' : 'auto',
+                maxHeight: isGif ? '200px' : '200px',
+                objectFit: isGif ? 'cover' : 'scale-down',
+                borderRadius: 'inherit',
+                imageRendering: isGif ? 'auto' : 'inherit',
+              }}
+              onError={(e) => {
+                console.error('Image failed to load:', {
+                  src: e.target.src,
+                  isGif,
+                  error: e.target.error,
+                  originalUrl: attachment.image_url
+                });
+                setImageError(true);
+              }}
+              onClick={(e) => {
+                if (isGif) {
+                  e.stopPropagation();
+                }
               }}
             />
+            {imageError && (
+              <Box css={css`
+                color: ${theme.colors.danger};
+                padding: 8px;
+                font-size: 12px;
+              `}>
+                Failed to load image. URL: {host + attachment.image_url}
+              </Box>
+            )}
           </Box>
         )}
         {attachment.attachments &&

From f537b90250d9b14b4585b5b4bac3d8ec13832bb7 Mon Sep 17 00:00:00 2001
From: KrishnaShuk <shuklakrishna.kris@gmail.com>
Date: Sun, 2 Mar 2025 14:38:13 +0530
Subject: [PATCH 2/4] refactor: Move styles to separate file and improve
 accessibility in ImageAttachment

---
 .../src/views/AttachmentHandler/Attachment.js | 30 +++---
 .../AttachmentHandler/ImageAttachment.js      | 97 +++++++++++--------
 .../ImageAttachment.styles.js                 | 21 ++++
 3 files changed, 93 insertions(+), 55 deletions(-)
 create mode 100644 packages/react/src/views/AttachmentHandler/ImageAttachment.styles.js

diff --git a/packages/react/src/views/AttachmentHandler/Attachment.js b/packages/react/src/views/AttachmentHandler/Attachment.js
index c0a3d6ebd7..60d9447d38 100644
--- a/packages/react/src/views/AttachmentHandler/Attachment.js
+++ b/packages/react/src/views/AttachmentHandler/Attachment.js
@@ -38,36 +38,36 @@ const Attachment = ({ attachment, host, type, variantStyles = {}, msg }) => {
     console.log('Attachment Data:', {
       attachment,
       host,
-      type
+      type,
     });
 
-    // Check if it's a GIF by checking the URL or title_link
     const url = attachment.image_url || attachment.title_link;
     console.log('Processing URL:', url);
 
-    const isGif = url && (
-      url.toLowerCase().endsWith('.gif') || 
-      (attachment.image_type && attachment.image_type.toLowerCase() === 'image/gif') ||
-      (attachment.description && attachment.description.toLowerCase().includes('gif'))
-    );
+    const isGif =
+      url &&
+      (url.toLowerCase().endsWith('.gif') ||
+        (attachment.image_type &&
+          attachment.image_type.toLowerCase() === 'image/gif') ||
+        (attachment.description &&
+          attachment.description.toLowerCase().includes('gif')));
 
     console.log('Is GIF:', isGif);
 
-    // Ensure we have a complete URL
-    const imageUrl = url.startsWith('http') ? url : (host + url);
+    const imageUrl = url.startsWith('http') ? url : host + url;
     console.log('Final Image URL:', imageUrl);
 
-    // Check if the URL has a file-upload path
     if (url && url.includes('/file-upload/')) {
-      // For file uploads, always prepend host if not already present
-      const fullUrl = url.startsWith('http') ? url : `${host}/file-upload/${url.split('/file-upload/')[1]}`;
+      const fullUrl = url.startsWith('http')
+        ? url
+        : `${host}/file-upload/${url.split('/file-upload/')[1]}`;
       console.log('File Upload URL:', fullUrl);
-      
+
       return (
         <ImageAttachment
           attachment={{
             ...attachment,
-            image_url: fullUrl
+            image_url: fullUrl,
           }}
           host={host}
           author={author}
@@ -82,7 +82,7 @@ const Attachment = ({ attachment, host, type, variantStyles = {}, msg }) => {
       <ImageAttachment
         attachment={{
           ...attachment,
-          image_url: imageUrl
+          image_url: imageUrl,
         }}
         host={host}
         author={author}
diff --git a/packages/react/src/views/AttachmentHandler/ImageAttachment.js b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
index 2e0493dc3d..7e69408d68 100644
--- a/packages/react/src/views/AttachmentHandler/ImageAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
@@ -5,6 +5,7 @@ import { Box, Avatar, useTheme } from '@embeddedchat/ui-elements';
 import AttachmentMetadata from './AttachmentMetadata';
 import ImageGallery from '../ImageGallery/ImageGallery';
 import RCContext from '../../context/RCInstance';
+import { imageWrapper, imageStyles } from './ImageAttachment.styles';
 
 const ImageAttachment = ({
   attachment,
@@ -23,7 +24,7 @@ const ImageAttachment = ({
     attachment,
     host,
     isGif,
-    imageUrl: attachment.image_url
+    imageUrl: attachment.image_url,
   });
 
   const getUserAvatarUrl = (icon) => {
@@ -45,6 +46,20 @@ const ImageAttachment = ({
     setIsExpanded((prevState) => !prevState);
   };
 
+  const handleImageClick = (e) => {
+    if (isGif) {
+      e.stopPropagation();
+      return;
+    }
+    setShowGallery(true);
+  };
+
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      handleImageClick(e);
+    }
+  };
+
   return (
     <Box css={variantStyles.imageAttachmentContainer}>
       <Box
@@ -83,9 +98,7 @@ const ImageAttachment = ({
               <Box>@{authorName}</Box>
             </Box>
           </>
-        ) : (
-          ''
-        )}
+        ) : null}
         <Box
           css={css`
             align-items: center;
@@ -104,60 +117,63 @@ const ImageAttachment = ({
           />
         </Box>
         {isExpanded && (
-          <Box 
-            onClick={() => !isGif && setShowGallery(true)}
-            css={css`
-              width: ${isGif ? '200px' : '300px'};
-              height: ${isGif ? '200px' : 'auto'};
-              overflow: hidden;
-              border-radius: inherit;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              background-color: ${theme.colors.surface};
-            `}
+          <button
+            type="button"
+            onClick={handleImageClick}
+            onKeyPress={handleKeyPress}
+            css={[
+              imageWrapper({ isGif, theme }),
+              css`
+                border: none;
+                background: none;
+                padding: 0;
+                cursor: ${!isGif ? 'pointer' : 'default'};
+                &:focus {
+                  outline: 2px solid ${theme.colors.primary};
+                  outline-offset: 2px;
+                }
+              `,
+            ]}
           >
             <img
-              src={attachment.image_url} // URL is now fully formed from Attachment component
-              style={{
-                width: isGif ? '200px' : '100%',
-                height: isGif ? '200px' : 'auto',
-                maxHeight: isGif ? '200px' : '200px',
-                objectFit: isGif ? 'cover' : 'scale-down',
-                borderRadius: 'inherit',
-                imageRendering: isGif ? 'auto' : 'inherit',
-              }}
+              src={attachment.image_url}
+              style={imageStyles({ isGif })}
               onError={(e) => {
                 console.error('Image failed to load:', {
                   src: e.target.src,
                   isGif,
                   error: e.target.error,
-                  originalUrl: attachment.image_url
+                  originalUrl: attachment.image_url,
                 });
                 setImageError(true);
               }}
-              onClick={(e) => {
-                if (isGif) {
-                  e.stopPropagation();
-                }
-              }}
+              alt={attachment.description || 'Attached image'}
             />
             {imageError && (
-              <Box css={css`
-                color: ${theme.colors.danger};
-                padding: 8px;
-                font-size: 12px;
-              `}>
+              <Box
+                css={css`
+                  color: ${theme.colors.danger};
+                  padding: 8px;
+                  font-size: 12px;
+                `}
+              >
                 Failed to load image. URL: {host + attachment.image_url}
               </Box>
             )}
-          </Box>
+          </button>
         )}
         {attachment.attachments &&
           attachment.attachments.map((nestedAttachment, index) => (
             <Box css={variantStyles.imageAttachmentContainer} key={index}>
               <Box
+                role="button"
+                tabIndex={0}
                 onClick={() => setShowGallery(true)}
+                onKeyPress={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    setShowGallery(true);
+                  }
+                }}
                 css={[
                   css`
                     cursor: pointer;
@@ -195,9 +211,7 @@ const ImageAttachment = ({
                       <Box>@{nestedAttachment.author_name}</Box>
                     </Box>
                   </>
-                ) : (
-                  ''
-                )}
+                ) : null}
                 <AttachmentMetadata
                   attachment={nestedAttachment}
                   url={
@@ -214,6 +228,9 @@ const ImageAttachment = ({
                     borderBottomLeftRadius: 'inherit',
                     borderBottomRightRadius: 'inherit',
                   }}
+                  alt={
+                    nestedAttachment.description || 'Nested attachment image'
+                  }
                 />
               </Box>
               {showGallery && (
diff --git a/packages/react/src/views/AttachmentHandler/ImageAttachment.styles.js b/packages/react/src/views/AttachmentHandler/ImageAttachment.styles.js
new file mode 100644
index 0000000000..2382e62709
--- /dev/null
+++ b/packages/react/src/views/AttachmentHandler/ImageAttachment.styles.js
@@ -0,0 +1,21 @@
+import { css } from '@emotion/react';
+
+export const imageWrapper = ({ isGif, theme }) => css`
+  width: ${isGif ? '200px' : '300px'};
+  height: ${isGif ? '200px' : 'auto'};
+  overflow: hidden;
+  border-radius: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${theme.colors.surface};
+`;
+
+export const imageStyles = ({ isGif }) => ({
+  width: isGif ? '200px' : '100%',
+  height: isGif ? '200px' : 'auto',
+  maxHeight: isGif ? '200px' : '200px',
+  objectFit: isGif ? 'cover' : 'scale-down',
+  borderRadius: 'inherit',
+  imageRendering: isGif ? 'auto' : 'inherit',
+});

From 8a7781cd7a6516ce93847e0feede251dca9810e7 Mon Sep 17 00:00:00 2001
From: KrishnaShuk <shuklakrishna.kris@gmail.com>
Date: Sun, 2 Mar 2025 15:31:40 +0530
Subject: [PATCH 3/4] chore: Remove console logs and fix formatting

---
 .../src/views/AttachmentHandler/Attachment.js     | 11 -----------
 .../views/AttachmentHandler/ImageAttachment.js    | 15 +--------------
 2 files changed, 1 insertion(+), 25 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/Attachment.js b/packages/react/src/views/AttachmentHandler/Attachment.js
index 60d9447d38..f0781942e4 100644
--- a/packages/react/src/views/AttachmentHandler/Attachment.js
+++ b/packages/react/src/views/AttachmentHandler/Attachment.js
@@ -35,14 +35,7 @@ const Attachment = ({ attachment, host, type, variantStyles = {}, msg }) => {
     );
   }
   if (attachment && (attachment.image_url || attachment.title_link)) {
-    console.log('Attachment Data:', {
-      attachment,
-      host,
-      type,
-    });
-
     const url = attachment.image_url || attachment.title_link;
-    console.log('Processing URL:', url);
 
     const isGif =
       url &&
@@ -52,16 +45,12 @@ const Attachment = ({ attachment, host, type, variantStyles = {}, msg }) => {
         (attachment.description &&
           attachment.description.toLowerCase().includes('gif')));
 
-    console.log('Is GIF:', isGif);
-
     const imageUrl = url.startsWith('http') ? url : host + url;
-    console.log('Final Image URL:', imageUrl);
 
     if (url && url.includes('/file-upload/')) {
       const fullUrl = url.startsWith('http')
         ? url
         : `${host}/file-upload/${url.split('/file-upload/')[1]}`;
-      console.log('File Upload URL:', fullUrl);
 
       return (
         <ImageAttachment
diff --git a/packages/react/src/views/AttachmentHandler/ImageAttachment.js b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
index 7e69408d68..decf64bb5d 100644
--- a/packages/react/src/views/AttachmentHandler/ImageAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
@@ -20,13 +20,6 @@ const ImageAttachment = ({
   const [showGallery, setShowGallery] = useState(false);
   const [imageError, setImageError] = useState(false);
 
-  console.log('ImageAttachment Render:', {
-    attachment,
-    host,
-    isGif,
-    imageUrl: attachment.image_url,
-  });
-
   const getUserAvatarUrl = (icon) => {
     const instanceHost = RCInstance.getHost();
     const URL = `${instanceHost}${icon}`;
@@ -138,13 +131,7 @@ const ImageAttachment = ({
             <img
               src={attachment.image_url}
               style={imageStyles({ isGif })}
-              onError={(e) => {
-                console.error('Image failed to load:', {
-                  src: e.target.src,
-                  isGif,
-                  error: e.target.error,
-                  originalUrl: attachment.image_url,
-                });
+              onError={() => {
                 setImageError(true);
               }}
               alt={attachment.description || 'Attached image'}

From 92a94960f28dbcb21ecb4e3db34f6036e2ad8639 Mon Sep 17 00:00:00 2001
From: KrishnaShuk <shuklakrishna.kris@gmail.com>
Date: Sat, 15 Mar 2025 13:57:46 +0530
Subject: [PATCH 4/4] refactor: simplify URL handling for file uploads in
 Attachment component

---
 packages/react/src/views/AttachmentHandler/Attachment.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/Attachment.js b/packages/react/src/views/AttachmentHandler/Attachment.js
index f0781942e4..5e36c911fb 100644
--- a/packages/react/src/views/AttachmentHandler/Attachment.js
+++ b/packages/react/src/views/AttachmentHandler/Attachment.js
@@ -48,9 +48,7 @@ const Attachment = ({ attachment, host, type, variantStyles = {}, msg }) => {
     const imageUrl = url.startsWith('http') ? url : host + url;
 
     if (url && url.includes('/file-upload/')) {
-      const fullUrl = url.startsWith('http')
-        ? url
-        : `${host}/file-upload/${url.split('/file-upload/')[1]}`;
+      const fullUrl = `${host}/file-upload/${url.split('/file-upload/')[1]}`;
 
       return (
         <ImageAttachment