<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "How would you like to proceed with your order?",
        authorId: "bot",
        authorName: "Order Bot",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
        timestamp: new Date(2026, 0, 1, 9, 0),
        suggestedActions: [
            { text: "Continue Shopping" },
            { text: "Checkout Now" },
            { text: "Save for Later" },
            { text: "Cancel Order" }
        ]
    }
];

$("#chat").kendoChat({
    suggestedActionsTemplate: function(suggestions) {
        let html = "<div class='custom-actions' ref-chat-suggestion-group>";
        for (let i = 0; i < suggestions.length; i++) {
            html += "<button class='custom-action-btn k-suggestion'>" + suggestions[i].text + "</button>";
        }
        html += "</div>";
        return html;
    },
    authorId: "user",
    dataSource: messagesData
});
</script>