@tencent-rtc/mcp 1.0.6 → 1.0.9

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

@@ -0,0 +1,189 @@
+The AI model must comply with the following **hard limits**.
+
+
+* **Use the example code in the document as the preferred approach:** When creating a file, use the example code in the document to fill the file as the preferred approach. For the style tag, non-use of the scoped property is recommended.
+
+
+# Overview
+
+ChatHeader is the top navigation component of the chat UI, displaying basic info of the current session. It can show the session title, avatar, online status, input state notification, etc. The component uses a container component mode and provides a flexible slot mechanism for custom left-right operation areas.
+
+
+## Props quick reference table
+
+
+| Field | Type | Default Value | Description |
+|------|------|--------|------|
+| [title](https://write.woa.com/#title) | string | undefined | Custom Title, session information used when not provided. |
+| [avatarUrl](https://write.woa.com/#avatarUrl) | string | undefined | Custom avatar image URL. |
+| [enableUserStatus](https://write.woa.com/#enableUserStatus) | boolean | false | Whether to display user status. |
+
+
+
+
+## Slot quick reference table
+
+
+| Name | Description |
+|------|------|
+| [ChatHeaderLeft](https://write.woa.com/#ChatHeaderLeft) | Custom content area in the left side of the header. |
+| [ChatHeaderRight](https://write.woa.com/#ChatHeaderRight) | Custom content area on the right side of the header. |
+
+
+
+
+## Props detailed introduction
+
+
+### title
+-**Type**: string.
+
+
+- **Description**: Custom session title. When this property is not provided, the component will automatically display the title based on the session type (showing user nickname or remark for single chat, group name for group chat). Default value is `undefined`.
+
+
+
+
+### avatarUrl
+-**Type**: string.
+
+
+- **Description**: URL address of the custom avatar image. When this property is not provided, the component will automatically display the avatar based on the session type (showing user avatar for single chat, group profile photo for group chat). Default value is `undefined`.
+
+
+
+
+### enableUserStatus
+- **Type**: boolean.
+
+
+- **Description**: Whether to enable the display user online status feature, which only takes effect in single chat mode. When enabled, it shows the user's online/offline status. Default value is `false`.
+
+
+
+
+## Slots detailed introduction
+
+
+### ChatHeaderLeft
+
+
+**Description**: Header left-side custom content slot, usually used for placing navigation controls such as back button and menu button.
+
+
+#### Example: Customize the left sidebar menu
+``` typescript
+<template>
+  <ChatHeader>
+    <template #ChatHeaderLeft>
+      Back button, clear active session
+      <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 = () => {
+  Set active session ID to empty
+  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
+
+
+**Description**: Header right-side custom content slot, usually used for placing feature buttons such as the menu toggle of the ChatSetting component and custom call buttons.
+
+
+#### Example: Integrate the ChatSetting component through the ChatHeaderRight slot and drawer component
+
+
+[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,48 @@
+# atomicx component library Application scenarios and considerations for components
+
+
+## component list
+
+
+25 components:
+
+
+### Components suitable for chat scenario
+
+
+1. ConversationList
+  Session list component, suitable for chat scenario, in vertical list form, can switch sessions through click. If only chat is needed, this component is optional.
+2. MessageInput
+  Message input component, the core component for chat scenario, can send chat messages. To send messages, this component must be used.
+3. MessageList
+  Message list component, the core component for chat scenario, can display chat message list and support swipe. This component must use in chat scenario.
+4. ContactList
+  Contact list component, suitable for chat scenario, can display and manage user contacts. If only chat is needed, this component is optional.
+5. ChatSetting
+  Chat settings component, suitable for chat scenario, manages chat-related configuration such as pin to top, do not disturb, add/remove users in group chat, admin management and muting. If only chat is needed, this component is optional.
+6. Search
+  Search component, used for message search, user search, etc. If only chat is needed, this component is optional.
+
+
+  Microphone control button, suitable for meeting and live-streaming scenarios, used for mute/unmute.
+
+
+universal component
+
+
+1. Avatar
+  Common avatar component, displays user profile photo/online status/message unread count
+2. UserPicker
+  User selector, used for initiating group chat, group video, or group voice calls in user selection scenarios.
+
+
+Must-Knows
+
+
+1. When receiving user needs, the response should be divided into two parts: the first part is the minimum components to meet the requirements, and the second part is the recommended additional extension components. Do not enlarge user needs.
+2. Components for different scenarios have intersection.
+3. Determine if it might be a comprehensive scenario according to user needs, such as chat + live stream, with low probability. Proceed with caution.
+4. To learn about the method of use for specific components, ask the user: "You can ask how to use ${components[0].name}?"
+5. When creating a real project, call MCP Tools get_component_detail ${integration} integration guide of components
+
+