Compact Message Composer

Configure CometChat iOS UI Kit Compact Message Composer with single-line input, rich text, attachments, mentions, stickers, and voice recording.

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)
        ])
    }
}