Updated the modifier applied to the message view

martinmitrevski · martinmitrevski · commit 176230be7409 · 2022-03-29T10:57:44.000+02:00
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/FileAttachmentView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/FileAttachmentView.swift
@@ -54,8 +54,14 @@ public struct FileAttachmentsContainer<Factory: ViewFactory>: View {
             }
             .padding(.all, 4)
         }
-        .modifier(factory.makeMessageViewModifier())
-        .messageBubble(for: message, isFirst: isFirst)
+        .modifier(
+            factory.makeMessageViewModifier(
+                for: MessageModifierInfo(
+                    message: message,
+                    isFirst: isFirst
+                )
+            )
+        )
     }
 }
 
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/ImageAttachmentView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/ImageAttachmentView.swift
@@ -57,8 +57,13 @@ public struct ImageAttachmentContainer<Factory: ViewFactory>: View {
                 }
             }
         }
-        .modifier(factory.makeMessageViewModifier())
-        .messageBubble(for: message, isFirst: isFirst)
+        .modifier(
+            factory.makeMessageViewModifier(
+                for: MessageModifierInfo(
+                    message: message, isFirst: isFirst
+                )
+            )
+        )
         .fullScreenCover(isPresented: $galleryShown, onDismiss: {
             self.selectedIndex = 0
         }) {
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/LinkAttachmentView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/LinkAttachmentView.swift
@@ -53,11 +53,14 @@ public struct LinkAttachmentContainer<Factory: ViewFactory>: View {
             }
         }
         .padding(.bottom, 8)
-        .modifier(factory.makeMessageViewModifier())
-        .messageBubble(
-            for: message,
-            isFirst: isFirst,
-            backgroundColor: colors.highlightedAccentBackground1
+        .modifier(
+            factory.makeMessageViewModifier(
+                for: MessageModifierInfo(
+                    message: message,
+                    isFirst: isFirst,
+                    injectedBackgroundColor: colors.highlightedAccentBackground1
+                )
+            )
         )
     }
 }
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageBubble.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageBubble.swift
@@ -5,15 +5,53 @@
 import StreamChat
 import SwiftUI
 
+/// Contains info needed for a modifier to be applied to the message view.
+public struct MessageModifierInfo {
+    
+    public var message: ChatMessage
+    public var isFirst: Bool
+    public var injectedBackgroundColor: UIColor?
+    public var cornerRadius: CGFloat = 18
+    public var forceLeftToRight = false
+    
+    public init(
+        message: ChatMessage,
+        isFirst: Bool,
+        injectedBackgroundColor: UIColor? = nil,
+        cornerRadius: CGFloat = 18,
+        forceLeftToRight: Bool = false
+    ) {
+        self.message = message
+        self.isFirst = isFirst
+        self.injectedBackgroundColor = injectedBackgroundColor
+        self.cornerRadius = cornerRadius
+        self.forceLeftToRight = forceLeftToRight
+    }
+}
+
 /// Modifier that enables message bubble container.
 public struct MessageBubbleModifier: ViewModifier {
     @Injected(\.colors) private var colors
         
-    var message: ChatMessage
-    var isFirst: Bool
-    var injectedBackgroundColor: UIColor?
-    var cornerRadius: CGFloat = 18
-    var forceLeftToRight = false
+    public var message: ChatMessage
+    public var isFirst: Bool
+    public var injectedBackgroundColor: UIColor?
+    public var cornerRadius: CGFloat = 18
+    public var forceLeftToRight = false
+    
+    public init(
+        message: ChatMessage,
+        isFirst: Bool,
+        injectedBackgroundColor: UIColor? = nil,
+        cornerRadius: CGFloat = 18,
+        forceLeftToRight: Bool = false
+    ) {
+        self.message = message
+        self.isFirst = isFirst
+        self.injectedBackgroundColor = injectedBackgroundColor
+        self.cornerRadius = cornerRadius
+        self.forceLeftToRight = forceLeftToRight
+    }
     
     public func body(content: Content) -> some View {
         content
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageView.swift
@@ -128,8 +128,14 @@ public struct MessageTextView<Factory: ViewFactory>: View {
                 .foregroundColor(textColor(for: message))
                 .font(fonts.body)
         }
-        .modifier(factory.makeMessageViewModifier())
-        .messageBubble(for: message, isFirst: isFirst)
+        .modifier(
+            factory.makeMessageViewModifier(
+                for: MessageModifierInfo(
+                    message: message,
+                    isFirst: isFirst
+                )
+            )
+        )
     }
 }
 
@@ -156,8 +162,14 @@ public struct EmojiTextView<Factory: ViewFactory>: View {
                     Text(message.text)
                         .font(fonts.emoji)
                 }
-                .modifier(factory.makeMessageViewModifier())
-                .messageBubble(for: message, isFirst: isFirst)
+                .modifier(
+                    factory.makeMessageViewModifier(
+                        for: MessageModifierInfo(
+                            message: message,
+                            isFirst: isFirst
+                        )
+                    )
+                )
             } else {
                 Text(message.text)
                     .font(fonts.emoji)
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/QuotedMessageView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/QuotedMessageView.swift
@@ -131,13 +131,16 @@ public struct QuotedMessageView<Factory: ViewFactory>: View {
         }
         .id(quotedMessage.messageId)
         .padding(.all, 8)
-        .modifier(factory.makeMessageViewModifier())
-        .messageBubble(
-            for: quotedMessage,
-            isFirst: true,
-            backgroundColor: bubbleBackground,
-            cornerRadius: 12,
-            forceLeftToRight: forceLeftToRight
+        .modifier(
+            factory.makeMessageViewModifier(
+                for: MessageModifierInfo(
+                    message: quotedMessage,
+                    isFirst: true,
+                    injectedBackgroundColor: bubbleBackground,
+                    cornerRadius: 12,
+                    forceLeftToRight: forceLeftToRight
+                )
+            )
         )
     }
     
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/VideoAttachmentView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/VideoAttachmentView.swift
@@ -31,8 +31,14 @@ public struct VideoAttachmentsContainer<Factory: ViewFactory>: View {
                         width: width
                     )
                 }
-                .modifier(factory.makeMessageViewModifier())
-                .messageBubble(for: message, isFirst: false)
+                .modifier(
+                    factory.makeMessageViewModifier(
+                        for: MessageModifierInfo(
+                            message: message,
+                            isFirst: false
+                        )
+                    )
+                )
             } else {
                 VideoAttachmentsList(
                     message: message,
diff --git a/Sources/StreamChatSwiftUI/DefaultViewFactory.swift b/Sources/StreamChatSwiftUI/DefaultViewFactory.swift
@@ -204,8 +204,14 @@ extension ViewFactory {
         EmptyViewModifier()
     }
     
-    public func makeMessageViewModifier() -> some ViewModifier {
-        EmptyViewModifier()
+    public func makeMessageViewModifier(for messageModifierInfo: MessageModifierInfo) -> some ViewModifier {
+        MessageBubbleModifier(
+            message: messageModifierInfo.message,
+            isFirst: messageModifierInfo.isFirst,
+            injectedBackgroundColor: messageModifierInfo.injectedBackgroundColor,
+            cornerRadius: messageModifierInfo.cornerRadius,
+            forceLeftToRight: messageModifierInfo.forceLeftToRight
+        )
     }
     
     public func makeMessageAvatarView(for userDisplayInfo: UserDisplayInfo) -> some View {
diff --git a/Sources/StreamChatSwiftUI/ViewFactory.swift b/Sources/StreamChatSwiftUI/ViewFactory.swift
@@ -188,7 +188,8 @@ public protocol ViewFactory: AnyObject {
     
     associatedtype MessageViewModifier: ViewModifier
     /// Returns a view modifier applied to the message view.
-    func makeMessageViewModifier() -> MessageViewModifier
+    /// - Parameter messageModifierInfo: the message modifier info, that will be applied to the message.
+    func makeMessageViewModifier(for messageModifierInfo: MessageModifierInfo) -> MessageViewModifier
     
     associatedtype UserAvatar: View
     /// Creates the message avatar view.
diff --git a/StreamChatSwiftUITests/Tests/Utils/ViewFactory_Tests.swift b/StreamChatSwiftUITests/Tests/Utils/ViewFactory_Tests.swift
@@ -624,10 +624,15 @@ class ViewFactory_Tests: StreamChatTestCase {
         let viewFactory = DefaultViewFactory.shared
         
         // When
-        let modifier = viewFactory.makeMessageViewModifier()
+        let modifier = viewFactory.makeMessageViewModifier(
+            for: MessageModifierInfo(
+                message: message,
+                isFirst: false
+            )
+        )
         
         // Then
-        XCTAssert(modifier is EmptyViewModifier)
+        XCTAssert(modifier is MessageBubbleModifier)
     }
 }
 
diff --git a/docusaurus/docs/iOS/swiftui/components/message-list.md b/docusaurus/docs/iOS/swiftui/components/message-list.md
@@ -74,6 +74,27 @@ struct VerticalPaddingViewModifier: ViewModifier {
 }
 ```
 
+You can also apply a custom modifier to the message view. This comes in handy if you want to change the bubbles UI, such as the corner radius, the direction of the bubbles, paddings or even remove the bubble altogether. In order to do this, you will need to implement the `makeMessageViewModifier` in the `ViewFactory`. The default implementation returns the bubble that is used throughout our demo app. The following snippet shows how to create your own message view modifier:
+
+```swift
+func makeMessageViewModifier(for messageModifierInfo: MessageModifierInfo) -> some ViewModifier {
+    CustomMessageBubbleModifier(
+        message: messageModifierInfo.message,
+        isFirst: messageModifierInfo.isFirst,
+        injectedBackgroundColor: messageModifierInfo.injectedBackgroundColor,
+        cornerRadius: messageModifierInfo.cornerRadius,
+        forceLeftToRight: messageModifierInfo.forceLeftToRight
+    )
+}
+```
+
+In this method, the `MessageModifierInfo` is provided. This struct contains information that is needed to the modifier to apply the needed styling. It contains the following properties:
+- `message`: The message that will be displayed.
+- `isFirst`: Whether the message is first in the group. Ignore this value if you want to avoid message grouping.
+- `injectedBackgroundColor`: Possibility to inject custom background color, based on the different types of message cells. You can provide your own color logic here as well.
+- `cornerRadius`: The corner radius for rounding the cells. 
+- `forceLeftToRight`: Use this value if you want to force the direction of the bubble to be left to right.   
+
 ## Custom Message Container View
 
 However, if you are building a livestream app similar to Twitch, you will need a different type of user interface for the message views. The SwiftUI SDK allows swapping the message container view with your own implementation, without needing to implement the whole message list, the composer or the reactions. In order to do this, you need to implement the method `makeMessageContainerView` in the `ViewFactory` protocol.

Original file line number	Diff line number	Diff line change
`@@ -54,8 +54,14 @@ public struct FileAttachmentsContainer<Factory: ViewFactory>: View {`
`54`	`54`	`}`
`55`	`55`	`.padding(.all, 4)`
`56`	`56`	`}`
`57`		`- .modifier(factory.makeMessageViewModifier())`
`58`		`- .messageBubble(for: message, isFirst: isFirst)`
	`57`	`+ .modifier(`
	`58`	`+ factory.makeMessageViewModifier(`
	`59`	`+ for: MessageModifierInfo(`
	`60`	`+ message: message,`
	`61`	`+ isFirst: isFirst`
	`62`	`+ )`
	`63`	`+ )`
	`64`	`+ )`
`59`	`65`	`}`
`60`	`66`	`}`
`61`	`67`
Original file line number	Diff line number	Diff line change
`@@ -57,8 +57,13 @@ public struct ImageAttachmentContainer<Factory: ViewFactory>: View {`
`57`	`57`	`}`
`58`	`58`	`}`
`59`	`59`	`}`
`60`		`- .modifier(factory.makeMessageViewModifier())`
`61`		`- .messageBubble(for: message, isFirst: isFirst)`
	`60`	`+ .modifier(`
	`61`	`+ factory.makeMessageViewModifier(`
	`62`	`+ for: MessageModifierInfo(`
	`63`	`+ message: message, isFirst: isFirst`
	`64`	`+ )`
	`65`	`+ )`
	`66`	`+ )`
`62`	`67`	`.fullScreenCover(isPresented: $galleryShown, onDismiss: {`
`63`	`68`	`self.selectedIndex = 0`
`64`	`69`	`}) {`
Original file line number	Diff line number	Diff line change
`@@ -53,11 +53,14 @@ public struct LinkAttachmentContainer<Factory: ViewFactory>: View {`
`53`	`53`	`}`
`54`	`54`	`}`
`55`	`55`	`.padding(.bottom, 8)`
`56`		`- .modifier(factory.makeMessageViewModifier())`
`57`		`- .messageBubble(`
`58`		`- for: message,`
`59`		`- isFirst: isFirst,`
`60`		`- backgroundColor: colors.highlightedAccentBackground1`
	`56`	`+ .modifier(`
	`57`	`+ factory.makeMessageViewModifier(`
	`58`	`+ for: MessageModifierInfo(`
	`59`	`+ message: message,`
	`60`	`+ isFirst: isFirst,`
	`61`	`+ injectedBackgroundColor: colors.highlightedAccentBackground1`
	`62`	`+ )`
	`63`	`+ )`
`61`	`64`	`)`
`62`	`65`	`}`
`63`	`66`	`}`