syncfusion-blazor-smart-rich-text-editor

What this skill does

# Syncfusion Blazor Smart Rich Text Editor

A comprehensive skill for implementing and configuring the **Syncfusion Blazor Smart Rich Text Editor** (`SfSmartRichTextEditor`) — an AI-powered WYSIWYG editor that extends the full-featured `SfRichTextEditor` with intelligent content assistance. Supports OpenAI, Azure OpenAI, Ollama, and custom AI backends. Provides a Smart Action dropdown toolbar, an AI query dialog (`Alt+Enter`), and a fully customizable AI Assistant popup via `AssistViewSettings`.

## When to Use This Skill

Use this skill when the user needs to:
- Install and set up `SfSmartRichTextEditor` in a Blazor Server or Web App project
- Configure an AI backend: OpenAI, Azure OpenAI, Ollama, or a custom `IChatClient`
- Register `IChatInferenceService` / `SyncfusionAIService` in `Program.cs`
- Use the Smart Action dropdown toolbar for AI commands (summarize, expand, adjust tone)
- Add `Name = "AI Commands"` and `Name = "AI Query"` to `ToolbarItemModel` list to render AI toolbar buttons
- Open the AI Query dialog with `Alt+Enter` for free-form AI prompts
- Configure `AssistViewSettings`: `Commands`, `Suggestions`, `Prompts`, `Placeholder`, `MaxPromptHistory`, popup sizing
- Customize the AI Assistant popup (`BannerTemplate`, `HeaderToolbarSettings`, `PromptToolbarSettings`, `ResponseToolbarSettings`)
- Handle AI events: `AIPromptRequested`, `AIResponseStopped`, `AIToolbarItemClicked`, `AIPopupOpening`, `AIPopupClosing`
- Use AI Assistant methods: `ShowAIPopupAsync`, `HideAIPopupAsync`, `ExecuteAIPromptAsync`, `UpdateAIResponseAsync`, `GetAIPromptHistoryAsync`, `ClearAIPromptHistoryAsync`
- Style or animate the AI Assistant popup (`.e-rte-aiquery-dialog`)
- Use all inherited `SfRichTextEditor` features: toolbar, images, tables, events, methods, data binding, paste cleanup, import/export, accessibility

## Quick Start

**1. Install NuGet packages:**
```bash
dotnet add package Syncfusion.Blazor.SmartRichTextEditor
dotnet add package Syncfusion.Blazor.Themes
dotnet add package Microsoft.Extensions.AI
dotnet add package Microsoft.Extensions.AI.OpenAI
```

**2. Register services in `Program.cs`:**
```csharp
using Syncfusion.Blazor;
using Syncfusion.Blazor.AI;
using Microsoft.Extensions.AI;
using OpenAI;

builder.Services.AddSyncfusionBlazor();

string openAIApiKey = "YOUR_API_KEY";
string openAIModel = "gpt-4";
OpenAIClient openAIClient = new OpenAIClient(openAIApiKey);
IChatClient chatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient();
builder.Services.AddChatClient(chatClient);
builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();
```

**3. Add to `_Imports.razor`:**
```razor
@using Syncfusion.Blazor
@using Syncfusion.Blazor.SmartRichTextEditor
```

**4. Add CSS/JS in `App.razor` (Server) or `index.html` (WASM):**
```html
<link href="_content/Syncfusion.Blazor.Themes/tailwind.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>
```

**5. Add the component:**
```razor
@rendermode InteractiveServer

<SfSmartRichTextEditor>
    <h2>Welcome to Smart Rich Text Editor</h2>
    <p>Select text and use the Smart Action toolbar, or press Alt+Enter to open the AI Query dialog.</p>
    <AssistViewSettings Placeholder="Ask AI to rewrite or generate content." />
</SfSmartRichTextEditor>
```

## Navigation Guide

### Getting Started & AI Service Setup
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- NuGet installation: `Syncfusion.Blazor.SmartRichTextEditor` + `Syncfusion.Blazor.Themes`
- Full setup for Blazor Server App (Visual Studio and VS Code) and Blazor Web App (.NET 8+)
- OpenAI, Azure OpenAI, Ollama, and custom `IChatClient` configuration in `Program.cs`
- `AddInteractiveServerComponents()` registration pattern for Web App
- CSS theme and JS script references (.NET 6 through .NET 10)
- Adding the component with `AssistViewSettings`
- Content retrieval methods (`GetTextAsync`, `GetCharCountAsync`)
- Common setup issues and fixes

### AI Backend Configuration
📄 **Read:** [references/ai-backends.md](references/ai-backends.md)
- **OpenAI**: API key, supported models (`gpt-4-turbo`, `gpt-4`, `gpt-3.5-turbo`), `OpenAIClient` setup, environment variables and User Secrets
- **Azure OpenAI**: resource deployment, `AzureOpenAIClient` + `ApiKeyCredential`, `appsettings.json` config, Managed Identity (production recommended), HIPAA/SOC 2 compliance, monitoring, cost optimization
- **Ollama**: local model installation (`mistral`, `llama2`), `OllamaApiClient` + `OllamaSharp` NuGet, Docker Compose, GPU acceleration, model recommendations
- **Custom `IChatClient`**: implementing `IChatClient` for internal/proprietary AI, registering in `Program.cs`, streaming responses, retry logic, error handling, corporate AI API example

### AssistViewSettings — Properties
📄 **Read:** [references/assist-view-settings.md](references/assist-view-settings.md)
- `Commands` (`List<AICommands>`): Smart Action dropdown with nested sub-commands and icon CSS
- `PopupMaxHeight` / `PopupWidth`: control popup dimensions (CSS values or pixel numbers)
- `Placeholder`: placeholder text in the AI prompt textarea
- `Prompts` (`List<AssistViewPrompt>`): predefined prompt/response templates loaded into the popup
- `Suggestions` (`List<string>`): quick suggestion chips shown in the AI popup
- `MaxPromptHistory`: maximum conversation entries retained (default: 20)
- `BannerTemplate`: custom branding/header `RenderFragment` for the AI popup
- `HeaderToolbarSettings` / `PromptToolbarSettings` / `ResponseToolbarSettings`: toolbar customization with `AssistViewToolbarItem`

### AssistViewSettings — Events
📄 **Read:** [references/ai-events.md](references/ai-events.md)
- `AIPromptRequested` (`AssistViewPromptRequestedEventArgs`): intercept/modify prompt before AI call; set `Cancel=true` to prevent; modify `Response`, `PromptSuggestions`, `ResponseToolbarItems`
- `AIResponseStopped` (`ResponseStoppedEventArgs`): user clicked "Stop Responding"; provides `DataIndex` and `Prompt`
- `AIToolbarItemClicked` (`AssistViewToolbarItemClickedEventArgs`): handle custom toolbar button clicks; access `Item`, `DataIndex`, `Event`; set `Cancel=true`
- `AIPopupOpening` (`BeforeOpenEventArgs`): cancel popup opening with `args.Cancel = true`; access `Element` reference
- `AIPopupClosing` (`BeforeCloseEventArgs`): cancel popup closing; access `ClosedBy`, `IsInteracted`, `PreventFocus`

### AssistViewSettings — Methods
📄 **Read:** [references/ai-methods.md](references/ai-methods.md)
- `ShowAIPopupAsync()`: open the AI Assistant popup programmatically
- `HideAIPopupAsync()`: close the AI Assistant popup
- `ExecuteAIPromptAsync(string prompt)`: send a prompt programmatically (as if user typed it)
- `UpdateAIResponseAsync(string response, bool isFinalUpdate)`: stream or inject AI response; set `isFinalUpdate=true` to hide Stop button
- `GetAIPromptHistoryAsync()`: retrieve all saved prompts/responses as `AssistViewPrompt[]` (chronological, limited to `MaxPromptHistory`)
- `ClearAIPromptHistoryAsync()`: reset all conversation history
- Complete example combining all six methods with `@ref`

### AI Popup Appearance & CSS
📄 **Read:** [references/ai-appearance.md](references/ai-appearance.md)
- CSS selectors for the AI popup: `.e-rte-aiquery-dialog`, `.e-aiassistview`
- Customizing popup background, border, box-shadow
- Targeting `.e-view-header`, `.e-view-content .e-toolbar`, `.e-footer` sub-sections for fine-grained control
- Full custom popup styling example

### Toolbar Configuration
📄 **Read:** [references/toolbar.md](references/toolbar.md)
- Enabling or disabling the toolbar with `RichTextEditorToolbarSettings.Enable`
- Toolbar types: Expand, MultiRow, Scrollable, Popup
- Floating toolbar and offset configuration
- Toolbar position (top or bottom)
- Configuring toolbar items with `ToolbarItemModel`
- Custom toolbar items (template-based)

### Built-in Toolbar Tools Reference
📄 **Read:** [references/b