Config for left alignment of messages

CHANGELOG.md

@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Add message preview with attachments in channel list
 - Add support for pre-built XCFramework
 - Config for composer text input paddings
+- Config for left alignment of messages
 
 ### 🐞 Fixed
 - Made some `ChannelList` and `MessageListView` parameters optional

Sources/StreamChatSwiftUI/ChatChannel/MessageList/DeletedMessageView.swift

@@ -26,7 +26,7 @@ public struct DeletedMessageView: View {
 
     public var body: some View {
         VStack(
-            alignment: message.isSentByCurrentUser ? .trailing : .leading,
+            alignment: message.isRightAligned ? .trailing : .leading,
             spacing: 4
         ) {
             Text(L10n.Message.deletedMessagePlaceholder)
@@ -38,7 +38,9 @@ public struct DeletedMessageView: View {
 
             if message.isSentByCurrentUser {
                 HStack {
-                    Spacer()
+                    if message.isRightAligned {
+                        Spacer()
+                    }
 
                     if deletedMessageVisibility == .visibleForCurrentUser {
                         Image(uiImage: images.eye)

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageBubble.swift

@@ -32,6 +32,7 @@ public struct MessageModifierInfo {
 /// Modifier that enables message bubble container.
 public struct MessageBubbleModifier: ViewModifier {
     @Injected(\.colors) private var colors
+    @Injected(\.utils) private var utils
 
     public var message: ChatMessage
     public var isFirst: Bool
@@ -54,7 +55,11 @@ public struct MessageBubbleModifier: ViewModifier {
         self.isFirst = isFirst
         self.injectedBackgroundColor = injectedBackgroundColor
         self.cornerRadius = cornerRadius
-        self.forceLeftToRight = forceLeftToRight
+        if utils.messageListConfig.messageListAlignment == .leftAligned {
+            self.forceLeftToRight = true
+        } else {
+            self.forceLeftToRight = forceLeftToRight            
+        }
         self.topPadding = topPadding
         self.bottomPadding = bottomPadding
     }

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageContainerView.swift

@@ -62,7 +62,7 @@ public struct MessageContainerView<Factory: ViewFactory>: View {
             if message.type == .system || message.type == .error {
                 factory.makeSystemMessageView(message: message)
             } else {
-                if message.isSentByCurrentUser {
+                if message.isRightAligned {
                     MessageSpacer(spacerWidth: spacerWidth)
                 } else {
                     if messageListConfig.messageDisplayOptions.showAvatars(for: channel) {
@@ -73,7 +73,7 @@ public struct MessageContainerView<Factory: ViewFactory>: View {
                     }
                 }
 
-                VStack(alignment: message.isSentByCurrentUser ? .trailing : .leading) {
+                VStack(alignment: message.isRightAligned ? .trailing : .leading) {
                     if isMessagePinned {
                         MessagePinDetailsView(
                             message: message,
@@ -185,7 +185,7 @@ public struct MessageContainerView<Factory: ViewFactory>: View {
                                     factory.makeMessageDateView(for: message)
                                 }
                             }
-                        } else if !message.isSentByCurrentUser
+                        } else if !message.isRightAligned
                             && !channel.isDirectMessageChannel
                             && messageListConfig.messageDisplayOptions.showAuthorName {
                             factory.makeMessageAuthorAndDateView(for: message)
@@ -203,7 +203,7 @@ public struct MessageContainerView<Factory: ViewFactory>: View {
                         : nil
                 )
 
-                if !message.isSentByCurrentUser {
+                if !message.isRightAligned {
                     MessageSpacer(spacerWidth: spacerWidth)
                 }
             }
@@ -239,7 +239,7 @@ public struct MessageContainerView<Factory: ViewFactory>: View {
         let minimumWidth: CGFloat = 240
         let available = max(minimumWidth, (width ?? 0) - spacerWidth) - 2 * padding
         let avatarSize: CGFloat = CGSize.messageAvatarSize.width + padding
-        let totalWidth = message.isSentByCurrentUser ? available : available - avatarSize
+        let totalWidth = message.isRightAligned ? available : available - avatarSize
         return totalWidth
     }
 

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListConfig.swift

@@ -25,7 +25,8 @@ public struct MessageListConfig {
         iPadSplitViewEnabled: Bool = true,
         scrollingAnchor: UnitPoint = .bottom,
         showNewMessagesSeparator: Bool = false,
-        handleTabBarVisibility: Bool = true
+        handleTabBarVisibility: Bool = true,
+        messageListAlignment: MessageListAlignment = .standard
     ) {
         self.messageListType = messageListType
         self.typingIndicatorPlacement = typingIndicatorPlacement
@@ -44,6 +45,7 @@ public struct MessageListConfig {
         self.scrollingAnchor = scrollingAnchor
         self.showNewMessagesSeparator = showNewMessagesSeparator
         self.handleTabBarVisibility = handleTabBarVisibility
+        self.messageListAlignment = messageListAlignment
     }
 
     public let messageListType: MessageListType
@@ -63,6 +65,7 @@ public struct MessageListConfig {
     public let scrollingAnchor: UnitPoint
     public let showNewMessagesSeparator: Bool
     public let handleTabBarVisibility: Bool
+    public let messageListAlignment: MessageListAlignment
 }
 
 /// Contains information about the message paddings.
@@ -187,3 +190,13 @@ public enum MessageListType {
     case livestream
     case commerce
 }
+
+/// The alignment of the messages in the message list.
+public enum MessageListAlignment {
+    /// Standard message alignment.
+    /// The current user's messages are on the right.
+    /// The other users' messages are on the left.
+    case standard
+    /// Everything is left aligned.
+    case leftAligned
+}

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageRepliesView.swift

@@ -41,15 +41,15 @@ public struct MessageRepliesView<Factory: ViewFactory>: View {
             )
         } label: {
             HStack {
-                if !message.isSentByCurrentUser {
+                if !message.isRightAligned {
                     MessageAvatarView(
                         avatarURL: message.threadParticipants.first?.imageURL,
                         size: .init(width: 16, height: 16)
                     )
                 }
                 Text("\(replyCount) \(repliesText)")
                     .font(fonts.footnoteBold)
-                if message.isSentByCurrentUser {
+                if message.isRightAligned {
                     MessageAvatarView(
                         avatarURL: message.threadParticipants.first?.imageURL,
                         size: .init(width: 16, height: 16)
@@ -81,7 +81,7 @@ public struct MessageRepliesView<Factory: ViewFactory>: View {
                 )
                 .offset(y: -24)
                 .rotation3DEffect(
-                    .degrees(message.isSentByCurrentUser ? 180 : 0),
+                    .degrees(message.isRightAligned ? 180 : 0),
                     axis: (x: 0, y: 1, z: 0)
                 )
             )

Sources/StreamChatSwiftUI/ChatChannel/Reactions/ReactionsHelperViews.swift

@@ -16,13 +16,13 @@ public struct ReactionsHStack<Content: View>: View {
 
     public var body: some View {
         HStack {
-            if !message.isSentByCurrentUser {
+            if !message.isRightAligned {
                 Spacer()
             }
 
             content()
 
-            if message.isSentByCurrentUser {
+            if message.isRightAligned {
                 Spacer()
             }
         }

Sources/StreamChatSwiftUI/ChatChannel/Reactions/ReactionsOverlayContainer.swift

@@ -65,7 +65,7 @@ public extension ChatMessage {
         availableWidth: CGFloat = UIScreen.main.bounds.width,
         reactionsSize: CGFloat
     ) -> CGFloat {
-        if isSentByCurrentUser {
+        if isRightAligned {
             var originX = contentRect.origin.x - reactionsSize / 2
             let total = originX + reactionsSize
             if total > availableWidth {

Sources/StreamChatSwiftUI/ChatChannel/Reactions/ReactionsOverlayView.swift

@@ -85,7 +85,7 @@ public struct ReactionsOverlayView<Factory: ViewFactory>: View {
                 Alert.defaultErrorAlert
             }
 
-            if !messageDisplayInfo.message.isSentByCurrentUser &&
+            if !messageDisplayInfo.message.isRightAligned &&
                 utils.messageListConfig.messageDisplayOptions.showAvatars(for: channel) {
                 factory.makeMessageAvatarView(
                     for: utils.messageCachingUtils.authorInfo(from: messageDisplayInfo.message)
@@ -238,13 +238,12 @@ public struct ReactionsOverlayView<Factory: ViewFactory>: View {
 
     private func messageActionsOffsetX(reader: GeometryProxy) -> CGFloat {
         let originX = messageActionsOriginX(availableWidth: reader.size.width)
-        let sentByCurrentUser = messageDisplayInfo.message.isSentByCurrentUser
         if popIn {
             return originX
         } else if willPopOut {
             return messageOriginX(proxy: reader)
         } else {
-            return sentByCurrentUser ? messageActionsWidth : 0
+            return messageDisplayInfo.message.isRightAligned ? messageActionsWidth : 0
         }
     }
 
@@ -323,15 +322,15 @@ public struct ReactionsOverlayView<Factory: ViewFactory>: View {
     }
 
     private func messageActionsOriginX(availableWidth: CGFloat) -> CGFloat {
-        if messageDisplayInfo.message.isSentByCurrentUser {
+        if messageDisplayInfo.message.isRightAligned {
             return availableWidth - messageActionsWidth - paddingValue / 2
         } else {
             return CGSize.messageAvatarSize.width + paddingValue
         }
     }
 
     private func userReactionsOriginX(availableWidth: CGFloat) -> CGFloat {
-        if messageDisplayInfo.message.isSentByCurrentUser {
+        if messageDisplayInfo.message.isRightAligned {
             return availableWidth - maxUserReactionsWidth(availableWidth: availableWidth) - paddingValue / 2
         } else {
             return paddingValue
@@ -340,7 +339,7 @@ public struct ReactionsOverlayView<Factory: ViewFactory>: View {
 
     private var messageActionsWidth: CGFloat {
         var width = messageDisplayInfo.contentWidth + 2 * paddingValue
-        if messageDisplayInfo.message.isSentByCurrentUser {
+        if messageDisplayInfo.message.isRightAligned {
             width -= 2 * paddingValue
         }
 

Sources/StreamChatSwiftUI/ChatChannel/Reactions/ReactionsUsersView.swift

@@ -32,7 +32,7 @@ struct ReactionsUsersView: View {
 
     var body: some View {
         HStack {
-            if message.isSentByCurrentUser {
+            if message.isRightAligned {
                 Spacer()
             }
 
@@ -70,7 +70,7 @@ struct ReactionsUsersView: View {
             .background(Color(colors.background))
             .cornerRadius(16)
 
-            if !message.isSentByCurrentUser {
+            if !message.isRightAligned {
                 Spacer()
             }
         }

Sources/StreamChatSwiftUI/ChatChannel/Reactions/ReactionsView.swift

@@ -57,7 +57,7 @@ struct ReactionsContainer: View {
         if message.reactionScores.count == 1 {
             offset = 16
         }
-        return message.isSentByCurrentUser ? -offset : offset
+        return message.isRightAligned ? -offset : offset
     }
 }
 

Sources/StreamChatSwiftUI/Utils/Common/ChatMessage+Extensions.swift

@@ -85,4 +85,13 @@ public extension ChatMessage {
     var adjustedText: String {
         InjectedValues[\.utils].composerConfig.adjustMessageOnRead(text)
     }
+
+    var isRightAligned: Bool {
+        let config = InjectedValues[\.utils].messageListConfig
+        let messageListAlignment = config.messageListAlignment
+        if messageListAlignment == .leftAligned {
+            return false
+        }
+        return isSentByCurrentUser
+    }
 }