jQuery Chat AI Integration

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

Also available for:

.k-chat-header { margin: auto; } .note { font: normal 18px "Metric"; border-radius: 2px; margin: 20px auto 40px auto; padding: 20px; border-left: 4px solid; border-left-color: #5392e4; background: rgba(83, 146, 228, 0.1); text-align: center; } .k-notification { position: absolute; z-index: 9999; top: 90%; left: 50%; transform: translate(-50%, -50%); }

By accessing and using the Telerik AI service integration on the Progress website, you acknowledge and agree to be bound by the following Terms of Use.

const chats = []; $(document).ready(async function() { // Configuration and constants const CONFIG = { author: { id: "123", name: "John Smith" }, chat: { width: 600, height: 680 }, aiServiceUrl: "https://demos.telerik.com/service/v2/ai", fileUrls: { cvTemplate: "../content/chat/CV_Template.pdf", coverLetter: "../content/chat/Cover_Letter.pdf" } }; // Initialize services and dependencies const streamingService = new StreamingService(CONFIG.aiServiceUrl); const markedInstance = await initializeMarkdown(); const notificationWidget = initializeNotification(); // Initialize chat session const { chatSession, currentChatId, initialData } = await initializeChatSession(streamingService, CONFIG.author, markedInstance); // Initialize and configure chat const chat = initializeChat(CONFIG, initialData, streamingService, notificationWidget, markedInstance, currentChatId); // Initialize export functionality initializeExportButton(streamingService, CONFIG.author); // Helper Functions async function initializeMarkdown() { // Wait for marked to be available while (typeof marked === 'undefined' || typeof markedHighlight === 'undefined') { await new Promise(resolve => setTimeout(resolve, 50)); } return new marked.Marked(markedHighlight.markedHighlight({ highlight: function(code, lang) { const language = hljs.getLanguage(lang) ? lang : 'plaintext'; return hljs.highlight(code, { language }).value; }, langPrefix: 'hljs language-' })); } function initializeNotification() { return $("#notification").kendoNotification({ templates: [{ type: "fileNote", template: '<span class="download-icon"></span> File downloaded', }, { type: "copyNotification", template: '<span class="copy-icon"></span> Message copied to clipboard.', }], width: 160, height: 54, appendTo: "#container" }).data("kendoNotification"); } async function initializeChatSession(streamingService, author, markedInstance) { const chatSession = await streamingService.loadChatSession(); chats.push(...chatSession.chats); if (chats.length === 0) { try { const chatRoom = await streamingService.createNewChat(); chats.push({ id: chatRoom.chatId }); } catch (error) { console.error("Error creating chatroom:", error); } } $("#input").text(`Input Tokens: ${chatSession.inputTokens}`); $("#output").text(`Output Tokens: ${chatSession.outputTokens}`); const currentChatId = chats[chats.length - 1].id; const currentChatHistory = await streamingService.loadChatInfo(currentChatId); const initialData = currentChatHistory.map((message) => ({ authorId: message.role === "user" ? author.id : "ai-assistant", authorName: message.role === "user" ? author.name : "AI Assistant", text: markedInstance.parse(message.text), id: kendo.guid(), timestamp: new Date(message.timestamp) })); return { chatSession, currentChatId, initialData }; } function initializeChat(config, initialData, streamingService, notificationWidget, markedInstance) { return $("#chat").kendoChat({ skipSanitization: true, dataSource: initialData, authorId: config.author.id, allowMessageCollapse: true, messageWidthMode: "full", width: config.chat.width, height: config.chat.height, headerItems: [{ type: "contentItem", template: "Model and name version" }, { type: "spacer" }, { type: "contentItem", template: () => "<button id='export-history'></button>" }], suggestions: [ { id: 'analyze_photo', text: 'Analyse my photo' }, { id: 'cv_template', text: 'Provide CV template' }, { id: 'cover_letter', text: 'Generate a cover letter' }, ], fileActions: [{ name: "download", text: "Download", icon: "download" }, { name: "delete", text: "Delete", icon: "trash" }], download: (e) => handleFileDownload(e, notificationWidget), fileMenuAction: (e) => handleFileMenuAction(e), sendMessage: (e) => handleSendMessage(e, config, streamingService, markedInstance) }).data("kendoChat"); } 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 handleFileDownload(e, notificationWidget) { if (e.message.authorId === "ai-assistant") { 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"); kendo.ui.icon($(".download-icon"), { icon: 'download' }); }) .catch(err => console.error(err)); }); } else { kendo.alert("The file can not be downloaded."); } } function handleFileMenuAction(e) { if (e.type === "delete") { e.sender.removeMessage(e.message); } } function handleSendMessage(e, config, streamingService, markedInstance) { if (e.generating) { streamingService.abortRequest(); e.sender.toggleSendButtonGenerating(false); return; } e.message.id = kendo.guid(); e.message.authorName = config.author.name; const messageText = e.message.text.toLowerCase().trim(); // Handle predefined responses if (messageText === 'provide cv template') { handlePredefinedResponse(e, 'cv', config.fileUrls.cvTemplate); } else if (messageText === 'generate a cover letter') { handlePredefinedResponse(e, 'cover', config.fileUrls.coverLetter); } else { handleAIResponse(e, streamingService, markedInstance, chats[chats.length - 1].id); } } function handlePredefinedResponse(e, type, fileUrl) { const responses = { cv: { text: 'Sure. Here is a CV template file in PDF format. Can I help you with something else? *', fileName: "CV_Template.pdf" }, cover: { text: 'Here is a cover letter template. You can customize it as needed. *', fileName: "Cover_Letter_Template.pdf" } }; const response = responses[type]; setTimeout(() => { e.sender.postMessage({ authorId: 'ai-assistant', authorName: "AI Assistant", text: response.text, timestamp: new Date(), id: kendo.guid(), files: [{ name: response.fileName, size: 5315153, extension: "pdf", url: fileUrl }] }); }, 200); } function handleAIResponse(e, streamingService, markedInstance, currentChatId) { let rawResponse = ''; let currentAIMessage = null; streamingService.streamAIResponse(currentChatId, e.message.text, e.message.files, { onStart: (data) => { currentAIMessage = e.sender.postMessage({ authorId: 'ai-assistant', authorName: "AI Assistant", text: '', id: kendo.guid() }); e.sender.toggleSendButtonGenerating(true); }, onStreaming: (data) => { const newText = currentAIMessage.text + data.message; rawResponse += data.message; e.sender.updateMessage(currentAIMessage, { text: kendo.htmlEncode(newText, true) }); chat.scrollToBottom(); }, onComplete: (data) => { completeStream(currentAIMessage, rawResponse, markedInstance); updateTokenDisplay(data.message); }, onError: (error) => { currentAIMessage = null; e.sender.toggleSendButtonGenerating(false); }, onAbort: () => { completeStream(currentAIMessage, rawResponse, markedInstance); } }); } function completeStream(currentAIMessage, rawResponse, markedInstance) { const markdown = markedInstance.parse(rawResponse); $("#chat").data("kendoChat").updateMessage(currentAIMessage, { text: markdown }); $("#chat").data("kendoChat").toggleSendButtonGenerating(false); } function updateTokenDisplay(messageData) { $("#input").text(`Input Tokens: ${messageData.inputTokens}`); $("#output").text(`Output Tokens: ${messageData.outputTokens}`); } function initializeExportButton(streamingService, author) { $('#export-history').kendoDropDownButton({ fillMode: "flat", icon: 'more-vertical', items: [{ name: 'download', text: 'Download conversation', icon: 'download', click: downloadConversation }, { name: 'clear', text: 'Clear conversation', icon: 'trash', click: () => clearConversation(streamingService, author) }] }); } function downloadConversation() { const chat = $("#chat").data("kendoChat"); const messages = chat.dataSource.view(); const formattedMessages = messages .map((msg) => { let messageText = `${msg.authorName}: ${msg.text}`; if (msg.files && msg.files.length > 0) { const fileNames = msg.files.map((file) => file.name).join(', '); messageText += `\n[Note: This message contains file(s): ${fileNames}]`; } return messageText; }) .join('\n'); const blob = new Blob([formattedMessages], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'conversation.txt'; a.style.display = 'none'; document.body.appendChild(a); a.click(); document.body.removeChild(a); } async function clearConversation(streamingService, author) { const chat = $("#chat").data("kendoChat"); try { const newChat = await streamingService.createNewChat(); const currentChatHistory = await streamingService.loadChatInfo(newChat.chatId); chats.push({ id: newChat.chatId }); chat.setDataSource({ data: currentChatHistory.map((message) => ({ authorId: message.role === "user" ? author.id : "ai-assistant", authorName: message.role === "user" ? author.name : "AI Assistant", ...message })) }); } catch (error) { console.error("Error creating new chat:", error); } } // Initialize file upload validation //const chat = $("#chat").data("kendoChat"); chat.messageBox.uploadInstance.bind("select", function(e) { const allowedExtensions = ['.jpg', '.png']; e.files.forEach(function(file) { if (!allowedExtensions.includes(file.extension)) { kendo.alert('The allowed files types are "png" and "jpg"'); e.preventDefault(); chat.messageBox._files = chat.messageBox._files.filter(f => f !== file); } }); chat.messageBox.updateAttachmentList(); }); });

Description

The Kendo UI for jQuery Chat allows you to take leverage of the AI Completion Services that will ease the process of performing the two-way communication between the user and the large language model.

This demo shows how to configure the Chat to a interact with a large language model through a standalone AI chat client service.

Note: The responses marked with an asterisk (*) are not AI generated.

This Chat example is part of a unique collection of hundreds of jQuery demos, with which you can see all Kendo UI for jQuery components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Kendo UI for jQuery Dojo or ThemeBuilder.

Additional Resources