diff --git a/components/aiprompt/events.md b/components/aiprompt/events.md index 8e690d8c0f..97e6f24477 100644 --- a/components/aiprompt/events.md +++ b/components/aiprompt/events.md @@ -26,36 +26,7 @@ To define the available output actions, set the `OutputActions` parameter to a l 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."; - } -} -```` +See the [example below](#example). ## OnPromptRequest @@ -108,9 +79,9 @@ The `PromptChanged` event fires when the user changes the prompt text. Use the e @@ -133,6 +104,14 @@ The `PromptChanged` event fires when the user changes the prompt text. Use the e }, }; + 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() { Name = "Thumbs Up", Icon = SvgIcon.ThumbUp }, + new AIPromptOutputActionDescriptor() { Name = "Thumbs Down", Icon = SvgIcon.ThumbDown } + }; + private void OnPromptRequestHandler(AIPromptPromptRequestEventArgs args) { // The example uses dummy data intentionally. Replace the hard-coded string with a call to your AI API. @@ -145,9 +124,10 @@ The `PromptChanged` event fires when the user changes the prompt text. Use the e args.Output = "Nisl pretium fusce id velit ut tortor pretium. A pellentesque sit amet porttitor eget dolor. Lectus mauris ultrices eros in cursus turpis massa tincidunt."; } - private void OnOutputRateHandler(AIPromptOutputRateEventArgs args) + private void OnOutputActionClick(AIPromptOutputActionClickEventArgs args) { - // The example uses dummy data intentionally. Replace the hard-coded string with a call to your AI API. + // Handle the output action click event + Console.WriteLine($"Action clicked: {args.Action.Name}"); } private void OnPromptChanged(string prompt) @@ -155,7 +135,8 @@ The `PromptChanged` event fires when the user changes the prompt text. Use the e Prompt = prompt; } } - ```` -* [Live Demo: AIPrompt Overview](https://demos.telerik.com/blazor-ui/aiprompt/overview) \ No newline at end of file +## See Also + + * [Live Demo: AIPrompt](https://demos.telerik.com/blazor-ui/aiprompt/overview) \ No newline at end of file diff --git a/components/aiprompt/views/output.md b/components/aiprompt/views/output.md index 6c9740903b..3a518bb3aa 100644 --- a/components/aiprompt/views/output.md +++ b/components/aiprompt/views/output.md @@ -12,7 +12,7 @@ position: 20 The Output view shows the responses generated by the underlying AI service. Each response renders in its dedicated output card and provides two options to the user—to copy the content of the response or to retry the request. The Output view is activated through interaction—once the user fills out a prompt within the Prompt view and requests a response, the Output view will become active. -If the `ShowOutputRating` is enabled on the component level, the output card will also feature two additional options-to upvote or downvote the response. To handle this interaction, you can use the `OnOutputRate` event. For more information on how to handle the event, refer to the [AIPrompt events](slug:aiprompt-events) article. +If `OutputActions` are configured at the component level, the output card also features two additional options to upvote and downvote the response. To handle this interaction, you can use the `OnOutputActionClick` event. For more information on how to handle the event, refer to the [AIPrompt events](slug:aiprompt-events) article. By default, the Output view is rendered and is part of the predefined views. However, if you provide a render fragment of type `AIPromptViews` to the `TelerikAIPrompt` tag, you override the default rendering, meaning you must explicitly add `AIPromptOutputView` tag within it. @@ -31,10 +31,13 @@ By default, the Output view is rendered and is part of the predefined views. How } ```` ->caption Use the `ShowOutputRating` to include visuals related to upvoting or downvoting a specific output. +>caption Use `OutputActions` to include visuals related to upvoting or downvoting a specific output. ````RAZOR - + @@ -44,10 +47,25 @@ By default, the Output view is rendered and is part of the predefined views. How @code { private string Prompt { get; set; } - private void OnOutputRateHandler(AIPromptOutputRateEventArgs args) + private void OnOutputActionClick(AIPromptOutputActionClickEventArgs args) { - // Handle the output rate event here + // Handle the output action click event + Console.WriteLine($"Action clicked: {args.Action.Name}"); } + + private void OnPromptRequestHandler(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. Vel pretium lectus quam id leo in."; + } + + 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() { Name = "Thumbs Up", Icon = SvgIcon.ThumbUp }, + new AIPromptOutputActionDescriptor() { Name = "Thumbs Down", Icon = SvgIcon.ThumbDown } + }; } ````