<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Here are the files you requested:",
        authorId: "support",
        authorName: "Support Agent",
        timestamp: new Date(2026, 0, 1, 9, 0),
        files: [
            {
                uid: "file1",
                name: "document.pdf",
                size: 1024576,
                type: "application/pdf",
                url: "https://example.com/document.pdf"
            },
            {
                uid: "file2",
                name: "spreadsheet.xlsx",
                size: 2048000,
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                url: "https://example.com/spreadsheet.xlsx"
            }
        ]
    }
];

$("#chat").kendoChat({
    authorId: "user",
    dataSource: messagesData,
    download: function(e) {
        if (e.files) {
            // Download All button was clicked
            console.log("Downloading all files:", e.files.length + " files");
            e.files.forEach(file => {
                window.open(file.url, '_blank');
            });
        } else if (e.file) {
            // Individual file download from context menu
            console.log("Downloading file:", e.file.name);
            window.open(e.file.url, '_blank');
        }
    }
});
</script>