> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# 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](/ui-kit/ios/components-overview#components) 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 theme={null}
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.
```swift theme={null}
compactComposer.set(controller: self) // Passing the controller is required
```
### Actions
[Actions](/ui-kit/ios/components-overview#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 theme={null}
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 theme={null}
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 theme={null}
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 theme={null}
compactComposer.set(attachmentOptions: { user, group, controller in
// Return custom attachment actions
return [CometChatMessageComposerAction]
})
```
***
### Filters
CompactMessageComposer component does not have any available filters.
***
### Events
[Events](/ui-kit/ios/components-overview#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 theme={null}
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 theme={null}
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 | `text` |
| 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 theme={null}
// 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 theme={null}
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](/ui-kit/ios/mentions-formatter-guide)
**Example**
```swift theme={null}
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 theme={null}
compactComposer.set(attachmentOptions: { user, group, controller in
return [CometChatMessageComposerAction]
})
```
**Example**
In this example, we are overriding the existing MessageComposerActions List with custom actions.
```swift theme={null}
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 theme={null}
compactComposer.edit(message: textMessage)
```
**Reply to a message**
```swift theme={null}
compactComposer.reply(message: baseMessage)
```
**Preview a message with a specific mode**
```swift theme={null}
compactComposer.preview(message: baseMessage, mode: .edit)
// or
compactComposer.preview(message: baseMessage, mode: .reply)
```
***
### Complete Integration Example
```swift theme={null}
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)
])
}
}
```