messageStatusSettingsObject(default: null)
Custom settings for message status display, allowing you to configure icons, text, and CSS classes for each message delivery status. The object should be a mapping from status values ("sent", "delivered", "seen", "failed") to settings objects.
Each status settings object accepts:
icon-String- Font icon name to display.text-String- Text label for the status.cssClass-String- Additional CSS class to apply to the status element.
Example
<div id="chat"></div>
<script>
let messagesData = [
{
id: 1,
text: "Sent message",
authorId: "user1",
authorName: "John Doe",
timestamp: new Date(2026, 0, 1, 9, 0),
status: "sent"
},
{
id: 2,
text: "Delivered message",
authorId: "user1",
authorName: "John Doe",
timestamp: new Date(2026, 0, 1, 9, 1),
status: "delivered"
},
{
id: 3,
text: "Seen message",
authorId: "user1",
authorName: "John Doe",
timestamp: new Date(2026, 0, 1, 9, 2),
status: "seen"
}
];
$("#chat").kendoChat({
messageStatusSettings: {
sent: { icon: "check", text: "Sent" },
delivered: { icon: "check-circle", text: "Delivered" },
seen: { icon: "eye", text: "Seen", cssClass: "k-text-primary" },
failed: { icon: "x-circle", text: "Failed", cssClass: "k-text-error" }
},
authorId: "user1",
dataSource: messagesData
});
</script>