@tencent-rtc/mcp 1.3.8 → 1.4.0

package/resource/doc/{chatuikit → chatkit}/react/components/contact-list.md

@@ -2,406 +2,50 @@
 
 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.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/41360ab1679511f0837f525400454e06.png)
-
-
-## ContactList Props 
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Field</td>
-
-<td rowspan="1" colSpan="1" >Type</td>
-
-<td rowspan="1" colSpan="1" >Default Value</td>
-
-<td rowspan="1" colSpan="1" >Description</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >activeContactItem</td>
-
-<td rowspan="1" colSpan="1" >ContactGroupItem \| undefined</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Currently active contact item</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >enableSearch</td>
-
-<td rowspan="1" colSpan="1" >boolean</td>
-
-<td rowspan="1" colSpan="1" >`true`</td>
-
-<td rowspan="1" colSpan="1" >Whether to enable the search feature</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >groupConfig</td>
-
-<td rowspan="1" colSpan="1" >Partial<Record<ContactItemType, CustomGroupConfig>></td>
-
-<td rowspan="1" colSpan="1" >`{}`</td>
-
-<td rowspan="1" colSpan="1" >Custom group configuration</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >className</td>
-
-<td rowspan="1" colSpan="1" >string</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Custom CSS class name</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >style</td>
-
-<td rowspan="1" colSpan="1" >React.CSSProperties</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Custom inline style</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >searchPlaceholder</td>
-
-<td rowspan="1" colSpan="1" >string</td>
-
-<td rowspan="1" colSpan="1" >`'Search contacts'`</td>
-
-<td rowspan="1" colSpan="1" >search box placeholder text</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >emptyText</td>
-
-<td rowspan="1" colSpan="1" >string</td>
-
-<td rowspan="1" colSpan="1" >`'No contacts'`</td>
-
-<td rowspan="1" colSpan="1" >Empty status prompt text</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >ContactItem</td>
-
-<td rowspan="1" colSpan="1" >React.ComponentType<ContactListItemProps> \| undefined</td>
-
-<td rowspan="1" colSpan="1" >`ContactListItem`</td>
-
-<td rowspan="1" colSpan="1" >Custom contact person component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >ContactSearchComponent</td>
-
-<td rowspan="1" colSpan="1" >React.ComponentType<ContactSearchProps> \| undefined</td>
-
-<td rowspan="1" colSpan="1" >`ContactSearch`</td>
-
-<td rowspan="1" colSpan="1" >Custom search component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >GroupHeader</td>
-
-<td rowspan="1" colSpan="1" >React.ComponentType<{ data: ContactGroup }> \| undefined</td>
-
-<td rowspan="1" colSpan="1" >Default group header</td>
-
-<td rowspan="1" colSpan="1" >Custom group header component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >PlaceholderEmptyList</td>
-
-<td rowspan="1" colSpan="1" >React.ReactNode \| undefined</td>
-
-<td rowspan="1" colSpan="1" >Default empty status</td>
-
-<td rowspan="1" colSpan="1" >Custom empty status component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onContactItemClick</td>
-
-<td rowspan="1" colSpan="1" >(item: ContactGroupItem) => void</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Contact person item click event</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onFriendApplicationAction</td>
-
-<td rowspan="1" colSpan="1" >(action: 'accept' \| 'refuse', application: FriendApplication) => void</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Friend request operation event</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onGroupApplicationAction</td>
-
-<td rowspan="1" colSpan="1" >(action: 'accept' \| 'refuse', application: GroupApplication) => void</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Group request operation event</td>
-</tr>
-</table>
-
+## 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 |
 
 ## ContactInfo props
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Field</td>
-
-<td rowspan="1" colSpan="1" >Type</td>
-
-<td rowspan="1" colSpan="1" >Default Value</td>
-
-<td rowspan="1" colSpan="1" >Description</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >contactItem</td>
-
-<td rowspan="1" colSpan="1" >ContactGroupItem \| undefined</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Currently showing contact item</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >showActions</td>
-
-<td rowspan="1" colSpan="1" >boolean</td>
-
-<td rowspan="1" colSpan="1" >`true`</td>
-
-<td rowspan="1" colSpan="1" >whether to display the action button</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >PlaceholderEmpty</td>
-
-<td rowspan="1" colSpan="1" >React.ReactNode \| undefined</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Empty status placeholder component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >FriendInfoComponent</td>
-
-<td rowspan="1" colSpan="1" >React.ComponentType<FriendInfoProps></td>
-
-<td rowspan="1" colSpan="1" >`FriendInfo`</td>
-
-<td rowspan="1" colSpan="1" >Friend information component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >GroupInfoComponent</td>
-
-<td rowspan="1" colSpan="1" >React.ComponentType<GroupInfoProps></td>
-
-<td rowspan="1" colSpan="1" >`GroupInfo`</td>
-
-<td rowspan="1" colSpan="1" >Group information component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >BlacklistInfoComponent</td>
-
-<td rowspan="1" colSpan="1" >React.ComponentType<BlacklistInfoProps></td>
-
-<td rowspan="1" colSpan="1" >`BlacklistInfo`</td>
-
-<td rowspan="1" colSpan="1" >Blocklist information component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >FriendApplicationInfoComponent</td>
-
-<td rowspan="1" colSpan="1" >React.ComponentType<FriendApplicationInfoProps></td>
-
-<td rowspan="1" colSpan="1" >`FriendApplicationInfo`</td>
-
-<td rowspan="1" colSpan="1" >Friend request information component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >GroupApplicationInfoComponent</td>
-
-<td rowspan="1" colSpan="1" >React.ComponentType<GroupApplicationInfoProps></td>
-
-<td rowspan="1" colSpan="1" >`GroupApplicationInfo`</td>
-
-<td rowspan="1" colSpan="1" >Group application information component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >SearchGroupInfoComponent</td>
-
-<td rowspan="1" colSpan="1" >React.ComponentType<SearchGroupInfoProps></td>
-
-<td rowspan="1" colSpan="1" >`SearchGroupInfo`</td>
-
-<td rowspan="1" colSpan="1" >Group information search component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >SearchUserInfoComponent</td>
-
-<td rowspan="1" colSpan="1" >React.ComponentType<SearchUserInfoProps></td>
-
-<td rowspan="1" colSpan="1" >`SearchUserInfo`</td>
-
-<td rowspan="1" colSpan="1" >User information search component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onClose</td>
-
-<td rowspan="1" colSpan="1" >() => void</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Close message panel callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onSendMessage</td>
-
-<td rowspan="1" colSpan="1" >(friend: Friend) => void</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Message send callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onDeleteFriend</td>
-
-<td rowspan="1" colSpan="1" >(friend: Friend) => void</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Remove friend callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onUpdateFriendRemark</td>
-
-<td rowspan="1" colSpan="1" >(friend: Friend, remark: string) => void</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Update friend remark callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onAddToBlacklist</td>
-
-<td rowspan="1" colSpan="1" >(friend: Friend) => void</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Add to blocklist callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onRemoveFromBlacklist</td>
-
-<td rowspan="1" colSpan="1" >(profile: UserProfile) => void</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Remove from blocklist callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onEnterGroup</td>
-
-<td rowspan="1" colSpan="1" >(group: GroupModel) => void</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Group entry callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onLeaveGroup</td>
-
-<td rowspan="1" colSpan="1" >(group: GroupModel) => void</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Group exit callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onDismissGroup</td>
-
-<td rowspan="1" colSpan="1" >(group: GroupModel) => void</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Group dismissed callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onFriendApplicationAction</td>
-
-<td rowspan="1" colSpan="1" >(action: 'accept' \| 'refuse', application: FriendApplication) => void</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Friend request operation callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onGroupApplicationAction</td>
-
-<td rowspan="1" colSpan="1" >(action: 'accept' \| 'refuse', application: GroupApplication) => void</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Group application operation callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onAddFriend</td>
-
-<td rowspan="1" colSpan="1" >(user: UserProfile, wording: string) => void</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Friend request callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onJoinGroup</td>
-
-<td rowspan="1" colSpan="1" >(group: GroupModel, note: string) => void</td>
-
-<td rowspan="1" colSpan="1" >`undefined`</td>
-
-<td rowspan="1" colSpan="1" >Group join callback</td>
-</tr>
-</table>
-
+| 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
@@ -428,15 +72,10 @@ By setting the `enableSearch` parameter, you can flexibly control the display of
 
 The effect is as shown below.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/3d1879db679511f09b85525400bf7822.png)
-
-
 ### Custom Contact List Contact Group Configuration
 
 `groupConfig` is used for custom group configuration, including title, display sequence, hidden state, etc. The default value is `{}`.
 
-
-
 【Custom Group Heading】
 ``` typescript
 import React from 'react';
@@ -472,8 +111,6 @@ function CustomGroupTitlesContactList() {
 
 The effect is as shown below.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/3d333139679511f09a9d52540044a08e.png)
-
 【Hide Specific Group】
 ``` typescript
 import React from 'react';
@@ -505,9 +142,6 @@ function HiddenGroupsContactList() {
 
 The effect is as shown below.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/3d119649679511f09b85525400bf7822.png)
-
-
 ### Custom Contact List Sub-Item
 
 ContactItem is used for custom rendering component of contact person, with default value as built-in `ContactListItem` component.
@@ -516,10 +150,10 @@ import React from 'react';
 import { ContactList, Avatar } from '@tencentcloud/chat-uikit-react';
 import type { ContactListItemProps } from '@tencentcloud/chat-uikit-react';
 
-const SimpleContactItem: React.FC<ContactListItemProps> = ({ 
-  contactItem, 
-  onClick, 
-  activeContactItem 
+const SimpleContactItem: React.FC<ContactListItemProps> = ({
+  contactItem,
+  onClick,
+  activeContactItem
 }) => {
   const isActive = activeContactItem?.data.userID === contactItem.data.userID;
 
@@ -556,9 +190,6 @@ function ContactListWithSimpleItems() {
 
 The effect is as shown below.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/410ebb3d679511f08e915254007c27c5.png)
-
-
 ### Custom Contact Person Detail Action Button Switch
 
 `showActions` specifies whether to display action buttons. The default value is `true`.
@@ -579,7 +210,7 @@ function ReadOnlyContactInfo() {
   };
 
   return (
-    <ContactInfo 
+    <ContactInfo
       contactItem={friendData}
       showActions={false} // Hide ALL action buttons and display information only
     />
@@ -589,9 +220,6 @@ function ReadOnlyContactInfo() {
 
 The effect is as shown below.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/3d38fc0c679511f0924f5254005ef0f7.png)
-
-
 ### Custom Contact Person Detail Empty Status
 
 `PlaceholderEmpty` is used for custom empty status display content, default value is `undefined`.
@@ -601,9 +229,9 @@ import { ContactInfo } from '@tencentcloud/chat-uikit-react';
 
 function CustomEmptyState() {
   const EmptyPlaceholder = () => (
-    <div style={{ 
+    <div style={{
       width: '100%',
-      textAlign: 'center', 
+      textAlign: 'center',
       padding: '40px 20px',
       color: '#999',
       fontSize: '14px',
@@ -618,7 +246,7 @@ function CustomEmptyState() {
   );
 
   return (
-    <ContactInfo 
+    <ContactInfo
       PlaceholderEmpty={<EmptyPlaceholder />}
     />
   );
@@ -627,22 +255,16 @@ function CustomEmptyState() {
 
 The effect is as shown below.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/410e35cf679511f0837f525400454e06.png)
-
-
 ### Custom Contact Person Detail Component
 
 > **Note:**
-> 
+>
 > - `FriendInfoComponent` for custom friend information component, default value is built-in `FriendInfo` component.
 > - `GroupInfoComponent` for custom group information component, default value is built-in `GroupInfo` component.
 > - `BlacklistInfoComponent` for custom blocklist information component, default value is built-in `BlacklistInfo` component.
 > - `FriendApplicationInfoComponent` for custom Friend request information component, default value is built-in `FriendApplicationInfo` component.
 > - `GroupApplicationInfoComponent` for custom group application information component, default value is built-in `GroupApplicationInfo` component.
 
-
-
-
 【Custom Friend Information Component】
 ``` typescript
 import React from 'react';
@@ -651,34 +273,29 @@ import type { FriendInfoProps, Friend } from '@tencentcloud/chat-uikit-react';
 import { Button } from '@tencentcloud/uikit-base-component-react';
 
 // Custom Friend Information Component
-const CustomFriendInfo: React.FC<FriendInfoProps> = ({ 
-  friend, 
-  showActions, 
-  onClose, 
+const CustomFriendInfo: React.FC<FriendInfoProps> = ({
+  friend,
+  showActions,
+  onClose,
   onSendMessage,
-  onDeleteFriend 
+  onDeleteFriend
 }) => {
   return (
     <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
       <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
-        <img 
-          src={friend.avatar} 
-          alt="avatar" 
-          style={{ width: '60px', height: '60px', borderRadius: '50%', marginRight: '16px' }}
-        />
+
         <div>
           <h3 style={{ margin: '0 0 4px 0' }}>{friend.nick}</h3>
           <p style={{ margin: '0', color: '#666' }}>Remark: {friend.remark}</p>
         </div>
       </div>
-      
+
       <div style={{ display: 'flex', flexDirection: 'column', gap: '10px',  marginBottom: '16px' }}>
         <p><strong>uid:</strong> {friend.userID}</p>
         <p><strong>Personal signature:</strong> {friend.selfSignature}</p>
         <p><strong>Location:</strong> {friend.location}</p>
       </div>
 
-
       {showActions && (
         <div style={{ display: 'flex', gap: '8px' }}>
           <Button onClick={() => onSendMessage?.(friend)}>Send Message</Button>
@@ -705,7 +322,7 @@ function CustomFriendInfoDemo() {
   };
 
   return (
-    <ContactInfo 
+    <ContactInfo
       contactItem={friendData}
       FriendInfoComponent={CustomFriendInfo}
       onSendMessage={(friend) => console.log('Send message to:', friend.nick)}
@@ -717,9 +334,6 @@ function CustomFriendInfoDemo() {
 
 The effect is as shown below.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/3d11e473679511f0924f5254005ef0f7.png)
-
-
 【Custom Group Information Component】
 ``` typescript
 import React from 'react';
@@ -728,13 +342,13 @@ import type { GroupInfoProps, GroupModel } from '@tencentcloud/uikit-component-r
 import { Button } from '@tencentcloud/uikit-base-component-react';
 
 // Custom Group Information Component
-const CustomGroupInfo: React.FC<GroupInfoProps> = ({ 
-  group, 
-  showActions, 
-  onClose, 
+const CustomGroupInfo: React.FC<GroupInfoProps> = ({
+  group,
+  showActions,
+  onClose,
   onEnterGroup,
   onLeaveGroup,
-  onDismissGroup 
+  onDismissGroup
 }) => {
   const isOwner = group.selfInfo?.role === GroupMemberRole.OWNER; // group owner
   const isAdmin = group.selfInfo?.role === GroupMemberRole.ADMIN; // admin
@@ -742,11 +356,7 @@ const CustomGroupInfo: React.FC<GroupInfoProps> = ({
   return (
     <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
       <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
-        <img 
-          src={group.avatar} 
-          alt="group avatar" 
-          style={{ width: '60px', height: '60px', borderRadius: '8px', marginRight: '16px' }}
-        />
+
         <div>
           <h3 style={{ margin: '0 0 4px 0' }}>{group.name}</h3>
           <p style={{ margin: '0', color: '#666' }}>
@@ -754,7 +364,7 @@ const CustomGroupInfo: React.FC<GroupInfoProps> = ({
           </p>
         </div>
       </div>
-      
+
       <div style={{ display: 'flex', flexDirection: 'column', gap: '10px',  marginBottom: '16px' }}>
         <p><strong>Group introduction:</strong> {group.introduction}</p>
         <p><strong>Group notice:</strong> {group.notification}</p>
@@ -801,7 +411,7 @@ function CustomGroupInfoDemo() {
   };
 
   return (
-    <ContactInfo 
+    <ContactInfo
       contactItem={groupData}
       GroupInfoComponent={CustomGroupInfo}
       onEnterGroup={(group) => console.log('Enter group:', group.name)}
@@ -814,8 +424,6 @@ function CustomGroupInfoDemo() {
 
 The effect is as shown below.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/3d17ba45679511f0b5365254001c06ec.png)
-
 【Custom Blocklist Information Component】
 ``` typescript
 import React from 'react';
@@ -824,26 +432,22 @@ import type { BlacklistInfoProps, UserProfile } from '@tencentcloud/uikit-compon
 import { Button } from '@tencentcloud/uikit-base-component-react';
 
 // Custom Blocklist Information Component
-const CustomBlacklistInfo: React.FC<BlacklistInfoProps> = ({ 
-  profile, 
-  showActions, 
-  onClose, 
-  onRemoveFromBlacklist 
+const CustomBlacklistInfo: React.FC<BlacklistInfoProps> = ({
+  profile,
+  showActions,
+  onClose,
+  onRemoveFromBlacklist
 }) => {
   return (
     <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
       <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
-        <img 
-          src={profile.src} 
-          alt="avatar" 
-          style={{ width: '60px', height: '60px', borderRadius: '50%', marginRight: '16px' }}
-        />
+
         <div>
           <h3 style={{ margin: '0 0 4px 0', color: '#ff4d4f' }}>{profile.nick}</h3>
           <p style={{ margin: '0', color: '#666' }}>uid: {profile.userID}</p>
         </div>
       </div>
-      
+
       <div style={{ display: 'flex', flexDirection: 'column', gap: '10px',  marginBottom: '16px' }}>
         <p><strong>Personal signature:</strong> {profile.selfSignature}</p>
         <p><strong>Location:</strong> {profile.location}</p>
@@ -854,7 +458,7 @@ const CustomBlacklistInfo: React.FC<BlacklistInfoProps> = ({
 
       {showActions && (
         <div style={{ display: 'flex', gap: '8px' }}>
-          <Button 
+          <Button
             onClick={() => onRemoveFromBlacklist?.(profile)}
             style={{ backgroundColor: '#52c41a', color: 'white', border: 'none' }}
           >
@@ -884,7 +488,7 @@ function CustomBlacklistInfoDemo() {
   };
 
   return (
-    <ContactInfo 
+    <ContactInfo
       contactItem={blacklistData}
       BlacklistInfoComponent={CustomBlacklistInfo}
       onRemoveFromBlacklist={(profile) => console.log('Removing from blocklist:', profile.nick)}
@@ -895,8 +499,6 @@ function CustomBlacklistInfoDemo() {
 
 The effect is as shown below.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/410ce2c7679511f0837f525400454e06.png)
-
 【Custom Friend Request Information Component】
 ``` typescript
 import React from 'react';
@@ -905,12 +507,12 @@ import type { FriendApplicationInfoProps, FriendApplication } from '@tencentclou
 import { Button } from '@tencentcloud/uikit-base-component-react';
 
 // Custom Friend Request Information Component
-const CustomFriendApplicationInfo: React.FC<FriendApplicationInfoProps> = ({ 
-  application, 
-  showActions, 
-  onClose, 
+const CustomFriendApplicationInfo: React.FC<FriendApplicationInfoProps> = ({
+  application,
+  showActions,
+  onClose,
   onAccept,
-  onRefuse 
+  onRefuse
 }) => {
   const formatTime = (timestamp: number) => {
     return new Date(timestamp).toLocaleString();
@@ -919,17 +521,13 @@ const CustomFriendApplicationInfo: React.FC<FriendApplicationInfoProps> = ({
   return (
     <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
       <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
-        <img 
-          src={application.src} 
-          alt="avatar" 
-          style={{ width: '60px', height: '60px', borderRadius: '50%', marginRight: '16px' }}
-        />
+
         <div>
           <h3 style={{ margin: '0 0 4px 0' }}>{application.nick}</h3>
           <p style={{ margin: '0', color: '#666' }}>Application time: {formatTime(application.time)}</p>
         </div>
       </div>
-      
+
       <div style={{ display: 'flex', flexDirection: 'column', gap: '10px',  marginBottom: '16px' }}>
         <p><strong>Application source:</strong> {application.source}</p>
         <p><strong>Remarks:</strong> {application.wording}</p>
@@ -940,13 +538,13 @@ const CustomFriendApplicationInfo: React.FC<FriendApplicationInfoProps> = ({
 
       {showActions && (
         <div style={{ display: 'flex', gap: '8px' }}>
-          <Button 
+          <Button
             onClick={() => onAccept?.(application)}
             style={{ backgroundColor: '#52c41a', color: 'white', border: 'none' }}
           >
             accept application
           </Button>
-          <Button 
+          <Button
             onClick={() => onRefuse?.(application)}
             style={{ backgroundColor: '#ff4d4f', color: 'white', border: 'none' }}
           >
@@ -974,7 +572,7 @@ function CustomFriendApplicationInfoDemo() {
   };
 
   return (
-    <ContactInfo 
+    <ContactInfo
       contactItem={applicationData}
       FriendApplicationInfoComponent={CustomFriendApplicationInfo}
       onFriendApplicationAction={(action, application) => {
@@ -991,8 +589,6 @@ function CustomFriendApplicationInfoDemo() {
 
 The effect is as shown below.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/3d12304b679511f0bd33525400e889b2.png)
-
 【Custom Group Application Information Component】
 ``` typescript
 import React from 'react';
@@ -1001,12 +597,12 @@ import type { GroupApplicationInfoProps, GroupApplication } from '@tencentcloud/
 import { Button } from '@tencentcloud/uikit-base-component-react';
 
 // Custom Group Application Information Component
-const CustomGroupApplicationInfo: React.FC<GroupApplicationInfoProps> = ({ 
-  application, 
-  showActions, 
-  onClose, 
+const CustomGroupApplicationInfo: React.FC<GroupApplicationInfoProps> = ({
+  application,
+  showActions,
+  onClose,
   onAccept,
-  onRefuse 
+  onRefuse
 }) => {
   const getApplicationTypeText = (type: number) => {
     return type === 0 ? 'user application to join' : 'invite user joined';
@@ -1025,7 +621,7 @@ const CustomGroupApplicationInfo: React.FC<GroupApplicationInfoProps> = ({
           </p>
         </div>
       </div>
-      
+
        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px',  marginBottom: '16px' }}>
         <p><strong>Applicant:</strong> {application.applicantNick}</p>
         <p><strong>Group ID:</strong> {application.groupID}</p>
@@ -1037,13 +633,13 @@ const CustomGroupApplicationInfo: React.FC<GroupApplicationInfoProps> = ({
 
       {showActions && (
         <div style={{ display: 'flex', gap: '8px' }}>
-          <Button 
+          <Button
             onClick={() => onAccept?.(application)}
             style={{ backgroundColor: '#52c41a', color: 'white', border: 'none' }}
           >
             Approving Applications
           </Button>
-          <Button 
+          <Button
             onClick={() => onRefuse?.(application)}
             style={{ backgroundColor: '#ff4d4f', color: 'white', border: 'none' }}
           >
@@ -1071,7 +667,7 @@ function CustomGroupApplicationInfoDemo() {
   };
 
   return (
-    <ContactInfo 
+    <ContactInfo
       contactItem={applicationData}
       GroupApplicationInfoComponent={CustomGroupApplicationInfo}
       onGroupApplicationAction={(action, application) => {
@@ -1088,6 +684,4 @@ function CustomGroupApplicationInfoDemo() {
 
 The effect is as shown below.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/3d42e3cb679511f08e915254007c27c5.png)
-
-## 
+##