Add Draft Messages Support (#775)

* WIP w/ channel view model

* WIP without channel view model env object

* Fill the draft attachments to the composer

* Fix commands not showing in draft message

* Add draft previews to channel list item and thread list item

* Delete draft message when publishing message or erasing input

* Add draftMessagesEnabled flag

* Update composer draft message when draft is updated from event

* Fix forgotten env object from channel view model

* Remove unnecessary deleteDraftMessage call since publishing a message will clear the text, which will delete the draft

* Simplify the composer view model draft update event logic

* Add Message Composer View Model Tests

* Add composer view test coverage

* Improve the composer view model code by having a fillDraftMessage and a computed draftMessage property

* Add test coverage to previews

* Update CHANGELOG.md

* Fix snapshot tests

* Fix broken compilation caused by new formatter

* Update CHANGELOG.md

* Clear composer input data if draft was deleted from other device

* Fix delete draft request being fired multiple times

* Fix not removing attachments from the previous draft

* Only delete draft message if content is all empty

---------

Co-authored-by: Alexey Alter-Pesotskiy <[email protected]>

Author: nuno-vieira

CHANGELOG.md

@@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### ✅ Added
 - Add avatar customization in add users popup [#787](https://github.com/GetStream/stream-chat-swiftui/pull/787)
+- Add support for Draft Messages when `Utils.messageListConfig.draftMessagesEnabled` is `true` [#775](https://github.com/GetStream/stream-chat-swiftui/pull/775)
+- Add draft preview in Channel List and Thread List if drafts are enabled [#775](https://github.com/GetStream/stream-chat-swiftui/pull/775)
 
 # [4.74.0](https://github.com/GetStream/stream-chat-swiftui/releases/tag/4.74.0)
 _March 14, 2025_

DemoAppSwiftUI/AppDelegate.swift

@@ -69,7 +69,8 @@ class AppDelegate: NSObject, UIApplicationDelegate {
                 bouncedMessagesAlertActionsEnabled: true,
                 skipEditedMessageLabel: { message in
                     message.extraData["ai_generated"]?.boolValue == true
-                }
+                },
+                draftMessagesEnabled: true
             ),
             composerConfig: ComposerConfig(isVoiceRecordingEnabled: true)
         )

DemoAppSwiftUI/AppleMessageComposerView.swift

@@ -42,7 +42,8 @@ struct AppleMessageComposerView<Factory: ViewFactory>: View, KeyboardReadable {
         channelConfig = channelController.channel?.config
         let vm = viewModel ?? ViewModelsFactory.makeMessageComposerViewModel(
             with: channelController,
-            messageController: messageController
+            messageController: messageController,
+            quotedMessage: quotedMessage
         )
         _viewModel = StateObject(
             wrappedValue: vm

DemoAppSwiftUI/PinChannelHelpers.swift

@@ -85,7 +85,16 @@ struct DemoAppChatChannelListItem: View {
                     TypingIndicatorView()
                 }
             }
-            SubtitleText(text: injectedChannelInfo?.subtitle ?? channel.subtitleText)
+            if let draftText = channel.draftMessageText {
+                HStack(spacing: 2) {
+                    Text("Draft:")
+                        .font(fonts.caption1).bold()
+                        .foregroundColor(Color(colors.highlightedAccentBackground))
+                    SubtitleText(text: draftText)
+                }
+            } else {
+                SubtitleText(text: injectedChannelInfo?.subtitle ?? channel.subtitleText)
+            }
             Spacer()
         }
         .accessibilityIdentifier("subtitleView")

Sources/StreamChatSwiftUI/ChatChannel/Composer/ComposerModels.swift

@@ -2,6 +2,7 @@
 // Copyright © 2025 Stream.io Inc. All rights reserved.
 //
 
+import AVFoundation
 import StreamChat
 import SwiftUI
 
@@ -52,6 +53,48 @@ extension AddedAsset {
     }
 }
 
+extension AnyChatMessageAttachment {
+    func toAddedAsset() -> AddedAsset? {
+        if let imageAttachment = attachment(payloadType: ImageAttachmentPayload.self),
+           let imageData = try? Data(contentsOf: imageAttachment.imageURL),
+           let image = UIImage(data: imageData) {
+            return AddedAsset(
+                image: image,
+                id: imageAttachment.id.rawValue,
+                url: imageAttachment.imageURL,
+                type: .image,
+                extraData: imageAttachment.extraData ?? [:]
+            )
+        } else if let videoAttachment = attachment(payloadType: VideoAttachmentPayload.self),
+                  let thumbnail = imageThumbnail(for: videoAttachment.payload) {
+            return AddedAsset(
+                image: thumbnail,
+                id: videoAttachment.id.rawValue,
+                url: videoAttachment.videoURL,
+                type: .video,
+                extraData: videoAttachment.extraData ?? [:]
+            )
+        }
+        return nil
+    }
+
+    private func imageThumbnail(for videoAttachmentPayload: VideoAttachmentPayload) -> UIImage? {
+        if let thumbnailURL = videoAttachmentPayload.thumbnailURL, let data = try? Data(contentsOf: thumbnailURL) {
+            return UIImage(data: data)
+        }
+        let asset = AVURLAsset(url: videoAttachmentPayload.videoURL, options: nil)
+        let imageGenerator = AVAssetImageGenerator(asset: asset)
+        imageGenerator.appliesPreferredTrackTransform = true
+        guard let cgImage = try? imageGenerator.copyCGImage(
+            at: CMTimeMake(value: 0, timescale: 1),
+            actualTime: nil
+        ) else {
+            return nil
+        }
+        return UIImage(cgImage: cgImage)
+    }
+}
+
 /// Type of asset added to the composer.
 public enum AssetType {
     case image
@@ -92,3 +135,16 @@ public struct AddedVoiceRecording: Identifiable, Equatable {
         self.waveform = waveform
     }
 }
+
+extension AnyChatMessageAttachment {
+    func toAddedVoiceRecording() -> AddedVoiceRecording? {
+        guard let voiceAttachment = attachment(payloadType: VoiceRecordingAttachmentPayload.self) else { return nil }
+        guard let duration = voiceAttachment.duration else { return nil }
+        guard let waveform = voiceAttachment.waveformData else { return nil }
+        return AddedVoiceRecording(
+            url: voiceAttachment.voiceRecordingURL,
+            duration: duration,
+            waveform: waveform
+        )
+    }
+}

Sources/StreamChatSwiftUI/ChatChannel/Composer/MessageComposerView.swift

@@ -20,7 +20,7 @@ public struct MessageComposerView<Factory: ViewFactory>: View, KeyboardReadable
     private var channelConfig: ChannelConfig?
     @Binding var quotedMessage: ChatMessage?
     @Binding var editedMessage: ChatMessage?
-    
+
     private let recordingViewHeight: CGFloat = 80
 
     public init(
@@ -37,7 +37,8 @@ public struct MessageComposerView<Factory: ViewFactory>: View, KeyboardReadable
         _viewModel = StateObject(
             wrappedValue: viewModel ?? ViewModelsFactory.makeMessageComposerViewModel(
                 with: channelController,
-                messageController: messageController
+                messageController: messageController,
+                quotedMessage: quotedMessage
             )
         )
         _quotedMessage = quotedMessage
@@ -214,6 +215,12 @@ public struct MessageComposerView<Factory: ViewFactory>: View, KeyboardReadable
                 viewModel.selectedRangeLocation = editedMessage?.text.count ?? 0
             }
         }
+        .onAppear(perform: {
+            viewModel.fillDraftMessage()
+        })
+        .onDisappear(perform: {
+            viewModel.updateDraftMessage(quotedMessage: quotedMessage)
+        })
         .accessibilityElement(children: .contain)
     }
 }