chore(InlineAiPrompt): address all comments

xristianstefanov · xristianstefanov · commit 83a739a8a899 · 2025-08-12T15:20:23.000+03:00
diff --git a/components/inlineaiprompt/events.md b/components/inlineaiprompt/events.md
@@ -10,7 +10,7 @@ position: 10
 
 # InlineAIPrompt Events
 
-This article explains the events available in the Telerik InlineAIPrompt for Blazor:
+This article describes the events of the Telerik InlineAIPrompt for Blazor:
 
 * [`OnOutputActionClick`](#onoutputactionclick)
 * [`OnPromptRequest`](#onpromptrequest)
@@ -20,49 +20,31 @@ This article explains the events available in the Telerik InlineAIPrompt for Bla
 
 ## 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.
+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`, 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 [`InlineAIPromptOutputActionClickEventArgs` API reference](slug:Telerik.Blazor.Components.InlineAIPromptOutputActionClickEventArgs).
+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`](slug:Telerik.Blazor.Components.InlineAIPromptPromptRequestEventArgs). See the [example below](#example).
-
-@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `Prompt` | `string` | The prompt text of the request. |
-| `Output` | `string` | The output of the request. The output is based on the prompt text. |
-| `IsCancelled` | `bool` | Whether the event is cancelled and the built-in action is prevented. |
-| `OutputItem` | `InlineAIPromptOutputItemDescriptor` | The output item. This property will be populated only when the user retries an existing output. See [`InlineAIPromptOutputItemDescriptor`](slug:Telerik.Blazor.Components.InlineAIPromptOutputItemDescriptor). |
+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 an `EventCallback` with no arguments.
+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`](slug:Telerik.Blazor.Components.InlineAIPromptCommandExecuteEventArgs). See the [example below](#example).
-
-@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `Command` | `AIPromptCommandDescriptor` | The executed command. |
-| `Output` | `string` | The output based on the executed command. |
-| `IsCancelled` | `bool` | Whether the event is cancelled and the built-in action is prevented. |
-| `OutputItem` | `InlineAIPromptOutputItemDescriptor` | The output item. This property will be populated only when the user retries an existing output. See [`InlineAIPromptOutputItemDescriptor`](slug:Telerik.Blazor.Components.InlineAIPromptOutputItemDescriptor). |
+The event handler receives an argument of type [`InlineAIPromptCommandExecuteEventArgs` API reference](slug:Telerik.Blazor.Components.InlineAIPromptCommandExecuteEventArgs). See the [example below](#example).
 
 ## PromptChanged
 
@@ -76,11 +58,10 @@ The `PromptChanged` event fires when the user changes the prompt text. Use the e
 <div class="genres-container">
     @foreach (var genre in MovieGenres)
     {
-        <div class="genre-card"
-             @onclick="@((MouseEventArgs e) => OnGenreContextMenuAsync(e, genre))"
-             @onclick:preventDefault="true">
+        <TelerikButton Class="genre-card"
+                       OnClick="@((MouseEventArgs e) => OnGenreContextMenuAsync(e, genre))">
             @genre
-        </div>
+        </TelerikButton>
     }
 </div>
 
@@ -103,9 +84,9 @@ The `PromptChanged` event fires when the user changes the prompt text. Use the e
 @code {
     private int PromptRequestsCount { get; set; } = 0;
     private string EventsLog { get; set; } = string.Empty;
-    private string UserPrompt { get; set; }
-    private string PromptContext { get; set; }
-    private TelerikInlineAIPrompt InlinePromptRef { get; set; }
+    private string UserPrompt { get; set; } = string.Empty;
+    private string PromptContext { get; set; } = string.Empty;
+    private TelerikInlineAIPrompt? InlinePromptRef { get; set; }
 
     private List<InlineAIPromptCommandDescriptor> Commands { get; set; } = new()
     {
@@ -176,19 +157,19 @@ The `PromptChanged` event fires when the user changes the prompt text. Use the e
     private async Task OnGenreContextMenuAsync(MouseEventArgs e, string genre)
     {
         PromptContext = genre;
-        await InlinePromptRef.ShowAsync(e.ClientX, e.ClientY);
+        await InlinePromptRef!.ShowAsync(e.ClientX, e.ClientY);
     }
 
     private async Task OnPromptRequest(InlineAIPromptPromptRequestEventArgs args)
     {
-        await Task.Delay(1000);
+        await Task.Delay(200);
         args.Output = $"AI suggestion for prompt #{PromptRequestsCount++} in {PromptContext}";
         EventsLog += $"OnPromptRequest fired <br />";
     }
 
     private async Task OnCommandExecute(InlineAIPromptCommandExecuteEventArgs args)
     {
-        await Task.Delay(1000);
+        await Task.Delay(200);
         args.Output = $"AI executed: {args.Command.Title} for {PromptContext}";
         EventsLog += $"OnCommandExecute fired <br />";
     }
diff --git a/components/inlineaiprompt/overview.md b/components/inlineaiprompt/overview.md
@@ -10,28 +10,26 @@ position: 0
 
 # Blazor InlineAIPrompt Overview
 
-The UI for Blazor InlineAIPrompt is a popup-based component that lets you interact with AI language models right inside your content.
+The Telerik InlineAIPrompt for Blazor is a popup-based component that lets you interact with AI language models right inside your content.
 
-It 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.
+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 `<TelerikInlineAIPrompt>` 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
-4. (optional) Set the `PromptContext` parameter
 
 >caption Telerik Blazor InlineAIPrompt
 
 ````Razor
 <div class="products-container">
     @foreach (var product in Products)
     {
-        <div class="product-card"
-             @onclick="@((MouseEventArgs e) => ShowPromptAsync(e, product))"
-             @onclick:preventDefault="true">
+        <TelerikButton Class="product-card"
+                       OnClick="@((MouseEventArgs e) => ShowPromptAsync(e, product))">
             @product
-        </div>
+        </TelerikButton>
     }
 </div>
 
@@ -42,9 +40,9 @@ It provides a simple and focused way to send prompts and get responses from AI w
 </TelerikInlineAIPrompt>
 
 @code {
-    private string UserPrompt { get; set; }
-    private string PromptContext { get; set; }
-    private TelerikInlineAIPrompt InlinePromptRef { get; set; }
+    private string UserPrompt { get; set; } = string.Empty;
+    private string PromptContext { get; set; } = string.Empty;
+    private TelerikInlineAIPrompt? InlinePromptRef { get; set; }
 
     private List<string> Products { get; set; } = new()
     {
@@ -56,12 +54,12 @@ It provides a simple and focused way to send prompts and get responses from AI w
     private async Task ShowPromptAsync(MouseEventArgs e, string product)
     {
         PromptContext = product;
-        await InlinePromptRef.ShowAsync(e.ClientX, e.ClientY);
+        await InlinePromptRef!.ShowAsync(e.ClientX, e.ClientY);
     }
 
     private void OnPromptRequest(InlineAIPromptPromptRequestEventArgs args)
     {
-        args.Output = $"AI assistance for: {PromptContext}";
+        args.Output = $"AI response for: {PromptContext}";
     }
 }
 
@@ -87,44 +85,30 @@ It provides a simple and focused way to send prompts and get responses from AI w
 
 ## Streaming
 
-The InlineAIPrompt component supports streaming responses, letting users view AI-generated content in real time as it’s created. [Read more about the Blazor InlineAIPrompt streaming...](slug:inlineaiprompt-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 and processes effectively. [Read more about the Blazor InlineAIPrompt events...](slug:inlineaiprompt-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 Parameters
+## InlineAIPrompt API
 
-The following table lists the InlineAIPrompt parameters. Also check the [InlineAIPrompt API Reference](slug:Telerik.Blazor.Components.TelerikInlineAIPrompt) for a full list of all properties, methods and events.
-
-@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
-
-| Parameter | Type and Default&nbsp;Value | Description |
-| --- | --- | --- |
-| `Class` | `string` | `The class that is rendered on the .k-prompt element.` |
-| `Commands` | `List<AIPromptCommandDescriptor>` | `Configures predefined commands for the component.` |
-| `EnableSpeechToText` | `bool` | `Specifies whether to enable speech to text functionality.` |
-| `OutputActions` | `List<AIPromptOutputActionDescriptor>` | `Defines the output actions.` |
-| `Placeholder` | `string` | `Placeholder text for the input field.` |
-| `Prompt` | `string` | `The value of the text field and the prompt that is sent to the AI service.` |
-| `PromptContext` | `string` | `Defines the additional context that is passed with the input/command prompt and system prompt.` |
-| `SystemPrompt` | `string` | `Defines the system prompt that is used when the component is integrated with MEAI.` |
+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 itself and its speech to text button. To configure the options, declare a  `<InlineAIPromptPopupSettings>` or `InlineAIPromptSpeechToTextButtonSettings` tag inside a `<InlineAIPromptSettings>` tag.
+The InlineAIPrompt exposes settings for its popup and its embedded [Speech to Text Button](slug:speechtotextbutton-overview). To configure the options, declare a `<InlineAIPromptPopupSettings>` or `<InlineAIPromptSpeechToTextButtonSettings>` tag inside `<InlineAIPromptSettings>`.
 
-The InlineAIPrompt component also exposes an option to set predefined commands. 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`.
+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
 <div class="destinations-container">
     @foreach (var destination in TravelDestinations)
     {
-        <div class="destination-card"
-             @onclick="@((MouseEventArgs e) => ShowPromptAsync(e, destination))"
-             @onclick:preventDefault="true">
+        <TelerikButton Class="destination-card"
+             OnClick="@((MouseEventArgs e) => ShowPromptAsync(e, destination))">
             @destination
-        </div>
+        </TelerikButton>
     }
 </div>
 
@@ -153,9 +137,9 @@ The InlineAIPrompt component also exposes an option to set predefined commands.
 </TelerikInlineAIPrompt>
 
 @code {
-    private string UserPrompt { get; set; }
-    private string PromptContext { get; set; }
-    private TelerikInlineAIPrompt InlinePromptRef { get; set; }
+    private string UserPrompt { get; set; } = string.Empty;
+    private string PromptContext { get; set; } = string.Empty;
+    private TelerikInlineAIPrompt? InlinePromptRef { get; set; }
 
     private List<InlineAIPromptCommandDescriptor> Commands { get; set; } = new()
     {
@@ -207,7 +191,7 @@ The InlineAIPrompt component also exposes an option to set predefined commands.
     private async Task ShowPromptAsync(MouseEventArgs e, string destination)
     {
         PromptContext = destination;
-        await InlinePromptRef.ShowAsync(e.ClientX, e.ClientY);
+        await InlinePromptRef!.ShowAsync(e.ClientX, e.ClientY);
     }
 
     private void OnPromptRequest(InlineAIPromptPromptRequestEventArgs args)
@@ -239,10 +223,10 @@ The InlineAIPrompt component also exposes an option to set predefined commands.
         cursor: pointer;
     }
 
-    .destination-card:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-    }
+        .destination-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+        }
 </style>
 ````
 
@@ -254,7 +238,7 @@ Use the component reference to execute the following methods.
 |-------------|-------------|
 | `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 prompt. |
+| `HideAsync` | Hides the Inline AI Prompt. |
 
 ## See Also
 
diff --git a/components/inlineaiprompt/streaming.md b/components/inlineaiprompt/streaming.md
@@ -10,11 +10,11 @@ position: 5
 
 # Streaming AI Responses with InlineAIPrompt
 
-The UI for 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.
+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 several seconds to generate.
+* 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.
@@ -30,7 +30,7 @@ This event is fired when the user clicks the Stop Generation button. You can use
 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 text arrives from the AI model, call `AppendOutput` to update the InlineAIPrompt output area.
+* 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
@@ -43,11 +43,10 @@ When implementing real AI model streaming logic:
 <div class="destinations-container">
     @foreach (var destination in TravelDestinations)
     {
-        <div class="destination-card"
-             @onclick="@((MouseEventArgs e) => OnDestinationContextMenuAsync(e, destination))"
-             @onclick:preventDefault="true">
+        <TelerikButton Class="destination-card"
+                       OnClick="@((MouseEventArgs e) => OnDestinationContextMenuAsync(e, destination))">
             @destination
-        </div>
+        </TelerikButton>
     }
 </div>
 
@@ -56,17 +55,20 @@ When implementing real AI model streaming logic:
                        OnPromptRequest="@OnPromptRequestAsync"
                        OnPromptRequestStop="@OnPromptRequestStopAsync"
                        PromptContext="@PromptContext">
+    <InlineAIPromptSettings>
+        <InlineAIPromptPopupSettings Width="400px" />
+    </InlineAIPromptSettings>
 </TelerikInlineAIPrompt>
 
 @code {
-    private string UserPrompt { get; set; }
-    private string PromptContext { get; set; }
-    private TelerikInlineAIPrompt InlinePromptRef { get; set; }
-    private CancellationTokenSource CancellationTokenSource { get; set; }
+    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();
+        await CancellationTokenSource!.CancelAsync();
     }
 
     private List<string> TravelDestinations { get; set; } = new()
@@ -86,15 +88,15 @@ When implementing real AI model streaming logic:
     private async Task OnDestinationContextMenuAsync(MouseEventArgs e, string destination)
     {
         PromptContext = destination;
-        await InlinePromptRef.ShowAsync(e.ClientX, e.ClientY);
+        await InlinePromptRef!.ShowAsync(e.ClientX, e.ClientY);
     }
 
     private async Task OnPromptRequestAsync(InlineAIPromptPromptRequestEventArgs args)
     {
         CancellationTokenSource = new CancellationTokenSource();
         foreach (var chunk in OutputChunks)
         {
-            InlinePromptRef.AppendOutput(chunk);
+            InlinePromptRef!.AppendOutput(chunk);
             await Task.Delay(1000, CancellationTokenSource.Token);
         }
     }
