@tencentcloud/sdk-mcp 1.4.7 → 1.6.0-beta.1

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

@@ -3,23 +3,24 @@
 MessageInput 是一个功能完整的消息输入组件，提供了文本编辑、表情选择、文件附件、发送按钮等核心聊天输入功能。该组件支持丰富的自定义选项，包括输入行为配置、工具栏定制、组件替换和插槽扩展，能够满足不同聊天场景的个性化需求。
 
 ## Props 配置
-| 字段 | 类型 | 默认值 | 描述 |
-| --- | --- | --- | --- |
-| 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 | 自定义视频选择器组件 |
+
+|字段|类型|默认值|描述|
+|---------|---------|---------|---------|
+|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|自定义视频选择器组件|
 
 ## 自定义功能详解
 
@@ -119,12 +120,11 @@ function ChatWithCustomActions() {
 
 #### 示例2: 添加自定义操作按钮 - 客服系统快捷回复
 ``` tsx
-import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
-import { useMessageInputState } from '@/states';
+import { Chat, MessageInput, useChatUIState } from '@tencentcloud/chat-uikit-react';
 
 // 快捷回复组件
 function QuickReplyPicker() {
-  const { setContent } = useMessageInputState();
+  const { insertInputContent } = useChatUIState();
 
   const quickReplies = [
     '您好，很高兴为您服务！',
@@ -134,7 +134,7 @@ function QuickReplyPicker() {
   ];
 
   const handleQuickReply = (text: string) => {
-    setContent(text);
+    insertInputContent(text);
   };
 
   return (
@@ -205,58 +205,7 @@ interface MessageInputSlots {
 
 MessageInput 结构图解
 
-#### 示例1: 添加消息统计显示
-``` tsx
-import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
-import { useMessageInputState } from '@/states';
-
-function ChatWithMessageStats() {
-  const { inputRawValue } = useMessageInputState();
-
-  // 头部工具栏：显示字符统计
-  const HeaderToolbar = () => !inputRawValue
-    ? null
-    : (
-      <div style={{
-        padding: '4px 12px',
-        fontSize: '12px',
-        color: '#666',
-        borderBottom: '1px solid #eee',
-      }}
-      >
-        字符数:
-        {' '}
-        {inputRawValue?.reduce((acc, item) => acc + (item.type === 'text' ? item.content.length : 1), 0) || 0}
-        /500
-      </div>
-    );
-
-  // 底部工具栏：显示发送提示
-  const FooterToolbar = () => (
-    <div style={{
-      padding: '4px 12px',
-      fontSize: '12px',
-      color: '#999',
-      textAlign: 'right'
-    }}>
-      按 Ctrl+Enter 换行
-    </div>
-  );
-
-  return (
-    <Chat>
-      <MessageInput
-        slots={{
-          headerToolbar: HeaderToolbar,
-          footerToolbar: FooterToolbar
-        }}
-      />
-    </Chat>
-  );
-}
-```
-
-#### 示例2: 输入框前后缀功能
+#### 示例1: 输入框前后缀功能
 ``` tsx
 import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
 
@@ -309,7 +258,7 @@ function ChatWithInputPrefixSuffix() {
 }
 ```
 
-#### 示例3: 完全自定义左右侧工具栏
+#### 示例2: 完全自定义左右侧工具栏
 ``` tsx
 import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
 
@@ -362,13 +311,13 @@ function ChatWithCustomToolbars() {
 
 TextEditor 用于替换默认的文本编辑器组件，默认值为 `undefined`。
 
-#### 示例: 集成富文本编辑器
+#### 示例: 集成自定义文本编辑器
 ``` tsx
-import { Chat, MessageInput, useMessageInputState } from '@tencentcloud/chat-uikit-react';
+import { Chat, MessageInput, useChatContext } from '@tencentcloud/chat-uikit-react';
 
 // 自定义富文本编辑器
 function RichTextEditor() {
-  const { sendMessage } = useMessageInputState();
+  const { sendMessage } = useChatContext();
   const [inputValue, setInputValue] = useState('');
 
   const handleContentChange = (content: string) => {
@@ -380,7 +329,7 @@ function RichTextEditor() {
     if (e.key === 'Enter') {
       // 触发发送逻辑
       e.preventDefault();
-      sendMessage(inputValue);
+      sendMessage({ type: 'textMessage', text: inputValue });
       // 清空 editable div 的输入内容
       const editableDiv = document.querySelector('.editable-div');
       if (editableDiv) {
@@ -434,12 +383,10 @@ EmojiPicker 用于替换默认的表情选择器组件，默认值为 `undefined
 
 #### 示例: 自定义表情面板
 ``` tsx
-import { Chat, MessageInput } from '@tencentcloud/chat-uikit-react';
-import { useMessageInputState } from '@/states';
+import { Chat, MessageInput, useChatUIState } from '@tencentcloud/chat-uikit-react';
 
-// 自定义表情选择器
 function CustomEmojiPicker() {
-  const { insertContent } = useMessageInputState();
+  const { insertInputContent } = useChatUIState();
 
   const emojiCategories = {
     常用: ['😀', '😂', '🥰', '😍', '🤔', '😭', '😡', '👍'],
@@ -451,7 +398,7 @@ function CustomEmojiPicker() {
   const [showPicker, setShowPicker] = useState(false);
 
   const insertEmoji = (emoji: string) => {
-    insertContent(emoji);
+    insertInputContent(emoji);
     setShowPicker(false);
   };
 

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

@@ -7,9 +7,9 @@ MessageList 是一个功能强大的聊天消息列表组件，提供了完整
 | --- | --- | --- | --- |
 | alignment | 'left' \\| 'right' \\| 'two-sided' | 'two-sided' | 消息对齐方式。<br>- left: 所有消息左对齐。<br>- right: 所有消息右对齐。<br>- two-sided: 发送消息右对齐，接收消息左对齐。 |
 | enableReadReceipt | boolean | false | 是否启用已读回执功能。 |
-| messageActionList | IMessageAction[] | undefined | 自定义消息操作列表，例如复制、撤回、删除等。 |
+| messageActionList | IMessageAction[] | ['copy', 'recall', 'quote', 'forward', 'delete'] | 自定义消息操作列表，例如复制、撤回、删除等。 |
 | messageAggregationTime | number | 300 (5分钟) | 消息聚合时间间隔（秒），相同发送者在此时间内的连续消息会被聚合显示。 |
-| filter | (message: IMessageModel) => boolean | undefined | 消息过滤函数，用于控制哪些消息需要显示。 |
+| filter | (message: MessageInfo) => boolean | undefined | 消息过滤函数，用于控制哪些消息需要显示。 |
 | className | string | undefined | 自定义 CSS 类名。 |
 | style | React.CSSProperties | undefined | 自定义内联样式。 |
 | Message | React.ComponentType | Message | 自定义消息组件。 |
@@ -44,14 +44,14 @@ interface IMessageAction {
   key: 'copy' | 'recall' | 'quote' | 'forward' | 'delete' | string;
   label?: string;
   icon?: React.ReactNode;
-  onClick?: (message: IMessageModel) => void;
-  visible?: ((message: IMessageModel) => boolean) | boolean;
-  component?: React.ComponentType<{ message: IMessageModel }>;
+  onClick?: (message: MessageInfo) => void;
+  visible?: ((message: MessageInfo) => boolean) | boolean;
+  component?: React.ComponentType<{ message: MessageInfo }>;
   style?: React.CSSProperties;
 }
 ```
 
-可以使用 `useMessageAction` 获取完整的消息操作列表，然后根据需要进行自定义。
+可以使用 `useMessageActions` 获取完整的消息操作列表，然后根据需要进行自定义。
 
 #### 示例1: 变更消息操作列表的顺序
 
@@ -96,8 +96,7 @@ const App = () => {
 3. 只有文本消息可以撤回
 
    ``` tsx
-   import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
-   import { Chat, MessageList, useMessageActions } from '@tencentcloud/chat-uikit-react';
+   import { Chat, MessageList, useMessageActions, MessageType } from '@tencentcloud/chat-uikit-react';
 
    const ChatApp = () => {
      const actions = useMessageActions(['copy', {
@@ -106,7 +105,7 @@ const App = () => {
        style: {
          color: 'orange'
        },
-       visible: (message) => message.type === TUIChatEngine.TYPES.MSG_TEXT,
+       visible: (message) => message.messageType === MessageType.Text,
      }, 'quote', 'forward', 'delete']);
 
      return (
@@ -131,9 +130,9 @@ const customActions = {
   style: {
     color: '#E53888',
   },
-  visible: (message) => message.flow === 'in',
+  visible: (message) => message.isSentBySelf === false,
   onClick: (message) => {
-    yourApi.likeMessage(message.ID);
+    yourApi.likeMessage(message.msgID);
   }
 }
 
@@ -151,21 +150,20 @@ messageAggregationTime 用于设置消息聚合时间间隔，将相同发送者
 
 ### filter
 
-参数类型: `(message: IMessageModel) => boolean`
+参数类型: `(message: MessageInfo) => boolean`
 
 filter 用于设置消息过滤函数，控制哪些消息需要显示，默认值为 `undefined`。
 
 #### 示例: 过滤掉机器人发送的错误消息
 ``` tsx
-import { MessageList } from '@/components/MessageList';
-import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import { MessageList, MessageType } from '@/components/MessageList';
 
 const messageFilter = (message) => {
   // 过滤掉发送者昵称包含 '_robot' 且内容包含 'operation-failed' 的文本消息
   if (
-    message.nick?.includes('_robot')
-    && message.type === TUIChatEngine.TYPES.MSG_TEXT
-    && message.payload?.text?.includes('operation-failed')
+    message.from.nickname?.includes('_robot')
+    && message.messageType === MessageType.Text
+    && message.messagePayload?.text?.includes('operation-failed')
   ) {
     return false;
   }
@@ -197,14 +195,13 @@ Message 用于设置自定义消息组件，替换默认的消息渲染组件，
 
 #### 示例: 自定义 CUSTOM 消息点击跳转的消息组件
 ``` tsx
-import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
-import { Chat, MessageList, Message } from '@tencentcloud/chat-uikit-react';
+import { Chat, MessageList, Message, MessageType } from '@tencentcloud/chat-uikit-react';
 
 function CustomMessage(props) {
   const { message } = props;
 
-  if (message.type === TUIChatEngine.TYPES.MSG_CUSTOM) {
-    const { businessID, ...restData } = JSON.parse(message.payload.data);
+  if (message.messageType === MessageType.Custom) {
+    const { businessID, ...restData } = JSON.parse(message.messagePayload.data);
     if (businessID === 'text_link') {
       return (
         <div>
@@ -238,14 +235,14 @@ MessageTimeDivider 用于设置自定义时间分隔线组件，默认值为内
 
 #### 示例: 区分工作时间的时间分隔线
 ``` tsx
-import { Chat, MessageList, MessageTimeDivider } from '@tencentcloud/chat-uikit-react';
+import { Chat, MessageList, type MessageInfo } from '@tencentcloud/chat-uikit-react';
 
-const BusinessTimeDivider: typeof MessageTimeDivider = ({ prevMessage, currentMessage }) => {
+const BusinessTimeDivider = ({ prevMessage, currentMessage }: { prevMessage: MessageInfo, currentMessage: MessageInfo }) => {
   if (!prevMessage || !currentMessage) return null;
 
   // 对于即将渲染的每一条消息获取当前消息和上一消息的时间，并转换为日期对象，判断是否跨天或间隔超过4小时
-  const currentTime = new Date(currentMessage.time * 1000);
-  const prevTime = new Date(prevMessage.time * 1000);
+  const currentTime = currentMessage.timestamp ?? new Date();
+  const prevTime = prevMessage.timestamp ?? new Date();
 
   // 跨天或间隔超过4小时才显示
   const shouldShow = currentTime.toDateString() !== prevTime.toDateString() ||