diff --git a/MAUI/SmartTextEditor/claude-service.md b/MAUI/SmartTextEditor/claude-service.md new file mode 100644 index 000000000..62ecad5a2 --- /dev/null +++ b/MAUI/SmartTextEditor/claude-service.md @@ -0,0 +1,185 @@ +--- +layout: post +title: Claude AI for AI-Powered Text Editor | Syncfusion® +description: Learn how to implement a custom AI service using the Claude API with Syncfusion® AI-Powered Text Editor (SfSmartTextEditor) control. +platform: maui +control: SfSmartTextEditor +documentation: ug +--- + +# Claude AI Integration with .NET MAUI Smart Text Editor + +The Syncfusion [.NET MAUI Smart Text Editor] (SfSmartTextEditor) can provide AI-powered suggestions while typing. You can integrate Anthropic `Claude AI` using the `IChatInferenceService` interface, which acts as a bridge between the editor and your custom AI service. + +## Setting Up Claude + +1. **Create an Anthropic Account** + Visit [Anthropic Console](https://console.anthropic.com), sign up, and complete the verification process. +2. **Obtain an API Key** + Navigate to [API Keys](https://console.anthropic.com/settings/keys) and click "Create Key." +3. **Review Model Specifications** + Refer to [Claude Models Documentation](https://docs.anthropic.com/claude/docs/models-overview) for details on available models. + +## Create a Claude AI Service + +This service handles communication with the Claude API, including authentication and response parsing. + +1. Create a `Services` folder in your project. +2. Add a new file named `ClaudeAIService.cs` in the `Services` folder. +3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`). + +{% tabs %} +{% highlight c# tabtitle="ClaudeAIService.cs" %} + +using System.Net; +using System.Text; +using System.Text.Json; +using Microsoft.Extensions.AI; + +public class ClaudeAIService +{ + private readonly string _apiKey; + private readonly string _modelName = "claude-3-5-sonnet-20241022"; // Example model + private readonly string _endpoint = "https://api.anthropic.com/v1/messages"; + private static readonly HttpClient HttpClient = new(new SocketsHttpHandler + { + PooledConnectionLifetime = TimeSpan.FromMinutes(30), + EnableMultipleHttp2Connections = true + }) + { + DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for compatibility + }; + private static readonly JsonSerializerOptions JsonOptions = new() + { + PropertyNamingPolicy = JsonNamingPolicy.CamelCase + }; + + public ClaudeAIService(IConfiguration configuration) + { + _apiKey = configuration["Claude:ApiKey"] ?? throw new ArgumentNullException("Claude API key is missing."); + if (!HttpClient.DefaultRequestHeaders.Contains("x-api-key")) + { + HttpClient.DefaultRequestHeaders.Clear(); + HttpClient.DefaultRequestHeaders.Add("x-api-key", _apiKey); + HttpClient.DefaultRequestHeaders.Add("anthropic-version", "2023-06-01"); // Check latest version in Claude API docs + } + } + + public async Task CompleteAsync(List chatMessages) + { + var requestBody = new ClaudeChatRequest + { + Model = _modelName, + Max_tokens = 1000, // Maximum tokens in response + Messages = chatMessages.Select(m => new ClaudeMessage + { + Role = m.Role == ChatRole.User ? "user" : "assistant", + Content = m.Text + }).ToList(), + Stop_sequences = new List { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } // Configurable stop sequences + }; + + var content = new StringContent(JsonSerializer.Serialize(requestBody, JsonOptions), Encoding.UTF8, "application/json"); + + try + { + var response = await HttpClient.PostAsync(_endpoint, content); + response.EnsureSuccessStatusCode(); + var responseString = await response.Content.ReadAsStringAsync(); + var responseObject = JsonSerializer.Deserialize(responseString, JsonOptions); + return responseObject?.Content?.FirstOrDefault()?.Text ?? "No response from Claude model."; + } + catch (Exception ex) when (ex is HttpRequestException || ex is JsonException) + { + throw new InvalidOperationException("Failed to communicate with Claude API.", ex); + } + } +} + +{% endhighlight %} +{% endtabs %} + +N> Store the Claude API key in `appsettings.json` (e.g., `{ "Claude": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. Verify the `anthropic-version` header in [Claude API Documentation](https://docs.anthropic.com/claude/docs) for the latest version. + +## Define Request and Response Models + +Create a file named `ClaudeModels.cs` in the Services folder and add: + +{% tabs %} +{% highlight c# tabtitle="ClaudeModels.cs" %} + +public class ClaudeChatRequest +{ + public string? Model { get; set; } + public int Max_tokens { get; set; } + public List? Messages { get; set; } + public List? Stop_sequences { get; set; } +} + +public class ClaudeMessage +{ + public string? Role { get; set; } + public string? Content { get; set; } +} + +public class ClaudeChatResponse +{ + public List? Content { get; set; } +} + +public class ClaudeContentBlock +{ + public string? Text { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +## Implement IChatInferenceService + +Create `ClaudeInferenceService.cs`: + +{% tabs %} +{% highlight c# tabtitle="ClaudeInferenceService.cs" %} + +using Syncfusion.Maui.SmartComponents; + +public class ClaudeInferenceService : IChatInferenceService +{ + private readonly ClaudeAIService _claudeService; + + public ClaudeInferenceService(ClaudeAIService claudeService) + { + _claudeService = claudeService; + } + + public async Task GenerateResponseAsync(List chatMessages) + { + return await _claudeService.CompleteAsync(chatMessages); + } +} + +{% endhighlight %} +{% endtabs %} + +## Register Services in MAUI + +Update `MauiProgram.cs`: + +{% tabs %} +{% highlight c# tabtitle="MauiProgram.cs" hl_lines="9 10" %} + +using Syncfusion.Maui.Core.Hosting; +using Syncfusion.Maui.SmartComponents; + +var builder = MauiApp.CreateBuilder(); +builder + .UseMauiApp() + .ConfigureSyncfusionCore(); + +builder.Services.AddSingleton(); +builder.Services.AddSingleton(); + + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/MAUI/SmartTextEditor/custom-ai-service.md b/MAUI/SmartTextEditor/custom-ai-service.md new file mode 100644 index 000000000..33a2bf211 --- /dev/null +++ b/MAUI/SmartTextEditor/custom-ai-service.md @@ -0,0 +1,96 @@ +--- +layout: post +title: Custom AI for AI-Powered Text Editor control | Syncfusion® +description: Learn how to use IChatInferenceService to integrate custom AI services with Syncfusion® .NET MAUI AI-Powered Text Editor (SfSmartTextEditor) control +platform: maui +control: SfSmartTextEditor +documentation: ug +--- + +# Custom AI Service Integration with .NET MAUI Smart Text Editor + +The Syncfusion .NET MAUI AI-Powered Text Editor can use AI to provide intelligent suggestions while typing. By default, it works with providers like `OpenAI` or `Azure OpenAI` or `Ollama`, but you can also integrate your own AI service using the `IChatInferenceService` interface. This interface ensures smooth communication between the smart text editor and your custom AI logic. + +## IChatInferenceService Interface + +The `IChatInferenceService` interface defines how the Smart Text Editor interacts with an AI service. It sends user input and context messages and expects an AI-generated response. + +{% tabs %} +{% highlight xaml tabtitle="C#" %} + +using Syncfusion.Maui.SmartComponents; + +Public interface IChatInferenceService +{ + Task GenerateResponseAsync(List chatMessages); +} + +{% endhighlight %} +{% endtabs %} + +- **Purpose**: Provides a standard way to connect any AI service. +- **Parameter**: The `chatMessages` contains the user’s text and previous context. +- **Benefit**: Lets you switch AI providers without changing the editor code. + +## Custom AI Service Implementation + +Here’s a simple example of a mock AI service that implements `IChatInferenceService`. You can replace the logic with your own AI integration: + +{% tabs %} +{% highlight xaml tabtitle="C#" %} + +using Microsoft.Extensions.AI; +using Syncfusion.Maui.SmartComponents; + +public class MockAIService : IChatInferenceService +{ + public Task GenerateResponseAsync(List chatMessages); + { + + } +} + +{% endhighlight %} +{% endtabs %} + +## Registering the Custom AI Service + +Register the custom AI service in **MauiProgram.cs**: + +{% tabs %} +{% highlight xaml tabtitle="C#" %} + +using Syncfusion.Maui.Core.Hosting; +using Syncfusion.Maui.SmartComponents; + +var builder = MauiApp.CreateBuilder() +.... + +builder.Services.AddSingleton(); + +{% endhighlight %} +{% endtabs %} + +## How to test Custom AI Integration + +1. Implement and register your custom AI service. +2. Add SfSmartTextEditor to your page. +3. Run the app and start typing. +4. Check if suggestions appear based on your AI logic. +5. Use SuggestionDisplayMode to choose Inline or Popup display. + +## Implemented AI Services + +Here are examples of AI services integrated using the `IChatInferenceService` interface: + +| Service | Documentation | +|---------|---------------| +| Claude | [Claude Integration](claude-service) | +| DeepSeek | [DeepSeek Integration](deepseek-service) | +| Groq | [Groq Integration](groq-service) | +| Gemini | [Gemini Integration](gemini-service) | + +## Troubleshooting + +If the custom AI service does not work as expected, try the following: +- **No Suggestions Displayed**: Ensure the `IChatInferenceService` implementation is registered in **MauiProgram.cs** and returns valid responses. Check for errors in the `GenerateResponseAsync` method. \ No newline at end of file diff --git a/MAUI/SmartTextEditor/customization.md b/MAUI/SmartTextEditor/customization.md new file mode 100644 index 000000000..ec31277fa --- /dev/null +++ b/MAUI/SmartTextEditor/customization.md @@ -0,0 +1,156 @@ +--- +layout: post +title: Customization in AI-Powered Text Editor control | Syncfusion® +description: Learn here all about Customization features of Syncfusion® .NET MAUI AI-Powered Text Editor (SfSmartTextEditor) control. +platform: maui +control: SfSmartTextEditor +documentation: ug +--- + +# Customization in .NET MAUI AI-Powered Text Editor (SfSmartTextEditor) +This section explains how to change the AI-Powered Text Editor’s appearance and suggestion behavior. You can set text styles, placeholder options, and customize how suggestions are shown. + +## Text customization +Set or bind the smart text editor’s text using the [Text] property. You can use this to preloaded content or bind it to a field in your view model for data binding. + +{% tabs %} +{% highlight xaml tabtitle="XAML" %} + + + +{% endhighlight %} +{% highlight c# tabtitle="C#" %} + +var smarttexteditor = new SfSmartTextEditor +{ + Text = "Thank you for contacting us." +}; + +{% endhighlight %} +{% endtabs %} + +## Text style customization +You can change the text style and font using the [TextStyle] property to make the editor look the way you want. + +{% tabs %} +{% highlight xaml tabtitle="XAML" %} + + + + + + + + + + +{% endhighlight %} +{% highlight c# tabtitle="C#" %} + +using Syncfusion.Maui.SmartComponents; + +var smarttexteditor = new SfSmartTextEditor +{ + TextStyle = new SmartTextEditorStyle + { + FontSize = 16, + TextColor = Colors.Skyblue, + } +}; + +{% endhighlight %} +{% endtabs %} + +![Text Style in .NET MAUI Smart Text Editor.](images/customization/maui-smarttexteditor-textcolor.gif) + +## Placeholder text and color customization +Add a helpful placeholder to guide users and use [PlaceholderColor] to make sure the text is easy to read. + +{% tabs %} +{% highlight xaml tabtitle="XAML" %} + + + +{% endhighlight %} +{% highlight c# tabtitle="C#" %} + +var editor = new SfSmartTextEditor +{ + Placeholder = "Type your message...", + PlaceholderColor = Color.FromArgb("#49454F") +}; + +{% endhighlight %} +{% endtabs %} + +## Suggestion text color +Customize the color of the suggestion text using the [SuggestionTextColor] property to match your theme and improves readability. + +{% tabs %} +{% highlight xaml tabtitle="XAML" %} + + + +{% endhighlight %} +{% highlight c# tabtitle="C#" %} + +var smarttexteditor = new SfSmartTextEditor +{ + SuggestionTextColor = Colors.Goldenrod +}; + +{% endhighlight %} +{% endtabs %} + +## Suggestion popup background +Change the background color of the suggestion popup using the [SuggestionPopupBackground] property in Popup mode to align with your app's design. + +{% tabs %} +{% highlight xaml tabtitle="XAML" %} + + + +{% endhighlight %} +{% highlight c# tabtitle="C#" %} + +var smarttexteditor = new SfSmartTextEditor +{ + SuggestionDisplayMode = SuggestionDisplayMode.Popup, + SuggestionPopupBackground = new SolidColorBrush(Colors.LightYellow) +}; + +{% endhighlight %} +{% endtabs %} + +![Customization in .NET MAUI Smart Text Editor.](images/customization/maui-smarttexteditor-customization.gif) + +## Maximum input length +Set a limit on the number of characters the user can enter in the smart text editor using the [MaxLength] property. + +{% tabs %} +{% highlight xaml tabtitle="XAML" %} + + + +{% endhighlight %} +{% highlight c# tabtitle="C#" %} + +var smarttexteditor = new SfSmartTextEditor +{ + MaxLength = 500 +}; + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/MAUI/SmartTextEditor/deepseek-service.md b/MAUI/SmartTextEditor/deepseek-service.md new file mode 100644 index 000000000..d515d7e17 --- /dev/null +++ b/MAUI/SmartTextEditor/deepseek-service.md @@ -0,0 +1,181 @@ +--- +layout: post +title: DeepSeek AI for AI-Powered Text Editor | Syncfusion® +description: Learn how to integrate the DeepSeek AI services with Syncfusion® AI-Powered Text Editor (SfSmartTextEditor) control. +platform: maui +control: SfSmartTextEditor +documentation: ug +--- + +# DeepSeek AI Integration with .NET MAUI Smart Text Editor + +The Syncfusion [.NET MAUI Smart Text Editor] (SfSmartTextEditor) can provide AI-powered suggestions while typing. You can integrate DeepSeek using the `IChatInferenceService` interface, which standardizes communication between the editor and your custom AI service. + +## Setting Up DeepSeek + +1. **Obtain a DeepSeek API Key** + Create an account at [DeepSeek Platform](https://platform.deepseek.com), sign in, and navigate to [API Keys](https://platform.deepseek.com/api_keys) to generate an API key. +2. **Review Model Specifications** + Refer to [DeepSeek Models Documentation](https://api-docs.deepseek.com/quick_start/pricing) for details on available models (e.g., `deepseek-chat`). + +## Create a DeepSeek AI Service + +This service manages requests to the `DeepSeek` Chat Completions endpoint and returns the generated text. + +1. Create a `Services` folder in your project. +2. Add a new file named `DeepSeekAIService.cs` in the `Services` folder. +3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`). + +{% tabs %} +{% highlight c# tabtitle="DeepSeekAIService.cs" %} + +using Microsoft.Extensions.AI; +using Microsoft.Extensions.Configuration; +using System.Net; +using System.Text; +using System.Text.Json; + +public class DeepSeekAIService +{ + private readonly string _apiKey; + private readonly string _modelName = "deepseek-chat"; // Example model + private readonly string _endpoint = "https://api.deepseek.com/v1/chat/completions"; + private static readonly HttpClient HttpClient = new(new SocketsHttpHandler + { + PooledConnectionLifetime = TimeSpan.FromMinutes(30), + EnableMultipleHttp2Connections = true + }) + { + DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for compatibility + }; + private static readonly JsonSerializerOptions JsonOptions = new() + { + PropertyNamingPolicy = JsonNamingPolicy.CamelCase + }; + + public DeepSeekAIService(IConfiguration configuration) + { + _apiKey = configuration["DeepSeek:ApiKey"] ?? throw new ArgumentNullException("DeepSeek API key is missing."); + if (!HttpClient.DefaultRequestHeaders.Contains("Authorization")) + { + HttpClient.DefaultRequestHeaders.Clear(); + HttpClient.DefaultRequestHeaders.Add("Authorization", $"Bearer {_apiKey}"); + } + } + + public async Task CompleteAsync(List chatMessages) + { + var requestBody = new DeepSeekChatRequest + { + Model = _modelName, + Temperature = 0.7f, // Controls response randomness (0.0 to 1.0) + Messages = chatMessages.Select(m => new DeepSeekMessage + { + Role = m.Role == ChatRole.User ? "user" : "system", // Align with DeepSeek API roles + Content = m.Text + }).ToList() + }; + + var content = new StringContent(JsonSerializer.Serialize(requestBody, JsonOptions), Encoding.UTF8, "application/json"); + + try + { + var response = await HttpClient.PostAsync(_endpoint, content); + response.EnsureSuccessStatusCode(); + var responseString = await response.Content.ReadAsStringAsync(); + var responseObject = JsonSerializer.Deserialize(responseString, JsonOptions); + return responseObject?.Choices?.FirstOrDefault()?.Message?.Content ?? "No response from DeepSeek."; + } + catch (Exception ex) when (ex is HttpRequestException || ex is JsonException) + { + throw new InvalidOperationException("Failed to communicate with DeepSeek API.", ex); + } + } +} + +{% endhighlight %} +{% endtabs %} + +N> Store the DeepSeek API key in `appsettings.json` (e.g., `{ "DeepSeek": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. + +## Define Request and Response Models + +Create a file named `DeepSeekModels.cs` in the Services folder and add: + +{% tabs %} +{% highlight c# tabtitle="DeepSeekModels.cs" %} + +public class DeepSeekMessage +{ + public string? Role { get; set; } + public string? Content { get; set; } +} + +public class DeepSeekChatRequest +{ + public string? Model { get; set; } + public float Temperature { get; set; } + public List? Messages { get; set; } +} + +public class DeepSeekChatResponse +{ + public List? Choices { get; set; } +} + +public class DeepSeekChoice +{ + public DeepSeekMessage? Message { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +## Implement IChatInferenceService + +Create `DeepSeekInferenceService.cs`: + +{% tabs %} +{% highlight c# tabtitle="DeepSeekInferenceService.cs" %} + +using Syncfusion.Maui.SmartComponents; + +public class DeepSeekInferenceService : IChatInferenceService +{ + private readonly DeepSeekAIService _deepSeekService; + + public DeepSeekInferenceService(DeepSeekAIService deepSeekService) + { + _deepSeekService = deepSeekService; + } + + public async Task GenerateResponseAsync(List chatMessages) + { + return await _deepSeekService.CompleteAsync(chatMessages); + } +} + +{% endhighlight %} +{% endtabs %} + +## Register Services in MAUI + +Update `MauiProgram.cs`: + +{% tabs %} +{% highlight c# tabtitle="MauiProgram.cs" hl_lines="9 10" %} + +using Syncfusion.Maui.Core.Hosting; +using Syncfusion.Maui.SmartComponents; + +var builder = MauiApp.CreateBuilder(); +builder + .UseMauiApp() + .ConfigureSyncfusionCore(); + +builder.Services.AddSingleton(); +builder.Services.AddSingleton(); + + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/MAUI/SmartTextEditor/events.md b/MAUI/SmartTextEditor/events.md new file mode 100644 index 000000000..7d436cad3 --- /dev/null +++ b/MAUI/SmartTextEditor/events.md @@ -0,0 +1,76 @@ +--- +layout: post +title: Events in AI-Powered Text Editor control | Syncfusion® +description: Learn here all about the Events support in Syncfusion® .NET MAUI AI-Powered Text Editor (SfSmartTextEditor) control and more details. +platform: maui +control: SfSmartTextEditor +documentation: ug +--- + +# Events in .NET MAUI AI-Powered Text Editor (SfSmartTextEditor) + +The AI-Powered Text Editor provides the `TextChanged` event, which is triggered whenever the text in the smart text editor changes. + +## TextChanged + +The [TextChanged] event is triggered whenever the text in the smart text editor changes. + +* `Sender`: This contains the `SfSmartTextEditor` object. + +* `EventArgs`: The event uses [TextChangedEventArgs], which provides details about the text change. + + * [NewTextValue] : Returns the new text. + * [OldTextValue] : Returns the previous text. + +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" hl_lines="2" %} + + + + +{% endhighlight %} +{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="1" %} + +this.smarttexteditor.TextChanged += OnTextChanged; +private void OnTextChanged(object sender, Syncfusion.Maui.SmartComponents.TextChangedEventArgs e) +{ + var oldValue = e.OldTextValue; + var newValue = e.NewTextValue; +} + +{% endhighlight %} +{% endtabs %} + +### TextChangedCommand + +The [SfSmartTextEditor] includes a built-in property called `TextChangedCommand`, which is triggered whenever the text in the smart text editor changes. This event can be invoked through the [TextChangedCommand]. + +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" hl_lines="2" %} + + + + + + + +{% endhighlight %} +{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="3,6,8" %} + +public class SmartTextEditorViewModel +{ + public ICommand TextChangedCommand { get; set; } + public SmartTextEditorViewModel() + { + TextChangedCommand = new Command(TextChangedCommand); + } + private void TextChangedCommand() + { + // To do your requirement here. + } +} + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/MAUI/SmartTextEditor/gemini-service.md b/MAUI/SmartTextEditor/gemini-service.md new file mode 100644 index 000000000..2447c616a --- /dev/null +++ b/MAUI/SmartTextEditor/gemini-service.md @@ -0,0 +1,204 @@ +--- +layout: post +title: Gemini AI for AI-Powered Text Editor | Syncfusion® +description: Learn how to implement a custom AI service using Google's Gemini API with Syncfusion® AI-Powered Text Editor (SfSmartTextEditor) control. +platform: maui +control: SfSmartTextEditor +documentation: ug +--- + +# Gemini AI Integration with .NET MAUI Smart Text Editor + +The Syncfusion [.NET MAUI Smart Text Editor] provides AI-powered suggestions for context-aware text input. By default, it works with providers like OpenAI or Azure OpenAI, but you can integrate `Google Gemini AI` using the `IChatInferenceService` interface. This guide explains how to implement and register Gemini AI for the Smart Text Editor in a .NET MAUI app. + +## Setting Up Gemini + +1. **Get a Gemini API Key** + Visit [Google AI Studio](https://ai.google.dev/gemini-api/docs/api-key), sign in, and generate an API key. +2. **Review Model Details** + Refer to [Gemini Models Documentation](https://ai.google.dev/gemini-api/docs/models) for details on available models. + +## Create a Gemini AI Service + +Create a service class to handle `Gemini API` calls, including authentication, request/response handling, and safety settings. + +1. Create a `Services` folder in your MAUI project. +2. Add a new file named `GeminiService.cs` in the Services folder. +3. Implement the service as shown below: + +{% tabs %} +{% highlight c# tabtitle="GeminiService.cs" %} + +using System.Net; +using System.Text; +using System.Text.Json; +using Microsoft.Extensions.AI; + +public class GeminiService +{ + private readonly string _apiKey = ""; + private readonly string _modelName = "gemini-2.0-flash"; // Example model + private readonly string _endpoint = "https://generativelanguage.googleapis.com/v1beta/models/"; + private static readonly HttpClient HttpClient = new(new SocketsHttpHandler + { + PooledConnectionLifetime = TimeSpan.FromMinutes(30), + EnableMultipleHttp2Connections = true + }) + { + DefaultRequestVersion = HttpVersion.Version20 + }; + + private static readonly JsonSerializerOptions JsonOptions = new() + { + PropertyNamingPolicy = JsonNamingPolicy.CamelCase + }; + + public GeminiService(IConfiguration configuration) + { + HttpClient.DefaultRequestHeaders.Clear(); + HttpClient.DefaultRequestHeaders.Add("x-goog-api-key", _apiKey); + } + + public async Task CompleteAsync(List chatMessages) + { + var requestUri = $"{_endpoint}{_modelName}:generateContent"; + var parameters = BuildGeminiChatParameters(chatMessages); + var payload = new StringContent(JsonSerializer.Serialize(parameters, JsonOptions), Encoding.UTF8, "application/json"); + + try + { + using var response = await HttpClient.PostAsync(requestUri, payload); + response.EnsureSuccessStatusCode(); + var json = await response.Content.ReadAsStringAsync(); + var result = JsonSerializer.Deserialize(json, JsonOptions); + return result?.Candidates?.FirstOrDefault()?.Content?.Parts?.FirstOrDefault()?.Text ?? "No response from model."; + } + catch (Exception ex) when (ex is HttpRequestException or JsonException) + { + throw new InvalidOperationException("Gemini API error.", ex); + } + } + + private GeminiChatParameters BuildGeminiChatParameters(List messages) + { + var contents = messages.Select(m => new ResponseContent(m.Text, m.Role == ChatRole.User ? "user" : "model")).ToList(); + return new GeminiChatParameters + { + Contents = contents, + GenerationConfig = new GenerationConfig + { + MaxOutputTokens = 2000, + StopSequences = new List { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } + }, + SafetySettings = new List + { + new() { Category = "HARM_CATEGORY_HARASSMENT", Threshold = "BLOCK_ONLY_HIGH" }, + new() { Category = "HARM_CATEGORY_HATE_SPEECH", Threshold = "BLOCK_ONLY_HIGH" }, + new() { Category = "HARM_CATEGORY_SEXUALLY_EXPLICIT", Threshold = "BLOCK_ONLY_HIGH" }, + new() { Category = "HARM_CATEGORY_DANGEROUS_CONTENT", Threshold = "BLOCK_ONLY_HIGH" }, + new() { Category = "HARM_CATEGORY_DANGEROUS_CONTENT", Threshold = "BLOCK_ONLY_HIGH" }, + } + }; + } +} + +{% endhighlight %} +{% endtabs %} + +N> Store the Gemini API key securely in appsettings.json or as an environment variable. + +## Define Request and Response Models + +Create a file named `GeminiModels.cs` in the Services folder and add: + +{% tabs %} +{% highlight c# tabtitle="GeminiModels.cs" %} + + +public class Part { public string Text { get; set; } } +public class Content { public Part[] Parts { get; init; } = Array.Empty(); } +public class Candidate { public Content Content { get; init; } = new(); } +public class GeminiResponseObject { public Candidate[] Candidates { get; init; } = Array.Empty(); } + +public class ResponseContent +{ + public List Parts { get; init; } + public string Role { get; init; } + public ResponseContent(string text, string role) + { + Parts = new List { new Part { Text = text } }; + Role = role; + } +} + +public class GenerationConfig +{ + public int MaxOutputTokens { get; init; } = 2048; + public List StopSequences { get; init; } = new(); +} + +public class SafetySetting +{ + public string Category { get; init; } = string.Empty; + public string Threshold { get; init; } = string.Empty; +} + +public class GeminiChatParameters +{ + public List Contents { get; init; } = new(); + public GenerationConfig GenerationConfig { get; init; } = new(); + public List SafetySettings { get; init; } = new(); +} + +{% endhighlight %} +{% endtabs %} + +## Implement IChatInferenceService + +Create `GeminiInferenceService.cs`: + +{% tabs %} +{% highlight c# tabtitle="GeminiInferenceService.cs" %} + + +using Syncfusion.Maui.SmartComponents; + +public class GeminiInferenceService : IChatInferenceService +{ + private readonly GeminiService _geminiService; + + public GeminiInferenceService(GeminiService geminiService) + { + _geminiService = geminiService; + } + + public async Task GenerateResponseAsync(List chatMessages) + { + return await _geminiService.CompleteAsync(chatMessages); + } +} + +{% endhighlight %} +{% endtabs %} + +## Register Services in MAUI + +Update `MauiProgram.cs`: + +{% tabs %} +{% highlight c# tabtitle="MauiProgram.cs" hl_lines="9 10" %} + +using Syncfusion.Maui.Core.Hosting; +using Syncfusion.Maui.SmartComponents; + +var builder = MauiApp.CreateBuilder(); +builder + .UseMauiApp() + .ConfigureSyncfusionCore(); + +builder.Services.AddSingleton(); +builder.Services.AddSingleton(); + + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/MAUI/SmartTextEditor/getting-started.md b/MAUI/SmartTextEditor/getting-started.md new file mode 100644 index 000000000..8e4ac1292 --- /dev/null +++ b/MAUI/SmartTextEditor/getting-started.md @@ -0,0 +1,414 @@ +--- +layout: post +title: Getting started with AI-Powered Text Editor control | Syncfusion® +description: Learn about getting started with Syncfusion® AI-Powered Text Editor (SfSmartTextEditor) control and its basic features. +platform: maui +control: SfSmartTextEditor +documentation: ug +--- + +# Getting started with .NET MAUI Smart Text Editor +This section explains how to add the [.NET MAUI SmartTextEditor] control. It covers only the basic features needed to get started with the Syncfusion AI-Powered Text Editor. Follow the steps below to add a .NET MAUI AI-Powered Text Editor control to your project. + +{% tabcontents %} +{% tabcontent Visual Studio %} + +## Prerequisites + +Before proceeding, ensure the following are set up: +1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later). + +## Step 1: Create a New .NET MAUI Project + +1. Go to **File > New > Project** and choose the **.NET MAUI App** template. +2. Name the project and choose a location. Then click **Next**. +3. Select the .NET framework version and click **Create**. + +## Step 2: Install the Syncfusion® .NET MAUI SmartComponents NuGet Package + +1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +2. Search for [Syncfusion.Maui.SmartComponents] and install the latest version. +3. Ensure the necessary dependencies are installed correctly, and the project is restored. + +## Step 3: Register the handler + +The [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) NuGet is a dependent package for all Syncfusion® controls of .NET MAUI. In the **MauiProgram.cs** file, register the handler for Syncfusion® core. + +{% tabs %} +{% highlight C# tabtitle="MauiProgram.cs" hl_lines="1 10" %} + +using Syncfusion.Maui.Core.Hosting; +namespace GettingStarted +{ + public static class MauiProgram + { + public static MauiApp CreateMauiApp() + { + var builder = MauiApp.CreateBuilder(); + + builder.ConfigureSyncfusionCore(); + builder + .UseMauiApp() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + }); + + return builder.Build(); + } + } +} + +{% endhighlight %} +{% endtabs %} + +## Step 4: Add .NET MAUI Smart Text Editor control + +1. To initialize the control, import the `Syncfusion.Maui.SmartComponents` namespace into your code. +2. Initialize [SfSmartTextEditor](). + +{% tabs %} +{% highlight xaml tabtitle="XAML" hl_lines="3 5" %} + + + + + + +{% endhighlight %} +{% highlight c# tabtitle="C#" hl_lines="1 9 10" %} + +using Syncfusion.Maui.SmartComponents; +. . . + +public partial class MainPage : ContentPage +{ + public MainPage() + { + InitializeComponent(); + SfSmartTextEditor smarttexteditor = new SfSmartTextEditor(); + this.Content = smarttexteditor; + } +} + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} +{% tabcontent Visual Studio Code %} + +## Prerequisites + +Before proceeding, ensure the following are set up: +1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +2. Set up a .NET MAUI environment with Visual Studio Code. +3. Ensure that the .NET MAUI extension is installed and configured as described [here.](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code) + +## Step 1: Create a New .NET MAUI Project +1. Open the command palette by pressing `Ctrl+Shift+P` and type **.NET:New Project** and enter. +2. Choose the **.NET MAUI App** template. +3. Select the project location, type the project name and press **Enter**. +4. Then choose **Create project.** + +## Step 2: Install the Syncfusion® .NET MAUI SmartComponents NuGet Package + +1. Press Ctrl + ` (backtick) to open the integrated terminal in Visual Studio Code. +2. Ensure you're in the project root directory where your .csproj file is located. +3. Run the command `dotnet add package Syncfusion.Maui.SmartComponents` to install the Syncfusion® .NET MAUI SmartComponents NuGet package. +4. To ensure all dependencies are installed, run `dotnet restore`. + +## Step 3: Register the handler + +The [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) NuGet is a dependent package for all Syncfusion® controls of .NET MAUI. In the **MauiProgram.cs** file, register the handler for Syncfusion® core. + +{% tabs %} +{% highlight C# tabtitle="MauiProgram.cs" hl_lines="1 10" %} + +using Syncfusion.Maui.Core.Hosting; +namespace GettingStarted +{ + public static class MauiProgram + { + public static MauiApp CreateMauiApp() + { + var builder = MauiApp.CreateBuilder(); + + builder.ConfigureSyncfusionCore(); + builder + .UseMauiApp() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + }); + + return builder.Build(); + } + } +} + +{% endhighlight %} +{% endtabs %} + +## Step 4: Add .NET MAUI Smart Text Editor control + +1. To initialize the control, import the `Syncfusion.Maui.SmartComponents` namespace into your code. +2. Initialize [SfSmartTextEditor](). + +{% tabs %} +{% highlight xaml tabtitle="XAML" hl_lines="3 5" %} + + + + + + +{% endhighlight %} +{% highlight c# tabtitle="C#" hl_lines="1 9 10" %} + +using Syncfusion.Maui.SmartComponents; +. . . + +public partial class MainPage : ContentPage +{ + public MainPage() + { + InitializeComponent(); + SfSmartTextEditor smarttexteditor = new SfSmartTextEditor(); + this.Content = smarttexteditor; + } +} + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent JetBrains Rider %} + +## Prerequisites + +Before proceeding, ensure the following are set up: + +1. Ensure you have the latest version of JetBrains Rider. +2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +3. Make sure the MAUI workloads are installed and configured as described [here.](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start) + +## Step 1: Create a new .NET MAUI Project + +1. Go to **File > New Solution,** Select .NET (C#) and choose the .NET MAUI App template. +2. Enter the Project Name, Solution Name, and Location. +3. Select the .NET framework version and click Create. + +## Step 2: Install the Syncfusion® MAUI SmartComponents NuGet Package + +1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +2. Search for [Syncfusion.Maui.SmartComponents] and install the latest version. +3. Ensure the necessary dependencies are installed correctly, and the project is restored. If not, Open the Terminal in Rider and manually run: `dotnet restore` + +## Step 3: Register the handler + +The [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) NuGet is a dependent package for all Syncfusion® controls of .NET MAUI. In the **MauiProgram.cs** file, register the handler for Syncfusion® core. + +{% tabs %} +{% highlight C# tabtitle="MauiProgram.cs" hl_lines="1 10" %} + +using Syncfusion.Maui.Core.Hosting; +namespace GettingStarted +{ + public static class MauiProgram + { + public static MauiApp CreateMauiApp() + { + var builder = MauiApp.CreateBuilder(); + + builder.ConfigureSyncfusionCore(); + builder + .UseMauiApp() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + }); + + return builder.Build(); + } + } +} + +{% endhighlight %} +{% endtabs %} + +## Step 4: Add .NET MAUI Smart Text Editor control + +1. To initialize the control, import the `Syncfusion.Maui.SmartComponents` namespace into your code. +2. Initialize [SfSmartTextEditor]. + +{% tabs %} +{% highlight xaml tabtitle="XAML" hl_lines="3 5" %} + + + + + + +{% endhighlight %} +{% highlight c# tabtitle="C#" hl_lines="1 9 10" %} + +using Syncfusion.Maui.SmartComponents; +. . . + +public partial class MainPage : ContentPage +{ + public MainPage() + { + InitializeComponent(); + SfSmartTextEditor smarttexteditor = new SfSmartTextEditor(); + this.Content = smarttexteditor; + } +} + +{% endhighlight %} +{% endtabs %} +{% endtabcontent %} +{% endtabcontents %} + +## Configure user role and phrases for suggestions + +Set the writing context and preferred expressions to guide completions: +- **UserRole** (required): Describes who is typing and the intent, shaping the tone and relevance of suggestions. +- **UserPhrases** (optional): A list of reusable statements that reflect your brand or frequent responses. Used for offline suggestions and to bias completions. + +{% tabs %} +{% highlight xaml tabtitle="XAML" hl_lines="7 8" %} + + + + + + + Thanks for reaching out. + Please share a minimal reproducible sample. + We’ll update you as soon as we have more details. + + + + + +{% endhighlight %} +{% endtabs %} + +![Getting Started in .NET MAUI Smart Text Editor.](images/getting-started/maui-smarttexteditor-getting-started.gif) + +N> If no AI inference service is configured, the editor generates offline suggestions from your UserPhrases. + +## Configure AI Service + +The Smart Text Editor uses a chat inference service resolved from dependency injection to generate contextual suggestions. Register a compatible chat client and an inference adapter in `MauiProgram.cs`. If no AI inference service is configured, the editor generates offline suggestions from your UserPhrases. + +### Azure OpenAI + +For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), then values for `azureOpenAIKey`, `azureOpenAIEndpoint` and `azureOpenAIModel` will all be provided to you. + +* Install the following NuGet packages to your project: + +{% tabs %} + +{% highlight c# tabtitle="Package Manager" %} + +Install-Package Microsoft.Extensions.AI +Install-Package Microsoft.Extensions.AI.OpenAI +Install-Package Azure.AI.OpenAI + +{% endhighlight %} + +{% endtabs %} + +* To configure the AI service, add the following settings to the **MauiProgram.cs** file in your application. + +{% tabs %} +{% highlight C# tabtitle="MauiProgram" hl_lines="5 21" %} + +using Azure.AI.OpenAI; +using Microsoft.Extensions.AI; +using Microsoft.Extensions.Logging; +using System.ClientModel; +using Syncfusion.Maui.SmartComponents.Hosting; + +var builder = MauiApp.CreateBuilder(); + +.... + +string azureOpenAIKey = "AZURE_OPENAI_KEY"; +string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT"; +string azureOpenAIModel = "AZURE_OPENAI_MODEL"; +AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient( + new Uri(azureOpenAIEndpoint), + new ApiKeyCredential(azureOpenAIKey) +); +IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient(); +builder.Services.AddChatClient(azureOpenAIChatClient); + +builder.ConfigureSyncfusionAIServices(); + +{% endhighlight %} +{% endtabs %} + +### Ollama + +To use Ollama for running self hosted models: + +1. **Download and install Ollama** + Visit [Ollama's official website](https://ollama.com) and install the application appropriate for your operating system. + +2. **Install the desired model from the Ollama library** + You can browse and install models from the [Ollama Library](https://ollama.com/library) (e.g., `llama2:13b`, `mistral:7b`, etc.). + +3. **Configure your application** + + - Provide the `Endpoint` URL where the model is hosted (e.g., `http://localhost:11434`). + - Set `ModelName` to the specific model you installed (e.g., `llama2:13b`). + +* Install the following NuGet packages to your project: + +{% tabs %} + +{% highlight c# tabtitle="Package Manager" %} + +Install-Package Microsoft.Extensions.AI +Install-Package OllamaSharp + +{% endhighlight %} + +{% endtabs %} + +* Add the following settings to the **MauiProgram.cs** file in your application. + +{% tabs %} +{% highlight C# tabtitle="MauiProgram" hl_lines="3 13" %} + +using Microsoft.Extensions.AI; +using OllamaSharp; +using Syncfusion.Maui.SmartComponents.Hosting; + +var builder = MauiApp.CreateBuilder(); + +.... + +string ModelName = "MODEL_NAME"; +IChatClient chatClient = new OllamaApiClient("http://localhost:11434", ModelName); +builder.Services.AddChatClient(chatClient); + +builder.ConfigureSyncfusionAIServices(); + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/MAUI/SmartTextEditor/groq-service.md b/MAUI/SmartTextEditor/groq-service.md new file mode 100644 index 000000000..ef364a3ad --- /dev/null +++ b/MAUI/SmartTextEditor/groq-service.md @@ -0,0 +1,185 @@ +--- +layout: post +title: Groq AI Integration with AI-Powered Text Editor | Syncfusion® +description: Learn how to implement a custom AI service using the Groq API with Syncfusion® AI-Powered Text Editor (SfSmartTextEditor) control. +platform: maui +control: SfSmartTextEditor +documentation: ug +--- + +# Groq AI Integration with .NET MAUI Smart Text Editor + +The Syncfusion [.NET MAUI Smart Text Editor] (SfSmartTextEditor) can show AI‑powered suggestions while you type. You can integrate `Groq` using the `IChatInferenceService` interface and Groq’s OpenAI‑compatible Chat Completions API for fast, low‑latency results. + +## Setting Up Groq + +1. **Create a Groq account & API key** + Visit [Groq Cloud Console](https://console.groq.com), and create an API key. Use the Authorization: Bearer {GROQ_API_KEY} header when calling the API +2. **Endpoint (OpenAI‑compatible)** + Chat Completions: POST https://api.groq.com/openai/v1/chat/completions. +3. **Choose a Model** + Refer to [Groq Models Documentation](https://console.groq.com/docs/models) for details on available models (e.g., `llama3-8b-8192`). + +## Create a Groq AI Service + +This service calls Groq’s Chat Completions endpoint and returns the first assistant message. It keeps your code simple and OpenAI‑compatible. + +1. Create a `Services` folder in your project. +2. Add a new file named `GroqService.cs` in the `Services` folder. +3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json` or environment variables). + +{% tabs %} +{% highlight c# tabtitle="GroqService.cs" %} + +using Microsoft.Extensions.AI; +using Syncfusion.Maui.SmartComponents; +using System.Net; +using System.Text; +using System.Text.Json; +using System.Text.Json.Serialization; + +public class GroqService +{ + private readonly string _apiKey; + private readonly string _modelName = "llama3-8b-8192"; // Example model + private readonly string _endpoint = "https://api.groq.com/openai/v1/chat/completions"; + private static readonly HttpClient HttpClient = new(new SocketsHttpHandler + { + PooledConnectionLifetime = TimeSpan.FromMinutes(30), + EnableMultipleHttp2Connections = true + }) + { + DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for broader compatibility + }; + private static readonly JsonSerializerOptions JsonOptions = new() + { + PropertyNamingPolicy = JsonNamingPolicy.CamelCase + }; + + public GroqService(IConfiguration configuration) + { + _apiKey = configuration["Groq:ApiKey"] ?? throw new ArgumentNullException("Groq API key is missing."); + if (!HttpClient.DefaultRequestHeaders.Contains("Authorization")) + { + HttpClient.DefaultRequestHeaders.Clear(); + HttpClient.DefaultRequestHeaders.Add("Authorization", $"Bearer {_apiKey}"); + } + } + + public async Task CompleteAsync(List chatMessages) + { + var requestPayload = new GroqChatParameters + { + Model = _modelName, + Messages = chatMessages.Select(m => new Message + { + Role = m.Role == ChatRole.User ? "user" : "assistant", + Content = m.Text + }).ToList(), + Stop = new List { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } // Configurable stop sequences + }; + + var content = new StringContent(JsonSerializer.Serialize(requestPayload, JsonOptions), Encoding.UTF8, "application/json"); + + try + { + var response = await HttpClient.PostAsync(_endpoint, content); + response.EnsureSuccessStatusCode(); + var responseString = await response.Content.ReadAsStringAsync(); + var responseObject = JsonSerializer.Deserialize(responseString, JsonOptions); + return responseObject?.Choices?.FirstOrDefault()?.Message?.Content ?? "No response from model."; + } + catch (Exception ex) when (ex is HttpRequestException || ex is JsonException) + { + throw new InvalidOperationException("Failed to communicate with Groq API.", ex); + } + } +} + +{% endhighlight %} +{% endtabs %} + +N> Store the Groq API key in `appsettings.json` (e.g., `{ "Groq": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. + +## Define Request and Response Models + +Create a file named `GroqModels.cs` in the Services folder and add: + +{% tabs %} +{% highlight c# tabtitle="GroqModels.cs" %} + +public class Choice +{ + public Message? Message { get; set; } +} + +public class Message +{ + public string? Role { get; set; } + public string? Content { get; set; } +} + +public class GroqChatParameters +{ + public string? Model { get; set; } + public List? Messages { get; set; } + public List? Stop { get; set; } +} + +public class GroqResponseObject +{ + public string? Model { get; set; } + public List? Choices { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +## Implement IChatInferenceService + +Create `GroqInferenceService.cs`: + +{% tabs %} +{% highlight c# tabtitle="GroqInferenceService.cs" %} + +using Syncfusion.Maui.SmartComponents; + +public class GroqInferenceService : IChatInferenceService +{ + private readonly GroqService _groqService; + + public GroqInferenceService(GroqService groqService) + { + _groqService = groqService; + } + + public async Task GenerateResponseAsync(List chatMessages) + { + return await _groqService.CompleteAsync(chatMessages); + } +} + +{% endhighlight %} +{% endtabs %} + +## Register Services in MAUI + +Update `MauiProgram.cs`: + +{% tabs %} +{% highlight c# tabtitle="MauiProgram.cs" hl_lines="9 10" %} + +using Syncfusion.Maui.Core.Hosting; +using Syncfusion.Maui.SmartComponents; + +var builder = MauiApp.CreateBuilder(); +builder + .UseMauiApp() + .ConfigureSyncfusionCore(); + +builder.Services.AddSingleton(); +builder.Services.AddSingleton(); + + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/MAUI/SmartTextEditor/images/customization/maui-smarttexteditor-customization.gif b/MAUI/SmartTextEditor/images/customization/maui-smarttexteditor-customization.gif new file mode 100644 index 000000000..5d038a961 Binary files /dev/null and b/MAUI/SmartTextEditor/images/customization/maui-smarttexteditor-customization.gif differ diff --git a/MAUI/SmartTextEditor/images/customization/maui-smarttexteditor-textcolor.gif b/MAUI/SmartTextEditor/images/customization/maui-smarttexteditor-textcolor.gif new file mode 100644 index 000000000..f518e3517 Binary files /dev/null and b/MAUI/SmartTextEditor/images/customization/maui-smarttexteditor-textcolor.gif differ diff --git a/MAUI/SmartTextEditor/images/getting-started/maui-smarttexteditor-getting-started.gif b/MAUI/SmartTextEditor/images/getting-started/maui-smarttexteditor-getting-started.gif new file mode 100644 index 000000000..8a1926052 Binary files /dev/null and b/MAUI/SmartTextEditor/images/getting-started/maui-smarttexteditor-getting-started.gif differ diff --git a/MAUI/SmartTextEditor/images/overview/maui-smarttexteditor-overview.gif b/MAUI/SmartTextEditor/images/overview/maui-smarttexteditor-overview.gif new file mode 100644 index 000000000..5f8e5f4ae Binary files /dev/null and b/MAUI/SmartTextEditor/images/overview/maui-smarttexteditor-overview.gif differ diff --git a/MAUI/SmartTextEditor/images/suggestion-display-mode/maui-smarttexteditor-inline-mode.gif b/MAUI/SmartTextEditor/images/suggestion-display-mode/maui-smarttexteditor-inline-mode.gif new file mode 100644 index 000000000..0b5351ce8 Binary files /dev/null and b/MAUI/SmartTextEditor/images/suggestion-display-mode/maui-smarttexteditor-inline-mode.gif differ diff --git a/MAUI/SmartTextEditor/images/suggestion-display-mode/maui-smarttexteditor-popup-mode.gif b/MAUI/SmartTextEditor/images/suggestion-display-mode/maui-smarttexteditor-popup-mode.gif new file mode 100644 index 000000000..ceb3637ac Binary files /dev/null and b/MAUI/SmartTextEditor/images/suggestion-display-mode/maui-smarttexteditor-popup-mode.gif differ diff --git a/MAUI/SmartTextEditor/overview.md b/MAUI/SmartTextEditor/overview.md new file mode 100644 index 000000000..3d022ecc0 --- /dev/null +++ b/MAUI/SmartTextEditor/overview.md @@ -0,0 +1,32 @@ +--- +layout: post +title: About .NET MAUI AI-Powered Text Editor control | Syncfusion® +description: Learn about the overview of Syncfusion® .NET MAUI AI-Powered Text Editor (SfSmartTextEditor) control, its basic features. +platform: maui +control: SfSmartTextEditor +documentation: ug +--- + +# Overview of .NET MAUI Smart Text Editor + +Syncfusion [.NET MAUI AI-Powered Text Editor]() (SfSmartTextEditor) is a multiline input control that accelerates typing with predictive suggestions. It supports inline and popup suggestion display, can integrate with an AI inference service for context aware completions, and falls back to your custom phrase list when AI is unavailable. The control provides full text styling, placeholder customization, and command/event hooks for text changes. + +## Key features + +* **Suggestion display modes**: Allows customizing suggestions in both inline and popup modes. + +* **AI powered suggestions**: Uses IChatInferenceService for intelligent, context aware completions. + +* **Custom phrase library**: Maintains fallback phrases when AI suggestions are unavailable. + +* **Maximum length validation**: Enforces character limits to ensure precise input control. + +* **Keyboard integration**: Allows quick acceptance of suggestions using Tab or Right Arrow keys. + +* **Gesture support**: Enables touch users to tap or click suggestions in the pop up for instant insertion. + +* **Placeholder text**: Allows configuration of placeholders with customizable color styling. + +* **Customization**: Gives users full control over fonts, colors, sizes, and styles for complete UI customization. + +![Overview in .NET MAUI Smart Text Editor.](images/overview/maui-smarttexteditor-overview.gif) \ No newline at end of file diff --git a/MAUI/SmartTextEditor/suggestion-display-mode.md b/MAUI/SmartTextEditor/suggestion-display-mode.md new file mode 100644 index 000000000..aa40fa7ff --- /dev/null +++ b/MAUI/SmartTextEditor/suggestion-display-mode.md @@ -0,0 +1,87 @@ +--- +layout: post +title: Suggestion Mode in AI-Powered Text Editor | Syncfusion® +description: Learn about suggestion mode with Syncfusion® AI-Powered Text Editor (SfSmartTextEditor) control and its basic features. +platform: maui +control: SfSmartTextEditor +documentation: ug +--- + +# Choose how suggestions are displayed +The AI-Powered Text Editor supports two display modes for showing completions as you type: `Inline` and `Popup`. + +- [Inline]: Renders the predicted text in place after the caret, matching your text style. +- [Popup]: Shows a compact hint near the caret that you can tap or accept via key press. + +N> +- Windows and Mac Catalyst default to **Inline**; Android and iOS default to **Popup**. +- Suggestions can be applied using the **Tab** or **Right Arrow** keys in both modes. +- Applying inline suggestions with the **Tab** key is not supported on Android and iOS. + +## Inline suggestion mode +Inline mode displays the suggested text directly within the editor, seamlessly continuing your typing flow. This approach is ideal for desktop environments where uninterrupted input feels natural and efficient. + +{% tabs %} +{% highlight C# tabtitle="XAML" hl_lines="9" %} + + + + + + +{% endhighlight %} +{% highlight c# tabtitle="C#" hl_lines="6" %} + +using Syncfusion.Maui.SmartComponents; + +var smarttexteditor = new SfSmartTextEditor +{ + Placeholder = "Start typing...", + UserRole = "Email author responding to inquiries", + SuggestionDisplayMode = SuggestionDisplayMode.Inline +}; + +{% endhighlight %} +{% endtabs %} + +![Inline Suggestion in .NET MAUI Smart Text Editor.](images/suggestion-display-mode/maui-smarttexteditor-inline-mode.gif) + +## Popup suggestion mode +Popup mode displays the suggested text in a small overlay near the caret, making it easy to review and accept without interrupting your typing. This mode is especially useful on touch based devices where tapping the suggestion feels natural and convenient. + +{% tabs %} +{% highlight C# tabtitle="XAML" hl_lines="9" %} + + + + + + +{% endhighlight %} +{% highlight c# tabtitle="C#" hl_lines="6" %} + +using Syncfusion.Maui.SmartComponents; + +var smarttexteditor = new SfSmartTextEditor +{ + Placeholder = "Start typing...", + UserRole = "Email author responding to inquiries", + SuggestionDisplayMode = SuggestionDisplayMode.Popup +}; + +{% endhighlight %} +{% endtabs %} + +![Popup Suggestion in .NET MAUI Smart Text Editor.](images/suggestion-display-mode/maui-smarttexteditor-popup-mode.gif) \ No newline at end of file diff --git a/maui-toc.html b/maui-toc.html index 1b1fb2e96..e78362b74 100644 --- a/maui-toc.html +++ b/maui-toc.html @@ -1422,6 +1422,29 @@
  • Empty View
  • Item Height Customization
  • Right to left
  • + +
  • Smart Components +
  • Word Library (DocIO)