@tencentcloud/sdk-mcp 1.0.6 → 1.0.8

package/resource/doc/chatuikit/react/components/chatheader.md

@@ -0,0 +1,153 @@
+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-react';
+
+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/chatuikit/react/components/component-list.md

@@ -0,0 +1,36 @@
+# atomicx 组件库清单与组件的适用场景与注意事项
+
+## 组件清单
+
+共 25 个组件:
+
+### 适用于聊天场景的组件
+
+1. ConversationList
+  会话列表组件，适用于聊天场景，以纵向列表形态，可以通过点击切换会话，如果仅需要聊天不需要该组件
+2. MessageInput
+  消息输入组件，聊天场景的核心组件，可以发送聊天消息，需要发送消息则必须使用该组件
+3. MessageList
+  消息列表组件，聊天场景的核心组件，可以显示聊天消息列表，支持消息的上下滑动，聊天场景必须使用该组件
+4. ContactList
+  联系人列表组件，适用于聊天场景，可以显示和管理用户联系人，如果仅需要聊天不需要该组件
+5. ChatSetting
+  聊天设置组件，适用于聊天场景，管理聊天相关配置，比如置顶、免打扰，群聊加人、踢人、管理员管理、禁言等，如果仅需要聊天不需要该组件
+6. Search
+  搜索组件，用于搜索消息、用户等内容，如果仅需要聊天不需要该组件
+
+
+### 通用组件
+
+1. Avatar
+  通用头像组件，显示用户头像/在线状态/消息未读数
+2. UserPicker
+  用户选择器，用于发起群聊、发起群视频、群语音等选择用户的场景
+
+## 注意事项
+
+1. 当得到用户需求时，回答应该分为两部分，第一部分是满足需求的最少组件，第二部分是推荐可额外使用的扩展组件，注意不要放大用户的需求
+2. 不同场景适用的组件有交集
+3. 根据用户需求，判断有没有可能是一个综合场景，比如聊天 + 直播，概率较低，应该谨慎
+4. 如需了解具体组件的使用方法，请询问用户："你可以问 ${components[0].name} 怎么用？" 这样的问题
+5. 当创建真实的项目时，请调用 MCP Tools get_component_detail ${integration} 的组件集成文档