Message Composer - CometChat Docs

AI Integration Quick Reference

{
  "component": "CometChatMessageComposer",
  "package": "CometChatUIKitSwift",
  "import": "import CometChatUIKitSwift\nimport CometChatSDK",
  "inherits": "UIView",
  "description": "Rich text input for composing and sending text, media, attachments, mentions, voice notes, and custom messages.",
  "props": {
    "data": {
      "user": "User? - recipient user for direct messaging",
      "group": "Group? - recipient group for group messaging",
      "parentMessageId": "Int? - parent message ID for thread replies"
    },
    "callbacks": {
      "onSendButtonClick": "(BaseMessage) -> Void",
      "onTextChangedListener": "(String) -> Void",
      "onError": "(CometChatException) -> Void"
    },
    "visibility": {
      "hideAttachmentButton": "Bool (default: false)",
      "hideVoiceRecordingButton": "Bool (default: false)",
      "hideStickersButton": "Bool (default: false)",
      "hideSendButton": "Bool (default: false)",
      "hideAIButton": "Bool (default: false)",
      "hideHeaderView": "Bool (default: false)",
      "hideFooterView": "Bool (default: false)"
    },
    "behavior": {
      "disableTypingEvents": "Bool (default: false)",
      "disableMentions": "Bool (default: false)",
      "placeholderText": "String (default: 'Type a message...')"
    },
    "viewSlots": {
      "headerView": "(User?, Group?) -> UIView",
      "footerView": "(User?, Group?) -> UIView",
      "sendButtonView": "(User?, Group?) -> UIView",
      "auxillaryButtonView": "(User?, Group?) -> UIView",
      "attachmentOptions": "(User?, Group?, UIViewController?) -> [CometChatMessageComposerAction]"
    }
  },
  "methods": {
    "set(user:)": "Sets recipient user",
    "set(group:)": "Sets recipient group",
    "set(parentMessageId:)": "Sets parent message for threads",
    "setInitialComposerText(_:)": "Pre-fills composer text",
    "set(textFormatter:)": "Sets custom text formatter",
    "setDisableMentionAll(_:)": "Disables @all mentions",
    "setMentionAllLabel(_:_:)": "Customizes @all label"
  },
  "styling": {
    "globalStyle": "CometChatMessageComposer.style",
    "instanceStyle": "MessageComposerStyle",
    "subStyles": ["MediaRecorderStyle", "AttachmentSheetStyle", "SuggestionsStyle", "AIOptionsStyle", "MentionStyle"]
  }
}

Field	Value
Component	`CometChatMessageComposer`
Package	`CometChatUIKitSwift`
Inherits	`UIView`

The CometChatMessageComposer component enables users to write and send messages including text, images, videos, audio, files, and custom messages. It supports attachments, voice recording, stickers, mentions, and AI-powered features.

Where It Fits

CometChatMessageComposer provides a rich text input with attachment, emoji, voice recording, sticker, and send controls. Wire it alongside CometChatMessageHeader and CometChatMessageList to build a standard chat view.

import UIKit
import CometChatUIKitSwift
import CometChatSDK

class ChatViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        CometChat.getUser(UID: "uid") { user in
            DispatchQueue.main.async {
                let header = CometChatMessageHeader()
                header.set(user: user)
                
                let messageList = CometChatMessageList()
                messageList.set(user: user)
                
                let composer = CometChatMessageComposer()
                composer.set(user: user)
                
                // Add to view hierarchy and layout
            }
        } onError: { error in
            print("Error: \(error?.errorDescription ?? "")")
        }
    }
}

Minimal Render

import CometChatUIKitSwift

let composer = CometChatMessageComposer()
composer.set(user: user)

Actions and Events

Callback Props

onSendButtonClick

Fires when the send button is clicked. Overrides the default send behavior.

import CometChatUIKitSwift

let composer = CometChatMessageComposer()
composer.set(user: user)

composer.set(onSendButtonClick: { message in
    print("Custom send: \(message.id)")
})

onTextChangedListener

Fires as the user types in the composer input.

import CometChatUIKitSwift

let composer = CometChatMessageComposer()
composer.set(user: user)

composer.set(onTextChangedListener: { text in
    print("Text changed: \(text)")
})

onError

Fires on internal errors.

import CometChatUIKitSwift

let composer = CometChatMessageComposer()
composer.set(user: user)

composer.set(onError: { error in
    print("Composer error: \(error.errorDescription)")
})

SDK Events (Real-Time, Automatic)

The component internally handles typing indicators and message sending. No manual SDK listener attachment needed.

Custom View Slots

Slot	Signature	Replaces
`headerView`	`(User?, Group?) -> UIView`	Area above the composer input
`footerView`	`(User?, Group?) -> UIView`	Area below the composer input
`sendButtonView`	`(User?, Group?) -> UIView`	Send button
`auxillaryButtonView`	`(User?, Group?) -> UIView`	Sticker and AI button area
`attachmentOptions`	`(User?, Group?, UIViewController?) -> [CometChatMessageComposerAction]`	Default attachment options list

headerView

Custom view above the composer input.

import UIKit
import CometChatUIKitSwift

let composer = CometChatMessageComposer()
composer.set(user: user)

composer.set(headerView: { user, group in
    let view = UIView()
    view.backgroundColor = UIColor.purple.withAlphaComponent(0.1)
    
    let label = UILabel()
    label.text = "User has paused their notifications"
    label.font = UIFont.systemFont(ofSize: 14)
    view.addSubview(label)
    
    return view
})

footerView

Custom view below the composer input.

import UIKit
import CometChatUIKitSwift

let composer = CometChatMessageComposer()
composer.set(user: user)

composer.set(footerView: { user, group in
    let view = UIView()
    
    let label = UILabel()
    label.text = "Messages are end-to-end encrypted"
    label.font = UIFont.systemFont(ofSize: 12)
    label.textColor = .secondaryLabel
    view.addSubview(label)
    
    return view
})

sendButtonView

Replace the send button.

import UIKit
import CometChatUIKitSwift

let composer = CometChatMessageComposer()
composer.set(user: user)

composer.set(sendButtonView: { user, group in
    let button = UIButton(type: .system)
    button.setImage(UIImage(systemName: "paperplane.fill"), for: .normal)
    button.tintColor = .systemBlue
    return button
})

auxillaryButtonView

Replace the sticker and AI button area.

import UIKit
import CometChatUIKitSwift

let composer = CometChatMessageComposer()
composer.set(user: user)

composer.set(auxillaryButtonView: { user, group in
    let stackView = UIStackView()
    stackView.axis = .horizontal
    stackView.spacing = 8
    
    let aiButton = UIButton(type: .system)
    aiButton.setImage(UIImage(systemName: "sparkles"), for: .normal)
    
    let emojiButton = UIButton(type: .system)
    emojiButton.setImage(UIImage(systemName: "face.smiling"), for: .normal)
    
    stackView.addArrangedSubview(aiButton)
    stackView.addArrangedSubview(emojiButton)
    
    return stackView
})

attachmentOptions

Override the default attachment options.

import UIKit
import CometChatUIKitSwift

let composer = CometChatMessageComposer()
composer.set(user: user)

composer.set(attachmentOptions: { user, group, controller in
    return [
        CometChatMessageComposerAction(
            id: "photo",
            text: "Photo",
            startIcon: UIImage(systemName: "photo"),
            startIconTint: .systemBlue,
            onActionClick: { print("Photo selected") }
        ),
        CometChatMessageComposerAction(
            id: "camera",
            text: "Camera",
            startIcon: UIImage(systemName: "camera"),
            startIconTint: .systemGreen,
            onActionClick: { print("Camera selected") }
        ),
        CometChatMessageComposerAction(
            id: "location",
            text: "Location",
            startIcon: UIImage(systemName: "location"),
            startIconTint: .systemRed,
            onActionClick: { print("Location selected") }
        )
    ]
})

Common Patterns

Thread composer

let composer = CometChatMessageComposer()
composer.set(user: user)
composer.set(parentMessageId: parentMessage.id)

Minimal composer — text only

let composer = CometChatMessageComposer()
composer.set(user: user)
composer.hideAttachmentButton = true
composer.hideVoiceRecordingButton = true
composer.hideStickersButton = true
composer.hideAIButton = true

Pre-filled text

let composer = CometChatMessageComposer()
composer.set(user: user)
composer.setInitialComposerText("Hello! ")
composer.placeholderText = "Type a message..."

Disable typing indicators

let composer = CometChatMessageComposer()
composer.set(user: user)
composer.disableTypingEvents = true

Disable mentions

let composer = CometChatMessageComposer()
composer.set(user: user)
composer.disableMentions = true

Custom send button action

let composer = CometChatMessageComposer()
composer.set(user: user)

composer.set(onSendButtonClick: { message in
    print("Sending message: \(message)")
})

Styling

Style Hierarchy

Global styles (CometChatMessageComposer.style) apply to all instances
Instance styles override global for specific instances

Global Level Styling

import CometChatUIKitSwift

CometChatMessageComposer.style.backgroundColor = .systemBackground
CometChatMessageComposer.style.activeSendButtonImageBackgroundColor = .systemBlue
CometChatMessageComposer.style.attachmentImageTint = .systemGray
CometChatMessageComposer.style.voiceRecordingImageTint = .systemGray

Instance Level Styling

import CometChatUIKitSwift

var customStyle = MessageComposerStyle()
customStyle.backgroundColor = UIColor(red: 0.95, green: 0.95, blue: 0.97, alpha: 1.0)
customStyle.activeSendButtonImageBackgroundColor = .systemOrange
customStyle.composeBoxBackgroundColor = .white
customStyle.composeBoxBorderColor = .systemGray4

let composer = CometChatMessageComposer()
composer.style = customStyle

Key Style Properties

Property	Type	Description
`backgroundColor`	`UIColor`	Background color
`borderWidth`	`CGFloat`	Border width
`borderColor`	`UIColor`	Border color
`cornerRadius`	`CometChatCornerStyle?`	Corner radius
`placeHolderTextFont`	`UIFont`	Placeholder font
`placeHolderTextColor`	`UIColor`	Placeholder color
`textFiledColor`	`UIColor`	Input text color
`textFiledFont`	`UIFont`	Input text font
`sendButtonImage`	`UIImage?`	Send button icon
`sendButtonImageTint`	`UIColor`	Send button tint
`activeSendButtonImageBackgroundColor`	`UIColor`	Active send button background
`inactiveSendButtonImageBackgroundColor`	`UIColor`	Inactive send button background
`composeBoxBackgroundColor`	`UIColor`	Compose box background
`composeBoxBorderColor`	`UIColor`	Compose box border color
`composeBoxBorderWidth`	`CGFloat`	Compose box border width
`attachmentImage`	`UIImage?`	Attachment button icon
`attachmentImageTint`	`UIColor`	Attachment icon tint
`voiceRecordingImage`	`UIImage?`	Voice recording icon
`voiceRecordingImageTint`	`UIColor`	Voice recording tint

Sub-Component Styles

Property	Type	Description
`mediaRecorderStyle`	`MediaRecorderStyle`	Voice recording interface
`attachmentSheetStyle`	`AttachmentSheetStyle`	Attachment options sheet
`suggestionsStyle`	`SuggestionsStyle`	Mentions suggestions view
`aiOptionsStyle`	`AIOptionsStyle`	AI options menu
`mentionStyle`	`MentionStyle`	Mentions appearance

Customization Matrix

What to change	Where	Property/API
Override send behavior	Callback	`set(onSendButtonClick:)`
Track text input	Callback	`set(onTextChangedListener:)`
Toggle visibility	Props	`hide<Feature>` boolean props
Custom attachments	View Slot	`set(attachmentOptions:)`
Replace UI sections	View Slot	`set(headerView:)`, `set(sendButtonView:)`
Change colors, fonts	Style	`MessageComposerStyle` properties

Props

All props are optional. Sorted alphabetically.

Property	Type	Default	Description
`disableMentions`	`Bool`	`false`	Disables the @mention feature
`disableSoundForMessages`	`Bool`	`false`	Disables sound when sending messages
`disableTypingEvents`	`Bool`	`false`	Disables sending typing indicators
`hideAIButton`	`Bool`	`false`	Hides the AI button
`hideAttachmentButton`	`Bool`	`false`	Hides the attachment button
`hideAudioAttachmentOption`	`Bool`	`false`	Hides the audio attachment option
`hideCollaborativeDocumentOption`	`Bool`	`false`	Hides the collaborative document option
`hideCollaborativeWhiteboardOption`	`Bool`	`false`	Hides the collaborative whiteboard option
`hideFileAttachmentOption`	`Bool`	`false`	Hides the file attachment option
`hideFooterView`	`Bool`	`false`	Hides the footer view
`hideHeaderView`	`Bool`	`false`	Hides the header view
`hideImageAttachmentOption`	`Bool`	`false`	Hides the image attachment option
`hidePollsOption`	`Bool`	`false`	Hides the polls option
`hideSendButton`	`Bool`	`false`	Hides the send button
`hideStickersButton`	`Bool`	`false`	Hides the stickers button
`hideVideoAttachmentOption`	`Bool`	`false`	Hides the video attachment option
`hideVoiceRecordingButton`	`Bool`	`false`	Hides the voice recording button
`maxLine`	`Int`	`5`	Maximum lines before scrolling
`placeholderText`	`String`	`"Type a message..."`	Placeholder text
`textFormatters`	`[CometChatTextFormatter]`	`[]`	Custom text formatters

Methods

set(textFormatter:)

Sets a custom text formatter for the composer input.

let composer = CometChatMessageComposer()
let mentionFormatter = MentionTextFormatter(trackingCharacter: "@")
composer.set(textFormatter: mentionFormatter)

setDisableMentionAll(_:)

Disables or enables the @all mention feature that notifies all group members.

let composer = CometChatMessageComposer()
composer.setDisableMentionAll(true)

setMentionAllLabel(::)

Customizes the label displayed for @all mentions in the suggestions list.

let composer = CometChatMessageComposer()
composer.setMentionAllLabel("Everyone", "Notify all members in this group")

Message List — Display messages in a conversation
Message Header — Display user/group details
Mentions Formatter — Configure @mention formatting

​Where It Fits

​Minimal Render

​Actions and Events

​Callback Props

​onSendButtonClick

​onTextChangedListener

​onError

​SDK Events (Real-Time, Automatic)

​Custom View Slots

​headerView

​footerView

​sendButtonView

​auxillaryButtonView

​attachmentOptions

​Common Patterns

​Thread composer

​Minimal composer — text only

​Pre-filled text

​Disable typing indicators

​Disable mentions

​Custom send button action

​Styling

​Style Hierarchy

​Global Level Styling

​Instance Level Styling

​Key Style Properties

​Sub-Component Styles

​Customization Matrix

​Props

​Methods

​set(textFormatter:)

​setDisableMentionAll(_:)

​setMentionAllLabel(::)

​Related Components