Syncfusion Blazor AI AssistView

Component Overview

• Prompt Management: Input text, suggestions, placeholder text
• Response Handling: Async processing, markdown rendering, streaming support
• Customization: Avatar icons, styling, theme integration
• UX Features: Scroll-to-bottom indicator, conversation history
• Event Integration: PromptRequested events for AI service callbacks

Navigation Guide

Getting Started

• Installation and NuGet package setup
• Basic component structure and initialization
• PromptRequested event handler implementation
• Minimal working example with async responses

Prompt Configuration

• Setting initial prompt text
• Configuring prompt placeholder text
• Managing prompt-response collections
• Handling prompt events asynchronously

Prompt Suggestions

• Adding suggestion lists for user guidance
• Customizing suggestion headers
• Building suggestion-response mappings
• User interaction patterns with suggestions

Customization & Icons

• Customizing user avatar with PromptIconCss
• Customizing AI avatar with ResponseIconCss
• Applying theme-specific icons
• CSS class and icon integration

Advanced Features

• Markdown rendering in AI responses
• Scroll-to-bottom navigation (EnableScrollToBottom)
• Managing conversation history with Prompts collection
• Common patterns and use cases

AI Service Integration

• OpenAI API integration (non-streaming and streaming)
• Azure OpenAI deployment
• Local Ollama LLM hosting
• Custom backend patterns
• Error handling and rate limiting strategies

Attachments

• Enabling file attachments
• Configuring attachment settings (file types, size limits)
• Handling attachment events (upload, click, remove)
• Server-side upload implementation
• Security and validation best practices

Multi-View Support

• Creating multiple specialized AI views
• Active view management and switching
• View-specific configuration
• Separate conversation histories per view
• Role-based and workspace-based views

Toolbars

• Prompt toolbar customization
• Response toolbar actions (copy, like, regenerate)
• Footer toolbar configuration
• Custom toolbar items and templates
• Handling toolbar events

Templates

• BannerTemplate for initial/empty state
• PromptItemTemplate for custom prompt rendering
• ResponseItemTemplate for custom response rendering
• PromptSuggestionItemTemplate for custom suggestions
• FooterTemplate and ViewTemplate customization
• Template contexts and available properties

Streaming Responses

• Enabling streaming mode
• UpdateResponseAsync for progressive updates
• Real-time response rendering
• Integration with OpenAI, Azure, and Ollama streaming APIs
• Stop responding functionality
• Performance optimization

Methods & Programmatic API

• ExecutePromptAsync for automated prompts
• UpdateResponseAsync for streaming updates
• RefreshUIAsync for manual UI refresh
• ScrollToBottomAsync for scroll control
• Automated workflows and batch processing

Quick Start

@using Syncfusion.Blazor.InteractiveChat

<div style="height: 400px; width: 600px;">
    <SfAIAssistView 
        Prompt="What is Blazor?" 
        PromptRequested="@OnPromptRequested">
    </SfAIAssistView>
</div>

@code {
    private async Task OnPromptRequested(AssistViewPromptRequestedEventArgs args)
    {
        // Add delay to simulate AI processing
        await Task.Delay(1000);
        
        // Connect to your AI service here (OpenAI, Azure, etc.)
        var response = await GetAIResponse(args.Prompt);
        args.Response = response;
    }
    
    private async Task<string> GetAIResponse(string prompt)
    {
        // Call your AI service API
        // For testing: return a simple response
        return $"<div>Processing your prompt: {prompt}</div>";
    }
}

Common Patterns

Pattern 1: Pre-Initialized Conversation

<SfAIAssistView 
    Prompts="@conversationHistory" 
    PromptRequested="@OnPromptRequested">
</SfAIAssistView>

@code {
    private List<AssistViewPrompt> conversationHistory = new()
    {
        new AssistViewPrompt { 
            Prompt = "What is C#?", 
            Response = "<div>C# is a modern object-oriented programming language...</div>" 
        }
    };
}

Pattern 2: Guided Suggestions

<SfAIAssistView 
    PromptSuggestions="@suggestions"
    PromptSuggestionsHeader="Try asking about:"
    PromptRequested="@OnPromptRequested">
</SfAIAssistView>

@code {
    private List<string> suggestions = new()
    {
        "How does dependency injection work?",
        "Explain async/await patterns",
        "What are Blazor components?"
    };
}

Pattern 3: Custom Avatars

<SfAIAssistView 
    PromptIconCss="e-icons e-user"
    ResponseIconCss="e-icons e-bullet-2"
    PromptRequested="@OnPromptRequested">
</SfAIAssistView>

Key Props

Prompt

PromptPlaceholder

PromptSuggestions

PromptSuggestionsHeader

Prompts

PromptIconCss

ResponseIconCss

EnableScrollToBottom

EnableStreaming

AttachmentSettings

ActiveView

ShowHeader

Width

Height

CssClass

EnableRtl

ID

Common Use Cases

1. Customer Support Chatbot - Combine with knowledge base to answer FAQs
2. Coding Assistant - Real-time code suggestions and explanations
3. Content Generator - Interactive writing and editing assistant
4. Learning Interface - Q&A system for educational content
5. API Documentation - Interactive API helper with examples