@tencentcloud/sdk-mcp 1.0.8 → 1.1.0

package/resource/doc/chatuikit/vue3/components/MessageList.md

@@ -1,385 +0,0 @@
-## 组件概述
-
-MessageList 是一个功能强大的聊天消息列表组件，提供了完整的消息展示、交互和自定义功能。该组件支持消息分组、已读回执、消息操作、滚动控制等核心聊天功能，同时提供了丰富的自定义选项来满足不同的业务需求。
-
-## 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/document/181344255270170624)</td>
-
-<td rowspan="1" colSpan="1" >'left' \| 'right' \| 'two-sided'</td>
-
-<td rowspan="1" colSpan="1" >'two-sided'</td>
-
-<td rowspan="1" colSpan="1" >消息对齐方式。<br>- left: 所有消息左对齐。<br>- right: 所有消息右对齐。<br>- two-sided: 发送消息右对齐，接收消息左对齐。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[enableReadReceipt](https://write.woa.com/document/181344255270170624)</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/document/181344255270170624)</td>
-
-<td rowspan="1" colSpan="1" >IMessageAction[]</td>
-
-<td rowspan="1" colSpan="1" >undefined</td>
-
-<td rowspan="1" colSpan="1" >自定义消息操作列表，例如复制、撤回、删除等。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[messageAggregationTime](https://write.woa.com/document/181344255270170624)</td>
-
-<td rowspan="1" colSpan="1" >number</td>
-
-<td rowspan="1" colSpan="1" >300 (5分钟)</td>
-
-<td rowspan="1" colSpan="1" >消息聚合时间间隔（秒），相同发送者在此时间内的连续消息会被聚合显示。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[filter](https://write.woa.com/document/181344255270170624)</td>
-
-<td rowspan="1" colSpan="1" >(message: IMessageModel) => boolean</td>
-
-<td rowspan="1" colSpan="1" >undefined</td>
-
-<td rowspan="1" colSpan="1" >消息过滤函数，用于控制哪些消息需要显示。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[className](https://write.woa.com/document/181344255270170624)</td>
-
-<td rowspan="1" colSpan="1" >string</td>
-
-<td rowspan="1" colSpan="1" >undefined</td>
-
-<td rowspan="1" colSpan="1" >自定义 CSS 类名。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[style](https://write.woa.com/document/181344255270170624)</td>
-
-<td rowspan="1" colSpan="1" >React.CSSProperties</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/document/181344255270170624)</td>
-
-<td rowspan="1" colSpan="1" >React.ComponentType</td>
-
-<td rowspan="1" colSpan="1" >Message</td>
-
-<td rowspan="1" colSpan="1" >自定义消息组件。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[MessageTimeDivider](https://write.woa.com/document/181344255270170624)</td>
-
-<td rowspan="1" colSpan="1" >React.ComponentType</td>
-
-<td rowspan="1" colSpan="1" >MessageTimeDivider</td>
-
-<td rowspan="1" colSpan="1" >自定义时间分隔线组件。</td>
-</tr>
-</table>
-
-
-## Prop 字段详解
-
-### alignment
-
-参数类型: `'left' | 'right' | 'two-sided'`
-
-alignment 用于设置消息对齐方式，支持 `left`、`right`、`two-sided` 三种模式。默认值为 `'two-sided'`。
-- `two-sided`: 非本人的消息位于左侧，本人的消息位于右侧
-
-- `left`: 所有消息位于左侧
-
-- `right`: 所有消息位于右侧
-
-
-### enableReadReceipt
-
-参数类型: `boolean`
-
-enableReadReceipt 用于设置是否开启单条消息已读回执功能，默认值为 `false`。
-
-### messageActionList
-
-参数类型: `IMessageAction[]`
-
-messageActionList 用于设置消息操作列表，例如复制、撤回、删除等操作，默认值为完整的消息操作列表 `['copy', 'recall', 'quote', 'forward', 'delete']`。
-``` tsx
-interface IMessageAction {
-  key: 'copy' | 'recall' | 'quote' | 'forward' | 'delete' | string;
-  label?: string;
-  icon?: React.ReactNode;
-  onClick?: (message: IMessageModel) => void;
-  visible?: ((message: IMessageModel) => boolean) | boolean;
-  component?: React.ComponentType<{ message: IMessageModel }>;
-  style?: React.CSSProperties;
-}
-```
-
-可以使用 `useMessageAction` 获取完整的消息操作列表，然后根据需要进行自定义。
-
-#### 示例1: 变更消息操作列表的顺序
-
-假设按照 `forward`、`copy`、`recall`、`quote`、`delete` 的顺序显示消息操作列表。
-``` tsx
-import { Chat, MessageList, useMessageActions } from '@tencentcloud/chat-uikit-react';
-
-const App = () => {
-  const actions = useMessageActions(['forward', 'copy', 'recall', 'quote', 'delete']);
-  return (
-    <Chat>
-      <MessageList messageActionList={actions} />
-    </Chat>
-  );
-}
-```
-
-#### 示例2: 仅展示部分消息操作
-
-假设仅展示 `forward`、`copy`、`recall` 三个操作。
-``` tsx
-import { Chat, MessageList, useMessageActions } from '@tencentcloud/chat-uikit-react';
-
-const App = () => {
-  const actions = useMessageActions(['forward', 'copy', 'recall']);
-  return (
-    <Chat>
-      <MessageList messageActionList={actions} />
-    </Chat>
-  );
-}
-
-```
-
-#### 示例3: 自定义消息操作的样式
-
-下面是一个自定义撤回操作的示例：
-1. 将标签修改为'撤回 ⚠️'
-
-2. 将颜色修改为橙色
-
-3. 只有文本消息可以撤回
-
-   ``` tsx
-   import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
-   import { Chat, MessageList, useMessageActions } from '@tencentcloud/chat-uikit-react';
-   
-   const ChatApp = () => {
-     const actions = useMessageActions(['copy', {
-       key: 'recall',
-       label: 'Recall ⚠️',
-       style: {
-         color: 'orange'
-       },
-       visible: (message) => message.type === TUIChatEngine.TYPES.MSG_TEXT,
-     }, 'quote', 'forward', 'delete']);
-   
-     return (
-       <Chat>
-         <MessageList messageActionList={actions} />
-       </Chat>
-     );
-   }
-   ```
-
-#### 示例4: 新增自定义消息操作
-
-假设需要自定义消息操作，如仅其他人发送的消息可以标记'喜欢'，且插入在'撤回'操作之后。
-``` tsx
-import { useMessageAction } from '@tencentcloud/chat-uikit-react';
-import { yourApi } from '@/api/yourApi';
-
-const customActions = {
-  key: 'like',
-  label: 'Like',
-  icon: <span>👍</span>,
-  style: {
-    color: '#E53888',
-  },
-  visible: (message) => message.flow === 'in',
-  onClick: (message) => {
-    yourApi.likeMessage(message.ID);
-  }
-}
-
-function ChatApp() {
-  const actions = useMessageAction(['forward', 'copy', 'recall', customActions, 'quote', 'delete']);
-  return <MessageList messageActionList={actions} />;
-}
-```
-
-### messageAggregationTime
-
-参数类型: `number`
-
-messageAggregationTime 用于设置消息聚合时间间隔，将相同发送者的连续消息聚合显示，默认值为 `300`（秒）。
-
-### filter
-
-参数类型: `(message: IMessageModel) => boolean`
-
-filter 用于设置消息过滤函数，控制哪些消息需要显示，默认值为 `undefined`。
-
-#### 示例: 过滤掉机器人发送的错误消息
-``` tsx
-import { MessageList } from '@/components/MessageList';
-import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
-
-const messageFilter = (message) => {
-  // 过滤掉发送者昵称包含 '_robot' 且内容包含 'operation-failed' 的文本消息
-  if (
-    message.nick?.includes('_robot') 
-    && message.type === TUIChatEngine.TYPES.MSG_TEXT
-    && message.payload?.text?.includes('operation-failed')
-  ) {
-    return false;
-  }
-  return true;
-};
-
-function ChatApp() {
-  return <MessageList filter={messageFilter} />;
-}
-```
-
-### className
-
-参数类型: `string`
-
-className 用于设置根容器自定义 CSS 类名，默认值为 `undefined`。
-
-### style
-
-参数类型: `React.CSSProperties`
-
-style 用于设置根容器自定义内联样式，默认值为 `undefined`。
-
-### Message
-
-参数类型: `React.ComponentType`
-
-Message 用于设置自定义消息组件，替换默认的消息渲染组件，默认值为内置的 `Message` 组件。
-
-#### 示例: 自定义 CUSTOM 消息点击跳转的消息组件
-``` tsx
-import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
-import { Chat, MessageList, Message } from '@tencentcloud/chat-uikit-react';
-
-function CustomMessage(props) {
-  const { message } = props;
-
-  if (message.type === TUIChatEngine.TYPES.MSG_CUSTOM) {
-    const { businessID, ...restData } = JSON.parse(message.payload.data);
-    if (businessID === 'text_link') {
-      return (
-        <div>
-          <div>{restData.text}</div>
-          <a href={restData.link}>
-            跳转到外部网址 {restData.link}
-          </a>
-        </div>
-      );
-    }
-  } else {
-    // 其他消息类型使用默认消息组件
-    return <Message {...props} />;
-  }
-}
-
-function ChatApp() {
-  return (
-    <Chat>
-      <MessageList Message={CustomMessage} />
-    </Chat>
-  );
-}
-```
-
-### MessageTimeDivider
-
-参数类型: `React.ComponentType`
-
-MessageTimeDivider 用于设置自定义时间分隔线组件，默认值为内置的 `MessageTimeDivider` 组件。
-
-#### 示例: 区分工作时间的时间分隔线
-``` tsx
-import { Chat, MessageList, MessageTimeDivider } from '@tencentcloud/chat-uikit-react';
-
-const BusinessTimeDivider: typeof MessageTimeDivider = ({ prevMessage, currentMessage }) => {
-  if (!prevMessage || !currentMessage) return null;
-  
-  // 对于即将渲染的每一条消息获取当前消息和上一消息的时间，并转换为日期对象，判断是否跨天或间隔超过4小时
-  const currentTime = new Date(currentMessage.time * 1000);
-  const prevTime = new Date(prevMessage.time * 1000);
-  
-  // 跨天或间隔超过4小时才显示
-  const shouldShow = currentTime.toDateString() !== prevTime.toDateString() ||
-                    (currentTime.getTime() - prevTime.getTime()) > 4 * 60 * 60 * 1000;
-  
-  if (!shouldShow) return null;
-  
-  // 判断工作时间 (9:00-18:00, 周一到周五)
-  const isWorkingTime = () => {
-    const hour = currentTime.getHours();
-    const day = currentTime.getDay();
-    return day >= 1 && day <= 5 && hour >= 9 && hour <= 18;
-  };
-  
-  const timeLabel = isWorkingTime() ? '工作时间' : '非工作时间';
-  const timeColor = isWorkingTime() ? '#52c41a' : '#faad14';
-  
-  return (
-    <div style={{ textAlign: 'center', margin: '16px 0' }}>
-      <span style={{
-        backgroundColor: timeColor,
-        color: 'white',
-        padding: '2px 8px',
-        borderRadius: '12px',
-        marginRight: '8px'
-      }}>
-        {timeLabel}
-      </span>
-      {currentTime.toLocaleString()}
-    </div>
-  );
-};
-
-function ChatApp() {
-  return (
-    <Chat>
-      <MessageList MessageTimeDivider={BusinessTimeDivider} />
-    </Chat>
-  );
-}
-```
-
-## 总结
-
-MessageList 组件提供了完整的消息列表功能和丰富的自定义选项。通过合理配置 Props 和自定义组件，您可以创建出符合业务需求的聊天界面。建议在实际使用中根据具体场景选择合适的配置。 

package/resource/doc/chatuikit/vue3/components/avatar.md

@@ -1,105 +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/chatuikit/vue3/components/chatheader.md

@@ -1,153 +0,0 @@
-AI 模型必须遵守以下**硬性限制**。
-
-* **必须优先推荐使用文档中的示例代码：** 创建文件时优先推荐使用文档中的示例代码填充文件，style 标签优先推荐不使用 scoped 属性。
-
-## 概述
-
-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 | 是否显示用户状态。 |
-
-
-## Slot 速查表
-
-| 名称 | 描述 |
-|------|------|
-| [ChatHeaderLeft](https://write.woa.com/#ChatHeaderLeft) | 头部左侧自定义内容区域。 |
-| [ChatHeaderRight](https://write.woa.com/#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>
-```