npm - @tencent-rtc/mcp - Versions diffs - 1.3.8 → 1.4.0 - Mend

@tencent-rtc/mcp 1.3.8 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (429) hide show

package/resource/doc/{chatuikit → chatkit}/vue/components/message-input.md RENAMED Viewed

@@ -6,25 +6,20 @@ The AI model must adhere to the following **hard constraints**:
 MessageInput is a complete message input component designed for Vue3 applications, providing core chat input features including text editing, emoji selection, file attachments, and a send button. It supports various custom options, such as input behavior configuration, toolbar customization, component replacement, and slot expansion, meeting the demands of different chat scenarios with personalized requirements.
 ## Basic Usage
 ```ts
 <script>
 import { MessageInput } from "@tencentcloud/chat-uikit-vue3";
 </script>
 <template>
   <MessageInput />
 </template>
 ```
 ## Props Configuration
 | Field | Type | Default | Description |
 |------|------|--------|------|
 | autoFocus | boolean | true | Whether to auto-focus into the input box |
@@ -34,12 +29,8 @@ import { MessageInput } from "@tencentcloud/chat-uikit-vue3";
 | attachmentPickerMode | 'collapsed' \| 'expanded' | 'collapsed' | Attachment selector display mode |
 | actions | MessageInputActions | ['EmojiPicker', 'ImagePicker', 'FilePicker', 'VideoPicker'] | Toolbar action button configuration |
 ## Slots configuration
 | Field | Type | Default | Description |
 |------|------|--------|------|
 | headerToolbar | () => VNode[] | undefined | Header toolbar slot |
@@ -50,9 +41,6 @@ import { MessageInput } from "@tencentcloud/chat-uikit-vue3";
 | inputSuffix | () => VNode[] | undefined | Input box suffix slot |
 | TextEditor | Component \| null | null | Custom text editor component configuration |
 ### Type definition
 ``` typescript
 type BuiltInAction =
@@ -62,7 +50,6 @@ type BuiltInAction =
   | 'VideoPicker'
   | 'AttachmentPicker';
 export type CustomAction = {
   key: string;
   label?: string | undefined;
@@ -72,13 +59,10 @@ export type CustomAction = {
   iconSize?: number | undefined;
 };
 export type MessageInputActions = Array<BuiltInAction | CustomAction>;
 export type MessageInputAttachmentPickerMode = 'collapsed' | 'expanded';
 export interface MessageInputSlots {
   headerToolbar?: () => VNode[];
   footerToolbar?: () => VNode[];
@@ -89,7 +73,6 @@ export interface MessageInputSlots {
   textEditor?: () => VNode[];
 }
 // MessageInputProps API definition
 export interface MessageInputProps {
   autoFocus?: boolean;
@@ -103,99 +86,66 @@ export interface MessageInputProps {
 }
 ```
 ## Custom feature explanation
 ### autoFocus
 - `type`: `boolean`
 - Details: autoFocus is used to set whether the component auto-focuses into the input box when mounting. The default is `true`.
 ### disabled
 - `type`: `boolean`
 - Details: disabled is used to set whether to disable the entire input component, including text input and all buttons. The default is `false`.
 ### hideSendButton
 - `type`: `boolean`
 - Details: hideSendButton is used to set whether to hide the send button, suitable for scenarios where the trigger mode needs to be customized. The default is `false`.
 ### placeholder
 - `type`: `string`.
 - Details: placeholder is used to set the placeholder text for the input box. The default is an empty string.
 ### attachmentPickerMode
 - `type`: `'collapsed'` | `'expanded'`.
 - Details: attachmentPickerMode is used to set the display mode of the attachment selector. Default is `'collapsed'`.
   - **collapsed**: Collapse mode. Unfold options after clicking.
   - **expanded**: Expand mode. Direct display of ALL options.
 ### actions
 - Type: MessageInputActions.
 - Description: actions for configuration of buttons displayed in the toolbar. Default: `['EmojiPicker', 'ImagePicker', 'FilePicker', 'VideoPicker']`.
 #### Example 1: Custom toolbar button sequence
 ``` typescript
 <template>
   <MessageInput :actions="customActions" />
 </template>
 <script lang="ts" setup>
 import { MessageInput } from '@tencentcloud/uikit-component-vue3';
 // Custom button sequence: file, image, video, emoji
 const customActions = ['FilePicker', 'ImagePicker', 'VideoPicker', 'EmojiPicker'];
 </script>
 ```
 #### Example 2: Add custom action button
 ``` typescript
 <template>
   <MessageInput :actions="customActions" />
 </template>
 <script lang="ts" setup>
 import { defineComponent, h } from 'vue';
 import { MessageInput } from '@tencentcloud/uikit-component-vue3';
 Custom Position Sharing Button Component
 const LocationPicker = defineComponent({
   name: 'LocationPicker',
@@ -213,7 +163,6 @@ const LocationPicker = defineComponent({
       }
     };
     return () =>
       h('button',
         {
@@ -226,7 +175,6 @@ const LocationPicker = defineComponent({
   },
 });
 const customActions = [
   'EmojiPicker',
   'ImagePicker',
@@ -240,20 +188,17 @@ const customActions = [
 </script>
 ```
 #### Example 3: Quick reply in customer service system
 ``` typescript
 <template>
   <MessageInput :actions="actions" />
 </template>
 <script lang="ts" setup>
 import { defineComponent, h, ref } from 'vue';
 import { MessageInput } from '@tencentcloud/uikit-component-vue3';
 import { useMessageInputState } from '@tencentcloud/uikit-component-vue3/src/states/MessageInputState';
 quick reply component
 const QuickReplyPicker = defineComponent({
   name: 'QuickReplyPicker',
@@ -261,7 +206,6 @@ const QuickReplyPicker = defineComponent({
     const { setContent } = useMessageInputState();
     const showPicker = ref(false);
     const quickReplies = [
       Hello, glad to help you.
       Please wait a moment, I'll check for you...
@@ -269,13 +213,11 @@ const QuickReplyPicker = defineComponent({
       The issue has been resolved. Have a pleasant life.
     ];
     const handleQuickReply = (text: string) => {
       setContent(text);
       showPicker.value = false;
     };
     return () =>
       h('div', { style: { position: 'relative' } }, [
         h('button',
@@ -320,7 +262,6 @@ const QuickReplyPicker = defineComponent({
   },
 });
 const actions = [
   {
     key: 'quickReply',
@@ -333,26 +274,17 @@ const actions = [
 </script>
 ```
 #### Example 4: Custom emoji panel
 ``` typescript
 <template>
   <MessageInput :EmojiPicker="CustomEmojiPicker" />
 </template>
 <script lang="ts" setup>
 import { defineComponent, h, ref } from 'vue';
 import { MessageInput } from '@tencentcloud/uikit-component-vue3';
 import { useMessageInputState } from '@tencentcloud/uikit-component-vue3/src/states/MessageInputState';
 const CustomEmojiPicker = defineComponent({
   name: 'CustomEmojiPicker',
   setup() {
@@ -360,26 +292,17 @@ const CustomEmojiPicker = defineComponent({
     const showPicker = ref(false);
     const activeCategory = ref('common');
     const emojiCategories = {
       'common': ['😀', '😂', '🥰', '😍', '🤔', '😭', '😡', '👍'],
       'hand': ['👋', '🤝', '👏', '🙏', '✌️', '🤞', '🤟', '👌'],
       'animal': ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼'],
     };
     const insertEmoji = (emoji: string) => {
       insertContent(emoji);
       showPicker.value = false;
     };
     return () =>
       h('div', { style: { position: 'relative' } }, [
         h('button',
@@ -462,14 +385,11 @@ const CustomEmojiPicker = defineComponent({
 </script>
 ```
 ## Slots explanation
 - Type: MessageInputSlots.
 -Detailed instructions: Insert custom content at a specific location in the input component.
    ``` typescript
    interface MessageInputSlots {
      headerToolbar?: () => VNode[];
@@ -482,9 +402,6 @@ const CustomEmojiPicker = defineComponent({
    }
    ```
 #### Example 1: Custom footerToolbar slot
 ``` typescript
 <template>
@@ -498,15 +415,12 @@ const CustomEmojiPicker = defineComponent({
 </template>
 ```
 #### Example 2: Input box prefix/suffix feature
 ``` typescript
 <template>
   <MessageInput>
     <template #inputPrefix>
     </template>
     <template #inputSuffix>
       <button
@@ -519,17 +433,14 @@ const CustomEmojiPicker = defineComponent({
   </MessageInput>
 </template>
 <script lang="ts" setup>
 import { MessageInput } from '@tencentcloud/uikit-component-vue3';
 const handleAtUser = () => {
   Trigger @user selection
   console.log('Toggle on @user selection');
 };
 const handleVoiceInput = () => {
   // Start voice input
   console.log('Start voice input');
@@ -537,18 +448,12 @@ const handleVoiceInput = () => {
 </script>
 ```
 ### TextEditor
 Type: 'Component' | 'null'.
 Detailed explanation: TextEditor is used to replace the default text editor component. Default: `null`.
 #### Example: Custom text editor
 ``` typescript
 <template>
@@ -559,17 +464,11 @@ Detailed explanation: TextEditor is used to replace the default text editor comp
   </MessageInput>
 </template>
 <script lang="ts" setup>
 import { defineComponent, h, ref, onMounted } from 'vue';
 import { MessageInput } from '@tencentcloud/uikit-component-vue3';
 import { useMessageInputState } from '@tencentcloud/uikit-component-vue3/src/states/MessageInputState';
 const RichTextEditor = defineComponent({
   name: 'RichTextEditor',
   setup() {
@@ -577,15 +476,11 @@ const RichTextEditor = defineComponent({
     const editorRef = ref<HTMLDivElement | null>(null);
     const inputRawValue = ref('');
     const handleInput = (e: Event) => {
       const target = e.target as HTMLDivElement;
       inputRawValue.value = (e.target as HTMLDivElement).textContent || '';
     };
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Enter') {
         sendMessage(inputRawValue.value);
@@ -595,16 +490,12 @@ const RichTextEditor = defineComponent({
       }
     };
     onMounted(() => {
       if (editorRef.value) {
         editorRef.value.textContent = inputRawValue.value || '';
       }
     });
     return () =>
       h('div',
         {
@@ -638,28 +529,22 @@ const RichTextEditor = defineComponent({
 ```
 Overview
 MessageInput is a complete message input component designed for Vue3 applications, providing core chat input features including text editing, emoji selection, file attachments, and a send button. It supports various custom options, such as input behavior configuration, toolbar customization, component replacement, and slot expansion, meeting the demands of different chat scenarios with personalized requirements.
 Basic Usage
 ```ts
 <script>
 import { MessageInput } from "@tencentcloud/chat-uikit-vue3";
 </script>
 <template>
   <MessageInput />
 </template>
 ```
 ## Props Configuration
 | Field | Type | Default | Description |
 |------|------|--------|------|
 | autoFocus | boolean | true | Whether to auto-focus into the input box |
@@ -669,12 +554,8 @@ import { MessageInput } from "@tencentcloud/chat-uikit-vue3";
 | attachmentPickerMode | 'collapsed' \| 'expanded' | 'collapsed' | Attachment selector display mode |
 | actions | MessageInputActions | ['EmojiPicker', 'ImagePicker', 'FilePicker', 'VideoPicker'] | Toolbar action button configuration |
 ## Slots configuration
 | Field | Type | Default | Description |
 |------|------|--------|------|
 | headerToolbar | () => VNode[] | undefined | Header toolbar slot |
@@ -685,9 +566,6 @@ import { MessageInput } from "@tencentcloud/chat-uikit-vue3";
 | inputSuffix | () => VNode[] | undefined | Input box suffix slot |
 | TextEditor | Component \| null | null | Custom text editor component configuration |
 type definition
 ``` typescript
 type BuiltInAction =
@@ -697,7 +575,6 @@ type BuiltInAction =
   | 'VideoPicker'
   | 'AttachmentPicker';
 export type CustomAction = {
   key: string;
   label?: string | undefined;
@@ -707,13 +584,10 @@ export type CustomAction = {
   iconSize?: number | undefined;
 };
 export type MessageInputActions = Array<BuiltInAction | CustomAction>;
 export type MessageInputAttachmentPickerMode = 'collapsed' | 'expanded';
 export interface MessageInputSlots {
   headerToolbar?: () => VNode[];
   footerToolbar?: () => VNode[];
@@ -724,7 +598,6 @@ export interface MessageInputSlots {
   textEditor?: () => VNode[];
 }
 // MessageInputProps API definition
 export interface MessageInputProps {
   autoFocus?: boolean;
@@ -738,99 +611,66 @@ export interface MessageInputProps {
 }
 ```
 Custom Function Explanation
 ### autoFocus
 -boolean
 - Details: autoFocus is used to set whether to auto-focus into the input box when mounting. Default: `true`.
 ### disabled
 -boolean
 - Details: disabled is used to set whether to disable the entire input component, including text input and ALL buttons. Default: `false`.
 ### hideSendButton
 -boolean
 - Details: hideSendButton is used to set whether to hide the send button, suitable for scenarios where the trigger mode needs to be customized. Default: `false`.
 ### placeholder
 - Type: string.
 - Details: placeholder is used to set the placeholder text for the input box. Default is an empty string.
 ### attachmentPickerMode
 - Type: 'collapsed' | 'expanded'.
 - Details: attachmentPickerMode is used to set the display mode of the attachment selector. Default is `'collapsed'`.
   - **collapsed**: Collapse mode. Unfold options after clicking.
   - **expanded**: Expand mode. Direct display of ALL options.
 ### actions
 - Type: MessageInputActions.
 - Description: actions for configuration of buttons displayed in the toolbar. Default: `['EmojiPicker', 'ImagePicker', 'FilePicker', 'VideoPicker']`.
 #### Example 1: Custom toolbar button sequence
 ``` typescript
 <template>
   <MessageInput :actions="customActions" />
 </template>
 <script lang="ts" setup>
 import { MessageInput } from '@tencentcloud/uikit-component-vue3';
 Custom button sequence: file, image, video, emoji
 const customActions = ['FilePicker', 'ImagePicker', 'VideoPicker', 'EmojiPicker'];
 </script>
 ```
 #### Example 2: Add custom action button
 ``` typescript
 <template>
   <MessageInput :actions="customActions" />
 </template>
 <script lang="ts" setup>
 import { defineComponent, h } from 'vue';
 import { MessageInput } from '@tencentcloud/uikit-component-vue3';
 Custom Position Sharing Button Component
 const LocationPicker = defineComponent({
   name: 'LocationPicker',
@@ -848,7 +688,6 @@ const LocationPicker = defineComponent({
       }
     };
     return () =>
       h('button',
         {
@@ -861,7 +700,6 @@ const LocationPicker = defineComponent({
   },
 });
 const customActions = [
   'EmojiPicker',
   'ImagePicker',
@@ -875,20 +713,17 @@ const customActions = [
 </script>
 ```
 #### Example 3: Quick reply in customer service system
 ``` typescript
 <template>
   <MessageInput :actions="actions" />
 </template>
 <script lang="ts" setup>
 import { defineComponent, h, ref } from 'vue';
 import { MessageInput } from '@tencentcloud/uikit-component-vue3';
 import { useMessageInputState } from '@tencentcloud/uikit-component-vue3/src/states/MessageInputState';
 quick reply component
 const QuickReplyPicker = defineComponent({
   name: 'QuickReplyPicker',
@@ -896,7 +731,6 @@ const QuickReplyPicker = defineComponent({
     const { setContent } = useMessageInputState();
     const showPicker = ref(false);
     const quickReplies = [
       Hello, glad to help you.
       Please wait a moment, I'll check for you...
@@ -904,13 +738,11 @@ const QuickReplyPicker = defineComponent({
       The issue has been resolved. Have a pleasant life.
     ];
     const handleQuickReply = (text: string) => {
       setContent(text);
       showPicker.value = false;
     };
     return () =>
       h('div', { style: { position: 'relative' } }, [
         h('button',
@@ -955,7 +787,6 @@ const QuickReplyPicker = defineComponent({
   },
 });
 const actions = [
   {
     key: 'quickReply',
@@ -968,26 +799,17 @@ const actions = [
 </script>
 ```
 #### Example 4: Custom emoji panel
 ``` typescript
 <template>
   <MessageInput :EmojiPicker="CustomEmojiPicker" />
 </template>
 <script lang="ts" setup>
 import { defineComponent, h, ref } from 'vue';
 import { MessageInput } from '@tencentcloud/uikit-component-vue3';
 import { useMessageInputState } from '@tencentcloud/uikit-component-vue3/src/states/MessageInputState';
 const CustomEmojiPicker = defineComponent({
   name: 'CustomEmojiPicker',
   setup() {
@@ -995,26 +817,17 @@ const CustomEmojiPicker = defineComponent({
     const showPicker = ref(false);
     const activeCategory = ref('common');
     const emojiCategories = {
       'common': ['😀', '😂', '🥰', '😍', '🤔', '😭', '😡', '👍'],
       'hand': ['👋', '🤝', '👏', '🙏', '✌️', '🤞', '🤟', '👌'],
       'animal': ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼'],
     };
     const insertEmoji = (emoji: string) => {
       insertContent(emoji);
       showPicker.value = false;
     };
     return () =>
       h('div', { style: { position: 'relative' } }, [
         h('button',
@@ -1097,14 +910,11 @@ const CustomEmojiPicker = defineComponent({
 </script>
 ```
 ## Slots explanation
 - Type: MessageInputSlots.
 -Detailed instructions: Insert custom content at a specific location in the input component.
    ``` typescript
    interface MessageInputSlots {
      headerToolbar?: () => VNode[];
@@ -1117,9 +927,6 @@ const CustomEmojiPicker = defineComponent({
    }
    ```
 #### Example 1: Custom footerToolbar slot
 ``` typescript
 <template>
@@ -1133,15 +940,12 @@ const CustomEmojiPicker = defineComponent({
 </template>
 ```
 #### Example 2: Input box prefix/suffix feature
 ``` typescript
 <template>
   <MessageInput>
     <template #inputPrefix>
     </template>
     <template #inputSuffix>
       <button
@@ -1154,17 +958,14 @@ const CustomEmojiPicker = defineComponent({
   </MessageInput>
 </template>
 <script lang="ts" setup>
 import { MessageInput } from '@tencentcloud/uikit-component-vue3';
 const handleAtUser = () => {
   Trigger @user selection
   console.log('Toggle on @user selection');
 };
 const handleVoiceInput = () => {
   // Start voice input
   console.log('Start voice input');
@@ -1172,18 +973,12 @@ const handleVoiceInput = () => {
 </script>
 ```
 ### TextEditor
 Type: 'Component' | 'null'.
 Detailed explanation: TextEditor is used to replace the default text editor component. Default: `null`.
 #### Example: Custom text editor
 ``` typescript
 <template>
@@ -1194,17 +989,11 @@ Detailed explanation: TextEditor is used to replace the default text editor comp
   </MessageInput>
 </template>
 <script lang="ts" setup>
 import { defineComponent, h, ref, onMounted } from 'vue';
 import { MessageInput } from '@tencentcloud/uikit-component-vue3';
 import { useMessageInputState } from '@tencentcloud/uikit-component-vue3/src/states/MessageInputState';
 const RichTextEditor = defineComponent({
   name: 'RichTextEditor',
   setup() {
@@ -1212,15 +1001,11 @@ const RichTextEditor = defineComponent({
     const editorRef = ref<HTMLDivElement | null>(null);
     const inputRawValue = ref('');
     const handleInput = (e: Event) => {
       const target = e.target as HTMLDivElement;
       inputRawValue.value = (e.target as HTMLDivElement).textContent || '';
     };
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Enter') {
         sendMessage(inputRawValue.value);
@@ -1230,16 +1015,12 @@ const RichTextEditor = defineComponent({
       }
     };
     onMounted(() => {
       if (editorRef.value) {
         editorRef.value.textContent = inputRawValue.value || '';
       }
     });
     return () =>
       h('div',
         {
@@ -1271,5 +1052,3 @@ const RichTextEditor = defineComponent({
 });
 </script>
 ```