Kendo UI for jQuery Chat Overview

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Kendo UI Dojo
Change Theme
default
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Ocean Blue A11Y

Purple

Turquoise
Bootstrap Theme

Main

Bootstrap 3

Bootstrap 3 Dark

Main Dark

Nordic

Turquoise

Turquoise Dark

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Material 2

Material 2 Dark

Nova
Classic Theme

Main

Green

Green Dark

Lavender

Lavender Dark

Main Dark

Metro

Metro Dark

Moonlight

Opal

Opal Dark

Silver

Silver Dark

Uniform
Fluent Theme

Main

Main Dark
Launch Theme Builder

index.html

Also available for:

.k-dialog-content { display: flex; justify-content: space-between; } .icon-attachment { width: 38px; height: 38px; } .k-chat-bubble-text{ overflow-wrap: break-word !important; word-break: normal !important; } .k-notification { position: absolute; z-index: 9999; top: 82%; left: 50%; transform: translate(-50%, -50%); } #chat { position: relative; }

$(document).ready(function() { // Configuration const CONFIG = { currentUser: { id: 1, name: "", iconUrl: "../content/chat/corgi.jpg", iconAltText: "Anthony's profile picture" }, chat: { width: 400, height: 600 }, allowedFileTypes: ['.jpg', '.pdf', '.xlsx', '.docx'], responses: { attachment: { text: "Cool. I'll send them now. Thanks", files: [ { name: "Portfolio.pdf", size: 5315153, extension: "pdf", url: "../content/chat/Portfolio.pdf" }, { name: "Cover_Letter.pdf", size: 5315153, extension: "pdf", url: "../content/chat/Cover_Letter.pdf" }, { name: "Application-Photo.jpg", size: 5315153, extension: "jpg", url: "../content/chat/corgi.jpg" } ] }, cvFile: { text: "Sorry, I forgot to upload my CV.", files: [{ name: "CV.pdf", size: 5315153, extension: "pdf", url: "../content/chat/CV.pdf" }] }, link: { text: "Here you go, mate https://www.myportfolio.com/alex_barton/ \n Let me know if you have any problem opening it." }, default: { text: "Please choose whether to send you the files or a link" } } }; // Initialize components const notificationWidget = initializeNotification(); const dialog = initializeDialog(); const chat = initializeChat(CONFIG, notificationWidget); initializeIcons(); initializeFileUpload(chat, CONFIG.allowedFileTypes); // Helper Functions function initializeNotification() { return $("#notification").kendoNotification({ templates: [{ type: "fileNote", template: ' File downloaded', }, { type: "copyNotification", template: ' Message copied to clipboard.', }], width: 160, height: 54, appendTo: "#container" }).data("kendoNotification"); } function initializeDialog() { return $("#dialog").kendoDialog({ width: 246, title: "Share attachment", content: kendo.template($("#template-dialog").html()), visible: false }); } function initializeIcons() { const iconMappings = [ { id: "#facebook", icon: "facebook" }, { id: "#email", icon: "envelope" }, { id: "#x-social", icon: "x-logo" }, { id: "#linkedin", icon: "linkedin" }, { id: "#gmail", icon: "google" }, { id: "#instagram", icon: "instagram" }, { id: "#whatsapp", icon: "whatsapp" } ]; iconMappings.forEach(mapping => { kendo.ui.icon($(mapping.id), { icon: mapping.icon, size: 'small' }); }); } function initializeChat(config, notificationWidget) { return $("#chat").kendoChat({ messageWidthMode: "standard", width: config.chat.width, height: config.chat.height, messages: { placeholder: "Type your message here..." }, authorId: config.currentUser.id, dataSource: { data: getInitialMessages() }, fileMenuAction: (e) => handleFileMenuAction(e), download: (e) => handleFileDownload(e, notificationWidget), messageActions: getMessageActions(), fileActions: getFileActions(), toolbar: getToolbarConfig(), sendMessage: (e) => handleSendMessage(e, config), contextMenuAction: (e) => handleContextMenuAction(e, notificationWidget) }).data("kendoChat"); } function getInitialMessages() { return [ { id: 1, authorId: 2, authorName: "", authorImageUrl: "../content/chat/corgi.jpg", authorImageAltText: "John's profile picture", text: "Hey Jamie, do you have a minute? \n I've been working on my job application documents and could use a second opinion. \nMind taking a look and telling me what you think?", timestamp: new Date() }, { id: 2, authorId: 2, authorName: "", authorImageUrl: "../content/chat/corgi.jpg", authorImageAltText: "John's profile picture", text: "I can send you the files or a link - which one works best for you?", timestamp: new Date() } ]; } function getMessageActions() { return [ { name: "reply", text: "Reply", icon: "undo" }, { name: "copy", text: "Copy", icon: "copy" }, { name: "pin", text: "Pin", icon: "pin" }, { name: "delete", text: "Delete", icon: "trash" } ]; } function getFileActions() { return [ { name: "download", text: "Download", icon: "download" }, { name: "share", text: "Share", icon: "share" } ]; } function getToolbarConfig() { return { toggleable: true, buttons: [ { name: "sendimage", icon: "image" }, { name: "upload", icon: "arrow-up" } ] }; } async function createBlobFromFileUrl(fileUrl) { const response = await fetch(fileUrl); if (!response.ok) { throw new Error(`Failed to fetch file: ${response.status} ${response.statusText}`); } return await response.blob(); } function handleFileMenuAction(e) { if (e.type === "share") { $("#dialog").data("kendoDialog").open(); } } function handleFileDownload(e, notificationWidget) { e.files.forEach(function(file) { createBlobFromFileUrl(file.url) .then(blob => { kendo.saveAs({ dataURI: blob, fileName: file.name }); notificationWidget.setOptions({ width: 160 }); notificationWidget.show("File downloaded", "fileNote", "info"); kendo.ui.icon($(".download-icon"), { icon: 'download' }); }) .catch(err => console.error(err)); }); } function handleSendMessage(e, config) { e.message.authorName = config.currentUser.name; e.message.id = kendo.guid(); const messageText = e.message.text.toLowerCase(); if (messageText.includes("attachment") || messageText.includes("file")) { sendAttachmentResponse(e, config); } else if (messageText.includes("link")) { sendLinkResponse(e, config); } else { sendDefaultResponse(e, config); } } function sendAttachmentResponse(e, config) { // Send main attachment response setTimeout(() => { e.sender.postMessage(createBotMessage(config.responses.attachment)); }, 10); // Send CV file after delay setTimeout(() => { e.sender.postMessage(createBotMessage(config.responses.cvFile)); }, 500); } function sendLinkResponse(e, config) { setTimeout(() => { e.sender.postMessage(createBotMessage(config.responses.link)); }, 500); } function sendDefaultResponse(e, config) { setTimeout(() => { e.sender.postMessage(createBotMessage(config.responses.default)); }, 500); } function createBotMessage(responseConfig) { return { id: kendo.guid(), authorId: 2, authorName: "", authorImageUrl: "../content/chat/corgi.jpg", authorImageAltText: "John's profile picture", text: responseConfig.text, timestamp: new Date(), files: responseConfig.files || [] }; } function handleContextMenuAction(e, notificationWidget) { if (e.type === 'copy') { notificationWidget.setOptions({ width: 242 }); notificationWidget.show("Message copied to clipboard.", "copyNotification"); kendo.ui.icon($(".copy-icon"), { icon: 'copy' }); } } function initializeFileUpload(chat, allowedFileTypes) { chat.messageBox.uploadInstance.bind("select", function(e) { e.files.forEach(function(file) { if (!allowedFileTypes.includes(file.extension)) { kendo.alert(`The allowed file types are ${allowedFileTypes.map(type => `"${type.substring(1)}"`).join(', ')}`); e.preventDefault(); chat.messageBox._files = chat.messageBox._files.filter(f => f !== file); } }); chat.messageBox.updateAttachmentList(); }); } });

The Chat component is part of Kendo UI for jQuery, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Description

The Kendo UI for jQuery Chat provides a flexible conversational interface that helps boost user engagement in web applications. It enables seamless real-time communication and supports advanced features, such as AI-powered conversation mode, speech-to-text button, attachments, predefined quick actions for the user. The Chat component is ideal for implementing customer support chatbots, live help desks, virtual assistants for booking or scheduling, interactive FAQ systems, and more.

The current demo shows a person-to-person conversation using the Chat component and demonstrates multiple functionalities, such as quick replies, bulk and single file uploads, downloading attachments, and message actions like copy, reply, delete, and pin.

The Kendo UI for jQuery Chat control is part of Telerik UI for Kendo UI for jQuery, a professional-grade UI library with 110+ components for building modern and feature-rich web applications. The UI for Kendo UI for jQuery Chat is a server-side wrapper for the Kendo UI for jQuery Chat widget.

Functionality and Features

Data Binding—Bind the Chat component either to a local data collection, to data retrieved from a remote endpoint.
AI Integration—Configure the Chat to a interact with a large language model through a standalone AI chat client service.
Tools—Utilize the available context menu actions and toolbar and commands.
File Uploads and Media—Enable the file uploads, media sharing, and speech-to-text functionality of the Chat component.
Quick Actions—Define quick response suggestions that appear below the message input.
Templates—Use the template options to customize the rendering of the messages, attachments, and quick actions.
Accessibility—The Chat component is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.

Kendo UI for jQuery Chat Overview

Description

Support & Learning Resources

Additional Resources