产品动态
公告
React
TUIKit 默认实现了文本、图片、语音、视频、文件等基本消息类型的发送和展示，如果这些消息类型满足不了您的需求，您可以新增自定义消息类型。
基本消息类型
消息类型 | 显示效果图 |
文本类消息 |  |
图片类消息 |  |
语音类消息 |  |
视频类消息 |  |
文件类消息 |  |
自定义消息
如果基本消息类型不能满足您的需求，您可以根据实际业务需求自定义消息。
自定义消息预设样式 | 显示效果图 |
超文本类消息 |  |
评价类消息 |  |
订单类消息 |  |
下文以发送一条可跳转至浏览器的超文本作为自定义消息为例，帮助您快速了解实现流程。
1. 思考需要自定义的数据
对于一条可以跳转至其他网站的消息，需要一段描述文字和一个 url 链接。
import { TUIChatService } from "@tencentcloud/chat-uikit-engine";const sendCustomMessageParams = {payload: {data: JSON.stringify({text: '欢迎加入腾讯云大家庭',url: 'https://www.tencentcloud.com/document/product/269?from_cn_redirect=1'}),description: "text_with_link",extension: "text_with_link"},};// 模拟发送一条自定义消息TUIChatService.sendCustomMessage(sendCustomMessageParams).catch(err => { /** */ });
2. 创建可以解析自定义数据的组件
这里创建一个 CustomMessage 组件，当消息的类型是自定义消息且消息的扩展字段等于上面定义的
text_with_link 时，我们可以自定义渲染内容；如果是其他类型的消息，使用默认的 Message 组件进行渲染。import { TUIChatService, 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;
文档反馈