- Getting Started
diff --git a/blazor/inline-ai-assist/accessibility.md b/blazor/inline-ai-assist/accessibility.md
new file mode 100644
index 0000000000..3dbfff64d6
--- /dev/null
+++ b/blazor/inline-ai-assist/accessibility.md
@@ -0,0 +1,75 @@
+---
+layout: post
+title: Accessibility in Blazor Inline AI Assist Component | Syncfusion®
+description: Checkout and learn about Accessibility and Keyboard interaction with Blazor Inline AI Assist component and more details.
+platform: Blazor
+control: Inline AI Assist
+documentation: ug
+---
+
+# Accessibility in Blazor Inline AI Assist component
+
+The Blazor Inline AI Assist component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+
+The accessibility compliance for the Blazor Inline AI Assist component is outlined below.
+
+| Accessibility Criteria | Compatibility |
+| -- | -- |
+| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | AA |
+| [Section 508 Support](../common/accessibility#accessibility-standards) |
|
+| [Screen Reader Support](../common/accessibility#screen-reader-support) | |
+| [Right-To-Left Support](../common/accessibility#right-to-left-support) | |
+| [Color Contrast](../common/accessibility#color-contrast) | |
+| [Mobile Device Support](../common/accessibility#mobile-device-support) | |
+| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | |
+| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | |
+
+
+
++ +
- All features of the component meet the requirement.+ +
- Some features of the component do not meet the requirement.+ +## WAI-ARIA attributes + +The following ARIA attributes are used in the Inline AI Assist component: + +| Attributes | Purpose | +| ------------ | ----------------------- | +| `role=button` | Indicates that the element is clickable and triggers an action when activated by the user. | +| `role=toolbar` | Specifies that the element is a toolbar. | +| `aria-label` | Defines a string value that labels an interactive element for accessibility. | +| `aria-orientation` | Specifies the orientation of the toolbar. | +| `aria-disabled` | Indicates whether the toolbar or element is currently disabled and not interactive. | +| `aria-multiline` | Indicates that a textbox accepts multiple lines of input or only a single line. | + +## Keyboard interaction + +The following keyboard shortcuts are supported by the Inline AI Assist component. + +| Windows | Mac | Actions | +| --- | --- | --- | +| Enter | Enter | Select the focused item. | +| Tab | Tab | Moves focus forward through the interactive elements. | +| Shift + Tab | ⇧ + Tab | Moves focus backward through the interactive elements. | +Inline AI Assist Toolbars||| +| ← | ← | Focuses the previous toolbar element. | +| → | → | Focuses the next toolbar element. | +| Enter / Space | Enter / Space | Select the focused item or activate the selected option. | +| Home | Home | Moves focus to the first toolbar element. | +| End | End | Moves focus to the last toolbar element. | + +## Ensuring accessibility + +The Blazor Inline AI Assist component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. + +## See also + +* [Accessibility in Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) diff --git a/blazor/inline-ai-assist/ai-integrations/gemini-integration.md b/blazor/inline-ai-assist/ai-integrations/gemini-integration.md new file mode 100644 index 0000000000..54a2df2041 --- /dev/null +++ b/blazor/inline-ai-assist/ai-integrations/gemini-integration.md @@ -0,0 +1,222 @@ +--- +layout: post +title: Gemini AI in Blazor Inline AI Assist Control | Syncfusion +description: Checkout and learn about Integration of Gemini AI with Blazor Inline AI Assist component in Blazor Server App and Blazor WebAssembly App. +platform: Blazor +control: Inline AI Assist +documentation: ug +--- + +# Integrate Gemini AI with ASP.NET Core Inline AI Assist control + +The Inline AI Assist control integrates with Google’s [Gemini](https://ai.google.dev/gemini-api/docs) API to deliver intelligent conversational interfaces. It leverages advanced natural language understanding to interpret user input, maintain context throughout interactions, and provide accurate, relevant responses. By configuring secure authentication and data handling, developers can unlock powerful AI-driven communication features that elevate user engagement and streamline support experiences. + +## Prerequisites + +Before starting, ensure you have the following: + +* **Google Account**: For generating a Gemini API key. + +* **Syncfusion Inline AI Assist**: Package [Syncfusion Blazor package](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses. + +## Set Up the Inline AI Assist Component + +Follow the [Getting Started](../getting-started) guide to configure and render the Inline AI Assist component in the application and that prerequisites are met. + +## Install Dependencies + +Install the required packages: + +* Install the `Gemini AI` nuget package in the application. + +```bash + +Nuget\Install-Package Mscc.GenerativeAI + +``` + +* Install the `Markdig` nuget packages in the application. + +```bash + +Nuget\Install-Package Markdig + +``` + +## Generate API Key + +1. **Access Google AI Studio**: Instructs users to sign into [Google AI Studio](https://aistudio.google.com/app/apikey) with a Google account or create a new account if needed. + +2. **Navigate to API Key Creation**: Go to the `Get API Key` option in the left-hand menu or top-right corner of the dashboard. Click the `Create API Key` button. + +3. **Project Selection**: Choose an existing Google Cloud project or create a new one. + +4. **API Key Generation**: After project selection, the API key is generated. Users are instructed to copy and store the key securely, as it is shown only once. + +> Security note: Advises against committing the API key to version control and recommends using environment variables or a secret manager in production. + +## Gemini AI with Inline AI Assist + +Modify the razor file to integrate the Gemini AI with the Inline AI Assist control. + +* Update your Gemini API key securely in the configuration: + +```bash + +const string GeminiApiKey = 'Place your API key here'; + +``` + +{% tabs %} +{% highlight razor %} + +```razor +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Buttons +@using System.Net.Http.Json +@using System.Text.Json +@using System.Text +@inject HttpClient Http + + + +
- The component does not meet the requirement.+ ++ +@code { + private SfInlineAIAssist inlineAssist = new(); + private bool stopStreaming = false; + + private const string GeminiApiKey = ""; // Replace with your Gemini API key + private const string GeminiModel = "gemini-2.5-flash"; + private const int ResponseUpdateRate = 10; // chars per chunk, matches TS sample + + private async Task OnSummarizeClickAsync() + { + await inlineAssist.ShowPopupAsync(); + } + + private async Task OnPromptRequestAsync(PromptRequestedEventArgs args) + { + stopStreaming = false; + try + { + var url = $"https://generativelanguage.googleapis.com/v1beta/models/{GeminiModel}:generateContent?key={GeminiApiKey}"; + var requestBody = new + { + contents = new[] + { + new { parts = new[] { new { text = args.Prompt } } } + } + }; + + var response = await Http.PostAsJsonAsync(url, requestBody); + response.EnsureSuccessStatusCode(); + + var json = await response.Content.ReadFromJsonAsync+ Content Summarize + + + +++ +Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. + It leverages advanced natural language processing to understand context and deliver precise suggestions. + Users can seamlessly integrate AI-powered features into their applications.
+With real-time response streaming and customizable prompts, developers can create interactive experiences. + The component supports multiple response modes including inline editing and popup-based interactions.
++ ++ ++ + (); + var responseText = json + .GetProperty("candidates")[0] + .GetProperty("content") + .GetProperty("parts")[0] + .GetProperty("text") + .GetString()?.Trim() ?? "No response received."; + + await StreamResponseAsync(responseText); + } + catch (Exception ex) + { + Console.WriteLine($"Gemini error: {ex.Message}"); + await inlineAssist.UpdateResponseAsync( + "⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later." + ); + stopStreaming = true; + } + } + private async Task StreamResponseAsync(string response) + { + var buffer = new StringBuilder(); + int i = 0; + int total = response.Length; + + while (i < total && !stopStreaming) + { + buffer.Append(response[i]); + i++; + + if (i % ResponseUpdateRate == 0 || i == total) + { + bool isFinal = (i == total); + await inlineAssist.UpdateResponseAsync(buffer.ToString(), isFinal); + } + + await Task.Delay(15); // matches TS 15ms delay for streaming effect + } + } + + private async Task OnToolbarItemClickAsync(ToolbarItemClickEventArgs args) + { + if (args.Item?.IconCss?.Contains("e-inline-stop") == true) + { + stopStreaming = true; + } + } + + private async Task OnResponseItemSelectAsync(ResponseItemSelectEventArgs args) + { + if (args.Item.Label == "Accept") + { + var lastPrompt = inlineAssist.Prompts.LastOrDefault(); + if (lastPrompt != null && !string.IsNullOrEmpty(lastPrompt.Response)) + { + response + '' + await inlineAssist.HidePopupAsync(); + } + } + else if (args.Item.Label == "Discard") + { + await inlineAssist.HidePopupAsync(); + } + } +} +``` +{% endhighlight %} +{% endtabs %} + + + \ No newline at end of file diff --git a/blazor/inline-ai-assist/ai-integrations/lite-llm-integration.md b/blazor/inline-ai-assist/ai-integrations/lite-llm-integration.md new file mode 100644 index 0000000000..6d80ae8506 --- /dev/null +++ b/blazor/inline-ai-assist/ai-integrations/lite-llm-integration.md @@ -0,0 +1,245 @@ +--- +layout: post +title: LiteLLM Integration with Blazor Inline AI Assist Component | Syncfusion® +description: Checkout and learn about LiteLLM integration with Blazor Inline AI Assist component in Blazor WebAssembly Application. +platform: Blazor +control: Inline AI Assist +documentation: ug +domainurl: ##DomainURL## +--- + +# Integrate Inline AI Assist with LiteLLM + +The **Inline AI Assist** component can also be integrated with [LiteLLM](https://docs.litellm.ai/docs), an open-source proxy that provides a unified, OpenAI-compatible API for multiple LLM providers such as [OpenAI](https://openai.com) and [Azure OpenAI](https://azure.microsoft.com/en-us/products/ai-foundry/models/openai). + +In this setup: +* **Inline AI Assist** serves as the user interface for entering prompts. +* Prompts are sent to the **LiteLLM proxy**, which forwards them to the configured LLM provider. +* The LLM provider processes the prompt and returns a response through LiteLLM. +* This enables **natural language understanding** and **context-aware responses** without changing the Inline AI Assist integration logic, as LiteLLM uses the same OpenAI-style API. + +## Prerequisites + +Before starting, ensure you have the following: + +* **OpenAI Account**: Access to OpenAI services and a generated **API key**. + +* **Python**: Required to run the **LiteLLM proxy**. + +* **Syncfusion Inline AI Assist**: Package [Syncfusion Blazor package](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed. + +* **Markdig**: For parsing Markdown responses. + +```bash + +Nuget\Install-Package Markdig + +``` + +## Set Up the Inline AI Assist Component + +Follow the [Getting Started](../getting-started) guide to configure and render the Inline AI Assist component in the application and that prerequisites are met. + +## Configure the LiteLLM Proxy + +* **Set Environment Variable**: Set your OpenAI API key as an environment variable for security (e.g.,`export OPENAI_API_KEY= ` on macOS/Linux or `set OPENAI_API_KEY= ` on Windows). Avoid hard-coding the key in files. + +* **Create config.yaml**: In your project root, create a `config.yaml` file to define the model alias and routing. This exposes an OpenAI-compatible endpoint at `http://localhost:4000/v1/chat/completions`. + +{% tabs %} +{% highlight yaml tabtitle="config.yaml" %} +```yaml +model_list: + - model_name: openai/gpt-4o-mini # Alias your frontend will use + LiteLLM_params: + model: gpt-4o-mini # OpenAI base model name + api_key: OS.environ/OPENAI_API_KEY + +router_settings: + # Optional: master_key for proxy authentication + # master_key: test_key + cors: + - "*" + cors_allow_origins: + - "*" +``` +{% endhighlight %} +{% endtabs %} + +Security note: In production, use a secret manager for the API key and restrict CORS origins. The optional `master_key` can add proxy-level authentication—set `LITELLM_API_KEY` in the Blazor code to match if enabled. + +## Configure Inline AI Assist with LiteLLM + +To integrate **LiteLLM** with the **Syncfusion Inline AI Assist** component, modify the razor file in your Blazor application. The component will send user prompts to the LiteLLM proxy, which forwards them to the configured LLM provider (e.g., **OpenAI** or **Azure OpenAI**) and returns natural language responses. + +In the following example: + +* The `PromptRequested` event sends the user prompt to the LiteLLM proxy at `/v1/chat/completions`. +* The proxy uses the **model alias** defined in `config.yaml` (e.g., `openai/gpt-4o-mini`) and routes the request to the actual LLM provider. +* The response is parsed as **Markdown** using the `Markdig` library and displayed in the Inline AI Assist component. + +{% tabs %} +{% highlight razor %} +@rendermode InteractiveAuto +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Buttons +@using Markdig +@using System.Text.Json +@using System.Text +@inject HttpClient Http + + + + ++ +@code { + private SfInlineAIAssist inlineAssist = new SfInlineAIAssist(); + private bool stopStreaming = false; + + private readonly string liteLlmHost = "http://localhost:4000"; + private readonly string liteLlmApiKey = ""; // If your LiteLLM proxy uses a master_key, set this to the same value; otherwise, leave as empty string + + private string editableContent = @"Content Summarize ++ @((MarkupString)editableContent) ++ ++ ++ + Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.
+With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.
"; + + private async Task OnPromptRequestAsync(PromptRequestedEventArgs args) + { + try + { + stopStreaming = false; + var url = $"{liteLlmHost.TrimEnd('/')}/v1/chat/completions"; + + Http.DefaultRequestHeaders.Clear(); + Http.DefaultRequestHeaders.Add("Accept", "application/json"); + if (!string.IsNullOrEmpty(liteLlmApiKey)) + { + Http.DefaultRequestHeaders.Add("Authorization", $"Bearer {liteLlmApiKey}"); + } + + var requestBody = new + { + model = "openai/gpt-4o-mini", // Must match model_name in config.yaml + messages = new[] { new { role = "user", content = args.Prompt } }, + temperature = 0.7, + max_tokens = 300, + stream = false + }; + + var json = JsonSerializer.Serialize(requestBody); + var content = new StringContent(json, Encoding.UTF8, "application/json"); + + var response = await Http.PostAsync(url, content); + if (!response.IsSuccessStatusCode) + { + throw new Exception($"HTTP {response.StatusCode}"); + } + + var responseContent = await response.Content.ReadAsStringAsync(); + using var document = JsonDocument.Parse(responseContent); + var responseText = document.RootElement + .GetProperty("choices")[0] + .GetProperty("message") + .GetProperty("content") + .GetString()?.Trim() ?? "No response received."; + + var pipeline = new MarkdownPipelineBuilder() + .UseAdvancedExtensions() + .UsePipeTables() + .UseTaskLists() + .Build(); + + if (!stopStreaming) + { + await inlineAssist.UpdateResponseAsync(Markdown.ToHtml(responseText, pipeline)); + } + } + catch (Exception ex) + { + Console.WriteLine($"Error fetching LiteLLM response: {ex.Message}"); + await inlineAssist.UpdateResponseAsync("⚠️ Something went wrong while connecting to the AI service. Please check your LiteLLM proxy, model name, or try again later."); + stopStreaming = true; + } + } + + private async Task OnItemSelectAsync(ResponseItemSelectEventArgs args) + { + if (args.Item.Label == "Accept") + { + var lastPrompt = inlineAssist?.Prompts.LastOrDefault(); + if (lastPrompt != null && !string.IsNullOrEmpty(lastPrompt.Response)) + { + editableContent = $"{lastPrompt.Response}
"; + } + await inlineAssist!.HidePopupAsync(); + } + else if (args.Item.Label == "Discard") + { + await inlineAssist!.HidePopupAsync(); + } + } + + private async Task OnToolbarItemClickAsync(ToolbarItemClickEventArgs args) + { + if (args.Item.IconCss == "e-icons e-inline-stop") + { + stopStreaming = true; + } + } + + private async Task OnSummarizeClick() + { + await inlineAssist.ShowPopupAsync(); + } +} +{% endhighlight %} +{% endtabs %} + + + +## Run and Test + +### Start the proxy: + +Navigate to your project root and run the following command to start the proxy: + +```bash +pip install "litellm[proxy]" +litellm --config "./config.yaml" --port 4000 --host 0.0.0.0 +``` + +### Start the application: + +In a separate terminal window, navigate to your project folder and start the Blazor application: + +```bash +dotnet run +``` + +Open your app to interact with the Inline AI Assist component integrated with LiteLLM. + +## Troubleshooting + +* `401 Unauthorized`: Verify your `API_KEY` and model deployment name. +* `Model not found`: Ensure model matches `model_name` in `config.yaml`. +* `CORS issues`: Configure `router_settings.cors_allow_origins` properly. \ No newline at end of file diff --git a/blazor/inline-ai-assist/ai-integrations/ollama-llm-integration.md b/blazor/inline-ai-assist/ai-integrations/ollama-llm-integration.md new file mode 100644 index 0000000000..5dece871a2 --- /dev/null +++ b/blazor/inline-ai-assist/ai-integrations/ollama-llm-integration.md @@ -0,0 +1,283 @@ +--- +layout: post +title: LLM Model with Blazor Inline AI Assist Component | Syncfusion® +description: Checkout and learn about Integration of LLM Model with Blazor Inline AI Assist component in Blazor WebAssembly Application. +platform: Blazor +control: Inline AI Assist +documentation: ug +--- + +# Integrate LLM via Ollama with Blazor Inline AI Assist Component + +The Inline AI Assist component integrates with [LLM via Ollama](https://ollama.com) to enable advanced conversational AI features in your Blazor application. The component acts as a user interface where user prompts are sent to the selected LLM model via API calls, providing natural language understanding and context-aware responses. + +## Prerequisites + +Before starting, ensure you have the following: + +* [Ollama](https://ollama.com) installed to run and manage LLM models locally. + +* **Syncfusion Inline AI Assist**: Package [Syncfusion Blazor package](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses. + +## Set Up the Inline AI Assist Component + +Follow the [Getting Started](../getting-started) guide to configure and render the Inline AI Assist component in the application and that prerequisites are met. + +## Install Dependency + +To install the Markdig package by run `NuGet\Install-Package Markdig` in Package Manager Console. + +## Configuring Ollama + +Install Ollama for your operating system: + +{% tabs %} +{% highlight ts tabtitle="Windows" %} + +1. Visit [Windows](https://ollama.com/download) +2. Click `Download for Windows` to get the `.exe installer`. +3. Run `OllamaSetup.exe` and follow the wizard to install. + +{% endhighlight %} + +{% highlight ts tabtitle="macOS" %} + +1. Visit [macOS](https://ollama.com/download/mac) +2. Click `Download for macOS` to get `.dmg file` +3. Install it by following the wizard. + +{% endhighlight %} + +{% highlight ts tabtitle="Linux" %} + +1. Visit [Linux](https://ollama.com/download/linux) +2. Run the below command to install Ollama in your system + + curl -fsSL https://ollama.com/install.sh | sh + +{% endhighlight %} +{% endtabs %} + +## Download and run an Ollama model + +* Download and run a model using the following command. Replace `deepseek-r1` with your preferred model (e.g., `llama3`, `phi4`). See the [Ollama model](https://ollama.com/search) library for available models. + +```bash + +ollama run deepseek-r1 + +``` + +* After the model download completes, start the Ollama server to make the model accessible: + +```bash + +ollama serve + +``` + +## Configure Inline AI Assist with Ollama + +To integrate Ollama with the Blazor Inline AI Assist component in your Blazor application: + +* Configure the AI services in the `Program.cs` file to register the Ollama client and Blazor services. + +{% tabs %} +{% highlight cs tabtitle="Program.cs" %} + + +using Blazor_InlineAIAssist_Ollama.Components; +using Microsoft.Extensions.AI; +using OllamaSharp; +using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents(); +builder.Services.AddSyncfusionBlazor(); + +builder.Services.AddHttpClient(); + +builder.Services.AddDistributedMemoryCache(); + +// Ollama configuration +builder.Services.AddChatClient(new OllamaApiClient(new Uri("http://localhost:11434/"), "llama3.2")) + .UseDistributedCache() + .UseLogging(); + +var app = builder.Build(); + +if (!app.Environment.IsDevelopment()) +{ + app.UseExceptionHandler("/Error", createScopeForErrors: true); + app.UseHsts(); +} + +app.UseHttpsRedirection(); +app.UseAntiforgery(); +app.MapStaticAssets(); +app.MapRazorComponents() + .AddInteractiveServerRenderMode(); + +app.Run(); + +{% endhighlight %} +{% endtabs %} + +* Modify the `Index.razor` file (or a dedicated component) to host the integration logic and handle prompt requests. + +{% tabs %} +{% highlight razor %} + +@rendermode InteractiveServer +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Buttons +@using System.Net.Http.Json +@using System.Text.Json +@using System.Text +@inject HttpClient Http + + + + + ++ +@code { + private SfInlineAIAssist inlineAssist = new(); + private bool stopStreaming = false; + + // Ollama settings — mirrors the TS fetch URL and body + private const string OllamaUrl = "http://localhost:11434/api/generate"; + private const string OllamaModel = "deepseek-r1"; + private const int ResponseUpdateRate = 10; // chars per chunk + private const string DefaultErrorResponse = + "⚠️ Something went wrong while connecting to the AI service. Please check your Ollama application running background."; + + private async Task OnSummarizeClickAsync() + { + await inlineAssist.ShowPopupAsync(); + } + + private async Task OnPromptRequestAsync(PromptRequestedEventArgs args) + { + try + { + // Mirrors the fetch body — same prompt format and stream: false + var requestBody = new + { + model = OllamaModel, + prompt = $"### Instruction:\nRespond in up to 5 lines.\n\n### Input:\n{args.Prompt}", + stream = false + }; + + var response = await Http.PostAsJsonAsync(OllamaUrl, requestBody); + response.EnsureSuccessStatusCode(); + + var json = await response.Content.ReadFromJsonAsync+ Content Summarize + + + +++ +Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. + It leverages advanced natural language processing to understand context and deliver precise suggestions. + Users can seamlessly integrate AI-powered features into their applications.
+With real-time response streaming and customizable prompts, developers can create interactive experiences. + The component supports multiple response modes including inline editing and popup-based interactions.
++ ++ ++ + (); + var responseText = json.GetProperty("response").GetString()?.Trim() + ?? "No response received."; + + // Mirrors: if(response) { stopStreaming = false; streamResponse(reply.response); } + stopStreaming = false; + await StreamResponseAsync(responseText); + } + catch (Exception ex) + { + Console.WriteLine($"Ollama error: {ex.Message}"); + await inlineAssist.UpdateResponseAsync(DefaultErrorResponse, true); + } + } + + // Mirrors the inner streamResponse function in TS exactly + private async Task StreamResponseAsync(string response) + { + var buffer = new StringBuilder(); + int i = 0; + int total = response.Length; + + while (i < total && !stopStreaming) + { + buffer.Append(response[i]); + i++; + + if (i % ResponseUpdateRate == 0 || i == total) + { + bool isFinal = (i == total); + // UpdateResponseAsync handles Markdown→HTML internally + // mirrors: marked.parse(lastResponse) + inlineAIAssist.addResponse(html, isFinal) + await inlineAssist.UpdateResponseAsync(buffer.ToString(), isFinal); + } + + await Task.Delay(15); // mirrors: setTimeout(resolve, 15) + } + } + + // Mirrors: inlineToolbarSettings.itemClick — stop on e-inline-stop + private async Task OnToolbarItemClickAsync(ToolbarItemClickEventArgs args) + { + if (args.Item?.IconCss?.Contains("e-inline-stop") == true) + { + stopStreaming = true; + } + } + + // Mirrors: responseSettings.itemSelect + private async Task OnResponseItemSelectAsync(ResponseItemSelectEventArgs args) + { + if (args.Item.Label == "Accept") + { + var lastPrompt = inlineAssist.Prompts.LastOrDefault(); + if (lastPrompt != null && !string.IsNullOrEmpty(lastPrompt.Response)) + { + await inlineAssist.HidePopupAsync(); + } + } + else if (args.Item.Label == "Discard") + { + await inlineAssist.HidePopupAsync(); + } + } +} + +{% endhighlight %} +{% endtabs %} + + \ No newline at end of file diff --git a/blazor/inline-ai-assist/ai-integrations/openai-integration.md b/blazor/inline-ai-assist/ai-integrations/openai-integration.md new file mode 100644 index 0000000000..a90b09bf07 --- /dev/null +++ b/blazor/inline-ai-assist/ai-integrations/openai-integration.md @@ -0,0 +1,248 @@ +--- +layout: post +title: Azure OpenAI with Blazor Inline AI Assist Component | Syncfusion® +description: Checkout and learn about Azure OpenAI with Blazor Inline AI Assist component in Blazor WebAssembly Application. +platform: Blazor +control: Inline AI Assist +documentation: ug +--- + +# Integrate Azure OpenAI with Blazor Inline AI Assist component + +The Inline AI Assist component integrates with [Azure OpenAI](https://azure.microsoft.com/en-us/products/ai-foundry/models/openai) to enable advanced conversational AI features in your applications. The component acts as a user interface, where user prompts are sent to the Azure OpenAI service via API calls, providing natural language understanding and context-aware responses. + +## Prerequisites + +Before starting, ensure you have the following: + +* **An Azure account**: with access to [Azure OpenAI](https://azure.microsoft.com/en-us/products/ai-foundry/models/openai) services and a generated API key. + +* **Syncfusion Inline AI Assist**: Package [Syncfusion Blazor package](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package available in the project for Markdown-to-HTML conversion (required by the sample code). + +## Set Up the Inline AI Assist Component + +Follow the [Getting Started](../getting-started) guide to configure and render the Inline AI Assist component in the application and that prerequisites are met. + +## Install Dependencies + +Install the required packages: + +* Install the `OpenAI` and `Azure` nuget packages in the application. + +```bash + +NuGet\Install-Package OpenAI +NuGet\Install-Package Azure.AI.OpenAI +NuGet\Install-Package Azure.Core + +``` + +* Install the `Markdig` nuget packages in the application. + +```bash + +Nuget\Install-Package Markdig + +``` + +Note: The sample below uses HttpClient directly and does not require the Azure/OpenAI SDKs. + +## Configure Azure OpenAI + +1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure OpenAI resource. + +2. Under resource Management, select keys and endpoint to retrieve your API key and endpoint URL. + +3. Note the following values: + - API key + - Endpoint + - API version (must be supported by your resource) + - Deployment name (for example, gpt-4o-mini) + +4. Store these values securely, as they will be used in your application. + +> `Security Note`: expose your API key in client-side code for production applications. Use a server-side proxy or environment variables to manage sensitive information securely. + +## Configure Inline AI Assist with Azure OpenAI + +- Configure your Azure OpenAI endpoint, API key, and deployment name in your **Program.cs** (or using your preferred configuration mechanism). + +- Register the service for dependency injection. + +- Inject and use the service in your Razor component. + +Modify the razor file to integrate the Azure OpenAI with the Inline AI Assist component. + +{% tabs %} +{% highlight c# tabtitle="razor" %} + +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Buttons +@using System.Net.Http.Json +@using System.Text.Json +@using System.Text +@inject HttpClient Http + + + + + ++ +@code { + private SfInlineAIAssist inlineAssist = new(); + private bool stopStreaming = false; + + // Azure OpenAI settings — mirrors the TS constants + private const string AzureOpenAIApiKey = ""; // Replace with your key + private const string AzureOpenAIEndpoint = ""; // Replace with your endpoint + private const string AzureOpenAIApiVersion = ""; // Replace with your API version + private const string AzureDeploymentName = ""; // Replace with your deployment name + private const int ResponseUpdateRate = 10; // chars per chunk + private const int MaxTokens = 150; + + private async Task OnSummarizeClickAsync() + { + await inlineAssist.ShowPopupAsync(); + } + + private async Task OnPromptRequestAsync(PromptRequestedEventArgs args) + { + // Mirrors the TS URL construction: + // endpoint + /openai/deployments/{name}/chat/completions?api-version={version} + var url = $"{AzureOpenAIEndpoint.TrimEnd('/')}" + + $"/openai/deployments/{Uri.EscapeDataString(AzureDeploymentName)}/chat/completions" + + $"?api-version={Uri.EscapeDataString(AzureOpenAIApiVersion)}"; + try + { + // Mirrors the fetch body + var requestBody = new + { + model = "gpt-4o-mini", + messages = new[] + { + new { role = "user", content = args.Prompt } + }, + max_tokens = MaxTokens, + stream = false + }; + + // Mirrors: headers: { Authorization: azureOpenAIApiKey } + using var request = new HttpRequestMessage(HttpMethod.Post, url); + request.Content = JsonContent.Create(requestBody); + request.Headers.Add("api-key", AzureOpenAIApiKey); + + var response = await Http.SendAsync(request); + response.EnsureSuccessStatusCode(); + + var json = await response.Content.ReadFromJsonAsync+ Content Summarize + + + +++ +Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. + It leverages advanced natural language processing to understand context and deliver precise suggestions. + Users can seamlessly integrate AI-powered features into their applications.
+With real-time response streaming and customizable prompts, developers can create interactive experiences. + The component supports multiple response modes including inline editing and popup-based interactions.
++ ++ ++ + (); + var responseText = json + .GetProperty("choices")[0] + .GetProperty("message") + .GetProperty("content") + .GetString()?.Trim() ?? "No response received."; + + // Mirrors: stopStreaming = false; streamResponse(responseText); + stopStreaming = false; + await StreamResponseAsync(responseText); + } + catch (Exception ex) + { + Console.WriteLine($"Azure OpenAI error: {ex.Message}"); + await inlineAssist.UpdateResponseAsync( + "⚠️ Something went wrong while connecting to the AI service. Please check your API key, Deployment model, endpoint or try again later.", + true + ); + stopStreaming = true; + } + } + + // Mirrors the TS streamResponse function exactly + private async Task StreamResponseAsync(string response) + { + var buffer = new StringBuilder(); + int i = 0; + int total = response.Length; + + while (i < total && !stopStreaming) + { + buffer.Append(response[i]); + i++; + + if (i % ResponseUpdateRate == 0 || i == total) + { + bool isFinal = (i == total); + // mirrors: marked.parse(lastResponse) + inlineAIAssist.addResponse(html, isFinal) + await inlineAssist.UpdateResponseAsync(buffer.ToString(), isFinal); + } + + await Task.Delay(15); // mirrors: setTimeout(resolve, 15) + } + } + + // Mirrors: inlineToolbarSettings.itemClick + private async Task OnToolbarItemClickAsync(ToolbarItemClickEventArgs args) + { + if (args.Item?.IconCss?.Contains("e-inline-stop") == true) + { + stopStreaming = true; + } + } + + // Mirrors: responseSettings.itemSelect + private async Task OnResponseItemSelectAsync(ResponseItemSelectEventArgs args) + { + if (args.Item.Label == "Accept") + { + var lastPrompt = inlineAssist.Prompts.LastOrDefault(); + if (lastPrompt != null && !string.IsNullOrEmpty(lastPrompt.Response)) + { + await inlineAssist.HidePopupAsync(); + } + } + else if (args.Item.Label == "Discard") + { + await inlineAssist.HidePopupAsync(); + } + } +} + +{% endhighlight %} +{% endtabs %} + + diff --git a/blazor/inline-ai-assist/appearance.md b/blazor/inline-ai-assist/appearance.md new file mode 100644 index 0000000000..2cca1acb5c --- /dev/null +++ b/blazor/inline-ai-assist/appearance.md @@ -0,0 +1,110 @@ +--- +layout: post +title: Style and Appearance in Blazor Inline AI Assist Component | Syncfusion® +description: Checkout and learn here all about Style and Appearance with Blazor Inline AI Assist component in Blazor Server App and Blazor WebAssembly App. +platform: Blazor +control: Inline AI Assist +documentation: ug +--- + +# Style and Appearance in Blazor Inline AI Assist component + +## Component Dimensions + +### Popup width + +You can use the `PopupWidth` property to set the width of the Inline AI Assist. The default value is `400px`. + +### Popup height + +You can use the `PopupHeight` property to set the height of the Inline AI Assist. The default value is `auto`. + +### Z-index + +You can use the `zIndex` property to set z-index for the Inline AI Assist popup. The default value is `1000`. + +## Custom styling using cssClass + +You can customize the appearance of the Inline AI Assist control by using the `CSSClass property. + +The below example shows the use case of the properties such as `Zindex`, `PopupWidth`, `PopupHeight` and `CssClass`. + +```cshtml +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Buttons + + + + ++ +@code { + private SfInlineAIAssist inlineAssist = new SfInlineAIAssist(); + private string editableContent = @"Content Summarize ++ @((MarkupString)editableContent) ++ ++ ++ Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.
+With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.
"; + + private async Task OnPromptRequestAsync(PromptRequestedEventArgs args) + { + await Task.Delay(1000); + string defaultResponse = "For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration."; + await inlineAssist.UpdateResponseAsync(defaultResponse); + } + + private async Task OnItemSelectAsync(ResponseItemSelectEventArgs args) + { + if (args.Item.Label == "Accept") + { + var lastPrompt = inlineAssist?.Prompts.LastOrDefault(); + if (lastPrompt != null && !string.IsNullOrEmpty(lastPrompt.Response)) + { + editableContent = $"{lastPrompt.Response}
"; + } + await inlineAssist!.HidePopupAsync(); + } + else if (args.Item.Label == "Discard") + { + await inlineAssist!.HidePopupAsync(); + } + } + + private async Task OnSummarizeClick() + { + await inlineAssist.ShowPopupAsync(); + } +} +``` + + \ No newline at end of file diff --git a/blazor/inline-ai-assist/command-settings.md b/blazor/inline-ai-assist/command-settings.md new file mode 100644 index 0000000000..f7d1607852 --- /dev/null +++ b/blazor/inline-ai-assist/command-settings.md @@ -0,0 +1,130 @@ +--- +layout: post +title: Commands in Blazor InlineAIAssist Control | Syncfusion +description: Checkout and learn about Command items with Blazor Inline AI Assist component in Blazor Server App and Blazor WebAssembly App. +platform: Blazor +control: Inline AI Assist +documentation: ug +--- + +# Commands configuration in Blazor Inline AI Assist control + +You can render and use the command action popup by using the `commands` property in the `e-inlineaiassist-commandsettings` tag helper. This property helps to supply commands, control popup dimensions, and customize behavior. + +## Configure command items + +You can use the `commandSettings` property to add commands that populate the command popup. Each command item can perform a quick request based on the configured `prompt`. + +Each command item object can include the following properties: + +| Property | Type | Default | Description | +|-------------|---------|---------|--------------------------------------------------------------| +| label | string | '' | Specifies the display label of the command item. | +| prompt | string | '' | Specifies the prompt text executed when the item is selected.| +| iconCss | string | '' | Specifies the CSS class for the item's icon. | +| disabled | boolean | false | Specifies whether the command is disabled and unselectable. | +| groupBy | string | '' | Specifies the group category for organizing related commands.| +| id | string | '' | Specifies a unique identifier for the command item. | +| tooltip | string | '' | Specifies the tooltip text displayed on hover. | + +## Command interactions + +The `itemSelect` event is triggered when a command item is selected from the command popup in the Inline AI Assist control. + +## Customization of AI commands popup + +### Setting popup width + +Control the popup width with `popupWidth` property in the commandSettings. Accepts CSS values or number (px). + +### Setting popup height + +Control the popup height with PopupHeight property in the commandSettings. Use this to enable scrollable lists when many commands exist. + +The below sample demonstrates the `CommandSettings` property. + +```cshtml +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Buttons + + + +++ +@code { + private SfInlineAIAssist inlineAssist = new SfInlineAIAssist(); + private string editableContent = @"Content Summarize ++ @((MarkupString)editableContent) ++ ++ ++ + Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.
+With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.
"; + + private ListcommandItems = new List + { + new CommandItem { Label = "Summarize", Prompt = "Summarize the content", IconCss = "e-icons e-collapse-2"}, + new CommandItem { Label = "Shorten", Prompt = "Shorten the content", IconCss = "e-icons e-shorten"}, + new CommandItem { Label = "Translate", Prompt = "Translate the content", IconCss = "e-icons e-translate"}, + new CommandItem { Label = "Make professional", Prompt = "Make the content more professional", IconCss = "e-icons e-elaborate"} + }; + + private async Task OnPromptRequestAsync(PromptRequestedEventArgs args) + { + await Task.Delay(1000); + string defaultResponse = "For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration."; + await inlineAssist.UpdateResponseAsync(defaultResponse); + } + + private async Task OnItemSelectAsync(ResponseItemSelectEventArgs args) + { + if (args.Item.Label == "Accept") + { + var lastPrompt = inlineAssist?.Prompts.LastOrDefault(); + if (lastPrompt != null && !string.IsNullOrEmpty(lastPrompt.Response)) + { + editableContent = $" {lastPrompt.Response}
"; + } + await inlineAssist!.HidePopupAsync(); + } + else if (args.Item.Label == "Discard") + { + await inlineAssist!.HidePopupAsync(); + } + } + + private async Task OnCommandItemSelectAsync(CommandItemSelectEventArgs args) + { + // Your required action here + } + + private async Task OnSummarizeClick() + { + await inlineAssist.ShowPopupAsync(); + } +} +``` + + + +## See Also + +- [Response Settings](./response-settings.md) +- [Inline Toolbar](./inline-toolbar.md) +- [Events Documentation](./events.md) \ No newline at end of file diff --git a/blazor/inline-ai-assist/events.md b/blazor/inline-ai-assist/events.md new file mode 100644 index 0000000000..8227b5e20b --- /dev/null +++ b/blazor/inline-ai-assist/events.md @@ -0,0 +1,84 @@ +--- +layout: post +title: Events in Blazor Inline AI Assist Control | Syncfusion +description: Checkout and learn about Events with Blazor Inline AI Assist component in Blazor Server App and Blazor WebAssembly App. +platform: Blazor +control: Inline AI Assist +documentation: ug +--- + +# Events in Blazor Inline AI Assist control + +This section describes the Inline AI Assist events that will be triggered when appropriate actions are performed. The following events are available in the Inline AI Assist control. + +## created + +The Inline AI Assist control triggers the `created` event when the control rendering is completed. + +```cshtml + +++ + + +``` + +## promptRequest + +The `promptRequest` event is triggered when the prompt request is made in the Inline AI Assist control. + +```cshtml + ++ ++ + + +``` + +## open + +The `open` event is triggered when the Inline AI Assist popup is opened. + +```cshtml + ++ ++ + + +``` + +### close + +The `close` event is triggered when the Inline AI Assist popup is closed. + +```cshtml + ++ ++ + + +``` \ No newline at end of file diff --git a/blazor/inline-ai-assist/getting-started-webapp.md b/blazor/inline-ai-assist/getting-started-webapp.md new file mode 100644 index 0000000000..83d86a367a --- /dev/null +++ b/blazor/inline-ai-assist/getting-started-webapp.md @@ -0,0 +1,331 @@ +--- +layout: post +title: Getting started with Inline AI Assist in Blazor Web App | Syncfusion® +description: Check out the documentation for getting started with Blazor Inline AI Assist Components in Blazor Web App. +platform: Blazor +control: Inline AI Assist +documentation: ug +--- + +# Getting Started with Blazor Inline AI Assist in Blazor Web App + +This section briefly explains about how to include Syncfusion® Blazor Inline AI Assist component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +## Prerequisites + +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) + +## Create a new Blazor Web App in Visual Studio + +Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +## Prerequisites + +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) + +## Create a new Blazor Web App in Visual Studio Code + +Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. + +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (Ctrl+`): + +{% tabs %} +{% highlight c# tabtitle="Blazor Web App" %} + +dotnet new blazor -o BlazorWebApp -int Auto +cd BlazorWebApp +cd BlazorWebApp.Client + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. + +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: + +{% tabs %} +{% highlight c# tabtitle="Blazor Web App" %} + +dotnet new blazor -o BlazorWebApp -int Auto +cd BlazorWebApp +cd BlazorWebApp.Client + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +## Install required Blazor packages + +Install [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. + +Alternatively, run the following commands in the Package Manager Console to achieve the same. + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Syncfusion.Blazor.InteractiveChat -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project. + +N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. + +## Add import namespaces + +After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InteractiveChat` namespaces. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} + +@using Syncfusion.Blazor +@using Syncfusion.Blazor.InteractiveChat + +{% endhighlight %} +{% endtabs %} + +## Register Blazor service + +Register the Blazor service in the **Program.cs** file of your Blazor Web App. + +{% tabs %} +{% highlight c# tabtitle="Program.cs" %} + +.... +using Syncfusion.Blazor; +.... +builder.Services.AddSyncfusionBlazor(); +.... + +{% endhighlight %} +{% endtabs %} + +N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. + +## Add stylesheet and script resources + +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. + +```html + + +.... + + +``` + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +## Add Blazor Inline AI Assist component + +Add the Blazor Inline AI Assist component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly`, or `InteractiveAuto`). Use the `relateTo` property to position the Inline AI Assist relative to a specific DOM element, and the `target` property to specify the element where the component should be appended. Both properties accept either a CSS selector string (for example, .container or #id) or an HTMLElement instance. + +N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +```razor +@* desired render mode define here *@ +@rendermode InteractiveAuto + +@using Syncfusion.Blazor.InteractiveChat + + + ++ + + ++ +@code { + private SfInlineAIAssist inlineAssist = new(); + + private async Task PromptRequest(PromptRequestedEventArgs args) + { + await Task.Delay(1000); + + string defaultResponse = + "For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration."; + + await inlineAssist.UpdateResponseAsync(defaultResponse); + } + + private async Task ShowPopup() + { + await inlineAssist.ShowPopupAsync(); + } +} +``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "(https://blazorplayground.syncfusion.com/embed/BjhTCNsCMKFGRhuU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5)" backgroundimage "[Blazor Inline AI Assist sample](./images/inline-ai-assist-sample.webp)" %} + +To launch the application, press Ctrl+F5 in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion® Blazor Inline AI Assist component in the default web browser. + +## Response display modes + +Responses can be shown in two modes: `Inline` (updates content in-place) and `Popup` (shows responses in a floating popup). Toggle this behavior with the `responseMode` property. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +```razor +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Buttons + + +++ ++ Inline AI Assist component provides intelligent text processing + capabilities that enhance user productivity. It leverages advanced + natural language processing to understand context and deliver + precise suggestions. Users can seamlessly integrate AI-powered + features into their applications. +
++ With real-time response streaming and customizable prompts, + developers can create interactive experiences. The component + supports multiple response modes including inline editing and + popup-based interactions. +
++ +++ +@code { + private SfInlineAIAssist inlineAssist = new SfInlineAIAssist(); + private ResponseDisplayMode currentResponseMode = ResponseDisplayMode.Popup; + private string editableContent = @"+ + ++Content Summarize ++ @((MarkupString)editableContent) ++ ++ ++ Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.
+With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.
"; + + private async Task OnPromptRequestAsync(PromptRequestedEventArgs args) + { + await Task.Delay(1000); + string defaultResponse = "For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration."; + await inlineAssist.UpdateResponseAsync(defaultResponse); + } + + private async Task OnItemSelectAsync(ResponseItemSelectEventArgs args) + { + if (args.Item.Label == "Accept") + { + var lastPrompt = inlineAssist?.Prompts.LastOrDefault(); + if (lastPrompt != null && !string.IsNullOrEmpty(lastPrompt.Response)) + { + editableContent = $"{lastPrompt.Response}
"; + } + await inlineAssist!.HidePopupAsync(); + } + else if (args.Item.Label == "Discard") + { + await inlineAssist!.HidePopupAsync(); + } + } + + private async Task OnSummarizeClick() + { + await inlineAssist.ShowPopupAsync(); + } + + private async Task OnResponseModeChangeAsync(ChangeEventArgs args) + { + if (Enum.TryParse(args.Value?.ToString(), out var mode)) + { + currentResponseMode = mode; + await InvokeAsync(StateHasChanged); + await inlineAssist.ShowPopupAsync(); + } + } +} +``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "(https://blazorplayground.syncfusion.com/embed/BjhTCNsCMKFGRhuU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5)" backgroundimage "[Blazor Inline AI Assist response modes](./images/inline-ai-assist-response-modes.webp)" %} + +> **Note:** Starting from version 33.1x, when a user submits a prompt to the Inline AI Assist, the component automatically scrolls and focuses on the latest prompt and response. This behavior eliminates the need for users to manually scroll down to see the new response, ensuring they always view the most recent AI response without interruption. Prior to version 33.1x, the previous responses remained visible when new responses were added. diff --git a/blazor/inline-ai-assist/getting-started-with-server-app.md b/blazor/inline-ai-assist/getting-started-with-server-app.md new file mode 100644 index 0000000000..349f876586 --- /dev/null +++ b/blazor/inline-ai-assist/getting-started-with-server-app.md @@ -0,0 +1,323 @@ +--- +layout: post +title: Getting Started with Inline AI Assist in Blazor Server App | Syncfusion® +description: Check out the documentation for getting started with Blazor Inline AI Assist Components in Blazor Server App. +platform: Blazor +control: Inline AI Assist +documentation: ug +--- + +# Getting Started with Inline AI Assist Component in Blazor Server App + +This section briefly explains about how to include Syncfusion® Blazor Inline AI Assist component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +## Prerequisites + +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) + +## Create a new Blazor App in Visual Studio + +Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +## Prerequisites + +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) + +Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. + +Alternatively, create a Server application by using the following command in the integrated terminal (Ctrl+`). + +{% tabs %} + +{% highlight c# tabtitle="Blazor Server App" %} + +dotnet new blazor -o BlazorApp -int Server +cd BlazorApp + +{% endhighlight %} + +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Server App using .NET CLI + +Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazor -o BlazorApp -int Server +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +## Install required Blazor packages + +Install [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. + +Alternatively, run the following commands in the Package Manager Console to achieve the same. + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Syncfusion.Blazor.InteractiveChat -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. + +## Add import namespaces + +After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InteractiveChat` namespaces. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} + +@using Syncfusion.Blazor +@using Syncfusion.Blazor.InteractiveChat + +{% endhighlight %} +{% endtabs %} + +## Register Blazor service + +Register the Blazor service in the **Program.cs** file of your Blazor WebAssembly App. + +{% tabs %} +{% highlight C# tabtitle="Program.cs" %} + +.... +using Syncfusion.Blazor; +.... +builder.Services.AddSyncfusionBlazor(); +.... + +{% endhighlight %} +{% endtabs %} + +## Add stylesheet and script resources + +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file. + +```html + + +.... + + +``` + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. + +## Add Blazor Inline AI Assist component + +Add the Blazor Inline AI Assist component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. Use the `relateTo` property to position the Inline AI Assist relative to a specific DOM element, and the `target` property to specify the element where the component should be appended. Both properties accept either a CSS selector string (for example, .container or #id) or an HTMLElement instance. + +N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +```razor +@* desired render mode define here *@ +@rendermode InteractiveServer + +@using Syncfusion.Blazor.InteractiveChat + + + + + + ++ +@code { + private SfInlineAIAssist inlineAssist = new(); + + private async Task PromptRequest(PromptRequestedEventArgs args) + { + await Task.Delay(1000); + + string defaultResponse = + "For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration."; + + await inlineAssist.UpdateResponseAsync(defaultResponse); + } + + private async Task ShowPopup() + { + await inlineAssist.ShowPopupAsync(); + } +} +``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "(https://blazorplayground.syncfusion.com/embed/BjhTCNsCMKFGRhuU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5)" backgroundimage "[Blazor Inline AI Assist sample](./images/inline-ai-assist-sample.webp)" %} + +To launch the application, press Ctrl+F5 in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion® Blazor Inline AI Assist component in the default web browser. + +## Response display modes + +Responses can be shown in two modes: `Inline` (updates content in-place) and `Popup` (shows responses in a floating popup). Toggle this behavior with the `responseMode` property. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +```razor +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Buttons + + +++ ++ Inline AI Assist component provides intelligent text processing + capabilities that enhance user productivity. It leverages advanced + natural language processing to understand context and deliver + precise suggestions. Users can seamlessly integrate AI-powered + features into their applications. +
++ With real-time response streaming and customizable prompts, + developers can create interactive experiences. The component + supports multiple response modes including inline editing and + popup-based interactions. +
++ +++ +@code { + private SfInlineAIAssist inlineAssist = new SfInlineAIAssist(); + private ResponseDisplayMode currentResponseMode = ResponseDisplayMode.Popup; + private string editableContent = @"+ + ++Content Summarize ++ @((MarkupString)editableContent) ++ ++ ++ Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.
+With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.
"; + + private async Task OnPromptRequestAsync(PromptRequestedEventArgs args) + { + await Task.Delay(1000); + string defaultResponse = "For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration."; + await inlineAssist.UpdateResponseAsync(defaultResponse); + } + + private async Task OnItemSelectAsync(ResponseItemSelectEventArgs args) + { + if (args.Item.Label == "Accept") + { + var lastPrompt = inlineAssist?.Prompts.LastOrDefault(); + if (lastPrompt != null && !string.IsNullOrEmpty(lastPrompt.Response)) + { + editableContent = $"{lastPrompt.Response}
"; + } + await inlineAssist!.HidePopupAsync(); + } + else if (args.Item.Label == "Discard") + { + await inlineAssist!.HidePopupAsync(); + } + } + + private async Task OnSummarizeClick() + { + await inlineAssist.ShowPopupAsync(); + } + + private async Task OnResponseModeChangeAsync(ChangeEventArgs args) + { + if (Enum.TryParse(args.Value?.ToString(), out var mode)) + { + currentResponseMode = mode; + await InvokeAsync(StateHasChanged); + await inlineAssist.ShowPopupAsync(); + } + } +} +``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "(https://blazorplayground.syncfusion.com/embed/BjhTCNsCMKFGRhuU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5)" backgroundimage "[Blazor Inline AI Assist response modes](./images/inline-ai-assist-response-modes.webp)" %} + +> **Note:** Starting from version 33.1x, when a user submits a prompt to the Inline AI Assist, the component automatically scrolls and focuses on the latest prompt and response. This behavior eliminates the need for users to manually scroll down to see the new response, ensuring they always view the most recent AI response without interruption. Prior to version 33.1x, the previous responses remained visible when new responses were added. diff --git a/blazor/inline-ai-assist/getting-started.md b/blazor/inline-ai-assist/getting-started.md new file mode 100644 index 0000000000..d9138e0717 --- /dev/null +++ b/blazor/inline-ai-assist/getting-started.md @@ -0,0 +1,319 @@ +--- +layout: post +title: Getting Started with Blazor Inline AI Assist Component | Syncfusion® +description: Checkout and learn about getting started with Blazor Inline AI Assist component in Blazor WebAssembly App. +platform: Blazor +control: Inline AI Assist +documentation: ug +--- + +# Getting Started with Blazor Inline AI Assist Component + +This section briefly explains about how to include Syncfusion® Blazor Inline AI Assist component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +## Prerequisites + +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) + +## Create a new Blazor App in Visual Studio + +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +## Prerequisites + +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) + +## Create a new Blazor App in Visual Studio Code + +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. + +Alternatively, create a WebAssembly application by using the following command in the integrated terminal (Ctrl+`). + +{% tabs %} + +{% highlight c# tabtitle="Blazor WASM App" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} + +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + +## Install Syncfusion® Blazor packages + +Install [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. + +Alternatively, run the following commands in the Package Manager Console to achieve the same. + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Syncfusion.Blazor.InteractiveChat -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. + +## Add import namespaces + +After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InteractiveChat` namespaces. + +{% tabs %} +{% highlight C# tabtitle="~/_Imports.razor" %} + +@using Syncfusion.Blazor +@using Syncfusion.Blazor.InteractiveChat + +{% endhighlight %} +{% endtabs %} + +## Register Syncfusion® Blazor service + +Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor WebAssembly App. + +{% tabs %} +{% highlight C# tabtitle="Program.cs" %} + +.... +using Syncfusion.Blazor; +.... +builder.Services.AddSyncfusionBlazor(); +.... + +{% endhighlight %} +{% endtabs %} + +## Add stylesheet and script resources + +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file. + +```html + + +.... + + +``` + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. + +## Add Syncfusion® Blazor Inline AI Assist component + +Add the Syncfusion® Inline AI Assist component to your application and render it on the page using a functional component. Use the `relateTo` property to position the Inline AI Assist relative to a specific DOM element, and the `target` property to specify the element where the component should be appended. Both properties accept either a CSS selector string (for example, .container or #id) or an HTMLElement instance. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +```razor +@using Syncfusion.Blazor.InteractiveChat + + + + + + ++ +@code { + private SfInlineAIAssist inlineAssist = new(); + + private async Task PromptRequest(PromptRequestedEventArgs args) + { + await Task.Delay(1000); + + string defaultResponse = + "For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration."; + + await inlineAssist.UpdateResponseAsync(defaultResponse); + } + + private async Task ShowPopup() + { + await inlineAssist.ShowPopupAsync(); + } +} +``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "(https://blazorplayground.syncfusion.com/embed/BjhTCNsCMKFGRhuU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5)" backgroundimage "[Blazor Inline AI Assist sample](./images/inline-ai-assist-sample.webp)" %} + +To launch the application, press Ctrl+F5 in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion® Blazor Inline AI Assist component in the default web browser. + +## Response display modes + +Responses can be shown in two modes: `Inline` (updates content in-place) and `Popup` (shows responses in a floating popup). Toggle this behavior with the `responseMode` property. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +```razor +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Buttons + + +++ ++ Inline AI Assist component provides intelligent text processing + capabilities that enhance user productivity. It leverages advanced + natural language processing to understand context and deliver + precise suggestions. Users can seamlessly integrate AI-powered + features into their applications. +
++ With real-time response streaming and customizable prompts, + developers can create interactive experiences. The component + supports multiple response modes including inline editing and + popup-based interactions. +
++ +++ +@code { + private SfInlineAIAssist inlineAssist = new SfInlineAIAssist(); + private ResponseDisplayMode currentResponseMode = ResponseDisplayMode.Popup; + private string editableContent = @"+ + ++Content Summarize ++ @((MarkupString)editableContent) ++ ++ ++ Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.
+With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.
"; + + private async Task OnPromptRequestAsync(PromptRequestedEventArgs args) + { + await Task.Delay(1000); + string defaultResponse = "For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration."; + await inlineAssist.UpdateResponseAsync(defaultResponse); + } + + private async Task OnItemSelectAsync(ResponseItemSelectEventArgs args) + { + if (args.Item.Label == "Accept") + { + var lastPrompt = inlineAssist?.Prompts.LastOrDefault(); + if (lastPrompt != null && !string.IsNullOrEmpty(lastPrompt.Response)) + { + editableContent = $"{lastPrompt.Response}
"; + } + await inlineAssist!.HidePopupAsync(); + } + else if (args.Item.Label == "Discard") + { + await inlineAssist!.HidePopupAsync(); + } + } + + private async Task OnSummarizeClick() + { + await inlineAssist.ShowPopupAsync(); + } + + private async Task OnResponseModeChangeAsync(ChangeEventArgs args) + { + if (Enum.TryParse(args.Value?.ToString(), out var mode)) + { + currentResponseMode = mode; + await InvokeAsync(StateHasChanged); + await inlineAssist.ShowPopupAsync(); + } + } +} +``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "(https://blazorplayground.syncfusion.com/embed/BjhTCNsCMKFGRhuU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5)" backgroundimage "[Blazor Inline AI Assist response modes](./images/inline-ai-assist-response-modes.webp)" %} + +> **Note:** Starting from version 33.1x, when a user submits a prompt to the Inline AI Assist, the component automatically scrolls and focuses on the latest prompt and response. This behavior eliminates the need for users to manually scroll down to see the new response, ensuring they always view the most recent AI response without interruption. Prior to version 33.1x, the previous responses remained visible when new responses were added. + diff --git a/blazor/inline-ai-assist/globalization.md b/blazor/inline-ai-assist/globalization.md new file mode 100644 index 0000000000..5b42601568 --- /dev/null +++ b/blazor/inline-ai-assist/globalization.md @@ -0,0 +1,27 @@ +--- +layout: post +title: Globalization in Blazor Inline AI Assist Control | Syncfusion +description: Checkout and learn about Globalization with Blazor Inline AI Assist component in Blazor Server App and Blazor WebAssembly App. +platform: Blazor +control: Inline AI Assist +documentation: ug +--- + +# Globalization in Blazor Inline AI Assist control + +## Localization + +The Inline AI Assist can be localized to any culture by defining the text of the Inline AI Assist in the corresponding culture. The default locale is `en` (English). The following table represents the default text of the Inline AI Assist in `en` culture. + +|KEY|Text| +|----|----| +|send|Send| +|stopResponseText|Stop Responding| +|thinkingIndicator|Thinking| +|editingIndicator|Editing| + +Refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) documentation for detailed steps on implementing localization in Blazor components. + +## RTL + +The Right-to-Left (RTL) feature reverses the component's layout and text direction to support languages that are read from right to left, such as Arabic or Hebrew. Refer to [Blazor RTL](https://blazor.syncfusion.com/documentation/common/right-to-left) topic to provide RTL support for the Syncfusion® Blazor components. \ No newline at end of file diff --git a/blazor/inline-ai-assist/how-to/integration-with-ai.md b/blazor/inline-ai-assist/how-to/integration-with-ai.md new file mode 100644 index 0000000000..2bae358cb4 --- /dev/null +++ b/blazor/inline-ai-assist/how-to/integration-with-ai.md @@ -0,0 +1,126 @@ +--- +layout: post +title: Integration | Blazor Inline AI Assist component | Syncfusion® +description: Checkout and learn about Integration with Microsoft.Extensions.AI and Keyboard interaction with Blazor Inline AI Assist component and more details. +platform: Blazor +control: Inline AI Assist +documentation: ug +--- + +# Integration of Microsoft.Extensions.AI with Inline AI Assist component + +The Inline AI Assist component supports integration with the `Microsoft.Extensions.AI` framework, enabling seamless communication with various large language models (LLMs) such as `Azure OpenAI`, `OpenAI`, and more. + +`Microsoft.Extensions.AI` simplifies integration with different providers and typically requires only minimal configuration changes based on the selected model. The following example demonstrates integration using `Azure OpenAI`. + +N> The Microsoft AI extension libraries are currently in preview and may include breaking changes. Use compatible versions of all referenced packages to prevent integration issues. + +### Getting started with Inline AI Assist + +Before integrating `Inline AI Assist` with `Microsoft.Extensions.AI`, ensure the `SfAIAssistView` component is rendered by following the appropriate project guidelines: + +* [Blazor Web App](../getting-started-webapp) +* [Blazor WASM App](../getting-started) + +### Prerequisites for Microsoft.Extensions.AI integration + +To add the required NuGet packages, use the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install the following packages: + +* `Azure.AI.OpenAI` +* `Azure.Identity` +* `Microsoft.Extensions.AI` +* `Microsoft.Extensions.AI.OpenAI` +* `Markdig` + +Alternatively, run the following commands in your terminal: + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +dotnet add package Azure.AI.OpenAI +dotnet add package Azure.Identity +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI +dotnet add package Markdig + +{% endhighlight %} +{% endtabs %} + +### Configure services in Program.cs + +Register the `Azure OpenAI` client and the Inline AI Assist component within the Blazor application. + +{% tabs %} +{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} + +using Syncfusion.Blazor; +using Microsoft.Extensions.AI; +using Azure.AI.OpenAI; +using Azure; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents(); + +// Set Azure OpenAI configuration +var endpoint = "https://azure-testresource.openai.azure.com"; +var apiKey = "YOUR_API_KEY"; // Replace with your actual key; +var deploymentName = "gpt-4o-mini"; + +var credential = new AzureKeyCredential(apiKey); + +// Register Azure OpenAI chat client +builder.Services.AddChatClient( + new AzureOpenAIClient(new Uri(endpoint), credential) + .GetChatClient(deploymentName) + .AsIChatClient() +); + +// Register Blazor components +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); + +{% endhighlight %} +{% endtabs %} + +### Inline AI Assist with IChatClient + +The Inline AI Assist component is designed to integrate seamlessly with external AI services. When an `IChatClient` is registered via Microsoft.Extensions.AI, the component automatically uses it to process user prompts without additional component configuration. + +In the following example, user input is sent to the injected `IChatClient`. The AI model’s response is returned in Markdown, converted to HTML using the `Markdig` library, and rendered in the Inline AI Assist component. + +{% tabs %} +{% highlight razor %} + +@rendermode InteractiveServer + +@using Syncfusion.Blazor.InteractiveChat +@using Microsoft.Extensions.AI +@using Markdig; +@using System.Text.RegularExpressions; +@inject IChatClient ChatClient + + ++ +@code { + + private async Task OnPromptRequested(AssistViewPromptRequestedEventArgs args) + { + // Send the user’s prompt to the AI model + var chatResponse = await ChatClient.GetResponseAsync(args.Prompt, new ChatOptions()); + // Convert markdown to HTML + var htmlContent = Markdown.ToHtml(chatResponse.Text); + // Clean up extra whitespace + htmlContent = Regex.Replace(htmlContent, @"\s+", " ").Trim(); + // Set the cleaned HTML as the response + args.Response = htmlContent; + } +} + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/blazor/inline-ai-assist/images/add-response.webp b/blazor/inline-ai-assist/images/add-response.webp new file mode 100644 index 0000000000..aadfd1b148 Binary files /dev/null and b/blazor/inline-ai-assist/images/add-response.webp differ diff --git a/blazor/inline-ai-assist/images/command-settings.webp b/blazor/inline-ai-assist/images/command-settings.webp new file mode 100644 index 0000000000..a7e901c387 Binary files /dev/null and b/blazor/inline-ai-assist/images/command-settings.webp differ diff --git a/blazor/inline-ai-assist/images/editor-template.webp b/blazor/inline-ai-assist/images/editor-template.webp new file mode 100644 index 0000000000..0a65952e81 Binary files /dev/null and b/blazor/inline-ai-assist/images/editor-template.webp differ diff --git a/blazor/inline-ai-assist/images/execute-prompt.webp b/blazor/inline-ai-assist/images/execute-prompt.webp new file mode 100644 index 0000000000..55c793cfef Binary files /dev/null and b/blazor/inline-ai-assist/images/execute-prompt.webp differ diff --git a/blazor/inline-ai-assist/images/gemini-ai.webp b/blazor/inline-ai-assist/images/gemini-ai.webp new file mode 100644 index 0000000000..bf66217333 Binary files /dev/null and b/blazor/inline-ai-assist/images/gemini-ai.webp differ diff --git a/blazor/inline-ai-assist/images/inline-ai-assist-response-modes.webp b/blazor/inline-ai-assist/images/inline-ai-assist-response-modes.webp new file mode 100644 index 0000000000..045063efd5 Binary files /dev/null and b/blazor/inline-ai-assist/images/inline-ai-assist-response-modes.webp differ diff --git a/blazor/inline-ai-assist/images/inline-ai-assist-sample.webp b/blazor/inline-ai-assist/images/inline-ai-assist-sample.webp new file mode 100644 index 0000000000..e7035d4f9e Binary files /dev/null and b/blazor/inline-ai-assist/images/inline-ai-assist-sample.webp differ diff --git a/blazor/inline-ai-assist/images/inline-assist.webp b/blazor/inline-ai-assist/images/inline-assist.webp new file mode 100644 index 0000000000..0ff4b4d2ce Binary files /dev/null and b/blazor/inline-ai-assist/images/inline-assist.webp differ diff --git a/blazor/inline-ai-assist/images/lite-llm-ai.webp b/blazor/inline-ai-assist/images/lite-llm-ai.webp new file mode 100644 index 0000000000..113f8c4b66 Binary files /dev/null and b/blazor/inline-ai-assist/images/lite-llm-ai.webp differ diff --git a/blazor/inline-ai-assist/images/llm-integration.webp b/blazor/inline-ai-assist/images/llm-integration.webp new file mode 100644 index 0000000000..f155055826 Binary files /dev/null and b/blazor/inline-ai-assist/images/llm-integration.webp differ diff --git a/blazor/inline-ai-assist/images/openai-integration.webp b/blazor/inline-ai-assist/images/openai-integration.webp new file mode 100644 index 0000000000..b2755c9e40 Binary files /dev/null and b/blazor/inline-ai-assist/images/openai-integration.webp differ diff --git a/blazor/inline-ai-assist/images/response-settings.webp b/blazor/inline-ai-assist/images/response-settings.webp new file mode 100644 index 0000000000..67f17deea6 Binary files /dev/null and b/blazor/inline-ai-assist/images/response-settings.webp differ diff --git a/blazor/inline-ai-assist/images/response-template.webp b/blazor/inline-ai-assist/images/response-template.webp new file mode 100644 index 0000000000..55ad155e07 Binary files /dev/null and b/blazor/inline-ai-assist/images/response-template.webp differ diff --git a/blazor/inline-ai-assist/images/show-hide-commandpopup.webp b/blazor/inline-ai-assist/images/show-hide-commandpopup.webp new file mode 100644 index 0000000000..c100013cff Binary files /dev/null and b/blazor/inline-ai-assist/images/show-hide-commandpopup.webp differ diff --git a/blazor/inline-ai-assist/images/show-hide-popup.webp b/blazor/inline-ai-assist/images/show-hide-popup.webp new file mode 100644 index 0000000000..9419631788 Binary files /dev/null and b/blazor/inline-ai-assist/images/show-hide-popup.webp differ diff --git a/blazor/inline-ai-assist/images/toolbar-position.webp b/blazor/inline-ai-assist/images/toolbar-position.webp new file mode 100644 index 0000000000..901a8427f0 Binary files /dev/null and b/blazor/inline-ai-assist/images/toolbar-position.webp differ diff --git a/blazor/inline-ai-assist/images/toolbar-settings.webp b/blazor/inline-ai-assist/images/toolbar-settings.webp new file mode 100644 index 0000000000..e8f915e84e Binary files /dev/null and b/blazor/inline-ai-assist/images/toolbar-settings.webp differ diff --git a/blazor/inline-ai-assist/inline-toolbar.md b/blazor/inline-ai-assist/inline-toolbar.md new file mode 100644 index 0000000000..5c28fa629f --- /dev/null +++ b/blazor/inline-ai-assist/inline-toolbar.md @@ -0,0 +1,262 @@ +--- +layout: post +title: Inline toolbar in Blazor InlineAIAssist Control | Syncfusion +description: Checkout and learn about inline toolbar with Blazor Inline AI Assist component in Blazor Server App and Blazor WebAssembly App. +platform: Blazor +control: Inline AI Assist +documentation: ug +--- + +# Toolbar configuration in Blazor Inline AI Assist control + +You can render the inline toolbar items by using the `items` property in the `e-inlineaiassist-inlinetoolbarsettings` tag helper. + +## Configure the toolbar and positioning + +You can use the `toolbarPosition` property to customize footer toolbar position. It has two modes such as `Inline`, and `Bottom`. By default, the toolbarPosition is `Inline`. + +By settings toolbarPosition as `Bottom`, footer items will be rendered at the bottom with a dedicated footer area. + +{% tabs %} +{% highlight razor tabtitle="razor" %} + +```razor +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Buttons + + + ++ ++ +@code { + private SfInlineAIAssist inlineAssist = new SfInlineAIAssist(); + private ToolbarPosition currentToolbarPosition = ToolbarPosition.Bottom; + private string editableContent = @"Content Summarize +Toggle Toolbar Position ++ @((MarkupString)editableContent) ++ ++ ++ ++ @foreach (var item in toolbarItems) + { + ++ } + + Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.
+With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.
"; + + private ListtoolbarItems = new List + { + new InlineToolbarItem { Text = "Copy", IconCss = "e-icons e-copy", Tooltip = "Copy" }, + new InlineToolbarItem { Text = "Edit", IconCss = "e-icons e-edit", Tooltip = "Edit" } + }; + + private async Task OnPromptRequestAsync(PromptRequestedEventArgs args) + { + await Task.Delay(1000); + string defaultResponse = "For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration."; + await inlineAssist.UpdateResponseAsync(defaultResponse); + } + + private async Task OnItemSelectAsync(ResponseItemSelectEventArgs args) + { + if (args.Item.Label == "Accept") + { + var lastPrompt = inlineAssist?.Prompts.LastOrDefault(); + if (lastPrompt != null && !string.IsNullOrEmpty(lastPrompt.Response)) + { + editableContent = $" {lastPrompt.Response}
"; + } + await inlineAssist!.HidePopupAsync(); + } + else if (args.Item.Label == "Discard") + { + await inlineAssist!.HidePopupAsync(); + } + } + + private async Task OnToolbarItemClickAsync(ToolbarItemClickEventArgs args) + { + // Your required actions + } + + private async Task OnSummarizeClick() + { + await inlineAssist.ShowPopupAsync(); + } + + private void OnToggleToolbarPosition() + { + currentToolbarPosition = currentToolbarPosition == ToolbarPosition.Inline + ? ToolbarPosition.Bottom + : ToolbarPosition.Inline; + } +} +``` + +{% endhighlight %} +{% endtabs %} + + + +## Built-in toolbar items + +By default, the inline toolbar renders the `send` item which allows users to send the prompt text. + +## Adding custom items + +You can use the `inlineToolbarSettings` property to add custom items for the inline toolbar in the Inline AI Assist. The custom items will be added with the existing built-in items in the inline toolbar. + +Each toolbar item object can include the following properties: + +| Property | Type | Default | Description | +|-------------|---------|----------|--------------------------------------------------------------------| +| `iconCss` | string | '' | Specifies the CSS class for the item's icon. | +| `type` | string | 'Button' | Supports three types of items: `Button`, `Separator`, and `Input`. | +| `text` | string | '' | Specifies the text label for the toolbar item. | +| `template` | string | '' | Specifies a custom template for the toolbar item. | +| `visible` | boolean | true | Specifies whether to show or hide the toolbar item. | +| `id` | string | '' | Specifies a unique identifier for the toolbar item. | +| `disabled` | boolean | false | Specifies whether the toolbar item is disabled and unselectable. | +| `tooltip` | string | '' | Specifies the tooltip text displayed on hover. | +| `cssClass` | string | '' | Specifies custom CSS classes for styling the toolbar item. | +| `align` | string | 'Left' | Specifies the alignment of the toolbar item (Left, Center, Right). | +| `tabIndex` | number | -1 | Specifies the tab order for keyboard navigation. | + +Below sample demonstrates the usage of custom toolbar items in Inline Assist control. + +{% tabs %} +{% highlight razor tabtitle="razor" %} + +```razor +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Buttons + + + +++ +@code { + private SfInlineAIAssist inlineAssist = new SfInlineAIAssist(); + private string editableContent = @"Content Summarize ++ @((MarkupString)editableContent) ++ ++ ++ ++ @foreach (var item in toolbarItems) + { + ++ } + + Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.
+With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.
"; + + private ListtoolbarItems = new List + { + new InlineToolbarItem { Text = "Copy", IconCss = "e-icons e-copy", Tooltip = "Copy" }, + new InlineToolbarItem { Text = "Edit", IconCss = "e-icons e-edit", Tooltip = "Edit" } + }; + + private async Task OnPromptRequestAsync(PromptRequestedEventArgs args) + { + await Task.Delay(1000); + string defaultResponse = "For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration."; + await inlineAssist.UpdateResponseAsync(defaultResponse); + } + + private async Task OnItemSelectAsync(ResponseItemSelectEventArgs args) + { + if (args.Item.Label == "Accept") + { + var lastPrompt = inlineAssist?.Prompts.LastOrDefault(); + if (lastPrompt != null && !string.IsNullOrEmpty(lastPrompt.Response)) + { + editableContent = $" {lastPrompt.Response}
"; + } + await inlineAssist!.HidePopupAsync(); + } + else if (args.Item.Label == "Discard") + { + await inlineAssist!.HidePopupAsync(); + } + } + + private async Task OnToolbarItemClickAsync(ToolbarItemClickEventArgs args) + { + // Your required actions + } + + private async Task OnSummarizeClick() + { + await inlineAssist.ShowPopupAsync(); + } +} +``` + +{% endhighlight %} +{% endtabs %} + + + +## Toolbar itemClick event + +The `itemClick` event is triggered when the inline toolbar item is clicked. + +```cshtml + +++ + + +``` \ No newline at end of file diff --git a/blazor/inline-ai-assist/methods.md b/blazor/inline-ai-assist/methods.md new file mode 100644 index 0000000000..dca7480dab --- /dev/null +++ b/blazor/inline-ai-assist/methods.md @@ -0,0 +1,356 @@ +--- +layout: post +title: Methods in Blazor Inline AI Assist Control | Syncfusion +description: Checkout and learn about Methods with Blazor Inline AI Assist component in Blazor Server App and Blazor WebAssembly App. +platform: Blazor +control: Inline AI Assist +documentation: ug +--- + +# Methods in Blazor Inline AI Assist control + +## Adding response + +You can use the `addResponse` public method to add the response to the Inline AI Assist. + +{% tabs %} +{% highlight razor tabtitle="razor" %} + +```razor +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Buttons + + + ++ ++ ++ +@code { + private SfInlineAIAssist inlineAssist = new SfInlineAIAssist(); + private string editableContent = @"Add Response ++ @((MarkupString)editableContent) ++ ++ ++ Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.
+With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.
"; + + private async Task OnPromptRequestAsync(PromptRequestedEventArgs args) + { + await Task.Delay(1000); + string defaultResponse = "For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration."; + await inlineAssist.UpdateResponseAsync(defaultResponse); + } + + private async Task OnItemSelectAsync(ResponseItemSelectEventArgs args) + { + if (args.Item.Label == "Accept") + { + var lastPrompt = inlineAssist?.Prompts.LastOrDefault(); + if (lastPrompt != null && !string.IsNullOrEmpty(lastPrompt.Response)) + { + editableContent = $"{lastPrompt.Response}
"; + } + await inlineAssist!.HidePopupAsync(); + } + else if (args.Item.Label == "Discard") + { + await inlineAssist!.HidePopupAsync(); + } + } + + private async Task OnAddResponseClickAsync() + { + await inlineAssist.ShowPopupAsync(); + await inlineAssist.UpdateResponseAsync("Dynamic response"); + } +} +``` + +{% endhighlight %} +{% endtabs %} + + + +## Executing prompt + +You can use the `executePrompt` method to execute the prompts dynamically in the Inline AI Assist. It accepts prompts as string values, which triggers the `promptRequest` event and performs the callback actions. + +{% tabs %} +{% highlight razor tabtitle="razor" %} + +```razor +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Buttons + + + +++ +@code { + private SfInlineAIAssist inlineAssist = new SfInlineAIAssist(); + private string editableContent = @"Execute Prompt ++ @((MarkupString)editableContent) ++ ++ ++ Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.
+With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.
"; + + private async Task OnPromptRequestAsync(PromptRequestedEventArgs args) + { + await Task.Delay(1000); + string defaultResponse = "For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration."; + await inlineAssist.UpdateResponseAsync(defaultResponse); + } + + private async Task OnItemSelectAsync(ResponseItemSelectEventArgs args) + { + if (args.Item.Label == "Accept") + { + var lastPrompt = inlineAssist?.Prompts.LastOrDefault(); + if (lastPrompt != null && !string.IsNullOrEmpty(lastPrompt.Response)) + { + editableContent = $"{lastPrompt.Response}
"; + } + await inlineAssist!.HidePopupAsync(); + } + else if (args.Item.Label == "Discard") + { + await inlineAssist!.HidePopupAsync(); + } + } + + private async Task OnExecutePromptClickAsync() + { + await inlineAssist.ShowPopupAsync(); + await inlineAssist.ExecutePromptAsync("What is the current temperature?"); + } +} +``` + +{% endhighlight %} +{% endtabs %} + + + +## Showing popup + +You can use `showPopup` method to open the Inline AI Assist popup and optionally position it at specified coordinates. + +## Hiding popup + +You can use `hidePopup` method to close the Inline AI Assist popup. + +{% tabs %} +{% highlight razor tabtitle="razor" %} + +```razor +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Buttons + + + +++ +@code { + private SfInlineAIAssist inlineAssist = new SfInlineAIAssist(); + private string editableContent = @"Show Popup +Hide Popup ++ @((MarkupString)editableContent) ++ ++ ++ Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.
+With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.
"; + + private async Task OnPromptRequestAsync(PromptRequestedEventArgs args) + { + await Task.Delay(1000); + string defaultResponse = "For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration."; + await inlineAssist.UpdateResponseAsync(defaultResponse); + } + + private async Task OnItemSelectAsync(ResponseItemSelectEventArgs args) + { + if (args.Item.Label == "Accept") + { + var lastPrompt = inlineAssist?.Prompts.LastOrDefault(); + if (lastPrompt != null && !string.IsNullOrEmpty(lastPrompt.Response)) + { + editableContent = $"{lastPrompt.Response}
"; + } + await inlineAssist!.HidePopupAsync(); + } + else if (args.Item.Label == "Discard") + { + await inlineAssist!.HidePopupAsync(); + } + } + + private async Task OnShowPopupClickAsync() + { + await inlineAssist.ShowPopupAsync(); + } + + private async Task OnHidePopupClickAsync() + { + await inlineAssist.HidePopupAsync(); + } +} +``` + +{% endhighlight %} +{% endtabs %} + + + +## Showing command popup + +Use `showCommandPopup` to open the command action popup; it only opens when the Inline AI Assist popup is already opened. + +## Hiding command popup + +You can use `hideCommandPopup` to close the command action popup in the Inline AI Assist control. + +{% tabs %} +{% highlight razor tabtitle="razor" %} + +```razor +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Buttons + + + +++ +@code { + private SfInlineAIAssist inlineAssist = new SfInlineAIAssist(); + private bool showPopup = false; + private string editableContent = @"Show Command Popup +Hide Command Popup ++ @((MarkupString)editableContent) ++ ++ ++ + Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.
+With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.
"; + + private ListcommandItems = new List + { + new CommandItem { Label = "Summarize", Prompt = "Summarize the content" }, + new CommandItem { Label = "Shorten", Prompt = "Shorten the content" }, + new CommandItem { Label = "Translate", Prompt = "Translate the content" }, + new CommandItem { Label = "Make professional", Prompt = "Make the content more professional" } + }; + + private async Task OnPromptRequestAsync(PromptRequestedEventArgs args) + { + await Task.Delay(1000); + string defaultResponse = "For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration."; + await inlineAssist.UpdateResponseAsync(defaultResponse); + } + + private async Task OnItemSelectAsync(ResponseItemSelectEventArgs args) + { + if (args.Item.Label == "Accept") + { + var lastPrompt = inlineAssist?.Prompts.LastOrDefault(); + if (lastPrompt != null && !string.IsNullOrEmpty(lastPrompt.Response)) + { + editableContent = $" {lastPrompt.Response}
"; + } + await inlineAssist!.HidePopupAsync(); + } + else if (args.Item.Label == "Discard") + { + await inlineAssist!.HidePopupAsync(); + } + } + + private async Task OnClosedAsync() + { + if (showPopup) + { + await inlineAssist.ShowPopupAsync(); + } + } + + private async Task OnShowCommandPopupClickAsync() + { + showPopup = true; + await inlineAssist.ShowPopupAsync(); + await inlineAssist.ShowCommandPopupAsync(); + } + + private async Task OnHideCommandPopupClickAsync() + { + showPopup = false; + await inlineAssist.HideCommandPopupAsync(); + } +} +``` +{% endhighlight %} +{% endtabs %} + + \ No newline at end of file diff --git a/blazor/inline-ai-assist/response-settings.md b/blazor/inline-ai-assist/response-settings.md new file mode 100644 index 0000000000..5092026327 --- /dev/null +++ b/blazor/inline-ai-assist/response-settings.md @@ -0,0 +1,124 @@ +--- +layout: post +title: Response actions in Blazor Inline AI Assist Control | Syncfusion +description: Checkout and learn about Response items with Blazor Inline AI Assist component in Blazor Server App and Blazor WebAssembly App. +platform: Blazor +control: Inline AI Assist +documentation: ug +--- + +# Response actions in ##Platform_Name## Inline AI Assist control + +You can render response action popup by using `items` property in the `e-inlineaiassist-responsesettings` tag helper. + +## Built-in response items + +By default, the response popup displays the built-in `accept` and `discard` items, allowing users to accept or discard the response. The response action popup is shown after a response is generated. This feature enables users to accept, discard, or perform custom actions on AI-generated responses. + +Built-in items appear by default and cannot be removed, but custom items can be added alongside them. + +## Custom response item configuration + +You can use the `responseSettings` property to add custom items for the response popup in Inline AI Assist. The custom items will be added with the existing built-in items in the response popup. The custom items will be displayed together with the existing built-in items in the response popup. + +Each response item object can include the following properties: + +| Property | Type | Default | Description | +|-------------|---------|---------|------------------------------------------------------------------| +| label | string | '' | Specifies the display label of the response item. | +| iconCss | string | '' | Specifies the CSS class for the item's icon. | +| disabled | boolean | false | Specifies whether the response item is disabled and unselectable.| +| groupBy | string | '' | Specifies the group category for organizing related items. | +| id | string | '' | Specifies a unique identifier for the response item. | +| tooltip | string | '' | Specifies the tooltip text displayed on hover. | + +## Response interactions + +The `itemSelect` event is triggered when an item is selected from the response popup in the Inline AI Assist control. + +The below example demonstrates the `ResponseSettings` property + +{% tabs %} +{% highlight razor tabtitle="razor" %} + +```razor +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Buttons + + + +++ +@code { + private SfInlineAIAssist inlineAssist = new SfInlineAIAssist(); + private string editableContent = @"Content Summarize ++ @((MarkupString)editableContent) ++ ++ ++ Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.
+With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.
"; + + private ListresponseItems = new List + { + new ResponseItem { Label = "Regenerate", IconCss = "e-icons e-refresh", Tooltip = "Regenerate" }, + new ResponseItem { Label = "Copy", IconCss = "e-icons e-copy", Tooltip = "Copy" } + }; + + private async Task OnPromptRequestAsync(PromptRequestedEventArgs args) + { + await Task.Delay(1000); + string defaultResponse = "For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration."; + await inlineAssist.UpdateResponseAsync(defaultResponse); + } + + private async Task OnItemSelectAsync(ResponseItemSelectEventArgs args) + { + // Your required action here + if (args.Item.Label == "Accept") + { + var lastPrompt = inlineAssist?.Prompts.LastOrDefault(); + if (lastPrompt != null && !string.IsNullOrEmpty(lastPrompt.Response)) + { + editableContent = $" {lastPrompt.Response}
"; + } + await inlineAssist!.HidePopupAsync(); + } + else if (args.Item.Label == "Discard") + { + await inlineAssist!.HidePopupAsync(); + } + } + + private async Task OnSummarizeClick() + { + await inlineAssist.ShowPopupAsync(); + } +} +``` + +{% endhighlight %} +{% endtabs %} + + + +## See Also + +- [Command Settings](./command-settings.md) +- [Inline Toolbar](./inline-toolbar.md) +- [Events Documentation](./events.md) \ No newline at end of file diff --git a/blazor/inline-ai-assist/templates.md b/blazor/inline-ai-assist/templates.md new file mode 100644 index 0000000000..213e24daac --- /dev/null +++ b/blazor/inline-ai-assist/templates.md @@ -0,0 +1,252 @@ +--- +layout: post +title: Templates in Blazor Inline AI Assist Control | Syncfusion +description: Checkout and learn about Templates with Blazor Inline AI Assist component in Blazor Server App and Blazor WebAssembly App. +platform: Blazor +control: Inline AI Assist +documentation: ug +--- + +# Templates in Blazor Inline AI Assist control + +The Inline AI Assist provides several template options to customize the response and footer items. + +## Editor template + +You can use the `editorTemplate` property to customize the default footer area and manage prompt request actions in the Inline AI Assist. This allows users to create unique footers that meet their specific needs. + +{% tabs %} +{% highlight razor tabtitle="razor" %} + +```cshtml +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Buttons + + + ++ + ++ +@code { + private SfInlineAIAssist inlineAssist = new(); + private ElementReference editableTextRef; + private string promptText = string.Empty; + + private async Task OnSummarizeClickAsync() + { + await inlineAssist.ShowPopupAsync(); + } + + private async Task OnGenerateClickAsync() + { + if (!string.IsNullOrWhiteSpace(promptText)) + { + var prompt = promptText; + promptText = string.Empty; + await inlineAssist.ExecutePromptAsync(prompt); + } + } + + private async Task OnPromptRequestAsync(PromptRequestedEventArgs args) + { + await Task.Delay(1000); + var defaultResponse = "For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration."; + await inlineAssist.UpdateResponseAsync(defaultResponse); + } + + private async Task OnResponseItemSelectAsync(ResponseItemSelectEventArgs args) + { + if (args.Item.Label == "Accept") + { + var lastPrompt = inlineAssist.Prompts.LastOrDefault(); + if (lastPrompt != null && !string.IsNullOrEmpty(lastPrompt.Response)) + { + await JSRuntime.InvokeVoidAsync("eval", + $"document.getElementById('editableText').innerHTML = '+ Content Summarize + + + +++ +Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. + It leverages advanced natural language processing to understand context and deliver precise suggestions. + Users can seamlessly integrate AI-powered features into their applications.
+With real-time response streaming and customizable prompts, developers can create interactive experiences. + The component supports multiple response modes including inline editing and popup-based interactions.
++ ++ + ++ ++ {lastPrompt.Response}
'"); + } + await inlineAssist.HidePopupAsync(); + } + else if (args.Item.Label == "Discard") + { + await inlineAssist.HidePopupAsync(); + } + } +} +``` + +{% endhighlight %} +{% endtabs %} + + + +## Response template + +You can use the `responseTemplate` property to customize response items within the Inline AI Assist. The template context includes the `response` and `toolbarItems` values. + +```cshtml +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Buttons + + + ++ ++ +@code { + private SfInlineAIAssist inlineAssist = new(); + + private async Task OnSummarizeClickAsync() + { + await inlineAssist.ShowPopupAsync(); + } + + private async Task OnPromptRequestAsync(PromptRequestedEventArgs args) + { + await Task.Delay(1000); + var defaultResponse = "For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration."; + await inlineAssist.UpdateResponseAsync(defaultResponse); + } + + private async Task OnItemSelectAsync(ResponseItemSelectEventArgs args) + { + if (args.Item.Label == "Accept") + { + var lastPrompt = inlineAssist.Prompts.LastOrDefault(); + if (lastPrompt != null && !string.IsNullOrEmpty(lastPrompt.Response)) + { + await JSRuntime.InvokeVoidAsync("eval", + $"document.getElementById('editableText').innerHTML = '+ Content Summarize + + + +++ +Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. + It leverages advanced natural language processing to understand context and deliver precise suggestions. + Users can seamlessly integrate AI-powered features into their applications.
+With real-time response streaming and customizable prompts, developers can create interactive experiences. + The component supports multiple response modes including inline editing and popup-based interactions.
++ ++ ++ + ++++ + Inline AI Assist +++ @((MarkupString)(context.Response ?? string.Empty)) ++{lastPrompt.Response}
'"); + } + await inlineAssist.HidePopupAsync(); + } + else if (args.Item.Label == "Discard") + { + await inlineAssist.HidePopupAsync(); + } + } +} +``` + + \ No newline at end of file