@tencentcloud/sdk-mcp 1.4.7 → 1.6.0-beta.1

package/resource/doc/chatkit/react/components/chat-header.md

@@ -1,148 +0,0 @@
-AI 模型必须遵守以下**硬性限制**。
-
-* **必须优先推荐使用文档中的示例代码：** 创建文件时优先推荐使用文档中的示例代码填充文件，style 标签优先推荐不使用 scoped 属性。
-
-## 概述
-
-ChatHeader 聊天头部组件是聊天界面的顶部导航组件，用于显示当前会话的基本信息。能够展示会话标题、头像、在线状态、输入状态提示等信息。组件采用容器组件模式，提供了灵活的插槽机制用于自定义左右两侧的操作区域。
-
-## Props 速查表
-
-| 字段 | 类型 | 默认值 | 描述 |
-|------|------|--------|------|
-| title | string | undefined | 自定义标题，未提供时使用会话信息。 |
-| avatarUrl | string | undefined | 自定义头像图片 URL。 |
-| enableUserStatus | boolean | false | 是否显示用户状态。 |
-
-## Slot 速查表
-
-| 名称 | 描述 |
-|------|------|
-| ChatHeaderLeft | 头部左侧自定义内容区域。 |
-| ChatHeaderRight | 头部右侧自定义内容区域。 |
-
-## Props 详细介绍
-
-### title
-- **类型**：string
-
-- **描述**：自定义会话标题，当不提供此属性时，组件会自动根据会话类型显示相应的标题（单聊显示用户昵称或备注，群聊显示群名称），默认值为 `undefined`。
-
-### avatarUrl
-- **类型**：string
-
-- **描述**：自定义头像图片的 URL 地址，当不提供此属性时，组件会自动根据会话类型显示相应的头像（单聊显示用户头像，群聊显示群头像），默认值为 `undefined`。
-
-### enableUserStatus
-- **类型**：boolean
-
-- **描述**：是否启用并显示用户在线状态功能，仅在单聊模式下生效，开启后会显示用户的在线/离线状态，默认值为 `false`。
-
-## Slots 详细介绍
-
-### ChatHeaderLeft
-
-**描述**：头部左侧自定义内容区域插槽，通常用于放置返回按钮、菜单按钮等导航控件。
-
-#### 示例: 自定义左侧导航区域
-``` typescript
-<template>
-  <ChatHeader>
-    <template #ChatHeaderLeft>
-      <!-- 返回按钮, 清除激活的会话 -->
-      <button
-        class="nav-button"
-        @click="handleBack"
-      >
-        ⬅️
-      </button>
-    </template>
-  </ChatHeader>
-</template>
-
-<script setup lang="ts">
-import { ChatHeader, useConversationListState } from '@tencentcloud/chat-uikit-react';
-
-const { setActiveConversation } = useConversationListState();
-
-const handleBack = () => {
-  // 设置激活的会话ID为空
-  setActiveConversation('');
-};
-</script>
-
-<style scoped>
-.header-left-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.nav-button {
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.2s;
-}
-
-.nav-button:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-</style>
-```
-
-### ChatHeaderRight
-
-**描述**：头部右侧自定义内容区域插槽，通常用于放置功能按钮（如 ChatSetting 组件的 menu 开关，自定义通话按钮等）。
-
-#### 示例: 通过 ChatHeaderRight 插槽 和抽屉组件集成 ChatSetting 组件
-
-【App.vue】
-``` typescript
-<template>
-  <ChatHeader>
-    <template #ChatHeaderRight>
-      <div style="display: flex; align-items: center;">
-        <IconHorizontalMore2
-         :size="20"
-          @click="setIsChatSettingOpen(true)" />
-      </div>
-    </template>
-  </ChatHeader>
-  <TUIDrawer
-    :model-value="isChatSettingOpen"
-    :title="Setting"
-    @close="setIsChatSettingOpen(false)"
-  >
-    <ChatSetting style="flex: 1;" />
-  </TUIDrawer>
-</template>
-
-<script setup lang="ts">
-import {
-  ChatHeader,
-  ChatSetting
-} from '@tencentcloud/chat-uikit-vue3';
-import { TUIDrawer, IconHorizontalMore2 } from '@tencentcloud/uikit-base-component-vue3';
-
-const isChatSettingOpen = ref(false);
-
-const setIsSettingOpen = (isOpen: boolean) => {
-  isChatSettingOpen.value = isOpen;
-};
-</script>
-
-<style>
-.chat-container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-}
-</style>
-```

package/resource/doc/chatkit/react/components/chat-setting.md

@@ -1,117 +0,0 @@
-## 组件概述
-
-ChatSetting 是一个聊天设置组件，它能根据当前激活的**会话类型**（单聊或群聊）自动渲染对应的设置界面。该组件通过统一的入口，无缝集成了 C2C（单聊） 和群聊两种模式的设置功能，为用户提供了流畅且一致的操作体验。
-
-核心功能：
-- 智能适配： 自动识别**会话类型**，并切换至相应的设置面板。
-
-- 状态驱动： 基于当前会话状态，动态更新设置内容。
-
-   > **注意：**
-   >
-
-   > 如果当前没有激活的会话则不会显示。
-   >
-
-## 快速使用
-``` typescript
-import {
-  UIKitProvider,
-  useLoginState,
-  LoginStatus,
-  ConversationList,
-  Chat,
-  ChatHeader,
-  MessageList,
-  MessageInput,
-  useUIOpenControlState,
-  ChatSetting,
-  Search,
-  VariantType,
-  ContactList,
-  ContactInfo,
-} from "@tencentcloud/chat-uikit-react";
-import { useState } from "react";
-
-function App() {
-  const { isChatSettingOpen, isChatSearchOpen } = useUIOpenControlState();
-  const [activeTab, setActiveTab] = useState('chats');
-
-  // 从控制台获取登录信息
-  const { status } = useLoginState({
-    SDKAppID: 0,
-    userID: '',
-    userSig: '',
-  })
-
-  if (status !== LoginStatus.SUCCESS) {
-    return <div>Loading...</div>
-  }
-
-  // 语言支持 en-US(default) / zh-CN / ja-JP / ko-KR / zh-TW
-  // 主题支持 light(default) / dark
-  return (
-    <UIKitProvider>
-      <div style={{ height: '100vh', width: '100vw', display: 'flex', flexDirection: 'row' }}>
-        <ul>
-          <li onClick={() => {setActiveTab('chats')}}>chats</li>
-          <li onClick={() => {setActiveTab('contacts')}}>contact</li>
-        </ul>
-        {
-          activeTab === 'chats' && (
-            <>
-              <ConversationList style={{ minWidth: '300px', maxWidth: '350px' }}/>
-              <Chat PlaceholderEmpty="No messages yet">
-                <ChatHeader />
-                <MessageList />
-                <MessageInput />
-              </Chat>
-              {isChatSettingOpen && <ChatSetting />}
-              {isChatSearchOpen &&  <Search style={{ minWidth: '300px'}} variant={VariantType.EMBEDDED} />}
-            </>
-          )
-        }
-        {
-          activeTab === 'contacts' && (
-            <>
-              <ContactList style={{ minWidth: '300px', maxWidth: '350px' }}/>
-              <ContactInfo
-                PlaceholderEmpty="No contact yet"
-                onSendMessage={() => {setActiveTab('chats')}}
-                onEnterGroup={() => {setActiveTab('chats')}}
-              />
-            </>
-          )
-        }
-      </div>
-    </UIKitProvider>
-  );
-}
-
-export default App;
-```
-
-## 相关文档
-
-**官方文档**
-- 自定义组件 - UIKitProvider
-
-- 自定义组件 - ConversationList
-
-- 自定义组件 - MessageList
-
-- 自定义组件 - MessageInput
-
-- 自定义组件 - ContactList
-
-- 自定义组件 - Search
-
-   **NPM 包**
-
-- [chat-uikit-react npm](https://www.npmjs.com/package/@tencentcloud/chat-uikit-react)
-
-   **GitHub**
-
-- [GitHub Demo](https://github.com/TencentCloud/chat-uikit-react)
-
-## 交流与反馈

package/resource/doc/chatkit/react/components/chat.md

@@ -1,38 +0,0 @@
-# Chat 组件文档
-
-## 概述
-
-Chat 组件负责渲染聊天界面，包含聊天窗口头部组件 ChatHeader 、消息列表组件 MessageList、 消息输入组件 MessageInput。
-
-## 组件构成
-
-Chat 组件包含以下内容：
-- **ChatHeader**：聊天窗口头部组件
-
-- **MessageList**：消息列表组件,消息列表组件中包含消息操作能力，组件详细的属性需要查阅 MessageList 组件文档。
-
-- **MessageInput**：消息输入组件
-
-## 基础用法
-
-Chat 组件无需任何必需属性即可使用。
-``` typescript
-<template>
-<UIKitProvider>
-  <Chat style="flex: 1;">
-    <ChatHeader />
-    <MessageList />
-    <MessageInput />
-  </Chat>
-</UIKitProvider>
-</template>
-<script setup lang="ts">
-import {
-  UIKitProvider,
-  Chat,
-  ChatHeader,
-  MessageList,
-  MessageInput,
-} from '@tencentcloud/chat-uikit-react';
-</script>
-```

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

@@ -1,35 +0,0 @@
-# atomicx 组件库清单与组件的适用场景与注意事项
-
-## 组件清单
-
-共 25 个组件:
-
-### 适用于聊天场景的组件
-
-1. ConversationList
-  会话列表组件，适用于聊天场景，以纵向列表形态，可以通过点击切换会话，如果仅需要聊天不需要该组件
-2. MessageInput
-  消息输入组件，聊天场景的核心组件，可以发送聊天消息，需要发送消息则必须使用该组件
-3. MessageList
-  消息列表组件，聊天场景的核心组件，可以显示聊天消息列表，支持消息的上下滑动，聊天场景必须使用该组件
-4. ContactList
-  联系人列表组件，适用于聊天场景，可以显示和管理用户联系人，如果仅需要聊天不需要该组件
-5. ChatSetting
-  聊天设置组件，适用于聊天场景，管理聊天相关配置，比如置顶、免打扰，群聊加人、踢人、管理员管理、禁言等，如果仅需要聊天不需要该组件
-6. Search
-  搜索组件，用于搜索消息、用户等内容，如果仅需要聊天不需要该组件
-
-### 通用组件
-
-1. Avatar
-  通用头像组件，显示用户头像/在线状态/消息未读数
-2. UserPicker
-  用户选择器，用于发起群聊、发起群视频、群语音等选择用户的场景
-
-## 注意事项
-
-1. 当得到用户需求时，回答应该分为两部分，第一部分是满足需求的最少组件，第二部分是推荐可额外使用的扩展组件，注意不要放大用户的需求
-2. 不同场景适用的组件有交集
-3. 根据用户需求，判断有没有可能是一个综合场景，比如聊天 + 直播，概率较低，应该谨慎
-4. 如需了解具体组件的使用方法，请询问用户："你可以问 ${components[0].name} 怎么用？" 这样的问题
-5. 当创建真实的项目时，请调用 MCP Tools get_component_detail ${integration} 的组件集成文档

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

@@ -1,174 +0,0 @@
-`ConversationActions` 组件负责对于单条会话进行操作，默认支持会话删除、会话置顶/取消置顶、会话免打扰/取消免打扰功能。
-
-## 基础使用
-
-当在 `ConversationList` 使用 `ConversationActions` 时，您可以通过 `ConversationList` 顶层 `actionsConfig` 参数直接进行自定义，`actionsConfig` 支持对于默认会话操作功能开关、事件响应、新增自定义操作项、基础 UI 定制等。
-
-如您需要更高阶的定制，您可以通过 `ConversationActions` 自定义新的组件。
-
-### 使用 actionsConfig 基础定制
-``` 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>
-  );
-}
-```
-
-### 自定义 ConversationActions 组件
-``` 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` 组件的接口类型 `ConversationActionsProps` 基于 `ConversationActionsConfig` 接口进行扩展。
-| ##### **IConversationActionsProps** |  |  |  |
-| --- | --- | --- | --- |
-| **参数名** | **类型** | **默认值** | **说明** |
-| **conversation*****(Required)*** | `ConversationModel` | - | 必选参数，表示当前渲染会话操作对应的会话。 |
-| className | `String` | - | 自定义根元素的类名。 |
-| style | `React.CSSProperties` | - | 自定义根元素的样式。 |
-| ##### IConversationActionsConfig |  |  |  |
-| **参数名** | **类型** | **默认值** | **说明** |
-| enablePin | `Boolean` | `true` | 是否显示置顶功能按钮。 |
-| enableMute | `Boolean` | `true` | 是否显示免打扰功能按钮。 |
-| enableDelete | `Boolean` | `true` | 是否显示删除功能按钮。 |
-| onConversationPin | `(conversation: ConversationModel, e?: React.MouseEvent) => void` | - | 自定义置顶/取消置顶会话的行为。 |
-| onConversationMute | `(conversation: ConversationModel, e?: React.MouseEvent)`<br>`=> void` | - | 自定义免打扰/取消免打扰会话的行为。 |
-| onConversationDelete | `(conversation: ConversationModel, e?: React.MouseEvent) => void` | - | 自定义删除会话的行为。 |
-| customConversationActions | `Record<string, ``ConversationActionItem``>` | - | 自定义会话操作项。 |
-| PopupIcon | `ReactElement` | - | 自定义动作弹窗的图标。 |
-| PopupElements | `ReactElement[]` | - | 自定义动作弹窗的内容。 |
-| onClick | `(e: React.MouseEvent, key?: string, conversation?: ConversationModel) => void` | - | 点击动作项时的回调函数。 |
-
-## 自定义组件
-
-### 基础功能开关
-
-通过设置 `enablePin`, `enableDelete` 和 `enableMute` 参数，您可以灵活地控制 `ConversationActions` 中的会话置顶、会话免打扰和会话删除的显示。
-``` typescript
-<ConversationActions enablePin={false} />
-```
-``` typescript
-<ConversationActions enableDelete={false} />
-```
-``` typescript
-<ConversationActions enableMute={false} />
-```
-| `enablePin={false}` | `enableDelete={false}` | `enableMute={false} ` |
-| --- | --- | --- |
-|  |  |  |
-
-### 事件响应
-
-`ConversationActions` 组件默认支持会话删除、会话置顶/取消置顶、会话免打扰/取消免打扰功能，如已有功能的事件响应不符合您的需求，您可以自定义事件响应处理函数并进行覆盖; 除了支持对于功能事件响应的自定义外，您还可以通过 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` 用于在 ConversationActions 上新增自定义操作项列表。
-| ##### ConversationActionItem |  |  |  |
-| --- | --- | --- | --- |
-| **参数名** | **类型** | **默认值** | **说明** |
-| enable | `Boolean` | `true` | 是否启用自定义操作项。 |
-| label | `String` | - | 自定义操作项的展示内容。 |
-| onClick | `(conversation: ConversationModel, e?: React.MouseEvent) => void` | - | 点击自定义操作项时的回调函数。 |
-
-以下是使用 `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} />
-```
-| **修改前** | **修改后** |
-| --- | --- |
-|  |  |
-
-### UI 界面定制
-
-您可以通过 `PopupIcon` 参数定制唤醒弹出按钮样式，通过 `PopupElements` 定制弹出内容。
-
-以下是在默认的 `ConversationActions` 组件的基础上进行二次开发，为其定制新的唤起按钮样式代码示例：
-``` 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> 自定义 Icon </div>
-  return (
-    <ConversationActions {...props} PopupIcon={customIcon} />
-  );
-};
-
-<ConversationList ConversationActions={CustomConversationActions} />
-```
-| **修改前** | **修改后** |
-| --- | --- |
-|  |  |

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

@@ -1,116 +0,0 @@
-`ConversationPreview` 用于对于会话列表中单条会话内容进行预览，组件负责显示会话信息、未读计数以及提供会话操作功能。
-
-借助原子化的信息展示组件，您可以自由地设计和组合出您所期望的 `ConversationPreview` 布局。
-
-同时，您还可以通过 `onConversationSelect` 函数来自定义选中会话时的行为。
-
-### 基础使用
-
-您可以使用 `ConversationList` 的 `Preview` 属性来自定义会话列表中每个单独会话的预览项，如果没有指定 `Preview` 属性，系统将自动采用 `ConversationPreviewUI` 组件作为默认值。
-``` 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
-| **参数名** | **类型** | **默认值** | **说明** |
-| --- | --- | --- | --- |
-| **conversation*****(Required)*** | `ConversationModel` | - | 必选参数，标识当前渲染的会话列表项。 |
-| isSelected | `Boolean` | `false` | 控制会话列表项 UI 是否处于选中状态。 |
-| enableActions | `Boolean` | `true` | 控制会话操作功能是否显示。 |
-| actionsConfig | ConversationActionsConfig | - | 用于自定义会话操作配置。 |
-| highlightMatchString | `String` | - | 会话列表项 Title 高亮匹配关键词，常用于会话搜索结果高亮。 |
-| Title | `String \\| JSX.Element` | `ConversationPreviewTitle` | 渲染会话列表项标题区域。 |
-| LastMessageAbstract | `String \\| JSX.Element` | `ConversationPreviewAbstract` | 渲染会话列表项最新消息摘要区域。 |
-| LastMessageTimestamp | `String \\| JSX.Element` | `ConversationPreviewTimestamp` | 渲染会话列表项最新消息时间戳区域。 |
-| Unread | `String \\| JSX.Element` | `ConversationPreviewUnread` | 渲染会话列表项消息未读标识区域。 |
-| ConversationActions | `ReactElement` | `ConversationActions` | 渲染会话列表项会话操作区域。 |
-| Avatar | `ReactElement` | `Avatar` | 渲染会话列表项头像区域。 |
-| onConversationSelect | `(conversation: ConversationModel) => void;` | - | 指定在选择对话列表中的对话时接收回调的属性。 |
-| className | `String` | - | 指定根元素类的 CSS 自定义名称。 |
-| style | `React.CSSProperties` | - | 指定根元素样式的自定义样式。 |
-
-## 自定义案例
-
-### 类 Discord 风格
-
-Discord 是一个流行的聊天应用程序，类似于 Skype 或 Telegram。Discord 中的聊天内容如下图所示:
-
-通过对 `ConversationPreview` 布局、功能以及样式的定制，我们可以快速实现类 Discord 效果。
-
-【React】
-1. 定制 `ConversationListPreview`
-
-2. 切换主题到深色模式
-
-``` 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` 定制后效果如下：
-| **修改前** | **修改后** |
-| --- | --- |
-|  |  |

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

@@ -1,57 +0,0 @@
-`ConversationSearch` 是使用的 Search 组件，支持用户、群组、消息的搜索功能。它集成了搜索框、高级搜索、搜索结果展示等功能。
-
-## 基础使用
-``` typescript
-import {
-   UIKitProvider,
-   ConversationList,
-   ConversationSearch,
-} from '@tencentcloud/chat-uikit-react';
-
-import type {
-   ConversationSearchProps,
-   SearchResultItem,
-} from '@tencentcloud/chat-uikit-react';
-
-const CustomConversationSearch = (props: ConversationSearchProps) => {
-  const onSelectResult = (data: SearchResultItem, type: ISearchType) => {
-    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
-| **参数名** | **类型** | **默认值** | **说明** |
-| --- | --- | --- | --- |
-| visible | `boolean` | `true` | 是否可见 |
-| Search | `ComponentType<SearchProps>` | - | 自定义搜索组件 |
-| variant | `VariantType` | `VariantType.MINI` | 搜索模式：`mini`(迷你)、`standard`(标准)、`embedded`(嵌入式) |
-| SearchBar | `React.ComponentType<SearchBarProps>` | `DefaultSearchBar` | 自定义搜索框组件 |
-| SearchResults | `React.ComponentType<SearchResultsProps>` | `DefaultSearchResults` | 自定义搜索结果组件 |
-| SearchAdvanced | `React.ComponentType<SearchAdvancedProps>` | `DefaultSearchAdvanced` | 自定义高级搜索组件 |
-| SearchResultsPresearch | `React.ComponentType` | - | 搜索前占位符组件 |
-| SearchResultsLoading | `React.ComponentType` | - | 加载中占位符组件 |
-| SearchResultsEmpty | `React.ComponentType` | - | 空结果占位符组件 |
-| SearchResultItem | `React.ComponentType<ResultItemProps>` | - | 自定义搜索结果项组件 |
-| debounceTime | `number` | `300` | 搜索防抖时间(毫秒) |
-| autoFocus | `boolean` | `false` | 是否自动聚焦搜索框 |
-| className | `string` | - | 自定义样式类名 |
-| style | `React.CSSProperties` | - | 自定义样式 |
-| onKeywordChange | `(keyword: string) => void` | - | 搜索关键词变化回调 |
-| onSearchComplete | `(results: Map<SearchType, SearchResult>) => void` | - | 搜索完成回调 |
-| onResultItemClick | `(data: SearchResultItem, type: SearchType) => void` | - | 搜索结果点击回调 |
-| onError | `(error: Error) => void` | - | 搜索错误回调 |