TL;DR: The new Syncfusion React Smart TextArea component, included in the 2024 Volume 3 release, enhances text input functionality with built-in AI-powered phrase suggestions based on the customizable roles.
We’re thrilled to unveil the new Syncfusion React Smart TextArea component in the 2024 volume 3 release.
In this blog, we’ll explore how the AI-powered Smart TextArea component transforms text input by providing contextual suggestions based on predefined roles and phrases. This makes it ideal for apps such as email clients, customer support systems, sales, and internal communication tools.
The React Smart TextArea component is designed with several powerful features that boost productivity and provide extensive customization:
Organizations often deal with repetitive communications, like customer service emails, sales inquiries, and internal updates. The Smart TextArea saves typing time, reduces errors, and maintains a consistent tone in all messages. This not only boosts efficiency but also enhances user experience and satisfaction.
For instance, a customer support representative can choose a predefined role, and the Smart TextArea will suggest relevant responses like Thank you for reaching out or Please provide your order number. This speeds up response time and ensures consistency.
To effectively incorporate AI services into your app, consider following these key steps:
Let’s use the Vercel AI package to configure various AI services under a unified API context. In this blog, we’ve used Azure OpenAI as our example. However, you can also integrate AI packages from other providers, like Google or OpenAI. To install the Azure package, run the following command:
npm i ai @ai-sdk/azure
To use Azure OpenAI, you need access to the Azure OpenAI service and should have a deployment set up in the Azure portal. Once that is in place, you can configure the AI service by including the resource name and API key in your code.
Refer to the following code example.
import { generateText } from "ai"
import { createAzure } from '@ai-sdk/azure';
//Warning - Do not expose your API keys in the client-side code. This is just for demonstration purposes.
const azure = createAzure({
resourceName: 'RESOURCE_NAME',
apiKey: 'API_KEY',
});
// Update the model here.
const aiModel = azure('MODEL_NAME');
export async function getChatAIRequest(options: any) {
try {
const result = await generateText({
model: aiModel,
messages: options.messages,
topP: options.topP,
temperature: options.temperature,
maxTokens: options.maxTokens,
frequencyPenalty: options.frequencyPenalty,
presencePenalty: options.presencePenalty,
stopSequences: options.stopSequences
});
return result.text;
} catch (err) {
console.error("Error occurred:", err);
return null;
}
} The Smart TextArea component integrates seamlessly into any React app. Let’s walk through the process of creating a communication tool that uses predefined roles and phrases.
To start, install the Syncfusion React Dropdown components and the Smart TextArea component using the following command.
npm i @syncfusion/ej2-react-inputs @syncfusion/ej2-react-dropdowns
Import and set up the Smart TextArea component along with a dropdown for role selection in the main App.tsx file.
import { SmartTextAreaComponent, ChatParameters } from "@syncfusion/ej2-react-inputs";
import { DropDownListComponent } from "@syncfusion/ej2-react-dropdowns";
import { getAzureChatAIRequest } from "./ai-model";
function App() {
return (
<div className="control-pane">
<div className="control-section">
<div className="content-wrapper smart-text">
<div className="example-label">Select a role</div>
<DropDownListComponent
type="text"
id="user-role"
dataSource={rolesData}
width="90%"
placeholder="Select a role"
value="Maintainer of an open-source project replying to GitHub issues"
popupHeight="200px"
change={onChange}
/>
<br />
<div className="smart-component">
<SmartTextAreaComponent
id="smart-textarea"
ref={(textarea) => {
textareaObj = textarea as SmartTextAreaComponent;
}}
placeholder={"Enter your queries here"}
floatLabelType={"Auto"}
rows={5}
userRole={"Employee communicating with internal team"}
UserPhrases={phrasesData}
aiSuggestionHandler={serverAIRequest}
showSuggestionOnPopup="Disable"
></SmartTextAreaComponent>
</div>
</div>
</div>
</div>
);
}
export default App;
Now, define the data and helper functions needed for the Smart TextArea component.
let textareaObj: SmartTextAreaComponent;
const phrasesData: string[] = [
"Please find the attached report.",
"Let's schedule a meeting to discuss this further.",
"Can you provide an update on this task?",
"I appreciate your prompt response.",
"Let's collaborate on this project to ensure timely delivery.",
];
const rolesData: string[] = [
"Maintainer of an open-source project replying to GitHub issues",
"Employee communicating with internal team",
"Customer support representative responding to customer queries",
"Sales representative responding to client inquiries",
];
let presets: any = [
{
userRole:
"Maintainer of an open-source project replying to GitHub issues",
userPhrases: [
"Thank you for contacting us.",
"To investigate, we'll need a repro as a public Git repo.",
"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 don't accept ZIP files as repros.",
],
},
{
userRole:
"Customer support representative responding to customer queries",
userPhrases: [
"Thank you for reaching out to us.",
"Can you please provide your order number?",
"We apologize for the inconvenience.",
"Our team is looking into this issue and will get back to you shortly.",
"For urgent matters, please call our support line.",
],
},
{
userRole: "Employee communicating with internal team",
userPhrases: [
"Please find the attached report.",
"Let's schedule a meeting to discuss this further.",
"Can you provide an update on this task?",
"I appreciate your prompt response.",
"Let's collaborate on this project to ensure timely delivery.",
],
},
{
userRole: "Sales representative responding to client inquiries",
userPhrases: [
"Thank you for your interest in our product.",
"Can I schedule a demo for you?",
"Please find the pricing details attached.",
"Our team is excited to work with you.",
"Let me know if you have any further questions.",
],
},
];
function onChange(args: any) {
let selectedRole: string = args.value;
let selectedPreset: any = presets.find(
(preset: any) => preset.userRole === selectedRole
);
textareaObj.userRole = selectedRole;
textareaObj.UserPhrases = selectedPreset.userPhrases;
}
The aiSuggestionHandler property allows you to define a callback function that sends a request to the AI model and updates the AI’s response. The response is then used to enhance the user’s input with relevant suggestions.
Refer to the following code example.
const serverAIRequest = async (settings: ChatParameters) => {
let output = "";
try {
const response = (await getAzureChatAIRequest(settings)) as string;
output = response;
} catch (error) {
console.error("Error:", error);
}
return output;
};
Finally, let’s configure the showSuggestionOnPopup property to control how text suggestions are displayed to the users. The possible values are:
After executing the above code examples, we’ll get the output that resembles the following image.
For more details, refer to the React Smart TextArea component GitHub demo.
Thanks for reading! In this blog, we’ve covered how to get started with the Syncfusion React Smart TextArea component. This component is part of our 2024 Volume 3 release. Try this smart feature and share your feedback in the comments section below!
If you’re not a customer yet, take advantage of our 30-day support forum, feedback portal, or support portal. We are always happy to assist you!