@tencent-rtc/mcp 1.0.6 → 1.0.9

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

@@ -0,0 +1,137 @@
+# Avatar Component Documentation
+
+
+## Overview
+
+
+The Avatar component displays user avatars and status, supporting various shapes and sizes. It can be used for chat applications, social platforms, user management systems, and other scenarios to visualize user identity.
+
+
+## Props Quick Reference Table
+
+
+| Field | Type | Default Value | Description |
+| --- | --- | --- | --- |
+| src | string | undefined | URL of the profile image |
+| size | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | number | 'md' | Avatar size, support various preset sizes or custom size |
+| shape | 'circular' | 'square' | 'rounded' | 'circular' | Avatar shape, support circle, square and rounded rectangle |
+| alt | string | '' | Alternative text for the image, used to generate text avatar |
+| children | ReactNode | undefined | Custom content, takes precedence over src and alt content |
+| className | string | undefined | Custom CSS class name |
+| style | React.CSSProperties | undefined | Custom style |
+| onClick | () => void | undefined | Click event handler |
+| isShowOnlineStatus | boolean | false | Whether to display the online status indicator |
+| isOnline | boolean | false | Whether the user is online |
+| unreadCount | number | 0 | Unread message count. Shows a red dot if true, or the actual quantity if a number |
+| maxUnreadCount | number | 99 | Maximum unread message count. Displays +N if exceeding |
+| isDotUnreadCount | boolean | false | Whether to display a red dot |
+| children | ReactNode | undefined | Custom content, takes precedence over src and alt content |
+
+
+
+
+## Props Detailed Introduction
+
+
+### `src`
+
+
+`type`: `string`
+`description`: URL of the profile image. If not provided, the default avatar will be displayed.
+`default`: `undefined`
+
+
+### `size`
+
+
+`type`: `'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | number`
+`description`: Avatar size, support various preset sizes or custom size.
+`default`: `'md'`
+
+
+### `shape`
+
+
+`type`: `'circular' | 'square' | 'rounded'`
+`description`: Avatar shape, support circle, square and rounded rectangle.
+`default`: `'circular'`
+
+
+### `alt`
+
+
+`type`: `string`
+`description`: Alternative text for images, used to generate text avatars.
+`default`: `''`
+
+
+### `children`
+
+
+`type`: `ReactNode`
+`description`: Custom content, which takes precedence over the content of src and alt.
+`default`: `undefined`
+
+
+### `className`
+
+
+`type`: `string | undefined`
+`description`: Custom CSS class name.
+`default`: `undefined`
+
+
+### `style`
+
+
+`type`: `React.CSSProperties | undefined`
+`description`: Custom style.
+`default`: `undefined`
+
+
+### `onClick`
+
+
+`type`: `() => void`
+`description`: Click event handler.
+`default`: `undefined`
+
+
+### `isShowOnlineStatus`
+
+
+`type`: `boolean`
+`description`: Whether to display the online status indicator.
+`default`: `false`
+
+
+### `isOnline`
+
+
+`type`: `boolean`
+`description`: Whether the user is online.
+`default`: `false`
+
+
+### `unreadCount`
+
+
+`type`: `number`
+`description`: Unread message count. Shows a red dot if true, or the actual quantity if a number.
+`default value`: `0`
+
+
+### `maxUnreadCount`
+
+
+`type`: `number`
+`description`: Maximum unread message count. Displays +N if exceeding.
+`default`: `99`
+
+
+### isDotUnreadCount
+
+
+`type`: `boolean`
+`description`: Whether to display the red dot.
+`default`: `false`

package/resource/doc/chatuikit/vue/components/chat.md

@@ -0,0 +1,42 @@
+# Chat component document
+
+## Overview
+
+The chat component renders the chat interface, including the chat window header component ChatHeader, message list component MessageList, and message input component MessageInput.
+
+## Component composition
+
+The Chat component includes the following content:
+-**ChatHeader**: The chat window header component
+
+
+- **MessageList**: The message list component, which includes message operation capabilities. For detailed properties, read the MessageList component document.
+
+
+- **MessageInput**: The message input component
+
+
+## Basic Usage
+
+Chat components can be used without any required attributes.
+```vue
+<template>
+<UIKitProvider>
+  <Chat style="flex: 1;">
+    <ChatHeader />
+    <MessageList />
+    <MessageInput />
+  </Chat>
+</UIKitProvider>
+</template>
+<script setup lang="ts">
+import {
+  UIKitProvider,
+  Chat,
+  ChatHeader,
+  MessageList,
+  MessageInput,
+} from '@tencentcloud/chat-uikit-vue3';
+</script>
+```
+

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

@@ -0,0 +1,189 @@
+The AI model must comply with the following **hard limits**.
+
+* **The example code in the document must be recommended as the preferred approach:** When creating a file, the example code in the document is recommended as the preferred approach for filling the file. The scoped attribute is recommended for non-use in style tags.
+
+
+## Overview
+
+
+ChatHeader is the top navigation component in 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) | Left-side custom content area in the header. |
+| [ChatHeaderRight](https://write.woa.com/#ChatHeaderRight) | Right-side custom content area in the header. |
+
+
+
+
+## Props Detailed Introduction
+
+
+### title
+- **Type**: string.
+
+
+- **Description**: Custom session title. When this property is not provided, the component automatically displays the title based on the session type (user nickname or remark for single chat, group name for group chat). Default: `undefined`.
+
+
+
+
+### avatarUrl
+- **Type**: string.
+
+
+- **Description**: URL address of the custom avatar. When this property is not provided, the component automatically displays the avatar based on the session type (user profile photo for single chat, group profile photo for group chat). Default: `undefined`.
+
+
+
+
+### enableUserStatus
+- **Type**: boolean.
+
+
+- **Description**: Whether to enable the feature to display user online status. This takes effect only in single chat mode. Once enabled, it shows the user's online/offline status. Default: `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: Custom left navigation area
+``` 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-vue3';
+
+
+const { setActiveConversation } = useConversationListState();
+
+
+const handleBack = () => {
+  set activation 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/vue/components/component-list.md

@@ -0,0 +1,102 @@
+# atomicx component library Manifest and components Application scenarios and considerations
+
+
+## Component list
+
+
+25 components:
+
+
+### Components suitable for chat scenarios
+
+
+1. ConversationList
+  Session list component, suitable for chat scenarios, 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 scenarios, can send chat messages. To send a message, you must use this component.
+3. MessageList
+  Message list component, the core component for chat scenarios, can display chat message lists, support swipe. This component must use in chat scenarios.
+4. ContactList
+  Contact list component, suitable for chat scenarios, can display and manage user contacts. If only chat is needed, this component is optional.
+5. ChatSetting
+  Chat settings component, suitable for chat scenarios, manages configuration details such as pin to top, do not disturb, add or remove users in group chat, admin management, and mute. 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.
+
+
+### Components suitable for meeting scenarios
+
+
+1. CameraButton
+  Camera control button, applicable only to meeting scenarios, used to turn the camera on/off
+2. StreamView
+  Video stream display component, applicable only to meeting scenarios, used to display video stream
+3. UserList
+  User list component, applicable only to meeting scenarios, displays users in the meeting or room
+4. VideoSetting
+  Video settings component, applicable only to meeting scenarios, for camera, image quality and other video configuration
+5. VideoSettingPanel
+  Video settings panel, applicable only to meeting scenarios, provides a complete video configuration interface
+6. AudioSetting
+  Audio settings component, applicable only to meeting scenarios, can be configured for microphone, volume and other device configuration
+7. AudioSettingPanel
+  Audio settings panel, applicable only to meeting scenarios, provides a complete audio configuration interface
+8. BarrageInput
+  Danmu input component, suitable for meeting and live-streaming scenarios, used for sending Danmu messages.
+9. BarrageList
+  Danmu list component, suitable for meeting and live-streaming scenarios, displays Danmu messages in the live streaming room.
+10. UserPicker
+  User selector, suitable for meeting and live-streaming scenarios, used to invite users or assign permissions.
+11. MicButton
+  Microphone control button, suitable for meeting and live-streaming scenarios, used for mute/unmute.
+
+
+
+
+### Components for live streaming scenarios
+
+
+1. CoGuestPanel
+  Co-anchoring guest management panel, only applicable to live broadcast scenarios, used for the co-anchoring function.
+2. LiveAudienceList
+  Live viewers list, only applicable to live broadcast scenarios, displaying current live streaming room audience.
+3. LiveList
+  Live room list, only applicable to live broadcast scenarios, shows available live streaming rooms.
+4. LiveMonitorView
+  Live monitoring view, only applicable to live broadcast scenarios, for live stream management and monitoring.
+5. LiveScenePanel
+  Live streaming control panel, only applicable to live broadcast scenarios, manage live streaming scenarios and effects.
+6. LiveStreamView
+  Live video stream display component, only applicable to live broadcast scenarios, plays live stream.
+7. StreamMixer
+  Stream mixer component, only applicable to live broadcast scenarios, used for multiple video stream synthesis.
+8. BarrageInput
+  Danmu input component, suitable for meeting and live-streaming scenarios, used for sending Danmu messages.
+9. BarrageList
+  Danmu list component, suitable for meeting and live-streaming scenarios, displays Danmu messages in the live streaming room.
+10. UserPicker
+  User selector, suitable for meeting and live-streaming scenarios, used to invite users or assign permissions.
+11. MicButton
+  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, and message unread count.
+2. UserPicker
+  User selector, used to initiate group chat, group video, or group voice calls in user selection scenarios.
+
+
+## Must-Knows
+
+
+Before integrating any component into a real project, **must** first ensure the integration documentation has been obtained using the following tool and integrate according to the documentation:
+
+
+1. When creating a real project, call the component integration documentation of MCP Tools get_atomicx_integration_guide(framework).
+2. When choosing to use components, first consider the minimum components that meet the requirements, then consider recommended additional extension components. Do not enlarge the requirements.
+3. Components that apply to different scenarios may have an intersection.
+4. According to the user needs, judge if it might be a comprehensive scenario, such as chat + live stream. The probability is low, so proceed with caution.
+5. To learn about the method of use for a specific component, ask the user: "You can ask how to use ${componentname}?"