<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "How can I assist you today? Choose from the suggestions below:",
        authorId: "bot",
        authorName: "Support Bot",
        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 looking for help with something specific",
        authorId: "user",
        authorName: "Customer",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg",
        timestamp: new Date(2026, 0, 1, 9, 2)
    }
];

$("#chat").kendoChat({
    authorId: "user",
    dataSource: messagesData,
    suggestions: [
        { text: "Technical Support" },
        { text: "Billing Question" },
        { text: "General Inquiry" },
        { text: "Product Information" },
        { text: "Contact Sales" }
    ],
    suggestionClick: function(e) {
        console.log("User selected suggestion:", e.text);
        
        // Provide contextual responses based on suggestion
        let response = "";
        switch(e.text) {
            case "Technical Support":
                response = "I'll connect you with our technical support team. What issue are you experiencing?";
                break;
            case "Billing Question":
                response = "I can help with billing questions. What would you like to know about your account?";
                break;
            case "General Inquiry":
                response = "I'm here to help! What would you like to know?";
                break;
            default:
                response = "Thanks for selecting '" + e.text + "'. How can I assist you further?";
        }
        
        // Simulate bot response
        setTimeout(function() {
            let chat = $("#chat").data("kendoChat");
            chat.postMessage({
                id: Date.now(),
                text: response,
                authorId: "bot",
                authorName: "Support Bot",
                authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
                timestamp: new Date()
            });
        }, 1000);
    }
});
</script>