@tencent-rtc/mcp 1.4.6 → 1.6.0-beta.1

package/resource/{doc/chatkit/react/components → knowledge/chat/preset/react/features}/contact-list.md

@@ -3,49 +3,51 @@
 ContactList is a highly configurable contact list component. It supports friend list, group list, blocklist, and application management, offering core features such as group collapsing, search filtering, and custom rendering. It is suitable for contact management interfaces in instant messaging and social applications.
 
 ## ContactList Props
-| Field | Type | Default Value | Description |
-| --- | --- | --- | --- |
-| activeContactItem | ContactGroupItem \\| undefined | `undefined` | Currently active contact item |
-| enableSearch | boolean | `true` | Whether to enable the search feature |
-| groupConfig | Partial<Record<ContactItemType, CustomGroupConfig>> | `{}` | Custom group configuration |
-| className | string | `undefined` | Custom CSS class name |
-| style | React.CSSProperties | `undefined` | Custom inline style |
-| searchPlaceholder | string | `'Search contacts'` | search box placeholder text |
-| emptyText | string | `'No contacts'` | Empty status prompt text |
-| ContactItem | React.ComponentType<ContactListItemProps> \\| undefined | `ContactListItem` | Custom contact person component |
-| ContactSearchComponent | React.ComponentType<ContactSearchProps> \\| undefined | `ContactSearch` | Custom search component |
-| GroupHeader | React.ComponentType<{ data: ContactGroup }> \\| undefined | Default group header | Custom group header component |
-| PlaceholderEmptyList | React.ReactNode \\| undefined | Default empty status | Custom empty status component |
-| onContactItemClick | (item: ContactGroupItem) => void | `undefined` | Contact person item click event |
-| onFriendApplicationAction | (action: 'accept' \\| 'refuse', application: FriendApplication) => void | `undefined` | Friend request operation event |
-| onGroupApplicationAction | (action: 'accept' \\| 'refuse', application: GroupApplication) => void | `undefined` | Group request operation event |
+
+|Field|Type|Default Value|Description|
+|---------|---------|---------|---------|
+|activeContactItem|ContactGroupItem \| undefined|`undefined`|Currently active contact item|
+|enableSearch|boolean|`true`|Whether to enable the search feature|
+|groupConfig|Partial<Record<ContactItemType, CustomGroupConfig>>|`{}`|Custom group configuration|
+|className|string|`undefined`|Custom CSS class name|
+|style|React.CSSProperties|`undefined`|Custom inline style|
+|searchPlaceholder|string|`'Search contacts'`|search box placeholder text|
+|emptyText|string|`'No contacts'`|Empty status prompt text|
+|ContactItem|React.ComponentType<ContactListItemProps> \| undefined|`ContactListItem`|Custom contact person component|
+|ContactSearchComponent|React.ComponentType<ContactSearchProps> \| undefined|`ContactSearch`|Custom search component|
+|GroupHeader|React.ComponentType<{ data: ContactGroup }> \| undefined|Default group header|Custom group header component|
+|PlaceholderEmptyList|React.ReactNode \| undefined|Default empty status|Custom empty status component|
+|onContactItemClick|(item: ContactGroupItem) => void|`undefined`|Contact person item click event|
+|onFriendApplicationAction|(action: 'accept' \| 'refuse', application: FriendApplication) => void|`undefined`|Friend request operation event|
+|onGroupApplicationAction|(action: 'accept' \| 'refuse', application: GroupApplication) => void|`undefined`|Group request operation event|
 
 ## ContactInfo props
-| Field | Type | Default Value | Description |
-| --- | --- | --- | --- |
-| contactItem | ContactGroupItem \\| undefined | `undefined` | Currently showing contact item |
-| showActions | boolean | `true` | whether to display the action button |
-| PlaceholderEmpty | React.ReactNode \\| undefined | `undefined` | Empty status placeholder component |
-| FriendInfoComponent | React.ComponentType<FriendInfoProps> | `FriendInfo` | Friend information component |
-| GroupInfoComponent | React.ComponentType<GroupInfoProps> | `GroupInfo` | Group information component |
-| BlacklistInfoComponent | React.ComponentType<BlacklistInfoProps> | `BlacklistInfo` | Blocklist information component |
-| FriendApplicationInfoComponent | React.ComponentType<FriendApplicationInfoProps> | `FriendApplicationInfo` | Friend request information component |
-| GroupApplicationInfoComponent | React.ComponentType<GroupApplicationInfoProps> | `GroupApplicationInfo` | Group application information component |
-| SearchGroupInfoComponent | React.ComponentType<SearchGroupInfoProps> | `SearchGroupInfo` | Group information search component |
-| SearchUserInfoComponent | React.ComponentType<SearchUserInfoProps> | `SearchUserInfo` | User information search component |
-| onClose | () => void | `undefined` | Close message panel callback |
-| onSendMessage | (friend: Friend) => void | `undefined` | Message send callback |
-| onDeleteFriend | (friend: Friend) => void | `undefined` | Remove friend callback |
-| onUpdateFriendRemark | (friend: Friend, remark: string) => void | `undefined` | Update friend remark callback |
-| onAddToBlacklist | (friend: Friend) => void | `undefined` | Add to blocklist callback |
-| onRemoveFromBlacklist | (profile: UserProfile) => void | `undefined` | Remove from blocklist callback |
-| onEnterGroup | (group: GroupModel) => void | `undefined` | Group entry callback |
-| onLeaveGroup | (group: GroupModel) => void | `undefined` | Group exit callback |
-| onDismissGroup | (group: GroupModel) => void | `undefined` | Group dismissed callback |
-| onFriendApplicationAction | (action: 'accept' \\| 'refuse', application: FriendApplication) => void | `undefined` | Friend request operation callback |
-| onGroupApplicationAction | (action: 'accept' \\| 'refuse', application: GroupApplication) => void | `undefined` | Group application operation callback |
-| onAddFriend | (user: UserProfile, wording: string) => void | `undefined` | Friend request callback |
-| onJoinGroup | (group: GroupModel, note: string) => void | `undefined` | Group join callback |
+
+|Field|Type|Default Value|Description|
+|---------|---------|---------|---------|
+|contactItem|ContactGroupItem \| undefined|`undefined`|Currently showing contact item|
+|showActions|boolean|`true`|whether to display the action button|
+|PlaceholderEmpty|React.ReactNode \| undefined|`undefined`|Empty status placeholder component|
+|FriendInfoComponent|React.ComponentType<FriendInfoProps>|`FriendInfo`|Friend information component|
+|GroupInfoComponent|React.ComponentType<GroupInfoProps>|`GroupInfo`|Group information component|
+|BlacklistInfoComponent|React.ComponentType<BlacklistInfoProps>|`BlacklistInfo`|Blocklist information component|
+|FriendApplicationInfoComponent|React.ComponentType<FriendApplicationInfoProps>|`FriendApplicationInfo`|Friend request information component|
+|GroupApplicationInfoComponent|React.ComponentType<GroupApplicationInfoProps>|`GroupApplicationInfo`|Group application information component|
+|SearchGroupInfoComponent|React.ComponentType<SearchGroupInfoProps>|`SearchGroupInfo`|Group information search component|
+|SearchUserInfoComponent|React.ComponentType<SearchUserInfoProps>|`SearchUserInfo`|User information search component|
+|onClose|() => void|`undefined`|Close message panel callback|
+|onSendMessage|(friend: Friend) => void|`undefined`|Message send callback|
+|onDeleteFriend|(friend: Friend) => void|`undefined`|Remove friend callback|
+|onUpdateFriendRemark|(friend: Friend, remark: string) => void|`undefined`|Update friend remark callback|
+|onAddToBlacklist|(friend: Friend) => void|`undefined`|Add to blocklist callback|
+|onRemoveFromBlacklist|(profile: UserProfile) => void|`undefined`|Remove from blocklist callback|
+|onEnterGroup|(group: GroupModel) => void|`undefined`|Group entry callback|
+|onLeaveGroup|(group: GroupModel) => void|`undefined`|Group exit callback|
+|onDismissGroup|(group: GroupModel) => void|`undefined`|Group dismissed callback|
+|onFriendApplicationAction|(action: 'accept' \| 'refuse', application: FriendApplication) => void|`undefined`|Friend request operation callback|
+|onGroupApplicationAction|(action: 'accept' \| 'refuse', application: GroupApplication) => void|`undefined`|Group application operation callback|
+|onAddFriend|(user: UserProfile, wording: string) => void|`undefined`|Friend request callback|
+|onJoinGroup|(group: GroupModel, note: string) => void|`undefined`|Group join callback|
 
 ## Basic Usage
 ``` tsx

package/resource/knowledge/chat/preset/react/features/conversation-actions.md

@@ -0,0 +1,215 @@
+The `ConversationActions` component manages actions for individual conversations. By default, it provides options to delete conversations, pin or unpin conversations, and enable or disable Do Not Disturb mode for conversations.
+
+## Basic Usage
+
+When you use `ConversationActions` within a `ConversationList`, you can configure it directly using the top-level `actionsConfig` prop on `ConversationList`. The `actionsConfig` prop lets you enable or disable default conversation actions, handle action events, add custom action items, and perform basic UI customization.
+
+For advanced customization, you can create your own component based on `ConversationActions`.
+
+### Basic Customization with actionsConfig
+``` typescript
+import { UIKitProvider, ConversationList } from "@tencentcloud/chat-uikit-react";
+
+const App = () => {
+  return (
+    <UIKitProvider>
+      <ConversationList
+        actionsConfig={{
+          enablePin: false,
+          onConversationDelete: (conversation) => { console.log('Delete conversation success'); },
+          customConversationActions: {
+            'custom-actions-1': {
+               label: 'custom-actions',
+               onClick: (conversation) => { console.log(conversation); },
+             },
+          },
+      }}/>
+    </UIKitProvider>
+  );
+}
+```
+
+### Customizing the ConversationActions Component
+``` typescript
+import { UIKitProvider, ConversationList, ConversationActions } from "@tencentcloud/chat-uikit-react";
+
+type ConversationActionsProps = Parameters<typeof ConversationActions>[0];
+
+function CustomConversationActions(props: ConversationActionsProps) {
+  return <ConversationActions {...props} enableDelete={false} />;
+}
+
+const App = () => {
+  return (
+    <UIKitProvider>
+      <ConversationList
+        style={{ maxWidth: '300px', height: '600px' }}
+        ConversationActions={CustomConversationActions}
+      />
+    </UIKitProvider>
+  );
+}
+```
+
+## Props
+
+The `ConversationActionsProps` interface extends `ConversationActionsConfig`, and defines the props for the `ConversationActions` component.
+
+|Parameter|Type|Default|Description|
+|---------|---------|---------|---------|
+|**conversation** (Required)|ConversationInfo|-|Specifies the conversation for which actions are rendered.|
+|className|String|-|Custom class name for the root element.|
+|style|React.CSSProperties|-|Custom style for the root element.|
+
+#### ConversationActionsConfig
+
+|Parameter|Type|Default|Description|
+|---------|---------|---------|---------|
+|enablePin|Boolean|true|Whether to display the Pin Conversation button.|
+|enableMute|Boolean|true|Whether to display the Do Not Disturb button.|
+|enableDelete|Boolean|true|Whether to display the Delete Conversation button.|
+|onConversationPin|(conversation: ConversationInfo, e?: React.MouseEvent) => void|-|Custom handler for pinning or unpinning a conversation.|
+|onConversationMute|(conversation: ConversationInfo, e?: React.MouseEvent) => void|-|Custom handler for enabling or disabling Do Not Disturb for a conversation.|
+|onConversationDelete|(conversation: ConversationInfo, e?: React.MouseEvent) => void|-|Custom handler for deleting a conversation.|
+|customConversationActions|Record|-|Custom action items for conversations.|
+|onClick|(e: React.MouseEvent, key?: string, conversation?: ConversationInfo) => void|-|Callback triggered when an action item is clicked.|
+
+## Custom Components
+
+### Basic Feature Toggles
+
+Use the `enablePin`, `enableDelete`, and `enableMute` props to control the visibility of Pin Conversation, Do Not Disturb, and Delete Conversation actions in `ConversationActions`.
+``` typescript
+<ConversationActions enablePin={false} />
+```
+``` typescript
+<ConversationActions enableDelete={false} />
+```
+``` typescript
+<ConversationActions enableMute={false} />
+```
+
+|`enablePin={false}`|`enableDelete={false}`|`enableMute={false}`|
+|---------|---------|---------|
+||||
+
+### Event Handling
+
+`ConversationActions` provides built-in support for deleting conversations, pinning or unpinning conversations, and enabling or disabling Do Not Disturb. If you need to override the default event handlers, provide your own handler functions. You can also use the `onClick` prop to handle generic click events.
+``` typescript
+import { ConversationList, ConversationActions, useChatContext } from '@tencentcloud/chat-uikit-react';
+import { Toast } from 'third-party-lib';
+type ConversationActionsProps = Parameters<typeof ConversationActions>[0];
+
+const CustomConversationActions = (props: ConversationActionsProps) => {
+
+  const {
+    deleteConversation
+  } = useChatContext();
+
+  return (
+    <ConversationActions
+      {...props}
+      onConversationDelete={(conversation) => {
+        deleteConversation(conversation.conversationID).then(() => {
+          Toast({ text: 'delete conversation successfully!', type: 'info' });
+        }).catch(() => {
+          Toast({ text: 'delete conversation failed!', type: 'error' });
+        });
+      }}
+    />
+  );
+};
+
+<ConversationList ConversationActions={CustomConversationActions} />
+```
+
+### customConversationActions
+
+The `customConversationActions` prop lets you add custom action items to `ConversationActions`.
+
+|Parameter|Type|Default|Description|
+|---------|---------|---------|---------|
+|enable|Boolean|true|Whether the custom action item is enabled.|
+|label|String|-|Display label for the custom action item.|
+|onClick|(conversation: ConversationInfo, e?: React.MouseEvent) => void|-|Callback triggered when the custom action item is clicked.|
+
+Below is an example showing how to add custom action items with `customConversationActions`:
+``` typescript
+import { ConversationList, ConversationActions } from '@tencentcloud/chat-uikit-react';
+import type { ConversationInfo } from '@tencentcloud/chat-uikit-react';
+type ConversationActionsProps = Parameters<typeof ConversationActions>[0];
+
+const CustomConversationActions = (props: ConversationActionsProps) => {
+  return (
+    <ConversationActions
+      {...props}
+      customConversationActions={{
+        'custom-actions-1': {
+           label: 'custom-actions',
+           onClick: (conversation: ConversationInfo) => { console.log(conversation); },
+         },
+      }}
+    />
+  );
+};
+
+<ConversationList ConversationActions={CustomConversationActions} />
+```
+
+|Before|After|
+|---------|---------|
+|||
+
+### UI Customization
+
+You can fully customize the conversation action menu using third-party UI elements.
+``` typescript
+import { ConversationList, ConversationActions } from '@tencentcloud/chat-uikit-react';
+type ConversationActionsProps = Parameters<typeof ConversationActions>[0];
+
+function CustomConversationActions(props: ConversationActionsProps) {
+  const [menuPosition, setMenuPosition] = useState<MenuPosition | null>(null);
+
+  const handleContextMenu = (event: MouseEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    setMenuPosition({
+      x: event.clientX,
+      y: event.clientY,
+    });
+  };
+
+  const handleActionClick = () => {
+    console.log('Custom conversation action:', props.conversation);
+    setMenuPosition(null);
+  };
+
+  return (
+    <div
+      className="conversation-actions-basic-demo__trigger"
+      onContextMenu={handleContextMenu}
+    >
+      {props.children}
+      {menuPosition && (
+        <div
+          className="conversation-actions-basic-demo__menu"
+          style={{ left: menuPosition.x, top: menuPosition.y }}
+        >
+          <button onClick={handleActionClick} type="button">
+            Custom action
+          </button>
+          <button onClick={() => setMenuPosition(null)} type="button">
+            Close
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+<ConversationList ConversationActions={CustomConversationActions} />
+```
+
+|Before|After|
+|---------|---------|
+|||

package/resource/knowledge/chat/preset/react/features/conversation-list.md

@@ -0,0 +1,339 @@
+## Component Overview
+
+The `ConversationList` component provides the main conversation list functionality. It includes a Header section and a List section, and supports features such as conversation search, conversation creation, pinning conversations, and deleting conversations.
+
+This guide covers basic usage, component customization, flexible composition, and a complete list of component props.
+
+|**Conversation List**|**Conversation Actions**|**Conversation Search**|**Create Conversation**|
+|---------|---------|---------|---------|
+|||||
+
+## Component Structure
+
+The `ConversationList` component includes the following:
+- `ConversationSearch` - Conversation search
+
+- `ConversationList UI` - Conversation list container
+
+- `ConversationPreview` - Displays information for a single conversation
+
+- `ConversationActions` - Actions for an individual conversation
+
+## Basic Usage
+
+The `ConversationList` component does not require any mandatory props. To use `ConversationList`, add the following code:
+``` typescript
+import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-react';
+
+const App = () => {
+  return (
+    <UIKitProvider>
+      <ConversationList />
+    </UIKitProvider>
+  );
+};
+```
+
+## Customizing the Component
+
+`ConversationList` offers a comprehensive props interface for customizing functionality, UI, modules, and more.
+
+You can replace multiple subcomponents within `ConversationList`, including `Header`, `List`, `ConversationPreview`, `ConversationCreate`, `ConversationSearch`, `ConversationActions`, `Avatar`, and `Placeholder`. You can also extend and customize these default subcomponents as needed.
+
+### Basic Feature Toggles
+
+Control the display of conversation search, conversation creation, and conversation actions in `ConversationList` by setting the `enableSearch`, `enableCreate`, and `enableActions` parameters.
+``` typescript
+<ConversationList enableSearch={false} />
+```
+``` typescript
+<ConversationList enableCreate={false} />
+```
+``` typescript
+<ConversationList enableActions={false} />
+```
+
+|`enableSearch={false}`|`enableCreate={false}`|`enableActions={false}`|
+|---------|---------|---------|
+||||
+
+### Data Filtering and Sorting
+
+The `ConversationList` component provides `filterConversation` and `sortConversation` properties to filter and sort conversation list data.
+
+#### Filter Conversations
+
+To filter conversation list data, pass a filter function to the `filterConversation` property. This function receives the conversation list as a parameter and returns a new list containing only conversations that meet your criteria.
+
+The following example uses the `filterConversation` property to display only conversations with unread messages:
+``` typescript
+import { ConversationList } from '@tencentcloud/chat-uikit-react';
+import type { ConversationInfo } from '@tencentcloud/chat-uikit-react';
+
+<ConversationList
+  filter={(conversationList: ConversationInfo[]) =>
+    conversationList.filter(conversation => conversation.unreadCount > 0)}
+/>
+```
+
+#### Sort Conversations
+
+To sort conversation list data, pass a sorting function to the `sortConversation` property. This function receives the conversation list as a parameter and returns a new list sorted according to your requirements.
+
+The following example uses the `sortConversation` property to sort conversations by latest message time in descending order:
+``` typescript
+import { ConversationList } from '@tencentcloud/chat-uikit-react';
+import type { ConversationInfo } from '@tencentcloud/chat-uikit-react';
+
+<ConversationList
+  sort={(conversationList: ConversationInfo[]) =>
+    conversationList.sort(
+    (a, b) => {
+      const timeA = a.lastMessage?.timestamp?.getTime() || 0;
+      const timeB = b.lastMessage?.timestamp?.getTime() || 0;
+      return timeB - timeA;
+    },
+  )}
+/>
+```
+
+By using the `filter` and `sort` properties, you can efficiently filter and sort conversation list data to suit your needs.
+
+### Custom actionsConfig
+
+Use actionsConfig to control the basic functionality of `ConversationActions`.
+
+For additional customization, refer to the ConversationActions section.
+``` typescript
+import { ConversationList } from '@tencentcloud/chat-uikit-react';
+import type { ConversationInfo } from '@tencentcloud/chat-uikit-react';
+
+<ConversationList
+  actionsConfig={{
+    enablePin: false,
+    onConversationDelete: (conversation: ConversationInfo) => { console.log('Delete conversation success'); },
+    customConversationActions: {
+      'custom-actions-1': {
+        label: 'custom-actions',
+        onClick: (conversation: ConversationInfo) => { console.log(conversation); },
+      },
+    },
+  }}
+/>
+```
+
+|`enablePin: false`|`enableDelete: false`|`enableMute: false`|`customConversationActions`|
+|---------|---------|---------|---------|
+|||||
+
+### Custom Placeholder
+
+Customize the list display for different states by passing `PlaceholderEmptyList`, `PlaceholderLoading`, and `PlaceholderLoadError`.
+
+The following example customizes the `PlaceholderLoading` element:
+``` typescript
+import { ConversationList } from '@tencentcloud/chat-uikit-react';
+
+<ConversationList
+  PlaceholderEmptyList={<div>Empty List!!!</div>}
+/>
+```
+
+### Custom Header
+
+`ConversationListHeader` renders the Header section of the ConversationList. By default, it wraps and displays `ConversationSearch` and `ConversationCreate`. You can customize it by passing left, right, and other properties, or by replacing the entire component.
+
+#### Props
+
+|**Prop Name**|**Type**|**Default**|**Description**|
+|---------|---------|---------|---------|
+|children|`ReactNode`|-|Custom center component for the conversation list header. When used in ``,  and `` are passed in by default.|
+|left|`ReactElement`|-|Custom component for the left side of the conversation list header.|
+|right|`ReactElement`|-|Custom component for the right side of the conversation list header.|
+|className|`String`|-|Custom CSS class name for the root element.|
+|style|`React.CSSProperties`|-|Custom style for the root element.|
+
+#### Basic Customization
+
+The following example adds a new feature button to the right side of the Header component.
+``` typescript
+import {
+  ConversationList,
+  ConversationListHeader,
+} from '@tencentcloud/chat-uikit-react';
+
+const CustomConversationListHeader = (props) => {
+    const CustomIcon = <div>Custom Icon</div>;
+    return (
+      <ConversationListHeader {...props} right={CustomIcon} />
+    );
+};
+
+<ConversationList Header={CustomConversationListHeader} />
+```
+
+#### Advanced Customization
+
+The following example implements conversation grouping, categorizing by All, Unread, C2C, and Group. Clicking each group button applies a different filter.
+
+|**Before**|**After**|
+|---------|---------|
+|||
+
+``` typescript
+import { useState } from 'react';
+import { ConversationList, UIKitProvider, ConversationInfo } from '@tencentcloud/chat-uikit-react';
+
+const conversationGroupFilter: Record<string, (conversationList: ConversationInfo[]) => ConversationInfo[]> = {
+  all: (conversationList: ConversationInfo[]) => conversationList,
+  unread: (conversationList: ConversationInfo[]) => conversationList?.filter((item: ConversationInfo) => item.unreadCount > 0),
+  c2c: (conversationList: ConversationInfo[]) => conversationList?.filter((item: ConversationInfo) => item.type === ConversationType.C2C),
+  group: (conversationList: ConversationInfo[]) => conversationList?.filter((item: ConversationInfo) => item.type === ConversationType.Group),
+};
+
+const App = () => {
+  const [currentFilter, setCurrentFilter] = useState<string>('all');
+
+  const CustomConversationListHeader = (props: IConversationListHeaderProps) => {
+    return (
+      <div className="conversation-group-wrapper">
+        <button className={currentFilter === 'all' ? 'btn-active' : 'btn-default'} onClick={() => setCurrentFilter('all')}>All</button>
+        <button className={currentFilter === 'unread' ? 'btn-active' : 'btn-default'} onClick={() => setCurrentFilter('unread')}>Unread</button>
+        <button className={currentFilter === 'c2c' ? 'btn-active' : 'btn-default'} onClick={() => setCurrentFilter('c2c')}>C2C</button>
+        <button className={currentFilter === 'group' ? 'btn-active' : 'btn-default'} onClick={() => setCurrentFilter('group')}>Group</button>
+      </div>
+    );
+  };
+
+  return (
+    <UIKitProvider>
+      <ConversationList
+        style={{ maxWidth: '300px', height: '600px' }}
+        Header={CustomConversationListHeader}
+        filter={conversationGroupFilter[currentFilter]}
+      />
+    </UIKitProvider>
+  );
+};
+```
+``` scss
+.conversation-group-wrapper {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: 10px;
+  font-size: 14px;
+  .btn-default{
+    display: flex;
+    padding: 5px 10px;
+    border: 1px solid #b3b3b4;
+    color: #3b3d43;
+    background-color: transparent;
+    border-radius: 2px;
+  }
+  .btn-active{
+    display: flex;
+    padding: 5px 10px;
+    border: 1px solid #1c66e5;
+    color: #1c66e5;
+    background-color: transparent;
+    border-radius: 2px;
+  }
+}
+```
+
+### Custom List
+
+`ConversationListContent` renders the main list section of the ConversationList.
+
+By default, it displays the current conversation list data (`filteredAndSortedConversationList`) calculated in Context.
+
+#### Props
+
+|**Prop Name**|**Type**|**Default**|**Description**|
+|---------|---------|---------|---------|
+|children|`ReactNode`|-|Custom component for the conversation list content area. When used in , the `filteredAndSortedConversationList` is passed in and iterated as a list of `` components.|
+|empty|`Boolean`|`false`|Flag for empty conversation list. When used in ``, it checks if `filteredAndSortedConversationList.length === 0` and passes this in.|
+|loading|`Boolean`|`false`|Flag for conversation list loading state. When used in ``, it uses `useConversationList()` to get `isLoading` and passes it in.|
+|error|`Boolean`|`false`|Flag for conversation list load error. When used in ``, it uses `useConversationList()` to get `isLoadError` and passes it in.|
+|PlaceholderEmptyList|`ReactNode`|``|Custom placeholder element when the conversation list is empty.|
+|PlaceholderLoading|`ReactNode`|``|Custom placeholder element when the conversation list is loading.|
+|PlaceholderLoadError|`ReactNode`|``|Custom placeholder element when the conversation list fails to load.|
+|className|`String`|-|Custom CSS class name for the root element.|
+|style|`React.CSSProperties`|-|Custom style for the root element.|
+
+#### Basic Customization
+
+The `List` component manages different UI states as shown below. State transitions are handled internally within `ConversationList`.
+
+You can also control the component state by passing custom `empty`, `loading`, or `error` props.
+``` typescript
+import { ConversationList, ConversationListContent } from '@tencentcloud/chat-uikit-react';
+
+const CustomConversationListContent = (props) => {
+    return <ConversationListContent {...props} loading={true} />;
+};
+
+<ConversationList  List={CustomConversationListContent} />
+```
+
+|`default`|`empty={true}`|`loading={true}`|`error={true}`|
+|---------|---------|---------|---------|
+|||||
+
+### Custom ConversationPreview
+
+For details, see the ConversationPreview section.
+``` typescript
+<ConversationList ConversationPreview={CustomConversationPreview} />
+```
+
+### Custom ConversationActions
+
+For details, see the ConversationActions section.
+``` typescript
+  <ConversationList ConversationActions={CustomConversationActions} />
+```
+
+### Custom ConversationSearch
+
+For details, see the ConversationSearch section.
+``` typescript
+<ConversationList ConversationSearch={CustomConversationSearch} />
+```
+
+### Custom ConversationCreate
+``` typescript
+<ConversationList ConversationCreate={CustomConversationCreate} />
+```
+
+### Custom Avatar
+``` typescript
+<ConversationList Avatar={CustomAvatar} />
+```
+
+## APIs/Props
+
+|**Prop Name**|**Type**|**Default**|**Description**|
+|---------|---------|---------|---------|
+|enableSearch|Boolean|true|Controls whether the conversation search feature is displayed.|
+|enableCreate|Boolean|true|Controls whether the conversation creation feature is displayed.|
+|enableActions|Boolean|true|Controls whether conversation actions are displayed.|
+|actionsConfig|ConversationActionsConfig|-|Used to customize conversation action configurations.|
+|Header|ReactElement|Header|Custom Header component.|
+|List|ReactElement|List|Custom conversation list component.|
+|Preview|ReactElement|ConversationPreview|Custom conversation preview component.|
+|ConversationCreate|ReactElement|ConversationCreate|Custom conversation creation component.|
+|ConversationSearch|ReactElement|ConversationSearch|Custom conversation search component.|
+|ConversationActions|ReactElement|ConversationActions|Custom conversation actions component.|
+|Avatar|ReactElement|Avatar|Custom avatar component.|
+|PlaceholderEmptyList|ReactNode|-|Custom placeholder element when the conversation list is empty.|
+|PlaceholderLoading|ReactNode|-|Custom placeholder element when the conversation list is loading.|
+|PlaceholderLoadError|ReactNode|-|Custom placeholder element when the conversation list fails to load.|
+|filter|(conversationList: ConversationInfo[]) => ConversationInfo[]|-|Function used to filter the conversation list.|
+|sort|(conversationList: ConversationInfo[]) => ConversationInfo[]|-|Function used to sort the conversation list.|
+|onConversationSelect|(conversation: ConversationInfo) => void;|-|Callback function triggered when a conversation is clicked. The parameter is the clicked conversation object.|
+|onBeforeCreateConversation|(params: CreateParams) => CreateParams;|-|Custom operation executed before creating a conversation. The parameter is the required parameters for creating a conversation.|
+|onConversationCreate|(conversation: ConversationInfo)  => void;|-|Callback function after conversation creation. The parameter is the created conversation object.|
+|className|String|-|Custom CSS class name for the root element.|
+|style|`React.CSSProperties`|-|Custom style for the root element.|