@tencent-rtc/mcp 1.0.7 → 1.0.9

package/README.md

@@ -28,12 +28,12 @@ This improves the LLM AI Agent's ability to understand and interact with Tencent
 
 
 ## How To Use
-To set up the @tencentcloud/sdk-mcp MCP Server, follow these steps:
+To set up the @tencent-rtc/mcp MCP Server, follow these steps:
 
 - Step1: Installation.
 
 ```
-npx -y @tencentcloud/sdk-mcp
+npx -y @tencent-rtc/mcp
 ```
 
 
@@ -42,9 +42,9 @@ npx -y @tencentcloud/sdk-mcp
 ```javascript
 {
   "mcpServers": {
-    "tencentcloud-sdk-mcp": {
+    "tencent-rtc": {
       "command": "npx",
-      "args": ["-y", "@tencentcloud/sdk-mcp"]
+      "args": ["-y", "@tencent-rtc/mcp"]
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencent-rtc/mcp",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Tencent Cloud MCP Server for SDK",
   "type": "module",
   "main": "index.js",

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

@@ -0,0 +1,44 @@
+# Chat component document
+
+## Overview
+
+The chat component is responsible for rendering the chat interface, including the chat window header component ChatHeader, the message list component MessageList, and the message input component MessageInput.
+
+
+## Component composition
+
+
+The Chat component includes the following content:
+-**ChatHeader**: Chat window header component
+
+
+- **MessageList**: Message list component. The message list component includes message operation capabilities. For detailed properties, read the MessageList component document.
+
+
+- **MessageInput**: Message input component
+
+
+## Basic Usage
+
+
+Chat components can be used without any required attributes.
+``` typescript
+<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-react';
+</script>
+```

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>
+```