Merge pull request #3099 from element-hq/feature/fga/draft_support

Feature : Draft support

changelog.d/2869.feature

@@ -0,0 +1 @@
+Store and restore drafts for each room.

features/location/impl/src/test/kotlin/io/element/android/features/location/impl/send/SendLocationPresenterTest.kt

@@ -379,8 +379,8 @@ class SendLocationPresenterTest {
         fakeMessageComposerContext.apply {
             composerMode = MessageComposerMode.Edit(
                 eventId = null,
-                defaultContent = "",
+                transactionId = null,
-                transactionId = null
+                content = ""
             )
         }
 
@@ -427,8 +427,8 @@ class SendLocationPresenterTest {
         fakeMessageComposerContext.apply {
             composerMode = MessageComposerMode.Edit(
                 eventId = null,
-                defaultContent = "",
+                transactionId = null,
-                transactionId = null
+                content = ""
             )
         }
 

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

@@ -26,6 +26,7 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
+import androidx.lifecycle.Lifecycle
 import com.bumble.appyx.core.lifecycle.subscribe
 import com.bumble.appyx.core.modality.BuildContext
 import com.bumble.appyx.core.node.Node
@@ -35,6 +36,7 @@ import dagger.assisted.Assisted
 import dagger.assisted.AssistedInject
 import io.element.android.anvilannotations.ContributesNode
 import io.element.android.features.messages.impl.attachments.Attachment
+import io.element.android.features.messages.impl.messagecomposer.MessageComposerEvents
 import io.element.android.features.messages.impl.timeline.TimelineController
 import io.element.android.features.messages.impl.timeline.TimelineEvents
 import io.element.android.features.messages.impl.timeline.di.LocalTimelineItemPresenterFactories
@@ -45,6 +47,7 @@ import io.element.android.libraries.androidutils.system.toast
 import io.element.android.libraries.architecture.NodeInputs
 import io.element.android.libraries.architecture.inputs
 import io.element.android.libraries.core.bool.orFalse
+import io.element.android.libraries.designsystem.utils.OnLifecycleEvent
 import io.element.android.libraries.di.ApplicationContext
 import io.element.android.libraries.di.RoomScope
 import io.element.android.libraries.matrix.api.analytics.toAnalyticsViewRoom
@@ -195,6 +198,12 @@ class MessagesNode @AssistedInject constructor(
             LocalTimelineItemPresenterFactories provides timelineItemPresenterFactories,
         ) {
             val state = presenter.present()
+            OnLifecycleEvent { _, event ->
+                when (event) {
+                    Lifecycle.Event.ON_PAUSE -> state.composerState.eventSink(MessageComposerEvents.SaveDraft)
+                    else -> Unit
+                }
+            }
             MessagesView(
                 state = state,
                 onBackClick = this::navigateUp,

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

@@ -47,23 +47,10 @@ import io.element.android.features.messages.impl.timeline.components.customreact
 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.model.TimelineItem
-import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAudioContent
-import io.element.android.features.messages.impl.timeline.model.event.TimelineItemCallNotifyContent
-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.TimelineItemImageContent
-import io.element.android.features.messages.impl.timeline.model.event.TimelineItemLegacyCallInviteContent
-import io.element.android.features.messages.impl.timeline.model.event.TimelineItemLocationContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemPollContent
-import io.element.android.features.messages.impl.timeline.model.event.TimelineItemRedactedContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemStateContent
-import io.element.android.features.messages.impl.timeline.model.event.TimelineItemStickerContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextBasedContent
-import io.element.android.features.messages.impl.timeline.model.event.TimelineItemUnknownContent
-import io.element.android.features.messages.impl.timeline.model.event.TimelineItemVideoContent
-import io.element.android.features.messages.impl.timeline.model.event.TimelineItemVoiceContent
 import io.element.android.features.messages.impl.typing.TypingNotificationPresenter
-import io.element.android.features.messages.impl.utils.messagesummary.MessageSummaryFormatter
 import io.element.android.features.messages.impl.voicemessages.composer.VoiceMessageComposerPresenter
 import io.element.android.features.networkmonitor.api.NetworkMonitor
 import io.element.android.features.networkmonitor.api.NetworkStatus
@@ -80,12 +67,12 @@ import io.element.android.libraries.designsystem.utils.snackbar.collectSnackbarM
 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.permalink.PermalinkParser
 import io.element.android.libraries.matrix.api.room.MatrixRoom
 import io.element.android.libraries.matrix.api.room.MatrixRoomInfo
 import io.element.android.libraries.matrix.api.room.MatrixRoomMembersState
 import io.element.android.libraries.matrix.api.room.MessageEventType
-import io.element.android.libraries.matrix.ui.components.AttachmentThumbnailInfo
+import io.element.android.libraries.matrix.ui.messages.reply.map
-import io.element.android.libraries.matrix.ui.components.AttachmentThumbnailType
 import io.element.android.libraries.matrix.ui.model.getAvatarData
 import io.element.android.libraries.matrix.ui.room.canCall
 import io.element.android.libraries.matrix.ui.room.canRedactOtherAsState
@@ -100,6 +87,7 @@ import kotlinx.coroutines.withContext
 import timber.log.Timber
 
 class MessagesPresenter @AssistedInject constructor(
+    @Assisted private val navigator: MessagesNavigator,
     private val room: MatrixRoom,
     private val composerPresenter: MessageComposerPresenter,
     private val voiceMessageComposerPresenter: VoiceMessageComposerPresenter,
@@ -111,14 +99,13 @@ class MessagesPresenter @AssistedInject constructor(
     private val readReceiptBottomSheetPresenter: ReadReceiptBottomSheetPresenter,
     private val networkMonitor: NetworkMonitor,
     private val snackbarDispatcher: SnackbarDispatcher,
-    private val messageSummaryFormatter: MessageSummaryFormatter,
     private val dispatchers: CoroutineDispatchers,
     private val clipboardHelper: ClipboardHelper,
     private val featureFlagsService: FeatureFlagService,
     private val htmlConverterProvider: HtmlConverterProvider,
-    @Assisted private val navigator: MessagesNavigator,
     private val buildMeta: BuildMeta,
     private val timelineController: TimelineController,
+    private val permalinkParser: PermalinkParser,
 ) : Presenter<MessagesState> {
     private val timelinePresenter = timelinePresenterFactory.create(navigator = navigator)
 
@@ -336,6 +323,7 @@ class MessagesPresenter @AssistedInject constructor(
             else -> {
                 val composerMode = MessageComposerMode.Edit(
                     targetEvent.eventId,
+                    targetEvent.transactionId,
                     (targetEvent.content as? TimelineItemTextBasedContent)?.let {
                         if (enableTextFormatting) {
                             it.htmlBody ?: it.body
@@ -343,7 +331,6 @@ class MessagesPresenter @AssistedInject constructor(
                             it.body
                         }
                     }.orEmpty(),
-                    targetEvent.transactionId,
                 )
                 composerState.eventSink(
                     MessageComposerEvents.SetMode(composerMode)
@@ -352,66 +339,15 @@ class MessagesPresenter @AssistedInject constructor(
         }
     }
 
-    private fun handleActionReply(targetEvent: TimelineItem.Event, composerState: MessageComposerState) {
+    private suspend fun handleActionReply(targetEvent: TimelineItem.Event, composerState: MessageComposerState) {
         if (targetEvent.eventId == null) return
-        val textContent = messageSummaryFormatter.format(targetEvent)
+        timelineController.invokeOnCurrentTimeline {
-        val attachmentThumbnailInfo = when (targetEvent.content) {
+            val replyToDetails = loadReplyDetails(targetEvent.eventId).map(permalinkParser)
-            is TimelineItemImageContent -> AttachmentThumbnailInfo(
+            val composerMode = MessageComposerMode.Reply(replyToDetails = replyToDetails)
-                thumbnailSource = targetEvent.content.thumbnailSource ?: targetEvent.content.mediaSource,
+            composerState.eventSink(
-                textContent = targetEvent.content.body,
+                MessageComposerEvents.SetMode(composerMode)
-                type = AttachmentThumbnailType.Image,
-                blurHash = targetEvent.content.blurhash,
             )
-            is TimelineItemStickerContent -> AttachmentThumbnailInfo(
-                thumbnailSource = targetEvent.content.thumbnailSource ?: targetEvent.content.mediaSource,
-                textContent = targetEvent.content.body,
-                type = AttachmentThumbnailType.Image,
-                blurHash = targetEvent.content.blurhash,
-            )
-            is TimelineItemVideoContent -> AttachmentThumbnailInfo(
-                thumbnailSource = targetEvent.content.thumbnailSource,
-                textContent = targetEvent.content.body,
-                type = AttachmentThumbnailType.Video,
-                blurHash = targetEvent.content.blurHash,
-            )
-            is TimelineItemFileContent -> AttachmentThumbnailInfo(
-                thumbnailSource = targetEvent.content.thumbnailSource,
-                textContent = targetEvent.content.body,
-                type = AttachmentThumbnailType.File,
-            )
-            is TimelineItemAudioContent -> AttachmentThumbnailInfo(
-                textContent = targetEvent.content.body,
-                type = AttachmentThumbnailType.Audio,
-            )
-            is TimelineItemVoiceContent -> AttachmentThumbnailInfo(
-                textContent = textContent,
-                type = AttachmentThumbnailType.Voice,
-            )
-            is TimelineItemLocationContent -> AttachmentThumbnailInfo(
-                type = AttachmentThumbnailType.Location,
-            )
-            is TimelineItemPollContent -> AttachmentThumbnailInfo(
-                textContent = targetEvent.content.question,
-                type = AttachmentThumbnailType.Poll,
-            )
-            is TimelineItemTextBasedContent,
-            is TimelineItemRedactedContent,
-            is TimelineItemStateContent,
-            is TimelineItemEncryptedContent,
-            is TimelineItemLegacyCallInviteContent,
-            is TimelineItemCallNotifyContent,
-            is TimelineItemUnknownContent -> null
         }
-        val composerMode = MessageComposerMode.Reply(
-            isThreaded = targetEvent.isThreaded,
-            senderName = targetEvent.safeSenderName,
-            eventId = targetEvent.eventId,
-            attachmentThumbnailInfo = attachmentThumbnailInfo,
-            defaultContent = textContent,
-        )
-        composerState.eventSink(
-            MessageComposerEvents.SetMode(composerMode)
-        )
     }
 
     private fun handleShowDebugInfoAction(event: TimelineItem.Event) {

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

@@ -55,8 +55,6 @@ import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.features.messages.impl.actionlist.model.TimelineItemAction
-import io.element.android.features.messages.impl.sender.SenderName
-import io.element.android.features.messages.impl.sender.SenderNameMode
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAudioContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemCallNotifyContent
@@ -88,6 +86,8 @@ import io.element.android.libraries.designsystem.theme.components.ListItemStyle
 import io.element.android.libraries.designsystem.theme.components.ModalBottomSheet
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.hide
+import io.element.android.libraries.matrix.ui.messages.sender.SenderName
+import io.element.android.libraries.matrix.ui.messages.sender.SenderNameMode
 import io.element.android.libraries.ui.strings.CommonStrings
 import kotlinx.collections.immutable.ImmutableList
 

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

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2024 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.features.messages.impl.draft
+
+import io.element.android.libraries.matrix.api.core.RoomId
+import io.element.android.libraries.matrix.api.room.draft.ComposerDraft
+
+interface ComposerDraftService {
+    suspend fun loadDraft(roomId: RoomId): ComposerDraft?
+    suspend fun saveDraft(roomId: RoomId, draft: ComposerDraft)
+}

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

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2024 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.features.messages.impl.draft
+
+import com.squareup.anvil.annotations.ContributesBinding
+import io.element.android.libraries.di.RoomScope
+import io.element.android.libraries.matrix.api.MatrixClient
+import io.element.android.libraries.matrix.api.core.RoomId
+import io.element.android.libraries.matrix.api.room.draft.ComposerDraft
+import timber.log.Timber
+import javax.inject.Inject
+
+@ContributesBinding(RoomScope::class)
+class DefaultComposerDraftService @Inject constructor(
+    private val client: MatrixClient,
+) : ComposerDraftService {
+    override suspend fun loadDraft(roomId: RoomId): ComposerDraft? {
+        return client.getRoom(roomId)?.use { room ->
+            room.loadComposerDraft()
+                .onFailure {
+                    Timber.e(it, "Failed to load composer draft for room $roomId")
+                }
+                .onSuccess { draft ->
+                    room.clearComposerDraft()
+                    Timber.d("Loaded composer draft for room $roomId : $draft")
+                }
+                .getOrNull()
+        }
+    }
+
+    override suspend fun saveDraft(roomId: RoomId, draft: ComposerDraft) {
+        client.getRoom(roomId)?.use { room ->
+            room.saveComposerDraft(draft)
+                .onFailure {
+                    Timber.e(it, "Failed to save composer draft for room $roomId")
+                }
+                .onSuccess {
+                    Timber.d("Saved composer draft for room $roomId")
+                }
+        }
+    }
+}

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

@@ -45,4 +45,5 @@ sealed interface MessageComposerEvents {
     data class TypingNotice(val isTyping: Boolean) : MessageComposerEvents
     data class SuggestionReceived(val suggestion: Suggestion?) : MessageComposerEvents
     data class InsertMention(val mention: ResolvedMentionSuggestion) : MessageComposerEvents
+    data object SaveDraft : MessageComposerEvents
 }

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

@@ -39,6 +39,7 @@ import im.vector.app.features.analytics.plan.Composer
 import im.vector.app.features.analytics.plan.Interaction
 import io.element.android.features.messages.impl.attachments.Attachment
 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.mentions.MentionSuggestionsProcessor
 import io.element.android.features.messages.impl.timeline.TimelineController
 import io.element.android.libraries.architecture.Presenter
@@ -54,6 +55,10 @@ import io.element.android.libraries.matrix.api.permalink.PermalinkBuilder
 import io.element.android.libraries.matrix.api.permalink.PermalinkParser
 import io.element.android.libraries.matrix.api.room.MatrixRoom
 import io.element.android.libraries.matrix.api.room.Mention
+import io.element.android.libraries.matrix.api.room.draft.ComposerDraft
+import io.element.android.libraries.matrix.api.room.draft.ComposerDraftType
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
+import io.element.android.libraries.matrix.ui.messages.reply.map
 import io.element.android.libraries.mediapickers.api.PickerProvider
 import io.element.android.libraries.mediaupload.api.MediaSender
 import io.element.android.libraries.mediaviewer.api.local.LocalMediaFactory
@@ -62,6 +67,7 @@ import io.element.android.libraries.permissions.api.PermissionsPresenter
 import io.element.android.libraries.preferences.api.store.SessionPreferencesStore
 import io.element.android.libraries.textcomposer.mentions.LocalMentionSpanProvider
 import io.element.android.libraries.textcomposer.mentions.ResolvedMentionSuggestion
+import io.element.android.libraries.textcomposer.model.MarkdownTextEditorState
 import io.element.android.libraries.textcomposer.model.Message
 import io.element.android.libraries.textcomposer.model.MessageComposerMode
 import io.element.android.libraries.textcomposer.model.Suggestion
@@ -69,6 +75,7 @@ import io.element.android.libraries.textcomposer.model.TextEditorState
 import io.element.android.libraries.textcomposer.model.rememberMarkdownTextEditorState
 import io.element.android.services.analytics.api.AnalyticsService
 import io.element.android.services.analyticsproviders.api.trackers.captureInteraction
+import io.element.android.wysiwyg.compose.RichTextEditorState
 import kotlinx.collections.immutable.persistentListOf
 import kotlinx.collections.immutable.toPersistentList
 import kotlinx.coroutines.CancellationException
@@ -107,10 +114,10 @@ class MessageComposerPresenter @Inject constructor(
     private val permalinkBuilder: PermalinkBuilder,
     permissionsPresenterFactory: PermissionsPresenter.Factory,
     private val timelineController: TimelineController,
+    private val draftService: ComposerDraftService,
 ) : Presenter<MessageComposerState> {
     private val cameraPermissionPresenter = permissionsPresenterFactory.create(Manifest.permission.CAMERA)
     private var pendingEvent: MessageComposerEvents? = null
-
     private val suggestionSearchTrigger = MutableStateFlow<Suggestion?>(null)
 
     // Used to disable some UI related elements in tests
@@ -126,8 +133,6 @@ class MessageComposerPresenter @Inject constructor(
     override fun present(): MessageComposerState {
         val localCoroutineScope = rememberCoroutineScope()
 
-        // Initially disabled so we don't set focus and text twice
-        var applyFormattingModeChanges by remember { mutableStateOf(false) }
         val richTextEditorState = richTextEditorStateFactory.remember()
         if (isTesting) {
             richTextEditorState.isReadyToProcessActions = true
@@ -175,18 +180,6 @@ class MessageComposerPresenter @Inject constructor(
 
         val sendTypingNotifications by sessionPreferencesStore.isSendTypingNotificationsEnabled().collectAsState(initial = true)
 
-        LaunchedEffect(messageComposerContext.composerMode) {
-            when (val modeValue = messageComposerContext.composerMode) {
-                is MessageComposerMode.Edit ->
-                    if (showTextFormatting) {
-                        richTextEditorState.setHtml(modeValue.defaultContent)
-                    } else {
-                        markdownTextEditorState.text.update(modeValue.defaultContent, true)
-                    }
-                else -> Unit
-            }
-        }
-
         LaunchedEffect(attachmentsState.value) {
             when (val attachmentStateValue = attachmentsState.value) {
                 is AttachmentsState.Sending.Processing -> {
@@ -259,22 +252,8 @@ class MessageComposerPresenter @Inject constructor(
             }
         )
 
-        LaunchedEffect(showTextFormatting) {
+        LaunchedEffect(Unit) {
-            if (!applyFormattingModeChanges) {
+            loadDraft(markdownTextEditorState, richTextEditorState)
-                applyFormattingModeChanges = true
-                return@LaunchedEffect
-            }
-            if (showTextFormatting) {
-                val markdown = markdownTextEditorState.getMessageMarkdown(permalinkBuilder)
-                richTextEditorState.setMarkdown(markdown)
-                richTextEditorState.requestFocus()
-            } else {
-                val markdown = richTextEditorState.messageMarkdown
-                markdownTextEditorState.text.update(markdown, true)
-                // Give some time for the focus of the previous editor to be cleared
-                delay(100)
-                markdownTextEditorState.requestFocusAction()
-            }
         }
 
         val mentionSpanProvider = LocalMentionSpanProvider.current
@@ -320,19 +299,7 @@ class MessageComposerPresenter @Inject constructor(
                     attachmentState = attachmentsState,
                 )
                 is MessageComposerEvents.SetMode -> {
-                    messageComposerContext.composerMode = event.composerMode
+                    localCoroutineScope.setMode(event.composerMode, markdownTextEditorState, richTextEditorState)
-                    when (event.composerMode) {
-                        is MessageComposerMode.Reply -> event.composerMode.eventId
-                        is MessageComposerMode.Edit -> event.composerMode.eventId
-                        is MessageComposerMode.Normal -> null
-                        is MessageComposerMode.Quote -> null
-                    }.let { relatedEventId ->
-                        appCoroutineScope.launch {
-                            timelineController.invokeOnCurrentTimeline {
-                                enterSpecialMode(relatedEventId)
-                            }
-                        }
-                    }
                 }
                 MessageComposerEvents.AddAttachment -> localCoroutineScope.launch {
                     showAttachmentSourcePicker = true
@@ -380,10 +347,7 @@ class MessageComposerPresenter @Inject constructor(
                 }
                 is MessageComposerEvents.ToggleTextFormatting -> {
                     showAttachmentSourcePicker = false
-                    showTextFormatting = event.enabled
+                    localCoroutineScope.toggleTextFormatting(event.enabled, markdownTextEditorState, richTextEditorState)
-                    if (showTextFormatting) {
-                        analyticsService.captureInteraction(Interaction.Name.MobileRoomComposerFormattingEnabled)
-                    }
                 }
                 is MessageComposerEvents.Error -> {
                     analyticsService.trackError(event.error)
@@ -421,6 +385,9 @@ class MessageComposerPresenter @Inject constructor(
                         }
                     }
                 }
+                MessageComposerEvents.SaveDraft -> {
+                    appCoroutineScope.saveDraft(textEditorState)
+                }
             }
         }
 
@@ -473,7 +440,6 @@ class MessageComposerPresenter @Inject constructor(
                 }
             }
 
-            is MessageComposerMode.Quote -> TODO()
             is MessageComposerMode.Reply -> {
                 timelineController.invokeOnCurrentTimeline {
                     replyMessage(capturedMode.eventId, message.markdown, message.html, mentions)
@@ -570,4 +536,111 @@ class MessageComposerPresenter @Inject constructor(
                 snackbarDispatcher.post(snackbarMessage)
             }
         }
+
+    private fun CoroutineScope.loadDraft(
+        markdownTextEditorState: MarkdownTextEditorState,
+        richTextEditorState: RichTextEditorState,
+    ) = launch {
+        val draft = draftService.loadDraft(room.roomId) ?: return@launch
+        val htmlText = draft.htmlText
+        val markdownText = draft.plainText
+        if (htmlText != null) {
+            showTextFormatting = true
+            richTextEditorState.setHtml(htmlText)
+            richTextEditorState.requestFocus()
+        } else {
+            showTextFormatting = false
+            markdownTextEditorState.text.update(markdownText, true)
+            markdownTextEditorState.requestFocusAction()
+        }
+        when (val draftType = draft.draftType) {
+            ComposerDraftType.NewMessage -> messageComposerContext.composerMode = MessageComposerMode.Normal
+            is ComposerDraftType.Edit -> messageComposerContext.composerMode = MessageComposerMode.Edit(
+                eventId = draftType.eventId,
+                transactionId = null,
+                content = htmlText ?: markdownText
+            )
+            is ComposerDraftType.Reply -> {
+                messageComposerContext.composerMode = MessageComposerMode.Reply(InReplyToDetails.Loading(draftType.eventId))
+                timelineController.invokeOnCurrentTimeline {
+                    val replyToDetails = loadReplyDetails(draftType.eventId).map(permalinkParser)
+                    run { messageComposerContext.composerMode = MessageComposerMode.Reply(replyToDetails) }
+                }
+            }
+        }
+    }
+
+    private fun CoroutineScope.saveDraft(
+        textEditorState: TextEditorState,
+    ) = launch {
+        val html = textEditorState.messageHtml()
+        val markdown = textEditorState.messageMarkdown(permalinkBuilder)
+        val draftType = when (val mode = messageComposerContext.composerMode) {
+            is MessageComposerMode.Normal -> ComposerDraftType.NewMessage
+            is MessageComposerMode.Edit -> {
+                mode.eventId?.let { eventId -> ComposerDraftType.Edit(eventId) }
+            }
+            is MessageComposerMode.Reply -> ComposerDraftType.Reply(mode.eventId)
+        }
+        if (draftType == null || markdown.isBlank()) {
+            return@launch
+        } else {
+            val composerDraft = ComposerDraft(
+                draftType = draftType,
+                htmlText = html,
+                plainText = markdown,
+            )
+            draftService.saveDraft(room.roomId, composerDraft)
+        }
+    }
+
+    private fun CoroutineScope.toggleTextFormatting(
+        enabled: Boolean,
+        markdownTextEditorState: MarkdownTextEditorState,
+        richTextEditorState: RichTextEditorState,
+    ) = launch {
+        showTextFormatting = enabled
+        if (showTextFormatting) {
+            val markdown = markdownTextEditorState.getMessageMarkdown(permalinkBuilder)
+            richTextEditorState.setMarkdown(markdown)
+            richTextEditorState.requestFocus()
+            analyticsService.captureInteraction(Interaction.Name.MobileRoomComposerFormattingEnabled)
+        } else {
+            val markdown = richTextEditorState.messageMarkdown
+            markdownTextEditorState.text.update(markdown, true)
+            // Give some time for the focus of the previous editor to be cleared
+            delay(100)
+            markdownTextEditorState.requestFocusAction()
+        }
+    }
+
+    private fun CoroutineScope.setMode(
+        composerMode: MessageComposerMode,
+        markdownTextEditorState: MarkdownTextEditorState,
+        richTextEditorState: RichTextEditorState
+    ) = launch {
+        messageComposerContext.composerMode = composerMode
+        when (composerMode) {
+            is MessageComposerMode.Reply -> {
+                timelineController.invokeOnCurrentTimeline {
+                    enterSpecialMode(composerMode.eventId)
+                }
+            }
+            is MessageComposerMode.Edit -> {
+                setText(composerMode.content, markdownTextEditorState, richTextEditorState)
+                timelineController.invokeOnCurrentTimeline {
+                    enterSpecialMode(composerMode.eventId)
+                }
+            }
+            else -> Unit
+        }
+    }
+
+    private suspend fun setText(content: String, markdownTextEditorState: MarkdownTextEditorState, richTextEditorState: RichTextEditorState) {
+        if (showTextFormatting) {
+            richTextEditorState.setHtml(content)
+        } else {
+            markdownTextEditorState.text.update(content, true)
+        }
+    }
 }

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

@@ -16,9 +16,7 @@
 
 package io.element.android.features.messages.impl.timeline
 
-import io.element.android.features.messages.impl.timeline.components.aProfileTimelineDetailsReady
 import io.element.android.features.messages.impl.timeline.components.receipt.aReadReceiptData
-import io.element.android.features.messages.impl.timeline.model.InReplyToDetails
 import io.element.android.features.messages.impl.timeline.model.NewEventState
 import io.element.android.features.messages.impl.timeline.model.ReadReceiptData
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
@@ -37,6 +35,8 @@ import io.element.android.libraries.matrix.api.core.TransactionId
 import io.element.android.libraries.matrix.api.core.UserId
 import io.element.android.libraries.matrix.api.timeline.item.TimelineItemDebugInfo
 import io.element.android.libraries.matrix.api.timeline.item.event.LocalEventSendState
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
+import io.element.android.libraries.matrix.ui.messages.reply.aProfileTimelineDetailsReady
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.persistentListOf
 import kotlinx.collections.immutable.toImmutableList

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

@@ -25,18 +25,15 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.absoluteOffset
 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.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
@@ -53,9 +50,6 @@ import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.invisibleToUser
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
-import androidx.compose.ui.text.font.FontStyle
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
@@ -64,8 +58,6 @@ import androidx.constraintlayout.compose.ConstrainScope
 import androidx.constraintlayout.compose.ConstraintLayout
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
-import io.element.android.features.messages.impl.sender.SenderName
-import io.element.android.features.messages.impl.sender.SenderNameMode
 import io.element.android.features.messages.impl.timeline.TimelineEvents
 import io.element.android.features.messages.impl.timeline.TimelineRoomInfo
 import io.element.android.features.messages.impl.timeline.aTimelineItemEvent
@@ -74,8 +66,6 @@ import io.element.android.features.messages.impl.timeline.components.layout.Cont
 import io.element.android.features.messages.impl.timeline.components.layout.ContentAvoidingLayoutData
 import io.element.android.features.messages.impl.timeline.components.receipt.ReadReceiptViewState
 import io.element.android.features.messages.impl.timeline.components.receipt.TimelineItemReadReceiptView
-import io.element.android.features.messages.impl.timeline.model.InReplyToDetails
-import io.element.android.features.messages.impl.timeline.model.InReplyToMetadata
 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.bubble.BubbleState
@@ -88,14 +78,10 @@ import io.element.android.features.messages.impl.timeline.model.event.TimelineIt
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemImageContent
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemTextContent
 import io.element.android.features.messages.impl.timeline.model.event.canBeRepliedTo
-import io.element.android.features.messages.impl.timeline.model.eventId
-import io.element.android.features.messages.impl.timeline.model.metadata
-import io.element.android.libraries.designsystem.atomic.atoms.PlaceholderAtom
 import io.element.android.libraries.designsystem.colors.AvatarColorsProvider
 import io.element.android.libraries.designsystem.components.EqualWidthColumn
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
-import io.element.android.libraries.designsystem.icons.CompoundDrawables
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.swipe.SwipeableActionsState
@@ -106,8 +92,11 @@ import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.matrix.api.core.EventId
 import io.element.android.libraries.matrix.api.core.UserId
 import io.element.android.libraries.matrix.api.timeline.item.event.ProfileTimelineDetails
-import io.element.android.libraries.matrix.api.timeline.item.event.getDisambiguatedDisplayName
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
-import io.element.android.libraries.matrix.ui.components.AttachmentThumbnail
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToView
+import io.element.android.libraries.matrix.ui.messages.reply.eventId
+import io.element.android.libraries.matrix.ui.messages.sender.SenderName
+import io.element.android.libraries.matrix.ui.messages.sender.SenderNameMode
 import io.element.android.libraries.testtags.TestTags
 import io.element.android.libraries.ui.strings.CommonStrings
 import kotlinx.coroutines.launch
@@ -537,25 +526,7 @@ private fun MessageEventBubbleContent(
                 .clip(RoundedCornerShape(6.dp))
                 // FIXME when a node is clickable, its contents won't be added to the semantics tree of its parent
                 .clickable(onClick = inReplyToClick)
-            when (inReplyTo) {
+            InReplyToView(inReplyTo, modifier = inReplyToModifier)
-                is InReplyToDetails.Ready -> {
-                    ReplyToContent(
-                        senderId = inReplyTo.senderId,
-                        senderProfile = inReplyTo.senderProfile,
-                        metadata = inReplyTo.metadata(),
-                        modifier = inReplyToModifier,
-                    )
-                }
-                is InReplyToDetails.Error ->
-                    ReplyToErrorContent(
-                        data = inReplyTo,
-                        modifier = inReplyToModifier,
-                    )
-                is InReplyToDetails.Loading ->
-                    ReplyToLoadingContent(
-                        modifier = inReplyToModifier,
-                    )
-            }
         }
         if (inReplyToDetails != null) {
             // Use SubComposeLayout only if necessary as it can have consequences on the performance.
@@ -591,128 +562,6 @@ private fun MessageEventBubbleContent(
     )
 }
 
-@Composable
-private fun ReplyToContent(
-    senderId: UserId,
-    senderProfile: ProfileTimelineDetails,
-    metadata: InReplyToMetadata?,
-    modifier: Modifier = Modifier,
-) {
-    val paddings = if (metadata is InReplyToMetadata.Thumbnail) {
-        PaddingValues(start = 4.dp, end = 12.dp, top = 4.dp, bottom = 4.dp)
-    } else {
-        PaddingValues(horizontal = 12.dp, vertical = 4.dp)
-    }
-    Row(
-        modifier
-            .background(MaterialTheme.colorScheme.surface)
-            .padding(paddings)
-    ) {
-        if (metadata is InReplyToMetadata.Thumbnail) {
-            AttachmentThumbnail(
-                info = metadata.attachmentThumbnailInfo,
-                backgroundColor = MaterialTheme.colorScheme.surfaceVariant,
-                modifier = Modifier
-                    .size(36.dp)
-                    .clip(RoundedCornerShape(4.dp))
-            )
-            Spacer(modifier = Modifier.width(8.dp))
-        }
-        val a11InReplyToText = stringResource(CommonStrings.common_in_reply_to, senderProfile.getDisambiguatedDisplayName(senderId))
-        Column(verticalArrangement = Arrangement.SpaceBetween) {
-            SenderName(
-                senderId = senderId,
-                senderProfile = senderProfile,
-                senderNameMode = SenderNameMode.Reply,
-                modifier = Modifier.semantics {
-                    contentDescription = a11InReplyToText
-                },
-            )
-            ReplyToContentText(metadata)
-        }
-    }
-}
-
-@Composable
-private fun ReplyToLoadingContent(
-    modifier: Modifier = Modifier,
-) {
-    val paddings = PaddingValues(horizontal = 12.dp, vertical = 4.dp)
-    Row(
-        modifier
-            .background(MaterialTheme.colorScheme.surface)
-            .padding(paddings)
-    ) {
-        Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
-            PlaceholderAtom(width = 80.dp, height = 12.dp)
-            PlaceholderAtom(width = 140.dp, height = 14.dp)
-        }
-    }
-}
-
-@Composable
-private fun ReplyToErrorContent(
-    data: InReplyToDetails.Error,
-    modifier: Modifier = Modifier,
-) {
-    val paddings = PaddingValues(horizontal = 12.dp, vertical = 4.dp)
-    Row(
-        modifier
-            .background(MaterialTheme.colorScheme.surface)
-            .padding(paddings)
-    ) {
-        Text(
-            text = data.message,
-            style = ElementTheme.typography.fontBodyMdRegular,
-            color = MaterialTheme.colorScheme.error,
-            maxLines = 2,
-            overflow = TextOverflow.Ellipsis,
-        )
-    }
-}
-
-@Composable
-private fun ReplyToContentText(metadata: InReplyToMetadata?) {
-    val text = when (metadata) {
-        InReplyToMetadata.Redacted -> stringResource(id = CommonStrings.common_message_removed)
-        InReplyToMetadata.UnableToDecrypt -> stringResource(id = CommonStrings.common_waiting_for_decryption_key)
-        is InReplyToMetadata.Text -> metadata.text
-        is InReplyToMetadata.Thumbnail -> metadata.text
-        null -> ""
-    }
-    val iconResourceId = when (metadata) {
-        InReplyToMetadata.Redacted -> CompoundDrawables.ic_compound_delete
-        InReplyToMetadata.UnableToDecrypt -> CompoundDrawables.ic_compound_time
-        else -> null
-    }
-    val fontStyle = when (metadata) {
-        is InReplyToMetadata.Informative -> FontStyle.Italic
-        else -> FontStyle.Normal
-    }
-    Row(
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        if (iconResourceId != null) {
-            Icon(
-                resourceId = iconResourceId,
-                tint = MaterialTheme.colorScheme.secondary,
-                contentDescription = null,
-                modifier = Modifier.size(16.dp)
-            )
-            Spacer(modifier = Modifier.width(4.dp))
-        }
-        Text(
-            text = text,
-            style = ElementTheme.typography.fontBodyMdRegular,
-            fontStyle = fontStyle,
-            textAlign = TextAlign.Start,
-            color = MaterialTheme.colorScheme.secondary,
-            maxLines = 2,
-            overflow = TextOverflow.Ellipsis,
-        )
-    }
-}
-
 @PreviewsDayNight
 @Composable
 internal fun TimelineItemEventRowPreview() = ElementPreview {

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

@@ -18,10 +18,10 @@ package io.element.android.features.messages.impl.timeline.components
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.tooling.preview.PreviewParameter
-import io.element.android.features.messages.impl.timeline.model.InReplyToDetails
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-import io.element.android.libraries.matrix.api.timeline.item.event.TextMessageType
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetailsDisambiguatedProvider
 
 @PreviewsDayNight
 @Composable
@@ -33,18 +33,3 @@ internal fun TimelineItemEventRowDisambiguatedPreview(
         displayNameAmbiguous = true,
     )
 }
-
-class InReplyToDetailsDisambiguatedProvider : InReplyToDetailsProvider() {
-    override val values: Sequence<InReplyToDetails>
-        get() = sequenceOf(
-            aMessageContent(
-                body = "Message which are being replied.",
-                type = TextMessageType("Message which are being replied.", null)
-            ),
-        ).map {
-            aInReplyToDetails(
-                displayNameAmbiguous = true,
-                eventContent = it,
-            )
-        }
-}

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

@@ -18,11 +18,10 @@ package io.element.android.features.messages.impl.timeline.components
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.tooling.preview.PreviewParameter
-import io.element.android.features.messages.impl.timeline.model.InReplyToDetails
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-import io.element.android.libraries.matrix.api.timeline.item.event.RedactedContent
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
-import io.element.android.libraries.matrix.api.timeline.item.event.UnableToDecryptContent
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetailsInformativeProvider
 
 @PreviewsDayNight
 @Composable
@@ -31,15 +30,3 @@ internal fun TimelineItemEventRowWithReplyInformativePreview(
 ) = ElementPreview {
     TimelineItemEventRowWithReplyContentToPreview(inReplyToDetails)
 }
-
-class InReplyToDetailsInformativeProvider : InReplyToDetailsProvider() {
-    override val values: Sequence<InReplyToDetails>
-        get() = sequenceOf(
-            RedactedContent,
-            UnableToDecryptContent(UnableToDecryptContent.Data.Unknown),
-        ).map {
-            aInReplyToDetails(
-                eventContent = it,
-            )
-        }
-}

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

@@ -18,10 +18,10 @@ package io.element.android.features.messages.impl.timeline.components
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.tooling.preview.PreviewParameter
-import io.element.android.features.messages.impl.timeline.model.InReplyToDetails
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-import io.element.android.libraries.matrix.api.core.EventId
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetailsOtherProvider
 
 @PreviewsDayNight
 @Composable
@@ -30,11 +30,3 @@ internal fun TimelineItemEventRowWithReplyOtherPreview(
 ) = ElementPreview {
     TimelineItemEventRowWithReplyContentToPreview(inReplyToDetails)
 }
-
-class InReplyToDetailsOtherProvider : InReplyToDetailsProvider() {
-    override val values: Sequence<InReplyToDetails>
-        get() = sequenceOf(
-            InReplyToDetails.Loading(eventId = EventId("\$anEventId")),
-            InReplyToDetails.Error(eventId = EventId("\$anEventId"), message = "An error message."),
-        )
-}

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

@@ -19,36 +19,15 @@ 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 androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import io.element.android.features.messages.impl.timeline.aTimelineItemEvent
 import io.element.android.features.messages.impl.timeline.aTimelineItemReactions
-import io.element.android.features.messages.impl.timeline.model.InReplyToDetails
 import io.element.android.features.messages.impl.timeline.model.TimelineItemGroupPosition
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemImageContent
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemTextContent
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-import io.element.android.libraries.matrix.api.core.EventId
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
-import io.element.android.libraries.matrix.api.core.UserId
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetailsProvider
-import io.element.android.libraries.matrix.api.media.MediaSource
-import io.element.android.libraries.matrix.api.poll.PollKind
-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.EventContent
-import io.element.android.libraries.matrix.api.timeline.item.event.FileMessageType
-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
-import io.element.android.libraries.matrix.api.timeline.item.event.MessageType
-import io.element.android.libraries.matrix.api.timeline.item.event.NoticeMessageType
-import io.element.android.libraries.matrix.api.timeline.item.event.PollContent
-import io.element.android.libraries.matrix.api.timeline.item.event.ProfileTimelineDetails
-import io.element.android.libraries.matrix.api.timeline.item.event.StickerMessageType
-import io.element.android.libraries.matrix.api.timeline.item.event.TextMessageType
-import io.element.android.libraries.matrix.api.timeline.item.event.VideoMessageType
-import io.element.android.libraries.matrix.api.timeline.item.event.VoiceMessageType
-import kotlinx.collections.immutable.persistentListOf
-import kotlinx.collections.immutable.persistentMapOf
 
 @PreviewsDayNight
 @Composable
@@ -93,100 +72,3 @@ internal fun TimelineItemEventRowWithReplyContentToPreview(
         }
     }
 }
-
-open class InReplyToDetailsProvider : PreviewParameterProvider<InReplyToDetails> {
-    override val values: Sequence<InReplyToDetails>
-        get() = sequenceOf(
-            aMessageContent(
-                body = "Message which are being replied.",
-                type = TextMessageType("Message which are being replied.", null)
-            ),
-            aMessageContent(
-                body = "Message which are being replied, and which was long enough to be displayed on two lines (only!).",
-                type = TextMessageType("Message which are being replied, and which was long enough to be displayed on two lines (only!).", null)
-            ),
-            aMessageContent(
-                body = "Video",
-                type = VideoMessageType("Video", null, null, MediaSource("url"), null),
-            ),
-            aMessageContent(
-                body = "Audio",
-                type = AudioMessageType("Audio", MediaSource("url"), null),
-            ),
-            aMessageContent(
-                body = "Voice",
-                type = VoiceMessageType("Voice", MediaSource("url"), null, null),
-            ),
-            aMessageContent(
-                body = "Image",
-                type = ImageMessageType("Image", null, null, MediaSource("url"), null),
-            ),
-            aMessageContent(
-                body = "Sticker",
-                type = StickerMessageType("Image", MediaSource("url"), null),
-            ),
-            aMessageContent(
-                body = "File",
-                type = FileMessageType("File", MediaSource("url"), null),
-            ),
-            aMessageContent(
-                body = "Location",
-                type = LocationMessageType("Location", "geo:1,2", null),
-            ),
-            aMessageContent(
-                body = "Notice",
-                type = NoticeMessageType("Notice", null),
-            ),
-            aMessageContent(
-                body = "Emote",
-                type = EmoteMessageType("Emote", null),
-            ),
-            PollContent(
-                question = "Poll which are being replied.",
-                kind = PollKind.Disclosed,
-                maxSelections = 1u,
-                answers = persistentListOf(),
-                votes = persistentMapOf(),
-                endTime = null,
-                isEdited = false,
-            ),
-        ).map {
-            aInReplyToDetails(
-                eventContent = it,
-            )
-        }
-
-    protected fun aMessageContent(
-        body: String,
-        type: MessageType,
-    ) = MessageContent(
-        body = body,
-        inReplyTo = null,
-        isEdited = false,
-        isThreaded = false,
-        type = type,
-    )
-
-    protected fun aInReplyToDetails(
-        eventContent: EventContent,
-        displayNameAmbiguous: Boolean = false,
-    ) = InReplyToDetails.Ready(
-        eventId = EventId("\$event"),
-        eventContent = eventContent,
-        senderId = UserId("@Sender:domain"),
-        senderProfile = aProfileTimelineDetailsReady(
-            displayNameAmbiguous = displayNameAmbiguous,
-        ),
-        textContent = (eventContent as? MessageContent)?.body.orEmpty(),
-    )
-}
-
-internal fun aProfileTimelineDetailsReady(
-    displayName: String? = "Sender",
-    displayNameAmbiguous: Boolean = false,
-    avatarUrl: String? = null,
-) = ProfileTimelineDetails.Ready(
-    displayName = displayName,
-    displayNameAmbiguous = displayNameAmbiguous,
-    avatarUrl = avatarUrl,
-)

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

@@ -24,7 +24,6 @@ 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.map
 import io.element.android.libraries.core.bool.orTrue
 import io.element.android.libraries.dateformatter.api.LastMessageTimestampFormatter
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
@@ -35,6 +34,7 @@ import io.element.android.libraries.matrix.api.room.RoomMember
 import io.element.android.libraries.matrix.api.timeline.MatrixTimelineItem
 import io.element.android.libraries.matrix.api.timeline.item.event.getAvatarUrl
 import io.element.android.libraries.matrix.api.timeline.item.event.getDisambiguatedDisplayName
+import io.element.android.libraries.matrix.ui.messages.reply.map
 import kotlinx.collections.immutable.toImmutableList
 import java.text.DateFormat
 import java.util.Date

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

@@ -30,6 +30,7 @@ import io.element.android.libraries.matrix.api.timeline.item.event.LocalEventSen
 import io.element.android.libraries.matrix.api.timeline.item.event.ProfileTimelineDetails
 import io.element.android.libraries.matrix.api.timeline.item.event.TimelineItemEventOrigin
 import io.element.android.libraries.matrix.api.timeline.item.event.getDisambiguatedDisplayName
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
 import kotlinx.collections.immutable.ImmutableList
 
 @Immutable

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

@@ -25,11 +25,11 @@ import com.google.common.truth.Truth.assertThat
 import io.element.android.features.messages.impl.actionlist.ActionListPresenter
 import io.element.android.features.messages.impl.actionlist.ActionListState
 import io.element.android.features.messages.impl.actionlist.model.TimelineItemAction
+import io.element.android.features.messages.impl.draft.FakeComposerDraftService
 import io.element.android.features.messages.impl.fixtures.aMessageEvent
 import io.element.android.features.messages.impl.fixtures.aTimelineItemsFactory
 import io.element.android.features.messages.impl.messagecomposer.DefaultMessageComposerContext
 import io.element.android.features.messages.impl.messagecomposer.MessageComposerPresenter
-import io.element.android.features.messages.impl.messagesummary.FakeMessageSummaryFormatter
 import io.element.android.features.messages.impl.textcomposer.TestRichTextEditorStateFactory
 import io.element.android.features.messages.impl.timeline.TimelineController
 import io.element.android.features.messages.impl.timeline.TimelineItemIndexer
@@ -65,6 +65,7 @@ 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.TransactionId
 import io.element.android.libraries.matrix.api.media.MediaSource
+import io.element.android.libraries.matrix.api.permalink.PermalinkParser
 import io.element.android.libraries.matrix.api.room.MatrixRoom
 import io.element.android.libraries.matrix.api.room.MatrixRoomMembersState
 import io.element.android.libraries.matrix.api.room.MessageEventType
@@ -81,6 +82,7 @@ import io.element.android.libraries.matrix.test.room.FakeMatrixRoom
 import io.element.android.libraries.matrix.test.room.aRoomInfo
 import io.element.android.libraries.matrix.test.room.aRoomMember
 import io.element.android.libraries.matrix.test.timeline.FakeTimeline
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
 import io.element.android.libraries.mediapickers.test.FakePickerProvider
 import io.element.android.libraries.mediaplayer.test.FakeMediaPlayer
 import io.element.android.libraries.mediaupload.api.MediaSender
@@ -331,7 +333,7 @@ class MessagesPresenterTest {
             val finalState = awaitItem()
             assertThat(finalState.composerState.mode).isInstanceOf(MessageComposerMode.Reply::class.java)
             val replyMode = finalState.composerState.mode as MessageComposerMode.Reply
-            assertThat(replyMode.attachmentThumbnailInfo).isNotNull()
+            assertThat(replyMode.replyToDetails).isInstanceOf(InReplyToDetails.Loading::class.java)
             assertThat(finalState.actionListState.target).isEqualTo(ActionListState.Target.None)
         }
     }
@@ -364,7 +366,7 @@ class MessagesPresenterTest {
             val finalState = awaitItem()
             assertThat(finalState.composerState.mode).isInstanceOf(MessageComposerMode.Reply::class.java)
             val replyMode = finalState.composerState.mode as MessageComposerMode.Reply
-            assertThat(replyMode.attachmentThumbnailInfo).isNotNull()
+            assertThat(replyMode.replyToDetails).isInstanceOf(InReplyToDetails.Loading::class.java)
             assertThat(finalState.actionListState.target).isEqualTo(ActionListState.Target.None)
         }
     }
@@ -390,7 +392,7 @@ class MessagesPresenterTest {
             val finalState = awaitItem()
             assertThat(finalState.composerState.mode).isInstanceOf(MessageComposerMode.Reply::class.java)
             val replyMode = finalState.composerState.mode as MessageComposerMode.Reply
-            assertThat(replyMode.attachmentThumbnailInfo).isNotNull()
+            assertThat(replyMode.replyToDetails).isInstanceOf(InReplyToDetails.Loading::class.java)
             assertThat(finalState.actionListState.target).isEqualTo(ActionListState.Target.None)
         }
     }
@@ -735,9 +737,8 @@ class MessagesPresenterTest {
             val finalState = awaitItem()
             assertThat(finalState.composerState.mode).isInstanceOf(MessageComposerMode.Reply::class.java)
             val replyMode = finalState.composerState.mode as MessageComposerMode.Reply
-            assertThat(replyMode.attachmentThumbnailInfo).isNotNull()
+
-            assertThat(replyMode.attachmentThumbnailInfo?.textContent)
+            assertThat(replyMode.replyToDetails).isInstanceOf(InReplyToDetails.Loading::class.java)
-                .isEqualTo("What type of food should we have at the party?")
             assertThat(finalState.actionListState.target).isEqualTo(ActionListState.Target.None)
         }
     }
@@ -758,6 +759,7 @@ class MessagesPresenterTest {
         analyticsService: FakeAnalyticsService = FakeAnalyticsService(),
         permissionsPresenter: PermissionsPresenter = FakePermissionsPresenter(),
         endPollAction: EndPollAction = FakeEndPollAction(),
+        permalinkParser: PermalinkParser = FakePermalinkParser(),
     ): MessagesPresenter {
         val mediaSender = MediaSender(FakeMediaPreProcessor(), matrixRoom)
         val permissionsPresenterFactory = FakePermissionsPresenterFactory(permissionsPresenter)
@@ -779,6 +781,7 @@ class MessagesPresenterTest {
             permalinkParser = FakePermalinkParser(),
             permalinkBuilder = FakePermalinkBuilder(),
             timelineController = TimelineController(matrixRoom),
+            draftService = FakeComposerDraftService(),
         ).apply {
             showTextFormatting = true
             isTesting = true
@@ -830,7 +833,6 @@ class MessagesPresenterTest {
             readReceiptBottomSheetPresenter = readReceiptBottomSheetPresenter,
             networkMonitor = FakeNetworkMonitor(),
             snackbarDispatcher = SnackbarDispatcher(),
-            messageSummaryFormatter = FakeMessageSummaryFormatter(),
             navigator = navigator,
             clipboardHelper = clipboardHelper,
             featureFlagsService = FakeFeatureFlagService(),
@@ -838,6 +840,7 @@ class MessagesPresenterTest {
             dispatchers = coroutineDispatchers,
             htmlConverterProvider = FakeHtmlConverterProvider(),
             timelineController = TimelineController(matrixRoom),
+            permalinkParser = permalinkParser,
         )
     }
 }

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

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2024 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.features.messages.impl.draft
+
+import io.element.android.libraries.matrix.api.core.RoomId
+import io.element.android.libraries.matrix.api.room.draft.ComposerDraft
+
+class FakeComposerDraftService : ComposerDraftService {
+    var loadDraftLambda: (RoomId) -> ComposerDraft? = { null }
+    override suspend fun loadDraft(roomId: RoomId) = loadDraftLambda(roomId)
+
+    var saveDraftLambda: (RoomId, ComposerDraft) -> Unit = { _, _ -> }
+    override suspend fun saveDraft(roomId: RoomId, draft: ComposerDraft) = saveDraftLambda(roomId, draft)
+}

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

@@ -18,8 +18,6 @@ package io.element.android.features.messages.impl.fixtures
 
 import io.element.android.features.messages.impl.timeline.aTimelineItemDebugInfo
 import io.element.android.features.messages.impl.timeline.aTimelineItemReactions
-import io.element.android.features.messages.impl.timeline.components.aProfileTimelineDetailsReady
-import io.element.android.features.messages.impl.timeline.model.InReplyToDetails
 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.TimelineItemReadReceipts
@@ -35,6 +33,8 @@ import io.element.android.libraries.matrix.test.AN_EVENT_ID
 import io.element.android.libraries.matrix.test.A_MESSAGE
 import io.element.android.libraries.matrix.test.A_USER_ID
 import io.element.android.libraries.matrix.test.A_USER_NAME
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
+import io.element.android.libraries.matrix.ui.messages.reply.aProfileTimelineDetailsReady
 import kotlinx.collections.immutable.toImmutableList
 
 internal fun aMessageEvent(

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

@@ -27,6 +27,8 @@ import app.cash.turbine.test
 import com.google.common.truth.Truth.assertThat
 import im.vector.app.features.analytics.plan.Composer
 import im.vector.app.features.analytics.plan.Interaction
+import io.element.android.features.messages.impl.draft.ComposerDraftService
+import io.element.android.features.messages.impl.draft.FakeComposerDraftService
 import io.element.android.features.messages.impl.messagecomposer.AttachmentsState
 import io.element.android.features.messages.impl.messagecomposer.DefaultMessageComposerContext
 import io.element.android.features.messages.impl.messagecomposer.MessageComposerEvents
@@ -39,6 +41,7 @@ import io.element.android.libraries.featureflag.api.FeatureFlagService
 import io.element.android.libraries.featureflag.api.FeatureFlags
 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.TransactionId
 import io.element.android.libraries.matrix.api.media.ImageInfo
 import io.element.android.libraries.matrix.api.media.VideoInfo
@@ -47,21 +50,25 @@ import io.element.android.libraries.matrix.api.room.MatrixRoom
 import io.element.android.libraries.matrix.api.room.MatrixRoomMembersState
 import io.element.android.libraries.matrix.api.room.Mention
 import io.element.android.libraries.matrix.api.room.RoomMembershipState
+import io.element.android.libraries.matrix.api.room.draft.ComposerDraft
+import io.element.android.libraries.matrix.api.room.draft.ComposerDraftType
+import io.element.android.libraries.matrix.api.timeline.item.event.InReplyTo
 import io.element.android.libraries.matrix.test.ANOTHER_MESSAGE
 import io.element.android.libraries.matrix.test.AN_EVENT_ID
 import io.element.android.libraries.matrix.test.A_MESSAGE
 import io.element.android.libraries.matrix.test.A_REPLY
+import io.element.android.libraries.matrix.test.A_ROOM_ID
 import io.element.android.libraries.matrix.test.A_TRANSACTION_ID
 import io.element.android.libraries.matrix.test.A_USER_ID
 import io.element.android.libraries.matrix.test.A_USER_ID_2
 import io.element.android.libraries.matrix.test.A_USER_ID_3
 import io.element.android.libraries.matrix.test.A_USER_ID_4
-import io.element.android.libraries.matrix.test.A_USER_NAME
 import io.element.android.libraries.matrix.test.permalink.FakePermalinkBuilder
 import io.element.android.libraries.matrix.test.permalink.FakePermalinkParser
 import io.element.android.libraries.matrix.test.room.FakeMatrixRoom
 import io.element.android.libraries.matrix.test.room.aRoomMember
 import io.element.android.libraries.matrix.test.timeline.FakeTimeline
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
 import io.element.android.libraries.mediapickers.api.PickerProvider
 import io.element.android.libraries.mediapickers.test.FakePickerProvider
 import io.element.android.libraries.mediaupload.api.MediaPreProcessor
@@ -175,7 +182,6 @@ class MessageComposerPresenterTest {
             state.eventSink.invoke(MessageComposerEvents.SetMode(mode))
             state = awaitItem()
             assertThat(state.mode).isEqualTo(mode)
-            state = awaitItem()
             assertThat(state.textEditorState.messageHtml()).isEqualTo(A_MESSAGE)
             state = backToNormalMode(state, skipCount = 1)
 
@@ -219,22 +225,6 @@ class MessageComposerPresenterTest {
         }
     }
 
-    @Test
-    fun `present - change mode to quote`() = runTest {
-        val presenter = createPresenter(this)
-        moleculeFlow(RecompositionMode.Immediate) {
-            presenter.present()
-        }.test {
-            var state = awaitFirstItem()
-            val mode = aQuoteMode()
-            state.eventSink.invoke(MessageComposerEvents.SetMode(mode))
-            state = awaitItem()
-            assertThat(state.mode).isEqualTo(mode)
-            assertThat(state.textEditorState.messageHtml()).isEqualTo("")
-            backToNormalMode(state)
-        }
-    }
-
     @Test
     fun `present - send message with rich text enabled`() = runTest {
         val presenter = createPresenter(this)
@@ -311,7 +301,6 @@ class MessageComposerPresenterTest {
             assertThat(initialState.textEditorState.messageHtml()).isEqualTo("")
             val mode = anEditMode()
             initialState.eventSink.invoke(MessageComposerEvents.SetMode(mode))
-            skipItems(1)
             val withMessageState = awaitItem()
             assertThat(withMessageState.mode).isEqualTo(mode)
             assertThat(withMessageState.textEditorState.messageHtml()).isEqualTo(A_MESSAGE)
@@ -361,7 +350,6 @@ class MessageComposerPresenterTest {
             assertThat(initialState.textEditorState.messageHtml()).isEqualTo("")
             val mode = anEditMode(eventId = null, transactionId = A_TRANSACTION_ID)
             initialState.eventSink.invoke(MessageComposerEvents.SetMode(mode))
-            skipItems(1)
             val withMessageState = awaitItem()
             assertThat(withMessageState.mode).isEqualTo(mode)
             assertThat(withMessageState.textEditorState.messageHtml()).isEqualTo(A_MESSAGE)
@@ -1023,6 +1011,250 @@ class MessageComposerPresenterTest {
         }
     }
 
+    @Test
+    fun `present - when there is no draft, nothing is restored`() = runTest {
+        val loadDraftLambda = lambdaRecorder<RoomId, ComposerDraft?> { _ -> null }
+        val composerDraftService = FakeComposerDraftService().apply {
+            this.loadDraftLambda = loadDraftLambda
+        }
+        val presenter = createPresenter(draftService = composerDraftService, coroutineScope = this)
+        moleculeFlow(RecompositionMode.Immediate) {
+            presenter.present()
+        }.test {
+            awaitFirstItem()
+            assert(loadDraftLambda)
+                .isCalledOnce()
+                .with(value(A_ROOM_ID))
+
+            ensureAllEventsConsumed()
+        }
+    }
+
+    @Test
+    fun `present - when there is a draft for new message with plain text, it is restored`() = runTest {
+        val loadDraftLambda = lambdaRecorder<RoomId, ComposerDraft?> { _ ->
+            ComposerDraft(plainText = A_MESSAGE, htmlText = null, draftType = ComposerDraftType.NewMessage)
+        }
+        val composerDraftService = FakeComposerDraftService().apply {
+            this.loadDraftLambda = loadDraftLambda
+        }
+        val permalinkBuilder = FakePermalinkBuilder()
+        val presenter = createPresenter(
+            draftService = composerDraftService,
+            permalinkBuilder = permalinkBuilder,
+            coroutineScope = this
+        )
+        moleculeFlow(RecompositionMode.Immediate) {
+            presenter.present()
+        }.test {
+            awaitFirstItem().also { state ->
+                assertThat(state.textEditorState.messageMarkdown(permalinkBuilder)).isEqualTo(A_MESSAGE)
+                assertThat(state.textEditorState.messageHtml()).isNull()
+            }
+
+            assert(loadDraftLambda)
+                .isCalledOnce()
+                .with(value(A_ROOM_ID))
+
+            ensureAllEventsConsumed()
+        }
+    }
+
+    @Test
+    fun `present - when there is a draft for new message with rich text, it is restored`() = runTest {
+        val loadDraftLambda = lambdaRecorder<RoomId, ComposerDraft?> { _ ->
+            ComposerDraft(
+                plainText = A_MESSAGE,
+                htmlText = A_MESSAGE,
+                draftType = ComposerDraftType.NewMessage
+            )
+        }
+        val composerDraftService = FakeComposerDraftService().apply {
+            this.loadDraftLambda = loadDraftLambda
+        }
+        val permalinkBuilder = FakePermalinkBuilder()
+        val presenter = createPresenter(
+            draftService = composerDraftService,
+            permalinkBuilder = permalinkBuilder,
+            coroutineScope = this
+        )
+        moleculeFlow(RecompositionMode.Immediate) {
+            presenter.present()
+        }.test {
+            awaitFirstItem().also { state ->
+                assertThat(state.showTextFormatting).isTrue()
+                assertThat(state.textEditorState.messageMarkdown(permalinkBuilder)).isEqualTo(A_MESSAGE)
+                assertThat(state.textEditorState.messageHtml()).isEqualTo(A_MESSAGE)
+            }
+            assert(loadDraftLambda)
+                .isCalledOnce()
+                .with(value(A_ROOM_ID))
+            ensureAllEventsConsumed()
+        }
+    }
+
+    @Test
+    fun `present - when there is a draft for edit, it is restored`() = runTest {
+        val loadDraftLambda = lambdaRecorder<RoomId, ComposerDraft?> { _ ->
+            ComposerDraft(
+                plainText = A_MESSAGE,
+                htmlText = null,
+                draftType = ComposerDraftType.Edit(AN_EVENT_ID)
+            )
+        }
+        val composerDraftService = FakeComposerDraftService().apply {
+            this.loadDraftLambda = loadDraftLambda
+        }
+        val permalinkBuilder = FakePermalinkBuilder()
+        val presenter = createPresenter(
+            draftService = composerDraftService,
+            permalinkBuilder = permalinkBuilder,
+            coroutineScope = this
+        )
+        moleculeFlow(RecompositionMode.Immediate) {
+            presenter.present()
+        }.test {
+            awaitFirstItem().also { state ->
+                assertThat(state.showTextFormatting).isFalse()
+                assertThat(state.mode).isEqualTo(anEditMode())
+                assertThat(state.textEditorState.messageMarkdown(permalinkBuilder)).isEqualTo(A_MESSAGE)
+                assertThat(state.textEditorState.messageHtml()).isNull()
+            }
+            assert(loadDraftLambda)
+                .isCalledOnce()
+                .with(value(A_ROOM_ID))
+
+            ensureAllEventsConsumed()
+        }
+    }
+
+    @Test
+    fun `present - when there is a draft for reply, it is restored`() = runTest {
+        val loadDraftLambda = lambdaRecorder<RoomId, ComposerDraft?> { _ ->
+            ComposerDraft(
+                plainText = A_MESSAGE,
+                htmlText = null,
+                draftType = ComposerDraftType.Reply(AN_EVENT_ID)
+            )
+        }
+        val composerDraftService = FakeComposerDraftService().apply {
+            this.loadDraftLambda = loadDraftLambda
+        }
+        val loadReplyDetailsLambda = lambdaRecorder<EventId, InReplyTo> { eventId ->
+            InReplyTo.Pending(eventId)
+        }
+        val timeline = FakeTimeline().apply {
+            this.loadReplyDetailsLambda = loadReplyDetailsLambda
+        }
+        val room = FakeMatrixRoom(liveTimeline = timeline)
+        val permalinkBuilder = FakePermalinkBuilder()
+        val presenter = createPresenter(
+            room = room,
+            draftService = composerDraftService,
+            permalinkBuilder = permalinkBuilder,
+            coroutineScope = this
+        )
+        moleculeFlow(RecompositionMode.Immediate) {
+            presenter.present()
+        }.test {
+            awaitFirstItem().also { state ->
+                assertThat(state.showTextFormatting).isFalse()
+                assertThat(state.mode).isEqualTo(aReplyMode())
+                assertThat(state.textEditorState.messageMarkdown(permalinkBuilder)).isEqualTo(A_MESSAGE)
+                assertThat(state.textEditorState.messageHtml()).isNull()
+            }
+            assert(loadDraftLambda)
+                .isCalledOnce()
+                .with(value(A_ROOM_ID))
+
+            assert(loadReplyDetailsLambda)
+                .isCalledOnce()
+                .with(value(AN_EVENT_ID))
+
+            ensureAllEventsConsumed()
+        }
+    }
+
+    @Test
+    fun `present - when save draft event is invoked and composer is empty then nothing happens`() = runTest {
+        val saveDraftLambda = lambdaRecorder<RoomId, ComposerDraft, Unit> { _, _ -> }
+        val composerDraftService = FakeComposerDraftService().apply {
+            this.saveDraftLambda = saveDraftLambda
+        }
+        val presenter = createPresenter(draftService = composerDraftService, coroutineScope = this)
+        moleculeFlow(RecompositionMode.Immediate) {
+            presenter.present()
+        }.test {
+            val initialState = awaitFirstItem()
+            initialState.eventSink.invoke(MessageComposerEvents.SaveDraft)
+            advanceUntilIdle()
+            assert(saveDraftLambda)
+                .isNeverCalled()
+        }
+    }
+
+    @Test
+    fun `present - when save draft event is invoked and composer is not empty then service is called`() = runTest {
+        val saveDraftLambda = lambdaRecorder<RoomId, ComposerDraft, Unit> { _, _ -> }
+        val composerDraftService = FakeComposerDraftService().apply {
+            this.saveDraftLambda = saveDraftLambda
+        }
+        val permalinkBuilder = FakePermalinkBuilder()
+        val presenter = createPresenter(
+            isRichTextEditorEnabled = false,
+            draftService = composerDraftService,
+            permalinkBuilder = permalinkBuilder,
+            coroutineScope = this
+        )
+        moleculeFlow(RecompositionMode.Immediate) {
+            val state = presenter.present()
+            val messageMarkdown = state.textEditorState.messageMarkdown(permalinkBuilder)
+            remember(state, messageMarkdown) { state }
+        }.test {
+            val initialState = awaitFirstItem()
+            initialState.textEditorState.setMarkdown(A_MESSAGE)
+
+            val withMessageState = awaitItem()
+            assertThat(withMessageState.textEditorState.messageMarkdown(permalinkBuilder)).isEqualTo(A_MESSAGE)
+            withMessageState.eventSink(MessageComposerEvents.SaveDraft)
+            advanceUntilIdle()
+
+            withMessageState.eventSink(MessageComposerEvents.ToggleTextFormatting(true))
+            skipItems(1)
+            val withFormattingState = awaitItem()
+            assertThat(withFormattingState.showTextFormatting).isTrue()
+            withFormattingState.eventSink(MessageComposerEvents.SaveDraft)
+            advanceUntilIdle()
+
+            withFormattingState.eventSink(MessageComposerEvents.SetMode(anEditMode()))
+            val withEditModeState = awaitItem()
+            assertThat(withEditModeState.mode).isEqualTo(anEditMode())
+            withEditModeState.eventSink(MessageComposerEvents.SaveDraft)
+            advanceUntilIdle()
+
+            withEditModeState.eventSink(MessageComposerEvents.SetMode(aReplyMode()))
+            val withReplyModeState = awaitItem()
+            assertThat(withReplyModeState.mode).isEqualTo(aReplyMode())
+            withReplyModeState.eventSink(MessageComposerEvents.SaveDraft)
+            advanceUntilIdle()
+
+            assert(saveDraftLambda)
+                .isCalledExactly(4)
+                .withSequence(
+                    listOf(value(A_ROOM_ID), value(ComposerDraft(plainText = A_MESSAGE, htmlText = null, draftType = ComposerDraftType.NewMessage))),
+                    listOf(value(A_ROOM_ID), value(ComposerDraft(plainText = A_MESSAGE, htmlText = A_MESSAGE, draftType = ComposerDraftType.NewMessage))),
+                    listOf(
+                        value(A_ROOM_ID),
+                        value(ComposerDraft(plainText = A_MESSAGE, htmlText = A_MESSAGE, draftType = ComposerDraftType.Edit(AN_EVENT_ID)))
+                    ),
+                    listOf(
+                        value(A_ROOM_ID),
+                        value(ComposerDraft(plainText = A_MESSAGE, htmlText = A_MESSAGE, draftType = ComposerDraftType.Reply(AN_EVENT_ID)))
+                    )
+                )
+        }
+    }
+
     private suspend fun ReceiveTurbine<MessageComposerState>.backToNormalMode(state: MessageComposerState, skipCount: Int = 0): MessageComposerState {
         state.eventSink.invoke(MessageComposerEvents.CloseSpecialMode)
         skipItems(skipCount)
@@ -1042,6 +1274,7 @@ class MessageComposerPresenterTest {
         permissionPresenter: PermissionsPresenter = FakePermissionsPresenter(),
         permalinkBuilder: PermalinkBuilder = FakePermalinkBuilder(),
         isRichTextEditorEnabled: Boolean = true,
+        draftService: ComposerDraftService = FakeComposerDraftService(),
     ) = MessageComposerPresenter(
         coroutineScope,
         room,
@@ -1058,6 +1291,7 @@ class MessageComposerPresenterTest {
         permalinkParser = FakePermalinkParser(),
         permalinkBuilder = permalinkBuilder,
         timelineController = TimelineController(room),
+        draftService = draftService,
     ).apply {
         isTesting = true
         showTextFormatting = isRichTextEditorEnabled
@@ -1074,15 +1308,6 @@ fun anEditMode(
     eventId: EventId? = AN_EVENT_ID,
     message: String = A_MESSAGE,
     transactionId: TransactionId? = null,
-) = MessageComposerMode.Edit(eventId, message, transactionId)
+) = MessageComposerMode.Edit(eventId, transactionId, message)
 
-fun aReplyMode() = MessageComposerMode.Reply(A_USER_NAME, null, false, AN_EVENT_ID, A_MESSAGE)
+fun aReplyMode() = MessageComposerMode.Reply(replyToDetails = InReplyToDetails.Loading(AN_EVENT_ID))
-fun aQuoteMode() = MessageComposerMode.Quote(AN_EVENT_ID, A_MESSAGE)
-
-private suspend fun TextEditorState.setHtml(html: String) {
-    (this as? TextEditorState.Rich)?.richTextEditorState?.setHtml(html) ?: error("TextEditorState is not Rich")
-}
-
-private fun TextEditorState.setMarkdown(markdown: String) {
-    (this as? TextEditorState.Markdown)?.state?.text?.update(markdown, needsDisplaying = false) ?: error("TextEditorState is not Markdown")
-}

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

@@ -20,7 +20,6 @@ import com.google.common.truth.Truth.assertThat
 import io.element.android.features.messages.impl.fixtures.aMessageEvent
 import io.element.android.features.messages.impl.timeline.aTimelineItemDebugInfo
 import io.element.android.features.messages.impl.timeline.aTimelineItemReactions
-import io.element.android.features.messages.impl.timeline.components.aProfileTimelineDetailsReady
 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.TimelineItemReadReceipts
@@ -30,6 +29,7 @@ import io.element.android.libraries.designsystem.components.avatar.anAvatarData
 import io.element.android.libraries.matrix.api.timeline.item.event.LocalEventSendState
 import io.element.android.libraries.matrix.test.AN_EVENT_ID
 import io.element.android.libraries.matrix.test.A_USER_ID
+import io.element.android.libraries.matrix.ui.messages.reply.aProfileTimelineDetailsReady
 import kotlinx.collections.immutable.toImmutableList
 import org.junit.Test
 

features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/voicemessages/composer/VoiceMessageComposerPresenterTest.kt

@@ -29,9 +29,8 @@ import im.vector.app.features.analytics.plan.Composer
 import io.element.android.features.messages.impl.voicemessages.VoiceMessageException
 import io.element.android.features.messages.test.FakeMessageComposerContext
 import io.element.android.libraries.matrix.test.AN_EVENT_ID
-import io.element.android.libraries.matrix.test.A_MESSAGE
-import io.element.android.libraries.matrix.test.A_USER_NAME
 import io.element.android.libraries.matrix.test.room.FakeMatrixRoom
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
 import io.element.android.libraries.mediaplayer.test.FakeMediaPlayer
 import io.element.android.libraries.mediaupload.api.MediaSender
 import io.element.android.libraries.mediaupload.test.FakeMediaPreProcessor
@@ -712,7 +711,7 @@ class VoiceMessageComposerPresenterTest {
         )
 }
 
-private fun aReplyMode() = MessageComposerMode.Reply(A_USER_NAME, null, false, AN_EVENT_ID, A_MESSAGE)
+private fun aReplyMode() = MessageComposerMode.Reply(replyToDetails = InReplyToDetails.Loading(AN_EVENT_ID))
 
 private fun aVoiceMessageComposerEvent(
     isReply: Boolean = false

libraries/matrix/api/src/main/kotlin/io/element/android/libraries/matrix/api/room/MatrixRoom.kt

@@ -29,6 +29,7 @@ import io.element.android.libraries.matrix.api.media.ImageInfo
 import io.element.android.libraries.matrix.api.media.MediaUploadHandler
 import io.element.android.libraries.matrix.api.media.VideoInfo
 import io.element.android.libraries.matrix.api.poll.PollKind
+import io.element.android.libraries.matrix.api.room.draft.ComposerDraft
 import io.element.android.libraries.matrix.api.room.location.AssetType
 import io.element.android.libraries.matrix.api.room.powerlevels.MatrixRoomPowerLevels
 import io.element.android.libraries.matrix.api.room.powerlevels.UserRoleChange
@@ -337,5 +338,20 @@ interface MatrixRoom : Closeable {
 
     suspend fun setSendQueueEnabled(enabled: Boolean)
 
+    /**
+     * Store the given `ComposerDraft` in the state store of this room.
+     */
+    suspend fun saveComposerDraft(composerDraft: ComposerDraft): Result<Unit>
+
+    /**
+     * Retrieve the `ComposerDraft` stored in the state store for this room.
+     */
+    suspend fun loadComposerDraft(): Result<ComposerDraft?>
+
+    /**
+     * Clear the `ComposerDraft` stored in the state store for this room.
+     */
+    suspend fun clearComposerDraft(): Result<Unit>
+
     override fun close() = destroy()
 }

libraries/matrix/api/src/main/kotlin/io/element/android/libraries/matrix/api/room/draft/ComposerDraft.kt

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2024 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.libraries.matrix.api.room.draft
+
+/**
+ * A draft of a message composed by the user.
+ * @param plainText The draft content in plain text.
+ * @param htmlText If the message is formatted in HTML, the HTML representation of the message.
+ * @param draftType The type of draft.
+ */
+data class ComposerDraft(
+    val plainText: String,
+    val htmlText: String?,
+    val draftType: ComposerDraftType
+)

libraries/matrix/api/src/main/kotlin/io/element/android/libraries/matrix/api/room/draft/ComposerDraftType.kt

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2024 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.libraries.matrix.api.room.draft
+
+import io.element.android.libraries.matrix.api.core.EventId
+
+sealed interface ComposerDraftType {
+    data object NewMessage : ComposerDraftType
+    data class Reply(val eventId: EventId) : ComposerDraftType
+    data class Edit(val eventId: EventId) : ComposerDraftType
+}

libraries/matrix/api/src/main/kotlin/io/element/android/libraries/matrix/api/timeline/Timeline.kt

@@ -28,6 +28,7 @@ import io.element.android.libraries.matrix.api.media.VideoInfo
 import io.element.android.libraries.matrix.api.poll.PollKind
 import io.element.android.libraries.matrix.api.room.Mention
 import io.element.android.libraries.matrix.api.room.location.AssetType
+import io.element.android.libraries.matrix.api.timeline.item.event.InReplyTo
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.StateFlow
 import java.io.File
@@ -168,4 +169,6 @@ interface Timeline : AutoCloseable {
         waveform: List<Float>,
         progressCallback: ProgressCallback?
     ): Result<MediaUploadHandler>
+
+    suspend fun loadReplyDetails(eventId: EventId): InReplyTo
 }

libraries/matrix/impl/src/main/kotlin/io/element/android/libraries/matrix/impl/room/RustMatrixRoom.kt

@@ -41,6 +41,7 @@ import io.element.android.libraries.matrix.api.room.Mention
 import io.element.android.libraries.matrix.api.room.MessageEventType
 import io.element.android.libraries.matrix.api.room.RoomMember
 import io.element.android.libraries.matrix.api.room.StateEventType
+import io.element.android.libraries.matrix.api.room.draft.ComposerDraft
 import io.element.android.libraries.matrix.api.room.location.AssetType
 import io.element.android.libraries.matrix.api.room.powerlevels.MatrixRoomPowerLevels
 import io.element.android.libraries.matrix.api.room.powerlevels.UserRoleChange
@@ -49,6 +50,7 @@ import io.element.android.libraries.matrix.api.timeline.ReceiptType
 import io.element.android.libraries.matrix.api.timeline.Timeline
 import io.element.android.libraries.matrix.api.widget.MatrixWidgetDriver
 import io.element.android.libraries.matrix.api.widget.MatrixWidgetSettings
+import io.element.android.libraries.matrix.impl.room.draft.into
 import io.element.android.libraries.matrix.impl.room.member.RoomMemberListFetcher
 import io.element.android.libraries.matrix.impl.room.member.RoomMemberMapper
 import io.element.android.libraries.matrix.impl.room.powerlevels.RoomPowerLevelsMapper
@@ -605,6 +607,21 @@ class RustMatrixRoom(
         innerRoom.enableSendQueue(enabled)
     }
 
+    override suspend fun saveComposerDraft(composerDraft: ComposerDraft): Result<Unit> = runCatching {
+        Timber.d("saveComposerDraft: $composerDraft into $roomId")
+        innerRoom.saveComposerDraft(composerDraft.into())
+    }
+
+    override suspend fun loadComposerDraft(): Result<ComposerDraft?> = runCatching {
+        Timber.d("loadComposerDraft for $roomId")
+        innerRoom.loadComposerDraft()?.into()
+    }
+
+    override suspend fun clearComposerDraft(): Result<Unit> = runCatching {
+        Timber.d("clearComposerDraft for $roomId")
+        innerRoom.clearComposerDraft()
+    }
+
     private fun createTimeline(
         timeline: InnerTimeline,
         isLive: Boolean,

libraries/matrix/impl/src/main/kotlin/io/element/android/libraries/matrix/impl/room/draft/ComposerDraftMapper.kt

@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2024 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.libraries.matrix.impl.room.draft
+
+import io.element.android.libraries.matrix.api.core.EventId
+import io.element.android.libraries.matrix.api.room.draft.ComposerDraft
+import io.element.android.libraries.matrix.api.room.draft.ComposerDraftType
+import uniffi.matrix_sdk_base.ComposerDraft as RustComposerDraft
+import uniffi.matrix_sdk_base.ComposerDraftType as RustComposerDraftType
+
+internal fun ComposerDraft.into(): RustComposerDraft {
+    return RustComposerDraft(
+        plainText = plainText,
+        htmlText = htmlText,
+        draftType = draftType.into()
+    )
+}
+
+internal fun RustComposerDraft.into(): ComposerDraft {
+    return ComposerDraft(
+        plainText = plainText,
+        htmlText = htmlText,
+        draftType = draftType.into()
+    )
+}
+
+private fun RustComposerDraftType.into(): ComposerDraftType {
+    return when (this) {
+        RustComposerDraftType.NewMessage -> ComposerDraftType.NewMessage
+        is RustComposerDraftType.Reply -> ComposerDraftType.Reply(EventId(eventId))
+        is RustComposerDraftType.Edit -> ComposerDraftType.Edit(EventId(eventId))
+    }
+}
+
+private fun ComposerDraftType.into(): RustComposerDraftType {
+    return when (this) {
+        ComposerDraftType.NewMessage -> RustComposerDraftType.NewMessage
+        is ComposerDraftType.Reply -> RustComposerDraftType.Reply(eventId.value)
+        is ComposerDraftType.Edit -> RustComposerDraftType.Edit(eventId.value)
+    }
+}

libraries/matrix/impl/src/main/kotlin/io/element/android/libraries/matrix/impl/timeline/RustTimeline.kt

@@ -33,6 +33,7 @@ import io.element.android.libraries.matrix.api.timeline.MatrixTimelineItem
 import io.element.android.libraries.matrix.api.timeline.ReceiptType
 import io.element.android.libraries.matrix.api.timeline.Timeline
 import io.element.android.libraries.matrix.api.timeline.TimelineException
+import io.element.android.libraries.matrix.api.timeline.item.event.InReplyTo
 import io.element.android.libraries.matrix.impl.core.toProgressWatcher
 import io.element.android.libraries.matrix.impl.media.MediaUploadHandlerImpl
 import io.element.android.libraries.matrix.impl.media.map
@@ -41,7 +42,6 @@ import io.element.android.libraries.matrix.impl.poll.toInner
 import io.element.android.libraries.matrix.impl.room.RoomContentForwarder
 import io.element.android.libraries.matrix.impl.room.location.toInner
 import io.element.android.libraries.matrix.impl.room.map
-import io.element.android.libraries.matrix.impl.timeline.item.event.EventMessageMapper
 import io.element.android.libraries.matrix.impl.timeline.item.event.EventTimelineItemMapper
 import io.element.android.libraries.matrix.impl.timeline.item.event.TimelineEventContentMapper
 import io.element.android.libraries.matrix.impl.timeline.item.virtual.VirtualTimelineItemMapper
@@ -49,6 +49,7 @@ import io.element.android.libraries.matrix.impl.timeline.postprocessor.LastForwa
 import io.element.android.libraries.matrix.impl.timeline.postprocessor.LoadingIndicatorsPostProcessor
 import io.element.android.libraries.matrix.impl.timeline.postprocessor.RoomBeginningPostProcessor
 import io.element.android.libraries.matrix.impl.timeline.postprocessor.TimelineEncryptedHistoryPostProcessor
+import io.element.android.libraries.matrix.impl.timeline.reply.InReplyToMapper
 import io.element.android.services.toolbox.api.systemclock.SystemClock
 import kotlinx.coroutines.CompletableDeferred
 import kotlinx.coroutines.CoroutineDispatcher
@@ -118,14 +119,14 @@ class RustTimeline(
     private val loadingIndicatorsPostProcessor = LoadingIndicatorsPostProcessor(systemClock)
     private val lastForwardIndicatorsPostProcessor = LastForwardIndicatorsPostProcessor(isLive)
 
+    private val timelineEventContentMapper = TimelineEventContentMapper()
+    private val inReplyToMapper = InReplyToMapper(timelineEventContentMapper)
     private val timelineItemFactory = MatrixTimelineItemMapper(
         fetchDetailsForEvent = this::fetchDetailsForEvent,
         roomCoroutineScope = roomCoroutineScope,
         virtualTimelineItemMapper = VirtualTimelineItemMapper(),
         eventTimelineItemMapper = EventTimelineItemMapper(
-            contentMapper = TimelineEventContentMapper(
+            contentMapper = timelineEventContentMapper
-                eventMessageMapper = EventMessageMapper()
-            )
         )
     )
 
@@ -580,4 +581,21 @@ class RustTimeline(
             inner.fetchDetailsForEvent(eventId.value)
         }
     }
+
+    override suspend fun loadReplyDetails(eventId: EventId): InReplyTo = withContext(dispatcher) {
+        val timelineItem = _timelineItems.value.firstOrNull { timelineItem ->
+            timelineItem is MatrixTimelineItem.Event && timelineItem.eventId == eventId
+        } as? MatrixTimelineItem.Event
+
+        if (timelineItem != null) {
+            InReplyTo.Ready(
+                eventId = eventId,
+                content = timelineItem.event.content,
+                senderId = timelineItem.event.sender,
+                senderProfile = timelineItem.event.senderProfile,
+            )
+        } else {
+            inner.loadReplyDetails(eventId.value).use(inReplyToMapper::map)
+        }
+    }
 }

libraries/matrix/impl/src/main/kotlin/io/element/android/libraries/matrix/impl/timeline/item/event/EventMessageMapper.kt

@@ -16,8 +16,6 @@
 
 package io.element.android.libraries.matrix.impl.timeline.item.event
 
-import io.element.android.libraries.matrix.api.core.EventId
-import io.element.android.libraries.matrix.api.core.UserId
 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
@@ -33,42 +31,20 @@ import io.element.android.libraries.matrix.api.timeline.item.event.TextMessageTy
 import io.element.android.libraries.matrix.api.timeline.item.event.VideoMessageType
 import io.element.android.libraries.matrix.api.timeline.item.event.VoiceMessageType
 import io.element.android.libraries.matrix.impl.media.map
+import io.element.android.libraries.matrix.impl.timeline.reply.InReplyToMapper
 import org.matrix.rustcomponents.sdk.Message
 import org.matrix.rustcomponents.sdk.MessageType
-import org.matrix.rustcomponents.sdk.RepliedToEventDetails
 import org.matrix.rustcomponents.sdk.use
 import org.matrix.rustcomponents.sdk.FormattedBody as RustFormattedBody
 import org.matrix.rustcomponents.sdk.MessageFormat as RustMessageFormat
 import org.matrix.rustcomponents.sdk.MessageType as RustMessageType
 
 class EventMessageMapper {
-    private val timelineEventContentMapper by lazy { TimelineEventContentMapper() }
+    private val inReplyToMapper by lazy { InReplyToMapper(TimelineEventContentMapper()) }
 
     fun map(message: Message): MessageContent = message.use {
         val type = it.msgtype().use(this::mapMessageType)
-        val inReplyToEvent: InReplyTo? = it.inReplyTo()?.use { details ->
+        val inReplyToEvent: InReplyTo? = it.inReplyTo()?.use(inReplyToMapper::map)
-            val inReplyToId = EventId(details.eventId)
-            when (val event = details.event) {
-                is RepliedToEventDetails.Ready -> {
-                    InReplyTo.Ready(
-                        eventId = inReplyToId,
-                        content = timelineEventContentMapper.map(event.content),
-                        senderId = UserId(event.sender),
-                        senderProfile = event.senderProfile.map(),
-                    )
-                }
-                is RepliedToEventDetails.Error -> InReplyTo.Error(
-                    eventId = inReplyToId,
-                    message = event.message,
-                )
-                RepliedToEventDetails.Pending -> InReplyTo.Pending(
-                    eventId = inReplyToId,
-                )
-                is RepliedToEventDetails.Unavailable -> InReplyTo.NotLoaded(
-                    eventId = inReplyToId
-                )
-            }
-        }
         MessageContent(
             body = it.body(),
             inReplyTo = inReplyToEvent,

libraries/matrix/impl/src/main/kotlin/io/element/android/libraries/matrix/impl/timeline/reply/InReplyToMapper.kt

@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2024 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.libraries.matrix.impl.timeline.reply
+
+import io.element.android.libraries.matrix.api.core.EventId
+import io.element.android.libraries.matrix.api.core.UserId
+import io.element.android.libraries.matrix.api.timeline.item.event.InReplyTo
+import io.element.android.libraries.matrix.impl.timeline.item.event.TimelineEventContentMapper
+import io.element.android.libraries.matrix.impl.timeline.item.event.map
+import org.matrix.rustcomponents.sdk.InReplyToDetails
+import org.matrix.rustcomponents.sdk.RepliedToEventDetails
+
+class InReplyToMapper(
+    private val timelineEventContentMapper: TimelineEventContentMapper,
+) {
+    fun map(inReplyToDetails: InReplyToDetails): InReplyTo {
+        val inReplyToId = EventId(inReplyToDetails.eventId)
+        return when (val event = inReplyToDetails.event) {
+            is RepliedToEventDetails.Ready -> {
+                InReplyTo.Ready(
+                    eventId = inReplyToId,
+                    content = timelineEventContentMapper.map(event.content),
+                    senderId = UserId(event.sender),
+                    senderProfile = event.senderProfile.map(),
+                )
+            }
+            is RepliedToEventDetails.Error -> InReplyTo.Error(
+                eventId = inReplyToId,
+                message = event.message,
+            )
+            RepliedToEventDetails.Pending -> InReplyTo.Pending(
+                eventId = inReplyToId,
+            )
+            is RepliedToEventDetails.Unavailable -> InReplyTo.NotLoaded(
+                eventId = inReplyToId
+            )
+        }
+    }
+}

libraries/matrix/test/src/main/kotlin/io/element/android/libraries/matrix/test/room/FakeMatrixRoom.kt

@@ -40,6 +40,7 @@ import io.element.android.libraries.matrix.api.room.MessageEventType
 import io.element.android.libraries.matrix.api.room.RoomMember
 import io.element.android.libraries.matrix.api.room.RoomNotificationMode
 import io.element.android.libraries.matrix.api.room.StateEventType
+import io.element.android.libraries.matrix.api.room.draft.ComposerDraft
 import io.element.android.libraries.matrix.api.room.location.AssetType
 import io.element.android.libraries.matrix.api.room.powerlevels.MatrixRoomPowerLevels
 import io.element.android.libraries.matrix.api.room.powerlevels.UserRoleChange
@@ -528,6 +529,15 @@ class FakeMatrixRoom(
     var setSendQueueEnabledLambda = { _: Boolean -> }
     override suspend fun setSendQueueEnabled(enabled: Boolean) = setSendQueueEnabledLambda(enabled)
 
+    var saveComposerDraftLambda = { _: ComposerDraft -> Result.success(Unit) }
+    override suspend fun saveComposerDraft(composerDraft: ComposerDraft) = saveComposerDraftLambda(composerDraft)
+
+    var loadComposerDraftLambda = { Result.success<ComposerDraft?>(null) }
+    override suspend fun loadComposerDraft() = loadComposerDraftLambda()
+
+    var clearComposerDraftLambda = { Result.success(Unit) }
+    override suspend fun clearComposerDraft() = clearComposerDraftLambda()
+
     override fun getWidgetDriver(widgetSettings: MatrixWidgetSettings): Result<MatrixWidgetDriver> = getWidgetDriverResult
 
     fun givenRoomMembersState(state: MatrixRoomMembersState) {

libraries/matrix/test/src/main/kotlin/io/element/android/libraries/matrix/test/timeline/FakeTimeline.kt

@@ -31,6 +31,7 @@ import io.element.android.libraries.matrix.api.room.location.AssetType
 import io.element.android.libraries.matrix.api.timeline.MatrixTimelineItem
 import io.element.android.libraries.matrix.api.timeline.ReceiptType
 import io.element.android.libraries.matrix.api.timeline.Timeline
+import io.element.android.libraries.matrix.api.timeline.item.event.InReplyTo
 import io.element.android.libraries.matrix.test.media.FakeMediaUploadHandler
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.MutableSharedFlow
@@ -370,6 +371,12 @@ class FakeTimeline(
         }
     }
 
+    var loadReplyDetailsLambda: (eventId: EventId) -> InReplyTo = {
+        InReplyTo.NotLoaded(it)
+    }
+
+    override suspend fun loadReplyDetails(eventId: EventId) = loadReplyDetailsLambda(eventId)
+
     var closeCounter = 0
         private set
 

libraries/matrixui/build.gradle.kts

@@ -23,6 +23,11 @@ plugins {
 
 android {
     namespace = "io.element.android.libraries.matrix.ui"
+    testOptions {
+        unitTests {
+            isIncludeAndroidResources = true
+        }
+    }
 }
 
 anvil {
@@ -48,9 +53,15 @@ dependencies {
 
     testImplementation(libs.coroutines.test)
     testImplementation(libs.test.junit)
-    testImplementation(libs.test.robolectric)
+    testImplementation(libs.coroutines.test)
+    testImplementation(libs.molecule.runtime)
     testImplementation(libs.test.truth)
+    testImplementation(libs.test.turbine)
     testImplementation(projects.libraries.matrix.test)
-    testImplementation(projects.libraries.sessionStorage.test)
+    testImplementation(projects.libraries.dateformatter.test)
     testImplementation(projects.tests.testutils)
+    testImplementation(libs.test.mockk)
+    testImplementation(libs.test.robolectric)
+    testImplementation(libs.androidx.compose.ui.test.junit)
+    testImplementation(projects.libraries.sessionStorage.test)
 }

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/messages/reply/InReplyToDetails.kt

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023 New Vector Ltd
+ * Copyright (c) 2024 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.
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-package io.element.android.features.messages.impl.timeline.model
+package io.element.android.libraries.matrix.ui.messages.reply
 
 import androidx.compose.runtime.Immutable
 import io.element.android.libraries.matrix.api.core.EventId

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/messages/reply/InReplyToDetailsProvider.kt

@@ -0,0 +1,174 @@
+/*
+ * Copyright (c) 2024 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.libraries.matrix.ui.messages.reply
+
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import io.element.android.libraries.matrix.api.core.EventId
+import io.element.android.libraries.matrix.api.core.UserId
+import io.element.android.libraries.matrix.api.media.MediaSource
+import io.element.android.libraries.matrix.api.poll.PollKind
+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.EventContent
+import io.element.android.libraries.matrix.api.timeline.item.event.FileMessageType
+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
+import io.element.android.libraries.matrix.api.timeline.item.event.MessageType
+import io.element.android.libraries.matrix.api.timeline.item.event.NoticeMessageType
+import io.element.android.libraries.matrix.api.timeline.item.event.PollContent
+import io.element.android.libraries.matrix.api.timeline.item.event.ProfileTimelineDetails
+import io.element.android.libraries.matrix.api.timeline.item.event.RedactedContent
+import io.element.android.libraries.matrix.api.timeline.item.event.StickerMessageType
+import io.element.android.libraries.matrix.api.timeline.item.event.TextMessageType
+import io.element.android.libraries.matrix.api.timeline.item.event.UnableToDecryptContent
+import io.element.android.libraries.matrix.api.timeline.item.event.VideoMessageType
+import io.element.android.libraries.matrix.api.timeline.item.event.VoiceMessageType
+import kotlinx.collections.immutable.persistentListOf
+import kotlinx.collections.immutable.persistentMapOf
+
+open class InReplyToDetailsProvider : PreviewParameterProvider<InReplyToDetails> {
+    override val values: Sequence<InReplyToDetails>
+        get() = sequenceOf(
+            aMessageContent(
+                body = "Message which are being replied.",
+                type = TextMessageType("Message which are being replied.", null)
+            ),
+            aMessageContent(
+                body = "Message which are being replied, and which was long enough to be displayed on two lines (only!).",
+                type = TextMessageType("Message which are being replied, and which was long enough to be displayed on two lines (only!).", null)
+            ),
+            aMessageContent(
+                body = "Video",
+                type = VideoMessageType("Video", null, null, MediaSource("url"), null),
+            ),
+            aMessageContent(
+                body = "Audio",
+                type = AudioMessageType("Audio", MediaSource("url"), null),
+            ),
+            aMessageContent(
+                body = "Voice",
+                type = VoiceMessageType("Voice", MediaSource("url"), null, null),
+            ),
+            aMessageContent(
+                body = "Image",
+                type = ImageMessageType("Image", null, null, MediaSource("url"), null),
+            ),
+            aMessageContent(
+                body = "Sticker",
+                type = StickerMessageType("Image", MediaSource("url"), null),
+            ),
+            aMessageContent(
+                body = "File",
+                type = FileMessageType("File", MediaSource("url"), null),
+            ),
+            aMessageContent(
+                body = "Location",
+                type = LocationMessageType("Location", "geo:1,2", null),
+            ),
+            aMessageContent(
+                body = "Notice",
+                type = NoticeMessageType("Notice", null),
+            ),
+            aMessageContent(
+                body = "Emote",
+                type = EmoteMessageType("Emote", null),
+            ),
+            PollContent(
+                question = "Poll which are being replied.",
+                kind = PollKind.Disclosed,
+                maxSelections = 1u,
+                answers = persistentListOf(),
+                votes = persistentMapOf(),
+                endTime = null,
+                isEdited = false,
+            ),
+        ).map {
+            aInReplyToDetails(
+                eventContent = it,
+            )
+        }
+}
+
+class InReplyToDetailsDisambiguatedProvider : InReplyToDetailsProvider() {
+    override val values: Sequence<InReplyToDetails>
+        get() = sequenceOf(
+            aMessageContent(
+                body = "Message which are being replied.",
+                type = TextMessageType("Message which are being replied.", null)
+            ),
+        ).map {
+            aInReplyToDetails(
+                displayNameAmbiguous = true,
+                eventContent = it,
+            )
+        }
+}
+
+class InReplyToDetailsInformativeProvider : InReplyToDetailsProvider() {
+    override val values: Sequence<InReplyToDetails>
+        get() = sequenceOf(
+            RedactedContent,
+            UnableToDecryptContent(UnableToDecryptContent.Data.Unknown),
+        ).map {
+            aInReplyToDetails(
+                eventContent = it,
+            )
+        }
+}
+
+class InReplyToDetailsOtherProvider : InReplyToDetailsProvider() {
+    override val values: Sequence<InReplyToDetails>
+        get() = sequenceOf(
+            InReplyToDetails.Loading(eventId = EventId("\$anEventId")),
+            InReplyToDetails.Error(eventId = EventId("\$anEventId"), message = "An error message."),
+        )
+}
+
+private fun aMessageContent(
+    body: String,
+    type: MessageType,
+) = MessageContent(
+    body = body,
+    inReplyTo = null,
+    isEdited = false,
+    isThreaded = false,
+    type = type,
+)
+
+private fun aInReplyToDetails(
+    eventContent: EventContent,
+    displayNameAmbiguous: Boolean = false,
+) = InReplyToDetails.Ready(
+    eventId = EventId("\$event"),
+    eventContent = eventContent,
+    senderId = UserId("@Sender:domain"),
+    senderProfile = aProfileTimelineDetailsReady(
+        displayNameAmbiguous = displayNameAmbiguous,
+    ),
+    textContent = (eventContent as? MessageContent)?.body.orEmpty(),
+)
+
+fun aProfileTimelineDetailsReady(
+    displayName: String? = "Sender",
+    displayNameAmbiguous: Boolean = false,
+    avatarUrl: String? = null,
+) = ProfileTimelineDetails.Ready(
+    displayName = displayName,
+    displayNameAmbiguous = displayNameAmbiguous,
+    avatarUrl = avatarUrl,
+)

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/messages/reply/InReplyToMetadata.kt

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023 New Vector Ltd
+ * Copyright (c) 2024 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.
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-package io.element.android.features.messages.impl.timeline.model
+package io.element.android.libraries.matrix.ui.messages.reply
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/messages/reply/InReplyToView.kt

@@ -0,0 +1,204 @@
+/*
+ * Copyright (c) 2024 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.libraries.matrix.ui.messages.reply
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.libraries.designsystem.atomic.atoms.PlaceholderAtom
+import io.element.android.libraries.designsystem.icons.CompoundDrawables
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.matrix.api.core.UserId
+import io.element.android.libraries.matrix.api.timeline.item.event.ProfileTimelineDetails
+import io.element.android.libraries.matrix.api.timeline.item.event.getDisambiguatedDisplayName
+import io.element.android.libraries.matrix.ui.components.AttachmentThumbnail
+import io.element.android.libraries.matrix.ui.messages.sender.SenderName
+import io.element.android.libraries.matrix.ui.messages.sender.SenderNameMode
+import io.element.android.libraries.ui.strings.CommonStrings
+
+@Composable
+fun InReplyToView(
+    inReplyTo: InReplyToDetails,
+    modifier: Modifier = Modifier,
+) {
+    when (inReplyTo) {
+        is InReplyToDetails.Ready -> {
+            ReplyToReadyContent(
+                senderId = inReplyTo.senderId,
+                senderProfile = inReplyTo.senderProfile,
+                metadata = inReplyTo.metadata(),
+                modifier = modifier
+            )
+        }
+        is InReplyToDetails.Error ->
+            ReplyToErrorContent(data = inReplyTo, modifier = modifier)
+        is InReplyToDetails.Loading ->
+            ReplyToLoadingContent(modifier = modifier)
+    }
+}
+
+@Composable
+private fun ReplyToReadyContent(
+    senderId: UserId,
+    senderProfile: ProfileTimelineDetails,
+    metadata: InReplyToMetadata?,
+    modifier: Modifier = Modifier,
+) {
+    val paddings = if (metadata is InReplyToMetadata.Thumbnail) {
+        PaddingValues(start = 4.dp, end = 12.dp, top = 4.dp, bottom = 4.dp)
+    } else {
+        PaddingValues(horizontal = 12.dp, vertical = 4.dp)
+    }
+    Row(
+        modifier
+            .background(MaterialTheme.colorScheme.surface)
+            .padding(paddings)
+    ) {
+        if (metadata is InReplyToMetadata.Thumbnail) {
+            AttachmentThumbnail(
+                info = metadata.attachmentThumbnailInfo,
+                backgroundColor = MaterialTheme.colorScheme.surfaceVariant,
+                modifier = Modifier
+                    .size(36.dp)
+                    .clip(RoundedCornerShape(4.dp))
+            )
+            Spacer(modifier = Modifier.width(8.dp))
+        }
+        val a11InReplyToText = stringResource(CommonStrings.common_in_reply_to, senderProfile.getDisambiguatedDisplayName(senderId))
+        Column(verticalArrangement = Arrangement.SpaceBetween) {
+            SenderName(
+                senderId = senderId,
+                senderProfile = senderProfile,
+                senderNameMode = SenderNameMode.Reply,
+                modifier = Modifier.semantics {
+                    contentDescription = a11InReplyToText
+                },
+            )
+            ReplyToContentText(metadata)
+        }
+    }
+}
+
+@Composable
+private fun ReplyToLoadingContent(
+    modifier: Modifier = Modifier,
+) {
+    val paddings = PaddingValues(horizontal = 12.dp, vertical = 4.dp)
+    Row(
+        modifier
+            .background(MaterialTheme.colorScheme.surface)
+            .padding(paddings)
+    ) {
+        Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
+            PlaceholderAtom(width = 80.dp, height = 12.dp)
+            PlaceholderAtom(width = 140.dp, height = 14.dp)
+        }
+    }
+}
+
+@Composable
+private fun ReplyToErrorContent(
+    data: InReplyToDetails.Error,
+    modifier: Modifier = Modifier,
+) {
+    val paddings = PaddingValues(horizontal = 12.dp, vertical = 4.dp)
+    Row(
+        modifier
+            .background(MaterialTheme.colorScheme.surface)
+            .padding(paddings)
+    ) {
+        Text(
+            text = data.message,
+            style = ElementTheme.typography.fontBodyMdRegular,
+            color = MaterialTheme.colorScheme.error,
+            maxLines = 2,
+            overflow = TextOverflow.Ellipsis,
+        )
+    }
+}
+
+@Composable
+private fun ReplyToContentText(metadata: InReplyToMetadata?) {
+    val text = when (metadata) {
+        InReplyToMetadata.Redacted -> stringResource(id = CommonStrings.common_message_removed)
+        InReplyToMetadata.UnableToDecrypt -> stringResource(id = CommonStrings.common_waiting_for_decryption_key)
+        is InReplyToMetadata.Text -> metadata.text
+        is InReplyToMetadata.Thumbnail -> metadata.text
+        null -> ""
+    }
+    val iconResourceId = when (metadata) {
+        InReplyToMetadata.Redacted -> CompoundDrawables.ic_compound_delete
+        InReplyToMetadata.UnableToDecrypt -> CompoundDrawables.ic_compound_time
+        else -> null
+    }
+    val fontStyle = when (metadata) {
+        is InReplyToMetadata.Informative -> FontStyle.Italic
+        else -> FontStyle.Normal
+    }
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        if (iconResourceId != null) {
+            Icon(
+                resourceId = iconResourceId,
+                tint = MaterialTheme.colorScheme.secondary,
+                contentDescription = null,
+                modifier = Modifier.size(16.dp)
+            )
+            Spacer(modifier = Modifier.width(4.dp))
+        }
+        Text(
+            text = text,
+            style = ElementTheme.typography.fontBodyMdRegular,
+            fontStyle = fontStyle,
+            textAlign = TextAlign.Start,
+            color = MaterialTheme.colorScheme.secondary,
+            maxLines = 2,
+            overflow = TextOverflow.Ellipsis,
+        )
+    }
+}
+
+@PreviewsDayNight
+@Composable
+internal fun InReplyToViewPreview(@PreviewParameter(provider = InReplyToDetailsProvider::class) inReplyTo: InReplyToDetails) = ElementPreview {
+    InReplyToView(inReplyTo)
+}

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/messages/sender/SenderName.kt

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-package io.element.android.features.messages.impl.sender
+package io.element.android.libraries.matrix.ui.messages.sender
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/messages/sender/SenderNameDataProvider.kt

@@ -14,11 +14,10 @@
  * limitations under the License.
  */
 
-package io.element.android.features.messages.impl.sender
+package io.element.android.libraries.matrix.ui.messages.sender
 
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
-import io.element.android.features.messages.impl.timeline.components.aProfileTimelineDetailsReady
 import io.element.android.libraries.matrix.api.core.UserId
 import io.element.android.libraries.matrix.api.timeline.item.event.ProfileTimelineDetails
 
@@ -58,9 +57,10 @@ private fun aSenderNameData(
     displayNameAmbiguous: Boolean = false,
 ) = SenderNameData(
     userId = UserId("@alice:${senderNameMode.javaClass.simpleName.lowercase()}"),
-    profileTimelineDetails = aProfileTimelineDetailsReady(
+    profileTimelineDetails = ProfileTimelineDetails.Ready(
         displayName = "Alice ${senderNameMode.javaClass.simpleName}",
         displayNameAmbiguous = displayNameAmbiguous,
+        avatarUrl = null
     ),
     senderNameMode = senderNameMode,
 )

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/messages/sender/SenderNameMode.kt

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-package io.element.android.features.messages.impl.sender
+package io.element.android.libraries.matrix.ui.messages.sender
 
 import androidx.compose.runtime.Immutable
 import androidx.compose.ui.graphics.Color

libraries/matrixui/src/test/kotlin/io/element/android/libraries/matrix/ui/messages/reply/InReplyToDetailTest.kt

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-package io.element.android.features.messages.impl.timeline.model
+package io.element.android.libraries.matrix.ui.messages.reply
 
 import com.google.common.truth.Truth.assertThat
 import io.element.android.libraries.matrix.api.timeline.item.event.FormattedBody

libraries/matrixui/src/test/kotlin/io/element/android/libraries/matrix/ui/messages/reply/InReplyToMetadataKtTest.kt

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-package io.element.android.features.messages.impl.timeline.model
+package io.element.android.libraries.matrix.ui.messages.reply
 
 import android.content.res.Configuration
 import androidx.compose.runtime.Composable

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/ComposerModeView.kt

@@ -20,13 +20,10 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
-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.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.MaterialTheme
@@ -35,17 +32,15 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
-import io.element.android.libraries.matrix.ui.components.AttachmentThumbnail
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
-import io.element.android.libraries.matrix.ui.components.AttachmentThumbnailInfo
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToView
 import io.element.android.libraries.textcomposer.model.MessageComposerMode
 import io.element.android.libraries.ui.strings.CommonStrings
 
@@ -61,9 +56,7 @@ internal fun ComposerModeView(
         is MessageComposerMode.Reply -> {
             ReplyToModeView(
                 modifier = Modifier.padding(8.dp),
-                senderName = composerMode.senderName,
+                replyToDetails = composerMode.replyToDetails,
-                text = composerMode.defaultContent,
-                attachmentThumbnailInfo = composerMode.attachmentThumbnailInfo,
                 onResetComposerMode = onResetComposerMode,
             )
         }
@@ -118,9 +111,7 @@ private fun EditingModeView(
 
 @Composable
 private fun ReplyToModeView(
-    senderName: String,
+    replyToDetails: InReplyToDetails,
-    text: String?,
-    attachmentThumbnailInfo: AttachmentThumbnailInfo?,
     onResetComposerMode: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
@@ -130,42 +121,7 @@ private fun ReplyToModeView(
             .background(MaterialTheme.colorScheme.surface)
             .padding(4.dp)
     ) {
-        if (attachmentThumbnailInfo != null) {
+        InReplyToView(inReplyTo = replyToDetails, modifier = Modifier.weight(1f))
-            AttachmentThumbnail(
-                info = attachmentThumbnailInfo,
-                backgroundColor = MaterialTheme.colorScheme.surfaceVariant,
-                modifier = Modifier
-                    .size(36.dp)
-                    .clip(RoundedCornerShape(9.dp))
-            )
-        }
-        Spacer(modifier = Modifier.width(8.dp))
-        Column(
-            modifier = Modifier
-                .weight(1f)
-                .align(Alignment.CenterVertically)
-        ) {
-            Text(
-                text = senderName,
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .clipToBounds(),
-                maxLines = 1,
-                overflow = TextOverflow.Ellipsis,
-                style = ElementTheme.typography.fontBodySmMedium,
-                textAlign = TextAlign.Start,
-                color = ElementTheme.materialColors.primary,
-            )
-            Text(
-                modifier = Modifier.fillMaxWidth(),
-                text = text.orEmpty(),
-                style = ElementTheme.typography.fontBodyMdRegular,
-                textAlign = TextAlign.Start,
-                color = ElementTheme.materialColors.secondary,
-                maxLines = if (attachmentThumbnailInfo != null) 1 else 2,
-                overflow = TextOverflow.Ellipsis,
-            )
-        }
         Icon(
             imageVector = CompoundIcons.Close(),
             contentDescription = stringResource(CommonStrings.action_close),

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt

@@ -42,6 +42,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 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 io.element.android.compound.theme.ElementTheme
 import io.element.android.libraries.designsystem.components.media.createFakeWaveform
@@ -51,13 +52,11 @@ import io.element.android.libraries.designsystem.theme.components.CircularProgre
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.matrix.api.core.EventId
 import io.element.android.libraries.matrix.api.core.TransactionId
-import io.element.android.libraries.matrix.api.media.MediaSource
 import io.element.android.libraries.matrix.api.permalink.PermalinkData
 import io.element.android.libraries.matrix.api.permalink.PermalinkParser
-import io.element.android.libraries.matrix.ui.components.A_BLUR_HASH
-import io.element.android.libraries.matrix.ui.components.AttachmentThumbnailInfo
-import io.element.android.libraries.matrix.ui.components.AttachmentThumbnailType
 import io.element.android.libraries.matrix.ui.messages.LocalRoomMemberProfilesCache
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetailsProvider
 import io.element.android.libraries.testtags.TestTags
 import io.element.android.libraries.testtags.testTag
 import io.element.android.libraries.textcomposer.components.ComposerOptionsButton
@@ -132,8 +131,8 @@ fun TextComposer(
     }
 
     val layoutModifier = modifier
-        .fillMaxSize()
+            .fillMaxSize()
-        .height(IntrinsicSize.Min)
+            .height(IntrinsicSize.Min)
 
     val composerOptionsButton: @Composable () -> Unit = remember {
         @Composable {
@@ -341,8 +340,8 @@ private fun StandardLayout(
             if (voiceMessageState is VoiceMessageState.Preview || voiceMessageState is VoiceMessageState.Recording) {
                 Box(
                     modifier = Modifier
-                        .padding(bottom = 5.dp, top = 5.dp, end = 3.dp, start = 3.dp)
+                            .padding(bottom = 5.dp, top = 5.dp, end = 3.dp, start = 3.dp)
-                        .size(48.dp),
+                            .size(48.dp),
                     contentAlignment = Alignment.Center,
                 ) {
                     voiceDeleteButton()
@@ -352,8 +351,8 @@ private fun StandardLayout(
             }
             Box(
                 modifier = Modifier
-                    .padding(bottom = 8.dp, top = 8.dp)
+                        .padding(bottom = 8.dp, top = 8.dp)
-                    .weight(1f)
+                        .weight(1f)
             ) {
                 voiceRecording()
             }
@@ -366,16 +365,16 @@ private fun StandardLayout(
             }
             Box(
                 modifier = Modifier
-                    .padding(bottom = 8.dp, top = 8.dp)
+                        .padding(bottom = 8.dp, top = 8.dp)
-                    .weight(1f)
+                        .weight(1f)
             ) {
                 textInput()
             }
         }
         Box(
-            Modifier
+                Modifier
-                .padding(bottom = 5.dp, top = 5.dp, end = 6.dp, start = 6.dp)
+                        .padding(bottom = 5.dp, top = 5.dp, end = 6.dp, start = 6.dp)
-                .size(48.dp),
+                        .size(48.dp),
             contentAlignment = Alignment.Center,
         ) {
             endButton()
@@ -397,8 +396,8 @@ private fun TextFormattingLayout(
     ) {
         Box(
             modifier = Modifier
-                .weight(1f)
+                    .weight(1f)
-                .padding(horizontal = 12.dp)
+                    .padding(horizontal = 12.dp)
         ) {
             textInput()
         }
@@ -442,11 +441,11 @@ private fun TextInputBox(
 
     Column(
         modifier = Modifier
-            .clip(roundedCorners)
+                .clip(roundedCorners)
-            .border(0.5.dp, borderColor, roundedCorners)
+                .border(0.5.dp, borderColor, roundedCorners)
-            .background(color = bgColor)
+                .background(color = bgColor)
-            .requiredHeightIn(min = 42.dp)
+                .requiredHeightIn(min = 42.dp)
-            .fillMaxSize(),
+                .fillMaxSize(),
     ) {
         if (composerMode is MessageComposerMode.Special) {
             ComposerModeView(composerMode = composerMode, onResetComposerMode = onResetComposerMode)
@@ -454,9 +453,9 @@ private fun TextInputBox(
         val defaultTypography = ElementTheme.typography.fontBodyLgRegular
         Box(
             modifier = Modifier
-                .padding(top = 4.dp, bottom = 4.dp, start = 12.dp, end = 42.dp)
+                    .padding(top = 4.dp, bottom = 4.dp, start = 12.dp, end = 42.dp)
-                // Apply test tag only once, otherwise 2 nodes will have it (both the normal and subcomposing one) and tests will fail
+                    // Apply test tag only once, otherwise 2 nodes will have it (both the normal and subcomposing one) and tests will fail
-                .then(if (!subcomposing) Modifier.testTag(TestTags.textEditor) else Modifier),
+                    .then(if (!subcomposing) Modifier.testTag(TestTags.textEditor) else Modifier),
             contentAlignment = Alignment.CenterStart,
         ) {
             // Placeholder
@@ -502,8 +501,8 @@ private fun TextInput(
             // This prevents it gaining focus and mutating the state.
             registerStateUpdates = !subcomposing,
             modifier = Modifier
-                .padding(top = 6.dp, bottom = 6.dp)
+                    .padding(top = 6.dp, bottom = 6.dp)
-                .fillMaxWidth(),
+                    .fillMaxWidth(),
             style = ElementRichTextEditorStyle.composerStyle(hasFocus = state.hasFocus),
             resolveMentionDisplay = resolveMentionDisplay,
             resolveRoomMentionDisplay = resolveRoomMentionDisplay,
@@ -601,7 +600,7 @@ internal fun TextComposerEditPreview() = ElementPreview {
         ATextComposer(
             TextEditorState.Rich(aRichTextEditorState(initialText = "A message", initialFocus = true)),
             voiceMessageState = VoiceMessageState.Idle,
-            composerMode = MessageComposerMode.Edit(EventId("$1234"), "Some text", TransactionId("1234")),
+            composerMode = MessageComposerMode.Edit(EventId("$1234"), TransactionId("1234"), "Some text"),
             enableVoiceMessages = true,
         )
     }))
@@ -614,7 +613,7 @@ internal fun MarkdownTextComposerEditPreview() = ElementPreview {
         ATextComposer(
             TextEditorState.Markdown(aMarkdownTextEditorState(initialText = "A message", initialFocus = true)),
             voiceMessageState = VoiceMessageState.Idle,
-            composerMode = MessageComposerMode.Edit(EventId("$1234"), "Some text", TransactionId("1234")),
+            composerMode = MessageComposerMode.Edit(EventId("$1234"), TransactionId("1234"), "Some text"),
             enableVoiceMessages = true,
         )
     }))
@@ -622,118 +621,14 @@ internal fun MarkdownTextComposerEditPreview() = ElementPreview {
 
 @PreviewsDayNight
 @Composable
-internal fun TextComposerReplyPreview() = ElementPreview {
+internal fun TextComposerReplyPreview(@PreviewParameter(InReplyToDetailsProvider::class) inReplyToDetails: InReplyToDetails) = ElementPreview {
-    PreviewColumn(
+    ATextComposer(
-        items = persistentListOf(
+        state = TextEditorState.Rich(aRichTextEditorState()),
-            {
+        voiceMessageState = VoiceMessageState.Idle,
-                ATextComposer(
+        composerMode = MessageComposerMode.Reply(
-                    TextEditorState.Rich(aRichTextEditorState()),
+            replyToDetails = inReplyToDetails,
-                    voiceMessageState = VoiceMessageState.Idle,
+        ),
-                    composerMode = MessageComposerMode.Reply(
+        enableVoiceMessages = true,
-                        isThreaded = false,
-                        senderName = "Alice",
-                        eventId = EventId("$1234"),
-                        attachmentThumbnailInfo = null,
-                        defaultContent = "A message\n" +
-                            "With several lines\n" +
-                            "To preview larger textfields and long lines with overflow"
-                    ),
-                    enableVoiceMessages = true,
-                )
-            },
-            {
-                ATextComposer(
-                    TextEditorState.Rich(aRichTextEditorState()),
-                    voiceMessageState = VoiceMessageState.Idle,
-                    composerMode = MessageComposerMode.Reply(
-                        isThreaded = true,
-                        senderName = "Alice with a very long name to test overflow in the composer",
-                        eventId = EventId("$1234"),
-                        attachmentThumbnailInfo = null,
-                        defaultContent = "A message\n" +
-                            "With several lines\n" +
-                            "To preview larger textfields and long lines with overflow"
-                    ),
-                    enableVoiceMessages = true,
-                )
-            },
-            {
-                ATextComposer(
-                    TextEditorState.Rich(aRichTextEditorState(initialText = "A message")),
-                    voiceMessageState = VoiceMessageState.Idle,
-                    composerMode = MessageComposerMode.Reply(
-                        isThreaded = true,
-                        senderName = "Alice",
-                        eventId = EventId("$1234"),
-                        attachmentThumbnailInfo = AttachmentThumbnailInfo(
-                            thumbnailSource = MediaSource("https://domain.com/image.jpg"),
-                            textContent = "image.jpg",
-                            type = AttachmentThumbnailType.Image,
-                            blurHash = A_BLUR_HASH,
-                        ),
-                        defaultContent = "image.jpg"
-                    ),
-                    enableVoiceMessages = true,
-                )
-            },
-            {
-                ATextComposer(
-                    TextEditorState.Rich(aRichTextEditorState(initialText = "A message")),
-                    voiceMessageState = VoiceMessageState.Idle,
-                    composerMode = MessageComposerMode.Reply(
-                        isThreaded = false,
-                        senderName = "Alice",
-                        eventId = EventId("$1234"),
-                        attachmentThumbnailInfo = AttachmentThumbnailInfo(
-                            thumbnailSource = MediaSource("https://domain.com/video.mp4"),
-                            textContent = "video.mp4",
-                            type = AttachmentThumbnailType.Video,
-                            blurHash = A_BLUR_HASH,
-                        ),
-                        defaultContent = "video.mp4"
-                    ),
-                    enableVoiceMessages = true,
-                )
-            },
-            {
-                ATextComposer(
-                    TextEditorState.Rich(aRichTextEditorState(initialText = "A message")),
-                    voiceMessageState = VoiceMessageState.Idle,
-                    composerMode = MessageComposerMode.Reply(
-                        isThreaded = false,
-                        senderName = "Alice",
-                        eventId = EventId("$1234"),
-                        attachmentThumbnailInfo = AttachmentThumbnailInfo(
-                            thumbnailSource = null,
-                            textContent = "logs.txt",
-                            type = AttachmentThumbnailType.File,
-                            blurHash = null,
-                        ),
-                        defaultContent = "logs.txt"
-                    ),
-                    enableVoiceMessages = true,
-                )
-            },
-            {
-                ATextComposer(
-                    TextEditorState.Rich(aRichTextEditorState(initialText = "A message", initialFocus = true)),
-                    voiceMessageState = VoiceMessageState.Idle,
-                    composerMode = MessageComposerMode.Reply(
-                        isThreaded = false,
-                        senderName = "Alice",
-                        eventId = EventId("$1234"),
-                        attachmentThumbnailInfo = AttachmentThumbnailInfo(
-                            thumbnailSource = null,
-                            textContent = null,
-                            type = AttachmentThumbnailType.Location,
-                            blurHash = null,
-                        ),
-                        defaultContent = "Shared location"
-                    ),
-                    enableVoiceMessages = true,
-                )
-            }
-        )
     )
 }
 

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/SendButton.kt

@@ -86,7 +86,7 @@ internal fun SendButton(
 @Composable
 internal fun SendButtonPreview() = ElementPreview {
     val normalMode = MessageComposerMode.Normal
-    val editMode = MessageComposerMode.Edit(null, "", null)
+    val editMode = MessageComposerMode.Edit(null, null, "")
     Row {
         SendButton(canSendMessage = true, onClick = {}, composerMode = normalMode)
         SendButton(canSendMessage = false, onClick = {}, composerMode = normalMode)

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/model/MessageComposerMode.kt

@@ -16,43 +16,35 @@
 
 package io.element.android.libraries.textcomposer.model
 
-import android.os.Parcelable
 import androidx.compose.runtime.Immutable
 import io.element.android.libraries.matrix.api.core.EventId
 import io.element.android.libraries.matrix.api.core.TransactionId
-import io.element.android.libraries.matrix.ui.components.AttachmentThumbnailInfo
+import io.element.android.libraries.matrix.api.timeline.item.event.MessageContent
-import kotlinx.parcelize.Parcelize
+import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
+import io.element.android.libraries.matrix.ui.messages.reply.eventId
 
 @Immutable
-sealed interface MessageComposerMode : Parcelable {
+sealed interface MessageComposerMode {
-    @Parcelize
     data object Normal : MessageComposerMode
 
-    sealed class Special(open val eventId: EventId?, open val defaultContent: String) :
+    sealed interface Special : MessageComposerMode
-        MessageComposerMode
 
-    @Parcelize
+    data class Edit(
-    data class Edit(override val eventId: EventId?, override val defaultContent: String, val transactionId: TransactionId?) :
+        val eventId: EventId?,
-        Special(eventId, defaultContent)
+        val transactionId: TransactionId?,
+        val content: String
+    ) : Special
 
-    @Parcelize
+    data class Reply(
-    class Quote(override val eventId: EventId, override val defaultContent: String) :
+        val replyToDetails: InReplyToDetails
-        Special(eventId, defaultContent)
+    ) : Special {
-
+        val eventId: EventId = replyToDetails.eventId()
-    @Parcelize
+    }
-    class Reply(
-        val senderName: String,
-        val attachmentThumbnailInfo: AttachmentThumbnailInfo?,
-        val isThreaded: Boolean,
-        override val eventId: EventId,
-        override val defaultContent: String
-    ) : Special(eventId, defaultContent)
 
     val relatedEventId: EventId?
         get() = when (this) {
             is Normal -> null
             is Edit -> eventId
-            is Quote -> eventId
             is Reply -> eventId
         }
 
@@ -63,5 +55,8 @@ sealed interface MessageComposerMode : Parcelable {
         get() = this is Reply
 
     val inThread: Boolean
-        get() = this is Reply && isThreaded
+        get() = this is Reply &&
+            replyToDetails is InReplyToDetails.Ready &&
+            replyToDetails.eventContent is MessageContent &&
+            (replyToDetails.eventContent as MessageContent).isThreaded
 }

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/model/TextEditorState.kt

@@ -45,6 +45,20 @@ sealed interface TextEditorState {
         is Rich -> richTextEditorState.hasFocus
     }
 
+    suspend fun setHtml(html: String) {
+        when (this) {
+            is Markdown -> Unit
+            is Rich -> richTextEditorState.setHtml(html)
+        }
+    }
+
+    suspend fun setMarkdown(text: String) {
+        when (this) {
+            is Markdown -> state.text.update(text, true)
+            is Rich -> richTextEditorState.setMarkdown(text)
+        }
+    }
+
     suspend fun reset() {
         when (this) {
             is Markdown -> {