telerik · Tsvetomir-Hr · Aug 9, 2025 · Aug 7, 2025 · Aug 7, 2025 · Aug 7, 2025
@@ -12,11 +12,51 @@ position: 40
 
 This article explains the events available in the Telerik AIPrompt for Blazor:
 
+* [`OnOutputActionClick`](#onoutputactionclick)
 * [`OnPromptRequest`](#onpromptrequest)
+* [`OnPromptRequestStop`](#onpromptrequeststo)
 * [`OnCommandExecute`](#oncommandexecute)
-* [`OnOutputRate`](#onoutputrate)
 * [`PromptTextChanged`](#prompttextchanged)
 
+## OnOutputActionClick
+
+The `OnOutputActionClick` event fires when the user clicks an output action button in the output view of the AIPrompt component. Use this event to handle custom actions such as copying, retrying, or providing feedback on the generated output.
+
+To define the available output actions, set the `OutputActions` parameter to a list of [`AIPromptOutputActionDescriptor`](slug:Telerik.Blazor.Components.AIPromptOutputActionDescriptor) objects. Each action descriptor configures the appearance and behavior of an action button.
+
+The event handler receives an argument of type `AIPromptOutputActionClickEventArgs`, which provides details about the clicked action, the prompt, the output, and the related command (if any). For a full list of available properties, refer to the [`AIPromptOutputActionClickEventArgs` API reference](slug:Telerik.Blazor.Components.AIPromptOutputActionClickEventArgs).
+
+>caption Handle output action clicks in the AIPrompt
+
+````RAZOR
+<TelerikAIPrompt OutputActions="@OutputActions"
+                 OnOutputActionClick="@OnOutputActionClick"
+                 OnPromptRequest="@HandlePromptRequest">
+</TelerikAIPrompt>
+
+@code {
+    private void OnOutputActionClick(AIPromptOutputActionClickEventArgs args)
+    {
+        // Handle the output action click event
+        Console.WriteLine($"Action clicked: {args.Action.Name}");
+    }
+
+    private List<AIPromptOutputActionDescriptor> OutputActions { get; set; } = new List<AIPromptOutputActionDescriptor>()
+    {
+        new AIPromptOutputActionDescriptor() { Name = "Copy", Icon = nameof(SvgIcon.Copy) },
+        new AIPromptOutputActionDescriptor() { Name = "Retry", Icon = nameof(SvgIcon.Share) },
+        new AIPromptOutputActionDescriptor() { Icon = SvgIcon.ThumbUp, Name = "Thumbs Up" },
+        new AIPromptOutputActionDescriptor() { Icon = SvgIcon.ThumbDown, Name = "Thumbs Down" }
+    };
+
+    private void HandlePromptRequest(AIPromptPromptRequestEventArgs args)
+    {
+        // The example uses dummy data intentionally. Replace the hard-coded string with a call to your AI API.
+        args.Output = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
+    }
+}
+````
+
 ## OnPromptRequest
 
 The `OnPromptRequest` event fires when the user clicks on the **Generate** button within the Prompt view or retries a prompt from the Output view.
@@ -34,6 +74,12 @@ The event handler receives an argument of type [`AIPromptPromptRequestEventArgs`
 
 > Do not use the `OnPromptRequest` event when [integrating the AIPrompt component with `Microsoft.Extensions.AI`](slug:common-features-microsoft-extensions-ai-integration). The `OnPromptRequest` event disables such integration.
 
+## OnPromptRequestStop
+
+The `OnPromptRequestStop` event fires when the user stops a prompt request by clicking the stop floating action button in the output view. This event allows you to handle the cancellation of an ongoing prompt request.
+
+The event handler receives an `EventCallback` with no arguments.
+
 ## OnCommandExecute
 
 The `OnCommandExecute` event fires when the user clicks on a command within the Commands view.
@@ -49,24 +95,9 @@ The event handler receives an argument of type [`AIPromptCommandExecuteEventArgs
 | `IsCancelled` | `bool` | Whether the event is cancelled and the built-in action is prevented. |
 | `OutputItem` | `AIPromptOutputItemDescriptor` | The output item. This property will be populated only when the user retries an existing output. See [`AIPromptOutputItemDescriptor`](slug:Telerik.Blazor.Components.AIPromptOutputItemDescriptor). |
 
+## PromptChanged
 
-## OnOutputRate
-
-The `OnOutputRate` event fires when the user rates an output.
-
-The event handler receives an argument of type [`AIPromptOutputRateEventArgs`](slug:Telerik.Blazor.Components.AIPromptOutputRateEventArgs). See the [example below](#example).
-
-@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `OutputItem` | `AIPromptOutputItemDescriptor` | Specifies the output item that is being rated. See [`AIPromptOutputItemDescriptor`](slug:Telerik.Blazor.Components.AIPromptOutputItemDescriptor). |
-
-## PromptTextChanged
-
-The `PromptTextChanged` event fires when the user changes the prompt text. Use the event to update the AIPrompt's prompt when the `PromptText` parameter is set with one-way binding, otherwise, the user action will be ignored.
-
-## See Also
+The `PromptChanged` event fires when the user changes the prompt text. Use the event to update the AIPrompt's prompt when the `Prompt` parameter is set with one-way binding, otherwise, the user action will be ignored.
 
 ## Example
 

@@ -84,39 +84,13 @@ The AIPrompt component provides templates that enable developers to customize th
 
 The various AIPrompt events allow you to implement custom functionality and handle user interactions with the component's ToolBar. [Read more about the AIPrompt events...](slug:aiprompt-events) 
 
+## Parameters and API
 
-## AIPrompt Parameters
+The AIPrompt component provides a wide range of parameters and methods that let you customize its appearance, behavior, and integration with your application. You can configure built-in and custom views, toolbar items, commands, prompt suggestions, and more. The component also exposes methods for programmatic control, such as refreshing the UI or adding output items dynamically.
 
-The table below lists the AIPrompt parameters. For a full list of the AIPrompt API members (parameters, methods, and events), check the [AIPrompt API Reference](slug:Telerik.Blazor.Components.TelerikAIPrompt).
+For a complete list of available parameters and methods, refer to the [AIPrompt API Reference](slug:Telerik.Blazor.Components.TelerikAIPrompt).
 
-@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
-
-| Parameter | Type and Default&nbsp;Value | Description |
-| --- | --- | --- |
-| `AIPromptViews` | `RenderFragment` | Allows control over the views of the content. Use it to set the visibility of a predefined view or to create custom views. If a render fragment is not provided, the AIPrompt will display its default views. |
-| `AIPromptToolBar` | `RenderFragment` | Any additional buttons that will be rendered within the ToolBar. This parameter will append the new items, rather than override buttons related to existing views. |
-| `Class` | `string` | The `class` attribute of the `<div class="k-prompt">` element. Use it to apply custom styles or [override the theme](slug:themes-override). |
-| `Commands` | `List<AIPromptCommandDescriptor>` | The predefined commands displayed within the Commands view. |
-| `Height` | `string` | The `height` style of the component in any [supported CSS unit](slug:common-features/dimensions). The default AIPrompt dimensions depend on the CSS theme. |
-| `PromptContext` | `string` | This text is appended to the prompt when sending the request. This is required in order to allow the component to work with external context, which is not visible in the prompt box.
-| `PromptText` | `string` | The value of the text within the prompt view. Use it when you need to add some form of transformation to the prompt. The parameter supports two-way binding. |
-| `PromptTextChanged` | `EventCallback<string>` | The handler called whenever the `PromptText` changes. |
-| `PromptSuggestions` | `List<string>` | The prompt suggestions displayed within the Prompt view. |
-| `PromptSuggestionItemTemplate` | `RenderFragment<string>` | The Prompt Suggestion Item template of the AIPrompt. |
-| `ShowOutputRating` | `bool` <br /> (`false`) | Controls the visibility of the rating buttons within the output card. |
-| `SystemPrompt` | `string` <br /> (See "Description" column) | Defines the system prompt that is passed to the [Microsoft `ChatMessage`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.extensions.ai.chatmessage) object constructor. <br /><br /> The default `SystemPrompt` value is: `"You are a helpful assistant designed to assist users. Your goal is to provide helpful, accurate, and contextually appropriate information in a clear and concise manner. Avoid discussing harmful, illegal, or inappropriate topics."`.
-| `Width` | `string` | The `width` style of the component in any [supported CSS unit](slug:common-features/dimensions). The default AIPrompt dimensions depend on the CSS theme. |
-
-## AIPrompt Reference and Methods
-
-The AIPrompt exposes methods for programmatic operation. To use them, define a reference to the component instance with the `@ref` directive attribute.
-
-| Method | Description |
-| --- | --- |
-| `Refresh` | Re-renders the component. |
-| `AddOutput` | Insert a new output item to the AIPrompt. |
-
->caption AIPrompt reference and method usage
+To use component methods, define a reference to the AIPrompt instance with the `@ref` directive. For example:
 
 ````RAZOR
 <TelerikAIPrompt @ref="@AIPromptRef" OnPromptRequest="@HandlePromptRequest"></TelerikAIPrompt>
@@ -149,6 +123,32 @@ The AIPrompt exposes methods for programmatic operation. To use them, define a r
 }
 ````
 
+## SpeechToTextButton Integration
+
+To integrate a built-in SpeechToTextButton in the AIPrompt component, set `EnableSpeechToText="true"`. Optionally, you can use the `<AIPromptSettings>` tag as a child of `<TelerikAIPrompt>`. Inside `<AIPromptSettings>`, you can define the `<AIPromptSpeechToTextButtonSettings>` tag to configure the appearance and behavior of the built-in SpeechToTextButton. For a complete list of available parameters, refer to the [AIPromptSpeechToTextButtonSettings API Reference](slug:Telerik.Blazor.Components.AIPromptSpeechToTextButtonSettings).
+
+For advanced configuration options and more details about the SpeechToTextButton component, see the [SpeechToTextButton documentation](slug:speechtotextbutton-overview).
+
+>caption Example of integrating the SpeechToTextButton in the AIPrompt component
+
+````RAZOR.skip-repl
+<TelerikAIPrompt EnableSpeechToText="true" Prompt="@Prompt" PromptChanged="@OnPromptChanged">
+    <AIPromptSettings>
+        <AIPromptSpeechToTextButtonSettings FillMode="@ThemeConstants.Button.FillMode.Outline"
+                                            Size="@ThemeConstants.Button.Size.Large"
+                                            Rounded="@ThemeConstants.Button.Rounded.Full"
+                                            ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
+                                            MaxAlternatives="3" />
+    </AIPromptSettings>
+</TelerikAIPrompt>
+
+@code {
+    private void OnPromptChanged(string prompt)
+    {
+        Prompt = prompt;
+    }
+}
+````
 
 ## Next Steps
 

@@ -0,0 +1,15 @@
+---
+title: 10.0.0
+description: Handle the changes in the 10.0.0 release of the Telerik UI for Blazor components.
+page_title: Breaking Changes in 10.0.0
+slug: changes-in-10-0-0
+position: 955
+---
+
+# Breaking Changes in 10.0.0
+
+## AIPrompt
+
+The `OnOutputRate` event and the `ShowOutputRating` parameter are removed in version 10.0.0. To implement output rating or similar actions, use an output action and handle it through the [`OnOutputActionClick` event](slug:aiprompt-events#onoutputactionclick).
+
+The **Retry** and **Copy** actions remain built-in, but you now need to define them as part of the `OutputActions` collection. For details on how to use output actions and handle user interaction, see the [OutputActionClick event example](slug:aiprompt-events#onoutputactionclick), which demonstrates how to configure the `OutputActions` collection, including the built-in **Copy** and **Retry** actions.
@@ -9,7 +9,7 @@ position: 0
 # List of Telerik UI for Blazor Versions with Breaking Changes
 
 This article lists the releases of the Telerik UI for Blazor product that introduce breaking changes. You may want to go through it when [upgrading](slug:upgrade-tutorial) to see whether you are affected.
-
+* [10.0.0](slug:changes-in-10-0-0)
 * [9.0.0](slug:changes-in-9-0-0)
 * [8.0.0](slug:changes-in-8-0-0)
 * [7.0.0](slug:changes-in-7-0-0)

@@ -0,0 +1,21 @@
+---
+title: 10.0.0
+description: Handle the rendering changes in the 10.0.0 release of the Telerik UI for Blazor components.
+page_title: Rendering Changes in the 10.0.0 Release
+slug: rendering-changes-in-10-0-0
+position: 965
+---
+
+# Rendering Changes in 10.0.0
+
+## AIPrompt
+
+The AIPrompt component now renders suggestion items using a new markup structure:
+
+* The `k-prompt-suggestion` element is replaced by `k-suggestion`.
+* The `k-suggestion-group` element wraps all `k-suggestion` elements.
+
+## See Also
+
+* [Use best practices when overriding theme styles](slug:themes-override#best-practices)
+* [Breaking changes in Telerik UI for Blazor 10.0.0](slug:changes-in-10-0-0)
@@ -10,6 +10,7 @@ position: 0
 
 As the Telerik UI for Blazor matures we will continuously optimize the HTML rendering and the usage of CSS classes. The rendering changes only affect the styling of the components if the application [overrides the built-in CSS styles](slug:themes-override) or uses an outdated [custom theme](slug:themes-customize). This article tracks the product versions with rendering changes.
 
+* [10.0.0](slug:rendering-changes-in-10-0-0)
 * [7.0.0](slug:rendering-changes-in-7-0-0)
 * [6.0.0](slug:rendering-changes-in-6-0-0)
 * [4.6.0](slug:rendering-changes-in-4-6-0)