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;