Skip to content

Merge chat-docs-examples-enhancements-3236 into production #3246

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 18, 2025
Merged

Merge chat-docs-examples-enhancements-3236 into production #3246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2804300
docs(Chat): improve examples to follow style guide
IvanDanchev Sep 15, 2025
a4dbaa5
docs(Chat): add pr review suggestions
IvanDanchev Sep 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 87 additions & 45 deletions components/chat/data-binding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,42 @@ To bind the Chat to data, set its `Data` parameter to an `IEnumerable<T>` where
>caption Basic data binding

````Razor
<TelerikChat Data="@Messages"
<TelerikChat Data="@ChatData"
AuthorId="@CurrentUserId"
OnSendMessage="@HandleSendMessage">
OnSendMessage="@OnChatSendMessage">
</TelerikChat>

@code {
private List<ChatMessage> Messages { get; set; } = new List<ChatMessage>
#region Component Parameters

private List<ChatMessage> ChatData { get; set; }
private string CurrentUserId { get; set; } = "user1";

#endregion

#region Lifecycle Methods

protected override void OnInitialized()
{
new ChatMessage { Id = "1", Text = "Hello!", AuthorId = "user1", Timestamp = DateTime.Now.AddMinutes(-5) },
new ChatMessage { Id = "2", Text = "Hi there!", AuthorId = "user2", Timestamp = DateTime.Now.AddMinutes(-3) }
};
ChatData = new List<ChatMessage>();

for (int i = 1; i <= 2; i++)
{
ChatData.Add(new ChatMessage
{
Id = i.ToString(),
Text = i == 1 ? "Hello!" : "Hi there!",
AuthorId = i == 1 ? "user1" : "user2",
Timestamp = DateTime.Now.AddMinutes(-5 + (i * 2))
});
}
}

private string CurrentUserId { get; set; } = "user1";

private void HandleSendMessage(ChatSendMessageEventArgs args)
#endregion

#region Methods

private void OnChatSendMessage(ChatSendMessageEventArgs args)
{
var newMessage = new ChatMessage
{
Expand All @@ -43,35 +64,30 @@ To bind the Chat to data, set its `Data` parameter to an `IEnumerable<T>` where
Timestamp = DateTime.Now
};

Messages.Add(newMessage);
ChatData.Add(newMessage);
}

#endregion

#region Class Declarations

public class ChatMessage
{
public string Id { get; set; }

public string AuthorId { get; set; }

public string AuthorName { get; set; }

public string AuthorImageUrl { get; set; }

public string Text { get; set; }

public string MessageToReplyId { get; set; }

public string Status { get; set; }

public bool IsDeleted { get; set; }

public bool IsPinned { get; set; }

public DateTime Timestamp { get; set; }

public List<string> SuggestedActions { get; set; }

public IEnumerable<FileSelectFileInfo> Attachments { get; set; } = new List<FileSelectFileInfo>();
}

#endregion
}
````

Expand All @@ -98,24 +114,44 @@ The Chat component provides field mapping parameters to work with different data
The Chat component automatically reflects changes to the bound data collection. You can add, modify, or remove messages programmatically:

````Razor
<TelerikChat @ref="@Chat1"
Data="@Messages"
TextField="Content"
<TelerikChat @ref="@ChatRef"
Data="@ChatData"
TextField="@nameof(ChatMessage.Content)"
AuthorId="@CurrentUserId"
OnSendMessage="@HandleSendMessage">
OnSendMessage="@OnChatSendMessage">
</TelerikChat>

<div style="margin-top: 20px;">
<TelerikButton OnClick="@AddSystemMessage">Add System Message</TelerikButton>
<TelerikButton OnClick="@ClearMessages">Clear All Messages</TelerikButton>
<TelerikButton OnClick="@OnAddSystemMessageClick">Add System Message</TelerikButton>
<TelerikButton OnClick="@OnClearMessagesClick">Clear All Messages</TelerikButton>
</div>

@code {
private TelerikChat<ChatMessage> Chat1 { get; set; }
private List<ChatMessage> Messages { get; set; } = new List<ChatMessage>();
private string CurrentUserId = "user1";
#region Component References

private TelerikChat<ChatMessage> ChatRef { get; set; }

#endregion

#region Component Parameters

private List<ChatMessage> ChatData { get; set; }
private string CurrentUserId { get; set; } = "user1";

#endregion

#region Lifecycle Methods

protected override void OnInitialized()
{
ChatData = new List<ChatMessage>();
}

#endregion

#region Methods

private void HandleSendMessage(ChatSendMessageEventArgs args)
private void OnChatSendMessage(ChatSendMessageEventArgs args)
{
var newMessage = new ChatMessage
{
Expand All @@ -126,14 +162,14 @@ The Chat component automatically reflects changes to the bound data collection.
Timestamp = DateTime.Now
};

Messages.Add(newMessage);
ChatData.Add(newMessage);

Chat1?.Refresh();
ChatRef?.Refresh();
}

private void AddSystemMessage()
private void OnAddSystemMessageClick()
{
Messages.Add(new ChatMessage
ChatData.Add(new ChatMessage
{
Id = Guid.NewGuid().ToString(),
Content = "System notification: New user joined the chat",
Expand All @@ -142,25 +178,31 @@ The Chat component automatically reflects changes to the bound data collection.
Timestamp = DateTime.Now
});

Chat1?.Refresh();
ChatRef?.Refresh();
}

private void ClearMessages()
private void OnClearMessagesClick()
{
Messages.Clear();
Chat1?.Refresh();
ChatData.Clear();
ChatRef?.Refresh();
}

#endregion

#region Class Declarations

public class ChatMessage
{
public string Id { get; set; }
public string AuthorId { get; set; }
public string AuthorName { get; set; }
public string Content { get; set; }
public DateTime Timestamp { get; set; }
public string Status { get; set; }
public string Id { get; set; }
public string AuthorId { get; set; }
public string AuthorName { get; set; }
public string Content { get; set; }
public DateTime Timestamp { get; set; }
public string Status { get; set; }
public IEnumerable<FileSelectFileInfo> Attachments { get; set; } = new List<FileSelectFileInfo>();
}

#endregion
}
````

Expand Down
90 changes: 44 additions & 46 deletions components/chat/events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,16 @@ The `OnSendMessage` event fires when a user sends a new message. Use this event
>caption Handle the OnSendMessage event

````Razor
<TelerikChat Data="@Messages"
OnSendMessage="@HandleSendMessage">
<TelerikChat Data="@ChatData"
OnSendMessage="@OnChatSendMessage">
</TelerikChat>

@code {
private List<ChatMessage> Messages { get; set; } = new List<ChatMessage>();
@code {
private List<ChatMessage> ChatData { get; set; } = new List<ChatMessage>();

private string CurrentUserId { get; set; } = "user1";
private string CurrentUserId { get; set; } = "user1";

private void HandleSendMessage(ChatSendMessageEventArgs args)
private void OnChatSendMessage(ChatSendMessageEventArgs args)
{
var newMessage = new ChatMessage
{
Expand All @@ -38,33 +38,22 @@ The `OnSendMessage` event fires when a user sends a new message. Use this event
Timestamp = DateTime.Now
};

Messages.Add(newMessage);
ChatData.Add(newMessage);
}

public class ChatMessage
{
public string Id { get; set; }

public string AuthorId { get; set; }

public string AuthorName { get; set; }

public string AuthorImageUrl { get; set; }

public string Content { get; set; }

public string MessageToReplyId { get; set; }

public string Status { get; set; }

public bool IsDeleted { get; set; }

public bool IsPinned { get; set; }

public DateTime Timestamp { get; set; }

public List<string> SuggestedActions { get; set; }

public IEnumerable<FileSelectFileInfo> Attachments { get; set; } = new List<FileSelectFileInfo>();
}
}
Expand All @@ -77,21 +66,30 @@ The `OnSuggestionClick` event fires when a user clicks on a quick reply suggesti
>caption Handle suggestion clicks

````Razor
<TelerikChat Data="@Messages"
@ref="@Chat1"
Suggestions="@QuickReplies"
OnSuggestionClick="@HandleSuggestionClick">
<TelerikChat Data="@ChatData"
@ref="@ChatRef"
Suggestions="@ChatSuggestions"
OnSuggestionClick="@OnChatSuggestionClick">
</TelerikChat>

@code {
private TelerikChat<ChatMessage> Chat1;

private List<string> QuickReplies = new List<string>
@code {
private TelerikChat<ChatMessage>? ChatRef { get; set; }

private List<ChatMessage> ChatData { get; set; } = new();

private List<string> ChatSuggestions { get; set; }

protected override void OnInitialized()
{
"Request project status update"
};
ChatData = new List<ChatMessage>();

ChatSuggestions = new List<string>
{
"Request project status update"
};
}

private void HandleSuggestionClick(ChatSuggestionClickEventArgs args)
private void OnChatSuggestionClick(ChatSuggestionClickEventArgs args)
{
string responseMessage = string.Empty;

Expand All @@ -100,7 +98,7 @@ The `OnSuggestionClick` event fires when a user clicks on a quick reply suggesti
responseMessage = "Could you please provide the current status of all ongoing projects?";
}

Messages.Add(new ChatMessage
ChatData.Add(new ChatMessage
{
Id = Guid.NewGuid().ToString(),
AuthorId = "user2",
Expand All @@ -110,7 +108,7 @@ The `OnSuggestionClick` event fires when a user clicks on a quick reply suggesti
Timestamp = DateTime.Now
});

Chat1?.Refresh();
ChatRef?.Refresh();
}
}
````
Expand All @@ -122,12 +120,12 @@ The `OnDownload` event fires when a user downloads files from a message. Use thi
>caption Handle file downloads

````RAZOR.skip-repl
<TelerikChat Data="@Messages"
OnDownload="@HandleDownload">
<TelerikChat Data="@ChatData"
OnDownload="@OnChatDownload">
</TelerikChat>

@code {
private async Task HandleDownload(ChatDownloadEventArgs args)
@code {
private async Task OnChatDownload(ChatDownloadEventArgs args)
{
foreach (var file in args.Files)
{
Expand All @@ -148,14 +146,14 @@ The `OnMessageUnpin` event fires when a user unpins a message. Handle this event
>caption Handle message unpinning

````RAZOR.skip-repl
<TelerikChat Data="@Messages"
OnMessageUnpin="@HandleMessageUnpin">
<TelerikChat Data="@ChatData"
OnMessageUnpin="@OnChatMessageUnpin">
</TelerikChat>

@code {
private void HandleMessageUnpin(ChatMessageUnpinEventArgs args)
@code {
private void OnChatMessageUnpin(ChatMessageUnpinEventArgs args)
{
var message = Messages.FirstOrDefault(m => m.Id == args.MessageId);
var message = ChatData.FirstOrDefault(m => m.Id == args.MessageId);
if (message != null)
{
message.IsPinned = false;
Expand All @@ -171,17 +169,17 @@ The `OnInputValueChanged` event fires when the input value changes. Use this for
>caption Handle input value changes

````RAZOR.skip-repl
<TelerikChat Data="@Messages"
InputValue="@InputValue"
OnInputValueChanged="@HandleInputChange">
<TelerikChat Data="@ChatData"
InputValue="@ChatInputValue"
OnInputValueChanged="@OnChatInputValueChanged">
</TelerikChat>

@code {
private string InputValue { get; set; } = string.Empty;
private string ChatInputValue { get; set; } = string.Empty;

private void HandleInputChange(string value)
private void OnChatInputValueChanged(string newValue)
{
InputValue = value;
ChatInputValue = newValue;
}
}
````
Expand Down
3 changes: 2 additions & 1 deletion components/chat/file-uploads-and-media.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,8 @@ Configure file upload behavior using the `ChatFileSelectSettings` component:
</TelerikChat>

@code {
private TelerikChat<ChatMessage> Chat1;
private TelerikChat<ChatMessage>? Chat1;

private List<string> AllowedExtensions = new List<string> { ".jpg", ".jpeg", ".png", ".pdf", ".docx", ".txt" };

private List<ChatMessage> ChatConversation = new List<ChatMessage>()
Expand Down
Loading