AI Integration Quick Reference
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 |
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 |
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