Back to all docs
API Reference / Telerik.Blazor.Components / TelerikChat<TItem>
New to Telerik UI for Blazor? Start a free 30-day trial

TelerikChat<TItem>

Class

A component that enables you to build conversational UIs with messages, suggestions, attachments, and actions. Supports templating (messages, bubbles, header, status), speech-to-text, file upload, message width/layout, context menus and toolbar actions, quick replies, and send/download events.

Definition

Namespace:Telerik.Blazor.Components

Assembly:Telerik.Blazor.dll

Type Parameters:

TItem

Syntax:
C#
public class TelerikChat<TItem> : BaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Inheritance: objectComponentBaseBaseComponentTelerikChat<TItem>

Implements: IComponentIDisposableIHandleAfterRenderIHandleEvent

Inherited Members BaseComponent.ShouldRender()BaseComponent.OnInitializedAsync()BaseComponent.InitLocalizer()BaseComponent.ThrowIfParameterIsNull(object, string)BaseComponent.HaveOptionsChanged(IDictionary<string, object>, IDictionary<string, object>)BaseComponent.GetClassString(params string[])BaseComponent.InvokeAsync<T>(string, params object[])BaseComponent.InvokeAsync<T>(string, CancellationToken, params object[])BaseComponent.InvokeVoidAsync(string, params object[])BaseComponent.InvokeVoidAsyncWithoutAwait(string, params object[])BaseComponent.InvokeComponentMethodAsync<T>(string, params object[])BaseComponent.InvokeComponentMethodAsync<T>(string, CancellationToken, params object[])BaseComponent.InvokeVoidComponentMethodAsync(string, params object[])BaseComponent.InvokeComponentVoidMethodAsync(string, object)BaseComponent.InvokeDisposeAsync()BaseComponent.StateHasChanged()BaseComponent.RootComponentBaseComponent.ClassComponentBase.OnInitialized()ComponentBase.OnParametersSetAsync()ComponentBase.OnAfterRender(bool)ComponentBase.InvokeAsync(Action)ComponentBase.InvokeAsync(Func<Task>)ComponentBase.DispatchExceptionAsync(Exception)ComponentBase.SetParametersAsync(ParameterView)...

Constructors

TelerikChat()

C#
public TelerikChat()

Methods

BuildRenderTree(RenderTreeBuilder)

C#
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters:__builderRenderTreeBuilder

Overrides: ComponentBase.BuildRenderTree(RenderTreeBuilder)

Dispose()

C#
public override void Dispose()

Overrides: BaseComponent.Dispose()

OnAfterRenderAsync(bool)

C#
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters:firstRenderboolReturns:

Task

Overrides: BaseComponent.OnAfterRenderAsync(bool)

OnParametersSet()

C#
protected override void OnParametersSet()

Overrides: ComponentBase.OnParametersSet()

Refresh(bool)

Refreshes the chat component, causing it to re-render.

C#
public void Refresh(bool scrollToBottom = false)
Parameters:scrollToBottombool

When true, forces the chat to scroll to the bottom after re-rendering regardless of scroll position. When false (default), scrolls to the bottom only if the user is near the bottom.

Properties

AuthorId

Defines the ID of the current author/user. Set this to the ID of the user who is currently sending messages. Each message in the chat should have an AuthorId that matches this value to indicate that the message was sent by the current user.

C#
[Parameter]
public string AuthorId { get; set; }

AuthorIdField

Defines the field in the data source that contains the ID of the author of the message.

C#
[Parameter]
public string AuthorIdField { get; set; }

AuthorImageAltTextField

Defines the field in the data source that contains the alt text for the author's image.

C#
[Parameter]
public string AuthorImageAltTextField { get; set; }

AuthorImageUrlField

Defines the field in the data source that contains the image URL of the author of the message.

C#
[Parameter]
public string AuthorImageUrlField { get; set; }

AuthorMessageContentTemplate

Template for modifying the appearance of the messages in the chat. Applied only to author messages. If defined, it takes precedence over MessageContentTemplate.

C#
[Parameter]
public RenderFragment<ChatMessageContentTemplateContext<TItem>> AuthorMessageContentTemplate { get; set; }

AuthorMessageTemplate

Template for modifying the appearance of the messages bubbles in the chat. Applied only to author messages. If defined, it takes precedence over MessageTemplate.

C#
[Parameter]
public RenderFragment<ChatMessageTemplateContext<TItem>> AuthorMessageTemplate { get; set; }

AuthorNameField

Defines the field in the data source that contains the name of the author of the message.

C#
[Parameter]
public string AuthorNameField { get; set; }

AutoScrollThreshold

Specifies the minimum offset between the top of the latest receiver message and the top edge of the visible message area when auto-scrolling on new receiver messages. Accepts a percentage string relative to the visible message area height (for example, "30%") or an absolute pixel value (for example, "100" or "100px"). Has no effect on author messages, which always scroll to the bottom.

C#
[Parameter]
public string AutoScrollThreshold { get; set; }

ChatFileActions

Defines a render fragment that contains actions for the attachments. Children: ChatFileAction.

C#
[Parameter]
public RenderFragment ChatFileActions { get; set; }

ChatMessageContextMenuActions

Defines a render fragment that contains message actions. Children: ChatMessageContextMenuAction.

C#
[Parameter]
public RenderFragment ChatMessageContextMenuActions { get; set; }

ChatMessageToolbarActions

Defines a render fragment that contains actions for the attachments. Children: ChatMessageToolbarAction.

C#
[Parameter]
public RenderFragment ChatMessageToolbarActions { get; set; }

ChatSettings

C#
[Parameter]
public RenderFragment ChatSettings { get; set; }

Data

The data source for the chat component. The data source should be a collection of items that represent messages.

C#
[Parameter]
public IEnumerable<TItem> Data { get; set; }

EnableActionButton

Enables or disables the send/action button in the chat input box. When disabled, the button can be manually placed inside an affix template using PromptBoxActionButton.

C#
[Parameter]
public bool EnableActionButton { get; set; }

EnableAIChatClient

Enables the built-in integration.

C#
[Parameter]
public bool EnableAIChatClient { get; set; }

EnableFileUpload

Enables or disables the file upload functionality in the chat component. Renders a file upload icon in the chat input box that allows users to upload files.

C#
[Parameter]
public bool EnableFileUpload { get; set; }

EnableMessageCollapse

Enables the collapse functionality for messages in the chat component. By default, messages are expanded and can be collapsed by clicking on them.

C#
[Parameter]
public bool EnableMessageCollapse { get; set; }

EnableScrollToBottom

Specifies whether the chat should enable the scroll to bottom button.

C#
[Parameter]
public bool EnableScrollToBottom { get; set; }

EnableSpeechToText

Enables or disables the speech-to-text functionality in the chat component. Renders a microphone icon in the chat input box that allows users to convert speech to text.

C#
[Parameter]
public bool EnableSpeechToText { get; set; }

EndIndex

The exclusive end index in the full dataset marking the end of the current batch. Only relevant in remote mode (OnLoadMoreMessages). Typically StartIndex + Data.Count. The developer must update this after fetching data and when appending/prepending messages.

C#
[Parameter]
public int EndIndex { get; set; }

EndlessScrollDebounceDelay

The debounce delay in milliseconds for the endless scroll handler. Controls how long the component waits after the user stops scrolling before checking if a new page should be loaded. Default value is 150.

C#
[Parameter]
public int EndlessScrollDebounceDelay { get; set; }

FilesField

Defines the field in the data source that contains the attachments of the message. The field should be a collection of objects of type FileSelectFileInfo.

C#
[Parameter]
public string FilesField { get; set; }

HeaderTemplate

Template for modifying the content of the header of the chat component.

C#
[Parameter]
public RenderFragment HeaderTemplate { get; set; }

Height

Defines the height of the chat component.

C#
[Parameter]
public string Height { get; set; }

IdField

Defines the field in the data source that contains the ID of the message.

C#
[Parameter]
public string IdField { get; set; }

InputValue

The value of the chat input field.

C#
[Parameter]
public string InputValue { get; set; }

IsDeletedField

Defines the field in the data source that indicates whether the message is deleted.

C#
[Parameter]
public string IsDeletedField { get; set; }

IsFailedField

Defines the field in the data model that indicates whether the message sending has failed.

C#
[Parameter]
public string IsFailedField { get; set; }

IsPinnedField

Defines the field in the data source that indicates whether the message is deleted.

C#
[Parameter]
public string IsPinnedField { get; set; }

IsTypingField

Defines the field in the data source that indicates whether the author of the message is currently typing.

C#
[Parameter]
public string IsTypingField { get; set; }

MessageBoxTemplate

A render fragment that allows customization of the whole message box section in the chat.

C#
[Parameter]
public RenderFragment MessageBoxTemplate { get; set; }

MessageContentTemplate

Template for modifying the appearance of the messages in the chat.

C#
[Parameter]
public RenderFragment<ChatMessageContentTemplateContext<TItem>> MessageContentTemplate { get; set; }

MessageFilesLayoutMode

Specifies the layout of the files attached to a message. The available options are:

  1. Vertical - Files are displayed in a vertical list.
  2. Horizontal - Files are displayed in a horizontal list.
  3. Wrap - Files are displayed in a wrapping layout.

The default value is Vertical.

C#
[Parameter]
public ChatMessageFilesLayoutMode MessageFilesLayoutMode { get; set; }

MessageStatusTemplate

Template for modifying the appearance of the message status indicators in the chat.

C#
[Parameter]
public RenderFragment<ChatMessageStatusTemplateContext<TItem>> MessageStatusTemplate { get; set; }

MessageTemplate

Template for modifying the appearance of the messages bubbles in the chat.

C#
[Parameter]
public RenderFragment<ChatMessageTemplateContext<TItem>> MessageTemplate { get; set; }

MessageWidthMode

Defines the width mode of the messages in the chat. The available options are:

  1. Standard - Messages will have a width that fits their content.
  2. Full - Messages will take the full width of the chat container.

The default value is Standard.

C#
[Parameter]
public MessageWidthMode MessageWidthMode { get; set; }

NoDataTemplate

Container for content rendered in place of the message list when no messages or data are provided.

C#
[Parameter]
public RenderFragment NoDataTemplate { get; set; }

OnDownload

Event callback that is triggered when a file is downloaded. Triggered upon clicking on a file download action or when the Download button is clicked.

C#
[Parameter]
public EventCallback<ChatDownloadEventArgs> OnDownload { get; set; }

OnInputValueChanged

Event callback that is triggered when the input value changes.

C#
[Parameter]
public EventCallback<string> OnInputValueChanged { get; set; }

OnLoadMoreMessages

Fires when the rendered message range changes (initial load, scroll up/down, scroll to bottom). In remote mode (Total > 0), the developer must update Data, StartIndex, and EndIndex in this handler. In client-side mode, the event is informational and the payload contains the full rendered range.

C#
[Parameter]
public EventCallback<ChatLoadMoreMessagesEventArgs> OnLoadMoreMessages { get; set; }

OnMessageUnpin

Event callback that is triggered when a message is unpinned.

C#
[Parameter]
public EventCallback<ChatMessageUnpinEventArgs> OnMessageUnpin { get; set; }

OnReferencedMessageClick

Fires when the user clicks a referenced message (pinned message indicator or reply-to preview). In built-in mode, the Chat handles in-DOM navigation automatically — the event is informational. In remote mode, the developer must resolve the message location, fetch data, and update Data, StartIndex, and EndIndex.

C#
[Parameter]
public EventCallback<ChatReferencedMessageClickEventArgs> OnReferencedMessageClick { get; set; }

OnResendMessage

Event callback that is triggered when a message is sent. The arguments are of type ChatResendMessageEventArgs.

C#
[Parameter]
public EventCallback<ChatResendMessageEventArgs> OnResendMessage { get; set; }

OnSendMessage

Event callback that is triggered when a message is sent. The arguments are of type ChatSendMessageEventArgs.

C#
[Parameter]
public EventCallback<ChatSendMessageEventArgs> OnSendMessage { get; set; }

OnSuggestionClick

An event callback that is triggered when a suggestion is selected from the suggestions list. The arguments are of type ChatSuggestionClickEventArgs.

C#
[Parameter]
public EventCallback<ChatSuggestionClickEventArgs> OnSuggestionClick { get; set; }

PageSize

The number of messages to load per page when ScrollMode is Endless. Default value is 20.

C#
[Parameter]
public int PageSize { get; set; }

PinnedMessages

A separate collection of pinned messages. Use this when pinned messages may not be part of the currently loaded Data (e.g., in OnLoadMoreMessages scenarios). When not set, the component falls back to looking for pinned messages in Data via the IsPinnedField. The component displays the last item from this collection as the active pinned message.

C#
[Parameter]
public IEnumerable<TItem> PinnedMessages { get; set; }

Placeholder

Defines the placeholder text displayed in the chat input when it is empty. Use this to provide hints about the expected input to users.

C#
[Parameter]
public string Placeholder { get; set; }

ReceiverMessageContentTemplate

Template for modifying the appearance of the messages in the chat. Applied only to receiver messages. If defined, it takes precedence over MessageContentTemplate.

C#
[Parameter]
public RenderFragment<ChatMessageContentTemplateContext<TItem>> ReceiverMessageContentTemplate { get; set; }

ReceiverMessageTemplate

Template for modifying the appearance of the messages bubbles in the chat. Applied only to receiver messages. If defined, it takes precedence over MessageTemplate.

C#
[Parameter]
public RenderFragment<ChatMessageTemplateContext<TItem>> ReceiverMessageTemplate { get; set; }

RepliedToMessages

Messages that are reply targets for messages in the current batch but live outside Data. Only needed in remote mode (OnLoadMoreMessages). The developer resolves missing reply targets after each data fetch. Scoped per batch — rebuilt on each OnLoadMoreMessages or batch replacement.

C#
[Parameter]
public IEnumerable<TItem> RepliedToMessages { get; set; }

ReplyToIdField

Each message in the chat should have a unique ID. This field value is optional and it is used to identify the other message to which the current message is a reply.

C#
[Parameter]
public string ReplyToIdField { get; set; }

ScrollMode

Controls how the Chat handles scrolling and message rendering. Scrollable (default) renders all messages. Endless loads messages in pages as the user scrolls.

C#
[Parameter]
public ChatScrollMode ScrollMode { get; set; }

StartIndex

The index in the full dataset that Data[0] corresponds to. Only relevant in remote mode (OnLoadMoreMessages). The developer must update this after fetching data and when appending/prepending messages.

C#
[Parameter]
public int StartIndex { get; set; }

StatusField

Defines the field in the data source that contains the status of the message.

C#
[Parameter]
public string StatusField { get; set; }

SuggestedActionsField

Defines the field in the data source that contains the quick actions for the message.

C#
[Parameter]
public string SuggestedActionsField { get; set; }

SuggestedActionsLayoutMode

Controls the layout of the suggestions displayed below message with suggested actions. The available options are:

  1. Wrap - Suggestions will wrap to the next line if they exceed the width of the container.
  2. Scroll - Suggestions will be displayed in a single line with horizontal scrolling.
  3. ScrollButtons - Suggestions will be displayed in a single line with horizontal scrolling and navigation buttons.

The default value is Wrap.

C#
[Parameter]
public ChatSuggestedActionsLayoutMode SuggestedActionsLayoutMode { get; set; }

Suggestions

Use this parameter to provide a collection of suggestions that will be displayed as quick reply options in the chat input.

C#
[Parameter]
public IEnumerable<string> Suggestions { get; set; }

SuggestionsLayoutMode

Controls the layout of the suggestions displayed in the chat input. The available options are:

  1. Wrap - Suggestions will wrap to the next line if they exceed the width of the container.
  2. Scroll - Suggestions will be displayed in a single line with horizontal scrolling.
  3. ScrollButtons - Suggestions will be displayed in a single line with horizontal scrolling and navigation buttons.

The default value is Wrap.

C#
[Parameter]
public ChatSuggestionsLayoutMode SuggestionsLayoutMode { get; set; }

SuggestionTemplate

Template for modifying the appearance of the suggestions displayed in the chat input.

C#
[Parameter]
public RenderFragment<ChatSuggestionTemplateContext> SuggestionTemplate { get; set; }

TextField

The field in the data source that contains the text of the message.

C#
[Parameter]
public string TextField { get; set; }

TimestampField

Defines the field in the data source that contains the timestamp of the message.

C#
[Parameter]
public string TimestampField { get; set; }

TimestampTemplate

Defines a render fragment that contains the content of the chat time stamps displayed between messages.

C#
[Parameter]
public RenderFragment<ChatTimestampTemplateContext> TimestampTemplate { get; set; }

Total

The total number of messages in the full dataset. Required when OnLoadMoreMessages has a delegate. Ignored for client-side endless scrolling.

C#
[Parameter]
public int Total { get; set; }

UserStatusTemplate

Content rendered next to the user avatar. Useful for rendering badges indicating user status.

C#
[Parameter]
public RenderFragment<ChatMessageUserStatusTemplateContext<TItem>> UserStatusTemplate { get; set; }

Width

Defines the width of the chat component.

C#
[Parameter]
public string Width { get; set; }
In this article
DefinitionConstructorsTelerikChat()MethodsBuildRenderTree(RenderTreeBuilder)Dispose()OnAfterRenderAsync(bool)OnParametersSet()Refresh(bool)PropertiesAuthorIdAuthorIdFieldAuthorImageAltTextFieldAuthorImageUrlFieldAuthorMessageContentTemplateAuthorMessageTemplateAuthorNameFieldAutoScrollThresholdChatFileActionsChatMessageContextMenuActionsChatMessageToolbarActionsChatSettingsDataEnableActionButtonEnableAIChatClientEnableFileUploadEnableMessageCollapseEnableScrollToBottomEnableSpeechToTextEndIndexEndlessScrollDebounceDelayFilesFieldHeaderTemplateHeightIdFieldInputValueIsDeletedFieldIsFailedFieldIsPinnedFieldIsTypingFieldMessageBoxTemplateMessageContentTemplateMessageFilesLayoutModeMessageStatusTemplateMessageTemplateMessageWidthModeNoDataTemplateOnDownloadOnInputValueChangedOnLoadMoreMessagesOnMessageUnpinOnReferencedMessageClickOnResendMessageOnSendMessageOnSuggestionClickPageSizePinnedMessagesPlaceholderReceiverMessageContentTemplateReceiverMessageTemplateRepliedToMessagesReplyToIdFieldScrollModeStartIndexStatusFieldSuggestedActionsFieldSuggestedActionsLayoutModeSuggestionsSuggestionsLayoutModeSuggestionTemplateTextFieldTimestampFieldTimestampTemplateTotalUserStatusTemplateWidth
Not finding the help you need?
Contact Support