From d55a2fe268db8ebb18bec77e7736c02e73221f93 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Thu, 7 Aug 2025 16:07:27 +0300 Subject: [PATCH 1/4] docs(AIPrompt): update docs --- components/aiprompt/events.md | 56 +++++++++++++++++++++++---------- components/aiprompt/overview.md | 54 ++++++++++++++----------------- 2 files changed, 64 insertions(+), 46 deletions(-) diff --git a/components/aiprompt/events.md b/components/aiprompt/events.md index 9fb7d4d2e0..b1d5cf9562 100644 --- a/components/aiprompt/events.md +++ b/components/aiprompt/events.md @@ -12,11 +12,50 @@ position: 40 This article explains the events available in the Telerik AIPrompt for Blazor: +* [`OnOutputActionClick`](#onoutputactionclick) * [`OnPromptRequest`](#onpromptrequest) * [`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 + + + +@code { + private void OnOutputActionClick(AIPromptOutputActionClickEventArgs args) + { + // Handle the output action click event + Console.WriteLine($"Action clicked: {args.Action.Name}"); + } + + private List OutputActions { get; set; } = new List() + { + 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. @@ -49,25 +88,10 @@ 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). | - -## 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 - ## Example >caption Using AIPrompt events diff --git a/components/aiprompt/overview.md b/components/aiprompt/overview.md index 58ba1593e5..bca3279c73 100644 --- a/components/aiprompt/overview.md +++ b/components/aiprompt/overview.md @@ -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 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 `
` element. Use it to apply custom styles or [override the theme](slug:themes-override). | -| `Commands` | `List` | 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` | The handler called whenever the `PromptText` changes. | -| `PromptSuggestions` | `List` | The prompt suggestions displayed within the Prompt view. | -| `PromptSuggestionItemTemplate` | `RenderFragment` | The Prompt Suggestion Item template of the AIPrompt. | -| `ShowOutputRating` | `bool`
(`false`) | Controls the visibility of the rating buttons within the output card. | -| `SystemPrompt` | `string`
(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.

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 @@ -149,6 +123,26 @@ 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, use the `` tag as a child of ``. Inside ``, define the `` tag to configure the appearance and behavior of the speech-to-text button. This approach is available when `EnableSpeechToText="true"` is set on the AIPrompt. For a complete list of available parameters, refer to the [AIPromptSpeechToTextButtonSettings API Reference](slug:Telerik.Blazor.Components.AIPrompt.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 + + + + + +```` ## Next Steps From f610abe14ad827d292b9d74b35d26fe589f0f753 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Thu, 7 Aug 2025 16:31:01 +0300 Subject: [PATCH 2/4] chore: add rendering and breaking changes articles for version 10.0.0 --- upgrade/breaking-changes/10-0-0.md | 15 +++++++++++++++ upgrade/breaking-changes/list.md | 2 +- upgrade/rendering-changes/10-0-0.md | 21 +++++++++++++++++++++ upgrade/rendering-changes/list.md | 1 + 4 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 upgrade/breaking-changes/10-0-0.md create mode 100644 upgrade/rendering-changes/10-0-0.md diff --git a/upgrade/breaking-changes/10-0-0.md b/upgrade/breaking-changes/10-0-0.md new file mode 100644 index 0000000000..8f4f238f4b --- /dev/null +++ b/upgrade/breaking-changes/10-0-0.md @@ -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. \ No newline at end of file diff --git a/upgrade/breaking-changes/list.md b/upgrade/breaking-changes/list.md index 15a88a8704..bf9165802f 100644 --- a/upgrade/breaking-changes/list.md +++ b/upgrade/breaking-changes/list.md @@ -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) diff --git a/upgrade/rendering-changes/10-0-0.md b/upgrade/rendering-changes/10-0-0.md new file mode 100644 index 0000000000..b863f91551 --- /dev/null +++ b/upgrade/rendering-changes/10-0-0.md @@ -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) \ No newline at end of file diff --git a/upgrade/rendering-changes/list.md b/upgrade/rendering-changes/list.md index ea9792cf57..4f7a1585a1 100644 --- a/upgrade/rendering-changes/list.md +++ b/upgrade/rendering-changes/list.md @@ -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) From f911dd72fba4442d4ddeedd330f7fc55693547f9 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Thu, 7 Aug 2025 17:08:28 +0300 Subject: [PATCH 3/4] chore: polish aiprompt docs --- components/aiprompt/events.md | 4 ++-- components/aiprompt/overview.md | 12 +++++++++--- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/components/aiprompt/events.md b/components/aiprompt/events.md index b1d5cf9562..95d892aa08 100644 --- a/components/aiprompt/events.md +++ b/components/aiprompt/events.md @@ -88,9 +88,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). | -## PromptTextChanged +## PromptChanged -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. +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 diff --git a/components/aiprompt/overview.md b/components/aiprompt/overview.md index bca3279c73..56387aa609 100644 --- a/components/aiprompt/overview.md +++ b/components/aiprompt/overview.md @@ -125,23 +125,29 @@ To use component methods, define a reference to the AIPrompt instance with the ` ## SpeechToTextButton Integration -To integrate a built-in SpeechToTextButton in the AIPrompt component, use the `` tag as a child of ``. Inside ``, define the `` tag to configure the appearance and behavior of the speech-to-text button. This approach is available when `EnableSpeechToText="true"` is set on the AIPrompt. For a complete list of available parameters, refer to the [AIPromptSpeechToTextButtonSettings API Reference](slug:Telerik.Blazor.Components.AIPrompt.AIPromptSpeechToTextButtonSettings). +To integrate a built-in SpeechToTextButton in the AIPrompt component set `EnableSpeechToText="true"`. Optionally you can use the `` tag as a child of ``. Inside ``, you can define the `` 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 - + + +@code { + private void OnPromptChanged(string prompt) + { + Prompt = prompt; + } +} ```` ## Next Steps From becf2a4f8ed50dcf43e68b1cc3cdfbc12e3206e6 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Fri, 8 Aug 2025 14:03:15 +0300 Subject: [PATCH 4/4] chore: apply review changes and add omitted event --- components/aiprompt/events.md | 7 +++++++ components/aiprompt/overview.md | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/components/aiprompt/events.md b/components/aiprompt/events.md index 95d892aa08..8e690d8c0f 100644 --- a/components/aiprompt/events.md +++ b/components/aiprompt/events.md @@ -14,6 +14,7 @@ This article explains the events available in the Telerik AIPrompt for Blazor: * [`OnOutputActionClick`](#onoutputactionclick) * [`OnPromptRequest`](#onpromptrequest) +* [`OnPromptRequestStop`](#onpromptrequeststo) * [`OnCommandExecute`](#oncommandexecute) * [`PromptTextChanged`](#prompttextchanged) @@ -73,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. diff --git a/components/aiprompt/overview.md b/components/aiprompt/overview.md index 56387aa609..5b2f1a03be 100644 --- a/components/aiprompt/overview.md +++ b/components/aiprompt/overview.md @@ -125,7 +125,7 @@ To use component methods, define a reference to the AIPrompt instance with the ` ## SpeechToTextButton Integration -To integrate a built-in SpeechToTextButton in the AIPrompt component set `EnableSpeechToText="true"`. Optionally you can use the `` tag as a child of ``. Inside ``, you can define the `` 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). +To integrate a built-in SpeechToTextButton in the AIPrompt component, set `EnableSpeechToText="true"`. Optionally, you can use the `` tag as a child of ``. Inside ``, you can define the `` 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).