<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Welcome! Feel free to ask any questions.",
        authorId: "support",
        authorName: "Support Agent",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
        timestamp: new Date(2026, 0, 1, 9, 0)
    }
];

let chat = $("#chat").kendoChat({
    authorId: "customer",
    dataSource: messagesData
}).data("kendoChat");

// Post a simple text message
chat.postMessage({
    text: "Thank you for the welcome!",
    authorName: "Tom"
});

// Post a message object with additional properties
setTimeout(function() {
    chat.postMessage({
        authorId: "support",
        text: "I have a question about your services:",
        files: [{ name: "inquiry.pdf", size: 12345, extension: "pdf" }]
    });
}, 2000);
</script>