Config for left alignment of messages

martinmitrevski · martinmitrevski · commit ca75e5c19d24 · 2023-10-24T17:41:43.000+02:00
diff --git a/CHANGELOG.md b/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
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/DeletedMessageView.swift b/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)
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageBubble.swift b/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
     }
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageContainerView.swift b/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
     }
 
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListConfig.swift b/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
+}
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageRepliesView.swift b/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)
                 )
             )
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/Reactions/ReactionsHelperViews.swift b/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()
             }
         }
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/Reactions/ReactionsOverlayContainer.swift b/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 {
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/Reactions/ReactionsOverlayView.swift b/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
         }
 
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/Reactions/ReactionsUsersView.swift b/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()
             }
         }
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/Reactions/ReactionsView.swift b/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
     }
 }
 
diff --git a/Sources/StreamChatSwiftUI/Utils/Common/ChatMessage+Extensions.swift b/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
+    }
 }

Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,7 @@ public struct MessageContainerView<Factory: ViewFactory>: View {`
`62`	`62`	`if message.type == .system \|\| message.type == .error {`
`63`	`63`	`factory.makeSystemMessageView(message: message)`
`64`	`64`	`} else {`
`65`		`- if message.isSentByCurrentUser {`
	`65`	`+ if message.isRightAligned {`
`66`	`66`	`MessageSpacer(spacerWidth: spacerWidth)`
`67`	`67`	`} else {`
`68`	`68`	`if messageListConfig.messageDisplayOptions.showAvatars(for: channel) {`
`@@ -73,7 +73,7 @@ public struct MessageContainerView<Factory: ViewFactory>: View {`
`73`	`73`	`}`
`74`	`74`	`}`
`75`	`75`
`76`		`- VStack(alignment: message.isSentByCurrentUser ? .trailing : .leading) {`
	`76`	`+ VStack(alignment: message.isRightAligned ? .trailing : .leading) {`
`77`	`77`	`if isMessagePinned {`
`78`	`78`	`MessagePinDetailsView(`
`79`	`79`	`message: message,`
`@@ -185,7 +185,7 @@ public struct MessageContainerView<Factory: ViewFactory>: View {`
`185`	`185`	`factory.makeMessageDateView(for: message)`
`186`	`186`	`}`
`187`	`187`	`}`
`188`		`- } else if !message.isSentByCurrentUser`
	`188`	`+ } else if !message.isRightAligned`
`189`	`189`	`&& !channel.isDirectMessageChannel`
`190`	`190`	`&& messageListConfig.messageDisplayOptions.showAuthorName {`
`191`	`191`	`factory.makeMessageAuthorAndDateView(for: message)`
`@@ -203,7 +203,7 @@ public struct MessageContainerView<Factory: ViewFactory>: View {`
`203`	`203`	`: nil`
`204`	`204`	`)`
`205`	`205`
`206`		`- if !message.isSentByCurrentUser {`
	`206`	`+ if !message.isRightAligned {`
`207`	`207`	`MessageSpacer(spacerWidth: spacerWidth)`
`208`	`208`	`}`
`209`	`209`	`}`
`@@ -239,7 +239,7 @@ public struct MessageContainerView<Factory: ViewFactory>: View {`
`239`	`239`	`let minimumWidth: CGFloat = 240`
`240`	`240`	`let available = max(minimumWidth, (width ?? 0) - spacerWidth) - 2 * padding`
`241`	`241`	`let avatarSize: CGFloat = CGSize.messageAvatarSize.width + padding`
`242`		`- let totalWidth = message.isSentByCurrentUser ? available : available - avatarSize`
	`242`	`+ let totalWidth = message.isRightAligned ? available : available - avatarSize`
`243`	`243`	`return totalWidth`
`244`	`244`	`}`
`245`	`245`
Original file line number	Diff line number	Diff line change
`@@ -41,15 +41,15 @@ public struct MessageRepliesView<Factory: ViewFactory>: View {`
`41`	`41`	`)`
`42`	`42`	`} label: {`
`43`	`43`	`HStack {`
`44`		`- if !message.isSentByCurrentUser {`
	`44`	`+ if !message.isRightAligned {`
`45`	`45`	`MessageAvatarView(`
`46`	`46`	`avatarURL: message.threadParticipants.first?.imageURL,`
`47`	`47`	`size: .init(width: 16, height: 16)`
`48`	`48`	`)`
`49`	`49`	`}`
`50`	`50`	`Text("\(replyCount) \(repliesText)")`
`51`	`51`	`.font(fonts.footnoteBold)`
`52`		`- if message.isSentByCurrentUser {`
	`52`	`+ if message.isRightAligned {`
`53`	`53`	`MessageAvatarView(`
`54`	`54`	`avatarURL: message.threadParticipants.first?.imageURL,`
`55`	`55`	`size: .init(width: 16, height: 16)`
`@@ -81,7 +81,7 @@ public struct MessageRepliesView<Factory: ViewFactory>: View {`
`81`	`81`	`)`
`82`	`82`	`.offset(y: -24)`
`83`	`83`	`.rotation3DEffect(`
`84`		`- .degrees(message.isSentByCurrentUser ? 180 : 0),`
	`84`	`+ .degrees(message.isRightAligned ? 180 : 0),`
`85`	`85`	`axis: (x: 0, y: 1, z: 0)`
`86`	`86`	`)`
`87`	`87`	`)`
Original file line number	Diff line number	Diff line change
`@@ -16,13 +16,13 @@ public struct ReactionsHStack<Content: View>: View {`
`16`	`16`
`17`	`17`	`public var body: some View {`
`18`	`18`	`HStack {`
`19`		`- if !message.isSentByCurrentUser {`
	`19`	`+ if !message.isRightAligned {`
`20`	`20`	`Spacer()`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`content()`
`24`	`24`
`25`		`- if message.isSentByCurrentUser {`
	`25`	`+ if message.isRightAligned {`
`26`	`26`	`Spacer()`
`27`	`27`	`}`
`28`	`28`	`}`
Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ struct ReactionsUsersView: View {`
`32`	`32`
`33`	`33`	`var body: some View {`
`34`	`34`	`HStack {`
`35`		`- if message.isSentByCurrentUser {`
	`35`	`+ if message.isRightAligned {`
`36`	`36`	`Spacer()`
`37`	`37`	`}`
`38`	`38`
`@@ -70,7 +70,7 @@ struct ReactionsUsersView: View {`
`70`	`70`	`.background(Color(colors.background))`
`71`	`71`	`.cornerRadius(16)`
`72`	`72`
`73`		`- if !message.isSentByCurrentUser {`
	`73`	`+ if !message.isRightAligned {`
`74`	`74`	`Spacer()`
`75`	`75`	`}`
`76`	`76`	`}`