Extract composer toolbar to a dedicated component (#1427)

* Extract composer toolbar to a dedicated component * Use publisher for composer mode * Introduce `RoomScreenComposerProvider` * Add `ComposerToolbarViewModelTests` * Rename protocols and add passthrough subjects for focused and composer mode * Remove `ComposerToolbarViewActionHandler` and `ComposerToolbarCoordinatorParameters` * Remove `RoomScreenComposerActionHandlerProtocol` and `RoomScreenComposerProviderProtocol` * Re-arrange code a bit * Remove composer mode being stored on `RoomScreen` * Rename `process(viewAction: ComposerToolbarViewAction)` to `process(composerAction: ComposerToolbarViewAction)` * Replace PassthroughSubject with direct function call * Remove `ComposerToolbarCoordinator` * Remove `cancelEdit` and `cancelReply` from external composer view model actions * Use `RoomScreenComposerAction` as a sub-`RoomScreenViewModelAction` * Move `ComposerToolbarViewModel` callback to actionsSubject * Move `RoomScreenViewModel` callback to actionsSubject * Fix `RoomScreenViewModelTests` * Rename `composerAction` parameter to `roomAction` * Fix unit tests
2026-11-04 01:20:12 +00:00 · 2023-08-08 14:25:23 +02:00
parent 9a7a9c8d98
commit 59865a4b16
19 changed files with 513 additions and 204 deletions
@@ -0,0 +1,63 @@
+//
+// Copyright 2023 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import UIKit
+
+enum ComposerToolbarViewModelAction {
+    case sendMessage(message: String, mode: RoomScreenComposerMode)
+
+    case displayCameraPicker
+    case displayMediaPicker
+    case displayDocumentPicker
+    case displayLocationPicker
+
+    case handlePasteOrDrop(provider: NSItemProvider)
+
+    case composerModeChanged(mode: RoomScreenComposerMode)
+    case focusedChanged(isFocused: Bool)
+}
+
+enum ComposerToolbarViewAction {
+    case sendMessage(message: String, mode: RoomScreenComposerMode)
+    case cancelReply
+    case cancelEdit
+    case displayCameraPicker
+    case displayMediaPicker
+    case displayDocumentPicker
+    case displayLocationPicker
+    case handlePasteOrDrop(provider: NSItemProvider)
+}
+
+struct ComposerToolbarViewState: BindableState {
+    var composerMode: RoomScreenComposerMode = .default
+
+    var bindings: ComposerToolbarViewStateBindings
+
+    var sendButtonDisabled: Bool {
+        bindings.composerText.count == 0
+    }
+}
+
+struct ComposerToolbarViewStateBindings {
+    var composerText: String
+    var composerFocused: Bool
+
+    var showAttachmentPopover = false {
+        didSet {
+            composerFocused = false
+        }
+    }
+}
@@ -0,0 +1,96 @@
+//
+// Copyright 2023 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import Combine
+
+typealias ComposerToolbarViewModelType = StateStoreViewModel<ComposerToolbarViewState, ComposerToolbarViewAction>
+
+final class ComposerToolbarViewModel: ComposerToolbarViewModelType, ComposerToolbarViewModelProtocol {
+    private let actionsSubject: PassthroughSubject<ComposerToolbarViewModelAction, Never> = .init()
+    var actions: AnyPublisher<ComposerToolbarViewModelAction, Never> {
+        actionsSubject.eraseToAnyPublisher()
+    }
+
+    init() {
+        super.init(initialViewState: ComposerToolbarViewState(bindings: .init(composerText: "", composerFocused: false)))
+
+        context.$viewState
+            .map(\.composerMode)
+            .removeDuplicates()
+            .sink { [weak self] in self?.actionsSubject.send(.composerModeChanged(mode: $0)) }
+            .store(in: &cancellables)
+
+        context.$viewState
+            .map(\.bindings.composerFocused)
+            .removeDuplicates()
+            .sink { [weak self] in self?.actionsSubject.send(.focusedChanged(isFocused: $0)) }
+            .store(in: &cancellables)
+    }
+
+    // MARK: - Public
+
+    override func process(viewAction: ComposerToolbarViewAction) {
+        switch viewAction {
+        case .sendMessage(let message, let mode):
+            actionsSubject.send(.sendMessage(message: message, mode: mode))
+        case .cancelReply:
+            set(mode: .default)
+        case .cancelEdit:
+            set(mode: .default)
+            set(text: "")
+        case .displayCameraPicker:
+            actionsSubject.send(.displayCameraPicker)
+        case .displayMediaPicker:
+            actionsSubject.send(.displayMediaPicker)
+        case .displayDocumentPicker:
+            actionsSubject.send(.displayDocumentPicker)
+        case .displayLocationPicker:
+            actionsSubject.send(.displayLocationPicker)
+        case .handlePasteOrDrop(let provider):
+            actionsSubject.send(.handlePasteOrDrop(provider: provider))
+        }
+    }
+
+    func process(roomAction: RoomScreenComposerAction) {
+        switch roomAction {
+        case .setMode(mode: let mode):
+            set(mode: mode)
+        case .setText(text: let text):
+            set(text: text)
+        case .removeFocus:
+            state.bindings.composerFocused = false
+        case .clear:
+            set(mode: .default)
+            set(text: "")
+        }
+    }
+
+    // MARK: - Private
+
+    private func set(mode: RoomScreenComposerMode) {
+        guard mode != state.composerMode else { return }
+
+        state.composerMode = mode
+        if mode != .default {
+            // Focus composer when switching to reply/edit
+            state.bindings.composerFocused = true
+        }
+    }
+
+    private func set(text: String) {
+        state.bindings.composerText = text
+    }
+}
@@ -0,0 +1,23 @@
+//
+// Copyright 2023 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import Combine
+
+protocol ComposerToolbarViewModelProtocol {
+    var actions: AnyPublisher<ComposerToolbarViewModelAction, Never> { get }
+    var context: ComposerToolbarViewModelType.Context { get }
+    func process(roomAction: RoomScreenComposerAction)
+}
@@ -0,0 +1,50 @@
+//
+// Copyright 2023 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+struct ComposerToolbar: View {
+    @ObservedObject var context: ComposerToolbarViewModel.Context
+
+    var body: some View {
+        HStack(alignment: .bottom, spacing: 10) {
+            RoomAttachmentPicker(context: context)
+                .padding(.bottom, 5) // centre align with the send button
+            messageComposer
+                .environmentObject(context)
+        }
+    }
+
+    private var messageComposer: some View {
+        MessageComposer(text: $context.composerText,
+                        focused: $context.composerFocused,
+                        sendingDisabled: context.viewState.sendButtonDisabled,
+                        mode: context.viewState.composerMode) {
+            sendMessage()
+        } pasteAction: { provider in
+            context.send(viewAction: .handlePasteOrDrop(provider: provider))
+        } replyCancellationAction: {
+            context.send(viewAction: .cancelReply)
+        } editCancellationAction: {
+            context.send(viewAction: .cancelEdit)
+        }
+    }
+
+    private func sendMessage() {
+        guard !context.viewState.sendButtonDisabled else { return }
+        context.send(viewAction: .sendMessage(message: context.composerText, mode: context.viewState.composerMode))
+    }
+}
@@ -17,7 +17,7 @@
 import SwiftUI

 struct RoomAttachmentPicker: View {
-    @ObservedObject var context: RoomScreenViewModel.Context
+    @ObservedObject var context: ComposerToolbarViewModel.Context
    @Environment(\.isPresented) var isPresented
    
    @State private var sheetContentHeight = CGFloat(0)
@@ -102,12 +102,8 @@ struct RoomAttachmentPicker: View {
 }

 struct RoomAttachmentPicker_Previews: PreviewProvider {
-    static let viewModel = RoomScreenViewModel(timelineController: MockRoomTimelineController(),
-                                               mediaProvider: MockMediaProvider(),
-                                               roomProxy: RoomProxyMock(with: .init(displayName: "")),
-                                               appSettings: ServiceLocator.shared.settings,
-                                               analytics: ServiceLocator.shared.analytics,
-                                               userIndicatorController: ServiceLocator.shared.userIndicatorController)
+    static let viewModel = ComposerToolbarViewModel()
+
    static var previews: some View {
        RoomAttachmentPicker(context: viewModel.context)
    }
@@ -38,8 +38,10 @@ enum RoomScreenCoordinatorAction {

 final class RoomScreenCoordinator: CoordinatorProtocol {
    private var parameters: RoomScreenCoordinatorParameters
-
    private var viewModel: RoomScreenViewModelProtocol
+    private var composerViewModel: ComposerToolbarViewModel
+
+    private var cancellables = Set<AnyCancellable>()

    private let actionsSubject: PassthroughSubject<RoomScreenCoordinatorAction, Never> = .init()
    var actions: AnyPublisher<RoomScreenCoordinatorAction, Never> {
@@ -48,49 +50,63 @@ final class RoomScreenCoordinator: CoordinatorProtocol {
    
    init(parameters: RoomScreenCoordinatorParameters) {
        self.parameters = parameters
-        
+
        viewModel = RoomScreenViewModel(timelineController: parameters.timelineController,
                                        mediaProvider: parameters.mediaProvider,
                                        roomProxy: parameters.roomProxy,
                                        appSettings: ServiceLocator.shared.settings,
                                        analytics: ServiceLocator.shared.analytics,
                                        userIndicatorController: ServiceLocator.shared.userIndicatorController)
+
+        composerViewModel = ComposerToolbarViewModel()
    }
    
    // MARK: - Public
    
    func start() {
-        viewModel.callback = { [weak self] action in
-            guard let self else { return }
-            
-            switch action {
-            case .displayRoomDetails:
-                actionsSubject.send(.presentRoomDetails)
-            case .displayEmojiPicker(let itemID, let selectedEmojis):
-                actionsSubject.send(.presentEmojiPicker(itemID: itemID, selectedEmojis: selectedEmojis))
-            case .displayReportContent(let itemID, let senderID):
-                actionsSubject.send(.presentReportContent(itemID: itemID, senderID: senderID))
-            case .displayCameraPicker:
-                actionsSubject.send(.presentMediaUploadPicker(.camera))
-            case .displayMediaPicker:
-                actionsSubject.send(.presentMediaUploadPicker(.photoLibrary))
-            case .displayDocumentPicker:
-                actionsSubject.send(.presentMediaUploadPicker(.documents))
-            case .displayLocationPicker:
-                actionsSubject.send(.presentLocationPicker)
-            case .displayMediaUploadPreviewScreen(let url):
-                actionsSubject.send(.presentMediaUploadPreviewScreen(url))
-            case .displayRoomMemberDetails(let member):
-                actionsSubject.send(.presentRoomMemberDetails(member: member))
-            case .displayMessageForwarding(let itemID):
-                actionsSubject.send(.presentMessageForwarding(itemID: itemID))
-            case .displayLocation(let body, let geoURI, let description):
-                actionsSubject.send(.presentLocationViewer(body: body, geoURI: geoURI, description: description))
+        viewModel.actions
+            .sink { [weak self] action in
+                guard let self else { return }
+
+                switch action {
+                case .displayRoomDetails:
+                    actionsSubject.send(.presentRoomDetails)
+                case .displayEmojiPicker(let itemID, let selectedEmojis):
+                    actionsSubject.send(.presentEmojiPicker(itemID: itemID, selectedEmojis: selectedEmojis))
+                case .displayReportContent(let itemID, let senderID):
+                    actionsSubject.send(.presentReportContent(itemID: itemID, senderID: senderID))
+                case .displayCameraPicker:
+                    actionsSubject.send(.presentMediaUploadPicker(.camera))
+                case .displayMediaPicker:
+                    actionsSubject.send(.presentMediaUploadPicker(.photoLibrary))
+                case .displayDocumentPicker:
+                    actionsSubject.send(.presentMediaUploadPicker(.documents))
+                case .displayLocationPicker:
+                    actionsSubject.send(.presentLocationPicker)
+                case .displayMediaUploadPreviewScreen(let url):
+                    actionsSubject.send(.presentMediaUploadPreviewScreen(url))
+                case .displayRoomMemberDetails(let member):
+                    actionsSubject.send(.presentRoomMemberDetails(member: member))
+                case .displayMessageForwarding(let itemID):
+                    actionsSubject.send(.presentMessageForwarding(itemID: itemID))
+                case .displayLocation(let body, let geoURI, let description):
+                    actionsSubject.send(.presentLocationViewer(body: body, geoURI: geoURI, description: description))
+                case .composer(let action):
+                    composerViewModel.process(roomAction: action)
+                }
            }
-        }
+            .store(in: &cancellables)
+
+        composerViewModel.actions
+            .sink { [weak self] composerAction in
+                guard let self else { return }
+
+                viewModel.process(composerAction: composerAction)
+            }
+            .store(in: &cancellables)
    }
    
    func toPresentable() -> AnyView {
-        AnyView(RoomScreen(context: viewModel.context))
+        AnyView(RoomScreen(context: viewModel.context, composerToolbar: ComposerToolbar(context: composerViewModel.context)))
    }
 }
@@ -32,6 +32,7 @@ enum RoomScreenViewModelAction {
    case displayRoomMemberDetails(member: RoomMemberProxyProtocol)
    case displayMessageForwarding(itemID: TimelineItemIdentifier)
    case displayLocation(body: String, geoURI: GeoURI, description: String?)
+    case composer(action: RoomScreenComposerAction)
 }

 enum RoomScreenComposerMode: Equatable {
@@ -55,10 +56,7 @@ enum RoomScreenViewAction {
    case itemDisappeared(itemID: TimelineItemIdentifier)
    case itemTapped(itemID: TimelineItemIdentifier)
    case linkClicked(url: URL)
-    case sendMessage
    case toggleReaction(key: String, itemID: TimelineItemIdentifier)
-    case cancelReply
-    case cancelEdit
    case sendReadReceiptIfNeeded(TimelineItemIdentifier)
    case paginateBackwards
    
@@ -67,11 +65,6 @@ enum RoomScreenViewAction {
    
    case displayEmojiPicker(itemID: TimelineItemIdentifier)
    
-    case displayCameraPicker
-    case displayMediaPicker
-    case displayDocumentPicker
-    case displayLocationPicker
-    
    case handlePasteOrDrop(provider: NSItemProvider)
    case tappedOnUser(userID: String)
    
@@ -83,6 +76,13 @@ enum RoomScreenViewAction {
    case scrolledToBottom
 }

+enum RoomScreenComposerAction {
+    case setMode(mode: RoomScreenComposerMode)
+    case setText(text: String)
+    case removeFocus
+    case clear
+}
+
 struct RoomScreenViewState: BindableState {
    var roomID: String
    var roomTitle = ""
@@ -93,29 +93,16 @@ struct RoomScreenViewState: BindableState {
    var readReceiptsEnabled: Bool
    var isEncryptedOneToOneRoom = false
    var timelineViewState = TimelineViewState() // check the doc before changing this
-    var composerMode: RoomScreenComposerMode = .default
    var swiftUITimelineEnabled = false
-    
+
    var bindings: RoomScreenViewStateBindings
    
    /// A closure providing the actions to show when long pressing on an item in the timeline.
    var timelineItemMenuActionProvider: (@MainActor (_ itemId: TimelineItemIdentifier) -> TimelineItemMenuActions?)?
-    
-    var sendButtonDisabled: Bool {
-        bindings.composerText.count == 0
-    }
 }

 struct RoomScreenViewStateBindings {
-    var composerText: String
-    var composerFocused: Bool
-    
    var isScrolledToBottom = true
-    var showAttachmentPopover = false {
-        didSet {
-            composerFocused = false
-        }
-    }
    
    /// The state of wether reactions listed on the timeline are expanded/collapsed.
    /// Key is itemID, value is the collapsed state.
@@ -34,11 +34,14 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
    private let analytics: AnalyticsService
    private unowned let userIndicatorController: UserIndicatorControllerProtocol
    private let notificationCenterProtocol: NotificationCenterProtocol
+    private let composerFocusedSubject = PassthroughSubject<Bool, Never>()
+
+    private let actionsSubject: PassthroughSubject<RoomScreenViewModelAction, Never> = .init()

    private var canCurrentUserRedact = false
    
    private var paginateBackwardsTask: Task<Void, Never>?
-    
+
    init(timelineController: RoomTimelineControllerProtocol,
         mediaProvider: MediaProviderProtocol,
         roomProxy: RoomProxyProtocol,
@@ -59,11 +62,12 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
                                                         timelineStyle: appSettings.timelineStyle,
                                                         readReceiptsEnabled: appSettings.readReceiptsEnabled,
                                                         isEncryptedOneToOneRoom: roomProxy.isEncryptedOneToOneRoom,
-                                                         bindings: .init(composerText: "", composerFocused: false, reactionsCollapsed: [:])),
+                                                         bindings: .init(reactionsCollapsed: [:])),
                   imageProvider: mediaProvider)
        
        setupSubscriptions()
-        
+        setupDirectRoomSubscriptionsIfNeeded()
+
        state.timelineItemMenuActionProvider = { [weak self] itemId -> TimelineItemMenuActions? in
            guard let self else {
                return nil
@@ -73,18 +77,22 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
        }

        buildTimelineViews()
-        
-        trackComposerMode()
+
+        // Note: beware if we get to e.g. restore a reply / edit,
+        // maybe we are tracking a non-needed first initial state
+        trackComposerMode(.default)
    }
    
    // MARK: - Public

-    var callback: ((RoomScreenViewModelAction) -> Void)?
+    var actions: AnyPublisher<RoomScreenViewModelAction, Never> {
+        actionsSubject.eraseToAnyPublisher()
+    }
    
    override func process(viewAction: RoomScreenViewAction) {
        switch viewAction {
        case .displayRoomDetails:
-            callback?(.displayRoomDetails)
+            actionsSubject.send(.displayRoomDetails)
        case .itemAppeared(let id):
            Task { await timelineController.processItemAppearance(id) }
        case .itemDisappeared(let id):
@@ -93,15 +101,8 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            Task { await itemTapped(with: id) }
        case .linkClicked(let url):
            MXLog.warning("Link clicked: \(url)")
-        case .sendMessage:
-            Task { await sendCurrentMessage() }
        case .toggleReaction(let emoji, let itemId):
            Task { await timelineController.toggleReaction(emoji, to: itemId) }
-        case .cancelReply:
-            setComposerMode(.default)
-        case .cancelEdit:
-            setComposerMode(.default)
-            state.bindings.composerText = ""
        case .sendReadReceiptIfNeeded(let lastVisibleItemID):
            Task { await sendReadReceiptIfNeeded(for: lastVisibleItemID) }
        case .timelineItemMenu(let itemID):
@@ -115,14 +116,6 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            }
        case .timelineItemMenuAction(let itemID, let action):
            processTimelineItemMenuAction(action, itemID: itemID)
-        case .displayCameraPicker:
-            callback?(.displayCameraPicker)
-        case .displayMediaPicker:
-            callback?(.displayMediaPicker)
-        case .displayDocumentPicker:
-            callback?(.displayDocumentPicker)
-        case .displayLocationPicker:
-            callback?(.displayLocationPicker)
        case .handlePasteOrDrop(let provider):
            handlePasteOrDrop(provider)
        case .tappedOnUser(userID: let userID):
@@ -143,6 +136,27 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            }
        }
    }
+
+    func process(composerAction: ComposerToolbarViewModelAction) {
+        switch composerAction {
+        case .sendMessage(let message, let mode):
+            Task { await sendCurrentMessage(message, mode: mode) }
+        case .displayCameraPicker:
+            actionsSubject.send(.displayCameraPicker)
+        case .displayMediaPicker:
+            actionsSubject.send(.displayMediaPicker)
+        case .displayDocumentPicker:
+            actionsSubject.send(.displayDocumentPicker)
+        case .displayLocationPicker:
+            actionsSubject.send(.displayLocationPicker)
+        case .handlePasteOrDrop(let provider):
+            handlePasteOrDrop(provider)
+        case .composerModeChanged(mode: let mode):
+            trackComposerMode(mode)
+        case .focusedChanged(isFocused: let isFocused):
+            composerFocusedSubject.send(isFocused)
+        }
+    }
    
    // MARK: - Private

@@ -197,8 +211,6 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            }
            .weakAssign(to: \.state.members, on: self)
            .store(in: &cancellables)
-
-        setupDirectRoomSubscriptionsIfNeeded()
    }

    private func setupDirectRoomSubscriptionsIfNeeded() {
@@ -206,8 +218,7 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            return
        }

-        let shouldShowInviteAlert = context.$viewState
-            .map(\.bindings.composerFocused)
+        let shouldShowInviteAlert = composerFocusedSubject
            .removeDuplicates()
            .map { [weak self] isFocused in
                guard let self else { return false }
@@ -292,10 +303,10 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol

        switch action {
        case .displayMediaFile(let file, let title):
-            state.bindings.composerFocused = false // Hide the keyboard otherwise a big white space is sometimes shown when dismissing the preview.
+            actionsSubject.send(.composer(action: .removeFocus)) // Hide the keyboard otherwise a big white space is sometimes shown when dismissing the preview.
            state.bindings.mediaPreviewItem = MediaPreviewItem(file: file, title: title)
        case .displayLocation(let body, let geoURI, let description):
-            callback?(.displayLocation(body: body, geoURI: geoURI, description: description))
+            actionsSubject.send(.displayLocation(body: body, geoURI: geoURI, description: description))
        case .none:
            break
        }
@@ -409,18 +420,14 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
        return eventTimelineItem.properties.reactions.isEmpty && eventTimelineItem.sender == otherEventTimelineItem.sender
    }

-    private func sendCurrentMessage() async {
-        guard !state.bindings.composerText.isEmpty else {
+    private func sendCurrentMessage(_ currentMessage: String, mode: RoomScreenComposerMode) async {
+        guard !currentMessage.isEmpty else {
            fatalError("This message should never be empty")
        }
-        
-        let currentMessage = state.bindings.composerText
-        let currentComposerState = state.composerMode

-        state.bindings.composerText = ""
-        setComposerMode(.default)
+        actionsSubject.send(.composer(action: .clear))

-        switch currentComposerState {
+        switch mode {
        case .reply(let itemId, _):
            await timelineController.sendMessage(currentMessage, inReplyTo: itemId)
        case .edit(let originalItemId):
@@ -430,16 +437,10 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
        }
    }
    
-    private func setComposerMode(_ mode: RoomScreenComposerMode) {
-        guard mode != state.composerMode else { return }
-        state.composerMode = mode
-        trackComposerMode()
-    }
-    
-    private func trackComposerMode() {
+    private func trackComposerMode(_ mode: RoomScreenComposerMode) {
        var isEdit = false
        var isReply = false
-        switch state.composerMode {
+        switch mode {
        case .edit:
            isEdit = true
        case .reply:
@@ -473,7 +474,8 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            // Don't show a menu for non-event based items.
            return
        }
-        
+
+        actionsSubject.send(.composer(action: .removeFocus))
        state.bindings.actionMenuInfo = .init(item: eventTimelineItem)
    }
    
@@ -555,10 +557,9 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            guard let messageTimelineItem = timelineItem as? EventBasedMessageTimelineItemProtocol else {
                return
            }
-            
-            state.bindings.composerFocused = true
-            state.bindings.composerText = messageTimelineItem.body
-            setComposerMode(.edit(originalItemId: messageTimelineItem.id))
+
+            actionsSubject.send(.composer(action: .setText(text: messageTimelineItem.body)))
+            actionsSubject.send(.composer(action: .setMode(mode: .edit(originalItemId: messageTimelineItem.id))))
        case .copyPermalink:
            do {
                guard let eventID = eventTimelineItem.id.eventID else {
@@ -581,13 +582,11 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
                }
            }
        case .reply:
-            state.bindings.composerFocused = true
-            
            let replyDetails = TimelineItemReplyDetails.loaded(sender: eventTimelineItem.sender, contentType: buildReplyContent(for: eventTimelineItem))
-            
-            setComposerMode(.reply(itemID: eventTimelineItem.id, replyDetails: replyDetails))
+
+            actionsSubject.send(.composer(action: .setMode(mode: .reply(itemID: eventTimelineItem.id, replyDetails: replyDetails))))
        case .forward(let itemID):
-            callback?(.displayMessageForwarding(itemID: itemID))
+            actionsSubject.send(.displayMessageForwarding(itemID: itemID))
        case .viewSource:
            let debugInfo = timelineController.debugInfo(for: eventTimelineItem.id)
            MXLog.info(debugInfo)
@@ -597,13 +596,13 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
                await timelineController.retryDecryption(for: sessionID)
            }
        case .report:
-            callback?(.displayReportContent(itemID: itemID, senderID: eventTimelineItem.sender.id))
+            actionsSubject.send(.displayReportContent(itemID: itemID, senderID: eventTimelineItem.sender.id))
        case .react:
            showEmojiPicker(for: itemID)
        }
        
        if action.switchToDefaultComposer {
-            setComposerMode(.default)
+            actionsSubject.send(.composer(action: .setMode(mode: .default)))
        }
    }
    
@@ -652,7 +651,7 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
                        }
                    }.value

-                    self.callback?(.displayMediaUploadPreviewScreen(url: url))
+                    self.actionsSubject.send(.displayMediaUploadPreviewScreen(url: url))
                } catch {
                    self.displayError(.toast(L10n.screenRoomErrorFailedProcessingMedia))
                    MXLog.error("Failed storing NSItemProvider data \(providerDescription) with error: \(error)")
@@ -678,7 +677,7 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
        
        switch result {
        case .success(let member):
-            callback?(.displayRoomMemberDetails(member: member))
+            actionsSubject.send(.displayRoomMemberDetails(member: member))
        case .failure(let error):
            displayError(.alert(L10n.screenRoomErrorFailedRetrievingUserDetails))
            MXLog.error("Failed retrieving the user given the following id \(userID) with error: \(error)")
@@ -770,7 +769,7 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            return
        }
        let selectedEmojis = Set(eventTimelineItem.properties.reactions.compactMap { $0.isHighlighted ? $0.key : nil })
-        callback?(.displayEmojiPicker(itemID: itemID, selectedEmojis: selectedEmojis))
+        actionsSubject.send(.displayEmojiPicker(itemID: itemID, selectedEmojis: selectedEmojis))
    }
    
    private func showReactionSummary(for itemID: TimelineItemIdentifier, selectedKey: String) {
@@ -14,10 +14,13 @@
 // limitations under the License.
 //

+import Combine
 import Foundation
+import SwiftUI

@MainActor
 protocol RoomScreenViewModelProtocol {
-    var callback: ((RoomScreenViewModelAction) -> Void)? { get set }
+    var actions: AnyPublisher<RoomScreenViewModelAction, Never> { get }
    var context: RoomScreenViewModelType.Context { get }
+    func process(composerAction: ComposerToolbarViewModelAction)
 }
@@ -19,24 +19,20 @@ import SwiftUI
 struct RoomScreen: View {
    @ObservedObject var context: RoomScreenViewModel.Context
    @State private var dragOver = false
-    
+    let composerToolbar: ComposerToolbar
+
    private let attachmentButtonPadding = 10.0
    
    var body: some View {
        timeline
            .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
            .safeAreaInset(edge: .bottom, spacing: 0) {
-                HStack(alignment: .bottom, spacing: attachmentButtonPadding) {
-                    RoomAttachmentPicker(context: context)
-                        .padding(.bottom, 5) // centre align with the send button
-                    messageComposer
-                        .environmentObject(context)
-                }
-                .padding(.leading, attachmentButtonPadding)
-                .padding(.trailing, 12)
-                .padding(.top, 8)
-                .padding(.bottom)
-                .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
+                composerToolbar
+                    .padding(.leading, attachmentButtonPadding)
+                    .padding(.trailing, 12)
+                    .padding(.top, 8)
+                    .padding(.bottom)
+                    .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
            }
            .navigationBarTitleDisplayMode(.inline)
            .toolbar { toolbar }
@@ -124,24 +120,6 @@ struct RoomScreen: View {
        .animation(.elementDefault, value: context.isScrolledToBottom)
    }
    
-    private var messageComposer: some View {
-        MessageComposer(text: $context.composerText,
-                        focused: $context.composerFocused,
-                        sendingDisabled: context.viewState.sendButtonDisabled,
-                        mode: context.viewState.composerMode) {
-            sendMessage()
-        } pasteAction: { provider in
-            context.send(viewAction: .handlePasteOrDrop(provider: provider))
-        } replyCancellationAction: {
-            context.send(viewAction: .cancelReply)
-        } editCancellationAction: {
-            context.send(viewAction: .cancelEdit)
-        }
-        .onChange(of: context.actionMenuInfo) { _ in
-            context.composerFocused = false
-        }
-    }
-    
    @ViewBuilder
    private var loadingIndicator: some View {
        if context.viewState.showLoading {
@@ -162,11 +140,6 @@ struct RoomScreen: View {
            RoomHeaderView(context: context)
        }
    }
-    
-    private func sendMessage() {
-        guard !context.viewState.sendButtonDisabled else { return }
-        context.send(viewAction: .sendMessage)
-    }
 }

 // MARK: - Previews
@@ -178,10 +151,12 @@ struct RoomScreen_Previews: PreviewProvider {
                                               appSettings: ServiceLocator.shared.settings,
                                               analytics: ServiceLocator.shared.analytics,
                                               userIndicatorController: ServiceLocator.shared.userIndicatorController)
+
+    static let composerViewModel = ComposerToolbarViewModel()
    
    static var previews: some View {
        NavigationStack {
-            RoomScreen(context: viewModel.context)
+            RoomScreen(context: viewModel.context, composerToolbar: ComposerToolbar(context: composerViewModel.context))
        }
    }
 }
@@ -52,10 +52,6 @@ class TimelineTableViewController: UIViewController {
            sendReadReceiptIfNeeded()
        }
    }
-
-    /// The mode of the message composer. This is used to render selected
-    /// items in the timeline when replying, editing etc.
-    var composerMode: RoomScreenComposerMode = .default
    
    /// Whether or not the timeline has more messages to back paginate.
    var canBackPaginate = true
@@ -65,9 +65,6 @@ struct UITimelineView: UIViewControllerRepresentable {
            if tableViewController.isBackPaginating != context.viewState.timelineViewState.isBackPaginating {
                tableViewController.isBackPaginating = context.viewState.timelineViewState.isBackPaginating
            }
-            if tableViewController.composerMode != context.viewState.composerMode {
-                tableViewController.composerMode = context.viewState.composerMode
-            }
            
            // Doesn't have an equatable conformance :(
            tableViewController.contextMenuActionProvider = context.viewState.timelineItemMenuActionProvider
@@ -88,10 +85,12 @@ struct UITimelineView_Previews: PreviewProvider {
                                               appSettings: ServiceLocator.shared.settings,
                                               analytics: ServiceLocator.shared.analytics,
                                               userIndicatorController: ServiceLocator.shared.userIndicatorController)
+
+    static let composerViewModel = ComposerToolbarViewModel()
    
    static var previews: some View {
        NavigationStack {
-            RoomScreen(context: viewModel.context)
+            RoomScreen(context: viewModel.context, composerToolbar: ComposerToolbar(context: composerViewModel.context))
        }
    }
 }
@@ -174,9 +174,11 @@ struct TimelineView_Previews: PreviewProvider {
                                               analytics: ServiceLocator.shared.analytics,
                                               userIndicatorController: ServiceLocator.shared.userIndicatorController)

+    static let composerViewModel = ComposerToolbarViewModel()
+
    static var previews: some View {
        NavigationStack {
-            RoomScreen(context: viewModel.context)
+            RoomScreen(context: viewModel.context, composerToolbar: ComposerToolbar(context: composerViewModel.context))
        }
    }
 }