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 three ViewFactory methods for customizing quoted messages:

1. makeComposerQuotedMessageView(options:) – Replaces the quoted message preview shown inside the composer.
2. makeChatQuotedMessageView(options:) – Replaces the quoted message view shown inside the message list.
3. makeQuotedMessageView(options:) – Replaces the base quoted message view used by both of the above.

Composer Quoted Message View

When a message appears as quoted in the composer, you can customize the entire quoted message preview. Implement makeComposerQuotedMessageView in your ViewFactory:

public func makeComposerQuotedMessageView(
    options: ComposerQuotedMessageViewOptions
) -> some View {
    CustomComposerQuotedMessageView(
        quotedMessage: options.quotedMessage,
        onDismiss: options.onDismiss
    )
}

The ComposerQuotedMessageViewOptions provides:

• quotedMessage – the quoted ChatMessage.
• onDismiss – callback to remove the quoted message from the composer.

Chat Quoted Message View

To customize how a quoted message appears in the message list (inside another message's bubble), implement makeChatQuotedMessageView:

public func makeChatQuotedMessageView(
    options: ChatQuotedMessageViewOptions
) -> some View {
    ChatQuotedMessageView(
        factory: self,
        quotedMessage: options.quotedMessage,
        parentMessage: options.parentMessage,
        scrolledId: options.scrolledId
    )
}

The ChatQuotedMessageViewOptions provides:

• quotedMessage – the quoted ChatMessage.
• parentMessage – the message that contains the quote.
• scrolledId – binding used to scroll to the original quoted message.

Base Quoted Message View

To customize the shared quoted message view container (the bubble with the author's avatar), implement makeQuotedMessageView:

public func makeQuotedMessageView(
    options: QuotedMessageViewOptions
) -> some View {
    QuotedMessageView(
        factory: self,
        viewModel: QuotedMessageViewModel(
            message: options.quotedMessage,
            currentUser: chatClient.currentUserController().currentUser,
            outgoing: options.outgoing
        ),
        padding: options.padding
    )
}

The QuotedMessageViewOptions provides:

• quotedMessage – the quoted ChatMessage.
• outgoing – whether the quoted message was sent by the current user.
• padding – the padding to apply around the view.

Custom Attachment Preview in Quoted Message

For custom attachments, you can control how the attachment preview is rendered inside the quoted message by customizing the base makeQuotedMessageView. Use QuotedMessageView from the SDK as a building block, or provide a completely custom layout:

func makeQuotedMessageView(
    options: QuotedMessageViewOptions
) -> some View {
    Group {
        if let customPayload = options.quotedMessage.customAttachmentPayload {
            CustomQuotedAttachmentView(payload: customPayload)
        } else {
            // Fall back to the default implementation
            QuotedMessageView(
                factory: self,
                viewModel: QuotedMessageViewModel(
                    message: options.quotedMessage,
                    currentUser: chatClient.currentUserController().currentUser,
                    outgoing: options.outgoing
                ),
                padding: options.padding
            )
        }
    }
}