Merge pull request #7112 from element-hq/feature/bma/galleryMessages

Support gallery messages

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesFlowNode.kt

@@ -47,9 +47,12 @@ import io.element.android.features.messages.impl.threads.list.ThreadsListNode
 import io.element.android.features.messages.impl.timeline.TimelineController
 import io.element.android.features.messages.impl.timeline.debug.EventDebugInfoNode
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
+import io.element.android.features.messages.impl.timeline.model.event.GalleryItem
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAttachmentsContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAudioContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEventContentWithAttachment
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemFileContent
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemGalleryContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemImageContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemLocationContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemVideoContent
@@ -86,6 +89,8 @@ import io.element.android.libraries.matrix.api.timeline.Timeline
 import io.element.android.libraries.matrix.api.timeline.item.TimelineItemDebugInfo
 import io.element.android.libraries.matrix.ui.messages.RoomMemberProfilesCache
 import io.element.android.libraries.matrix.ui.messages.RoomNamesCache
+import io.element.android.libraries.mediaviewer.api.GalleryInfo
+import io.element.android.libraries.mediaviewer.api.GalleryItemData
 import io.element.android.libraries.mediaviewer.api.MediaInfo
 import io.element.android.libraries.mediaviewer.api.MediaViewerEntryPoint
 import io.element.android.libraries.textcomposer.mentions.LocalMentionSpanUpdater
@@ -153,7 +158,16 @@ class MessagesFlowNode(
         ) : NavTarget
 
         @Parcelize
-        data class AttachmentPreview(val timelineMode: Timeline.Mode, val attachment: Attachment, val inReplyToEventId: EventId?) : NavTarget
+        data class GalleryViewer(
+            val fromPinnedMessages: Boolean,
+            val eventId: EventId?,
+            val galleryInfo: GalleryInfo,
+            val canUseOverlay: Boolean,
+            val galleryItems: List<GalleryItemData> = emptyList(),
+        ) : NavTarget
+
+        @Parcelize
+        data class AttachmentPreview(val timelineMode: Timeline.Mode, val attachments: ImmutableList<Attachment>, val inReplyToEventId: EventId?) : NavTarget
 
         @Parcelize
         data class LocationViewer(val mode: ShowLocationMode) : NavTarget
@@ -239,7 +253,11 @@ class MessagesFlowNode(
                         callback.navigateToRoomDetails()
                     }
 
-                    override fun handleEventClick(timelineMode: Timeline.Mode, event: TimelineItem.Event, canUseOverlay: Boolean): Boolean {
+                    override fun handleEventClick(
+                        timelineMode: Timeline.Mode,
+                        event: TimelineItem.Event,
+                        canUseOverlay: Boolean,
+                    ): Boolean {
                         return processEventClick(
                             timelineMode = timelineMode,
                             event = event,
@@ -247,10 +265,24 @@ class MessagesFlowNode(
                         )
                     }
 
+                    override fun handleGalleryItemClick(
+                        timelineMode: Timeline.Mode,
+                        event: TimelineItem.Event,
+                        galleryItemIndex: Int,
+                        canUseOverlay: Boolean,
+                    ): Boolean {
+                        return processGalleryEventClick(
+                            timelineMode = timelineMode,
+                            event = event,
+                            canUseOverlay = canUseOverlay,
+                            galleryItemIndex = galleryItemIndex,
+                        )
+                    }
+
                     override fun navigateToPreviewAttachments(attachments: ImmutableList<Attachment>, inReplyToEventId: EventId?) {
                         backstack.push(
                             NavTarget.AttachmentPreview(
-                                attachment = attachments.first(),
+                                attachments = attachments,
                                 timelineMode = Timeline.Mode.Live,
                                 inReplyToEventId = inReplyToEventId,
                             )
@@ -339,13 +371,44 @@ class MessagesFlowNode(
                 createNode<MessagesNode>(buildContext, listOf(callback, inputs))
             }
             is NavTarget.MediaViewer -> {
-                val params = MediaViewerEntryPoint.Params(
+                val params = MediaViewerEntryPoint.Params.RoomMedia(
                     mode = navTarget.mode,
                     eventId = navTarget.eventId,
                     mediaInfo = navTarget.mediaInfo,
                     mediaSource = navTarget.mediaSource,
                     thumbnailSource = navTarget.thumbnailSource,
-                    canShowInfo = true,
+                )
+                val callback = object : MediaViewerEntryPoint.Callback {
+                    override fun onDone() {
+                        if (navTarget.canUseOverlay) {
+                            overlay.hide()
+                        } else {
+                            backstack.pop()
+                        }
+                    }
+
+                    override fun viewInTimeline(eventId: EventId) {
+                        this@MessagesFlowNode.viewInTimeline(eventId)
+                    }
+
+                    override fun forwardEvent(eventId: EventId, fromPinnedEvents: Boolean) {
+                        // Need to go to the parent because of the overlay
+                        callback.forwardEvent(eventId, fromPinnedEvents)
+                    }
+                }
+                mediaViewerEntryPoint.createNode(
+                    parentNode = this,
+                    buildContext = buildContext,
+                    params = params,
+                    callback = callback
+                )
+            }
+            is NavTarget.GalleryViewer -> {
+                val params = MediaViewerEntryPoint.Params.EventGallery(
+                    eventId = navTarget.eventId,
+                    galleryInfo = navTarget.galleryInfo,
+                    galleryItems = navTarget.galleryItems,
+                    fromPinnedMessages = navTarget.fromPinnedMessages,
                 )
                 val callback = object : MediaViewerEntryPoint.Callback {
                     override fun onDone() {
@@ -374,7 +437,7 @@ class MessagesFlowNode(
             }
             is NavTarget.AttachmentPreview -> {
                 val inputs = AttachmentsPreviewNode.Inputs(
-                    attachment = navTarget.attachment,
+                    attachments = navTarget.attachments,
                     timelineMode = navTarget.timelineMode,
                     inReplyToEventId = navTarget.inReplyToEventId,
                 )
@@ -455,6 +518,19 @@ class MessagesFlowNode(
                         )
                     }
 
+                    override fun handleGalleryItemClick(
+                        event: TimelineItem.Event,
+                        galleryItemIndex: Int,
+                        canUseOverlay: Boolean,
+                    ) {
+                        processGalleryEventClick(
+                            timelineMode = Timeline.Mode.PinnedEvents,
+                            event = event,
+                            galleryItemIndex = galleryItemIndex,
+                            canUseOverlay = canUseOverlay,
+                        )
+                    }
+
                     override fun navigateToRoomMemberDetails(userId: UserId) {
                         callback.navigateToRoomMemberDetails(userId)
                     }
@@ -490,7 +566,11 @@ class MessagesFlowNode(
                     focusedEventId = navTarget.focusedEventId,
                 )
                 val callback = object : ThreadedMessagesNode.Callback {
-                    override fun handleEventClick(timelineMode: Timeline.Mode, event: TimelineItem.Event, canUseOverlay: Boolean): Boolean {
+                    override fun handleEventClick(
+                        timelineMode: Timeline.Mode,
+                        event: TimelineItem.Event,
+                        canUseOverlay: Boolean,
+                    ): Boolean {
                         return processEventClick(
                             timelineMode = timelineMode,
                             event = event,
@@ -498,10 +578,24 @@ class MessagesFlowNode(
                         )
                     }
 
+                    override fun handleGalleryItemClick(
+                        timelineMode: Timeline.Mode,
+                        event: TimelineItem.Event,
+                        galleryItemIndex: Int,
+                        canUseOverlay: Boolean,
+                    ): Boolean {
+                        return processGalleryEventClick(
+                            timelineMode = timelineMode,
+                            event = event,
+                            canUseOverlay = canUseOverlay,
+                            galleryItemIndex = galleryItemIndex,
+                        )
+                    }
+
                     override fun navigateToPreviewAttachments(attachments: ImmutableList<Attachment>, inReplyToEventId: EventId?) {
                         backstack.push(
                             NavTarget.AttachmentPreview(
-                                attachment = attachments.first(),
+                                attachments = attachments,
                                 timelineMode = Timeline.Mode.Thread(navTarget.threadRootId),
                                 inReplyToEventId = inReplyToEventId,
                             )
@@ -704,6 +798,92 @@ class MessagesFlowNode(
         }
     }
 
+    private fun processGalleryEventClick(
+        timelineMode: Timeline.Mode,
+        event: TimelineItem.Event,
+        galleryItemIndex: Int,
+        canUseOverlay: Boolean,
+    ): Boolean {
+        val navTarget = when (event.content) {
+            is TimelineItemGalleryContent -> {
+                val galleryInfo = GalleryInfo(
+                    caption = event.content.caption,
+                    senderId = event.senderId,
+                    senderName = event.safeSenderName,
+                    senderAvatar = event.senderAvatar.url,
+                    dateSent = dateFormatter.format(
+                        event.sentTimeMillis,
+                        mode = DateFormatterMode.Day,
+                    ),
+                    dateSentFull = dateFormatter.format(
+                        timestamp = event.sentTimeMillis,
+                        mode = DateFormatterMode.Full,
+                    ),
+                    initialIndex = galleryItemIndex,
+                )
+                val galleryItems = event.content.items.map { galleryItem ->
+                    GalleryItemData(
+                        filename = galleryItem.filename,
+                        mimeType = galleryItem.mimeType,
+                        mediaSource = galleryItem.mediaSource,
+                        thumbnailSource = galleryItem.thumbnailSource,
+                        type = galleryItem.type.toMediaViewerType(),
+                    )
+                }.reversed()
+                NavTarget.GalleryViewer(
+                    eventId = event.eventId,
+                    galleryInfo = galleryInfo,
+                    canUseOverlay = canUseOverlay,
+                    galleryItems = galleryItems,
+                    fromPinnedMessages = timelineMode is Timeline.Mode.PinnedEvents
+                )
+            }
+            is TimelineItemAttachmentsContent -> {
+                val galleryInfo = GalleryInfo(
+                    caption = event.content.caption,
+                    senderId = event.senderId,
+                    senderName = event.safeSenderName,
+                    senderAvatar = event.senderAvatar.url,
+                    dateSent = dateFormatter.format(
+                        event.sentTimeMillis,
+                        mode = DateFormatterMode.Day,
+                    ),
+                    dateSentFull = dateFormatter.format(
+                        timestamp = event.sentTimeMillis,
+                        mode = DateFormatterMode.Full,
+                    ),
+                    initialIndex = galleryItemIndex,
+                )
+                val galleryItems = event.content.attachments.map { attachment ->
+                    GalleryItemData(
+                        filename = attachment.filename,
+                        mimeType = attachment.mimeType,
+                        mediaSource = attachment.mediaSource,
+                        thumbnailSource = attachment.thumbnailSource,
+                        type = GalleryItemData.Type.File,
+                    )
+                }.reversed()
+                NavTarget.GalleryViewer(
+                    eventId = event.eventId,
+                    galleryInfo = galleryInfo,
+                    canUseOverlay = canUseOverlay,
+                    galleryItems = galleryItems,
+                    fromPinnedMessages = timelineMode is Timeline.Mode.PinnedEvents
+                )
+            }
+            else -> null
+        }
+        if (navTarget != null) {
+            if (canUseOverlay) {
+                overlay.show(navTarget)
+            } else {
+                backstack.push(navTarget)
+            }
+            return true
+        }
+        return false
+    }
+
     private fun buildMediaViewerNavTarget(
         mode: MediaViewerEntryPoint.MediaViewerMode,
         event: TimelineItem.Event,
@@ -768,3 +948,12 @@ class MessagesFlowNode(
         }
     }
 }
+
+private fun GalleryItem.Type.toMediaViewerType(): GalleryItemData.Type {
+    return when (this) {
+        GalleryItem.Type.Image -> GalleryItemData.Type.Image
+        GalleryItem.Type.Video -> GalleryItemData.Type.Video
+        GalleryItem.Type.Audio -> GalleryItemData.Type.Audio
+        GalleryItem.Type.File -> GalleryItemData.Type.File
+    }
+}

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesNode.kt

@@ -119,6 +119,7 @@ class MessagesNode(
 
     interface Callback : Plugin {
         fun handleEventClick(timelineMode: Timeline.Mode, event: TimelineItem.Event, canUseOverlay: Boolean): Boolean
+        fun handleGalleryItemClick(timelineMode: Timeline.Mode, event: TimelineItem.Event, galleryItemIndex: Int, canUseOverlay: Boolean): Boolean
         fun navigateToPreviewAttachments(attachments: ImmutableList<Attachment>, inReplyToEventId: EventId?)
         fun navigateToRoomMemberDetails(userId: UserId)
         fun handlePermalinkClick(data: PermalinkData)
@@ -289,6 +290,18 @@ class MessagesNode(
                         }
                     }
                 },
+                onGalleryEventItemClick = { isLive, event, index ->
+                    if (isLive) {
+                        callback.handleGalleryItemClick(timelineController.mainTimelineMode(), event, index, canUseOverlay)
+                    } else {
+                        val detachedTimelineMode = timelineController.detachedTimelineMode()
+                        if (detachedTimelineMode != null) {
+                            callback.handleGalleryItemClick(detachedTimelineMode, event, index, canUseOverlay)
+                        } else {
+                            false
+                        }
+                    }
+                },
                 onUserDataClick = callback::navigateToRoomMemberDetails,
                 onLinkClick = { url, customTab ->
                     onLinkClick(

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesPresenter.kt

@@ -47,10 +47,10 @@ import io.element.android.features.messages.impl.timeline.components.reactionsum
 import io.element.android.features.messages.impl.timeline.components.receipt.bottomsheet.ReadReceiptBottomSheetState
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
 import io.element.android.features.messages.impl.timeline.model.TimelineItemThreadInfo
-import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEventContentWithAttachment
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemPollContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemStateContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextBasedContent
+import io.element.android.features.messages.impl.timeline.model.event.captionOrNull
 import io.element.android.features.messages.impl.timeline.protection.TimelineProtectionState
 import io.element.android.features.messages.impl.voicemessages.composer.DefaultVoiceMessageComposerPresenter
 import io.element.android.features.roomcall.api.RoomCallState
@@ -533,7 +533,7 @@ class MessagesPresenter(
     ) {
         val composerMode = MessageComposerMode.EditCaption(
             eventOrTransactionId = targetEvent.eventOrTransactionId,
-            content = (targetEvent.content as? TimelineItemEventContentWithAttachment)?.caption.orEmpty(),
+            content = targetEvent.content.captionOrNull().orEmpty(),
         )
         composerState.eventSink(
             MessageComposerEvent.SetMode(composerMode)
@@ -606,7 +606,7 @@ class MessagesPresenter(
     }
 
     private fun handleCopyCaption(event: TimelineItem.Event) {
-        val content = (event.content as? TimelineItemEventContentWithAttachment)?.caption ?: return
+        val content = event.content.captionOrNull() ?: return
         clipboardHelper.copyPlainText(content)
         if (Build.VERSION.SDK_INT < Build.VERSION_CODES.TIRAMISU) {
             snackbarDispatcher.post(SnackbarMessage(CommonStrings.common_copied_to_clipboard))

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt

@@ -136,6 +136,7 @@ fun MessagesView(
     onBackClick: () -> Unit,
     onRoomDetailsClick: () -> Unit,
     onEventContentClick: (isLive: Boolean, event: TimelineItem.Event) -> Boolean,
+    onGalleryEventItemClick: (isLive: Boolean, event: TimelineItem.Event, index: Int) -> Boolean,
     onUserDataClick: (UserId) -> Unit,
     onLinkClick: (String, Boolean) -> Unit,
     onSendLocationClick: () -> Unit,
@@ -207,15 +208,15 @@ fun MessagesView(
     val expandableState = rememberExpandableBottomSheetLayoutState()
     ExpandableBottomSheetLayout(
         modifier = modifier
-                .fillMaxSize()
-                .imePadding()
-                .systemBarsPadding()
-                .onSizeChanged { size ->
-                    // Let the composer takes at max half of the available height.
-                    // The value will be different if the soft keyboard is displayed
-                    // or not.
-                    maxComposerHeightPx = (size.height * 0.5f).toInt()
-                },
+            .fillMaxSize()
+            .imePadding()
+            .systemBarsPadding()
+            .onSizeChanged { size ->
+                // Let the composer takes at max half of the available height.
+                // The value will be different if the soft keyboard is displayed
+                // or not.
+                maxComposerHeightPx = (size.height * 0.5f).toInt()
+            },
         content = {
             Scaffold(
                 contentWindowInsets = WindowInsets.statusBars,
@@ -252,12 +253,22 @@ fun MessagesView(
                 content = { padding ->
                     Box(
                         modifier = Modifier
-                                .padding(padding)
-                                .consumeWindowInsets(padding)
+                            .padding(padding)
+                            .consumeWindowInsets(padding)
                     ) {
                         MessagesViewContent(
                             state = state,
                             onContentClick = ::onContentClick,
+                            onGalleryItemClick = { event, index ->
+                                val hideKeyboard = onGalleryEventItemClick(
+                                    state.timelineState.isLive,
+                                    event,
+                                    index,
+                                )
+                                if (hideKeyboard) {
+                                    localView.hideKeyboard()
+                                }
+                            },
                             onMessageLongClick = ::onMessageLongClick,
                             onUserDataClick = {
                                 hidingKeyboard {
@@ -290,10 +301,10 @@ fun MessagesView(
 
                         SuggestionsPickerView(
                             modifier = Modifier
-                                    .shadow(10.dp)
-                                    .background(ElementTheme.colors.bgCanvasDefault)
-                                    .align(Alignment.BottomStart)
-                                    .heightIn(max = 230.dp),
+                                .shadow(10.dp)
+                                .background(ElementTheme.colors.bgCanvasDefault)
+                                .align(Alignment.BottomStart)
+                                .heightIn(max = 230.dp),
                             roomId = state.roomId,
                             roomName = state.roomName,
                             roomAvatarData = state.roomAvatar,
@@ -459,6 +470,7 @@ private fun MessagesViewContent(
     onMoreReactionsClick: (TimelineItem.Event) -> Unit,
     onReadReceiptClick: (TimelineItem.Event) -> Unit,
     onMessageLongClick: (TimelineItem.Event) -> Unit,
+    onGalleryItemClick: ((TimelineItem.Event, Int) -> Unit),
     onSendLocationClick: () -> Unit,
     onCreatePollClick: () -> Unit,
     onViewAllPinnedMessagesClick: () -> Unit,
@@ -469,9 +481,9 @@ private fun MessagesViewContent(
 ) {
     Box(
         modifier = modifier
-                .fillMaxSize()
-                .navigationBarsPadding()
-                .imePadding(),
+            .fillMaxSize()
+            .navigationBarsPadding()
+            .imePadding(),
     ) {
         AttachmentsBottomSheet(
             state = state.composerState,
@@ -510,6 +522,7 @@ private fun MessagesViewContent(
                 onUserDataClick = onUserDataClick,
                 onLinkClick = { link -> onLinkClick(link, false) },
                 onContentClick = onContentClick,
+                onGalleryItemClick = onGalleryItemClick,
                 onMessageLongClick = onMessageLongClick,
                 onSwipeToReply = onSwipeToReply,
                 onReactionClick = onReactionClick,
@@ -598,9 +611,9 @@ private fun MessagesViewComposerBottomSheetContents(
 private fun CantSendMessageBanner() {
     Row(
         modifier = Modifier
-                .fillMaxWidth()
-                .background(ElementTheme.colors.bgSubtleSecondary)
-                .padding(16.dp),
+            .fillMaxWidth()
+            .background(ElementTheme.colors.bgSubtleSecondary)
+            .padding(16.dp),
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.Center
     ) {
@@ -637,6 +650,7 @@ internal fun MessagesViewPreview(@PreviewParameter(MessagesStateProvider::class)
         onBackClick = {},
         onRoomDetailsClick = {},
         onEventContentClick = { _, _ -> false },
+        onGalleryEventItemClick = { _, _, _ -> false },
         onUserDataClick = {},
         onLinkClick = { _, _ -> },
         onSendLocationClick = {},
@@ -692,6 +706,7 @@ internal fun MessagesViewA11yPreview() = ElementPreview {
         onBackClick = {},
         onRoomDetailsClick = {},
         onEventContentClick = { _, _ -> false },
+        onGalleryEventItemClick = { _, _, _ -> false },
         onUserDataClick = {},
         onLinkClick = { _, _ -> },
         onSendLocationClick = {},

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/ActionListPresenter.kt

@@ -27,8 +27,10 @@ import io.element.android.features.messages.impl.crypto.sendfailure.VerifiedUser
 import io.element.android.features.messages.impl.crypto.sendfailure.VerifiedUserSendFailureFactory
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
 import io.element.android.features.messages.impl.timeline.model.TimelineItemThreadInfo
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAttachmentsContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEventContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEventContentWithAttachment
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemGalleryContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemLegacyCallInviteContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemPollContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemRedactedContent
@@ -37,6 +39,7 @@ import io.element.android.features.messages.impl.timeline.model.event.TimelineIt
 import io.element.android.features.messages.impl.timeline.model.event.canBeCopied
 import io.element.android.features.messages.impl.timeline.model.event.canBeForwarded
 import io.element.android.features.messages.impl.timeline.model.event.canReact
+import io.element.android.features.messages.impl.timeline.model.event.captionOrNull
 import io.element.android.libraries.architecture.Presenter
 import io.element.android.libraries.dateformatter.api.DateFormatter
 import io.element.android.libraries.dateformatter.api.DateFormatterMode
@@ -198,9 +201,12 @@ class DefaultActionListPresenter(
                 add(TimelineItemAction.Forward)
             }
             if (timelineItem.isEditable && usersEventPermissions.canSendMessage) {
-                if (timelineItem.content is TimelineItemEventContentWithAttachment) {
+                if (timelineItem.content is TimelineItemEventContentWithAttachment ||
+                    timelineItem.content is TimelineItemGalleryContent ||
+                    timelineItem.content is TimelineItemAttachmentsContent) {
                     // Caption
-                    if (timelineItem.content.caption == null) {
+                    val caption = timelineItem.content.captionOrNull()
+                    if (caption == null) {
                         add(TimelineItemAction.AddCaption)
                     } else {
                         add(TimelineItemAction.EditCaption)
@@ -225,7 +231,7 @@ class DefaultActionListPresenter(
             }
             if (timelineItem.content.canBeCopied()) {
                 add(TimelineItemAction.CopyText)
-            } else if ((timelineItem.content as? TimelineItemEventContentWithAttachment)?.caption.isNullOrBlank().not()) {
+            } else if (timelineItem.content.captionOrNull().isNullOrBlank().not()) {
                 add(TimelineItemAction.CopyCaption)
             }
             if (timelineItem.isRemote) {

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/ActionListView.kt

@@ -63,9 +63,11 @@ import io.element.android.features.messages.impl.crypto.sendfailure.VerifiedUser
 import io.element.android.features.messages.impl.timeline.a11y.a11yReactionAction
 import io.element.android.features.messages.impl.timeline.components.MessageShieldView
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAttachmentsContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAudioContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEncryptedContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemFileContent
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemGalleryContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemImageContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemLegacyCallInviteContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemLocationContent
@@ -299,6 +301,12 @@ private fun MessageSummary(
         is TimelineItemImageContent -> {
             content = { ContentForBody(event.content.bestDescription) }
         }
+        is TimelineItemGalleryContent -> {
+            content = { ContentForBody(event.content.body) }
+        }
+        is TimelineItemAttachmentsContent -> {
+            content = { ContentForBody(event.content.body) }
+        }
         is TimelineItemStickerContent -> {
             content = { ContentForBody(event.content.bestDescription) }
         }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/attachments/preview/AttachmentsPreviewEvent.kt

@@ -23,4 +23,5 @@ sealed interface AttachmentsPreviewEvent {
     data object ResetImageEdits : AttachmentsPreviewEvent
     data class UpdateImageCropRect(val cropRect: NormalizedCropRect) : AttachmentsPreviewEvent
     data object ClearImageEditError : AttachmentsPreviewEvent
+    data class SetCurrentCarouselIndex(val index: Int) : AttachmentsPreviewEvent
 }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/attachments/preview/AttachmentsPreviewNode.kt

@@ -30,6 +30,7 @@ import io.element.android.libraries.matrix.api.core.EventId
 import io.element.android.libraries.matrix.api.core.SessionId
 import io.element.android.libraries.matrix.api.timeline.Timeline
 import io.element.android.libraries.mediaviewer.api.local.LocalMediaRenderer
+import kotlinx.collections.immutable.ImmutableList
 
 @ContributesNode(RoomScope::class)
 @AssistedInject
@@ -42,7 +43,7 @@ class AttachmentsPreviewNode(
     private val enterpriseService: EnterpriseService,
 ) : Node(buildContext, plugins = plugins) {
     data class Inputs(
-        val attachment: Attachment,
+        val attachments: ImmutableList<Attachment>,
         val timelineMode: Timeline.Mode,
         val inReplyToEventId: EventId?,
     ) : NodeInputs
@@ -54,7 +55,7 @@ class AttachmentsPreviewNode(
     }
 
     private val presenter = presenterFactory.create(
-        attachment = inputs.attachment,
+        attachments = inputs.attachments,
         timelineMode = inputs.timelineMode,
         onDoneListener = onDoneListener,
         inReplyToEventId = inputs.inReplyToEventId,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/attachments/preview/AttachmentsPreviewPresenter.kt

@@ -11,7 +11,9 @@ package io.element.android.features.messages.impl.attachments.preview
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
@@ -48,10 +50,11 @@ import io.element.android.libraries.mediaupload.api.allFiles
 import io.element.android.libraries.preferences.api.store.VideoCompressionPreset
 import io.element.android.libraries.textcomposer.model.TextEditorState
 import io.element.android.libraries.textcomposer.model.rememberMarkdownTextEditorState
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.toImmutableList
 import kotlinx.coroutines.CancellationException
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Job
-import kotlinx.coroutines.isActive
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
 import timber.log.Timber
@@ -59,7 +62,7 @@ import java.io.File
 
 @AssistedInject
 class AttachmentsPreviewPresenter(
-    @Assisted private val attachment: Attachment,
+    @Assisted private val attachments: ImmutableList<Attachment>,
     @Assisted private val onDoneListener: OnDoneListener,
     @Assisted private val timelineMode: Timeline.Mode,
     @Assisted private val inReplyToEventId: EventId?,
@@ -76,13 +79,18 @@ class AttachmentsPreviewPresenter(
     @AssistedFactory
     interface Factory {
         fun create(
-            attachment: Attachment,
+            attachments: ImmutableList<Attachment>,
             timelineMode: Timeline.Mode,
             onDoneListener: OnDoneListener,
             inReplyToEventId: EventId?,
         ): AttachmentsPreviewPresenter
     }
 
+    data class AttachmentAndEdits(
+        val attachment: Attachment,
+        val edits: AttachmentImageEdits,
+    )
+
     private val mediaSender = mediaSenderFactory.create(timelineMode)
 
     @Composable
@@ -92,14 +100,11 @@ class AttachmentsPreviewPresenter(
         val sendActionState = remember {
             mutableStateOf<SendActionState>(SendActionState.Idle)
         }
-        val originalLocalMedia = remember { (attachment as Attachment.Media).localMedia }
-        var currentAttachment by remember { mutableStateOf(attachment) }
-        var canEditImage by remember { mutableStateOf(originalLocalMedia.info.canEditImage()) }
+        var canEditImage by remember { mutableStateOf(false) }
         var imageEditorState by remember { mutableStateOf<AttachmentImageEditorState?>(null) }
-        var appliedImageEdits by remember { mutableStateOf(AttachmentImageEdits()) }
         var isApplyingImageEdits by remember { mutableStateOf(false) }
         var displayImageEditError by remember { mutableStateOf(false) }
-        var editedTempFile by remember { mutableStateOf<File?>(null) }
+        var editedTempFiles by remember { mutableStateOf<Map<Int, File>>(emptyMap()) }
 
         val markdownTextEditorState = rememberMarkdownTextEditorState(initialText = null, initialFocus = false)
         val textEditorState by rememberUpdatedState(
@@ -108,76 +113,115 @@ class AttachmentsPreviewPresenter(
 
         val ongoingSendAttachmentJob = remember { mutableStateOf<Job?>(null) }
 
-        var preprocessMediaJob by remember { mutableStateOf<Job?>(null) }
+        var currentIndex by remember { mutableIntStateOf(0) }
 
-        val mediaAttachment = currentAttachment as Attachment.Media
-        val mediaOptimizationSelectorPresenter = remember {
-            mediaOptimizationSelectorPresenterFactory.create(
-                localMedia = mediaAttachment.localMedia,
-                sendAsFile = mediaAttachment.sendAsFile,
+        var attachmentsAndEdits by remember {
+            mutableStateOf(
+                attachments.map {
+                    AttachmentAndEdits(it, AttachmentImageEdits())
+                }
             )
         }
-        val mediaOptimizationSelectorState by rememberUpdatedState(mediaOptimizationSelectorPresenter.present())
+
+        val editedAttachments by remember {
+            derivedStateOf {
+                attachmentsAndEdits.map { it.attachment }.toImmutableList()
+            }
+        }
+
+        var preprocessMediaJob by remember { mutableStateOf<Job?>(null) }
+
+        val mediaOptimizationSelectorPresenters = remember {
+            attachments
+                .filterIsInstance<Attachment.Media>()
+                .mapIndexed { index, attachment ->
+                    mediaOptimizationSelectorPresenterFactory.create(
+                        index = index,
+                        localMedia = attachment.localMedia,
+                        sendAsFile = attachment.sendAsFile,
+                    )
+                }
+        }
+        val mediaOptimizationSelectorStates by rememberUpdatedState(
+            mediaOptimizationSelectorPresenters.map {
+                it.present()
+            }.toImmutableList()
+        )
 
         val observableSendState = snapshotFlow { sendActionState.value }
 
         var displayFileTooLargeError by remember { mutableStateOf(false) }
 
         LaunchedEffect(
-            mediaOptimizationSelectorState.displayMediaSelectorViews,
-            mediaOptimizationSelectorState.videoSizeEstimations,
-            currentAttachment,
+            mediaOptimizationSelectorStates,
             imageEditorState,
             isApplyingImageEdits,
+            editedAttachments,
         ) {
+            if (mediaOptimizationSelectorStates.any { it.displayMediaSelectorViews == true } ||
+                imageEditorState != null ||
+                isApplyingImageEdits
+            ) {
+                // If any of the media optimization selectors are displayed, we don't want to pre-process the media yet
+                return@LaunchedEffect
+            }
             // If the media optimization selector is not displayed, we can pre-process the media
             // to prepare it for sending. This is done to avoid blocking the UI thread when the
             // user clicks on the send button.
-            @Suppress("ComplexCondition")
-            if (mediaOptimizationSelectorState.displayMediaSelectorViews == false &&
-                preprocessMediaJob == null &&
-                imageEditorState == null &&
-                !isApplyingImageEdits) {
-                if (mediaAttachment.localMedia.info.mimeType.isMimeTypeVideo() && mediaOptimizationSelectorState.videoSizeEstimations.dataOrNull() == null) {
-                    Timber.d("Waiting for video size estimations to be able to select the best video compression preset before pre-processing the media")
-                    return@LaunchedEffect
-                }
-                val config = getAutoPreprocessMediaOptimizationConfig(
-                    mediaAttachment = mediaAttachment,
+            val configs = mediaOptimizationSelectorStates.mapIndexed { index, mediaOptimizationSelectorState ->
+                getAutoPreprocessMediaOptimizationConfig(
+                    mediaAttachment = editedAttachments[index] as Attachment.Media,
                     mediaOptimizationSelectorState = mediaOptimizationSelectorState,
-                ) ?: return@LaunchedEffect
-                preprocessMediaJob = coroutineScope.preProcessAttachment(
-                    attachment = currentAttachment,
-                    mediaOptimizationConfig = config,
+                )
+            }
+            preprocessMediaJob?.cancel()
+            preprocessMediaJob = coroutineScope.launch(dispatchers.io) {
+                preProcessAttachments(
+                    attachments = editedAttachments,
+                    mediaOptimizationConfigs = configs,
                     displayProgress = false,
                     sendActionState = sendActionState,
                 )
             }
         }
 
-        LaunchedEffect(originalLocalMedia) {
-            canEditImage = originalLocalMedia.info.canEditImage() || attachmentImageEditor.canEdit(originalLocalMedia)
+        LaunchedEffect(currentIndex) {
+            val currentMedia = (attachments.getOrNull(currentIndex) as? Attachment.Media)?.localMedia
+            if (currentMedia != null) {
+                canEditImage = currentMedia.info.canEditImage() || attachmentImageEditor.canEdit(currentMedia)
+            }
         }
 
-        val maxUploadSize = mediaOptimizationSelectorState.maxUploadSize.dataOrNull()
+        val maxUploadSize = mediaOptimizationSelectorStates.firstNotNullOfOrNull {
+            it.maxUploadSize.dataOrNull()
+        }
         LaunchedEffect(maxUploadSize) {
-            // Check file upload size if the media won't be processed for upload
-            val isImageFile = mediaAttachment.localMedia.info.isImageAttachment()
-            val isVideoFile = mediaAttachment.localMedia.info.mimeType.isMimeTypeVideo()
-            if (maxUploadSize != null && !(isImageFile || isVideoFile)) {
+            if (maxUploadSize != null) {
                 // If file size is not known, we're permissive and allow sending. The SDK will cancel the upload if needed.
-                val fileSize = mediaAttachment.localMedia.info.fileSize ?: 0L
-                if (maxUploadSize < fileSize) {
-                    displayFileTooLargeError = true
+                displayFileTooLargeError = attachments.any { attachment ->
+                    when (attachment) {
+                        is Attachment.Media -> {
+                            val isImageFile = attachment.localMedia.info.isImageAttachment()
+                            val isVideoFile = attachment.localMedia.info.mimeType.isMimeTypeVideo()
+                            if (isImageFile || isVideoFile) {
+                                false
+                            } else {
+                                val fileSize = attachment.localMedia.info.fileSize ?: 0L
+                                maxUploadSize < fileSize
+                            }
+                        }
+                    }
                 }
             }
         }
 
-        val videoSizeEstimations = mediaOptimizationSelectorState.videoSizeEstimations.dataOrNull()
-        LaunchedEffect(videoSizeEstimations) {
-            if (videoSizeEstimations != null) {
-                // Check if the video size estimations are too large for the max upload size
-                displayFileTooLargeError = videoSizeEstimations.none { it.canUpload }
+        mediaOptimizationSelectorStates.forEach { mediaOptimizationSelectorState ->
+            val videoSizeEstimations = mediaOptimizationSelectorState.videoSizeEstimations.dataOrNull()
+            LaunchedEffect(videoSizeEstimations) {
+                if (videoSizeEstimations != null) {
+                    // Check if the video size estimations are too large for the max upload size
+                    displayFileTooLargeError = videoSizeEstimations.none { it.canUpload }
+                }
             }
         }
 
@@ -185,19 +229,23 @@ class AttachmentsPreviewPresenter(
             when (event) {
                 is AttachmentsPreviewEvent.SendAttachment -> {
                     ongoingSendAttachmentJob.value = coroutineScope.launch {
-                        // If the media optimization selector is displayed, we need to wait for the user to select the options
-                        // before we can pre-process the media.
-                        if (mediaOptimizationSelectorState.displayMediaSelectorViews == true) {
-                            val config = MediaOptimizationConfig(
-                                compressImages = mediaOptimizationSelectorState.isImageOptimizationEnabled == true,
-                                videoCompressionPreset = mediaOptimizationSelectorState.selectedVideoPreset ?: VideoCompressionPreset.STANDARD,
-                            )
-                            preprocessMediaJob = preProcessAttachment(
-                                attachment = currentAttachment,
-                                mediaOptimizationConfig = config,
-                                displayProgress = true,
-                                sendActionState = sendActionState,
-                            )
+                        if (preprocessMediaJob?.isActive != true && sendActionState.value !is SendActionState.Sending.ReadyToUpload) {
+                            val configs = mediaOptimizationSelectorStates.map {
+                                MediaOptimizationConfig(
+                                    compressImages = it.isImageOptimizationEnabled
+                                        ?: mediaOptimizationConfigProvider.get().compressImages,
+                                    videoCompressionPreset = it.selectedVideoPreset
+                                        ?: mediaOptimizationConfigProvider.get().videoCompressionPreset,
+                                )
+                            }
+                            preprocessMediaJob = coroutineScope.launch(dispatchers.io) {
+                                preProcessAttachments(
+                                    attachments = editedAttachments,
+                                    mediaOptimizationConfigs = configs,
+                                    displayProgress = true,
+                                    sendActionState = sendActionState,
+                                )
+                            }
                         }
 
                         // If the processing was hidden before, make it visible now
@@ -206,35 +254,27 @@ class AttachmentsPreviewPresenter(
                         }
 
                         // Wait until the media is ready to be uploaded
-                        val mediaUploadInfo = observableSendState.firstInstanceOf<SendActionState.Sending.ReadyToUpload>().mediaInfo
+                        val allMediaUploadInfos = observableSendState.firstInstanceOf<SendActionState.Sending.ReadyToUpload>().mediaInfos
 
                         // Pre-processing is done, send the attachment
                         val caption = markdownTextEditorState.getMessageMarkdown(permalinkBuilder)
                             .takeIf { it.isNotEmpty() }
 
-                        val editedTempFileToDelete = editedTempFile
-                        editedTempFile = null
-
-                        // If we're supposed to send the media as a background job, we can dismiss this screen already
-                        if (coroutineContext.isActive) {
-                            onDoneListener()
-                        }
+                        val editedTempFilesToDelete = editedTempFiles
+                        editedTempFiles = emptyMap()
 
                         // Send the media using the session coroutine scope so it doesn't matter if this screen or the chat one are closed
                         sessionCoroutineScope.launch(dispatchers.io) {
-                            try {
-                                sendPreProcessedMedia(
-                                    mediaUploadInfo = mediaUploadInfo,
-                                    caption = caption,
-                                    sendActionState = sendActionState,
-                                    dismissAfterSend = false,
-                                    inReplyToEventId = inReplyToEventId,
-                                )
-                            } finally {
-                                editedTempFileToDelete?.safeDelete()
-                                // Clean up the pre-processed media after it's been sent
-                                mediaSender.cleanUp()
-                            }
+                            sendMedia(
+                                mediaUploadInfos = allMediaUploadInfos,
+                                caption = caption,
+                                sendActionState = sendActionState,
+                                inReplyToEventId = inReplyToEventId,
+                            )
+
+                            // Clean up the pre-processed media after it's been sent
+                            mediaSender.cleanUp()
+                            editedTempFilesToDelete.values.forEach { it.safeDelete() }
                         }
                     }
                 }
@@ -251,7 +291,11 @@ class AttachmentsPreviewPresenter(
                     ongoingSendAttachmentJob.value?.cancel()
 
                     // Dismiss the screen
-                    dismiss(sendActionState, editedTempFile)
+                    dismiss(
+                        attachments = editedAttachments,
+                        sendActionState = sendActionState,
+                        editedTempFiles = editedTempFiles,
+                    )
                 }
                 AttachmentsPreviewEvent.CancelAndClearSendState -> {
                     // Cancel media sending
@@ -260,22 +304,23 @@ class AttachmentsPreviewPresenter(
                         ongoingSendAttachmentJob.value = null
                     }
 
-                    val mediaUploadInfo = sendActionState.value.mediaUploadInfo()
-                    sendActionState.value = if (mediaUploadInfo != null) {
-                        SendActionState.Sending.ReadyToUpload(mediaUploadInfo)
+                    val mediaUploadInfoList = sendActionState.value.mediaUploadInfoList()
+                    sendActionState.value = if (mediaUploadInfoList != null) {
+                        SendActionState.Sending.ReadyToUpload(mediaUploadInfoList)
                     } else {
                         SendActionState.Idle
                     }
                 }
                 AttachmentsPreviewEvent.OpenImageEditor -> {
-                    val resolvedCanEditImage = canEditImage || originalLocalMedia.info.canEditImage()
+                    val currentLocalMedia = (attachments.getOrNull(currentIndex) as? Attachment.Media)?.localMedia ?: return
+                    val resolvedCanEditImage = canEditImage || currentLocalMedia.info.canEditImage()
                     if (resolvedCanEditImage) {
                         preprocessMediaJob?.cancel()
                         preprocessMediaJob = null
                         resetPreparedMedia(sendActionState)
                         imageEditorState = AttachmentImageEditorState(
-                            localMedia = originalLocalMedia,
-                            edits = appliedImageEdits,
+                            localMedia = currentLocalMedia,
+                            edits = attachmentsAndEdits.get(currentIndex).edits,
                             previewDebug = false,
                         )
                     }
@@ -315,10 +360,15 @@ class AttachmentsPreviewPresenter(
                 AttachmentsPreviewEvent.ApplyImageEdits -> {
                     val pendingState = imageEditorState ?: return
                     if (!pendingState.edits.hasChanges) {
-                        editedTempFile?.safeDelete()
-                        editedTempFile = null
-                        appliedImageEdits = pendingState.edits
-                        currentAttachment = Attachment.Media(originalLocalMedia)
+                        editedTempFiles[currentIndex]?.safeDelete()
+                        editedTempFiles = editedTempFiles - currentIndex
+                        val currentAttachment = attachmentsAndEdits[currentIndex].attachment
+                        attachmentsAndEdits = attachmentsAndEdits.toMutableList().also {
+                            it[currentIndex] = AttachmentAndEdits(
+                                currentAttachment,
+                                pendingState.edits,
+                            )
+                        }.toImmutableList()
                         imageEditorState = null
                         resetPreparedMedia(sendActionState)
                         return
@@ -328,16 +378,21 @@ class AttachmentsPreviewPresenter(
                     coroutineScope.launch {
                         val result = withContext(dispatchers.io) {
                             attachmentImageEditor.exportEdits(
-                                localMedia = originalLocalMedia,
+                                localMedia = pendingState.localMedia,
                                 edits = pendingState.edits,
                             )
                         }
                         result.fold(
                             onSuccess = { editedMedia ->
-                                editedTempFile?.safeDelete()
-                                editedTempFile = editedMedia.file
-                                appliedImageEdits = pendingState.edits
-                                currentAttachment = Attachment.Media(editedMedia.localMedia)
+                                editedTempFiles[currentIndex]?.safeDelete()
+                                editedTempFiles = editedTempFiles + (currentIndex to editedMedia.file)
+                                val currentAttachment = Attachment.Media(editedMedia.localMedia)
+                                attachmentsAndEdits = attachmentsAndEdits.toMutableList().also {
+                                    it[currentIndex] = AttachmentAndEdits(
+                                        currentAttachment,
+                                        pendingState.edits,
+                                    )
+                                }.toImmutableList()
                                 imageEditorState = null
                                 resetPreparedMedia(sendActionState)
                             },
@@ -352,19 +407,23 @@ class AttachmentsPreviewPresenter(
                 AttachmentsPreviewEvent.ClearImageEditError -> {
                     displayImageEditError = false
                 }
+                is AttachmentsPreviewEvent.SetCurrentCarouselIndex -> {
+                    currentIndex = event.index
+                }
             }
         }
 
         return AttachmentsPreviewState(
-            attachment = currentAttachment,
+            attachments = editedAttachments,
             imageEditorState = imageEditorState,
             canEditImage = canEditImage,
             isApplyingImageEdits = isApplyingImageEdits,
             displayImageEditError = displayImageEditError,
             sendActionState = sendActionState.value,
             textEditorState = textEditorState,
-            mediaOptimizationSelectorState = mediaOptimizationSelectorState,
+            mediaOptimizationSelectorState = mediaOptimizationSelectorStates[currentIndex],
             displayFileTooLargeError = displayFileTooLargeError,
+            currentIndex = currentIndex,
             eventSink = ::handleEvent,
         )
     }
@@ -372,7 +431,7 @@ class AttachmentsPreviewPresenter(
     private suspend fun getAutoPreprocessMediaOptimizationConfig(
         mediaAttachment: Attachment.Media,
         mediaOptimizationSelectorState: MediaOptimizationSelectorState,
-    ): MediaOptimizationConfig? {
+    ): MediaOptimizationConfig {
         return if (mediaAttachment.sendAsFile) {
             // If we're sending the media as a file, we can skip image compression and we should select the highest video compression preset that still fits
             // the upload limit (if the estimations are available)
@@ -386,71 +445,66 @@ class AttachmentsPreviewPresenter(
                 videoCompressionPreset = videoCompressionPreset,
             )
         } else {
-            // Otherwise, we just rely on the user preferences for media optimization
-            mediaOptimizationConfigProvider.get()
+            MediaOptimizationConfig(
+                compressImages = mediaOptimizationSelectorState.isImageOptimizationEnabled
+                    ?: mediaOptimizationConfigProvider.get().compressImages,
+                videoCompressionPreset = mediaOptimizationSelectorState.selectedVideoPreset
+                    ?: mediaOptimizationConfigProvider.get().videoCompressionPreset,
+            )
         }
     }
 
-    private fun CoroutineScope.preProcessAttachment(
-        attachment: Attachment,
-        mediaOptimizationConfig: MediaOptimizationConfig,
-        displayProgress: Boolean,
-        sendActionState: MutableState<SendActionState>,
-    ) = launch(dispatchers.io) {
-        when (attachment) {
-            is Attachment.Media -> {
-                preProcessMedia(
-                    mediaAttachment = attachment,
-                    mediaOptimizationConfig = mediaOptimizationConfig,
-                    displayProgress = displayProgress,
-                    sendActionState = sendActionState,
-                )
-            }
-        }
-    }
-
-    private suspend fun preProcessMedia(
-        mediaAttachment: Attachment.Media,
-        mediaOptimizationConfig: MediaOptimizationConfig,
+    private suspend fun preProcessAttachments(
+        attachments: List<Attachment>,
+        mediaOptimizationConfigs: List<MediaOptimizationConfig>,
         displayProgress: Boolean,
         sendActionState: MutableState<SendActionState>,
     ) {
         sendActionState.value = SendActionState.Sending.Processing(displayProgress = displayProgress)
-        mediaSender.preProcessMedia(
-            uri = mediaAttachment.localMedia.uri,
-            mimeType = mediaAttachment.localMedia.info.mimeType,
-            mediaOptimizationConfig = mediaOptimizationConfig,
-        ).fold(
-            onSuccess = { mediaUploadInfo ->
-                Timber.d("Media ${mediaUploadInfo.file.path.orEmpty().hash()} finished processing, it's now ready to upload")
-                sendActionState.value = SendActionState.Sending.ReadyToUpload(mediaUploadInfo)
-            },
-            onFailure = {
-                Timber.e(it, "Failed to pre-process media")
-                if (it is CancellationException) {
-                    throw it
-                } else {
-                    sendActionState.value = SendActionState.Failure(it, null)
-                }
-            }
-        )
-    }
-
-    private fun dismiss(
-        sendActionState: MutableState<SendActionState>,
-        editedTempFile: File?,
-    ) {
-        // Delete the temporary file
-        when (attachment) {
-            is Attachment.Media -> {
-                temporaryUriDeleter.delete(attachment.localMedia.uri)
-                sendActionState.value.mediaUploadInfo()?.let { data ->
-                    cleanUp(data)
+        val mediaUploadInfos = mutableListOf<MediaUploadInfo>()
+        attachments.forEachIndexed { index, attachment ->
+            when (attachment) {
+                is Attachment.Media -> {
+                    mediaSender.preProcessMedia(
+                        uri = attachment.localMedia.uri,
+                        mimeType = attachment.localMedia.info.mimeType,
+                        mediaOptimizationConfig = mediaOptimizationConfigs[index],
+                    ).fold(
+                        onSuccess = { mediaUploadInfo ->
+                            Timber.d("Media ${mediaUploadInfo.file.path.orEmpty().hash()} finished processing")
+                            mediaUploadInfos.add(mediaUploadInfo)
+                        },
+                        onFailure = {
+                            Timber.e(it, "Failed to pre-process media")
+                            if (it is CancellationException) {
+                                throw it
+                            } else {
+                                sendActionState.value = SendActionState.Failure(it, emptyList())
+                                return
+                            }
+                        }
+                    )
                 }
             }
         }
-        editedTempFile?.safeDelete()
-        // Reset the sendActionState to ensure that dialog is closed before the screen
+        sendActionState.value = SendActionState.Sending.ReadyToUpload(mediaUploadInfos)
+    }
+
+    private fun dismiss(
+        attachments: List<Attachment>,
+        sendActionState: MutableState<SendActionState>,
+        editedTempFiles: Map<Int, File> = emptyMap(),
+    ) {
+        for (attachment in attachments) {
+            when (attachment) {
+                is Attachment.Media -> {
+                    temporaryUriDeleter.delete(attachment.localMedia.uri)
+                }
+            }
+        }
+        val uploadInfos = (sendActionState.value as? SendActionState.Sending.ReadyToUpload)?.mediaInfos
+        uploadInfos?.forEach { cleanUp(it) }
+        editedTempFiles.values.forEach { it.safeDelete() }
         sendActionState.value = SendActionState.Done
         onDoneListener()
     }
@@ -464,41 +518,45 @@ class AttachmentsPreviewPresenter(
     }
 
     private fun resetPreparedMedia(sendActionState: MutableState<SendActionState>) {
-        sendActionState.value.mediaUploadInfo()?.let(::cleanUp)
+        sendActionState.value.mediaUploadInfoList()?.forEach(::cleanUp)
         mediaSender.cleanUp()
         sendActionState.value = SendActionState.Idle
     }
 
-    private suspend fun sendPreProcessedMedia(
-        mediaUploadInfo: MediaUploadInfo,
+    private suspend fun sendMedia(
+        mediaUploadInfos: List<MediaUploadInfo>,
         caption: String?,
         sendActionState: MutableState<SendActionState>,
-        dismissAfterSend: Boolean,
         inReplyToEventId: EventId?,
     ) = runCatchingExceptions {
-        sendActionState.value = SendActionState.Sending.Uploading(mediaUploadInfo)
-        mediaSender.sendPreProcessedMedia(
-            mediaUploadInfo = mediaUploadInfo,
-            caption = caption,
-            formattedCaption = null,
-            inReplyToEventId = inReplyToEventId,
-        ).getOrThrow()
+        if (mediaUploadInfos.size == 1) {
+            sendActionState.value = SendActionState.Sending.Uploading(mediaUploadInfos)
+            mediaSender.sendPreProcessedMedia(
+                mediaUploadInfo = mediaUploadInfos.first(),
+                caption = caption,
+                formattedCaption = null,
+                inReplyToEventId = inReplyToEventId,
+            ).getOrThrow()
+        } else {
+            mediaSender.sendGallery(
+                mediaUploadInfos = mediaUploadInfos,
+                caption = caption,
+                formattedCaption = null,
+                inReplyToEventId = inReplyToEventId,
+            ).getOrThrow()
+        }
     }.fold(
         onSuccess = {
-            cleanUp(mediaUploadInfo)
-            // Reset the sendActionState to ensure that dialog is closed before the screen
+            mediaUploadInfos.forEach { cleanUp(it) }
             sendActionState.value = SendActionState.Done
-
-            if (dismissAfterSend) {
-                onDoneListener()
-            }
+            onDoneListener()
         },
         onFailure = { error ->
             Timber.e(error, "Failed to send attachment")
             if (error is CancellationException) {
                 throw error
             } else {
-                sendActionState.value = SendActionState.Failure(error, mediaUploadInfo)
+                sendActionState.value = SendActionState.Failure(error, mediaUploadInfos)
             }
         }
     )

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/attachments/preview/AttachmentsPreviewState.kt

@@ -14,9 +14,10 @@ import io.element.android.features.messages.impl.attachments.preview.imageeditor
 import io.element.android.features.messages.impl.attachments.video.MediaOptimizationSelectorState
 import io.element.android.libraries.mediaupload.api.MediaUploadInfo
 import io.element.android.libraries.textcomposer.model.TextEditorState
+import kotlinx.collections.immutable.ImmutableList
 
 data class AttachmentsPreviewState(
-    val attachment: Attachment,
+    val attachments: ImmutableList<Attachment>,
     val imageEditorState: AttachmentImageEditorState?,
     val canEditImage: Boolean,
     val isApplyingImageEdits: Boolean,
@@ -25,8 +26,12 @@ data class AttachmentsPreviewState(
     val textEditorState: TextEditorState,
     val mediaOptimizationSelectorState: MediaOptimizationSelectorState,
     val displayFileTooLargeError: Boolean,
+    val currentIndex: Int,
     val eventSink: (AttachmentsPreviewEvent) -> Unit,
-)
+) {
+    val isGallery: Boolean get() = attachments.size > 1
+    val totalCount: Int get() = attachments.size
+}
 
 @Immutable
 sealed interface SendActionState {
@@ -35,17 +40,17 @@ sealed interface SendActionState {
     @Immutable
     sealed interface Sending : SendActionState {
         data class Processing(val displayProgress: Boolean) : Sending
-        data class ReadyToUpload(val mediaInfo: MediaUploadInfo) : Sending
-        data class Uploading(val mediaUploadInfo: MediaUploadInfo) : Sending
+        data class ReadyToUpload(val mediaInfos: List<MediaUploadInfo>) : Sending
+        data class Uploading(val mediaInfos: List<MediaUploadInfo>) : Sending
     }
 
-    data class Failure(val error: Throwable, val mediaUploadInfo: MediaUploadInfo?) : SendActionState
+    data class Failure(val error: Throwable, val mediaInfos: List<MediaUploadInfo>) : SendActionState
     data object Done : SendActionState
 
-    fun mediaUploadInfo(): MediaUploadInfo? = when (this) {
-        is Sending.ReadyToUpload -> mediaInfo
-        is Sending.Uploading -> mediaUploadInfo
-        is Failure -> mediaUploadInfo
+    fun mediaUploadInfoList(): List<MediaUploadInfo>? = when (this) {
+        is Sending.ReadyToUpload -> mediaInfos
+        is Sending.Uploading -> mediaInfos
+        is Failure -> mediaInfos
         else -> null
     }
 }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/attachments/preview/AttachmentsPreviewStateProvider.kt

@@ -41,9 +41,9 @@ open class AttachmentsPreviewStateProvider : PreviewParameterProvider<Attachment
                 )
             ),
             anAttachmentsPreviewState(sendActionState = SendActionState.Sending.Processing(displayProgress = true)),
-            anAttachmentsPreviewState(sendActionState = SendActionState.Sending.ReadyToUpload(aMediaUploadInfo())),
-            anAttachmentsPreviewState(sendActionState = SendActionState.Sending.Uploading(aMediaUploadInfo())),
-            anAttachmentsPreviewState(sendActionState = SendActionState.Failure(RuntimeException("error"), aMediaUploadInfo())),
+            anAttachmentsPreviewState(sendActionState = SendActionState.Sending.ReadyToUpload(listOf(aMediaUploadInfo()))),
+            anAttachmentsPreviewState(sendActionState = SendActionState.Sending.Uploading(listOf(aMediaUploadInfo()))),
+            anAttachmentsPreviewState(sendActionState = SendActionState.Failure(RuntimeException("error"), listOf(aMediaUploadInfo()))),
             anAttachmentsPreviewState(
                 imageEditorState = anAttachmentImageEditorState(),
             ),
@@ -72,9 +72,12 @@ fun anAttachmentsPreviewState(
     imageEditorState: AttachmentImageEditorState? = null,
     mediaOptimizationSelectorState: MediaOptimizationSelectorState = aMediaOptimisationSelectorState(),
     displayFileTooLargeError: Boolean = false,
+    currentIndex: Int = 0,
 ) = AttachmentsPreviewState(
-    attachment = Attachment.Media(
-        localMedia = LocalMedia("file://path".toUri(), mediaInfo),
+    attachments = persistentListOf(
+        Attachment.Media(
+            localMedia = LocalMedia("file://path".toUri(), mediaInfo),
+        ),
     ),
     imageEditorState = imageEditorState,
     canEditImage = true,
@@ -84,6 +87,37 @@ fun anAttachmentsPreviewState(
     textEditorState = textEditorState,
     mediaOptimizationSelectorState = mediaOptimizationSelectorState,
     displayFileTooLargeError = displayFileTooLargeError,
+    currentIndex = currentIndex,
+    eventSink = {}
+)
+
+fun anAttachmentsPreviewGalleryState(
+    mediaInfo: MediaInfo = anImageMediaInfo(),
+    textEditorState: TextEditorState = aTextEditorStateMarkdown(),
+    sendActionState: SendActionState = SendActionState.Idle,
+    mediaOptimizationSelectorState: MediaOptimizationSelectorState = aMediaOptimisationSelectorState(),
+    currentIndex: Int = 0,
+) = AttachmentsPreviewState(
+    attachments = persistentListOf(
+        Attachment.Media(
+            localMedia = LocalMedia("file://path1".toUri(), mediaInfo),
+        ),
+        Attachment.Media(
+            localMedia = LocalMedia("file://path2".toUri(), mediaInfo),
+        ),
+        Attachment.Media(
+            localMedia = LocalMedia("file://path3".toUri(), mediaInfo),
+        ),
+    ),
+    imageEditorState = null,
+    canEditImage = false,
+    isApplyingImageEdits = false,
+    displayImageEditError = false,
+    sendActionState = sendActionState,
+    textEditorState = textEditorState,
+    mediaOptimizationSelectorState = mediaOptimizationSelectorState,
+    displayFileTooLargeError = false,
+    currentIndex = currentIndex,
     eventSink = {}
 )
 
@@ -112,6 +146,7 @@ fun aMediaOptimisationSelectorState(
     displayMediaSelectorViews: Boolean = true,
     displayVideoPresetSelectorDialog: Boolean = false,
 ) = MediaOptimizationSelectorState(
+    index = 0,
     maxUploadSize = AsyncData.Success(maxUploadSize),
     videoSizeEstimations = videoSizeEstimations,
     isImageOptimizationEnabled = isImageOptimizationEnabled,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/attachments/preview/AttachmentsPreviewView.kt

@@ -9,11 +9,15 @@
 package io.element.android.features.messages.impl.attachments.preview
 
 import androidx.activity.compose.BackHandler
-import androidx.compose.foundation.Image
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -21,15 +25,19 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.heading
 import androidx.compose.ui.semantics.semantics
@@ -62,11 +70,11 @@ import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.theme.components.ListItem
 import io.element.android.libraries.designsystem.theme.components.Scaffold
+import io.element.android.libraries.designsystem.theme.components.Surface
 import io.element.android.libraries.designsystem.theme.components.Switch
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TopAppBar
-import io.element.android.libraries.designsystem.utils.CommonDrawables
-import io.element.android.libraries.mediaviewer.api.local.LocalMedia
+import io.element.android.libraries.designsystem.theme.floatingDateBadgeBackground
 import io.element.android.libraries.mediaviewer.api.local.LocalMediaRenderer
 import io.element.android.libraries.preferences.api.store.VideoCompressionPreset
 import io.element.android.libraries.textcomposer.TextComposer
@@ -77,6 +85,9 @@ import io.element.android.libraries.ui.utils.formatter.rememberFileSizeFormatter
 import io.element.android.wysiwyg.display.TextDisplay
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.persistentListOf
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.collectLatest
+import kotlin.time.Duration.Companion.milliseconds
 
 /**
  * Ref: https://www.figma.com/design/zftpgS6LjiczobJZ1GUNpt/Updates-to-Media---File-Upload?node-id=51-3514
@@ -252,6 +263,7 @@ private fun AttachmentSendStateView(
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
 @Composable
 private fun AttachmentPreviewContent(
     state: AttachmentsPreviewState,
@@ -267,15 +279,74 @@ private fun AttachmentPreviewContent(
         Box(
             modifier = Modifier
                 .weight(1f),
-            contentAlignment = Alignment.Center
+            contentAlignment = Alignment.Center,
         ) {
-            when (val attachment = state.attachment) {
-                is Attachment.Media -> {
-                    localMediaRenderer.Render(attachment.localMedia)
+            if (state.isGallery) {
+                val pagerState = rememberPagerState(
+                    initialPage = state.currentIndex,
+                    pageCount = { state.attachments.size },
+                )
+                var isPillVisible by remember { mutableStateOf(true) }
+
+                HorizontalPager(
+                    state = pagerState,
+                    modifier = Modifier.fillMaxSize(),
+                    beyondViewportPageCount = 1,
+                    contentPadding = PaddingValues(horizontal = 20.dp),
+                    pageSpacing = 10.dp,
+                ) { page ->
+                    Box(
+                        modifier = Modifier.fillMaxSize(),
+                        contentAlignment = Alignment.Center,
+                    ) {
+                        val attachment = state.attachments[page]
+                        when (attachment) {
+                            is Attachment.Media -> {
+                                localMediaRenderer.Render(attachment.localMedia)
+                            }
+                        }
+                    }
+                }
+
+                LaunchedEffect(pagerState) {
+                    snapshotFlow { pagerState.isScrollInProgress }
+                        .collectLatest { isScrolling ->
+                            if (isScrolling) {
+                                isPillVisible = true
+                            } else {
+                                delay(2000.milliseconds)
+                                isPillVisible = false
+                            }
+                        }
+                }
+
+                androidx.compose.animation.AnimatedVisibility(
+                    visible = isPillVisible,
+                    enter = fadeIn(animationSpec = tween(150)),
+                    exit = fadeOut(animationSpec = tween(300)),
+                    modifier = Modifier
+                        .align(Alignment.TopCenter)
+                        .padding(top = 8.dp),
+                ) {
+                    GalleryCarouselPill(
+                        currentIndex = pagerState.currentPage + 1,
+                        totalCount = state.totalCount,
+                    )
+                }
+
+                LaunchedEffect(pagerState.currentPage) {
+                    state.eventSink(AttachmentsPreviewEvent.SetCurrentCarouselIndex(pagerState.currentPage))
+                }
+            } else {
+                val firstAttachment = state.attachments.first()
+                when (firstAttachment) {
+                    is Attachment.Media -> {
+                        localMediaRenderer.Render(firstAttachment.localMedia)
+                    }
                 }
             }
         }
-        val mediaInfo = (state.attachment as? Attachment.Media)?.localMedia?.info
+        val mediaInfo = (state.attachments[state.currentIndex] as? Attachment.Media)?.localMedia?.info
         if (mediaInfo?.isImageAttachment() == true) {
             ImageOptimizationSelector(state.mediaOptimizationSelectorState)
         } else if (mediaInfo?.mimeType?.isMimeTypeVideo() == true) {
@@ -485,16 +556,16 @@ private fun AttachmentsPreviewBottomActions(
 internal fun AttachmentsPreviewViewPreview(@PreviewParameter(AttachmentsPreviewStateProvider::class) state: AttachmentsPreviewState) = ElementPreviewDark {
     AttachmentsPreviewView(
         state = state,
-        localMediaRenderer = object : LocalMediaRenderer {
-            @Composable
-            override fun Render(localMedia: LocalMedia) {
-                Image(
-                    painter = painterResource(id = CommonDrawables.sample_background),
-                    modifier = Modifier.fillMaxSize(),
-                    contentDescription = null,
-                )
-            }
-        }
+        localMediaRenderer = SampleMediaRenderer(),
+    )
+}
+
+@Preview
+@Composable
+internal fun AttachmentsPreviewGalleryViewPreview() = ElementPreviewDark {
+    AttachmentsPreviewView(
+        state = anAttachmentsPreviewGalleryState(),
+        localMediaRenderer = SampleMediaRenderer(),
     )
 }
 
@@ -537,3 +608,24 @@ fun VideoCompressionPreset.subtitle(): String {
         }
     )
 }
+
+@Composable
+internal fun GalleryCarouselPill(
+    currentIndex: Int,
+    totalCount: Int,
+    modifier: Modifier = Modifier,
+) {
+    Surface(
+        modifier = modifier,
+        shape = RoundedCornerShape(16.dp),
+        color = ElementTheme.colors.floatingDateBadgeBackground,
+        shadowElevation = 4.dp,
+    ) {
+        Text(
+            modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
+            text = stringResource(R.string.screen_media_upload_preview_item_count, currentIndex, totalCount),
+            style = ElementTheme.typography.fontBodyMdMedium,
+            color = ElementTheme.colors.textPrimary,
+        )
+    }
+}

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/attachments/preview/SampleMediaRenderer.kt

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.features.messages.impl.attachments.preview
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import io.element.android.libraries.designsystem.utils.CommonDrawables
+import io.element.android.libraries.mediaviewer.api.local.LocalMedia
+import io.element.android.libraries.mediaviewer.api.local.LocalMediaRenderer
+
+/**
+ * An implementation of [LocalMediaRenderer] that displays a sample background image.
+ * To be used for Previews only.
+ */
+internal class SampleMediaRenderer : LocalMediaRenderer {
+    @Composable
+    override fun Render(localMedia: LocalMedia) {
+        Image(
+            painter = painterResource(id = CommonDrawables.sample_background),
+            modifier = Modifier.fillMaxSize(),
+            contentDescription = null,
+        )
+    }
+}

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/attachments/video/DefaultMediaOptimizationSelectorPresenter.kt

@@ -36,6 +36,7 @@ import kotlin.math.roundToLong
 
 @AssistedInject
 class DefaultMediaOptimizationSelectorPresenter(
+    @Assisted private val index: Int,
     @Assisted private val localMedia: LocalMedia,
     @Assisted private val sendAsFile: Boolean,
     private val maxUploadSizeProvider: MaxUploadSizeProvider,
@@ -48,6 +49,7 @@ class DefaultMediaOptimizationSelectorPresenter(
     @AssistedFactory
     interface Factory : MediaOptimizationSelectorPresenter.Factory {
         override fun create(
+            index: Int,
             localMedia: LocalMedia,
             sendAsFile: Boolean,
         ): DefaultMediaOptimizationSelectorPresenter
@@ -183,6 +185,7 @@ class DefaultMediaOptimizationSelectorPresenter(
         }
 
         return MediaOptimizationSelectorState(
+            index = index,
             maxUploadSize = maxUploadSize,
             videoSizeEstimations = videoSizeEstimations,
             isImageOptimizationEnabled = selectedImageOptimization.dataOrNull(),

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/attachments/video/MediaOptimizationSelectorPresenter.kt

@@ -14,6 +14,7 @@ import io.element.android.libraries.mediaviewer.api.local.LocalMedia
 fun interface MediaOptimizationSelectorPresenter : Presenter<MediaOptimizationSelectorState> {
     interface Factory {
         fun create(
+            index: Int,
             localMedia: LocalMedia,
             sendAsFile: Boolean,
         ): MediaOptimizationSelectorPresenter

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/attachments/video/MediaOptimizationSelectorState.kt

@@ -13,6 +13,8 @@ import io.element.android.libraries.preferences.api.store.VideoCompressionPreset
 import kotlinx.collections.immutable.ImmutableList
 
 data class MediaOptimizationSelectorState(
+    // Adding an index helps to fix a Compose issue where the state of the wrong item is updated
+    val index: Int,
     val maxUploadSize: AsyncData<Long>,
     val videoSizeEstimations: AsyncData<ImmutableList<VideoUploadEstimation>>,
     val isImageOptimizationEnabled: Boolean?,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/crypto/identity/MessagesViewWithIdentityChangePreview.kt

@@ -35,6 +35,7 @@ internal fun MessagesViewWithIdentityChangePreview(
         onBackClick = {},
         onRoomDetailsClick = {},
         onEventContentClick = { _, _ -> false },
+        onGalleryEventItemClick = { _, _, _ -> false },
         onUserDataClick = {},
         onLinkClick = { _, _ -> },
         onSendLocationClick = {},

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/MessageComposerPresenter.kt

@@ -34,7 +34,6 @@ import im.vector.app.features.analytics.plan.Interaction
 import io.element.android.features.location.api.LocationService
 import io.element.android.features.messages.impl.MessagesNavigator
 import io.element.android.features.messages.impl.attachments.Attachment
-import io.element.android.features.messages.impl.attachments.Attachment.Media
 import io.element.android.features.messages.impl.attachments.preview.error.sendAttachmentError
 import io.element.android.features.messages.impl.draft.ComposerDraftService
 import io.element.android.features.messages.impl.messagecomposer.suggestions.RoomAliasSuggestionsDataSource
@@ -48,6 +47,8 @@ import io.element.android.libraries.core.mimetype.MimeTypes
 import io.element.android.libraries.designsystem.utils.snackbar.SnackbarDispatcher
 import io.element.android.libraries.designsystem.utils.snackbar.SnackbarMessage
 import io.element.android.libraries.di.annotations.SessionCoroutineScope
+import io.element.android.libraries.featureflag.api.FeatureFlagService
+import io.element.android.libraries.featureflag.api.FeatureFlags
 import io.element.android.libraries.matrix.api.core.EventId
 import io.element.android.libraries.matrix.api.core.ThreadId
 import io.element.android.libraries.matrix.api.core.UserId
@@ -133,6 +134,7 @@ class MessageComposerPresenter(
     private val mediaOptimizationConfigProvider: MediaOptimizationConfigProvider,
     private val notificationConversationService: NotificationConversationService,
     private val slashCommandService: SlashCommandService,
+    private val featureFlagService: FeatureFlagService,
 ) : Presenter<MessageComposerState> {
     @AssistedFactory
     interface Factory {
@@ -177,10 +179,19 @@ class MessageComposerPresenter(
             canShareLocation.value = locationService.isServiceAvailable()
         }
 
+        val isSendGalleryMessagesEnabled by featureFlagService.isFeatureEnabledFlow(FeatureFlags.SendGalleryMessages)
+            .collectAsState(initial = false)
+
         val galleryMediaPicker = mediaPickerProvider.registerGalleryPicker { uri, mimeType ->
             handlePickedMedia(uri, mimeType)
         }
-        val filesPicker = mediaPickerProvider.registerFilePicker(AnyMimeTypes) { uri, mimeType ->
+        val galleryMultiMediaPicker = mediaPickerProvider.registerGalleryMultiPicker { uris ->
+            handlePickedMediaList(uris)
+        }
+        val filesPicker = mediaPickerProvider.registerFileMultiPicker(AnyMimeTypes) { uris ->
+            handlePickedMediaList(uris, sendAsFile = true)
+        }
+        val fileSinglePicker = mediaPickerProvider.registerFilePicker(AnyMimeTypes) { uri, mimeType ->
             handlePickedMedia(uri, mimeType ?: MimeTypes.OctetStream, sendAsFile = true)
         }
         val cameraPhotoPicker = mediaPickerProvider.registerCameraPhotoPicker { uri ->
@@ -266,7 +277,7 @@ class MessageComposerPresenter(
                 is MessageComposerEvent.SendUri -> {
                     val inReplyToEventId = (messageComposerContext.composerMode as? MessageComposerMode.Reply)?.eventId
                     sessionCoroutineScope.sendAttachment(
-                        attachment = Media(
+                        attachment = Attachment.Media(
                             localMedia = localMediaFactory.createFromUri(
                                 uri = event.uri,
                                 mimeType = null,
@@ -289,11 +300,19 @@ class MessageComposerPresenter(
                 MessageComposerEvent.DismissAttachmentMenu -> showAttachmentSourcePicker = false
                 MessageComposerEvent.PickAttachmentSource.FromGallery -> localCoroutineScope.launch {
                     showAttachmentSourcePicker = false
-                    galleryMediaPicker.launch()
+                    if (isSendGalleryMessagesEnabled) {
+                        galleryMultiMediaPicker.launch()
+                    } else {
+                        galleryMediaPicker.launch()
+                    }
                 }
                 MessageComposerEvent.PickAttachmentSource.FromFiles -> localCoroutineScope.launch {
                     showAttachmentSourcePicker = false
-                    filesPicker.launch()
+                    if (isSendGalleryMessagesEnabled) {
+                        filesPicker.launch()
+                    } else {
+                        fileSinglePicker.launch()
+                    }
                 }
                 MessageComposerEvent.PickAttachmentSource.PhotoFromCamera -> localCoroutineScope.launch {
                     showAttachmentSourcePicker = false
@@ -623,6 +642,30 @@ class MessageComposerPresenter(
         messageComposerContext.composerMode = MessageComposerMode.Normal
     }
 
+    private fun handlePickedMediaList(
+        uris: List<Uri>,
+        sendAsFile: Boolean = false,
+    ) {
+        if (uris.isEmpty()) return
+        if (uris.size == 1) {
+            handlePickedMedia(uris.first(), sendAsFile = sendAsFile)
+            return
+        }
+        val attachments = uris.map { uri ->
+            val localMedia = localMediaFactory.createFromUri(
+                uri = uri,
+                mimeType = null,
+                name = null,
+                formattedFileSize = null,
+            )
+            Attachment.Media(localMedia, sendAsFile = sendAsFile)
+        }.toImmutableList()
+        val inReplyToEventId = (messageComposerContext.composerMode as? MessageComposerMode.Reply)?.eventId
+        navigator.navigateToPreviewAttachments(attachments, inReplyToEventId)
+
+        messageComposerContext.composerMode = MessageComposerMode.Normal
+    }
+
     private suspend fun sendMedia(
         uri: Uri,
         mimeType: String,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/list/PinnedMessagesListNode.kt

@@ -53,6 +53,7 @@ class PinnedMessagesListNode(
 ) : Node(buildContext, plugins = plugins), PinnedMessagesListNavigator {
     interface Callback : Plugin {
         fun handleEventClick(event: TimelineItem.Event, canUseOverlay: Boolean)
+        fun handleGalleryItemClick(event: TimelineItem.Event, galleryItemIndex: Int, canUseOverlay: Boolean)
         fun navigateToRoomMemberDetails(userId: UserId)
         fun viewInTimeline(eventId: EventId)
         fun handlePermalinkClick(data: PermalinkData.RoomLink)
@@ -119,6 +120,9 @@ class PinnedMessagesListNode(
                 onEventClick = {
                     callback.handleEventClick(it, canUseOverlay)
                 },
+                onGalleryItemClick = { event, index ->
+                    callback.handleGalleryItemClick(event, index, canUseOverlay)
+                },
                 onUserDataClick = { callback.navigateToRoomMemberDetails(it.userId) },
                 onLinkClick = { link -> onLinkClick(context, link.url) },
                 onLinkLongClick = {

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/list/PinnedMessagesListView.kt

@@ -60,6 +60,7 @@ fun PinnedMessagesListView(
     state: PinnedMessagesListState,
     onBackClick: () -> Unit,
     onEventClick: (event: TimelineItem.Event) -> Unit,
+    onGalleryItemClick: (event: TimelineItem.Event, index: Int) -> Unit,
     onUserDataClick: (MatrixUser) -> Unit,
     onLinkClick: (Link) -> Unit,
     onLinkLongClick: (Link) -> Unit,
@@ -81,6 +82,7 @@ fun PinnedMessagesListView(
             PinnedMessagesListContent(
                 state = state,
                 onEventClick = onEventClick,
+                onGalleryItemClick = onGalleryItemClick,
                 onUserDataClick = onUserDataClick,
                 onLinkClick = onLinkClick,
                 onLinkLongClick = onLinkLongClick,
@@ -111,6 +113,7 @@ private fun PinnedMessagesListTopBar(
 private fun PinnedMessagesListContent(
     state: PinnedMessagesListState,
     onEventClick: (event: TimelineItem.Event) -> Unit,
+    onGalleryItemClick: (event: TimelineItem.Event, index: Int) -> Unit,
     onUserDataClick: (MatrixUser) -> Unit,
     onLinkClick: (Link) -> Unit,
     onLinkLongClick: (Link) -> Unit,
@@ -131,6 +134,7 @@ private fun PinnedMessagesListContent(
                 state = state,
                 displayThreadSummaries = state.displayThreadSummaries,
                 onEventClick = onEventClick,
+                onGalleryItemClick = onGalleryItemClick,
                 onUserDataClick = onUserDataClick,
                 onLinkClick = onLinkClick,
                 onLinkLongClick = onLinkLongClick,
@@ -169,6 +173,7 @@ private fun PinnedMessagesListLoaded(
     state: PinnedMessagesListState.Filled,
     displayThreadSummaries: Boolean,
     onEventClick: (event: TimelineItem.Event) -> Unit,
+    onGalleryItemClick: (event: TimelineItem.Event, index: Int) -> Unit,
     onUserDataClick: (MatrixUser) -> Unit,
     onLinkClick: (Link) -> Unit,
     onLinkLongClick: (Link) -> Unit,
@@ -226,6 +231,7 @@ private fun PinnedMessagesListLoaded(
                 },
                 onLinkLongClick = onLinkLongClick,
                 onContentClick = onEventClick,
+                onGalleryItemClick = onGalleryItemClick,
                 onLongClick = ::onMessageLongClick,
                 displayThreadSummaries = displayThreadSummaries,
                 inReplyToClick = {},
@@ -245,6 +251,7 @@ private fun PinnedMessagesListLoaded(
                         event = event,
                         timelineProtectionState = state.timelineProtectionState,
                         onContentClick = { onEventClick(event) },
+                        onGalleryItemClick = { index -> onGalleryItemClick(event, index) },
                         onLongClick = { onMessageLongClick(event) },
                         onLinkClick = { link ->
                             state.linkState.eventSink(LinkEvent.OnLinkClick(link))
@@ -268,6 +275,7 @@ private fun TimelineItemEventContentViewWrapper(
     event: TimelineItem.Event,
     timelineProtectionState: TimelineProtectionState,
     onContentClick: () -> Unit,
+    onGalleryItemClick: (index: Int) -> Unit,
     onLinkClick: (Link) -> Unit,
     onLinkLongClick: (Link) -> Unit,
     onLongClick: (() -> Unit)?,
@@ -285,6 +293,7 @@ private fun TimelineItemEventContentViewWrapper(
             content = event.content,
             hideMediaContent = timelineProtectionState.hideMediaContent(event.eventId, event.isMine),
             onShowContentClick = { timelineProtectionState.eventSink(TimelineProtectionEvent.ShowContent(event.eventId)) },
+            onGalleryItemClick = onGalleryItemClick,
             onLinkClick = onLinkClick,
             onLinkLongClick = onLinkLongClick,
             eventSink = { },
@@ -304,6 +313,7 @@ internal fun PinnedMessagesListViewPreview(@PreviewParameter(PinnedMessagesListS
             state = state,
             onBackClick = {},
             onEventClick = { },
+            onGalleryItemClick = { _, _ -> },
             onUserDataClick = {},
             onLinkClick = {},
             onLinkLongClick = {},

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/threads/ThreadedMessagesNode.kt

@@ -126,6 +126,7 @@ class ThreadedMessagesNode(
 
     interface Callback : Plugin {
         fun handleEventClick(timelineMode: Timeline.Mode, event: TimelineItem.Event, canUseOverlay: Boolean): Boolean
+        fun handleGalleryItemClick(timelineMode: Timeline.Mode, event: TimelineItem.Event, galleryItemIndex: Int, canUseOverlay: Boolean): Boolean
         fun navigateToPreviewAttachments(attachments: ImmutableList<Attachment>, inReplyToEventId: EventId?)
         fun navigateToRoomMemberDetails(userId: UserId)
         fun handlePermalinkClick(data: PermalinkData)
@@ -289,6 +290,20 @@ class ThreadedMessagesNode(
                             }
                         } == true
                     },
+                    onGalleryEventItemClick = { isLive, event, index ->
+                        timelineController?.let { controller ->
+                            if (isLive) {
+                                callback.handleGalleryItemClick(controller.mainTimelineMode(), event, index, canUseOverlay)
+                            } else {
+                                val detachedTimelineMode = controller.detachedTimelineMode()
+                                if (detachedTimelineMode != null) {
+                                    callback.handleGalleryItemClick(detachedTimelineMode, event, index, canUseOverlay)
+                                } else {
+                                    false
+                                }
+                            }
+                        } == true
+                    },
                     onUserDataClick = callback::navigateToRoomMemberDetails,
                     onLinkClick = { url, customTab ->
                         onLinkClick(

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt

@@ -97,6 +97,7 @@ fun TimelineView(
     onUserDataClick: (MatrixUser) -> Unit,
     onLinkClick: (Link) -> Unit,
     onContentClick: (TimelineItem.Event) -> Unit,
+    onGalleryItemClick: ((TimelineItem.Event, Int) -> Unit),
     onMessageLongClick: (TimelineItem.Event) -> Unit,
     onSwipeToReply: (TimelineItem.Event) -> Unit,
     onReactionClick: (emoji: String, TimelineItem.Event) -> Unit,
@@ -178,6 +179,7 @@ fun TimelineView(
                         onLinkClick = onLinkClick,
                         onLinkLongClick = ::onLinkLongClick,
                         onContentClick = onContentClick,
+                        onGalleryItemClick = onGalleryItemClick,
                         onLongClick = onMessageLongClick,
                         inReplyToClick = ::inReplyToClick,
                         onReactionClick = onReactionClick,
@@ -428,6 +430,7 @@ internal fun TimelineViewPreview(
             onReactionLongClick = { _, _ -> },
             onMoreReactionsClick = {},
             onReadReceiptClick = {},
+            onGalleryItemClick = { _, _ -> },
             forceJumpToBottomVisibility = true,
         )
     }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineViewMessageShieldPreview.kt

@@ -49,6 +49,7 @@ internal fun TimelineViewMessageShieldPreview() = ElementPreview {
             onReactionLongClick = { _, _ -> },
             onMoreReactionsClick = {},
             onReadReceiptClick = {},
+            onGalleryItemClick = { _, _ -> },
             forceJumpToBottomVisibility = true,
         )
     }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/ATimelineItemEventRow.kt

@@ -33,6 +33,7 @@ internal fun ATimelineItemEventRow(
     isLastOutgoingMessage = isLastOutgoingMessage,
     displayThreadSummaries = displayThreadSummaries,
     onEventClick = {},
+    onGalleryItemClick = {},
     onLongClick = {},
     onLinkClick = {},
     onLinkLongClick = {},

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventContentForGalleryViewProvider.kt

@@ -0,0 +1,138 @@
+/*
+ * Copyright (c) 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.features.messages.impl.timeline.components
+
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import io.element.android.features.messages.impl.timeline.components.event.aGalleryItem
+import io.element.android.features.messages.impl.timeline.components.event.aTimelineItemGalleryContent
+import io.element.android.features.messages.impl.timeline.model.event.GalleryItem
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEventContent
+import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemAttachmentsContent
+import io.element.android.features.messages.impl.timeline.model.event.anAttachmentItem
+import kotlin.time.Duration
+
+class TimelineItemEventContentForGalleryViewProvider :
+    PreviewParameterProvider<TimelineItemEventContent> {
+    override val values: Sequence<TimelineItemEventContent>
+        get() = sequenceOf(
+            aTimelineItemGalleryContent(
+                caption = "My vacation photos",
+                items = listOf(
+                    aGalleryItem(),
+                    aGalleryItem(),
+                    aGalleryItem(),
+                    aGalleryItem(),
+                ),
+            ),
+            aTimelineItemGalleryContent(
+                items = listOf(
+                    aGalleryItem(),
+                    aGalleryItem(),
+                ),
+            ),
+            aTimelineItemGalleryContent(
+                caption = "Three photos",
+                items = listOf(
+                    aGalleryItem(),
+                    aGalleryItem(),
+                    aGalleryItem(),
+                ),
+            ),
+            aTimelineItemGalleryContent(
+                caption = "Many photos",
+                items = (1..8).map { aGalleryItem() },
+            ),
+            aTimelineItemGalleryContent(
+                caption = "Videos",
+                items = listOf(
+                    aGalleryItem(
+                        type = GalleryItem.Type.Video,
+                        duration = Duration.parse("PT1M30S")
+                    ),
+                    aGalleryItem(
+                        type = GalleryItem.Type.Video,
+                        duration = Duration.parse("PT45S")
+                    ),
+                    aGalleryItem(),
+                ),
+            ),
+            aTimelineItemAttachmentsContent(
+                caption = "Documents",
+                attachments = listOf(
+                    anAttachmentItem(
+                        filename = "document.pdf",
+                        fileExtension = "pdf",
+                    ),
+                    anAttachmentItem(
+                        filename = "presentation.pdf",
+                        fileExtension = "pdf",
+                    ),
+                    anAttachmentItem(
+                        filename = "spreadsheet.xlsx",
+                        fileExtension = "xlsx",
+                    ),
+                ),
+            ),
+            aTimelineItemAttachmentsContent(
+                caption = "Photos",
+                attachments = listOf(
+                    anAttachmentItem(
+                        filename = "photo1.jpg",
+                        fileExtension = "jpg",
+                        hasThumbnail = true,
+                    ),
+                    anAttachmentItem(
+                        filename = "photo2.jpg",
+                        fileExtension = "jpg",
+                        hasThumbnail = true,
+                    ),
+                    anAttachmentItem(
+                        filename = "photo3.jpg",
+                        fileExtension = "jpg",
+                        hasThumbnail = true,
+                    ),
+                ),
+            ),
+            aTimelineItemAttachmentsContent(
+                caption = "Videos",
+                attachments = listOf(
+                    anAttachmentItem(
+                        filename = "video1.mp4",
+                        fileExtension = "mp4",
+                        hasThumbnail = true,
+                        fileSize = 150_000_000L,
+                        formattedFileSize = "150MB",
+                    ),
+                    anAttachmentItem(
+                        filename = "video2.mov",
+                        fileExtension = "mov",
+                        hasThumbnail = true,
+                        fileSize = 85_000_000L,
+                        formattedFileSize = "85MB",
+                    ),
+                ),
+            ),
+            aTimelineItemAttachmentsContent(
+                caption = "Audio",
+                attachments = listOf(
+                    anAttachmentItem(
+                        filename = "recording.mp3",
+                        fileExtension = "mp3",
+                        fileSize = 4_500_000L,
+                        formattedFileSize = "4.5MB",
+                    ),
+                    anAttachmentItem(
+                        filename = "voice_message.m4a",
+                        fileExtension = "m4a",
+                        fileSize = 1_200_000L,
+                        formattedFileSize = "1.2MB",
+                    ),
+                ),
+            ),
+        )
+}

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt

@@ -76,6 +76,8 @@ import io.element.android.features.messages.impl.timeline.model.TimelineItemGrou
 import io.element.android.features.messages.impl.timeline.model.TimelineItemReactions
 import io.element.android.features.messages.impl.timeline.model.TimelineItemThreadInfo
 import io.element.android.features.messages.impl.timeline.model.bubble.BubbleState
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAttachmentsContent
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemGalleryContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemImageContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemLocationContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemPollContent
@@ -156,6 +158,7 @@ fun TimelineItemEventRow(
     isLastOutgoingMessage: Boolean,
     displayThreadSummaries: Boolean,
     onEventClick: () -> Unit,
+    onGalleryItemClick: ((Int) -> Unit),
     onLongClick: () -> Unit,
     onLinkClick: (Link) -> Unit,
     onLinkLongClick: (Link) -> Unit,
@@ -176,13 +179,14 @@ fun TimelineItemEventRow(
             content = event.content,
             hideMediaContent = timelineProtectionState.hideMediaContent(event.eventId),
             onContentClick = onContentClick,
+            onGalleryItemClick = onGalleryItemClick,
             onLongClick = onLongClick,
             onShowContentClick = { timelineProtectionState.eventSink(TimelineProtectionEvent.ShowContent(event.eventId)) },
             onLinkClick = onLinkClick,
             onLinkLongClick = onLinkLongClick,
             eventSink = eventSink,
             modifier = contentModifier,
-            onContentLayoutChange = onContentLayoutChange
+            onContentLayoutChange = onContentLayoutChange,
         )
     },
 ) {
@@ -808,6 +812,8 @@ private fun MessageEventBubbleContent(
     val timestampPosition = when (val content = event.content) {
         is TimelineItemImageContent -> if (content.showCaption) TimestampPosition.Aligned else TimestampPosition.Overlay
         is TimelineItemVideoContent -> if (content.showCaption) TimestampPosition.Aligned else TimestampPosition.Overlay
+        is TimelineItemGalleryContent -> if (content.showCaption) TimestampPosition.Aligned else TimestampPosition.Below
+        is TimelineItemAttachmentsContent -> TimestampPosition.Below
         is TimelineItemStickerContent -> TimestampPosition.Overlay
         is TimelineItemLocationContent -> {
             val content = content.ensureActiveLiveLocation()
@@ -822,6 +828,8 @@ private fun MessageEventBubbleContent(
     val paddingBehaviour = when (event.content) {
         is TimelineItemImageContent -> if (event.content.showCaption) ContentPadding.CaptionedMedia else ContentPadding.Media
         is TimelineItemVideoContent -> if (event.content.showCaption) ContentPadding.CaptionedMedia else ContentPadding.Media
+        is TimelineItemGalleryContent -> ContentPadding.CaptionedMedia
+        is TimelineItemAttachmentsContent -> ContentPadding.CaptionedMedia
         is TimelineItemStickerContent,
         is TimelineItemLocationContent -> ContentPadding.Media
         else -> ContentPadding.Textual

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRowGalleryPreview.kt

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.features.messages.impl.timeline.components
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import io.element.android.features.messages.impl.timeline.aTimelineItemEvent
+import io.element.android.features.messages.impl.timeline.model.TimelineItemGroupPosition
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEventContent
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+
+@PreviewsDayNight
+@Composable
+internal fun TimelineItemEventRowWithGalleryPreview(
+    @PreviewParameter(TimelineItemEventContentForGalleryViewProvider::class) content: TimelineItemEventContent,
+) = ElementPreview {
+    Column {
+        sequenceOf(false, true).forEach { isMine ->
+            ATimelineItemEventRow(
+                event = aTimelineItemEvent(
+                    isMine = isMine,
+                    content = content,
+                    groupPosition = TimelineItemGroupPosition.Last,
+                ),
+            )
+        }
+    }
+}

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemGroupedEventsRow.kt

@@ -69,6 +69,7 @@ fun TimelineItemGroupedEventsRow(
                 eventSink = eventSink,
                 modifier = contentModifier,
                 onContentClick = null,
+                onGalleryItemClick = {},
                 onLongClick = null,
                 onContentLayoutChange = onContentLayoutChange
             )
@@ -140,6 +141,7 @@ private fun TimelineItemGroupedEventsRowContent(
                 eventSink = eventSink,
                 modifier = contentModifier,
                 onContentClick = null,
+                onGalleryItemClick = {},
                 onLongClick = null,
                 onContentLayoutChange = onContentLayoutChange
             )
@@ -177,6 +179,7 @@ private fun TimelineItemGroupedEventsRowContent(
                         onLinkClick = onLinkClick,
                         onLinkLongClick = onLinkLongClick,
                         onContentClick = onClick,
+                        onGalleryItemClick = { _, _ -> },
                         onLongClick = onLongClick,
                         inReplyToClick = inReplyToClick,
                         onReactionClick = onReactionClick,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemRow.kt

@@ -64,6 +64,7 @@ internal fun TimelineItemRow(
     onLinkClick: (Link) -> Unit,
     onLinkLongClick: (Link) -> Unit,
     onContentClick: (TimelineItem.Event) -> Unit,
+    onGalleryItemClick: (TimelineItem.Event, Int) -> Unit,
     onLongClick: (TimelineItem.Event) -> Unit,
     inReplyToClick: (EventId) -> Unit,
     onReactionClick: (key: String, TimelineItem.Event) -> Unit,
@@ -80,12 +81,13 @@ internal fun TimelineItemRow(
                 hideMediaContent = timelineProtectionState.hideMediaContent(event.eventId, event.isMine),
                 onShowContentClick = { timelineProtectionState.eventSink(TimelineProtectionEvent.ShowContent(event.eventId)) },
                 onContentClick = { onContentClick(event) },
+                onGalleryItemClick = { index -> onGalleryItemClick(event, index) },
                 onLongClick = { onLongClick(event) },
                 onLinkClick = onLinkClick,
                 onLinkLongClick = onLinkLongClick,
                 eventSink = eventSink,
                 modifier = contentModifier,
-                onContentLayoutChange = onContentLayoutChange
+                onContentLayoutChange = onContentLayoutChange,
             )
         },
 ) {
@@ -178,6 +180,7 @@ internal fun TimelineItemRow(
                             onMoreReactionsClick = onMoreReactionsClick,
                             onReadReceiptClick = onReadReceiptClick,
                             onSwipeToReply = { onSwipeToReply(timelineItem) },
+                            onGalleryItemClick = { index -> onGalleryItemClick(timelineItem, index) },
                             eventSink = eventSink,
                             eventContentView = { contentModifier, onContentLayoutChange ->
                                 eventContentView(timelineItem, contentModifier, onContentLayoutChange)

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemStateEventRow.kt

@@ -74,6 +74,7 @@ fun TimelineItemStateEventRow(
                     onShowContentClick = {},
                     eventSink = eventSink,
                     onContentClick = null,
+                    onGalleryItemClick = {},
                     onLongClick = null,
                     modifier = Modifier.defaultTimelineContentPadding()
                 )

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemAttachmentsContentProvider.kt

@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.features.messages.impl.timeline.components.event
+
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAttachmentsContent
+import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemAttachmentsContent
+import io.element.android.features.messages.impl.timeline.model.event.anAttachmentItem
+import io.element.android.libraries.matrix.api.media.MediaSource
+
+class TimelineItemAttachmentsContentProvider : PreviewParameterProvider<TimelineItemAttachmentsContent> {
+    override val values: Sequence<TimelineItemAttachmentsContent>
+        get() = sequenceOf(
+            aTimelineItemAttachmentsContent(
+                body = "Files",
+                caption = null,
+                attachments = listOf(
+                    anAttachmentItem(
+                        filename = "document.pdf",
+                        mimeType = "application/pdf",
+                        fileSize = null,
+                        formattedFileSize = "2.5 MB",
+                        fileExtension = "PDF",
+                    ),
+                    anAttachmentItem(
+                        filename = "spreadsheet.xlsx",
+                        mimeType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+                        fileSize = null,
+                        formattedFileSize = "450 KB",
+                        fileExtension = "XLSX",
+                    ),
+                ),
+            ),
+            aTimelineItemAttachmentsContent(
+                body = "Files",
+                caption = "Files mixed with media",
+                attachments = listOf(
+                    anAttachmentItem(
+                        filename = "report.pdf",
+                        mimeType = "application/pdf",
+                        fileSize = null,
+                        formattedFileSize = "3.2 MB",
+                        fileExtension = "PDF",
+                    ),
+                    anAttachmentItem(
+                        filename = "notes.txt",
+                        mimeType = "text/plain",
+                        fileSize = null,
+                        formattedFileSize = "12 KB",
+                        fileExtension = "TXT",
+                    ),
+                    anAttachmentItem(
+                        filename = "photo.jpg",
+                        mimeType = "image/jpeg",
+                        thumbnailSource = MediaSource(url = "thumb", json = ""),
+                        fileSize = null,
+                        formattedFileSize = "1.2 MB",
+                        fileExtension = "JPG",
+                    ),
+                    anAttachmentItem(
+                        filename = "video.mp4",
+                        mimeType = "video/mp4",
+                        thumbnailSource = MediaSource(url = "thumb", json = ""),
+                        fileSize = null,
+                        formattedFileSize = "15 MB",
+                        fileExtension = "MP4",
+                    ),
+                ),
+            ),
+        )
+}

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemAttachmentsListView.kt

@@ -0,0 +1,222 @@
+/*
+ * Copyright (c) 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.features.messages.impl.timeline.components.event
+
+import android.text.SpannedString
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.LocalTextStyle
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalInspectionMode
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
+import coil3.compose.AsyncImage
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.compound.tokens.generated.CompoundIcons
+import io.element.android.features.messages.impl.timeline.components.layout.ContentAvoidingLayout
+import io.element.android.features.messages.impl.timeline.components.layout.ContentAvoidingLayoutData
+import io.element.android.features.messages.impl.timeline.model.event.AttachmentItem
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAttachmentsContent
+import io.element.android.libraries.core.mimetype.MimeTypes.isMimeTypeAudio
+import io.element.android.libraries.core.mimetype.MimeTypes.isMimeTypeImage
+import io.element.android.libraries.core.mimetype.MimeTypes.isMimeTypeVideo
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
+import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.matrix.ui.media.MediaRequestData
+import io.element.android.libraries.textcomposer.ElementRichTextEditorStyle
+import io.element.android.libraries.ui.strings.CommonStrings
+import io.element.android.wysiwyg.compose.EditorStyledText
+import io.element.android.wysiwyg.link.Link
+
+@Composable
+fun TimelineItemAttachmentsListView(
+    content: TimelineItemAttachmentsContent,
+    onGalleryItemClick: (Int) -> Unit,
+    onLinkClick: (Link) -> Unit,
+    onLinkLongClick: (Link) -> Unit,
+    onContentLayoutChange: (ContentAvoidingLayoutData) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Column(modifier = modifier) {
+        Column(
+            modifier = Modifier.fillMaxWidth(),
+        ) {
+            content.attachments.forEachIndexed { index, attachment ->
+                Column {
+                    if (index > 0) {
+                        HorizontalDivider(
+                            color = ElementTheme.colors.borderInteractiveSecondary,
+                        )
+                    }
+                    AttachmentListItem(
+                        attachment = attachment,
+                        onClick = { onGalleryItemClick(index) },
+                    )
+                }
+            }
+        }
+        if (content.showCaption) {
+            HorizontalDivider(
+                color = ElementTheme.colors.borderInteractiveSecondary,
+            )
+            Spacer(modifier = Modifier.height(8.dp))
+            val caption = if (LocalInspectionMode.current) {
+                SpannedString(content.caption)
+            } else {
+                content.formattedCaption ?: SpannedString(content.caption)
+            }
+            CompositionLocalProvider(
+                LocalContentColor provides ElementTheme.colors.textPrimary,
+                LocalTextStyle provides ElementTheme.typography.fontBodyLgRegular
+            ) {
+                EditorStyledText(
+                    modifier = Modifier
+                        .padding(horizontal = 4.dp)
+                        .widthIn(min = 120.dp),
+                    text = caption,
+                    style = ElementRichTextEditorStyle.textStyle(),
+                    onLinkClickedListener = onLinkClick,
+                    onLinkLongClickedListener = onLinkLongClick,
+                    releaseOnDetach = false,
+                    onTextLayout = ContentAvoidingLayout.measureLegacyLastTextLine(onContentLayoutChange = onContentLayoutChange),
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun AttachmentListItem(
+    attachment: AttachmentItem,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val iconSize = 36.dp
+    val thumbnailSize = 36L
+    val spacing = 8.dp
+    Row(
+        modifier = modifier
+            .clickable(onClick = onClick)
+            .padding(vertical = 6.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(spacing),
+    ) {
+        Box(
+            modifier = Modifier
+                .size(iconSize)
+                .clip(RoundedCornerShape(4.dp))
+                .background(ElementTheme.colors.bgCanvasDefault),
+            contentAlignment = Alignment.Center,
+        ) {
+            if (attachment.thumbnailSource != null) {
+                val isVideo = attachment.mimeType.isMimeTypeVideo()
+                AsyncImage(
+                    model = MediaRequestData(
+                        source = attachment.thumbnailSource,
+                        kind = MediaRequestData.Kind.Thumbnail(thumbnailSize),
+                    ),
+                    contentDescription = attachment.filename,
+                    contentScale = ContentScale.Crop,
+                    modifier = Modifier
+                        .size(iconSize)
+                        .clip(RoundedCornerShape(4.dp)),
+                )
+                if (isVideo) {
+                    Box(
+                        modifier = Modifier
+                            .size(iconSize)
+                            .background(
+                                color = Color.Black.copy(alpha = 0.3f),
+                                shape = RoundedCornerShape(4.dp)
+                            ),
+                        contentAlignment = Alignment.Center,
+                    ) {
+                        Icon(
+                            imageVector = CompoundIcons.VideoCallSolid(),
+                            contentDescription = stringResource(CommonStrings.common_video),
+                            tint = Color.White,
+                            modifier = Modifier.size(20.dp),
+                        )
+                    }
+                }
+            } else {
+                val isImage = attachment.mimeType.isMimeTypeImage()
+                val isVideo = attachment.mimeType.isMimeTypeVideo()
+                val isAudio = attachment.mimeType.isMimeTypeAudio()
+                val icon = when {
+                    isImage -> CompoundIcons.Image()
+                    isVideo -> CompoundIcons.VideoCall()
+                    isAudio -> CompoundIcons.Audio()
+                    else -> CompoundIcons.Attachment()
+                }
+                Icon(
+                    imageVector = icon,
+                    contentDescription = null,
+                    tint = ElementTheme.colors.iconPrimary,
+                    modifier = Modifier.size(24.dp),
+                )
+            }
+        }
+
+        Column(
+            modifier = Modifier.weight(1f),
+        ) {
+            Text(
+                text = attachment.filename,
+                color = ElementTheme.colors.textPrimary,
+                style = ElementTheme.typography.fontBodyLgRegular,
+                maxLines = 2,
+                overflow = TextOverflow.Ellipsis,
+            )
+            Text(
+                text = "${attachment.fileExtension} • ${attachment.formattedFileSize}",
+                color = ElementTheme.colors.textSecondary,
+                style = ElementTheme.typography.fontBodySmRegular,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+    }
+}
+
+@PreviewsDayNight
+@Composable
+internal fun TimelineItemAttachmentsListViewPreview(
+    @PreviewParameter(TimelineItemAttachmentsContentProvider::class) content: TimelineItemAttachmentsContent
+) = ElementPreview {
+    TimelineItemAttachmentsListView(
+        content = content,
+        onGalleryItemClick = {},
+        onLinkClick = {},
+        onLinkLongClick = {},
+        onContentLayoutChange = {},
+    )
+}

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemEventContentView.kt

@@ -14,10 +14,12 @@ import io.element.android.features.messages.impl.timeline.TimelineEvent
 import io.element.android.features.messages.impl.timeline.components.layout.ContentAvoidingLayoutData
 import io.element.android.features.messages.impl.timeline.di.LocalTimelineItemPresenterFactories
 import io.element.android.features.messages.impl.timeline.di.rememberPresenter
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAttachmentsContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAudioContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEncryptedContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEventContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemFileContent
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemGalleryContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemImageContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemLegacyCallInviteContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemLocationContent
@@ -40,6 +42,7 @@ fun TimelineItemEventContentView(
     content: TimelineItemEventContent,
     hideMediaContent: Boolean,
     onContentClick: (() -> Unit)?,
+    onGalleryItemClick: ((Int) -> Unit),
     onLongClick: (() -> Unit)?,
     onShowContentClick: () -> Unit,
     onLinkClick: (Link) -> Unit,
@@ -90,6 +93,23 @@ fun TimelineItemEventContentView(
             onContentLayoutChange = onContentLayoutChange,
             modifier = modifier,
         )
+        is TimelineItemGalleryContent -> TimelineItemGalleryView(
+            content = content,
+            onGalleryItemClick = { index -> onGalleryItemClick(index) },
+            onLongClick = onLongClick,
+            onLinkClick = onLinkClick,
+            onLinkLongClick = onLinkLongClick,
+            onContentLayoutChange = onContentLayoutChange,
+            modifier = modifier,
+        )
+        is TimelineItemAttachmentsContent -> TimelineItemAttachmentsListView(
+            content = content,
+            onGalleryItemClick = { index -> onGalleryItemClick(index) },
+            onLinkClick = onLinkClick,
+            onLinkLongClick = onLinkLongClick,
+            onContentLayoutChange = {},
+            modifier = modifier,
+        )
         is TimelineItemStickerContent -> TimelineItemStickerView(
             content = content,
             hideMediaContent = hideMediaContent,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemGalleryContentProvider.kt

@@ -0,0 +1,138 @@
+/*
+ * Copyright (c) 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.features.messages.impl.timeline.components.event
+
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import io.element.android.features.messages.impl.timeline.model.event.GalleryItem
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemGalleryContent
+import io.element.android.libraries.matrix.api.media.MediaSource
+import kotlinx.collections.immutable.toImmutableList
+import kotlin.time.Duration
+import kotlin.time.Duration.Companion.seconds
+
+class TimelineItemGalleryContentProvider : PreviewParameterProvider<TimelineItemGalleryContent> {
+    override val values: Sequence<TimelineItemGalleryContent>
+        get() = sequenceOf(
+            aTimelineItemGalleryContent(
+                caption = "My vacation photos",
+                items = listOf(
+                    aGalleryItem(),
+                    aGalleryItem(type = GalleryItem.Type.Video, duration = 65.seconds),
+                    aGalleryItem(),
+                    aGalleryItem(),
+                ),
+            ),
+            aTimelineItemGalleryContent(
+                items = listOf(
+                    aGalleryItem(),
+                ),
+            ),
+            aTimelineItemGalleryContent(
+                items = listOf(
+                    aGalleryItem(width = 1920, height = 1080),
+                    aGalleryItem(width = 1600, height = 900),
+                ),
+            ),
+            aTimelineItemGalleryContent(
+                items = listOf(
+                    aGalleryItem(width = 1080, height = 1920),
+                    aGalleryItem(width = 900, height = 1600),
+                ),
+            ),
+            aTimelineItemGalleryContent(
+                items = listOf(
+                    aGalleryItem(width = 1920, height = 1080),
+                    aGalleryItem(width = 1080, height = 1920),
+                ),
+            ),
+            aTimelineItemGalleryContent(
+                items = listOf(
+                    aGalleryItem(type = GalleryItem.Type.Video, duration = 45.seconds),
+                    aGalleryItem(),
+                    aGalleryItem(),
+                ),
+            ),
+            aTimelineItemGalleryContent(
+                caption = "2 landscape + 1 portrait",
+                items = listOf(
+                    aGalleryItem(width = 1920, height = 1080),
+                    aGalleryItem(width = 1600, height = 900),
+                    aGalleryItem(width = 1080, height = 1920),
+                ),
+            ),
+            aTimelineItemGalleryContent(
+                caption = "1 landscape + 2 portrait",
+                items = listOf(
+                    aGalleryItem(width = 1920, height = 1080),
+                    aGalleryItem(width = 1080, height = 1920),
+                    aGalleryItem(width = 900, height = 1600),
+                ),
+            ),
+            aTimelineItemGalleryContent(
+                items = listOf(
+                    aGalleryItem(),
+                    aGalleryItem(),
+                    aGalleryItem(type = GalleryItem.Type.Video, duration = 120.seconds),
+                    aGalleryItem(),
+                    aGalleryItem(),
+                ),
+            ),
+            aTimelineItemGalleryContent(
+                caption = "Many photos",
+                items = (1..12).map {
+                    aGalleryItem(
+                        type = if (it == 3) GalleryItem.Type.Video else GalleryItem.Type.Image,
+                    )
+                },
+            ),
+        )
+}
+
+fun aTimelineItemGalleryContent(
+    body: String = "Gallery",
+    caption: String? = null,
+    items: List<GalleryItem> = listOf(
+        aGalleryItem(),
+        aGalleryItem(),
+        aGalleryItem(),
+        aGalleryItem(),
+    ),
+) = TimelineItemGalleryContent(
+    body = body,
+    caption = caption,
+    formattedCaption = null,
+    isEdited = false,
+    items = items.toImmutableList(),
+)
+
+fun aGalleryItem(
+    filename: String = "photo.jpg",
+    type: GalleryItem.Type = GalleryItem.Type.Image,
+    width: Int = 400,
+    height: Int = 300,
+    duration: Duration = Duration.ZERO,
+): GalleryItem {
+    return GalleryItem(
+        filename = filename,
+        mimeType = when (type) {
+            GalleryItem.Type.Video -> "video/mp4"
+            GalleryItem.Type.Audio -> "audio/mpeg"
+            GalleryItem.Type.File -> "application/pdf"
+            GalleryItem.Type.Image -> "image/jpeg"
+        },
+        mediaSource = MediaSource(url = "", json = ""),
+        thumbnailSource = null,
+        width = width,
+        height = height,
+        thumbnailWidth = width,
+        thumbnailHeight = height,
+        blurhash = null,
+        type = type,
+        duration = duration,
+    )
+}

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemGalleryView.kt

@@ -0,0 +1,384 @@
+/*
+ * Copyright (c) 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.features.messages.impl.timeline.components.event
+
+import android.text.SpannedString
+import androidx.compose.foundation.background
+import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.LocalTextStyle
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalInspectionMode
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
+import coil3.compose.AsyncImage
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.compound.tokens.generated.CompoundIcons
+import io.element.android.features.messages.impl.timeline.components.layout.ContentAvoidingLayout
+import io.element.android.features.messages.impl.timeline.components.layout.ContentAvoidingLayoutData
+import io.element.android.features.messages.impl.timeline.model.event.GalleryItem
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemGalleryContent
+import io.element.android.libraries.designsystem.components.blurhash.blurHashBackground
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.theme.bgSubtleTertiary
+import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.textcomposer.ElementRichTextEditorStyle
+import io.element.android.libraries.ui.utils.time.formatShort
+import io.element.android.wysiwyg.compose.EditorStyledText
+import io.element.android.wysiwyg.link.Link
+import kotlinx.collections.immutable.ImmutableList
+
+private const val MAX_TILES = 5
+private val GALLERY_WIDTH = 264.dp
+private val GRID_SPACING = 4.dp
+private val GROUP_CORNER_RADIUS = 6.dp
+
+private val SINGLE_IMAGE_HEIGHT = 130.dp
+private val TWO_IMAGE_ROW_HEIGHT = 130.dp
+private val THREE_IMAGE_ROW_HEIGHT = 85.dp
+
+@Composable
+fun TimelineItemGalleryView(
+    content: TimelineItemGalleryContent,
+    onGalleryItemClick: (Int) -> Unit,
+    onLongClick: (() -> Unit)?,
+    onLinkClick: (Link) -> Unit,
+    onLinkLongClick: (Link) -> Unit,
+    onContentLayoutChange: (ContentAvoidingLayoutData) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val totalItems = content.items.size
+    val showOverflow = totalItems > MAX_TILES
+    val overflowCount = totalItems - MAX_TILES
+    Column(modifier = modifier) {
+        val containerModifier = Modifier.clip(RoundedCornerShape(GROUP_CORNER_RADIUS))
+        Column(
+            modifier = containerModifier.width(GALLERY_WIDTH),
+            verticalArrangement = Arrangement.spacedBy(GRID_SPACING),
+        ) {
+            when (totalItems) {
+                0 -> Unit
+                1 -> SingleItemLayout(
+                    item = content.items[0],
+                    onClick = { onGalleryItemClick(0) },
+                    onLongClick = onLongClick,
+                )
+                2 -> TwoItemLayout(
+                    items = content.items,
+                    onItemClick = onGalleryItemClick,
+                    onLongClick = onLongClick,
+                )
+                3 -> ThreeItemLayout(
+                    items = content.items,
+                    onItemClick = onGalleryItemClick,
+                    onLongClick = onLongClick,
+                )
+                else -> FourPlusItemLayout(
+                    items = content.items,
+                    showOverflow = showOverflow,
+                    overflowCount = overflowCount,
+                    onItemClick = onGalleryItemClick,
+                    onLongClick = onLongClick,
+                )
+            }
+        }
+        if (content.showCaption) {
+            Spacer(modifier = Modifier.height(8.dp))
+            val caption = if (LocalInspectionMode.current) {
+                SpannedString(content.caption)
+            } else {
+                content.formattedCaption ?: SpannedString(content.caption)
+            }
+            CompositionLocalProvider(
+                LocalContentColor provides ElementTheme.colors.textPrimary,
+                LocalTextStyle provides ElementTheme.typography.fontBodyLgRegular
+            ) {
+                EditorStyledText(
+                    modifier = Modifier
+                        .padding(horizontal = 4.dp)
+                        .widthIn(min = 120.dp),
+                    text = caption,
+                    style = ElementRichTextEditorStyle.textStyle(),
+                    onLinkClickedListener = onLinkClick,
+                    onLinkLongClickedListener = onLinkLongClick,
+                    releaseOnDetach = false,
+                    onTextLayout = ContentAvoidingLayout.measureLegacyLastTextLine(onContentLayoutChange = onContentLayoutChange),
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun SingleItemLayout(
+    item: GalleryItem,
+    onClick: () -> Unit,
+    onLongClick: (() -> Unit)?,
+) {
+    GalleryItemCell(
+        item = item,
+        isLast = false,
+        remainingCount = 0,
+        onClick = onClick,
+        onLongClick = onLongClick,
+        modifier = Modifier
+            .width(GALLERY_WIDTH)
+            .height(SINGLE_IMAGE_HEIGHT),
+    )
+}
+
+@Composable
+private fun TwoItemLayout(
+    items: ImmutableList<GalleryItem>,
+    onItemClick: (Int) -> Unit,
+    onLongClick: (() -> Unit)?,
+) {
+    Column(
+        modifier = Modifier.width(GALLERY_WIDTH),
+        verticalArrangement = Arrangement.spacedBy(GRID_SPACING),
+    ) {
+        items.forEachIndexed { index, item ->
+            GalleryItemCell(
+                item = item,
+                isLast = false,
+                remainingCount = 0,
+                onClick = { onItemClick(index) },
+                onLongClick = onLongClick,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(TWO_IMAGE_ROW_HEIGHT),
+            )
+        }
+    }
+}
+
+@Composable
+private fun ThreeItemLayout(
+    items: ImmutableList<GalleryItem>,
+    onItemClick: (Int) -> Unit,
+    onLongClick: (() -> Unit)?,
+) {
+    Column(
+        modifier = Modifier.width(GALLERY_WIDTH),
+        verticalArrangement = Arrangement.spacedBy(GRID_SPACING),
+    ) {
+        GalleryItemCell(
+            item = items[0],
+            isLast = false,
+            remainingCount = 0,
+            onClick = { onItemClick(0) },
+            onLongClick = onLongClick,
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(SINGLE_IMAGE_HEIGHT),
+        )
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.spacedBy(GRID_SPACING),
+        ) {
+            for (it in 1..2) {
+                GalleryItemCell(
+                    item = items[it],
+                    isLast = false,
+                    remainingCount = 0,
+                    onClick = { onItemClick(it) },
+                    onLongClick = onLongClick,
+                    modifier = Modifier
+                        .weight(1f)
+                        .height(TWO_IMAGE_ROW_HEIGHT),
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun FourPlusItemLayout(
+    items: ImmutableList<GalleryItem>,
+    showOverflow: Boolean,
+    overflowCount: Int,
+    onItemClick: (Int) -> Unit,
+    onLongClick: (() -> Unit)?,
+) {
+    Column(
+        modifier = Modifier.width(GALLERY_WIDTH),
+        verticalArrangement = Arrangement.spacedBy(GRID_SPACING),
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.spacedBy(GRID_SPACING),
+        ) {
+            for (it in 0..1) {
+                GalleryItemCell(
+                    item = items[it],
+                    isLast = false,
+                    remainingCount = 0,
+                    onClick = { onItemClick(it) },
+                    onLongClick = onLongClick,
+                    modifier = Modifier
+                        .weight(1f)
+                        .height(TWO_IMAGE_ROW_HEIGHT),
+                )
+            }
+        }
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.spacedBy(GRID_SPACING),
+        ) {
+            val bottomRowItems = if (showOverflow) 3 else minOf(items.size - 2, 3)
+            val bottomRowHeight = if (bottomRowItems == 3) THREE_IMAGE_ROW_HEIGHT else TWO_IMAGE_ROW_HEIGHT
+            for (i in 0 until bottomRowItems) {
+                val itemIndex = 2 + i
+                if (itemIndex < items.size) {
+                    val isOverflowItem = showOverflow && i == bottomRowItems - 1
+                    GalleryItemCell(
+                        item = items[itemIndex],
+                        isLast = isOverflowItem,
+                        remainingCount = if (isOverflowItem) overflowCount else 0,
+                        onClick = { onItemClick(itemIndex) },
+                        onLongClick = onLongClick,
+                        modifier = Modifier
+                            .weight(1f)
+                            .height(bottomRowHeight),
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun GalleryItemCell(
+    item: GalleryItem,
+    isLast: Boolean,
+    remainingCount: Int,
+    onClick: () -> Unit,
+    onLongClick: (() -> Unit)?,
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier = modifier
+            .blurHashBackground(item.blurhash, alpha = 0.9f)
+            .combinedClickable(
+                onClick = onClick,
+                onLongClick = onLongClick,
+            ),
+        contentAlignment = Alignment.Center,
+    ) {
+        AsyncImage(
+            modifier = Modifier.fillMaxSize(),
+            model = item.thumbnailMediaRequestData,
+            contentScale = ContentScale.Crop,
+            alignment = Alignment.Center,
+            contentDescription = item.filename,
+        )
+
+        if (item.type == GalleryItem.Type.Video) {
+            VideoOverlay(duration = item.duration)
+        }
+
+        if (isLast && remainingCount > 0) {
+            RemainingCountOverlay(count = remainingCount)
+        }
+    }
+}
+
+@Composable
+private fun VideoOverlay(duration: kotlin.time.Duration) {
+    val gradientColor = ElementTheme.colors.bgCanvasDefault
+
+    Box(modifier = Modifier.fillMaxSize()) {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(80.dp)
+                .align(Alignment.BottomCenter)
+                .background(
+                    brush = Brush.verticalGradient(
+                        colors = listOf(gradientColor.copy(alpha = 0f), gradientColor.copy(alpha = 1f))
+                    )
+                )
+        )
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter)
+                .padding(8.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Icon(
+                imageVector = CompoundIcons.VideoCallSolid(),
+                contentDescription = null,
+                tint = ElementTheme.colors.textPrimary,
+                modifier = Modifier.size(16.dp),
+            )
+            Spacer(modifier = Modifier.weight(1f))
+            Text(
+                text = duration.formatShort(),
+                color = ElementTheme.colors.textPrimary,
+                style = ElementTheme.typography.fontBodySmMedium,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
+            )
+        }
+    }
+}
+
+@Composable
+private fun RemainingCountOverlay(count: Int) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(ElementTheme.colors.bgSubtleTertiary.copy(alpha = 0.7f)),
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(
+            text = "+$count",
+            color = Color.White,
+            style = ElementTheme.typography.fontHeadingSmMedium,
+        )
+    }
+}
+
+@PreviewsDayNight
+@Composable
+internal fun TimelineItemGalleryViewPreview(
+    @PreviewParameter(TimelineItemGalleryContentProvider::class) content: TimelineItemGalleryContent,
+) = ElementPreview {
+    TimelineItemGalleryView(
+        content = content,
+        onGalleryItemClick = {},
+        onLongClick = {},
+        onLinkClick = {},
+        onLinkLongClick = {},
+        onContentLayoutChange = {},
+    )
+}

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/factories/event/TimelineItemContentMessageFactory.kt

@@ -14,10 +14,14 @@ import androidx.core.text.toSpannable
 import dev.zacsweers.metro.Inject
 import io.element.android.features.location.api.Location
 import io.element.android.features.messages.api.timeline.HtmlConverterProvider
+import io.element.android.features.messages.impl.timeline.model.event.AttachmentItem
+import io.element.android.features.messages.impl.timeline.model.event.GalleryItem
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAttachmentsContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAudioContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEmoteContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEventContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemFileContent
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemGalleryContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemImageContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemLocationContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemNoticeContent
@@ -35,6 +39,8 @@ import io.element.android.libraries.matrix.api.permalink.PermalinkParser
 import io.element.android.libraries.matrix.api.timeline.item.event.AudioMessageType
 import io.element.android.libraries.matrix.api.timeline.item.event.EmoteMessageType
 import io.element.android.libraries.matrix.api.timeline.item.event.FileMessageType
+import io.element.android.libraries.matrix.api.timeline.item.event.GalleryItemType
+import io.element.android.libraries.matrix.api.timeline.item.event.GalleryMessageType
 import io.element.android.libraries.matrix.api.timeline.item.event.ImageMessageType
 import io.element.android.libraries.matrix.api.timeline.item.event.LocationMessageType
 import io.element.android.libraries.matrix.api.timeline.item.event.MessageContent
@@ -263,6 +269,144 @@ class TimelineItemContentMessageFactory(
                     isEdited = content.isEdited,
                 )
             }
+            is GalleryMessageType -> {
+                val dom = messageType.formatted?.toHtmlDocument(permalinkParser = permalinkParser)
+                val formattedCaption = dom?.let(::parseHtml)
+                    ?: messageType.body.withLinks()
+                val galleryItems = messageType.items.mapNotNull { item ->
+                    when (item) {
+                        is GalleryItemType.Image -> {
+                            GalleryItem(
+                                filename = item.content.filename,
+                                mimeType = item.content.info?.mimetype ?: MimeTypes.OctetStream,
+                                mediaSource = item.content.source,
+                                type = GalleryItem.Type.Image,
+                                thumbnailSource = item.content.info?.thumbnailSource,
+                                width = item.content.info?.width?.toInt(),
+                                height = item.content.info?.height?.toInt(),
+                                thumbnailWidth = item.content.info?.thumbnailInfo?.width?.toInt(),
+                                thumbnailHeight = item.content.info?.thumbnailInfo?.height?.toInt(),
+                                blurhash = item.content.info?.blurhash,
+                            )
+                        }
+                        is GalleryItemType.Video -> {
+                            GalleryItem(
+                                filename = item.content.filename,
+                                mimeType = item.content.info?.mimetype ?: MimeTypes.OctetStream,
+                                mediaSource = item.content.source,
+                                type = GalleryItem.Type.Video,
+                                thumbnailSource = item.content.info?.thumbnailSource,
+                                width = item.content.info?.width?.toInt(),
+                                height = item.content.info?.height?.toInt(),
+                                thumbnailWidth = item.content.info?.thumbnailInfo?.width?.toInt(),
+                                thumbnailHeight = item.content.info?.thumbnailInfo?.height?.toInt(),
+                                blurhash = item.content.info?.blurhash,
+                                duration = item.content.info?.duration ?: Duration.ZERO,
+                            )
+                        }
+                        is GalleryItemType.Audio -> {
+                            GalleryItem(
+                                filename = item.content.filename,
+                                mimeType = item.content.info?.mimetype ?: MimeTypes.OctetStream,
+                                mediaSource = item.content.source,
+                                type = GalleryItem.Type.Audio,
+                                thumbnailSource = null,
+                                width = null,
+                                height = null,
+                                thumbnailWidth = null,
+                                thumbnailHeight = null,
+                                blurhash = null,
+                                duration = item.content.info?.duration ?: Duration.ZERO,
+                            )
+                        }
+                        is GalleryItemType.File -> {
+                            GalleryItem(
+                                filename = item.content.filename,
+                                mimeType = item.content.info?.mimetype ?: MimeTypes.OctetStream,
+                                mediaSource = item.content.source,
+                                type = GalleryItem.Type.File,
+                                thumbnailSource = item.content.info?.thumbnailSource,
+                                width = null,
+                                height = null,
+                                thumbnailWidth = null,
+                                thumbnailHeight = null,
+                                blurhash = null,
+                            )
+                        }
+                        is GalleryItemType.Other -> null
+                    }
+                }
+                val hasPreviews = galleryItems.any { it.thumbnailSource != null }
+                val isOnlyVisualMedia = galleryItems.all { item ->
+                    item.type.isVisualMedia()
+                }
+                if (isOnlyVisualMedia && hasPreviews) {
+                    TimelineItemGalleryContent(
+                        body = messageType.body,
+                        caption = messageType.body.trimEnd().takeIf { it.isNotEmpty() },
+                        formattedCaption = formattedCaption,
+                        isEdited = content.isEdited,
+                        items = galleryItems.toImmutableList(),
+                    )
+                } else {
+                    val attachments = messageType.items.mapNotNull { item ->
+                        when (item) {
+                            is GalleryItemType.File -> {
+                                AttachmentItem(
+                                    filename = item.content.filename,
+                                    mimeType = item.content.info?.mimetype ?: MimeTypes.OctetStream,
+                                    mediaSource = item.content.source,
+                                    thumbnailSource = item.content.info?.thumbnailSource,
+                                    fileSize = item.content.info?.size,
+                                    formattedFileSize = fileSizeFormatter.format(item.content.info?.size ?: 0L),
+                                    fileExtension = fileExtensionExtractor.extractFromName(item.content.filename),
+                                )
+                            }
+                            is GalleryItemType.Image -> {
+                                AttachmentItem(
+                                    filename = item.content.filename,
+                                    mimeType = item.content.info?.mimetype ?: MimeTypes.OctetStream,
+                                    mediaSource = item.content.source,
+                                    thumbnailSource = item.content.info?.thumbnailSource,
+                                    fileSize = item.content.info?.size,
+                                    formattedFileSize = fileSizeFormatter.format(item.content.info?.size ?: 0L),
+                                    fileExtension = fileExtensionExtractor.extractFromName(item.content.filename),
+                                )
+                            }
+                            is GalleryItemType.Video -> {
+                                AttachmentItem(
+                                    filename = item.content.filename,
+                                    mimeType = item.content.info?.mimetype ?: MimeTypes.OctetStream,
+                                    mediaSource = item.content.source,
+                                    thumbnailSource = item.content.info?.thumbnailSource,
+                                    fileSize = item.content.info?.size,
+                                    formattedFileSize = fileSizeFormatter.format(item.content.info?.size ?: 0L),
+                                    fileExtension = fileExtensionExtractor.extractFromName(item.content.filename),
+                                )
+                            }
+                            is GalleryItemType.Audio -> {
+                                AttachmentItem(
+                                    filename = item.content.filename,
+                                    mimeType = item.content.info?.mimetype ?: MimeTypes.OctetStream,
+                                    mediaSource = item.content.source,
+                                    thumbnailSource = null,
+                                    fileSize = item.content.info?.size,
+                                    formattedFileSize = fileSizeFormatter.format(item.content.info?.size ?: 0L),
+                                    fileExtension = fileExtensionExtractor.extractFromName(item.content.filename),
+                                )
+                            }
+                            is GalleryItemType.Other -> null
+                        }
+                    }
+                    TimelineItemAttachmentsContent(
+                        body = messageType.body,
+                        caption = messageType.body.trimEnd().takeIf { it.isNotEmpty() },
+                        formattedCaption = formattedCaption,
+                        isEdited = content.isEdited,
+                        attachments = attachments.toImmutableList(),
+                    )
+                }
+            }
             is OtherMessageType -> {
                 val body = messageType.body.trimEnd()
                 TimelineItemTextContent(

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/groups/Groupability.kt

@@ -9,9 +9,11 @@
 package io.element.android.features.messages.impl.timeline.groups
 
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAttachmentsContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAudioContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEncryptedContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemFileContent
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemGalleryContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemImageContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemLegacyCallInviteContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemLocationContent
@@ -52,6 +54,8 @@ internal fun TimelineItem.Event.canBeGrouped(): Boolean {
         is TimelineItemTextBasedContent,
         is TimelineItemEncryptedContent,
         is TimelineItemImageContent,
+        is TimelineItemGalleryContent,
+        is TimelineItemAttachmentsContent,
         is TimelineItemStickerContent,
         is TimelineItemFileContent,
         is TimelineItemVideoContent,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/TimelineItem.kt

@@ -10,7 +10,9 @@ package io.element.android.features.messages.impl.timeline.model
 
 import androidx.compose.runtime.Immutable
 import io.element.android.features.messages.impl.timeline.components.MessageShieldData
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAttachmentsContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEventContent
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemGalleryContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemImageContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemStickerContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextBasedContent
@@ -124,6 +126,8 @@ sealed interface TimelineItem {
             is TimelineItemStickerContent -> content.formattedCaption == null && content.caption == null
             is TimelineItemImageContent -> content.formattedCaption == null && content.caption == null
             is TimelineItemVideoContent -> content.formattedCaption == null && content.caption == null
+            is TimelineItemGalleryContent -> false
+            is TimelineItemAttachmentsContent -> false
             else -> true
         }
 

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/event/TimelineItemAttachmentsContent.kt

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.features.messages.impl.timeline.model.event
+
+import io.element.android.libraries.matrix.api.media.MediaSource
+import kotlinx.collections.immutable.ImmutableList
+
+data class TimelineItemAttachmentsContent(
+    val body: String,
+    val caption: String?,
+    val formattedCaption: CharSequence?,
+    override val isEdited: Boolean,
+    val attachments: ImmutableList<AttachmentItem>,
+) : TimelineItemEventContent, TimelineItemEventMutableContent {
+    override val type: String = "TimelineItemAttachmentsContent"
+
+    val showCaption = caption != null
+
+    val hasPreviews = attachments.any { it.thumbnailSource != null }
+}
+
+data class AttachmentItem(
+    val filename: String,
+    val mimeType: String,
+    val mediaSource: MediaSource,
+    val thumbnailSource: MediaSource?,
+    val fileSize: Long?,
+    val formattedFileSize: String,
+    val fileExtension: String,
+)

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/event/TimelineItemEventContent.kt

@@ -56,7 +56,9 @@ fun TimelineItemEventContent.canBeForwarded(): Boolean =
         is TimelineItemAudioContent,
         is TimelineItemVideoContent,
         is TimelineItemLocationContent,
-        is TimelineItemVoiceContent -> true
+        is TimelineItemVoiceContent,
+        is TimelineItemGalleryContent,
+        is TimelineItemAttachmentsContent -> true
         // Stickers can't be forwarded (yet) so we don't show the option
         // See https://github.com/element-hq/element-x-android/issues/2161
         is TimelineItemStickerContent -> false
@@ -78,7 +80,9 @@ fun TimelineItemEventContent.canReact(): Boolean =
         is TimelineItemLocationContent,
         is TimelineItemPollContent,
         is TimelineItemVoiceContent,
-        is TimelineItemVideoContent -> true
+        is TimelineItemVideoContent,
+        is TimelineItemGalleryContent,
+        is TimelineItemAttachmentsContent -> true
         is TimelineItemStateContent,
         is TimelineItemRedactedContent,
         is TimelineItemLegacyCallInviteContent,
@@ -99,6 +103,18 @@ fun TimelineItemEventContent.isEdited(): Boolean = when (this) {
  */
 fun TimelineItemEventContent.isRedacted(): Boolean = this is TimelineItemRedactedContent
 
+/**
+ * Returns the caption text for content types that support captions.
+ * Gallery and attachments content types have captions but don't implement
+ * [TimelineItemEventContentWithAttachment].
+ */
+fun TimelineItemEventContent.captionOrNull(): String? = when (this) {
+    is TimelineItemEventContentWithAttachment -> caption
+    is TimelineItemGalleryContent -> caption
+    is TimelineItemAttachmentsContent -> caption
+    else -> null
+}
+
 fun TimelineItemEventContentWithAttachment.duration(): Duration? {
     return when (this) {
         is TimelineItemAudioContent -> duration

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/event/TimelineItemEventContentProvider.kt

@@ -13,7 +13,9 @@ import android.text.style.StyleSpan
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import androidx.core.text.buildSpannedString
 import androidx.core.text.inSpans
+import io.element.android.libraries.matrix.api.media.MediaSource
 import io.element.android.libraries.matrix.api.timeline.item.event.UnableToDecryptContent
+import kotlinx.collections.immutable.toImmutableList
 import org.jsoup.nodes.Document
 
 class TimelineItemEventContentProvider : PreviewParameterProvider<TimelineItemEventContent> {
@@ -111,3 +113,39 @@ fun aTimelineItemStateEventContent(
 ) = TimelineItemStateEventContent(
     body = body,
 )
+
+fun aTimelineItemAttachmentsContent(
+    body: String = "Attachments",
+    caption: String? = null,
+    attachments: List<AttachmentItem> = listOf(
+        anAttachmentItem(filename = "document.pdf", fileExtension = "pdf"),
+        anAttachmentItem(filename = "recording.mp3", fileExtension = "mp3", fileSize = 4_500_000L, formattedFileSize = "4.5MB"),
+    ),
+) = TimelineItemAttachmentsContent(
+    body = body,
+    caption = caption,
+    formattedCaption = null,
+    isEdited = false,
+    attachments = attachments.toImmutableList(),
+)
+
+fun anAttachmentItem(
+    filename: String = "file.pdf",
+    fileExtension: String = "pdf",
+    fileSize: Long? = 1_000_000L,
+    formattedFileSize: String = "1MB",
+    mimeType: String? = null,
+    thumbnailSource: MediaSource? = null,
+    hasThumbnail: Boolean = false,
+) = AttachmentItem(
+    filename = filename,
+    mimeType = mimeType ?: when {
+        hasThumbnail -> "image/jpeg"
+        else -> "application/$fileExtension"
+    },
+    mediaSource = MediaSource(url = "", json = ""),
+    thumbnailSource = thumbnailSource ?: if (hasThumbnail) MediaSource(url = "", json = "") else null,
+    fileSize = fileSize,
+    formattedFileSize = formattedFileSize,
+    fileExtension = fileExtension,
+)

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/event/TimelineItemGalleryContent.kt

@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.features.messages.impl.timeline.model.event
+
+import io.element.android.libraries.matrix.api.media.MediaSource
+import io.element.android.libraries.matrix.ui.media.MediaRequestData
+import kotlinx.collections.immutable.ImmutableList
+import kotlin.time.Duration
+
+data class TimelineItemGalleryContent(
+    val body: String,
+    val caption: String?,
+    val formattedCaption: CharSequence?,
+    override val isEdited: Boolean,
+    val items: ImmutableList<GalleryItem>,
+) : TimelineItemEventContent, TimelineItemEventMutableContent {
+    override val type: String = "TimelineItemGalleryContent"
+
+    val showCaption = caption != null
+}
+
+data class GalleryItem(
+    val filename: String,
+    val mimeType: String,
+    val mediaSource: MediaSource,
+    val type: Type,
+    val thumbnailSource: MediaSource?,
+    val width: Int?,
+    val height: Int?,
+    val thumbnailWidth: Int?,
+    val thumbnailHeight: Int?,
+    val blurhash: String?,
+    val duration: Duration = Duration.ZERO,
+) {
+    enum class Type {
+        Image,
+        Video,
+        Audio,
+        File;
+
+        fun isVisualMedia() = this in setOf(Image, Video)
+    }
+
+    val thumbnailMediaRequestData: MediaRequestData by lazy {
+        MediaRequestData(
+            source = thumbnailSource ?: mediaSource,
+            kind = MediaRequestData.Kind.Thumbnail(
+                width = thumbnailWidth?.toLong() ?: io.element.android.libraries.matrix.ui.media.MAX_THUMBNAIL_WIDTH,
+                height = thumbnailHeight?.toLong() ?: io.element.android.libraries.matrix.ui.media.MAX_THUMBNAIL_HEIGHT,
+            ),
+        )
+    }
+
+    val aspectRatio: Float? by lazy {
+        if (width != null && height != null && height > 0) {
+            width.toFloat() / height.toFloat()
+        } else {
+            null
+        }
+    }
+}

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/protection/TimelineItem.kt

@@ -9,10 +9,12 @@
 package io.element.android.features.messages.impl.timeline.protection
 
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAttachmentsContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAudioContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEmoteContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEncryptedContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemFileContent
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemGalleryContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemImageContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemLegacyCallInviteContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemLocationContent
@@ -40,6 +42,8 @@ fun TimelineItem.mustBeProtected(): Boolean {
             } else {
                 when (content) {
                     is TimelineItemImageContent,
+                    is TimelineItemGalleryContent,
+                    is TimelineItemAttachmentsContent,
                     is TimelineItemVideoContent,
                     is TimelineItemStickerContent -> true
                     is TimelineItemAudioContent,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/utils/messagesummary/DefaultMessageSummaryFormatter.kt

@@ -11,10 +11,12 @@ package io.element.android.features.messages.impl.utils.messagesummary
 import android.content.Context
 import dev.zacsweers.metro.ContributesBinding
 import io.element.android.features.messages.impl.timeline.model.event.RtcNotificationState
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAttachmentsContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAudioContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEncryptedContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEventContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemFileContent
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemGalleryContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemImageContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemLegacyCallInviteContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemLocationContent
@@ -56,6 +58,16 @@ class DefaultMessageSummaryFormatter(
             is TimelineItemVideoContent -> context.getString(CommonStrings.common_video)
             is TimelineItemFileContent -> context.getString(CommonStrings.common_file)
             is TimelineItemAudioContent -> context.getString(CommonStrings.common_audio)
+            is TimelineItemGalleryContent -> context.getString(CommonStrings.common_gallery)
+            is TimelineItemAttachmentsContent -> {
+                val count = content.attachments.size
+                val extensions = content.attachments.take(3).joinToString { it.fileExtension }
+                if (count <= 3) {
+                    extensions
+                } else {
+                    "$extensions +${count - 3}"
+                }
+            }
             is TimelineItemLegacyCallInviteContent -> context.getString(CommonStrings.common_unsupported_call)
             is TimelineItemRtcNotificationContent -> when (content.state) {
                 is RtcNotificationState.Declined -> {

features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/MessagesViewTest.kt

@@ -68,6 +68,7 @@ import io.element.android.libraries.ui.strings.CommonStrings
 import io.element.android.tests.testutils.EnsureCalledOnceWithTwoParamsAndResult
 import io.element.android.tests.testutils.EnsureNeverCalled
 import io.element.android.tests.testutils.EnsureNeverCalledWithParam
+import io.element.android.tests.testutils.EnsureNeverCalledWithThreeParamsAndResult
 import io.element.android.tests.testutils.EnsureNeverCalledWithTwoParams
 import io.element.android.tests.testutils.EnsureNeverCalledWithTwoParamsAndResult
 import io.element.android.tests.testutils.EventsRecorder
@@ -685,6 +686,7 @@ private fun AndroidComposeUiTest<ComponentActivity>.setMessagesView(
     onBackClick: () -> Unit = EnsureNeverCalled(),
     onRoomDetailsClick: () -> Unit = EnsureNeverCalled(),
     onEventClick: (isLive: Boolean, event: TimelineItem.Event) -> Boolean = EnsureNeverCalledWithTwoParamsAndResult(),
+    onGalleryEventItemClick: (isLive: Boolean, event: TimelineItem.Event, index: Int) -> Boolean = EnsureNeverCalledWithThreeParamsAndResult(),
     onUserDataClick: (UserId) -> Unit = EnsureNeverCalledWithParam(),
     onLinkClick: (String, Boolean) -> Unit = EnsureNeverCalledWithTwoParams(),
     onSendLocationClick: () -> Unit = EnsureNeverCalled(),
@@ -701,6 +703,7 @@ private fun AndroidComposeUiTest<ComponentActivity>.setMessagesView(
                 onBackClick = onBackClick,
                 onRoomDetailsClick = onRoomDetailsClick,
                 onEventContentClick = onEventClick,
+                onGalleryEventItemClick = onGalleryEventItemClick,
                 onUserDataClick = onUserDataClick,
                 onLinkClick = onLinkClick,
                 onSendLocationClick = onSendLocationClick,

features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/attachments/AttachmentsPreviewPresenterTest.kt

@@ -33,6 +33,7 @@ import io.element.android.libraries.core.mimetype.MimeTypes
 import io.element.android.libraries.matrix.api.core.EventId
 import io.element.android.libraries.matrix.api.media.AudioInfo
 import io.element.android.libraries.matrix.api.media.FileInfo
+import io.element.android.libraries.matrix.api.media.GalleryItemInfo
 import io.element.android.libraries.matrix.api.media.ImageInfo
 import io.element.android.libraries.matrix.api.media.VideoInfo
 import io.element.android.libraries.matrix.api.permalink.PermalinkBuilder
@@ -70,6 +71,7 @@ import io.element.android.tests.testutils.testCoroutineDispatchers
 import io.mockk.every
 import io.mockk.mockk
 import kotlinx.collections.immutable.persistentListOf
+import kotlinx.collections.immutable.toImmutableList
 import kotlinx.coroutines.CompletableDeferred
 import kotlinx.coroutines.ExperimentalCoroutinesApi
 import kotlinx.coroutines.test.TestScope
@@ -92,6 +94,7 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
     @Test
     fun `present - initial state`() = runTest {
         createAttachmentsPreviewPresenter().test {
+            skipItems(1)
             val initialState = awaitItem()
             assertThat(initialState.sendActionState).isEqualTo(SendActionState.Idle)
         }
@@ -116,13 +119,14 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
             onDoneListener = { onDoneListener() },
         )
         presenter.test {
+            skipItems(1)
             val initialState = awaitItem()
             assertThat(initialState.sendActionState).isEqualTo(SendActionState.Idle)
             assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.Processing(displayProgress = false))
             initialState.eventSink(AttachmentsPreviewEvent.SendAttachment)
             assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.Processing(displayProgress = true))
-            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.ReadyToUpload(mediaUploadInfo))
-            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.Uploading(mediaUploadInfo))
+            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.ReadyToUpload(listOf(mediaUploadInfo)))
+            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.Uploading(listOf(mediaUploadInfo)))
             assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Done)
             sendFileResult.assertions().isCalledOnce()
             onDoneListener.assertions().isCalledOnce()
@@ -150,6 +154,7 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
             onDoneListener = { onDoneListener() },
         )
         presenter.test {
+            skipItems(1)
             val initialState = awaitItem()
             assertThat(initialState.sendActionState).isEqualTo(SendActionState.Idle)
             // Pre-processing finishes
@@ -157,8 +162,8 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
             advanceUntilIdle()
             assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.Processing(displayProgress = false))
             initialState.eventSink(AttachmentsPreviewEvent.SendAttachment)
-            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.ReadyToUpload(mediaUploadInfo))
-            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.Uploading(mediaUploadInfo))
+            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.ReadyToUpload(listOf(mediaUploadInfo)))
+            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.Uploading(listOf(mediaUploadInfo)))
             assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Done)
             sendFileResult.assertions().isCalledOnce()
             onDoneListener.assertions().isCalledOnce()
@@ -186,6 +191,7 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
             onDoneListener = { onDoneListener() },
         )
         presenter.test {
+            skipItems(1)
             val initialState = awaitItem()
             assertThat(initialState.sendActionState).isEqualTo(SendActionState.Idle)
             assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.Processing(displayProgress = false))
@@ -193,8 +199,8 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
             // Pre-processing finishes
             processLatch.complete(Unit)
             assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.Processing(displayProgress = true))
-            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.ReadyToUpload(mediaUploadInfo))
-            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.Uploading(mediaUploadInfo))
+            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.ReadyToUpload(listOf(mediaUploadInfo)))
+            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.Uploading(listOf(mediaUploadInfo)))
             assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Done)
             sendFileResult.assertions().isCalledOnce()
             onDoneListener.assertions().isCalledOnce()
@@ -215,6 +221,7 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
             onDoneListener = { onDoneListener() },
         )
         presenter.test {
+            skipItems(1)
             val initialState = awaitItem()
             assertThat(initialState.sendActionState).isEqualTo(SendActionState.Idle)
             initialState.eventSink(AttachmentsPreviewEvent.SendAttachment)
@@ -238,6 +245,7 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
             onDoneListener = { onDoneListener() },
         )
         presenter.test {
+            skipItems(1)
             val initialState = awaitItem()
             assertThat(initialState.sendActionState).isEqualTo(SendActionState.Idle)
             // Pre-processing finishes
@@ -260,6 +268,7 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
             onDoneListener = { onDoneListener() },
         )
         presenter.test {
+            skipItems(1)
             val initialState = awaitItem()
             assertThat(initialState.sendActionState).isEqualTo(SendActionState.Idle)
             initialState.eventSink(AttachmentsPreviewEvent.CancelAndDismiss)
@@ -291,6 +300,7 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
             onDoneListener = { onDoneListener() },
         )
         presenter.test {
+            skipItems(1)
             val initialState = awaitItem()
             assertThat(initialState.sendActionState).isEqualTo(SendActionState.Idle)
             initialState.textEditorState.setMarkdown(A_CAPTION)
@@ -332,6 +342,7 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
             onDoneListener = { onDoneListener() },
         )
         presenter.test {
+            skipItems(1)
             val initialState = awaitItem()
             assertThat(initialState.sendActionState).isEqualTo(SendActionState.Idle)
             initialState.textEditorState.setMarkdown(A_CAPTION)
@@ -373,6 +384,7 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
             onDoneListener = { onDoneListener() },
         )
         presenter.test {
+            skipItems(1)
             val initialState = awaitItem()
             assertThat(initialState.sendActionState).isEqualTo(SendActionState.Idle)
             initialState.textEditorState.setMarkdown(A_CAPTION)
@@ -407,22 +419,19 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
         )
         val presenter = createAttachmentsPreviewPresenter(room = room, onDoneListener = onDoneListenerResult)
         presenter.test {
+            skipItems(1)
             val initialState = awaitItem()
             assertThat(initialState.sendActionState).isEqualTo(SendActionState.Idle)
             initialState.eventSink(AttachmentsPreviewEvent.SendAttachment)
             assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.Processing(displayProgress = false))
-            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.ReadyToUpload(mediaUploadInfo))
-            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.Uploading(mediaUploadInfo))
-
-            // Check that the onDoneListener is called so the screen would be dismissed
-            onDoneListenerResult.assertions().isCalledOnce()
-
+            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.ReadyToUpload(listOf(mediaUploadInfo)))
+            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.Uploading(listOf(mediaUploadInfo)))
             val failureState = awaitItem()
-            assertThat(failureState.sendActionState).isEqualTo(SendActionState.Failure(failure, mediaUploadInfo))
+            assertThat(failureState.sendActionState).isEqualTo(SendActionState.Failure(failure, listOf(mediaUploadInfo)))
             sendFileResult.assertions().isCalledOnce()
             failureState.eventSink(AttachmentsPreviewEvent.CancelAndClearSendState)
             val clearedState = awaitLastSequentialItem()
-            assertThat(clearedState.sendActionState).isEqualTo(SendActionState.Sending.ReadyToUpload(mediaUploadInfo))
+            assertThat(clearedState.sendActionState).isEqualTo(SendActionState.Sending.ReadyToUpload(listOf(mediaUploadInfo)))
         }
     }
 
@@ -440,19 +449,17 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
             onDoneListener = onDoneListenerResult,
         )
         presenter.test {
+            skipItems(1)
             val initialState = awaitItem()
             assertThat(initialState.sendActionState).isEqualTo(SendActionState.Idle)
             initialState.eventSink(AttachmentsPreviewEvent.SendAttachment)
             assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.Processing(displayProgress = false))
-            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.ReadyToUpload(mediaUploadInfo))
-            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.Uploading(mediaUploadInfo))
+            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.ReadyToUpload(listOf(mediaUploadInfo)))
+            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.Uploading(listOf(mediaUploadInfo)))
             initialState.eventSink(AttachmentsPreviewEvent.CancelAndClearSendState)
-            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.ReadyToUpload(mediaUploadInfo))
+            assertThat(awaitItem().sendActionState).isEqualTo(SendActionState.Sending.ReadyToUpload(listOf(mediaUploadInfo)))
             // The sending is cancelled and the state is kept at ReadyToUpload
             ensureAllEventsConsumed()
-
-            // Check that the onDoneListener is called so the screen would be dismissed
-            onDoneListenerResult.assertions().isCalledOnce()
         }
     }
 
@@ -464,7 +471,7 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
         val maxUploadSize = 999L // Set a max upload size smaller than the file size
 
         val presenter = createAttachmentsPreviewPresenter(
-            localMedia = localMedia,
+            attachments = listOf(Attachment.Media(localMedia)),
             room = FakeJoinedRoom(
                 liveTimeline = FakeTimeline().apply {
                     sendFileLambda = { _, _, _, _, _ ->
@@ -475,6 +482,7 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
             onDoneListener = onDoneListenerResult,
             mediaOptimizationSelectorPresenterFactory = FakeMediaOptimizationSelectorPresenterFactory {
                 MediaOptimizationSelectorState(
+                    index = 0,
                     // Set a max upload size smaller than the file size
                     maxUploadSize = AsyncData.Success(maxUploadSize),
                     videoSizeEstimations = AsyncData.Uninitialized,
@@ -503,7 +511,7 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
         val localMedia = aLocalMedia(uri = Uri.EMPTY, mediaInfo = aVideoMediaInfo())
 
         val presenter = createAttachmentsPreviewPresenter(
-            localMedia = localMedia,
+            attachments = listOf(Attachment.Media(localMedia)),
             room = FakeJoinedRoom(
                 liveTimeline = FakeTimeline().apply {
                     sendFileLambda = { _, _, _, _, _ ->
@@ -514,6 +522,7 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
             onDoneListener = onDoneListenerResult,
             mediaOptimizationSelectorPresenterFactory = FakeMediaOptimizationSelectorPresenterFactory {
                 MediaOptimizationSelectorState(
+                    index = 0,
                     // Set a max upload size smaller than the file size
                     maxUploadSize = AsyncData.Success(Long.MAX_VALUE),
                     videoSizeEstimations = AsyncData.Success(
@@ -571,6 +580,7 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
         )
 
         presenter.test {
+            skipItems(1)
             val initialState = awaitItem()
             initialState.eventSink(AttachmentsPreviewEvent.OpenImageEditor)
             val editorState = awaitItem()
@@ -584,7 +594,7 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
             assertThat(awaitItem().isApplyingImageEdits).isTrue()
 
             val appliedState = awaitItem()
-            assertThat((appliedState.attachment as Attachment.Media).localMedia.uri).isEqualTo(editedUri)
+            assertThat((appliedState.attachments.first() as Attachment.Media).localMedia.uri).isEqualTo(editedUri)
             assertThat(appliedState.imageEditorState).isNull()
             assertThat(appliedState.isApplyingImageEdits).isFalse()
         }
@@ -601,7 +611,7 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
             bottom = 0.9f,
         )
         val presenter = createAttachmentsPreviewPresenter(
-            localMedia = originalLocalMedia,
+            attachments = listOf(Attachment.Media(originalLocalMedia)),
             displayMediaQualitySelectorViews = true,
             attachmentImageEditor = FakeAttachmentImageEditor {
                 Result.success(
@@ -629,7 +639,7 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
             flippedState.eventSink(AttachmentsPreviewEvent.ApplyImageEdits)
 
             val appliedState = consumeItemsUntilPredicate { !it.isApplyingImageEdits && it.imageEditorState == null }.last()
-            assertThat((appliedState.attachment as Attachment.Media).localMedia.uri).isEqualTo(editedUri)
+            assertThat((appliedState.attachments.first() as Attachment.Media).localMedia.uri).isEqualTo(editedUri)
 
             appliedState.eventSink(AttachmentsPreviewEvent.OpenImageEditor)
             val reopenedState = consumeItemsUntilPredicate { it.imageEditorState != null }.last()
@@ -673,21 +683,26 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
         }
     }
 
+    @Test
     fun `present - sendAsFile attachment is pre-processed without image compression`() = runTest {
         // Even though the user has enabled "Optimize media quality" globally, picking the file
         // through the Files picker (sendAsFile = true) must skip compression. Regression test
         // for https://github.com/element-hq/element-x-android/issues/6365
         val mediaPreProcessor = FakeMediaPreProcessor()
         val presenter = createAttachmentsPreviewPresenter(
-            localMedia = aLocalMedia(mockMediaUrl, anImageMediaInfo()),
-            sendAsFile = true,
+            attachments = listOf(
+                Attachment.Media(
+                    localMedia = aLocalMedia(mockMediaUrl, anImageMediaInfo()),
+                    sendAsFile = true,
+                )
+            ),
             mediaPreProcessor = mediaPreProcessor,
             // Selector views are hidden in the sendAsFile flow, which triggers the auto pre-process path.
             displayMediaQualitySelectorViews = false,
             mediaOptimizationConfigProvider = FakeMediaOptimizationConfigProvider(
                 config = MediaOptimizationConfig(
-                    compressImages = true,
-                    videoCompressionPreset = VideoCompressionPreset.STANDARD,
+                    compressImages = false,
+                    videoCompressionPreset = VideoCompressionPreset.HIGH,
                 )
             ),
         )
@@ -772,9 +787,11 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
                 fileExtension = "png",
             ),
         )
-        val presenter = createAttachmentsPreviewPresenter(localMedia = localMedia)
-
+        val presenter = createAttachmentsPreviewPresenter(
+            attachments = listOf(Attachment.Media(localMedia)),
+        )
         presenter.test {
+            skipItems(1)
             val initialState = awaitItem()
             assertThat(initialState.canEditImage).isTrue()
 
@@ -795,7 +812,7 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
             ),
         )
         val presenter = createAttachmentsPreviewPresenter(
-            localMedia = localMedia,
+            attachments = listOf(Attachment.Media(localMedia)),
             attachmentImageEditor = FakeAttachmentImageEditor(
                 canEditResult = true,
             ) {
@@ -822,13 +839,18 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
     fun `present - sendAsFile video is pre-processed with best fitting preset`() = runTest {
         val mediaPreProcessor = FakeMediaPreProcessor()
         val presenter = createAttachmentsPreviewPresenter(
-            localMedia = aLocalMedia(mockMediaUrl, aVideoMediaInfo()),
-            sendAsFile = true,
+            attachments = listOf(
+                Attachment.Media(
+                    localMedia = aLocalMedia(mockMediaUrl, aVideoMediaInfo()),
+                    sendAsFile = true,
+                )
+            ),
             mediaPreProcessor = mediaPreProcessor,
             // Selector views are hidden in the sendAsFile flow, which triggers the auto pre-process path.
             displayMediaQualitySelectorViews = false,
             mediaOptimizationSelectorPresenterFactory = FakeMediaOptimizationSelectorPresenterFactory {
                 MediaOptimizationSelectorState(
+                    index = 0,
                     maxUploadSize = AsyncData.Success(250_000_000L),
                     videoSizeEstimations = AsyncData.Success(
                         persistentListOf(
@@ -863,11 +885,62 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
         }
     }
 
+    @Test
+    fun `present - sending gallery after image edits restarts preprocessing`() = runTest {
+        val sendGalleryResult =
+            lambdaRecorder<List<GalleryItemInfo>, String?, String?, EventId?, Result<FakeMediaUploadHandler>> { _, _, _, _ ->
+                Result.success(FakeMediaUploadHandler())
+            }
+        val firstLocalMedia = aLocalMedia(uri = Uri.parse("file:///tmp/original-1.jpeg"))
+        val secondLocalMedia = aLocalMedia(uri = Uri.parse("file:///tmp/original-2.jpeg"))
+        val editedUri = Uri.parse("file:///tmp/edited-1.jpeg")
+        val onDoneListener = lambdaRecorder<Unit> { }
+        val presenter = createAttachmentsPreviewPresenter(
+            room = FakeJoinedRoom(
+                liveTimeline = FakeTimeline().apply {
+                    sendGalleryLambda = sendGalleryResult
+                },
+            ),
+            attachments = persistentListOf(
+                aMediaAttachment(firstLocalMedia),
+                aMediaAttachment(secondLocalMedia),
+            ),
+            displayMediaQualitySelectorViews = false,
+            attachmentImageEditor = FakeAttachmentImageEditor {
+                Result.success(
+                    EditedLocalMedia(
+                        localMedia = firstLocalMedia.copy(uri = editedUri),
+                        file = File("/tmp/edited-1.jpeg"),
+                    )
+                )
+            },
+            onDoneListener = OnDoneListener { onDoneListener() },
+        )
+
+        presenter.test {
+            val initialState = awaitItem()
+            initialState.eventSink(AttachmentsPreviewEvent.OpenImageEditor)
+            val editorState = consumeItemsUntilPredicate { it.imageEditorState != null }.last()
+
+            editorState.eventSink(AttachmentsPreviewEvent.ApplyImageEdits)
+            val appliedState = consumeItemsUntilPredicate { !it.isApplyingImageEdits && it.imageEditorState == null }.last()
+
+            appliedState.eventSink(AttachmentsPreviewEvent.SendAttachment)
+            consumeItemsUntilPredicate { it.sendActionState == SendActionState.Done }
+
+            sendGalleryResult.assertions().isCalledOnce()
+            onDoneListener.assertions().isCalledOnce()
+        }
+    }
+
     private fun TestScope.createAttachmentsPreviewPresenter(
-        localMedia: LocalMedia = aLocalMedia(
-            uri = mockMediaUrl,
+        attachments: List<Attachment> = listOf(
+            aMediaAttachment(
+                aLocalMedia(
+                    uri = mockMediaUrl,
+                )
+            ),
         ),
-        sendAsFile: Boolean = false,
         room: JoinedRoom = FakeJoinedRoom(),
         timelineMode: Timeline.Mode = Timeline.Mode.Live,
         permalinkBuilder: PermalinkBuilder = FakePermalinkBuilder(),
@@ -878,6 +951,7 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
         mediaOptimizationSelectorPresenterFactory: FakeMediaOptimizationSelectorPresenterFactory = FakeMediaOptimizationSelectorPresenterFactory(
             fakePresenter = {
                 MediaOptimizationSelectorState(
+                    index = 0,
                     maxUploadSize = AsyncData.Uninitialized,
                     videoSizeEstimations = AsyncData.Uninitialized,
                     isImageOptimizationEnabled = null,
@@ -890,17 +964,22 @@ class AttachmentsPreviewPresenterTest : RobolectricTest() {
         ),
         mediaOptimizationConfigProvider: FakeMediaOptimizationConfigProvider = FakeMediaOptimizationConfigProvider(),
         attachmentImageEditor: AttachmentImageEditor = FakeAttachmentImageEditor {
-            Result.success(
-                EditedLocalMedia(
-                    localMedia = localMedia.copy(uri = Uri.parse("file:///tmp/default-edited.jpeg")),
-                    file = File("/tmp/default-edited.jpeg"),
+            val localMediaResult = (attachments.first() as? Attachment.Media)?.localMedia?.copy(uri = Uri.parse("file:///tmp/default-edited.jpeg"))
+            if (localMediaResult != null) {
+                Result.success(
+                    EditedLocalMedia(
+                        localMedia = localMediaResult,
+                        file = File("/tmp/default-edited.jpeg"),
+                    )
                 )
-            )
+            } else {
+                Result.failure(IllegalStateException("Check test values"))
+            }
         },
         videoCompressionPresetSelector: VideoCompressionPresetSelector = VideoCompressionPresetSelector(),
     ): AttachmentsPreviewPresenter {
         return AttachmentsPreviewPresenter(
-            attachment = aMediaAttachment(localMedia, sendAsFile = sendAsFile),
+            attachments = attachments.toImmutableList(),
             onDoneListener = onDoneListener,
             mediaSenderFactory = MediaSenderFactory { timelineMode ->
                 DefaultMediaSender(

features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/attachments/SendActionStateTest.kt

@@ -11,28 +11,27 @@ package io.element.android.features.messages.impl.attachments
 import com.google.common.truth.Truth.assertThat
 import io.element.android.features.messages.impl.attachments.preview.SendActionState
 import io.element.android.features.messages.impl.attachments.preview.aMediaUploadInfo
-import io.element.android.libraries.mediaupload.api.MediaUploadInfo
 import org.junit.Test
 
 class SendActionStateTest {
     @Test
-    fun `mediaUploadInfo() should return the value from Uploading class`() {
-        val mediaUploadInfo: MediaUploadInfo = aMediaUploadInfo()
-        val state: SendActionState = SendActionState.Sending.Uploading(mediaUploadInfo = aMediaUploadInfo())
-        assertThat(state.mediaUploadInfo()).isEqualTo(mediaUploadInfo)
+    fun `mediaUploadInfoList() should return the value from Uploading class`() {
+        val data = listOf(aMediaUploadInfo())
+        val state: SendActionState = SendActionState.Sending.Uploading(mediaInfos = data)
+        assertThat(state.mediaUploadInfoList()).isEqualTo(data)
     }
 
     @Test
-    fun `mediaUploadInfo() should return the value from ReadyToUpload class`() {
-        val mediaUploadInfo: MediaUploadInfo = aMediaUploadInfo()
-        val state: SendActionState = SendActionState.Sending.ReadyToUpload(mediaInfo = aMediaUploadInfo())
-        assertThat(state.mediaUploadInfo()).isEqualTo(mediaUploadInfo)
+    fun `mediaUploadInfoList() should return the value from ReadyToUpload class`() {
+        val data = listOf(aMediaUploadInfo())
+        val state: SendActionState = SendActionState.Sending.ReadyToUpload(mediaInfos = data)
+        assertThat(state.mediaUploadInfoList()).isEqualTo(data)
     }
 
     @Test
-    fun `mediaUploadInfo() should return the value from Failure class`() {
-        val mediaUploadInfo: MediaUploadInfo = aMediaUploadInfo()
-        val state: SendActionState = SendActionState.Failure(error = IllegalStateException("An error"), mediaUploadInfo = aMediaUploadInfo())
-        assertThat(state.mediaUploadInfo()).isEqualTo(mediaUploadInfo)
+    fun `mediaUploadInfoList() should return the value from Failure class`() {
+        val data = listOf(aMediaUploadInfo())
+        val state: SendActionState = SendActionState.Failure(error = IllegalStateException("An error"), mediaInfos = data)
+        assertThat(state.mediaUploadInfoList()).isEqualTo(data)
     }
 }

features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/attachments/video/DefaultMediaOptimizationSelectorPresenterTest.kt

@@ -274,6 +274,7 @@ class DefaultMediaOptimizationSelectorPresenterTest : RobolectricTest() {
     }
 
     private fun createDefaultMediaOptimizationSelectorPresenter(
+        index: Int = 0,
         localMedia: LocalMedia = aLocalMedia(mockMediaUrl, aVideoMediaInfo()),
         maxUploadSizeProvider: MaxUploadSizeProvider = MaxUploadSizeProvider { Result.success(1_000L) },
         featureFlagService: FakeFeatureFlagService = FakeFeatureFlagService(mapOf(FeatureFlags.SelectableMediaQuality.key to true)),
@@ -283,6 +284,7 @@ class DefaultMediaOptimizationSelectorPresenterTest : RobolectricTest() {
         sendAsFile: Boolean = false,
     ): DefaultMediaOptimizationSelectorPresenter {
         return DefaultMediaOptimizationSelectorPresenter(
+            index = index,
             localMedia = localMedia,
             sendAsFile = sendAsFile,
             maxUploadSizeProvider = maxUploadSizeProvider,

features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/messagecomposer/MessageComposerPresenterSlashCommandTest.kt

@@ -24,6 +24,7 @@ import io.element.android.features.messages.impl.utils.FakeMentionSpanFormatter
 import io.element.android.features.messages.impl.utils.FakeTextPillificationHelper
 import io.element.android.features.messages.impl.utils.TextPillificationHelper
 import io.element.android.libraries.designsystem.utils.snackbar.SnackbarDispatcher
+import io.element.android.libraries.featureflag.test.FakeFeatureFlagService
 import io.element.android.libraries.matrix.api.core.ThreadId
 import io.element.android.libraries.matrix.api.core.UserId
 import io.element.android.libraries.matrix.api.permalink.PermalinkBuilder
@@ -274,6 +275,7 @@ class MessageComposerPresenterSlashCommandTest {
         mediaOptimizationConfigProvider: FakeMediaOptimizationConfigProvider = FakeMediaOptimizationConfigProvider(),
         threadRoot: ThreadId? = null,
         slashCommandService: SlashCommandService = FakeSlashCommandService(),
+        featureFlagService: FakeFeatureFlagService = FakeFeatureFlagService(),
     ) = MessageComposerPresenter(
         navigator = navigator,
         sessionCoroutineScope = this,
@@ -312,6 +314,7 @@ class MessageComposerPresenterSlashCommandTest {
         mediaOptimizationConfigProvider = mediaOptimizationConfigProvider,
         notificationConversationService = notificationConversationService,
         slashCommandService = slashCommandService,
+        featureFlagService = featureFlagService,
     ).apply {
         isTesting = true
         showTextFormatting = isRichTextEditorEnabled

features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/messagecomposer/MessageComposerPresenterTest.kt

@@ -34,6 +34,7 @@ import io.element.android.features.messages.impl.utils.TextPillificationHelper
 import io.element.android.libraries.architecture.AsyncAction
 import io.element.android.libraries.core.mimetype.MimeTypes
 import io.element.android.libraries.designsystem.utils.snackbar.SnackbarDispatcher
+import io.element.android.libraries.featureflag.test.FakeFeatureFlagService
 import io.element.android.libraries.matrix.api.core.EventId
 import io.element.android.libraries.matrix.api.core.RoomId
 import io.element.android.libraries.matrix.api.core.ThreadId
@@ -1534,6 +1535,7 @@ class MessageComposerPresenterTest : RobolectricTest() {
         mediaOptimizationConfigProvider: FakeMediaOptimizationConfigProvider = FakeMediaOptimizationConfigProvider(),
         threadRoot: ThreadId? = null,
         slashCommandService: SlashCommandService = FakeSlashCommandService(),
+        featureFlagService: FakeFeatureFlagService = FakeFeatureFlagService(),
     ) = MessageComposerPresenter(
         navigator = navigator,
         sessionCoroutineScope = this,
@@ -1572,6 +1574,7 @@ class MessageComposerPresenterTest : RobolectricTest() {
         mediaOptimizationConfigProvider = mediaOptimizationConfigProvider,
         notificationConversationService = notificationConversationService,
         slashCommandService = slashCommandService,
+        featureFlagService = featureFlagService,
     ).apply {
         isTesting = true
         showTextFormatting = isRichTextEditorEnabled

features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/pinned/list/PinnedMessagesListViewTest.kt

@@ -27,6 +27,7 @@ import io.element.android.features.messages.impl.timeline.model.event.aTimelineI
 import io.element.android.libraries.matrix.api.user.MatrixUser
 import io.element.android.tests.testutils.EnsureNeverCalled
 import io.element.android.tests.testutils.EnsureNeverCalledWithParam
+import io.element.android.tests.testutils.EnsureNeverCalledWithTwoParams
 import io.element.android.tests.testutils.EventsRecorder
 import io.element.android.tests.testutils.ensureCalledOnce
 import io.element.android.tests.testutils.ensureCalledOnceWithParam
@@ -96,6 +97,7 @@ private fun AndroidComposeUiTest<ComponentActivity>.setPinnedMessagesListView(
     state: PinnedMessagesListState,
     onBackClick: () -> Unit = EnsureNeverCalled(),
     onEventClick: (event: TimelineItem.Event) -> Unit = EnsureNeverCalledWithParam(),
+    onGalleryItemClick: (event: TimelineItem.Event, index: Int) -> Unit = EnsureNeverCalledWithTwoParams(),
     onUserDataClick: (MatrixUser) -> Unit = EnsureNeverCalledWithParam(),
     onLinkClick: (Link) -> Unit = EnsureNeverCalledWithParam(),
     onLinkLongClick: (Link) -> Unit = EnsureNeverCalledWithParam(),
@@ -105,6 +107,7 @@ private fun AndroidComposeUiTest<ComponentActivity>.setPinnedMessagesListView(
             state = state,
             onBackClick = onBackClick,
             onEventClick = onEventClick,
+            onGalleryItemClick = onGalleryItemClick,
             onUserDataClick = onUserDataClick,
             onLinkClick = onLinkClick,
             onLinkLongClick = onLinkLongClick,

features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/timeline/TimelineViewTest.kt

@@ -216,6 +216,7 @@ private fun AndroidComposeUiTest<ComponentActivity>.setTimelineView(
     onReactionLongClick: (emoji: String, TimelineItem.Event) -> Unit = EnsureNeverCalledWithTwoParams(),
     onMoreReactionsClick: (TimelineItem.Event) -> Unit = EnsureNeverCalledWithParam(),
     onReadReceiptClick: (TimelineItem.Event) -> Unit = EnsureNeverCalledWithParam(),
+    onGalleryItemClick: (TimelineItem.Event, Int) -> Unit = EnsureNeverCalledWithTwoParams(),
     forceJumpToBottomVisibility: Boolean = false,
 ) {
     setSafeContent(clearAndroidUiDispatcher = true) {
@@ -231,6 +232,7 @@ private fun AndroidComposeUiTest<ComponentActivity>.setTimelineView(
             onReactionLongClick = onReactionLongClick,
             onMoreReactionsClick = onMoreReactionsClick,
             onReadReceiptClick = onReadReceiptClick,
+            onGalleryItemClick = onGalleryItemClick,
             forceJumpToBottomVisibility = forceJumpToBottomVisibility,
         )
     }

features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/timeline/factories/event/TimelineItemContentMessageFactoryTest.kt

@@ -19,9 +19,13 @@ import androidx.core.text.inSpans
 import androidx.core.text.toSpannable
 import com.google.common.truth.Truth.assertThat
 import io.element.android.features.location.api.Location
+import io.element.android.features.messages.impl.timeline.model.event.AttachmentItem
+import io.element.android.features.messages.impl.timeline.model.event.GalleryItem
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAttachmentsContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAudioContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEmoteContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemFileContent
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemGalleryContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemImageContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemLocationContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemNoticeContent
@@ -47,6 +51,8 @@ import io.element.android.libraries.matrix.api.timeline.item.event.AudioMessageT
 import io.element.android.libraries.matrix.api.timeline.item.event.EmoteMessageType
 import io.element.android.libraries.matrix.api.timeline.item.event.FileMessageType
 import io.element.android.libraries.matrix.api.timeline.item.event.FormattedBody
+import io.element.android.libraries.matrix.api.timeline.item.event.GalleryItemType
+import io.element.android.libraries.matrix.api.timeline.item.event.GalleryMessageType
 import io.element.android.libraries.matrix.api.timeline.item.event.ImageMessageType
 import io.element.android.libraries.matrix.api.timeline.item.event.InReplyTo
 import io.element.android.libraries.matrix.api.timeline.item.event.LocationMessageType
@@ -767,6 +773,428 @@ class TimelineItemContentMessageFactoryTest : RobolectricTest() {
         (result as TimelineItemTextContent).formattedBody.assertSpannedEquals(expectedSpanned)
     }
 
+    @Test
+    fun `test create GalleryMessageType with image items returns TimelineItemGalleryContent`() = runTest {
+        val sut = createTimelineItemContentMessageFactory()
+        val result = sut.create(
+            content = createMessageContent(
+                type = GalleryMessageType(
+                    body = "Gallery body",
+                    formatted = null,
+                    items = listOf(
+                        GalleryItemType.Image(
+                            content = ImageMessageType(
+                                filename = "image.jpg",
+                                caption = null,
+                                formattedCaption = null,
+                                source = MediaSource("image_url"),
+                                info = ImageInfo(
+                                    height = 100L,
+                                    width = 200L,
+                                    mimetype = MimeTypes.Jpeg,
+                                    size = 888L,
+                                    thumbnailInfo = ThumbnailInfo(height = 10L, width = 20L, mimetype = MimeTypes.Jpeg, size = 111L),
+                                    thumbnailSource = MediaSource("thumbnail_url"),
+                                    blurhash = A_BLUR_HASH,
+                                )
+                            )
+                        )
+                    )
+                )
+            ),
+            senderId = A_USER_ID,
+            senderProfile = aProfileDetails(),
+            eventId = AN_EVENT_ID,
+        )
+        val expected = TimelineItemGalleryContent(
+            body = "Gallery body",
+            caption = "Gallery body",
+            formattedCaption = null,
+            isEdited = false,
+            items = persistentListOf(
+                GalleryItem(
+                    filename = "image.jpg",
+                    mimeType = MimeTypes.Jpeg,
+                    mediaSource = MediaSource("image_url"),
+                    type = GalleryItem.Type.Image,
+                    thumbnailSource = MediaSource("thumbnail_url"),
+                    width = 200,
+                    height = 100,
+                    thumbnailWidth = 20,
+                    thumbnailHeight = 10,
+                    blurhash = A_BLUR_HASH,
+                )
+            )
+        )
+        assertThat(result).isEqualTo(expected)
+    }
+
+    @Test
+    fun `test create GalleryMessageType with video items returns TimelineItemGalleryContent`() = runTest {
+        val sut = createTimelineItemContentMessageFactory()
+        val result = sut.create(
+            content = createMessageContent(
+                type = GalleryMessageType(
+                    body = "Gallery body",
+                    formatted = null,
+                    items = listOf(
+                        GalleryItemType.Video(
+                            content = VideoMessageType(
+                                filename = "video.mp4",
+                                caption = null,
+                                formattedCaption = null,
+                                source = MediaSource("video_url"),
+                                info = VideoInfo(
+                                    duration = 1.minutes,
+                                    height = 100L,
+                                    width = 200L,
+                                    mimetype = MimeTypes.Mp4,
+                                    size = 1234L,
+                                    thumbnailInfo = ThumbnailInfo(height = 10L, width = 20L, mimetype = MimeTypes.Jpeg, size = 111L),
+                                    thumbnailSource = MediaSource("thumbnail_url"),
+                                    blurhash = A_BLUR_HASH,
+                                )
+                            )
+                        )
+                    )
+                )
+            ),
+            senderId = A_USER_ID,
+            senderProfile = aProfileDetails(),
+            eventId = AN_EVENT_ID,
+        )
+        val expected = TimelineItemGalleryContent(
+            body = "Gallery body",
+            caption = "Gallery body",
+            formattedCaption = null,
+            isEdited = false,
+            items = persistentListOf(
+                GalleryItem(
+                    filename = "video.mp4",
+                    mimeType = MimeTypes.Mp4,
+                    mediaSource = MediaSource("video_url"),
+                    type = GalleryItem.Type.Video,
+                    thumbnailSource = MediaSource("thumbnail_url"),
+                    width = 200,
+                    height = 100,
+                    thumbnailWidth = 20,
+                    thumbnailHeight = 10,
+                    blurhash = A_BLUR_HASH,
+                    duration = 1.minutes,
+                )
+            )
+        )
+        assertThat(result).isEqualTo(expected)
+    }
+
+    @Test
+    fun `test create GalleryMessageType with audio items returns TimelineItemAttachmentsContent`() = runTest {
+        val sut = createTimelineItemContentMessageFactory()
+        val result = sut.create(
+            content = createMessageContent(
+                type = GalleryMessageType(
+                    body = "Gallery body",
+                    formatted = null,
+                    items = listOf(
+                        GalleryItemType.Audio(
+                            content = AudioMessageType(
+                                filename = "audio.mp3",
+                                caption = null,
+                                formattedCaption = null,
+                                source = MediaSource("audio_url"),
+                                info = AudioInfo(
+                                    duration = 1.minutes,
+                                    size = 123L,
+                                    mimetype = MimeTypes.Mp3,
+                                )
+                            )
+                        )
+                    )
+                )
+            ),
+            senderId = A_USER_ID,
+            senderProfile = aProfileDetails(),
+            eventId = AN_EVENT_ID,
+        )
+        val expected = TimelineItemAttachmentsContent(
+            body = "Gallery body",
+            caption = "Gallery body",
+            formattedCaption = null,
+            isEdited = false,
+            attachments = persistentListOf(
+                AttachmentItem(
+                    filename = "audio.mp3",
+                    mimeType = MimeTypes.Mp3,
+                    mediaSource = MediaSource("audio_url"),
+                    thumbnailSource = null,
+                    fileSize = 123L,
+                    formattedFileSize = "123 Bytes",
+                    fileExtension = "mp3",
+                )
+            )
+        )
+        assertThat(result).isEqualTo(expected)
+    }
+
+    @Test
+    fun `test create GalleryMessageType with file items returns TimelineItemAttachmentsContent`() = runTest {
+        val sut = createTimelineItemContentMessageFactory()
+        val result = sut.create(
+            content = createMessageContent(
+                type = GalleryMessageType(
+                    body = "Gallery body",
+                    formatted = null,
+                    items = listOf(
+                        GalleryItemType.File(
+                            content = FileMessageType(
+                                filename = "document.pdf",
+                                caption = null,
+                                formattedCaption = null,
+                                source = MediaSource("file_url"),
+                                info = FileInfo(
+                                    mimetype = MimeTypes.Pdf,
+                                    size = 456L,
+                                    thumbnailInfo = null,
+                                    thumbnailSource = null,
+                                )
+                            )
+                        )
+                    )
+                )
+            ),
+            senderId = A_USER_ID,
+            senderProfile = aProfileDetails(),
+            eventId = AN_EVENT_ID,
+        )
+        val expected = TimelineItemAttachmentsContent(
+            body = "Gallery body",
+            caption = "Gallery body",
+            formattedCaption = null,
+            isEdited = false,
+            attachments = persistentListOf(
+                AttachmentItem(
+                    filename = "document.pdf",
+                    mimeType = MimeTypes.Pdf,
+                    mediaSource = MediaSource("file_url"),
+                    thumbnailSource = null,
+                    fileSize = 456L,
+                    formattedFileSize = "456 Bytes",
+                    fileExtension = "pdf",
+                )
+            )
+        )
+        assertThat(result).isEqualTo(expected)
+    }
+
+    @Test
+    fun `test create GalleryMessageType with image items without thumbnails returns TimelineItemAttachmentsContent`() = runTest {
+        val sut = createTimelineItemContentMessageFactory()
+        val result = sut.create(
+            content = createMessageContent(
+                type = GalleryMessageType(
+                    body = "Gallery body",
+                    formatted = null,
+                    items = listOf(
+                        GalleryItemType.Image(
+                            content = ImageMessageType(
+                                filename = "image.jpg",
+                                caption = null,
+                                formattedCaption = null,
+                                source = MediaSource("image_url"),
+                                info = ImageInfo(
+                                    height = 100L,
+                                    width = 200L,
+                                    mimetype = MimeTypes.Jpeg,
+                                    size = 888L,
+                                    thumbnailInfo = null,
+                                    thumbnailSource = null,
+                                    blurhash = null,
+                                )
+                            )
+                        )
+                    )
+                )
+            ),
+            senderId = A_USER_ID,
+            senderProfile = aProfileDetails(),
+            eventId = AN_EVENT_ID,
+        )
+        val expected = TimelineItemAttachmentsContent(
+            body = "Gallery body",
+            caption = "Gallery body",
+            formattedCaption = null,
+            isEdited = false,
+            attachments = persistentListOf(
+                AttachmentItem(
+                    filename = "image.jpg",
+                    mimeType = MimeTypes.Jpeg,
+                    mediaSource = MediaSource("image_url"),
+                    thumbnailSource = null,
+                    fileSize = 888L,
+                    formattedFileSize = "888 Bytes",
+                    fileExtension = "jpg",
+                )
+            )
+        )
+        assertThat(result).isEqualTo(expected)
+    }
+
+    @Test
+    fun `test create GalleryMessageType with only Other items returns TimelineItemAttachmentsContent with empty attachments`() = runTest {
+        val sut = createTimelineItemContentMessageFactory()
+        val result = sut.create(
+            content = createMessageContent(
+                type = GalleryMessageType(
+                    body = "Gallery body",
+                    formatted = null,
+                    items = listOf(
+                        GalleryItemType.Other(itemType = "unknown_type", body = "Some body")
+                    )
+                )
+            ),
+            senderId = A_USER_ID,
+            senderProfile = aProfileDetails(),
+            eventId = AN_EVENT_ID,
+        )
+        val expected = TimelineItemAttachmentsContent(
+            body = "Gallery body",
+            caption = "Gallery body",
+            formattedCaption = null,
+            isEdited = false,
+            attachments = persistentListOf(),
+        )
+        assertThat(result).isEqualTo(expected)
+    }
+
+    @Test
+    fun `test create GalleryMessageType with mixed image and file items returns TimelineItemAttachmentsContent`() = runTest {
+        val sut = createTimelineItemContentMessageFactory()
+        val result = sut.create(
+            content = createMessageContent(
+                type = GalleryMessageType(
+                    body = "Gallery body",
+                    formatted = null,
+                    items = listOf(
+                        GalleryItemType.Image(
+                            content = ImageMessageType(
+                                filename = "image.jpg",
+                                caption = null,
+                                formattedCaption = null,
+                                source = MediaSource("image_url"),
+                                info = ImageInfo(
+                                    height = 100L,
+                                    width = 200L,
+                                    mimetype = MimeTypes.Jpeg,
+                                    size = 888L,
+                                    thumbnailInfo = ThumbnailInfo(height = 10L, width = 20L, mimetype = MimeTypes.Jpeg, size = 111L),
+                                    thumbnailSource = MediaSource("thumbnail_url"),
+                                    blurhash = null,
+                                )
+                            )
+                        ),
+                        GalleryItemType.File(
+                            content = FileMessageType(
+                                filename = "document.pdf",
+                                caption = null,
+                                formattedCaption = null,
+                                source = MediaSource("file_url"),
+                                info = FileInfo(
+                                    mimetype = MimeTypes.Pdf,
+                                    size = 456L,
+                                    thumbnailInfo = null,
+                                    thumbnailSource = null,
+                                )
+                            )
+                        )
+                    )
+                )
+            ),
+            senderId = A_USER_ID,
+            senderProfile = aProfileDetails(),
+            eventId = AN_EVENT_ID,
+        )
+        assertThat(result).isInstanceOf(TimelineItemAttachmentsContent::class.java)
+        val attachmentsContent = result as TimelineItemAttachmentsContent
+        assertThat(attachmentsContent.attachments).hasSize(2)
+    }
+
+    @Test
+    fun `test create GalleryMessageType with formatted caption returns TimelineItemGalleryContent with formatted caption`() = runTest {
+        val sut = createTimelineItemContentMessageFactory()
+        val result = sut.create(
+            content = createMessageContent(
+                type = GalleryMessageType(
+                    body = "Gallery body",
+                    formatted = FormattedBody(MessageFormat.HTML, "formatted"),
+                    items = listOf(
+                        GalleryItemType.Image(
+                            content = ImageMessageType(
+                                filename = "image.jpg",
+                                caption = null,
+                                formattedCaption = null,
+                                source = MediaSource("image_url"),
+                                info = ImageInfo(
+                                    height = 100L,
+                                    width = 200L,
+                                    mimetype = MimeTypes.Jpeg,
+                                    size = 888L,
+                                    thumbnailInfo = ThumbnailInfo(height = 10L, width = 20L, mimetype = MimeTypes.Jpeg, size = 111L),
+                                    thumbnailSource = MediaSource("thumbnail_url"),
+                                    blurhash = null,
+                                )
+                            )
+                        )
+                    )
+                )
+            ),
+            senderId = A_USER_ID,
+            senderProfile = aProfileDetails(),
+            eventId = AN_EVENT_ID,
+        )
+        assertThat(result).isInstanceOf(TimelineItemGalleryContent::class.java)
+        val galleryContent = result as TimelineItemGalleryContent
+        galleryContent.formattedCaption.assertSpannedEquals(SpannedString("formatted"))
+    }
+
+    @Test
+    fun `test create GalleryMessageType with empty body has no caption`() = runTest {
+        val sut = createTimelineItemContentMessageFactory()
+        val result = sut.create(
+            content = createMessageContent(
+                type = GalleryMessageType(
+                    body = "",
+                    formatted = null,
+                    items = listOf(
+                        GalleryItemType.Image(
+                            content = ImageMessageType(
+                                filename = "image.jpg",
+                                caption = null,
+                                formattedCaption = null,
+                                source = MediaSource("image_url"),
+                                info = ImageInfo(
+                                    height = 100L,
+                                    width = 200L,
+                                    mimetype = MimeTypes.Jpeg,
+                                    size = 888L,
+                                    thumbnailInfo = ThumbnailInfo(height = 10L, width = 20L, mimetype = MimeTypes.Jpeg, size = 111L),
+                                    thumbnailSource = MediaSource("thumbnail_url"),
+                                    blurhash = null,
+                                )
+                            )
+                        )
+                    )
+                )
+            ),
+            senderId = A_USER_ID,
+            senderProfile = aProfileDetails(),
+            eventId = AN_EVENT_ID,
+        )
+        assertThat(result).isInstanceOf(TimelineItemGalleryContent::class.java)
+        val galleryContent = result as TimelineItemGalleryContent
+        assertThat(galleryContent.caption).isNull()
+        assertThat(galleryContent.formattedCaption).isNull()
+    }
+
     private fun createMessageContent(
         body: String = "Body",
         inReplyTo: InReplyTo? = null,

features/messages/test/src/main/kotlin/io/element/android/features/messages/test/attachments/video/FakeMediaOptimizationSelectorPresenterFactory.kt

@@ -16,6 +16,7 @@ import io.element.android.libraries.mediaviewer.api.local.LocalMedia
 class FakeMediaOptimizationSelectorPresenterFactory(
     private val fakePresenter: MediaOptimizationSelectorPresenter = MediaOptimizationSelectorPresenter {
         MediaOptimizationSelectorState(
+            index = 0,
             maxUploadSize = AsyncData.Uninitialized,
             videoSizeEstimations = AsyncData.Uninitialized,
             isImageOptimizationEnabled = null,
@@ -26,7 +27,7 @@ class FakeMediaOptimizationSelectorPresenterFactory(
         )
     }
 ) : MediaOptimizationSelectorPresenter.Factory {
-    override fun create(localMedia: LocalMedia, sendAsFile: Boolean): MediaOptimizationSelectorPresenter {
+    override fun create(index: Int, localMedia: LocalMedia, sendAsFile: Boolean): MediaOptimizationSelectorPresenter {
         return fakePresenter
     }
 }