+
+
+```tsx
+import { useState, useEffect } from "react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";
+
+function AIAssistantCustomImage() {
+ const [agent, setAgent] = useState
+
+
+
+
+
+
+
+
+Customized:
+
+
+ 
+
+
+
+
+
+ {title}
+ {timestamp ? (
+
+
+ ) : null}
+
+ );
+ };
+
+ return 
+
+
+```tsx
+import { useEffect, useRef, useState } from "react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import {
+ CometChatConversations,
+ CometChatAvatar,
+ useLoggedInUser,
+} from "@cometchat/chat-uikit-react";
+
+function TypingAwareConversations() {
+ const [isTyping, setIsTyping] = useState(false);
+ const typingObjRef = useRef
+
+
+
+ );
+ };
+
+ return 
+
+
+
+
+ {user
+ ? conversation.getConversationWith().getName() + " · "
+ : conversation.getConversationWith().getName()}
+
+ {user && (
+
+ {user.getStatusMessage()}
+
+ )}
+
+ );
+ };
+
+ return 
+
+
+Customized:
+
+
+ 
+
+
+
+
+
+
+ {topLabel}
+ {bottomLabel}
+
+ );
+ };
+
+ return 
+
+
+
+ {getLocalizedString("chats")}
+
+ 
+
+
+```css
+.cometchat-conversations .cometchat-conversations__item-title,
+.cometchat-conversations .cometchat-conversations__header-title,
+.cometchat-conversations .cometchat-avatar__text,
+.cometchat-conversations .cometchat-conversations__item-unread-badge,
+.cometchat-conversations .cometchat-conversations__item-subtitle-text {
+ font-family: "SF Pro";
+}
+
+.cometchat-conversations .cometchat-conversations__header {
+ background: #fef8f8;
+ border-bottom: 2px solid #f4b6b8;
+}
+
+.cometchat-conversations .cometchat-avatar {
+ background: #FAAA75;
+}
+
+.cometchat-conversations .cometchat-status-indicator {
+ min-width: 10px;
+ height: 10px;
+}
+
+.cometchat-conversations .cometchat-conversations__item-unread-badge {
+ background: #F76809;
+}
+
+.cometchat-conversations .cometchat-conversations__item-receipt--read {
+ background: #FAAA75;
+}
+```
+
+### Customization Matrix
+
+| What to change | Where | Property/API | Example |
+| --- | --- | --- | --- |
+| Override behavior on user interaction | Component props | `on...
}` |
+| Change colors, fonts, spacing | Global CSS | Target `.cometchat-conversations` class | `.cometchat-conversations .cometchat-badge { background: #e5484d; }` |
---
diff --git a/ui-kit/react/components/group-members.mdx b/ui-kit/react/components/group-members.mdx
index 41c4a17b8..d5e3a2b51 100644
--- a/ui-kit/react/components/group-members.mdx
+++ b/ui-kit/react/components/group-members.mdx
@@ -326,7 +326,310 @@ Use view props to replace sections of the default UI while keeping the component
| `emptyView` | `ReactNode` | Empty state |
| `errorView` | `ReactNode` | Error state |
-{/* TODO:IMAGE - Annotated diagram showing which view slot maps to which part of the group member item */}
+#### itemView
+
+Replace the entire list item row.
+
+Default:
+
+
+ 
+
+
+Customized:
+
+
+ 
+
+
+
+
+ );
+ };
+
+ return
+
+
+
+
+
+ {member.getName()}
+
+ {scope}
+
+ 
+
+
+Customized:
+
+
+ 
+
+
+Joined: {date}
;
+ };
+
+ return 
+
+
+Customized:
+
+
+ 
+
+
+
+ {member.getScope()}
+
+ );
+ };
+
+ return 
+
+
+
+ {getLocalizedString("group_members")}
+
+ 
+
+
+
+
+
+Customized:
+
+
+ 
+
+
+
+
+ );
+ };
+
+ return
+
+ {group.getName()}
+ JOIN
+
+ {group.getMembersCount()} Members • {group.getDescription()}
+
+ 
+
+
+
+ {group.getName()}
+ {group.getType()}
+
+ );
+ };
+
+ return 
+
+
+Customized:
+
+
+ 
+
+
+
+ {group.getMembersCount()} Members • {group.getDescription()}
+
+ );
+ };
+
+ return 
+
+
+```tsx
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react";
+
+function CustomLeadingIncoming() {
+ return (
+ 
+
+
+```tsx
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
+
+function CustomTitleIncoming() {
+ return (
+ {call.getCallInitiator()?.getName()}
+ )}
+ />
+ );
+}
+```
+
+#### itemView
+
+
+ 
+
+
+```tsx
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react";
+
+function CustomItemViewIncoming() {
+ return (
+
+
+
+
+ )}
+ />
+ );
+}
+```
### CSS Styling
diff --git a/ui-kit/react/components/message-composer.mdx b/ui-kit/react/components/message-composer.mdx
index c9fbac96a..d5bdb8f04 100644
--- a/ui-kit/react/components/message-composer.mdx
+++ b/ui-kit/react/components/message-composer.mdx
@@ -324,7 +324,79 @@ Use view props to replace sections of the default UI while keeping the component
| `auxiliaryButtonView` | `ReactNode` | Additional buttons in the actions area |
| `headerView` | `ReactNode` | Header area above the input |
-{/* TODO:IMAGE - Annotated diagram showing which view slot maps to which part of the composer */}
+#### attachmentOptions
+
+Override the default attachment options.
+
+
+ {call.getCallInitiator()?.getName()}
+ 
+
+
+```tsx
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+
+function ComposerCustomAttachments({ chatUser }: { chatUser: CometChat.User }) {
+ return (
+ 
+
+
+```tsx
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatMessageComposer, CometChatButton } from "@cometchat/chat-uikit-react";
+
+function ComposerCustomAuxiliary({ chatUser }: { chatUser: CometChat.User }) {
+ return (
+ 
+
+
+```tsx
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatMessageComposer, CometChatButton } from "@cometchat/chat-uikit-react";
+
+function ComposerCustomSend({ chatUser }: { chatUser: CometChat.User }) {
+ return (
+ 
+
+
+```tsx
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatMessageHeader, CometChatAvatar } from "@cometchat/chat-uikit-react";
+
+function CustomItemViewHeader({ user }: { user: CometChat.User }) {
+ return (
+ 
+
+
+
+
+
+```tsx
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
+
+function CustomSubtitleHeader({ group }: { group: CometChat.Group }) {
+ return (
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ return
+ {message.getSender()?.getName()}:
+
+
+ {message instanceof CometChat.TextMessage
+ ? (message as CometChat.TextMessage).getText()
+ : message.getType()}
+
+ 
+
+
+
+ 
+
+ );
+
+ return 
+
+
+
+
+ );
+
+ return
+ {message.getSender()?.getName()}
+
+ |
+
+ {message.getSender().getRole() ?? "Pro User"}
+
+ 
+
+
+
+
+ );
+
+ return
+ {message.getSender()?.getName()}:
+
+
+ {message instanceof CometChat.TextMessage
+ ? (message as CometChat.TextMessage).getText()
+ : message.getType()}
+
+ 
+
+
+Customized:
+
+
+ 
+
+
+
+ {user.getName()}
+ {user.getStatus()}
+
+ );
+ };
+
+ return 
+
+
+
+
+
+
+ );
+ };
+
+ return 
+
+
+
+ {user.getName()}
+ {user.getRole()}
+
+ );
+ };
+
+ return 
+
+
+Customized:
+
+
+ 
+
+
+
+ {user.getStatusMessage() || user.getStatus()}
+
+ );
+ };
+
+ return 
+
+
+
+ {tag}
+
+ );
+ };
+
+ return 
+
-### Incoming Bubble Background
+***
+### Styling
+
+#### Outgoing Message Bubbles
+
+**Selectors:**
```css
-.cometchat-message-bubble__content--incoming {
- background: #f0f0f0;
+.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body
+```
+
+**Tokens used:**
+
+| Token | Controls |
+| --- | --- |
+| `--cometchat-primary-color` | Outgoing bubble background |
+| `--cometchat-extended-primary-color-900` | Outgoing bubble shade |
+
+The customized chat interface is displayed below.
+
+
+ 
+
+
+Use the following code to achieve the customization shown above.
+
+```css title="App.css"
+.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body {
+ --cometchat-primary-color: #f76808;
+ --cometchat-extended-primary-color-900: #fbaa75;
}
```
-### Outgoing Bubble Background
+**Expected result:** All outgoing message bubbles change from purple to orange (#f76808) with a lighter orange shade (#fbaa75).
+
+***
+#### Incoming Message Bubbles
+
+**Selectors:**
```css
-.cometchat-message-bubble__content--outgoing {
- background: #6852d6;
+.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body
+```
+
+**Tokens used:**
+
+| Token | Controls |
+| --- | --- |
+| `--cometchat-neutral-color-300` | Incoming bubble background |
+
+The customized chat interface is displayed below.
+
+
+ 
+
+
+Use the following code to achieve the customization shown above.
+
+```css title="App.css"
+.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body {
+ --cometchat-neutral-color-300: #f76808;
}
```
-### Using CSS Variables (Recommended)
+**Expected result:** All incoming message bubbles change from white/light to orange (#f76808).
-Override the tokens on `.cometchat` — this is the simplest and most reliable approach:
+***
+#### All Message Bubbles
+
+**Selectors:**
```css
-.cometchat {
- /* Incoming bubble background */
- --cometchat-neutral-color-300: #e3f2fd;
+.cometchat .cometchat-message-bubble .cometchat-message-bubble__body
+```
+
+**Tokens used:**
+
+| Token | Controls |
+| --- | --- |
+| `--cometchat-neutral-color-300` | Incoming bubble background |
+| `--cometchat-primary-color` | Outgoing bubble background |
+| `--cometchat-extended-primary-color-900` | Outgoing bubble shade |
+
+The customized chat interface is displayed below.
- /* Outgoing bubble background (uses primary color) */
- --cometchat-primary-color: #1976d2;
+
+ 
+
+
+Use the following code to achieve the customization shown above.
+
+```css title="App.css"
+.cometchat .cometchat-message-bubble .cometchat-message-bubble__body {
+ --cometchat-neutral-color-300: #f76808;
+ --cometchat-primary-color: #f76808;
+ --cometchat-extended-primary-color-900: #fbaa75;
}
```
-
+
+
+The customized chat interface is displayed below.
+
+
+ 
+
+
+**Complete CSS:**
+
+
+
+
+The customized chat interface is displayed below.
+
+
+ 
+
+
+**Complete CSS:**
+
+
+
+
+The customized chat interface is displayed below.
+
+
+ 
+
+
+**Complete CSS:**
+
+
+
+
+The customized chat interface is displayed below.
+
+
+ 
+
+
+**Complete CSS:**
+
+
+
+
+The customized chat interface is displayed below.
+
+
+ 
+
+
+**Complete CSS:**
+
+
+
+
+The customized chat interface is displayed below.
+
+
+ 
+
+
+**Complete CSS:**
+
+
+
+The customized chat interface is displayed below.
+
+
+ 
+
+
+**Complete CSS:**
+
+
+
+
+The customized chat interface is displayed below.
+
+
+ 
+
+
+**Complete CSS:**
+
+
+
+
+The customized chat interface is displayed below.
+
+
+ 
+
+
+**Complete CSS:**
+
+
+
+
+The customized chat interface is displayed below.
+
+
+ 
+
+
+**Complete CSS:**
+
+
+
+
+The customized chat interface is displayed below.
+
+
+ 
+
+
+**Complete CSS:**
+
+