> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Property Changes

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

<Accordion title="AI Integration Quick Reference">
  | Package | Migration from | Key changes | Reference |
  | - | - | - | - |
  | `@cometchat/chat-uikit-react` | v6 → v7 | Plugin system replaces templates; compound components replace string props; individual hide\*Option props consolidated; view props become render props on MessageBubble | [Migration Overview](/ui-kit/react/migration-overview) |
</Accordion>

## 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. `CometChatMessageComposer` is the exception: it has a `hideError` prop in v7, which it did not have in v6 |
| 4 | `disableLoadingState` prop | `boolean` | Removed | Use `loadingView` prop instead |
| 5 | `textFormatters` on list components | `CometChatTextFormatter[]` | `CometChatTextFormatter[]` | Prop removed in 7.0.0 and **back in 7.2.0** on `CometChatConversations`, `CometChatMessageList` and `CometChatThreadHeader`. A v6 formatter carries over when its transform lives in `customLogicToFormatText()` or `getFormattedText()`; see [Porting a v6 formatter](#porting-a-v6-formatter). On 7.0.x–7.1.x the prop is unavailable |
| 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 |

***

## Changes Within v7

Most of this page maps v6 to v7. These props existed in an earlier **v7** release and were removed by a later one, so they affect you only if you are upgrading from one v7 version to another.

| Prop | Component | Present in | Removed in | Replacement |
| - | - | - | - | - |
| `loggedInUser` | `CometChatMessageBubbleRenderer` | 7.0.0 | 7.0.2 | Resolved internally — the renderer reads the logged-in user itself |
| `maxAttachments` | `CometChatMessageComposer` | 7.0.0 – 7.0.3 | 7.1.0 | No prop. The per-batch limit now comes from your app settings, defaulting to 10 |
| `maxFileSize` | `CometChatMessageComposer` | 7.0.0 – 7.0.3 | 7.1.0 | No prop. The per-file limit now comes from your app's `file.size.max` setting; an oversized file is rejected on its own tray tile |

<Warning>
  `maxAttachments` and `maxFileSize` were dropped in the 7.1.0 multi-attachment rewrite. TypeScript flags both as unknown props once you upgrade, but in plain JavaScript they are silently ignored — any cap you set simply stops applying, with no error. If your app is not typed, search for both before upgrading past 7.0.3.
</Warning>

***

## CometChatConversations

### Modified Props

| Prop | v6 Default | v7 Default | Notes |
| - | - | - | - |
| `showSearchBar` | `false` | `true` | The prop is unchanged, but the default flipped. A v6 app that never set it gains a search bar on upgrade — pass `showSearchBar={false}` to keep the v6 look |

### Removed Props

| Prop | Replacement |
| - | - |
| `hideError` | Use `errorView` prop |

### New Props

| Prop | Type | Since | Description |
| - | - | - | - |
| `onEmpty` | `() => void` | 7.0.0 | Called when conversation list is empty |
| `searchRequestBuilder` | `ConversationsRequestBuilder` | 7.0.0 | Builder for search filtering |
| `searchKeyword` | `string` | 7.0.0 | Controlled search keyword |
| `textFormatters` | `CometChatTextFormatter[]` | 7.2.0 | Carried over from v6 — see [Porting a v6 formatter](#porting-a-v6-formatter) |
| `hidePinConversation` | `boolean` | 7.2.0 | Hide the pin/unpin conversation option |

***

## 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 |
| `hideError` | Use `errorView` prop |

<Note>
  `textFormatters` was removed in 7.0.0 and the prop is **back in 7.2.0**. On 7.0.x–7.1.x it is unavailable and formatting must go through a plugin. Most v6 formatter classes carry over — see [Porting a v6 formatter](#porting-a-v6-formatter) for what changes.
</Note>

#### Porting a v6 formatter

**The rule: in v7 a formatter works on text, never on the message.** A string goes in, a string comes out. Composer-side formatters still get live-input access — the composer assigns `inputElementReference`, calls `initializeComposerTracking()`, fans keystrokes to `onKeyUp()`/`onKeyDown()`, and provides `getCaretPosition()`/`setCaretPosition()` — but only when [`enableRichTextEditor`](/ui-kit/react/components/message-composer#enablerichtexteditor) is set on the composer. What no longer reaches a formatter is the **message object and the logged-in user**, so every v6 member carrying that context is gone — along with the v6 hooks the kit used to call.

[Text Formatters](/ui-kit/react/plugins/text-formatters) is the reference for the v7 class: every member, who calls it, and what happens if you override it. This section covers only what changes when you bring a v6 class to it.

Three outcomes, in the order you will meet them:

| What your v6 formatter does | On v7 |
| - | - |
| Has no `id`, or overrides `getFormattedText()` with the v6 signature | **Compile error.** TypeScript names the member — fix and move on |
| **Calls** a member v7 removed | **Runtime error**, but see the warning below: on display surfaces the kit catches it and drops your formatter |
| **Overrides** a hook v7 no longer calls, or **reads** a field v7 no longer populates | **Silently does nothing.** Nothing throws; the code simply never runs |

##### Compile errors

**`id` is the only abstract member.** A v6 subclass fails with `TS2515: … does not implement inherited abstract member id` until you add one:

```tsx theme={null}
export class HashtagFormatter extends CometChatTextFormatter {
  readonly id = "hashtag"; // required in v7
  customLogicToFormatText(text: string): string {
    return text.replace(/#(\w+)/g, '<span class="hashtag">#$1</span>');
  }
}
```

Ids must be unique: the kit merges formatters into a map keyed by `id`, so two formatters sharing one id leave only the last, and reusing a built-in id (`markdown-formatter`, `mentions-formatter`, `url-formatter`) replaces that built-in. Plain JavaScript runs without an `id`, but every id-less formatter collapses onto the same key — declare one.

**`getFormattedText()` changed signature** to `(inputText?: string) => string`. Two v6 shapes no longer type-check, both reported as `TS2416`:

* returning `undefined` for empty input — return `""` instead;
* the two-parameter form `getFormattedText(text, params)` — v7 passes one argument, so a second parameter is never populated and reading it throws.

##### Where your transform has to live

v7 calls `format()`, whose default stores state and delegates to `getFormattedText()` and then to `customLogicToFormatText()`. Whether your v6 transform still runs depends on where you put it:

| v6 transform lives in | On v7 |
| - | - |
| `customLogicToFormatText()` — the helper the [v6 custom-formatter guide](/ui-kit/react/guide-custom-text-formatter) has you write | **Still runs.** v7 calls it by default |
| `getFormattedText()` | **Still runs**, once the signature above is fixed |
| `onRegexMatch()` — v6's base-class default, and the [v6 URL formatter guide](/ui-kit/react/v6/url-formatter-guide) pattern | **Never runs.** v7 has no `onRegexMatch`. Move the transform into `customLogicToFormatText()` |

##### Members v7 removed

Calling one of these is a compile error in TypeScript (`TS2339`) and a `TypeError` in JavaScript. Reading one of the fields gives `undefined`, which throws as soon as you dereference it.

**Helpers:** `setStyle()` · `getStyle()` · `setClasses()` · `setCssClassMapping()` · `setId()` · `getId()` · `setMessage()` · `getMessage()` · `setLoggedInUser()` · `getLoggedInUser()` · `setComposerConfig()` · `getComposerConfig()` · `setMessageBubbleAlignment()` · `getMessageBubbleAlignment()` · `setCaretPositionAndRange()` · `addAtCaretPosition()` · `getPrecedingText()` · `checkPreviousCharacterUsingRange()` · `debounce()` · `cleanup()` · `stopTracking()` · `getKeyUpCallBack()` · `getKeyDownCallBack()`

**Fields:** `messageObject` · `loggedInUser` · `user` · `group` · `composerId` · `messageBubbleAlignment` · `classes` · `cssClassMapping` · `textStyle` · `timeoutID`

**Caret fields with a v7 replacement:** `currentCaretPosition` and `currentRange` are gone, but caret access is not — use `getCaretPosition()` and `setCaretPosition()`.

Apply styling with CSS against your own class names rather than `setStyle`/`setClasses`.

<Warning>
  **A throwing formatter is dropped, not surfaced.** Only errors thrown from your own code or your constructor reach you directly. Anything thrown inside the display pipeline — `format()`, `getFormattedText()`, `customLogicToFormatText()` — is caught by the kit: text bubbles log `console.warn("CometChatTextBubble: Error applying text formatter")` and skip that formatter, while conversation subtitles, reply and edit previews, saved messages and search results swallow it with no message at all. Either way your formatting silently disappears rather than crashing the UI, so check the console first when a ported formatter renders nothing.
</Warning>

##### Hooks v7 no longer calls

Nothing surfaces these: your method stays on the class, nothing throws, and it is simply never invoked. **This is the category to audit by hand.** Some names appear in both lists — *calling* one of them is an error, *overriding* it is silent.

<Tip>
  **Add `override` to every method you believe the kit calls.** TypeScript then reports `TS4113: This member cannot have an 'override' modifier because it is not declared in the base class` for each hook v7 no longer has, which turns this whole silent category into compile errors. Enabling `noImplicitOverride` in your `tsconfig.json` applies it to the whole class.
</Tip>

| v6 hook | What called it in v6 | On v7 |
| - | - | - |
| `onRegexMatch()` | the base class, from `getFormattedText()` | Move the transform to `customLogicToFormatText()` |
| `registerEventListeners()` | the v6 kit, after formatted text was rendered | Attach your own listeners — for example a delegated handler on your rendered markup |
| `formatMessageForSending()` | the composer, just before sending | No formatter hook. Take over the send with the composer's `sendTextMessageOverride` — see [Attaching data at send time](#attaching-data-at-send-time) |
| `getFormattedTextForEntity()` | the v6 kit, while rendering formatted entities | No equivalent |
| `setMessage()` · `setMessageBubbleAlignment()` | the message-list data source, per bubble | No equivalent — v7 never hands a formatter the message |
| `setComposerConfig()` | the composer | No equivalent |
| `setCaretPositionAndRange()` | the composer, while typing | Use `getCaretPosition()`/`setCaretPosition()` |
| `formatTextOnKeyUp()` · `debouncedFormatTextOnKeyUp()` | the base `onKeyUp()`, on every keystroke | See live input below |

##### Attaching data at send time

v6's `formatMessageForSending()` let a formatter stamp the outgoing message — tags, metadata — just before it went out. v7 has no formatter hook for this: nothing hands a formatter the message. The composer's `onSendButtonClick` does not help either, because it fires *after* the SDK call with the confirmed message.

Move the logic to the composer's [`sendTextMessageOverride`](/ui-kit/react/components/message-composer#sendtextmessageoverride), which is called **instead of** the kit's own send, so you build and send the message yourself:

```tsx theme={null}
<CometChatMessageComposer
  user={user}
  sendTextMessageOverride={(text) => {
    const message = new CometChat.TextMessage(user.getUid(), text, CometChat.RECEIVER_TYPE.USER);

    // whatever formatMessageForSending() used to do
    const tags = Array.from(text.matchAll(/\B#(\w+)\b/g)).map((m) => m[1]);
    if (tags.length) {
      message.setTags(tags);
      message.setMetadata({ clientTags: tags });
    }

    const muid = `_${Math.random().toString(36).slice(2, 11)}`;
    message.setMuid(muid);
    void CometChatUIKit.sendTextMessage(message); // emits the events the list listens to
    return muid;
  }}
/>
```

<Warning>
  **Send it with `CometChatUIKit.sendTextMessage()`, not `CometChat.sendMessage()`.** The override replaces the composer's own send, including the optimistic insert into the message list. The UI Kit helper emits `ui:message/sent` at each stage, so your message appears immediately and then flips to sent. Call the SDK directly instead and the message is delivered but never shows up in the sender's list until the conversation is reloaded.
</Warning>

##### Live input is now yours to drive

v6's base `onKeyUp()` watched for `trackCharacter`, then called `debouncedFormatTextOnKeyUp()` for you. v7's base `onKeyUp()` only forwards to the callback set by `setKeyUpCallBack()`, and `formatText()` runs only when the composer enters rich-text edit mode. **v7 never reformats the live input on keystrokes by itself.**

A v6 formatter that relied on that inherited behaviour compiles, and then does nothing as you type. Call `formatText()` from your own `onKeyUp()` override (or from the callback you register) to restore it. Do not do both — registering your own `onKeyUp` via `setKeyUpCallBack()` while also overriding `onKeyUp()` and calling `super.onKeyUp()` recurses until the stack overflows. Set your tracking state explicitly too: on the v7 base class `trackCharacter` starts as `''` and `regexPatterns` as `[]`, so call `setTrackingCharacter()` and `setRegexPatterns()` in your constructor rather than relying on an inherited default.

<Warning>
  **None of this runs unless the composer has `enableRichTextEditor`.** The composer binds formatters to its editor only when the rich-text editor is active, so without that prop `inputElementReference` stays `null` and no keystroke ever reaches your formatter. There is no error — live formatting simply never happens. Display formatting is unaffected.
</Warning>

### New Props

| Prop | Type | Since | Description |
| - | - | - | - |
| `messageTypes` | `string[]` | 7.0.0 | Filter message types to display |
| `messageCategories` | `string[]` | 7.0.0 | Filter message categories |
| `onAvatarClick` | `(user: CometChat.User) => void` | 7.0.0 | Avatar click callback |
| `onEditMessage` | `(message: CometChat.BaseMessage) => void` | 7.0.0 | Edit message callback |
| `onReplyMessage` | `(message: CometChat.BaseMessage) => void` | 7.0.0 | Reply message callback |
| `disableTruncation` | `boolean` | 7.0.0 | Disable text truncation in bubbles |
| `bubbleView` | `(message, loggedInUser) => ReactNode` | 7.0.0 | Custom bubble renderer |
| `onActiveChatChanged` | `(data) => void` | 7.0.0 | Active chat change callback |
| `onMessageRead` | `(message: CometChat.BaseMessage) => void` | 7.0.0 | Message read callback |
| `onMessageDeleted` | `(message: CometChat.BaseMessage) => void` | 7.0.0 | Message deleted callback |
| `onConversationMarkedAsRead` | `(conversation) => void` | 7.0.0 | Conversation marked as read |
| `onConversationUpdated` | `(conversation) => void` | 7.0.0 | Conversation updated callback |
| `textFormatters` | `CometChatTextFormatter[]` | 7.2.0 | Merged into text and caption bubbles — see [Porting a v6 formatter](#porting-a-v6-formatter) |

***

## 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 | Since | Description |
| - | - | - | - |
| `layout` | `CometChatMessageComposerLayout` | 7.0.0 | Absorbs CompactMessageComposer variant |
| `text` | `string` | 7.0.0 | Controlled text value |
| `maxInputHeight` | `number` | 7.0.0 | Max height before scrolling |
| `enableRichTextEditor` | `boolean` | 7.0.0 | Enable rich text formatting toolbar |
| `hideRichTextFormattingOptions` | `boolean` | 7.0.0 | Hide formatting toolbar when rich text is enabled |
| `showBubbleMenuOnSelection` | `boolean` | 7.0.0 | Show bubble menu on text selection |
| `messageToEdit` | `TextMessage \| MediaMessage \| null` | 7.0.0 | Message being edited. `MediaMessage` was added in 7.1.0, when media captions became editable |
| `messageToReply` | `BaseMessage \| null` | 7.0.0 | Message being replied to |
| `hideAttachmentOptions` | `CometChatAttachmentHideOptions` | 7.0.0 | Object to hide specific attachment types |
| `showAttachmentPreview` | `boolean` | 7.0.0 | Show attachment preview before sending |
| `enableMultipleAttachments` | `boolean` | 7.1.0 | Enable multi-attachment staging tray and batch send. Default: `true`. Set to `false` for legacy single-select behavior |
| `disableDragAndDrop` | `boolean` | 7.1.0 | Disable drag-and-drop file upload. Default: `false` |
| `allowedFileTypes` | `string[]` | 7.0.0 | Allowed MIME types for attachments |
| `hideAIButton` | `boolean` | 7.0.0 | Hide AI assistant button |
| `hideLiveReaction` | `boolean` | 7.0.0 | Hide live reaction button |
| `hideError` | `boolean` | 7.0.0 | Hide error state |
| `disableAutoFocusOnMobile` | `boolean` | 7.0.0 | Disable auto-focus on mobile |
| `liveReactionIcon` | `string` | 7.0.0 | Custom live reaction icon |
| `attachmentButtonIconView` | `ReactNode` | 7.0.0 | Custom attachment icon |
| `voiceRecordingButtonIconView` | `ReactNode` | 7.0.0 | Custom voice recording icon |
| `emojiButtonIconView` | `ReactNode` | 7.0.0 | Custom emoji icon |
| `sendTextMessageOverride` | `(text, richTextHtml?) => string` | 7.0.0 | Override sent text |
| `onClosePreview` | `() => void` | 7.0.0 | Close preview callback |
| `onAttachmentAdded` | `(file: File) => void` | 7.0.0 | Attachment added callback |
| `onAttachmentRemoved` | `(file: File) => void` | 7.0.0 | Attachment removed callback |
| `onMentionSelected` | `(user) => void` | 7.0.0 | 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 | Since | Description |
| - | - | - | - |
| `onSummaryClick` | `() => void` | 7.0.0 | Summary button click |
| `onVoiceCallClick` | `(entity: User \| Group) => void` | 7.0.0 | Voice call button click |
| `onVideoCallClick` | `(entity: User \| Group) => void` | 7.0.0 | Video call button click |
| `callSettingsBuilder` | `any` | 7.0.0 | Custom call settings builder |

***

## CometChatThreadHeader

### Removed Props

| Prop | Replacement |
| - | - |
| `template` | Plugin system |

### New Props

| Prop | Type | Since | Description |
| - | - | - | - |
| `onParentDeleted` | `() => void` | 7.0.0 | Called when parent message is deleted |
| `headerView` | `ReactNode` | 7.0.0 | Custom header content |
| `textFormatters` | `CometChatTextFormatter[]` | 7.2.0 | Carried over from v6 — see [Porting a v6 formatter](#porting-a-v6-formatter) |
| `hideThreadSubscriptionToggle` | `boolean` | 7.2.0 | Hide the thread-subscription bell |
| `onThreadSubscriptionChange` | `(subscribed: boolean) => void` | 7.2.0 | Thread subscribe/unsubscribe callback |

***

## 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 | Since | Description |
| - | - | - | - |
| `onEmpty` | `() => void` | 7.0.0 | Called when list is empty |
| `searchKeyword` | `string` | 7.0.0 | 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 | Since | Description |
| - | - | - | - |
| `onBack` | `() => void` | 7.0.0 | Back button callback |

***

## CometChatIncomingCall

### Removed Props

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

### New Props

| Prop | Type | Since | Description |
| - | - | - | - |
| `onCallEnded` | `() => void` | 7.0.0 | Called when call ends |

***

## CometChatOngoingCall

### New Props

| Prop | Type | Since | Description |
| - | - | - | - |
| `isAudioOnly` | `boolean` | 7.0.0 | Audio-only call mode |
| `isDirectCalling` | `boolean` | 7.0.0 | Direct calling mode |
| `onCallEnded` | `() => void` | 7.0.0 | 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 | Since | Description |
| - | - | - | - |
| `message` | `CometChat.BaseMessage` | 7.0.0 | The message object (required) |
| `group` | `CometChat.Group` | 7.0.0 | Group context |
| `hideAvatar` | `boolean` | 7.0.0 | Hide avatar |
| `forceShowAvatar` | `boolean` | 7.0.0 | Force show avatar |
| `hideSenderName` | `boolean` | 7.0.0 | Hide sender name |
| `hideTimestamp` | `boolean` | 7.0.0 | Hide timestamp |
| `hideThreadView` | `boolean` | 7.0.0 | Hide thread indicator |
| `showError` | `boolean` | 7.0.0 | Show error state |
| `disableInteraction` | `boolean` | 7.0.0 | Disable all interactions |
| `hideReceipts` | `boolean` | 7.0.0 | Hide delivery receipts |
| `messageSentAtDateTimeFormat` | `CometChatDateFormatConfig` | 7.0.0 | Timestamp format |
| `onAvatarClick` | `(user) => void` | 7.0.0 | Avatar click callback |
| `onThreadRepliesClick` | `(message) => void` | 7.0.0 | Thread click callback |
| `onOptionClick` | `(option, message) => void` | 7.0.0 | Option click callback |
| `onReactionChipClick` | `(messageId, emoji) => void` | 7.0.0 | Reaction chip click |
| `isSelected` | `boolean` | 7.0.0 | 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 | Since | Description |
| - | - | - | - |
| `formatter` | `(timestamp: number) => string` | 7.0.0 | Custom format function |
| `variant` | `CometChatDateVariant` | 7.0.0 | 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 |
| `imageSentAtDateTimeFormat` | Pass a formatted string to `sentAt` instead |

### New Props

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

***

## CometChatImageBubble → CometChatImagesBubble

In v7, the image bubble is renamed **`CometChatImagesBubble`** and is **self-extracting**: pass the SDK `message` and the bubble derives its own attachments, caption, and alignment (and renders multiple images in a grid). 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 |

### 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 |

<Note>
  The other media bubbles likewise default to their multi-attachment v7 components: `CometChatVideoBubble` → `CometChatVideosBubble`, `CometChatFileBubble` → `CometChatFilesBubble`, and `CometChatAudioBubble` → `CometChatAudiosBubble` (attached audio files) or `CometChatVoiceNoteBubble` (recorded voice notes). The singular `CometChat*Bubble` components still ship and can be used standalone — only the default routing changed. This self-extracting pattern applies to all message bubbles in v7 (`CometChatTextBubble`, `CometChatPollBubble`, `CometChatStickerBubble`, `CometChatCallBubble`, and the action/collaborative bubbles too): each takes the SDK `message` and derives its own data. See [Message Bubble](/ui-kit/react/components/message-bubble).
</Note>

***

## 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 | Since | Description |
| - | - | - | - |
| `defaultSearchText` | `string` | 7.0.0 | Default search text |
| `disabled` | `boolean` | 7.0.0 | Disable the search bar |
| `debounceMs` | `number` | 7.0.0 | Debounce delay in ms |
| `inputRef` | `Ref<HTMLInputElement>` | 7.0.0 | Ref to the input element |
| `style` | `CSSProperties` | 7.0.0 | Inline styles |

***

## CometChatButton

### Renamed Props

| v6 Name | v7 Name |
| - | - |
| `iconURL` (`string` — an icon URL) | `icon` (`ReactNode` — render your own icon) |

### Modified Props

| Prop | v6 Type | v7 Type | Notes |
| - | - | - | - |
| `text` | `string` | `ReactNode` | Still supported; you may also pass `children` |
| `onClick` | `(customEvent: CustomEvent) => void` | `React.MouseEventHandler` | Native `ButtonHTMLAttributes` — the handler receives the React event, not a `CustomEvent` |

### New Props

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

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Migration Overview" icon="arrow-up" href="/ui-kit/react/migration-overview">
    Architecture changes and step-by-step checklist
  </Card>

  <Card title="Components Overview" icon="grid-2" href="/ui-kit/react/components-overview">
    Browse all v7 components
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.