TUIKit 默认实现了文本、图片、语音、视频、文件等基本消息类型的发送和展示，如果这些消息类型满足不了您的需求，您可以新增自定义消息类型。
基本消息类型
消息类型 | 显示效果图 |
文本类消息 |  |
图片类消息 |  |
语音类消息 |  |
视频类消息 |  |
文件类消息 |  |
自定义消息
如果基本消息类型不能满足您的需求，您可以根据实际业务需求自定义消息。
自定义消息预设样式 | 显示效果图 |
超文本类消息 |  |
评价类消息 |  |
订单类消息 |  |
下文以发送一条可跳转至浏览器的超文本作为自定义消息为例，帮助您快速了解实现流程。
步骤1：思考需要自定义的数据
自定义消息需要传入哪些数据是用户自行决定的，例如当前场景，对于一条可以跳转至其他网站的消息，需要一段描述文字和一个 url 链接。
import { TUIChatService } from "@tencentcloud/chat-uikit-engine";const sendCustomMessageParams = {payload: {data: JSON.stringify({text: '欢迎加入腾讯云大家庭',url: 'https://cloud.tencent.com/document/product/269'}),description: "text_with_link",extension: "text_with_link"},};// 模拟发送一条自定义消息TUIChatService.sendCustomMessage(sendCustomMessageParams).catch(err => { /** */ });
创建可以解析自定义数据的组件
这里创建一个 CustomMessage 组件，当消息的类型是自定义消息且消息的扩展字段等于上面定义的
text_with_link 时，我们可以自定义渲染内容；如果是其他类型的消息，使用默认的 Message 组件进行渲染。1. 创建 CustomMessage.vue 文件。
<template><divv-if="isCustomTextWithLink":style="{backgroundColor: 'lightblue',padding: '10px',borderRadius: '10px',}"><div>{{ customData.text }}</div><a :href="customData.url" target="_blank" rel="noopener noreferrer">Jump to</a></div><DefaultMessage v-else v-bind="$attrs" /></template><script setup lang="ts">import { computed } from 'vue';import { Message as DefaultMessage, MessageType, MessageModel } from '@tencentcloud/chat-uikit-vue3';interface Props {message: MessageModel;}const props = defineProps<Props>();// 检查是否为自定义文本链接消息const isCustomTextWithLink = computed(() => {if (props.message.type === MessageType.CUSTOM) {const { data, extension } = props.message.payload;return data && extension === 'text_with_link';}return false;});// 解析自定义消息数据const customData = computed(() => {if (isCustomTextWithLink.value) {const { data } = props.message.payload;return JSON.parse(data);}return { text: '', url: '' };});</script>
2. 使用 CustomMessage 替换默认的消息实现。
<template><UIKitProvider theme="light"><div :style="{ display: 'flex', height: '100vh' }"><ConversationList /><Chat><ChatHeader /><MessageList :Message="CustomMessage" /><MessageInput /></Chat></div></UIKitProvider></template><script setup lang="ts">import {UIKitProvider,ConversationList,Chat,ChatHeader,MessageListMessageInput,} from '@tencentcloud/chat-uikit-vue3';import CustomMessage from './CustomMessage.vue';</script>
