Skip to content

Commit 3cdb461

Browse files
mihaela-lukanovamihaela-lukanova
committed
chore: revise chat examples and update to latest version
1 parent de7a724 commit 3cdb461

File tree

10 files changed

+331
-84
lines changed

10 files changed

+331
-84
lines changed

‎Telerik.Examples.ContentSecurityPolicy/Telerik.Examples.ContentSecurityPolicy.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
<PackageReference Include="System.Security.Cryptography.Xml" Version="9.0.2" />
4848
<PackageReference Include="System.Text.Encodings.Web" Version="9.0.2" />
4949
<PackageReference Include="System.Text.RegularExpressions" Version="4.3.1" />
50-
<PackageReference Include="Telerik.UI.for.AspNet.Core" Version="2025.2.520" />
50+
<PackageReference Include="Telerik.UI.for.AspNet.Core" Version="2025.3.825" />
5151
</ItemGroup>
5252

5353
<ProjectExtensions>

‎Telerik.Examples.ContentSecurityPolicy/Views/Shared/_Layout.cshtml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://localhost:52626/; img-src 'self' data:; script-src 'self' https://kendo.cdn.telerik.com https://code.jquery.com/ 'nonce-Telerik-CSP-Examples'; style-src 'self' https://kendo.cdn.telerik.com 'nonce-Telerik-CSP-Examples'; font-src 'self' data:;connect-src 'self' wss://localhost;" />
6+
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; script-src 'self' https://kendo.cdn.telerik.com https://code.jquery.com/ https://unpkg.com 'nonce-Telerik-CSP-Examples'; style-src 'self' https://kendo.cdn.telerik.com 'nonce-Telerik-CSP-Examples'; font-src 'self' data:;connect-src 'self' wss://localhost;" />
77
<title>@ViewData["Title"] - Telerik.Examples.ContentSecurityPolicy</title>
88

99
@{
10-
var kendoVersion = "2025.2.520";
11-
var themeVersion = "11.0.2";
10+
var kendoVersion = "2025.3.825";
11+
var themeVersion = "12.0.0";
1212
}
1313
<link href="https://kendo.cdn.telerik.com/themes/@themeVersion/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
1414

‎Telerik.Examples.Mvc/Telerik.Examples.Mvc/Hubs/ChatHub.cs‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
1-
using Microsoft.AspNetCore.SignalR;
1+
using Kendo.Mvc.UI;
2+
using Microsoft.AspNetCore.SignalR;
3+
using System.Collections.Generic;
4+
using System.Text.Json;
25
using System.Threading.Tasks;
36

47
namespace Telerik.Examples.Mvc.Hubs
58
{
69
public class ChatHub : Hub
710
{
8-
public async Task Send(object sender, string message)
11+
public async Task Send(string senderId, string senderName, string message)
912
{
10-
await Clients.Others.SendAsync("broadcastMessage", sender, message);
13+
// Broadcast the message to all clients except the sender.
14+
await Clients.Others.SendAsync("broadcastMessage", senderId, senderName, message);
1115
}
1216

13-
public async Task SendTyping(object sender)
17+
public async Task SendTyping(string senderId, string senderName)
1418
{
15-
await Clients.Others.SendAsync("typing", sender);
19+
// Broadcast the typing notification to all clients except the sender.
20+
await Clients.Others.SendAsync("typing", senderId, senderName);
1621
}
1722
}
1823
}

‎Telerik.Examples.Mvc/Telerik.Examples.Mvc/Telerik.Examples.Mvc.csproj‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="9.0.2" />
1010
<PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="9.0.2" />
1111
<PackageReference Include="Microsoft.AspNetCore.Identity.UI" Version="9.0.2" />
12-
<PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="9.0.5" />
12+
<PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="9.0.8" />
1313
<PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" Version="9.0.2" />
1414
<PackageReference Include="Microsoft.AspNetCore.OData" Version="9.2.0" />
1515
<PackageReference Include="Microsoft.EntityFrameworkCore.InMemory" Version="9.0.2" />
@@ -23,10 +23,10 @@
2323
<PackageReference Include="System.Drawing.Common" Version="9.0.2" />
2424
<PackageReference Include="System.Net.Http" Version="4.3.4" />
2525
<PackageReference Include="System.Text.RegularExpressions" Version="4.3.1" />
26-
<PackageReference Include="Telerik.Core.Export" Version="2025.2.520" />
27-
<PackageReference Include="Telerik.UI.for.AspNet.Core" Version="2025.2.520" />
28-
<PackageReference Include="Telerik.Web.Captcha" Version="2.0.2" />
29-
<PackageReference Include="Telerik.Web.Spreadsheet" Version="2025.2.520" />
26+
<PackageReference Include="Telerik.Core.Export" Version="2025.3.812" />
27+
<PackageReference Include="Telerik.UI.for.AspNet.Core" Version="2025.3.825" />
28+
<PackageReference Include="Telerik.Web.Captcha" Version="2.0.3" />
29+
<PackageReference Include="Telerik.Web.Spreadsheet" Version="2025.3.812" />
3030
</ItemGroup>
3131

3232
<ItemGroup>

‎Telerik.Examples.Mvc/Telerik.Examples.Mvc/Views/Chat/ChatPeerToPeer.cshtml‎

Lines changed: 77 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,48 +6,105 @@
66

77
@(Html.Kendo().Chat()
88
.Name("chat")
9-
.User(user => user
10-
.Name(@name)
11-
.IconUrl("https://demos.telerik.com/kendo-ui/content/chat/avatar.png")
12-
)
9+
.AuthorId(@name)
10+
.IsTypingField("isTyping")
11+
.FileAttachment(false)
1312
.Events(events => events
14-
.TypingStart("onTypingStart")
15-
.Post("onPost")
13+
.Input("onInput")
14+
.SendMessage("onSendMessage")
1615
)
1716
)
1817

1918
<script>
19+
const currentUser = {
20+
id: '@name',
21+
name: 'User123',
22+
iconUrl: "https://demos.telerik.com/kendo-ui/content/chat/avatar.png"
23+
};
24+
let isTyping = false;
25+
2026
window.chatHub = new signalR.HubConnectionBuilder()
2127
.withUrl('/chat')
2228
.build();
2329
2430
chatHub.start()
31+
.then(function () {
32+
console.log('SignalR connection started.');
33+
})
2534
.catch(function(err) {
26-
console.error(err.toString());
35+
console.error('Error starting SignalR connection: ' + err.toString());
2736
});
2837
2938
$(function() {
30-
window.chat = $("#chat").getKendoChat();
39+
chatHub.on('broadcastMessage', function(senderId, senderName, message) {
40+
const chat = $("#chat").getKendoChat();
3141
32-
chatHub.on('broadcastMessage', function(sender, message) {
33-
var message = {
34-
type: 'text',
35-
text: message
36-
};
42+
// Check for a "typing" message.
43+
let typingMessages = $.grep(chat.dataSource.data(), function(item){
44+
return item.isTyping == true ? item.id : "";
45+
});
3746
38-
chat.renderMessage(message, sender);
47+
if(typingMessages.length > 0) {
48+
if(typingMessages[0].id != null) {
49+
let messageObject = chat.dataSource.get(typingMessages[0].id);
50+
if (messageObject) {
51+
// Update the "typing" message with the received message text.
52+
let updatedMessage = chat.updateMessage(messageObject, {
53+
text: message,
54+
isTyping: false
55+
});
56+
}
57+
}
58+
} else {
59+
// Post the received message in the Chat.
60+
chat.postMessage({
61+
id: kendo.guid(),
62+
authorId: senderId,
63+
authorName: senderId,
64+
authorImageUrl:currentUser.iconUrl,
65+
text: message,
66+
isTyping: false
67+
});
68+
}
3969
});
4070
41-
chatHub.on('typing', function(sender) {
42-
chat.renderMessage({ type: 'typing' }, sender);
71+
chatHub.on('typing', function(senderId, senderName) {
72+
console.log(senderName + ' is typing');
73+
const chat = $("#chat").getKendoChat();
74+
75+
chat.postMessage({
76+
id: kendo.guid(),
77+
isTyping: true,
78+
authorId: senderId,
79+
authorName: senderId,
80+
authorImageUrl: currentUser.iconUrl
81+
});
4382
});
4483
});
4584
46-
function onTypingStart(e) {
47-
chatHub.invoke("sendTyping", chat.getUser());
85+
// The 'Input' will notify the SignallR Hub that the current client is typing.
86+
// The Hub, in turn, will notify all the other clients that the user has started typing.
87+
function onInput(e) {
88+
// If not already typing, send typing notification.
89+
if (!isTyping) {
90+
isTyping = true;
91+
chatHub.invoke("sendTyping", currentUser.id, currentUser.name);
92+
}
4893
}
4994
50-
function onPost(args) {
51-
chatHub.invoke("send", chat.getUser(), args.text);
95+
// The 'SendMessage' handler will send the user data and the typed text to the SignalR Hub.
96+
// The Hub will then forward that info to the other clients.
97+
function onSendMessage(args) {
98+
// Update the message data based on the current user's data.
99+
args.message.id = kendo.guid();
100+
args.message.authorId = currentUser.id;
101+
args.message.authorName = currentUser.name;
102+
args.message.authorImageUrl = currentUser.iconUrl;
103+
104+
// Stop typing when sending a message.
105+
if (isTyping) {
106+
isTyping = false;
107+
}
108+
chatHub.invoke("send", args.message.authorId, args.message.authorName, args.message.text);
52109
}
53110
</script>

‎Telerik.Examples.Mvc/Telerik.Examples.Mvc/Views/Shared/_Layout.cshtml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
88
<title>@ViewData["Title"] - Telerik.Examples.Mvc</title>
99
@{
10-
var kendoVersion = "2025.2.520";
11-
var themeVersion = "11.0.2";
10+
var kendoVersion = "2025.3.825";
11+
var themeVersion = "12.0.0";
1212
}
1313
<link href="https://kendo.cdn.telerik.com/themes/@themeVersion/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
1414

15-
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
15+
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
1616
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
1717
<script src="https://kendo.cdn.telerik.com/@kendoVersion/js/kendo.all.min.js"></script>
1818
<script src="https://kendo.cdn.telerik.com/@kendoVersion/js/kendo.aspnetmvc.min.js"></script>

‎Telerik.Examples.RazorPages/Telerik.Examples.RazorPages/Pages/Chat/ChatIndex.cshtml‎

Lines changed: 45 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,37 +7,53 @@
77
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
88
@Html.AntiForgeryToken()
99

10-
<h1>ChatIndex</h1>
10+
<h1>Chat bound to remote data</h1>
1111

12-
@(Html.Kendo().Chat()
13-
.Name("chat")
14-
.Toolbar(toolbar =>
15-
{
16-
toolbar.Toggleable(Model.Toggable);
17-
toolbar.Scrollable(Model.Scrollable);
18-
toolbar.Buttons(buttons =>
19-
{
20-
buttons.Add().Name("Settings").IconClass("k-icon k-i-gear");
21-
buttons.Add().Name("Hand").IconClass("k-icon k-i-hand");
22-
buttons.Add().Name("Bold").IconClass("k-icon k-i-bold");
23-
buttons.Add().Name("Italic").IconClass("k-icon k-i-italic");
24-
buttons.Add().Name("Underline").IconClass("k-icon k-i-underline");
25-
});
26-
})
27-
.Messages(messages =>
28-
{
29-
messages.Placeholder(Model.Placeholder);
30-
messages.SendButton(Model.SendButton);
31-
})
32-
.Events(e =>
33-
{
34-
e.ToolClick("onToolClick");
35-
})
12+
@(Html.Kendo().Chat()
13+
.Name("chat")
14+
.Height("600px")
15+
.Width("400px")
16+
.AuthorId("1")
17+
.TextField("Text")
18+
.AuthorNameField("AuthorName")
19+
.FilesField("Files")
20+
.AuthorIdField("AuthorId")
21+
.AuthorImageUrlField("AuthorImageUrl")
22+
.AuthorImageAltTextField("AuthorImageAltText")
23+
.TimestampField("TimeStamp")
24+
.IdField("Id")
25+
.IsPinnedField("IsPinned")
26+
.IsDeletedField("IsDeleted")
27+
.IsTypingField("IsTyping")
28+
.DataSource(dataSource => dataSource
29+
.Ajax()
30+
.Read(r => r.Url("/Chat/ChatIndex?handler=ReadMessages").Data("forgeryToken"))
31+
.Create(r => r.Url("/Chat/ChatIndex?handler=CreateMessage").Data("forgeryToken"))
32+
.Update(r => r.Url("/Chat/ChatIndex?handler=UpdateMessage").Data("forgeryToken"))
3633
)
37-
34+
.Events(events => events.SendMessage("onSendMessage"))
35+
)
3836

3937
<script>
40-
function onToolClick(e) {
41-
console.log(e.name)
42-
}
38+
function forgeryToken() {
39+
return kendo.antiForgeryTokens();
40+
}
41+
42+
function onSendMessage(e) {
43+
const currentUser = {
44+
id: 1,
45+
name: "John Doe",
46+
iconUrl: "https://demos.telerik.com/aspnet-core/shared/web/Customers/RICSU.jpg",
47+
iconAltText: "John's profile picture"
48+
};
49+
50+
e.message.authorId = currentUser.id;
51+
e.message.authorName = currentUser.name;
52+
e.message.authorImageUrl = currentUser.iconUrl;
53+
e.message.authorImageAltText = currentUser.iconAltText;
54+
55+
setTimeout(() => {
56+
e.sender.scrollToBottom();
57+
}, 30);
58+
}
4359
</script>

0 commit comments

Comments
 (0)