Merge pull request #1834 from vector-im/feature/bma/readReceipts

Render send state and read receipts

Author: bmarty

appconfig/src/main/kotlin/io/element/android/appconfig/TimelineConfig.kt

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.appconfig
+
+object TimelineConfig {
+    const val maxReadReceiptToDisplay = 3
+}

features/messages/impl/build.gradle.kts

@@ -33,6 +33,7 @@ dependencies {
     implementation(projects.anvilannotations)
     anvil(projects.anvilcodegen)
     api(projects.features.messages.api)
+    implementation(projects.appconfig)
     implementation(projects.features.call)
     implementation(projects.features.location.api)
     implementation(projects.features.poll.api)

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

@@ -42,6 +42,7 @@ import io.element.android.features.messages.impl.timeline.TimelinePresenter
 import io.element.android.features.messages.impl.timeline.TimelineState
 import io.element.android.features.messages.impl.timeline.components.customreaction.CustomReactionPresenter
 import io.element.android.features.messages.impl.timeline.components.reactionsummary.ReactionSummaryPresenter
+import io.element.android.features.messages.impl.timeline.components.receipt.bottomsheet.ReadReceiptBottomSheetPresenter
 import io.element.android.features.messages.impl.timeline.components.retrysendmenu.RetrySendMenuPresenter
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAudioContent
@@ -97,6 +98,7 @@ class MessagesPresenter @AssistedInject constructor(
     private val customReactionPresenter: CustomReactionPresenter,
     private val reactionSummaryPresenter: ReactionSummaryPresenter,
     private val retrySendMenuPresenter: RetrySendMenuPresenter,
+    private val readReceiptBottomSheetPresenter: ReadReceiptBottomSheetPresenter,
     private val networkMonitor: NetworkMonitor,
     private val snackbarDispatcher: SnackbarDispatcher,
     private val messageSummaryFormatter: MessageSummaryFormatter,
@@ -124,6 +126,7 @@ class MessagesPresenter @AssistedInject constructor(
         val customReactionState = customReactionPresenter.present()
         val reactionSummaryState = reactionSummaryPresenter.present()
         val retryState = retrySendMenuPresenter.present()
+        val readReceiptBottomSheetState = readReceiptBottomSheetPresenter.present()
 
         val syncUpdateFlow = room.syncUpdateFlow.collectAsState()
         val userHasPermissionToSendMessage by room.canSendMessageAsState(type = MessageEventType.ROOM_MESSAGE, updateKey = syncUpdateFlow.value)
@@ -201,6 +204,7 @@ class MessagesPresenter @AssistedInject constructor(
             customReactionState = customReactionState,
             reactionSummaryState = reactionSummaryState,
             retrySendMenuState = retryState,
+            readReceiptBottomSheetState = readReceiptBottomSheetState,
             hasNetworkConnection = networkConnectionStatus == NetworkStatus.Online,
             snackbarMessage = snackbarMessage,
             showReinvitePrompt = showReinvitePrompt,

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

@@ -22,6 +22,7 @@ import io.element.android.features.messages.impl.messagecomposer.MessageComposer
 import io.element.android.features.messages.impl.timeline.TimelineState
 import io.element.android.features.messages.impl.timeline.components.customreaction.CustomReactionState
 import io.element.android.features.messages.impl.timeline.components.reactionsummary.ReactionSummaryState
+import io.element.android.features.messages.impl.timeline.components.receipt.bottomsheet.ReadReceiptBottomSheetState
 import io.element.android.features.messages.impl.timeline.components.retrysendmenu.RetrySendMenuState
 import io.element.android.features.messages.impl.voicemessages.composer.VoiceMessageComposerState
 import io.element.android.libraries.architecture.Async
@@ -43,6 +44,7 @@ data class MessagesState(
     val customReactionState: CustomReactionState,
     val reactionSummaryState: ReactionSummaryState,
     val retrySendMenuState: RetrySendMenuState,
+    val readReceiptBottomSheetState: ReadReceiptBottomSheetState,
     val hasNetworkConnection: Boolean,
     val snackbarMessage: SnackbarMessage?,
     val inviteProgress: Async<Unit>,

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

@@ -24,6 +24,7 @@ import io.element.android.features.messages.impl.timeline.aTimelineItemList
 import io.element.android.features.messages.impl.timeline.aTimelineState
 import io.element.android.features.messages.impl.timeline.components.customreaction.CustomReactionState
 import io.element.android.features.messages.impl.timeline.components.reactionsummary.ReactionSummaryState
+import io.element.android.features.messages.impl.timeline.components.receipt.bottomsheet.ReadReceiptBottomSheetState
 import io.element.android.features.messages.impl.timeline.components.retrysendmenu.RetrySendMenuState
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemTextContent
 import io.element.android.features.messages.impl.voicemessages.composer.aVoiceMessageComposerState
@@ -96,6 +97,10 @@ fun aMessagesState() = MessagesState(
         selectedEvent = null,
         eventSink = {},
     ),
+    readReceiptBottomSheetState = ReadReceiptBottomSheetState(
+        selectedEvent = null,
+        eventSink = {},
+    ),
     actionListState = anActionListState(),
     customReactionState = CustomReactionState(
         target = CustomReactionState.Target.None,

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

@@ -70,6 +70,8 @@ import io.element.android.features.messages.impl.timeline.components.customreact
 import io.element.android.features.messages.impl.timeline.components.customreaction.CustomReactionEvents
 import io.element.android.features.messages.impl.timeline.components.reactionsummary.ReactionSummaryEvents
 import io.element.android.features.messages.impl.timeline.components.reactionsummary.ReactionSummaryView
+import io.element.android.features.messages.impl.timeline.components.receipt.bottomsheet.ReadReceiptBottomSheet
+import io.element.android.features.messages.impl.timeline.components.receipt.bottomsheet.ReadReceiptBottomSheetEvents
 import io.element.android.features.messages.impl.timeline.components.retrysendmenu.RetrySendMenuEvents
 import io.element.android.features.messages.impl.timeline.components.retrysendmenu.RetrySendMessageMenu
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
@@ -212,6 +214,9 @@ fun MessagesView(
                 onReactionClicked = ::onEmojiReactionClicked,
                 onReactionLongClicked = ::onEmojiReactionLongClicked,
                 onMoreReactionsClicked = ::onMoreReactionsClicked,
+                onReadReceiptClick = { event ->
+                    state.readReceiptBottomSheetState.eventSink(ReadReceiptBottomSheetEvents.EventSelected(event))
+                },
                 onSendLocationClicked = onSendLocationClicked,
                 onCreatePollClicked = onCreatePollClicked,
                 onSwipeToReply = { targetEvent ->
@@ -246,13 +251,12 @@ fun MessagesView(
     )
 
     ReactionSummaryView(state = state.reactionSummaryState)
-    RetrySendMessageMenu(
-        state = state.retrySendMenuState
-    )
-
-    ReinviteDialog(
-        state = state
+    RetrySendMessageMenu(state = state.retrySendMenuState)
+    ReadReceiptBottomSheet(
+        state = state.readReceiptBottomSheetState,
+        onUserDataClicked = onUserDataClicked,
     )
+    ReinviteDialog(state = state)
 
     // Since the textfield is now based on an Android view, this is no longer done automatically.
     // We need to hide the keyboard automatically when navigating out of this screen.
@@ -310,6 +314,7 @@ private fun MessagesViewContent(
     onReactionClicked: (key: String, TimelineItem.Event) -> Unit,
     onReactionLongClicked: (key: String, TimelineItem.Event) -> Unit,
     onMoreReactionsClicked: (TimelineItem.Event) -> Unit,
+    onReadReceiptClick: (TimelineItem.Event) -> Unit,
     onMessageLongClicked: (TimelineItem.Event) -> Unit,
     onTimestampClicked: (TimelineItem.Event) -> Unit,
     onSendLocationClicked: () -> Unit,
@@ -381,6 +386,7 @@ private fun MessagesViewContent(
                     onReactionClicked = onReactionClicked,
                     onReactionLongClicked = onReactionLongClicked,
                     onMoreReactionsClicked = onMoreReactionsClicked,
+                    onReadReceiptClick = onReadReceiptClick,
                     onSwipeToReply = onSwipeToReply,
                 )
             },
@@ -406,7 +412,8 @@ private fun MessagesViewComposerBottomSheetContents(
     if (state.userHasPermissionToSendMessage) {
         Column(modifier = modifier.fillMaxWidth()) {
             MentionSuggestionsPickerView(
-                modifier = Modifier.heightIn(max = 230.dp)
+                modifier = Modifier
+                    .heightIn(max = 230.dp)
                     // Consume all scrolling, preventing the bottom sheet from being dragged when interacting with the list of suggestions
                     .nestedScroll(object : NestedScrollConnection {
                         override fun onPostScroll(consumed: Offset, available: Offset, source: NestedScrollSource): Offset {

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

@@ -35,11 +35,14 @@ import io.element.android.features.messages.impl.timeline.session.SessionState
 import io.element.android.features.messages.impl.voicemessages.timeline.RedactedVoiceMessageManager
 import io.element.android.libraries.architecture.Presenter
 import io.element.android.libraries.core.coroutine.CoroutineDispatchers
+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.encryption.BackupState
 import io.element.android.libraries.matrix.api.encryption.EncryptionService
 import io.element.android.libraries.matrix.api.room.MatrixRoom
 import io.element.android.libraries.matrix.api.room.MessageEventType
+import io.element.android.libraries.matrix.api.room.roomMembers
 import io.element.android.libraries.matrix.api.timeline.item.event.TimelineItemEventOrigin
 import io.element.android.libraries.matrix.api.verification.SessionVerificationService
 import io.element.android.libraries.matrix.api.verification.SessionVerifiedStatus
@@ -64,6 +67,7 @@ class TimelinePresenter @Inject constructor(
     private val analyticsService: AnalyticsService,
     private val verificationService: SessionVerificationService,
     private val encryptionService: EncryptionService,
+    private val featureFlagService: FeatureFlagService,
     private val redactedVoiceMessageManager: RedactedVoiceMessageManager,
 ) : Presenter<TimelineState> {
 
@@ -99,6 +103,9 @@ class TimelinePresenter @Inject constructor(
             }
         }
 
+        val readReceiptsEnabled by featureFlagService.isFeatureEnabledFlow(FeatureFlags.ReadReceipts).collectAsState(initial = false)
+        val membersState by room.membersStateFlow.collectAsState()
+
         fun handleEvents(event: TimelineEvents) {
             when (event) {
                 TimelineEvents.LoadMore -> localScope.paginateBackwards()
@@ -138,7 +145,17 @@ class TimelinePresenter @Inject constructor(
         LaunchedEffect(Unit) {
             timeline
                 .timelineItems
-                .onEach(timelineItemsFactory::replaceWith)
+                .onEach {
+                    timelineItemsFactory.replaceWith(
+                        timelineItems = it,
+                        roomMembers = if (readReceiptsEnabled) {
+                            membersState.roomMembers().orEmpty()
+                        } else {
+                            // Give an empty list to not affect performance
+                            emptyList()
+                        }
+                    )
+                }
                 .onEach { timelineItems ->
                     if (timelineItems.isEmpty()) {
                         paginateBackwards()
@@ -153,6 +170,7 @@ class TimelinePresenter @Inject constructor(
             userHasPermissionToSendMessage = userHasPermissionToSendMessage,
             paginationState = paginationState,
             timelineItems = timelineItems,
+            showReadReceipts = readReceiptsEnabled,
             hasNewItems = hasNewItems.value,
             sessionState = sessionState,
             eventSink = ::handleEvents

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

@@ -26,6 +26,7 @@ import kotlinx.collections.immutable.ImmutableList
 @Immutable
 data class TimelineState(
     val timelineItems: ImmutableList<TimelineItem>,
+    val showReadReceipts: Boolean,
     val highlightedEventId: EventId?,
     val userHasPermissionToSendMessage: Boolean,
     val paginationState: MatrixTimeline.PaginationState,

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

@@ -16,9 +16,11 @@
 
 package io.element.android.features.messages.impl.timeline
 
+import io.element.android.features.messages.impl.timeline.model.ReadReceiptData
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
 import io.element.android.features.messages.impl.timeline.model.TimelineItemGroupPosition
 import io.element.android.features.messages.impl.timeline.model.TimelineItemReactions
+import io.element.android.features.messages.impl.timeline.model.TimelineItemReadReceipts
 import io.element.android.features.messages.impl.timeline.model.anAggregatedReaction
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEventContent
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemStateEventContent
@@ -43,6 +45,7 @@ import kotlin.random.Random
 
 fun aTimelineState(timelineItems: ImmutableList<TimelineItem> = persistentListOf()) = TimelineState(
     timelineItems = timelineItems,
+    showReadReceipts = false,
     paginationState = MatrixTimeline.PaginationState(
         isBackPaginating = false,
         hasMoreToLoadBackwards = true,
@@ -118,11 +121,12 @@ internal fun aTimelineItemEvent(
     senderDisplayName: String = "Sender",
     content: TimelineItemEventContent = aTimelineItemTextContent(),
     groupPosition: TimelineItemGroupPosition = TimelineItemGroupPosition.None,
-    sendState: LocalEventSendState = LocalEventSendState.Sent(eventId),
+    sendState: LocalEventSendState? = null,
     inReplyTo: InReplyTo? = null,
     isThreaded: Boolean = false,
     debugInfo: TimelineItemDebugInfo = aTimelineItemDebugInfo(),
     timelineItemReactions: TimelineItemReactions = aTimelineItemReactions(),
+    readReceiptState: TimelineItemReadReceipts = aTimelineItemReadReceipts(),
 ): TimelineItem.Event {
     return TimelineItem.Event(
         id = UUID.randomUUID().toString(),
@@ -132,6 +136,7 @@ internal fun aTimelineItemEvent(
         senderAvatar = AvatarData("@senderId:domain", "sender", size = AvatarSize.TimelineSender),
         content = content,
         reactionsState = timelineItemReactions,
+        readReceiptState = readReceiptState,
         sentTime = "12:34",
         isMine = isMine,
         senderDisplayName = senderDisplayName,
@@ -173,6 +178,12 @@ internal fun aTimelineItemDebugInfo(
     model, originalJson, latestEditedJson
 )
 
+internal fun aTimelineItemReadReceipts(): TimelineItemReadReceipts {
+    return TimelineItemReadReceipts(
+        receipts = emptyList<ReadReceiptData>().toImmutableList(),
+    )
+}
+
 fun aGroupedEvents(id: Long = 0): TimelineItem.GroupedEvents {
     val event = aTimelineItemEvent(
         isMine = true,

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

@@ -92,6 +92,7 @@ fun TimelineView(
     onReactionClicked: (emoji: String, TimelineItem.Event) -> Unit,
     onReactionLongClicked: (emoji: String, TimelineItem.Event) -> Unit,
     onMoreReactionsClicked: (TimelineItem.Event) -> Unit,
+    onReadReceiptClick: (TimelineItem.Event) -> Unit,
     modifier: Modifier = Modifier,
 ) {
     fun onReachedLoadMore() {
@@ -126,6 +127,9 @@ fun TimelineView(
             ) { timelineItem ->
                 TimelineItemRow(
                     timelineItem = timelineItem,
+                    showReadReceipts = state.showReadReceipts,
+                    isLastOutgoingMessage = (timelineItem as? TimelineItem.Event)?.isMine == true
+                        && state.timelineItems.first().identifier() == timelineItem.identifier(),
                     highlightedItem = state.highlightedEventId?.value,
                     userHasPermissionToSendMessage = state.userHasPermissionToSendMessage,
                     onClick = onMessageClicked,
@@ -135,6 +139,7 @@ fun TimelineView(
                     onReactionClick = onReactionClicked,
                     onReactionLongClick = onReactionLongClicked,
                     onMoreReactionsClick = onMoreReactionsClicked,
+                    onReadReceiptClick = onReadReceiptClick,
                     onTimestampClicked = onTimestampClicked,
                     sessionState = state.sessionState,
                     eventSink = state.eventSink,
@@ -169,6 +174,8 @@ fun TimelineView(
 @Composable
 private fun TimelineItemRow(
     timelineItem: TimelineItem,
+    showReadReceipts: Boolean,
+    isLastOutgoingMessage: Boolean,
     highlightedItem: String?,
     userHasPermissionToSendMessage: Boolean,
     sessionState: SessionState,
@@ -179,6 +186,7 @@ private fun TimelineItemRow(
     onReactionClick: (key: String, TimelineItem.Event) -> Unit,
     onReactionLongClick: (key: String, TimelineItem.Event) -> Unit,
     onMoreReactionsClick: (TimelineItem.Event) -> Unit,
+    onReadReceiptClick: (TimelineItem.Event) -> Unit,
     onTimestampClicked: (TimelineItem.Event) -> Unit,
     onSwipeToReply: (TimelineItem.Event) -> Unit,
     eventSink: (TimelineEvents) -> Unit,
@@ -205,6 +213,8 @@ private fun TimelineItemRow(
             } else {
                 TimelineItemEventRow(
                     event = timelineItem,
+                    showReadReceipts = showReadReceipts,
+                    isLastOutgoingMessage = isLastOutgoingMessage,
                     isHighlighted = highlightedItem == timelineItem.identifier(),
                     canReply = userHasPermissionToSendMessage && timelineItem.content.canBeRepliedTo(),
                     onClick = { onClick(timelineItem) },
@@ -214,6 +224,7 @@ private fun TimelineItemRow(
                     onReactionClick = onReactionClick,
                     onReactionLongClick = onReactionLongClick,
                     onMoreReactionsClick = onMoreReactionsClick,
+                    onReadReceiptClick = onReadReceiptClick,
                     onTimestampClicked = onTimestampClicked,
                     onSwipeToReply = { onSwipeToReply(timelineItem) },
                     eventSink = eventSink,
@@ -244,6 +255,8 @@ private fun TimelineItemRow(
                         timelineItem.events.forEach { subGroupEvent ->
                             TimelineItemRow(
                                 timelineItem = subGroupEvent,
+                                showReadReceipts = showReadReceipts,
+                                isLastOutgoingMessage = isLastOutgoingMessage,
                                 highlightedItem = highlightedItem,
                                 sessionState = sessionState,
                                 userHasPermissionToSendMessage = false,
@@ -255,6 +268,7 @@ private fun TimelineItemRow(
                                 onReactionClick = onReactionClick,
                                 onReactionLongClick = onReactionLongClick,
                                 onMoreReactionsClick = onMoreReactionsClick,
+                                onReadReceiptClick = onReadReceiptClick,
                                 eventSink = eventSink,
                                 onSwipeToReply = {},
                             )
@@ -362,6 +376,7 @@ internal fun TimelineViewPreview(
             onReactionLongClicked = { _, _ -> },
             onMoreReactionsClicked = {},
             onSwipeToReply = {},
+            onReadReceiptClick = {},
         )
     }
 }