docs(SmartPasteButton): add smartpaste button docs

aicomponents.md

@@ -36,6 +36,14 @@ Explore the powerful AI-enhanced components and features in Telerik UI for Blazo
         darkSrc="./images/aicomponents/InlineAIPrompt_Dark_Large.svg"
         description="The Telerik UI for Blazor Inline AIPrompt component delivers contextual AI suggestions within the UI.">
     </article-card>
+    <article-card
+        href="/components/smartpastebutton/overview"
+        src="./images/aicomponents/SmartPasteButton_Light_Large.svg"
+        title="SmartPasteButton"
+        subTitle="UI Component"
+        darkSrc="./images/aicomponents/SmartPasteButton_Dark_Large.svg"
+        description="The Telerik UI for Blazor SmartPasteButton component uses AI to parse unstructured text and automatically populate form fields.">
+    </article-card>
     <article-card
         href="/components/grid/smart-ai-features/overview"
         src="./images/aicomponents/AI_Data_Operations_Light_Large.svg"

components/smartpastebutton/events.md

@@ -0,0 +1,156 @@
+---
+title: Events
+page_title: SmartPasteButton - Events
+description: Events of the SmartPasteButton for Blazor.
+slug: smartpastebutton-events
+tags: telerik, blazor, smartpastebutton, events, ai
+published: True
+position: 20
+components: ["smartpastebutton"]
+---
+
+# SmartPasteButton Events
+
+This article explains the events available in the Telerik SmartPasteButton for Blazor:
+
+* [OnRequestStart](#onrequeststart)
+* [OnRequestStop](#onrequeststop)
+
+## OnRequestStart
+
+The `OnRequestStart` event fires before sending the Smart Paste request to the AI service. This event allows you to inspect and modify the content and form fields that will be processed by the AI.
+
+The event handler receives an argument of type `SmartPasteButtonRequestStartEventArgs` with the following properties:
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `Content` | `string` | The content to be processed by the Smart Paste Button. Contains the clipboard content of the user. |
+| `FormFields` | `SmartPasteFormField[]` | Array of form fields that should be populated with the AI response using the content provided. |
+
+>caption Handle the OnRequestStart event to customize AI processing
+
+````Razor
+@using System.Net.Http.Json
+@using Telerik.AI.SmartComponents.Extensions
+@inject HttpClient HttpClient
+@inject IJSRuntime JS
+
+<div style="display: flex; max-width: 600px; margin-bottom: 16px;">
+    <div style="flex: 1; margin-right: 16px;">
+        <p><strong>Sample Book Data (copy this and click Smart Paste):</strong></p>
+        <TelerikTextArea Value="@SampleText" Rows="3" ReadOnly="true" />
+        <TelerikButton OnClick="@CopySampleText" Icon="SvgIcon.Copy">Copy</TelerikButton>
+    </div>
+
+    <TelerikForm Model="@Model" OnSubmit="@HandleSubmit">
+        <FormItems>
+            <FormItem Field="@nameof(BookModel.Title)" LabelText="Title">
+                <Template>
+                    <TelerikTextBox Id="title" @bind-Value="Model.Title" />
+                </Template>
+            </FormItem>
+
+            <FormItem Field="@nameof(BookModel.Author)" LabelText="Author">
+                <Template>
+                    <TelerikTextBox Id="author" @bind-Value="Model.Author" />
+                </Template>
+            </FormItem>
+
+            <FormItem Field="@nameof(BookModel.ISBN)" LabelText="ISBN">
+                <Template>
+                    <TelerikTextBox Id="isbn" @bind-Value="Model.ISBN" />
+                </Template>
+            </FormItem>
+
+            <FormItem Field="@nameof(BookModel.Publisher)" LabelText="Publisher">
+                <Template>
+                    <TelerikTextBox Id="publisher" @bind-Value="Model.Publisher" />
+                </Template>
+            </FormItem>
+        </FormItems>
+
+        <FormButtons>
+            <TelerikSmartPasteButton @ref="@SmartPasteButtonRef"
+                                     EnableChatClient="false"
+                                     Enabled="@(!Pasting)"
+                                     OnRequestStart="@HandleRequestStart">
+                Smart Paste
+            </TelerikSmartPasteButton>
+        </FormButtons>
+    </TelerikForm>
+</div>
+
+@code {
+    private TelerikSmartPasteButton SmartPasteButtonRef { get; set; }
+    private BookModel Model { get; set; } = new();
+    private bool Pasting { get; set; }
+
+    private string SampleText =
+        @"The Great Gatsby
+F. Scott Fitzgerald
+978-0743273565
+Scribner";
+
+    private async Task CopySampleText()
+    {
+        await JS.InvokeVoidAsync("navigator.clipboard.writeText", SampleText);
+    }
+
+    private void HandleSubmit()
+    {
+        Console.WriteLine(System.Text.Json.JsonSerializer.Serialize(Model));
+    }
+
+    private async Task HandleRequestStart(SmartPasteButtonRequestStartEventArgs args)
+    {
+        Pasting = true;
+
+        var payload = new
+        {
+            content = args.Content,
+            formFields = args.FormFields?.Select(f => new
+            {
+                field = f.Field,
+                description = f.Description,
+                type = f.Type,
+                allowedValues = f.AllowedValues
+            })
+        };
+
+        var response = await HttpClient.PostAsJsonAsync(
+            "https://sitdemos.telerik.com/service/v2/ai/smartpaste/smartpaste",
+            payload
+        );
+
+        response.EnsureSuccessStatusCode();
+
+        var smartPasteResponse = await response.Content.ReadFromJsonAsync<SmartPasteResponse>();
+
+        if (smartPasteResponse?.FieldValues?.Count > 0)
+        {
+            await SmartPasteButtonRef.PasteAsync(smartPasteResponse);
+        }
+        Pasting = false;
+    }
+
+    public class BookModel
+    {
+        public string Title { get; set; }
+        public string Author { get; set; }
+        public string ISBN { get; set; }
+        public string Publisher { get; set; }
+    }
+}
+````
+
+## OnRequestStop
+
+The `OnRequestStop` event fires when the `IChatClient` is enabled and the stop state of the button is triggered. This event is only fired when `EnableChatClient` is set to `true`.
+
+This event allows you to handle scenarios where the AI processing needs to be interrupted or when the user cancels the operation.
+
+## See Also
+
+* [SmartPasteButton Live Events Demo](https://demos.telerik.com/blazor-ui/smartpastebutton/events)
+* [SmartPasteButton Overview](slug:smartpastebutton-overview)
+* [SmartPasteButton Validation](slug:smartpastebutton-validation)

components/smartpastebutton/overview.md

@@ -0,0 +1,223 @@
+---
+title: Overview
+page_title: SmartPasteButton Overview
+description: The Blazor SmartPasteButton is an AI-powered utility that parses unstructured text data and uses the result to populate form fields automatically.
+slug: smartpastebutton-overview
+tags: telerik, blazor, smartpastebutton, ai, forms, overview
+published: True
+position: 0
+components: ["smartpastebutton"]
+---
+
+# Blazor SmartPasteButton Overview
+
+The <a href="https://www.telerik.com/blazor-ui/smartpastebutton" target="_blank">UI for Blazor SmartPasteButton component</a> is an AI-powered utility designed to parse unstructured text data and use the result to populate form fields. It eliminates the "copy-paste-repeat" manual grind by using large language models to map raw text to specific data inputs.
+
+The SmartPasteButton integrates seamlessly with EditForm, TelerikForm, and native HTML forms.
+
+## Basic Usage
+
+### Configuration without IChatClient
+
+1. Use the `<TelerikSmartPasteButton>` tag to add the component to your razor page.
+
+2. Handle the `OnRequestStart` event to specify the AI endpoint that processes clipboard content. The SmartPasteButton automatically sends the clipboard text and detected form field metadata to this endpoint.
+
+4. Set the `EnableChatClient` to `false`. If enabled, the component will try to get a registered `IChatClient` service and use it to make the request.
+
+5. (optional) Add the `DataSmartPasteDescriptionAttribute` to your input components to provide context for the AI.
+
+>caption Example of using the SmartPasteButton without IChatClient service
+
+````Razor
+@using System.Net.Http.Json
+@using Telerik.AI.SmartComponents.Extensions
+@inject HttpClient HttpClient
+@inject IJSRuntime JS
+
+<div style="max-width: 600px; margin-bottom: 16px;">
+    <p><strong>Sample text (copy this and click Smart Paste):</strong></p>
+
+    <TelerikTextArea Value="@SampleText" Rows="3" ReadOnly="true" />
+
+    <div style="margin-top: 8px;">
+        <TelerikButton OnClick="@CopySampleText" Icon="SvgIcon.Copy">
+            Copy
+        </TelerikButton>
+    </div>
+</div>
+
+<TelerikForm Model="@Model" OnSubmit="@HandleSubmit">
+    <FormItems>
+        <FormItem Field="@nameof(ContactModel.FirstName)" LabelText="First Name">
+            <Template>
+                <TelerikTextBox Id="first-name" @bind-Value="Model.FirstName" />
+            </Template>
+        </FormItem>
+
+        <FormItem Field="@nameof(ContactModel.LastName)" LabelText="Last Name">
+            <Template>
+                <TelerikTextBox Id="last-name" @bind-Value="Model.LastName" />
+            </Template>
+        </FormItem>
+
+        <FormItem Field="@nameof(ContactModel.Email)" LabelText="Email">
+            <Template>
+                <TelerikTextBox Id="email" @bind-Value="Model.Email" />
+            </Template>
+        </FormItem>
+
+        <FormItem Field="@nameof(ContactModel.Phone)" LabelText="Phone">
+            <Template>
+                <TelerikTextBox Id="phone" @bind-Value="Model.Phone" />
+            </Template>
+        </FormItem>
+    </FormItems>
+
+    <FormButtons>
+        <TelerikSmartPasteButton @ref="@SmartPasteButtonRef"
+                                 EnableChatClient="false"
+                                 Enabled="@(!Pasting)"
+                                 OnRequestStart="@HandleRequestStart">
+            Smart Paste
+        </TelerikSmartPasteButton>
+    </FormButtons>
+</TelerikForm>
+
+
+@code {
+    private TelerikSmartPasteButton SmartPasteButtonRef { get; set; }
+    private ContactModel Model { get; set; } = new();
+    private bool Pasting { get; set; }
+
+    private string SampleText =
+        @"John Doe
+john.doe@example.com
++1 555 123 4567";
+
+    private async Task CopySampleText()
+    {
+        await JS.InvokeVoidAsync("navigator.clipboard.writeText", SampleText);
+    }
+
+    private void HandleSubmit()
+    {
+        Console.WriteLine(System.Text.Json.JsonSerializer.Serialize(Model));
+    }
+
+    private async Task HandleRequestStart(SmartPasteButtonRequestStartEventArgs args)
+    {
+        Pasting = true;
+        var payload = new
+        {
+            content = args.Content,
+            formFields = args.FormFields?.Select(f => new
+            {
+                field = f.Field,
+                description = f.Description,
+                type = f.Type,
+                allowedValues = f.AllowedValues
+            })
+        };
+
+        var response = await HttpClient.PostAsJsonAsync(
+            "https://sitdemos.telerik.com/service/v2/ai/smartpaste/smartpaste",
+            payload
+        );
+
+        response.EnsureSuccessStatusCode();
+
+        var smartPasteResponse =
+            await response.Content.ReadFromJsonAsync<SmartPasteResponse>();
+
+        if (smartPasteResponse?.FieldValues?.Count > 0)
+        {
+            await SmartPasteButtonRef.PasteAsync(smartPasteResponse);
+        }
+        Pasting = false;
+    }
+
+    public class ContactModel
+    {
+        public string FirstName { get; set; }
+        public string LastName  { get; set; }
+        public string Email     { get; set; }
+        public string Phone     { get; set; }
+    }
+}
+````
+
+### Configuration with IChatClient
+
+1. Use the `<TelerikSmartPasteButton>` tag to add the component to your razor page.
+
+2. Set the `ChatClientKey` to specify the key of the registered `IChatClient` service to be used by the SmartPasteButton if `EnableChatClient` is set to `true`.
+
+3. Register your `IChatClient`:
+
+````CSharp.skip-repl
+IChatClient gptChatClient = new AzureOpenAIClient(new Uri("https://blazor-models-ai-foundry.cognitiveservices.azure.com/"),
+                            new AzureKeyCredential("your API key here")).GetChatClient("gpt-4.1");
+
+services.AddKeyedChatClient("gpt-4.1", gptChatClient);
+````
+
+````Razor.skip-repl
+<TelerikSmartPasteButton ChatClientKey="gpt-4.1" />
+````
+
+## Events
+
+The SmartPasteButton fires events that you can handle to customize the AI processing workflow. [Read more about the SmartPasteButton events...](slug:smartpastebutton-events).
+
+## SmartPasteButton Parameters
+
+To review all available parameters for the SmartPasteButton component, see the [SmartPasteButton API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikSmartPasteButton#parameters).
+
+## SmartPasteButton Reference and Methods
+
+The SmartPasteButton component exposes several public methods that you can call from your code. For a full list and details, see the [SmartPasteButton API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikSmartPasteButton#methods).
+
+>caption Example of Calling a Method by Reference
+
+````RAZOR.skip-repl
+<TelerikSmartPasteButton @ref="smartPasteButtonRef" />
+
+@code {
+    private async Task StartPasting()
+    {
+        var smartPasteResponse =
+            await response.Content.ReadFromJsonAsync<SmartPasteResponse>();
+
+        if (smartPasteResponse?.FieldValues?.Count > 0)
+        {
+            await SmartPasteButtonRef.PasteAsync(smartPasteResponse);
+        }
+    }
+}
+````
+
+## Form Field Support
+
+The SmartPasteButton works with both native HTML form fields and Telerik input components. The following Telerik components are supported:
+
+* AutoComplete
+* ComboBox
+* DatePicker
+* DateTimePicker
+* DropDownList
+* FormItem
+* MaskedTextBox
+* MultiColumnComboBox
+* MultiSelect
+* NumericTextBox
+* Rating
+* Switch
+* TextBox
+* TimePicker
+
+## See Also
+
+* [SmartPasteButton Live Demo](https://demos.telerik.com/blazor-ui/smartpastebutton/overview)
+* [SmartPasteButton API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikSmartPasteButton)
+* [SmartPasteButton Events](slug:smartpastebutton-events)