| SfSmartTextEditor
Represents a text editor that provides inline or popup auto-suggestions while typing.
Suggestions can be sourced from predefined user phrases or from an AI inference service,
and can be accepted by pressing Tab or Right arrow.
The following example shows how to use SfSmartTextEditor with a placeholder, inline suggestions,
user-provided phrases for offline suggestions, and a command that triggers on every text change.
<sync:SfSmartTextEditor x:Name="smartTextArea"
Placeholder="Please enter"
SuggestionDisplayMode="Inline"
UserRole="Support engineer responding to customer tickets"
UserPhrases="{Binding SuggestionPhrases}"
TextChangedCommand="{Binding OnEditorTextChanged}"/>
public class MainViewModel
{
// Predefined phrases used for offline suggestions
public List<string> SuggestionPhrases { get; } = new List<string>
{
"Hello! How can I help you?",
"Thanks for reaching out.",
"Could you share more details?",
"We’re checking this for you.",
"Please try restarting the app."
};
// Invoked on every text change
public ICommand OnEditorTextChanged { get; }
public MainViewModel()
{
OnEditorTextChanged = new RelayCommand(() =>
{
// Handle text change, analytics, logging, etc.
});
}
}
// Configure an AI chat client at the application level to enable AI suggestions.
// If not configured, the control falls back to the UserPhrases list for offline suggestions.
string azureApiKey = "<MENTION-YOUR-KEY>";
Uri azureEndPoint = new Uri("<MENTION-YOUR-URL>");
string deploymentName = "gpt-4o";
// Create Azure OpenAI chat client (example)
AzureOpenAIClient azureClient = new AzureOpenAIClient(azureEndPoint, new ApiKeyCredential(azureApiKey));
IChatClient azureChatClient = azureClient.GetChatClient(deploymentName).AsIChatClient();
// Register the client with Syncfusion AI services used by the editor
SyncfusionAIExtension.Services.AddSingleton<IChatClient>(azureChatClient);
SyncfusionAIExtension.ConfigureSyncfusionAIServices();
Features
- Inline or popup suggestions: Controlled by SuggestionDisplayMode.
- Offline suggestions: Uses UserPhrases to suggest completions that start with the current input.
- AI-powered suggestions: If an AI chat client is configured at the app level, the editor requests suggestions asynchronously.
- Accepting suggestions: Press Tab or Right arrow to append the current suggestion to the editor text.
- Placeholder: Shown when the editor is empty and not focused; controlled by Placeholder.
- Debounced fetching: The editor waits briefly after typing before fetching suggestions to avoid excessive calls.
- Command on text change: TextChangedCommand executes each time text changes, allowing MVVM-friendly handling.
Behavior summary
- If the caret is at the end of the text, the editor tries to show a suggestion.
- If AI is configured and returns a suggestion, it is displayed; otherwise, the editor falls back to the best match from UserPhrases.
- In Inline mode, the suggestion appears as ghost text following the current caret; in Popup mode, it appears near the caret.
- Suggestions clear when the editor loses focus or text changes.
|