@tencent-rtc/mcp 1.3.9 → 1.4.0

package/resource/doc/chatkit/react/components/conversation-actions.md

@@ -0,0 +1,174 @@
+`ConversationActions` component is responsible for row operations on a single session, supported by default with delete conversation, pin conversation to top/unpin, and mute/unmute features.
+
+## Basic Usage
+
+When using `ConversationActions` in `ConversationList`, you can customize it directly through the top-level `actionsConfig` parameter of `ConversationList`. `actionsConfig` supports default conversation operation feature toggles, event response, adding new custom action items, and basic UI customization.
+
+For advanced customization, you can create new components through `ConversationActions`.
+
+### Using ActionsConfig Basic Customization
+``` typescript
+import { UIKitProvider, ConversationList } from "@tencentcloud/chat-uikit-react";
+import type { ConversationModel } from "@tencentcloud/chat-uikit-react";
+
+const App = () => {
+  return (
+    <UIKitProvider>
+      <ConversationList
+        actionsConfig={{
+          enablePin: false,
+          onConversationDelete: (conversation: ConversationModel) => { console.log('Delete conversation success'); },
+          customConversationActions: {
+            'custom-actions-1': {
+               label: 'custom-actions',
+               onClick: (conversation: ConversationModel) => { console.log(conversation); },
+             },
+          },
+      }}/>
+    </UIKitProvider>
+  );
+}
+```
+
+### Custom ConversationActions Component
+``` typescript
+import { UIKitProvider, ConversationList, ConversationActions } from "@tencentcloud/chat-uikit-react";
+import type { ConversationActionsProps } from '@tencentcloud/chat-uikit-react';
+
+const CustomConversationActions = (props: ConversationActionsProps) => {
+  return <ConversationActions {...props} enableDelete={false} />;
+};
+
+const App = () => {
+  return (
+    <UIKitProvider>
+      <ConversationList
+        style={{ maxWidth: '300px', height: '600px' }}
+        ConversationActions={CustomConversationActions}
+      />
+    </UIKitProvider>
+  );
+}
+```
+
+## Props
+
+`ConversationActions` component API type `ConversationActionsProps` is based on `ConversationActionsConfig` API and expanded.
+| ##### **ConversationActionsProps** |  |  |  |
+| --- | --- | --- | --- |
+| **Parameter Name** | **Type** | **Default Value** | **Note** |
+| **conversation*****(Required)*** | ConversationModel | - | This parameter is required and represents the session for the current rendered conversation operation. |
+| className | String | - | Custom root element class name. |
+| style | React.CSSProperties | - | Custom root element style. |
+| ##### ConversationActionsConfig |  |  |  |
+| **Parameter Name** | **Type** | **Default Value** | **Note** |
+| enablePin | Boolean | true | Whether to display the pin to top feature button. |
+| enableMute | Boolean | true | Whether to display the do not disturb feature button. |
+| enableDelete | Boolean | true | Whether to display the deletion feature button. |
+| onConversationPin | (conversation: ConversationModel, e?: React.MouseEvent) => void | - | Customize the behavior of pinning/unpinning conversations. |
+| onConversationMute | (conversation: ConversationModel, e?: React.MouseEvent)<br>=> void | - | Customize the behavior of do not disturb/cancel Do Not Disturb session. |
+| onConversationDelete | (conversation: ConversationModel, e?: React.MouseEvent) => void | - | Customize the behavior of deleting conversations. |
+| customConversationActions | Record<string, ConversationActionItem> | - | Custom session operation items. |
+| PopupIcon | ReactElement | - | Custom action pop-up icon. |
+| PopupElements | ReactElement[] | - | Content of the custom action popup. |
+| onClick | (e: React.MouseEvent, key?: string, conversation?: ConversationModel) => void | - | Callback function for click action. |
+
+## Customize Component
+
+### Basic Feature Switch
+
+By setting the `enablePin`, `enableDelete`, and `enableMute` parameters, you can flexibly control the display of conversation pinning, mute message notification, and conversation deletion in `ConversationActions`.
+``` typescript
+<ConversationActions enablePin={false} />
+```
+``` typescript
+<ConversationActions enableDelete={false} />
+```
+``` typescript
+<ConversationActions enableMute={false} />
+```
+| `enablePin={false}` | `enableDelete={false}` | `enableMute={false} ` |
+| --- | --- | --- |
+|  |  |  |
+
+### Event Response
+
+`ConversationActions` component supports delete conversation, pin conversation to top/unpin, and mute/unmute features by default. If the event response of existing functionality does not meet your needs, you can customize the event response handling function and override it. In addition to customizing feature event responses, you can also obtain basic click event response through onClick.
+``` typescript
+import { ConversationList, ConversationActions, Toast } from '@tencentcloud/chat-uikit-react';
+import type { ConversationActionsProps, ConversationModel } from '@tencentcloud/chat-uikit-react';
+
+const CustomConversationActions = (props: ConversationActionsProps) => {
+  return (
+    <ConversationActions
+      {...props}
+      onConversationDelete={(conversation: ConversationModel) => {
+        conversation.deleteConversation().then(() => {
+          Toast({ text: 'delete conversation successfully!', type: 'info' });
+        }).catch(() => {
+          Toast({ text: 'delete conversation failed!', type: 'error' });
+        });
+      }}
+    />
+  );
+};
+
+<ConversationList ConversationActions={CustomConversationActions} />
+```
+
+### customConversationActions
+
+`customConversationActions` is used to add new custom action items to the ConversationActions list.
+| ##### ConversationActionItem |  |  |  |
+| --- | --- | --- | --- |
+| **Parameter Name** | **Type** | **Default Value** | **Note** |
+| enable | Boolean | true | Whether to enable custom action items. |
+| label | String | - | Display content of custom action items. |
+| onClick | (conversation: ConversationModel, e?: React.MouseEvent) => void | - | Callback function for clicking a custom action item. |
+
+Here is an example of adding new custom action items using `customConversationActions`:
+``` typescript
+import { ConversationList, ConversationActions } from '@tencentcloud/chat-uikit-react';
+import type { ConversationActionsProps, ConversationModel } from '@tencentcloud/chat-uikit-react';
+
+const CustomConversationActions = (props: ConversationActionsProps) => {
+  return (
+    <ConversationActions
+      {...props}
+      customConversationActions={{
+        'custom-actions-1': {
+           label: 'custom-actions',
+           onClick: (conversation: ConversationModel) => { console.log(conversation); },
+         },
+      }}
+    />
+  );
+};
+
+<ConversationList ConversationActions={CustomConversationActions} />
+```
+| **Before modification** | **After modification** |
+| --- | --- |
+|  |  |
+
+### UI Interface Customization
+
+You can customize the wakeup popup button style through the `PopupIcon` parameter and the popup content through `PopupElements`.
+
+The following is example code for secondary development on the basis of the default `ConversationActions` component to customize a new awakening button style:
+``` typescript
+import { ConversationList, ConversationActions, ConversationActionsProps } from '@tencentcloud/chat-uikit-react';
+import type { ConversationActionsProps } from '@tencentcloud/chat-uikit-react';
+
+const CustomConversationActions = (props: ConversationActionsProps) => {
+  const customIcon = <div>Custom Icon</div>
+  return (
+    <ConversationActions {...props} PopupIcon={customIcon} />
+  );
+};
+
+<ConversationList ConversationActions={CustomConversationActions} />
+```
+| **Before modification** | **After modification** |
+| --- | --- |
+|  |  |

package/resource/doc/chatkit/react/components/conversation-list.md

@@ -0,0 +1,333 @@
+# Component Overview
+
+The `ConversationList` component is primarily responsible for the List function. It contains the Header part and List part, and has features such as conversation search, session creation, session pinning, and conversation deletion.
+
+This document introduces in detail the foundation usage, component customization, freely combine and the props parameter list of the component.
+| **Conversation List** | **Session Operation** | **Conversation Search** | **Create Session** |
+| --- | --- | --- | --- |
+|  |  |  |  |
+
+## Component composition
+
+The `ConversationList` component contains the following content:
+-`ConversationSearch` - Conversation Search
+
+- `ConversationList UI` - Conversation List Container
+
+- `ConversationPreview` - Show Session Information
+
+- `ConversationActions` - Conversation Action
+
+## Basic usage
+
+The `ConversationList` component has no required properties. You can use `ConversationList` with the following code.
+``` typescript
+import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-react';
+
+const App = () => {
+  return (
+    <UIKitProvider>
+      <ConversationList />
+    </UIKitProvider>
+  );
+};
+```
+
+## Custom components
+
+`ConversationList` provides various dimensional Props APIs for user customization, allowing users to customize features, UI, modules and more.
+
+The `ConversationList` component provides multiple replaceable subcomponents, allowing users to customize `Header`, `List`, `ConversationPreview`, `ConversationCreate`, `ConversationSearch`, `ConversationActions`, `Avatar`, `Placeholder`, and more. Meanwhile, users can also use default subcomponents for secondary development customization.
+
+### Basic feature switch
+
+By setting the `enableSearch`, `enableCreate`, and `enableActions` parameters, you can flexibly control the display of conversation search, session creation, and conversation action features in `ConversationList`.
+``` 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 the `filterConversation` and `sortConversation` properties, allowing you to filter and sort the conversation list data.
+
+#### Filter conversations
+
+To filter conversation list data, you can pass a filter function to the `filterConversation` property. This function receives an array of `ConversationModel` as parameter and should return a new array that only contains conversations meeting your filter criteria.
+
+Here is an example of using the `filterConversation` property to only display conversations with "unread messages":
+``` typescript
+import { ConversationList } from '@tencentcloud/chat-uikit-react';
+import type { ConversationModel } from '@tencentcloud/chat-uikit-react';
+
+<ConversationList
+  filter={(conversationList: ConversationModel[]) =>
+    conversationList.filter(conversation => conversation.unreadCount > 0)}
+/>
+```
+
+#### Sort conversations
+
+To sort conversation list data, you can pass a sorting function to the `sortConversation` property. This function receives an array of `ConversationModel` as parameter and should return a new array with sessions sorted by your sorting criteria.
+
+Here is an example of using the `sortConversation` property to sort the session list by "latest news time" in descending order:
+``` typescript
+import { ConversationList } from '@tencentcloud/chat-uikit-react';
+import type { ConversationModel } from '@tencentcloud/chat-uikit-react';
+
+<ConversationList
+  sort={(conversationList: ConversationModel[]) =>
+    conversationList.sort(
+      (a, b) => (+(b?.lastMessage?.lastTime || 0)) - (+(a?.lastMessage?.lastTime || 0)),
+    )}
+/>
+```
+
+By using the `filter` and `sort` properties, you can effectively filter and sort the conversation list data according to your needs.
+
+### Custom actionsConfig
+
+Leverages actionsConfig to control the basic feature of ConversationActions.
+
+For more customization, see the ConversationActions chapter.
+``` typescript
+import { ConversationList } from '@tencentcloud/chat-uikit-react';
+import type { ConversationModel } from '@tencentcloud/chat-uikit-react';
+
+<ConversationList
+  actionsConfig={{
+    enablePin: false,
+    onConversationDelete: (conversation: ConversationModel) => { console.log('Delete conversation success'); },
+    customConversationActions: {
+      'custom-actions-1': {
+        label: 'custom-actions',
+        onClick: (conversation: ConversationModel) => { console.log(conversation); },
+      },
+    },
+  }}
+/>
+```
+| `enablePin: false` | `enableDelete: false` | `enableMute: false` | `customConversationActions` |
+| --- | --- | --- | --- |
+|  |  |  |  |
+
+### Custom Placeholder
+
+You can customize the list display in different statuses by importing `PlaceholderEmptyList`, `PlaceholderLoading`, and `PlaceholderLoadError`.
+
+Here is a custom `PlaceholderLoading` example:
+``` typescript
+import { ConversationList } from '@tencentcloud/chat-uikit-react';
+
+<ConversationList
+  PlaceholderEmptyList={<div>Empty List!!!</div>}
+/>
+```
+
+### Custom Header
+
+`ConversationListHeader` is responsible for rendering the header part of `ConversationList`, serving as a wrapping layer to render the default `ConversationSearch` and `ConversationCreate`. You can customize it by importing left, right and other attributes, and you can also customize the entire component.
+
+#### Props
+| **Parameter Name** | **Type** | **Default Value** | **Description** |
+| --- | --- | --- | --- |
+| children | `ReactNode` | - | Custom session list header center component.<br>When used in `<ConversationList>`, it imports `<ConversationSearch>` and `<ConversationCreate>` by default. |
+| left | `ReactElement` | - | Custom session list header left-side component. |
+| right | `ReactElement` | - | Custom session list header right-side component. |
+| className | `String` | - | Specify the custom name for the root element's CSS class. |
+| style | `React.CSSProperties` | - | Specify the custom style for the root element. |
+
+### Basic customization
+
+Here is an example of adding a new function button on the right side of the Header Component.
+``` typescript
+import {
+  ConversationList,
+  ConversationListHeader,
+} from '@tencentcloud/chat-uikit-react';
+import type { ConversationListHeaderProps } from '@tencentcloud/chat-uikit-react';
+
+const CustomConversationListHeader = (props: ConversationListHeaderProps) => {
+    const CustomIcon = <div>Custom Icon</div>;
+    return (
+      <ConversationListHeader {...props} right={CustomIcon} />
+    );
+};
+
+<ConversationList Header={CustomConversationListHeader} />
+```
+
+#### Advanced customization
+
+Here is how to implement a simplified conversation grouping feature, distinguishing by All conversations, unread conversations, one-on-one chat sessions, and group chats across four key dimensions. Click different group buttons to execute different filtering rules.
+| **Before modification** | **Modified** |
+| --- | --- |
+|  |  |
+
+[React]
+``` typescript
+import { useState } from 'react';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import { ConversationList, UIKitProvider } from '@tencentcloud/chat-uikit-react';
+import type { ConversationListHeaderProps, ConversationModel } from '@tencentcloud/chat-uikit-react';
+
+const App = () => {
+  const [currentFilter, setCurrentFilter] = useState<string>('all');
+  const conversationGroupFilter: Record<string, (conversationList: ConversationModel[]) => ConversationModel[]> = {
+    all: (conversationList: ConversationModel[]) => conversationList,
+    unread: (conversationList: ConversationModel[]) => conversationList?.filter((item: ConversationModel) => item.unreadCount > 0),
+    c2c: (conversationList: ConversationModel[]) => conversationList?.filter((item: ConversationModel) => item.type === TUIChatEngine.TYPES.CONV_C2C),
+    group: (conversationList: ConversationModel[]) => conversationList?.filter((item: ConversationModel) => item.type === TUIChatEngine.TYPES.CONV_GROUP),
+  };
+
+  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>
+  );
+};
+```
+
+[CSS]
+``` 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` is responsible for the rendering work of the main list part in `ConversationList`.
+
+Render the precomputed current session list `filteredAndSortedConversationList` from Context as the default wrapping layer.
+
+#### Props
+| **Parameter Name** | **Type** | **Default Value** | **Description** |
+| --- | --- | --- | --- |
+| children | `ReactNode` | - | Custom session list content area component.<br>When used in `<ConversationList>`, it imports the `` list traversed by `filteredAndSortedConversationList` by default. |
+| empty | `Boolean` | `false` | Conversation list identifier bit. When used in `<ConversationList>`, it judges `filteredAndSortedConversationList.length === 0` and imports it. |
+| loading | `Boolean` | `false` | Conversation list loading flag bit. When used in `<ConversationList>`, it uses `useConversationList()` to get `isLoading` and imports it. |
+| error | `Boolean` | `false` | Conversation list load error flag bit. When used in `<ConversationList>`, it uses `useConversationList()` to get `isLoadError` and imports it. |
+| PlaceholderEmptyList | `ReactNode` | `` | Placeholder element when the custom session list is empty. |
+| PlaceholderLoading | `ReactNode` | `` | Placeholder element for custom session list loading. |
+| PlaceholderLoadError | `ReactNode` | `` | Placeholder element for custom session list load error. |
+| className | `String` | - | Specify the custom name for the root element's CSS class. |
+| style | `React.CSSProperties` | - | Specify the custom style for the root element. |
+
+Basic customization
+
+The UI effects of the `List` component in different statuses are as follows. The trigger timing for each state is handled inside the `ConversationList`.
+
+Meanwhile, you can control the component status through custom input of `empty`, `loading`, and `error`.
+``` typescript
+import { ConversationList, ConversationListContent } from '@tencentcloud/chat-uikit-react';
+import type { ConversationListContentProps } from '@tencentcloud/chat-uikit-react';
+
+const CustomConversationListContent = (props: ConversationListContentProps) => {
+    return <ConversationListContent {...props} loading={true} />;
+};
+
+<ConversationList  List={CustomConversationListContent} />
+```
+| `default` | `empty={true}` | `loading={true}` | `error={true}` |
+| --- | --- | --- | --- |
+|  |  |  |  |
+
+Custom ConversationPreview
+
+For details, see the ConversationPreview chapter.
+``` typescript
+<ConversationList ConversationPreview={CustomConversationPreview} />
+```
+
+Custom ConversationActions
+
+For details, see the ConversationActions chapter.
+``` typescript
+  <ConversationList ConversationActions={CustomConversationActions} />
+```
+
+Custom ConversationSearch
+
+For details, see the ConversationSearch chapter.
+``` typescript
+<ConversationList ConversationSearch={CustomConversationSearch} />
+```
+
+Create and Bind Policy Query Instance Reset Instance Access Password
+``` typescript
+<ConversationList ConversationCreate={CustomConversationCreate} />
+```
+
+Custom Avatar
+``` typescript
+<ConversationList Avatar={CustomAvatar} />
+```
+
+## APIs/Props
+| **Parameter Name** | **Type** | **Default Value** | **Description** |
+| --- | --- | --- | --- |
+| enableSearch | `Boolean` | `true` | Whether to display the control session search feature. |
+| enableCreate | `Boolean` | `true` | Whether to display the control session creation feature. |
+| enableActions | `Boolean` | `true` | Whether to display the conversation action feature. |
+| actionsConfig | `ConversationActionsConfig` | - | For custom session operation configuration. |
+| Header | `ReactElement` | `Header` | Custom Header component. |
+| List | `ReactElement` | `List` | Custom session list component. |
+| Preview | `ReactElement` | ConversationPreview | Session preview component. |
+| ConversationCreate | `ReactElement` | `ConversationCreate` | Custom conversation component. |
+| ConversationSearch | `ReactElement` | ConversationSearch | Custom session search component. |
+| ConversationActions | `ReactElement` | ConversationActions | Custom Conversation Operation Component. |
+| Avatar | `ReactElement` | `Avatar` | Custom avatar component. |
+| PlaceholderEmptyList | `ReactNode` | `` | Placeholder element when the custom session list is empty. |
+| PlaceholderLoading | `ReactNode` | `` | Placeholder element for custom session list loading. |
+| PlaceholderLoadError | `ReactNode` | `` | Placeholder element for custom session list load error. |
+| filter | `(conversationList: ConversationModel[]) => ConversationModel[]` | - | Functions for filtering session list. |
+| sort | `(conversationList: ConversationModel[]) => ConversationModel[]` | - | Functions for sorting session list. |
+| onConversationSelect | `(conversation: ConversationModel) => void;` | - | Callback function when clicking a session, with the clicked conversation object as parameter. |
+| onBeforeCreateConversation | `(params: CreateParams) => CreateParams;` | - | Custom action executed before session creation, with required parameters for creating a session. |
+| onConversationCreate | `(conversation: ConversationModel)  => void;` | - | Callback function after session creation, with the created session object as parameter. |
+| className | `String` | - | Specify the custom name for the root element's CSS class. |
+| style | `React.CSSProperties` | - | Specify the custom style for the root element. |

package/resource/doc/chatkit/react/components/conversation-preview.md

@@ -0,0 +1,118 @@
+`ConversationPreview` is used for previewing session content in the list. The component displays session information, unread count, and provides conversation action feature.
+
+With the aid of atomic information display components, you can freely design and combine your desired `ConversationPreview` layout.
+
+Meanwhile, you can also use the `onConversationSelect` function to define selected session behavior.
+
+### Basic Usage
+
+You can use the `Preview` property of `ConversationList` to customize the preview item for each individual conversation in the list. If the `Preview` property is not specified, the system will automatically adopt the `ConversationPreviewUI` component as the default value.
+``` typescript
+import { ConversationList, ConversationPreviewUI } from '@tencentcloud/chat-uikit-react';
+import type { ConversationPreviewUIProps } from '@tencentcloud/chat-uikit-react';
+
+const CustomConversationPreview = (props: ConversationPreviewUIProps) => {
+  const { Title } = props;
+  return (
+    <ConversationPreviewUI {...props}>
+      {Title}
+      <div>Your custom preview UI</div>
+    </ConversationPreviewUI>
+  );
+};
+
+<ConversationList Preview={CustomConversationPreviewUI}></ConversationList>
+```
+
+### Props
+| **Parameter Name** | **Type** | **Default Value** | **Description** |
+| --- | --- | --- | --- |
+| **conversation*****(Required)*** | ConversationModel | - | Required parameter to indicate the currently rendered conversation list item. |
+| isSelected | Boolean | false | Control if the conversation list item UI is in selected status. |
+| enableActions | Boolean | true | Control whether to display the conversation operation feature. |
+| actionsConfig | ConversationActionsConfig | - | For custom session operation configuration. |
+| highlightMatchString | String | - | Conversation list item Title highlights matching keywords, commonly used for Conversation Search results. |
+| Title | `String ｜ JSX.Element` | ConversationPreviewTitle | Render the title area of the conversation list item. |
+| LastMessageAbstract | `String ｜ JSX.Element` | ConversationPreviewAbstract | Render the latest message abstract area of the conversation list item. |
+| LastMessageTimestamp | `String ｜ JSX.Element` | ConversationPreviewTimestamp | Render the latest message timestamp area of the conversation list item. |
+| Unread | `String ｜ JSX.Element` | ConversationPreviewUnread | Render the unread indicator area of the conversation list item. |
+| ConversationActions | `ReactElement` | ConversationActions | Render the conversation operations area of the conversation list item. |
+| Avatar | ReactElement | Avatar | Render the avatar area of the conversation list item. |
+| onConversationSelect | (conversation: ConversationModel) => void; | - | Specify the attributes of receiving callback when selecting a dialogue in the conversation list. |
+| className | String | - | Set a custom name for the root element class in CSS. |
+| style | React.CSSProperties | - | Set custom styles for the root element. |
+
+## Custom Case
+
+### Discord-Like Style
+
+Discord is a popular chat application, similar to Skype or Telegram. The message content in Discord is as shown below:
+
+By customizing the `ConversationPreview` layout, features, and style, we can quickly achieve a Discord-like effect.
+
+【React】
+1. Customize the `ConversationListPreview`
+
+2. Switch theme to dark mode
+
+``` typescript
+import { UIKitProvider, ConversationList, ConversationPreviewUI } from '@tencentcloud/chat-uikit-react';
+import type { ConversationPreviewUIProps } from '@tencentcloud/chat-uikit-react';
+
+const CustomConversationPreview = (props: ConversationPreviewUIProps) => {
+  const { Title } = props;
+  return (
+    <ConversationPreviewUI {...props}>
+      <span> # </span>
+      <span>{Title}</span>
+    </ConversationPreviewUI>
+  );
+};
+
+const App = () => {
+    <UIKitProvider theme={'dark'}>
+      <ConversationList
+        style={{ maxWidth: '300px', height: '600px' }}
+        Preview={CustomConversationPreviewUI}
+       />
+      ...
+    </UIKitProvider>
+}
+```
+
+【CSS】
+``` scss
+.custom-preview-ui {
+  height: 34px;
+  border-radius: 6px;
+  padding: 10px;
+  margin: 0 10px;
+  .custom-preview-ui__tag {
+    margin-right: 10px;
+    font-size: 16px;
+    color: #b3b3b4;
+  }
+  .custom-preview-ui__title {
+    font-size: 14px;
+    color: #b3b3b4;
+  }
+  &.uikit-conversation-preview--active {
+    background-color: #3b3d43;
+    .custom-preview-ui__tag {
+      color: #ffffff;
+    }
+    .custom-preview-ui__title {
+      .uikit-conversation-preview__title {
+        color: #ffffff;
+      }
+    }
+  }
+}
+```
+
+`ConversationListPreview` effect as follows after customization:
+| **Before Modification** | **Modified** |
+| --- | --- |
+|  |  |
+
+###

package/resource/doc/chatkit/react/components/conversation-search.md

@@ -0,0 +1,60 @@
+`ConversationSearch` uses the Search component, supporting search functionality for users, groups, and messages. It integrates features such as the search bar, advanced search, and search result display.
+
+## Basic Usage
+``` typescript
+import {
+   UIKitProvider,
+   ConversationList,
+   ConversationSearch,
+} from '@tencentcloud/chat-uikit-react';
+
+import type {
+   ConversationSearchProps,
+   SearchResultItem,
+   SearchType,
+} from '@tencentcloud/chat-uikit-react';
+
+const CustomConversationSearch = (props: ConversationSearchProps) => {
+  const onSelectResult = (data: SearchResultItem, type: SearchType) => {
+    console.warn(`Select Search Result: ${JSON.stringify(data)}, type: ${type}`);
+  };
+  return (
+    <ConversationSearch {...props} onResultItemClick={onSelectResult} />
+  );
+};
+
+const App = () => {
+  return (
+    <UIKitProvider>
+      <ConversationList
+        style={{ maxWidth: '300px', height: '600px' }}
+        ConversationSearch={CustomConversationSearch}
+       />
+     </UIKitProvider>
+  );
+};
+```
+
+## Props
+| **Parameter Name** | **Type** | **Default Value** | **Description** |
+| --- | --- | --- | --- |
+| visible | boolean | true | Whether it is visible. |
+| Search | ComponentType<SearchProps> | - | custom search component |
+| variant | VariantType | VariantType.MINI | Search mode: mini, standard, embedded |
+| SearchBar | React.ComponentType<SearchBarProps> | DefaultSearchBar | custom search bar component |
+| SearchResults | React.ComponentType<SearchResultsProps> | DefaultSearchResults | custom search result component |
+| SearchAdvanced | React.ComponentType<SearchAdvancedProps> | DefaultSearchAdvanced | custom advanced search component |
+| SearchResultsPresearch | React.ComponentType | - | search placeholder component |
+| SearchResultsLoading | React.ComponentType | - | loading placeholder component |
+| SearchResultsEmpty | React.ComponentType | - | empty result placeholder component |
+| SearchResultItem | React.ComponentType<ResultItemProps> | - | custom search result item component |
+| debounceTime | number | 300 | search debounce time (ms) |
+| autoFocus | boolean | false | Whether to auto-focus the search box |
+| className | string | - | custom style class name |
+| style | React.CSSProperties | - | custom style |
+| onKeywordChange | (keyword: string) => void | - | searchsearch keywords change callback'] |
+| onSearchComplete | (results: Map<SearchType, SearchResult>) => void | - | search completed callback |
+| onResultItemClick | (data: SearchResultItem, type: SearchType) => void | - | search result click callback |
+| onError | (error: Error) => void | - | error callback |
+
+###