Skip to content

Commit 06ccb07

Browse files
xristianstefanovxristianstefanov
authored
docs(InlineAiPrompt): add inline ai prompt documentation (#3174)
* docs(InlineAiPrompt): add inline ai prompt documentation * chore(InlineAiPrompt): address all comments
1 parent 3440bf0 commit 06ccb07

File tree

4 files changed

+604
-1
lines changed

4 files changed

+604
-1
lines changed

‎components/inlineaiprompt/events.md

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
---
2+
title: Events
3+
page_title: InlineAIPrompt - Events
4+
description: Events in the InlineAIPrompt for Blazor.
5+
slug: inlineaiprompt-events
6+
tags: telerik,blazor,inlineaiprompt,events
7+
published: true
8+
position: 10
9+
---
10+
11+
# InlineAIPrompt Events
12+
13+
This article describes the events of the Telerik InlineAIPrompt for Blazor:
14+
15+
* [`OnOutputActionClick`](#onoutputactionclick)
16+
* [`OnPromptRequest`](#onpromptrequest)
17+
* [`OnPromptRequestStop`](#onpromptrequeststop)
18+
* [`OnCommandExecute`](#oncommandexecute)
19+
* [`PromptChanged`](#promptchanged)
20+
21+
## OnOutputActionClick
22+
23+
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.
24+
25+
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.
26+
27+
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).
28+
29+
## OnPromptRequest
30+
31+
The `OnPromptRequest` event fires when the user clicks on the **Generate** button within the Prompt view or retries a prompt from the Output view.
32+
33+
The event handler receives an argument of type [`InlineAIPromptPromptRequestEventArgs` API reference](slug:Telerik.Blazor.Components.InlineAIPromptPromptRequestEventArgs). See the [example below](#example).
34+
35+
> 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.
36+
37+
## OnPromptRequestStop
38+
39+
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.
40+
41+
The event handler receives no arguments.
42+
43+
## OnCommandExecute
44+
45+
The `OnCommandExecute` event fires when the user clicks on a command within the Commands view.
46+
47+
The event handler receives an argument of type [`InlineAIPromptCommandExecuteEventArgs` API reference](slug:Telerik.Blazor.Components.InlineAIPromptCommandExecuteEventArgs). See the [example below](#example).
48+
49+
## PromptChanged
50+
51+
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.
52+
53+
## Example
54+
55+
>caption Using InlineAIPrompt events
56+
57+
````Razor
58+
<div class="genres-container">
59+
@foreach (var genre in MovieGenres)
60+
{
61+
<TelerikButton Class="genre-card"
62+
OnClick="@((MouseEventArgs e) => OnGenreContextMenuAsync(e, genre))">
63+
@genre
64+
</TelerikButton>
65+
}
66+
</div>
67+
68+
<TelerikInlineAIPrompt @ref="@InlinePromptRef"
69+
@bind-Prompt="@UserPrompt"
70+
EnableSpeechToText="true"
71+
OnPromptRequest="@OnPromptRequest"
72+
OnCommandExecute="@OnCommandExecute"
73+
OnPromptRequestStop="@OnPromptRequestStop"
74+
OnOutputActionClick="@OnOutputActionClick"
75+
Commands="@Commands"
76+
OutputActions="@OutputActions"
77+
PromptContext="@PromptContext">
78+
</TelerikInlineAIPrompt>
79+
80+
<div id="events-log">
81+
@((MarkupString)EventsLog)
82+
</div>
83+
84+
@code {
85+
private int PromptRequestsCount { get; set; } = 0;
86+
private string EventsLog { get; set; } = string.Empty;
87+
private string UserPrompt { get; set; } = string.Empty;
88+
private string PromptContext { get; set; } = string.Empty;
89+
private TelerikInlineAIPrompt? InlinePromptRef { get; set; }
90+
91+
private List<InlineAIPromptCommandDescriptor> Commands { get; set; } = new()
92+
{
93+
new InlineAIPromptCommandDescriptor()
94+
{
95+
Id = "recommend",
96+
Title = "Recommend Movies",
97+
Icon = SvgIcon.Sparkles,
98+
Prompt = "Suggest top-rated movies in this genre.",
99+
Children = new List<InlineAIPromptCommandDescriptor>
100+
{
101+
new InlineAIPromptCommandDescriptor()
102+
{
103+
Id = "recommend-classics",
104+
Title = "Classic Picks",
105+
Icon = SvgIcon.Star,
106+
Prompt = "List timeless classics in this genre."
107+
},
108+
new InlineAIPromptCommandDescriptor()
109+
{
110+
Id = "recommend-new",
111+
Title = "New Releases",
112+
Icon = SvgIcon.Calendar,
113+
Prompt = "List recent must-watch releases in this genre."
114+
}
115+
}
116+
},
117+
new InlineAIPromptCommandDescriptor()
118+
{
119+
Id = "trivia",
120+
Title = "Genre Trivia",
121+
Icon = SvgIcon.AggregateFields,
122+
Prompt = "Share fun facts and trivia about this movie genre."
123+
}
124+
};
125+
126+
private List<InlineAIPromptOutputActionDescriptor> OutputActions { get; set; } = new()
127+
{
128+
new InlineAIPromptOutputActionDescriptor()
129+
{
130+
Text = "Mark as Favorite",
131+
Icon = SvgIcon.Heart,
132+
Title = "Save this recommendation to favorites",
133+
Enabled = true,
134+
},
135+
new InlineAIPromptOutputActionDescriptor
136+
{
137+
Name = "Retry",
138+
},
139+
new InlineAIPromptOutputActionDescriptor
140+
{
141+
Name = "Copy",
142+
},
143+
new InlineAIPromptOutputActionDescriptor
144+
{
145+
Name = "Discard",
146+
}
147+
};
148+
149+
private List<string> MovieGenres { get; set; } = new()
150+
{
151+
"Action",
152+
"Comedy",
153+
"Drama",
154+
"Science Fiction"
155+
};
156+
157+
private async Task OnGenreContextMenuAsync(MouseEventArgs e, string genre)
158+
{
159+
PromptContext = genre;
160+
await InlinePromptRef!.ShowAsync(e.ClientX, e.ClientY);
161+
}
162+
163+
private async Task OnPromptRequest(InlineAIPromptPromptRequestEventArgs args)
164+
{
165+
await Task.Delay(200);
166+
args.Output = $"AI suggestion for prompt #{PromptRequestsCount++} in {PromptContext}";
167+
EventsLog += $"OnPromptRequest fired <br />";
168+
}
169+
170+
private async Task OnCommandExecute(InlineAIPromptCommandExecuteEventArgs args)
171+
{
172+
await Task.Delay(200);
173+
args.Output = $"AI executed: {args.Command.Title} for {PromptContext}";
174+
EventsLog += $"OnCommandExecute fired <br />";
175+
}
176+
177+
private void OnPromptRequestStop()
178+
{
179+
EventsLog += $"OnPromptRequestStop: Prompt request stopped. <br />";
180+
}
181+
182+
private void OnOutputActionClick(InlineAIPromptOutputActionClickEventArgs args)
183+
{
184+
EventsLog += $"OnOutputActionClick fired <br />";
185+
}
186+
}
187+
188+
<style>
189+
.genres-container {
190+
display: flex;
191+
flex-wrap: wrap;
192+
gap: 1rem;
193+
padding: 1rem;
194+
justify-content: center;
195+
}
196+
197+
.genre-card {
198+
padding: 1rem 1.5rem;
199+
background-color: #f9f9f9;
200+
border: 1px solid #ddd;
201+
border-radius: 8px;
202+
font-family: 'Segoe UI', sans-serif;
203+
font-size: 1rem;
204+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
205+
transition: transform 0.2s ease;
206+
min-width: 200px;
207+
text-align: center;
208+
cursor: pointer;
209+
}
210+
211+
.genre-card:hover {
212+
transform: translateY(-5px);
213+
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
214+
}
215+
216+
#events-log {
217+
padding: 1rem;
218+
font-family: monospace;
219+
font-size: 0.9rem;
220+
border-top: 1px solid #ddd;
221+
}
222+
</style>
223+
````

0 commit comments

Comments
 (0)