이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.

커스텀 메시지

TUIKit provides default implementation for sending and displaying basic message types such as text, image, voice, video, and file. If these message types do not meet your needs, you can add custom message types.
Basic Message Type
Message Type
Display Effect
Text messages
﻿
﻿
Image messages
﻿
﻿
Video messages
﻿
﻿
File messages
﻿
﻿
Custom Notification
If the basic message type cannot meet your needs, you can use custom messages based on actual business needs.
Custom Message Preset Style
Display Effect
Hypertext messages
﻿
﻿
Rating messages
﻿
﻿
Order messages
﻿
﻿
The following context uses sending a hypertext that can navigate to the browser as a custom message to help you quickly understand the implementation process.
Thinking Requires Customized Data
For a message that can go to another website, a description text and a url link are required.
import { TUIChatService } from "@tencentcloud/chat-uikit-engine";
﻿
const sendCustomMessageParams = {
    payload: {
      data: JSON.stringify({
        Welcome to the Tencent Cloud family
        url: 'https://cloud.tencent.com/document/product/269'
      }),
      description: "text_with_link",
      extension: "text_with_link"
    },
};
﻿
// simulation send a custom message
TUIChatService.sendCustomMessage(sendCustomMessageParams)
    .catch(err => { /** */ });
Send custom messages. Reference ChatEngine API Documentation.
2. Creating Components That Parse Custom Data
Here create a CustomMessage component. When the type of message is custom message and the extended fields of the message equal the text_with_link defined above, we can custom render the content; if it is other types of messages, use default Message component to render.
import { TUIChatEngine } from '@tencentcloud/chat-uikit-engine';
import { UIKitProvider,  Message } from '@tencentcloud/chat-uikit-react';
﻿
function CustomMessage(props: React.ComponentProps<typeof Message>) {
  if (props.message.type === TUIChatEngine.TYPES.MSG_CUSTOM) {
    const { data, extension } = props.message.payload;
    if (data && extension === 'text_with_link') {
      const { text, url } = JSON.parse(data);
      return (
        <div style={{
          backgroundColor: 'lightblue',
          padding: '10px',
          borderRadius: '10px',
        }}
        >
          <div>{text}</div>
          <a href={url} target="_blank" rel="noopener noreferrer">
            Jump to
          </a>
        </div>
      );
    }
  }
  return <Message {...props} />;
}
﻿
function ChatApp() {
  return (
      <UIKitProvider language="auto" theme="light">
        <div style={{ display: 'flex', height: '100vh' }}>
          <ConversationList />
          <MessageList Message={CustomMessage} />
        </div>
      </UIKitProvider>
  );
}
﻿
export default ChatApp;
﻿
﻿

Message Type	Display Effect
Text messages
Image messages
Video messages
File messages

Custom Message Preset Style	Display Effect
Hypertext messages
Rating messages
Order messages