V5 message list layout

[laevandus]

🔗 Issue Links

Related: IOS-1379

🎯 Goal

Extract the core message rendering logic into a new MessageItemView and fix the layout to match the Figma design system.

📝 Summary

• Renamed MessageContainerView to MessageItemView; extracted swipe-to-reply into a SwipeToReplyModifier and split layout into focused sub-views (messageBubbleContent, avatarView, threadRepliesView, deliveryStatusView)
• Added shownAsPreview mode that propagates a previewTextColor (colors.textOnAccent) to thread replies, delivery status, and translation footer views
• ReactionsOverlayView now delegates message rendering to makeMessageItemView(shownAsPreview: true), removing ~80 lines of duplicated layout code
• Removed MessageSpacer; alignment handled via VStack alignment and .frame(maxWidth:alignment:)
• Updated MessageRepliesView thread connector path to use Figma-exported SVG bezier curve
• Refactored QuotedMessageView and ChatQuotedMessageView so incoming/outgoing style is driven by the parent message (quotedByCurrentUser, shownInMessageList) instead of the quoted message
• ReferenceMessageViewBackgroundModifier now takes a backgroundColor: Color directly instead of computing it from isSentByCurrentUser
• Added textColor: UIColor? parameter to MessageAuthorView, MessageReadIndicatorView, MessageTranslationFooterView, MessageRepliesView, and their corresponding factory options
• Changed MessageDateView.textColor type from Color? to UIColor? for consistency with other views
• Adjusted default layout values: horizontal padding 8 → 16, group bottom spacing 2 → 4, spacer width availableWidth/4 → 82, reactions top padding 24 → 20
• Renamed MessageContainerViewOptions to MessageItemViewOptions; added

🧪 Manual Testing Notes

N/A

☑️ Contributor Checklist

• I have signed the Stream CLA (required)
• This change should be manually QAed
• Changelog is updated with client-facing changes
• Changelog is updated with new localization keys
• New code is covered by unit tests
• Documentation has been updated in the docs-content repo

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch v5-message-list-layout

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[laevandus]

Slightly different background colors and logic. Else is used by composer

[laevandus]

Used by composer and message list, needed changes to support different background colors.

[laevandus]

This is going to be used by reactions overlay. Message gesture logic stays here, but the main layout logic is now there along with reactions.

[github-actions]

	1 Warning
⚠️	Big PR

	1 Message
📖	There seems to be app changes but CHANGELOG wasn't modified. Please include an entry if the PR includes user-facing changes. You can find it at CHANGELOG.md.

Generated by 🚫 Danger

[laevandus]

Main changes here is that we use alignment instead of spacers. Fixes many of small layout issues in messages with different attachments and applies updated spacings from Figma.
Next PR will implement updated bottom and top reactions.

[laevandus]

Changed the color for now, it looks too out of place if different color is used. There is an open question about it in Figma.

[laevandus]

Code comments

[martinmitrevski]

looks good in general, left few comments. Also, few UI glitches shared on slack.

[martinmitrevski]

can we pass the translation language in the options now?

[laevandus]

We can, will clean this up in the PR finally

[laevandus]

Looked into this, going to be a bigger refactoring along with message view model env key and translations store. There is a ticket for that, proposing to do this with a separate PR.

[martinmitrevski]

ok, let's do it in another one

[martinmitrevski]

it's a bit tricky to track changes because of the new file. What else was changed except the swipe modifier? Which section to focus on?

[laevandus]

This got messy since I renamed, iterated a couple of times.

Handwritten notes

/// A view that renders a single message item in the message list, including
/// the avatar, bubble, reactions, thread replies, delivery status, and gesture handling.
public struct MessageItemView<Factory: ViewFactory>: View {
    
    public init(
        factory: Factory,
        channel: ChatChannel,
        message: ChatMessage,
        width: CGFloat? = nil,
        showsAllInfo: Bool,
        shownAsPreview: Bool = false, <<< for changing colors when shown in the ReactionsOverlayView
        
    public var body: some View {
        HStack(alignment: .bottom) {
// …    
                    .onTapGesture(count: 2) {
                        if messageViewModel.isDoubleTapOverlayEnabled {
                            handleGestureForMessage(showsMessageActions: true)
                        }
                    }
                    .onLongPressGesture(perform: {
                        handleGestureForMessage(showsMessageActions: true)
                    })
                    
                    // Swiping is in a view modifier for making it easier to turn it off when this view is used in the ReactionsOverlayView
                    .modifier(SwipeToReplyModifier(
                        message: message,
                        channel: channel,
                        isSwipeToQuoteReplyPossible: !shownAsPreview && messageViewModel.isSwipeToQuoteReplyPossible,
                        quotedMessage: $quotedMessage
                    ))
            }
// …
    }

    // MARK: - Message Content

    private var messageView: some View {
        
        // layout changes with new spacings and using alignment instead of spacers
        
        
        HStack(alignment: .bottom, spacing: tokens.spacingXs) {
            if !messageViewModel.isRightAligned {
                avatarView
            }

            VStack(
                alignment: messageViewModel.isRightAligned ? .trailing : .leading,
                spacing: tokens.spacingXxs
            ) {
                if messageViewModel.isPinned {
                    MessagePinDetailsView(
                        message: message,
                        reactionsShown: topReactionsShown
                    )
                }

                messageBubbleContent
                    .accessibilityElement(children: .contain)
                    .accessibilityIdentifier("MessageView")

                if !isInThread {
                    threadRepliesView
                }

                if bottomReactionsShown {
                    factory.makeBottomReactionsView(
                        options: ReactionsBottomViewOptions(
                            message: message,
                            showsAllInfo: showsAllInfo,
                            onTap: {
                                handleGestureForMessage(showsMessageActions: false)
                            },
                            onLongPress: {
                                handleGestureForMessage(showsMessageActions: false)
                            }
                        )
                    )
                }

                if messageViewModel.translatedText != nil {
                    factory.makeMessageTranslationFooterView(
                        options: MessageTranslationFooterViewOptions(
                            messageViewModel: messageViewModel,
                            usesInvertedStyle: shownAsPreview <<< - makes the color light when shown on ReactionsOverlayView
                        )
                    )
                }

                // …
    }

    // MARK: - Sub-views

    @ViewBuilder
    private var messageBubbleContent: some View {
        Group {
            if messageViewModel.usesScrollView { <<< special for ReactionsOverlayView when long message becomes scrollable
                ScrollView {
                    MessageView(
                        factory: factory,
                        message: message,
                        contentWidth: contentWidth,
                        isFirst: showsAllInfo,
                        scrolledId: $scrolledId
                    )
                }
            } else {
                MessageView(
                    factory: factory,
                    message: message,
                    contentWidth: contentWidth,
                    isFirst: showsAllInfo,
                    scrolledId: $scrolledId
                )
            }
        }
        .overlay(
            topReactionsShown ?
                factory.makeMessageReactionView(
                    options: MessageReactionViewOptions(
                        message: message,
                        onTapGesture: {
                            handleGestureForMessage(showsMessageActions: false)
                        },
                        onLongPressGesture: {
                            handleGestureForMessage(showsMessageActions: false)
                        }
                    )
                )
                : nil,
            alignment: messageViewModel.isRightAligned ? .trailing : .leading 
        )
        .overlay(
            messageViewModel.failureIndicatorShown ? SendFailureIndicator() : nil
        )
        .frame(maxWidth: contentWidth, alignment: messageViewModel.isRightAligned ? .trailing : .leading)
    }

    @ViewBuilder
    private var avatarView: some View {
        factory.makeUserAvatarView(
            options: UserAvatarViewOptions(
                user: message.author,
                size: AvatarSize.medium,
                showsIndicator: false
            )
        )
        .opacity(isLast || showsAllInfo ? 1 : 0)
    }

    @ViewBuilder
    private var threadRepliesView: some View {
        if message.replyCount > 0 {
            factory.makeMessageRepliesView(
                options: MessageRepliesViewOptions(
                    channel: channel,
                    message: message,
                    replyCount: message.replyCount,
                    usesInvertedStyle: shownAsPreview
                )
            )
            .accessibilityElement(children: .contain)
            .accessibility(identifier: "MessageRepliesView")
        } else if message.showReplyInChannel,
                  let parentId = message.parentMessageId,
                  let controller = utils.channelControllerFactory.currentChannelController,
                  let parentMessage = controller.dataStore.message(id: parentId) {
            factory.makeMessageRepliesShownInChannelView(
                options: MessageRepliesShownInChannelViewOptions(
                    channel: channel,
                    message: message,
                    parentMessage: parentMessage,
                    replyCount: parentMessage.replyCount,
                    usesInvertedStyle: shownAsPreview
                )
            )
            .accessibilityElement(children: .contain)
            .accessibility(identifier: "MessageRepliesView")
        } else if message.showReplyInChannel, let parentId = message.parentMessageId {
            LazyMessageRepliesView(
                factory: factory,
                channel: channel,
                message: message,
                parentMessageController: chatClient.messageController(
                    cid: channel.cid,
                    messageId: parentId
                ),
                usesInvertedStyle: shownAsPreview
            )
            .accessibilityElement(children: .contain)
            .accessibility(identifier: "MessageRepliesView")
        }
    }

    @ViewBuilder
    private var deliveryStatusView: some View {
        
        // Spacings and coloring changes
        
        if message.isSentByCurrentUser && channel.config.readEventsEnabled {
            HStack(spacing: tokens.spacingXxs) {
                factory.makeMessageReadIndicatorView(
                    options: MessageReadIndicatorViewOptions(
                        channel: channel,
                        message: message,
                        usesInvertedStyle: shownAsPreview
                    )
                )

                if messageViewModel.messageDateShown {
                    factory.makeMessageDateView(
                        options: MessageDateViewOptions(message: message, usesInvertedStyle: shownAsPreview)
                    )
                }
            }
            .padding(.bottom, tokens.spacingXxs)
        } else if messageViewModel.authorAndDateShown {
            factory.makeMessageAuthorAndDateView(
                options: MessageAuthorAndDateViewOptions(message: message, usesInvertedStyle: shownAsPreview)
            )
            .padding(.bottom, tokens.spacingXxs)
        } else if messageViewModel.messageDateShown {
            factory.makeMessageDateView(
                options: MessageDateViewOptions(message: message, usesInvertedStyle: shownAsPreview)
            )
            .padding(.bottom, tokens.spacingXxs)
        }
    }

    // MARK: - Computed Properties
//  …
}

// MARK: - Swipe to Reply

private struct SwipeToReplyModifier: ViewModifier {
    let message: ChatMessage
    let channel: ChatChannel
    let isSwipeToQuoteReplyPossible: Bool
    @Binding var quotedMessage: ChatMessage?

    @Injected(\.images) private var images
    @Injected(\.utils) private var utils

    @State private var offsetX: CGFloat = 0
    @GestureState private var offset: CGSize = .zero

    private let replyThreshold: CGFloat = 60

    func body(content: Content) -> some View {
        
        // Same as before, just moved
        
        
        content
            .offset(x: min(offsetX, maximumHorizontalSwipeDisplacement))
            .simultaneousGesture(
                DragGesture(
                    minimumDistance: minimumSwipeDistance,
                    coordinateSpace: .local
                )
                .updating($offset) { (value, gestureState, _) in
                    guard isSwipeToQuoteReplyPossible else {
                        return
                    }
                    let diff = CGSize(
                        width: value.location.x - value.startLocation.x,
                        height: value.location.y - value.startLocation.y
                    )

                    if diff == .zero {
                        gestureState = .zero
                    } else {
                        gestureState = value.translation
                    }
                }
            )
            .onChange(of: offset, perform: { _ in
                if !channel.config.quotesEnabled {
                    return
                }

                if offset == .zero {
                    setOffsetX(value: 0)
                } else {
                    dragChanged(to: offset.width)
                }
            })
            .overlay(
                offsetX > 0 ?
                    TopLeftView {
                        Image(uiImage: images.messageActionInlineReply)
                    }
                    .offset(x: -32)
                    : nil
            )
    }

    private var maximumHorizontalSwipeDisplacement: CGFloat {
        replyThreshold + 30
    }

    private var minimumSwipeDistance: CGFloat {
        utils.messageListConfig.messageDisplayOptions.minimumSwipeGestureDistance
    }

    private func dragChanged(to value: CGFloat) {
        let horizontalTranslation = value

        if horizontalTranslation < 0 {
            return
        }

        if horizontalTranslation >= minimumSwipeDistance {
            offsetX = horizontalTranslation
        } else {
            offsetX = 0
        }

        if offsetX > replyThreshold && quotedMessage != message {
            UIImpactFeedbackGenerator(style: .medium).impactOccurred()
            withAnimation {
                quotedMessage = message
            }
        }
    }

    private func setOffsetX(value: CGFloat) {
        withAnimation(.interpolatingSpring(stiffness: 170, damping: 20)) {
            offsetX = value
        }
    }
}

[martinmitrevski]

I assume this will get re-created many times?

[laevandus]

Same as before, this has a TODO for fixing it in v5. Needs separate PR.

[martinmitrevski]

this feels random?

[laevandus]

I will document this

[martinmitrevski]

why do we pass this text color everywhere? Can't we put it in the color palete?

[laevandus]

In message list this is one value, on reactions overlay this needs to be a different (lighter) color. Let me think if there is nicer way. Environment key could be an option here for communicating this without littering everything with extra color arguments.

[laevandus]

I'll change it around.

[laevandus]

Layout issue when it was shown in the reactions overlay.

[nuno-vieira]

Overall looks really good 👌 I'm only requesting changes because the shownInMessageList: false goes against the new API design of the Quoted Message View. Other than that, all good

[nuno-vieira]

We shouldn't be having this. The goal of ChatQuotedMessageView vs ComposerQuotedMessageView is to have the context of where is the child QuotedMessageView is being rendered.

[laevandus]

Slight refactor of ReferenceMessageView where there is now outgoing style parameter since the styling in composer uses quotedMessage.isSentByCurrentUser, but in chat quoted message view it is parent view's isSentByCurrentUser. This is needed for the vertical line in that view which needs different color.

Example, here I am quoting my own message and other participant's message. Styling needs to use the outgoing style.

[nuno-vieira]

We should opt for either passing the background color or moving the ReferenceMessageViewBackgroundModifier to the upper views

Suggested change

	shownInMessageList: true
	backgroundColor: Color

[laevandus]

Moved

[nuno-vieira]

Yup this makes sense. I initially wanted to do this, I was already guessing it would require changes since it was not very flexible the way it was before

[github-actions]

Public Interface

+ public struct MessageItemView: View  
+ 
+   public var body: some View
+   
+ 
+   public init(factory: Factory,channel: ChatChannel,message: ChatMessage,width: CGFloat? = nil,showsAllInfo: Bool,shownAsPreview: Bool = false,isInThread: Bool,isLast: Bool,scrolledId: Binding<String?>,quotedMessage: Binding<ChatMessage?>,onLongPress: @escaping (MessageDisplayInfo) -> Void,viewModel: MessageViewModel? = nil)

+ public final class MessageItemViewOptions: Sendable  
+ 
+   public let channel: ChatChannel
+   public let message: ChatMessage
+   public let width: CGFloat?
+   public let showsAllInfo: Bool
+   public let shownAsPreview: Bool
+   public let isInThread: Bool
+   public let scrolledId: Binding<String?>
+   public let quotedMessage: Binding<ChatMessage?>
+   public let onLongPress: @MainActor (MessageDisplayInfo) -> Void
+   public let isLast: Bool
+   public let viewModel: MessageViewModel?
+   
+ 
+   public init(channel: ChatChannel,message: ChatMessage,width: CGFloat?,showsAllInfo: Bool,shownAsPreview: Bool = false,isInThread: Bool,scrolledId: Binding<String?>,quotedMessage: Binding<ChatMessage?>,onLongPress: @escaping @MainActor (MessageDisplayInfo) -> Void,isLast: Bool,viewModel: MessageViewModel? = nil)

- public struct MessageContainerView: View  
- 
-   public var body: some View
-   
- 
-   public init(factory: Factory,channel: ChatChannel,message: ChatMessage,width: CGFloat? = nil,showsAllInfo: Bool,isInThread: Bool,isLast: Bool,scrolledId: Binding<String?>,quotedMessage: Binding<ChatMessage?>,onLongPress: @escaping (MessageDisplayInfo) -> Void,viewModel: MessageViewModel? = nil)

- public final class MessageContainerViewOptions: Sendable  
- 
-   public let channel: ChatChannel
-   public let message: ChatMessage
-   public let width: CGFloat?
-   public let showsAllInfo: Bool
-   public let isInThread: Bool
-   public let scrolledId: Binding<String?>
-   public let quotedMessage: Binding<ChatMessage?>
-   public let onLongPress: @MainActor (MessageDisplayInfo) -> Void
-   public let isLast: Bool
-   
- 
-   public init(channel: ChatChannel,message: ChatMessage,width: CGFloat?,showsAllInfo: Bool,isInThread: Bool,scrolledId: Binding<String?>,quotedMessage: Binding<ChatMessage?>,onLongPress: @escaping @MainActor (MessageDisplayInfo) -> Void,isLast: Bool)

 public final class MessageRepliesShownInChannelViewOptions: Sendable  
-   
+   public let usesInvertedStyle: Bool
- 
+   
-   public init(channel: ChatChannel,message: ChatMessage,parentMessage: ChatMessage,replyCount: Int)
+ 
+   public init(channel: ChatChannel,message: ChatMessage,parentMessage: ChatMessage,replyCount: Int,usesInvertedStyle: Bool = false)

 public final class MessageDateViewOptions: Sendable  
-   public let textColor: Color?
+   public let usesInvertedStyle: Bool
-   public init(message: ChatMessage,textColor: Color? = nil)
+   public init(message: ChatMessage,usesInvertedStyle: Bool = false)

 @MainActor open class MessageViewModel: ObservableObject  
-   public var originalTextShown: Bool
+   @Published public var usesScrollView: Bool
-   public var systemMessageShown: Bool
+   public var originalTextShown: Bool
-   public var reactionsShown: Bool
+   public var systemMessageShown: Bool
-   public var failureIndicatorShown: Bool
+   public var reactionsShown: Bool
-   open var authorAndDateShown: Bool
+   public var failureIndicatorShown: Bool
-   open var messageDateShown: Bool
+   open var authorAndDateShown: Bool
-   public var isPinned: Bool
+   open var messageDateShown: Bool
-   public var isRightAligned: Bool
+   public var isPinned: Bool
-   public var messageAuthor: ChatUser?
+   public var isRightAligned: Bool
-   open var isSwipeToQuoteReplyPossible: Bool
+   public var messageAuthor: ChatUser?
-   open var textContent: String
+   public var isDoubleTapOverlayEnabled: Bool
-   public var translatedText: String?
+   open var isSwipeToQuoteReplyPossible: Bool
-   public var translatedLanguageText: String?
+   open var textContent: String
-   public var originalTranslationButtonText: String
+   public var translatedText: String?
-   
+   public var translatedLanguageText: String?
- 
+   public var originalTranslationButtonText: String
-   public init(message: ChatMessage,channel: ChatChannel?)
+   
-   
+ 
- 
+   public init(message: ChatMessage,channel: ChatChannel?)
-   public func showOriginalText()
+   
-   public func hideOriginalText()
+ 
+   public func showOriginalText()
+   public func hideOriginalText()
+   public func isHighlighted(messageId: String?)-> Bool

 public final class QuotedMessageViewOptions: Sendable  
-   public let padding: EdgeInsets?
+   public let outgoing: Bool
-   
+   public let padding: EdgeInsets?
- 
+   
-   public init(quotedMessage: ChatMessage,padding: EdgeInsets? = nil)
+ 
+   public init(quotedMessage: ChatMessage,outgoing: Bool,padding: EdgeInsets? = nil)

 public struct MessageTranslationFooterView: View  
-   public init(messageViewModel: MessageViewModel)
+   public init(messageViewModel: MessageViewModel,usesInvertedStyle: Bool = false)

 public final class MessageTranslationFooterViewOptions: Sendable  
-   
+   public let usesInvertedStyle: Bool
- 
+   
-   public init(messageViewModel: MessageViewModel)
+ 
+   public init(messageViewModel: MessageViewModel,usesInvertedStyle: Bool = false)

 public struct ReferenceMessageView: View  
-   public let isSentByCurrentUser: Bool
+   public let outgoing: Bool
-   public init(title: String,subtitle: String,isSentByCurrentUser: Bool,@ViewBuilder iconPreview: () -> IconPreview,@ViewBuilder attachmentPreview: () -> AttachmentPreview)
+   public init(title: String,subtitle: String,outgoing: Bool,@ViewBuilder iconPreview: () -> IconPreview,@ViewBuilder attachmentPreview: () -> AttachmentPreview)

 public final class MessageDisplayOptions  
-   public let showAvatars: Bool
+   public let showIncomingMessageAvatar: Bool
-   public let showAvatarsInGroups: Bool
+   public let showOutgoingMessageAvatar: Bool
-   public let showMessageDate: Bool
+   public let showAvatarsInGroups: Bool
-   public let showAuthorName: Bool
+   public let showMessageDate: Bool
-   public let animateChanges: Bool
+   public let showAuthorName: Bool
-   public let dateLabelSize: CGFloat
+   public let animateChanges: Bool
-   public let lastInGroupHeaderSize: CGFloat
+   public let dateLabelSize: CGFloat
-   public let newMessagesSeparatorSize: CGFloat
+   public let lastInGroupHeaderSize: CGFloat
-   public let minimumSwipeGestureDistance: CGFloat
+   public let newMessagesSeparatorSize: CGFloat
-   public let currentUserMessageTransition: AnyTransition
+   public let minimumSwipeGestureDistance: CGFloat
-   public let otherUserMessageTransition: AnyTransition
+   public let currentUserMessageTransition: AnyTransition
-   public let shouldAnimateReactions: Bool
+   public let otherUserMessageTransition: AnyTransition
-   public let reactionsPlacement: ReactionsPlacement
+   public let shouldAnimateReactions: Bool
-   public let reactionsStyle: ReactionsStyle
+   public let reactionsPlacement: ReactionsPlacement
-   public let showOriginalTranslatedButton: Bool
+   public let reactionsStyle: ReactionsStyle
-   public let messageLinkDisplayResolver: @MainActor (ChatMessage) -> [NSAttributedString.Key: Any]
+   public let showOriginalTranslatedButton: Bool
-   public let spacerWidth: (CGFloat) -> CGFloat
+   public let messageLinkDisplayResolver: @MainActor (ChatMessage) -> [NSAttributedString.Key: Any]
-   public let reactionsTopPadding: (ChatMessage) -> CGFloat
+   public let spacerWidth: @MainActor (CGFloat) -> CGFloat
-   public let dateSeparator: (ChatMessage, ChatMessage) -> Date?
+   public let reactionsTopPadding: (ChatMessage) -> CGFloat
-   public static var defaultLinkDisplay: @MainActor (ChatMessage) -> [NSAttributedString.Key: Any]
+   public let dateSeparator: (ChatMessage, ChatMessage) -> Date?
-   public static var defaultSpacerWidth: (CGFloat) -> (CGFloat)
+   public static var defaultLinkDisplay: @MainActor (ChatMessage) -> [NSAttributedString.Key: Any]
-   public static var defaultReactionsTopPadding: (ChatMessage) -> CGFloat
+   public static var defaultSpacerWidth: @MainActor (CGFloat) -> (CGFloat)
-   
+   public static var defaultReactionsTopPadding: (ChatMessage) -> CGFloat
- 
+   
-   public init(showAvatars: Bool = true,showAvatarsInGroups: Bool? = nil,showMessageDate: Bool = true,showAuthorName: Bool = true,animateChanges: Bool = true,overlayDateLabelSize: CGFloat = 40,lastInGroupHeaderSize: CGFloat = 0,newMessagesSeparatorSize: CGFloat = 50,minimumSwipeGestureDistance: CGFloat = 20,currentUserMessageTransition: AnyTransition = .identity,otherUserMessageTransition: AnyTransition = .identity,shouldAnimateReactions: Bool = true,reactionsPlacement: ReactionsPlacement = .top,reactionsStyle: ReactionsStyle = .segmented,showOriginalTranslatedButton: Bool = false,messageLinkDisplayResolver: @escaping @MainActor (ChatMessage) -> [NSAttributedString.Key: Any] = MessageDisplayOptions
+ 
-             .defaultLinkDisplay,spacerWidth: @escaping (CGFloat) -> CGFloat = MessageDisplayOptions.defaultSpacerWidth,reactionsTopPadding: @escaping (ChatMessage) -> CGFloat = MessageDisplayOptions.defaultReactionsTopPadding,dateSeparator: @escaping (ChatMessage, ChatMessage) -> Date? = MessageDisplayOptions.defaultDateSeparator)
+   public init(showIncomingMessageAvatar: Bool = true,showOutgoingMessageAvatar: Bool = false,showAvatarsInGroups: Bool = true,showMessageDate: Bool = true,showAuthorName: Bool = true,animateChanges: Bool = true,overlayDateLabelSize: CGFloat = 40,lastInGroupHeaderSize: CGFloat = 0,newMessagesSeparatorSize: CGFloat = 50,minimumSwipeGestureDistance: CGFloat = 20,currentUserMessageTransition: AnyTransition = .identity,otherUserMessageTransition: AnyTransition = .identity,shouldAnimateReactions: Bool = true,reactionsPlacement: ReactionsPlacement = .top,reactionsStyle: ReactionsStyle = .segmented,showOriginalTranslatedButton: Bool = false,messageLinkDisplayResolver: @escaping @MainActor (ChatMessage) -> [NSAttributedString.Key: Any] = MessageDisplayOptions
-   
+             .defaultLinkDisplay,spacerWidth: @escaping @MainActor (CGFloat) -> CGFloat = MessageDisplayOptions.defaultSpacerWidth,reactionsTopPadding: @escaping (ChatMessage) -> CGFloat = MessageDisplayOptions.defaultReactionsTopPadding,dateSeparator: @escaping (ChatMessage, ChatMessage) -> Date? = MessageDisplayOptions.defaultDateSeparator)
- 
+   
-   public func showAvatars(for channel: ChatChannel)-> Bool
+ 
-   public static func defaultDateSeparator(message: ChatMessage,previous: ChatMessage)-> Date?
+   public func showAvatars(for channel: ChatChannel,incoming: Bool)-> Bool
+   public static func defaultDateSeparator(message: ChatMessage,previous: ChatMessage)-> Date?

 @MainActor open class QuotedMessageViewModel  
-   open var title: String
+   public let outgoing: Bool
-   open var authorName: String
+   open var title: String
-   open var isSentByCurrentUser: Bool
+   open var authorName: String
-   public init(message: ChatMessage,currentUser: CurrentChatUser?)
+   public init(message: ChatMessage,currentUser: CurrentChatUser?,outgoing: Bool)

 public struct MessageRepliesView: View  
-   public init(factory: Factory,channel: ChatChannel,message: ChatMessage,replyCount: Int,showReplyCount: Bool = true,isRightAligned: Bool? = nil,threadReplyMessage: ChatMessage? = nil)
+   public init(factory: Factory,channel: ChatChannel,message: ChatMessage,replyCount: Int,showReplyCount: Bool = true,isRightAligned: Bool? = nil,usesInvertedStyle: Bool = false,threadReplyMessage: ChatMessage? = nil)

 extension ViewFactory  
-   public func makeMessageContainerView(options: MessageContainerViewOptions)-> some View
+   public func makeMessageItemView(options: MessageItemViewOptions)-> some View

 public struct ReactionsOverlayView: View  
-   public init(factory: Factory,channel: ChatChannel,currentSnapshot: UIImage,messageDisplayInfo: MessageDisplayInfo,topOffset: CGFloat = 0,bottomOffset: CGFloat = 0,onBackgroundTap: @escaping () -> Void,onActionExecuted: @escaping (MessageActionInfo) -> Void,viewModel: ReactionsOverlayViewModel? = nil,messageViewModel: MessageViewModel? = nil)
+   public init(factory: Factory,channel: ChatChannel,currentSnapshot: UIImage,messageDisplayInfo: MessageDisplayInfo,verticalInset: CGFloat = 40,onBackgroundTap: @escaping () -> Void,onActionExecuted: @escaping (MessageActionInfo) -> Void,viewModel: ReactionsOverlayViewModel? = nil,messageViewModel: MessageViewModel? = nil)

 public final class MessageReadIndicatorViewOptions: Sendable  
-   
+   public let usesInvertedStyle: Bool
- 
+   
-   public init(channel: ChatChannel,message: ChatMessage)
+ 
+   public init(channel: ChatChannel,message: ChatMessage,usesInvertedStyle: Bool = false)

 public final class ChatQuotedMessageViewOptions: Sendable  
-   public let scrolledId: Binding<String?>
+   public let parentMessage: ChatMessage
-   
+   public let scrolledId: Binding<String?>
- 
+   
-   public init(quotedMessage: ChatMessage,scrolledId: Binding<String?>)
+ 
+   public init(quotedMessage: ChatMessage,parentMessage: ChatMessage,scrolledId: Binding<String?>)

 public final class MessagePaddings  
-   public init(horizontal: CGFloat = 8,quotedViewPadding: CGFloat = 8,singleBottom: CGFloat = 8,groupBottom: CGFloat = 2)
+   public init(horizontal: CGFloat = 16,quotedViewPadding: CGFloat = 16,singleBottom: CGFloat = 8,groupBottom: CGFloat = 4)

 public struct MessageReadIndicatorView: View  
-   public init(readUsers: [ChatUser],showReadCount: Bool,showDelivered: Bool = false,localState: LocalMessageState? = nil)
+   public init(readUsers: [ChatUser],showReadCount: Bool,showDelivered: Bool = false,localState: LocalMessageState? = nil,usesInvertedStyle: Bool = false)

 public final class MessageRepliesViewOptions: Sendable  
-   
+   public let usesInvertedStyle: Bool
- 
+   
-   public init(channel: ChatChannel,message: ChatMessage,replyCount: Int)
+ 
+   public init(channel: ChatChannel,message: ChatMessage,replyCount: Int,usesInvertedStyle: Bool = false)

 public struct MessageAuthorAndDateView: View  
-   public init(message: ChatMessage)
+   public init(message: ChatMessage,usesInvertedStyle: Bool = false)

 public struct ChatQuotedMessageView: View  
-   public init(factory: Factory,quotedMessage: ChatMessage,scrolledId: Binding<String?>)
+   public init(factory: Factory,quotedMessage: ChatMessage,parentMessage: ChatMessage,scrolledId: Binding<String?>)

 public final class MessageAuthorAndDateViewOptions: Sendable  
-   
+   public let usesInvertedStyle: Bool
- 
+   
-   public init(message: ChatMessage)
+ 
+   public init(message: ChatMessage,usesInvertedStyle: Bool = false)

 public struct MessageAuthorView: View  
-   public init(message: ChatMessage)
+   public init(message: ChatMessage,usesInvertedStyle: Bool = false)

[Stream-SDK-Bot]

SDK Size

title	v5	branch	diff	status
StreamChatSwiftUI	9.34 MB	9.46 MB	+117 KB	🟢

[Stream-SDK-Bot]

StreamChatSwiftUI XCSize

Object	Diff (bytes)
MessageItemView.o	+451537
MessageContainerView.o	-214957
MessageRepliesView.o	-89922
MessageListHelperViews.o	-24346
ReactionsOverlayView.o	-12280

Show 23 more objects

Object	Diff (bytes)
MessageViewModel.o	+2727
ChatQuotedMessageView.o	+998
MessageViewFactoryOptions.o	+853
ComposerQuotedMessageView.o	+746
QuotedMessageView.o	-670
MessageListConfig.o	+662
MessageView.o	+644
ComposerViewFactoryOptions.o	+605
GiphyAttachmentView.o	-514
ReferenceMessageViewBackgroundModifier.o	-455
DefaultViewFactory.o	+448
MessageTranslationFooterView.o	+382
ChatChannelHeaderViewModifier.o	-296
VoiceRecordingContainerView.o	+136
ImageAttachmentView.o	+136
MessageListView.o	+132
EditedMessageView.o	+116
LinkAttachmentView.o	+116
QuotedMessageViewModel.o	+106
FileAttachmentView.o	+104
VideoAttachmentView.o	+92
ReactionsViewFactoryOptions.o	-88
ChatThreadListItem.o	-76

[sonarqubecloud]

Quality Gate failed

Failed conditions
1 Security Hotspot
74.9% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

[nuno-vieira]

LGTM! ✅