chore: Next bubble improvements (#10759)

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

@@ -10,17 +10,33 @@ defineProps({
     type: Object,
     required: true,
   },
+  remainingCount: {
+    type: Number,
+    required: true,
+  },
+  shouldShowOverlay: {
+    type: Boolean,
+    required: true,
+  },
 });
 
 const showGallery = ref(false);
 
 const { filteredCurrentChatAttachments } = useMessageContext();
+
+const handleGalleryClick = () => {
+  showGallery.value = true;
+};
+
+const handleGalleryClose = () => {
+  showGallery.value = false;
+};
 </script>
 
 <template>
   <div
-    class="size-[72px] overflow-hidden contain-content rounded-xl cursor-pointer relative group"
-    @click="showGallery = true"
+    class="rounded-lg overflow-hidden contain-content cursor-pointer size-full"
+    @click="handleGalleryClick"
   >
     <video
       :src="attachment.dataUrl"
@@ -29,6 +45,7 @@ const { filteredCurrentChatAttachments } = useMessageContext();
       playsInline
     />
     <div
+      v-if="!shouldShowOverlay"
       class="absolute w-full h-full inset-0 p-1 flex items-center justify-center"
     >
       <div
@@ -41,12 +58,21 @@ const { filteredCurrentChatAttachments } = useMessageContext();
       </div>
     </div>
   </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="onError"
-    @close="() => (showGallery = false)"
+    @close="handleGalleryClose"
   />
 </template>