Base Components | Description |
---|---|
MessageInput | This provides a basic layout for the contents of this component, such as the TextField and buttons |
ActionSheet | The ActionSheet component presents a list of options in either a list or grid mode, depending on the user’s preference |
set(onSendButtonClick:)
event gets activated when the send message button is clicked. The following code snippet Overrides the action of the send button in CometChatMessageComposer.
set(onTextChanged:)
event gets activated when the user starts typing in message composer. This will return the text entered by the user.
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 MessageComposer Component does not emit any events of its own.
MessageComposerStyle
to the MessageComposer
component.
Global level styling
Property | Description | Code |
---|---|---|
Placeholder Text Font | Font for the placeholder text in the input field. | CometChatMessageComposer.style.placeHolderTextFont = CometChatTypography.Body.regular |
Placeholder Text Color | Color for the placeholder text in the input field. | CometChatMessageComposer.style.placeHolderTextColor = CometChatTheme.textColorTertiary |
Text Field Color | Text color for the input field. | CometChatMessageComposer.style.textFiledColor = CometChatTheme.textColorPrimary |
Text Field Font | Font for the input field text. | CometChatMessageComposer.style.textFiledFont = CometChatTypography.Body.regular |
Background Color | Background color with dynamic support for light and dark mode. | CometChatMessageComposer.style.backgroundColor = UIColor.dynamicColor(lightModeColor: ..., darkModeColor: ...) |
Corner Radius | Corner radius for the composer. | CometChatMessageComposer.style.cornerRadius = CometChatCornerStyle? |
Border Width | Border width for the composer. | CometChatMessageComposer.style.borderWidth = 0 |
Border Color | Border color for the composer. | CometChatMessageComposer.style.borderColor = .clear |
Send Button Image | Icon for the send button. | CometChatMessageComposer.style.sendButtonImage = UIImage(named: "custom-send") |
Send Button Tint Color | Tint color for the send button image. | CometChatMessageComposer.style.sendButtonImageTint = CometChatTheme.white |
Active Send Button Background Color | Background color for the send button when active. | CometChatMessageComposer.style.activeSendButtonImageBackgroundColor = CometChatTheme.primaryColor |
Inactive Send Button Background Color | Background color for the send button when inactive. | CometChatMessageComposer.style.inactiveSendButtonImageBackgroundColor = CometChatTheme.neutralColor300 |
Compose Box Background Color | Background color for the compose box. | CometChatMessageComposer.style.composeBoxBackgroundColor = CometChatTheme.backgroundColor01 |
Compose Box Border Color | Border color for the compose box. | CometChatMessageComposer.style.composeBoxBorderColor = CometChatTheme.borderColorDefault |
Compose Box Border Width | Border width for the compose box. | CometChatMessageComposer.style.composeBoxBorderWidth = 1 |
Compose Box Corner Radius | Corner radius for the compose box. | CometChatMessageComposer.style.composerBoxCornerRadius = .init(cornerRadius: CometChatSpacing.Radius.r2) |
Compose Box Separator Color | Color for the separator in the compose box. | CometChatMessageComposer.style.composerSeparatorColor = CometChatTheme.borderColorLight |
Attachment Image | Icon for the attachment button. | CometChatMessageComposer.style.attachmentImage = UIImage(systemName: "plus.circle") |
Attachment Image Tint | Tint color for the attachment image. | CometChatMessageComposer.style.attachmentImageTint = CometChatTheme.iconColorSecondary |
Voice Recording Image | Icon for the voice recording button. | CometChatMessageComposer.style.voiceRecordingImage = UIImage(systemName: "mic")?.withRenderingMode(.alwaysTemplate) |
Voice Recording Image Tint | Tint color for the voice recording image. | CometChatMessageComposer.style.voiceRecordingImageTint = CometChatTheme.iconColorSecondary |
AI Image | Icon for the AI button. | CometChatMessageComposer.style.aiImage = UIImage(named: "ai-image") |
AI Image Tint | Tint color for the AI image. | CometChatMessageComposer.style.aiImageTint = CometChatTheme.iconColorSecondary |
Sticker Image | Icon for the sticker button. | CometChatMessageComposer.style.stickerImage = UIImage(named: "sticker-image") |
Sticker Image Tint | Tint color for the sticker image. | CometChatMessageComposer.style.stickerTint = CometChatTheme.iconColorSecondary |
Edit Preview Title Font | Font for the title in the edit preview. | CometChatMessageComposer.style.editPreviewTitleTextFont = CometChatTypography.Body.regular |
Edit Preview Message Font | Font for the message text in the edit preview. | CometChatMessageComposer.style.editPreviewMessageTextFont = CometChatTypography.Caption1.regular |
Edit Preview Title Color | Text color for the title in the edit preview. | CometChatMessageComposer.style.editPreviewTitleTextColor = CometChatTheme.textColorPrimary |
Edit Preview Message Color | Text color for the message in the edit preview. | CometChatMessageComposer.style.editPreviewMessageTextColor = CometChatTheme.textColorSecondary |
Edit Preview Background Color | Background color for the edit preview. | CometChatMessageComposer.style.editPreviewBackgroundColor = CometChatTheme.backgroundColor03 |
Edit Preview Corner Radius | Corner radius for the edit preview. | CometChatMessageComposer.style.editPreviewCornerRadius = .init(cornerRadius: CometChatSpacing.Radius.r1) |
Edit Preview Border Color | Border color for the edit preview. | CometChatMessageComposer.style.editPreviewBorderColor = .clear |
Edit Preview Border Width | Border width for the edit preview. | CometChatMessageComposer.style.editPreviewBorderWidth = 0 |
Edit Preview Close Icon | Icon for closing the edit preview. | CometChatMessageComposer.style.editPreviewCloseIcon = UIImage(systemName: "xmark")?.withRenderingMode(.alwaysTemplate) |
Edit Preview Close Icon Tint | Tint color for the close icon in the edit preview. | CometChatMessageComposer.style.editPreviewCloseIconTint = CometChatTheme.iconColorPrimary |
Info Icon | Icon for the info button. | CometChatMessageComposer.style.infoIcon = UIImage(systemName: "info.circle") |
Info Icon Tint | Tint color for the info icon. | CometChatMessageComposer.style.infoIconTint = CometChatTheme.errorColor |
Info Text Color | Text color for the info text. | CometChatMessageComposer.style.infoTextColor = CometChatTheme.errorColor |
Info Text Font | Font for the info text. | CometChatMessageComposer.style.infoTextFont = CometChatTypography.Caption1.regular |
Info Separator Color | Color for the separator in the info section. | CometChatMessageComposer.style.infoSeparatorColor = CometChatTheme.borderColorLight |
Info Background Color | Background color for the info section. | CometChatMessageComposer.style.infoBackgroundColor = CometChatTheme.backgroundColor02 |
Info Corner Radius | Corner radius for the info section. | CometChatMessageComposer.style.infoCornerRadius = .init(cornerRadius: CometChatSpacing.Radius.r1) |
Info Border Color | Border color for the info section. | CometChatMessageComposer.style.infoBorderColor = .clear |
Info Border Width | Border width for the info section. | CometChatMessageComposer.style.infoBorderWidth = 0 |
MediaRecorderStyle
to the MessageComposer
component. For more details, please refer to MediaRecorder styles.
Global level styling
Property | Description | Code |
---|---|---|
backgroundColor | Sets the background color of the media recorder. | mediaRecorderStyle.backgroundColor: UIColor = CometChatTheme.backgroundColor01 |
borderWidth | Defines the width of the border for the media recorder. | mediaRecorderStyle.borderWidth: CGFloat = 1 |
borderColor | Specifies the border color of the media recorder. | mediaRecorderStyle.borderColor: UIColor = CometChatTheme.borderColorLight |
cornerRadius | Configures the corner radius of the media recorder. | mediaRecorderStyle.cornerRadius: CometChatCornerStyle? = nil |
recordingButtonBackgroundColor | Sets the background color of the recording button. | mediaRecorderStyle.recordingButtonBackgroundColor: UIColor = CometChatTheme.iconColorHighlight |
recordingButtonCornerRadius | Configures the corner radius of the recording button. | mediaRecorderStyle.recordingButtonCornerRadius: CometChatCornerStyle? = nil |
recordingButtonBorderWidth | Sets the border width of the recording button. | mediaRecorderStyle.recordingButtonBorderWidth: CGFloat = 0 |
recordingButtonBorderColor | Sets the border color of the recording button. | mediaRecorderStyle.recordingButtonBorderColor: UIColor = .clear |
recordingButtonImageTintColor | Specifies the tint color of the recording button image. | mediaRecorderStyle.recordingButtonImageTintColor: UIColor = CometChatTheme.white |
recordingButtonImage | The image displayed on the recording button. | mediaRecorderStyle.recordingButtonImage: UIImage = UIImage(systemName: "mic.fill") ?? UIImage() |
deleteButtonBackgroundColor | Sets the background color of the delete button. | mediaRecorderStyle.deleteButtonBackgroundColor: UIColor = CometChatTheme.backgroundColor01 |
deleteButtonImageTintColor | Specifies the tint color of the delete button image. | mediaRecorderStyle.deleteButtonImageTintColor: UIColor = CometChatTheme.iconColorSecondary |
deleteButtonImage | The image displayed on the delete button. | mediaRecorderStyle.deleteButtonImage: UIImage = UIImage(systemName: "trash.fill") ?? UIImage() |
deleteButtonCornerRadius | Configures the corner radius of the delete button. | mediaRecorderStyle.deleteButtonCornerRadius: CometChatCornerStyle? = nil |
deleteButtonBorderWidth | Sets the border width of the delete button. | mediaRecorderStyle.deleteButtonBorderWidth: CGFloat = 1 |
deleteButtonBorderColor | Specifies the border color of the delete button. | mediaRecorderStyle.deleteButtonBorderColor: UIColor = CometChatTheme.borderColorLight |
AIOptionsStyle
to the MessageComposer
component. For more details, please refer to MediaRecorder styles.
Global level styling
Property | Description | Code |
---|---|---|
errorViewTextFont | Specifies the font used for the text in the error view. | aIOptionsStyle.errorViewTextFont: UIFont? |
errorViewTextColor | Sets the color of the text in the error view. | aIOptionsStyle.errorViewTextColor: UIColor? |
emptyViewTextFont | Specifies the font used for the text in the empty view. | aIOptionsStyle.emptyViewTextFont: UIFont? |
emptyViewTextColor | Sets the color of the text in the empty view. | aIOptionsStyle.emptyViewTextColor: UIColor? |
aiImageTintColor | Configures the tint color for AI-related images. | aIOptionsStyle.aiImageTintColor: UIColor = CometChatTheme.iconColorHighlight |
textColor | Sets the color of the text. | aIOptionsStyle.textColor: UIColor = CometChatTheme.textColorPrimary |
textFont | Specifies the font for the text. | aIOptionsStyle.textFont: UIFont = CometChatTypography.Heading4.regular |
backgroundColor | Sets the background color. | aIOptionsStyle.backgroundColor: UIColor = CometChatTheme.backgroundColor01 |
borderWidth | Sets the width of the border. | aIOptionsStyle.borderWidth: CGFloat = 0 |
borderColor | Sets the color of the border. | aIOptionsStyle.borderColor: UIColor = .clear |
cornerRadius | Configures the corner radius of the view. | aIOptionsStyle.cornerRadius: CometChatCornerStyle? = nil |
Property | Description | Code |
---|---|---|
setInitialComposerText | Sets the initial text in the composer when it loads. | setInitialComposerText("Hello") |
disableTypingEvents | Disables sending typing indicators when the user types. | disableTypingEvents = true |
disableMentions | Disables the mention feature in the composer. | disableMentions = true |
hideImageAttachmentOption | Hides the option to attach images. | hideImageAttachmentOption = true |
hideVideoAttachmentOption | Hides the option to attach videos. | hideVideoAttachmentOption = true |
hideAudioAttachmentOption | Hides the option to attach audio files. | hideAudioAttachmentOption = true |
hideFileAttachmentOption | Hides the option to attach files. | hideFileAttachmentOption = true |
hidePollsOption | Hides the option to create polls. | hidePollsOption = true |
hideCollaborativeDocumentOption | Hides the option for collaborative documents. | hideCollaborativeDocumentOption = true |
hideCollaborativeWhiteboardOption | Hides the option for collaborative whiteboards. | hideCollaborativeWhiteboardOption = true |
hideAttachmentButton | Hides the attachment button in the composer. | hideAttachmentButton = true |
hideVoiceRecordingButton | Hides the voice recording button. | hideVoiceRecordingButton = true |
hideStickersButton | Hides the stickers button. | hideStickersButton = true |
hideSendButton | Hides the send button. | hideSendButton = true |
setUser | Sets the user for direct messaging. | set(user: User) |
setGroup | Sets the group for group messaging. | set(group: Group) |
setParentMessageId | Sets the parent message ID for replying in a thread. | set(parentMessageId: 12345) |
setMaxLine | Sets the maximum number of lines for the composer input. | set(maxLine: 3) |
setCustomSoundForMessages | Sets a custom sound for sending messages. | set(customSoundForMessages: URL?) |
disableSoundForMessages | Disables sound while sending messages. | disableSoundForMessages = true |
set(attachmentOptions:)
, you can set a list of custom MessageComposerActions
for the MessageComposer Component. This will override the existing list of CometChatMessageComposerAction
.
set(sendButtonView:)
, you can set a custom send button for the MessageComposer Component.
set(headerView:)
, you can set a custom header view for the MessageComposer Component.
MessageComposer
is properly configured, passing the controller is mandatory.cometChatMessages
. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.