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

package/resource/{doc/chatkit/vue/components → knowledge/chat/preset/vue/features}/conversation-list.md

@@ -1,10 +1,11 @@
-AI 模型必须遵守以下**硬性限制**。
-1. **未读数计算：** 获取消息未读总数时可以用 useConversationListState 提供的 `totalUnRead` 字段。
-
 ## 组件概述
 
 ConversationList 组件负责渲染会话列表，包含搜索、创建、置顶和删除等功能。
 
+|**会话列表**|**会话操作**|**创建会话**|
+|---------|---------|---------|
+||||
+
 ## 组件构成
 
 ConversationList 组件包含以下内容：
@@ -34,7 +35,7 @@ import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-vue3';
 
 ConversationList 为用户自定义提供了丰富且多维度的 Props 接口，允许用户自定义功能、UI、模块等。
 
-ConversationList 组件提供了多个可替换的子组件，允许用户自定义 **Header**、**List**、**ConversationPreview**、**ConversationCreate**、**ConversationSearch**、**ConversationActions**、**Avatar**、**Placeholder** 等。同时，用户还可以利用默认子组件进行二次开发定制。
+ConversationList 组件提供了多个可替换的子组件，允许用户自定义 **Header**、**List**、**ConversationPreview**、**ConversationCreate**、**ConversationSearch**、**ConversationActions**、**Avatar**、**Placeholder **等。同时，用户还可以利用默认子组件进行二次开发定制。
 
 ### 功能开关
 
@@ -48,7 +49,7 @@ ConversationList 组件提供了多个可替换的子组件，允许用户自定
 ``` typescript
 <ConversationList :enableActions="false" />
 ```
-| `enableSearch="false"` | `enableCreate="false"` | `enableActions="false"` |
+| <code>enableSearch="false"</code> | <code>enableCreate="false"</code> | <code>enableActions="false"</code> |
 | --- | --- | --- |
 |  |  |  |
 
@@ -65,13 +66,13 @@ ConversationList 组件提供了 `filter` 和 `sort` 属性，用于对会话列
 <template>
   <UIKitProvider>
     <ConversationList
-      :filter="(conversationList: ConversationModel[]) =>
+      :filter="(conversationList: ConversationInfo[]) =>
         conversationList.filter(conversation => conversation.unreadCount > 0)" />
   </UIKitProvider>
 </template>
 <script setup lang="ts">
 import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-vue3';
-import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
+import type { ConversationInfo } from '@tencentcloud/chat-uikit-vue3';
 </script>
 ```
 
@@ -84,15 +85,19 @@ import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
 <template>
   <UIKitProvider>
     <ConversationList
-      :sort="(conversationList: ConversationModel[]) =>
-        conversationList.sort(
-        (a, b) => (+(b?.lastMessage?.lastTime || 0)) - (+(a?.lastMessage?.lastTime || 0)),
-        )" />
+      :sort="(conversationList: ConversationInfo[]) =>
+      (a, b) => {
+            const timeA = a.lastMessage?.timestamp?.getTime() || 0;
+            const timeB = b.lastMessage?.timestamp?.getTime() || 0;
+            return timeB - timeA;
+          },
+      "
+    />
   </UIKitProvider>
 </template>
 <script setup lang="ts">
 import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-vue3';
-import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
+import type { ConversationInfo } from '@tencentcloud/chat-uikit-vue3';
 </script>
 ```
 
@@ -105,12 +110,12 @@ import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
     <ConversationList
       :actionsConfig="{
         enablePin: false,
-        onConversationDelete: (conversation: ConversationModel) =>
+        onConversationDelete: (conversation: ConversationInfo) =>
         { console.log('Delete conversation success'); },
         customConversationActions: {
           'custom-actions-1': {
             label: 'custom-actions',
-            onClick: (conversation: ConversationModel) => { console.log(conversation); },
+            onClick: (conversation: ConversationInfo) => { console.log(conversation); },
           },
         },
      }"/>
@@ -118,9 +123,12 @@ import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
 </template>
 <script setup lang="ts">
 import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-vue3';
-import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
+import type { ConversationInfo } from '@tencentcloud/chat-uikit-vue3';
 </script>
 ```
+| <code>enablePin: false</code> | <code>enableDelete: false</code> | <code>enableMute: false</code> | <code>customConversationActions</code> |
+| --- | --- | --- | --- |
+|  |  |  |  |
 
 ### 自定义 Placeholder
 
@@ -162,9 +170,9 @@ import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
 **ConversationListHeader** 负责 ConversationList Header 部分的渲染工作，作为包裹层渲染默认 `Search` 与 `ConversationCreate` 。您可以通过传入 `left`、`right` 等属性进行自定义，同时，您也可以自定义整个组件。
 
 #### Props
-| **参数名** | **类型** | **默认值** | **说明** |
+| <strong>参数名</strong> | <strong>类型</strong> | <strong>默认值</strong> | <strong>说明</strong> |
 | --- | --- | --- | --- |
-| children | Component | - | 自定义会话列表头部中心组件。<br>默认传入 `<Search>` 和 `<ConversationCreate>`。 |
+| children | Component | - | 自定义会话列表头部中心组件。<br>默认传入 <code><Search></code> 和 <code><ConversationCreate></code>。 |
 | left | Component | - | 自定义会话列表头部左侧组件。 |
 | right | Component | - | 自定义会话列表头部右侧组件。 |
 | className | String | - | 指定根元素类的 CSS 自定义名称。 |
@@ -185,10 +193,10 @@ import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
 </template>
 <script setup lang="ts">
 import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-vue3';
-import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
+import type { ConversationInfo } from '@tencentcloud/chat-uikit-vue3';
 import CustomConversationListHeader from "./CustomConversationListHeader.vue";
-const conversationFilter = ref<((conversations: ConversationModel[]) => ConversationModel[]) | undefined>(undefined);
-const handleFilterChange = (filter: (conversations: ConversationModel[]) => ConversationModel[]) => {
+const conversationFilter = ref<((conversations: ConversationInfo[]) => ConversationModel[]) | undefined>(undefined);
+const handleFilterChange = (filter: (conversations: ConversationInfo[]) => ConversationModel[]) => {
   conversationFilter.value = filter;
 };
 provide('setConversationFilter', handleFilterChange);
@@ -217,7 +225,7 @@ provide('setConversationFilter', handleFilterChange);
 
 <script lang="ts" setup>
 import { ref, inject } from 'vue';
-import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
+import type { ConversationInfo } from '@tencentcloud/chat-uikit-vue3';
 
 type FilterType = 'All' | 'Unread' | 'C2C' | 'Group';
 
@@ -236,11 +244,11 @@ const filterLabels: Record<FilterType, string> = {
   Group: '群聊',
 };
 
-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 === 'C2C'),
-  Group: (conversationList: ConversationModel[]) => conversationList?.filter((item: ConversationModel) => item.type === 'GROUP'),
+const conversationGroupFilter: Record<string, (conversationList: ConversationInfo[]) => ConversationModel[]> = {
+  All: (conversationList: ConversationInfo[]) => conversationList,
+  Unread: (conversationList: ConversationInfo[]) => conversationList?.filter((item: ConversationModel) => item.unreadCount > 0),
+  C2C: (conversationList: ConversationInfo[]) => conversationList?.filter((item: ConversationModel) => item.type === 'C2C'),
+  Group: (conversationList: ConversationInfo[]) => conversationList?.filter((item: ConversationModel) => item.type === 'GROUP'),
 };
 
 const setFilter = inject<(filter: any) => void>('setConversationFilter');
@@ -292,28 +300,32 @@ const handleFilterClick = (filterType: FilterType) => {
 </style>
 
 ```
+| <strong>修改前</strong> | <strong>修改后</strong> |
+| --- | --- |
+|  |  |
 
 ## Props
-| **参数名** | **类型** | **默认值** | **说明** |
-| --- | --- | --- | --- |
-| enableSearch | Boolean | true | 控制会话搜索功能是否显示。 |
-| enableCreate | Boolean | true | 控制创建会话功能是否显示。 |
-| enableActions | Boolean | true | 控制会话操作功能是否显示。 |
-| actionsConfig | ConversationActionsConfig | - | 用于自定义会话操作配置。 |
-| Header | Component | Header | 自定义 Header 组件。 |
-| List | Component | List | 自定义会话列表组件。 |
-| Preview | Component | ConversationPreview | 自定义会话预览组件。 |
-| ConversationCreate | Component | ConversationCreate | 自定义创建会话组件。 |
-| ConversationSearch | Component | Search | 自定义会话搜索组件。 |
-| ConversationActions | Component | ConversationActions | 自定义会话操作组件。 |
-| Avatar | Component | Avatar | 自定义头像组件。 |
-| PlaceholderEmptyList | Component |  | 自定义会话列表为空时的占位元素。 |
-| PlaceholderLoading | Component |  | 自定义会话列表加载中的占位元素。 |
-| PlaceholderLoadError | Component |  | 自定义会话列表加载错误时的占位元素。 |
-| filter | (conversationList: ConversationModel[]) => ConversationModel[] | - | 用于筛选会话列表的函数。 |
-| sort | (conversationList: ConversationModel[]) => ConversationModel[] | - | 用于排序会话列表的函数。 |
-| onConversationSelect | (conversation: ConversationModel) => void; | - | 点击会话后的回调函数，参数为所点击的会话对象。 |
-| onBeforeCreateConversation | (params: CreateParams) => CreateParams; | - | 创建会话前执行的自定义操作，参数为创建会话所需的参数。 |
-| onConversationCreate | (conversation: ConversationModel)  => void; | - | 会话创建后的回调函数，参数为创建的会话对象。 |
-| className | String | - | 指定根元素类的 CSS 自定义名称。 |
-| style | CSSProperties | - | 指定根元素样式的自定义样式。 |
+
+|**参数名**|**类型**|**默认值**|**说明**|
+|---------|---------|---------|---------|
+|enableSearch|Boolean|true|控制会话搜索功能是否显示。|
+|enableCreate|Boolean|true|控制创建会话功能是否显示。|
+|enableActions|Boolean|true|控制会话操作功能是否显示。|
+|actionsConfig|ConversationActionsConfig|-|用于自定义会话操作配置。|
+|Header|Component|Header|自定义 Header 组件。|
+|List|Component|List|自定义会话列表组件。|
+|Preview|Component|ConversationPreview|自定义会话预览组件。|
+|ConversationCreate|Component|ConversationCreate|自定义创建会话组件。|
+|ConversationSearch|Component|Search|自定义会话搜索组件。|
+|ConversationActions|Component|ConversationActions|自定义会话操作组件。|
+|Avatar|Component|Avatar|自定义头像组件。|
+|PlaceholderEmptyList|Component|<PlaceHolder type={PlaceHolderTypes.NO_CONVERSATIONS} />|自定义会话列表为空时的占位元素。|
+|PlaceholderLoading|Component|<PlaceHolder type={PlaceHolderTypes.LOADING} />|自定义会话列表加载中的占位元素。|
+|PlaceholderLoadError|Component|<PlaceHolder type={PlaceHolderTypes.WRONG} />|自定义会话列表加载错误时的占位元素。|
+|filter|(conversationList: ConversationInfo[]) => ConversationInfo[]|-|用于筛选会话列表的函数。|
+|sort|(conversationList: ConversationModel[]) => ConversationModel[]|-|用于排序会话列表的函数。|
+|onConversationSelect|(conversation: ConversationInfo) => void;|-|点击会话后的回调函数，参数为所点击的会话对象。|
+|onBeforeCreateConversation|(params: CreateParams) => CreateParams;|-|创建会话前执行的自定义操作，参数为创建会话所需的参数。|
+|onConversationCreate|(conversation: ConversationInfo)  => void;|-|会话创建后的回调函数，参数为创建的会话对象。|
+|className|String|-|指定根元素类的 CSS 自定义名称。|
+|style|CSSProperties|-|指定根元素样式的自定义样式。|

package/resource/{doc/chatkit/vue/components → knowledge/chat/preset/vue/features}/conversation-preview.md

@@ -12,16 +12,16 @@ ConversationPreview 组件用于预览会话列表中的单个会话。它负责
   <div class="custom-preview">
     <div class="content">
       <h4>Custom Preview</h4>
-      <p>{{ conversation?.getShowName() }}</p>
+      <p>{{ conversation?.title }}</p>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
+import type { ConversationInfo } from '@tencentcloud/chat-uikit-vue3';
 
 interface Props {
-  conversation?: ConversationModel;
+  conversation?: ConversationInfo;
 }
 
 const props = withDefaults(defineProps<Props>(), {});
@@ -41,40 +41,43 @@ import CustomConversationPreview from './CustomConversationPreview.vue';
 ## Props
 
 ### ConversationPreviewProps
-| 参数名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| **conversation***(Required)* | ConversationModel | - | 必选参数，标识当前渲染的会话列表项 |
-| isSelected | boolean | false | 控制会话列表项 UI 是否处于选中状态 |
-| enableActions | boolean | true | 控制会话操作功能是否显示 |
-| actionsConfig | ConversationActionsConfig | - | 用于自定义会话操作配置 |
-| highlightMatchString | string | - | 会话列表项 Title 高亮匹配关键词，常用于会话搜索结果高亮 |
-| Preview | Component | ConversationPreviewUI | 自定义预览组件 |
-| Avatar | Component | Avatar | 渲染会话列表项头像区域 |
-| ConversationActions | Component | ConversationActions | 渲染会话列表项会话操作区域 |
-| className | string | - | 指定根元素类的 CSS 自定义名称 |
-| style | CSSProperties | - | 指定根元素样式的自定义样式 |
+
+|参数名|类型|默认值|说明|
+|---------|---------|---------|---------|
+|**conversation***(Required)*|ConversationInfo|-|必选参数，标识当前渲染的会话列表项|
+|isSelected|boolean|false|控制会话列表项 UI 是否处于选中状态|
+|enableActions|boolean|true|控制会话操作功能是否显示|
+|actionsConfig|ConversationActionsConfig|-|用于自定义会话操作配置|
+|highlightMatchString|string|-|会话列表项 Title 高亮匹配关键词，常用于会话搜索结果高亮|
+|Preview|Component|ConversationPreviewUI|自定义预览组件|
+|Avatar|Component|Avatar|渲染会话列表项头像区域|
+|ConversationActions|Component|ConversationActions|渲染会话列表项会话操作区域|
+|className|string|-|指定根元素类的 CSS 自定义名称|
+|style|CSSProperties|-|指定根元素样式的自定义样式|
 
 ### ConversationPreviewUIProps
-| 参数名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| **conversation***(Required)* | ConversationModel | - | 必选参数，标识当前渲染的会话列表项 |
-| isSelected | boolean | false | 控制会话列表项 UI 是否处于选中状态 |
-| enableActions | boolean | true | 控制会话操作功能是否显示 |
-| actionsConfig | ConversationActionsConfig | - | 用于自定义会话操作配置 |
-| highlightMatchString | string | - | 会话列表项 Title 高亮匹配关键词 |
-| Title | Component | ConversationPreviewTitle | 渲染会话列表项标题区域 |
-| LastMessageAbstract | Component | ConversationPreviewAbstract | 渲染会话列表项最新消息摘要区域 |
-| LastMessageTimestamp | Component | ConversationPreviewTimestamp | 渲染会话列表项最新消息时间戳区域 |
-| Unread | Component | ConversationPreviewUnread | 渲染会话列表项消息未读标识区域 |
-| ConversationActions | Component | ConversationActions | 渲染会话列表项会话操作区域 |
-| Avatar | Component | Avatar | 渲染会话列表项头像区域 |
-| className | string | - | 指定根元素类的 CSS 自定义名称 |
-| style | CSSProperties | - | 指定根元素样式的自定义样式 |
+
+|参数名|类型|默认值|说明|
+|---------|---------|---------|---------|
+|**conversation***(Required)*|ConversationInfo|-|必选参数，标识当前渲染的会话列表项|
+|isSelected|boolean|false|控制会话列表项 UI 是否处于选中状态|
+|enableActions|boolean|true|控制会话操作功能是否显示|
+|actionsConfig|ConversationActionsConfig|-|用于自定义会话操作配置|
+|highlightMatchString|string|-|会话列表项 Title 高亮匹配关键词|
+|Title|Component|ConversationPreviewTitle|渲染会话列表项标题区域|
+|LastMessageAbstract|Component|ConversationPreviewAbstract|渲染会话列表项最新消息摘要区域|
+|LastMessageTimestamp|Component|ConversationPreviewTimestamp|渲染会话列表项最新消息时间戳区域|
+|Unread|Component|ConversationPreviewUnread|渲染会话列表项消息未读标识区域|
+|ConversationActions|Component|ConversationActions|渲染会话列表项会话操作区域|
+|Avatar|Component|Avatar|渲染会话列表项头像区域|
+|className|string|-|指定根元素类的 CSS 自定义名称|
+|style|CSSProperties|-|指定根元素样式的自定义样式|
 
 ## Events
-| 事件名 | 参数 | 说明 |
-| --- | --- | --- |
-| select-conversation | (conversation: ConversationModel) | 指定在选择对话列表中的对话时接收回调的事件 |
+
+|事件名|参数|说明|
+|---------|---------|---------|
+|select-conversation|(conversation: ConversationModel)|指定在选择对话列表中的对话时接收回调的事件|
 
 ## 示例：自定义类 Discord 风格
 
@@ -95,22 +98,22 @@ Discord 是一个流行的聊天应用程序，类似于 Skype 或 Telegram。Di
     <label class="discord-preview-ui__tag">
       #
     </label>
-    <span class="discord-preview-ui__title">{{ conversation?.getShowName() }}</span>
+    <span class="discord-preview-ui__title">{{ conversation?.title }}</span>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useConversationListState } from '@tencentcloud/chat-uikit-vue3';
-import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
+import { useChatContext } from '@tencentcloud/chat-uikit-vue3';
+import type { ConversationInfo } from '@tencentcloud/chat-uikit-vue3';
 
-const { setActiveConversation, activeConversation } = useConversationListState();
+const { setActiveConversation, activeConversation } = useChatContext();
 
 interface Props {
-  conversation: ConversationModel;
+  conversation: ConversationInfo;
 }
 
 const emit = defineEmits<{
-  selectConversation: [conversation: ConversationModel];
+  selectConversation: [conversation: ConversationInfo];
 }>();
 
 const props = withDefaults(defineProps<Props>(), {});
@@ -208,6 +211,6 @@ import CustomConversationPreview from './CustomConversationPreview.vue';
 ```
 
 `ConversationListPreview` 定制后效果如下：
-| **修改前** | **修改后** |
+| <strong>修改前</strong> | <strong>修改后</strong> |
 | --- | --- |
 |  |  |

package/resource/{doc/chatkit/vue/components → knowledge/chat/preset/vue/features}/conversation-search.md

@@ -28,7 +28,7 @@ import CustomConversationSearch from "./CustomConversationSearch.vue";
 ```
 
 ## Props
-| **参数名** | **类型** | **默认值** | **说明** |
+| <strong>参数名</strong> | <strong>类型</strong> | <strong>默认值</strong> | <strong>说明</strong> |
 | --- | --- | --- | --- |
 | visible | boolean | true | 是否可见 |
 | Search | ComponentType<SearchProps> | - | 自定义搜索组件 |