diff --git a/components/chat/data-binding.md b/components/chat/data-binding.md index 0c18f7921..5f18599a1 100644 --- a/components/chat/data-binding.md +++ b/components/chat/data-binding.md @@ -76,6 +76,7 @@ The Chat component provides field mapping parameters to work with different data | `FilesField` | File attachments | `"Files"` | | `StatusField` | Message status | `"Status"` | | `IsDeletedField` | Indicates if the message is deleted | `"IsDeleted"` | +| `IsFailedField` | Indicates if the message has failed | `"IsFailed"` | | `IsPinnedField` | Indicaties if the message is pinned | `"IsPinned"` | | `IsTypingField` | Indicaties if the message author is currently typing | `"IsTyping"` | | `ReplyToIdField` | The ID of replied message | `"ReplyToId"` | diff --git a/components/chat/events.md b/components/chat/events.md index 4515e6ff9..8af9aa6b5 100644 --- a/components/chat/events.md +++ b/components/chat/events.md @@ -47,6 +47,66 @@ After the event handler executes, the Chat automatically scrolls down to the las } ```` +## OnResendMessage + +The `OnResendMessage` event fires when a user clicks the resend button of a failed message. Use this event to handle error message retry. + +>caption Handle the Chat OnResendMessage event + +````Razor + + + +@code { + private TelerikChat ChatRef { get; set; } + private List ChatData { get; set; } = new(); + private string CurrentUserId { get; set; } = "support"; + + private void OnChatResendMessage(ChatResendMessageEventArgs args) + { + var failedMessage = ChatData.FirstOrDefault(m => m.Id == args.MessageId); + + if (failedMessage != null) + { + failedMessage.IsFailed = false; + + ChatData.Remove(failedMessage); + ChatData.Add(failedMessage); + } + } + + protected override void OnInitialized() + { + var failedMessage = new ChatMessage + { + Id = Guid.NewGuid().ToString(), + Content = "How can I help you?", + AuthorId = "support", + AuthorName = "Support Agent", + Timestamp = DateTime.Now, + IsFailed = true + }; + + ChatData.Add(failedMessage); + } + + public class ChatMessage + { + public string Id { get; set; } + public string AuthorId { get; set; } + public string AuthorName { get; set; } + public string Content { get; set; } + public bool IsFailed { get; set; } + public DateTime Timestamp { get; set; } + } +} +```` + ## OnSuggestionClick The `OnSuggestionClick` event fires when a user clicks on a quick reply suggestion. You can use this event to customize suggestion handling. @@ -183,6 +243,7 @@ The Chat events provide specific argument types with relevant data: | Event | Arguments Type | Key Properties | |-------|----------------|----------------| | `OnSendMessage` | `ChatSendMessageEventArgs` | `Message`, `Files`, `ReplyMessageId` | +| `OnResendMessage` | `ChatResendMessageEventArgs` | `MessageId` | | `OnSuggestionClick` | `ChatSuggestionClickEventArgs` | `Suggestion`, `IsCancelled` | | `OnDownload` | `ChatDownloadEventArgs` | `Files`, `MessageId` | | `OnMessageUnpin` | `ChatMessageUnpinEventArgs` | `MessageId` | diff --git a/components/chat/messages.md b/components/chat/messages.md index c6b963ab1..b47b4dbc7 100644 --- a/components/chat/messages.md +++ b/components/chat/messages.md @@ -77,6 +77,18 @@ First, set the `IsTypingField` parameter to specify which field in your data mod } ```` +## Retry Failed Message + +The Chat component supports retrying failed messages. When a message has its `IsFailed` field set to `true`, the component displays a resend button that triggers the [`OnResendMessage`](slug:chat-events#onresendmessage) event, allowing you to handle the retry logic. + +To enable this behavior: + +1. Set the `IsFailedField` parameter to indicate which field in your data model marks a message as failed. + +2. Set that field to `true` for a message to show the resend button. + +For a complete implementation example, see the [`OnResendMessage` event article](slug:chat-events#onresendmessage). + ## Context Menu Message Actions Configure context menu actions that appear when users right-click on messages. These actions provide quick access to common message operations.