[CIS-1009] Fix the appearance of system messages (#1281)

* Fix system messages appearance

* Update CHANGELOG

CHANGELOG.md

@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Fix deleted messages appearance [#1267](https://github.com/GetStream/stream-chat-swift/pull/1267)
 - Fix composer commands and attachment buttons not shown in first render when channel is not in cache [#1277](https://github.com/GetStream/stream-chat-swift/pull/1277)
 - Fix appearance of only-emoji messages [#1272](https://github.com/GetStream/stream-chat-swift/pull/1272)
+- Fix the appearance of system messages [#1281](https://github.com/GetStream/stream-chat-swift/pull/1281)
 
 ### ⚠️ Breaking Changes from `4.0-beta.6`
 - The `ChatSuggestionsViewController` was renamed to `ChatSuggestionsVC` to follow the same pattern across the codebase. [#1195](https://github.com/GetStream/stream-chat-swift/pull/1195)

Package.swift

@@ -253,8 +253,10 @@ var streamChatUIFilesExcluded: [String] { [
     "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearance.default-light-flipped-bubble-continuousBubble-text-quotedMessage-reactions.png",
     "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearance.default-light-flipped-bubble-continuousBubble-text-quotedMessage-threadInfo-reactions.png",
     "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearanceCustomization_usingSubclassing.small-dark.png",
+    "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearanceForSystemMessage.rightToLeftLayout-default.png",
     "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearanceCustomization_usingUIConfig.small-dark.png",
     "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearance.default-light-flipped-bubble-continuousBubble-text-reactions.png",
+    "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearanceForSystemMessage.default-light.png",
     "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearanceCustomization_usingSubclassing.rightToLeftLayout-default.png",
     "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearance.default-light-flipped-bubble-timestamp-text-quotedMessage.png",
     "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearance.default-light-flipped-bubble-continuousBubble-text-quotedMessage.png",
@@ -265,6 +267,7 @@ var streamChatUIFilesExcluded: [String] { [
     "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearance.default-light-flipped-bubble-continuousBubble-text.png",
     "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearance.default-light-flipped-bubble-timestamp-text-quotedMessage-reactions.png",
     "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearance.default-light-bubble-continuousBubble-avatarSizePadding-text-reactions.png",
+    "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearanceForSystemMessage.extraExtraExtraLarge-light.png",
     "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearance.default-light-bubble-continuousBubble-avatarSizePadding-text-quotedMessage.png",
     "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearance.default-light-bubble-avatar-timestamp-text-quotedMessage-reactions.png",
     "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearanceCustomization_usingUIConfig.extraExtraExtraLarge-light.png",
@@ -273,6 +276,7 @@ var streamChatUIFilesExcluded: [String] { [
     "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearance.default-light-bubble-avatar-timestamp-text-quotedMessage.png",
     "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearance.default-light-bubble-continuousBubble-avatarSizePadding-text-quotedMessage-reactions.png",
     "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearance.default-light-flipped-bubble-timestamp-text-reactions.png",
+    "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearanceForSystemMessage.small-dark.png",
     "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearanceCustomization_usingSubclassing.extraExtraExtraLarge-light.png",
     "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearanceCustomization_usingUIConfig.default-light.png",
     "ChatMessageList/ChatMessage/__Snapshots__/ChatMessageContentView_Tests/test_appearance.default-light-bubble-continuousBubble-avatar-timestamp-text-quotedMessage-threadInfo-reactions.png",

Sources/StreamChatUI/Appearance+ColorPalette.swift

@@ -11,7 +11,7 @@ public extension Appearance {
         /// General textColor, should be something that contrasts great with your `background` Color
         public var text: UIColor = .streamBlack
         public var textInverted: UIColor = .streamWhite
-        public var textDisabled: UIColor = .streamGrayDisabledText
+        public var textLowEmphasis: UIColor = .streamGrayDisabledText
 
         /// Static color which should stay the same in dark and light mode, because it's only used as text on small UI Elements
         /// such as `ChatUnreadCountView`, `GiphyBadge` or Commands icon.

Sources/StreamChatUI/ChatMessageList/ChatMessage/ChatMessageContentView.swift

@@ -356,7 +356,14 @@ open class _ChatMessageContentView<ExtraData: ExtraDataTypes>: _View, ThemeProvi
             bubbleThreadMetaContainer
         ].compactMap { $0 }
 
-        if options.contains(.flipped) {
+        if options.contains(.centered) {
+            mainContainer.addArrangedSubviews([bubbleThreadMetaContainer])
+
+            constraintsToActivate += [
+                mainContainer.centerXAnchor
+                    .pin(equalTo: centerXAnchor)
+            ]
+        } else if options.contains(.flipped) {
             mainContainer.addArrangedSubviews(mainContainerSubviews.reversed())
 
             if let errorIndicator = errorIndicatorView {
@@ -384,7 +391,6 @@ open class _ChatMessageContentView<ExtraData: ExtraDataTypes>: _View, ThemeProvi
             constraintsToActivate += [
                 mainContainer.leadingAnchor
                     .pin(equalTo: leadingAnchor)
-                    .almostRequired
             ]
         }
 
@@ -426,9 +432,12 @@ open class _ChatMessageContentView<ExtraData: ExtraDataTypes>: _View, ThemeProvi
         var textFont = appearance.fonts.body
 
         if content?.isDeleted == true {
-            textColor = appearance.colorPalette.textDisabled
+            textColor = appearance.colorPalette.textLowEmphasis
         } else if content?.shouldRenderAsJumbomoji == true {
             textFont = appearance.fonts.emoji
+        } else if content?.type == .system {
+            textFont = appearance.fonts.caption1.bold
+            textColor = appearance.colorPalette.textLowEmphasis
         }
 
         textView?.textColor = textColor

Sources/StreamChatUI/ChatMessageList/ChatMessage/ChatMessageContentView_Tests.swift

@@ -93,6 +93,30 @@ final class ChatMessageContentView_Tests: XCTestCase {
         // Assert message content view is rendered correctly.
         AssertSnapshot(view)
     }
+
+    func test_appearanceForSystemMessage() {
+        // Create a system message
+        let systemMessage: ChatMessage = .mock(
+            id: .unique,
+            cid: .unique,
+            text: "Some member was added",
+            type: .system,
+            author: myFriend,
+            createdAt: createdAt,
+            isSentByCurrentUser: false
+        )
+
+        let appearance = Appearance.default
+
+        let view = contentView(
+            message: systemMessage,
+            layout: systemMessage.layout(isLastInGroup: true),
+            appearance: appearance
+        )
+
+        // Assert message content view is rendered correctly.
+        AssertSnapshot(view)
+    }
 }
 
 // MARK: - Helpers
@@ -293,6 +317,10 @@ private extension ChatMessageContentView_Tests {
 
 extension _ChatMessage {
     func layout(isLastInGroup: Bool) -> ChatMessageLayoutOptions {
+        guard type != .system else {
+            return [.centered, .text]
+        }
+
         var options: ChatMessageLayoutOptions = [
             .bubble
         ]

Sources/StreamChatUI/ChatMessageList/ChatMessage/ChatMessageLayoutOptions.swift

@@ -53,6 +53,12 @@ public extension ChatMessageLayoutOptions {
 
     /// If set the indicator saying that the message is visible for current user only will be shown.
     static let onlyVisibleForYouIndicator = Self(rawValue: 1 << 12)
+
+    /// If set all the content will have centered alignment. By default, the system messages are centered.
+    ///
+    /// `flipped` and `centered` are mutually exclusive. Only one of these two should be used at a time.
+    /// If both are specified in the options, `centered` is prioritized
+    static let centered = Self(rawValue: 1 << 13)
 }
 
 extension ChatMessageLayoutOptions: CustomStringConvertible {
@@ -76,7 +82,8 @@ extension ChatMessageLayoutOptions: CustomStringConvertible {
         .threadInfo,
         .errorIndicator,
         .reactions,
-        .onlyVisibleForYouIndicator
+        .onlyVisibleForYouIndicator,
+        .centered
     ]
 
     var optionName: String? {
@@ -107,6 +114,8 @@ extension ChatMessageLayoutOptions: CustomStringConvertible {
             return "reactions"
         case .onlyVisibleForYouIndicator:
             return "onlyVisibleForYouIndicator"
+        case .centered:
+            return "centered"
         default:
             return nil
         }

Sources/StreamChatUI/ChatMessageList/ChatMessage/ChatMessageLayoutOptionsResolver.swift

@@ -39,6 +39,11 @@ open class _ChatMessageLayoutOptionsResolver<ExtraData: ExtraDataTypes> {
 
         var options: ChatMessageLayoutOptions = []
 
+        // The text should be centered without a bubble for system messages
+        guard message.type != .system else {
+            return [.text, .centered]
+        }
+
         // Do not show bubble if the message is to be rendered as large emoji
         if !message.shouldRenderAsJumbomoji {
             options.insert(.bubble)

Sources/StreamChatUI/ChatMessageList/ChatMessage/ChatMessageLayoutOptionsResolver_Tests.swift

@@ -1046,6 +1046,27 @@ final class ChatMessageLayoutOptionsResolver_Tests: XCTestCase {
         // Assert `.errorIndicator` is not included
         XCTAssertFalse(layoutOptions.contains(.errorIndicator))
     }
+
+    func test_optionsForMessage_whenMessageIsSystem() {
+        let systemMessage: ChatMessage = .mock(
+            id: .unique,
+            cid: .unique,
+            text: .unique,
+            type: .system,
+            author: .mock(id: .unique),
+            deletedAt: .unique
+        )
+
+        // Calculate layout options for the message
+        let layoutOptions = optionsResolver.optionsForMessage(
+            at: .init(item: 0, section: 0),
+            in: .mock(cid: .unique),
+            with: .init([systemMessage])
+        )
+
+        // Assert only `.text` AND `.centered` is included in the options
+        XCTAssertTrue(layoutOptions == [.text, .centered])
+    }
 
     // MARK: - Is message
 

Sources/StreamChatUI/Utils/ChatMessage+Extensions.swift

@@ -9,7 +9,7 @@ public extension _ChatMessage {
     /// A boolean value that checks if actions are available on the message (e.g. `edit`, `delete`, `resend`, etc.).
     var isInteractionEnabled: Bool {
         guard
-            type != .ephemeral,
+            type != .ephemeral, type != .system,
             isDeleted == false
         else { return false }