Compact Message Composer - CometChat Docs

Overview

CometChatCompactMessageComposer is a Component that provides a compact, single-line message input designed for chat applications. It offers a streamlined interface with optional rich text formatting capabilities, supporting bold, italic, strikethrough, code, links, lists, and blockquotes. Features such as Rich Text Formatting, Attachments, Message Editing, Mentions, Stickers, and Voice Recording are supported.

Usage

Integration

The following code snippet illustrates how you can directly incorporate the CompactMessageComposer component into your view.

Swift

let compactComposer = CometChatCompactMessageComposer()
compactComposer.set(user: user)
compactComposer.set(controller: self)
compactComposer.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(compactComposer)

To ensure that the CometChatCompactMessageComposer is properly configured, passing the controller is mandatory.

compactComposer.set(controller: self) // Passing the controller is required

Actions

Actions dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.

setOnSendButtonClick

The set(onSendButtonClick:) event gets activated when the send message button is clicked. It has a predefined function of sending messages entered in the composer. However, you can override this action with the following code snippet.

Swift

compactComposer.set(onSendButtonClick: { message in
    // Your custom send handling
})

setOnError

This action doesn’t change the behavior of the component but rather listens for any errors that occur in the CompactMessageComposer component.

Swift

compactComposer.set(onError: { error in
    // Your Exception Handling code
})

setOnTextChangedListener

Function triggered whenever the message input’s text value changes, enabling dynamic text handling.

Swift

compactComposer.set(onTextChangedListener: { text in
    // Handle text change
})

setAttachmentOptions

This action is triggered when the attachment button is clicked. You can override the default attachment sheet behavior with a custom implementation.

Swift

compactComposer.set(attachmentOptions: { user, group, controller in
    // Return custom attachment actions
    return [CometChatMessageComposerAction]
})

Filters

CompactMessageComposer component does not have any available filters.

Events

Events are emitted by a Component. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The CompactMessageComposer Component does not emit any events of its own.

Customization

To fit your app’s design requirements, you can customize the appearance of the CompactMessageComposer component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

Style

Using Style you can customize the look and feel of the component in your app. These parameters typically control elements such as the color, size, shape, and fonts used within the component. Global level styling

Swift

CometChatCompactMessageComposer.style.activeSendButtonBackgroundColor = UIColor(hex: "#F76808")
CometChatCompactMessageComposer.style.attachmentImageTint = UIColor(hex: "#F76808")
CometChatCompactMessageComposer.style.voiceRecordingImageTint = UIColor(hex: "#F76808")
CometChatCompactMessageComposer.style.stickersImageTint = UIColor(hex: "#F76808")

Instance level styling

Swift

var customStyle = CompactMessageComposerStyle()
customStyle.activeSendButtonBackgroundColor = UIColor(hex: "#F76808")
customStyle.attachmentImageTint = UIColor(hex: "#F76808")
customStyle.voiceRecordingImageTint = UIColor(hex: "#F76808")
customStyle.stickersImageTint = UIColor(hex: "#F76808")

let compactComposer = CometChatCompactMessageComposer()
compactComposer.style = customStyle

The following properties are exposed by CompactMessageComposerStyle:

Property	Description	Code
backgroundColor	Background color of the composer container.	`style.backgroundColor = CometChatTheme.backgroundColor03`
cornerRadius	Corner radius for the composer container.	`style.cornerRadius = CometChatCornerStyle?`
borderWidth	Border width for the composer container.	`style.borderWidth = 0`
borderColor	Border color for the composer container.	`style.borderColor = .clear`
composeBoxBackgroundColor	Background color for the compose box.	`style.composeBoxBackgroundColor = CometChatTheme.backgroundColor01`
composeBoxBorderColor	Border color for the compose box.	`style.composeBoxBorderColor = CometChatTheme.borderColorDefault`
composeBoxBorderWidth	Border width for the compose box.	`style.composeBoxBorderWidth = 1`
composeBoxCornerRadius	Corner radius for the compose box.	`style.composeBoxCornerRadius = .init(cornerRadius: CometChatSpacing.Radius.r2)`
composerSeparatorColor	Color for the separator in the compose box.	`style.composerSeparatorColor = CometChatTheme.borderColorLight`
textFieldFont	Font for the input text field.	`style.textFieldFont = CometChatTypography.Body.regular`
textFieldColor	Text color for the input field.	`style.textFieldColor = CometChatTheme.textColorPrimary`
placeholderFont	Font for the placeholder text.	`style.placeholderFont = CometChatTypography.Body.regular`
placeholderColor	Color for the placeholder text.	`style.placeholderColor = CometChatTheme.textColorTertiary`
sendButtonImage	Icon for the send button.	`style.sendButtonImage = UIImage(named: "custom-send")`
sendButtonImageTint	Tint color for the send button image.	`style.sendButtonImageTint = CometChatTheme.white`
activeSendButtonBackgroundColor	Background color for send button when active.	`style.activeSendButtonBackgroundColor = CometChatTheme.primaryColor`
inactiveSendButtonBackgroundColor	Background color for send button when inactive.	`style.inactiveSendButtonBackgroundColor = CometChatTheme.neutralColor300`
attachmentImage	Icon for the attachment button.	`style.attachmentImage = UIImage(systemName: "plus.circle")`
attachmentImageTint	Tint color for the attachment image.	`style.attachmentImageTint = CometChatTheme.iconColorSecondary`
voiceRecordingImage	Icon for the voice recording button.	`style.voiceRecordingImage = UIImage(systemName: "mic")`
voiceRecordingImageTint	Tint color for the voice recording image.	`style.voiceRecordingImageTint = CometChatTheme.iconColorSecondary`
stickersImage	Icon for the stickers button.	`style.stickersImage = UIImage(named: "sticker-image")`
stickersImageTint	Tint color for the stickers image.	`style.stickersImageTint = CometChatTheme.iconColorSecondary`
stickersActiveImageTint	Tint color for the stickers image when active.	`style.stickersActiveImageTint = CometChatTheme.primaryColor`
codeBlockBackgroundColor	Background color for code block mode.	`style.codeBlockBackgroundColor = UIColor(hex: "#F5F5F5")`
codeBlockBorderColor	Border color for code block mode.	`style.codeBlockBorderColor = UIColor(hex: "#E8E8E8")`
codeBlockBorderWidth	Border width for code block mode.	`style.codeBlockBorderWidth = 1`
previewTitleFont	Font for the title in the edit/reply preview.	`style.previewTitleFont = CometChatTypography.Body.regular`
previewMessageFont	Font for the message text in the edit/reply preview.	`style.previewMessageFont = CometChatTypography.Caption1.regular`
previewTitleColor	Text color for the title in the edit/reply preview.	`style.previewTitleColor = CometChatTheme.textColorPrimary`
previewMessageColor	Text color for the message in the edit/reply preview.	`style.previewMessageColor = CometChatTheme.textColorSecondary`
previewBackgroundColor	Background color for the edit/reply preview.	`style.previewBackgroundColor = CometChatTheme.backgroundColor03`
previewCloseIcon	Icon for closing the edit/reply preview.	`style.previewCloseIcon = UIImage(systemName: "xmark")`
previewCloseIconTint	Tint color for the close icon in the preview.	`style.previewCloseIconTint = CometChatTheme.iconColorHighlight`
infoIcon	Icon for the mention limit info banner.	`style.infoIcon = UIImage(systemName: "info.circle")`
infoIconTint	Tint color for the info icon.	`style.infoIconTint = CometChatTheme.errorColor`
infoTextColor	Text color for the info text.	`style.infoTextColor = CometChatTheme.errorColor`
infoTextFont	Font for the info text.	`style.infoTextFont = CometChatTypography.Caption1.regular`
infoBackgroundColor	Background color for the info section.	`style.infoBackgroundColor = CometChatTheme.backgroundColor02`
richTextToolbarStyle	Style configuration for the rich text toolbar.	`style.richTextToolbarStyle = RichTextToolbarStyle()`
agenticSendButtonImage	Icon for the send button in agentic mode.	`style.agenticSendButtonImage = UIImage(systemName: "arrow.up")`
agenticSendButtonImageTint	Tint color for the agentic send button image.	`style.agenticSendButtonImageTint = CometChatTheme.neutralColor50`
agenticActiveSendButtonBackgroundColor	Background color for agentic send button when active.	`style.agenticActiveSendButtonBackgroundColor = CometChatTheme.neutralColor900`
agenticInactiveSendButtonBackgroundColor	Background color for agentic send button when inactive.	`style.agenticInactiveSendButtonBackgroundColor = CometChatTheme.neutralColor300`

Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. Below is a list of customizations along with corresponding code snippets:

Property	Description	Code
User	Used to pass user object of which header specific details will be shown.	`set(user: User)`
Group	Used to pass group object of which header specific details will be shown.	`set(group: Group)`
setParentMessageId	Sets the parent message ID for threaded replies.	`set(parentMessageId: Int)`
setPlaceholder	Sets the placeholder text for the input field.	`set(placeholder: "Type a message...")`
setMaxLines	Maximum lines allowed to increase in the input field.	`set(maxLines: Int)`
setTextFormatter	Assigns the list of text formatters (e.g., mentions).	`set(textFormatter: [CometChatTextFormatter])`
setEnableRichTextFormatting	Master switch to enable or disable rich text formatting (bold, italic, etc.). Default `true`.	`enableRichTextFormatting = true`
setRichTextFormattingOptionsVisibility	Controls the visibility of the rich text formatting toolbar. Default `true`.	`showRichTextFormattingOptions = true`
setDisableTypingEvents	Used to disable/enable typing events, default false.	`disable(typingEvents: true)`
setDisableSoundForMessages	Used to toggle sound for outgoing messages.	`disable(soundForMessages: true)`
setCustomSoundForMessages	Used to give custom sounds to outgoing messages.	`customSoundForMessage = URL`
setDisableMentions	Sets whether mentions in text should be disabled. Removes any formatters that are instances of `CometChatMentionsFormatter`.	`disable(mentions: true)`
setAttachmentButtonVisibility	Hides the attachment button in the composer.	`hideAttachmentButton = true`
setVoiceRecordingButtonVisibility	Hides the voice recording button in the composer.	`hideVoiceRecordingButton = true`
setStickerButtonVisibility	Hides the sticker button in the composer.	`hideStickersButton = true`
setSendButtonVisibility	Hides the send button in the composer.	`hideSendButton = true`

Rich Text Formatting

The CompactMessageComposer includes a built-in rich text editor. enableRichTextFormatting and showRichTextFormattingOptions are true by default, so rich text formatting and the formatting toolbar are enabled out of the box.

enableRichTextFormatting — Master switch that activates formatting. When set to false, even manually typed markdown syntax like **text** will be sent as plain text.
showRichTextFormattingOptions — Controls the visibility of the formatting toolbar below the input field.

Supported Format Types

Format	Description	Markdown Syntax
Bold	Makes text bold	`text`
Italic	Makes text italic	`text`
Underline	Underlines text	`<u>text</u>`
Strikethrough	Strikes through text	`~~text~~`
Inline Code	Formats as inline code	`code`
Code Block	Creates a code block	```code```
Blockquote	Creates a blockquote	`> text`
Numbered List	Creates a numbered list	`1. item`
Bullet List	Creates a bullet list	`- item`
Link	Creates a hyperlink	`[text](url)`

Configuration

Swift

// Disable rich text formatting
compactComposer.enableRichTextFormatting = false

// Hide the formatting toolbar
compactComposer.showRichTextFormattingOptions = false

enableRichTextFormatting	showRichTextFormattingOptions	Result
true (default)	true (default)	Toolbar visible below input, full formatting support
true	false	No toolbar, markdown syntax is still parsed on send
false	—	Plain text, no formatting

RichTextToolbarStyle

Global level styling

Swift

CometChatCompactMessageComposer.style.richTextToolbarStyle.backgroundColor = UIColor(hex: "#F5F5F5")
CometChatCompactMessageComposer.style.richTextToolbarStyle.iconTintColor = UIColor(hex: "#666666")
CometChatCompactMessageComposer.style.richTextToolbarStyle.activeIconTintColor = UIColor(hex: "#F76808")
CometChatCompactMessageComposer.style.richTextToolbarStyle.activeButtonBackgroundColor = UIColor(hex: "#FFF0E6")

The following properties are exposed by RichTextToolbarStyle:

Property	Description	Code
backgroundColor	Background color of the toolbar.	`toolbarStyle.backgroundColor = CometChatTheme.backgroundColor02`
borderColor	Border color of the toolbar.	`toolbarStyle.borderColor = CometChatTheme.borderColorLight`
buttonSize	Size of format buttons.	`toolbarStyle.buttonSize = 30`
buttonSpacing	Spacing between format buttons.	`toolbarStyle.buttonSpacing = CometChatSpacing.Spacing.s2`
iconTintColor	Tint color for inactive format icons.	`toolbarStyle.iconTintColor = CometChatTheme.iconColorSecondary`
activeIconTintColor	Tint color for active format icons.	`toolbarStyle.activeIconTintColor = CometChatTheme.primaryColor`
buttonBackgroundColor	Background color for inactive buttons.	`toolbarStyle.buttonBackgroundColor = .clear`
activeButtonBackgroundColor	Background color for active buttons.	`toolbarStyle.activeButtonBackgroundColor = CometChatTheme.extendedPrimaryColor100`

Advanced

For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.

setTextFormatters

Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out CometChatMentionsFormatter Example

Swift

let composerTextStyle = MentionTextStyle()
    .set(textBackgroundColor: .white)
    .set(textColor: UIColor.black)
    .set(textFont: UIFont.systemFont(ofSize: 18, weight: .heavy))
    .set(loggedInUserTextColor: UIColor.systemTeal)
    .set(loggedInUserTextFont: UIFont.systemFont(ofSize: 18, weight: .bold))

let customMentionFormatter = CometChatMentionsFormatter()
    .set(composerTextStyle: composerTextStyle)

let compactComposer = CometChatCompactMessageComposer()
compactComposer.set(textFormatter: [customMentionFormatter])

setAttachmentOptions

By using set(attachmentOptions:), you can set a list of custom CometChatMessageComposerAction for the CompactMessageComposer Component. This will override the existing list of CometChatMessageComposerAction.

Swift

compactComposer.set(attachmentOptions: { user, group, controller in
    return [CometChatMessageComposerAction]
})

Example In this example, we are overriding the existing MessageComposerActions List with custom actions.

Swift

let compactComposer = CometChatCompactMessageComposer()

compactComposer.set(attachmentOptions: { user, group, controller in
    let action1 = CometChatMessageComposerAction(
        id: "customAction1",
        text: "Custom Option 1",
        startIcon: UIImage(systemName: "camera"),
        startIconTint: .black,
        textColor: .black,
        onActionClick: {
            print("Custom Option 1 clicked!")
        }
    )

    let action2 = CometChatMessageComposerAction(
        id: "customAction2",
        text: "Custom Option 2",
        startIcon: UIImage(systemName: "doc"),
        startIconTint: .black,
        textColor: .black,
        onActionClick: {
            print("Custom Option 2 clicked!")
        }
    )

    return [action1, action2]
})

Edit & Reply Mode

The CompactMessageComposer supports editing and replying to messages. You can programmatically put the composer into edit or reply mode. Edit a message

Swift

compactComposer.edit(message: textMessage)

Reply to a message

Swift

compactComposer.reply(message: baseMessage)

Preview a message with a specific mode

Swift

compactComposer.preview(message: baseMessage, mode: .edit)
// or
compactComposer.preview(message: baseMessage, mode: .reply)

Complete Integration Example

Swift

import UIKit
import CometChatUIKitSwift

class ChatViewController: UIViewController {
    var user: User?

    override func viewDidLoad() {
        super.viewDidLoad()
        setupComposer()
    }

    private func setupComposer() {
        guard let user = user else { return }

        let compactComposer = CometChatCompactMessageComposer()
        compactComposer.set(user: user)
        compactComposer.set(controller: self)

        // Customize
        compactComposer.set(placeholder: "Type a message...")
        compactComposer.disable(typingEvents: false)

        // Callbacks
        compactComposer.set(onSendButtonClick: { message in
            print("Message sent: \(message)")
        })

        compactComposer.set(onError: { error in
            print("Error: \(error.errorDescription)")
        })

        // Layout
        compactComposer.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(compactComposer)

        NSLayoutConstraint.activate([
            compactComposer.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            compactComposer.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            compactComposer.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        ])
    }
}

​Overview

​Usage

​Integration

​Actions

setOnSendButtonClick

setOnError

setOnTextChangedListener

setAttachmentOptions

​Filters

​Events

​Customization

​Style

​Functionality

​Rich Text Formatting

​Supported Format Types

​Configuration

​RichTextToolbarStyle

​Advanced

​setTextFormatters

​setAttachmentOptions

​Edit & Reply Mode

​Complete Integration Example

Overview

Usage

Integration

Actions

Filters

Events

Customization

Style

Functionality

Rich Text Formatting

Supported Format Types

Configuration

RichTextToolbarStyle

Advanced

setTextFormatters

setAttachmentOptions

Edit & Reply Mode

Complete Integration Example