From 828c6d1137f1a81ba9f4dbfdafe9cbcab385b399 Mon Sep 17 00:00:00 2001 From: IvanDanchev Date: Thu, 21 Aug 2025 13:13:19 +0300 Subject: [PATCH 1/5] docs: add chat initial docs #11678 --- .../chat/accessibility/wai-aria-support.md | 36 ++ .../chat/customization/attachment-template.md | 13 + .../chat/customization/header-template.md | 13 + .../chat/customization/message-template.md | 13 + .../chat/customization/messagebox-template.md | 38 ++ components/chat/customization/overview.md | 13 + .../chat/customization/status-template.md | 13 + .../chat/customization/suggestion-template.md | 13 + .../chat/customization/timestamp-template.md | 13 + components/chat/data-binding.md | 199 +++++++++++ components/chat/events.md | 248 +++++++++++++ components/chat/file-uploads-and-media.md | 275 +++++++++++++++ components/chat/getting-started.md | 123 +++++++ components/chat/integrations/ai.md | 27 ++ components/chat/integrations/chatbot.md | 17 + components/chat/integrations/overview.md | 13 + components/chat/messages.md | 20 ++ components/chat/messages/appearance.md | 16 + components/chat/messages/overview.md | 13 + components/chat/messages/persistence.md | 13 + components/chat/messages/tools.md | 17 + components/chat/overview.md | 151 ++++++++ components/chat/quick-actions.md | 330 ++++++++++++++++++ docs-builder.yml | 11 + 24 files changed, 1638 insertions(+) create mode 100644 components/chat/accessibility/wai-aria-support.md create mode 100644 components/chat/customization/attachment-template.md create mode 100644 components/chat/customization/header-template.md create mode 100644 components/chat/customization/message-template.md create mode 100644 components/chat/customization/messagebox-template.md create mode 100644 components/chat/customization/overview.md create mode 100644 components/chat/customization/status-template.md create mode 100644 components/chat/customization/suggestion-template.md create mode 100644 components/chat/customization/timestamp-template.md create mode 100644 components/chat/data-binding.md create mode 100644 components/chat/events.md create mode 100644 components/chat/file-uploads-and-media.md create mode 100644 components/chat/getting-started.md create mode 100644 components/chat/integrations/ai.md create mode 100644 components/chat/integrations/chatbot.md create mode 100644 components/chat/integrations/overview.md create mode 100644 components/chat/messages.md create mode 100644 components/chat/messages/appearance.md create mode 100644 components/chat/messages/overview.md create mode 100644 components/chat/messages/persistence.md create mode 100644 components/chat/messages/tools.md create mode 100644 components/chat/overview.md create mode 100644 components/chat/quick-actions.md diff --git a/components/chat/accessibility/wai-aria-support.md b/components/chat/accessibility/wai-aria-support.md new file mode 100644 index 000000000..660a289a3 --- /dev/null +++ b/components/chat/accessibility/wai-aria-support.md @@ -0,0 +1,36 @@ +--- +title: WAI-ARIA Support +page_title: Chat WAI-ARIA Support +slug: chat-wai-aria-support +position: 10 +description: Learn about WAI-ARIA accessibility support in the Telerik UI for Blazor Chat component, including ARIA roles, attributes, and screen reader compatibility. +tags: telerik,blazor,chat,accessibility,wai-aria +published: True +--- + +# WAI-ARIA Support in Telerik UI for Blazor Chat + +The Chat component implements WAI-ARIA roles and attributes to ensure accessibility for users with assistive technologies. + +## ARIA Roles +- `role="log"` for the message list +- `role="textbox"` for the input area +- `role="button"` for actionable elements (send, upload, speech-to-text) + +## ARIA Attributes +- `aria-live` for dynamic message updates +- `aria-label` and `aria-labelledby` for descriptive labeling +- `aria-disabled` for disabled actions + +## Screen Reader Support +- All messages, actions, and input areas are announced +- Status indicators and quick actions are accessible + +## Keyboard Navigation +- Tab, arrow keys, and shortcuts are supported for navigation and actions + +## Compliance +- Designed to meet WCAG 2.1 AA requirements +- Tested with NVDA and JAWS + +Refer to the [Accessibility Overview](./overview.md) for more details. diff --git a/components/chat/customization/attachment-template.md b/components/chat/customization/attachment-template.md new file mode 100644 index 000000000..36e59e34d --- /dev/null +++ b/components/chat/customization/attachment-template.md @@ -0,0 +1,13 @@ +--- +title: AttachmentTemplate +page_title: Chat AttachmentTemplate +description: Learn about the legacy AttachmentTemplate feature in other Telerik UI suites. Not implemented in Blazor. +slug: chat-customisation-attachment-template +tags: telerik,blazor,chat,customisation,attachment-template,legacy +published: True +position: 18 +--- + +# AttachmentTemplate + +*Note: This is a legacy feature in React, Angular, and jQuery. Not implemented in Blazor.* diff --git a/components/chat/customization/header-template.md b/components/chat/customization/header-template.md new file mode 100644 index 000000000..af675c4e2 --- /dev/null +++ b/components/chat/customization/header-template.md @@ -0,0 +1,13 @@ +--- +title: Header Template +page_title: Chat Header Template +description: Learn how to customize the header layout and content using the HeaderTemplate parameter in the Telerik UI for Blazor Chat component. +slug: chat-customisation-header-template +tags: telerik,blazor,chat,customisation,header-template +published: True +position: 17 +--- + +# Header Template + +Change the header layout and content for the Chat component. diff --git a/components/chat/customization/message-template.md b/components/chat/customization/message-template.md new file mode 100644 index 000000000..90187458f --- /dev/null +++ b/components/chat/customization/message-template.md @@ -0,0 +1,13 @@ +--- +title: Message Template +page_title: Chat Message Template +description: Learn how to customize the rendering of chat messages using the MessageTemplate parameter in the Telerik UI for Blazor Chat component. +slug: chat-customisation-message-template +tags: telerik,blazor,chat,customisation,message-template +published: True +position: 12 +--- + +# Message Template + +Customize the rendering of chat messages using a template. diff --git a/components/chat/customization/messagebox-template.md b/components/chat/customization/messagebox-template.md new file mode 100644 index 000000000..189389bfe --- /dev/null +++ b/components/chat/customization/messagebox-template.md @@ -0,0 +1,38 @@ +--- +title: MessageBox Template +page_title: Chat MessageBox Template +description: Learn how to customize the input box for sending messages using the MessageBoxTemplate parameter in the Telerik UI for Blazor Chat component. +slug: chat-customisation-messagebox-template +tags: telerik,blazor,chat,customisation,messagebox-template +published: True +position: 16 +--- + +# MessageBox Template + +The `MessageBoxTemplate` parameter of the `TelerikChat` component allows you to fully customize the appearance and behavior of the chat input box. + +## Usage +You can use `MessageBoxTemplate` to replace the default input area with your own markup, controls, and logic. This is useful for adding custom buttons, icons, or integrating additional features. + +### Example +```razor +Your custom input UI here)" + ...other parameters...> + +``` + +### Demo Reference +In the demo `Overview.razor`, the input box is customized using the `InputValue` and `OnInputValueChanged` parameters, allowing for two-way binding and advanced input scenarios. You can further enhance this by using `MessageBoxTemplate` for full control. + +## API +- `MessageBoxTemplate`: `RenderFragment` - Customizes the message box section. +- `InputValue`: `string` - The value of the input field. +- `OnInputValueChanged`: `EventCallback` - Triggered when the input value changes. + +## Tips +- Combine with file upload and speech-to-text features for a rich input experience. +- Add custom validation, formatting, or quick action buttons as needed. + +For more advanced scenarios, see the demos in `C:\Repos\blazor\demos\server-side\TelerikBlazorDemos\Pages\Chat`. diff --git a/components/chat/customization/overview.md b/components/chat/customization/overview.md new file mode 100644 index 000000000..72d30471c --- /dev/null +++ b/components/chat/customization/overview.md @@ -0,0 +1,13 @@ +--- +title: Customisation Overview +page_title: Chat Customisation Overview +description: Learn how to customize the Telerik UI for Blazor Chat component using templates for messages, timestamps, suggestions, and more. +slug: chat-customisation-overview +tags: telerik,blazor,chat,customisation,templates +published: True +position: 11 +--- + +# Customisation Overview + +Learn how to customize the Chat component's templates and UI elements. This section covers message, timestamp, suggestion, status, message box, header, and attachment templates. diff --git a/components/chat/customization/status-template.md b/components/chat/customization/status-template.md new file mode 100644 index 000000000..b1365a972 --- /dev/null +++ b/components/chat/customization/status-template.md @@ -0,0 +1,13 @@ +--- +title: Status Template +page_title: Chat Status Template +description: Learn how to display custom status indicators for messages using the StatusTemplate parameter in the Telerik UI for Blazor Chat component. +slug: chat-customisation-status-template +tags: telerik,blazor,chat,customisation,status-template +published: True +position: 15 +--- + +# Status Template + +Display custom status indicators for messages. diff --git a/components/chat/customization/suggestion-template.md b/components/chat/customization/suggestion-template.md new file mode 100644 index 000000000..4025d08d1 --- /dev/null +++ b/components/chat/customization/suggestion-template.md @@ -0,0 +1,13 @@ +--- +title: Suggestion Template +page_title: Chat Suggestion Template +description: Learn how to customize the appearance of suggested actions using the SuggestionTemplate parameter in the Telerik UI for Blazor Chat component. +slug: chat-customisation-suggestion-template +tags: telerik,blazor,chat,customisation,suggestion-template +published: True +position: 14 +--- + +# Suggestion Template + +Modify the appearance of suggested actions in the Chat component. diff --git a/components/chat/customization/timestamp-template.md b/components/chat/customization/timestamp-template.md new file mode 100644 index 000000000..448bb11a6 --- /dev/null +++ b/components/chat/customization/timestamp-template.md @@ -0,0 +1,13 @@ +--- +title: Timestamp Template +page_title: Chat Timestamp Template +description: Learn how to customize the display of message timestamps using the TimestampTemplate parameter in the Telerik UI for Blazor Chat component. +slug: chat-customisation-timestamp-template +tags: telerik,blazor,chat,customisation,timestamp-template +published: True +position: 13 +--- + +# Timestamp Template + +Change how timestamps are displayed for messages. diff --git a/components/chat/data-binding.md b/components/chat/data-binding.md new file mode 100644 index 000000000..a916a3dd8 --- /dev/null +++ b/components/chat/data-binding.md @@ -0,0 +1,199 @@ +--- +title: Data Binding +page_title: Chat Data Binding +description: Learn how to bind data to the Telerik UI for Blazor Chat component, including message models and dynamic updates. +slug: chat-data-binding +tags: telerik,blazor,chat,data-binding,messages +published: True +position: 2 +--- + +# Data Binding + +The Telerik UI for Blazor Chat component supports data binding to collections of messages and provides flexible field mapping to accommodate different data models. + +## Bind to Data + +To bind the Chat to data, set its `Data` parameter to an `IEnumerable` where `T` represents your message model. + +>caption Basic data binding + +````razor + + + +@code { + private List Messages { get; set; } = new List + { + 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) } + }; + + private string CurrentUserId = "user1"; + + private async Task HandleSendMessage(ChatSendMessageEventArgs args) + { + var newMessage = new ChatMessage + { + Id = Guid.NewGuid().ToString(), + Text = args.Message, + AuthorId = CurrentUserId, + Timestamp = DateTime.Now + }; + + Messages.Add(newMessage); + } + + public class ChatMessage + { + public string Id { get; set; } + public string Text { get; set; } + public string AuthorId { get; set; } + public DateTime Timestamp { get; set; } + public List Files { get; set; } = new List(); + public string Status { get; set; } = "Sent"; + public bool IsDeleted { get; set; } + public bool IsPinned { get; set; } + } +} +```` + +## Field Mapping + +The Chat component provides field mapping parameters to work with different data models. Use these parameters to specify which properties in your data model correspond to Chat features: + +| Parameter | Description | Default Value | +|-----------|-------------|---------------| +| `TextField` | Field containing message text content | `"Text"` | +| `AuthorIdField` | Field containing the author/user ID | `"AuthorId"` | +| `AuthorNameField` | Field containing the author display name | `"AuthorName"` | +| `TimestampField` | Field containing the message timestamp | `"Timestamp"` | +| `IdField` | Field containing the unique message ID | `"Id"` | +| `FilesField` | Field containing file attachments | `"Files"` | +| `StatusField` | Field containing message status | `"Status"` | +| `IsDeletedField` | Field indicating if message is deleted | `"IsDeleted"` | +| `IsPinnedField` | Field indicating if message is pinned | `"IsPinned"` | +| `ReplyТоIdField` | Field containing the ID of replied message | `"ReplyТоId"` | +| `SuggestedActionsField` | Field containing suggested actions | `"SuggestedActions"` | + +>caption Custom field mapping + +````razor + + + +@code { + private List Messages { get; set; } = new List(); + private string CurrentUserId = "user1"; + + private async Task HandleSendMessage(ChatSendMessageEventArgs args) + { + var newMessage = new CustomMessage + { + Id = Guid.NewGuid().ToString(), + Content = args.Message, + UserId = CurrentUserId, + UserName = "Current User", + CreatedAt = DateTime.Now, + Attachments = args.Files?.ToList() ?? new List() + }; + + Messages.Add(newMessage); + } + + public class CustomMessage + { + public string Id { get; set; } + public string Content { get; set; } + public string UserId { get; set; } + public string UserName { get; set; } + public DateTime CreatedAt { get; set; } + public List Attachments { get; set; } + } +} +```` + +## Dynamic Updates + +The Chat component automatically reflects changes to the bound data collection. You can add, modify, or remove messages programmatically: + +````razor + + + +
+ Add System Message + Clear All Messages +
+ +@code { + private TelerikChat ChatRef { get; set; } + private List Messages { get; set; } = new List(); + private string CurrentUserId = "user1"; + + private async Task HandleSendMessage(ChatSendMessageEventArgs args) + { + var newMessage = new ChatMessage + { + Id = Guid.NewGuid().ToString(), + Text = args.Message, + AuthorId = CurrentUserId, + Timestamp = DateTime.Now + }; + + Messages.Add(newMessage); + ChatRef?.Refresh(); + } + + private void AddSystemMessage() + { + Messages.Add(new ChatMessage + { + Id = Guid.NewGuid().ToString(), + Text = "System notification: New user joined the chat", + AuthorId = "system", + Timestamp = DateTime.Now + }); + + ChatRef?.Refresh(); + } + + private void ClearMessages() + { + Messages.Clear(); + ChatRef?.Refresh(); + } +} +```` + +## Performance Considerations + +For optimal performance with large datasets: + +* Use observable collections like `ObservableCollection` for automatic UI updates +* Consider implementing virtual scrolling for very large message histories +* Use efficient data structures for message lookup operations +* Implement paging or lazy loading for historical messages + +## Next Steps + +* [Learn about Chat events](slug:chat-events) +* [Configure message templates](slug:chat-customisation-overview) +* [Set up AI integrations](slug:chat-integrations-overview) + +## See Also + +* [Chat Overview](slug:chat-overview) +* [Live Demo: Chat Data Binding](https://demos.telerik.com/blazor-ui/chat/overview) diff --git a/components/chat/events.md b/components/chat/events.md new file mode 100644 index 000000000..299f6722f --- /dev/null +++ b/components/chat/events.md @@ -0,0 +1,248 @@ +--- +title: Events +page_title: Chat Events +description: Learn about the events exposed by the Telerik UI for Blazor Chat component for message handling, quick actions, uploads, and more. +slug: chat-events +tags: telerik,blazor,chat,events +published: True +position: 5 +--- + +# Chat Events + +The Telerik UI for Blazor Chat component exposes various events that allow you to implement custom functionality and handle user interactions. This article lists the available events and provides examples for the most common use cases. + +## OnSendMessage + +The `OnSendMessage` event fires when a user sends a new message. Use this event to handle message processing, validation, and persistence. + +>caption Handle the OnSendMessage event + +````razor + + + +@code { + private async Task HandleSendMessage(ChatSendMessageEventArgs args) + { + // Validate message + if (string.IsNullOrWhiteSpace(args.Message)) + return; + + var newMessage = new ChatMessage + { + Id = Guid.NewGuid().ToString(), + Text = args.Message, + AuthorId = CurrentUserId, + Timestamp = DateTime.Now, + Files = args.Files?.ToList() ?? new List() + }; + + // Add to collection + Messages.Add(newMessage); + + // Optionally save to database + await SaveMessageAsync(newMessage); + } +} +```` + +## OnSuggestionClick + +The `OnSuggestionClick` event fires when a user clicks on a quick reply suggestion. You can use this event to customize suggestion handling. + +>caption Handle suggestion clicks + +````razor + + + +@code { + private List QuickReplies = new List { "Hello", "How are you?", "Thank you" }; + + private async Task HandleSuggestionClick(ChatSuggestionClickEventArgs args) + { + // You can modify the suggestion before it's used + args.IsCancelled = false; // Allow the suggestion to be used + + // Or handle it completely custom + if (args.Suggestion == "Thank you") + { + args.IsCancelled = true; // Prevent default behavior + await HandleCustomThankYouAction(); + } + } +} +```` + +## OnDownload + +The `OnDownload` event fires when a user downloads files from a message. Use this event to handle file access, logging, or custom download logic. + +>caption Handle file downloads + +````razor + + + +@code { + private async Task HandleDownload(ChatDownloadEventArgs args) + { + foreach (var file in args.Files) + { + // Log download activity + await LogFileDownload(file.Name, args.MessageId); + + // Implement custom download logic + await ProcessFileDownload(file); + } + } +} +```` + +## OnMessageUnpin + +The `OnMessageUnpin` event fires when a user unpins a message. Handle this event to update your data model and persist the change. + +>caption Handle message unpinning + +````razor + + + +@code { + private async Task HandleMessageUnpin(ChatMessageUnpinEventArgs args) + { + var message = Messages.FirstOrDefault(m => m.Id == args.MessageId); + if (message != null) + { + message.IsPinned = false; + await UpdateMessageInDatabase(message); + } + } +} +```` + +## OnInputValueChanged + +The `OnInputValueChanged` event fires when the input value changes. Use this for real-time validation, auto-save drafts, or typing indicators. + +>caption Handle input value changes + +````razor + + + +@code { + private string InputValue { get; set; } = string.Empty; + + private async Task HandleInputChange(string newValue) + { + InputValue = newValue; + + // Show typing indicator + if (!string.IsNullOrEmpty(newValue)) + { + await ShowTypingIndicator(); + } + else + { + await HideTypingIndicator(); + } + + // Auto-save draft + await SaveDraft(newValue); + } +} +```` + +## Event Arguments + +The Chat events provide specific argument types with relevant data: + +| Event | Arguments Type | Key Properties | +|-------|----------------|----------------| +| `OnSendMessage` | `ChatSendMessageEventArgs` | `Message`, `Files`, `ReplyMessageId` | +| `OnSuggestionClick` | `ChatSuggestionClickEventArgs` | `Suggestion`, `IsCancelled` | +| `OnDownload` | `ChatDownloadEventArgs` | `Files`, `MessageId` | +| `OnMessageUnpin` | `ChatMessageUnpinEventArgs` | `MessageId` | +| `OnInputValueChanged` | `string` | The current input value | + +## Common Event Patterns + +### AI Integration + +Use `OnSendMessage` to send user messages to AI services: + +````razor +private async Task HandleSendMessage(ChatSendMessageEventArgs args) +{ + // Add user message + Messages.Add(new ChatMessage + { + Text = args.Message, + AuthorId = CurrentUserId, + Timestamp = DateTime.Now + }); + + // Get AI response + var aiResponse = await GetAIResponse(args.Message); + + // Add AI message + Messages.Add(new ChatMessage + { + Text = aiResponse, + AuthorId = "ai", + Timestamp = DateTime.Now + }); +} +```` + +### File Upload Processing + +Handle file uploads with validation and processing: + +````razor +private async Task HandleSendMessage(ChatSendMessageEventArgs args) +{ + if (args.Files?.Any() == true) + { + // Process uploaded files + foreach (var file in args.Files) + { + if (await ValidateFile(file)) + { + await ProcessUploadedFile(file); + } + } + } + + // Handle the message as usual + Messages.Add(new ChatMessage + { + Text = args.Message, + Files = args.Files?.ToList(), + AuthorId = CurrentUserId, + Timestamp = DateTime.Now + }); +} +```` + +## Next Steps + +* [Configure Chat messages and tools](slug:chat-messages-overview) +* [Set up AI integrations](slug:chat-integrations-overview) +* [Handle file uploads](slug:chat-file-uploads-and-media) + +## See Also + +* [Chat Overview](slug:chat-overview) +* [Chat API Reference](slug:Telerik.Blazor.Components.TelerikChat-1) diff --git a/components/chat/file-uploads-and-media.md b/components/chat/file-uploads-and-media.md new file mode 100644 index 000000000..b6fa265c7 --- /dev/null +++ b/components/chat/file-uploads-and-media.md @@ -0,0 +1,275 @@ +--- +title: File Uploads and Media +page_title: Chat File Uploads and Media +description: Learn how to configure file uploads, media sharing, and speech-to-text features in the Telerik UI for Blazor Chat component. +slug: chat-file-uploads-and-media +tags: telerik,blazor,chat,file-upload,media,speech-to-text +published: True +position: 4 +--- + +# File Uploads and Media + +The Telerik UI for Blazor Chat component supports file uploads, media sharing, and speech-to-text functionality to enhance the messaging experience. + +## File Upload Configuration + +Enable file uploads by setting the `EnableFileUpload` parameter to `true`: + +````razor + + + + + + +@code { + private List allowedExtensions = new List { ".jpg", ".jpeg", ".png", ".pdf", ".docx" }; + + private async Task HandleSendMessage(ChatSendMessageEventArgs args) + { + var newMessage = new ChatMessage + { + Id = Guid.NewGuid().ToString(), + Text = args.Message, + AuthorId = CurrentUserId, + Timestamp = DateTime.Now, + Files = args.Files?.ToList() ?? new List() + }; + + Messages.Add(newMessage); + } +} +```` + +## File Upload Settings + +Configure file upload behavior using the `ChatFileSelectSettings` component: + +| Parameter | Type | Default | Description | +|-----------|------|---------|-------------| +| `AllowedExtensions` | `List` | `null` | Allowed file extensions for upload | +| `MaxFileSize` | `long` | `null` | Maximum file size in bytes | +| `Multiple` | `bool` | `true` | Allow multiple file selection | +| `OnSelect` | `EventCallback` | - | Event fired when files are selected | + +>caption Advanced file upload configuration + +````razor + + + + + + +@code { + private List allowedExtensions = new List { ".jpg", ".png", ".pdf", ".docx", ".txt" }; + + private async Task OnFileSelect(FileSelectEventArgs args) + { + // Validate files before upload + foreach (var file in args.Files) + { + if (file.Size > 5242880) // 5MB limit + { + args.IsCancelled = true; + await ShowError($"File {file.Name} exceeds size limit"); + return; + } + } + } +} +```` + +## Speech-to-Text Configuration + +Enable speech-to-text functionality by setting `EnableSpeechToText` to `true`: + +````razor + + + + + + +@code { + private async Task OnSpeechResult(SpeechToTextButtonResultEventArgs args) + { + if (args.IsFinal && args.Alternatives?.Any() == true) + { + var transcript = args.Alternatives.First().Transcript; + // Handle the speech recognition result + await ProcessSpeechInput(transcript); + } + } +} +```` + +## Speech-to-Text Settings + +Configure speech recognition behavior using `ChatSpeechToTextButtonSettings`: + +| Parameter | Type | Default | Description | +|-----------|------|---------|-------------| +| `Language` | `string` | `"en-US"` | Recognition language code | +| `MaxAlternatives` | `int` | `1` | Maximum number of recognition alternatives | +| `InterimResults` | `bool` | `false` | Return interim recognition results | +| `OnResult` | `EventCallback` | - | Event fired when speech is recognized | + +## File Actions and Downloads + +Configure file actions and handle downloads: + +````razor + + + + + + + + +@code { + private async Task HandleDownload(ChatDownloadEventArgs args) + { + foreach (var file in args.Files) + { + await DownloadFile(file); + } + } + + private async Task HandleShareFile(ChatFileActionClickEventArgs args) + { + await ShareFile(args.File); + } + + private async Task HandlePreviewFile(ChatFileActionClickEventArgs args) + { + await PreviewFile(args.File); + } +} +```` + +## Media Display in Messages + +Display uploaded files and media within messages using templates: + +````razor + + +
+ @if (!string.IsNullOrEmpty(context.Message.Text)) + { +
@context.Message.Text
+ } + + @if (context.Message.Files?.Any() == true) + { +
+ @foreach (var file in context.Message.Files) + { +
+ @if (IsImageFile(file.Extension)) + { + @file.Name + } + else + { +
+ + @file.Name +
+ } +
+ } +
+ } +
+ + +```` + +## File Validation + +Implement client-side file validation: + +````razor +@code { + private async Task OnFileSelect(FileSelectEventArgs args) + { + var validFiles = new List(); + + foreach (var file in args.Files) + { + // Size validation + if (file.Size > MaxFileSize) + { + await ShowValidationError($"File '{file.Name}' exceeds maximum size of {MaxFileSize / (1024 * 1024)}MB"); + continue; + } + + // Extension validation + if (!allowedExtensions.Contains(file.Extension.ToLowerInvariant())) + { + await ShowValidationError($"File type '{file.Extension}' is not allowed"); + continue; + } + + // Content validation (optional) + if (!await ValidateFileContent(file)) + { + await ShowValidationError($"File '{file.Name}' contains invalid content"); + continue; + } + + validFiles.Add(file); + } + + // Update the file selection with only valid files + args.Files = validFiles; + + if (!validFiles.Any()) + { + args.IsCancelled = true; + } + } +} +```` + +## Security Considerations + +When implementing file uploads: + +1. **Validate file types** on both client and server +2. **Scan files** for malware before processing +3. **Limit file sizes** to prevent abuse +4. **Store files** in secure locations +5. **Implement access controls** for file downloads +6. **Use virus scanning** services for uploaded content + +## Next Steps + +* [Handle Chat events](slug:chat-events) +* [Configure message templates](slug:chat-customisation-overview) +* [Set up file actions](slug:chat-messages-tools) + +## See Also + +* [Chat Overview](slug:chat-overview) +* [FileSelect Component](slug:fileselect-overview) +* [SpeechToTextButton Component](slug:speechtotextbutton-overview) diff --git a/components/chat/getting-started.md b/components/chat/getting-started.md new file mode 100644 index 000000000..6ac3006ee --- /dev/null +++ b/components/chat/getting-started.md @@ -0,0 +1,123 @@ +--- +title: Getting Started +page_title: Chat Getting Started +description: Learn how to set up and configure the Telerik UI for Blazor Chat component in your application. +slug: chat-getting-started +tags: telerik,blazor,chat,setup,configuration +published: True +position: 1 +--- + +# Getting Started with Telerik UI for Blazor Chat + +This article explains how to get started with the Telerik Chat for Blazor. You will learn the steps to add the component to your application and configure its basic functionality. + +After completing this guide, you will be able to use a basic Chat component as the one in the following example: + +>caption Basic Chat configuration + +````razor + + + +@code { + private List Messages { get; set; } = new List(); + private string CurrentUserId = "user1"; + + private async Task HandleSendMessage(ChatSendMessageEventArgs args) + { + var newMessage = new ChatMessage + { + Id = Guid.NewGuid().ToString(), + Content = args.Message, + UserId = CurrentUserId, + SentAt = DateTime.Now + }; + + Messages.Add(newMessage); + await InvokeAsync(StateHasChanged); + } + + public class ChatMessage + { + public string Id { get; set; } + public string Content { get; set; } + public string UserId { get; set; } + public DateTime SentAt { get; set; } + public List Attachments { get; set; } + } +} +```` + +## Prerequisites + +Before adding the Chat component to your app, you must: + +1. [Set up a Blazor project to use Telerik UI for Blazor](slug:getting-started/what-you-need). + +## Add the TelerikChat to a Page + +Follow these steps to add the Chat component to your Blazor application: + +1. Add the `` tag to your `.razor` page. +2. Set the `Data` parameter to a collection that implements `IEnumerable` where `T` is your message model. +3. Set the `AuthorId` parameter to identify the current user. +4. Handle the `OnSendMessage` event to process new messages. +5. (Optional) Configure field mappings using parameters like `TextField`, `AuthorIdField`, and `TimestampField`. +6. (Optional) Set the `Height` and `Width` parameters to control the component's size. + +## Configure Data Fields + +The Chat component supports flexible data field mapping through parameters: + +| Parameter | Description | Default Value | +|-----------|-------------|---------------| +| `TextField` | Field containing message text | `"Text"` | +| `AuthorIdField` | Field containing author/user ID | `"AuthorId"` | +| `TimestampField` | Field containing message timestamp | `"Timestamp"` | +| `FilesField` | Field containing file attachments | `"Files"` | +| `IdField` | Field containing message ID | `"Id"` | +| `AuthorNameField` | Field containing author name | `"AuthorName"` | +| `StatusField` | Field containing message status | `"Status"` | + +## Enable Additional Features + +You can enable optional Chat features: + +````razor + + + +@code { + private List QuickReplies = new List { "Hello", "How are you?", "Thank you" }; + + private async Task HandleSuggestionClick(ChatSuggestionClickEventArgs args) + { + // Handle suggestion selection + } +} +```` + +## Next Steps + +* [Explore Chat data binding options](slug:chat-data-binding) +* [Configure Chat messages and tools](slug:chat-messages-overview) +* [Learn about Chat events](slug:chat-events) + +## See Also + +* [Chat Overview](slug:chat-overview) +* [Live Demo: Chat](https://demos.telerik.com/blazor-ui/chat/overview) diff --git a/components/chat/integrations/ai.md b/components/chat/integrations/ai.md new file mode 100644 index 000000000..054e703f0 --- /dev/null +++ b/components/chat/integrations/ai.md @@ -0,0 +1,27 @@ +--- +title: AI / LLM Integration +page_title: Chat AI / LLM Integration +description: Learn how to integrate the Telerik UI for Blazor Chat component with popular AI services and large language models. +slug: chat-integrations-ai +tags: telerik,blazor,chat,integrations,ai,llm +published: True +position: 20 +--- + +# AI / LLM Integration + +Integrate the Chat component with popular AI services (OpenAI, Azure AI, etc.) to provide intelligent responses. + +## Example Guidance +- Set up an API endpoint for your AI service. +- Use Chat events to send user input and display AI responses. +- Handle errors and security for service calls. + +Example: +```csharp +private async Task HandleSendMessage(ChatSendMessageEventArgs args) +{ + var aiResponse = await MyAIService.GetResponseAsync(args.Message); + Messages.Add(new ChatMessage { Text = aiResponse, AuthorId = "AI" }); +} +``` diff --git a/components/chat/integrations/chatbot.md b/components/chat/integrations/chatbot.md new file mode 100644 index 000000000..7a0ecdbab --- /dev/null +++ b/components/chat/integrations/chatbot.md @@ -0,0 +1,17 @@ +--- +title: Chatbot Integration +page_title: Chat Chatbot Integration +description: Learn how to connect the Telerik UI for Blazor Chat component to chatbot frameworks and custom bots. +slug: chat-integrations-chatbot +tags: telerik,blazor,chat,integrations,chatbot +published: True +position: 21 +--- + +# Chatbot Integration + +Connect the Chat component to chatbot frameworks or custom bots. + +- Handle message events to communicate with bot APIs. +- Display bot responses, suggestions, and actions. +- Customize bot behavior and UI as needed. diff --git a/components/chat/integrations/overview.md b/components/chat/integrations/overview.md new file mode 100644 index 000000000..ab5c7c9a2 --- /dev/null +++ b/components/chat/integrations/overview.md @@ -0,0 +1,13 @@ +--- +title: Integrations Overview +page_title: Chat Integrations Overview +description: Learn how to integrate the Telerik UI for Blazor Chat component with AI services and chatbots. +slug: chat-integrations-overview +tags: telerik,blazor,chat,integrations,ai,chatbot +published: True +position: 19 +--- + +# Integrations Overview + +Learn how to connect the Chat component with external services and frameworks, including AI/LLM and chatbots. This section provides guidance and examples for extending the Chat experience. diff --git a/components/chat/messages.md b/components/chat/messages.md new file mode 100644 index 000000000..4ee0d6844 --- /dev/null +++ b/components/chat/messages.md @@ -0,0 +1,20 @@ +# Messages + +The Chat component supports rich messaging features and tools. + +## Tools +### Message ContextMenu +Demonstrates built-in features (copy, delete, reply) and how to add custom options. + +### Message Toolbar +Show actions like edit, delete, or custom tools above/below messages. + +## Appearance +### Styling +Customize message appearance using CSS or component parameters. + +#### Message Width +Control the width of messages for different layouts. + +## Persistence +Persist messages to local storage, a database, or cloud service for continuity. diff --git a/components/chat/messages/appearance.md b/components/chat/messages/appearance.md new file mode 100644 index 000000000..276c79ad4 --- /dev/null +++ b/components/chat/messages/appearance.md @@ -0,0 +1,16 @@ +--- +title: Appearance +page_title: Chat Message Appearance +description: Learn how to customize the appearance and width of messages in the Telerik UI for Blazor Chat component. +slug: chat-messages-appearance +tags: telerik,blazor,chat,messages,appearance,styling +published: True +position: 8 +--- + +# Appearance + +Customize message appearance using CSS or component parameters. + +## Message Width +Control the width of messages for different layouts. diff --git a/components/chat/messages/overview.md b/components/chat/messages/overview.md new file mode 100644 index 000000000..66c70090e --- /dev/null +++ b/components/chat/messages/overview.md @@ -0,0 +1,13 @@ +--- +title: Messages Overview +page_title: Chat Messages Overview +description: Explore the messaging features of the Telerik UI for Blazor Chat component, including tools, appearance, and persistence. +slug: chat-messages-overview +tags: telerik,blazor,chat,messages,tools,appearance,persistence +published: True +position: 6 +--- + +# Messages Overview + +Explore the messaging features of the Chat component, including tools, appearance, and persistence. This section covers context menus, toolbars, styling, and message storage. diff --git a/components/chat/messages/persistence.md b/components/chat/messages/persistence.md new file mode 100644 index 000000000..15013ecde --- /dev/null +++ b/components/chat/messages/persistence.md @@ -0,0 +1,13 @@ +--- +title: Message Persistence +page_title: Chat Message Persistence +description: Learn how to persist messages in the Telerik UI for Blazor Chat component using local storage, databases, or cloud services. +slug: chat-messages-persistence +tags: telerik,blazor,chat,messages,persistence +published: True +position: 9 +--- + +# Message Persistence + +Persist messages to local storage, a database, or cloud service for continuity and history. diff --git a/components/chat/messages/tools.md b/components/chat/messages/tools.md new file mode 100644 index 000000000..7f816f28a --- /dev/null +++ b/components/chat/messages/tools.md @@ -0,0 +1,17 @@ +--- +title: Message Tools +page_title: Chat Message Tools +description: Learn about message context menus and toolbars in the Telerik UI for Blazor Chat component. +slug: chat-messages-tools +tags: telerik,blazor,chat,messages,tools,context-menu,toolbar +published: True +position: 7 +--- + +# Message Tools + +## Message ContextMenu +Demonstrates built-in features (copy, delete, reply) and how to add custom options. + +## Message Toolbar +Show actions like edit, delete, or custom tools above/below messages. diff --git a/components/chat/overview.md b/components/chat/overview.md new file mode 100644 index 000000000..0bd64aa95 --- /dev/null +++ b/components/chat/overview.md @@ -0,0 +1,151 @@ +--- +title: Overview +page_title: Chat Overview +description: Discover the Telerik UI for Blazor Chat component. Learn how to add the component to your app and explore its features like messaging, AI integration, customization, and accessibility. +slug: chat-overview +tags: telerik,blazor,chat,messaging,ai,accessibility +published: True +position: 0 +--- + +# Blazor Chat Component Overview + +The Telerik UI for Blazor Chat component enables developers to build modern conversational interfaces in Blazor applications. It supports rich messaging, AI integrations, custom templates, file uploads, and accessibility features. The component is designed for extensibility, allowing integration with chatbots, LLMs, and custom business logic. + +## Creating Blazor Chat + +1. Add the `` tag to your page. +2. Set the `Data` parameter to a collection of messages. +3. Set the `AuthorId` parameter to identify the current user. +4. Subscribe to the `OnSendMessage` event to handle new messages. +5. (optional) Configure additional features like file uploads, speech-to-text, and quick actions. + +>caption Basic configuration of the Telerik Chat + +````razor + + + +@code { + private List Messages { get; set; } = new List(); + private string CurrentUserId = "user1"; + + private async Task HandleSendMessage(ChatSendMessageEventArgs args) + { + var newMessage = new ChatMessage + { + Id = Guid.NewGuid().ToString(), + Content = args.Message, + UserId = CurrentUserId, + SentAt = DateTime.Now + }; + + Messages.Add(newMessage); + await InvokeAsync(StateHasChanged); + } + + public class ChatMessage + { + public string Id { get; set; } + public string Content { get; set; } + public string UserId { get; set; } + public DateTime SentAt { get; set; } + public List Attachments { get; set; } + } +} +```` + +## Data Binding + +The Chat component supports binding to collections of messages and user data. You can bind messages from a local source, a database, or a remote service. The component provides flexible field mapping to accommodate different data models. [Read more about Chat data binding...](slug:chat-data-binding) + +## Messages + +The Chat component offers rich messaging capabilities including context menus, toolbars, appearance customization, and persistence features. Messages can include text, files, and custom content. [Read more about Chat messages...](slug:chat-messages-overview) + +## Templates and Customization + +The Chat component provides extensive template support for customizing the appearance and behavior of messages, timestamps, suggestions, status indicators, message box, and header. [Read more about Chat customization...](slug:chat-customisation-overview) + +## Integrations + +Connect the Chat component with AI services, chatbots, and external APIs to create intelligent conversational experiences. The component supports integration with popular AI services and custom bot frameworks. [Read more about Chat integrations...](slug:chat-integrations-overview) + +## File Uploads and Media + +Enable file uploads and media sharing in your chat application. The component supports configurable file upload settings and speech-to-text functionality for enhanced user experience. [Read more about file uploads and media...](slug:chat-file-uploads-and-media) + +## Events + +The Chat component exposes various events that allow you to implement custom functionality and handle user interactions. Key events include message sending, file uploads, suggestion clicks, and message actions. [Read more about Chat events...](slug:chat-events) + +## Accessibility + +The Chat component is designed with accessibility in mind, supporting keyboard navigation, screen readers, and ARIA attributes. It follows WCAG 2.1 AA guidelines to ensure inclusive user experiences. [Read more about Chat accessibility...](slug:chat-accessibility-wai-aria-support) + +## Chat Parameters + +The Chat component provides a comprehensive set of parameters for customization: + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Parameter | Type and Default Value | Description | +| --- | --- | --- | +| `Data` | `IEnumerable` | The data source for chat messages. | +| `AuthorId` | `string` | The ID of the current user sending messages. | +| `Height` | `string` | The height of the chat component in CSS units. | +| `Width` | `string` | The width of the chat component in CSS units. | +| `EnableFileUpload` | `bool`
(`false`) | Enables file upload functionality in the chat input. | +| `EnableSpeechToText` | `bool`
(`true`) | Enables speech-to-text functionality with microphone input. | +| `MessageWidthMode` | `MessageWidthMode` enum
(`Standard`) | Controls the width behavior of messages (Standard or Full). | +| `Suggestions` | `IEnumerable` | Collection of quick reply suggestions. | + +## Chat Reference and Methods + +The Chat component exposes methods for programmatic control: + +* `Refresh()` - Refreshes the chat component and scrolls to the latest messages +* Keyboard navigation methods for accessible message navigation + +To execute these methods, obtain reference to the Chat instance via `@ref`. + +>caption How to obtain a Chat reference and call methods + +````razor + + + +Refresh Chat + +@code { + private TelerikChat ChatRef { get; set; } + + private void RefreshChat() + { + ChatRef?.Refresh(); + } +} +```` + +## Next Steps + +* [Get started with Chat data binding](slug:chat-data-binding) +* [Configure Chat messages and tools](slug:chat-messages-overview) +* [Customize Chat templates](slug:chat-customisation-overview) +* [Integrate Chat with AI services](slug:chat-integrations-overview) +* [Handle Chat events](slug:chat-events) +* [Configure file uploads and media](slug:chat-file-uploads-and-media) + +## See Also + +* [Live Demo: Chat](https://demos.telerik.com/blazor-ui/chat/overview) +* [Chat API Reference](slug:Telerik.Blazor.Components.TelerikChat-1) diff --git a/components/chat/quick-actions.md b/components/chat/quick-actions.md new file mode 100644 index 000000000..bf2f3af0d --- /dev/null +++ b/components/chat/quick-actions.md @@ -0,0 +1,330 @@ +--- +title: Quick Actions +page_title: Chat Quick Actions +description: Learn how to configure and use quick actions and message suggestions in the Telerik UI for Blazor Chat component. +slug: chat-quick-actions +tags: telerik,blazor,chat,quick-actions,suggestions +published: True +position: 3 +--- + +# Quick Actions + +The Telerik UI for Blazor Chat component supports quick actions and message suggestions to enhance user experience and provide convenient interaction options. + +## Message Suggestions + +Message suggestions provide users with quick reply options that appear below the message input area. + +>caption Basic message suggestions + +````razor + + + +@code { + private List QuickReplies = new List + { + "Hello", + "How are you?", + "Thank you", + "Yes", + "No", + "Maybe later" + }; + + private async Task HandleSuggestionClick(ChatSuggestionClickEventArgs args) + { + // The suggestion will be automatically placed in the input + // You can modify this behavior by setting args.IsCancelled = true + + if (args.Suggestion == "Thank you") + { + // Custom handling for specific suggestions + await HandleThankYouAction(); + } + } +} +```` + +## Dynamic Suggestions + +Update suggestions based on conversation context or user actions: + +````razor + + + +@code { + private List CurrentSuggestions = new List { "Hi there!", "Good morning" }; + + private async Task HandleSendMessage(ChatSendMessageEventArgs args) + { + // Add the message + Messages.Add(new ChatMessage + { + Text = args.Message, + AuthorId = CurrentUserId, + Timestamp = DateTime.Now + }); + + // Update suggestions based on message content + await UpdateSuggestionsForContext(args.Message); + } + + private async Task UpdateSuggestionsForContext(string lastMessage) + { + if (lastMessage.Contains("help")) + { + CurrentSuggestions = new List + { + "I need technical support", + "I have a billing question", + "I want to report a bug" + }; + } + else if (lastMessage.Contains("thank")) + { + CurrentSuggestions = new List + { + "You're welcome!", + "Happy to help", + "Anything else?" + }; + } + + StateHasChanged(); + } +} +```` + +## Custom Suggestion Templates + +Customize the appearance of suggestions using the `SuggestionTemplate`: + +````razor + + +
+ + @context.Suggestion +
+ + + + + +@code { + private List ActionSuggestions = new List + { + "Schedule Meeting", + "Send Document", + "Call Now", + "Set Reminder" + }; + + private SvgIcon GetSuggestionIcon(string suggestion) + { + return suggestion switch + { + "Schedule Meeting" => SvgIcon.Calendar, + "Send Document" => SvgIcon.FileAdd, + "Call Now" => SvgIcon.Phone, + "Set Reminder" => SvgIcon.Clock, + _ => SvgIcon.CommentPositive + }; + } +} +```` + +## Contextual Suggestions + +Provide context-aware suggestions based on message content or user behavior: + +````razor +@code { + private async Task HandleSendMessage(ChatSendMessageEventArgs args) + { + // Add user message + Messages.Add(new ChatMessage + { + Text = args.Message, + AuthorId = CurrentUserId, + Timestamp = DateTime.Now + }); + + // Generate AI or rule-based response + var response = await GenerateResponse(args.Message); + Messages.Add(new ChatMessage + { + Text = response.Text, + AuthorId = "bot", + Timestamp = DateTime.Now + }); + + // Update suggestions based on response + CurrentSuggestions = response.Suggestions; + StateHasChanged(); + } + + private async Task GenerateResponse(string userMessage) + { + var response = new BotResponse(); + + if (userMessage.ToLower().Contains("appointment")) + { + response.Text = "I can help you schedule an appointment. What works best for you?"; + response.Suggestions = new List + { + "Tomorrow morning", + "This afternoon", + "Next week", + "Show available times" + }; + } + else if (userMessage.ToLower().Contains("order")) + { + response.Text = "Let me help you with your order. What would you like to do?"; + response.Suggestions = new List + { + "Track my order", + "Cancel order", + "Modify order", + "Return item" + }; + } + + return response; + } + + public class BotResponse + { + public string Text { get; set; } + public List Suggestions { get; set; } = new List(); + } +} +```` + +## Suggestion Categories + +Organize suggestions into categories for complex scenarios: + +````razor + + + +
+ @foreach (var category in SuggestionCategories.Keys) + { + + @category + + } +
+ +@code { + private string ActiveCategory = "General"; + + private Dictionary> SuggestionCategories = new Dictionary> + { + ["General"] = new List { "Hello", "Thank you", "Goodbye" }, + ["Support"] = new List { "I need help", "Technical issue", "Billing question" }, + ["Sales"] = new List { "Product info", "Get quote", "Schedule demo" }, + ["Account"] = new List { "Update profile", "Change password", "View history" } + }; + + private List GetCurrentCategorySuggestions() + { + return SuggestionCategories.ContainsKey(ActiveCategory) + ? SuggestionCategories[ActiveCategory] + : new List(); + } + + private void SetActiveCategory(string category) + { + ActiveCategory = category; + StateHasChanged(); + } +} +```` + +## Integration with AI Services + +Use suggestions to guide AI conversations: + +````razor +@code { + private async Task HandleSuggestionClick(ChatSuggestionClickEventArgs args) + { + // Send suggestion to AI service with context + var aiResponse = await GetAIResponse(args.Suggestion, GetConversationContext()); + + // Add AI response + Messages.Add(new ChatMessage + { + Text = aiResponse.Text, + AuthorId = "ai", + Timestamp = DateTime.Now + }); + + // Update suggestions based on AI response + CurrentSuggestions = aiResponse.SuggestedFollowUps; + StateHasChanged(); + } + + private string GetConversationContext() + { + return string.Join("\n", Messages.TakeLast(5).Select(m => $"{m.AuthorId}: {m.Text}")); + } +} +```` + +## Best Practices + +When implementing quick actions and suggestions: + +1. **Keep suggestions relevant** to the current conversation context +2. **Limit the number** of suggestions (3-6 is optimal) +3. **Update suggestions dynamically** based on user interactions +4. **Use clear, concise text** for suggestion labels +5. **Provide visual feedback** when suggestions are selected +6. **Test with real users** to ensure suggestions are helpful + +## Next Steps + +* [Handle Chat events](slug:chat-events) +* [Set up AI integrations](slug:chat-integrations-overview) +* [Customize suggestion templates](slug:chat-customisation-suggestion-template) + +## See Also + +* [Chat Overview](slug:chat-overview) +* [Chat Events](slug:chat-events) +* [Live Demo: Chat](https://demos.telerik.com/blazor-ui/chat/overview) diff --git a/docs-builder.yml b/docs-builder.yml index 510858f95..44fa640d2 100644 --- a/docs-builder.yml +++ b/docs-builder.yml @@ -320,6 +320,17 @@ meta: title: ColorPalette "*colorgradient": title: ColorGradient + "*chat": + title: Chat + "*components/chat/customization": + title: Customization + position: 3 + "*components/chat/integrations": + title: Integrations + position: 5 + "*components/chat/messages": + title: Integrations + position: 6 "*chunkprogressbar": title: ChunkProgressBar "*chiplist": From d9b3b36a197f0c64b0670b5eaafdc927805f2c12 Mon Sep 17 00:00:00 2001 From: IvanDanchev Date: Tue, 26 Aug 2025 01:12:39 +0300 Subject: [PATCH 2/5] docs: add content to Chat articles part1 #11678 --- .../chat/accessibility/wai-aria-support.md | 39 +- .../chat/customization/attachment-template.md | 13 - .../chat/customization/header-template.md | 13 - .../chat/customization/message-template.md | 13 - .../chat/customization/messagebox-template.md | 38 -- components/chat/customization/overview.md | 13 - .../chat/customization/status-template.md | 13 - .../chat/customization/suggestion-template.md | 13 - .../chat/customization/timestamp-template.md | 13 - components/chat/data-binding.md | 115 ++--- components/chat/events.md | 176 +++---- components/chat/file-uploads-and-media.md | 432 ++++++++++-------- components/chat/integrations.md | 141 ++++++ components/chat/integrations/ai.md | 27 -- components/chat/integrations/chatbot.md | 17 - components/chat/integrations/overview.md | 13 - components/chat/messages.md | 235 +++++++++- components/chat/messages/appearance.md | 16 - components/chat/messages/overview.md | 13 - components/chat/messages/persistence.md | 13 - components/chat/messages/tools.md | 17 - components/chat/quick-actions.md | 422 ++++++++--------- components/chat/templates.md | 288 ++++++++++++ docs-builder.yml | 9 - 24 files changed, 1223 insertions(+), 879 deletions(-) delete mode 100644 components/chat/customization/attachment-template.md delete mode 100644 components/chat/customization/header-template.md delete mode 100644 components/chat/customization/message-template.md delete mode 100644 components/chat/customization/messagebox-template.md delete mode 100644 components/chat/customization/overview.md delete mode 100644 components/chat/customization/status-template.md delete mode 100644 components/chat/customization/suggestion-template.md delete mode 100644 components/chat/customization/timestamp-template.md create mode 100644 components/chat/integrations.md delete mode 100644 components/chat/integrations/ai.md delete mode 100644 components/chat/integrations/chatbot.md delete mode 100644 components/chat/integrations/overview.md delete mode 100644 components/chat/messages/appearance.md delete mode 100644 components/chat/messages/overview.md delete mode 100644 components/chat/messages/persistence.md delete mode 100644 components/chat/messages/tools.md create mode 100644 components/chat/templates.md diff --git a/components/chat/accessibility/wai-aria-support.md b/components/chat/accessibility/wai-aria-support.md index 660a289a3..5bc4c625d 100644 --- a/components/chat/accessibility/wai-aria-support.md +++ b/components/chat/accessibility/wai-aria-support.md @@ -10,7 +10,12 @@ published: True # WAI-ARIA Support in Telerik UI for Blazor Chat -The Chat component implements WAI-ARIA roles and attributes to ensure accessibility for users with assistive technologies. +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +Out of the box, the Telerik UI for Blazor Chat provides extensive accessibility support and enables users with disabilities to acquire complete control over its features. + + +The Chat is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers. ## ARIA Roles - `role="log"` for the message list @@ -22,15 +27,31 @@ The Chat component implements WAI-ARIA roles and attributes to ensure accessibil - `aria-label` and `aria-labelledby` for descriptive labeling - `aria-disabled` for disabled actions -## Screen Reader Support -- All messages, actions, and input areas are announced -- Status indicators and quick actions are accessible +## Section 508 + +The Chat is fully compliant with the [Section 508 requirements](http://www.section508.gov/). + +## Testing + +The Chat has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers. + +> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center). + +### Screen Readers + +The Chat has been tested with the following screen readers and browsers combinations: + +| Environment | Tool | +| ----------- | ---- | +| Firefox | NVDA | +| Chrome | JAWS | +| Microsoft Edge | JAWS | ## Keyboard Navigation -- Tab, arrow keys, and shortcuts are supported for navigation and actions -## Compliance -- Designed to meet WCAG 2.1 AA requirements -- Tested with NVDA and JAWS +For details on how the keyboard navigation works in Telerik UI for Blazor, refer to the [Accessibility Overview](slug:accessibility-overview#keyboard-navigation) article. + +## See Also -Refer to the [Accessibility Overview](./overview.md) for more details. +* [Blazor Chat Demos](https://demos.telerik.com/blazor-ui/chat/overview) +* [Accessibility in Telerik UI for Blazor](slug:accessibility-overview) diff --git a/components/chat/customization/attachment-template.md b/components/chat/customization/attachment-template.md deleted file mode 100644 index 36e59e34d..000000000 --- a/components/chat/customization/attachment-template.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: AttachmentTemplate -page_title: Chat AttachmentTemplate -description: Learn about the legacy AttachmentTemplate feature in other Telerik UI suites. Not implemented in Blazor. -slug: chat-customisation-attachment-template -tags: telerik,blazor,chat,customisation,attachment-template,legacy -published: True -position: 18 ---- - -# AttachmentTemplate - -*Note: This is a legacy feature in React, Angular, and jQuery. Not implemented in Blazor.* diff --git a/components/chat/customization/header-template.md b/components/chat/customization/header-template.md deleted file mode 100644 index af675c4e2..000000000 --- a/components/chat/customization/header-template.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Header Template -page_title: Chat Header Template -description: Learn how to customize the header layout and content using the HeaderTemplate parameter in the Telerik UI for Blazor Chat component. -slug: chat-customisation-header-template -tags: telerik,blazor,chat,customisation,header-template -published: True -position: 17 ---- - -# Header Template - -Change the header layout and content for the Chat component. diff --git a/components/chat/customization/message-template.md b/components/chat/customization/message-template.md deleted file mode 100644 index 90187458f..000000000 --- a/components/chat/customization/message-template.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Message Template -page_title: Chat Message Template -description: Learn how to customize the rendering of chat messages using the MessageTemplate parameter in the Telerik UI for Blazor Chat component. -slug: chat-customisation-message-template -tags: telerik,blazor,chat,customisation,message-template -published: True -position: 12 ---- - -# Message Template - -Customize the rendering of chat messages using a template. diff --git a/components/chat/customization/messagebox-template.md b/components/chat/customization/messagebox-template.md deleted file mode 100644 index 189389bfe..000000000 --- a/components/chat/customization/messagebox-template.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: MessageBox Template -page_title: Chat MessageBox Template -description: Learn how to customize the input box for sending messages using the MessageBoxTemplate parameter in the Telerik UI for Blazor Chat component. -slug: chat-customisation-messagebox-template -tags: telerik,blazor,chat,customisation,messagebox-template -published: True -position: 16 ---- - -# MessageBox Template - -The `MessageBoxTemplate` parameter of the `TelerikChat` component allows you to fully customize the appearance and behavior of the chat input box. - -## Usage -You can use `MessageBoxTemplate` to replace the default input area with your own markup, controls, and logic. This is useful for adding custom buttons, icons, or integrating additional features. - -### Example -```razor -Your custom input UI here)" - ...other parameters...> - -``` - -### Demo Reference -In the demo `Overview.razor`, the input box is customized using the `InputValue` and `OnInputValueChanged` parameters, allowing for two-way binding and advanced input scenarios. You can further enhance this by using `MessageBoxTemplate` for full control. - -## API -- `MessageBoxTemplate`: `RenderFragment` - Customizes the message box section. -- `InputValue`: `string` - The value of the input field. -- `OnInputValueChanged`: `EventCallback` - Triggered when the input value changes. - -## Tips -- Combine with file upload and speech-to-text features for a rich input experience. -- Add custom validation, formatting, or quick action buttons as needed. - -For more advanced scenarios, see the demos in `C:\Repos\blazor\demos\server-side\TelerikBlazorDemos\Pages\Chat`. diff --git a/components/chat/customization/overview.md b/components/chat/customization/overview.md deleted file mode 100644 index 72d30471c..000000000 --- a/components/chat/customization/overview.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Customisation Overview -page_title: Chat Customisation Overview -description: Learn how to customize the Telerik UI for Blazor Chat component using templates for messages, timestamps, suggestions, and more. -slug: chat-customisation-overview -tags: telerik,blazor,chat,customisation,templates -published: True -position: 11 ---- - -# Customisation Overview - -Learn how to customize the Chat component's templates and UI elements. This section covers message, timestamp, suggestion, status, message box, header, and attachment templates. diff --git a/components/chat/customization/status-template.md b/components/chat/customization/status-template.md deleted file mode 100644 index b1365a972..000000000 --- a/components/chat/customization/status-template.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Status Template -page_title: Chat Status Template -description: Learn how to display custom status indicators for messages using the StatusTemplate parameter in the Telerik UI for Blazor Chat component. -slug: chat-customisation-status-template -tags: telerik,blazor,chat,customisation,status-template -published: True -position: 15 ---- - -# Status Template - -Display custom status indicators for messages. diff --git a/components/chat/customization/suggestion-template.md b/components/chat/customization/suggestion-template.md deleted file mode 100644 index 4025d08d1..000000000 --- a/components/chat/customization/suggestion-template.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Suggestion Template -page_title: Chat Suggestion Template -description: Learn how to customize the appearance of suggested actions using the SuggestionTemplate parameter in the Telerik UI for Blazor Chat component. -slug: chat-customisation-suggestion-template -tags: telerik,blazor,chat,customisation,suggestion-template -published: True -position: 14 ---- - -# Suggestion Template - -Modify the appearance of suggested actions in the Chat component. diff --git a/components/chat/customization/timestamp-template.md b/components/chat/customization/timestamp-template.md deleted file mode 100644 index 448bb11a6..000000000 --- a/components/chat/customization/timestamp-template.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Timestamp Template -page_title: Chat Timestamp Template -description: Learn how to customize the display of message timestamps using the TimestampTemplate parameter in the Telerik UI for Blazor Chat component. -slug: chat-customisation-timestamp-template -tags: telerik,blazor,chat,customisation,timestamp-template -published: True -position: 13 ---- - -# Timestamp Template - -Change how timestamps are displayed for messages. diff --git a/components/chat/data-binding.md b/components/chat/data-binding.md index a916a3dd8..d4a538db0 100644 --- a/components/chat/data-binding.md +++ b/components/chat/data-binding.md @@ -18,7 +18,7 @@ To bind the Chat to data, set its `Data` parameter to an `IEnumerable` where >caption Basic data binding -````razor +````Razor @@ -31,9 +31,9 @@ To bind the Chat to data, set its `Data` parameter to an `IEnumerable` where new ChatMessage { Id = "2", Text = "Hi there!", AuthorId = "user2", Timestamp = DateTime.Now.AddMinutes(-3) } }; - private string CurrentUserId = "user1"; + private string CurrentUserId { get; set; } = "user1"; - private async Task HandleSendMessage(ChatSendMessageEventArgs args) + private void HandleSendMessage(ChatSendMessageEventArgs args) { var newMessage = new ChatMessage { @@ -49,13 +49,28 @@ To bind the Chat to data, set its `Data` parameter to an `IEnumerable` where public class ChatMessage { public string Id { get; set; } - public string Text { get; set; } + public string AuthorId { get; set; } - public DateTime Timestamp { get; set; } - public List Files { get; set; } = new List(); - public string Status { get; set; } = "Sent"; + + 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(); } } ```` @@ -78,56 +93,12 @@ The Chat component provides field mapping parameters to work with different data | `ReplyТоIdField` | Field containing the ID of replied message | `"ReplyТоId"` | | `SuggestedActionsField` | Field containing suggested actions | `"SuggestedActions"` | ->caption Custom field mapping - -````razor - - - -@code { - private List Messages { get; set; } = new List(); - private string CurrentUserId = "user1"; - - private async Task HandleSendMessage(ChatSendMessageEventArgs args) - { - var newMessage = new CustomMessage - { - Id = Guid.NewGuid().ToString(), - Content = args.Message, - UserId = CurrentUserId, - UserName = "Current User", - CreatedAt = DateTime.Now, - Attachments = args.Files?.ToList() ?? new List() - }; - - Messages.Add(newMessage); - } - - public class CustomMessage - { - public string Id { get; set; } - public string Content { get; set; } - public string UserId { get; set; } - public string UserName { get; set; } - public DateTime CreatedAt { get; set; } - public List Attachments { get; set; } - } -} -```` - ## Dynamic Updates The Chat component automatically reflects changes to the bound data collection. You can add, modify, or remove messages programmatically: ````razor - @@ -139,22 +110,23 @@ The Chat component automatically reflects changes to the bound data collection. @code { - private TelerikChat ChatRef { get; set; } + private TelerikChat Chat1 { get; set; } private List Messages { get; set; } = new List(); private string CurrentUserId = "user1"; - private async Task HandleSendMessage(ChatSendMessageEventArgs args) + private void HandleSendMessage(ChatSendMessageEventArgs args) { var newMessage = new ChatMessage { Id = Guid.NewGuid().ToString(), - Text = args.Message, + Content = args.Message, AuthorId = CurrentUserId, Timestamp = DateTime.Now }; - + Messages.Add(newMessage); - ChatRef?.Refresh(); + + Chat1?.Refresh(); } private void AddSystemMessage() @@ -162,11 +134,11 @@ The Chat component automatically reflects changes to the bound data collection. Messages.Add(new ChatMessage { Id = Guid.NewGuid().ToString(), - Text = "System notification: New user joined the chat", + Content = "System notification: New user joined the chat", AuthorId = "system", Timestamp = DateTime.Now }); - + ChatRef?.Refresh(); } @@ -175,25 +147,24 @@ The Chat component automatically reflects changes to the bound data collection. Messages.Clear(); ChatRef?.Refresh(); } -} -```` -## Performance Considerations + public class ChatMessage + { + public string Id { get; set; } -For optimal performance with large datasets: + public string AuthorId { get; set; } -* Use observable collections like `ObservableCollection` for automatic UI updates -* Consider implementing virtual scrolling for very large message histories -* Use efficient data structures for message lookup operations -* Implement paging or lazy loading for historical messages + public string AuthorName { get; set; } -## Next Steps + public string Content { get; set; } -* [Learn about Chat events](slug:chat-events) -* [Configure message templates](slug:chat-customisation-overview) -* [Set up AI integrations](slug:chat-integrations-overview) + public DateTime Timestamp { get; set; } + } +} + +```` ## See Also * [Chat Overview](slug:chat-overview) -* [Live Demo: Chat Data Binding](https://demos.telerik.com/blazor-ui/chat/overview) +* [Chat Integrations](slug:chat-integrations) diff --git a/components/chat/events.md b/components/chat/events.md index 299f6722f..3e701b07a 100644 --- a/components/chat/events.md +++ b/components/chat/events.md @@ -18,33 +18,54 @@ The `OnSendMessage` event fires when a user sends a new message. Use this event >caption Handle the OnSendMessage event -````razor +````Razor @code { - private async Task HandleSendMessage(ChatSendMessageEventArgs args) - { - // Validate message - if (string.IsNullOrWhiteSpace(args.Message)) - return; + private List Messages { get; set; } = new List(); + + private string CurrentUserId { get; set; } = "user1"; + private void HandleSendMessage(ChatSendMessageEventArgs args) + { var newMessage = new ChatMessage { Id = Guid.NewGuid().ToString(), - Text = args.Message, + Content = args.Message, AuthorId = CurrentUserId, - Timestamp = DateTime.Now, - Files = args.Files?.ToList() ?? new List() + Timestamp = DateTime.Now }; - // Add to collection Messages.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; } - // Optionally save to database - await SaveMessageAsync(newMessage); + 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(); } } ```` @@ -55,26 +76,41 @@ The `OnSuggestionClick` event fires when a user clicks on a quick reply suggesti >caption Handle suggestion clicks -````razor +````Razor @code { - private List QuickReplies = new List { "Hello", "How are you?", "Thank you" }; + private TelerikChat Chat1; - private async Task HandleSuggestionClick(ChatSuggestionClickEventArgs args) + private List QuickReplies = new List { - // You can modify the suggestion before it's used - args.IsCancelled = false; // Allow the suggestion to be used - - // Or handle it completely custom - if (args.Suggestion == "Thank you") + "Request project status update" + }; + + private void HandleSuggestionClick(ChatSuggestionClickEventArgs args) + { + string responseMessage = string.Empty; + + if (args.Suggestion == "Request project status update") { - args.IsCancelled = true; // Prevent default behavior - await HandleCustomThankYouAction(); + responseMessage = "Could you please provide the current status of all ongoing projects?"; } + + Messages.Add(new ChatMessage + { + Id = Guid.NewGuid().ToString(), + AuthorId = "user2", + AuthorName = "Jane Doe", + Content = responseMessage, + Status = "Sent", + Timestamp = DateTime.Now + }); + + Chat1?.Refresh(); } } ```` @@ -85,7 +121,7 @@ The `OnDownload` event fires when a user downloads files from a message. Use thi >caption Handle file downloads -````razor +````RAZOR.skip-repl @@ -111,19 +147,18 @@ The `OnMessageUnpin` event fires when a user unpins a message. Handle this event >caption Handle message unpinning -````razor +````RAZOR.skip-repl @code { - private async Task HandleMessageUnpin(ChatMessageUnpinEventArgs args) + private void HandleMessageUnpin(ChatMessageUnpinEventArgs args) { var message = Messages.FirstOrDefault(m => m.Id == args.MessageId); if (message != null) { message.IsPinned = false; - await UpdateMessageInDatabase(message); } } } @@ -135,7 +170,7 @@ The `OnInputValueChanged` event fires when the input value changes. Use this for >caption Handle input value changes -````razor +````RAZOR.skip-repl @@ -144,22 +179,9 @@ The `OnInputValueChanged` event fires when the input value changes. Use this for @code { private string InputValue { get; set; } = string.Empty; - private async Task HandleInputChange(string newValue) + private void HandleInputChange(string value) { - InputValue = newValue; - - // Show typing indicator - if (!string.IsNullOrEmpty(newValue)) - { - await ShowTypingIndicator(); - } - else - { - await HideTypingIndicator(); - } - - // Auto-save draft - await SaveDraft(newValue); + InputValue = value; } } ```` @@ -176,73 +198,7 @@ The Chat events provide specific argument types with relevant data: | `OnMessageUnpin` | `ChatMessageUnpinEventArgs` | `MessageId` | | `OnInputValueChanged` | `string` | The current input value | -## Common Event Patterns - -### AI Integration - -Use `OnSendMessage` to send user messages to AI services: - -````razor -private async Task HandleSendMessage(ChatSendMessageEventArgs args) -{ - // Add user message - Messages.Add(new ChatMessage - { - Text = args.Message, - AuthorId = CurrentUserId, - Timestamp = DateTime.Now - }); - - // Get AI response - var aiResponse = await GetAIResponse(args.Message); - - // Add AI message - Messages.Add(new ChatMessage - { - Text = aiResponse, - AuthorId = "ai", - Timestamp = DateTime.Now - }); -} -```` - -### File Upload Processing - -Handle file uploads with validation and processing: - -````razor -private async Task HandleSendMessage(ChatSendMessageEventArgs args) -{ - if (args.Files?.Any() == true) - { - // Process uploaded files - foreach (var file in args.Files) - { - if (await ValidateFile(file)) - { - await ProcessUploadedFile(file); - } - } - } - - // Handle the message as usual - Messages.Add(new ChatMessage - { - Text = args.Message, - Files = args.Files?.ToList(), - AuthorId = CurrentUserId, - Timestamp = DateTime.Now - }); -} -```` - -## Next Steps - -* [Configure Chat messages and tools](slug:chat-messages-overview) -* [Set up AI integrations](slug:chat-integrations-overview) -* [Handle file uploads](slug:chat-file-uploads-and-media) - ## See Also * [Chat Overview](slug:chat-overview) -* [Chat API Reference](slug:Telerik.Blazor.Components.TelerikChat-1) +* [Chat File Uploads and Media](slug:chat-file-uploads-and-media) diff --git a/components/chat/file-uploads-and-media.md b/components/chat/file-uploads-and-media.md index b6fa265c7..a31caf746 100644 --- a/components/chat/file-uploads-and-media.md +++ b/components/chat/file-uploads-and-media.md @@ -16,34 +16,9 @@ The Telerik UI for Blazor Chat component supports file uploads, media sharing, a Enable file uploads by setting the `EnableFileUpload` parameter to `true`: -````razor - - - - +````RAZOR.skip-repl + - -@code { - private List allowedExtensions = new List { ".jpg", ".jpeg", ".png", ".pdf", ".docx" }; - - private async Task HandleSendMessage(ChatSendMessageEventArgs args) - { - var newMessage = new ChatMessage - { - Id = Guid.NewGuid().ToString(), - Text = args.Message, - AuthorId = CurrentUserId, - Timestamp = DateTime.Now, - Files = args.Files?.ToList() ?? new List() - }; - - Messages.Add(newMessage); - } -} ```` ## File Upload Settings @@ -57,216 +32,311 @@ Configure file upload behavior using the `ChatFileSelectSettings` component: | `Multiple` | `bool` | `true` | Allow multiple file selection | | `OnSelect` | `EventCallback` | - | Event fired when files are selected | ->caption Advanced file upload configuration +>caption An exemplary Chat file upload configuration is shown below ````razor - - + + + + + @code { - private List allowedExtensions = new List { ".jpg", ".png", ".pdf", ".docx", ".txt" }; + private TelerikChat Chat1; + private List AllowedExtensions = new List { ".jpg", ".jpeg", ".png", ".pdf", ".docx", ".txt" }; - private async Task OnFileSelect(FileSelectEventArgs args) + private List ChatConversation = new List() { - // Validate files before upload - foreach (var file in args.Files) + new ChatMessage() { - if (file.Size > 5242880) // 5MB limit + Id = "1", + AuthorId = "support", + AuthorName = "File Support", + Content = "Welcome! You can upload files by clicking the attachment button or dragging files into the input area.", + Timestamp = DateTime.Now.AddMinutes(-5) + }, + new ChatMessage() + { + Id = "2", + AuthorId = "support", + AuthorName = "File Support", + Content = "Here's an example message with an attachment:", + Timestamp = DateTime.Now.AddMinutes(-3), + Attachments = new List { - args.IsCancelled = true; - await ShowError($"File {file.Name} exceeds size limit"); - return; + new FileSelectFileInfo + { + Id = "sample-doc", + Name = "sample-document.pdf", + Size = 245760, + Extension = ".pdf" + } } } + }; + + private void HandleSendMessage(ChatSendMessageEventArgs args) + { + var newMessage = new ChatMessage + { + Id = Guid.NewGuid().ToString(), + Content = args.Message, + AuthorId = "user", + AuthorName = "You", + Timestamp = DateTime.Now, + Attachments = args.Files?.ToList() ?? new List() + }; + + ChatConversation.Add(newMessage); + + if (args.Files?.Any() == true) + { + var fileNames = string.Join(", ", args.Files.Select(f => f.Name)); + var responseMessage = new ChatMessage + { + Id = Guid.NewGuid().ToString(), + Content = $"Thank you! I received {args.Files.Count()} file(s): {fileNames}", + AuthorId = "support", + AuthorName = "File Support", + Timestamp = DateTime.Now.AddSeconds(1) + }; + + ChatConversation.Add(responseMessage); + } + + Chat1?.Refresh(); + } + + 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 IEnumerable Attachments { get; set; } = new List(); } } ```` -## Speech-to-Text Configuration +## Attachments -Enable speech-to-text functionality by setting `EnableSpeechToText` to `true`: +Configure how file attachments are displayed and handled in chat messages using the `FilesField` parameter. This parameter specifies which property of your message model contains the file attachment information. -````razor - - - - +The `FilesField` parameter binds to a collection of `FileSelectFileInfo` objects that represent the uploaded files. Each attachment includes metadata such as file name, size, extension, and unique identifier. + +````RAZOR.skip-repl + @code { - private async Task OnSpeechResult(SpeechToTextButtonResultEventArgs args) + public class ChatMessage { - if (args.IsFinal && args.Alternatives?.Any() == true) - { - var transcript = args.Alternatives.First().Transcript; - // Handle the speech recognition result - await ProcessSpeechInput(transcript); - } + 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; } + + // This property is bound to FilesField="Attachments" + public IEnumerable Attachments { get; set; } = new List(); } } ```` -## Speech-to-Text Settings +When messages contain attachments, they are automatically displayed with file icons, names, and sizes. Users can interact with attachments through the configured file actions. -Configure speech recognition behavior using `ChatSpeechToTextButtonSettings`: +## File Actions and Downloads -| Parameter | Type | Default | Description | -|-----------|------|---------|-------------| -| `Language` | `string` | `"en-US"` | Recognition language code | -| `MaxAlternatives` | `int` | `1` | Maximum number of recognition alternatives | -| `InterimResults` | `bool` | `false` | Return interim recognition results | -| `OnResult` | `EventCallback` | - | Event fired when speech is recognized | +Configure file actions and handle downloads using JavaScript interop and custom event handlers. + +1. Add JavaScript Interop + + Add this JavaScript function to enable file downloads: + + ````html + @inject IJSRuntime JS + + + ```` + +2. Configure File Actions + + Configure the `Download` file action: + + ````RAZOR.skip-repl + + + + + + + + ```` + +3. Implement a click handler for the `Download` file action. + + The click handler calls the js `downloadFileFromBytes` function. + + ````csharp + private async Task OnDirectFileDownload(ChatFileActionClickEventArgs args) + { + try + { + var filePath = Path.Combine(Environment.WebRootPath, "chat-files", args.File.Name); + + if (System.IO.File.Exists(filePath)) + { + var fileBytes = await System.IO.File.ReadAllBytesAsync(filePath); + + var base64String = Convert.ToBase64String(fileBytes); + + var mimeType = GetMimeType(args.File.Extension); + + await JS.InvokeVoidAsync("downloadFileFromBytes", base64String, args.File.Name, mimeType); + } + else + { + Console.WriteLine($"File not found: {filePath}"); + } + } + catch (Exception ex) + { + Console.WriteLine($"Error downloading file {args.File.Name}: {ex.Message}"); + } + } + ```` -## File Actions and Downloads -Configure file actions and handle downloads: +## File Validation -````razor - - - - - - - +The Chat component provides built-in file validation through the `ChatFileSelectSettings` configuration. You can control which files users can upload and set size restrictions to ensure appropriate content and prevent system overload. -@code { - private async Task HandleDownload(ChatDownloadEventArgs args) - { - foreach (var file in args.Files) - { - await DownloadFile(file); - } - } +### AllowedExtensions - private async Task HandleShareFile(ChatFileActionClickEventArgs args) - { - await ShareFile(args.File); - } +Use the `AllowedExtensions` parameter to restrict file uploads to specific file types. This helps ensure users only upload supported formats and prevents potential security issues. - private async Task HandlePreviewFile(ChatFileActionClickEventArgs args) - { - await PreviewFile(args.File); - } +````RAZOR.skip-repl + + + + +@code { + private List AllowedExtensions = new List + { + ".jpg", ".jpeg", ".png", ".gif", // Images + ".pdf", ".doc", ".docx", // Documents + ".txt", ".csv", // Text files + ".zip", ".rar" // Archives + }; } ```` -## Media Display in Messages +When a user attempts to upload a file with an extension not in the allowed list, the Chat component will automatically prevent the upload. -Display uploaded files and media within messages using templates: +### MaxFileSize -````razor - - -
- @if (!string.IsNullOrEmpty(context.Message.Text)) - { -
@context.Message.Text
- } - - @if (context.Message.Files?.Any() == true) - { -
- @foreach (var file in context.Message.Files) - { -
- @if (IsImageFile(file.Extension)) - { - @file.Name - } - else - { -
- - @file.Name -
- } -
- } -
- } -
- - +Set the `MaxFileSize` parameter to limit the size of uploaded files in bytes. This prevents users from uploading files that are too large for your system to handle efficiently. + +````RAZOR.skip-repl + + + ```` -## File Validation +Files exceeding the specified size limit will be rejected. -Implement client-side file validation: +## Speech-to-Text + +The Chat component includes built-in speech-to-text functionality that allows users to input messages using voice commands. This feature leverages the browser's Web Speech API to convert spoken words into text, providing an accessible and convenient way to interact with the chat interface. + +Speech-to-text is particularly useful for mobile users, accessibility scenarios, or when typing is inconvenient. The component provides customizable settings to control language recognition, result accuracy, and interim feedback. + +### Configuration + +Enable speech-to-text functionality by setting `EnableSpeechToText` to `true`: + +````RAZOR.skip-repl + + + + + -````razor @code { - private async Task OnFileSelect(FileSelectEventArgs args) + private async Task OnSpeechResult(SpeechToTextButtonResultEventArgs args) { - var validFiles = new List(); - - foreach (var file in args.Files) - { - // Size validation - if (file.Size > MaxFileSize) - { - await ShowValidationError($"File '{file.Name}' exceeds maximum size of {MaxFileSize / (1024 * 1024)}MB"); - continue; - } - - // Extension validation - if (!allowedExtensions.Contains(file.Extension.ToLowerInvariant())) - { - await ShowValidationError($"File type '{file.Extension}' is not allowed"); - continue; - } - - // Content validation (optional) - if (!await ValidateFileContent(file)) - { - await ShowValidationError($"File '{file.Name}' contains invalid content"); - continue; - } - - validFiles.Add(file); - } - - // Update the file selection with only valid files - args.Files = validFiles; - - if (!validFiles.Any()) + if (args.IsFinal && args.Alternatives?.Any() == true) { - args.IsCancelled = true; + var transcript = args.Alternatives.First().Transcript; + // Handle the speech recognition result + await ProcessSpeechInput(transcript); } } } ```` -## Security Considerations +### Settings -When implementing file uploads: - -1. **Validate file types** on both client and server -2. **Scan files** for malware before processing -3. **Limit file sizes** to prevent abuse -4. **Store files** in secure locations -5. **Implement access controls** for file downloads -6. **Use virus scanning** services for uploaded content - -## Next Steps +Configure speech recognition behavior using `ChatSpeechToTextButtonSettings`: -* [Handle Chat events](slug:chat-events) -* [Configure message templates](slug:chat-customisation-overview) -* [Set up file actions](slug:chat-messages-tools) +| Parameter | Type | Default | Description | +|-----------|------|---------|-------------| +| `Lang` | `string` | `"en-US"` | Recognition language code | +| `MaxAlternatives` | `int` | `1` | Maximum number of recognition alternatives | +| `InterimResults` | `bool` | `false` | Return interim recognition results | +| `OnResult` | `EventCallback` | - | Event fired when speech is recognized | ## See Also diff --git a/components/chat/integrations.md b/components/chat/integrations.md new file mode 100644 index 000000000..805a6542b --- /dev/null +++ b/components/chat/integrations.md @@ -0,0 +1,141 @@ +--- +title: Integrations +page_title: Chat Integrations +description: Learn how to integrate the Telerik UI for Blazor Chat component with AI services, LLMs, and chatbot frameworks. +slug: chat-integrations +tags: telerik,blazor,chat,integrations,ai,llm,chatbot +published: True +position: 20 +--- + +# Chat Integrations + +The Chat component can be integrated with various AI services, Large Language Models (LLMs), and chatbot frameworks, and other messaging platforms to create intelligent conversational experiences. + +This article explains: + +* [AI and LLM Integration](#ai-and-llm-integration) - Connect to AI services and language models +* [Chatbot Integration](#chatbot-integration) - Integrate with chatbot frameworks +* [Message Processing](#message-processing) - Handle AI responses and user interactions + +## AI and LLM Integration + +The Chat component works seamlessly with AI services and Large Language Models. You can integrate with various providers like OpenAI, Azure OpenAI, or custom AI services. + +### Microsoft.Extensions.AI Integration Example + +The following example demonstrates using the `OnSendMessage` event to communicate with an AI service. The event handler passes user messages to the AI service, retrieves the response, and displays it in the Chat: + +````RAZOR.skip-repl +@using Microsoft.Extensions.AI +@using System.Threading +@using Microsoft.AspNetCore.Hosting +@inject AIPromptService AIPromptService +@inject IWebHostEnvironment Environment + + + +@code { + private TelerikChat AIChat; + private List AIChatConversation { get; set; } = new List(); + private CancellationTokenSource cancellationTokenSource = new CancellationTokenSource(); + + private async Task AskAI(ChatSendMessageEventArgs args) + { + cancellationTokenSource = new CancellationTokenSource(); + + var prompt = new ChatMessage() + { + Id = Guid.NewGuid().ToString(), + AuthorId = "user", + AuthorName = "John Doe", + Content = args.Message, + Timestamp = DateTime.Now, + Status = "Sent" + }; + + var response = new ChatMessage() + { + Id = Guid.NewGuid().ToString(), + AuthorId = "ai", + AuthorName = "AI Assistant", + AuthorImageUrl = "https://demos.telerik.com/blazor-ui/images/devcraft-ninja-small.svg", + Timestamp = DateTime.Now, + Status = "Sent" + }; + + AIChatConversation.Add(prompt); + AIChatConversation.Add(response); + AIChat?.Refresh(); + + var chatMessage = new Microsoft.Extensions.AI.ChatMessage(ChatRole.User, args.Message); + var fullResponse = string.Empty; + await foreach (var answer in AIPromptService.GetStreamingResponseAsync(chatMessage, cancellationToken: cancellationTokenSource.Token)) + { + fullResponse += answer.Text; + response.Content = fullResponse; + AIChat?.Refresh(); + } + } + + 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(); + } +} +```` + +## Chatbot Integration + +Chatbots are intelligent software solutions that replicate human-like conversations and can manage various tasks autonomously without requiring manual intervention. + +You can connect the Chat component to various chatbot platforms including Microsoft Bot Framework, custom REST APIs, or third-party chatbot services. The component handles the user interface while your bot service processes messages and generates appropriate responses. + +>tip The [Person to Bot demo](https://demos.telerik.com/blazor-ui/chat/person-to-bot) showcases chatbot functionality. This demo utilizes a Telerik-hosted AI service solely for illustration purposes. In production environments, you should develop your own AI service tailored to your specific business domain, requirements, and organizational needs. + +### Suggested Actions + +The Chat component supports suggested actions through the `SuggestedActions` parameter. This feature allows chatbots to provide quick reply options that users can click instead of typing responses manually. You can bind the `SuggestedActions` parameter to a field in your chatbot service response to display these interactive buttons. + +````RAZOR.skip-repl + + +```` + +## Next Steps + +* [Data Binding]({%slug chat-data-binding%}) - Learn about binding the Chat to data +* [Events]({%slug chat-events%}) - Handle Chat component events +* [Templates]({%slug chat-templates%}) - Customize the Chat appearance + +## See Also + +* [Live Demo: Chat AI Integration](https://demos.telerik.com/blazor-ui/chat/ai-integration) +* [Microsoft.Extensions.AI Documentation](https://learn.microsoft.com/en-us/dotnet/ai/) diff --git a/components/chat/integrations/ai.md b/components/chat/integrations/ai.md deleted file mode 100644 index 054e703f0..000000000 --- a/components/chat/integrations/ai.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: AI / LLM Integration -page_title: Chat AI / LLM Integration -description: Learn how to integrate the Telerik UI for Blazor Chat component with popular AI services and large language models. -slug: chat-integrations-ai -tags: telerik,blazor,chat,integrations,ai,llm -published: True -position: 20 ---- - -# AI / LLM Integration - -Integrate the Chat component with popular AI services (OpenAI, Azure AI, etc.) to provide intelligent responses. - -## Example Guidance -- Set up an API endpoint for your AI service. -- Use Chat events to send user input and display AI responses. -- Handle errors and security for service calls. - -Example: -```csharp -private async Task HandleSendMessage(ChatSendMessageEventArgs args) -{ - var aiResponse = await MyAIService.GetResponseAsync(args.Message); - Messages.Add(new ChatMessage { Text = aiResponse, AuthorId = "AI" }); -} -``` diff --git a/components/chat/integrations/chatbot.md b/components/chat/integrations/chatbot.md deleted file mode 100644 index 7a0ecdbab..000000000 --- a/components/chat/integrations/chatbot.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Chatbot Integration -page_title: Chat Chatbot Integration -description: Learn how to connect the Telerik UI for Blazor Chat component to chatbot frameworks and custom bots. -slug: chat-integrations-chatbot -tags: telerik,blazor,chat,integrations,chatbot -published: True -position: 21 ---- - -# Chatbot Integration - -Connect the Chat component to chatbot frameworks or custom bots. - -- Handle message events to communicate with bot APIs. -- Display bot responses, suggestions, and actions. -- Customize bot behavior and UI as needed. diff --git a/components/chat/integrations/overview.md b/components/chat/integrations/overview.md deleted file mode 100644 index ab5c7c9a2..000000000 --- a/components/chat/integrations/overview.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Integrations Overview -page_title: Chat Integrations Overview -description: Learn how to integrate the Telerik UI for Blazor Chat component with AI services and chatbots. -slug: chat-integrations-overview -tags: telerik,blazor,chat,integrations,ai,chatbot -published: True -position: 19 ---- - -# Integrations Overview - -Learn how to connect the Chat component with external services and frameworks, including AI/LLM and chatbots. This section provides guidance and examples for extending the Chat experience. diff --git a/components/chat/messages.md b/components/chat/messages.md index 4ee0d6844..fd5c1dbbe 100644 --- a/components/chat/messages.md +++ b/components/chat/messages.md @@ -1,20 +1,227 @@ -# Messages +--- +title: Messages +page_title: Chat Messages +description: Learn how to configure message actions, styling, and behavior in the Telerik UI for Blazor Chat component. +slug: chat-messages +tags: telerik,blazor,chat,messages,actions,styling +published: True +position: 5 +--- -The Chat component supports rich messaging features and tools. +# Chat Messages -## Tools -### Message ContextMenu -Demonstrates built-in features (copy, delete, reply) and how to add custom options. +The Telerik UI for Blazor Chat component provides comprehensive control over message display, interactions, and styling to create rich conversational experiences. -### Message Toolbar -Show actions like edit, delete, or custom tools above/below messages. +## Context Menu Message Actions -## Appearance -### Styling -Customize message appearance using CSS or component parameters. +Configure context menu actions that appear when users right-click on messages. These actions provide quick access to common message operations. -#### Message Width -Control the width of messages for different layouts. +````Razor + + + + + + + + -## Persistence -Persist messages to local storage, a database, or cloud service for continuity. +@code { + private TelerikChat Chat1; + + private List ChatConversation = new List() + { + 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) + } + }; + + private void OnReplyClick(ChatMessageActionClickEventArgs args) + { + var message = ChatConversation.FirstOrDefault(m => m.Id == args.MessageId); + if (message != null) + { + // Set up reply context + Console.WriteLine($"Replying to message: {message.Content}"); + } + } + + private void OnCopyClick(ChatMessageActionClickEventArgs args) + { + var message = ChatConversation.FirstOrDefault(m => m.Id == args.MessageId); + if (message != null) + { + // Copy message content to clipboard + Console.WriteLine($"Copying message: {message.Content}"); + } + } + + private void OnPinClick(ChatMessageActionClickEventArgs args) + { + var message = ChatConversation.FirstOrDefault(m => m.Id == args.MessageId); + if (message != null) + { + message.IsPinned = !message.IsPinned; + Chat1?.Refresh(); + } + } + + private void OnDeleteClick(ChatMessageActionClickEventArgs args) + { + var message = ChatConversation.FirstOrDefault(m => m.Id == args.MessageId); + if (message != null) + { + message.IsDeleted = true; + Chat1?.Refresh(); + } + } + + 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 IEnumerable Attachments { get; set; } = new List(); + } +} +```` + +## Toolbar Message Actions + +Configure toolbar actions that appear when messages are selected or hovered. These provide quick access to frequently used operations. + +````RAZOR.skip-repl + + + + + + + +```` + +## Messages Styling + +The Chat component provides several styling options for messages, allowing you to customize their appearance, behavior, and layout to match your application's design. + +### Expanding and Collapsing Messages + +Control message collapsing behavior using the `EnableMessageCollapse` parameter. When enabled, long messages can be collapsed to save space and expanded when needed for better readability. + +Set `EnableMessageCollapse="true"` to allow users to collapse and expand messages in the chat interface. + +### Messages Width + +Control the width behavior of chat messages using the `MessageWidthMode` parameter: + +* `MessageWidthMode.Standard` - Messages take up a portion of the available space for better readability (default behavior) +* `MessageWidthMode.Full` - Messages span the full width of the chat container + +## Message Box Value Persistence + +The message box value represents the text that users have typed but haven't sent yet. + +The Chat component offers complete control over the message input using the `InputValue` property and `OnInputValueChange` event. + +Set the `InputValue` property to define the message box content and handle the `OnInputValueChange` event to track user typing in real-time. This enables implementing features such as draft auto-saving, input validation, or contextually pre-populating the message box. + +````Razor + + + +@code { + private List ChatConversation = new List() + { + new ChatMessage() + { + Id = "1", + AuthorId = "1", + AuthorName = "John Smith", + Content = "Hi there!", + Status = "Seen", + Timestamp = new System.DateTime(2025, 10, 1, 12, 0, 0) + } + }; + + private TelerikChat Chat1; + + private string CurrentInputValue { get; set; } = ""; + + private void OnInputValueChanged(string newValue) + { + CurrentInputValue = newValue; + // Implement real-time tracking, validation, or draft saving here + Console.WriteLine($"Input changed to: {newValue}"); + } + + private void HandleSendMessage(ChatSendMessageEventArgs args) + { + var newMessage = new ChatMessage + { + Id = Guid.NewGuid().ToString(), + Content = args.Message, + AuthorId = "1", + AuthorName = "John Smith", + Status = "Sent", + Timestamp = DateTime.Now + }; + + ChatConversation.Add(newMessage); + + CurrentInputValue = ""; + + Chat1?.Refresh(); + } + + public class ChatMessage + { + public string Id { get; set; } + public string AuthorId { get; set; } + public string AuthorName { get; set; } + public string Content { get; set; } + public string Status { get; set; } + public DateTime Timestamp { get; set; } + } +} +```` + +## See Also + +* [Live Demo: Chat Overview](https://demos.telerik.com/blazor-ui/chat/overview) +* [Chat Overview]({%slug chat-overview%}) diff --git a/components/chat/messages/appearance.md b/components/chat/messages/appearance.md deleted file mode 100644 index 276c79ad4..000000000 --- a/components/chat/messages/appearance.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Appearance -page_title: Chat Message Appearance -description: Learn how to customize the appearance and width of messages in the Telerik UI for Blazor Chat component. -slug: chat-messages-appearance -tags: telerik,blazor,chat,messages,appearance,styling -published: True -position: 8 ---- - -# Appearance - -Customize message appearance using CSS or component parameters. - -## Message Width -Control the width of messages for different layouts. diff --git a/components/chat/messages/overview.md b/components/chat/messages/overview.md deleted file mode 100644 index 66c70090e..000000000 --- a/components/chat/messages/overview.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Messages Overview -page_title: Chat Messages Overview -description: Explore the messaging features of the Telerik UI for Blazor Chat component, including tools, appearance, and persistence. -slug: chat-messages-overview -tags: telerik,blazor,chat,messages,tools,appearance,persistence -published: True -position: 6 ---- - -# Messages Overview - -Explore the messaging features of the Chat component, including tools, appearance, and persistence. This section covers context menus, toolbars, styling, and message storage. diff --git a/components/chat/messages/persistence.md b/components/chat/messages/persistence.md deleted file mode 100644 index 15013ecde..000000000 --- a/components/chat/messages/persistence.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Message Persistence -page_title: Chat Message Persistence -description: Learn how to persist messages in the Telerik UI for Blazor Chat component using local storage, databases, or cloud services. -slug: chat-messages-persistence -tags: telerik,blazor,chat,messages,persistence -published: True -position: 9 ---- - -# Message Persistence - -Persist messages to local storage, a database, or cloud service for continuity and history. diff --git a/components/chat/messages/tools.md b/components/chat/messages/tools.md deleted file mode 100644 index 7f816f28a..000000000 --- a/components/chat/messages/tools.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Message Tools -page_title: Chat Message Tools -description: Learn about message context menus and toolbars in the Telerik UI for Blazor Chat component. -slug: chat-messages-tools -tags: telerik,blazor,chat,messages,tools,context-menu,toolbar -published: True -position: 7 ---- - -# Message Tools - -## Message ContextMenu -Demonstrates built-in features (copy, delete, reply) and how to add custom options. - -## Message Toolbar -Show actions like edit, delete, or custom tools above/below messages. diff --git a/components/chat/quick-actions.md b/components/chat/quick-actions.md index bf2f3af0d..7a287e150 100644 --- a/components/chat/quick-actions.md +++ b/components/chat/quick-actions.md @@ -19,102 +19,112 @@ Message suggestions provide users with quick reply options that appear below the >caption Basic message suggestions ````razor - @code { - private List QuickReplies = new List - { - "Hello", - "How are you?", - "Thank you", - "Yes", - "No", - "Maybe later" - }; + private string ChatInputValue { get; set; } + private TelerikChat Chat1; - private async Task HandleSuggestionClick(ChatSuggestionClickEventArgs args) + private List QuickReplies = new List { - // The suggestion will be automatically placed in the input - // You can modify this behavior by setting args.IsCancelled = true - - if (args.Suggestion == "Thank you") - { - // Custom handling for specific suggestions - await HandleThankYouAction(); - } - } -} -```` + "Request project status update", + "Schedule a follow-up meeting" + }; -## Dynamic Suggestions + private List ChatConversation = new List() + { + new ChatMessage() + { + Id="first", + AuthorId="1", + AuthorName="John Smith", + 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", + 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) + } + }; -Update suggestions based on conversation context or user actions: + private void HandleSuggestionClick(ChatSuggestionClickEventArgs args) + { + string responseMessage = string.Empty; -````razor - - + if (args.Suggestion == "Request project status update") + { + responseMessage = "Could you please provide the current status of all ongoing projects?"; + } + else if (args.Suggestion == "Schedule a follow-up meeting") + { + responseMessage = "Let's schedule a follow-up meeting to discuss the next steps."; + } -@code { - private List CurrentSuggestions = new List { "Hi there!", "Good morning" }; - - private async Task HandleSendMessage(ChatSendMessageEventArgs args) - { - // Add the message - Messages.Add(new ChatMessage - { - Text = args.Message, - AuthorId = CurrentUserId, + ChatConversation.Add(new ChatMessage + { + Id = Guid.NewGuid().ToString(), + AuthorId = "2", + AuthorName = "Jane Doe", + Content = responseMessage, + Status = "Sent", Timestamp = DateTime.Now }); - - // Update suggestions based on message content - await UpdateSuggestionsForContext(args.Message); + + Chat1?.Refresh(); } - - private async Task UpdateSuggestionsForContext(string lastMessage) + + public class ChatMessage { - if (lastMessage.Contains("help")) - { - CurrentSuggestions = new List - { - "I need technical support", - "I have a billing question", - "I want to report a bug" - }; - } - else if (lastMessage.Contains("thank")) - { - CurrentSuggestions = new List - { - "You're welcome!", - "Happy to help", - "Anything else?" - }; - } - - StateHasChanged(); + 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(); } } ```` ## Custom Suggestion Templates -Customize the appearance of suggestions using the `SuggestionTemplate`: +Customize the appearance of suggestions using the Chat's `SuggestionTemplate`. ````razor - - -
- - @context.Suggestion + +
+ 💬 + @suggestionContext.Suggestion
@@ -123,208 +133,142 @@ Customize the appearance of suggestions using the `SuggestionTemplate`: .custom-suggestion { display: flex; align-items: center; - gap: 8px; padding: 8px 12px; - border: 1px solid #ddd; - border-radius: 16px; - background: linear-gradient(135deg, #f5f5f5, #ffffff); + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + border-radius: 20px; + margin: 2px; cursor: pointer; transition: all 0.2s ease; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); } - + .custom-suggestion:hover { - background: linear-gradient(135deg, #e8e8e8, #f5f5f5); transform: translateY(-1px); + box-shadow: 0 4px 8px rgba(0,0,0,0.15); + background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); } - -@code { - private List ActionSuggestions = new List - { - "Schedule Meeting", - "Send Document", - "Call Now", - "Set Reminder" - }; - - private SvgIcon GetSuggestionIcon(string suggestion) - { - return suggestion switch - { - "Schedule Meeting" => SvgIcon.Calendar, - "Send Document" => SvgIcon.FileAdd, - "Call Now" => SvgIcon.Phone, - "Set Reminder" => SvgIcon.Clock, - _ => SvgIcon.CommentPositive - }; + .suggestion-icon { + margin-right: 6px; + font-size: 14px; } -} -```` -## Contextual Suggestions - -Provide context-aware suggestions based on message content or user behavior: + .suggestion-text { + font-size: 13px; + font-weight: 500; + white-space: nowrap; + } + -````razor @code { - private async Task HandleSendMessage(ChatSendMessageEventArgs args) + 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() { - // Add user message - Messages.Add(new ChatMessage - { - Text = args.Message, - AuthorId = CurrentUserId, - Timestamp = DateTime.Now - }); - - // Generate AI or rule-based response - var response = await GenerateResponse(args.Message); - Messages.Add(new ChatMessage - { - Text = response.Text, - AuthorId = "bot", - Timestamp = DateTime.Now - }); - - // Update suggestions based on response - CurrentSuggestions = response.Suggestions; - StateHasChanged(); - } - - private async Task GenerateResponse(string userMessage) + new ChatMessage() + { + Id="first", + AuthorId="1", + AuthorName="Customer Support", + Content="Welcome to TelerikStore! I'm here to help you today.", + Status="Seen", + Timestamp=new System.DateTime(2023, 10, 1, 14, 30, 0) + }, + new ChatMessage() + { + Id="second", + AuthorId="1", + AuthorName="Customer Support", + Content="I see you've been browsing our UI components. Is there anything specific you need assistance with?", + Status="Seen", + Timestamp=new System.DateTime(2023, 10, 1, 14, 31, 0) + } + }; + + private void HandleSuggestionClick(ChatSuggestionClickEventArgs args) { - var response = new BotResponse(); - - if (userMessage.ToLower().Contains("appointment")) + string responseMessage = string.Empty; + + // Initial responses + if (args.Suggestion == "Yes, I need help with my order") { - response.Text = "I can help you schedule an appointment. What works best for you?"; - response.Suggestions = new List - { - "Tomorrow morning", - "This afternoon", - "Next week", - "Show available times" - }; + responseMessage = "I'd be happy to help you with your order! Can you please provide your order number or the email address you used for the purchase?"; } - else if (userMessage.ToLower().Contains("order")) + else if (args.Suggestion == "No, I was just checking in") { - response.Text = "Let me help you with your order. What would you like to do?"; - response.Suggestions = new List - { - "Track my order", - "Cancel order", - "Modify order", - "Return item" - }; + responseMessage = "That's great! Feel free to browse around. If you have any questions about our Blazor components or need a demo, just let me know!"; + } + // Handle order suggestions if needed + else + { + responseMessage = "Thank you for that information. How else can I assist you today?"; } - - return response; - } - - public class BotResponse - { - public string Text { get; set; } - public List Suggestions { get; set; } = new List(); - } -} -```` - -## Suggestion Categories - -Organize suggestions into categories for complex scenarios: -````razor - - + // Add the support agent's response + ChatConversation.Add(new ChatMessage + { + Id = Guid.NewGuid().ToString(), + AuthorId = "1", + AuthorName = "Customer Support", + Content = responseMessage, + Status = "Sent", + Timestamp = DateTime.Now + }); -
- @foreach (var category in SuggestionCategories.Keys) - { - - @category - + Chat1?.Refresh(); } -
-@code { - private string ActiveCategory = "General"; - - private Dictionary> SuggestionCategories = new Dictionary> - { - ["General"] = new List { "Hello", "Thank you", "Goodbye" }, - ["Support"] = new List { "I need help", "Technical issue", "Billing question" }, - ["Sales"] = new List { "Product info", "Get quote", "Schedule demo" }, - ["Account"] = new List { "Update profile", "Change password", "View history" } - }; - - private List GetCurrentCategorySuggestions() - { - return SuggestionCategories.ContainsKey(ActiveCategory) - ? SuggestionCategories[ActiveCategory] - : new List(); - } - - private void SetActiveCategory(string category) + public class ChatMessage { - ActiveCategory = category; - StateHasChanged(); + 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(); } } ```` ## Integration with AI Services -Use suggestions to guide AI conversations: +Use suggestions to guide AI conversations. With the help of the Chat's `OnSuggestionClick` event, you can access the clicked suggestion and you can pass it to the AI service for processing. -````razor -@code { - private async Task HandleSuggestionClick(ChatSuggestionClickEventArgs args) +````RAZOR.skip-repl +private async Task OnSuggestionClick(ChatSuggestionClickEventArgs args) +{ + var userMessage = new ChatMessage() { - // Send suggestion to AI service with context - var aiResponse = await GetAIResponse(args.Suggestion, GetConversationContext()); - - // Add AI response - Messages.Add(new ChatMessage - { - Text = aiResponse.Text, - AuthorId = "ai", - Timestamp = DateTime.Now - }); - - // Update suggestions based on AI response - CurrentSuggestions = aiResponse.SuggestedFollowUps; - StateHasChanged(); - } - - private string GetConversationContext() + Id = Guid.NewGuid().ToString(), + AuthorId = "user", + AuthorName = "John Doe", + Content = args.Suggestion, + Timestamp = DateTime.Now, + Status = "" + }; + + AIChatConversation.Add(userMessage); + + //pass the clicked suggestion to the AI service as a message + await AskAI(new ChatSendMessageEventArgs() { - return string.Join("\n", Messages.TakeLast(5).Select(m => $"{m.AuthorId}: {m.Text}")); - } + Message = args.Suggestion + }); + + return; } ```` -## Best Practices - -When implementing quick actions and suggestions: - -1. **Keep suggestions relevant** to the current conversation context -2. **Limit the number** of suggestions (3-6 is optimal) -3. **Update suggestions dynamically** based on user interactions -4. **Use clear, concise text** for suggestion labels -5. **Provide visual feedback** when suggestions are selected -6. **Test with real users** to ensure suggestions are helpful - -## Next Steps - -* [Handle Chat events](slug:chat-events) -* [Set up AI integrations](slug:chat-integrations-overview) -* [Customize suggestion templates](slug:chat-customisation-suggestion-template) - ## See Also -* [Chat Overview](slug:chat-overview) * [Chat Events](slug:chat-events) -* [Live Demo: Chat](https://demos.telerik.com/blazor-ui/chat/overview) +* [Chat Templates](slug:chat-templates) diff --git a/components/chat/templates.md b/components/chat/templates.md new file mode 100644 index 000000000..56cd8c631 --- /dev/null +++ b/components/chat/templates.md @@ -0,0 +1,288 @@ +--- +title: Templates +page_title: Chat Templates +description: A comprehensive guide to the customizable templates available in the Telerik Chat component for Blazor. +slug: chat-templates +keywords: blazor, telerik, chat, templates, customization +published: True +position: 7 +--- + +# Chat Templates + +The Telerik Chat component in Blazor allows for a high degree of customization through various templates. Each template provides a way to customize the UI rendering of the Chat interface, making it more suitable for your application’s needs. + +Below are the available templates along with examplary usage. + +## HeaderTemplate + +This template allows you to customize the Chat header, where you can display titles, logos, or buttons. + + +````RAZOR.skip-repl + + + Chat with John Smith + + +```` + +## MessageTemplate + +Customize how individual messages are rendered within the Chat. + +````RAZOR.skip-repl + +
+ @context.Message.Content +
+ +```` + +## MessageStatusTemplate + +You can use this template to display the status of a message (e.g., Sent, Seen). + +````RAZOR.skip-repl + +
+ @context.Message.Status +
+ +```` + +## SuggestionTemplate + +This template allows you to customize how suggestion buttons are displayed in the Chat interface. Suggestions provide quick reply options for users. + +````RAZOR.skip-repl + +
+ @context.Suggestion +
+ +```` + +## MessageBoxTemplate + +This template allows you to customize the input area where users type their messages. + +````RAZOR.skip-repl + + + + +```` + +## TimestampTemplate + +This template allows you to customize how timestamps are displayed for messages. + +````RAZOR.skip-repl + + + @context.Timestamp.ToString("dddd, MMMM d, yyyy") + + +```` + +## ChatMessageContextMenuActions + +This allows you to define context menu actions that can be performed on Chat messages. + +````RAZOR.skip-repl + + + + + +```` + +## Complete Example + +>caption A complete example that integrates all templates into a Chat component + +````RAZOR + + + + Chat with John Smith + + + +
+ @context.Message.Status +
+ + +
+ @context.Message.Content +
+ + +
+ @context.Suggestion +
+ + + + + + + + @context.Timestamp.ToString("dddd, MMMM d, yyyy") + + + + + + + + + +@code { + + private void OnUnpin(ChatMessageUnpinEventArgs args) + { + var message = ChatConversation.FirstOrDefault(x => x.Id == args.MessageId); + if (message != null) + { + message.IsPinned = false; + } + else + { + Console.WriteLine($"Message with ID {args.MessageId} not found."); + } + } + + private string FirstChatInputValue { get; set; } + + private void OnFirstInputValueChange(string value) + { + FirstChatInputValue = value; + } + + private void PinMessage(ChatMessageActionClickEventArgs args) + { + var message = ChatConversation.FirstOrDefault(m => m.Id == args.MessageId); + if (message != null) + { + ChatConversation.ForEach(m => m.IsPinned = false); + message.IsPinned = true; + } + } + + private void OnSendMessage(ChatSendMessageEventArgs args, string authorId) + { + var newMessage = new ChatMessage + { + Id = Guid.NewGuid().ToString(), + AuthorName = authorId == "1" ? "John Smith" : "Jane Doe", + AuthorId = authorId, + AuthorImageUrl = authorId == "1" ? FirstUserImage : SecondUserImage, + Content = args.Message, + MessageToReplyId = args.ReplyMessageId, + Status = "Sent", + Timestamp = DateTime.Now + }; + + ChatConversation.Add(newMessage); + RefreshChats(); + } + + private void RefreshChats() + { + Chat1?.Refresh(); + } + + private TelerikChat Chat1; + + private List ChatConversation = new List() + { + 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"; + + 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(); + } +} +```` + +## See Also + +* [Live Demo: Chat Overview](https://demos.telerik.com/blazor-ui/chat/overview) diff --git a/docs-builder.yml b/docs-builder.yml index 44fa640d2..0f6815516 100644 --- a/docs-builder.yml +++ b/docs-builder.yml @@ -322,15 +322,6 @@ meta: title: ColorGradient "*chat": title: Chat - "*components/chat/customization": - title: Customization - position: 3 - "*components/chat/integrations": - title: Integrations - position: 5 - "*components/chat/messages": - title: Integrations - position: 6 "*chunkprogressbar": title: ChunkProgressBar "*chiplist": From ee42d9fcb9ecfabb1f169187cf93669beb5b2497 Mon Sep 17 00:00:00 2001 From: IvanDanchev Date: Tue, 26 Aug 2025 08:10:23 +0300 Subject: [PATCH 3/5] docs: add content to Chat articles part2 #11678 --- accessibility/compliance.md | 1 + components/chat/events.md | 2 +- components/chat/getting-started.md | 123 ----------------------------- components/chat/integrations.md | 8 +- components/chat/overview.md | 59 ++++++++------ components/chat/templates.md | 2 +- 6 files changed, 40 insertions(+), 155 deletions(-) delete mode 100644 components/chat/getting-started.md diff --git a/accessibility/compliance.md b/accessibility/compliance.md index b6fcfbe25..2cbb30838 100644 --- a/accessibility/compliance.md +++ b/accessibility/compliance.md @@ -47,6 +47,7 @@ Also check the [notes below the table](#accessibility-compliance-notes). | Card | AA | N/A | [Documentation](slug:card-wai-aria-support) | | Carousel | AA | [Enhanced](https://demos.telerik.com/blazor-ui/carousel/keyboard-navigation) | [Documentation](slug:carousel-wai-aria-support) | | Chart | AA | [Enhanced](https://demos.telerik.com/blazor-ui/chart/keyboard-navigation) | [Documentation](slug:chart-wai-aria-support ) | +| Chat | AA | [Enhanced](https://demos.telerik.com/blazor-ui/chat/overview) | [Documentation](slug:chat-wai-aria-support ) | | CheckBox | AA | [Standard](https://demos.telerik.com/blazor-ui/checkbox/overview) | [Documentation](slug:checkbox-wai-aria-support) | | Chip | AA | [Enhanced](https://demos.telerik.com/blazor-ui/chip/keyboard-navigation) | [Documentation](slug:chip-wai-aria-support) | | ChipList | AA | [Enhanced](https://demos.telerik.com/blazor-ui/chiplist/keyboard-navigation) | [Documentation](slug:chiplist-wai-aria-support) | diff --git a/components/chat/events.md b/components/chat/events.md index 3e701b07a..a6999ca0a 100644 --- a/components/chat/events.md +++ b/components/chat/events.md @@ -5,7 +5,7 @@ description: Learn about the events exposed by the Telerik UI for Blazor Chat co slug: chat-events tags: telerik,blazor,chat,events published: True -position: 5 +position: 9 --- # Chat Events diff --git a/components/chat/getting-started.md b/components/chat/getting-started.md deleted file mode 100644 index 6ac3006ee..000000000 --- a/components/chat/getting-started.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Getting Started -page_title: Chat Getting Started -description: Learn how to set up and configure the Telerik UI for Blazor Chat component in your application. -slug: chat-getting-started -tags: telerik,blazor,chat,setup,configuration -published: True -position: 1 ---- - -# Getting Started with Telerik UI for Blazor Chat - -This article explains how to get started with the Telerik Chat for Blazor. You will learn the steps to add the component to your application and configure its basic functionality. - -After completing this guide, you will be able to use a basic Chat component as the one in the following example: - ->caption Basic Chat configuration - -````razor - - - -@code { - private List Messages { get; set; } = new List(); - private string CurrentUserId = "user1"; - - private async Task HandleSendMessage(ChatSendMessageEventArgs args) - { - var newMessage = new ChatMessage - { - Id = Guid.NewGuid().ToString(), - Content = args.Message, - UserId = CurrentUserId, - SentAt = DateTime.Now - }; - - Messages.Add(newMessage); - await InvokeAsync(StateHasChanged); - } - - public class ChatMessage - { - public string Id { get; set; } - public string Content { get; set; } - public string UserId { get; set; } - public DateTime SentAt { get; set; } - public List Attachments { get; set; } - } -} -```` - -## Prerequisites - -Before adding the Chat component to your app, you must: - -1. [Set up a Blazor project to use Telerik UI for Blazor](slug:getting-started/what-you-need). - -## Add the TelerikChat to a Page - -Follow these steps to add the Chat component to your Blazor application: - -1. Add the `` tag to your `.razor` page. -2. Set the `Data` parameter to a collection that implements `IEnumerable` where `T` is your message model. -3. Set the `AuthorId` parameter to identify the current user. -4. Handle the `OnSendMessage` event to process new messages. -5. (Optional) Configure field mappings using parameters like `TextField`, `AuthorIdField`, and `TimestampField`. -6. (Optional) Set the `Height` and `Width` parameters to control the component's size. - -## Configure Data Fields - -The Chat component supports flexible data field mapping through parameters: - -| Parameter | Description | Default Value | -|-----------|-------------|---------------| -| `TextField` | Field containing message text | `"Text"` | -| `AuthorIdField` | Field containing author/user ID | `"AuthorId"` | -| `TimestampField` | Field containing message timestamp | `"Timestamp"` | -| `FilesField` | Field containing file attachments | `"Files"` | -| `IdField` | Field containing message ID | `"Id"` | -| `AuthorNameField` | Field containing author name | `"AuthorName"` | -| `StatusField` | Field containing message status | `"Status"` | - -## Enable Additional Features - -You can enable optional Chat features: - -````razor - - - -@code { - private List QuickReplies = new List { "Hello", "How are you?", "Thank you" }; - - private async Task HandleSuggestionClick(ChatSuggestionClickEventArgs args) - { - // Handle suggestion selection - } -} -```` - -## Next Steps - -* [Explore Chat data binding options](slug:chat-data-binding) -* [Configure Chat messages and tools](slug:chat-messages-overview) -* [Learn about Chat events](slug:chat-events) - -## See Also - -* [Chat Overview](slug:chat-overview) -* [Live Demo: Chat](https://demos.telerik.com/blazor-ui/chat/overview) diff --git a/components/chat/integrations.md b/components/chat/integrations.md index 805a6542b..32c0e39a5 100644 --- a/components/chat/integrations.md +++ b/components/chat/integrations.md @@ -5,7 +5,7 @@ description: Learn how to integrate the Telerik UI for Blazor Chat component wit slug: chat-integrations tags: telerik,blazor,chat,integrations,ai,llm,chatbot published: True -position: 20 +position: 7 --- # Chat Integrations @@ -129,12 +129,6 @@ The Chat component supports suggested actions through the `SuggestedActions` par ```` -## Next Steps - -* [Data Binding]({%slug chat-data-binding%}) - Learn about binding the Chat to data -* [Events]({%slug chat-events%}) - Handle Chat component events -* [Templates]({%slug chat-templates%}) - Customize the Chat appearance - ## See Also * [Live Demo: Chat AI Integration](https://demos.telerik.com/blazor-ui/chat/ai-integration) diff --git a/components/chat/overview.md b/components/chat/overview.md index 0bd64aa95..4852419e8 100644 --- a/components/chat/overview.md +++ b/components/chat/overview.md @@ -30,11 +30,29 @@ The Telerik UI AuthorIdField="UserId" TimestampField="SentAt" Height="600px" - Width="400px"> + Width="400px" + EnableSpeechToText="true" + EnableFileUpload="true"> @code { - private List Messages { get; set; } = new List(); + private List Messages { get; set; } = new List() + { + new ChatMessage + { + Id = "1", + Content = "Hello! How can I help you today?", + UserId = "assistant", + SentAt = DateTime.Now.AddMinutes(-5) + }, + new ChatMessage + { + Id = "2", + Content = "Hi there! I'm looking for information about the new features.", + UserId = "user1", + SentAt = DateTime.Now.AddMinutes(-3) + } + }; private string CurrentUserId = "user1"; private async Task HandleSendMessage(ChatSendMessageEventArgs args) @@ -64,19 +82,19 @@ The Telerik UI ## Data Binding -The Chat component supports binding to collections of messages and user data. You can bind messages from a local source, a database, or a remote service. The component provides flexible field mapping to accommodate different data models. [Read more about Chat data binding...](slug:chat-data-binding) +The Chat component supports binding to collections of messages and user data. The component provides flexible field mapping to accommodate different data models. [Read more about Chat data binding...](slug:chat-data-binding) ## Messages -The Chat component offers rich messaging capabilities including context menus, toolbars, appearance customization, and persistence features. Messages can include text, files, and custom content. [Read more about Chat messages...](slug:chat-messages-overview) +The Chat component offers rich messaging capabilities including context menus, toolbars, appearance customization, and persistence features. Messages can include text, files, and custom content. [Read more about Chat messages...](slug:chat-messages) ## Templates and Customization -The Chat component provides extensive template support for customizing the appearance and behavior of messages, timestamps, suggestions, status indicators, message box, and header. [Read more about Chat customization...](slug:chat-customisation-overview) +The Chat component provides extensive template support for customizing the appearance and behavior of messages, timestamps, suggestions, message box, and header. [Read more about Chat templates...](slug:chat-templates) ## Integrations -Connect the Chat component with AI services, chatbots, and external APIs to create intelligent conversational experiences. The component supports integration with popular AI services and custom bot frameworks. [Read more about Chat integrations...](slug:chat-integrations-overview) +Connect the Chat component with AI services, chatbots, and external APIs to create intelligent conversational experiences. The component supports integration with popular AI services and custom bot frameworks. [Read more about Chat integrations...](slug:chat-integrations) ## File Uploads and Media @@ -86,13 +104,9 @@ Enable file uploads and media sharing in your chat application. The component su The Chat component exposes various events that allow you to implement custom functionality and handle user interactions. Key events include message sending, file uploads, suggestion clicks, and message actions. [Read more about Chat events...](slug:chat-events) -## Accessibility - -The Chat component is designed with accessibility in mind, supporting keyboard navigation, screen readers, and ARIA attributes. It follows WCAG 2.1 AA guidelines to ensure inclusive user experiences. [Read more about Chat accessibility...](slug:chat-accessibility-wai-aria-support) - ## Chat Parameters -The Chat component provides a comprehensive set of parameters for customization: +The Chat component provides a variety of parameters: @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) @@ -100,6 +114,12 @@ The Chat component provides a comprehensive set of parameters for customization: | --- | --- | --- | | `Data` | `IEnumerable` | The data source for chat messages. | | `AuthorId` | `string` | The ID of the current user sending messages. | +| `TextField` | `string`
(`"Text"`) | The name of the field containing the message content. | +| `AuthorIdField` | `string`
(`"AuthorId"`) | The name of the field containing the author identifier. | +| `TimestampField` | `string`
(`"Timestamp"`) | The name of the field containing the message timestamp. | +| `AuthorNameField` | `string`
(`"AuthorName"`) | The name of the field containing the author display name. | +| `AuthorImageUrlField` | `string`
(`"AuthorImageUrl"`) | The name of the field containing the author's avatar image URL. | +| `AttachmentsField` | `string`
(`"Attachments"`) | The name of the field containing message file attachments. | | `Height` | `string` | The height of the chat component in CSS units. | | `Width` | `string` | The width of the chat component in CSS units. | | `EnableFileUpload` | `bool`
(`false`) | Enables file upload functionality in the chat input. | @@ -109,16 +129,11 @@ The Chat component provides a comprehensive set of parameters for customization: ## Chat Reference and Methods -The Chat component exposes methods for programmatic control: - -* `Refresh()` - Refreshes the chat component and scrolls to the latest messages -* Keyboard navigation methods for accessible message navigation - -To execute these methods, obtain reference to the Chat instance via `@ref`. +The Chat component exposes a `Refresh()` method that refreshes the component and scrolls to the latest messages. To execute the method, obtain a reference to the Chat instance via `@ref`. >caption How to obtain a Chat reference and call methods -````razor +````RAZOR.skip-repl @@ -139,13 +154,11 @@ To execute these methods, obtain reference to the Chat instance via `@ref`. ## Next Steps * [Get started with Chat data binding](slug:chat-data-binding) -* [Configure Chat messages and tools](slug:chat-messages-overview) -* [Customize Chat templates](slug:chat-customisation-overview) -* [Integrate Chat with AI services](slug:chat-integrations-overview) +* [Customize Chat templates](slug:chat-templates) * [Handle Chat events](slug:chat-events) * [Configure file uploads and media](slug:chat-file-uploads-and-media) ## See Also -* [Live Demo: Chat](https://demos.telerik.com/blazor-ui/chat/overview) -* [Chat API Reference](slug:Telerik.Blazor.Components.TelerikChat-1) +* [Live Demo: Chat Overview](https://demos.telerik.com/blazor-ui/chat/overview) +* [Live Demo: AI Integration](https://demos.telerik.com/blazor-ui/chat/ai-integration) diff --git a/components/chat/templates.md b/components/chat/templates.md index 56cd8c631..f8dca538d 100644 --- a/components/chat/templates.md +++ b/components/chat/templates.md @@ -5,7 +5,7 @@ description: A comprehensive guide to the customizable templates available in th slug: chat-templates keywords: blazor, telerik, chat, templates, customization published: True -position: 7 +position: 8 --- # Chat Templates From a79aa44995a4353a2a4eadd1ea669eec81f073ba Mon Sep 17 00:00:00 2001 From: IvanDanchev Date: Tue, 26 Aug 2025 10:21:51 +0300 Subject: [PATCH 4/5] docs: fix code snippet #11678 --- components/chat/data-binding.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/components/chat/data-binding.md b/components/chat/data-binding.md index d4a538db0..40d199585 100644 --- a/components/chat/data-binding.md +++ b/components/chat/data-binding.md @@ -97,9 +97,10 @@ 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 +````Razor @@ -121,6 +122,7 @@ The Chat component automatically reflects changes to the bound data collection. Id = Guid.NewGuid().ToString(), Content = args.Message, AuthorId = CurrentUserId, + AuthorName = "User", Timestamp = DateTime.Now }; @@ -136,32 +138,30 @@ The Chat component automatically reflects changes to the bound data collection. Id = Guid.NewGuid().ToString(), Content = "System notification: New user joined the chat", AuthorId = "system", + AuthorName = "System", Timestamp = DateTime.Now }); - ChatRef?.Refresh(); + Chat1?.Refresh(); } private void ClearMessages() { Messages.Clear(); - ChatRef?.Refresh(); + Chat1?.Refresh(); } 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 IEnumerable Attachments { get; set; } = new List(); } } - ```` ## See Also From 49652475a702da6702ca91dbaeae6c4a2ec0f21f Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 26 Aug 2025 10:40:08 +0300 Subject: [PATCH 5/5] Add Chat to home page --- introduction.md | 1 + 1 file changed, 1 insertion(+) diff --git a/introduction.md b/introduction.md index 5e0d327c2..986245e11 100644 --- a/introduction.md +++ b/introduction.md @@ -185,6 +185,7 @@ You can watch a YouTube playlist of getting started tutorials for Telerik UI for +