Added method for customizing quoted message avatar

martinmitrevski · martinmitrevski · commit 1efb9f89fba6 · 2022-03-22T09:30:37.000+01:00
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/FileAttachmentView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/FileAttachmentView.swift
@@ -5,10 +5,11 @@
 import StreamChat
 import SwiftUI
 
-public struct FileAttachmentsContainer: View {
+public struct FileAttachmentsContainer<Factory: ViewFactory>: View {
     
     @Injected(\.utils) private var utils
     
+    var factory: Factory
     var message: ChatMessage
     var width: CGFloat
     var isFirst: Bool
@@ -18,6 +19,7 @@ public struct FileAttachmentsContainer: View {
         VStack(alignment: message.alignmentInBubble) {
             if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {
                 QuotedMessageViewContainer(
+                    factory: factory,
                     quotedMessage: quotedMessage,
                     fillAvailableSpace: !message.attachmentCounts.isEmpty,
                     scrolledId: $scrolledId
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/GiphyAttachmentView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/GiphyAttachmentView.swift
@@ -28,6 +28,7 @@ public struct GiphyAttachmentView<Factory: ViewFactory>: View {
         ) {
             if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {
                 QuotedMessageViewContainer(
+                    factory: factory,
                     quotedMessage: quotedMessage,
                     fillAvailableSpace: !message.attachmentCounts.isEmpty,
                     scrolledId: $scrolledId
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/ImageAttachmentView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/ImageAttachmentView.swift
@@ -7,10 +7,11 @@ import NukeUI
 import StreamChat
 import SwiftUI
 
-public struct ImageAttachmentContainer: View {
+public struct ImageAttachmentContainer<Factory: ViewFactory>: View {
     @Injected(\.colors) private var colors
     @Injected(\.utils) private var utils
     
+    var factory: Factory
     let message: ChatMessage
     let width: CGFloat
     let isFirst: Bool
@@ -26,6 +27,7 @@ public struct ImageAttachmentContainer: View {
         ) {
             if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {
                 QuotedMessageViewContainer(
+                    factory: factory,
                     quotedMessage: quotedMessage,
                     fillAvailableSpace: !message.attachmentCounts.isEmpty,
                     scrolledId: $scrolledId
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/LinkAttachmentView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/LinkAttachmentView.swift
@@ -9,10 +9,11 @@ import SwiftUI
 
 /// Container for presenting link attachments.
 /// In case of more than one link, only the first link is previewed.
-public struct LinkAttachmentContainer: View {
+public struct LinkAttachmentContainer<Factory: ViewFactory>: View {
     @Injected(\.colors) private var colors
     @Injected(\.utils) private var utils
     
+    var factory: Factory
     var message: ChatMessage
     var width: CGFloat
     var isFirst: Bool
@@ -27,6 +28,7 @@ public struct LinkAttachmentContainer: View {
         ) {
             if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {
                 QuotedMessageViewContainer(
+                    factory: factory,
                     quotedMessage: quotedMessage,
                     fillAvailableSpace: !message.attachmentCounts.isEmpty,
                     scrolledId: $scrolledId
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageView.swift
@@ -94,11 +94,12 @@ struct MessageView<Factory: ViewFactory>: View {
     }
 }
 
-public struct MessageTextView: View {
+public struct MessageTextView<Factory: ViewFactory>: View {
     @Injected(\.colors) private var colors
     @Injected(\.fonts) private var fonts
     @Injected(\.utils) private var utils
     
+    var factory: Factory
     var message: ChatMessage
     var isFirst: Bool
     @Binding var scrolledId: String?
@@ -110,6 +111,7 @@ public struct MessageTextView: View {
         ) {
             if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {
                 QuotedMessageViewContainer(
+                    factory: factory,
                     quotedMessage: quotedMessage,
                     fillAvailableSpace: !message.attachmentCounts.isEmpty,
                     scrolledId: $scrolledId
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/QuotedMessageView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/QuotedMessageView.swift
@@ -8,12 +8,13 @@ import StreamChat
 import SwiftUI
 
 /// Container showing the quoted message view with the user avatar.
-struct QuotedMessageViewContainer: View {
+struct QuotedMessageViewContainer<Factory: ViewFactory>: View {
     
     @Injected(\.utils) private var utils
     
     private let avatarSize: CGFloat = 24
     
+    var factory: Factory
     var quotedMessage: ChatMessage
     var fillAvailableSpace: Bool
     var forceLeftToRight = false
@@ -22,9 +23,9 @@ struct QuotedMessageViewContainer: View {
     var body: some View {
         HStack(alignment: .bottom) {
             if !quotedMessage.isSentByCurrentUser || forceLeftToRight {
-                MessageAvatarView(
-                    avatarURL: utils.messageCachingUtils.authorImageURL(for: quotedMessage),
-                    size: .init(width: avatarSize, height: avatarSize)
+                factory.makeQuotedMessageAvatarView(
+                    for: utils.messageCachingUtils.authorInfo(from: quotedMessage),
+                    size: CGSize(width: avatarSize, height: avatarSize)
                 )
                 
                 QuotedMessageView(
@@ -39,9 +40,9 @@ struct QuotedMessageViewContainer: View {
                     forceLeftToRight: forceLeftToRight
                 )
                 
-                MessageAvatarView(
-                    avatarURL: utils.messageCachingUtils.authorImageURL(for: quotedMessage),
-                    size: .init(width: avatarSize, height: avatarSize)
+                factory.makeQuotedMessageAvatarView(
+                    for: utils.messageCachingUtils.authorInfo(from: quotedMessage),
+                    size: CGSize(width: avatarSize, height: avatarSize)
                 )
             }
         }
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/VideoAttachmentView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/VideoAttachmentView.swift
@@ -6,10 +6,11 @@ import AVKit
 import StreamChat
 import SwiftUI
 
-public struct VideoAttachmentsContainer: View {
+public struct VideoAttachmentsContainer<Factory: ViewFactory>: View {
     
     @Injected(\.utils) private var utils
-    
+
+    var factory: Factory
     let message: ChatMessage
     let width: CGFloat
     @Binding var scrolledId: String?
@@ -19,6 +20,7 @@ public struct VideoAttachmentsContainer: View {
             if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {
                 VStack {
                     QuotedMessageViewContainer(
+                        factory: factory,
                         quotedMessage: quotedMessage,
                         fillAvailableSpace: !message.attachmentCounts.isEmpty,
                         scrolledId: $scrolledId
diff --git a/Sources/StreamChatSwiftUI/DefaultViewFactory.swift b/Sources/StreamChatSwiftUI/DefaultViewFactory.swift
@@ -200,6 +200,13 @@ extension ViewFactory {
         MessageAvatarView(avatarURL: userDisplayInfo.imageURL)
     }
     
+    public func makeQuotedMessageAvatarView(
+        for userDisplayInfo: UserDisplayInfo,
+        size: CGSize
+    ) -> some View {
+        MessageAvatarView(avatarURL: userDisplayInfo.imageURL, size: size)
+    }
+    
     public func makeChannelHeaderViewModifier(
         for channel: ChatChannel
     ) -> some ChatChannelHeaderViewModifier {
@@ -249,6 +256,7 @@ extension ViewFactory {
         scrolledId: Binding<String?>
     ) -> some View {
         MessageTextView(
+            factory: self,
             message: message,
             isFirst: isFirst,
             scrolledId: scrolledId
@@ -262,6 +270,7 @@ extension ViewFactory {
         scrolledId: Binding<String?>
     ) -> some View {
         ImageAttachmentContainer(
+            factory: self,
             message: message,
             width: availableWidth,
             isFirst: isFirst,
@@ -291,6 +300,7 @@ extension ViewFactory {
         scrolledId: Binding<String?>
     ) -> some View {
         LinkAttachmentContainer(
+            factory: self,
             message: message,
             width: availableWidth,
             isFirst: isFirst,
@@ -305,6 +315,7 @@ extension ViewFactory {
         scrolledId: Binding<String?>
     ) -> some View {
         FileAttachmentsContainer(
+            factory: self,
             message: message,
             width: availableWidth,
             isFirst: isFirst,
@@ -319,6 +330,7 @@ extension ViewFactory {
         scrolledId: Binding<String?>
     ) -> some View {
         VideoAttachmentsContainer(
+            factory: self,
             message: message,
             width: availableWidth,
             scrolledId: scrolledId
@@ -664,6 +676,7 @@ extension ViewFactory {
         quotedMessage: ChatMessage
     ) -> some View {
         QuotedMessageViewContainer(
+            factory: self,
             quotedMessage: quotedMessage,
             fillAvailableSpace: true,
             forceLeftToRight: true,
diff --git a/Sources/StreamChatSwiftUI/ViewFactory.swift b/Sources/StreamChatSwiftUI/ViewFactory.swift
@@ -183,6 +183,16 @@ public protocol ViewFactory: AnyObject {
     /// - Parameter userDisplayInfo: the author's display info.
     func makeMessageAvatarView(for userDisplayInfo: UserDisplayInfo) -> UserAvatar
     
+    associatedtype QuotedUserAvatar: View
+    /// Creates the user avatar shown in quoted messages.
+    /// - Parameters:
+    ///  - userDisplayInfo: the author's display info.
+    ///  - size: the required size of the view.
+    func makeQuotedMessageAvatarView(
+        for userDisplayInfo: UserDisplayInfo,
+        size: CGSize
+    ) -> QuotedUserAvatar
+    
     associatedtype ChatHeaderViewModifier: ChatChannelHeaderViewModifier
     /// Creates the channel header view modifier.
     /// - Parameter channel: the displayed channel.
diff --git a/StreamChatSwiftUITests/Tests/ChatChannel/QuotedMessageView_Tests.swift b/StreamChatSwiftUITests/Tests/ChatChannel/QuotedMessageView_Tests.swift
@@ -20,6 +20,7 @@ class QuotedMessageView_Tests: StreamChatTestCase {
     func test_quotedMessageViewContainer_snapshot() {
         // Given
         let view = QuotedMessageViewContainer(
+            factory: DefaultViewFactory.shared,
             quotedMessage: testMessage,
             fillAvailableSpace: true,
             scrolledId: .constant(nil)
diff --git a/StreamChatSwiftUITests/Tests/Utils/ViewFactory_Tests.swift b/StreamChatSwiftUITests/Tests/Utils/ViewFactory_Tests.swift
@@ -112,6 +112,21 @@ class ViewFactory_Tests: StreamChatTestCase {
         XCTAssert(view is MessageAvatarView)
     }
     
+    func test_viewFactory_makeQuotedMessageAvatarView() {
+        // Given
+        let viewFactory = DefaultViewFactory.shared
+        let userInfo = UserDisplayInfo(id: .unique, name: .unique, imageURL: URL(string: "https://example.com"))
+        
+        // When
+        let view = viewFactory.makeQuotedMessageAvatarView(
+            for: userInfo,
+            size: CGSize(width: 16, height: 16)
+        )
+        
+        // Then
+        XCTAssert(view is MessageAvatarView)
+    }
+    
     func test_viewFactory_makeChannelHeaderViewModifier() {
         // Given
         let viewFactory = DefaultViewFactory.shared
@@ -136,7 +151,7 @@ class ViewFactory_Tests: StreamChatTestCase {
         )
         
         // Then
-        XCTAssert(view is MessageTextView)
+        XCTAssert(view is MessageTextView<DefaultViewFactory>)
     }
     
     func test_viewFactory_makeImageAttachmentView() {
@@ -152,7 +167,7 @@ class ViewFactory_Tests: StreamChatTestCase {
         )
         
         // Then
-        XCTAssert(view is ImageAttachmentContainer)
+        XCTAssert(view is ImageAttachmentContainer<DefaultViewFactory>)
     }
     
     func test_viewFactory_makeGiphyAttachmentView() {
@@ -184,7 +199,7 @@ class ViewFactory_Tests: StreamChatTestCase {
         )
         
         // Then
-        XCTAssert(view is LinkAttachmentContainer)
+        XCTAssert(view is LinkAttachmentContainer<DefaultViewFactory>)
     }
     
     func test_viewFactory_makeFileAttachmentView() {
@@ -200,7 +215,7 @@ class ViewFactory_Tests: StreamChatTestCase {
         )
         
         // Then
-        XCTAssert(view is FileAttachmentsContainer)
+        XCTAssert(view is FileAttachmentsContainer<DefaultViewFactory>)
     }
     
     func test_viewFactory_makeVideoAttachmentView() {
@@ -216,7 +231,7 @@ class ViewFactory_Tests: StreamChatTestCase {
         )
         
         // Then
-        XCTAssert(view is VideoAttachmentsContainer)
+        XCTAssert(view is VideoAttachmentsContainer<DefaultViewFactory>)
     }
     
     func test_viewFactory_makeDeletedMessageView() {
@@ -454,7 +469,7 @@ class ViewFactory_Tests: StreamChatTestCase {
         )
         
         // Then
-        XCTAssert(view is QuotedMessageViewContainer)
+        XCTAssert(view is QuotedMessageViewContainer<DefaultViewFactory>)
     }
     
     func test_viewFactory_makeEditedMessageHeaderView() {
diff --git a/docusaurus/docs/iOS/swiftui/components/inline-replies.md b/docusaurus/docs/iOS/swiftui/components/inline-replies.md
@@ -8,7 +8,7 @@ The SwiftUI SDK has support for inline message replies. These replies are invoke
 
 ## Customizing the Quoted Message
 
-When a message appears as quoted in the composer, you can customize two parts. First, there's a header at the top of the composer, which by default has a title and a button to remove the quoted message from the composer. To swap this view with your own implementation, you need to implement the `makeQuotedMessageHeaderView` method in the `ViewFactory`, which passes a binding of the quoted chat message.
+When a message appears as quoted in the composer, you can customize both the header and the quoted message with the user avatar. The header is at the top of the composer, and by default it has a title and a button to remove the quoted message from the composer. To swap this view with your own implementation, you need to implement the `makeQuotedMessageHeaderView` method in the `ViewFactory`, which passes a binding of the quoted chat message.
 
 ```swift
 public func makeQuotedMessageHeaderView(
@@ -18,7 +18,7 @@ public func makeQuotedMessageHeaderView(
 }
 ```
 
-The second customization that can be done is to swap the preview of the message shown in the composer. The default implementation is able to present several different attachments, such as text, image, video, gifs, links and files. The UI consists of small image and either the message text (if present), or a description for the attachment.
+Another customization that can be done is to swap the preview of the message shown in the composer. The default implementation is able to present several different attachments, such as text, image, video, gifs, links and files. The UI consists of small image and either the message text (if present), or a description for the attachment.
 
 In order to swap this UI, you need to implement the `makeQuotedMessageComposerView` method in the `ViewFactory`. The method passes the quoted message as a parameter.
 
@@ -35,6 +35,16 @@ public func makeQuotedMessageComposerView(
 }
 ```
 
+If you only want to customize the message avatar, without changing the whole quoted message composer view, you can implement the `makeQuotedMessageAvatarView`. This method is called with `UserDisplayInfo` that you can use to populate the avatar's data, as well as the required `size` for this view. Note, if you don't set this size in your implementation, the view might not fit in the quoted message composer view.
+
+```swift
+func makeQuotedMessageAvatarView(
+    for userDisplayInfo: UserDisplayInfo,
+    size: CGSize
+) -> some View {
+    MessageAvatarView(avatarURL: userDisplayInfo.imageURL, size: size)
+}
+```
 
 Finally, we need to inject the your `CustomFactory` in our view hierarchy.
 
