このページは現在英語版のみで提供されており、日本語版も近日中に提供される予定です。ご利用いただきありがとうございます。

カスタムメッセージ

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