Class SfChatUI

Inheritance

System.Object

SfBaseComponent

SfChatUI

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.InteractiveChat

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfChatUI : SfBaseComponent

Constructors

SfChatUI()

Declaration

public SfChatUI()

Properties

AutoScrollToBottom

Gets or sets a value indicating whether the chat should automatically scroll to the bottom when a new message is received in the SfChatUI component.

Declaration

public bool AutoScrollToBottom { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the chat should auto-scroll to the latest message; otherwise, `false`. The default value is `false`.

Remarks

This property controls whether the chat view automatically scrolls to the bottom to show new messages as they arrive in the SfChatUI component.

ChildContent

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.RenderFragment

Created

Event raised when the SfChatUI is created.

Declaration

public EventCallback<object> Created { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<System.Object>

Remarks

This event is triggered when the SfChatUI component is created.

CssClass

Gets or sets the CSS class for customizing the appearance of the SfChatUI component.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	A System.String representing the CSS class for the chat UI. The default value is `String.Empty`.

Remarks

This property allows you to apply custom CSS classes to style and adjust the appearance of the SfChatUI component.

EmptyChatTemplate

Gets or sets the template for rendering the state when there are no messages in the SfChatUI component.

Declaration

public RenderFragment EmptyChatTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.RenderFragment representing the template for the "no message" state. The default value is `null`.

Remarks

This property allows customization of the appearance when there are no messages to display in the chat. You can provide either a string or a function to define the content shown in the "no message" state.

Examples

<SfChatUI>
    <EmptyChatTemplate />
</SfChatUI>

EnableCompactMode

Gets or sets a value indicating whether the compact mode is enabled in the SfChatUI component.

Declaration

public bool EnableCompactMode { get; set; }

Property Value

Type	Description
System.Boolean	A System.Boolean value that enables or disables compact mode. The default value is `false`.

Remarks

When enabled, this mode displays all chat messages aligned to the left side by default for all users. It provides a simplified layout ideal for displaying threaded or system-style messages.

EnableRtl

Gets or sets whether the right to left direction is enabled for SfChatUI component.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	`true`, if the right to left direction is enabled for SfChatUI component. The default value is `false`.

FooterTemplate

Gets or sets the template for the footer area in the SfChatUI component.

Declaration

public RenderFragment FooterTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.RenderFragment representing the template for the footer item. The default value is `null`.

Remarks

This property specifies the template used to render the footer contents in the SfChatUI component.

Examples

<SfChatUI>
    <FooterTemplate />
</SfChatUI>

HeaderIconCss

Gets or sets the CSS class for the header icon in the SfChatUI component.

Declaration

public string HeaderIconCss { get; set; }

Property Value

Type	Description
System.String	A System.String representing the CSS class for the header icon. The default value is `String.Empty`.

Remarks

This property specifies the CSS class applied to the header icon in the SfChatUI component, allowing for custom styling and icon customization.

HeaderText

Gets or sets the header text displayed at the top of the SfChatUI component.

Declaration

public string HeaderText { get; set; }

Property Value

Type	Description
System.String	A System.String representing the header text. The default value is `"Chat"`.

Remarks

This property specifies the text shown in the header area of the SfChatUI component, providing context such as a chat title or participant name.

Height

Gets or sets the height of the SfChatUI component.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String	A System.String representing the height of the SfChatUI component. The default value is `"100%"`.

Remarks

This property specifies the height of the SfChatUI component, allowing customization to fit within the desired layout.

ID

Gets or sets the ID attribute for the SfChatUI component.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	A string representing the unique identifier for the Chat UI. The default is System.String.Empty.

Remarks

This property allows you to specify a unique ID for the SfChatUI component. It can be useful for applying custom styles or accessing the component through scripts.

LoadOnDemand

Gets or sets a value indicating whether chat messages are loaded on demand in the SfChatUI component.

Declaration

public bool LoadOnDemand { get; set; }

Property Value

Type	Description
System.Boolean	A System.Boolean that specifies if messages are loaded on demand. When set to `true`, older messages are loaded as needed, reducing initial load times. The default value is `false`.

Remarks

Enabling on-demand loading can improve performance by loading only visible messages initially, with older messages loaded upon user request or scrolling.

MentionChar

Gets or sets the character that triggers the mention suggestion popup in the chat input.

Declaration

public char MentionChar { get; set; }

Property Value

Type	Description
System.Char	A System.String representing the trigger character for mentions. The default value is `"@"`.

Remarks

The trigger character must be a single character, such as '@' or '#', and is case-sensitive in the input.

When users type this character in the chat input, the mention suggestion popup appears showing filtered users from MentionUsers.

Examples

This example shows how to customize the mention trigger character:

var chat = new SfChat();
chat.MentionChar = "#";
chat.MentionUsers = new List<UserModel>
{
    new UserModel { User = "John Doe" }
};

MentionUsers

Gets or sets the list of users available for mention in the chat UI.

Declaration

public List<UserModel> MentionUsers { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<UserModel>	A System.Collections.Generic.List<> containing user objects that populate the mention suggestion popup. The default value is an empty collection.

Remarks

This collection defines the users that appear in the mention suggestion popup when the mention trigger character is typed.

When typing the MentionChar followed by characters, this list is filtered to show matching users based on the input.

Examples

This example demonstrates how to set up a list of users for mentions:

var chat = new SfChat();
chat.MentionUsers = new List<UserModel>
{
    new UserModel { User = "John Doe" },
    new UserModel { User = "Jane Smith" }
};

Messages

Gets or sets the collection of the messages in the SfChatUI component.

Declaration

public List<ChatMessage> Messages { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<ChatMessage>	A list of ChatMessage representing the messages. The default is an empty list.

Remarks

This property holds the collection of provided sent and their received messages for the SfChatUI component.

Examples

<SfChatUI Messages=”@messages”>
</ SfChatUI>

MessageSend

Event raised when a message is about to be sent in the SfChatUI.

Declaration

public EventCallback<ChatMessageSendEventArgs> MessageSend { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<ChatMessageSendEventArgs>

Remarks

This event is triggered when a message is being sent in the SfChatUI component.

MessageTemplate

Gets or sets the template for rendering the output message item in the SfChatUI component.

Declaration

public RenderFragment<MessageTemplateContext> MessageTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<MessageTemplateContext>	A Microsoft.AspNetCore.Components.RenderFragment<> representing the template for each message item. The default value is `null`.

Remarks

This property allows you to customize how each message is rendered in the SfChatUI component.

Examples

<SfChatUI>
    <MessageTemplate />
</SfChatUI>

Placeholder

Gets or sets the placeholder text for the chat input field in the SfChatUI component.

Declaration

public string Placeholder { get; set; }

Property Value

Type	Description
System.String	A System.String representing the placeholder text. The default value is `"Type your message…"`.

Remarks

This property specifies the placeholder text displayed within the input box of the SfChatUI component, guiding users to enter a message.

ShowFooter

Gets or sets a value indicating whether the footer is displayed in the SfChatUI component.

Declaration

public bool ShowFooter { get; set; }

Property Value

Type	Description
System.Boolean	A System.Boolean that specifies the footer's visibility. When set to `true`, the footer is shown at the bottom of the chat UI. The default value is `true`.

Remarks

Use this property to show or hide the footer, where additional actions or information may be provided at the bottom of the chat UI.

ShowHeader

Gets or sets a value indicating whether the header is displayed in the SfChatUI component.

Declaration

public bool ShowHeader { get; set; }

Property Value

Type	Description
System.Boolean	A System.Boolean that specifies the header's visibility. When set to `true`, the header is displayed at the top of the chat UI. The default value is `true`.

Remarks

Use this property to control the display of the header, providing users with additional context or information at the top of the chat UI.

ShowTimeBreak

Specifies whether time breaks are enabled for grouping chat messages by date in the SfChatUI component.

Declaration

public bool ShowTimeBreak { get; set; }

Property Value

Type	Description
System.Boolean	A System.Boolean indicating whether time breaks are shown. When set to `true`, messages are grouped by their timestamp, displaying date-wise separators within the chat. The default value is `false`.

Remarks

Enabling time breaks improves readability by visually separating messages sent on different dates.

ShowTimestamp

Gets or sets a value indicating whether to show the timestamp in the SfChatUI component.

Declaration

public bool ShowTimestamp { get; set; }

Property Value

Type	Description
System.Boolean	A System.Boolean indicating whether the timestamp is displayed. The default value is `true`.

Remarks

This property determines if the timestamp should be visible in the SfChatUI component.

Suggestions

Gets or sets the list of message suggestions in the SfChatUI component.

Declaration

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

Property Value

Type	Description
System.Collections.Generic.List<System.String>	A list of System.String representing prompt suggestions for quick responses. The default value is an empty list.

Remarks

This property contains a collection of predefined suggestions that can be displayed as prompt options for users in the SfChatUI component, providing a quicker way to reply.

Examples

<SfChatUI Suggestions="@suggestions">
</SfChatUI>

SuggestionTemplate

Gets or sets the template for rendering the suggestion items in the SfChatUI component.

Declaration

public RenderFragment<SuggestionTemplateContext> SuggestionTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<SuggestionTemplateContext>	A Microsoft.AspNetCore.Components.RenderFragment<> representing the template for the suggestion item. The default value is `null`.

Remarks

This property specifies the template used to render the message suggestion items in the SfChatUI component.

Examples

<SfChatUI>
    <SuggestionTemplate />
</SfChatUI>

TimeBreakTemplate

Gets or sets the template for rendering the time break between chat messages in the SfChatUI component.

Declaration

public RenderFragment<TimeBreakTemplateContext> TimeBreakTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<TimeBreakTemplateContext>	A Microsoft.AspNetCore.Components.RenderFragment<> representing the template for the time break. The default value is `null`.

Remarks

This property allows customization of the time break's appearance in the SfChatUI component, enabling the display of separators based on message timestamps.

Examples

<SfChatUI>
    <TimeBreakTemplate>
        <!-- Custom time break content here -->
    </TimeBreakTemplate>
</SfChatUI>

TimestampFormat

Gets or sets the format for the timestamp in the chat messages.

Declaration

public string TimestampFormat { get; set; }

Property Value

Type	Description
System.String	A System.String representing the format of the timestamp. The default is System.String.Empty.

Remarks

This property specifies how the timestamp format should be displayed in the chat messages.

TypingUsers

Gets or sets the list of users who are currently typing the message in the SfChatUI component.

Declaration

public List<UserModel> TypingUsers { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<UserModel>	A list of UserModel representing the users who are typing. The default is an empty list.

Remarks

This property holds the information about users who are currently typing the message in the SfChatUI component.

Examples

<SfChatUI UsersTyping=”@userList”>
</ SfChatUI>

TypingUsersTemplate

Gets or sets the template for displaying users currently typing in the SfChatUI component.

Declaration

public RenderFragment<TypingUsersTemplateContext> TypingUsersTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<TypingUsersTemplateContext>	A Microsoft.AspNetCore.Components.RenderFragment<> representing the template for the typing indicator. The default is `null`.

Remarks

This property allows you to customize the appearance of the typing indicator in the SfChatUI component.

Examples

<SfChatUI >
 <TypingIndicatorTemplate />
</ SfChatUI>

User

Gets or sets the current user interacting in the SfChatUI component. Messages from the current user are displayed on the right side of the Chat UI for differentiation from other participants.

Declaration

public UserModel User { get; set; }

Property Value

Type	Description
UserModel	A UserModel representing the current user. The default value is `null`.

Remarks

This property holds the information about the current user participating in the chat.

Examples

<SfChatUI User=”@currentUser”>
</ SfChatUI>

UserTyping

Event triggered when the user is typing a message in the SfChatUI component.

Declaration

public EventCallback<ChatUserTypingEventArgs> UserTyping { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<ChatUserTypingEventArgs>

Remarks

This event provides updates on the user's typing status in the SfChatUI component.

ValueSelecting

Occurs when a user selects a mention from the suggestion popup in the chat UI.

Declaration

public EventCallback<MentionValueSelectingEventArgs<UserModel>> ValueSelecting { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<MentionValueSelectingEventArgs<UserModel>>	An Microsoft.AspNetCore.Components.EventCallback of type MentionValueSelectingEventArgs<T> that provides details about the selected mention. The default value is null.

Remarks

This event provides details about the selected user, allowing developers to handle mention-related logic.

You can implement custom behaviors such as notifications, validation, or access control for mentions.

To prevent the default behavior of inserting the mention into the input field, set the Cancel property in the event arguments to true.

Examples

<SfChat ValueSelecting="@OnMentionValueSelecting" />
</SfChat>

@code {
    private void OnMentionValueSelecting(MentionValueSelectingEventArgs args)
    {
     Your actions
    }
}

Width

Gets or sets the width of the SfChatUI component.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	A System.String representing the width of the SfChatUI component. The default value is `"100%"`.

Remarks

This property specifies the width of the SfChatUI component, allowing it to fit seamlessly into various container sizes.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

FocusAsync()

Asynchronously sets focus on the input text area of the SfChatUI.

Declaration

public Task FocusAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method ensures that the input text area of the SfChatUI component receives focus, improving user interaction and accessibility. It is useful in scenarios where automatic focus is required, such as after rendering the component or reopening the chat. If the input field is not available or disabled, this operation will have no effect.

OnAfterRenderAsync(Boolean)

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender

Returns

Type
System.Threading.Tasks.Task

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

OnInitializedAsync()

Declaration

protected override Task OnInitializedAsync()

Returns

Type
System.Threading.Tasks.Task

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
System.Threading.Tasks.Task

ScrollToBottomAsync()

Asynchronously scrolls the chat UI to the bottom in the SfChatUI component.

Declaration

public Task ScrollToBottomAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method is used to programmatically scroll the chat interface to the bottom, ensuring that the latest messages are visible to the user.

ScrollToMessageAsync(String)

Asynchronously scrolls to the message with the specified message ID in the SfChatUI.

Declaration

public Task ScrollToMessageAsync(string messageId)

Parameters

Type	Name	Description
System.String	messageId	The unique identifier of the message to scroll to. If the message with the provided ID exists, the SfChatUI will smoothly scroll to its position.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method is useful when implementing features such as message navigation, search results highlighting, or jumping to a particular conversation point. If the specified messageId does not exist or is not currently rendered in the UI, the operation will have no effect.

UpdateMessageAsync(ChatMessage, String)

Updates an existing message in the SfChatUI component. This method allows for modifying a message that has already been added to the conversation.

Declaration

public Task UpdateMessageAsync(ChatMessage Message, string MsgID)

Parameters

Type	Name	Description
ChatMessage	Message	The updated message content represented as a ChatMessage.
System.String	MsgID	The unique identifier of the message to be updated.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.