added docs for message reactions

Author: martinmitrevski

Sources/StreamChatSwiftUI/ChatChannel/ChatChannelView.swift

@@ -63,8 +63,7 @@ public struct ChatChannelView<Factory: ViewFactory>: View {
         .accentColor(colors.tintColor)
         .overlay(
             viewModel.reactionsShown ?
-                ReactionsOverlayView(
-                    factory: factory,
+                factory.makeReactionsOverlayView(
                     currentSnapshot: viewModel.currentSnapshot!,
                     messageDisplayInfo: messageDisplayInfo!,
                     onBackgroundTap: {

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageContainerView.swift

@@ -46,7 +46,9 @@ struct MessageContainerView<Factory: ViewFactory>: View {
                         isFirst: showsAllInfo
                     )
                     .overlay(
-                        reactionsShown ? ReactionsContainer(message: message) : nil
+                        reactionsShown ?
+                            factory.makeMessageReactionView(message: message)
+                            : nil
                     )
                     .background(
                         GeometryReader { proxy in

Sources/StreamChatSwiftUI/DefaultViewFactory.swift

@@ -398,6 +398,25 @@ extension ViewFactory {
 
         return MessageActionsView(messageActions: messageActions)
     }
+    
+    public func makeMessageReactionView(
+        message: ChatMessage
+    ) -> some View {
+        ReactionsContainer(message: message)
+    }
+    
+    public func makeReactionsOverlayView(
+        currentSnapshot: UIImage,
+        messageDisplayInfo: MessageDisplayInfo,
+        onBackgroundTap: @escaping () -> Void
+    ) -> some View {
+        ReactionsOverlayView(
+            factory: self,
+            currentSnapshot: currentSnapshot,
+            messageDisplayInfo: messageDisplayInfo,
+            onBackgroundTap: onBackgroundTap
+        )
+    }
 }
 
 /// Default class conforming to `ViewFactory`, used throughout the SDK.

Sources/StreamChatSwiftUI/ViewFactory.swift

@@ -387,4 +387,25 @@ public protocol ViewFactory: AnyObject {
         onDismiss: @escaping () -> Void,
         onError: @escaping (Error) -> Void
     ) -> MessageActionsViewType
+    
+    associatedtype MessageReactionViewType
+    /// Creates the reactions view shown above the message.
+    /// - Parameter message: the message for which reactions are shown.
+    /// - Returns: view shown in the message reactions slot.
+    func makeMessageReactionView(
+        message: ChatMessage
+    ) -> MessageReactionViewType
+    
+    associatedtype ReactionsOverlayViewType
+    /// Creates the reactions overlay view.
+    /// - Parameters:
+    ///  - currentSnapshot: current snapshot of the screen (in case blur effect is needed).
+    ///  - messageDisplayInfo: information about the displayed message.
+    ///  - onBackgroundTap: called when the background is tapped (to dismiss the view).
+    /// - Returns: view displayed in the reactions overlay slot.
+    func makeReactionsOverlayView(
+        currentSnapshot: UIImage,
+        messageDisplayInfo: MessageDisplayInfo,
+        onBackgroundTap: @escaping () -> Void
+    ) -> ReactionsOverlayViewType
 }

StreamChatSwiftUI.xcodeproj/project.xcworkspace/xcuserdata/martinmitrevski.xcuserdatad/UserInterfaceState.xcuserstate

@@ -0,0 +1,213 @@
+---
+title: Message reactions
+---
+
+## Reactions overview
+
+The SwiftUI chat SDK provides a default view that's displayed as an overlay of the message. When you long press on a message, the message reactions overlay is shown. By default, it shows a blurred background and a possibility to react to a message or remove a reaction. Additionally, the reactions overlay has a "message actions" slot, which allows you to perform actions on the message. Both the displayed reactions on a message and the reactions overlay can be replaced by your own views. 
+
+## Customizing the message reactions view
+
+The simplest way to customize the message reactions view is to replace its reaction icons. Those are available under the `availableReactions` property in the Images class, which is part of the Appearance class in the StreamChat object. The `availableReactions` property is a dictionary, which contains mappings between `MessageReactionType` and its corresponding `ChatMessageReactionAppearanceType`, which consists of small and large icon for a reaction. If you change these properties, make sure to inject the updated `Images` class in the StreamChat object.
+
+```swift
+let customReactions = [.init(rawValue: "custom"): ChatMessageReactionAppearance(
+                        smallIcon: reactionCustomSmall,
+                        largeIcon: reactionCustomBig
+                      )]
+var images = Images()
+images.availableReactions = customReactions
+let appearance = Appearance(images: images)
+        
+streamChat = StreamChat(chatClient: chatClient, appearance: appearance)
+```
+
+## Changing the message reactions view
+
+Alternatively, you can completely swap the `ReactionsContainer` view with your own implementation. In order to do that, you need to implement the `makeMessageReactionView` method from the `ViewFactory`, which is called with the message as a parameter. 
+
+```swift
+public func makeMessageReactionView(
+        message: ChatMessage
+) -> some View {
+    CustomReactionsContainer(message: message)
+}
+```
+
+## Customizing the reactions overlay view
+
+The reactions overlay view (shown on long press of a message), also provides access to the message actions. If you want to replace / extend the default message actions, you can do so via the `suppotedMessageActions` method in the `ViewFactory`. As an inspiration, here's a glimpse on how the default message actions are configured.
+
+```swift
+public func suppotedMessageActions(
+        for message: ChatMessage,
+        onDismiss: @escaping () -> Void,
+        onError: @escaping (Error) -> Void
+) -> [MessageAction] {
+    MessageAction.defaultActions(
+        for: message,
+        chatClient: chatClient,
+        onDismiss: onDismiss,
+        onError: onError
+    )
+}
+
+extension MessageAction {
+    /// Returns the default message actions.
+    ///
+    ///  - Parameters:
+    ///     - message: the current message.
+    ///     - chatClient: the chat client.
+    ///     - onDimiss: called when the action is executed.
+    ///  - Returns: array of `MessageAction`.
+    public static func defaultActions(
+        for message: ChatMessage,
+        chatClient: ChatClient,
+        onDismiss: @escaping () -> Void,
+        onError: @escaping (Error) -> Void
+    ) -> [MessageAction] {
+        guard let channelId = message.cid else {
+            return []
+        }
+        
+        var messageActions = [MessageAction]()
+
+        if message.isSentByCurrentUser {
+            let deleteAction = deleteMessageAction(
+                for: message,
+                channelId: channelId,
+                chatClient: chatClient,
+                onDismiss: onDismiss,
+                onError: onError
+            )
+            
+            messageActions.append(deleteAction)
+        } else {
+            let flagAction = flagMessageAction(
+                for: message,
+                channelId: channelId,
+                chatClient: chatClient,
+                onDismiss: onDismiss,
+                onError: onError
+            )
+            
+            messageActions.append(flagAction)
+        }
+        
+        return messageActions
+    }
+    
+    private static func deleteMessageAction(
+        for message: ChatMessage,
+        channelId: ChannelId,
+        chatClient: ChatClient,
+        onDismiss: @escaping () -> Void,
+        onError: @escaping (Error) -> Void
+    ) -> MessageAction {
+        let messageController = chatClient.messageController(
+            cid: channelId,
+            messageId: message.id
+        )
+        
+        let deleteAction = {
+            messageController.deleteMessage { error in
+                if let error = error {
+                    onError(error)
+                } else {
+                    onDismiss()
+                }
+            }
+        }
+        
+        let confirmationPopup = ConfirmationPopup(
+            title: L10n.Message.Actions.Delete.confirmationTitle,
+            message: L10n.Message.Actions.Delete.confirmationMessage,
+            buttonTitle: L10n.Message.Actions.delete
+        )
+        
+        let deleteMessage = MessageAction(
+            title: L10n.Message.Actions.delete,
+            iconName: "trash",
+            action: deleteAction,
+            confirmationPopup: confirmationPopup,
+            isDestructive: true
+        )
+        
+        return deleteMessage
+    }
+    
+    private static func flagMessageAction(
+        for message: ChatMessage,
+        channelId: ChannelId,
+        chatClient: ChatClient,
+        onDismiss: @escaping () -> Void,
+        onError: @escaping (Error) -> Void
+    ) -> MessageAction {
+        let messageController = chatClient.messageController(
+            cid: channelId,
+            messageId: message.id
+        )
+        
+        let flagAction = {
+            messageController.flag { error in
+                if let error = error {
+                    onError(error)
+                } else {
+                    onDismiss()
+                }
+            }
+        }
+        
+        let confirmationPopup = ConfirmationPopup(
+            title: L10n.Message.Actions.Flag.confirmationTitle,
+            message: L10n.Message.Actions.Flag.confirmationMessage,
+            buttonTitle: L10n.Message.Actions.flag
+        )
+        
+        let flageMessage = MessageAction(
+            title: L10n.Message.Actions.flag,
+            iconName: "flag",
+            action: flagAction,
+            confirmationPopup: confirmationPopup,
+            isDestructive: false
+        )
+        
+        return flageMessage
+    }
+}
+```
+
+Alternatively, you can swap the whole `MessageActionsView` with your own implementation, by implementing the `makeMessageActionsView` method in the `ViewFactory`. 
+
+```swift
+public func makeMessageActionsView(
+        for message: ChatMessage,
+        onDismiss: @escaping () -> Void,
+        onError: @escaping (Error) -> Void
+) -> some View {
+    let messageActions = suppotedMessageActions(
+        for: message,
+        onDismiss: onDismiss,
+        onError: onError
+    )
+        
+    return MessageActionsView(messageActions: messageActions)
+}
+```
+
+Additionally, you can swap the whole `ReactionsOverlayView` with your own implementation. In order to do this, you need to implement the `makeReactionsOverlayView` method in the `ViewFactory`. The current snapshot of the message list is provided to you, in case you want to blur it or apply any other effects.
+
+```swift
+public func makeReactionsOverlayView(
+        currentSnapshot: UIImage,
+        messageDisplayInfo: MessageDisplayInfo,
+        onBackgroundTap: @escaping () -> Void
+) -> some View {
+    ReactionsOverlayView(
+        factory: self,
+        currentSnapshot: currentSnapshot,
+        messageDisplayInfo: messageDisplayInfo,
+        onBackgroundTap: onBackgroundTap
+    )
+}
+```

docusaurus/docs/iOS/swiftui/components/message-reactions.md

@@ -61,7 +61,8 @@
             "swiftui/components/custom-avatar",
             "swiftui/components/channel-header",
             "swiftui/components/attachments",
-            "swiftui/components/message-composer"
+            "swiftui/components/message-composer",
+            "swiftui/components/message-reactions"
           ]
         }
       ]