@tencentcloud/sdk-mcp 1.3.9 → 1.4.0

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

@@ -3,168 +3,23 @@
 MessageInput 是一个功能完整的消息输入组件，提供了文本编辑、表情选择、文件附件、发送按钮等核心聊天输入功能。该组件支持丰富的自定义选项，包括输入行为配置、工具栏定制、组件替换和插槽扩展，能够满足不同聊天场景的个性化需求。
 
 ## Props 配置
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >字段</td>
-
-<td rowspan="1" colSpan="1" >类型</td>
-
-<td rowspan="1" colSpan="1" >默认值</td>
-
-<td rowspan="1" colSpan="1" >描述</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" >是否自动聚焦到输入框</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" >是否禁用输入组件</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" >是否隐藏发送按钮</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" >输入框占位符文本</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" >根容器自定义 CSS 类名</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" >根容器自定义内联样式</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" >附件选择器显示模式</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" >工具栏操作按钮配置</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" >插槽配置对象</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" >自定义文本编辑器组件</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" >自定义表情选择器组件</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" >自定义附件选择器组件</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" >自定义文件选择器组件</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" >自定义图片选择器组件</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" >自定义视频选择器组件</td>
-</tr>
-</table>
-
+| 字段 | 类型 | 默认值 | 描述 |
+| --- | --- | --- | --- |
+| autoFocus | boolean | true | 是否自动聚焦到输入框 |
+| disabled | boolean | false | 是否禁用输入组件 |
+| hideSendButton | boolean | false | 是否隐藏发送按钮 |
+| placeholder | string | '' | 输入框占位符文本 |
+| className | string | undefined | 根容器自定义 CSS 类名 |
+| style | React.CSSProperties | undefined | 根容器自定义内联样式 |
+| attachmentPickerMode | 'collapsed' \\| 'expanded' | 'collapsed' | 附件选择器显示模式 |
+| actions | MessageInputActions | ['EmojiPicker', 'AttachmentPicker'] | 工具栏操作按钮配置 |
+| slots | MessageInputSlots | undefined | 插槽配置对象 |
+| TextEditor | JSX.Element | undefined | 自定义文本编辑器组件 |
+| EmojiPicker | JSX.Element | undefined | 自定义表情选择器组件 |
+| AttachmentPicker | JSX.Element | undefined | 自定义附件选择器组件 |
+| FilePicker | JSX.Element | undefined | 自定义文件选择器组件 |
+| ImagePicker | JSX.Element | undefined | 自定义图片选择器组件 |
+| VideoPicker | JSX.Element | undefined | 自定义视频选择器组件 |
 
 ## 自定义功能详解
 
@@ -212,17 +67,15 @@ attachmentPickerMode 用于设置附件选择器的显示模式，默认值为 `
 - `collapsed`: 收起模式，点击后展开选项
 
 - `expanded`: 展开模式，直接显示所有选项
-   
 
    > **说明：**
-   > 
+   >
 
    > 默认的 AttachmentPicker 意为附件选择器，包括文件选择、图片选择和视频选择。
-   > 
+   >
 >   1. 当 attachmentPickerModel 为 "collapsed" 时，点击附件选择器会弹出一个 popup 菜单展示文件选择、图片选择、视频选择。
 >   2. 当 attachmentPickerModel 为 "expanded" 时，附件选择器会默认展开，平铺展示文件选择、图片选择、视频选择。
 
-
 ### actions
 
 参数类型: `MessageInputActions`
@@ -255,7 +108,7 @@ import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
 function ChatWithCustomActions() {
   // 自定义按钮顺序：文件、图片、视频、表情
   const customActions = ['FilePicker', 'ImagePicker', 'VideoPicker', 'EmojiPicker'];
-  
+
   return (
     <Chat>
       <MessageInput actions={customActions} />
@@ -272,7 +125,7 @@ import { useMessageInputState } from '@/states';
 // 快捷回复组件
 function QuickReplyPicker() {
   const { setContent } = useMessageInputState();
-  
+
   const quickReplies = [
     '您好，很高兴为您服务！',
     '请稍等，我来为您查询...',
@@ -325,7 +178,7 @@ function CustomerServiceChat() {
     'EmojiPicker',
     'FilePicker'
   ];
-  
+
   return (
     <Chat>
       <MessageInput actions={actions} />
@@ -350,11 +203,8 @@ interface MessageInputSlots {
 }
 ```
 
-![MessageInput 结构图解](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/7d08e80a559011f0989352540044a08e.png)
-
 MessageInput 结构图解
 
-
 #### 示例1: 添加消息统计显示
 ``` tsx
 import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
@@ -362,7 +212,7 @@ import { useMessageInputState } from '@/states';
 
 function ChatWithMessageStats() {
   const { inputRawValue } = useMessageInputState();
-  
+
   // 头部工具栏：显示字符统计
   const HeaderToolbar = () => !inputRawValue
     ? null
@@ -395,7 +245,7 @@ function ChatWithMessageStats() {
 
   return (
     <Chat>
-      <MessageInput 
+      <MessageInput
         slots={{
           headerToolbar: HeaderToolbar,
           footerToolbar: FooterToolbar
@@ -413,9 +263,9 @@ import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
 function ChatWithInputPrefixSuffix() {
   // 输入框前缀：@提醒功能
   const InputPrefix = () => (
-    <button 
-      style={{ 
-        border: 'none', 
+    <button
+      style={{
+        border: 'none',
         background: 'transparent',
         color: '#1890ff',
         cursor: 'pointer'
@@ -448,7 +298,7 @@ function ChatWithInputPrefixSuffix() {
 
   return (
     <Chat>
-      <MessageInput 
+      <MessageInput
         slots={{
           inputPrefix: InputPrefix,
           inputSuffix: InputSuffix
@@ -495,7 +345,7 @@ function ChatWithCustomToolbars() {
 
   return (
     <Chat>
-      <MessageInput 
+      <MessageInput
         slots={{
           leftInline: LeftInline,
           rightInline: RightInline
@@ -700,7 +550,7 @@ import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
 // 集成云存储的附件选择器
 function CloudAttachmentPicker() {
   const [showPicker, setShowPicker] = useState(false);
-  
+
   const attachmentTypes = [
     { key: 'local', label: '本地文件', icon: '📁' },
     { key: 'cloud', label: '云端文件', icon: '☁️' },
@@ -721,17 +571,17 @@ function CloudAttachmentPicker() {
         };
         input.click();
         break;
-        
+
       case 'cloud':
         // 打开云端文件选择
         console.log('打开云端文件选择');
         break;
-        
+
       case 'recent':
         // 显示最近文件
         console.log('显示最近文件');
         break;
-        
+
       case 'screenshot':
         // 开始截图
         console.log('开始截图');
@@ -742,13 +592,13 @@ function CloudAttachmentPicker() {
 
   return (
     <div style={{ position: 'relative' }}>
-      <button 
+      <button
         onClick={() => setShowPicker(!showPicker)}
         style={{ border: 'none', background: 'transparent', cursor: 'pointer' }}
       >
         📎
       </button>
-      
+
       {showPicker && (
         <div style={{
           position: 'absolute',
@@ -796,4 +646,4 @@ function ChatWithCloudAttachment() {
 
 ## 总结
 
-MessageInput 组件提供了完整的消息输入功能和丰富的自定义选项。通过合理配置 Props 和使用插槽系统，您可以创建出符合特定业务需求的输入界面。建议根据实际使用场景选择合适的自定义方案，并注意保持良好的用户体验和性能表现。 
+MessageInput 组件提供了完整的消息输入功能和丰富的自定义选项。通过合理配置 Props 和使用插槽系统，您可以创建出符合特定业务需求的输入界面。建议根据实际使用场景选择合适的自定义方案，并注意保持良好的用户体验和性能表现。

package/resource/doc/{chatuikit → chatkit}/react/components/message-list.md

@@ -3,108 +3,17 @@
 MessageList 是一个功能强大的聊天消息列表组件，提供了完整的消息展示、交互和自定义功能。该组件支持消息分组、已读回执、消息操作、滚动控制等核心聊天功能，同时提供了丰富的自定义选项来满足不同的业务需求。
 
 ## Props 配置
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >字段</td>
-
-<td rowspan="1" colSpan="1" >类型</td>
-
-<td rowspan="1" colSpan="1" >默认值</td>
-
-<td rowspan="1" colSpan="1" >描述</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[alignment](https://write.woa.com/document/181344255270170624)</td>
-
-<td rowspan="1" colSpan="1" >'left' \| 'right' \| 'two-sided'</td>
-
-<td rowspan="1" colSpan="1" >'two-sided'</td>
-
-<td rowspan="1" colSpan="1" >消息对齐方式。<br>- left: 所有消息左对齐。<br>- right: 所有消息右对齐。<br>- two-sided: 发送消息右对齐，接收消息左对齐。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[enableReadReceipt](https://write.woa.com/document/181344255270170624)</td>
-
-<td rowspan="1" colSpan="1" >boolean</td>
-
-<td rowspan="1" colSpan="1" >false</td>
-
-<td rowspan="1" colSpan="1" >是否启用已读回执功能。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[messageActionList](https://write.woa.com/document/181344255270170624)</td>
-
-<td rowspan="1" colSpan="1" >IMessageAction[]</td>
-
-<td rowspan="1" colSpan="1" >undefined</td>
-
-<td rowspan="1" colSpan="1" >自定义消息操作列表，例如复制、撤回、删除等。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[messageAggregationTime](https://write.woa.com/document/181344255270170624)</td>
-
-<td rowspan="1" colSpan="1" >number</td>
-
-<td rowspan="1" colSpan="1" >300 (5分钟)</td>
-
-<td rowspan="1" colSpan="1" >消息聚合时间间隔（秒），相同发送者在此时间内的连续消息会被聚合显示。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[filter](https://write.woa.com/document/181344255270170624)</td>
-
-<td rowspan="1" colSpan="1" >(message: IMessageModel) => boolean</td>
-
-<td rowspan="1" colSpan="1" >undefined</td>
-
-<td rowspan="1" colSpan="1" >消息过滤函数，用于控制哪些消息需要显示。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[className](https://write.woa.com/document/181344255270170624)</td>
-
-<td rowspan="1" colSpan="1" >string</td>
-
-<td rowspan="1" colSpan="1" >undefined</td>
-
-<td rowspan="1" colSpan="1" >自定义 CSS 类名。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[style](https://write.woa.com/document/181344255270170624)</td>
-
-<td rowspan="1" colSpan="1" >React.CSSProperties</td>
-
-<td rowspan="1" colSpan="1" >undefined</td>
-
-<td rowspan="1" colSpan="1" >自定义内联样式。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[Message](https://write.woa.com/document/181344255270170624)</td>
-
-<td rowspan="1" colSpan="1" >React.ComponentType</td>
-
-<td rowspan="1" colSpan="1" >Message</td>
-
-<td rowspan="1" colSpan="1" >自定义消息组件。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[MessageTimeDivider](https://write.woa.com/document/181344255270170624)</td>
-
-<td rowspan="1" colSpan="1" >React.ComponentType</td>
-
-<td rowspan="1" colSpan="1" >MessageTimeDivider</td>
-
-<td rowspan="1" colSpan="1" >自定义时间分隔线组件。</td>
-</tr>
-</table>
-
+| 字段 | 类型 | 默认值 | 描述 |
+| --- | --- | --- | --- |
+| alignment | 'left' \\| 'right' \\| 'two-sided' | 'two-sided' | 消息对齐方式。<br>- left: 所有消息左对齐。<br>- right: 所有消息右对齐。<br>- two-sided: 发送消息右对齐，接收消息左对齐。 |
+| enableReadReceipt | boolean | false | 是否启用已读回执功能。 |
+| messageActionList | IMessageAction[] | undefined | 自定义消息操作列表，例如复制、撤回、删除等。 |
+| messageAggregationTime | number | 300 (5分钟) | 消息聚合时间间隔（秒），相同发送者在此时间内的连续消息会被聚合显示。 |
+| filter | (message: IMessageModel) => boolean | undefined | 消息过滤函数，用于控制哪些消息需要显示。 |
+| className | string | undefined | 自定义 CSS 类名。 |
+| style | React.CSSProperties | undefined | 自定义内联样式。 |
+| Message | React.ComponentType | Message | 自定义消息组件。 |
+| MessageTimeDivider | React.ComponentType | MessageTimeDivider | 自定义时间分隔线组件。 |
 
 ## Prop 字段详解
 
@@ -119,7 +28,6 @@ alignment 用于设置消息对齐方式，支持 `left`、`right`、`two-sided`
 
 - `right`: 所有消息位于右侧
 
-
 ### enableReadReceipt
 
 参数类型: `boolean`
@@ -190,7 +98,7 @@ const App = () => {
    ``` tsx
    import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
    import { Chat, MessageList, useMessageActions } from '@tencentcloud/chat-uikit-react';
-   
+
    const ChatApp = () => {
      const actions = useMessageActions(['copy', {
        key: 'recall',
@@ -200,7 +108,7 @@ const App = () => {
        },
        visible: (message) => message.type === TUIChatEngine.TYPES.MSG_TEXT,
      }, 'quote', 'forward', 'delete']);
-   
+
      return (
        <Chat>
          <MessageList messageActionList={actions} />
@@ -255,7 +163,7 @@ import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
 const messageFilter = (message) => {
   // 过滤掉发送者昵称包含 '_robot' 且内容包含 'operation-failed' 的文本消息
   if (
-    message.nick?.includes('_robot') 
+    message.nick?.includes('_robot')
     && message.type === TUIChatEngine.TYPES.MSG_TEXT
     && message.payload?.text?.includes('operation-failed')
   ) {
@@ -334,27 +242,27 @@ import { Chat, MessageList, MessageTimeDivider } from '@tencentcloud/chat-uikit-
 
 const BusinessTimeDivider: typeof MessageTimeDivider = ({ prevMessage, currentMessage }) => {
   if (!prevMessage || !currentMessage) return null;
-  
+
   // 对于即将渲染的每一条消息获取当前消息和上一消息的时间，并转换为日期对象，判断是否跨天或间隔超过4小时
   const currentTime = new Date(currentMessage.time * 1000);
   const prevTime = new Date(prevMessage.time * 1000);
-  
+
   // 跨天或间隔超过4小时才显示
   const shouldShow = currentTime.toDateString() !== prevTime.toDateString() ||
                     (currentTime.getTime() - prevTime.getTime()) > 4 * 60 * 60 * 1000;
-  
+
   if (!shouldShow) return null;
-  
+
   // 判断工作时间 (9:00-18:00, 周一到周五)
   const isWorkingTime = () => {
     const hour = currentTime.getHours();
     const day = currentTime.getDay();
     return day >= 1 && day <= 5 && hour >= 9 && hour <= 18;
   };
-  
+
   const timeLabel = isWorkingTime() ? '工作时间' : '非工作时间';
   const timeColor = isWorkingTime() ? '#52c41a' : '#faad14';
-  
+
   return (
     <div style={{ textAlign: 'center', margin: '16px 0' }}>
       <span style={{
@@ -382,4 +290,4 @@ function ChatApp() {
 
 ## 总结
 
-MessageList 组件提供了完整的消息列表功能和丰富的自定义选项。通过合理配置 Props 和自定义组件，您可以创建出符合业务需求的聊天界面。建议在实际使用中根据具体场景选择合适的配置。
+MessageList 组件提供了完整的消息列表功能和丰富的自定义选项。通过合理配置 Props 和自定义组件，您可以创建出符合业务需求的聊天界面。建议在实际使用中根据具体场景选择合适的配置。