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

package/resource/doc/chatkit/react/components/message-list.md

@@ -1,293 +0,0 @@
-# Component Overview
-
-MessageList is a powerful chat message list component with complete message display, interaction, and custom function. The component support includes message grouping, read receipt, message manipulation, scroll control, and other core chat features, while providing various custom options to satisfy different business needs.
-
-## Props Configuration
-| Field | Type | Default Value | Description |
-| --- | --- | --- | --- |
-| alignment | 'left' \\| 'right' \\| 'two-sided' | 'two-sided' | Message alignment mode.<br>- left: Align all messages to the left.<br>- right: Align all messages to the right.<br>- two-sided: Right-align sent messages and left-align received messages. |
-| enableReadReceipt | boolean | false | Whether to enable the read receipt feature. |
-| messageActionList | IMessageAction[] | undefined | Custom message operation list, such as copy, revoke, delete. |
-| messageAggregationTime | number | 300 (5 minutes) | Message aggregation interval (seconds). Consecutive messages from the same sender within this period will be aggregated and displayed. |
-| filter | (message: IMessageModel) => boolean | undefined | Message filtering function, used to control which messages to display. |
-| className | string | undefined | Custom CSS class name. |
-| style | React.CSSProperties | undefined | Custom inline style. |
-| Message | React.ComponentType | Message | Custom message component. |
-| MessageTimeDivider | React.ComponentType | MessageTimeDivider | Custom time dividing line component. |
-
-## Prop field explanation
-
-### alignment
-
-Parameter type: `'left' | 'right' | 'two-sided'`
-
-alignment is used to set the message alignment mode, supporting three modes: `left`, `right`, and `two-sided`. Default value is `'two-sided'`.
-- `two-sided`: Non-person messages are on the left, my messages are on the right
-
-- `left`: All messages are on the left
-
-- `right`: All messages are on the right
-
-### enableReadReceipt
-
-Parameter type: `boolean`
-
-enableReadReceipt is used to set whether the message read receipt feature is enabled. Default value: `false`.
-
-### messageActionList
-
-Parameter type: `IMessageAction[]`
-
-The messageActionList is used to set the actions list of messages, such as copy, recall, and delete. The default value is the complete message operation list `['copy', 'recall', 'quote', 'forward', 'delete']`.
-``` tsx
-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 }>;
-  style?: React.CSSProperties;
-}
-```
-
-Use `useMessageAction` to obtain the complete message operation list, then customize as needed.
-
-#### Example 1: Change the order of the action list
-
-Assuming the message actions list is displayed in the order: `forward`, `copy`, `recall`, `quote`, `delete`.
-``` tsx
-import { Chat, MessageList, useMessageActions } from '@tencentcloud/chat-uikit-react';
-
-const App = () => {
-  const actions = useMessageActions(['forward', 'copy', 'recall', 'quote', 'delete']);
-  return (
-    <Chat>
-      <MessageList messageActionList={actions} />
-    </Chat>
-  );
-}
-```
-
-#### Example 2: Only show some message actions
-
-Only show `forward`, `copy`, `recall` operations.
-``` tsx
-import { Chat, MessageList, useMessageActions } from '@tencentcloud/chat-uikit-react';
-
-const App = () => {
-  const actions = useMessageActions(['forward', 'copy', 'recall']);
-  return (
-    <Chat>
-      <MessageList messageActionList={actions} />
-    </Chat>
-  );
-}
-
-```
-
-#### Example 3: Customize the style of message actions
-
-Here is an example of a custom recall operation:
-1. Change the tag to 'recall ⚠️'
-
-2. Change the color to orange
-
-3. Only text messages can be withdrawn
-
-   ``` 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',
-       label: 'Recall ⚠️',
-       style: {
-         color: 'orange'
-       },
-       visible: (message) => message.type === TUIChatEngine.TYPES.MSG_TEXT,
-     }, 'quote', 'forward', 'delete']);
-
-     return (
-       <Chat>
-         <MessageList messageActionList={actions} />
-       </Chat>
-     );
-   }
-   ```
-
-#### Example 4: Add new custom message actions
-
-Assuming custom message actions are required, for example, only messages sent by others can be tagged as 'like' and inserted after the 'recall' operation.
-``` tsx
-import { useMessageAction } from '@tencentcloud/chat-uikit-react';
-import { yourApi } from '@/api/yourApi';
-
-const customActions = {
-  key: 'like',
-  label: 'Like',
-  icon: <span>👍</span>,
-  style: {
-    color: '#E53888',
-  },
-  visible: (message) => message.flow === 'in',
-  onClick: (message) => {
-    yourApi.likeMessage(message.ID);
-  }
-}
-
-function ChatApp() {
-  const actions = useMessageAction(['forward', 'copy', 'recall', customActions, 'quote', 'delete']);
-  return <MessageList messageActionList={actions} />;
-}
-```
-
-### messageAggregationTime
-
-Parameter type: `number`
-
-messageAggregationTime is used to set the message aggregation interval. Consecutive messages from the same sender will be aggregated and displayed. Default value: `300` (seconds).
-
-### filter
-
-Parameter type: `(message: IMessageModel) => boolean`
-
-filter is used to set the message filtering function to control which messages to display. Default value: `undefined`.
-
-#### Example: Filter out error messages sent by robots
-``` tsx
-import { MessageList } from '@/components/MessageList';
-import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
-
-const messageFilter = (message) => {
-  // Filter out text messages where sender nickname contains '_robot' and content contains 'operation-failed'
-  if (
-    message.nick?.includes('_robot')
-    && message.type === TUIChatEngine.TYPES.MSG_TEXT
-    && message.payload?.text?.includes('operation-failed')
-  ) {
-    return false;
-  }
-  return true;
-};
-
-function ChatApp() {
-  return <MessageList filter={messageFilter} />;
-}
-```
-
-### className
-
-Parameter type: `string`
-
-className is used to set the root container's custom CSS class name. Default value: `undefined`.
-
-### style
-
-Parameter type: `React.CSSProperties`
-
-style is used to set the root container's custom inline style. Default value: `undefined`.
-
-### Message
-
-Parameter type: `React.ComponentType`
-
-Message is used to set the custom message component, replacing the default message rendering component. Default value: built-in `Message` component.
-
-#### Example: Custom CUSTOM message click redirection component of messages
-``` tsx
-import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
-import { Chat, MessageList, Message } 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 (businessID === 'text_link') {
-      return (
-        <div>
-          <div>{restData.text}</div>
-          <a href={restData.link}>
-            Redirect to external website address {restData.link}
-          </a>
-        </div>
-      );
-    }
-  } else {
-    Other message types use the default message component
-    return <Message {...props} />;
-  }
-}
-
-function ChatApp() {
-  return (
-    <Chat>
-      <MessageList Message={CustomMessage} />
-    </Chat>
-  );
-}
-```
-
-### MessageTimeDivider
-
-Parameter type: `React.ComponentType`
-
-MessageTimeDivider is used to set the custom time dividing line component. Default value: built-in `MessageTimeDivider` component.
-
-#### Example: Case-sensitive working hour dividing line
-``` tsx
-import { Chat, MessageList, MessageTimeDivider } from '@tencentcloud/chat-uikit-react';
-
-const BusinessTimeDivider: typeof MessageTimeDivider = ({ prevMessage, currentMessage }) => {
-  if (!prevMessage || !currentMessage) return null;
-
-  For each message to be rendered, get the current and previous message time, convert them to date objects, and determine whether they cross days or exceed a 4-hour interval.
-  const currentTime = new Date(currentMessage.time * 1000);
-  const prevTime = new Date(prevMessage.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;
-
-  Check working hours (9:00-18:00, Monday through Friday)
-  const isWorkingTime = () => {
-    const hour = currentTime.getHours();
-    const day = currentTime.getDay();
-    return day >= 1 && day <= 5 && hour >= 9 && hour <= 18;
-  };
-
-  const timeLabel = isWorkingTime() ? 'working hour' : 'off hours';
-  const timeColor = isWorkingTime() ? '#52c41a' : '#faad14';
-
-  return (
-    <div style={{ textAlign: 'center', margin: '16px 0' }}>
-      <span style={{
-        backgroundColor: timeColor,
-        color: 'white',
-        padding: '2px 8px',
-        borderRadius: '12px',
-        marginRight: '8px'
-      }}>
-        {timeLabel}
-      </span>
-      {currentTime.toLocaleString()}
-    </div>
-  );
-};
-
-function ChatApp() {
-  return (
-    <Chat>
-      <MessageList MessageTimeDivider={BusinessTimeDivider} />
-    </Chat>
-  );
-}
-```
-
-## Summary
-
-The MessageList component provides complete message list functionality and various custom options. By reasonably configuring Props and custom components, you can create a chat interface that meets business requirements. It is advisable to select appropriate configuration based on specific scenarios in actual use.

package/resource/doc/chatkit/react/components/tuikit.md

@@ -1,34 +0,0 @@
-# TUIKit Introduction
-
-TUIKit is a UI component library based on Tencent Cloud IM SDK. It provides some common UI components, including session, chat, relationship chain, group, audio and video call, and other features.
-Based on UI components, you can quickly build your own business logic like building blocks.
-TUIKit components implement UI features while calling the appropriate IM SDK APIs to handle IM-related logic and data. Therefore, developers using TUIKit only need to focus on their business or personalized expansion.
-TUIKit, developed with React, features a UI style that better fits the usage habits of overseas customers and supports internationalization. If your business needs to go global, welcome to integration.
-
-## TUIKit composition
-
-TUIKit is mainly divided into ConversationList, Chat, ChatSetting, and Profile modules. Each module is responsible for different content. See the open-source code (https://github.com/TencentCloud/chat-uikit-react).
-
-The UI effect on the Web is as shown below.
-
-The UI effect on HTML5 is as shown below.
-
-Key Feature Introduction
-
-Chat is primarily responsible for showing the message interface. You can use it to directly send different types of messages, supporting text/emoji/image/video/file/custom message types, and simultaneously support message forwarding/withdrawal/reference, queries, read receipt, and other features.
-
-Feature introduction for ConversationList
-
-ConversationList is primarily responsible for showing and editing the session list, including session pinning, delete conversation, and other features.
-
-Introduction to the Features
-
-ChatSetting is primarily responsible for Chat settings.
-
-## Key Features of Contact
-
-Contact is primarily responsible for showing the relationship chain as well as creating sessions.
-
-## Key Features of Profile
-
-Profile is primarily responsible for managing user profiles.

package/resource/doc/chatkit/react/faq.md

@@ -1,26 +0,0 @@
----
-product: 'Chat'
-tech_stack: 'web_js_sdk'
-framework: 'react'
-title: 'React UIKit Integration and Frequently Asked Questions'
-keywords: ['react', 'initialization', 'components', 'integration', 'TUIKit']
----
-
-# React TUIKit Integration and FAQ
-
-## Module 1: Environment Setup and Quick Initialization (Topic: Setup)
-
-### Q: How do I install TUIKit in a React project?
-
-**A:** TUIKit is built on top of the Web SDK. You need to install `@tencentcloud/chat-uikit-react`
-
-```bash
-# Install TUIKit React version
-npm install @tencentcloud/chat-uikit-react@latest
-```
-
-## Module 2: Frequently Asked Questions (Topic: Question)
-
-### Q: Does TUIKit support React 17/19 versions?
-
-**A:** Currently, React versions 17.x and 19.x are not supported. Only React v18 is supported.