UG(1015625): Customization UG page for Smart Rich Text Editor component.

blazor-toc.html

@@ -208,6 +208,14 @@
 									<li> <a href="/blazor/smart-rich-text-editor/getting-started">Blazor WASM App</a></li>
 								</ul>
 							</li>
+							<li>Customization
+								<ul>
+									<li> <a href="/blazor/smart-rich-text-editor/property">Property Configurations</a></li>
+									<li> <a href="/blazor/smart-rich-text-editor/method">Methods</a></li>
+									<li> <a href="/blazor/smart-rich-text-editor/events">Events</a></li>
+									<li> <a href="/blazor/smart-rich-text-editor/appearance">Appearance</a></li>
+								</ul>
+							</li>
 						</ul>
 					</li>
 					<li>AI AssistView

blazor/smart-rich-text-editor/appearance.md

@@ -0,0 +1,68 @@
+---
+layout: post
+title: Customize AI Assistant Popup in Syncfusion Smart Rich Text Editor
+description: Customize the AI Assistant popup: CSS selectors, animation examples, responsive sizing, and processing-state styles for consistent theming.
+platform: Blazor
+control: Smart Rich Text Editor
+documentation: ug
+---
+
+# Customizing the AI Assistant Popup
+
+## Styling the Popup
+
+The AI Assistant Popup can be styled using the following CSS class:
+
+```css
+.e-rte-aiquery-dialog.e-dlg-modal.e-popup {
+    color: white;
+    background: white;
+    z-index: 1;
+}
+```
+---
+
+## Example: Custom Popup Styling
+
+In this example, we customize the AI Assistant popup appearance by targeting the `.e-rte-aiquery-dialog.e-aiassistview` selector.
+
+```razor
+@using Syncfusion.Blazor.SmartRichTextEditor
+
+<SfSmartRichTextEditor Height="300"></SfSmartRichTextEditor>
+
+<style>
+    .e-rte-aiquery-dialog .e-aiassistview {
+        border-color: #e0e0e0;
+        background-color: #f4f4f4;
+        box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
+    }
+
+    .e-rte-aiquery-dialog .e-aiassistview .e-view-header .e-toolbar,
+    .e-rte-aiquery-dialog .e-aiassistview .e-view-header .e-toolbar-items {
+        background: #d5d5d5;
+    }
+
+    .e-rte-aiquery-dialog .e-aiassistview .e-view-content .e-toolbar,
+    .e-rte-aiquery-dialog .e-aiassistview .e-view-content .e-toolbar .e-toolbar-items,
+    .e-rte-aiquery-dialog .e-aiassistview .e-view-content .e-toolbar .e-toolbar-item {
+        background: #f4f4f4;
+    }
+
+    .e-rte-aiquery-dialog .e-aiassistview .e-view-content .e-footer {
+        border: 3px solid #e0e0e0;
+    }
+</style>
+```
+
+![Blazor Smart Rich Text Editor AI AssistView Custom Class](./images/smart-rich-text-editor-ai-assistview-custom-class.png)
+
+
+This shows how to customize the assistant by targeting the `.e-rte-aiquery-dialog.e-aiassistview` selector for fine-grained control over the popup's appearance.
+---
+
+## See Also
+
+* [Properties](property.md)
+* [Methods](method.md)
+* [Events](events.md)

blazor/smart-rich-text-editor/events.md

@@ -0,0 +1,134 @@
+---
+layout: post
+title: AssistViewSettings Events in Syncfusion Smart Rich Text Editor
+description: Reference for AssistViewSettings events, arguments, and examples to handle prompt submissions, streaming responses, popup lifecycle, and toolbar actions.
+platform: Blazor
+control: Smart Rich Text Editor
+documentation: ug
+---
+
+# AssistViewSettings Events
+
+## AIPromptRequested
+**Type:** `EventCallback<AssistViewPromptRequestedEventArgs>`
+
+Fires when the user submits a prompt. This is where you process the user input and send it to your AI backend.
+
+```razor
+@using Syncfusion.Blazor.SmartRichTextEditor
+@using Syncfusion.Blazor.InteractiveChat
+
+<SfSmartRichTextEditor>
+    <AssistViewSettings AIPromptRequested="AIPromptRequested" />
+</SfSmartRichTextEditor>
+
+@code {
+    private async Task AIPromptRequested(AssistViewPromptRequestedEventArgs args)
+    {
+        // Your required action here
+    }
+}
+```
+---
+
+## AIResponseStopped
+**Type:** `EventCallback<ResponseStoppedEventArgs>`
+
+Fires when the user clicks "Stop" during a streaming response.
+
+```razor
+@using Syncfusion.Blazor.SmartRichTextEditor
+@using Syncfusion.Blazor.InteractiveChat
+
+<SfSmartRichTextEditor>
+    <AssistViewSettings AIResponseStopped="AIResponseStopped" />
+</SfSmartRichTextEditor>
+
+@code {
+    private async Task AIResponseStopped(ResponseStoppedEventArgs args)
+    {
+        // Your required action here
+    }
+}
+```
+---
+
+## AIToolbarItemClicked
+**Type:** `EventCallback<AssistViewToolbarItemClickedEventArgs>`
+
+Fires when the user clicks a toolbar button (Insert, Copy, Regenerate, etc.).
+
+```razor
+@using Syncfusion.Blazor.SmartRichTextEditor
+@using Syncfusion.Blazor.InteractiveChat
+
+<SfSmartRichTextEditor>
+    <AssistViewSettings AIToolbarItemClicked="AIToolbarItemClicked" />
+</SfSmartRichTextEditor>
+
+@code {
+    private async Task AIToolbarItemClicked(AssistViewToolbarItemClickedEventArgs args)
+    {
+        // Your required action here
+    }
+}
+```
+---
+
+## AIPopupOpening
+**Type:** `EventCallback<BeforeOpenEventArgs>`
+
+Fires before the AI Assistant popup opens. Use to validate permissions or prefetch data.
+
+```razor
+@using Syncfusion.Blazor.SmartRichTextEditor
+@using Syncfusion.Blazor.Popups
+
+<SfSmartRichTextEditor>
+    <AssistViewSettings AIPopupOpening="AIPopupOpening" />
+</SfSmartRichTextEditor>
+
+@code {
+    private async Task AIPopupOpening(BeforeOpenEventArgs args)
+    {
+        // Your required action here
+    }
+}
+```
+
+**Event Args Properties:**
+- `Cancel` — Set to true to prevent opening
+
+---
+
+## AIPopupClosing
+**Type:** `EventCallback<BeforeCloseEventArgs>`
+
+Fires before the AI Assistant popup closes. Use to save state or confirm before closing.
+
+```razor
+@using Syncfusion.Blazor.SmartRichTextEditor
+@using Syncfusion.Blazor.Popups
+
+<SfSmartRichTextEditor>
+    <AssistViewSettings AIPopupClosing="AIPopupClosing" />
+</SfSmartRichTextEditor>
+
+@code {
+    private async Task AIPopupClosing(BeforeCloseEventArgs args)
+    {
+        // Your required action here
+    }
+}
+```
+
+**Event Args Properties:**
+- `Cancel` — Set to true to prevent closing
+
+---
+
+## See Also
+
+* [Properties](property.md)
+* [Methods](method.md)
+* [Appearance](appearance.md)

blazor/smart-rich-text-editor/method.md

@@ -0,0 +1,81 @@
+---
+layout: post
+title: AssistViewSettings Methods in Syncfusion Smart Rich Text Editor
+description: Comprehensive reference for AssistViewSettings methods with examples to show/hide the AI popup, execute prompts, stream/update responses, and manage history.
+platform: Blazor
+control: Smart Rich Text Editor
+documentation: ug
+---
+
+# AssistViewSettings Methods
+
+Using the public methods, you can build custom workflows with the AI Assistant. Actions such as retrieving conversation history, executing prompts, updating responses, showing or hiding the AI Assistant, and clearing conversation history can all be achieved using the following public methods programmatically.
+
+| Method | Description |
+|--------|-------------|
+| `GetAIPromptHistoryAsync()` | Retrieves all saved prompts and responses from the conversation history. The history remains saved after the AI Assistant popup is closed. Returns a Task with an array of AssistViewPrompt objects. |
+| `ExecuteAIPromptAsync(prompt: string)` | Sends a prompt to the AI Assistant programmatically. The prompt text is executed as if the user typed it directly. |
+| `UpdateAIResponseAsync(outputResponse: string, isFinalUpdate?: boolean)` | Updates or streams the AI response display. Use for custom streaming implementations. Set isFinalUpdate to true when streaming is complete. |
+| `ShowAIPopupAsync()` | Opens the AI Assistant popup and initiates a new conversation session. |
+| `HideAIPopupAsync()` | Closes the AI Assistant popup. |
+| `ClearAIPromptHistoryAsync()` | Deletes all conversation history and resets the AI Assistant to a clean state. |
+
+---
+
+## Complete Example Using All Methods
+
+The following example demonstrates how to use all AssistViewSettings methods together in a single button click handler to create a comprehensive workflow:
+
+```razor
+@using Syncfusion.Blazor.SmartRichTextEditor
+@using Syncfusion.Blazor.InteractiveChat
+@using Syncfusion.Blazor.Buttons
+
+<div style="padding-bottom: 15px">
+    <SfButton @onclick="ShowPopupAsync">Show AI Popup</SfButton>
+    <SfButton @onclick="ExecutePromptAsync">Execute AI Prompt</SfButton>
+    <SfButton @onclick="ClearHistoryAsync">Clear AI History</SfButton>
+    <SfButton @onclick="UpdateResponseAsync">Update AI Response</SfButton>
+    <SfButton @onclick="HidePopupAsync">Hide AI Popup</SfButton>
+    <SfButton @onclick="GetHistoryAsync">Get AI History</SfButton>
+</div>
+<SfSmartRichTextEditor>
+    <AssistViewSettings @ref="AssistViewSettings" Placeholder="Ask AI to enhance your content..." />
+</SfSmartRichTextEditor>
+@code {
+    private AssistViewSettings AssistViewSettings;
+    private List<string> WorkflowLogs = new();
+    private async void ShowPopupAsync()
+    {
+        await AssistViewSettings.ShowAIPopupAsync();
+    }
+    private async void ExecutePromptAsync()
+    {
+        await AssistViewSettings.ExecuteAIPromptAsync("Write a professional summary about AI");
+    }
+    private async void ClearHistoryAsync()
+    {
+        await AssistViewSettings.ClearAIPromptHistoryAsync();
+    }
+    private async void UpdateResponseAsync()
+    {
+        string customResponse = "This is a custom AI-generated response added programmatically via UpdateAIResponseAsync().";
+        await AssistViewSettings.UpdateAIResponseAsync(customResponse, true);
+    }
+    private async void HidePopupAsync()
+    {
+        await AssistViewSettings.HideAIPopupAsync();
+    }
+    private async void GetHistoryAsync()
+    {
+        AssistViewPrompt[] history = await AssistViewSettings.GetAIPromptHistoryAsync();
+    }
+}
+```
+---
+
+## See Also
+
+* [Properties](property.md)
+* [Appearance](appearance.md)
+* [Events](events.md)