Property Changes

Complete prop migration reference for all components from v6 to v7 — renamed, removed, added, and type-changed props.

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 10 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	boolean	Removed	Use errorView prop instead
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
loggedInUser	CometChat.User	Override the logged-in user
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
enableDragDrop	boolean	Enable drag-and-drop file upload
maxAttachments	number	Max attachments per message
allowedFileTypes	string[]	Allowed MIME types
maxFileSize	number	Max file size in bytes
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
onThreadClick	(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.

---

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

Removed Props

Prop	Replacement
src	Replaced by attachments array (multi-image support)
isSentByMe	Replaced by variant prop ("incoming" / "outgoing")
placeholderImage	Handled internally

New Props

Prop	Type	Description
attachments	CometChatImageBubbleAttachment[]	Multi-image support
variant	CometChatImageBubbleVariant	Replaces isSentByMe
caption	string	Image caption
message	CometChat.MediaMessage	Source message
senderName	string	Sender name for caption
textFormatters	CometChatTextFormatter[]	Text formatters for caption

---

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

---

Next Steps

Migration Overview

Architecture changes and step-by-step checklist

Components Overview

Browse all v7 components