feat: Add a placeholder for image attachments in conversations view (#…

…8969) We analyze an image to get it's height and width. On the frontend, we would show a placeholder with the corresponding width and height until the images are loaded properly. --------- Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
chatwoot · Feb 27, 2024 · b7a83dc · b7a83dc
1 parent fd993fe
commit b7a83dc
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -577,7 +577,8 @@ export default {
 
         > img,
         > video {
-          @apply rounded-lg;
+          /** ensure that the bubble radius and image radius match*/
+          @apply rounded-[0.4rem];
         }
 
         > video {

diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
@@ -2,20 +2,23 @@
   <div class="message-text__wrap" :class="attachmentTypeClasses">
     <img
       v-if="isImage && !isImageError"
-      :src="attachment.data_url"
+      class="bg-woot-200 dark:bg-woot-900"
+      :src="dataUrl"
+      :width="imageWidth"
+      :height="imageHeight"
       @click="onClick"
       @error="onImgError"
     />
     <video
       v-if="isVideo"
-      :src="attachment.data_url"
+      :src="dataUrl"
       muted
       playsInline
       @error="onImgError"
       @click="onClick"
     />
     <audio v-else-if="isAudio" controls class="skip-context-menu">
-      <source :src="`${attachment.data_url}?t=${Date.now()}`" />
+      <source :src="`${dataUrl}?t=${Date.now()}`" />
     </audio>
     <gallery-view
       v-if="show"
@@ -31,7 +34,6 @@
 <script>
 import { mapGetters } from 'vuex';
 import { hasPressedCommand } from 'shared/helpers/KeyboardHelpers';
-
 import GalleryView from '../components/GalleryView.vue';
 
 const ALLOWED_FILE_TYPES = {
@@ -81,6 +83,15 @@ export default {
       );
       return attachments;
     },
+    dataUrl() {
+      return this.attachment.data_url;
+    },
+    imageWidth() {
+      return this.attachment.width ? `${this.attachment.width}px` : 'auto';
+    },
+    imageHeight() {
+      return this.attachment.height ? `${this.attachment.height}px` : 'auto';
+    },
   },
   watch: {
     attachment() {

diff --git a/app/models/attachment.rb b/app/models/attachment.rb
@@ -76,7 +76,9 @@ def file_metadata
       extension: extension,
       data_url: file_url,
       thumb_url: thumb_url,
-      file_size: file.byte_size
+      file_size: file.byte_size,
+      width: file.metadata[:width],
+      height: file.metadata[:height]
     }
 
     metadata[:data_url] = metadata[:thumb_url] = external_url if message.instagram_story_mention?

diff --git a/app/views/api/v1/accounts/conversations/attachments.json.jbuilder b/app/views/api/v1/accounts/conversations/attachments.json.jbuilder
@@ -5,6 +5,8 @@ json.payload @attachments do |attachment|
   json.file_size attachment.push_event_data[:file_size]
   json.file_type attachment.push_event_data[:file_type]
   json.extension attachment.push_event_data[:extension]
+  json.width attachment.push_event_data[:width]
+  json.height attachment.push_event_data[:height]
   json.created_at attachment.message.created_at.to_i
   json.sender attachment.message.sender.push_event_data if attachment.message.sender
 end