feat: Add image preview for inline images in vue-letter (#9099)

Co-authored-by: Pranav <pranav@chatwoot.com>

app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue

@@ -7,11 +7,12 @@
     }"
   >
     <div v-if="!isEmail" v-dompurify-html="message" class="text-content" />
-    <letter
-      v-else
-      class="text-content bg-white dark:bg-white text-slate-900 dark:text-slate-900 p-2 rounded-[4px]"
-      :html="message"
-    />
+    <div v-else @click="handleClickOnContent">
+      <letter
+        class="text-content bg-white dark:bg-white text-slate-900 dark:text-slate-900 p-2 rounded-[4px]"
+        :html="message"
+      />
+    </div>
     <button
       v-if="showQuoteToggle"
       class="text-slate-300 dark:text-slate-300 cursor-pointer text-xs py-1"
@@ -26,14 +27,23 @@
         {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
       </span>
     </button>
+    <gallery-view
+      v-if="showGalleryViewer"
+      :show.sync="showGalleryViewer"
+      :attachment="attachment"
+      :all-attachments="availableAttachments"
+      @error="onClose"
+      @close="onClose"
+    />
   </div>
 </template>
 
 <script>
 import Letter from 'vue-letter';
+import GalleryView from '../components/GalleryView.vue';
 
 export default {
-  components: { Letter },
+  components: { Letter, GalleryView },
   props: {
     message: {
       type: String,
@@ -51,6 +61,9 @@ export default {
   data() {
     return {
       showQuotedContent: false,
+      showGalleryViewer: false,
+      attachment: {},
+      availableAttachments: [],
     };
   },
   computed: {
@@ -71,6 +84,33 @@ export default {
     toggleQuotedContent() {
       this.showQuotedContent = !this.showQuotedContent;
     },
+    handleClickOnContent(event) {
+      // if event target is IMG and not close in A tag
+      // then open image preview
+      const isImageElement = event.target.tagName === 'IMG';
+      const isWrappedInLink = event.target.closest('A');
+
+      if (isImageElement && !isWrappedInLink) {
+        this.openImagePreview(event.target.src);
+      }
+    },
+    openImagePreview(src) {
+      this.showGalleryViewer = true;
+      this.attachment = {
+        file_type: 'image',
+        data_url: src,
+        message_id: Math.floor(Math.random() * 100),
+      };
+      this.availableAttachments = [{ ...this.attachment }];
+    },
+    onClose() {
+      this.showGalleryViewer = false;
+      this.resetAttachmentData();
+    },
+    resetAttachmentData() {
+      this.attachment = {};
+      this.availableAttachments = [];
+    },
   },
 };
 </script>
@@ -82,6 +122,7 @@ export default {
   ol {
     padding-left: var(--space-two);
   }
+
   table {
     margin: 0;
     border: 0;

app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue

@@ -15,8 +15,12 @@
         class="bg-white dark:bg-slate-900 z-10 flex items-center justify-between w-full h-16 px-6 py-2"
         @click.stop
       >
-        <div class="items-center flex justify-start min-w-[15rem]">
+        <div
+          v-if="senderDetails"
+          class="items-center flex justify-start min-w-[15rem]"
+        >
           <thumbnail
+            v-if="senderDetails.avatar"
             :username="senderDetails.name"
             :src="senderDetails.avatar"
           />
@@ -41,10 +45,9 @@
           class="flex items-center justify-start w-auto min-w-0 p-1 text-sm font-semibold text-slate-700 dark:text-slate-100"
         >
           <span
+            v-dompurify-html="fileNameFromDataUrl"
             class="overflow-hidden text-slate-700 dark:text-slate-100 whitespace-nowrap text-ellipsis"
-          >
-            {{ fileNameFromDataUrl }}
-          </span>
+          />
         </div>
         <div
           class="items-center flex gap-2 justify-end min-w-[8rem] sm:min-w-[15rem]"
@@ -237,12 +240,9 @@ export default {
       return this.allAttachments.length > 1;
     },
     readableTime() {
-      if (!this.activeAttachment.created_at) return '';
-      const time = this.messageTimestamp(
-        this.activeAttachment.created_at,
-        'LLL d yyyy, h:mm a'
-      );
-      return time || '';
+      const { created_at: createdAt } = this.activeAttachment;
+      if (!createdAt) return '';
+      return this.messageTimestamp(createdAt, 'LLL d yyyy, h:mm a') || '';
     },
     isImage() {
       return this.activeFileType === ALLOWED_FILE_TYPES.IMAGE;
@@ -271,7 +271,7 @@ export default {
       const { data_url: dataUrl } = this.activeAttachment;
       if (!dataUrl) return '';
       const fileName = dataUrl?.split('/').pop();
-      return fileName || '';
+      return decodeURIComponent(fileName || '');
     },
     imageRotationStyle() {
       return {