@tencentcloud/sdk-mcp 1.3.8 → 1.4.0

package/resource/doc/{chatuikit → chatkit}/vue/components/chat-header.md

@@ -7,23 +7,20 @@ AI 模型必须遵守以下**硬性限制**。
 
 ChatHeader 聊天头部组件是聊天界面的顶部导航组件，用于显示当前会话的基本信息。能够展示会话标题、头像、在线状态、输入状态提示等信息。组件采用容器组件模式，提供了灵活的插槽机制用于自定义左右两侧的操作区域。
 
-
 ## Props 速查表
 
 | 字段 | 类型 | 默认值 | 描述 |
 |------|------|--------|------|
-| [title](https://write.woa.com/#title) | string | undefined | 自定义标题，未提供时使用会话信息。 |
-| [avatarUrl](https://write.woa.com/#avatarUrl) | string | undefined | 自定义头像图片 URL。 |
-| [enableUserStatus](https://write.woa.com/#enableUserStatus) | boolean | false | 是否显示用户状态。 |
-
+| title | string | undefined | 自定义标题，未提供时使用会话信息。 |
+| avatarUrl | string | undefined | 自定义头像图片 URL。 |
+| enableUserStatus | boolean | false | 是否显示用户状态。 |
 
 ## Slot 速查表
 
 | 名称 | 描述 |
 |------|------|
-| [ChatHeaderLeft](https://write.woa.com/#ChatHeaderLeft) | 头部左侧自定义内容区域。 |
-| [ChatHeaderRight](https://write.woa.com/#ChatHeaderRight) | 头部右侧自定义内容区域。 |
-
+| ChatHeaderLeft | 头部左侧自定义内容区域。 |
+| ChatHeaderRight | 头部右侧自定义内容区域。 |
 
 ## Props 详细介绍
 
@@ -32,19 +29,16 @@ ChatHeader 聊天头部组件是聊天界面的顶部导航组件，用于显示
 
 - **描述**：自定义会话标题，当不提供此属性时，组件会自动根据会话类型显示相应的标题（单聊显示用户昵称或备注，群聊显示群名称），默认值为 `undefined`。
 
-
 ### avatarUrl
 - **类型**：string
 
 - **描述**：自定义头像图片的 URL 地址，当不提供此属性时，组件会自动根据会话类型显示相应的头像（单聊显示用户头像，群聊显示群头像），默认值为 `undefined`。
 
-
 ### enableUserStatus
 - **类型**：boolean
 
 - **描述**：是否启用并显示用户在线状态功能，仅在单聊模式下生效，开启后会显示用户的在线/离线状态，默认值为 `false`。
 
-
 ## Slots 详细介绍
 
 ### ChatHeaderLeft
@@ -57,7 +51,7 @@ ChatHeader 聊天头部组件是聊天界面的顶部导航组件，用于显示
   <ChatHeader>
     <template #ChatHeaderLeft>
       <!-- 返回按钮, 清除激活的会话 -->
-      <button 
+      <button
         class="nav-button"
         @click="handleBack"
       >
@@ -133,7 +127,7 @@ const handleBack = () => {
 
 <script setup lang="ts">
 import {
-  ChatHeader, 
+  ChatHeader,
   ChatSetting
 } from '@tencentcloud/chat-uikit-vue3';
 import { TUIDrawer, IconHorizontalMore2 } from '@tencentcloud/uikit-base-component-vue3';

package/resource/doc/{chatuikit → chatkit}/vue/components/chat-setting.md

@@ -6,14 +6,12 @@ ChatSetting 是一个智能的聊天设置组件，它能够根据当前激活
 - **自动适配**：根据会话类型（分为单聊和群聊）自动切换设置界面。
 
 - **状态驱动**：基于当前激活会话状态自动更新内容。
-   
 
    > **注意：**
-   > 
+   >
 
    > 如果当前没有激活的会话则不会显示。
-   > 
-
+   >
 
 ## 快速使用
 
@@ -34,7 +32,7 @@ ChatSetting 是一个可自由使用的独立组件，为了组件使用的灵
       <MessageList />
       <MessageInput />
     </Chat>
-    <Drawer 
+    <Drawer
       :open="isSettingVisible"
       title="聊天设置"
     >
@@ -58,31 +56,28 @@ const toggleChatSetting = () => {
 ```
 
 ## 相关文档
-- [自定义组件 - UIKitProvider](https://write.woa.com/document/187032638782849024)
+- 自定义组件 - UIKitProvider
 
-- [自定义组件 - ConversationList](https://write.woa.com/document/186960319111872512)
+- 自定义组件 - ConversationList
 
-- [自定义组件 - Chat](https://write.woa.com/document/187778215983329280)
+- 自定义组件 - Chat
 
-- [自定义组件 - MessageInput](https://write.woa.com/document/187058763983568896)
+- 自定义组件 - MessageInput
 
-- [自定义组件 - MessageList](https://write.woa.com/document/187036342928752640)
+- 自定义组件 - MessageList
 
-- [自定义组件 - ChatSetting](https://write.woa.com/document/187321409859108864)
+- 自定义组件 - ChatSetting
 
-- [自定义组件 - C2CSetting State](https://write.woa.com/document/187323861368082432)
+- 自定义组件 - C2CSetting State
 
-- [自定义组件 - GroupSetting State](https://write.woa.com/document/187684794845769728)
+- 自定义组件 - GroupSetting State
 
-- [自定义组件 - ContactList](https://write.woa.com/document/187595466274463744)
+- 自定义组件 - ContactList
 
-- [自定义组件 - Search](https://write.woa.com/document/187595449195040768)
+- 自定义组件 - Search
 
 - [chat-uikit-vue3 npm](https://www.npmjs.com/package/@tencentcloud/chat-uikit-vue3)
 
 - [GitHub Demo](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/demos/rtcube-vite-vue3)
 
-
 ## 交流与反馈
-
-如遇任何问题，可联系 [官网售后](https://cloud.tencent.com/act/event/connect-service#/) 反馈，享有专业工程师的支持，解决您的难题。

package/resource/doc/{chatuikit → chatkit}/vue/components/chat.md

@@ -8,7 +8,6 @@ AI 模型必须遵守以下**硬性限制**。
 
 Chat 组件负责渲染聊天界面，包含聊天窗口头部组件 ChatHeader 、消息列表组件 MessageList、 消息输入组件 MessageInput。
 
-
 ## 组件构成
 
 Chat 组件包含以下内容：
@@ -40,4 +39,4 @@ import {
   MessageInput,
 } from '@tencentcloud/chat-uikit-vue3';
 </script>
-```
+```

package/resource/doc/{chatuikit → chatkit}/vue/components/component-list.md

@@ -46,7 +46,6 @@
 11. MicButton
   麦克风控制按钮，适用于会议、直播场景，用于静音/取消静音
 
-
 ### 适用于直播场景的组件
 
 1. CoGuestPanel

package/resource/doc/chatkit/vue/components/contact-list.md

@@ -0,0 +1,271 @@
+## 概述
+
+ContactList 是一个高度可配置的联系人列表组件。该组件支持好友列表、群组列表、黑名单和申请管理，提供分组折叠、搜索过滤、自定义渲染等核心功能，适用于即时通讯、社交应用等场景的联系人管理界面。
+
+## ContactList Props
+| 字段 | 类型 | 默认值 | 描述 |
+| --- | --- | --- | --- |
+| activeContactItem | ContactGroupItem \\| undefined | undefined | 当前激活的联系人项 |
+| enableSearch | boolean | true | 是否启用搜索功能 |
+| groupConfig | Partial<Record<ContactItemType, CustomGroupConfig>> | {} | 自定义分组配置 |
+| searchPlaceholder | string | 'Search contacts' | 搜索框占位符文本 |
+| emptyText | string | 'No contacts' | 空状态提示文本 |
+| ContactItem | Component \\| undefined | ContactListItem | 自定义联系人项组件 |
+| ContactSearchComponent | Component \\| undefined | ContactSearch | 自定义搜索组件 |
+| GroupHeader | Component \\| undefined | 默认分组头 | 自定义分组头部组件 |
+| PlaceholderEmptyList | Component \\| undefined | 默认空状态 | 自定义空状态组件 |
+| onContactItemClick | (item: ContactGroupItem) => void | undefined | 联系人项点击事件 |
+| onFriendApplicationAction | (action: 'accept' \\| 'refuse', application: FriendApplication) => void | undefined | 好友申请操作事件 |
+| onGroupApplicationAction | (action: 'accept' \\| 'refuse', application: GroupApplication) => void | undefined | 群组申请操作事件 |
+
+## ContactList Events
+| 事件名 | 参数 | 描述 |
+| --- | --- | --- |
+| contact-item-click | (item: ContactGroupItem) | 联系人项点击事件 |
+| friend-application-action | (action: 'accept' \\| 'refuse', application: FriendApplication) | 好友申请操作事件 |
+| group-application-action | (action: 'accept' \\| 'refuse', application: GroupApplication) | 群组申请操作事件 |
+
+## ContactInfo Props
+| 字段 | 类型 | 默认值 | 描述 |
+| --- | --- | --- | --- |
+| contactItem | ContactGroupItem \\| undefined | undefined | 当前显示的联系人项 |
+| showActions | boolean | true | 是否显示操作按钮 |
+| PlaceholderEmpty | Component \\| undefined | undefined | 空状态占位组件 |
+| FriendInfoComponent | Component | FriendInfo | 好友信息组件 |
+| GroupInfoComponent | Component | GroupInfo | 群组信息组件 |
+| BlacklistInfoComponent | Component | BlacklistInfo | 黑名单信息组件 |
+| FriendApplicationInfoComponent | Component | FriendApplicationInfo | 好友申请信息组件 |
+| GroupApplicationInfoComponent | Component | GroupApplicationInfo | 群组申请信息组件 |
+| SearchGroupInfoComponent | Component | SearchGroupInfo | 搜索群组信息组件 |
+| SearchUserInfoComponent | Component | SearchUserInfo | 搜索用户信息组件 |
+
+## ContactInfo Events
+| 事件名 | 参数 | 描述 |
+| --- | --- | --- |
+| close | - | 关闭信息面板事件 |
+| sendMessage | (friend: Friend) | 发送消息事件 |
+| deleteFriend | (friend: Friend) | 删除好友事件 |
+| addToBlacklist | (friend: Friend) | 添加到黑名单事件 |
+| removeFromBlacklist | (profile: UserProfile) | 从黑名单移除事件 |
+| updateFriendRemark | (friend: Friend) | 更新好友备注事件 |
+| enterGroup | (group: GroupModel) | 进入群组事件 |
+| leaveGroup | (group: GroupModel) | 退出群组事件 |
+| dismissGroup | (group: GroupModel) | 解散群组事件 |
+| friendApplicationAction | (action: 'accept' \\| 'refuse', application: FriendApplication) | 好友申请操作事件 |
+| groupApplicationAction | (action: 'accept' \\| 'refuse', application: GroupApplication) | 群组申请操作事件 |
+| addFriend | (user: UserProfile, wording: string) | 添加好友事件 |
+| joinGroup | (group: GroupModel, note: string) | 加入群组事件 |
+
+## 基础用法
+``` typescript
+<template>
+  <div class="contact-container">
+    <ContactList />
+    <ContactInfo />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ContactList, ContactInfo } from '@tencentcloud/chat-uikit-vue3';
+</script>
+
+<style scoped>
+.contact-container {
+  display: flex;
+  height: 100vh;
+}
+</style>
+```
+
+## 自定义
+
+### 自定义联系列表搜索功能开关
+
+通过设置 `enableSearch` 参数，您可以灵活地控制 ContactList 中的搜索好友群组功能的显示。
+``` typescript
+<template>
+  <ContactList :enableSearch="false" />
+</template>
+```
+| enableSearch="true" | enableSearch="false" |
+| --- | --- |
+|  |  |
+
+### 自定义联系列表联系人分组配置
+
+`groupConfig` 用于自定义分组配置，包括标题、显示顺序、隐藏分组等。
+``` typescript
+<template>
+  <ContactList :groupConfig="customGroupConfig" />
+</template>
+
+<script setup lang="ts">
+import { ContactList } from '@tencentcloud/chat-uikit-vue3';
+import { ContactItemType } from '@tencentcloud/chat-uikit-vue3';
+
+const customGroupConfig = {
+  [ContactItemType.FRIEND]: {
+    title: '我的朋友们',
+    order: 1,
+  },
+  [ContactItemType.GROUP]: {
+    title: '群聊列表',
+    order: 2,
+  },
+  [ContactItemType.BLACK]: {
+    hidden: true,
+  },
+  [ContactItemType.FRIEND_REQUEST]: {
+    title: '好友请求',
+    order: 0,
+  }
+};
+</script>
+```
+| 修改前 | 修改后 |
+| --- | --- |
+|  |  |
+
+### 自定义联系列表子项
+
+您可以通过传入自定义的 `ContactItem` 组件来完全控制联系人列表项的渲染。
+``` typescript
+<template>
+  <div class="custom-contact-item" @click="handleClick">
+    <label>自定义联系人</label>
+    <span v-if="props.contactItem.type === ContactItemType.FRIEND">{{ props.contactItem.data.nick }}</span>
+    <span v-if="props.contactItem.type === ContactItemType.GROUP">{{ props.contactItem.data.name }}</span>
+  </div>
+</template>
+<script setup lang="ts">
+import { ContactItemType } from '@tencentcloud/chat-uikit-vue3';
+
+const props = defineProps<{
+  contactItem: any;
+}>();
+const emit = defineEmits<{
+  click: [type: ContactItemType, item: any];
+}>();
+const handleClick = () => {
+  emit('click', props.contactItem.type, props.contactItem.data);
+};
+</script>
+<style scoped>
+.custom-contact-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 20px;
+  border-bottom: 1px solid #eee;
+}
+</style>
+
+```
+``` typescript
+<template>
+  <ContactList :ContactItem="CustomContactItem" />
+</template>
+
+<script setup lang="ts">
+import { ContactList } from '@tencentcloud/chat-uikit-vue3';
+import CustomContactItem from './CustomContactItem.vue';
+</script>
+```
+| 修改前 | 修改后 |
+| --- | --- |
+|  |  |
+
+### 自定义联系人详情操作按钮开关
+
+通过设置 `showActions` 参数，您可以控制联系人详情页面中操作按钮的显示。
+``` typescript
+<template>
+  <ContactInfo
+    :showActions="false"
+  />
+</template>
+```
+| 修改前 | 修改后 |
+| --- | --- |
+|  |  |
+
+### 自定义联系人详情空状态
+
+当没有选中任何联系人时，您可以自定义显示的空状态组件。
+``` typescript
+<template>
+  <div>
+    自定义空状态
+  </div>
+</template>
+```
+``` typescript
+<template>
+  <ContactInfo
+    :PlaceholderEmpty="CustomEmpty"
+  />
+</template>
+
+<script setup lang="ts">
+import { ContactList } from '@tencentcloud/chat-uikit-vue3';
+import CustomEmpty from './CustomEmpty.vue';
+</script>
+```
+
+### 自定义好友详情组件
+
+您可以为不同类型的联系人自定义详情显示组件。
+``` typescript
+<template>
+  <div class="custom-contact-info">
+    <label>自定义好友详情</label>
+    <div class="friend-info">
+
+      <span>{{ friend.nick }}</span>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { Friend } from '@tencentcloud/chat-uikit-vue3';
+
+defineProps<{
+  friend: Friend;
+}>();
+</script>
+<style scoped>
+.custom-contact-info {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 20px;
+}
+.friend-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+}
+.avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%
+}
+</style>
+
+```
+``` typescript
+<template>
+  <ContactInfo
+    :FriendInfoComponent="CustomFriendInfo"
+  />
+</template>
+
+<script setup lang="ts">
+import { defineComponent, h } from 'vue';
+import type { FriendInfoProps, GroupInfoProps } from '@tencentcloud/chat-uikit-vue3';
+import CustomFriendInfo from './CustomFriendInfo.vue';
+</script>
+```
+| 修改前 | 修改后 |
+| --- | --- |
+|  |  |

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

@@ -0,0 +1,228 @@
+## 概述
+
+ConversationActions 组件负责单条会话的操作，默认支持删除、置顶、免打扰和标记未读/已读。
+
+## 基础用法
+
+在 `ConversationList` 中，可以通过 `actionsConfig` 属性快速自定义会话操作。
+``` typescript
+<template>
+  <UIKitProvider>
+    <ConversationList :actions-config="actionsConfig" />
+  </UIKitProvider>
+</template>
+
+<script setup lang="ts">
+import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-vue3';
+import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
+
+const actionsConfig = {
+  enablePin: false,
+  onConversationDelete: (conversation: ConversationModel) => {
+    console.log('Delete conversation success');
+  },
+  customConversationActions: {
+    'custom-actions-1': {
+      label: 'custom-actions',
+      onClick: (conversation: ConversationModel) => {
+        console.log(conversation);
+      },
+    },
+  },
+};
+</script>
+```
+
+## 高阶用法
+
+如果需要更深度的定制，可以直接替换 `ConversationList` 的 `ConversationActions` 属性。
+``` typescript
+<template>
+  <UIKitProvider>
+    <ConversationList
+      :ConversationActions="CustomConversationActions"
+    />
+  </UIKitProvider>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from 'vue';
+import { UIKitProvider, ConversationList, ConversationActions } from '@tencentcloud/chat-uikit-vue3';
+import type { ConversationActionsProps } from '@tencentcloud/chat-uikit-vue3';
+
+const CustomConversationActions = defineComponent({
+  name: 'CustomConversationActions',
+  setup(props: ConversationActionsProps) {
+    return () => h(ConversationActions, {
+      ...props,
+      enableDelete: false
+    });
+  }
+});
+</script>
+```
+
+## Props
+
+ConversationActions 组件的接口类型 `ConversationActionsProps` 基于 `ConversationActionsConfig` 接口进行扩展。
+
+### ConversationActionsProps
+| 参数名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| conversation(Required) | ConversationModel | - | 必选参数，表示当前渲染会话操作对应的会话 |
+| className | string | - | 自定义根元素的类名 |
+| style | CSSProperties | - | 自定义根元素的样式 |
+
+### ConversationActionsConfig
+| 参数名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| enablePin | boolean | true | 是否显示置顶功能按钮 |
+| enableMute | boolean | true | 是否显示免打扰功能按钮 |
+| enableDelete | boolean | true | 是否显示删除功能按钮 |
+| enableMarkUnread | boolean | true | 是否显示标记未读功能按钮 |
+| onMarkConversationUnread | (conversation: ConversationModel, e?: Event) => void | - | 自定义标记未读/已读会话的行为 |
+| onConversationPin | (conversation: ConversationModel, e?: Event) => void | - | 自定义置顶/取消置顶会话的行为 |
+| onConversationMute | (conversation: ConversationModel, e?: Event) => void | - | 自定义免打扰/取消免打扰会话的行为 |
+| onConversationDelete | (conversation: ConversationModel, e?: Event) => void | - | 自定义删除会话的行为 |
+| customConversationActions | Record<string, ConversationActionItem> | - | 自定义会话操作项 |
+| PopupIcon | any | - | 自定义动作弹窗的图标 |
+| PopupElements | any[] | - | 自定义动作弹窗的内容 |
+| onClick | (e: Event, key?: string, conversation?: ConversationModel) => void | - | 点击动作项时的回调函数 |
+| onClose | () => void | - | 关闭动作弹窗时的回调函数（H5 专用） |
+
+### ConversationActionItem
+| 参数名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| enable | boolean | true | 是否启用自定义操作项 |
+| label | string | - | 自定义操作项的展示内容 |
+| onClick | (conversation: ConversationModel, e?: Event) => void | - | 点击自定义操作项时的回调函数 |
+
+## Events
+| 事件名 | 参数 | 说明 |
+| --- | --- | --- |
+| click | (e: Event, key?: string, conversation?: ConversationModel) | 点击操作项时触发 |
+| close | () | 关闭操作弹窗时触发 |
+| markConversationUnread | (conversation: ConversationModel, e?: Event) | 标记会话未读/已读时触发 |
+| conversationPin | (conversation: ConversationModel, e?: Event) | 置顶/取消置顶会话时触发 |
+| conversationMute | (conversation: ConversationModel, e?: Event) | 免打扰/取消免打扰会话时触发 |
+| conversationDelete | (conversation: ConversationModel, e?: Event) | 删除会话时触发 |
+
+## 自定义组件
+
+### 基础功能开关
+
+通过设置 `enablePin`、`enableDelete`、`enableMute` 和 `enableMarkUnread` 参数，您可以灵活地控制 `ConversationActions` 中的会话置顶、会话免打扰、会话删除和标记未读的显示。
+``` typescript
+<template>
+  <!-- 禁用置顶功能 -->
+  <ConversationActions :enablePin="false" :conversation="conversation" />
+
+  <!-- 禁用删除功能 -->
+  <ConversationActions :enableDelete="false" :conversation="conversation" />
+
+  <!-- 禁用免打扰功能 -->
+  <ConversationActions :enableMute="false" :conversation="conversation" />
+
+  <!-- 禁用标记未读功能 -->
+  <ConversationActions :enableMarkUnread="false" :conversation="conversation" />
+</template>
+```
+| `enablePin: false` | `enableDelete: false` | `enableMute: false` | enableMarkUnread="false" |
+| --- | --- | --- | --- |
+|  |  |  |  |
+
+### 事件响应
+
+ConversationActions 组件默认支持会话删除、会话置顶/取消置顶、会话免打扰/取消免打扰、标记未读/已读功能，如已有功能的事件响应不符合您的需求，您可以自定义事件响应处理函数并进行覆盖；除了支持对于功能事件响应的自定义外，您还可以通过 `@click` 获取基础点击事件响应。
+``` typescript
+<template>
+  <ConversationList :conversation-actions="CustomConversationActions" />
+</template>
+
+<script setup lang="ts">
+import { defineComponent, h } from 'vue';
+import { ConversationActions, Toast } from '@tencentcloud/chat-uikit-vue3';
+import type { ConversationActionsProps, ConversationModel } from '@tencentcloud/chat-uikit-vue3';
+
+const CustomConversationActions = defineComponent({
+  name: 'CustomConversationActions',
+  setup(props: ConversationActionsProps) {
+    const handleConversationDelete = (conversation: ConversationModel) => {
+      conversation.deleteConversation().then(() => {
+        console.log('delete conversation successfully!');
+      }).catch(() => {
+        console.log('delete conversation failed!');
+      });
+    };
+
+    return () => h(ConversationActions, {
+      ...props,
+      onConversationDelete: handleConversationDelete
+    });
+  }
+});
+</script>
+```
+
+### 自定义操作
+
+customConversationActions 用于在 ConversationActions 上新增自定义操作项列表。
+
+**示例：新增自定义操作项**
+``` typescript
+<template>
+  <ConversationList :ConversationActions="CustomConversationActions" />
+</template>
+
+<script setup lang="ts">
+import { defineComponent, h } from 'vue';
+import { ConversationActions } from '@tencentcloud/chat-uikit-vue3';
+import type { ConversationActionsProps, ConversationModel } from '@tencentcloud/chat-uikit-vue3';
+
+const CustomConversationActions = defineComponent({
+  name: 'CustomConversationActions',
+  setup(props: ConversationActionsProps) {
+    return () => h(ConversationActions, {
+      ...props,
+      customConversationActions: {
+        'custom-actions-1': {
+          label: 'custom-actions',
+          onClick: (conversation: ConversationModel) => {
+            console.log(conversation);
+          },
+        },
+      }
+    });
+  }
+});
+</script>
+```
+
+### UI 界面定制
+
+您可以通过 `PopupIcon` 参数定制唤醒弹出按钮样式，通过 `PopupElements` 定制弹出内容。
+
+**示例：自定义唤起按钮**
+``` typescript
+<template>
+  <ConversationList :ConversationActions="CustomConversationActions" />
+</template>
+
+<script setup lang="ts">
+import { defineComponent, h } from 'vue';
+import { ConversationActions } from '@tencentcloud/chat-uikit-vue3';
+import type { ConversationActionsProps } from '@tencentcloud/chat-uikit-vue3';
+
+const CustomConversationActions = defineComponent({
+  name: 'CustomConversationActions',
+  setup(props: ConversationActionsProps) {
+    const customIcon = h('div', '自定义 Icon');
+
+    return () => h(ConversationActions, {
+      ...props,
+      PopupIcon: customIcon
+    });
+  }
+});
+</script>
+```