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

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

@@ -1,282 +0,0 @@
-## 组件概述
-
-Search 是一个功能完整的搜索解决方案，包含了搜索框、搜索结果展示、高级搜索等功能的完整组件集合。适用于即时通讯、在线会议、在线教育等场景的用户、群组、消息搜索。
-
-> **说明：**
->
-
-> 此功能属于增值服务，需要您购买云端搜索插件，请点击 [购买](https://console.cloud.tencent.com/im/plugin/TUICloudSearch)。
->
-
-## 组件架构
-``` bash
-Search (主组件)
-├── SearchBar              # 搜索框组件
-├── SearchResults          # 搜索结果组件
-├── SearchAdvanced         # 高级搜索组件
-└── SearchResultsItem      # 搜索结果项组件
-    ├── User               # 用户结果项
-    ├── Group              # 群组结果项
-    ├── Message            # 消息结果项
-    └── Conversation       # 会话结果项
-```
-
-## 搜索模式
-| **迷你模式** | **标准模式** | **嵌入式模式** |
-| --- | --- | --- |
-| - 适用于侧边栏或小容器<br>- 显示有限结果数量<br>- 支持展开查看更多 | - 适用于全屏搜索界面<br>- 完整功能展示<br>- 支持高级搜索 | - 适用于聊天界面<br>- 专注消息搜索<br>- 优化的布局 |
-|  |  |  |
-
-## Props
-| 属性名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| 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` | - | 搜索错误回调 |
-
-## 基础使用
-``` typescript
-import { Search, VariantType } from '@tencentcloud/chat-uikit-react';
-
-function App() {
-  return (
-    <Search
-      variant={VariantType.STANDARD}
-      onResultItemClick={(data, type) => {
-        console.log('搜索结果点击:', data, type);
-      }}
-    />
-  );
-}
-```
-
-## 自定义能力
-
-`Search` 为用户自定义提供了丰富且多维度的 Props 接口，允许用户自定义功能、UI、模块等。
-
-`Search` 组件提供了多个可替换的子组件，允许用户自定义 `SearchBar`, `SearchResults`, `SearchAdvanced`, `SearchResultItem`, `SearchResultsPresearch`, `SearchResultsLoading`, `SearchResultsEmpty`, 等。同时，用户还可以利用默认子组件进行二次开发定制。
-
-【自定义 SearchBar】
-
-**Props**
-| 属性名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| data | `SearchResultItem` | - | 搜索结果数据 |
-| type | `SearchType` | - | 搜索结果类型 |
-| keyword | `string` | - | 搜索关键词 |
-| onClick | `(data: SearchResultItem, type: SearchType) => void` | - | 点击回调 |
-| className | `string` | - | 自定义样式类名 |
-
-**示例**
-``` typescript
-const CustomSearchBar = ({ value, onChange, onClear, placeholder }) => (
-  <div className="custom-search-bar">
-    <input
-      type="text"
-      value={value}
-      onChange={onChange}
-      placeholder={placeholder}
-    />
-    {value && <button onClick={onClear}>清除</button>}
-  </div>
-);
-
-<Search SearchBar={CustomSearchBar} />
-```
-
-【自定义 SearchResults】
-
-**Props**
-| 属性名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| results | `Map<SearchType, SearchResult>` | - | 搜索结果数据 |
-| isLoading | `boolean` | - | 是否正在加载 |
-| error | `Error \\| null` | - | 错误信息 |
-| keyword | `string` | - | 搜索关键词 |
-| typeLabels | `Record<SearchType, string>` | - | 搜索类型标签 |
-| onLoadMore | `(type: SearchType) => void` | - | 加载更多回调 |
-| onResultItemClick | `(data: SearchResultItem, type: SearchType) => void` | - | 结果项点击回调 |
-| SearchResultsLoading | `React.ComponentType` | `Loading` | 自定义加载组件 |
-| SearchResultsPresearch | `React.ComponentType` | - | 搜索前占位符组件 |
-| SearchResultsEmpty | `React.ComponentType` | `EmptyResult` | 空结果占位符组件 |
-| SearchResultItem | `React.ComponentType<ResultItemProps>` | `DefaultSearchResultsItem` | 自定义结果项组件 |
-| variant | `VariantType` | `VariantType.STANDARD` | 显示模式 |
-| searchType | `SearchType \\| 'all'` | `'all'` | 当前搜索类型 |
-
-**示例**
-``` typescript
-const CustomSearchResults = ({ results, keyword, onResultItemClick }) => (
-  <div className="custom-results">
-    {Array.from(results.entries()).map(([type, result]) => (
-      <div key={type}>
-        <h3>{type}</h3>
-        {result.resultList.map((item, index) => (
-          <div key={index} onClick={() => onResultItemClick(item, type)}>
-            {/* 自定义结果项 */}
-          </div>
-        ))}
-      </div>
-    ))}
-  </div>
-);
-
-<Search SearchResults={CustomSearchResults} />
-```
-
-【自定义 SearchAdvanced】
-
-**Props**
-| 属性名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| variant | `VariantType` | - | 显示模式 |
-| searchType | `SearchTabType` | - | 当前搜索类型 |
-| advancedParams | `Map<SearchType, SearchParamsMap[SearchType]>` | - | 高级搜索参数 |
-| onAdvancedParamsChange | `(type: SearchType, params: SearchParamsMap[SearchType]) => void` | - | 参数变化回调 |
-
-**示例**
-``` typescript
-const CustomSearchAdvanced = ({ variant, searchType, advancedParams, onAdvancedParamsChange }) => (
-  <div className="custom-advanced">
-  {/* 自定义高级搜索功能 */}
-  </div>
-);
-
-<Search SearchAdvanced={CustomSearchAdvanced} />
-```
-
-【自定义 SearchResultItem】
-
-**Props**
-| 属性名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| data | `SearchResultItem` | - | 搜索结果数据 |
-| type | `SearchType` | - | 搜索结果类型 |
-| keyword | `string` | - | 搜索关键词 |
-| onClick | `(data: SearchResultItem, type: SearchType) => void` | - | 点击回调 |
-| className | `string` | - | 自定义样式类名 |
-
-**示例**
-``` typescript
-const CustomSearchItem = ({ data, type, keyword, onClick }) => (
-  <div className="custom-item">
-    {type === SearchType.MESSAGE && (
-        <Conversation
-          data={data}
-          keyword={keyword}
-          onClick={onClick}
-        />
-      )}
-      {type === SearchType.USER && (
-        <User
-          data={data}
-          keyword={keyword}
-          onClick={onClick}
-        />
-      )}
-      {type === SearchType.GROUP && (
-        <Group
-          data={data}
-          keyword={keyword}
-          onClick={onClick}
-        />
-      )}
-      {type === SearchType.CHAT_MESSAGE && (
-        <Message
-          data={data}
-          keyword={keyword}
-          onClick={onClick}
-        />
-      )}
-  </div>
-);
-
-<Search SearchResultItem={CustomSearchItem} />
-```
-
-【自定义占位组件】
-
-**Props**
-| 属性名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| SearchResultsPresearch | `React.ComponentType` | - | 搜索前占位符组件 |
-| SearchResultsLoading | `React.ComponentType` | - | 加载中占位符组件 |
-| SearchResultsEmpty | `React.ComponentType` | - | 空结果占位符组件 |
-
-**示例**
-``` typescript
-<Search
-  SearchResultsPresearch={() => <div>输入关键词开始搜索</div>}
-  SearchResultsLoading={() => <div>搜索中...</div>}
-  SearchResultsEmpty={() => <div>未找到相关结果</div>}
-/>
-```
-
-## SearchState
-
-SearchState 是基于 Zustand 的搜索状态管理钩子，为 Search 组件提供完整的状态管理能力。它支持多种搜索模式（标准模式、嵌入式模式），管理搜索关键词、搜索结果、加载状态、错误处理等功能。如果自定义组件能力不能支持您的业务，可以使用 SearchState 实现您的需求。
-
-#### 数据
-| 属性名 | 类型 | 说明 |
-| --- | --- | --- |
-| keyword | `string` | 当前搜索关键词 |
-| results | `Map<SearchType, SearchResult<SearchType>>` | 搜索结果集合 |
-| isLoading | `boolean` | 是否正在搜索 |
-| error | `Error \\| null` | 搜索错误信息 |
-| searchAdvancedParams | `Map<ISearchType, SearchParamsMap[SearchType]>` | 高级搜索参数 |
-| selectedSearchType | `SearchType \\| 'all'` | 当前选中的搜索类型 |
-
-#### 操作方法
-| 方法名 | 类型 | 说明 |
-| --- | --- | --- |
-| setKeyword | `(k: string) => void` | 设置搜索关键词 |
-| loadMore | `(type?: SearchType) => Promise<void>` | 加载更多搜索结果 |
-| setSelectedType | `(type: SearchType \\| 'all') => void` | 设置搜索类型 |
-| setSearchMessageAdvancedParams | `(params: SearchCloudMessagesParams) => void` | 设置消息搜索高级参数 |
-| setSearchUserAdvancedParams | `(params: SearchCloudUsersParams) => void` | 设置用户搜索高级参数 |
-| setSearchGroupAdvancedParams | `(params: SearchCloudGroupsParams) => void` | 设置群组搜索高级参数 |
-
-## 使用示例
-``` typescript
-import { useSearchState, VariantType } from '@tencentcloud/chat-uikit-react';
-const {
-    keyword,
-    results,
-    isLoading,
-    error,
-    setKeyword,
-    setSelectedType,
-    loadMore
-  } = useSearchState(VariantType.STANDARD);
-
-```
-
-## 常见问题
-
-### Q: 如何自定义搜索结果的显示格式？
-
-A: 使用 `SearchResultItem` 属性传入自定义组件。
-
-### Q: 如何处理搜索性能问题？
-
-A: 调整 `debounceTime`，使用 React.memo，考虑结果缓存。
-
-### Q: 移动端如何优化？
-
-A: 组件自动适配移动端，也可通过 CSS 进一步定制。
-
-### Q: 如何支持多语言？
-
-A: 组件内置国际化支持，通过 `useUIKit` 获取翻译。

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

@@ -1,43 +0,0 @@
-## TUIKit 介绍
-
-TUIKit 是基于腾讯云 IM SDK 的一款 UI 组件库，它提供了一些通用的 UI 组件，包含会话、聊天、关系链、群组、音视频通话等功能。
-基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。
-TUIKit 中的组件在实现 UI 功能的同时，会调用 IM SDK 相应的接口实现 IM 相关逻辑和数据的处理，因而开发者在使用 TUIKit  时只需关注自身业务或个性化扩展即可。
-基于 React 开发的 TUIKit 界面风格更契合境外客户的使用习惯，而且支持国际化，如果您的业务有出海的需求，欢迎接入。
-
-## TUIKit 组成
-
-TUIKit 主要分为 ConversationList、Chat、ChatSetting、Profile 等模块，每个模块负责不同的内容，具体可参见 [开源代码](https://github.com/TencentCloud/chat-uikit-react)。
-
-Web 端界面效果如下图所示：
-
-H5 端界面效果如下图所示：
-
-## Chat 重点功能介绍
-
-Chat 主要负责消息界面的展示。您可以利用它直接发送不同类型的消息，支持文字/表情/图片/视频/文件/自定义等消息类型，同时支持消息转发/撤回/引用、查询、已读回执等功能。
-
-> **说明：**
->
-
-> 为了尊重版权，IM Demo/TUIKit 工程中默认不包含大表情元素切图。在正式上线商用前，请您替换为自己设计或拥有版权的其他表情包。请注意，下图所示的**默认小黄脸表情包版权属于腾讯云**，您可以通过升级至 [IM 企业版套餐](https://buy.cloud.tencent.com/avc) 免费使用该表情包。
->
-
->
->
-
-## ConversationList 功能介绍
-
-ConversationList 主要负责会话列表的展示和编辑，包含会话置顶、会话删除等功能。
-
-## ChatSetting 功能介绍
-
-ChatSetting 主要负责 Chat 设置。
-
-## Contact 重点功能介绍
-
-Contact 主要负责关系链展示以及创建会话等操作。
-
-## Profile 重点功能介绍
-
-Profile 主要负责用户资料的管理。

package/resource/doc/chatkit/react/faq.md

@@ -1,26 +0,0 @@
----
-product: 'Chat'
-tech_stack: 'web_js_sdk'
-framework: 'react'
-title: 'react uikit 集成和常见问题解决方案'
-keywords: ['react', '初始化', '组件', '集成', 'TUIKit']
----
-
-# React TUIKit 集成与常见问题解决方案
-
-## 模块一：环境准备与快速初始化 (Topic: Setup)
-
-### Q: 如何在 React 项目中安装 TUIKit？
-
-**A:** TUIKit 是基于 Web SDK 开发的，您需要安装 `@tencentcloud/chat-uikit-react`
-
-```bash
-# 安装 TUIKit React 版本
-npm install @tencentcloud/chat-uikit-react@latest
-```
-
-## 模块二：常见问题解决方案 (Topic: Question)
-
-### Q: 是否支持 react 17/19 版本？
-
-**A:** 目前不支持 17.x/19.x 版本，仅支持 React v18。

package/resource/doc/chatkit/vue/components/avatar.md

@@ -1,104 +0,0 @@
-# Avatar 组件文档
-
-## 概述
-
-Avatar 组件用于显示用户头像和状态，支持多种形状和大小的头像展示。它可以用于聊天应用、社交平台、用户管理系统等场景，提供用户身份的可视化表示。
-
-## Props 速查表
-
-| 字段 | 类型 | 默认值 | 描述 |
-| --- | --- | --- | --- |
-| src | string | undefined | 头像图片的 URL |
-| size | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | number | 'md' | 头像的大小，支持多种预设大小或自定义大小 |
-| shape | 'circular' | 'square' | 'rounded' | 'circular' | 头像的形状，支持圆形、方形和圆角矩形 |
-| alt | string | '' | 图片的替代文本，用于生成文本头像 |
-| children | ReactNode | undefined | 自定义内容，优先于 src 和 alt 的内容 |
-| className | string | undefined | 自定义 CSS 类名 |
-| style | React.CSSProperties | undefined | 自定义样式 |
-| onClick | () => void | undefined | 点击事件处理函数 |
-| isShowOnlineStatus | boolean | false | 是否显示在线状态指示器 |
-| isOnline | boolean | false | 用户是否在线 |
-| unreadCount | number | 0 | 未读消息数量，若为 true 则显示小红点，若为数字则显示具体数量 |
-| maxUnreadCount | number | 99 | 最大未读消息数量，超过则显示 +N |
-| isDotUnreadCount | boolean | false | 是否显示小红点 |
-| children | ReactNode | undefined | 自定义内容，优先于 src 和 alt 的内容 |
-
-## Props 详细介绍
-
-### `src`
-
-`类型`: `string`
-`描述`: 头像图片的 URL，若未提供则显示默认头像。
-`默认值`: `undefined`
-
-### `size`
-
-`类型`: `'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | number`
-`描述`: 头像的大小，支持多种预设大小或自定义大小。
-`默认值`: `'md'`
-
-### `shape`
-
-`类型`: `'circular' | 'square' | 'rounded'`
-`描述`: 头像的形状，支持圆形、方形和圆角矩形。
-`默认值`: `'circular'`
-
-### `alt`
-
-`类型`: `string`
-`描述`: 图片的替代文本，用于生成文本头像。
-`默认值`: `''`
-
-### `children`
-
-`类型`: `ReactNode`
-`描述`: 自定义内容，优先于 src 和 alt 的内容。
-`默认值`: `undefined`
-
-### `className`
-
-`类型`: `string | undefined`
-`描述`: 自定义 CSS 类名。
-`默认值`: `undefined`
-
-### `style`
-
-`类型`: `React.CSSProperties | undefined`
-`描述`: 自定义样式。
-`默认值`: `undefined`
-
-### `onClick`
-
-`类型`: `() => void`
-`描述`: 点击事件处理函数。
-`默认值`: `undefined`
-
-### `isShowOnlineStatus`
-
-`类型`: `boolean`
-`描述`: 是否显示在线状态指示器。
-`默认值`: `false`
-
-### `isOnline`
-
-`类型`: `boolean`
-`描述`: 用户是否在线。
-`默认值`: `false`
-
-### `unreadCount`
-
-`类型`: `number`
-`描述`: 未读消息数量，若为 true 则显示小红点，若为数字则显示具体数量。
-`默认值`: `0`
-
-### `maxUnreadCount`
-
-`类型`: `number`
-`描述`: 最大未读消息数量，超过则显示 +N。
-`默认值`: `99`
-
-### isDotUnreadCount
-
-`类型`: `boolean`
-`描述`: 是否显示小红点。
-`默认值`: `false`

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

@@ -1,149 +0,0 @@
-AI 模型必须遵守以下**硬性限制**。
-
-**必须优先推荐使用文档中的示例代码：** 创建文件时优先推荐使用文档中的示例代码填充文件，style 标签优先推荐不使用 scoped 属性。
-**必须使用默认文本对齐方式：** ChatHeader 的 `title` 文本默认左对齐。
-
-## 概述
-
-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-vue3';
-
-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/vue/components/chat.md

@@ -1,42 +0,0 @@
-AI 模型必须遵守以下**硬性限制**。
-1. **Chat 组件必须使用默认 style：** Chat 默认 style  设置为 `flex:1; min-height: 0`。
-2. **必须使用 sendMessage API：** 发送快捷消息时必须使用 useMessageInputState 提供的 `sendMessage` API。
-
-# 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-vue3';
-</script>
-```