From 128b7fffba7484cc65489043d447a9e1fc3b2070 Mon Sep 17 00:00:00 2001 From: keerthikarankv <100576900+keerthikarankv@users.noreply.github.com> Date: Wed, 18 Mar 2026 21:52:56 +0530 Subject: [PATCH 1/6] UG(1015625): Customization UG page for Smart Rich Text Editor component. --- blazor-toc.html | 8 + blazor/smart-rich-text-editor/appearance.md | 68 +++++ blazor/smart-rich-text-editor/events.md | 134 +++++++++ ...text-editor-ai-assistview-custom-class.png | Bin 0 -> 24886 bytes blazor/smart-rich-text-editor/method.md | 81 ++++++ blazor/smart-rich-text-editor/property.md | 257 ++++++++++++++++++ 6 files changed, 548 insertions(+) create mode 100644 blazor/smart-rich-text-editor/appearance.md create mode 100644 blazor/smart-rich-text-editor/events.md create mode 100644 blazor/smart-rich-text-editor/images/smart-rich-text-editor-ai-assistview-custom-class.png create mode 100644 blazor/smart-rich-text-editor/method.md create mode 100644 blazor/smart-rich-text-editor/property.md diff --git a/blazor-toc.html b/blazor-toc.html index 98c30df0a3..e43dfc90a5 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -290,6 +290,14 @@
  • Blazor WASM App
    • +
  • Customization + +
  • AI AssistView diff --git a/blazor/smart-rich-text-editor/appearance.md b/blazor/smart-rich-text-editor/appearance.md new file mode 100644 index 0000000000..09fa34cc86 --- /dev/null +++ b/blazor/smart-rich-text-editor/appearance.md @@ -0,0 +1,68 @@ +--- +layout: post +title: Customizing AI Assistant Popup | Syncfusion Blazor Smart Rich Text Editor +description: Learn how to customize the AI Assistant popup styling with CSS animations and processing states. +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 + + + + +``` + +![Blazor Smart Rich Text Editor AI AssistView Custom Class](./images/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) diff --git a/blazor/smart-rich-text-editor/events.md b/blazor/smart-rich-text-editor/events.md new file mode 100644 index 0000000000..0ecb985cac --- /dev/null +++ b/blazor/smart-rich-text-editor/events.md @@ -0,0 +1,134 @@ +--- +layout: post +title: AssistViewSettings Events & Callbacks | Syncfusion Blazor Smart Rich Text Editor +description: Quick reference for AI Assistant events with simple definitions and code examples. +platform: Blazor +control: Smart Rich Text Editor +documentation: ug +--- + +# AssistViewSettings Events + +## AIPromptRequested +**Type:** `EventCallback` + +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 + + + + + +@code { + private async Task AIPromptRequested(AssistViewPromptRequestedEventArgs args) + { + // Your required action here + } +} +``` +--- + +## AIResponseStopped +**Type:** `EventCallback` + +Fires when the user clicks "Stop" during a streaming response. + +```razor +@using Syncfusion.Blazor.SmartRichTextEditor +@using Syncfusion.Blazor.InteractiveChat + + + + + +@code { + private async Task AIResponseStopped(ResponseStoppedEventArgs args) + { + // Your required action here + } +} +``` +--- + +## AIToolbarItemClicked +**Type:** `EventCallback` + +Fires when the user clicks a toolbar button (Insert, Copy, Regenerate, etc.). + +```razor +@using Syncfusion.Blazor.SmartRichTextEditor +@using Syncfusion.Blazor.InteractiveChat + + + + + +@code { + private async Task AIToolbarItemClicked(AssistViewToolbarItemClickedEventArgs args) + { + // Your required action here + } +} +``` +--- + +## AIPopupOpening +**Type:** `EventCallback` + +Fires before the AI Assistant popup opens. Use to validate permissions or prefetch data. + +```razor +@using Syncfusion.Blazor.SmartRichTextEditor +@using Syncfusion.Blazor.Popups + + + + + +@code { + private async Task AIPopupOpening(BeforeOpenEventArgs args) + { + // Your required action here + } +} +``` + +**Event Args Properties:** +- `Cancel` — Set to true to prevent opening + +--- + +## AIPopupClosing +**Type:** `EventCallback` + +Fires before the AI Assistant popup closes. Use to save state or confirm before closing. + +```razor +@using Syncfusion.Blazor.SmartRichTextEditor +@using Syncfusion.Blazor.Popups + + + + + +@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) \ No newline at end of file diff --git a/blazor/smart-rich-text-editor/images/smart-rich-text-editor-ai-assistview-custom-class.png b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-ai-assistview-custom-class.png new file mode 100644 index 0000000000000000000000000000000000000000..88bce34f8a9f51edf7f47e7fb21f13277781b419 GIT binary patch literal 24886 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 + Show AI Popup + Execute AI Prompt + Clear AI History + Update AI Response + Hide AI Popup + Get AI History + + + + +@code { + private AssistViewSettings AssistViewSettings; + private List 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) \ No newline at end of file diff --git a/blazor/smart-rich-text-editor/property.md b/blazor/smart-rich-text-editor/property.md new file mode 100644 index 0000000000..3444ee27db --- /dev/null +++ b/blazor/smart-rich-text-editor/property.md @@ -0,0 +1,257 @@ +--- +layout: post +title: AssistViewSettings Properties | Syncfusion Blazor Smart Rich Text Editor +description: Quick reference for AI Assistant properties with simple definitions and code examples. +platform: Blazor +control: Smart Rich Text Editor +documentation: ug +--- + +# AssistViewSettings Properties + +## Commands +**Type:** `List` + +Predefined AI actions displayed in the Smart Action dropdown. +Use the `Commands` property to configure each `AICommands` entry, including its display text, prompt template, and any nested options. By default, the AI Assistant prompt includes contextual information from the editor, such as the selected text or the entire document content. + +```razor +@using Syncfusion.Blazor.SmartRichTextEditor + + + + + +@code { + private List MyCommands = new() + { + new AICommands { Text = "Shorten", Prompt = "Make this shorter" }, + new AICommands { Text = "Expand", Prompt = "Add more details" }, + new AICommands + { + Text = "Translate", + Prompt = "Translate the text", + Items = new List + { + new AICommands { Text = "To French", Prompt = "Translate to French" }, + new AICommands { Text = "To Spanish", Prompt = "Translate to Spanish" } + } + } + }; +} +``` +--- + +## PopupMaxHeight +**Type:** `string` | **Default:** `"400"` +Maximum height for the AI Assistant popup. Accepts CSS units (e.g., `800px`, `80vh`, `100%`) or numeric values (treated as pixels). +Sets the maximum height of the AI Assistant popup. Accepts CSS values like "800px", "80vh", "100%". + +```razor +@using Syncfusion.Blazor.SmartRichTextEditor + + + + +``` +--- + +## PopupWidth +**Type:** `string` | **Default:** `"600"` +Width of the AI Assistant popup. Accepts CSS units (px, %, vw) or numeric values (converted to pixels); use `auto` for responsive sizing. +Sets the width of the AI Assistant popup. Accepts CSS values or numeric values. + +```razor +@using Syncfusion.Blazor.SmartRichTextEditor + + + + +``` +--- + +## Placeholder +**Type:** `string` | **Default:** `"Ask AI to rewrite or generate content."` +Hint text shown inside the AI prompt input to guide users on what they can ask the assistant. +Sets the placeholder text in the AI prompt input field. + +```razor +@using Syncfusion.Blazor.SmartRichTextEditor + + + + +``` +--- + +## Prompts +**Type:** `List` +A collection of predefined prompt/response templates that can be loaded into the assistant to provide starters or canned workflows. +Predefined prompt-response pairs to preload in the AI Assistant. + +```razor +@using Syncfusion.Blazor.SmartRichTextEditor +@using Syncfusion.Blazor.InteractiveChat + + + + + +@code { + private List TemplatePrompts = new() + { + new AssistViewPrompt + { + Prompt = "Draft a professional email", + Response = @"Subject: Hello Team Dear Team, I hope this message finds you well. Best regards" + }, + new AssistViewPrompt + { + Prompt = "Create API documentation", + Response = @"### GET /users Retrieves a list of users. **Request** GET /api/users **Response** ```json { ""users"": [] } ```" + } + }; +} +``` +--- + +## Suggestions +**Type:** `List` +Short suggestion chips presented to users for one-tap prompts (e.g., "Fix grammar", "Make shorter"). +Quick-start suggestion chips shown in the AI Assistant. + +```razor +@using Syncfusion.Blazor.SmartRichTextEditor + + + + + +@code { + private List QuickSuggestions = new() + { + "Make shorter", + "Improve clarity", + "Fix grammar", + "Add examples", + "More formal", + "Simplify" + }; +} +``` +--- + +## MaxPromptHistory +**Type:** `int` | **Default:** `20` +Maximum number of conversation entries to retain; oldest entries are removed when the limit is exceeded. +Maximum number of saved conversations. Oldest entries are removed when exceeded. + +```razor +@using Syncfusion.Blazor.SmartRichTextEditor + + + + + +``` +--- + +## BannerTemplate +**Type:** `RenderFragment?` +RenderFragment used to render a custom banner at the top of the assistant, useful for branding, status, or short instructions. +Custom template for the banner at the top of the AI Assistant sidebar. + +```razor +@using Syncfusion.Blazor.SmartRichTextEditor + + + + +
    +

    Smart AI Assistant

    + Real-time AI assistance +
    +     +     +     +``` +--- + +## HeaderToolbarSettings +**Type:** `RenderFragment?` +RenderFragment that defines toolbar items in the assistant header (close, settings, etc.). +Toolbar configuration for the header of the AI Assistant sidebar. + +```razor +@using Syncfusion.Blazor.SmartRichTextEditor +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Navigations + + + + + + + + + + +``` +--- + +## PromptToolbarSettings +**Type:** `RenderFragment?` +RenderFragment for toolbar items shown below the prompt input (edit, copy, save, etc.). +Toolbar configuration below the prompt input area. + +```razor +@using Syncfusion.Blazor.SmartRichTextEditor +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Navigations + + + + + + + + + + + +``` +--- + +## ResponseToolbarSettings +**Type:** `RenderFragment?` +RenderFragment for actions associated with AI responses (regenerate, copy, insert, feedback buttons). +Toolbar configuration for AI response actions. + +```razor +@using Syncfusion.Blazor.SmartRichTextEditor +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Navigations + + + + + + + + + + + + + + +``` +--- + +## See Also + +* [Methods](method.md) +* [Appearance](appearance.md) +* [Events](events.md) \ No newline at end of file From 1b5234361656c5ee9476d9cd7b9609aea2ad80be Mon Sep 17 00:00:00 2001 From: keerthikarankv <100576900+keerthikarankv@users.noreply.github.com> Date: Thu, 19 Mar 2026 10:56:26 +0530 Subject: [PATCH 2/6] UG(1015625): Customization UG page for Smart Rich Text Editor component. --- blazor-toc.html | 2 +- blazor/smart-rich-text-editor/appearance.md | 6 +-- blazor/smart-rich-text-editor/events.md | 4 +- blazor/smart-rich-text-editor/method.md | 4 +- blazor/smart-rich-text-editor/property.md | 44 ++++++++++----------- 5 files changed, 29 insertions(+), 31 deletions(-) diff --git a/blazor-toc.html b/blazor-toc.html index e43dfc90a5..6a48013843 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -295,7 +295,7 @@
  • Property Configurations
  • Methods
  • Events
    • -
  • Appearance
    • +
  • Appearance
    • diff --git a/blazor/smart-rich-text-editor/appearance.md b/blazor/smart-rich-text-editor/appearance.md index 09fa34cc86..7431ba17bf 100644 --- a/blazor/smart-rich-text-editor/appearance.md +++ b/blazor/smart-rich-text-editor/appearance.md @@ -1,7 +1,7 @@ --- layout: post -title: Customizing AI Assistant Popup | Syncfusion Blazor Smart Rich Text Editor -description: Learn how to customize the AI Assistant popup styling with CSS animations and processing states. +title: Customize AI Assistant Popup in Syncfusion Smart Rich Text Editor +description: Step-by-step guidance for customizing the AI Assistant popup appearance, including CSS selectors, animation examples, responsive sizing, and processing state styles. platform: Blazor control: Smart Rich Text Editor documentation: ug @@ -55,7 +55,7 @@ In this example, we customize the AI Assistant popup appearance by targeting the ``` -![Blazor Smart Rich Text Editor AI AssistView Custom Class](./images/ai-assistview-custom-class.png) +![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. diff --git a/blazor/smart-rich-text-editor/events.md b/blazor/smart-rich-text-editor/events.md index 0ecb985cac..d740000904 100644 --- a/blazor/smart-rich-text-editor/events.md +++ b/blazor/smart-rich-text-editor/events.md @@ -1,7 +1,7 @@ --- layout: post -title: AssistViewSettings Events & Callbacks | Syncfusion Blazor Smart Rich Text Editor -description: Quick reference for AI Assistant events with simple definitions and code examples. +title: AssistViewSettings Events in Syncfusion Smart Rich Text Editor +description: Reference showing AssistViewSettings events, arguments, and usage examples. Learn how to handle prompt submissions, streaming responses, popup lifecycle events, and toolbar interactions programmatically. platform: Blazor control: Smart Rich Text Editor documentation: ug diff --git a/blazor/smart-rich-text-editor/method.md b/blazor/smart-rich-text-editor/method.md index c5dde14ed9..979a804fa8 100644 --- a/blazor/smart-rich-text-editor/method.md +++ b/blazor/smart-rich-text-editor/method.md @@ -1,7 +1,7 @@ --- layout: post -title: AssistViewSettings Methods | Syncfusion Blazor Smart Rich Text Editor -description: Quick reference for AI Assistant methods with simple definitions and code examples. +title: AssistViewSettings Methods in Syncfusion Smart Rich Text Editor +description: Comprehensive reference for AssistViewSettings public methods with examples. Shows how to programmatically show or hide the AI popup, execute prompts, stream or update responses, and manage conversation history. platform: Blazor control: Smart Rich Text Editor documentation: ug diff --git a/blazor/smart-rich-text-editor/property.md b/blazor/smart-rich-text-editor/property.md index 3444ee27db..c7fe1d9c14 100644 --- a/blazor/smart-rich-text-editor/property.md +++ b/blazor/smart-rich-text-editor/property.md @@ -1,7 +1,7 @@ --- layout: post -title: AssistViewSettings Properties | Syncfusion Blazor Smart Rich Text Editor -description: Quick reference for AI Assistant properties with simple definitions and code examples. +title: AssistViewSettings Properties in Syncfusion Smart Rich Text Editor +description: Reference of AssistViewSettings properties with concise definitions and examples. Covers configuring AI commands, popup sizing, placeholders, predefined prompts and suggestions, toolbar templates, banner templates, and history limits. platform: Blazor control: Smart Rich Text Editor documentation: ug @@ -44,8 +44,8 @@ Use the `Commands` property to configure each `AICommands` entry, including its ## PopupMaxHeight **Type:** `string` | **Default:** `"400"` -Maximum height for the AI Assistant popup. Accepts CSS units (e.g., `800px`, `80vh`, `100%`) or numeric values (treated as pixels). -Sets the maximum height of the AI Assistant popup. Accepts CSS values like "800px", "80vh", "100%". + +Sets the maximum height of the AI Assistant popup. Accepts CSS height values or numbers (treated as pixels). ```razor @using Syncfusion.Blazor.SmartRichTextEditor @@ -58,8 +58,8 @@ Sets the maximum height of the AI Assistant popup. Accepts CSS values like "800p ## PopupWidth **Type:** `string` | **Default:** `"600"` -Width of the AI Assistant popup. Accepts CSS units (px, %, vw) or numeric values (converted to pixels); use `auto` for responsive sizing. -Sets the width of the AI Assistant popup. Accepts CSS values or numeric values. + +Sets the width of the AI Assistant popup. Accepts CSS width values or numbers (treated as pixels). ```razor @using Syncfusion.Blazor.SmartRichTextEditor @@ -72,8 +72,8 @@ Sets the width of the AI Assistant popup. Accepts CSS values or numeric values. ## Placeholder **Type:** `string` | **Default:** `"Ask AI to rewrite or generate content."` -Hint text shown inside the AI prompt input to guide users on what they can ask the assistant. -Sets the placeholder text in the AI prompt input field. + +Specifies the placeholder text shown in the AI Assistant prompt textarea. ```razor @using Syncfusion.Blazor.SmartRichTextEditor @@ -86,8 +86,8 @@ Sets the placeholder text in the AI prompt input field. ## Prompts **Type:** `List` -A collection of predefined prompt/response templates that can be loaded into the assistant to provide starters or canned workflows. -Predefined prompt-response pairs to preload in the AI Assistant. + +Defines a collection of predefined prompts and their corresponding responses. These prompt/response templates can be loaded into the AI Assistant to provide starter prompts or predefined workflows. ```razor @using Syncfusion.Blazor.SmartRichTextEditor @@ -117,8 +117,8 @@ Predefined prompt-response pairs to preload in the AI Assistant. ## Suggestions **Type:** `List` -Short suggestion chips presented to users for one-tap prompts (e.g., "Fix grammar", "Make shorter"). -Quick-start suggestion chips shown in the AI Assistant. + +Defines suggestion prompts displayed in the AI Assistant popup. ```razor @using Syncfusion.Blazor.SmartRichTextEditor @@ -143,8 +143,8 @@ Quick-start suggestion chips shown in the AI Assistant. ## MaxPromptHistory **Type:** `int` | **Default:** `20` -Maximum number of conversation entries to retain; oldest entries are removed when the limit is exceeded. -Maximum number of saved conversations. Oldest entries are removed when exceeded. + +Defines the maximum number of conversation entries retained in the editor's history. When this limit is exceeded, the oldest entries are automatically removed. ```razor @using Syncfusion.Blazor.SmartRichTextEditor @@ -157,9 +157,8 @@ Maximum number of saved conversations. Oldest entries are removed when exceeded. --- ## BannerTemplate -**Type:** `RenderFragment?` -RenderFragment used to render a custom banner at the top of the assistant, useful for branding, status, or short instructions. -Custom template for the banner at the top of the AI Assistant sidebar. + +Specifies the template for the banner in the AI Assistant popup, useful for branding, status, or short instructions. ```razor @using Syncfusion.Blazor.SmartRichTextEditor @@ -179,8 +178,8 @@ Custom template for the banner at the top of the AI Assistant sidebar. ## HeaderToolbarSettings **Type:** `RenderFragment?` -RenderFragment that defines toolbar items in the assistant header (close, settings, etc.). -Toolbar configuration for the header of the AI Assistant sidebar. + +Configures the toolbar in the header section of the AI Assistant interface. ```razor @using Syncfusion.Blazor.SmartRichTextEditor @@ -201,9 +200,8 @@ Toolbar configuration for the header of the AI Assistant sidebar. ## PromptToolbarSettings **Type:** `RenderFragment?` -RenderFragment for toolbar items shown below the prompt input (edit, copy, save, etc.). -Toolbar configuration below the prompt input area. +Configures the toolbar below of the prompt input area section. ```razor @using Syncfusion.Blazor.SmartRichTextEditor @using Syncfusion.Blazor.InteractiveChat @@ -224,8 +222,8 @@ Toolbar configuration below the prompt input area. ## ResponseToolbarSettings **Type:** `RenderFragment?` -RenderFragment for actions associated with AI responses (regenerate, copy, insert, feedback buttons). -Toolbar configuration for AI response actions. + +Configures the toolbar in the AI response viewer section. ```razor @using Syncfusion.Blazor.SmartRichTextEditor From a4413a3a0fbe54197849a96e71bc99a9f1e1a660 Mon Sep 17 00:00:00 2001 From: keerthikarankv <100576900+keerthikarankv@users.noreply.github.com> Date: Thu, 19 Mar 2026 11:27:18 +0530 Subject: [PATCH 3/6] UG(1015625): Customization UG page for Smart Rich Text Editor component. --- blazor/smart-rich-text-editor/appearance.md | 2 +- blazor/smart-rich-text-editor/events.md | 2 +- blazor/smart-rich-text-editor/method.md | 2 +- blazor/smart-rich-text-editor/property.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/blazor/smart-rich-text-editor/appearance.md b/blazor/smart-rich-text-editor/appearance.md index 7431ba17bf..5c374165fb 100644 --- a/blazor/smart-rich-text-editor/appearance.md +++ b/blazor/smart-rich-text-editor/appearance.md @@ -1,7 +1,7 @@ --- layout: post title: Customize AI Assistant Popup in Syncfusion Smart Rich Text Editor -description: Step-by-step guidance for customizing the AI Assistant popup appearance, including CSS selectors, animation examples, responsive sizing, and processing state styles. +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 diff --git a/blazor/smart-rich-text-editor/events.md b/blazor/smart-rich-text-editor/events.md index d740000904..83ca681ee4 100644 --- a/blazor/smart-rich-text-editor/events.md +++ b/blazor/smart-rich-text-editor/events.md @@ -1,7 +1,7 @@ --- layout: post title: AssistViewSettings Events in Syncfusion Smart Rich Text Editor -description: Reference showing AssistViewSettings events, arguments, and usage examples. Learn how to handle prompt submissions, streaming responses, popup lifecycle events, and toolbar interactions programmatically. +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 diff --git a/blazor/smart-rich-text-editor/method.md b/blazor/smart-rich-text-editor/method.md index 979a804fa8..8a4cd99d9c 100644 --- a/blazor/smart-rich-text-editor/method.md +++ b/blazor/smart-rich-text-editor/method.md @@ -1,7 +1,7 @@ --- layout: post title: AssistViewSettings Methods in Syncfusion Smart Rich Text Editor -description: Comprehensive reference for AssistViewSettings public methods with examples. Shows how to programmatically show or hide the AI popup, execute prompts, stream or update responses, and manage conversation history. +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 diff --git a/blazor/smart-rich-text-editor/property.md b/blazor/smart-rich-text-editor/property.md index c7fe1d9c14..dbc2b7ea4f 100644 --- a/blazor/smart-rich-text-editor/property.md +++ b/blazor/smart-rich-text-editor/property.md @@ -1,7 +1,7 @@ --- layout: post title: AssistViewSettings Properties in Syncfusion Smart Rich Text Editor -description: Reference of AssistViewSettings properties with concise definitions and examples. Covers configuring AI commands, popup sizing, placeholders, predefined prompts and suggestions, toolbar templates, banner templates, and history limits. +description: Reference of AssistViewSettings properties with concise definitions and examples for configuring commands, popup sizing, placeholders, prompts, toolbars, banner templates, and history limits. platform: Blazor control: Smart Rich Text Editor documentation: ug From 6a61c2892d21ddb34a26ff7cb78ce48028518ff6 Mon Sep 17 00:00:00 2001 From: keerthikarankv <100576900+keerthikarankv@users.noreply.github.com> Date: Thu, 19 Mar 2026 11:34:22 +0530 Subject: [PATCH 4/6] UG(1015625): Customization UG page for Smart Rich Text Editor component. --- blazor/smart-rich-text-editor/property.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/smart-rich-text-editor/property.md b/blazor/smart-rich-text-editor/property.md index dbc2b7ea4f..eaafd2ec49 100644 --- a/blazor/smart-rich-text-editor/property.md +++ b/blazor/smart-rich-text-editor/property.md @@ -1,7 +1,7 @@ --- layout: post title: AssistViewSettings Properties in Syncfusion Smart Rich Text Editor -description: Reference of AssistViewSettings properties with concise definitions and examples for configuring commands, popup sizing, placeholders, prompts, toolbars, banner templates, and history limits. +description: Comprehensive reference of AssistViewSettings properties with concise definitions and code examples for configuring AI commands, popup sizing, placeholders, prompts, toolbars, banner templates, history, and usage patterns. platform: Blazor control: Smart Rich Text Editor documentation: ug From 9c4fd93184528001cf93bd55d1cc5d302f205c7a Mon Sep 17 00:00:00 2001 From: keerthikarankv <100576900+keerthikarankv@users.noreply.github.com> Date: Thu, 19 Mar 2026 12:23:39 +0530 Subject: [PATCH 5/6] UG(1015625): Customization UG page for Smart Rich Text Editor component. --- blazor/smart-rich-text-editor/property.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/smart-rich-text-editor/property.md b/blazor/smart-rich-text-editor/property.md index eaafd2ec49..6152afc627 100644 --- a/blazor/smart-rich-text-editor/property.md +++ b/blazor/smart-rich-text-editor/property.md @@ -1,7 +1,7 @@ --- layout: post title: AssistViewSettings Properties in Syncfusion Smart Rich Text Editor -description: Comprehensive reference of AssistViewSettings properties with concise definitions and code examples for configuring AI commands, popup sizing, placeholders, prompts, toolbars, banner templates, history, and usage patterns. +description: AssistViewSettings properties reference with concise definitions and examples for configuring commands, popup sizing, placeholders, prompts, toolbars, banners, and history. platform: Blazor control: Smart Rich Text Editor documentation: ug From d84411a549ac366e9f86397f7f7d3fb9b00bf2e0 Mon Sep 17 00:00:00 2001 From: keerthikarankv <100576900+keerthikarankv@users.noreply.github.com> Date: Thu, 19 Mar 2026 12:57:24 +0530 Subject: [PATCH 6/6] UG(1015625): Customization UG page for Smart Rich Text Editor component. --- blazor/smart-rich-text-editor/property.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/smart-rich-text-editor/property.md b/blazor/smart-rich-text-editor/property.md index 6152afc627..eb5994909b 100644 --- a/blazor/smart-rich-text-editor/property.md +++ b/blazor/smart-rich-text-editor/property.md @@ -1,7 +1,7 @@ --- layout: post title: AssistViewSettings Properties in Syncfusion Smart Rich Text Editor -description: AssistViewSettings properties reference with concise definitions and examples for configuring commands, popup sizing, placeholders, prompts, toolbars, banners, and history. +description: AssistViewSettings reference with concise definitions and examples for configuring AI commands, popup sizing, placeholders, prompts, toolbars and history. platform: Blazor control: Smart Rich Text Editor documentation: ug