Merge pull request #3597 from element-hq/feature/fga/timeline_better_jump_to_behaviours

Timeline better jump to behaviours
2024-10-03 17:16:16 +02:00 · 2024-10-03 17:16:16 +02:00 · c1337dea75
commit c1337dea75
parent 4d6b37f157 adc03c9676
26 changed files with 232 additions and 156 deletions
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesPresenter.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesPresenter.kt
@ -46,7 +46,6 @@ import io.element.android.features.messages.impl.timeline.model.TimelineItem
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemPollContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemStateContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextBasedContent
-import io.element.android.features.messages.impl.typing.TypingNotificationPresenter
 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
@ -91,7 +90,6 @@ class MessagesPresenter @AssistedInject constructor(
    private val composerPresenter: MessageComposerPresenter,
    private val voiceMessageComposerPresenter: VoiceMessageComposerPresenter,
    timelinePresenterFactory: TimelinePresenter.Factory,
-    private val typingNotificationPresenter: TypingNotificationPresenter,
    private val actionListPresenterFactory: ActionListPresenter.Factory,
    private val customReactionPresenter: CustomReactionPresenter,
    private val reactionSummaryPresenter: ReactionSummaryPresenter,
@ -125,7 +123,6 @@ class MessagesPresenter @AssistedInject constructor(
        val composerState = composerPresenter.present()
        val voiceMessageComposerState = voiceMessageComposerPresenter.present()
        val timelineState = timelinePresenter.present()
-        val typingNotificationState = typingNotificationPresenter.present()
        val actionListState = actionListPresenter.present()
        val customReactionState = customReactionPresenter.present()
        val reactionSummaryState = reactionSummaryPresenter.present()
@ -216,7 +213,6 @@ class MessagesPresenter @AssistedInject constructor(
            userEventPermissions = userEventPermissions,
            voiceMessageComposerState = voiceMessageComposerState,
            timelineState = timelineState,
-            typingNotificationState = typingNotificationState,
            actionListState = actionListState,
            customReactionState = customReactionState,
            reactionSummaryState = reactionSummaryState,
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesState.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesState.kt
@ -15,7 +15,6 @@ import io.element.android.features.messages.impl.timeline.TimelineState
 import io.element.android.features.messages.impl.timeline.components.customreaction.CustomReactionState
 import io.element.android.features.messages.impl.timeline.components.reactionsummary.ReactionSummaryState
 import io.element.android.features.messages.impl.timeline.components.receipt.bottomsheet.ReadReceiptBottomSheetState
-import io.element.android.features.messages.impl.typing.TypingNotificationState
 import io.element.android.features.messages.impl.voicemessages.composer.VoiceMessageComposerState
 import io.element.android.libraries.architecture.AsyncData
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
@ -33,7 +32,6 @@ data class MessagesState(
    val composerState: MessageComposerState,
    val voiceMessageComposerState: VoiceMessageComposerState,
    val timelineState: TimelineState,
-    val typingNotificationState: TypingNotificationState,
    val actionListState: ActionListState,
    val customReactionState: CustomReactionState,
    val reactionSummaryState: ReactionSummaryState,
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesStateProvider.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesStateProvider.kt
@ -26,7 +26,6 @@ import io.element.android.features.messages.impl.timeline.components.receipt.bot
 import io.element.android.features.messages.impl.timeline.components.receipt.bottomsheet.ReadReceiptBottomSheetState
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemTextContent
-import io.element.android.features.messages.impl.typing.aTypingNotificationState
 import io.element.android.features.messages.impl.voicemessages.composer.VoiceMessageComposerState
 import io.element.android.features.messages.impl.voicemessages.composer.aVoiceMessageComposerState
 import io.element.android.features.messages.impl.voicemessages.composer.aVoiceMessagePreviewState
@ -122,7 +121,6 @@ fun aMessagesState(
    userEventPermissions = userEventPermissions,
    composerState = composerState,
    voiceMessageComposerState = voiceMessageComposerState,
-    typingNotificationState = aTypingNotificationState(),
    timelineState = timelineState,
    readReceiptBottomSheetState = readReceiptBottomSheetState,
    actionListState = actionListState,
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt
@ -379,7 +379,6 @@ private fun MessagesViewContent(
                    val scrollBehavior = PinnedMessagesBannerViewDefaults.rememberExitOnScrollBehavior()
                    TimelineView(
                        state = state.timelineState,
-                        typingNotificationState = state.typingNotificationState,
                        onUserDataClick = onUserDataClick,
                        onLinkClick = onLinkClick,
                        onMessageClick = onMessageClick,
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/di/MessagesModule.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/di/MessagesModule.kt
@ -14,6 +14,8 @@ import io.element.android.features.messages.impl.crypto.sendfailure.resolve.Reso
 import io.element.android.features.messages.impl.crypto.sendfailure.resolve.ResolveVerifiedUserSendFailureState
 import io.element.android.features.messages.impl.pinned.banner.PinnedMessagesBannerPresenter
 import io.element.android.features.messages.impl.pinned.banner.PinnedMessagesBannerState
+import io.element.android.features.messages.impl.typing.TypingNotificationPresenter
+import io.element.android.features.messages.impl.typing.TypingNotificationState
 import io.element.android.libraries.architecture.Presenter
 import io.element.android.libraries.di.RoomScope

@ -25,4 +27,7 @@ interface MessagesModule {

    @Binds
    fun bindResolveVerifiedUserSendFailurePresenter(presenter: ResolveVerifiedUserSendFailurePresenter): Presenter<ResolveVerifiedUserSendFailureState>
+
+    @Binds
+    fun bindTypingNotificationPresenter(presenter: TypingNotificationPresenter): Presenter<TypingNotificationState>
 }
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/list/PinnedMessagesListPresenter.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/list/PinnedMessagesListPresenter.kt
@ -30,6 +30,7 @@ import io.element.android.features.messages.impl.timeline.TimelineRoomInfo
 import io.element.android.features.messages.impl.timeline.factories.TimelineItemsFactory
 import io.element.android.features.messages.impl.timeline.factories.TimelineItemsFactoryConfig
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
+import io.element.android.features.messages.impl.typing.TypingNotificationState
 import io.element.android.libraries.architecture.AsyncData
 import io.element.android.libraries.architecture.Presenter
 import io.element.android.libraries.designsystem.utils.snackbar.SnackbarDispatcher
@ -44,6 +45,7 @@ import io.element.android.libraries.ui.strings.CommonStrings
 import io.element.android.services.analytics.api.AnalyticsService
 import io.element.android.services.analyticsproviders.api.trackers.captureInteraction
 import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.persistentListOf
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.flow.combine
 import kotlinx.coroutines.flow.flowOf
@ -87,7 +89,12 @@ class PinnedMessagesListPresenter @AssistedInject constructor(
                userHasPermissionToSendReaction = false,
                isCallOngoing = false,
                // don't compute this value or the pin icon will be shown
-                pinnedEventIds = emptyList()
+                pinnedEventIds = emptyList(),
+                typingNotificationState = TypingNotificationState(
+                    renderTypingNotifications = false,
+                    typingMembers = persistentListOf(),
+                    reserveSpace = false,
+                )
            )
        }

--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineItemIndexer.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineItemIndexer.kt
@ -8,29 +8,39 @@
 package io.element.android.features.messages.impl.timeline

 import io.element.android.features.messages.impl.timeline.model.TimelineItem
-import io.element.android.libraries.di.RoomScope
-import io.element.android.libraries.di.SingleIn
 import io.element.android.libraries.matrix.api.core.EventId
+import kotlinx.coroutines.CompletableDeferred
+import kotlinx.coroutines.sync.Mutex
+import kotlinx.coroutines.sync.withLock
 import timber.log.Timber
 import javax.inject.Inject

-@SingleIn(RoomScope::class)
 class TimelineItemIndexer @Inject constructor() {
+    // This is a latch to wait for the first process call
+    private val firstProcessLatch = CompletableDeferred<Unit>()
    private val timelineEventsIndexes = mutableMapOf<EventId, Int>()

-    fun isKnown(eventId: EventId): Boolean {
-        return timelineEventsIndexes.containsKey(eventId).also {
-            Timber.d("$eventId isKnown = $it")
+    private val mutex = Mutex()
+
+    suspend fun isKnown(eventId: EventId): Boolean {
+        firstProcessLatch.await()
+        return mutex.withLock {
+            timelineEventsIndexes.containsKey(eventId).also {
+                Timber.d("$eventId isKnown = $it")
+            }
        }
    }

-    fun indexOf(eventId: EventId): Int {
-        return (timelineEventsIndexes[eventId] ?: -1).also {
-            Timber.d("indexOf $eventId= $it")
+    suspend fun indexOf(eventId: EventId): Int {
+        firstProcessLatch.await()
+        return mutex.withLock {
+            (timelineEventsIndexes[eventId] ?: -1).also {
+                Timber.d("indexOf $eventId= $it")
+            }
        }
    }

-    fun process(timelineItems: List<TimelineItem>) {
+    suspend fun process(timelineItems: List<TimelineItem>) = mutex.withLock {
        Timber.d("process ${timelineItems.size} items")
        timelineEventsIndexes.clear()
        timelineItems.forEachIndexed { index, timelineItem ->
@ -46,6 +56,7 @@ class TimelineItemIndexer @Inject constructor() {
                else -> Unit
            }
        }
+        firstProcessLatch.complete(Unit)
    }

    private fun processEvent(event: TimelineItem.Event, index: Int) {
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelinePresenter.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelinePresenter.kt
@ -28,6 +28,7 @@ import io.element.android.features.messages.impl.timeline.factories.TimelineItem
 import io.element.android.features.messages.impl.timeline.factories.TimelineItemsFactoryConfig
 import io.element.android.features.messages.impl.timeline.model.NewEventState
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
+import io.element.android.features.messages.impl.typing.TypingNotificationState
 import io.element.android.features.messages.impl.voicemessages.timeline.RedactedVoiceMessageManager
 import io.element.android.features.poll.api.actions.EndPollAction
 import io.element.android.features.poll.api.actions.SendPollResponseAction
@ -54,12 +55,12 @@ import kotlinx.coroutines.flow.launchIn
 import kotlinx.coroutines.flow.onEach
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
+import timber.log.Timber

 const val FOCUS_ON_PINNED_EVENT_DEBOUNCE_DURATION_IN_MILLIS = 200L

 class TimelinePresenter @AssistedInject constructor(
    timelineItemsFactoryCreator: TimelineItemsFactory.Creator,
-    private val timelineItemIndexer: TimelineItemIndexer,
    private val room: MatrixRoom,
    private val dispatchers: CoroutineDispatchers,
    private val appScope: CoroutineScope,
@ -69,7 +70,9 @@ class TimelinePresenter @AssistedInject constructor(
    private val endPollAction: EndPollAction,
    private val sessionPreferencesStore: SessionPreferencesStore,
    private val timelineController: TimelineController,
+    private val timelineItemIndexer: TimelineItemIndexer = TimelineItemIndexer(),
    private val resolveVerifiedUserSendFailurePresenter: Presenter<ResolveVerifiedUserSendFailureState>,
+    private val typingNotificationPresenter: Presenter<TypingNotificationState>,
 ) : Presenter<TimelineState> {
    @AssistedFactory
    interface Factory {
@ -87,13 +90,7 @@ class TimelinePresenter @AssistedInject constructor(
    @Composable
    override fun present(): TimelineState {
        val localScope = rememberCoroutineScope()
-        val focusRequestState: MutableState<FocusRequestState> = remember {
-            mutableStateOf(FocusRequestState.None)
-        }
-
-        LaunchedEffect(Unit) {
-            timelineItemsFactory.timelineItems.collect { timelineItems = it }
-        }
+        var focusRequestState: FocusRequestState by remember { mutableStateOf(FocusRequestState.None) }

        val lastReadReceiptId = rememberSaveable { mutableStateOf<EventId?>(null) }

@ -152,13 +149,13 @@ class TimelinePresenter @AssistedInject constructor(
                    navigator.onEditPollClick(event.pollStartId)
                }
                is TimelineEvents.FocusOnEvent -> {
-                    focusRequestState.value = FocusRequestState.Requested(event.eventId, event.debounce)
+                    focusRequestState = FocusRequestState.Requested(event.eventId, event.debounce)
                }
                is TimelineEvents.OnFocusEventRender -> {
-                    focusRequestState.value = focusRequestState.value.onFocusEventRender()
+                    focusRequestState = focusRequestState.onFocusEventRender()
                }
                is TimelineEvents.ClearFocusRequestState -> {
-                    focusRequestState.value = FocusRequestState.None
+                    focusRequestState = FocusRequestState.None
                }
                is TimelineEvents.JumpToLive -> {
                    timelineController.focusOnLive()
@ -171,49 +168,14 @@ class TimelinePresenter @AssistedInject constructor(
            }
        }

-        LaunchedEffect(focusRequestState.value) {
-            when (val currentFocusRequestState = focusRequestState.value) {
-                is FocusRequestState.Requested -> {
-                    delay(currentFocusRequestState.debounce)
-                    if (timelineItemIndexer.isKnown(currentFocusRequestState.eventId)) {
-                        val index = timelineItemIndexer.indexOf(currentFocusRequestState.eventId)
-                        focusRequestState.value = FocusRequestState.Success(eventId = currentFocusRequestState.eventId, index = index)
-                    } else {
-                        focusRequestState.value = FocusRequestState.Loading(eventId = currentFocusRequestState.eventId)
-                    }
-                }
-                is FocusRequestState.Loading -> {
-                    val eventId = currentFocusRequestState.eventId
-                    timelineController.focusOnEvent(eventId)
-                        .fold(
-                            onSuccess = {
-                                focusRequestState.value = FocusRequestState.Success(eventId = eventId)
-                            },
-                            onFailure = {
-                                focusRequestState.value = FocusRequestState.Failure(throwable = it)
-                            }
-                        )
-                }
-                else -> Unit
-            }
-        }
-
-        LaunchedEffect(timelineItems.size) {
-            computeNewItemState(timelineItems, prevMostRecentItemId, newEventState)
-        }
-
-        LaunchedEffect(timelineItems.size, focusRequestState.value) {
-            val currentFocusRequestState = focusRequestState.value
-            if (currentFocusRequestState is FocusRequestState.Success && !currentFocusRequestState.isIndexed) {
-                val eventId = currentFocusRequestState.eventId
-                if (timelineItemIndexer.isKnown(eventId)) {
-                    val index = timelineItemIndexer.indexOf(eventId)
-                    focusRequestState.value = FocusRequestState.Success(eventId = eventId, index = index)
-                }
-            }
-        }
-
        LaunchedEffect(Unit) {
+            timelineItemsFactory.timelineItems
+                .onEach { newTimelineItems ->
+                    timelineItemIndexer.process(newTimelineItems)
+                    timelineItems = newTimelineItems
+                }
+                .launchIn(this)
+
            combine(timelineController.timelineItems(), room.membersStateFlow) { items, membersState ->
                timelineItemsFactory.replaceWith(
                    timelineItems = items,
@ -225,7 +187,49 @@ class TimelinePresenter @AssistedInject constructor(
                .launchIn(this)
        }

-        val timelineRoomInfo by remember {
+        LaunchedEffect(focusRequestState) {
+            Timber.d("## focusRequestState: $focusRequestState")
+            when (val currentFocusRequestState = focusRequestState) {
+                is FocusRequestState.Requested -> {
+                    delay(currentFocusRequestState.debounce)
+                    if (timelineItemIndexer.isKnown(currentFocusRequestState.eventId)) {
+                        val index = timelineItemIndexer.indexOf(currentFocusRequestState.eventId)
+                        focusRequestState = FocusRequestState.Success(eventId = currentFocusRequestState.eventId, index = index)
+                    } else {
+                        focusRequestState = FocusRequestState.Loading(eventId = currentFocusRequestState.eventId)
+                    }
+                }
+                is FocusRequestState.Loading -> {
+                    val eventId = currentFocusRequestState.eventId
+                    timelineController.focusOnEvent(eventId)
+                        .onSuccess {
+                            focusRequestState = FocusRequestState.Success(eventId = eventId)
+                        }
+                        .onFailure {
+                            focusRequestState = FocusRequestState.Failure(it)
+                        }
+                }
+                else -> Unit
+            }
+        }
+
+        LaunchedEffect(timelineItems.size) {
+            computeNewItemState(timelineItems, prevMostRecentItemId, newEventState)
+        }
+
+        LaunchedEffect(timelineItems.size, focusRequestState) {
+            val currentFocusRequestState = focusRequestState
+            if (currentFocusRequestState is FocusRequestState.Success && !currentFocusRequestState.rendered) {
+                val eventId = currentFocusRequestState.eventId
+                if (timelineItemIndexer.isKnown(eventId)) {
+                    val index = timelineItemIndexer.indexOf(eventId)
+                    focusRequestState = FocusRequestState.Success(eventId = eventId, index = index)
+                }
+            }
+        }
+
+        val typingNotificationState = typingNotificationPresenter.present()
+        val timelineRoomInfo by remember(typingNotificationState) {
            derivedStateOf {
                TimelineRoomInfo(
                    name = room.displayName,
@ -234,6 +238,7 @@ class TimelinePresenter @AssistedInject constructor(
                    userHasPermissionToSendReaction = userHasPermissionToSendReaction,
                    isCallOngoing = roomInfo?.hasRoomCall.orFalse(),
                    pinnedEventIds = roomInfo?.pinnedEventIds.orEmpty(),
+                    typingNotificationState = typingNotificationState,
                )
            }
        }
@ -243,7 +248,7 @@ class TimelinePresenter @AssistedInject constructor(
            renderReadReceipts = renderReadReceipts,
            newEventState = newEventState.value,
            isLive = isLive,
-            focusRequestState = focusRequestState.value,
+            focusRequestState = focusRequestState,
            messageShield = messageShield.value,
            resolveVerifiedUserSendFailureState = resolveVerifiedUserSendFailureState,
            eventSink = { handleEvents(it) }
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineState.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineState.kt
@ -11,7 +11,9 @@ import androidx.compose.runtime.Immutable
 import io.element.android.features.messages.impl.crypto.sendfailure.resolve.ResolveVerifiedUserSendFailureState
 import io.element.android.features.messages.impl.timeline.model.NewEventState
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
+import io.element.android.features.messages.impl.typing.TypingNotificationState
 import io.element.android.libraries.matrix.api.core.EventId
+import io.element.android.libraries.matrix.api.core.UniqueId
 import io.element.android.libraries.matrix.api.timeline.item.event.MessageShield
 import kotlinx.collections.immutable.ImmutableList
 import kotlin.time.Duration
@ -29,8 +31,13 @@ data class TimelineState(
    val resolveVerifiedUserSendFailureState: ResolveVerifiedUserSendFailureState,
    val eventSink: (TimelineEvents) -> Unit,
 ) {
-    val hasAnyEvent = timelineItems.any { it is TimelineItem.Event }
+    private val lastTimelineEvent = timelineItems.firstOrNull { it is TimelineItem.Event } as? TimelineItem.Event
+    val hasAnyEvent = lastTimelineEvent != null
    val focusedEventId = focusRequestState.eventId()
+
+    fun isLastOutgoingMessage(uniqueId: UniqueId): Boolean {
+        return isLive && lastTimelineEvent != null && lastTimelineEvent.isMine && lastTimelineEvent.id == uniqueId
+    }
 }

@Immutable
@ -67,5 +74,6 @@ data class TimelineRoomInfo(
    val userHasPermissionToSendMessage: Boolean,
    val userHasPermissionToSendReaction: Boolean,
    val isCallOngoing: Boolean,
-    val pinnedEventIds: List<EventId>
+    val pinnedEventIds: List<EventId>,
+    val typingNotificationState: TypingNotificationState,
 )
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineStateProvider.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineStateProvider.kt
@ -21,6 +21,8 @@ import io.element.android.features.messages.impl.timeline.model.event.TimelineIt
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemStateEventContent
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemTextContent
 import io.element.android.features.messages.impl.timeline.model.virtual.aTimelineItemDaySeparatorModel
+import io.element.android.features.messages.impl.typing.TypingNotificationState
+import io.element.android.features.messages.impl.typing.aTypingNotificationState
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.matrix.api.core.EventId
@ -241,6 +243,7 @@ internal fun aTimelineRoomInfo(
    isDm: Boolean = false,
    userHasPermissionToSendMessage: Boolean = true,
    pinnedEventIds: List<EventId> = emptyList(),
+    typingNotificationState: TypingNotificationState = aTypingNotificationState(),
 ) = TimelineRoomInfo(
    isDm = isDm,
    name = name,
@ -248,4 +251,5 @@ internal fun aTimelineRoomInfo(
    userHasPermissionToSendReaction = true,
    isCallOngoing = false,
    pinnedEventIds = pinnedEventIds,
+    typingNotificationState = typingNotificationState,
 )
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt
@ -30,9 +30,11 @@ import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.rememberUpdatedState
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.rotate
@ -55,25 +57,21 @@ import io.element.android.features.messages.impl.timeline.model.NewEventState
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEventContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEventContentProvider
-import io.element.android.features.messages.impl.typing.TypingNotificationState
-import io.element.android.features.messages.impl.typing.TypingNotificationView
-import io.element.android.features.messages.impl.typing.aTypingNotificationState
 import io.element.android.libraries.designsystem.components.dialogs.AlertDialog
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.FloatingActionButton
 import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.utils.animateScrollToItemCenter
 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.MessageShield
 import io.element.android.libraries.ui.strings.CommonStrings
 import kotlinx.coroutines.launch
-import kotlin.math.abs

@Composable
 fun TimelineView(
    state: TimelineState,
-    typingNotificationState: TypingNotificationState,
    onUserDataClick: (UserId) -> Unit,
    onLinkClick: (String) -> Unit,
    onMessageClick: (TimelineItem.Event) -> Unit,
@ -131,11 +129,6 @@ fun TimelineView(
                reverseLayout = useReverseLayout,
                contentPadding = PaddingValues(vertical = 8.dp),
            ) {
-                if (state.isLive) {
-                    item {
-                        TypingNotificationView(state = typingNotificationState)
-                    }
-                }
                items(
                    items = state.timelineItems,
                    contentType = { timelineItem -> timelineItem.contentType() },
@ -145,8 +138,7 @@ fun TimelineView(
                        timelineItem = timelineItem,
                        timelineRoomInfo = state.timelineRoomInfo,
                        renderReadReceipts = state.renderReadReceipts,
-                        isLastOutgoingMessage = (timelineItem as? TimelineItem.Event)?.isMine == true &&
-                            state.timelineItems.first().identifier() == timelineItem.identifier(),
+                        isLastOutgoingMessage = state.isLastOutgoingMessage(timelineItem.identifier()),
                        focusedEventId = state.focusedEventId,
                        onUserDataClick = onUserDataClick,
                        onLinkClick = onLinkClick,
@ -216,6 +208,7 @@ private fun BoxScope.TimelineScrollHelper(
            lazyListState.firstVisibleItemIndex < 3 && isLive
        }
    }
+    var jumpToLiveHandled by remember { mutableStateOf(true) }

    fun scrollToBottom() {
        coroutineScope.launch {
@ -231,18 +224,22 @@ private fun BoxScope.TimelineScrollHelper(
        if (isLive) {
            scrollToBottom()
        } else {
+            jumpToLiveHandled = false
            onJumpToLive()
        }
    }

+    LaunchedEffect(jumpToLiveHandled, isLive) {
+        if (!jumpToLiveHandled && isLive) {
+            lazyListState.scrollToItem(0)
+            jumpToLiveHandled = true
+        }
+    }
+
    val latestOnFocusEventRender by rememberUpdatedState(onFocusEventRender)
    LaunchedEffect(focusRequestState) {
-        if (focusRequestState is FocusRequestState.Success && focusRequestState.isIndexed) {
-            if (abs(lazyListState.firstVisibleItemIndex - focusRequestState.index) < 10) {
-                lazyListState.animateScrollToItem(focusRequestState.index)
-            } else {
-                lazyListState.scrollToItem(focusRequestState.index)
-            }
+        if (focusRequestState is FocusRequestState.Success && focusRequestState.isIndexed && !focusRequestState.rendered) {
+            lazyListState.animateScrollToItemCenter(focusRequestState.index)
            latestOnFocusEventRender()
        }
    }
@ -323,7 +320,6 @@ internal fun TimelineViewPreview(
                ),
                focusedEventIndex = 0,
            ),
-            typingNotificationState = aTypingNotificationState(),
            onUserDataClick = {},
            onLinkClick = {},
            onMessageClick = {},
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineViewMessageShieldPreview.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineViewMessageShieldPreview.kt
@ -14,7 +14,6 @@ import io.element.android.features.messages.impl.timeline.di.LocalTimelineItemPr
 import io.element.android.features.messages.impl.timeline.di.aFakeTimelineItemPresenterFactories
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemTextContent
-import io.element.android.features.messages.impl.typing.aTypingNotificationState
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import kotlinx.collections.immutable.toImmutableList
@ -36,7 +35,6 @@ internal fun TimelineViewMessageShieldPreview() = ElementPreview {
                timelineItems = items.toImmutableList(),
                messageShield = messageShield,
            ),
-            typingNotificationState = aTypingNotificationState(),
            onUserDataClick = {},
            onLinkClick = {},
            onMessageClick = {},
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemVirtualRow.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemVirtualRow.kt
@ -26,6 +26,8 @@ import io.element.android.features.messages.impl.timeline.model.virtual.Timeline
 import io.element.android.features.messages.impl.timeline.model.virtual.TimelineItemLoadingIndicatorModel
 import io.element.android.features.messages.impl.timeline.model.virtual.TimelineItemReadMarkerModel
 import io.element.android.features.messages.impl.timeline.model.virtual.TimelineItemRoomBeginningModel
+import io.element.android.features.messages.impl.timeline.model.virtual.TimelineItemTypingNotificationModel
+import io.element.android.features.messages.impl.typing.TypingNotificationView

@Composable
 fun TimelineItemVirtualRow(
@ -46,9 +48,15 @@ fun TimelineItemVirtualRow(
                    latestEventSink(TimelineEvents.LoadMore(virtual.model.direction))
                }
            }
+            // Empty model trick to avoid timeline jumping during forward pagination.
            is TimelineItemLastForwardIndicatorModel -> {
                Spacer(modifier = Modifier)
            }
+            is TimelineItemTypingNotificationModel -> {
+                TypingNotificationView(
+                    state = timelineRoomInfo.typingNotificationState,
+                )
+            }
        }
    }
 }
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/factories/TimelineItemsFactory.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/factories/TimelineItemsFactory.kt
@ -10,7 +10,6 @@ package io.element.android.features.messages.impl.timeline.factories
 import dagger.assisted.Assisted
 import dagger.assisted.AssistedFactory
 import dagger.assisted.AssistedInject
-import io.element.android.features.messages.impl.timeline.TimelineItemIndexer
 import io.element.android.features.messages.impl.timeline.diff.TimelineItemsCacheInvalidator
 import io.element.android.features.messages.impl.timeline.factories.event.TimelineItemEventFactory
 import io.element.android.features.messages.impl.timeline.factories.virtual.TimelineItemVirtualFactory
@ -36,7 +35,6 @@ class TimelineItemsFactory @AssistedInject constructor(
    private val dispatchers: CoroutineDispatchers,
    private val virtualItemFactory: TimelineItemVirtualFactory,
    private val timelineItemGrouper: TimelineItemGrouper,
-    private val timelineItemIndexer: TimelineItemIndexer,
 ) {
    @AssistedFactory
    interface Creator {
@ -96,7 +94,6 @@ class TimelineItemsFactory @AssistedInject constructor(
            }
        }
        val result = timelineItemGrouper.group(newTimelineItemStates).toPersistentList()
-        timelineItemIndexer.process(result)
        this._timelineItems.emit(result)
    }

--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/factories/virtual/TimelineItemVirtualFactory.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/factories/virtual/TimelineItemVirtualFactory.kt
@ -12,6 +12,7 @@ import io.element.android.features.messages.impl.timeline.model.virtual.Timeline
 import io.element.android.features.messages.impl.timeline.model.virtual.TimelineItemLoadingIndicatorModel
 import io.element.android.features.messages.impl.timeline.model.virtual.TimelineItemReadMarkerModel
 import io.element.android.features.messages.impl.timeline.model.virtual.TimelineItemRoomBeginningModel
+import io.element.android.features.messages.impl.timeline.model.virtual.TimelineItemTypingNotificationModel
 import io.element.android.features.messages.impl.timeline.model.virtual.TimelineItemVirtualModel
 import io.element.android.libraries.matrix.api.timeline.MatrixTimelineItem
 import io.element.android.libraries.matrix.api.timeline.item.virtual.VirtualTimelineItem
@ -39,6 +40,7 @@ class TimelineItemVirtualFactory @Inject constructor(
                timestamp = inner.timestamp
            )
            is VirtualTimelineItem.LastForwardIndicator -> TimelineItemLastForwardIndicatorModel
+            VirtualTimelineItem.TypingNotification -> TimelineItemTypingNotificationModel
        }
    }
 }
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/virtual/TimelineItemTypingNotificationModel.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/virtual/TimelineItemTypingNotificationModel.kt
@ -0,0 +1,12 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * Please see LICENSE in the repository root for full details.
+ */
+
+package io.element.android.features.messages.impl.timeline.model.virtual
+
+data object TimelineItemTypingNotificationModel : TimelineItemVirtualModel {
+    override val type: String = "TimelineItemTypingNotificationModel"
+}
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/typing/MessagesViewWithTypingPreview.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/typing/MessagesViewWithTypingPreview.kt
@ -1,35 +0,0 @@
-/*
- * Copyright 2024 New Vector Ltd.
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- * Please see LICENSE in the repository root for full details.
- */
-
-package io.element.android.features.messages.impl.typing
-
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.tooling.preview.PreviewParameter
-import io.element.android.features.messages.impl.MessagesView
-import io.element.android.features.messages.impl.aMessagesState
-import io.element.android.libraries.designsystem.preview.ElementPreview
-import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-
-@PreviewsDayNight
-@Composable
-internal fun MessagesViewWithTypingPreview(
-    @PreviewParameter(TypingNotificationStateForMessagesProvider::class) typingState: TypingNotificationState
-) = ElementPreview {
-    MessagesView(
-        state = aMessagesState().copy(typingNotificationState = typingState),
-        onBackClick = {},
-        onRoomDetailsClick = {},
-        onEventClick = { false },
-        onUserDataClick = {},
-        onLinkClick = {},
-        onPreviewAttachments = {},
-        onSendLocationClick = {},
-        onCreatePollClick = {},
-        onJoinCallClick = {},
-        onViewAllPinnedMessagesClick = {},
-    )
-}
--- a/features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/MessagesPresenterTest.kt
+++ b/features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/MessagesPresenterTest.kt
@ -40,7 +40,7 @@ import io.element.android.features.messages.impl.timeline.model.event.TimelineIt
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemVideoContent
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemPollContent
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemTextContent
-import io.element.android.features.messages.impl.typing.TypingNotificationPresenter
+import io.element.android.features.messages.impl.typing.aTypingNotificationState
 import io.element.android.features.messages.impl.utils.FakeTextPillificationHelper
 import io.element.android.features.messages.impl.voicemessages.composer.VoiceMessageComposerPlayer
 import io.element.android.features.messages.impl.voicemessages.composer.VoiceMessageComposerPresenter
@ -1048,6 +1048,7 @@ class MessagesPresenterTest {
            timelineItemIndexer = TimelineItemIndexer(),
            timelineController = TimelineController(matrixRoom),
            resolveVerifiedUserSendFailurePresenter = { aResolveVerifiedUserSendFailureState() },
+            typingNotificationPresenter = { aTypingNotificationState() },
        )
        val timelinePresenterFactory = object : TimelinePresenter.Factory {
            override fun create(navigator: MessagesNavigator): TimelinePresenter {
@ -1055,11 +1056,6 @@ class MessagesPresenterTest {
            }
        }
        val featureFlagService = FakeFeatureFlagService()
-        val typingNotificationPresenter = TypingNotificationPresenter(
-            room = matrixRoom,
-            sessionPreferencesStore = sessionPreferencesStore,
-        )
-
        val readReceiptBottomSheetPresenter = ReadReceiptBottomSheetPresenter()
        val customReactionPresenter = CustomReactionPresenter(emojibaseProvider = FakeEmojibaseProvider())
        val reactionSummaryPresenter = ReactionSummaryPresenter(room = matrixRoom)
@ -1069,7 +1065,6 @@ class MessagesPresenterTest {
            composerPresenter = messageComposerPresenter,
            voiceMessageComposerPresenter = voiceMessageComposerPresenter,
            timelinePresenterFactory = timelinePresenterFactory,
-            typingNotificationPresenter = typingNotificationPresenter,
            actionListPresenterFactory = FakeActionListPresenter.Factory,
            customReactionPresenter = customReactionPresenter,
            reactionSummaryPresenter = reactionSummaryPresenter,
--- a/features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/fixtures/TimelineItemsFactoryFixtures.kt
+++ b/features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/fixtures/TimelineItemsFactoryFixtures.kt
@ -7,7 +7,6 @@

 package io.element.android.features.messages.impl.fixtures

-import io.element.android.features.messages.impl.timeline.TimelineItemIndexer
 import io.element.android.features.messages.impl.timeline.factories.TimelineItemsFactory
 import io.element.android.features.messages.impl.timeline.factories.TimelineItemsFactoryConfig
 import io.element.android.features.messages.impl.timeline.factories.event.TimelineItemContentFactory
@ -40,19 +39,16 @@ import io.element.android.libraries.mediaviewer.api.util.FileExtensionExtractorW
 import io.element.android.tests.testutils.testCoroutineDispatchers
 import kotlinx.coroutines.test.TestScope

-internal fun TestScope.aTimelineItemsFactoryCreator(
-    timelineItemIndexer: TimelineItemIndexer = TimelineItemIndexer(),
-): TimelineItemsFactory.Creator {
+internal fun TestScope.aTimelineItemsFactoryCreator(): TimelineItemsFactory.Creator {
    return object : TimelineItemsFactory.Creator {
        override fun create(config: TimelineItemsFactoryConfig): TimelineItemsFactory {
-            return aTimelineItemsFactory(config, timelineItemIndexer)
+            return aTimelineItemsFactory(config)
        }
    }
 }

 internal fun TestScope.aTimelineItemsFactory(
    config: TimelineItemsFactoryConfig,
-    timelineItemIndexer: TimelineItemIndexer = TimelineItemIndexer(),
 ): TimelineItemsFactory {
    val timelineEventFormatter = aTimelineEventFormatter()
    val matrixClient = FakeMatrixClient()
@ -96,7 +92,6 @@ internal fun TestScope.aTimelineItemsFactory(
            ),
        ),
        timelineItemGrouper = TimelineItemGrouper(),
-        timelineItemIndexer = timelineItemIndexer,
        config = config
    )
 }
--- a/features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/timeline/TimelineItemIndexerTest.kt
+++ b/features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/timeline/TimelineItemIndexerTest.kt
@ -13,11 +13,12 @@ import io.element.android.features.messages.impl.timeline.model.virtual.Timeline
 import io.element.android.libraries.matrix.api.core.EventId
 import io.element.android.libraries.matrix.api.core.UniqueId
 import io.element.android.libraries.matrix.test.AN_EVENT_ID
+import kotlinx.coroutines.test.runTest
 import org.junit.Test

 class TimelineItemIndexerTest {
    @Test
-    fun `test TimelineItemIndexer`() {
+    fun `test TimelineItemIndexer`() = runTest {
        val eventIds = mutableListOf<EventId>()
        val data = listOf(
            aTimelineItemEvent().also { eventIds.add(it.eventId!!) },
--- a/features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/timeline/TimelinePresenterTest.kt
+++ b/features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/timeline/TimelinePresenterTest.kt
@ -19,6 +19,7 @@ import io.element.android.features.messages.impl.fixtures.aTimelineItemsFactoryC
 import io.element.android.features.messages.impl.timeline.components.aCriticalShield
 import io.element.android.features.messages.impl.timeline.model.NewEventState
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
+import io.element.android.features.messages.impl.typing.aTypingNotificationState
 import io.element.android.features.messages.impl.voicemessages.timeline.FakeRedactedVoiceMessageManager
 import io.element.android.features.messages.impl.voicemessages.timeline.RedactedVoiceMessageManager
 import io.element.android.features.messages.impl.voicemessages.timeline.aRedactedMatrixTimeline
@ -503,7 +504,7 @@ import kotlin.time.Duration.Companion.seconds
                assertThat(state.timelineItems).isNotEmpty()
            }
            initialState.eventSink.invoke(TimelineEvents.JumpToLive)
-            skipItems(1)
+            skipItems(2)
            awaitItem().also { state ->
                // Event stays focused
                assertThat(state.focusedEventId).isEqualTo(AN_EVENT_ID)
@ -682,6 +683,7 @@ import kotlin.time.Duration.Companion.seconds
            timelineItemIndexer = timelineItemIndexer,
            timelineController = TimelineController(room),
            resolveVerifiedUserSendFailurePresenter = { aResolveVerifiedUserSendFailureState() },
+            typingNotificationPresenter = { aTypingNotificationState() },
        )
    }
 }
--- a/features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/timeline/TimelineViewTest.kt
+++ b/features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/timeline/TimelineViewTest.kt
@ -17,8 +17,6 @@ import io.element.android.features.messages.impl.timeline.components.aCriticalSh
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemImageContent
 import io.element.android.features.messages.impl.timeline.model.virtual.TimelineItemLoadingIndicatorModel
-import io.element.android.features.messages.impl.typing.TypingNotificationState
-import io.element.android.features.messages.impl.typing.aTypingNotificationState
 import io.element.android.libraries.matrix.api.core.UniqueId
 import io.element.android.libraries.matrix.api.core.UserId
 import io.element.android.libraries.matrix.api.timeline.Timeline
@ -139,7 +137,6 @@ class TimelineViewTest {

 private fun <R : TestRule> AndroidComposeTestRule<R, ComponentActivity>.setTimelineView(
    state: TimelineState,
-    typingNotificationState: TypingNotificationState = aTypingNotificationState(),
    onUserDataClick: (UserId) -> Unit = EnsureNeverCalledWithParam(),
    onLinkClick: (String) -> Unit = EnsureNeverCalledWithParam(),
    onMessageClick: (TimelineItem.Event) -> Unit = EnsureNeverCalledWithParam(),
@ -155,7 +152,6 @@ private fun <R : TestRule> AndroidComposeTestRule<R, ComponentActivity>.setTimel
    setSafeContent {
        TimelineView(
            state = state,
-            typingNotificationState = typingNotificationState,
            onUserDataClick = onUserDataClick,
            onLinkClick = onLinkClick,
            onMessageClick = onMessageClick,
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/utils/LazyListState.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/utils/LazyListState.kt
@ -7,6 +7,8 @@

 package io.element.android.libraries.designsystem.utils

+import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.lazy.LazyListLayoutInfo
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
@ -35,3 +37,38 @@ fun LazyListState.isScrollingUp(): Boolean {
        }
    }.value
 }
+
+suspend fun LazyListState.animateScrollToItemCenter(index: Int) {
+    fun LazyListLayoutInfo.containerSize(): Int {
+        return if (orientation == Orientation.Vertical) {
+            viewportSize.height
+        } else {
+            viewportSize.width
+        } - beforeContentPadding - afterContentPadding
+    }
+
+    fun LazyListLayoutInfo.resolveItemOffsetToCenter(index: Int): Int? {
+        val itemInfo = visibleItemsInfo.firstOrNull { it.index == index } ?: return null
+        val containerSize = containerSize()
+        val itemSize = itemInfo.size
+        return if (itemSize > containerSize) {
+            itemSize - containerSize / 2
+        } else {
+            -(containerSize() - itemInfo.size) / 2
+        }
+    }
+
+    // await for the first layout.
+    scroll { }
+    layoutInfo.resolveItemOffsetToCenter(index)?.let { offset ->
+        // Item is already visible, just scroll to center.
+        animateScrollToItem(index, offset)
+        return
+    }
+    // Item is not visible, jump to it...
+    scrollToItem(index)
+    // and then adjust according to the actual item size.
+    layoutInfo.resolveItemOffsetToCenter(index)?.let { offset ->
+        animateScrollToItem(index, offset)
+    }
+}
--- a/libraries/matrix/api/src/main/kotlin/io/element/android/libraries/matrix/api/timeline/item/virtual/VirtualTimelineItem.kt
+++ b/libraries/matrix/api/src/main/kotlin/io/element/android/libraries/matrix/api/timeline/item/virtual/VirtualTimelineItem.kt
@ -24,4 +24,6 @@ sealed interface VirtualTimelineItem {
        val direction: Timeline.PaginationDirection,
        val timestamp: Long,
    ) : VirtualTimelineItem
+
+    data object TypingNotification : VirtualTimelineItem
 }
--- a/libraries/matrix/impl/src/main/kotlin/io/element/android/libraries/matrix/impl/timeline/RustTimeline.kt
+++ b/libraries/matrix/impl/src/main/kotlin/io/element/android/libraries/matrix/impl/timeline/RustTimeline.kt
@ -40,6 +40,7 @@ import io.element.android.libraries.matrix.impl.timeline.item.virtual.VirtualTim
 import io.element.android.libraries.matrix.impl.timeline.postprocessor.LastForwardIndicatorsPostProcessor
 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.TypingNotificationPostProcessor
 import io.element.android.libraries.matrix.impl.timeline.reply.InReplyToMapper
 import io.element.android.libraries.matrix.impl.util.MessageEventContent
 import io.element.android.services.toolbox.api.systemclock.SystemClock
@ -121,6 +122,7 @@ class RustTimeline(
    private val roomBeginningPostProcessor = RoomBeginningPostProcessor(mode)
    private val loadingIndicatorsPostProcessor = LoadingIndicatorsPostProcessor(systemClock)
    private val lastForwardIndicatorsPostProcessor = LastForwardIndicatorsPostProcessor(mode)
+    private val typingNotificationPostProcessor = TypingNotificationPostProcessor(mode)

    private val backPaginationStatus = MutableStateFlow(
        Timeline.PaginationStatus(isPaginating = false, hasMoreToLoad = mode != Timeline.Mode.PINNED_EVENTS)
@ -235,6 +237,9 @@ class RustTimeline(
                        hasMoreToLoadForward = hasMoreToLoadForward
                    )
                }
+                .let { items ->
+                    typingNotificationPostProcessor.process(items = items)
+                }
                // Keep lastForwardIndicatorsPostProcessor last
                .let { items ->
                    lastForwardIndicatorsPostProcessor.process(
--- a/libraries/matrix/impl/src/main/kotlin/io/element/android/libraries/matrix/impl/timeline/postprocessor/TypingNotificationPostProcessor.kt
+++ b/libraries/matrix/impl/src/main/kotlin/io/element/android/libraries/matrix/impl/timeline/postprocessor/TypingNotificationPostProcessor.kt
@ -0,0 +1,34 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * Please see LICENSE in the repository root for full details.
+ */
+
+package io.element.android.libraries.matrix.impl.timeline.postprocessor
+
+import io.element.android.libraries.matrix.api.core.UniqueId
+import io.element.android.libraries.matrix.api.timeline.MatrixTimelineItem
+import io.element.android.libraries.matrix.api.timeline.Timeline
+import io.element.android.libraries.matrix.api.timeline.item.virtual.VirtualTimelineItem
+
+/**
+ * This post processor is responsible for adding a typing notification item to the timeline items when the timeline is in live mode.
+ */
+class TypingNotificationPostProcessor(private val mode: Timeline.Mode) {
+    fun process(items: List<MatrixTimelineItem>): List<MatrixTimelineItem> {
+        return if (mode == Timeline.Mode.LIVE) {
+            buildList {
+                addAll(items)
+                add(
+                    MatrixTimelineItem.Virtual(
+                        uniqueId = UniqueId("TypingNotification"),
+                        virtual = VirtualTimelineItem.TypingNotification
+                    )
+                )
+            }
+        } else {
+            items
+        }
+    }
+}