Added support for gradient background in the message bubbles

Author: martinmitrevski

Sources/StreamChatSwiftUI/ChatChannel/ChatChannelViewModel.swift

@@ -172,9 +172,13 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
         if let message = messageController?.message {
             var array = Array(messages)
             array.append(message)
-            self.messages = LazyCachedMapCollection(source: array, map: { $0 })
+            withAnimation {
+                self.messages = LazyCachedMapCollection(source: array, map: { $0 })
+            }
         } else {
-            self.messages = messages
+            withAnimation {
+                self.messages = messages
+            }
         }
 
         maybeRefreshMessageList()

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageBubble.swift

@@ -20,7 +20,7 @@ public struct MessageBubbleModifier: ViewModifier {
             .modifier(
                 BubbleModifier(
                     corners: corners,
-                    backgroundColor: Color(backgroundColor),
+                    backgroundColors: background,
                     cornerRadius: cornerRadius
                 )
             )
@@ -38,19 +38,19 @@ public struct MessageBubbleModifier: ViewModifier {
         }
     }
 
-    private var backgroundColor: UIColor {
+    private var background: [Color] {
         if let injectedBackgroundColor = injectedBackgroundColor {
-            return injectedBackgroundColor
+            return [Color(injectedBackgroundColor)]
         }
-        
+        var colors = colors
         if message.isSentByCurrentUser {
             if message.type == .ephemeral {
-                return colors.background8
+                return colors.messageCurrentUserEmphemeralBackground.map { Color($0) }
             } else {
-                return colors.background6
+                return colors.messageCurrentUserBackground.map { Color($0) }
             }
         } else {
-            return colors.background8
+            return colors.messageOtherUserBackground.map { Color($0) }
         }
     }
 }
@@ -60,13 +60,13 @@ public struct BubbleModifier: ViewModifier {
     @Injected(\.colors) private var colors
 
     var corners: UIRectCorner
-    var backgroundColor: Color
+    var backgroundColors: [Color]
     var borderColor: Color? = nil
     var cornerRadius: CGFloat = 18
 
     public func body(content: Content) -> some View {
         content
-            .background(backgroundColor)
+            .background(background)
             .overlay(
                 BubbleBackgroundShape(
                     cornerRadius: cornerRadius, corners: corners
@@ -83,6 +83,21 @@ public struct BubbleModifier: ViewModifier {
                 )
             )
     }
+    
+    @ViewBuilder
+    private var background: some View {
+        if backgroundColors.count == 1 {
+            backgroundColors[0]
+        } else if backgroundColors.count > 1 {
+            LinearGradient(
+                gradient: Gradient(colors: backgroundColors),
+                startPoint: .top,
+                endPoint: .bottom
+            )
+        } else {
+            Color.clear
+        }
+    }
 }
 
 /// Shape that allows rounding of arbitrary corners.
@@ -138,7 +153,7 @@ extension View {
         modifier(
             BubbleModifier(
                 corners: corners,
-                backgroundColor: background,
+                backgroundColors: [background],
                 borderColor: borderColor
             )
         )

Sources/StreamChatSwiftUI/ColorPalette.swift

@@ -64,6 +64,12 @@ public struct ColorPalette {
     public var alternativeActiveTint: UIColor = .streamAccentGreen
     public var inactiveTint: UIColor = .streamGray
     public var alternativeInactiveTint: UIColor = .streamGrayGainsboro
+    
+    // MARK: - Messages
+    
+    public lazy var messageCurrentUserBackground: [UIColor] = [background6]
+    public lazy var messageCurrentUserEmphemeralBackground: [UIColor] = [background8]
+    public lazy var messageOtherUserBackground: [UIColor] = [background8]
 }
 
 // Those colors are default defined stream constants, which are fallback values if you don't implement your color theme.

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

@@ -8,6 +8,8 @@ The message list view in the SwiftUI SDK allows several customization options. T
 
 If you are developing an app with this use-case, you can customize the [message avatars](../custom-avatar), [reactions](../message-reactions), [theming and presentation logic](../../getting-started) and the different types of [attachments](../attachments).
 
+## Message List Configuration
+
 Additionally, you can control the display of the helper views around the message (date indicators, avatars) and paddings, via the `MessageListConfig`'s properties `MessageDisplayOptions` and `MessagePaddings`. The `MessageListConfig` is part of the `Utils` class in `StreamChat`. Here's an example on how to hide the date indicators and avatars, while also increasing the horizontal padding.
 
 ```swift
@@ -41,6 +43,20 @@ func makeMessageListBackground(
 
 In this method, you receive the `colors` used in the SDK, but you can also use your own colors like in the example above. If you want to have a different background for message threads, use the `isInThread` value to distinguish between a regular message list and a thread.
 
+If you want to change the background of the message bubbles, you can update the `messageCurrentUserBackground` and `messageOtherUserBackground` in the `ColorPalette` on `StreamChat` setup. These values are arrays of `UIColor` - if you want to have a gradient background just provide all the colors that the gradient should be consisted of.
+
+```swift
+var colors = ColorPalette()
+colors.messageCurrentUserBackground = [UIColor.red, UIColor.white]
+colors.messageOtherUserBackground = [UIColor.white, UIColor.red]
+        
+let appearance = Appearance(colors: colors)
+        
+streamChat = StreamChat(chatClient: chatClient, appearance: appearance)
+```
+
+## 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.
 
 For example, if you need a simple text message view, alligned on the left, you can do it like this: