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

@tencent-rtc/mcp 1.3.9 → 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 (431) hide show

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

@@ -2,325 +2,84 @@
 MessageInput is a fully functional message input component with core chat input features including text editing, emoji selection, file attachment, 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.
 ## Props Configuration
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Field</td>
-<td rowspan="1" colSpan="1" >Type</td>
-<td rowspan="1" colSpan="1" >Default Value</td>
-<td rowspan="1" colSpan="1" >Description</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >[autoFocus](https://write.woa.com/document/181344257863962624)</td>
-<td rowspan="1" colSpan="1" >boolean</td>
-<td rowspan="1" colSpan="1" >true</td>
-<td rowspan="1" colSpan="1" >Auto-focus to input box</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >[disabled](https://write.woa.com/document/181344257863962624)</td>
-<td rowspan="1" colSpan="1" >boolean</td>
-<td rowspan="1" colSpan="1" >false</td>
-<td rowspan="1" colSpan="1" >Disable input component</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >[hideSendButton](https://write.woa.com/document/181344257863962624)</td>
-<td rowspan="1" colSpan="1" >boolean</td>
-<td rowspan="1" colSpan="1" >false</td>
-<td rowspan="1" colSpan="1" >Whether to hide send button</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >[placeholder](https://write.woa.com/document/181344257863962624)</td>
-<td rowspan="1" colSpan="1" >string</td>
-<td rowspan="1" colSpan="1" >''</td>
-<td rowspan="1" colSpan="1" >Input box placeholder text</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >[className](https://write.woa.com/document/181344257863962624)</td>
-<td rowspan="1" colSpan="1" >string</td>
-<td rowspan="1" colSpan="1" >undefined</td>
-<td rowspan="1" colSpan="1" >Root container custom CSS class</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >[style](https://write.woa.com/document/181344257863962624)</td>
-<td rowspan="1" colSpan="1" >React.CSSProperties</td>
-<td rowspan="1" colSpan="1" >undefined</td>
-<td rowspan="1" colSpan="1" >Root container inline style</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >[attachmentPickerMode](https://write.woa.com/document/181344257863962624)</td>
-<td rowspan="1" colSpan="1" >'collapsed' \| 'expanded'</td>
-<td rowspan="1" colSpan="1" >'collapsed'</td>
-<td rowspan="1" colSpan="1" >Attachment selector display mode</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >[actions](https://write.woa.com/document/181344257863962624)</td>
-<td rowspan="1" colSpan="1" >MessageInputActions</td>
-<td rowspan="1" colSpan="1" >['EmojiPicker', 'AttachmentPicker']</td>
-<td rowspan="1" colSpan="1" >Toolbar button configuration</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >[slots](https://write.woa.com/document/181344257863962624)</td>
-<td rowspan="1" colSpan="1" >MessageInputSlots</td>
-<td rowspan="1" colSpan="1" >undefined</td>
-<td rowspan="1" colSpan="1" >Slot configuration object</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >[TextEditor](https://write.woa.com/document/181344257863962624)</td>
-<td rowspan="1" colSpan="1" >JSX.Element</td>
-<td rowspan="1" colSpan="1" >undefined</td>
-<td rowspan="1" colSpan="1" >Custom text editor component</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >[EmojiPicker](https://write.woa.com/document/181344257863962624)</td>
-<td rowspan="1" colSpan="1" >JSX.Element</td>
-<td rowspan="1" colSpan="1" >undefined</td>
-<td rowspan="1" colSpan="1" >Custom emoji selector component</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >[AttachmentPicker](https://write.woa.com/document/181344257863962624)</td>
-<td rowspan="1" colSpan="1" >JSX.Element</td>
-<td rowspan="1" colSpan="1" >undefined</td>
-<td rowspan="1" colSpan="1" >Custom attachment selector component</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >[FilePicker](https://write.woa.com/document/181344257863962624)</td>
-<td rowspan="1" colSpan="1" >JSX.Element</td>
-<td rowspan="1" colSpan="1" >undefined</td>
-<td rowspan="1" colSpan="1" >Custom file selector component</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >[ImagePicker](https://write.woa.com/document/181344257863962624)</td>
-<td rowspan="1" colSpan="1" >JSX.Element</td>
-<td rowspan="1" colSpan="1" >undefined</td>
-<td rowspan="1" colSpan="1" >Custom image selector component</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >[VideoPicker](https://write.woa.com/document/181344257863962624)</td>
-<td rowspan="1" colSpan="1" >JSX.Element</td>
-<td rowspan="1" colSpan="1" >undefined</td>
-<td rowspan="1" colSpan="1" >Custom video selector component</td>
-</tr>
-</table>
+| Field | Type | Default Value | Description |
+| --- | --- | --- | --- |
+| autoFocus | boolean | true | Auto-focus to input box |
+| disabled | boolean | false | Disable input component |
+| hideSendButton | boolean | false | Whether to hide send button |
+| placeholder | string | '' | Input box placeholder text |
+| className | string | undefined | Root container custom CSS class |
+| style | React.CSSProperties | undefined | Root container inline style |
+| attachmentPickerMode | 'collapsed' \\| 'expanded' | 'collapsed' | Attachment selector display mode |
+| actions | MessageInputActions | ['EmojiPicker', 'AttachmentPicker'] | Toolbar button configuration |
+| slots | MessageInputSlots | undefined | Slot configuration object |
+| TextEditor | JSX.Element | undefined | Custom text editor component |
+| EmojiPicker | JSX.Element | undefined | Custom emoji selector component |
+| AttachmentPicker | JSX.Element | undefined | Custom attachment selector component |
+| FilePicker | JSX.Element | undefined | Custom file selector component |
+| ImagePicker | JSX.Element | undefined | Custom image selector component |
+| VideoPicker | JSX.Element | undefined | Custom video selector component |
 Custom Function Explanation
 ### autoFocus
 Parameter type: `boolean`
 autoFocus is used to set whether to auto-focus into the input box when mounting, default value is `true`.
 ### disabled
 Parameter type: `boolean`
 disabled is used to set whether to disable the entire input component, including text input and all operation buttons, default value is `false`.
 ### hideSendButton
 Parameter type: `boolean`
 hideSendButton is used to set whether to hide the send button, suitable for scenarios where custom trigger modes are needed, default value is `false`.
 ### placeholder
 Parameter type: `string`
 placeholder is used to set the placeholder text for the input box, default value is an empty string.
 ### className
 Parameter type: `string`
 className is used to set the root container's custom CSS class name, default value is `undefined`.
 ### style
 Parameter type: `React.CSSProperties`
 style is used to set the root container's custom inline style, default value is `undefined`.
 ### attachmentPickerMode
 Parameter type: `'collapsed' | 'expanded'`
 attachmentPickerMode is used to set the display mode of the attachment selector, default value is `'collapsed'`.
 - `collapsed`: Collapse mode, unfold options after clicking
 - `expanded`: Expand mode, display all options directly
    **Note:**
-   >
+   >
    By default, AttachmentPicker refers to the attachment selector, including file selection, image selection, and video selection.
-   >
+   >
 When the attachmentPickerModel is "collapsed", clicking the attachment selector pops up a menu displaying file selection, image selection, and video selection.
 2. When the attachmentPickerModel is "expanded", the attachment selector will expand by default, showing file selection, image selection, and video selection in tile display.
 ### actions
 Parameter type: `MessageInputActions`
 actions for configuration toolbar display buttons, default value `['EmojiPicker', 'AttachmentPicker']`.
 ``` ts
 type BuiltInAction =
@@ -330,7 +89,6 @@ type BuiltInAction =
   | 'VideoPicker'
   | 'AttachmentPicker';
 type CustomAction = {
   key: string;
   label?: string | undefined;
@@ -340,20 +98,17 @@ type CustomAction = {
   iconSize?: number | undefined;
 };
 type MessageInputActions = Array<BuiltInAction | CustomAction>;
 ```
 #### Example 1: Custom toolbar button sequence
 ``` tsx
 import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
 function ChatWithCustomActions() {
   Custom button sequence: file, image, video, emoji
   const customActions = ['FilePicker', 'ImagePicker', 'VideoPicker', 'EmojiPicker'];
   return (
     <Chat>
       <MessageInput actions={customActions} />
@@ -362,17 +117,15 @@ function ChatWithCustomActions() {
 }
 ```
 #### Example 2: Add custom action button - Quick reply for customer service system
 ``` tsx
 import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
 import { useMessageInputState } from '@/states';
 Quick reply component
 function QuickReplyPicker() {
   const { setContent } = useMessageInputState();
   const quickReplies = [
     Hello, glad to serve you.
     Please wait, I'll check for you...
@@ -380,12 +133,10 @@ function QuickReplyPicker() {
     The issue has been resolved. Have a pleasant life!
   ];
   const handleQuickReply = (text: string) => {
     setContent(text);
   };
   return (
     <div style={{ position: 'relative' }}>
       <button title="quick reply">⚡</button>
@@ -417,7 +168,6 @@ function QuickReplyPicker() {
   );
 }
 function CustomerServiceChat() {
   const actions = [
     {
@@ -428,7 +178,7 @@ function CustomerServiceChat() {
     'EmojiPicker',
     'FilePicker'
   ];
   return (
     <Chat>
       <MessageInput actions={actions} />
@@ -437,13 +187,10 @@ function CustomerServiceChat() {
 }
 ```
 ### slots
 Parameter type: `MessageInputSlots`
 slots for inserting custom content in specific locations of the input component, default value is `undefined`.
 ``` ts
 interface MessageInputSlots {
@@ -456,24 +203,16 @@ interface MessageInputSlots {
 }
 ```
-![MessageInput structure diagram](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/7d08e80a559011f0989352540044a08e.png)
 MessageInput structure diagram
 #### Example 1: Add message statistics display
 ``` tsx
 import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
 import { useMessageInputState } from '@/states';
 function ChatWithMessageStats() {
   const { inputRawValue } = useMessageInputState();
   Header toolbar: Display character statistics
   const HeaderToolbar = () => !inputRawValue
     ? null
@@ -492,7 +231,6 @@ function ChatWithMessageStats() {
       </div>
     );
   // toolbar: display sending notification
   const FooterToolbar = () => (
     <div style={{
@@ -505,10 +243,9 @@ function ChatWithMessageStats() {
     </div>
   );
   return (
     <Chat>
-      <MessageInput
+      <MessageInput
         slots={{
           headerToolbar: HeaderToolbar,
           footerToolbar: FooterToolbar
@@ -519,18 +256,16 @@ function ChatWithMessageStats() {
 }
 ```
 #### Example 2: Input box prefix/suffix feature
 ``` tsx
 import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
 function ChatWithInputPrefixSuffix() {
   @reminder feature in input box
   const InputPrefix = () => (
-    <button
-      style={{
-        border: 'none',
+    <button
+      style={{
+        border: 'none',
         background: 'transparent',
         color: '#1890ff',
         cursor: 'pointer'
@@ -544,7 +279,6 @@ function ChatWithInputPrefixSuffix() {
     </button>
   );
   voice input in input box
   const InputSuffix = () => (
     <button
@@ -562,10 +296,9 @@ function ChatWithInputPrefixSuffix() {
     </button>
   );
   return (
     <Chat>
-      <MessageInput
+      <MessageInput
         slots={{
           inputPrefix: InputPrefix,
           inputSuffix: InputSuffix
@@ -576,12 +309,10 @@ function ChatWithInputPrefixSuffix() {
 }
 ```
 #### Example 3: Full customization of left and right toolbars
 ``` tsx
 import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
 function ChatWithCustomToolbars() {
   // Left toolbar: Only retain emoji and images
   const LeftInline = () => (
@@ -591,7 +322,6 @@ function ChatWithCustomToolbars() {
     </div>
   );
   // the tool bar on the right: custom send area
   const RightInline = () => (
     <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
@@ -613,10 +343,9 @@ function ChatWithCustomToolbars() {
     </div>
   );
   return (
     <Chat>
-      <MessageInput
+      <MessageInput
         slots={{
           leftInline: LeftInline,
           rightInline: RightInline
@@ -627,32 +356,25 @@ function ChatWithCustomToolbars() {
 }
 ```
 ### TextEditor
 Parameter type: `JSX.Element`
 TextEditor replaces the default text editor component. Default value: `undefined`.
 Integrate a rich text editor
 ``` tsx
 import { Chat, MessageInput, useMessageInputState } from '@tencentcloud/chat-uikit-react';
 // Custom rich text editor
 function RichTextEditor() {
   const { sendMessage } = useMessageInputState();
   const [inputValue, setInputValue] = useState('');
   const handleContentChange = (content: string) => {
     setInputValue(content);
   };
   const handleKeyDown = (e: React.KeyboardEvent) => {
     // Press Enter to send a message
     if (e.key === 'Enter') {
@@ -667,7 +389,6 @@ function RichTextEditor() {
     }
   };
   return (
     <div style={{
       flex: 1,
@@ -696,7 +417,6 @@ function RichTextEditor() {
   );
 }
 function ChatWithRichTextEditor() {
   return (
     <Chat>
@@ -706,44 +426,35 @@ function ChatWithRichTextEditor() {
 }
 ```
 ### EmojiPicker
 Parameter type: `JSX.Element`
 EmojiPicker replaces the default emoji selector component with a default value of `undefined`.
 #### Example: Custom emoji panel
 ``` tsx
 import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
 import { useMessageInputState } from '@/states';
 Custom emoji selector
 function CustomEmojiPicker() {
   const { insertContent } = useMessageInputState();
   const emojiCategories = {
     Common: ['😀', '😂', '🥰', '😍', '🤔', '😭', '😡', '👍']
     Gestures: ['👋', '🤝', '👏', '🙏', '✌️', '🤞', '🤟', '👌']
     Animals: ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼']
   };
   const [activeCategory, setActiveCategory] = useState('Common');
   const [showPicker, setShowPicker] = useState(false);
   const insertEmoji = (emoji: string) => {
     insertContent(emoji);
     setShowPicker(false);
   };
   return (
     <div style={{ position: 'relative' }}>
       <button
@@ -753,7 +464,6 @@ function CustomEmojiPicker() {
         😊
       </button>
       {showPicker && (
         <div style={{
           position: 'absolute',
@@ -788,7 +498,6 @@ function CustomEmojiPicker() {
             ))}
           </div>
           {/* Emoji grid */}
           <div style={{
             display: 'grid',
@@ -819,7 +528,6 @@ function CustomEmojiPicker() {
   );
 }
 function ChatWithCustomEmoji() {
   return (
     <Chat>
@@ -829,25 +537,20 @@ function ChatWithCustomEmoji() {
 }
 ```
 ### AttachmentPicker
 Parameter type: `JSX.Element`
 AttachmentPicker is used to replace the default attachment selector component, default value is `undefined`.
 Storage integration attachment selector
 ``` tsx
 import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
 // Cloud storage attachment selector with seamless integration
 function CloudAttachmentPicker() {
   const [showPicker, setShowPicker] = useState(false);
   const attachmentTypes = [
     { key: 'local', label: 'Local file', icon: '📁' },
     { key: 'cloud', label: 'Cloud file', icon: '☁️' },
@@ -855,7 +558,6 @@ function CloudAttachmentPicker() {
     { key: 'screenshot', label: 'Screenshot', icon: '📷' }
   ];
   const handleAttachmentSelect = async (type: string) => {
     switch (type) {
       case 'local':
@@ -869,17 +571,17 @@ function CloudAttachmentPicker() {
         };
         input.click();
         break;
       case 'cloud':
         Open cloud-based file selection
         console.log('Open cloud-based file selection');
         break;
       case 'recent':
         Display recent files
         console.log('display recent files');
         break;
       case 'screenshot':
         Start screenshot
         console.log('start screenshot');
@@ -888,16 +590,15 @@ function CloudAttachmentPicker() {
     setShowPicker(false);
   };
   return (
     <div style={{ position: 'relative' }}>
-      <button
+      <button
         onClick={() => setShowPicker(!showPicker)}
         style={{ border: 'none', background: 'transparent', cursor: 'pointer' }}
       >
         📎
       </button>
       {showPicker && (
         <div style={{
           position: 'absolute',
@@ -934,7 +635,6 @@ function CloudAttachmentPicker() {
   );
 }
 function ChatWithCloudAttachment() {
   return (
     <Chat>
@@ -944,7 +644,6 @@ function ChatWithCloudAttachment() {
 }
 ```
 ## Summary
-The MessageInput component provides complete message input functionality and various custom options. By reasonably configuring Props and using the slot system, you can create an input interface that meets specific business requirements. It is advisable to choose appropriate customized schemes based on actual use scenes and maintain good user experience and performance.
+The MessageInput component provides complete message input functionality and various custom options. By reasonably configuring Props and using the slot system, you can create an input interface that meets specific business requirements. It is advisable to choose appropriate customized schemes based on actual use scenes and maintain good user experience and performance.