Integrate mentions in the composer

changelog.d/1453.feature

@@ -0,0 +1 @@
+Add support for typing mentions in the message composer.

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

@@ -41,6 +41,7 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -349,12 +350,12 @@ private fun MessagesViewContent(
 
         // This key is used to force the sheet to be remeasured when the content changes.
         // Any state change that should trigger a height size should be added to the list of remembered values here.
-        val sheetResizeContentKey = remember(
-            state.composerState.mode.relatedEventId,
+        val sheetResizeContentKey = remember { mutableIntStateOf(0) }
+        LaunchedEffect(
             state.composerState.richTextEditorState.lineCount,
-            state.composerState.memberSuggestions.size
+            state.composerState.showTextFormatting,
         ) {
-            Random.nextInt()
+            sheetResizeContentKey.intValue = Random.nextInt()
         }
 
         ExpandableBottomSheetScaffold(
@@ -390,7 +391,7 @@ private fun MessagesViewContent(
                     state = state,
                 )
             },
-            sheetContentKey = sheetResizeContentKey,
+            sheetContentKey = sheetResizeContentKey.intValue,
             sheetTonalElevation = 0.dp,
             sheetShadowElevation = if (state.composerState.memberSuggestions.isNotEmpty()) 16.dp else 0.dp,
         )
@@ -406,7 +407,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 {
@@ -418,7 +420,7 @@ private fun MessagesViewComposerBottomSheetContents(
                 roomAvatarData = state.roomAvatar.dataOrNull(),
                 memberSuggestions = state.composerState.memberSuggestions,
                 onSuggestionSelected = {
-                    // TODO pass the selected suggestion to the RTE so it can be inserted as a pill
+                    state.composerState.eventSink(MessageComposerEvents.InsertMention(it))
                 }
             )
             MessageComposerView(

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

@@ -31,7 +31,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import io.element.android.features.messages.impl.R
-import io.element.android.features.messages.impl.messagecomposer.RoomMemberSuggestion
+import io.element.android.features.messages.impl.messagecomposer.MentionSuggestion
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
@@ -52,8 +52,8 @@ fun MentionSuggestionsPickerView(
     roomId: RoomId,
     roomName: String?,
     roomAvatarData: AvatarData?,
-    memberSuggestions: ImmutableList<RoomMemberSuggestion>,
-    onSuggestionSelected: (RoomMemberSuggestion) -> Unit,
+    memberSuggestions: ImmutableList<MentionSuggestion>,
+    onSuggestionSelected: (MentionSuggestion) -> Unit,
     modifier: Modifier = Modifier,
 ) {
     LazyColumn(
@@ -63,8 +63,8 @@ fun MentionSuggestionsPickerView(
             memberSuggestions,
             key = { suggestion ->
                 when (suggestion) {
-                    is RoomMemberSuggestion.Room -> "@room"
-                    is RoomMemberSuggestion.Member -> suggestion.roomMember.userId.value
+                    is MentionSuggestion.Room -> "@room"
+                    is MentionSuggestion.Member -> suggestion.roomMember.userId.value
                 }
             }
         ) {
@@ -85,32 +85,32 @@ fun MentionSuggestionsPickerView(
 
 @Composable
 private fun RoomMemberSuggestionItemView(
-    memberSuggestion: RoomMemberSuggestion,
+    memberSuggestion: MentionSuggestion,
     roomId: String,
     roomName: String?,
     roomAvatar: AvatarData?,
-    onSuggestionSelected: (RoomMemberSuggestion) -> Unit,
+    onSuggestionSelected: (MentionSuggestion) -> Unit,
     modifier: Modifier = Modifier,
 ) {
     Row(modifier = modifier.clickable { onSuggestionSelected(memberSuggestion) }, horizontalArrangement = Arrangement.spacedBy(16.dp)) {
         val avatarSize = AvatarSize.TimelineRoom
         val avatarData = when (memberSuggestion) {
-            is RoomMemberSuggestion.Room -> roomAvatar?.copy(size = avatarSize) ?: AvatarData(roomId, roomName, null, avatarSize)
-            is RoomMemberSuggestion.Member -> AvatarData(
+            is MentionSuggestion.Room -> roomAvatar?.copy(size = avatarSize) ?: AvatarData(roomId, roomName, null, avatarSize)
+            is MentionSuggestion.Member -> AvatarData(
                 memberSuggestion.roomMember.userId.value,
                 memberSuggestion.roomMember.displayName,
                 memberSuggestion.roomMember.avatarUrl,
                 avatarSize,
             )
         }
         val title = when (memberSuggestion) {
-            is RoomMemberSuggestion.Room -> stringResource(R.string.screen_room_mentions_at_room_title)
-            is RoomMemberSuggestion.Member -> memberSuggestion.roomMember.displayName
+            is MentionSuggestion.Room -> stringResource(R.string.screen_room_mentions_at_room_title)
+            is MentionSuggestion.Member -> memberSuggestion.roomMember.displayName
         }
 
         val subtitle = when (memberSuggestion) {
-            is RoomMemberSuggestion.Room -> "@room"
-            is RoomMemberSuggestion.Member -> memberSuggestion.roomMember.userId.value
+            is MentionSuggestion.Room -> "@room"
+            is MentionSuggestion.Member -> memberSuggestion.roomMember.userId.value
         }
 
         Avatar(avatarData = avatarData, modifier = Modifier.padding(start = 16.dp, top = 12.dp, bottom = 12.dp))
@@ -159,9 +159,9 @@ internal fun MentionSuggestionsPickerView_Preview() {
             roomName = "Room",
             roomAvatarData = null,
             memberSuggestions = persistentListOf(
-                RoomMemberSuggestion.Room,
-                RoomMemberSuggestion.Member(roomMember),
-                RoomMemberSuggestion.Member(roomMember.copy(userId = UserId("@bob:server.org"), displayName = "Bob")),
+                MentionSuggestion.Room,
+                MentionSuggestion.Member(roomMember),
+                MentionSuggestion.Member(roomMember.copy(userId = UserId("@bob:server.org"), displayName = "Bob")),
             ),
             onSuggestionSelected = {}
         )

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

@@ -16,7 +16,8 @@
 
 package io.element.android.features.messages.impl.mentions
 
-import io.element.android.features.messages.impl.messagecomposer.RoomMemberSuggestion
+import io.element.android.features.messages.impl.messagecomposer.MentionSuggestion
+import io.element.android.libraries.core.data.filterUpTo
 import io.element.android.libraries.matrix.api.core.UserId
 import io.element.android.libraries.matrix.api.room.MatrixRoomMembersState
 import io.element.android.libraries.matrix.api.room.RoomMember
@@ -46,10 +47,8 @@ object MentionSuggestionsProcessor {
         roomMembersState: MatrixRoomMembersState,
         currentUserId: UserId,
         canSendRoomMention: suspend () -> Boolean,
-    ): List<RoomMemberSuggestion> {
+    ): List<MentionSuggestion> {
         val members = roomMembersState.roomMembers()
-            // Take the first MAX_BATCH_ITEMS only
-            ?.take(MAX_BATCH_ITEMS)
         return when {
             members.isNullOrEmpty() || suggestion == null -> {
                 // Clear suggestions
@@ -61,7 +60,7 @@ object MentionSuggestionsProcessor {
                         // Replace suggestions
                         val matchingMembers = getMemberSuggestions(
                             query = suggestion.text,
-                            roomMembers = roomMembersState.roomMembers(),
+                            roomMembers = members,
                             currentUserId = currentUserId,
                             canSendRoomMention = canSendRoomMention()
                         )
@@ -81,7 +80,7 @@ object MentionSuggestionsProcessor {
         roomMembers: List<RoomMember>?,
         currentUserId: UserId,
         canSendRoomMention: Boolean,
-    ): List<RoomMemberSuggestion> {
+    ): List<MentionSuggestion> {
         return if (roomMembers.isNullOrEmpty()) {
             emptyList()
         } else {
@@ -95,14 +94,14 @@ object MentionSuggestionsProcessor {
             }
 
             val matchingMembers = roomMembers
-                // Search only in joined members, exclude the current user
-                .filter { member ->
+                // Search only in joined members, up to MAX_BATCH_ITEMS, exclude the current user
+                .filterUpTo(MAX_BATCH_ITEMS) { member ->
                     isJoinedMemberAndNotSelf(member) && memberMatchesQuery(member, query)
                 }
-                .map(RoomMemberSuggestion::Member)
+                .map(MentionSuggestion::Member)
 
             if ("room".contains(query) && canSendRoomMention) {
-                listOf(RoomMemberSuggestion.Room) + matchingMembers
+                listOf(MentionSuggestion.Room) + matchingMembers
             } else {
                 matchingMembers
             }

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

@@ -41,4 +41,5 @@ sealed interface MessageComposerEvents {
     data object CancelSendAttachment : MessageComposerEvents
     data class Error(val error: Throwable) : MessageComposerEvents
     data class SuggestionReceived(val suggestion: Suggestion?) : MessageComposerEvents
+    data class InsertMention(val mention: MentionSuggestion) : MessageComposerEvents
 }

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

@@ -45,6 +45,7 @@ import io.element.android.libraries.di.SingleIn
 import io.element.android.libraries.featureflag.api.FeatureFlagService
 import io.element.android.libraries.featureflag.api.FeatureFlags
 import io.element.android.libraries.matrix.api.core.ProgressCallback
+import io.element.android.libraries.matrix.api.permalink.PermalinkBuilder
 import io.element.android.libraries.matrix.api.room.MatrixRoom
 import io.element.android.libraries.matrix.api.room.RoomMember
 import io.element.android.libraries.matrix.api.user.CurrentSessionIdHolder
@@ -173,7 +174,7 @@ class MessageComposerPresenter @Inject constructor(
             }
         }
 
-        val memberSuggestions = remember { mutableStateListOf<RoomMemberSuggestion>() }
+        val memberSuggestions = remember { mutableStateListOf<MentionSuggestion>() }
         LaunchedEffect(isMentionsEnabled) {
             if (!isMentionsEnabled) return@LaunchedEffect
             val currentUserId = currentSessionIdHolder.current
@@ -284,6 +285,20 @@ class MessageComposerPresenter @Inject constructor(
                 is MessageComposerEvents.SuggestionReceived -> {
                     suggestionSearchTrigger.value = event.suggestion
                 }
+                is MessageComposerEvents.InsertMention -> {
+                    localCoroutineScope.launch {
+                        when (val mention = event.mention) {
+                            is MentionSuggestion.Room -> {
+                                richTextEditorState.insertAtRoomMentionAtSuggestion()
+                            }
+                            is MentionSuggestion.Member -> {
+                                val text = mention.roomMember.displayName?.prependIndent("@") ?: mention.roomMember.userId.value
+                                val link = PermalinkBuilder.permalinkForUser(mention.roomMember.userId).getOrNull() ?: return@launch
+                                richTextEditorState.insertMentionAtSuggestion(text = text, link = link)
+                            }
+                        }
+                    }
+                }
             }
         }
 
@@ -297,6 +312,7 @@ class MessageComposerPresenter @Inject constructor(
             canCreatePoll = canCreatePoll.value,
             attachmentsState = attachmentsState.value,
             memberSuggestions = memberSuggestions.toPersistentList(),
+            currentUserId = currentSessionIdHolder.current,
             eventSink = { handleEvents(it) }
         )
     }
@@ -411,7 +427,7 @@ class MessageComposerPresenter @Inject constructor(
 }
 
 @Immutable
-sealed interface RoomMemberSuggestion {
-    data object Room : RoomMemberSuggestion
-    data class Member(val roomMember: RoomMember) : RoomMemberSuggestion
+sealed interface MentionSuggestion {
+    data object Room : MentionSuggestion
+    data class Member(val roomMember: RoomMember) : MentionSuggestion
 }

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

@@ -19,6 +19,7 @@ package io.element.android.features.messages.impl.messagecomposer
 import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.Stable
 import io.element.android.features.messages.impl.attachments.Attachment
+import io.element.android.libraries.matrix.api.core.UserId
 import io.element.android.libraries.textcomposer.model.MessageComposerMode
 import io.element.android.wysiwyg.compose.RichTextEditorState
 import kotlinx.collections.immutable.ImmutableList
@@ -33,7 +34,8 @@ data class MessageComposerState(
     val canShareLocation: Boolean,
     val canCreatePoll: Boolean,
     val attachmentsState: AttachmentsState,
-    val memberSuggestions: ImmutableList<RoomMemberSuggestion>,
+    val memberSuggestions: ImmutableList<MentionSuggestion>,
+    val currentUserId: UserId,
     val eventSink: (MessageComposerEvents) -> Unit,
 ) {
     val hasFocus: Boolean = richTextEditorState.hasFocus

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

@@ -17,6 +17,7 @@
 package io.element.android.features.messages.impl.messagecomposer
 
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import io.element.android.libraries.matrix.api.core.UserId
 import io.element.android.libraries.textcomposer.model.MessageComposerMode
 import io.element.android.wysiwyg.compose.RichTextEditorState
 import kotlinx.collections.immutable.ImmutableList
@@ -38,7 +39,7 @@ fun aMessageComposerState(
     canShareLocation: Boolean = true,
     canCreatePoll: Boolean = true,
     attachmentsState: AttachmentsState = AttachmentsState.None,
-    memberSuggestions: ImmutableList<RoomMemberSuggestion> = persistentListOf(),
+    memberSuggestions: ImmutableList<MentionSuggestion> = persistentListOf(),
 ) = MessageComposerState(
     richTextEditorState = composerState,
     isFullScreen = isFullScreen,
@@ -49,5 +50,6 @@ fun aMessageComposerState(
     canCreatePoll = canCreatePoll,
     attachmentsState = attachmentsState,
     memberSuggestions = memberSuggestions,
+    currentUserId = UserId("@alice:localhost"),
     eventSink = {},
 )

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

@@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import io.element.android.features.messages.impl.voicemessages.composer.VoiceMessageComposerEvents
@@ -32,9 +33,9 @@ import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.textcomposer.TextComposer
 import io.element.android.libraries.textcomposer.model.Message
-import io.element.android.libraries.textcomposer.model.VoiceMessageRecorderEvent
 import io.element.android.libraries.textcomposer.model.Suggestion
 import io.element.android.libraries.textcomposer.model.VoiceMessagePlayerEvent
+import io.element.android.libraries.textcomposer.model.VoiceMessageRecorderEvent
 import kotlinx.coroutines.launch
 
 @Composable
@@ -46,6 +47,7 @@ internal fun MessageComposerView(
     enableVoiceMessages: Boolean,
     modifier: Modifier = Modifier,
 ) {
+    val view = LocalView.current
     fun sendMessage(message: Message) {
         state.eventSink(MessageComposerEvents.SendMessage(message))
     }
@@ -59,6 +61,7 @@ internal fun MessageComposerView(
     }
 
     fun onDismissTextFormatting() {
+        view.clearFocus()
         state.eventSink(MessageComposerEvents.ToggleTextFormatting(enabled = false))
     }
 
@@ -113,6 +116,7 @@ internal fun MessageComposerView(
         onDeleteVoiceMessage = onDeleteVoiceMessage,
         onSuggestionReceived = ::onSuggestionReceived,
         onError = ::onError,
+        currentUserId = state.currentUserId,
     )
 }