@tencent-rtc/mcp 1.3.8 → 1.4.0

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

@@ -2,7 +2,6 @@
 
 The MessageList component is the core component of the chat UI, responsible for showing the message list and providing abundant interaction features. It supports advanced features like message aggregation, auto-scroll, historical message loading, and read receipts, ideal for building highly customizable chat interfaces. Within the component, it handles scrolling behavior, message loading logic, and message grouping display, delivering a smooth browsing experience for users.
 
-
 ## Features
 -Message display: support various message types (text, image, video, file, custom message) for rendering and display.
 
@@ -31,154 +30,38 @@ The following example shows the simplest usage of MessageList.
   </UIKitProvider>
 </template>
 
-
-
-
 <script lang="ts" setup>
 import { UIKitProvider, Chat, MessageList, MessageInput } from '@tencentcloud/chat-uikit-vue3';
 </script>
 
-
 ```
 
 **Note:**
-> 
+>
 Practical advice:
-> 
+>
 > 1. The MessageList component must be placed in UIKitProvider and Chat containers.
 > 2. MessageList is recommended to be used in conjunction with the MessageInput component.
-> 3. MessageList will default read the currently active session. If you do not integrate the ConversationList component, see the integrated chat only (https://write.woa.com/document/181344022523346944) document.
-
-
-
+> 3. MessageList will default read the currently active session. If you do not integrate the ConversationList component, see the integrated chat only () document.
 
 ## Props
-<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" >[alignment](https://write.woa.com/#alignment)</td>
-
-
-<td rowspan="1" colSpan="1" >'left' \| 'right' \| 'two-sided'</td>
-
-
-<td rowspan="1" colSpan="1" >'two-sided'</td>
-
-
-<td rowspan="1" colSpan="1" >Message alignment mode, supports align left, align right and justify.</td>
-</tr>
-
-
-<tr>
-<td rowspan="1" colSpan="1" >[messageAggregationTime](https://write.woa.com/#messageAggregationTime)</td>
-
-
-<td rowspan="1" colSpan="1" >number</td>
-
-
-<td rowspan="1" colSpan="1" >300 (seconds)</td>
-
-
-<td rowspan="1" colSpan="1" >Message aggregation interval (seconds). Messages from the same sender sent within this time will be aggregated. Set to 0 to disable message aggregation.</td>
-</tr>
-
-
-<tr>
-<td rowspan="1" colSpan="1" >[enableReadReceipt](https://write.woa.com/#enableReadReceipt)</td>
-
-
-<td rowspan="1" colSpan="1" >boolean</td>
-
-
-<td rowspan="1" colSpan="1" >false</td>
-
-
-<td rowspan="1" colSpan="1" >Whether to enable the message read receipt feature.</td>
-</tr>
-
-
-<tr>
-<td rowspan="1" colSpan="1" >[messageActionList](https://write.woa.com/#messageActionList)</td>
-
-
-<td rowspan="1" colSpan="1" >MessageAction[]</td>
-
-
-<td rowspan="1" colSpan="1" >undefined</td>
-
-
-<td rowspan="1" colSpan="1" >Custom message operations list, such as recall and delete.</td>
-</tr>
-
-
-<tr>
-<td rowspan="1" colSpan="1" >[filter](https://write.woa.com/#filter)</td>
-
-
-<td rowspan="1" colSpan="1" >(message: MessageModel) => boolean</td>
-
-
-<td rowspan="1" colSpan="1" >undefined</td>
-
-
-<td rowspan="1" colSpan="1" >Custom message filter function, used to control which messages should display.</td>
-</tr>
-
-
-<tr>
-<td rowspan="1" colSpan="1" >[Message](https://write.woa.com/#Message)</td>
-
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-
-<td rowspan="1" colSpan="1" >undefined</td>
-
-
-<td rowspan="1" colSpan="1" >Custom message component for rendering individual messages.</td>
-</tr>
-
-
-<tr>
-<td rowspan="1" colSpan="1" >[MessageTimeDivider](https://write.woa.com/#MessageTimeDivider)</td>
-
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-
-<td rowspan="1" colSpan="1" >undefined</td>
-
-
-<td rowspan="1" colSpan="1" >Custom message time segmentation component.</td>
-</tr>
-</table>
-
-
-
+| Field | Type | Default Value | Description |
+| --- | --- | --- | --- |
+| alignment | 'left' \\| 'right' \\| 'two-sided' | 'two-sided' | Message alignment mode, supports align left, align right and justify. |
+| messageAggregationTime | number | 300 (seconds) | Message aggregation interval (seconds). Messages from the same sender sent within this time will be aggregated. Set to 0 to disable message aggregation. |
+| enableReadReceipt | boolean | false | Whether to enable the message read receipt feature. |
+| messageActionList | MessageAction[] | undefined | Custom message operations list, such as recall and delete. |
+| filter | (message: MessageModel) => boolean | undefined | Custom message filter function, used to control which messages should display. |
+| Message | Component | undefined | Custom message component for rendering individual messages. |
+| MessageTimeDivider | Component | undefined | Custom message time segmentation component. |
 
 ## Props detailed introduction
 
-
 ### alignment
 -Type: 'left' | 'right' | 'two-sided'
 
-
 - Details: Message alignment mode in the list. `'left'` means all messages align left, `'right'` means all messages align right, `'two-sided'` means sender messages align right and recipient messages align left. Default value is `'two-sided'`.
 
-
 ### messageAggregationTime
 - Type: number
 
@@ -193,7 +76,6 @@ Practical advice:
 
 - Details: Defines a list of custom actions that can be performed on messages, such as copy, recall, forward, and delete. This is a complex type that can be customized by importing an array of `MessageAction` objects. Default value is `undefined`, and the component will provide a default action list based on the `useMessageActions` hook.
 
-
    The current default sequence is: `['copy', 'recall', 'quote', 'forward', 'delete']`.
 
    **MessageAction** type definition:
@@ -201,7 +83,7 @@ Practical advice:
    ``` typescript
    import type { Component } from 'vue';
    import type { MessageModel } from '@tencentcloud/chat-uikit-vue3';
-   
+
    interface MessageAction {
      /** Unique operation identifier */
      key: string;
@@ -222,85 +104,59 @@ Practical advice:
    }
    ```
 
-
    Use the `useMessageActions` hook to obtain the complete message actions list, then customize as needed. The `useMessageActions` hook accepts an optional parameter, which can be an array of action keys (`string`) or complete `MessageAction` objects. If a `string` array is input, the default operation configuration will be used. If `MessageAction` objects are input, they will merge and override the default configuration.
 
-
-
-
 #### Example code 1: Change the order of message actions list
 
-
 The following code places the `forward` action first in the message actions list.
 ``` typescript
 <template>
   <MessageList :messageActionList="actions" />
 </template>
 
-
 <script lang="ts" setup>
 import { MessageList, useMessageActions } from '@tencentcloud/chat-uikit-vue3';
 
-
 const actions = useMessageActions(['forward', 'copy', 'recall', 'quote', 'delete']);
 </script>
 ```
 
-
 example effect
 
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/8eaaf60188a811f0818a52540099c741.png)
-
-
-
-
 #### Example code 2: Only show some message actions
 
-
 Only show `copy` and `recall` operations, hide other operations.
 ``` typescript
 <template>
   <MessageList :messageActionList="actions" />
 </template>
 
-
 <script lang="ts" setup>
 import { MessageList, useMessageActions } from '@tencentcloud/chat-uikit-vue3';
 
-
 const actions = useMessageActions(['copy', 'recall']);
 </script>
 ```
 
-
 example effect
 
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/d481cee988a811f0b321525400e889b2.png)
-
-
 #### Example code 3: Customize message action style and logic
 
-
 Here is an example of a custom forward operation:
 1. Change the tag to 'Forward ⚠️'
 
-
 2. Change the color to orange
 
-
 3. Only messages from others can be forwarded
 
-
    ``` typescript
    <template>
      <MessageList :messageActionList="actions" />
    </template>
-   
+
    <script lang="ts" setup>
    import { MessageList, useMessageActions } from '@tencentcloud/chat-uikit-vue3';
-   
+
    const actions = useMessageActions(['copy', {
      key: 'forward',
      label: 'Forward ⚠️',
@@ -312,29 +168,19 @@ Here is an example of a custom forward operation:
    </script>
    ```
 
-
    example effect
 
-
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/9aa48621824811f0b1df52540044a08e.png)
-
-
-
-
 #### Example code 4: Add new custom message action
 
-
 Assume messages need to be customized, such as only allowing others' sent messages to be tagged as 'like', and inserting this after the 'undo' operation.
 ``` typescript
 <template>
   <MessageList :messageActionList="actions" />
 </template>
 
-
 <script lang="ts" setup>
 import { MessageList, useMessageActions } from '@tencentcloud/chat-uikit-vue3';
 
-
 const customLikeAction = {
   key: 'like',
   label: 'Like',
@@ -346,48 +192,33 @@ const customLikeAction = {
   },
 };
 
-
 const actions = useMessageActions(['forward', 'copy', 'recall', customLikeAction, 'quote', 'delete']);
 </script>
 ```
 
-
 example effect
 
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/9f5aa2e4824b11f0a8ae5254005ef0f7.png)
-
-
-
-
 ### filter
 - type:((message: MessageModel) => boolean) | undefined
 
-
 -A custom filter function for filtering messages before list rendering. The function receives a `MessageModel` message object and returns a boolean value. If it returns `true`, the message will be displayed; if `false`, the message will not be displayed. The default value is `undefined`, meaning no additional filtering is performed (but the component will filter out messages with `isDeleted` set to `true` by default).
 
-
-
-
 #### Example code: Filter out text messages sent by robots
 
-
 This example shows how to use the `filter` prop to filter out specific messages sent by users.
 ``` typescript
 <template>
   <MessageList :filter="customMessageFilter" />
 </template>
 
-
 <script lang="ts" setup>
 import { MessageList, MessageType } from '@tencentcloud/chat-uikit-vue3';
 import type { MessageModel } from '@tencentcloud/chat-uikit-vue3';
 
-
 // Define custom message filter function
 const customMessageFilter = (message: MessageModel): boolean => {
   if (
-    message.nick?.includes('_robot') 
+    message.nick?.includes('_robot')
     && message.type === MessageType.TEXT as any
   ) {
     return false;
@@ -397,37 +228,26 @@ const customMessageFilter = (message: MessageModel): boolean => {
 </script>
 ```
 
-
 ### Message
 - Type: Component | undefined
 
-
 -Description: Custom render for individual messages in the message list.
 
-
-
-
    If you need full control over message display style and internal logic, you can pass in a Vue component to replace the default message rendering. The custom component will receive props like `message` (IMessageModel type), `alignment`, and `messageActionList`. By default, the internal default message component `Message` is used.
 
-
-
-
 #### Example code: CUSTOM message component for message click redirection
 
-
 This example shows how to create a custom message component to render specific `CUSTOM` messages (`businessID` as `text_link`) as clickable URLs.
 ``` typescript
 <template>
   <MessageList :Message="CustomMessage" />
 </template>
 
-
 <script lang="ts" setup>
 import { defineComponent, h } from 'vue';
 import { MessageList, Message, MessageType } from '@tencentcloud/chat-uikit-vue3';
 import type { MessageModel } from '@tencentcloud/chat-uikit-vue3';
 
-
 const CustomMessage = defineComponent({
   name: 'CustomMessage',
   props: {
@@ -441,7 +261,6 @@ const CustomMessage = defineComponent({
     return () => {
       const { message } = props;
 
-
       if (message.type === MessageType.CUSTOM as any) {
         const { businessID, ...restData } = JSON.parse(message.payload.data);
         if (businessID === 'text_link') {
@@ -458,7 +277,6 @@ const CustomMessage = defineComponent({
 });
 </script>
 
-
 <style scoped>
 .custom-text-link-message {
   padding: 8px;
@@ -468,7 +286,6 @@ const CustomMessage = defineComponent({
   margin-bottom: 4px;
 }
 
-
 .custom-text-link-message a {
   color: #1890ff;
   text-decoration: underline;
@@ -476,48 +293,28 @@ const CustomMessage = defineComponent({
 </style>
 ```
 
-
 example effect
 
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/abd6f2ea825411f0b1df52540044a08e.png)
-
-
-
-
 ### MessageTimeDivider
 - Type: Component | undefined
 
-
 - Description: for custom rendering time segmentation component.
 
-
-
-
    You can pass in a Vue component to replace the default time divider rendering. The custom component will receive props like `currentMessage` (the associated message of the current time divider) and `previousMessage` (the previous message), and can determine the display logic and style based on this information. By default, it uses the internal `MessageTimeDivider` component.
 
-
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/4d5e72b688ae11f0974b52540044a08e.png)
-
-
-
-
 #### Example code: Custom time divider component to display whether it's working hours
 
-
 This example shows how to create a custom time dividing line component, determine whether the time of the last message is a working hour, and display the appropriate tag and color.
 ``` typescript
 <template>
   <MessageList :MessageTimeDivider="BusinessTimeDivider" />
 </template>
 
-
 <script lang="ts" setup>
 import { defineComponent, h } from 'vue';
 import { MessageList } from '@tencentcloud/chat-uikit-vue3';
 import type { MessageModel } from '@tencentcloud/chat-uikit-vue3';
 
-
 const BusinessTimeDivider = defineComponent({
   name: 'BusinessTimeDivider',
   props: {
@@ -535,21 +332,17 @@ const BusinessTimeDivider = defineComponent({
       return () => null;
     }
 
-
     const currentTime = new Date(props.currentMessage.time * 1000);
     const prevTime = new Date(props.previousMessage.time * 1000);
 
-
     // Display only when crossing days or the interval exceeds 4 hours
     const shouldShow = currentTime.toDateString() !== prevTime.toDateString()
       || (currentTime.getTime() - prevTime.getTime()) > 4 * 60 * 60 * 1000;
 
-
     if (!shouldShow) {
       return () => null;
     }
 
-
     Working hours (9:00-18:00, Monday through Friday)
     const isWorkingTime = () => {
       const hour = currentTime.getHours();
@@ -557,11 +350,9 @@ const BusinessTimeDivider = defineComponent({
       return day >= 1 && day <= 5 && hour >= 9 && hour <= 18;
     };
 
-
     const timeLabel = isWorkingTime() ? 'Working' : 'Non working';
     const timeColor = isWorkingTime() ? '#52c41a' : '#faad14';
 
-
     return () =>
       h('div', { style: { textAlign: 'center', margin: '16px 0' } }, [
         h('span', {
@@ -580,18 +371,10 @@ const BusinessTimeDivider = defineComponent({
 </script>
 ```
 
-
 example effect
 
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/1de6fe94825711f0a8ae5254005ef0f7.png)
-
-
-
-
 supplementary information
 
-
 Common fields of the `MessageModel` type:
 ``` typescript
 // API definition for MessageModel, see the @tencentcloud/chat-uikit-engine document for details
@@ -613,7 +396,6 @@ interface MessageModel {
   // ... other attributes
 }
 
-
 enum MessageType {
   TEXT,     // Text
   IMAGE
@@ -627,36 +409,25 @@ enum MessageType {
   MERGER,   // Combine and forward
 }
 
-
 ```
 
-
 For the complete content of MessageModel, see the [TUIChatEngine reference document](https://web.sdk.qcloud.com/im/doc/chat-engine/IMessageModel.html).
 
-
 Reference
-- [Customize Component - UIKitProvider](https://write.woa.com/document/187032638782849024)
-
-
-- [Customize Component - ConversationList](https://write.woa.com/document/186960319111872512)
-
+- Customize Component - UIKitProvider
 
-- [Customize Component - Chat](https://write.woa.com/document/187778215983329280)
+- Customize Component - ConversationList
 
+- Customize Component - Chat
 
-- [Customize Component - MessageInput](https://write.woa.com/document/187058763983568896)
+- Customize Component - MessageInput
 
+- Customize Component - ChatSetting
 
-- [Customize Component - ChatSetting](https://write.woa.com/document/187321409859108864)
-
-
-- [Customize Component - ContactList](https://write.woa.com/document/187595466274463744)
-
-
-- [Customize Component - Search](https://write.woa.com/document/187595449195040768)
+- Customize Component - ContactList
 
+- Customize Component - Search
 
 - [chat-uikit-vue3 npm](https://www.npmjs.com/package/@tencentcloud/chat-uikit-vue3)
 
-
 - [github Demo](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/demos/rtcube-vite-vue3)