menu

Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SfChatUI - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    Class SfChatUI

    Inheritance
    System.Object
    SfBaseComponent
    SfChatUI
    Inherited Members
    SfBaseComponent.Dispose()
    SfBaseComponent.Dispose(Boolean)
    SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)
    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

    Gets or sets a value that indicates the child content for the ChatUI.

    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.

    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.

    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.

    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.

    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved