Introduction
Contribution
Knowledge Base
Chat

sendMessage

Fired when a message is about to be sent or when the send process is triggered. This event allows you to modify the message before it's sent or handle stop generation requests.

The postMessage method do not trigger this event.

Event Data

e.message Object

The message object being sent (if not generating).

e.generating Boolean

Indicates if this is a stop generation request.

Example - Basic message sending 

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Welcome! Type a message below to see the sendMessage event in action.",
        authorId: "assistant",
        authorName: "Chat Assistant",
        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 ready to chat!",
        authorId: "user",
        authorName: "Customer",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg",
        timestamp: new Date(2026, 0, 1, 9, 5)
    }
];

$("#chat").kendoChat({
    authorId: "user",
    dataSource: messagesData,
    sendMessage: function(e) {
        console.log("Message being sent:", e.message.text);
        
        // Set author information for outgoing messages
        e.message.authorName = "Customer";
        e.message.authorImageUrl = "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg";
        
        // You can modify the message before it's sent
        if (e.message.text.toLowerCase().includes("help")) {
            e.message.text = "[HELP REQUEST] " + e.message.text;
        }
        
        // Log all message properties
        console.log("Final message object:", e.message);
    }
});
</script>

Example - Handling generating state and bot responses 

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "I'm an AI assistant. Type a message and I'll respond! You can also use the send button to stop my response generation.",
        authorId: "bot",
        authorName: "AI Assistant",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
        timestamp: new Date(2026, 0, 1, 9, 0)
    },
    {
        id: 2,
        text: "That sounds great! Let me ask you something.",
        authorId: "user",
        authorName: "User",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg",
        timestamp: new Date(2026, 0, 1, 9, 5)
    }
];

let currentGenerationTimeout;

$("#chat").kendoChat({
    authorId: "user",
    dataSource: messagesData,
    sendMessage: function(e) {
        if (e.generating) {
            // User clicked the send button while AI was generating - stop generation
            console.log("Stop generation requested");
            clearTimeout(currentGenerationTimeout);
            e.sender.toggleSendButtonGenerating(false);
            
            // Optionally add a message indicating generation was stopped
            e.sender.postMessage({
                text: "Response generation stopped by user.",
                authorId: "system",
                authorName: "System",
                timestamp: new Date()
            });
        } else {
            console.log("User message:", e.message.text);
            
            // Set author information
            e.message.authorName = "User";
            e.message.authorImageUrl = "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg";
            
            // Show generating state immediately
            e.sender.toggleSendButtonGenerating(true);
            
            // Simulate AI response generation with delay
            currentGenerationTimeout = setTimeout(function() {
                e.sender.toggleSendButtonGenerating(false);
                
                // Safe to call postMessage here - no infinite loop risk
                e.sender.postMessage({
                    text: "Thanks for your message: '" + e.message.text + "'. I'm processing your request and will provide a detailed response shortly.",
                    authorId: "bot",
                    authorName: "AI Assistant",
                    authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
                    timestamp: new Date()
                });
            }, 3000); // 3 second delay to simulate generation
        }
    }
});
</script>
In this article
sendMessage
Not finding the help you need?
Contact Support