Message Attachments

The SwiftUI SDK supports the following types of attachments:

Images
Giphy files
Videos
Links
Files

They all come with default views displaying the attachments. In addition, they are all swappable, so you can easily change some of them if you want a more customized look.

Swapping Attachment Views

Let’s see a simple example of how you can swap the existing attachments with your custom view. We will create a custom message view that displays the texts, but with bold font and different text color, as well as small checkmark in the bottom right corner, hinting that the message was sent.

struct CustomMessageTextView: View {
    @Injected(\.colors) var colors
    @Injected(\.fonts) var fonts

    var message: ChatMessage
    var isFirst: Bool

    public var body: some View {
        Text(message.text)
            .padding()
            .messageBubble(for: message, isFirst: isFirst)
            .foregroundColor(Color.blue)
            .font(fonts.bodyBold)
            .overlay(
                BottomRightView {
                    Image(systemName: "checkmark.circle.fill")
                        .foregroundColor(.green)
                        .offset(x: 1, y: -1)
                }
            )
    }
}

Next, we need to implement makeMessageTextView in the ViewFactory protocol, in our own CustomFactory.

class CustomFactory: ViewFactory {

    @Injected(\.chatClient) public var chatClient

    private init() {}

    public static let shared = CustomFactory()

    func makeMessageTextView(
        for message: ChatMessage,
        isFirst: Bool,
        availableWidth: CGFloat,
        scrolledId: Binding<String?>
    ) -> some View {
        CustomMessageTextView(
            message: message,
            isFirst: isFirst,
            scrolledId: scrolledId
        )
    }

}

Finally, we need to inject the CustomFactory in our view hierarchy.

var body: some Scene {
    WindowGroup {
        ChatChannelListView(viewFactory: CustomFactory.shared)
    }
}

These are all the steps needed to change the default SDK view with your custom one.

Image Attachment View

Similarly, you can change the other types of attachments view in the SDK. To update the view that presents images, you need to implement the following method:

func makeImageAttachmentView(
    for message: ChatMessage,
    isFirst: Bool,
    availableWidth: CGFloat,
    scrolledId: Binding<String?>
) -> some View {
    CustomImageAttachment(
        factory: self,
        message: message,
        width: availableWidth,
        isFirst: isFirst,
        scrolledId: scrolledId
    )
}

Giphy Attachment View

To update the view that presents gifs, you should implement the following method:

func makeGiphyAttachmentView(
        for message: ChatMessage,
        isFirst: Bool,
        availableWidth: CGFloat,
        scrolledId: Binding<String?>
) -> some View {
    GiphyAttachmentView(
        factory: self,
        message: message,
        width: availableWidth,
        isFirst: isFirst,
        scrolledId: scrolledId
    )
}

Link Attachment View

You can also change the way links are displayed in the message list, by implementing the following method:

func makeLinkAttachmentView(
    for message: ChatMessage,
    isFirst: Bool,
    availableWidth: CGFloat,
    scrolledId: Binding<String?>
) -> some View {
    CustomLinkAttachmentView(
        factory: self,
        message: message,
        width: availableWidth,
        isFirst: isFirst,
        scrolledId: scrolledId
    )
}

File Attachment View

File attachments can be customized by implementing the method below:

func makeFileAttachmentView(
    for message: ChatMessage,
    isFirst: Bool,
    availableWidth: CGFloat,
    scrolledId: Binding<String?>
) -> some View {
    CustomFileAttachmentsView(
        factory: self,
        message: message,
        width: availableWidth,
        isFirst: isFirst,
        scrolledId: scrolledId
    )
}

Video Attachments

To replace the way video attachments are presented, you need to provide your own implementation of this method:

func makeVideoAttachmentView(
    for message: ChatMessage,
    isFirst: Bool,
    availableWidth: CGFloat,
    scrolledId: Binding<String?>
) -> some View {
    CustomVideoAttachmentsView(
        factory: self,
        message: message,
        width: availableWidth,
        scrolledId: scrolledId
    )
}

Handling Custom Attachments

You can go a step further and introduce your own custom attachments with their corresponding custom views. Use-cases can be workout attachments, food delivery, money sending and anything else that might be supported within your apps.

Supporting custom attachment views is straightforward and can be implemented in a few simple steps. As an example, let’s create a custom view that will detect if there’s an email address in our message, and if there is - it will create a custom view with an additional email icon.

First, you need to create a custom view.

struct CustomAttachmentView: View {

    let message: ChatMessage
    let width: CGFloat
    let isFirst: Bool

    var body: some View {
        HStack {
            Image(systemName: "envelope")
            Text(message.text)
        }
        .padding()
        .frame(maxWidth: width)
        .messageBubble(for: message, isFirst: isFirst)
    }

}

Next, you need to define a custom rule in our MessageTypeResolving protocol, which has a default implementation in our SDK. What we are interested in is the hasCustomAttachment method. Therefore, we will provide our own implementation of it to check if there are any emails in the text message.

class CustomMessageResolver: MessageTypeResolving {

    func hasCustomAttachment(message: ChatMessage) -> Bool {
        let messageComponents = message.text.components(separatedBy: CharacterSet.whitespacesAndNewlines)
        return messageComponents.filter { component in
            isValidEmail(component)
        }
        .count > 0
    }

    private func isValidEmail(_ email: String) -> Bool {
        let emailRegEx = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,64}"

        let emailPred = NSPredicate(format:"SELF MATCHES %@", emailRegEx)
        return emailPred.evaluate(with: email)
    }

}

Next, we need to replace the default MessageTypeResolving implementation, with the one we have just created in our Utils class of the StreamChat object.

let messageTypeResolver = CustomMessageResolver()
let utils = Utils(messageTypeResolver: messageTypeResolver)

let streamChat = StreamChat(chatClient: chatClient, utils: utils)

Next, in our CustomFactory, we need to return the new view we have created above, in the method makeCustomAttachmentViewType.

func makeCustomAttachmentViewType(
    for message: ChatMessage,
    isFirst: Bool,
    availableWidth: CGFloat,
    scrolledId: Binding<String?>
) -> some View {
    CustomAttachmentView(
        message: message,
        width: availableWidth,
        isFirst: isFirst
    )
}

Finally, you need to inject the CustomFactory into our view hierarchy if you haven’t done it already.

Note, if you want to support several different custom views, you will need to do if-else or switch logic in both the message type resolver and the custom view, which will act as container for several views.

Message Avatar View

Message reactions