Blazor Chat Overview

The Ignite UI for Blazor Chat component provides a complete solution for building conversational interfaces in your applications. Whether you are creating a customer support tool, a collaborative workspace, or a chatbot assistant, the Chat component gives you the building blocks you need: sending and receiving text messages, uploading file attachments, displaying quick reply suggestions, showing typing indicators when the other participant is writing a response.

Unlike a static message list, the IgbChat component is interactive and designed for real-time communication. It manages input, rendering, and user interaction while giving you full control over how messages and attachments are displayed. It also exposes an extensive rendering API that lets you override any part of its layout or visuals.

Installation

To get started, install the Ignite UI for Blazor by running the following command:

Install-Package IgniteUI.Blazor

Or via .NET CLI:

dotnet add package IgniteUI.Blazor

Once installed, you can import the component in your project and register it so it becomes available as a custom element:

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbChatModule));

You will also need to link an additional CSS file to apply the styling to the IgbChat component.

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

The CSS file includes one of our default themes. You can replace it with a different theme or create a custom one if you want the IgbChat to match your application’s branding.

Usage

The simplest way to use the IgbChat is to declare it as follows:

 public IgbChatOptions Options = new IgbChatOptions()
 {
  CurrentUserId = "user",
  HeaderText = "Support Chat"
 };

<IgbChat @ref="Chat" Options="Options">
</IgbChat>

Here, the currentUserId property tells the component which messages are “outgoing” (sent by the current user) versus “incoming” (sent by others). The headerText provides a title for the chat window.

Once rendered, you can programmatically add messages:

<IgbChat @ref="Chat" Options="Options" Messages="Messages" MessageCreated="OnMessageCreated" Height="100%"></IgbChat>

 public IgbChatMessage[] Messages = new IgbChatMessage[]
 {
     new IgbChatMessage()
     {
         Id = "1",
         Text = "Hi, I have a question about my recent order, #7890.",
         Sender = "user",
         Timestamp = (DateTime.Now - TimeSpan.FromMilliseconds(3500000)).ToString()
     }
 }

You can then sync messages coming from the client, by hooking to the messageCreated event and adding the created messages to the collection:

public void OnMessageCreated(IgbChatMessageEventArgs e)
{
  Messages = Messages.Append(e.Detail).ToArray();
}

This approach makes it easy to plug the Chat into your own data source, such as a server endpoint, a chatbot engine, or a collaborative app backend.

Properties

The IgbChat component exposes several key properties that let you control its state and configuration:

These properties make it straightforward to synchronize the Chat’s UI with your application’s state and backend.

Suggestions

Quick reply suggestions provide users with pre-defined responses they can tap to reply instantly. This feature is particularly useful in chatbots, customer service flows, or when guiding users through a structured process. You can provide suggestions by binding an array of strings to the suggestions property. The suggestions-position attribute lets you control where they are displayed: either below the input area or below the messages list.

public IgbChatOptions Options = new IgbChatOptions
{
  CurrentUserId = "me",
  Suggestions = new string[] { "Yes", "No", "Maybe later" },
  SuggestionsPosition = ChatSuggestionsPosition.BelowInput
};

This approach helps streamline user interactions by reducing the need to type repetitive answers and improves the overall experience in guided conversations.

Typing Indicator

Conversations feel more natural when participants can see that the other person is typing. The Chat component provides this behavior through the isTyping property of the options object. When set to true, the chat shows a subtle typing indicator below the messages:

public IgbChatOptions Options = new IgbChatOptions
{
  IsTyping = true
};

This feature is typically toggled programmatically, for example when receiving a typing event from your backend service.

Custom Renderers

While the Chat component works out of the box with its default UI, many applications need to customize the look and feel. For example, you might want to add read receipts, display avatars, or replace the input area with a voice recording button. The IgbChat component addresses this need with a renderer system. A renderer is simply a function that returns a template for a given part of the UI. You can override as many or as few renderers as you like.

ChatTemplateRenderer

Every renderer follows the same function signature:

igRegisterScript("MyTemplate", (ctx) => {
}, false);

The ctx parameter provides different contextual data depending on what is being rendered.

Renderer Contexts

Available Renderers

The following parts of the Chat can be customized:

• Message-level: message, messageHeader, messageContent, messageAttachments, messageActions
• Attachment-level: attachment, attachmentHeader, attachmentContent
• Input-level: input, inputActions, inputActionsStart, inputActionsEnd, inputAttachments, fileUploadButton, sendButton
• Suggestions: suggestionPrefix

This level of granularity means you can tweak just one part (for example, how attachments look) without rewriting the entire chat layout.

Example: Custom Message Content

This example shows how to replace the message bubble with your own template:

public IgbChatOptions Options = new IgbChatOptions
{
    Renderers = new IgbChatRenderers()
    {
        MessageContentScript = "MessageContentScript"
    }
};

igRegisterScript("MessageContentScript", (ctx) => {
    var html = window.igTemplating.html;
    return  html`<div class="bubble custom">${ctx.message.text}</div>`;
}, false);

Example: Custom Input Area

By default, the chat input is a text area. You can override it to provide a more tailored experience, such as adding a voice input button:

public IgbChatOptions Options = new IgbChatOptions
{
    Renderers = new IgbChatRenderers()
    {
        InputScript = "InputTemplate"
    }
};

igRegisterScript("InputTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html`<textarea placeholder=${ctx.instance?.options?.inputPlaceholder || 'Type here...'}>${ctx.value}</textarea>
    <button @click=${() => alert('Voice input!')}>🎤</button>`;
}, false);

Example: Extending Input Actions

The IgbChat component provides two renderers which are useful when you want to keep the default actions (upload and send) but extend them with additional controls:

• inputActionsStart – allows you to inject custom content after the built-in upload button.
• inputActionsEnd – allows you to inject custom content after the built-in send button.

For example, you might want to add a voice recording button before the other buttons, or a menu of extra options after the send button. In the following example, the default upload button is preserved, but we add a microphone button next to it. On the other end, we remove the default send button and replace it with a custom Ask button and a “more” menu:

public IgbChatOptions Options = new IgbChatOptions
{
  Renderers = new IgbChatRenderers()
  {
    InputActionsStartScript = "InputActionsStartTemplate",
    InputActionsEndScript = "InputActionsEndTemplate",
    SendButtonScript = "SendButtonTemplate"
  }
};

igRegisterScript("SendButtonTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html``;
}, false);


igRegisterScript("InputActionsStartTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html`<igc-icon-button variant="flat">🎤</igc-icon-button>`;
}, false);

igRegisterScript("InputActionsEndTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html`<div>
    <igc-button @click=${() => handleCustomSendClick(ctx.instance)}>Ask</igc-button>
    <igc-icon-button variant="flat" name="more_horiz"></igc-icon-button>
  </div>`;
}, false);

In this setup:

• A microphone button is added after it (inputActionsStart).
• The default send button is removed and replaced with a custom Ask button and a “more” icon (inputActionsEnd).

This approach gives you full flexibility over the chat input bar, letting you add, remove, or reorder actions without rebuilding the input area from scratch.

Events

To integrate with your application logic, the Chat component emits a set of events:

• MessageCreated – when a new message is created.
• MessageReact – when a message is reacted to.
• TypingChange – when typing status changes.
• InputFocus / onInputBlur – input focus events.
• InputChange – when the input value changes.

You can listen for these events and sync them with your backend:

<IgbChat MessageCreated="OnMessageCreated"></IgbChat>

public void OnMessageCreated(IgbChatMessageEventArgs e)
{
  Console.WriteLine($"Message: {e.Detail.Text}");
}

Styling

The IgbChat component exposes both CSS parts and slots for fine-grained customization of its appearance and structure.

CSS Parts

Slots

Root Style Adoption (adoptRootStyles)

The Chat component’s options include a special flag for advanced styling scenarios:

This property can be useful if you prefer not to deal with Shadow DOM encapsulation when applying global CSS to custom-rendered templates. However, it comes with trade-offs:

• ✅ Convenience: Lets global styles (from the document) affect custom message renderers.
• ⚠️ Risky: Breaks encapsulation and can lead to style leakage, where global CSS unintentionally alters internal visuals.
• 🔒 One-time setting: This option can only be set at initialization. Changing it at runtime has no effect.

We highly recommend using the standard Web Component styling approaches before resorting to this property:

• CSS Variables and ::part API – Prefer customizing via exposed parts and variables.
• <link> elements – For larger stylesheets, inject them inside the Shadow DOM.
• Inline <style> tags – For small, scoped style overrides.

Example

igc-chat::part(header) {
  background-color: var(--ig-gray-800);
  color: var(--ig-warn-400);
}

igc-chat::part(message-container) {
  background: var(--ig-warn-200);
  color: var(--ig-warn-200-contrast);
}

igc-chat::part(message-sent) {
  background: var(--ig-warn-500);
  color: var(--ig-warn-500-contrast);
}

igc-chat::part(message-header) {
  color: var(--ig-warn-A700); 
}

This allows you to style the IgbChat to match your brand without replacing its functionality.

API Reference

• IgbChat
• IgbChatOptions
• IgbChatMessage
• IgbChatMessageAttachment
• IgbChatRenderers
• IgbChatTemplateRenderer
• Styling & Themes

Additional Resources

• Ignite UI for Blazor Forums
• Ignite UI for Blazor GitHub