Property Changes - CometChat Docs

AI Integration Quick Reference

Package	Migration from	Key changes	Reference
`@cometchat/chat-uikit-react`	v6 → v7	Plugin system replaces templates/textFormatters; compound components replace string props; individual hide*Option props consolidated; view props become render props on MessageBubble	Migration Overview

Common Patterns

These 8 patterns apply across all components. You do not need to look them up per-component:

#	Pattern	v6	v7	Action Required
1	View prop types	`JSX.Element`	`ReactNode`	None (backward-compatible)
2	Date format type	`CalendarObject`	`CometChatDateFormatConfig`	Same shape, type alias renamed
3	`hideError` prop (list & other components)	`boolean`	Removed	Use `errorView` prop instead — retained on `CometChatMessageComposer`
4	`disableLoadingState` prop	`boolean`	Removed	Use `loadingView` prop instead
5	`textFormatters` on list components	`CometChatTextFormatter[]`	Removed	Handled by plugin system
6	`templates` prop	`CometChatMessageTemplate[]`	Removed	Handled by plugin system
7	`className` prop	Not available	`string`	New on all components — for custom styling
8	`children` prop	Not available	`ReactNode`	New on many components — for compound composition

CometChatConversations

Removed Props

Prop	Replacement
`textFormatters`	Plugin system handles formatting
`hideError`	Use `errorView` prop

New Props

Prop	Type	Description
`onEmpty`	`() => void`	Called when conversation list is empty
`searchRequestBuilder`	`ConversationsRequestBuilder`	Builder for search filtering
`searchKeyword`	`string`	Controlled search keyword

CometChatMessageList

Modified Props

Prop	v6 Type	v7 Type	Notes
`goToMessageId`	`string`	`number`	Changed to match SDK’s `getId()` return type

Removed Props

Prop	Replacement
`templates`	Plugin system
`textFormatters`	Plugin system
`hideError`	Use `errorView` prop

New Props

Prop	Type	Description
`messageTypes`	`string[]`	Filter message types to display
`messageCategories`	`string[]`	Filter message categories
`onAvatarClick`	`(user: CometChat.User) => void`	Avatar click callback
`onEditMessage`	`(message: CometChat.BaseMessage) => void`	Edit message callback
`onReplyMessage`	`(message: CometChat.BaseMessage) => void`	Reply message callback
`disableTruncation`	`boolean`	Disable text truncation in bubbles
`bubbleView`	`(message, loggedInUser) => ReactNode`	Custom bubble renderer
`onActiveChatChanged`	`(data) => void`	Active chat change callback
`onMessageRead`	`(message: CometChat.BaseMessage) => void`	Message read callback
`onMessageDeleted`	`(message: CometChat.BaseMessage) => void`	Message deleted callback
`onConversationMarkedAsRead`	`(conversation) => void`	Conversation marked as read
`onConversationUpdated`	`(conversation) => void`	Conversation updated callback

CometChatMessageComposer

Renamed Props

v6 Name	v7 Name
`initialComposerText`	`initialText`
`placeholderText`	`placeholder`
`hideImageAttachmentOption` / `hideVideoAttachmentOption` / `hideAudioAttachmentOption` / `hideFileAttachmentOption` / `hidePollsOption` / `hideCollaborativeDocumentOption` / `hideCollaborativeWhiteboardOption`	`hideAttachmentOptions` (single object with boolean fields)

New Props

Prop	Type	Description
`layout`	`CometChatMessageComposerLayout`	Absorbs CompactMessageComposer variant
`text`	`string`	Controlled text value
`maxInputHeight`	`number`	Max height before scrolling
`enableRichTextEditor`	`boolean`	Enable rich text formatting toolbar
`hideRichTextFormattingOptions`	`boolean`	Hide formatting toolbar when rich text is enabled
`showBubbleMenuOnSelection`	`boolean`	Show bubble menu on text selection
`messageToEdit`	`TextMessage \| null`	Message being edited
`messageToReply`	`BaseMessage \| null`	Message being replied to
`hideAttachmentOptions`	`CometChatAttachmentHideOptions`	Object to hide specific attachment types
`showAttachmentPreview`	`boolean`	Show attachment preview before sending
`enableMultipleAttachments`	`boolean`	Enable multi-attachment staging tray and batch send. Default: `true`. Set to `false` for legacy single-select behavior
`disableDragAndDrop`	`boolean`	Disable drag-and-drop file upload. Default: `false`
`allowedFileTypes`	`string[]`	Allowed MIME types for attachments
`hideAIButton`	`boolean`	Hide AI assistant button
`hideLiveReaction`	`boolean`	Hide live reaction button
`hideError`	`boolean`	Hide error state
`disableAutoFocusOnMobile`	`boolean`	Disable auto-focus on mobile
`liveReactionIcon`	`string`	Custom live reaction icon
`attachmentIconView`	`ReactNode`	Custom attachment icon
`voiceRecordingIconView`	`ReactNode`	Custom voice recording icon
`emojiIconView`	`ReactNode`	Custom emoji icon
`secondaryButtonView`	`ReactNode`	Custom secondary button
`sendTextMessageOverride`	`(text, richTextHtml?) => string`	Override sent text
`onClosePreview`	`() => void`	Close preview callback
`onAttachmentAdded`	`(file: File) => void`	Attachment added callback
`onAttachmentRemoved`	`(file: File) => void`	Attachment removed callback
`onMentionSelected`	`(user) => void`	Mention selected callback

CometChatMessageHeader

Modified Props

Prop	v6 Signature	v7 Signature	Notes
`onItemClick`	`() => void`	`(entity: User \| Group) => void`	Now receives the user/group entity

Removed Props

Prop	Replacement
`itemView`	Use compound composition to replace header parts

New Props

Prop	Type	Description
`onSummaryClick`	`() => void`	Summary button click
`onVoiceCallClick`	`(entity: User \| Group) => void`	Voice call button click
`onVideoCallClick`	`(entity: User \| Group) => void`	Video call button click
`callSettingsBuilder`	`any`	Custom call settings builder

CometChatThreadHeader

Removed Props

Prop	Replacement
`template`	Plugin system
`textFormatters`	Plugin system

New Props

Prop	Type	Description
`onParentDeleted`	`() => void`	Called when parent message is deleted
`headerView`	`ReactNode`	Custom header content

CometChatUsers

Removed Props

Prop	Replacement
`hideError`	Use `errorView` prop
`disableLoadingState`	Use `loadingView` prop

CometChatGroups

Removed Props

Prop	Replacement
`hideError`	Use `errorView` prop

New Props

Prop	Type	Description
`onEmpty`	`() => void`	Called when list is empty
`searchKeyword`	`string`	Controlled search keyword

CometChatGroupMembers

Modified Props

Prop	v6 Signature	v7 Signature	Notes
`options`	`(group, member) => Option[]`	`(member) => Option[]`	`group` param removed — component already knows its group

Removed Props

Prop	Replacement
`hideError`	Use `errorView` prop
`disableLoadingState`	Use `loadingView` prop

New Props

Prop	Type	Description
`onBack`	`() => void`	Back button callback

CometChatIncomingCall

Removed Props

Prop	Replacement
`call`	Incoming call is detected automatically in v7

New Props

Prop	Type	Description
`onCallEnded`	`() => void`	Called when call ends

CometChatOngoingCall

New Props

Prop	Type	Description
`isAudioOnly`	`boolean`	Audio-only call mode
`isDirectCalling`	`boolean`	Direct calling mode
`onCallEnded`	`() => void`	Called when call ends

CometChatMessageBubble

Renamed Props

v6 Name	v7 Name
`topMenuSize`	`quickOptionsCount`

Modified Props

Prop	v6 Type	v7 Type	Migration
`leadingView`	`JSX.Element \| null`	`(message) => ReactNode \| null`	Wrap in arrow function: `() => yourJSX`
`headerView`	`JSX.Element \| null`	`(message) => ReactNode \| null`	Wrap in arrow function
`bottomView`	`JSX.Element \| null`	`(message) => ReactNode \| null`	Wrap in arrow function
`threadView`	`JSX.Element \| null`	`(message) => ReactNode \| null`	Wrap in arrow function
`footerView`	`JSX.Element \| null`	`(message) => ReactNode \| null`	Wrap in arrow function
`statusInfoView`	`JSX.Element \| null`	`(message) => ReactNode \| null`	Wrap in arrow function
`options`	`(CometChatActionsIcon \| CometChatActionsView)[]`	`CometChatMessageOption[]`	New type with `id`, `title`, `onClick`
`setRef`	`(ref: any) => void`	`Ref<HTMLDivElement>`	Use `useRef()` instead of callback

Removed Props

Prop	Replacement
`id`	Derived from `message` prop
`type`	Derived from `message` prop
`category`	Derived from `message` prop

New Props

Prop	Type	Description
`message`	`CometChat.BaseMessage`	The message object (required)
`group`	`CometChat.Group`	Group context
`hideAvatar`	`boolean`	Hide avatar
`forceShowAvatar`	`boolean`	Force show avatar
`hideSenderName`	`boolean`	Hide sender name
`hideTimestamp`	`boolean`	Hide timestamp
`hideThreadView`	`boolean`	Hide thread indicator
`showError`	`boolean`	Show error state
`disableInteraction`	`boolean`	Disable all interactions
`hideReceipts`	`boolean`	Hide delivery receipts
`messageSentAtDateTimeFormat`	`CometChatDateFormatConfig`	Timestamp format
`onAvatarClick`	`(user) => void`	Avatar click callback
`onThreadRepliesClick`	`(message) => void`	Thread click callback
`onOptionClick`	`(option, message) => void`	Option click callback
`onReactionChipClick`	`(messageId, emoji) => void`	Reaction chip click
`isSelected`	`boolean`	Selection state

CometChatContextMenu

Renamed Props

v6 Name	v7 Name
`data`	`items`
`moreIconHoverText`	`moreButtonTooltip`

Modified Props

Prop	Change
`onOptionClicked`	Type changed: now receives `CometChatContextMenuItemData`

CometChatConfirmDialog

All string/callback props moved to compound sub-components:

v6 Prop	v7 Location
`title`	`CometChatConfirmDialog.Content` → `title` prop
`messageText`	`CometChatConfirmDialog.Content` → `messageText` prop
`cancelButtonText`	`CometChatConfirmDialog.Actions` → `cancelButtonText` prop
`confirmButtonText`	`CometChatConfirmDialog.Actions` → `confirmButtonText` prop
`onSubmitClick`	`CometChatConfirmDialog.Actions` → `onConfirm` prop
`onCancelClick`	`CometChatConfirmDialog.Actions` → `onCancel` prop

New root-level props: isOpen, onClose, closeOnOutsideClick, variant. The compound sub-components are CometChatConfirmDialog.Root, .Icon (optional leading icon, new in v7), .Content, and .Actions.

CometChatActionSheet

All props moved to compound pattern:

v6 Prop	v7 Equivalent
`actions`	Pass items as `<CometChatActionSheet.Item item={...} />` children
`onActionItemClick`	Each `CometChatActionSheet.Item` handles its own `onClick` via `item.onClick`

New root-level props: isOpen, onClose, layoutMode, title.

CometChatCheckbox

Renamed Props

v6 Name	v7 Name
`labelText`	`label`
`onCheckBoxValueChanged`	`onChange`

CometChatChangeScope

Renamed Props

v6 Name	v7 Name
`onCloseClick`	`onClose`

Modified Props

Prop	v6 Type	v7 Type	Notes
`options`	`string[]`	`CometChatChangeScopeOptionData[]`	Changed to structured `{ id, label }` objects. Migration: `options.map(s => ({ id: s, label: s }))`

CometChatDate

Renamed Props

v6 Name	v7 Name
`calendarObject`	`formatConfig`

New Props

Prop	Type	Description
`formatter`	`(timestamp: number) => string`	Custom format function
`variant`	`CometChatDateVariant`	Display variant

CometChatReactions

Renamed Props

v6 Name	v7 Name
`messageObject`	`message`
`onReactionListItemClick`	`onReactorClick`

Modified Props

Prop	v6 Signature	v7 Signature	Notes
`onReactionClick`	`(reaction: ReactionCount, message) => void`	`(emoji: string, message) => void`	First param changed from object to emoji string

CometChatReactionList

Renamed Props

v6 Name	v7 Name
`messageObject`	`message`
`reactionItemClicked`	`onItemClick`

CometChatFullScreenViewer

Renamed Props

v6 Name	v7 Name
`ccCloseClicked`	`onClose`

Removed Props

Prop	Replacement
`message`	Replaced by individual props: `senderName`, `senderAvatar`, `sentAt`
`placeholderImage`	Handled internally

New Props

Prop	Type	Description
`isOpen`	`boolean`	Controlled open state
`mediaType`	`CometChatFullScreenViewerMediaType`	Type of media being viewed
`fileName`	`string`	File name display
`fileSize`	`number`	File size display
`attachments`	`CometChatMediaAttachment[]`	Multi-media gallery support
`startIndex`	`number`	Initial gallery index
`senderName`	`string`	Sender display name
`senderAvatar`	`string`	Sender avatar URL
`senderStatus`	`string`	Sender online status
`sentAt`	`string`	Message timestamp
`onIndexChange`	`(index: number) => void`	Gallery index change callback
`onDownload`	`(attachment) => void`	Download callback
`enablePictureInPicture`	`boolean`	PiP for video

CometChatImageBubble

In v7, image bubbles are self-extracting: pass the SDK message and the bubble derives its own attachments, caption, and alignment. The pre-extracted data props from v6 are gone.

Removed Props

Prop	Replacement
`src`	Self-extracted from `message` (multi-image support via the message’s attachments)
`isSentByMe`	`alignment` (`"left"` / `"right"`), auto-derived from the message sender vs. the logged-in user when omitted
`attachments`	Self-extracted from `message`
`caption`	Self-extracted from `message`
`senderName`	Self-extracted from `message`

New / Current Props

Prop	Type	Description
`message`	`CometChat.MediaMessage`	Source message — drives all extraction (required)
`alignment`	`"left" \| "right"`	Override incoming/outgoing alignment
`textFormatters`	`CometChatTextFormatter[]`	Text formatters for caption rendering
`placeholderImage`	`string`	Custom placeholder shown while the image loads
`onImageClicked`	`(attachment, index) => void`	Fires when an image is clicked
`className`	`string`	Custom root class

This self-extracting pattern applies to all message bubbles in v7 (CometChatTextBubble, CometChatVideoBubble, CometChatAudioBubble, CometChatFileBubble, CometChatPollBubble, CometChatStickerBubble, CometChatCallBubble, and the action/collaborative bubbles): each takes the SDK message and derives its own data. See Message Bubble.

CometChatSearchBar

Modified Props

Prop	v6 Signature	v7 Signature	Notes
`onChange`	`(input: { value?: string }) => void`	`(value: string) => void`	Simplified — receives string directly

New Props

Prop	Type	Description
`defaultSearchText`	`string`	Default search text
`disabled`	`boolean`	Disable the search bar
`debounceMs`	`number`	Debounce delay in ms
`inputRef`	`Ref<HTMLInputElement>`	Ref to the input element
`style`	`CSSProperties`	Inline styles

CometChatButton

Removed Props

Prop	Replacement
`text`	Use `children`
`iconURL`	Use `children` (render your own icon)
`onClick`	Uses native `ButtonHTMLAttributes` — standard `onClick` from React

New Props

Prop	Type	Description
`variant`	`CometChatButtonVariant`	Button style variant
`size`	`CometChatButtonSize`	Button size
`loadingLabel`	`string`	Label shown during loading

​Common Patterns

​CometChatConversations

​Removed Props

​New Props

​CometChatMessageList

​Modified Props

​Removed Props

​New Props

​CometChatMessageComposer

​Renamed Props

​New Props

​CometChatMessageHeader

​Modified Props

​Removed Props

​New Props

​CometChatThreadHeader

​Removed Props

​New Props

​CometChatUsers

​Removed Props

​CometChatGroups

​Removed Props

​New Props

​CometChatGroupMembers

​Modified Props

​Removed Props

​New Props

​CometChatIncomingCall

​Removed Props

​New Props

​CometChatOngoingCall

​New Props

​CometChatMessageBubble

​Renamed Props

​Modified Props

​Removed Props

​New Props

​CometChatContextMenu

​Renamed Props

​Modified Props

​CometChatConfirmDialog

​CometChatActionSheet

​CometChatCheckbox

​Renamed Props

​CometChatChangeScope

​Renamed Props

​Modified Props

​CometChatDate

​Renamed Props

​New Props

​CometChatReactions

​Renamed Props

​Modified Props

​CometChatReactionList

​Renamed Props

​CometChatFullScreenViewer

​Renamed Props

​Removed Props

​New Props

​CometChatImageBubble

​Removed Props

​New / Current Props

​CometChatSearchBar

​Modified Props

​New Props

​CometChatButton

​Removed Props

​New Props

​Next Steps

Migration Overview

Components Overview

Common Patterns

CometChatConversations

Removed Props

New Props

CometChatMessageList

Modified Props

Removed Props

New Props

CometChatMessageComposer

Renamed Props

New Props

CometChatMessageHeader

Modified Props

Removed Props

New Props

CometChatThreadHeader

Removed Props

New Props

CometChatUsers

Removed Props

CometChatGroups

Removed Props

New Props

CometChatGroupMembers

Modified Props

Removed Props

New Props

CometChatIncomingCall

Removed Props

New Props

CometChatOngoingCall

New Props

CometChatMessageBubble

Renamed Props

Modified Props

Removed Props

New Props

CometChatContextMenu

Renamed Props

Modified Props

CometChatConfirmDialog

CometChatActionSheet

CometChatCheckbox

Renamed Props

CometChatChangeScope

Renamed Props

Modified Props

CometChatDate

Renamed Props

New Props

CometChatReactions

Renamed Props

Modified Props

CometChatReactionList

Renamed Props

CometChatFullScreenViewer

Renamed Props

Removed Props

New Props

CometChatImageBubble

Removed Props

New / Current Props

CometChatSearchBar

Modified Props

New Props

CometChatButton

Removed Props

New Props

Next Steps