Message Reactions 🥳

Example/ChatExample.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -18,24 +18,6 @@
         "version" : "1.3.0"
       }
     },
-    {
-      "identity" : "giphy-ios-sdk",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/Giphy/giphy-ios-sdk",
-      "state" : {
-        "revision" : "5afbf8ac89273a14ead2bd494b498a3fa46c6c56",
-        "version" : "2.2.14"
-      }
-    },
-    {
-      "identity" : "libwebp-xcode",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/SDWebImage/libwebp-Xcode",
-      "state" : {
-        "revision" : "0d60654eeefd5d7d2bef3835804892c40225e8b2",
-        "version" : "1.5.0"
-      }
-    },
     {
       "identity" : "mediapicker",
       "kind" : "remoteSourceControl",

Example/ChatExample/ChatInteractor/ChatInteractorProtocol.swift

@@ -12,6 +12,9 @@ protocol ChatInteractorProtocol {
     var otherSenders: [MockUser] { get }
 
     func send(draftMessage: ExyteChat.DraftMessage)
+    func remove(messageID: String)
+
+    func add(draftReaction: DraftReaction, to messageID: String)
 
     func connect()
     func disconnect()

Example/ChatExample/ChatInteractor/MockChatInteractor.swift

@@ -58,6 +58,82 @@ final class MockChatInteractor: ChatInteractorProtocol {
             }
         }
     }
+
+    func remove(messageID: String) {
+        DispatchQueue.main.async { [weak self] in
+            self?.chatState.value.removeAll(where: { $0.uid == messageID })
+        }
+    }
+
+    /// Adds a reaction to an existing message
+    func add(draftReaction: ExyteChat.DraftReaction, to messageID: String) {
+        DispatchQueue.main.async { [weak self] in
+            guard let self else { return }
+            if let matchIndex = self.chatState.value.firstIndex(where: { $0.uid == messageID }) {
+                let originalMessage = self.chatState.value[matchIndex]
+                let reaction = Reaction(user: self.chatData.tim.toChatUser(), type: draftReaction.type)
+                let newMessage = MockMessage(
+                    uid: originalMessage.uid,
+                    sender: originalMessage.sender,
+                    createdAt: originalMessage.createdAt,
+                    status: originalMessage.status,
+                    text: originalMessage.text,
+                    images: originalMessage.images,
+                    videos: originalMessage.videos,
+                    reactions: originalMessage.reactions + [reaction],
+                    recording: originalMessage.recording,
+                    replyMessage: originalMessage.replyMessage
+                )
+                print("Setting Reaction")
+                self.chatState.value[matchIndex] = newMessage
+
+                // Update our message reaction status after a random delay...
+                delayUpdateReactionStatus(messageID: messageID, reactionID: reaction.id)
+
+            } else {
+                print("No Match for Reaction")
+            }
+        }
+    }
+
+    /// Updates a reaction's status after a random amount of time
+    func delayUpdateReactionStatus(messageID: String, reactionID: String) {
+        DispatchQueue.main.asyncAfter(deadline: .now() + .milliseconds(.random(in: 1000...3500))) { [weak self] in
+            guard let self else { return }
+            if let matchIndex = self.chatState.value.firstIndex(where: { $0.uid == messageID }) {
+                let originalMessage = self.chatState.value[matchIndex]
+                if let reactionIndex = originalMessage.reactions.firstIndex(where: { $0.id == reactionID }) {
+                    let originalReaction = originalMessage.reactions[reactionIndex]
+
+                    var reactions = originalMessage.reactions
+                    var status:Reaction.Status = .sent
+                    if Int.random(min: 0, max: 20) == 0 {
+                        status = .error(.init(id: originalReaction.id, messageID: originalMessage.uid, createdAt: originalReaction.createdAt, type: originalReaction.type))
+                    }
+                    reactions[reactionIndex] = .init(id: originalReaction.id, user: originalReaction.user, createdAt: originalReaction.createdAt, type: originalReaction.type, status: status)
+
+                    let newMessage = MockMessage(
+                        uid: originalMessage.uid,
+                        sender: originalMessage.sender,
+                        createdAt: originalMessage.createdAt,
+                        status: originalMessage.status,
+                        text: originalMessage.text,
+                        images: originalMessage.images,
+                        videos: originalMessage.videos,
+                        reactions: reactions,
+                        recording: originalMessage.recording,
+                        replyMessage: originalMessage.replyMessage
+                    )
+
+                    self.chatState.value[matchIndex] = newMessage
+                } else {
+                    print("No Match for Reaction")
+                }
+            } else {
+                print("No Match for Message")
+            }
+        }
+    }
 
     func connect() {
         Timer.publish(every: 2, on: .main, in: .default)
@@ -100,16 +176,30 @@ private extension MockChatInteractor {
         }
         return (0...10)
             .map { index in
-                chatData.randomMessage(senders: senders, date: lastDate.randomTime())
+                // Generate a random message
+                var msg = chatData.randomMessage(senders: senders, date: lastDate.randomTime())
+                // 20% of the time, generate a random reaction to the message
+                if Int.random(in: 0...4) == 0 { msg = chatData.reactToMessage(msg, senders: senders) }
+                // Return the message
+                return msg
             }
             .sorted { lhs, rhs in
                 lhs.createdAt < rhs.createdAt
             }
     }
 
     func generateNewMessage() {
-        let message = chatData.randomMessage(senders: otherSenders)
-        chatState.value.append(message)
+        let idx = Int.random(min: 1, max: 10)
+        // 30% of the time, lets react to a previous and recent message
+        if idx <= 3, chatState.value.count >= idx {
+            let msgIndex = chatState.value.count - idx
+            let message = chatData.reactToMessage(chatState.value[msgIndex], senders: otherSenders)
+            chatState.value[msgIndex] = message
+        } else {
+            // 70% of the time just create a new random message
+            let message = chatData.randomMessage(senders: otherSenders)
+            chatState.value.append(message)
+        }
     }
 
     func updateSendingStatuses() {

Example/ChatExample/DataGeneration/MockChatData.swift

@@ -43,6 +43,7 @@ final class MockChatData {
             text: shouldGenerateText ? Lorem.sentence(nbWords: Int.random(in: 3...10), useMarkdown: true) : "",
             images: images,
             videos: [],
+            reactions: [],
             recording: nil,
             replyMessage: nil
         )
@@ -73,6 +74,31 @@ final class MockChatData {
             .map { _ in randomHexChar() }
             .joined()
     }
+
+    func randomReaction(senders: [MockUser]) -> Reaction {
+        let sampleEmojis:[String] = ["👍", "👎", "❤️", "🤣", "‼️", "❓", "🥳", "💪", "🔥", "💔", "😭"]
+        return Reaction(
+            user: senders.random()!.toChatUser(),
+            createdAt: Date.now,
+            type: .emoji(sampleEmojis.random()!),
+            status: .sent
+        )
+    }
+
+    func reactToMessage(_ msg: MockMessage, senders: [MockUser]) -> MockMessage {
+        return MockMessage(
+            uid: msg.uid,
+            sender: msg.sender,
+            createdAt: msg.createdAt,
+            status: msg.status,
+            text: msg.text,
+            images: msg.images,
+            videos: msg.videos,
+            reactions: msg.reactions + [randomReaction(senders: senders)],
+            recording: msg.recording,
+            replyMessage: msg.replyMessage
+        )
+    }
 }
 
 private extension MockChatData {
@@ -142,6 +168,7 @@ extension DraftMessage {
             text: text,
             images: await makeMockImages(),
             videos: await makeMockVideos(),
+            reactions: [],
             recording: recording,
             replyMessage: replyMessage
         )

Example/ChatExample/Model/MockMessage.swift

@@ -14,6 +14,7 @@ struct MockMessage {
     let text: String
     let images: [MockImage]
     let videos: [MockVideo]
+    let reactions: [Reaction]
     let recording: Recording?
     let replyMessage: ReplyMessage?
 }
@@ -27,6 +28,7 @@ extension MockMessage {
             createdAt: createdAt,
             text: text,
             attachments: images.map { $0.toChatAttachment() } + videos.map { $0.toChatAttachment() },
+            reactions: reactions,
             recording: recording,
             replyMessage: replyMessage
         )

Example/ChatExample/Screens/ChatExampleView.swift

@@ -29,6 +29,7 @@ struct ChatExampleView: View {
         }
         .messageUseMarkdown(true)
         .setRecorderSettings(recorderSettings)
+        .messageReactionDelegate(viewModel)
         .swipeActions(edge: .leading, performsFirstActionWithFullSwipe: true, items: [
             SwipeAction(action: onReply, activeFor: { !$0.user.isCurrentUser }, background: .blue) {
                 VStack {

Example/ChatExample/Screens/ChatExampleViewModel.swift

@@ -6,7 +6,8 @@ import Foundation
 import Combine
 import ExyteChat
 
-final class ChatExampleViewModel: ObservableObject {
+final class ChatExampleViewModel: ObservableObject, ReactionDelegate {
+
     @Published var messages: [Message] = []
 
     var chatTitle: String {
@@ -30,6 +31,14 @@ final class ChatExampleViewModel: ObservableObject {
         interactor.send(draftMessage: draft)
     }
 
+    func remove(messageID: String) {
+        interactor.remove(messageID: messageID)
+    }
+
+    func didReact(to message: Message, reaction draftReaction: DraftReaction) {
+        interactor.add(draftReaction: draftReaction, to: draftReaction.messageID)
+    }
+
     func onStart() {
         interactor.messages
             .compactMap { messages in

Example/ChatExample/Screens/CommentsExampleView.swift

@@ -72,11 +72,14 @@ struct CommentsExampleView: View {
                     defaultActionClosure(message, .reply)
                 case .edit:
                     defaultActionClosure(message, .edit { editedText in
-                        // update this message's text on your BE
+                        // update this message's text in your datasource
                         print(editedText)
                     })
                 case .delete:
-                    print("deleted")
+                    // delete this message in your datasource
+                    viewModel.messages.removeAll { msg in
+                        msg.id == message.id
+                    }
                 case .print:
                     print(message.text)
                 }

Package.swift

@@ -15,18 +15,10 @@ let package = Package(
             targets: ["ExyteChat"]),
     ],
     dependencies: [
-        .package(
-            url: "https://github.com/siteline/swiftui-introspect",
-            from: "1.0.0"
-        ),
         .package(
             url: "https://github.com/exyte/MediaPicker.git",
             from: "2.0.0"
         ),
-        .package(
-            url: "https://github.com/exyte/FloatingButton",
-            from: "1.2.2"
-        ),
         .package(
             url: "https://github.com/exyte/ActivityIndicatorView",
             from: "1.0.0"
@@ -40,9 +32,7 @@ let package = Package(
         .target(
             name: "ExyteChat",
             dependencies: [
-                .product(name: "SwiftUIIntrospect", package: "swiftui-introspect"),
                 .product(name: "ExyteMediaPicker", package: "MediaPicker"),
-                .product(name: "FloatingButton", package: "FloatingButton"),
                 .product(name: "ActivityIndicatorView", package: "ActivityIndicatorView"),
                 .product(name: "GiphyUISDK", package: "giphy-ios-sdk")
             ],