diff --git a/components/chat/data-binding.md b/components/chat/data-binding.md index db11626cd..2590f851a 100644 --- a/components/chat/data-binding.md +++ b/components/chat/data-binding.md @@ -19,21 +19,42 @@ To bind the Chat to data, set its `Data` parameter to an `IEnumerable` where >caption Basic data binding ````Razor - + OnSendMessage="@OnChatSendMessage"> @code { - private List Messages { get; set; } = new List + #region Component Parameters + + private List 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(); + + 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 { @@ -43,35 +64,30 @@ To bind the Chat to data, set its `Data` parameter to an `IEnumerable` 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 SuggestedActions { get; set; } - public IEnumerable Attachments { get; set; } = new List(); } + + #endregion } ```` @@ -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 - + OnSendMessage="@OnChatSendMessage">
- Add System Message - Clear All Messages + Add System Message + Clear All Messages
@code { - private TelerikChat Chat1 { get; set; } - private List Messages { get; set; } = new List(); - private string CurrentUserId = "user1"; + #region Component References + + private TelerikChat ChatRef { get; set; } + + #endregion + + #region Component Parameters + + private List ChatData { get; set; } + private string CurrentUserId { get; set; } = "user1"; + + #endregion + + #region Lifecycle Methods + + protected override void OnInitialized() + { + ChatData = new List(); + } + + #endregion + + #region Methods - private void HandleSendMessage(ChatSendMessageEventArgs args) + private void OnChatSendMessage(ChatSendMessageEventArgs args) { var newMessage = new ChatMessage { @@ -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", @@ -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 Attachments { get; set; } = new List(); } + + #endregion } ```` diff --git a/components/chat/events.md b/components/chat/events.md index a6999ca0a..bb60116b5 100644 --- a/components/chat/events.md +++ b/components/chat/events.md @@ -19,16 +19,16 @@ The `OnSendMessage` event fires when a user sends a new message. Use this event >caption Handle the OnSendMessage event ````Razor - + -@code { - private List Messages { get; set; } = new List(); +@code { + private List ChatData { get; set; } = new List(); - 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 { @@ -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 SuggestedActions { get; set; } - public IEnumerable Attachments { get; set; } = new List(); } } @@ -77,21 +66,30 @@ The `OnSuggestionClick` event fires when a user clicks on a quick reply suggesti >caption Handle suggestion clicks ````Razor - + -@code { - private TelerikChat Chat1; - - private List QuickReplies = new List +@code { + private TelerikChat? ChatRef { get; set; } + + private List ChatData { get; set; } = new(); + + private List ChatSuggestions { get; set; } + + protected override void OnInitialized() { - "Request project status update" - }; + ChatData = new List(); + + ChatSuggestions = new List + { + "Request project status update" + }; + } - private void HandleSuggestionClick(ChatSuggestionClickEventArgs args) + private void OnChatSuggestionClick(ChatSuggestionClickEventArgs args) { string responseMessage = string.Empty; @@ -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", @@ -110,7 +108,7 @@ The `OnSuggestionClick` event fires when a user clicks on a quick reply suggesti Timestamp = DateTime.Now }); - Chat1?.Refresh(); + ChatRef?.Refresh(); } } ```` @@ -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 - + -@code { - private async Task HandleDownload(ChatDownloadEventArgs args) +@code { + private async Task OnChatDownload(ChatDownloadEventArgs args) { foreach (var file in args.Files) { @@ -148,14 +146,14 @@ The `OnMessageUnpin` event fires when a user unpins a message. Handle this event >caption Handle message unpinning ````RAZOR.skip-repl - + -@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; @@ -171,17 +169,17 @@ The `OnInputValueChanged` event fires when the input value changes. Use this for >caption Handle input value changes ````RAZOR.skip-repl - + @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; } } ```` diff --git a/components/chat/file-uploads-and-media.md b/components/chat/file-uploads-and-media.md index 3e8fcde75..a22b98292 100644 --- a/components/chat/file-uploads-and-media.md +++ b/components/chat/file-uploads-and-media.md @@ -56,7 +56,8 @@ Configure file upload behavior using the `ChatFileSelectSettings` component: @code { - private TelerikChat Chat1; + private TelerikChat? Chat1; + private List AllowedExtensions = new List { ".jpg", ".jpeg", ".png", ".pdf", ".docx", ".txt" }; private List ChatConversation = new List() diff --git a/components/chat/integrations.md b/components/chat/integrations.md index 32c0e39a5..0cebf7902 100644 --- a/components/chat/integrations.md +++ b/components/chat/integrations.md @@ -38,7 +38,7 @@ The following example demonstrates using the `OnSendMessage` event to communicat OnSendMessage="@(async (args) => await AskAI(args))" /> @code { - private TelerikChat AIChat; + private TelerikChat? AIChat; private List AIChatConversation { get; set; } = new List(); private CancellationTokenSource cancellationTokenSource = new CancellationTokenSource(); @@ -83,27 +83,16 @@ The following example demonstrates using the `OnSendMessage` event to communicat 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 SuggestedActions { get; set; } - public IEnumerable Attachments { get; set; } = new List(); } } diff --git a/components/chat/messages.md b/components/chat/messages.md index fd5c1dbbe..799715e7d 100644 --- a/components/chat/messages.md +++ b/components/chat/messages.md @@ -17,12 +17,12 @@ The Telerik UI for Blazor Chat component provides comprehensive control over mes Configure context menu actions that appear when users right-click on messages. These actions provide quick access to common message operations. ````Razor - + TextField="@nameof(ChatMessage.Content)" + AuthorId="@CurrentUserId"> @@ -32,33 +32,33 @@ Configure context menu actions that appear when users right-click on messages. T @code { - private TelerikChat Chat1; - - private List ChatConversation = new List() + #region Component References + + private TelerikChat? ChatRef { get; set; } + + #endregion + + #region Component Parameters + + private List ChatData { get; set; } = new(); + private string CurrentUserId { get; set; } = "1"; + + #endregion + + #region Lifecycle Methods + + protected override void OnInitialized() { - new ChatMessage() - { - Id = "1", - AuthorId = "1", - AuthorName = "John Smith", - Content = "Hello, how are you today?", - Status = "Seen", - Timestamp = DateTime.Now.AddMinutes(-10) - }, - new ChatMessage() - { - Id = "2", - AuthorId = "2", - AuthorName = "Jane Doe", - Content = "Hi John! I'm doing great, thanks for asking.", - Status = "Seen", - Timestamp = DateTime.Now.AddMinutes(-8) - } - }; + GenerateChatData(); + } + + #endregion + + #region Methods private void OnReplyClick(ChatMessageActionClickEventArgs args) { - var message = ChatConversation.FirstOrDefault(m => m.Id == args.MessageId); + var message = ChatData.FirstOrDefault(m => m.Id == args.MessageId); if (message != null) { // Set up reply context @@ -68,7 +68,7 @@ Configure context menu actions that appear when users right-click on messages. T private void OnCopyClick(ChatMessageActionClickEventArgs args) { - var message = ChatConversation.FirstOrDefault(m => m.Id == args.MessageId); + var message = ChatData.FirstOrDefault(m => m.Id == args.MessageId); if (message != null) { // Copy message content to clipboard @@ -78,39 +78,73 @@ Configure context menu actions that appear when users right-click on messages. T private void OnPinClick(ChatMessageActionClickEventArgs args) { - var message = ChatConversation.FirstOrDefault(m => m.Id == args.MessageId); + var message = ChatData.FirstOrDefault(m => m.Id == args.MessageId); if (message != null) { message.IsPinned = !message.IsPinned; - Chat1?.Refresh(); + ChatRef?.Refresh(); } } private void OnDeleteClick(ChatMessageActionClickEventArgs args) { - var message = ChatConversation.FirstOrDefault(m => m.Id == args.MessageId); + var message = ChatData.FirstOrDefault(m => m.Id == args.MessageId); if (message != null) { message.IsDeleted = true; - Chat1?.Refresh(); + ChatRef?.Refresh(); + } + } + + #endregion + + #region Data Generation + + private void GenerateChatData() + { + ChatData = new List(); + + var messageTexts = new[] + { + "Hello, how are you today?", + "Hi John! I'm doing great, thanks for asking." + }; + + for (int i = 1; i <= 2; i++) + { + ChatData.Add(new ChatMessage + { + Id = i.ToString(), + AuthorId = i.ToString(), + AuthorName = i == 1 ? "John Smith" : "Jane Doe", + Content = messageTexts[i - 1], + Status = "Seen", + Timestamp = DateTime.Now.AddMinutes(-10 + (i * 2)) + }); } } + + #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 Content { get; set; } - public string ReplyToMessageId { get; set; } - public string Status { get; set; } - public bool IsDeleted { get; set; } - public bool IsPinned { get; set; } - public DateTime Timestamp { get; set; } - public List SuggestedActions { get; set; } + 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 ReplyToMessageId { get; set; } + public string Status { get; set; } + public bool IsDeleted { get; set; } + public bool IsPinned { get; set; } + public DateTime Timestamp { get; set; } + public List SuggestedActions { get; set; } public IEnumerable Attachments { get; set; } = new List(); } + + #endregion } ```` @@ -119,13 +153,13 @@ Configure context menu actions that appear when users right-click on messages. T Configure toolbar actions that appear when messages are selected or hovered. These provide quick access to frequently used operations. ````RAZOR.skip-repl - - - - - - - + + + + + + + ```` ## Messages Styling @@ -179,7 +213,7 @@ Set the `InputValue` property to define the message box content and handle the ` } }; - private TelerikChat Chat1; + private TelerikChat? Chat1; private string CurrentInputValue { get; set; } = ""; diff --git a/components/chat/overview.md b/components/chat/overview.md index d95969476..c3501d362 100644 --- a/components/chat/overview.md +++ b/components/chat/overview.md @@ -23,39 +23,51 @@ The caption Basic configuration of the Telerik Chat ````razor - + EnableFileUpload="@ChatFileUploadEnabled" + EnableSpeechToText="@ChatSpeechToTextEnabled"> @code { - private List Messages { get; set; } = new List() + #region Component Parameters + + private List ChatData { get; set; } + private string CurrentUserId { get; set; } = "user1"; + private bool ChatFileUploadEnabled { get; set; } = true; + private bool ChatSpeechToTextEnabled { get; set; } = true; + + #endregion + + #region Lifecycle Methods + + protected override void OnInitialized() { - new ChatMessage - { - Id = "1", - Content = "Hello! How can I help you today?", - UserId = "assistant", - SentAt = DateTime.Now.AddMinutes(-5) - }, - new ChatMessage + ChatData = new List(); + + for (int i = 1; i <= 2; i++) { - Id = "2", - Content = "Hi there! I'm looking for information about the new features.", - UserId = "user1", - SentAt = DateTime.Now.AddMinutes(-3) + ChatData.Add(new ChatMessage + { + Id = i.ToString(), + Content = i == 1 ? "Hello! How can I help you today?" : "Hi there! I'm looking for information about the new features.", + UserId = i == 1 ? "assistant" : "user1", + SentAt = DateTime.Now.AddMinutes(-5 + (i * 2)) + }); } - }; - private string CurrentUserId = "user1"; - - private async Task HandleSendMessage(ChatSendMessageEventArgs args) + } + + #endregion + + #region Methods + + private async Task OnChatSendMessage(ChatSendMessageEventArgs args) { var newMessage = new ChatMessage { @@ -65,10 +77,14 @@ The Attachments { get; set; } } + + #endregion } ```` @@ -135,16 +153,16 @@ The Chat component exposes a `Refresh()` method that refreshes the component an ````RAZOR.skip-repl + Data="@ChatData" + OnSendMessage="@OnChatSendMessage"> -Refresh Chat +Refresh Chat @code { - private TelerikChat ChatRef { get; set; } + private TelerikChat? ChatRef { get; set; } - private void RefreshChat() + private void OnRefreshChatClick() { ChatRef?.Refresh(); } diff --git a/components/chat/quick-actions.md b/components/chat/quick-actions.md index 57e3e7438..a7a275a86 100644 --- a/components/chat/quick-actions.md +++ b/components/chat/quick-actions.md @@ -32,8 +32,9 @@ Message suggestions provide users with quick reply options that appear below the @code { - private string ChatInputValue { get; set; } - private TelerikChat Chat1; + private string ChatInputValue { get; set; } = ""; + + private TelerikChat? Chat1; private List QuickReplies = new List { @@ -162,8 +163,10 @@ Customize the appearance of suggestions using the Chat's `SuggestionTemplate`. @code { - private string ChatInputValue { get; set; } - private TelerikChat Chat1; + private string ChatInputValue { get; set; } = ""; + + private TelerikChat? Chat1; + private List CurrentSuggestions = new List { "Yes, I need help with my order", "No, I was just checking in" }; private List ChatConversation = new List() diff --git a/components/chat/templates.md b/components/chat/templates.md index dfc082a7e..d5fb697e6 100644 --- a/components/chat/templates.md +++ b/components/chat/templates.md @@ -69,8 +69,8 @@ This template allows you to customize the input area where users type their mess ````RAZOR.skip-repl - - + + ```` @@ -103,16 +103,16 @@ This allows you to define context menu actions that can be performed on Chat mes >caption A complete example that integrates all templates into a Chat component ````RAZOR.skip-repl - + Chat with John Smith @@ -134,8 +134,8 @@ This allows you to define context menu actions that can be performed on Chat mes - - + + @@ -145,15 +145,45 @@ This allows you to define context menu actions that can be performed on Chat mes - + @code { + #region Component References + + private TelerikChat? ChatRef { get; set; } + + #endregion + + #region Component Parameters + + private const string FirstUserImage = "images/user.webp"; + private const string SecondUserImage = "images/user.webp"; + private List ChatData { get; set; } = new(); + private List ChatSuggestions { get; set; } + private string ChatInputValue { get; set; } + private string CurrentUserId { get; set; } = "1"; + private bool ChatSpeechToTextEnabled { get; set; } = true; + + #endregion + + #region Lifecycle Methods + + protected override void OnInitialized() + { + GenerateChatData(); + + ChatSuggestions = new List { "Suggestion 1", "Suggestion 2" }; + } + + #endregion + + #region Methods - private void OnUnpin(ChatMessageUnpinEventArgs args) + private void OnChatMessageUnpin(ChatMessageUnpinEventArgs args) { - var message = ChatConversation.FirstOrDefault(x => x.Id == args.MessageId); + var message = ChatData.FirstOrDefault(x => x.Id == args.MessageId); if (message != null) { message.IsPinned = false; @@ -164,24 +194,22 @@ This allows you to define context menu actions that can be performed on Chat mes } } - private string FirstChatInputValue { get; set; } - - private void OnFirstInputValueChange(string value) + private void OnChatInputValueChanged(string newValue) { - FirstChatInputValue = value; + ChatInputValue = newValue; } - private void PinMessage(ChatMessageActionClickEventArgs args) + private void OnPinMessageClick(ChatMessageActionClickEventArgs args) { - var message = ChatConversation.FirstOrDefault(m => m.Id == args.MessageId); + var message = ChatData.FirstOrDefault(m => m.Id == args.MessageId); if (message != null) { - ChatConversation.ForEach(m => m.IsPinned = false); + ChatData.ForEach(m => m.IsPinned = false); message.IsPinned = true; } } - private void OnSendMessage(ChatSendMessageEventArgs args, string authorId) + private void OnChatSendMessage(ChatSendMessageEventArgs args, string authorId) { var newMessage = new ChatMessage { @@ -195,91 +223,67 @@ This allows you to define context menu actions that can be performed on Chat mes Timestamp = DateTime.Now }; - ChatConversation.Add(newMessage); - RefreshChats(); + ChatData.Add(newMessage); + RefreshChat(); } - private void RefreshChats() + private void RefreshChat() { - Chat1?.Refresh(); + ChatRef?.Refresh(); } + + #endregion + + #region Data Generation - private TelerikChat Chat1; - - private List ChatConversation = new List() + private void GenerateChatData() { - new ChatMessage() - { - Id="first", - AuthorId="1", - AuthorName="John Smith", - AuthorImageUrl=FirstUserImage, - Content="Hello, I wanted to confirm the details of the project update.", - Status="Seen", - Timestamp=new System.DateTime(2023, 10, 1, 12, 0, 0) - }, - new ChatMessage() - { - Id="second", - AuthorId="2", - AuthorName="Jane Doe", - AuthorImageUrl=SecondUserImage, - Content="Hi John, the project update has been finalized and shared with the team.", - Status="Seen", - Timestamp=new System.DateTime(2023, 10, 1, 12, 5, 0) - }, - new ChatMessage() - { - Id="third", - AuthorId="1", - AuthorName="John Smith", - AuthorImageUrl=FirstUserImage, - Content="Thank you, Jane. I will review it and provide feedback shortly.", - Status="Seen", - Timestamp=new System.DateTime(2023, 10, 1, 12, 10, 0) - }, - new ChatMessage() - { - Id="fourth", - AuthorId="2", - AuthorName="Jane Doe", - AuthorImageUrl=SecondUserImage, - Content="Sounds good, John. Let me know if you need any additional information.", - Status="Seen", - Timestamp=new System.DateTime(2023, 10, 1, 12, 15, 0) - } - }; - - private const string FirstUserImage = "images/user.webp"; - - private const string SecondUserImage = "images/user.webp"; + ChatData = new List(); + + var messageTexts = new[] + { + "Hello, I wanted to confirm the details of the project update.", + "Hi John, the project update has been finalized and shared with the team.", + "Thank you, Jane. I will review it and provide feedback shortly.", + "Sounds good, John. Let me know if you need any additional information." + }; + + for (int i = 1; i <= 4; i++) + { + ChatData.Add(new ChatMessage + { + Id = $"message{i}", + AuthorId = (i % 2 == 1) ? "1" : "2", + AuthorName = (i % 2 == 1) ? "John Smith" : "Jane Doe", + AuthorImageUrl = (i % 2 == 1) ? FirstUserImage : SecondUserImage, + Content = messageTexts[i - 1], + Status = "Seen", + Timestamp = new DateTime(2023, 10, 1, 12, 0, 0).AddMinutes(i * 5) + }); + } + } + + #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 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 SuggestedActions { get; set; } - public IEnumerable Attachments { get; set; } = new List(); } + + #endregion } ````