feat: disable lightbox in UI shell

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

@@ -5,6 +5,7 @@ import { useAlert } from 'dashboard/composables';
 import BaseBubble from './Base.vue';
 import Button from 'next/button/Button.vue';
 import Icon from 'next/icon/Icon.vue';
+import { useGallery } from '../useGallery';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 import { useMessageContext } from '../provider.js';
 import { downloadFile } from '@chatwoot/utils';
@@ -21,8 +22,8 @@ const attachment = computed(() => {
 });
 
 const hasError = ref(false);
-const showGallery = ref(false);
 const isDownloading = ref(false);
+const { showGallery, isGalleryAllowed, toggleGallery } = useGallery();
 
 const handleError = () => {
   hasError.value = true;
@@ -46,7 +47,7 @@ const downloadAttachment = async () => {
   <BaseBubble
     class="overflow-hidden p-3"
     data-bubble-name="image"
-    @click="showGallery = true"
+    @click="toggleGallery(true)"
   >
     <div v-if="hasError" class="flex items-center gap-1 text-center rounded-lg">
       <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
@@ -82,7 +83,7 @@ const downloadAttachment = async () => {
     </div>
   </BaseBubble>
   <GalleryView
-    v-if="showGallery"
+    v-if="showGallery && isGalleryAllowed"
     v-model:show="showGallery"
     :attachment="useSnakeCase(attachment)"
     :all-attachments="filteredCurrentChatAttachments"

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

@@ -2,6 +2,7 @@
 import { ref, computed } from 'vue';
 import BaseBubble from './Base.vue';
 import Icon from 'next/icon/Icon.vue';
+import { useGallery } from '../useGallery';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 import { useMessageContext } from '../provider.js';
 import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
@@ -9,7 +10,7 @@ import { ATTACHMENT_TYPES } from '../constants';
 
 const emit = defineEmits(['error']);
 const hasError = ref(false);
-const showGallery = ref(false);
+const { showGallery, isGalleryAllowed, toggleGallery } = useGallery();
 const { filteredCurrentChatAttachments, attachments } = useMessageContext();
 
 const handleError = () => {
@@ -30,7 +31,7 @@ const isReel = computed(() => {
   <BaseBubble
     class="overflow-hidden p-3"
     data-bubble-name="video"
-    @click="showGallery = true"
+    @click="toggleGallery(true)"
   >
     <div class="relative group rounded-lg overflow-hidden">
       <div
@@ -52,7 +53,7 @@ const isReel = computed(() => {
     </div>
   </BaseBubble>
   <GalleryView
-    v-if="showGallery"
+    v-if="showGallery && isGalleryAllowed"
     v-model:show="showGallery"
     :attachment="useSnakeCase(attachment)"
     :all-attachments="filteredCurrentChatAttachments"

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

@@ -1,6 +1,7 @@
 <script setup>
 import { ref } from 'vue';
 import Icon from 'next/icon/Icon.vue';
+import { useGallery } from '../useGallery';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 import { useMessageContext } from '../provider.js';
 
@@ -13,7 +14,7 @@ defineProps({
   },
 });
 const hasError = ref(false);
-const showGallery = ref(false);
+const { showGallery, toggleGallery, isGalleryAllowed } = useGallery();
 
 const { filteredCurrentChatAttachments } = useMessageContext();
 
@@ -25,7 +26,7 @@ const handleError = () => {
 <template>
   <div
     class="size-[72px] overflow-hidden contain-content rounded-xl cursor-pointer"
-    @click="showGallery = true"
+    @click="toggleGallery(true)"
   >
     <div
       v-if="hasError"
@@ -42,7 +43,7 @@ const handleError = () => {
     />
   </div>
   <GalleryView
-    v-if="showGallery"
+    v-if="showGallery && isGalleryAllowed"
     v-model:show="showGallery"
     :attachment="useSnakeCase(attachment)"
     :all-attachments="filteredCurrentChatAttachments"

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

@@ -1,6 +1,6 @@
 <script setup>
-import { ref } from 'vue';
 import Icon from 'next/icon/Icon.vue';
+import { useGallery } from '../useGallery';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 import { useMessageContext } from '../provider.js';
 import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
@@ -12,7 +12,7 @@ defineProps({
   },
 });
 
-const showGallery = ref(false);
+const { showGallery, isGalleryAllowed, toggleGallery } = useGallery();
 
 const { filteredCurrentChatAttachments } = useMessageContext();
 </script>
@@ -20,7 +20,7 @@ const { filteredCurrentChatAttachments } = useMessageContext();
 <template>
   <div
     class="size-[72px] overflow-hidden contain-content rounded-xl cursor-pointer relative group"
-    @click="showGallery = true"
+    @click="toggleGallery(true)"
   >
     <video
       :src="attachment.dataUrl"
@@ -42,7 +42,7 @@ const { filteredCurrentChatAttachments } = useMessageContext();
     </div>
   </div>
   <GalleryView
-    v-if="showGallery"
+    v-if="showGallery && isGalleryAllowed"
     v-model:show="showGallery"
     :attachment="useSnakeCase(attachment)"
     :all-attachments="filteredCurrentChatAttachments"

app/javascript/dashboard/components-next/message/useGallery.js

@@ -0,0 +1,23 @@
+import { computed } from 'vue';
+import { useToggle } from '@vueuse/core';
+
+export function useGallery() {
+  const [showGallery] = useToggle(false);
+
+  const isGalleryAllowed = computed(() => {
+    // eslint-disable-next-line no-underscore-dangle
+    return !window.__WOOT_ISOLATED_SHELL__;
+  });
+
+  const toggleGallery = value => {
+    if (!isGalleryAllowed.value) return;
+
+    showGallery.value = value;
+  };
+
+  return {
+    showGallery,
+    isGalleryAllowed,
+    toggleGallery,
+  };
+}