Syncfusion.Blazor.InteractiveChat 34.1.30

Syncfusion® Blazor Interactive Chat Components

A comprehensive suite of Blazor components for building conversational AI interfaces and chat applications. Includes AI AssistView, Chat UI and Inline AI Assist components for seamless AI service integration.

Supported Components

This package includes the following components:

• Blazor AI AssistView
• Blazor Chat UI
• Blazor Inline AI Assist

Blazor AI AssistView Component

The Blazor AI AssistView Component is a versatile and modern UI tool designed to seamlessly integrate AI services into your web applications.

Key Features:

• Prompt Input: Enable users to send prompts and queries to AI services
• AI Response Display: Effortlessly display AI-generated responses in a user-friendly interface
• Data Binding: Bind to local data, API responses, and observable collections
• Custom Templates: Rich templates for rendering prompts and responses
• Keyboard Navigation: Full keyboard support (Arrow keys, Enter, Escape) for accessibility
• Theming and Styling: Custom CSS, themes, and styling options for seamless integration
• Accessibility: Full keyboard navigation and ARIA support for screen readers

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Blazor Chat UI Component

The Blazor Chat UI Component is a versatile and modern UI tool designed to seamlessly integrate AI services into your web applications.

Key Features:

• Interactive Conversations: Build responsive chat interfaces for user-AI interactions
• Message Display: Render user and AI messages with different visual styles
• AI Response Rendering: Display AI-generated responses in a user-friendly interface
• Data Binding: Support for arrays, API data, and observable collections
• Custom Templates: Rich templates for rendering messages and content
• Keyboard Navigation: Full keyboard support for accessibility
• Theming and Styling: Custom CSS, themes, and styling options for seamless integration

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Blazor Inline AI Assist Component

The Blazor Inline AI Assist Component is a versatile, integrated AI-powered assistant component for modern web applications. It enables users to prompt AI services and receive intelligent responses directly within their interface, with flexible display modes and extensive customization options.

Key Features:

• Dual Response Modes: Display AI responses inline at the cursor position or in a popup overlay for flexible UI integration.
• Command Actions: Display predefined commands and quick-action suggestions using mention-style popups with customizable grouping and icons via CommandMenu.
• Response Actions: Configurable actions such as Accept, Discard, and custom items using ResponseActions to manage AI-generated content.
• Action Toolbar: Includes a toolbar in the prompt input area with a send button and custom actions.
• Markdown: Automatic conversion of Markdown responses to HTML for rich content rendering.
• Streaming Responses: Supports word-by-word or chunk-based streaming with real-time visual feedback and stop controls.
• Indicators: Shows processing states using inline indicators and skeleton loading in popup mode.
• Customization: Supports customization of templates, appearance, and response rendering.

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

System Requirements

• .NET 8.0 or later (Blazor Web App, Blazor Server, Blazor WebAssembly and Blazor Hybrid)
• See full requirements: System Requirements.

Installation

.NET CLI

dotnet add package Syncfusion.Blazor.InteractiveChat

NuGet Package Manager

Install-Package Syncfusion.Blazor.InteractiveChat

Add stylesheet and script references

• For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor.
• For Blazor WebAssembly App: add these to wwwroot/index.html.

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick Start

Register the Syncfusion® Blazor services in Program.cs:

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

AI AssistView

@using Syncfusion.Blazor.InteractiveChat

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <SfAIAssistView></SfAIAssistView>
</div>

Chat UI

@using Syncfusion.Blazor.InteractiveChat

<div style="height: 400px; width: 400px;">
    <SfChatUI ID="chatUser" User="CurrentUserModel" Messages="ChatUserMessages"></SfChatUI>
</div>

@code {
    private static UserModel CurrentUserModel = new UserModel() { ID = "User1", User = "Albert" };
    private static UserModel MichaleUserModel = new UserModel() { ID = "User2", User = "Michale Suyama" };

    private List<ChatMessage> ChatUserMessages = new List<ChatMessage>()
    {
        new ChatMessage() { Text = "Want to get coffee tomorrow?", Author = CurrentUserModel },
        new ChatMessage() { Text = "Sure! What time?", Author = MichaleUserModel },
        new ChatMessage() { Text = "How about 10 AM?", Author = CurrentUserModel }
    };
}

Inline AI Assist

@using Syncfusion.Blazor.InteractiveChat

<button class="e-btn" @onclick="@handleButtonClick">Open Inline AI Assist</button>
<div id="inlineAssistTarget"></div>
<SfInlineAIAssist @ref="InlineAssistObj" RelateTo="#inlineAssistTarget" PromptRequested="@onPromptRequest">
    <ResponseActions ItemSelect="@onResponseItemSelect"></ResponseActions>
</SfInlineAIAssist>

@code {
    private SfInlineAIAssist InlineAssistObj;
    private async Task handleButtonClick()
    {
        await InlineAssistObj.ShowPopupAsync();
    }
    private async Task onResponseItemSelect()
    {
        await InlineAssistObj.HidePopupAsync();
    }
    private async Task onPromptRequest()
    {
        await Task.Delay(1000);
        await InlineAssistObj.UpdateResponseAsync("For real-time prompt processing, connect the Inline AI Assist control to your preferred AI service.");
    }
}

Support

• Support portal
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase a license
• Start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET