Message Inline Replies

The SwiftUI SDK supports inline message replies that can be invoked by swiping left on a message or long-pressing and selecting “Reply”. When a message is quoted, it appears in the message composer as an indication of which message the user is replying to.

View Customizations

The SDK provides five view factory methods for customizing inline replies:

1. makeQuotedMessageHeaderView() - Replaces the header at the top of the composer when a message is quoted.
2. makeQuotedMessageAvatarView() - Replaces just the author’s avatar of the quoted message view.
3. makeCustomAttachmentQuotedView() - Replaces only the attachment preview view in case the quoted message contains a custom attachment.
4. makeQuotedMessageContentView() - Replaces the view inside the quoted message bubble, keeping the bubble layout and avatar the same.
5. makeQuotedMessageView() - Replaces the entire quoted message view container including avatar and the bubble message view.

Composer Quoted Message Header

When a message appears as quoted in the composer, you can customize the header at the top of the composer. By default, it displays a title and a button to remove the quoted message. To replace this view, implement the makeQuotedMessageHeaderView method in your ViewFactory:

public func makeQuotedMessageHeaderView(
    quotedMessage: Binding<ChatMessage?>
) -> some View {
    CustomQuotedMessageHeaderView(quotedMessage: quotedMessage)
}

Quoted Message Avatar

You can customize the author’s avatar of the quoted message view when it appears both in the composer and the message list. By default, it displays the author’s avatar. To replace this view, implement the makeQuotedMessageAvatarView method in your ViewFactory:

public func makeQuotedMessageAvatarView(
    for userDisplayInfo: UserDisplayInfo,
    size: CGSize
) -> some View {
    CustomMessageAvatarView(avatarURL: userDisplayInfo.imageURL, size: size)
}

Custom Quoted Attachment Preview

For custom attachments, you can replace just the attachment preview within the quoted message by implementing makeCustomAttachmentQuotedView:

func makeCustomAttachmentQuotedView(
    for message: ChatMessage
) -> some View {
    CustomQuotedAttachmentPreviewView(message: message)
}

If you need to change the size of the attachment preview, you need to do it in the quoted message container view:

func makeQuotedMessageView(
    quotedMessage: ChatMessage,
    fillAvailableSpace: Bool,
    isInComposer: Bool,
    scrolledId: Binding<String?>
) -> some View {
    if quotedMessage.allAttachments.first?.type == "custom" {
        return QuotedMessageViewContainer(
            factory: self,
            quotedMessage: quotedMessage,
            fillAvailableSpace: fillAvailableSpace,
            forceLeftToRight: isInComposer,
            scrolledId: scrolledId,
            attachmentSize: CGSize(width: 50, height: 50)
        )
    }
    return QuotedMessageViewContainer(
        factory: self,
        quotedMessage: quotedMessage,
        fillAvailableSpace: fillAvailableSpace,
        forceLeftToRight: isInComposer,
        scrolledId: scrolledId
    )
}

Quoted Message Content

To customize the content inside the quoted message bubble, keeping the bubble layout and avatar the same, you should use the makeQuotedMessageContentView method.

public func makeQuotedMessageContentView(
    options: QuotedMessageContentViewOptions
) -> some View {
    CustomQuotedMessageContentView(options: options)
}

Custom Attachment Layout

By customizing the content view you can change the full layout of the quoted message when it has a custom attachment, giving you full control over the layout. This is useful if you want to show a larger attachment preview or the full attachment content in the quoted message view.

func makeQuotedMessageContentView(
        options: QuotedMessageContentViewOptions
) -> some View {
    Group {
        if let footballGamePayload = options.quotedMessage.footballGamePayload {
            FootballGameAttachmentView(payload: footballGamePayload)
        } else {
            // Fallback to the default content view for native attachments
            QuotedMessageContentView(
                factory: self,
                options: options
            )
        }
    }
}

extension ChatMessage {
    var footballGamePayload: FootballGameAttachmentPayload? {
        attachments(payloadType: FootballGameAttachmentPayload.self).first?.payload
    }
}

Quoted Message Container

To customize the complete quoted message container, including the author’s avatar and the bubble message view, you should implement the makeQuotedMessageView method:

func makeQuotedMessageView(
    quotedMessage: ChatMessage,
    fillAvailableSpace: Bool,
    isInComposer: Bool,
    scrolledId: Binding<String?>
) -> some View {
    CustomQuotedMessageContainer(
        quotedMessage: quotedMessage,
        fillAvailableSpace: fillAvailableSpace,
        isInComposer: isInComposer,
        scrolledId: scrolledId
    )
}

Parameters:

• quotedMessage - The quoted message to display
• fillAvailableSpace - Whether the view should take all available space
• isInComposer - Whether shown in composer vs message list
• scrolledId - Binding to scroll to the original message location