Syncfusion.Blazor.SmartComponents 27.2.2

Syncfusion Blazor Smart Components

This package contains the SmartTextArea and SmartPasteButtonfor Blazor application.

System Requirements

• System Requirements

Syncfusion Blazor Smart Paste Button Component

The Smart Paste Button is an advanced AI component built on top of Syncfusion's Button component. It inherits all the robust features and functionalities of the standard Syncfusion Button component while introducing an innovative intelligent pasting capability. This component leverages AI to intelligently paste clipboard data, ensuring that the pasted content is contextually relevant and formatted correctly.

By integrating the capabilities of AI, the Smart Paste Button goes beyond simple data insertion. It ensures that pasted content is contextually relevant and is ideal for applications where users frequently copy and paste data.

Example Use Cases

• Online Job Application

  A job applicant could copy their resume or LinkedIn profile summary and click "Smart Paste" in the job application form. This would automatically populate fields such as "Work Experience", "Skills", "Education" and "Personal Statement", streamlining the application process and ensuring that all relevant information is included.

• Bug Tracking Form

  A user could copy a brief description of a bug from an Instant Messaging or chat message and then click "Smart Paste" on the "Create New Issue" page. The system would automatically populate fields like "Title", "Priority", "Description" and "Reproduce Steps" based on the clipboard content. The language model would also rephrase and structure the input as needed, converting phrases like "I clicked X on Y screen" into steps like "1. Navigate to screen Y, 2. Click X."

Adding Syncfusion Smart Paste Button in Blazor

Prerequisites

1. Install the Syncfusion SmartComponents Package

   Ensure that the Syncfusion.Blazor.SmartComponents NuGet package is installed in your Blazor project.

2. Configure AI Services

   To configure AI services, open your Program.cs file and add the following code. Replace the placeholders with your actual API credentials.

   builder.Services.AddSyncfusionSmartComponents() // Inject SmartComponents
       .ConfigureCredentials(new AIServiceCredentials("your-apiKey", "your-deploymentName", "your-endpoint")) 
       .InjectOpenAIInference();
   

   This configures the Smart Paste Button with AI-powered intelligent pasting capabilities.

Adding the Smart Paste Button Component

Then, in a .razor file, inside any <form>, <EditForm> or <SfDataForm>, add the <SfSmartPasteButton> component.

@page "/"
@using Syncfusion.Blazor.SmartComponents

<EditForm Model="@formModel">
    <p>Name: <InputText @bind-Value="@formModel.Name" /></p>
    <p>Address line 1: <InputText @bind-Value="@formModel.AddressLine1" /></p>
    <p>City: <InputText @bind-Value="@formModel.City" /></p>
    <p>Zip/postal code: <InputText @bind-Value="@formModel.Zip" /></p>

    <button type="submit">Submit</button>
    <SfSmartPasteButton>Smart Paste</SfSmartPasteButton>
</EditForm>

@code {
    private FormModel formModel = new FormModel();

    public class FormModel
    {
        public string? Name { get; set; }
        public string? AddressLine1 { get; set; }
        public string? City { get; set; }
        public string? Zip { get; set; }
    }
}

Customizing the Syncfusion Smart Paste Button

Smart Paste Button inherits all functionalities and properties from the Syncfusion Button component. This means you can use all the properties and customization options available for the Button in the Smart Paste Button as well.

For more information and a detailed guide on using these properties, refer to the official Button Documentation.

Annotating Your Form Fields

Smart Paste Button automatically identifies form fields in your <form> elements (i.e., <input>, <select>, and <textarea> elements) and generates descriptions based on their associated <label>, name attributes, or nearby text content. This description is then used to build a prompt for the language model.

You can override these default descriptions for specific form fields by adding a data-smartpaste-description attribute. Here are some examples:

<input data-smartpaste-description="The user's vehicle registration number, formatted as XYZ-123" />

<textarea data-smartpaste-description="The job description should start with JOB TITLE in all caps, followed by a paragraph of text"></textarea>

<input type="checkbox" data-smartpaste-description="Check if the product description indicates suitability for children; otherwise, uncheck" />

Customizing these descriptions allows you to provide more specific instructions to the language model, which can improve the accuracy and relevance of the generated field values. Keep in mind that language models can produce varied outputs, and effective prompt engineering may require some experimentation to achieve the best results for your specific use case.

Syncfusion Blazor Smart TextArea Component

Smart TextArea is an AI-powered enhancement to the traditional textarea, offering sentence-level autocompletion based on its configuration and user input, improving typing speed and efficiency.

Example Use Cases

1. GitHub Issue Responses

   In an open-source project, maintainers often respond to a variety of issues raised by users. Using Smart TextArea, maintainers can quickly draft responses with predefined phrases. For instance, when a maintainer types "To investigate, ", the system might suggest completions like "We will need a reproducible example as a public Git repository." This reduces response time and ensures consistent, professional communication across issues.

2. Live Chat Customer Support Responses

   In a live chat system, the Smart TextArea can significantly enhance customer service by offering predefined phrases for common tasks. For example, when an agent types “Hello!”, the system might suggest completions like “How can I assist you today?”. This feature ensures that customer service communication remains efficient and professional, minimizing the time and effort required for repetitive responses.

Adding Syncfusion Smart TextArea in Blazor

Prerequisites

1. Install the Syncfusion SmartComponents Package

   Ensure that the Syncfusion.Blazor.SmartComponents NuGet package is installed in your Blazor project.

2. Configure AI Services

   To configure AI services, open your Program.cs file and add the following code. Replace the placeholders with your actual API credentials.

   builder.Services.AddSyncfusionSmartComponents() // Inject SmartComponents
       .ConfigureCredentials(new AIServiceCredentials("your-apiKey", "your-deploymentName", "your-endpoint")) 
       .InjectOpenAIInference();
   

   This configures the Smart TextArea with AI-powered autocompletion capabilities.

Adding the Smart TextArea Component

In your .razor file, include the Smart TextArea component as shown below:

@page "/"
@using Syncfusion.Blazor.SmartComponents

<SfSmartTextArea @bind-Value="@text" UserRole="Generic professional"></SfSmartTextArea>

@code {
    string? text; // You can set an initial value if needed
}

The UserRole attribute is mandatory which defines the context for autocompletion suggestions. Using this, you can further customize the suggestions based on your application's needs.

Customizing the Syncfusion Smart TextArea

The Smart TextArea inherits all functionalities and properties from the Syncfusion TextArea component. This means you can use all the properties and customization options available for the TextArea in the Smart TextArea as well.

For more information and a detailed guide on using these properties, refer to the official TextArea Documentation.

Customizing the Suggestions

By default, the Smart TextArea provides autocompletion suggestions based on:

• The text around the cursor
• The value of the UserRole property
• The value of the UserPhrases property

Setting a User Role

The UserRole should be a string that describes the role of the person typing and the context of their message. Some example roles include:

• "Customer service agent responding to client inquiries"
• "Project manager drafting a status update for the team"
• "Sales representative replying to a potential client's product query"

Defining User Phrases

The UserPhrases should be a string[] (array) containing predefined phrases or expressions that align with your desired tone, style, or common responses. This can include frequently used phrases, important URLs, or relevant policies. For example:

• "Thank you for your interest."
• "Please let me know if you have any further questions."
• "You can find more details in our user guide at [URL]."

This setup enables more personalized and contextually relevant autocompletion suggestions, tailored to the specific needs of your users.

Reducing Invented Information

Avoid configuring user phrases with specific details that might be reused inappropriately. For instance, instead of using a phrase like "Bug report: File not found error occurred in version 2.3", which could lead to the system suggesting "version 2.3" for all file-related completions, use a placeholder like NEED_INFO. For example, "Bug report: File not found error occurred in NEED_INFO". This way, the completion suggestion would be "Bug report: File not found error occurred in ", allowing the user to fill in the specific information.

Language models can be unpredictable, so you may need to experiment to find the most effective phrases. Even with NEED_INFO, the system might occasionally include unintended details.

Example

@using Syncfusion.Blazor.SmartComponents
<SfSmartTextArea @bind-Value="@text" UserRole="@userRole" UserPhrases="@userPhrases" />

@code {
    string? text;

    string userRole = "Maintainer of an open-source project replying to GitHub issues";
    string[] userPhrases = [
        "Thank you for contacting us.",
        "To investigate, We will need a reproducible example as a public Git repository.",
        "Could you please post a screenshot of NEED_INFO?",
        "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.",
        "We do not accept ZIP files as reproducible examples.",
        "Bug report: File not found error occurred in NEED_INFO"
    ];
}

Controlling the Suggestion UX

Suggestions in the Smart TextArea are shown differently based on the type of device:

• On non-touch devices (desktop): Suggestion appears inline within the textarea, displayed in grey text ahead of the cursor. Users can accept suggestions by pressing the "Tab" key.
• On touch devices (mobile): Suggestion appears in a floating overlay below the cursor. Users can tap on the suggestion in the overlay to accept it. On mobile devices with keyboards, the "Tab" key can also be used, but most mobile devices lack this key.

To customize the default suggestion display behavior based on user preference, use the ShowSuggestionOnPopup property.

<SfSmartTextArea ShowSuggestionOnPopup="true" ... />

Property Values

<table> <thead> <tr> <th>Property Value</th> <th>Behavior</th> </tr> </thead> <tbody> <tr> <td>true</td> <td>Suggestions are always displayed as a floating overlay, which can be tapped or clicked.</td> </tr> <tr> <td>false</td> <td>Suggestions are always shown inline within the textarea, and can be accepted by pressing "Tab".</td> </tr> <tr> <td>Not Set</td> <td>By default, touch devices display suggestions in a floating overlay whereas non-touch devices display them inline.</td> </tr> </tbody> </table>

When ShowSuggestionOnPopup is true

When ShowSuggestionOnPopup is false

Support and feedbacks

• For queries, reach our Syncfusion support team or post the queries through the community forums.
• Request new feature through Syncfusion feedback portal.

License

This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. You can purchase a license here or start a free 30-day trial here.

About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1800+ components and frameworks for web (Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Flutter), mobile (Xamarin, Flutter, UWP, and JavaScript), and desktop development (WinForms, WPF, WinUI, Flutter and UWP). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

sales@syncfusion.com | www.syncfusion.com | Toll Free: 1-888-9 DOTNET