<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "How would you rate our service today?",
        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)
    },
    {
        id: 2,
        text: "I'm happy to help with any questions!",
        authorId: "user2",
        authorName: "Customer",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg",
        timestamp: new Date(2026, 0, 1, 9, 5)
    }
];

$("#chat").kendoChat({
    suggestions: [
        { text: "Excellent" },
        { text: "Good" },
        { text: "Average" },
        { text: "Poor" },
        { text: "I need more help" },
        { text: "Thank you" }
    ],
    authorId: "user2",
    dataSource: messagesData,
    suggestionClick: function(e) {
        console.log("User selected suggestion:", e.text);
    }
});
</script>