fix: Fix the issue with context menu for right click on images and videos (#11114)

This pull request includes changes to various components adding a
`skip-context-menu` class to ensure the system context menu opens
instead of the Chatwoot message one

---------

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

app/javascript/dashboard/components-next/message/bubbles/Audio.vue

@@ -13,6 +13,9 @@ const attachment = computed(() => {
 
 <template>
   <BaseBubble class="bg-transparent" data-bubble-name="audio">
-    <AudioChip :attachment="attachment" class="p-2 text-n-slate-12" />
+    <AudioChip
+      :attachment="attachment"
+      class="p-2 text-n-slate-12 skip-context-menu"
+    />
   </BaseBubble>
 </template>

app/javascript/dashboard/components-next/message/bubbles/Image.vue

@@ -56,6 +56,7 @@ const downloadAttachment = async () => {
     </div>
     <div v-else class="relative group rounded-lg overflow-hidden">
       <img
+        class="skip-context-menu"
         :src="attachment.dataUrl"
         :width="attachment.width"
         :height="attachment.height"
@@ -63,8 +64,9 @@ const downloadAttachment = async () => {
         @error="handleError"
       />
       <div
-        class="inset-0 p-2 absolute bg-gradient-to-tl from-n-slate-12/30 dark:from-n-slate-1/50 via-transparent to-transparent hidden group-hover:flex items-end justify-end gap-1.5"
+        class="inset-0 p-2 pointer-events-none absolute bg-gradient-to-tl from-n-slate-12/30 dark:from-n-slate-1/50 via-transparent to-transparent hidden group-hover:flex"
-      >
+      />
+      <div class="absolute right-2 bottom-2 hidden group-hover:flex gap-2">
         <Button xs solid slate icon="i-lucide-expand" class="opacity-60" />
         <Button
           xs

app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue

@@ -41,13 +41,13 @@ const onVideoLoadError = () => {
     <div v-if="content" v-dompurify-html="formattedContent" class="mb-2" />
     <img
       v-if="!hasImgStoryError"
-      class="rounded-lg max-w-80"
+      class="rounded-lg max-w-80 skip-context-menu"
       :src="attachment.dataUrl"
       @error="onImageLoadError"
     />
     <video
       v-else-if="!hasVideoStoryError"
-      class="rounded-lg max-w-80"
+      class="rounded-lg max-w-80 skip-context-menu"
       controls
       :src="attachment.dataUrl"
       @error="onVideoLoadError"

app/javascript/dashboard/components-next/message/bubbles/Video.vue

@@ -35,13 +35,13 @@ const isReel = computed(() => {
     <div class="relative group rounded-lg overflow-hidden">
       <div
         v-if="isReel"
-        class="absolute p-2 flex items-start justify-end right-0"
+        class="absolute p-2 flex items-start justify-end right-0 pointer-events-none"
       >
         <Icon icon="i-lucide-instagram" class="text-white shadow-lg" />
       </div>
       <video
         controls
-        class="rounded-lg"
+        class="rounded-lg skip-context-menu"
         :src="attachment.dataUrl"
         :class="{
           'max-w-48': isReel,

app/javascript/dashboard/components-next/message/chips/Image.vue

@@ -36,7 +36,7 @@ const handleError = () => {
     </div>
     <img
       v-else
-      class="object-cover w-full h-full"
+      class="object-cover w-full h-full skip-context-menu"
       :src="attachment.dataUrl"
       @error="handleError"
     />

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

@@ -166,6 +166,7 @@ onMounted(() => {
 </script>
 
 <template>
+  <Teleport to="body">
     <woot-modal
       v-model:show="show"
       full-width
@@ -350,4 +351,5 @@ onMounted(() => {
         </footer>
       </div>
     </woot-modal>
+  </Teleport>
 </template>