@tencent-rtc/mcp 1.4.7 → 1.6.0-beta.1

package/resource/{doc/chatkit/react/components → knowledge/chat/preset/react/features}/message-input.md

@@ -1,92 +1,97 @@
-# Overview
-
-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
-| 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
+## Overview
+
+MessageInput is a robust, fully-featured component designed for chat applications. It delivers essential messaging capabilities, including text input, emoji selection, file attachments, and a send button. The component offers extensive customization—input behavior, toolbar configuration, component replacement, and slot-based extensibility—allowing you to tailor the message input experience for a wide range of chat use cases.
+
+## Props
+
+|Field|Type|Default|Description|
+|---------|---------|---------|---------|
+|autoFocus|boolean|true|Automatically focuses the input box on mount|
+|disabled|boolean|false|Disables the input component|
+|hideSendButton|boolean|false|Hides the send button|
+|placeholder|string|''|Placeholder text for the input box|
+|className|string|undefined|Custom CSS class name for the root container|
+|style|React.CSSProperties|undefined|Custom inline style for the root container|
+|attachmentPickerMode|'collapsed' \|'expanded'|'collapsed'|Attachment picker display mode|
+|actions|MessageInputActions|['EmojiPicker', 'AttachmentPicker']|Toolbar action button configuration|
+|slots|MessageInputSlots|undefined|Slot configuration object|
+|TextEditor|JSX.Element|undefined|Custom text editor component|
+|EmojiPicker|JSX.Element|undefined|Custom emoji picker component|
+|AttachmentPicker|JSX.Element|undefined|Custom attachment picker component|
+|FilePicker|JSX.Element|undefined|Custom file picker component|
+|ImagePicker|JSX.Element|undefined|Custom image picker component|
+|VideoPicker|JSX.Element|undefined|Custom video picker component|
+
+## Detailed Props
 
 ### autoFocus
 
 Parameter type: `boolean`
 
-autoFocus is used to set whether to auto-focus into the input box when mounting, default value is `true`.
+Determines whether the input box is automatically focused when the component mounts. Default: `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`.
+Disables the entire input component, including the text box and all toolbar actions. Default: `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`.
+Hides the send button. Useful when you want to customize the send trigger behavior. Default: `false`.
 
 ### placeholder
 
 Parameter type: `string`
 
-placeholder is used to set the placeholder text for the input box, default value is an empty string.
+Sets the placeholder text for the input box. Default: empty string.
 
 ### className
 
 Parameter type: `string`
 
-className is used to set the root container's custom CSS class name, default value is `undefined`.
+Applies a custom CSS class name to the root container. Default: `undefined`.
 
 ### style
 
 Parameter type: `React.CSSProperties`
 
-style is used to set the root container's custom inline style, default value is `undefined`.
+Applies custom inline styles to the root container. Default: `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
+Sets the display mode for the attachment picker. Default: `'collapsed'`.
+- `collapsed`: Picker options are hidden by default and expand on click.
 
-- `expanded`: Expand mode, display all options directly
+- `expanded`: Picker options are displayed side-by-side and always visible.
 
-   **Note:**
+   > **Note:**
    >
 
-   By default, AttachmentPicker refers to the attachment selector, including file selection, image selection, and video selection.
+   > The default AttachmentPicker includes file, image, 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.
+>   1. When `attachmentPickerMode` is `"collapsed"`, clicking the attachment picker opens a popup menu with file, image, and video options.
+>   2. When `attachmentPickerMode` is `"expanded"`, the picker displays file, image, and video options inline by default.
 
 ### actions
 
 Parameter type: `MessageInputActions`
 
-actions for configuration toolbar display buttons, default value `['EmojiPicker', 'AttachmentPicker']`.
+Configures the toolbar action buttons. Default: `['EmojiPicker', 'AttachmentPicker']`.
 ``` ts
 type BuiltInAction =
-  | 'EmojiPicker'
+| 'EmojiPicker'
+
   | 'ImagePicker'
+
   | 'FilePicker'
+
   | 'VideoPicker'
+
   | 'AttachmentPicker';
 
 type CustomAction = {
@@ -101,12 +106,12 @@ type CustomAction = {
 type MessageInputActions = Array<BuiltInAction | CustomAction>;
 ```
 
-#### Example 1: Custom toolbar button sequence
+#### Example 1: Customizing Toolbar Button Order
 ``` tsx
 import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
 
 function ChatWithCustomActions() {
-  Custom button sequence: file, image, video, emoji
+  // Custom button order: File, Image, Video, Emoji
   const customActions = ['FilePicker', 'ImagePicker', 'VideoPicker', 'EmojiPicker'];
 
   return (
@@ -117,29 +122,30 @@ function ChatWithCustomActions() {
 }
 ```
 
-#### Example 2: Add custom action button - Quick reply for customer service system
+The result is shown below:
+
+#### Example 2: Adding a Custom Action Button - Quick Reply for Customer Service
 ``` tsx
-import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
-import { useMessageInputState } from '@/states';
+import { Chat, MessageInput, useChatUIState } from '@tencentcloud/chat-uikit-react';
 
-Quick reply component
+// Quick Reply component
 function QuickReplyPicker() {
-  const { setContent } = useMessageInputState();
+  const { insertInputContent } = useChatUIState();
 
   const quickReplies = [
-    Hello, glad to serve you.
-    Please wait, I'll check for you...
-    Thank you for your consultation. Any other issues?
-    The issue has been resolved. Have a pleasant life!
+    'Hello, glad to assist you!',
+    'Please wait a moment while I check...',
+    'Thank you for your inquiry, do you have any other questions?',
+    'Your issue has been resolved, have a great day!'
   ];
 
   const handleQuickReply = (text: string) => {
-    setContent(text);
+    insertInputContent(text);
   };
 
   return (
     <div style={{ position: 'relative' }}>
-      <button title="quick reply">⚡</button>
+      <button title="Quick Reply">⚡</button>
       <div style={{
         position: 'absolute',
         bottom: '100%',
@@ -172,7 +178,7 @@ function CustomerServiceChat() {
   const actions = [
     {
       key: 'quickReply',
-      quick reply
+      label: 'Quick Reply',
       component: QuickReplyPicker
     },
     'EmojiPicker',
@@ -187,11 +193,13 @@ function CustomerServiceChat() {
 }
 ```
 
+The result is shown below:
+
 ### slots
 
 Parameter type: `MessageInputSlots`
 
-slots for inserting custom content in specific locations of the input component, default value is `undefined`.
+Allows you to inject custom content at specific locations within the input component. Default: `undefined`.
 ``` ts
 interface MessageInputSlots {
   headerToolbar?: () => React.ReactNode;
@@ -203,65 +211,14 @@ interface MessageInputSlots {
 }
 ```
 
-MessageInput structure diagram
+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
-    : (
-      <div style={{
-        padding: '4px 12px',
-        fontSize: '12px',
-        color: '#666',
-        borderBottom: '1px solid #eee',
-      }}
-      >
-        Number of characters
-        {' '}
-        {inputRawValue?.reduce((acc, item) => acc + (item.type === 'text' ? item.content.length : 1), 0) || 0}
-        /500
-      </div>
-    );
-
-  // toolbar: display sending notification
-  const FooterToolbar = () => (
-    <div style={{
-      padding: '4px 12px',
-      fontSize: '12px',
-      color: '#999',
-      textAlign: 'right'
-    }}>
-      Press Ctrl+Enter to wrap text
-    </div>
-  );
-
-  return (
-    <Chat>
-      <MessageInput
-        slots={{
-          headerToolbar: HeaderToolbar,
-          footerToolbar: FooterToolbar
-        }}
-      />
-    </Chat>
-  );
-}
-```
-
-#### Example 2: Input box prefix/suffix feature
+#### Example 1: Input Prefix and Suffix Functionality
 ``` tsx
 import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
 
 function ChatWithInputPrefixSuffix() {
-  @reminder feature in input box
+  // Input prefix: @ mention feature
   const InputPrefix = () => (
     <button
       style={{
@@ -271,15 +228,15 @@ function ChatWithInputPrefixSuffix() {
         cursor: 'pointer'
       }}
       onClick={() => {
-        // Trigger @user selection
-        console.log('turn on @user selection');
+        // Trigger @ user selection
+        console.log('Open @ user selection');
       }}
     >
       @
     </button>
   );
 
-  voice input in input box
+  // Input suffix: Voice input
   const InputSuffix = () => (
     <button
       style={{
@@ -288,8 +245,8 @@ function ChatWithInputPrefixSuffix() {
         cursor: 'pointer'
       }}
       onClick={() => {
-        Start voice input
-        console.log('start voice input');
+        // Start voice input
+        console.log('Start voice input');
       }}
     >
       🎤
@@ -309,12 +266,14 @@ function ChatWithInputPrefixSuffix() {
 }
 ```
 
-#### Example 3: Full customization of left and right toolbars
+The result is shown below:
+
+#### Example 2: Fully Custom Left and Right Toolbars
 ``` tsx
 import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
 
 function ChatWithCustomToolbars() {
-  // Left toolbar: Only retain emoji and images
+  // Left toolbar: Only show emoji and image buttons
   const LeftInline = () => (
     <div style={{ display: 'flex', gap: '8px' }}>
       <button>😊</button>
@@ -322,7 +281,7 @@ function ChatWithCustomToolbars() {
     </div>
   );
 
-  // the tool bar on the right: custom send area
+  // Right toolbar: Custom send area
   const RightInline = () => (
     <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
       <span style={{ fontSize: '12px', color: '#666' }}>
@@ -356,19 +315,21 @@ function ChatWithCustomToolbars() {
 }
 ```
 
+The result is shown below:
+
 ### TextEditor
 
 Parameter type: `JSX.Element`
 
-TextEditor replaces the default text editor component. Default value: `undefined`.
+Replaces the default text editor component. Default: `undefined`.
 
-Integrate a rich text editor
+#### Example: Integrating a Custom Editor
 ``` tsx
-import { Chat, MessageInput, useMessageInputState } from '@tencentcloud/chat-uikit-react';
+import { Chat, MessageInput, useChatContext } from '@tencentcloud/chat-uikit-react';
 
 // Custom rich text editor
 function RichTextEditor() {
-  const { sendMessage } = useMessageInputState();
+  const { sendMessage } = useChatContext();
   const [inputValue, setInputValue] = useState('');
 
   const handleContentChange = (content: string) => {
@@ -376,12 +337,11 @@ function RichTextEditor() {
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    // Press Enter to send a message
+    // Press Enter to send message
     if (e.key === 'Enter') {
-      // Trigger send logic
       e.preventDefault();
-      sendMessage(inputValue);
-      Clear input
+      sendMessage({ type: 'textMessage', text: inputValue });
+      // Clear the editable div content
       const editableDiv = document.querySelector('.editable-div');
       if (editableDiv) {
         editableDiv.textContent = '';
@@ -398,8 +358,7 @@ function RichTextEditor() {
       minHeight: '32px',
       maxHeight: '120px',
       overflow: 'auto',
-    }}
-    >
+    }}>
       <div
         contentEditable
         className="editable-div"
@@ -426,32 +385,32 @@ function ChatWithRichTextEditor() {
 }
 ```
 
+The result is shown below:
+
 ### EmojiPicker
 
 Parameter type: `JSX.Element`
 
-EmojiPicker replaces the default emoji selector component with a default value of `undefined`.
+Replaces the default emoji picker component. Default: `undefined`.
 
-#### Example: Custom emoji panel
+#### Example: Custom Emoji Panel
 ``` tsx
-import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
-import { useMessageInputState } from '@/states';
+import { Chat, MessageInput, useChatUIState } from '@tencentcloud/chat-uikit-react';
 
-Custom emoji selector
 function CustomEmojiPicker() {
-  const { insertContent } = useMessageInputState();
+  const { insertInputContent } = useChatUIState();
 
   const emojiCategories = {
-    Common: ['😀', '😂', '🥰', '😍', '🤔', '😭', '😡', '👍']
-    Gestures: ['👋', '🤝', '👏', '🙏', '✌️', '🤞', '🤟', '👌']
-    Animals: ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼']
+    Common: ['😀', '😂', '🥰', '😍', '🤔', '😭', '😡', '👍'],
+    Gestures: ['👋', '🤝', '👏', '🙏', '✌️', '🤞', '🤟', '👌'],
+    Animals: ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼'],
   };
 
   const [activeCategory, setActiveCategory] = useState('Common');
   const [showPicker, setShowPicker] = useState(false);
 
   const insertEmoji = (emoji: string) => {
-    insertContent(emoji);
+    insertInputContent(emoji);
     setShowPicker(false);
   };
 
@@ -475,9 +434,8 @@ function CustomEmojiPicker() {
           padding: '12px',
           width: '280px',
           boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
-        }}
-        >
-          category tag
+        }}>
+          {/* Category tabs */}
           <div style={{ display: 'flex', marginBottom: '8px' }}>
             {Object.keys(emojiCategories).map(category => (
               <button
@@ -503,8 +461,7 @@ function CustomEmojiPicker() {
             display: 'grid',
             gridTemplateColumns: 'repeat(8, 1fr)',
             gap: '4px',
-          }}
-          >
+          }}>
             {emojiCategories[activeCategory].map(emoji => (
               <button
                 key={emoji}
@@ -537,54 +494,56 @@ function ChatWithCustomEmoji() {
 }
 ```
 
+The result is shown below:
+
 ### AttachmentPicker
 
 Parameter type: `JSX.Element`
 
-AttachmentPicker is used to replace the default attachment selector component, default value is `undefined`.
+Replaces the default attachment picker component. Default: `undefined`.
 
-Storage integration attachment selector
+#### Example: Attachment Picker Integrated with Cloud Storage
 ``` tsx
 import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
 
-// Cloud storage attachment selector with seamless integration
+// Attachment picker integrated with cloud storage
 function CloudAttachmentPicker() {
   const [showPicker, setShowPicker] = useState(false);
 
   const attachmentTypes = [
-    { key: 'local', label: 'Local file', icon: '📁' },
-    { key: 'cloud', label: 'Cloud file', icon: '☁️' },
-    { key: 'recent', label: 'Recent files', icon: '🕒' },
+    { key: 'local', label: 'Local File', icon: '📁' },
+    { key: 'cloud', label: 'Cloud File', icon: '☁️' },
+    { key: 'recent', label: 'Recent File', icon: '🕒' },
     { key: 'screenshot', label: 'Screenshot', icon: '📷' }
   ];
 
   const handleAttachmentSelect = async (type: string) => {
     switch (type) {
       case 'local':
-        Open local file selection
+        // Open local file picker
         const input = document.createElement('input');
         input.type = 'file';
         input.multiple = true;
         input.onchange = (e) => {
           const files = (e.target as HTMLInputElement).files;
-          console.log('selected local files:', files);
+          console.log('Selected local files:', files);
         };
         input.click();
         break;
 
       case 'cloud':
-        Open cloud-based file selection
-        console.log('Open cloud-based file selection');
+        // Open cloud file picker
+        console.log('Open cloud file picker');
         break;
 
       case 'recent':
-        Display recent files
-        console.log('display recent files');
+        // Show recent files
+        console.log('Show recent files');
         break;
 
       case 'screenshot':
-        Start screenshot
-        console.log('start screenshot');
+        // Start screenshot
+        console.log('Start screenshot');
         break;
     }
     setShowPicker(false);
@@ -644,6 +603,8 @@ function ChatWithCloudAttachment() {
 }
 ```
 
+The result is shown below:
+
 ## 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.
+MessageInput offers a comprehensive set of features for message input and extensive customization options. By configuring props and leveraging the slot system, you can build input interfaces suited to your specific business needs. Choose the customization approach that best fits your use case, and focus on maintaining optimal user experience and performance.