diff --git a/components/inlineaiprompt/events.md b/components/inlineaiprompt/events.md new file mode 100644 index 000000000..bbbcf8d17 --- /dev/null +++ b/components/inlineaiprompt/events.md @@ -0,0 +1,223 @@ +--- +title: Events +page_title: InlineAIPrompt - Events +description: Events in the InlineAIPrompt for Blazor. +slug: inlineaiprompt-events +tags: telerik,blazor,inlineaiprompt,events +published: true +position: 10 +--- + +# InlineAIPrompt Events + +This article describes the events of the Telerik InlineAIPrompt for Blazor: + +* [`OnOutputActionClick`](#onoutputactionclick) +* [`OnPromptRequest`](#onpromptrequest) +* [`OnPromptRequestStop`](#onpromptrequeststop) +* [`OnCommandExecute`](#oncommandexecute) +* [`PromptChanged`](#promptchanged) + +## OnOutputActionClick + +The `OnOutputActionClick` event fires when the user clicks an output action button in the output view of the InlineAIPrompt 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 [`InlineAIPromptOutputActionDescriptor`](slug:Telerik.Blazor.Components.InlineAIPromptOutputActionDescriptor) objects. Each action descriptor configures the appearance and behavior of an action button. + +The event handler receives an argument of type [`InlineAIPromptOutputActionClickEventArgs` API reference](slug:Telerik.Blazor.Components.InlineAIPromptOutputActionClickEventArgs), which provides details about the clicked action, the prompt, the output, and the related command (if any). + +## 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. + +The event handler receives an argument of type [`InlineAIPromptPromptRequestEventArgs` API reference](slug:Telerik.Blazor.Components.InlineAIPromptPromptRequestEventArgs). See the [example below](#example). + +> Do not use the `OnPromptRequest` event when [integrating the InlineAIPrompt 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 no arguments. + +## OnCommandExecute + +The `OnCommandExecute` event fires when the user clicks on a command within the Commands view. + +The event handler receives an argument of type [`InlineAIPromptCommandExecuteEventArgs` API reference](slug:Telerik.Blazor.Components.InlineAIPromptCommandExecuteEventArgs). See the [example below](#example). + +## PromptChanged + +The `PromptChanged` event fires when the user changes the prompt text. Use the event to update the InlineAIPrompt's prompt when the `Prompt` parameter is set with one-way binding, otherwise, the user action will be ignored. + +## Example + +>caption Using InlineAIPrompt events + +````Razor +
+ @foreach (var genre in MovieGenres) + { + + @genre + + } +
+ + + + +
+ @((MarkupString)EventsLog) +
+ +@code { + private int PromptRequestsCount { get; set; } = 0; + private string EventsLog { get; set; } = string.Empty; + private string UserPrompt { get; set; } = string.Empty; + private string PromptContext { get; set; } = string.Empty; + private TelerikInlineAIPrompt? InlinePromptRef { get; set; } + + private List Commands { get; set; } = new() + { + new InlineAIPromptCommandDescriptor() + { + Id = "recommend", + Title = "Recommend Movies", + Icon = SvgIcon.Sparkles, + Prompt = "Suggest top-rated movies in this genre.", + Children = new List + { + new InlineAIPromptCommandDescriptor() + { + Id = "recommend-classics", + Title = "Classic Picks", + Icon = SvgIcon.Star, + Prompt = "List timeless classics in this genre." + }, + new InlineAIPromptCommandDescriptor() + { + Id = "recommend-new", + Title = "New Releases", + Icon = SvgIcon.Calendar, + Prompt = "List recent must-watch releases in this genre." + } + } + }, + new InlineAIPromptCommandDescriptor() + { + Id = "trivia", + Title = "Genre Trivia", + Icon = SvgIcon.AggregateFields, + Prompt = "Share fun facts and trivia about this movie genre." + } + }; + + private List OutputActions { get; set; } = new() + { + new InlineAIPromptOutputActionDescriptor() + { + Text = "Mark as Favorite", + Icon = SvgIcon.Heart, + Title = "Save this recommendation to favorites", + Enabled = true, + }, + new InlineAIPromptOutputActionDescriptor + { + Name = "Retry", + }, + new InlineAIPromptOutputActionDescriptor + { + Name = "Copy", + }, + new InlineAIPromptOutputActionDescriptor + { + Name = "Discard", + } + }; + + private List MovieGenres { get; set; } = new() + { + "Action", + "Comedy", + "Drama", + "Science Fiction" + }; + + private async Task OnGenreContextMenuAsync(MouseEventArgs e, string genre) + { + PromptContext = genre; + await InlinePromptRef!.ShowAsync(e.ClientX, e.ClientY); + } + + private async Task OnPromptRequest(InlineAIPromptPromptRequestEventArgs args) + { + await Task.Delay(200); + args.Output = $"AI suggestion for prompt #{PromptRequestsCount++} in {PromptContext}"; + EventsLog += $"OnPromptRequest fired
"; + } + + private async Task OnCommandExecute(InlineAIPromptCommandExecuteEventArgs args) + { + await Task.Delay(200); + args.Output = $"AI executed: {args.Command.Title} for {PromptContext}"; + EventsLog += $"OnCommandExecute fired
"; + } + + private void OnPromptRequestStop() + { + EventsLog += $"OnPromptRequestStop: Prompt request stopped.
"; + } + + private void OnOutputActionClick(InlineAIPromptOutputActionClickEventArgs args) + { + EventsLog += $"OnOutputActionClick fired
"; + } +} + + +```` \ No newline at end of file diff --git a/components/inlineaiprompt/overview.md b/components/inlineaiprompt/overview.md new file mode 100644 index 000000000..eb165a425 --- /dev/null +++ b/components/inlineaiprompt/overview.md @@ -0,0 +1,245 @@ +--- +title: Overview +page_title: InlineAIPrompt Overview +description: Overview of the InlineAIPrompt for Blazor. +slug: inlineaiprompt-overview +tags: telerik,blazor,inlineaiprompt,overview +published: True +position: 0 +--- + +# Blazor InlineAIPrompt Overview + +The Telerik InlineAIPrompt for Blazor is a popup-based component that lets you interact with AI language models right inside your content. + +The InlineAIPrompt provides a simple and focused way to send prompts and get responses from AI without interrupting the user’s flow. The InlineAIPrompt is great for adding contextual AI help exactly where users need it. + +## Creating Blazor InlineAIPrompt + +1. Add the `` tag. +2. Subscribe to the `OnPromptRequest` event that will fire whenever the user sends a prompt request. The handler expects an argument of type `InlineAIPromptPromptRequestEventArgs`. +3. Set the `Prompt` parameter + +>caption Telerik Blazor InlineAIPrompt + +````Razor +
+ @foreach (var product in Products) + { + + @product + + } +
+ + + + +@code { + private string UserPrompt { get; set; } = string.Empty; + private string PromptContext { get; set; } = string.Empty; + private TelerikInlineAIPrompt? InlinePromptRef { get; set; } + + private List Products { get; set; } = new() + { + "Wireless Noise-Cancelling Headphones", + "Smart Home Thermostat", + "4K Ultra HD Monitor" + }; + + private async Task ShowPromptAsync(MouseEventArgs e, string product) + { + PromptContext = product; + await InlinePromptRef!.ShowAsync(e.ClientX, e.ClientY); + } + + private void OnPromptRequest(InlineAIPromptPromptRequestEventArgs args) + { + args.Output = $"AI response for: {PromptContext}"; + } +} + + +```` + +## Streaming + +The InlineAIPrompt component supports streaming responses, which lets users view AI-generated content in real time as it’s created. [Read more about the Blazor InlineAIPrompt streaming...](slug:inlineaiprompt-streaming) + +## Events + +The InlineAIPrompt component offers several events that allow developers to handle user interactions effectively. [Read more about the Blazor InlineAIPrompt events...](slug:inlineaiprompt-events) + +## InlineAIPrompt API + +Get familiar with all InlineAIPrompt parameters, methods, events, and nested tags in the [InlineAIPrompt API Reference](slug:Telerik.Blazor.Components.TelerikInlineAIPrompt). + +### Settings and Commands + +The InlineAIPrompt exposes settings for its popup and its embedded [Speech to Text Button](slug:speechtotextbutton-overview). To configure the options, declare a `` or `` tag inside ``. + +The InlineAIPrompt component also exposes an option to set predefined commands, which is a predefined prompt that is processed immediately. To configure the actions, use the `Commands` parameter and subscribe to the `OnCommandExecute` event that will fire whenever the user executes a command. The handler expects an argument of type `InlineAIPromptCommandExecuteEventArgs`. + +````Razor +
+ @foreach (var destination in TravelDestinations) + { + + @destination + + } +
+ + + + + + + + +@code { + private string UserPrompt { get; set; } = string.Empty; + private string PromptContext { get; set; } = string.Empty; + private TelerikInlineAIPrompt? InlinePromptRef { get; set; } + + private List Commands { get; set; } = new() + { + new InlineAIPromptCommandDescriptor() + { + Id = "summarize", + Title = "Summarize Destination", + Icon = SvgIcon.Sparkles, + Prompt = "Provide a short summary of this travel destination, including key attractions and best time to visit.", + Children = new List + { + new InlineAIPromptCommandDescriptor() + { + Id = "summarize-attractions", + Title = "Summarize Attractions", + Icon = SvgIcon.MapMarker, + Prompt = "List the main tourist attractions and landmarks for this destination." + }, + new InlineAIPromptCommandDescriptor() + { + Id = "summarize-food", + Title = "Summarize Food Culture", + Prompt = "Describe the local cuisine and must-try dishes for this destination." + } + } + }, + new InlineAIPromptCommandDescriptor() + { + Id = "travelTips", + Title = "Travel Tips", + Icon = SvgIcon.AggregateFields, + Prompt = "List useful travel tips for visiting this destination, such as transportation, cultural etiquette, and safety advice." + } + }; + + private List TravelDestinations { get; set; } = new() + { + "Tokyo, Japan", + "Paris, France", + "New York City, USA" + }; + + private async Task OnCommandExecute(InlineAIPromptCommandExecuteEventArgs args) + { + await Task.Delay(500); + args.Output = $"AI-generated content for: {args.Command.Title} ({PromptContext})"; + } + + private async Task ShowPromptAsync(MouseEventArgs e, string destination) + { + PromptContext = destination; + await InlinePromptRef!.ShowAsync(e.ClientX, e.ClientY); + } + + private void OnPromptRequest(InlineAIPromptPromptRequestEventArgs args) + { + args.Output = $"General AI assistance for: {PromptContext}"; + } +} + + +```` + +## InlineAIPrompt Reference + +Use the component reference to execute the following methods. + +| Method | Description | +|-------------|-------------| +| `Refresh` | Re-renders the component. | +| `ShowAsync` | Shows the inline prompt at defined coordinates. Accepts two parameters: X and Y coordinates to position the popup. | +| `HideAsync` | Hides the Inline AI Prompt. | + +## See Also + +* [Live Demo: InlineAIPrompt](https://demos.telerik.com/blazor-ui/inlineaiprompt/overview) \ No newline at end of file diff --git a/components/inlineaiprompt/streaming.md b/components/inlineaiprompt/streaming.md new file mode 100644 index 000000000..0654a27bf --- /dev/null +++ b/components/inlineaiprompt/streaming.md @@ -0,0 +1,133 @@ +--- +title: Streaming +page_title: InlineAIPrompt Streaming +description: Streaming in the InlineAIPrompt for Blazor. +slug: inlineaiprompt-streaming +tags: telerik,blazor,inlineaiprompt,streaming +published: True +position: 5 +--- + +# Streaming AI Responses with InlineAIPrompt + +The Blazor InlineAIPrompt component supports streaming responses, allowing users to see AI-generated content as it is being produced. This feature improves the user experience by providing immediate feedback and a more interactive interface. + +Streaming is particularly useful when: + +* Working with long-form AI responses that take more time to generate. +* Creating inline editing interfaces where users expect real-time feedback. +* Integrating with AI services that support chunked responses. +* Enhancing user engagement in contextual AI assistance scenarios. + +## Configuration + +To enable streaming in the InlineAIPrompt component, follow these steps: + +1. Handle the [`OnPromptRequest`](slug:inlineaiprompt-events#onpromptrequest) event to start streaming output. When the user sends a prompt, the `OnPromptRequest` event is triggered. In the event handler, set up your AI model streaming logic and call the `AppendOutput` method on the TelerikInlineAIPrompt reference to update the output as new data arrives. +2. Handle the [`OnPromptRequestStop`](slug:slug:inlineaiprompt-events#onpromptrequeststop) event to stop streaming. +This event is fired when the user clicks the Stop Generation button. You can use it to cancel the AI request. + +When implementing real AI model streaming logic: + +* Replace the sample `OutputChunks` loop with your actual AI model streaming code. +* Each time a new piece of response arrives from the AI model, call `AppendOutput` to update the InlineAIPrompt output area. +* If the user clicks the Stop Generation button, cancel the AI request in `OnPromptRequestStop`. + +## Example + +>caption Using InlineAIPrompt streaming + +````Razor +@using System.Threading + +
+ @foreach (var destination in TravelDestinations) + { + + @destination + + } +
+ + + + + + + +@code { + private string UserPrompt { get; set; } = string.Empty; + private string PromptContext { get; set; } = string.Empty; + private TelerikInlineAIPrompt? InlinePromptRef { get; set; } + private CancellationTokenSource? CancellationTokenSource { get; set; } + + private async Task OnPromptRequestStopAsync() + { + await CancellationTokenSource!.CancelAsync(); + } + + private List TravelDestinations { get; set; } = new() + { + "Paris, France", + "Kyoto, Japan", + "New York City, USA" + }; + + private List OutputChunks { get; set; } = new() + { + "Welcome to your travel guide! \n\n", + "Paris offers the Eiffel Tower, charming cafés, and world-class museums. \n\n", + "Don’t miss a day trip to Versailles for breathtaking gardens and history. \n\n", + }; + + private async Task OnDestinationContextMenuAsync(MouseEventArgs e, string destination) + { + PromptContext = destination; + await InlinePromptRef!.ShowAsync(e.ClientX, e.ClientY); + } + + private async Task OnPromptRequestAsync(InlineAIPromptPromptRequestEventArgs args) + { + CancellationTokenSource = new CancellationTokenSource(); + foreach (var chunk in OutputChunks) + { + InlinePromptRef!.AppendOutput(chunk); + await Task.Delay(1000, CancellationTokenSource.Token); + } + } +} + + +```` \ No newline at end of file diff --git a/docs-builder.yml b/docs-builder.yml index b29b20f0d..4a5ee2e79 100644 --- a/docs-builder.yml +++ b/docs-builder.yml @@ -366,8 +366,10 @@ meta: title: Popup "*appbar": title: AppBar - "*aiprompt": + "*/aiprompt": title: AIPrompt + "*inlineaiprompt": + title: InlineAIPrompt "*gauges/arc": title: Arc "*spreadsheet":