revert: Next bubble improvements (#10795)

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

@@ -11,16 +11,7 @@ defineProps({
     type: Object,
     required: true,
   },
-  remainingCount: {
-    type: Number,
-    required: true,
-  },
-  shouldShowOverlay: {
-    type: Boolean,
-    required: true,
-  },
 });
-
 const hasError = ref(false);
 const showGallery = ref(false);
 
@@ -29,20 +20,12 @@ const { filteredCurrentChatAttachments } = useMessageContext();
 const handleError = () => {
   hasError.value = true;
 };
-
-const handleGalleryClick = () => {
-  showGallery.value = true;
-};
-
-const handleGalleryClose = () => {
-  showGallery.value = false;
-};
 </script>
 
 <template>
   <div
-    class="rounded-lg overflow-hidden contain-content cursor-pointer size-full"
-    @click="handleGalleryClick"
+    class="size-[72px] overflow-hidden contain-content rounded-xl cursor-pointer"
+    @click="showGallery = true"
   >
     <div
       v-if="hasError"
@@ -51,7 +34,6 @@ const handleGalleryClose = () => {
       <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
       {{ $t('COMPONENTS.MEDIA.LOADING_FAILED') }}
     </div>
-
     <img
       v-else
       class="object-cover w-full h-full"
@@ -59,23 +41,12 @@ const handleGalleryClose = () => {
       @error="handleError"
     />
   </div>
-
-  <div
-    v-if="shouldShowOverlay"
-    class="absolute inset-0 flex items-center cursor-pointer justify-center bg-n-black/25 dark:bg-n-alpha-1 rounded-lg"
-    @click="handleGalleryClick"
-  >
-    <span class="text-white text-2xl font-semibold">
-      +{{ remainingCount }}
-    </span>
-  </div>
-
   <GalleryView
     v-if="showGallery"
     v-model:show="showGallery"
     :attachment="useSnakeCase(attachment)"
     :all-attachments="filteredCurrentChatAttachments"
     @error="handleError"
-    @close="handleGalleryClose"
+    @close="() => (showGallery = false)"
   />
 </template>