@tencentcloud/sdk-mcp 1.3.9 → 1.4.1

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

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

package/resource/doc/{chatuikit → chatkit}/vue/components/message-input.md

@@ -5,7 +5,6 @@ AI 模型必须遵守以下**硬性限制**。
 
 MessageInput 是一个功能完整的消息输入组件，专为 Vue3 应用设计，提供了文本编辑、表情选择、文件附件、发送按钮等核心聊天输入功能。该组件支持丰富的自定义选项，包括输入行为配置、工具栏定制、组件替换和插槽扩展，能够满足不同聊天场景的个性化需求。
 
-
 ## 基础用法
 
 ```ts
@@ -29,7 +28,6 @@ import { MessageInput } from "@tencentcloud/chat-uikit-vue3";
 | attachmentPickerMode | 'collapsed' \| 'expanded' | 'collapsed' | 附件选择器显示模式 |
 | actions | MessageInputActions | ['EmojiPicker', 'ImagePicker', 'FilePicker', 'VideoPicker'] | 工具栏操作按钮配置 |
 
-
 ## Slots 配置
 
 | 字段 | 类型 | 默认值 | 描述 |
@@ -42,7 +40,6 @@ import { MessageInput } from "@tencentcloud/chat-uikit-vue3";
 | inputSuffix | () => VNode[] | undefined | 输入框后缀插槽 |
 | TextEditor | Component \| null | null | 自定义文本编辑器组件配置 |
 
-
 ### 类型定义
 ``` typescript
 type BuiltInAction =
@@ -95,25 +92,21 @@ export interface MessageInputProps {
 
 - 详细说明：autoFocus 用于设置是否在组件挂载时自动聚焦到输入框，默认值为 `true`。
 
-
 ### disabled
 - 类型：boolean
 
 - 详细说明：disabled 用于设置是否禁用整个输入组件，包括文本输入和所有操作按钮，默认值为 `false`。
 
-
 ### hideSendButton
 - 类型：boolean
 
 - 详细说明：hideSendButton 用于设置是否隐藏发送按钮，适用于需要自定义发送触发方式的场景，默认值为 `false`。
 
-
 ### placeholder
 - 类型：string
 
 - 详细说明：placeholder 用于设置输入框的占位符文本，默认值为空字符串。
 
-
 ### attachmentPickerMode
 - 类型：'collapsed' | 'expanded'
 
@@ -123,13 +116,11 @@ export interface MessageInputProps {
 
   - **expanded**：展开模式，直接显示所有选项。
 
-
 ### actions
 - 类型：MessageInputActions
 
 - 详细说明：actions 用于配置工具栏中显示的操作按钮，默认值为 `['EmojiPicker', 'ImagePicker', 'FilePicker', 'VideoPicker']`。
 
-
 #### 示例1：自定义工具栏按钮顺序
 ``` typescript
 <template>
@@ -282,20 +273,17 @@ const actions = [
 </script>
 ```
 
-
 #### 示例4：自定义表情面板
 ``` typescript
 <template>
   <MessageInput :EmojiPicker="CustomEmojiPicker" />
 </template>
 
-
 <script lang="ts" setup>
 import { defineComponent, h, ref } from 'vue';
 import { MessageInput } from '@tencentcloud/uikit-component-vue3';
 import { useMessageInputState } from '@tencentcloud/uikit-component-vue3/src/states/MessageInputState';
 
-
 const CustomEmojiPicker = defineComponent({
   name: 'CustomEmojiPicker',
   setup() {
@@ -303,20 +291,17 @@ const CustomEmojiPicker = defineComponent({
     const showPicker = ref(false);
     const activeCategory = ref('common');
 
-
     const emojiCategories = {
       'common': ['😀', '😂', '🥰', '😍', '🤔', '😭', '😡', '👍'],
       'hand': ['👋', '🤝', '👏', '🙏', '✌️', '🤞', '🤟', '👌'],
       'animal': ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼'],
     };
 
-
     const insertEmoji = (emoji: string) => {
       insertContent(emoji);
       showPicker.value = false;
     };
 
-
     return () =>
       h('div', { style: { position: 'relative' } }, [
         h('button',
@@ -416,7 +401,6 @@ const CustomEmojiPicker = defineComponent({
    }
    ```
 
-
 #### 示例1：自定义 footerToolbar 插槽
 ``` typescript
 <template>
@@ -430,13 +414,12 @@ const CustomEmojiPicker = defineComponent({
 </template>
 ```
 
-
 #### 示例2：输入框前后缀功能
 ``` typescript
 <template>
   <MessageInput>
     <template #inputPrefix>
-      
+
     </template>
     <template #inputSuffix>
       <button
@@ -464,7 +447,6 @@ const handleVoiceInput = () => {
 </script>
 ```
 
-
 ### TextEditor
 
 类型：Component | null
@@ -481,13 +463,11 @@ const handleVoiceInput = () => {
   </MessageInput>
 </template>
 
-
 <script lang="ts" setup>
 import { defineComponent, h, ref, onMounted } from 'vue';
 import { MessageInput } from '@tencentcloud/uikit-component-vue3';
 import { useMessageInputState } from '@tencentcloud/uikit-component-vue3/src/states/MessageInputState';
 
-
 const RichTextEditor = defineComponent({
   name: 'RichTextEditor',
   setup() {
@@ -500,7 +480,6 @@ const RichTextEditor = defineComponent({
       inputRawValue.value = (e.target as HTMLDivElement).textContent || '';
     };
 
-
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Enter') {
         sendMessage(inputRawValue.value);
@@ -510,7 +489,6 @@ const RichTextEditor = defineComponent({
       }
     };
 
-
     onMounted(() => {
       if (editorRef.value) {
         editorRef.value.textContent = inputRawValue.value || '';

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

@@ -17,7 +17,6 @@ MessageList 组件是聊天界面的核心组件，负责展示消息列表并
 
 - 自定义渲染：支持自定义消息组件和时间分割线组件。
 
-
 ## 快速使用
 
 以下示例代码是 MessageList 最简单的用法。
@@ -31,7 +30,6 @@ MessageList 组件是聊天界面的核心组件，负责展示消息列表并
   </UIKitProvider>
 </template>
 
-
 <script lang="ts" setup>
 import { UIKitProvider, Chat, MessageList, MessageInput } from '@tencentcloud/chat-uikit-vue3';
 </script>
@@ -39,98 +37,24 @@ import { UIKitProvider, Chat, MessageList, MessageInput } from '@tencentcloud/ch
 ```
 
 > **说明：**
-> 
+>
 
 > 实践建议：
-> 
+>
 > 1. MessageList 组件需要放在 UIKitProvider、Chat 容器中使用。
 > 2. MessageList 建议和 MessageInput 组件搭配使用。
-> 3. MessageList 会默认读取当前激活的会话，如果您不集成 ConversationList 组件，请参考 [仅集成聊天](https://write.woa.com/document/181344022523346944) 文档。
-
+> 3. MessageList 会默认读取当前激活的会话，如果您不集成 ConversationList 组件，请参考 仅集成聊天 文档。
 
 ## Props 字段速查表
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >字段</td>
-
-<td rowspan="1" colSpan="1" >类型</td>
-
-<td rowspan="1" colSpan="1" >默认值</td>
-
-<td rowspan="1" colSpan="1" >描述</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[alignment](https://write.woa.com/#alignment)</td>
-
-<td rowspan="1" colSpan="1" >'left' \| 'right' \| 'two-sided'</td>
-
-<td rowspan="1" colSpan="1" >'two-sided'</td>
-
-<td rowspan="1" colSpan="1" >消息的对齐方式，支持左对齐、右对齐和双边对齐。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[messageAggregationTime](https://write.woa.com/#messageAggregationTime)</td>
-
-<td rowspan="1" colSpan="1" >number</td>
-
-<td rowspan="1" colSpan="1" >300 (秒)</td>
-
-<td rowspan="1" colSpan="1" >消息聚合的时间间隔（秒），在此时间内发送的同一发送者的消息会被聚合。设置为 0 可禁用消息聚合。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[enableReadReceipt](https://write.woa.com/#enableReadReceipt)</td>
-
-<td rowspan="1" colSpan="1" >boolean</td>
-
-<td rowspan="1" colSpan="1" >false</td>
-
-<td rowspan="1" colSpan="1" >是否启用消息已读回执功能。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[messageActionList](https://write.woa.com/#messageActionList)</td>
-
-<td rowspan="1" colSpan="1" >MessageAction[]</td>
-
-<td rowspan="1" colSpan="1" >undefined</td>
-
-<td rowspan="1" colSpan="1" >自定义消息操作列表，例如撤回、删除等。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[filter](https://write.woa.com/#filter)</td>
-
-<td rowspan="1" colSpan="1" >(message: MessageModel) => boolean</td>
-
-<td rowspan="1" colSpan="1" >undefined</td>
-
-<td rowspan="1" colSpan="1" >自定义消息过滤函数，用于控制哪些消息应该显示。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[Message](https://write.woa.com/#Message)</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >undefined</td>
-
-<td rowspan="1" colSpan="1" >自定义消息组件，用于渲染单条消息。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[MessageTimeDivider](https://write.woa.com/#MessageTimeDivider)</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >undefined</td>
-
-<td rowspan="1" colSpan="1" >自定义消息时间分割线组件。</td>
-</tr>
-</table>
-
+| 字段 | 类型 | 默认值 | 描述 |
+| --- | --- | --- | --- |
+| alignment | 'left' \\| 'right' \\| 'two-sided' | 'two-sided' | 消息的对齐方式，支持左对齐、右对齐和双边对齐。 |
+| messageAggregationTime | number | 300 (秒) | 消息聚合的时间间隔（秒），在此时间内发送的同一发送者的消息会被聚合。设置为 0 可禁用消息聚合。 |
+| enableReadReceipt | boolean | false | 是否启用消息已读回执功能。 |
+| messageActionList | MessageAction[] | undefined | 自定义消息操作列表，例如撤回、删除等。 |
+| filter | (message: MessageModel) => boolean | undefined | 自定义消息过滤函数，用于控制哪些消息应该显示。 |
+| Message | Component | undefined | 自定义消息组件，用于渲染单条消息。 |
+| MessageTimeDivider | Component | undefined | 自定义消息时间分割线组件。 |
 
 ## Props 详细介绍
 
@@ -139,34 +63,29 @@ import { UIKitProvider, Chat, MessageList, MessageInput } from '@tencentcloud/ch
 
 - 详细说明：消息在列表中的对齐方式。`'left'` 表示所有消息左对齐，`'right'` 表示所有消息右对齐，`'two-sided'` 表示发送方消息右对齐，接收方消息左对齐。默认值为 `'two-sided'`。
 
-
 ### messageAggregationTime
 - 类型：number
 
 - 详细说明：消息聚合的时间间隔，单位为秒。当同一发送者在指定时间间隔内连续发送多条消息时，这些消息将被聚合显示。设置为 `0` 或更小的值将禁用消息聚合功能，每条消息都会独立显示。默认值为 `300` (5分钟)。
 
-
 ### enableReadReceipt
 - 类型：boolean
 
 - 详细说明：是否启用消息的已读回执功能。当设置为 `true` 时，组件将尝试显示消息的已读状态。默认值为 `false`。
 
-
 ### messageActionList
 - 类型：MessageAction[]
 
 - 详细说明：用于定义在消息上可以执行的自定义操作列表，例如复制、撤回、转发、删除等。这是一个复杂类型，可以通过传入一个 `MessageAction` 对象数组来定制消息的操作行为。默认值为 `undefined`，组件内部会根据 `useMessageActions` 钩子提供默认的操作列表。
 
-
    目前默认的顺序是： `['copy', 'recall', 'quote', 'forward', 'delete']`。
 
-
    **MessageAction** 类型定义:
 
    ``` typescript
    import type { Component } from 'vue';
    import type { MessageModel } from '@tencentcloud/chat-uikit-vue3';
-   
+
    interface MessageAction {
      /** 唯一的操作标识符 */
      key: string;
@@ -189,7 +108,6 @@ import { UIKitProvider, Chat, MessageList, MessageInput } from '@tencentcloud/ch
 
    可以使用 `useMessageActions` 钩子获取完整的消息操作列表，然后根据需要进行自定义。`useMessageActions` 钩子接收一个可选参数，可以是一个包含操作键（`string`）或完整 `MessageAction` 对象的数组。如果传入 `string` 数组，则会使用默认操作的配置；如果传入 `MessageAction` 对象，则会合并并覆盖默认配置。
 
-
 #### 代码示例1：变更消息操作列表的顺序
 
 下面的代码将 `forward`操作放到消息操作列表的第一个。
@@ -207,9 +125,6 @@ const actions = useMessageActions(['forward', 'copy', 'recall', 'quote', 'delete
 
 示例效果：
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/8eaaf60188a811f0818a52540099c741.png)
-
-
 #### 代码示例2：仅展示部分消息操作
 
 仅展示 `copy`、`recall` 操作，其他操作隐藏。
@@ -227,9 +142,6 @@ const actions = useMessageActions(['copy', 'recall']);
 
 示例效果：
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/d481cee988a811f0b321525400e889b2.png)
-
-
 #### 代码示例3：自定义消息操作的样式和逻辑
 
 下面是一个自定义转发操作的示例：
@@ -243,10 +155,10 @@ const actions = useMessageActions(['copy', 'recall']);
    <template>
      <MessageList :messageActionList="actions" />
    </template>
-   
+
    <script lang="ts" setup>
    import { MessageList, useMessageActions } from '@tencentcloud/chat-uikit-vue3';
-   
+
    const actions = useMessageActions(['copy', {
      key: 'forward',
      label: 'Forward ⚠️',
@@ -260,9 +172,6 @@ const actions = useMessageActions(['copy', 'recall']);
 
    示例效果：
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/9aa48621824811f0b1df52540044a08e.png)
-
-
 #### 代码示例4：新增自定义消息操作
 
 假设需要自定义消息操作，例如仅其他人发送的消息可以标记'喜欢'，且插入在'撤回'操作之后。
@@ -291,15 +200,11 @@ const actions = useMessageActions(['forward', 'copy', 'recall', customLikeAction
 
 示例效果：
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/9f5aa2e4824b11f0a8ae5254005ef0f7.png)
-
-
 ### filter
 - type：((message: MessageModel) => boolean) | undefined
 
 - 详细说明：一个自定义的过滤函数，用于在消息列表渲染之前对消息进行筛选。该函数接收一个 `MessageModel` 类型的消息对象，并返回一个布尔值。如果返回 `true`，则消息会显示；如果返回 `false`，则消息不会显示。默认值为 `undefined`，表示不进行额外过滤（但组件内部会默认过滤掉 `isDeleted` 为 `true` 的消息）。
 
-
 #### 代码示例：过滤掉机器人发送的文本消息
 
 这个示例展示了如何使用 `filter` prop 来过滤掉某些用户发送的特定消息。
@@ -315,7 +220,7 @@ import type { MessageModel } from '@tencentcloud/chat-uikit-vue3';
 // 定义自定义消息过滤函数
 const customMessageFilter = (message: MessageModel): boolean => {
   if (
-    message.nick?.includes('_robot') 
+    message.nick?.includes('_robot')
     && message.type === MessageType.TEXT as any
   ) {
     return false;
@@ -330,10 +235,8 @@ const customMessageFilter = (message: MessageModel): boolean => {
 
 - 详细说明：用于自定义渲染消息列表中的单个消息组件。
 
-
    如果您需要完全控制消息的显示样式和内部逻辑，可以传入一个 Vue 组件来替代默认的消息渲染。自定义组件将接收 `message` (IMessageModel 类型)、`alignment`、`messageActionList` 等 props。默认值会使用内部的默认消息组件 `Message`。
 
-
 #### 代码示例：自定义 CUSTOM 消息点击跳转的消息组件
 
 这个示例展示了如何创建一个自定义消息组件，用于渲染特定 `CUSTOM` 消息（`businessID` 为 `text_link`）为可点击跳转的链接。
@@ -394,20 +297,13 @@ const CustomMessage = defineComponent({
 
 示例效果：
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/abd6f2ea825411f0b1df52540044a08e.png)
-
-
 ### MessageTimeDivider
 - 类型：Component | undefined
 
 - 详细说明：用于自定义渲染时间分割线组件。
 
-
    您可以传入一个 Vue 组件来替代默认的时间分割线渲染。自定义组件将接收 `currentMessage` (当前时间分割线关联的消息)、`previousMessage` (上一条消息) 等 props，可以根据这些信息决定时间分割线的显示逻辑和样式。默认值会使用内部的默认时间分割线组件 `MessageTimeDivider`。
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/4d5e72b688ae11f0974b52540044a08e.png)
-
-
 #### 代码示例：自定义时间分割线组件，根据时间展示是否为上班时间
 
 这个示例展示了如何创建一个自定义时间分隔线组件，根据消息时间判断是否为工作时间，并显示相应的标签和颜色。
@@ -479,9 +375,6 @@ const BusinessTimeDivider = defineComponent({
 
 示例效果：
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/1de6fe94825711f0a8ae5254005ef0f7.png)
-
-
 ## 扩展资料
 
 `MessageModel` 类型常用字段：
@@ -523,26 +416,22 @@ enum MessageType {
 MessageModel 的完整内容请参见：[TUIChatEngine 参考文档](https://web.sdk.qcloud.com/im/doc/chat-engine/IMessageModel.html)。
 
 ## 相关文档
-- [自定义组件 - 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
 
-- [自定义组件 - ChatSetting](https://write.woa.com/document/187321409859108864)
+- 自定义组件 - ChatSetting
 
-- [自定义组件 - 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#/) 反馈，享有专业工程师的支持，解决您的难题。
-