Exyte Chat

The library supports uploading attachments larger than 100 MB. You can control how upload progress is displayed using the fullUploadStatus property on an Attachment object. There are three implementation strategies:

1. No status (Default): Attachment(fullUploadStatus: nil). Shows no progress indicators. Best if the file is fully uploaded before the message is sent.
2. Generic progress: Attachment(fullUploadStatus: .inProgress(nil)). Shows a generic progress indicator for both sender and receiver without a percentage.
3. Percentage progress: Attachment(fullUploadStatus: .inProgress(0)). Shows a specific percentage. Requires the client to synchronize multiple WebSocket updates (e.g., 10%, 20%) between sender and receiver.

To manage the lifecycle of the progress indicator, the client must handle these status updates:

• Complete: Attachment(fullUploadStatus: .complete)
• Cancelled: Attachment(fullUploadStatus: .cancelled)
• Error: Attachment(fullUploadStatus: .error)

To define custom actions for the message menu (triggered by a long tap), declare an enum that conforms to MessageMenuAction. You can provide custom titles, icons, and determine if an action is destructive (showing a confirmation alert) or conditionally available per message.

When initializing ChatView, pass your custom enum type to the messageMenuAction closure. This closure provides:

• selectedMenuAction: The specific case selected by the user (ensure you explicitly type this variable with your enum type).
• defaultActionClosure: A helper to trigger standard behaviors like .copy, .reply, .edit, or .share. Note that for .edit, you must provide a closure to handle the updated text.
• message: The message associated with the menu.

enum Action: MessageMenuAction {
    case reply, edit, delete

    func title() -> String {
        switch self {
        case .reply: "Reply"
        case .edit: "Edit"
        case .delete: "Delete"
        }
    }
    
    func icon() -> Image {
        switch self {
        case .reply: Image(systemName: "arrowshape.turn.up.left")
        case .edit: Image(systemName: "square.and.pencil")
        case .delete: Image(systemName: "trash")
        }
    }

    func isDestructive() -> Bool { self == .delete }

    static func menuItems(for message: ExyteChat.Message) -> [Action] {
        message.user.isCurrentUser ? [.reply, .edit, .delete] : [.reply]
    }
}

ChatView(messages: viewModel.messages) { draft in
    viewModel.send(draft: draft)
} messageMenuAction: { (action: Action, defaultActionClosure, message) in
    switch action {
    case .reply:
        defaultActionClosure(message, .reply)
    case .edit:
        defaultActionClosure(message, .edit { editedText in
            print(editedText)
        })
    case .delete:
        yourViewModel.delete(message: message)
    }
}

Use the .chatTheme modifier to customize the colors and images of the default UI. You can provide a ChatTheme object containing colors and images configurations.

// Customize colors and images
.chatTheme(
    ChatTheme(
        colors: .init(
            mainBackground: .red,
            buttonBackground: .yellow,
            addButtonBackground: .purple
        ),
        images: .init(
            camera: Image(systemName: "camera")
        )
    )
)

// Chat view with a full background image  
.chatTheme(
    ChatTheme(
        colors: .init(
            buttonBackground: .yellow,
            addButtonBackground: .purple
        ),
        images: .init(
            background: ChatTheme.Images.Background(
                portraitBackgroundLight: Image("chatBackgroundLight"),
                portraitBackgroundDark: Image("chatBackgroundDark"),
                landscapeBackgroundLight: Image("chatBackgroundLandscapeLight"),
                landscapeBackgroundDark: Image("chatBackgroundLandscapeDark")
            )
        )
    )
)

You can add swipe actions to messages in a ChatView using the .swipeActions modifier. Each SwipeAction requires an action to perform, an optional activeFor closure to determine visibility (e.g., only showing 'Edit' for the current user), and a background color. The items parameter takes a list of SwipeAction objects.

// Example: Adding Swipe Actions to your ChatView
ChatView(messages: viewModel.messages) { draft in
    viewModel.send(draft: draft)
} 
.swipeActions(edge: .leading, performsFirstActionWithFullSwipe: false, items: [
    // SwipeActions are similar to Buttons, they accept an Action and a ViewBuilder
    SwipeAction(action: onDelete, activeFor: { $0.user.isCurrentUser }, background: .red) {
        swipeActionButtonStandard(title: "Delete", image: "xmark.bin")
    },
    // Set the background color of a SwipeAction in the initializer, 
    // instead of trying to apply a background color in your ViewBuilder
    SwipeAction(action: onReply, background: .blue) {
        swipeActionButtonStandard(title: "Reply", image: "arrowshape.turn.up.left")
    },
    // SwipeActions can also be selectively shown based on the message, 
    // here we only show the Edit action when the message is from the current sender
    SwipeAction(action: onEdit, activeFor: { $0.user.isCurrentUser }, background: .gray) {
        swipeActionButtonStandard(title: "Edit", image: "bubble.and.pencil")
    }
])