docs: Improve Widget Builder and UI Kit Builder documentation

chat-builder/nextjs/builder-customisations.mdx

@@ -1,101 +1,143 @@
 ---
-title: "Customizing Your UI Kit Builder Integration"
-sidebarTitle: "Overview"
+title: "Customizing Your UI Kit Builder"
+sidebarTitle: "Customizations"
+description: "Customize CometChat UI Kit Builder components — modify props, styling, and behavior."
 ---
 
-While the `CometChatSettings.ts` file allows basic toggling of features in the UI Kit Builder, **deeper customizations** require a more hands-on approach. Follow the steps below to tailor the UI Kit to your exact needs.
+The `CometChatSettings.ts` file handles basic feature toggles. For deeper customizations, modify component props or source code directly.
 
-***
-
-## **How to Customize Components**
-
-1. **Refer to the UI Kit Documentation**\
-   Browse the [**UI Kit components overview**](/ui-kit/react/components-overview) to find the component you'd like to customize.\
-   *Example*: [**Message List**](/ui-kit/react/message-list)
-
-2. **Locate Customization Options**\
-   Once you've identified the component, explore its props and features within the documentation.\
-   *Example*: [**Sticky DateTime Format**](/ui-kit/react/message-list#sticky-datetime-format)
-
-3. **Update Props or Modify Code**\
-   Use supported props to tweak behavior or look. For advanced changes, navigate through the folder structure and directly edit component logic or styling.
-
-***
-
-<Info>
-Applying Customizations
-
-Changes made to the UI Kit Builder settings or components **will not reflect automatically** in your app.\
-If you make additional modifications in the UI Kit Builder after initial setup:
-
-* Re-download the updated code package
-* Reintegrate it into your application
-
-This ensures all customizations are applied correctly.
-
-</Info>
-
-***
+---
 
-## **Example: Customizing Date & Time Format in Message List**
+## **Customization Workflow**
 
-### Goal
+1. Find the component in the [UI Kit Components Overview](/ui-kit/react/components-overview)
+2. Check available props and customization options
+3. Update props or edit the component source code
 
-Update how the sticky date headers appear in the chat message list.
+<Note>
+  After modifying the UI Kit Builder, re-download and reintegrate the code
+  package to apply changes.
+</Note>
 
-### Step-by-Step
+---
 
-1. **Component to Customize**:\
-   [Message List](/ui-kit/react/message-list)
+## **Example: Custom Date Format**
 
-2. **Customization Option**:\
-   [`stickyDateTimeFormat`](/ui-kit/react/message-list#sticky-datetime-format)
+Customize how sticky date headers appear in the message list.
 
-3. **Apply the Prop**:
+**Component**: [Message List](/ui-kit/react/message-list) → [`stickyDateTimeFormat`](/ui-kit/react/message-list#sticky-datetime-format)
 
-```javascript
+```jsx
 import {
   CometChatMessageList,
-  CalendarObject
+  CalendarObject,
 } from "@cometchat/chat-uikit-react";
 
-function getDateFormat() {
-  return new CalendarObject({
-    today: `hh:mm A`,           // e.g., "10:30 AM"
-    yesterday: `[Yesterday]`,   // Displays literally as "Yesterday"
-    otherDays: `DD/MM/YYYY`,    // e.g., "25/05/2025"
-  });
-}
+const dateFormat = new CalendarObject({
+  today: "hh:mm A", // "10:30 AM"
+  yesterday: "[Yesterday]",
+  otherDays: "DD/MM/YYYY", // "25/05/2025"
+});
 
-<CometChatMessageList
-  user={chatUser}
-  stickyDateTimeFormat={getDateFormat()}
-/>
+<CometChatMessageList user={chatUser} stickyDateTimeFormat={dateFormat} />;
 ```
 
 <Frame>
   <img src="/images/866c29ec-sticky-date-format-example-45f654db48bb75901329ba794804cbf9.png" />
 </Frame>
 
-***
-
-### Default Format Used
+**Default format** (for reference):
 
 ```javascript
 new CalendarObject({
   today: "today",
   yesterday: "yesterday",
-  otherDays: "DD MMM, YYYY", // e.g., "25 Jan, 2025"
+  otherDays: "DD MMM, YYYY", // "25 Jan, 2025"
 });
 ```
 
-***
+---
+
+## **Example: Custom Conversation Subtitle**
+
+Show online status or member count instead of the default last message preview.
+
+**Component**: [Conversations](/ui-kit/react/conversations) → [`subtitleView`](/ui-kit/react/conversations#subtitleview)
+
+```jsx
+"use client";
+
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatConversations } from "@cometchat/chat-uikit-react";
+
+const customSubtitleView = (conversation) => {
+  if (conversation.getConversationType() === "user") {
+    const user = conversation.getConversationWith();
+    return <span>{user.getStatus() === "online" ? "🟢 Online" : "⚫ Offline"}</span>;
+  } else {
+    const group = conversation.getConversationWith();
+    return <span>{group.getMembersCount()} members</span>;
+  }
+};
+
+<CometChatConversations subtitleView={customSubtitleView} />
+```
+
+---
+
+## **Example: Custom Send Button**
+
+Replace the default send button with your brand's icon.
 
-<Info>
-Why Customize This?
+**Component**: [Message Composer](/ui-kit/react/message-composer) → [`sendButtonView`](/ui-kit/react/message-composer#sendbuttonview)
 
-Sticky date headers enhance the chat experience by improving message navigation and giving users better temporal context. Adjust the format based on your target locale, tone of voice, or branding needs.
+```jsx
+"use client";
 
-</Info>
+import { CometChatMessageComposer, CometChatButton } from "@cometchat/chat-uikit-react";
+
+const brandedSendButton = (
+  <CometChatButton
+    iconURL="/icons/brand-send.svg"
+    onClick={() => {
+      // Your custom send logic
+    }}
+  />
+);
+
+<CometChatMessageComposer user={chatUser} sendButtonView={brandedSendButton} />
+```
+
+```css
+/* Style the custom send button */
+.cometchat-message-composer .cometchat-button {
+  background: #6852D6;
+  border-radius: 50%;
+}
+
+.cometchat-message-composer .cometchat-button__icon {
+  background: #ffffff;
+}
+```
+
+---
 
-***
+## **Next Steps**
+
+<CardGroup cols={2}>
+  <Card
+    title="UI Kit Builder Settings"
+    href="/chat-builder/nextjs/builder-settings"
+  >
+    Configure feature toggles and behavior
+  </Card>
+  <Card title="Components Overview" href="/ui-kit/react/components-overview">
+    Explore all available UI components
+  </Card>
+  <Card title="Theming" href="/ui-kit/react/theme">
+    Customize colors, typography, and styling
+  </Card>
+  <Card title="Localization" href="/ui-kit/react/localization">
+    Add multi-language support
+  </Card>
+</CardGroup>