diff --git a/ej2-asp-core-mvc/Release-notes/31.1.22.md b/ej2-asp-core-mvc/Release-notes/31.1.22.md new file mode 100644 index 0000000000..fdf00cc603 --- /dev/null +++ b/ej2-asp-core-mvc/Release-notes/31.1.22.md @@ -0,0 +1,97 @@ +--- +title: Essential Studio® for ##Platform_Name## Release Notes - v31.1.22 +description: Learn here about the controls in the Essential Studio® for ##Platform_Name## Weekly Release - Release Notes - v31.1.22 +platform: ej2-asp-core-mvc +documentation: ug +--- + +# Essential Studio® for ##Platform_Name## - v31.1.22 Release Notes + +{% include release-info.html date="October 01, 2025" version="v31.1.22" passed="61802" failed="0" %} + +{% directory path: _includes/release-notes/v31.1.22 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + +| Component Name | Test Cases | Passed | Failed | Remarks | +|---------------|------------|--------|--------|---------| +| 3D Chart | 232 | 232 | 0 | All Passed | +| 3D Circular Chart | 374 | 374 | 0 | All Passed | +| Accordion | 205 | 205 | 0 | All Passed | +| AI Assist View | 431 | 431 | 0 | All Passed | +| App Bar | 67 | 67 | 0 | All Passed | +| AutoComplete | 200 | 200 | 0 | All Passed | +| Breadcrumb | 160 | 160 | 0 | All Passed | +| Bullet Chart | 164 | 164 | 0 | All Passed | +| Button | 144 | 144 | 0 | All Passed | +| ButtonGroup | 120 | 120 | 0 | All Passed | +| calendar | 177 | 177 | 0 | All Passed | +| Carousel | 61 | 61 | 0 | All Passed | +| Chart | 4605 | 4605 | 0 | All Passed | +| Chat UI | 184 | 184 | 0 | All Passed | +| CircularGauge | 429 | 429 | 0 | All Passed | +| ColorPicker | 130 | 130 | 0 | All Passed | +| Combo Box | 136 | 136 | 0 | All Passed | +| Common | 904 | 904 | 0 | All Passed | +| Context Menu | 105 | 105 | 0 | All Passed | +| Data Grid | 2800 | 2800 | 0 | All Passed | +| Date Picker | 426 | 426 | 0 | All Passed | +| Date Range Picker | 519 | 519 | 0 | All Passed | +| Date Time Picker | 324 | 324 | 0 | All Passed | +| Diagram | 12813 | 12813 | 0 | All Passed | +| Dialog | 58 | 58 | 0 | All Passed | +| DropDown Button | 132 | 132 | 0 | All Passed | +| Dropdown List | 191 | 191 | 0 | All Passed | +| Dropdown Tree | 105 | 105 | 0 | All Passed | +| File Manager | 2187 | 2187 | 0 | All Passed | +| Floating Action Button | 132 | 132 | 0 | All Passed | +| Gantt | 3515 | 3515 | 0 | All Passed | +| HeatMap Chart | 635 | 635 | 0 | All Passed | +| Image Editor | 1653 | 1653 | 0 | All Passed | +| In-place Editor | 642 | 642 | 0 | All Passed | +| Kanban | 268 | 268 | 0 | All Passed | +| LinearGauge | 426 | 426 | 0 | All Passed | +| Listbox | 115 | 115 | 0 | All Passed | +| ListView | 84 | 84 | 0 | All Passed | +| Maps | 1368 | 1368 | 0 | All Passed | +| Mention | 35 | 35 | 0 | All Passed | +| Menu | 187 | 187 | 0 | All Passed | +| Multicolumn Combo Box | 254 | 254 | 0 | All Passed | +| Multiselect Dropdown | 390 | 390 | 0 | All Passed | +| OTP Input | 240 | 240 | 0 | All Passed | +| Pivot Table | 5298 | 5298 | 0 | All Passed | +| Progress Bar | 79 | 79 | 0 | All Passed | +| Progress Button | 132 | 132 | 0 | All Passed | +| Query Builder | 480 | 480 | 0 | All Passed | +| RadioButton | 36 | 36 | 0 | All Passed | +| RangeNavigator | 140 | 140 | 0 | All Passed | +| Rating | 198 | 198 | 0 | All Passed | +| Ribbon | 623 | 623 | 0 | All Passed | +| Rich Text Editor | 4564 | 4564 | 0 | All Passed | +| schedule | 4609 | 4609 | 0 | All Passed | +| sidebar | 88 | 88 | 0 | All Passed | +| Signature | 105 | 105 | 0 | All Passed | +| Skeleton | 144 | 144 | 0 | All Passed | +| Slider | 147 | 147 | 0 | All Passed | +| SmithChart | 49 | 49 | 0 | All Passed | +| Sparkline | 57 | 57 | 0 | All Passed | +| Speech To Text | 200 | 200 | 0 | All Passed | +| Speed Dial | 122 | 122 | 0 | All Passed | +| Split Button | 144 | 144 | 0 | All Passed | +| Stepper | 91 | 91 | 0 | All Passed | +| Stock Chart | 677 | 677 | 0 | All Passed | +| Tab | 69 | 69 | 0 | All Passed | +| Text Area | 107 | 107 | 0 | All Passed | +| TextBox | 54 | 54 | 0 | All Passed | +| Time Picker | 180 | 180 | 0 | All Passed | +| Timeline | 213 | 213 | 0 | All Passed | +| Toast | 139 | 139 | 0 | All Passed | +| Toolbar | 112 | 112 | 0 | All Passed | +| ToolTip | 136 | 136 | 0 | All Passed | +| TreeGrid | 3786 | 3786 | 0 | All Passed | +| Treemap | 326 | 326 | 0 | All Passed | +| Treeview | 370 | 370 | 0 | All Passed | \ No newline at end of file diff --git a/ej2-asp-core-mvc/Release-notes/31.2.2.md b/ej2-asp-core-mvc/Release-notes/31.2.2.md index 45e681115e..86e38e8eb2 100644 --- a/ej2-asp-core-mvc/Release-notes/31.2.2.md +++ b/ej2-asp-core-mvc/Release-notes/31.2.2.md @@ -7,7 +7,7 @@ documentation: ug # Essential Studio for ##Platform_Name## - v31.2.2 Release Notes -{% include release-info.html date="October 14, 2025" version="v31.2.2" passed="63079" failed="0" %} +{% include release-info.html date="October 15, 2025" version="v31.2.2" passed="63079" failed="0" %} {% directory path: _includes/release-notes/v31.2.2 %} diff --git a/ej2-asp-core-mvc/Release-notes/31.2.3.md b/ej2-asp-core-mvc/Release-notes/31.2.3.md new file mode 100644 index 0000000000..35304e6a60 --- /dev/null +++ b/ej2-asp-core-mvc/Release-notes/31.2.3.md @@ -0,0 +1,97 @@ +--- +title: Essential Studio for ##Platform_Name## Release Notes - v31.2.3 +description: Learn here about the controls in the Essential Studio for ##Platform_Name## Weekly Release - Release Notes - v31.2.3 +platform: ej2-asp-core-mvc +documentation: ug +--- + +# Essential Studio for ##Platform_Name## - v31.2.3 Release Notes + +{% include release-info.html date="October 22, 2025" version="v31.2.3" passed="63245" failed="0" %} + +{% directory path: _includes/release-notes/v31.2.3 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + +| Component Name | Test Cases | Passed | Failed | Remarks | +|---------------|------------|--------|--------|---------| +| 3D Chart | 232 | 232 | 0 | All Passed | +| 3D Circular Chart | 374 | 374 | 0 | All Passed | +| Accordion | 205 | 205 | 0 | All Passed | +| AI Assist View | 431 | 431 | 0 | All Passed | +| App Bar | 67 | 67 | 0 | All Passed | +| AutoComplete | 200 | 200 | 0 | All Passed | +| Breadcrumb | 160 | 160 | 0 | All Passed | +| Bullet Chart | 168 | 168 | 0 | All Passed | +| Button | 144 | 144 | 0 | All Passed | +| ButtonGroup | 120 | 120 | 0 | All Passed | +| calendar | 177 | 177 | 0 | All Passed | +| Carousel | 61 | 61 | 0 | All Passed | +| Chart | 4905 | 4905 | 0 | All Passed | +| Chat UI | 184 | 184 | 0 | All Passed | +| CircularGauge | 429 | 429 | 0 | All Passed | +| ColorPicker | 130 | 130 | 0 | All Passed | +| Combo Box | 139 | 139 | 0 | All Passed | +| Common | 904 | 904 | 0 | All Passed | +| Context Menu | 105 | 105 | 0 | All Passed | +| Data Grid | 3662 | 3662 | 0 | All Passed | +| Date Picker | 426 | 426 | 0 | All Passed | +| Date Range Picker | 519 | 519 | 0 | All Passed | +| Date Time Picker | 324 | 324 | 0 | All Passed | +| Diagram | 12813 | 12813 | 0 | All Passed | +| Dialog | 58 | 58 | 0 | All Passed | +| DropDown Button | 132 | 132 | 0 | All Passed | +| Dropdown List | 193 | 193 | 0 | All Passed | +| Dropdown Tree | 105 | 105 | 0 | All Passed | +| File Manager | 2187 | 2187 | 0 | All Passed | +| Floating Action Button | 132 | 132 | 0 | All Passed | +| Gantt | 3515 | 3515 | 0 | All Passed | +| HeatMap Chart | 635 | 635 | 0 | All Passed | +| Image Editor | 1653 | 1653 | 0 | All Passed | +| In-place Editor | 642 | 642 | 0 | All Passed | +| Kanban | 268 | 268 | 0 | All Passed | +| LinearGauge | 426 | 426 | 0 | All Passed | +| Listbox | 115 | 115 | 0 | All Passed | +| ListView | 84 | 84 | 0 | All Passed | +| Maps | 1368 | 1368 | 0 | All Passed | +| Mention | 35 | 35 | 0 | All Passed | +| Menu | 187 | 187 | 0 | All Passed | +| Multicolumn Combo Box | 254 | 254 | 0 | All Passed | +| Multiselect Dropdown | 422 | 422 | 0 | All Passed | +| OTP Input | 240 | 240 | 0 | All Passed | +| Pivot Table | 5303 | 5303 | 0 | All Passed | +| Progress Bar | 81 | 81 | 0 | All Passed | +| Progress Button | 132 | 132 | 0 | All Passed | +| Query Builder | 480 | 480 | 0 | All Passed | +| RadioButton | 36 | 36 | 0 | All Passed | +| RangeNavigator | 140 | 140 | 0 | All Passed | +| Rating | 198 | 198 | 0 | All Passed | +| Ribbon | 623 | 623 | 0 | All Passed | +| Rich Text Editor | 5095 | 5095 | 0 | All Passed | +| schedule | 4608 | 4608 | 0 | All Passed | +| sidebar | 88 | 88 | 0 | All Passed | +| Signature | 105 | 105 | 0 | All Passed | +| Skeleton | 144 | 144 | 0 | All Passed | +| Slider | 147 | 147 | 0 | All Passed | +| SmithChart | 49 | 49 | 0 | All Passed | +| Sparkline | 58 | 58 | 0 | All Passed | +| Speech To Text | 200 | 200 | 0 | All Passed | +| Speed Dial | 122 | 122 | 0 | All Passed | +| Split Button | 144 | 144 | 0 | All Passed | +| Stepper | 91 | 91 | 0 | All Passed | +| Stock Chart | 379 | 379 | 0 | All Passed | +| Tab | 69 | 69 | 0 | All Passed | +| Text Area | 107 | 107 | 0 | All Passed | +| TextBox | 54 | 54 | 0 | All Passed | +| Time Picker | 180 | 180 | 0 | All Passed | +| Timeline | 213 | 213 | 0 | All Passed | +| Toast | 139 | 139 | 0 | All Passed | +| Toolbar | 112 | 112 | 0 | All Passed | +| ToolTip | 136 | 136 | 0 | All Passed | +| TreeGrid | 3786 | 3786 | 0 | All Passed | +| Treemap | 326 | 326 | 0 | All Passed | +| Treeview | 370 | 370 | 0 | All Passed | \ No newline at end of file diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/gemini-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/gemini-integration.md index 1893daa705..0da00004de 100644 --- a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/gemini-integration.md +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/gemini-integration.md @@ -8,61 +8,62 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Gemini AI With AI AssistView control - -The Syncfusion AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs), enabling advanced conversational AI features in your MVC applications. - -## Getting Started With the AI AssistView control - -Before integrating Gemini AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your MVC application: - -[ MVC Getting Started Guide](../getting-started) +# Integrate Gemini AI with ASP.NET MVC AI AssistView control + +The AI AssistView 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 + +* **Google Account**: For generating a Gemini API key. + +* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses. + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. + +## Install Dependencies -* Google account to generate API key on accessing [Gemini](https://ai.google.dev/gemini-api/docs). -* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create MVC application - -## Install Packages - -Install the Syncfusion ASP.NET MVC package in the application using Package Manager Console. +* Install the `Gemini AI` nuget package in the application. ```bash -NuGet\Install-Package Syncfusion.EJ2.MVC5 +NuGet\Install-Package Mscc.GenerativeAI ``` - -Install the Gemini AI package in the application using Package Manager Console. - + +* Install the `Markdig` nuget packages in the application. + ```bash - -NuGet\Install-Package Mscc.GenerativeAI - + +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. -1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your google account. If you don’t have one, create a new account. - -2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard. - -3. Click the `Create API Key` button. You’ll be prompted to either select an existing Google Cloud project or create a new one. Choose the appropriate option and proceed. - -4. After selecting or creating a project, your API key will be generated and displayed. Copy the key and store it securely, as it will only be shown once. - -> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production. - -## Configure Gemini AI with AI AssistView - -You can add the below respective files in your application: - -* Add your generated `API Key` at the line +## Gemini AI with AI AssistView + +Modify the `index.cshtml` file to integrate the Gemini AI with the AI AssistView control. +* Add your Gemini API key securely in the configuration: + ```bash - + string apiKey = 'Place your API key here'; - + ``` {% tabs %} @@ -75,11 +76,3 @@ string apiKey = 'Place your API key here'; {% endtabs %} ![Gemini AI](../images/gemini-ai.png) - -## Run and Test - -Run the application in the browser using the following command. - -Build and run the app (Ctrl + F5). - -Open the hosted link to interact with the Gemini AI for dynamic response diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/ollama-llm-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/ollama-llm-integration.md index 3b13389e0c..079305de41 100644 --- a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/ollama-llm-integration.md +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/ollama-llm-integration.md @@ -8,29 +8,29 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# LLM via Ollama With AI AssistView component +# Integrate LLM via Ollama with ASP.NET MVC AI AssistView control -The Syncfusion AI AssistView supports integration with [LLM via Ollama](https://ollama.com), enabling advanced conversational AI features in your applications. The component acts as a UI for a support bot, where user prompts are sent to the selected AI service via API calls. - -## Getting Started With the AI AssistView control - -Before integrating LLM Model, ensure that the Syncfusion AI AssistView control is correctly rendered in your MVC application: - -[ MVC Getting Started Guide](../getting-started) +The AI AssistView control integrates with [LLM via Ollama](https://ollama.com) to enable advanced conversational AI features in your ASP.NET MVC application. The control 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 -* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create MVC application - -## Install Packages - -Install the Syncfusion ASP.NET MVC package in the application using Package Manager Console. - -```bash - -NuGet\Install-Package Syncfusion.EJ2.MVC5 - -``` +Before starting, ensure you have the following: + +* [Ollama](https://ollama.com) installed to run and manage LLM models locally. + +* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses. + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control 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 the LLM Model package in the application using Package Manager Console. @@ -42,7 +42,9 @@ NuGet\Install-Package Microsoft.Extensions.AI.Ollama ``` -## Configure LLM Model with AI AssistView +## Configure AI AssistView with Ollama in ASP.NET MVC + +Modify the `index.cshtml` file to integrate the Ollama with the AI AssistView control. Add services in `Program.cs` file @@ -72,11 +74,3 @@ builder.Services.AddChatClient(new OllamaChatClient(new Uri("http://localhost:11 {% endtabs %} ![LLM Model](../images/llm-model.png) - -## Run and Test - -Run the application in the browser using the following command. - -Build and run the app (Ctrl + F5). - -Open the hosted link to interact with your LLM Model for dynamic response. diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/openai-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/openai-integration.md index 00c70d5cab..f6d10b371d 100644 --- a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/openai-integration.md +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/openai-integration.md @@ -1,65 +1,76 @@ --- layout: post -title: Azure Open AI in ##Platform_Name## AI AssistView Control | Syncfusion -description: Checkout and learn about Integration of Azure Open AI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +title: Azure OpenAI in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Integration of Azure OpenAI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc -control: Azure Open AI +control: Azure OpenAI publishingplatform: ##Platform_Name## documentation: ug --- -# Azure Open AI With AI AssistView control +# Integrate Azure OpenAI with ASP.NET MVC AI AssistView control -The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your MVC applications. - -## Getting Started With the AI AssistView control - -Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your MVC application: - -[ MVC Getting Started Guide](../getting-started) +The AI AssistView control integrates with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) to enable advanced conversational AI features in your applications. The control 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 - -* An Azure account with access to [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) services and a generated API key. -* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create MVC application - -## Install Packages - -Install the Syncfusion ASP.NET MVC package in the application using Package Manager Console. - -```bash - -NuGet\Install-Package Syncfusion.EJ2.MVC5 -``` - -Install the Open AI and Azure Open AI package in the application using Package Manager Console. +Before starting, ensure you have the following: + +* **An Azure account**: with access to [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) services and a generated API key. + +* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) 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 AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control 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 Open AI +## Configure Azure OpenAI -1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource. +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. +2. Under resource Management, select keys and endpoint to retrieve your API key and endpoint URL. -3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version matches your resource configuration. +3. Note the following values: + - API key + - Endpoint (for example, https://.openai.azure.com/) + - 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. + +## Azure OpenAI with AI AssistView + +Modify the `index.cshtml` file to integrate the Azure OpenAI with the AI AssistView control. -## Configure Azure Open AI with AI AssistView - -You can add the below respective files in your application: - -* Update the following configuration values with your Azure Open AI details: +* Update the following configuration values with your Azure OpenAI details: ```bash @@ -78,12 +89,4 @@ string deploymentName = "Your_Deployment_Name"; {% endhighlight %} {% endtabs %} -![Azure Open AI](../images/open-ai.png) - -## Run and Test - -Run the application in the browser using the following command. - -Build and run the app (Ctrl + F5). - -Open the Hosted link to interact with your Azure Open AI for dynamic response. +![Azure OpenAI](../images/open-ai.png) diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/speech/speech-to-text.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/speech/speech-to-text.md new file mode 100644 index 0000000000..9f40bd899c --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/speech/speech-to-text.md @@ -0,0 +1,42 @@ +--- +layout: post +title: Speech-to-Text With ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about configuration of Speech-to-Text with Azure OpenAI in ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Azure Open AI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Speech-to-Text in ASP.NET MVC AI AssistView + +The Syncfusion ASP.NET MVC AI AssistView control integrates `Speech-to-Text` functionality through the browser's [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API). This enables the conversion of spoken words into text using the device's microphone, allowing users to interact with the AI AssistView through voice input. + +## Prerequisites + +Before integrating `Speech-to-Text`, ensure the following: + +1. The Syncfusion AI AssistView control is properly set up in your ASP.NET MVC application. + - [ASP.NET MVC Getting Started Guide](../getting-started) + +2. The AI AssistView control is integrated with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai). + - [Integration of Azure OpenAI With ASP.NET MVC AI AssistView control](../ai-integrations/openai-integration) + +## Configure Speech-to-Text + +To enable Speech-to-Text functionality, modify the `Index.cshtml` file to incorporate the Web Speech API. The [SpeechToText](https://ej2.syncfusion.com/aspnetmvc/documentation/speech-to-text/getting-started) control listens for microphone input, transcribes spoken words, and updates the AI AssistView's editable footer with the transcribed text. The transcribed text is then sent as a prompt to the Azure OpenAI service via the AI AssistView control. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/speech/stt/razor %} +{% endhighlight %} +{% highlight c# tabtitle="SpeechToText.cs" %} +{% include code-snippet/ai-assistview/speech/stt/speechtotextmvc.cs %} +{% endhighlight %} +{% endtabs %} + +![Integrating Speech-to-Text with AI AssistView](images/aiassist-stt.png) + +## See Also + +* [Text-to-Speech](./text-to-speech) diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/speech/text-to-speech.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/speech/text-to-speech.md new file mode 100644 index 0000000000..5d895ee35c --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/speech/text-to-speech.md @@ -0,0 +1,42 @@ +--- +layout: post +title: Text-to-Speech With ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about configuration of Text-to-Speech with Azure OpenAI in ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Azure Open AI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Text-to-Speech in ASP.NET MVC AI AssistView + +The Syncfusion TypeScript AI AssistView control integrates `Text-to-Speech` (TTS) functionality using the browser's Web Speech API, specifically the [SpeechSynthesisUtterance](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance) interface. This allows AI-generated responses to be converted into spoken audio, enhancing accessibility and user interaction. + +## Prerequisites + +Before integrating `Text-to-Speech`, ensure the following: + +1. The Syncfusion AI AssistView control is properly set up in your ASP.NET MVC application. + - [ASP.NET MVC Getting Started Guide](../getting-started) + +2. The AI AssistView control is integrated with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai). + - [Integration of Azure OpenAI With ASP.NET MVC AI AssistView control](../ai-integrations/openai-integration) + +## Configure Text-to-Speech + +To enable Text-to-Speech functionality, modify the `Index.cshtml` file to incorporate the Web Speech API. A custom `Read Aloud` button is added to the response toolbar using the [ResponseToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistViewResponseToolbarSettings.html) property. When clicked, the [ItemClicked](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistViewResponseToolbarSettings.html#Syncfusion_EJ2_InteractiveChat_AIAssistViewResponseToolbarSettings_ItemClicked) event extracts plain text from the generated AI response and use the browser SpeechSynthesis API to read it aloud. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/speech/tts/razor %} +{% endhighlight %} +{% highlight c# tabtitle="SpeechToText.cs" %} +{% include code-snippet/ai-assistview/speech/tts/texttospeechmvc.cs %} +{% endhighlight %} +{% endtabs %} + +![Integrating Text-to-Speech with AI AssistView](images/aiassist-tts.png) + +## See Also + +* [Speech-to-Text](./speech-to-text) diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/gemini-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/gemini-integration.md index d100b357bd..fd44a4e381 100644 --- a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/gemini-integration.md +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/gemini-integration.md @@ -8,61 +8,62 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Gemini AI With AI AssistView control +# Integrate Gemini AI with ASP.NET Core AI AssistView control -The Syncfusion AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs), enabling advanced conversational AI features in your Core applications. - -## Getting Started With the AI AssistView control - -Before integrating Gemini AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your Core application: - -[ ASP.NET CORE Getting Started Guide](../getting-started) +The AI AssistView 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 -* Google account to generate API key on accessing [Gemini](https://ai.google.dev/gemini-api/docs). -* [System requirements for ASP.NET Core controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create Core application - -## Install Packages +* **Google Account**: For generating a Gemini API key. + +* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses. + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. + +## Install Dependencies -Install the Syncfusion ASP.NET Core package in the application using Package Manager Console. +* Install the `Gemini AI` nuget package in the application. ```bash -NuGet\Install-Package Syncfusion.EJ2.AspNet.Core +NuGet\Install-Package Mscc.GenerativeAI ``` - -Install the Gemini AI package in the application using Package Manager Console. - + +* Install the `Markdig` nuget packages in the application. + ```bash - -NuGet\Install-Package Mscc.GenerativeAI - + +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. -1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your google account. If you don’t have one, create a new account. - -2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard. - -3. Click the `Create API Key` button. You’ll be prompted to either select an existing Google Cloud project or create a new one. Choose the appropriate option and proceed. - -4. After selecting or creating a project, your API key will be generated and displayed. Copy the key and store it securely, as it will only be shown once. - -> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production. - -## Configure Gemini AI with AI AssistView - -You can add the below respective files in your application: - -* Add your generated `API Key` at the line +## Gemini AI with AI AssistView + +Modify the `index.cshtml` file to integrate the Gemini AI with the AI AssistView control. +* Add your Gemini API key securely in the configuration: + ```bash - + string apiKey = 'Place your API key here'; - + ``` {% tabs %} @@ -75,11 +76,4 @@ string apiKey = 'Place your API key here'; {% endtabs %} ![Gemini AI](../images/gemini-ai.png) - -## Run and Test - -Run the application in the browser using the following command. - -Build and run the app (Ctrl + F5). - -Open the hosted link to interact with the Gemini AI for dynamic response \ No newline at end of file + \ No newline at end of file diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/ollama-llm-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/ollama-llm-integration.md index 68b782efaf..3a7403ca0e 100644 --- a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/ollama-llm-integration.md +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/ollama-llm-integration.md @@ -8,29 +8,29 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# LLM via Ollama With AI AssistView component +# Integrate LLM via Ollama with ASP.NET Core AI AssistView control -The Syncfusion AI AssistView supports integration with [LLM via Ollama](https://ollama.com), enabling advanced conversational AI features in your applications. The component acts as a UI for a support bot, where user prompts are sent to the selected AI service via API calls. +The AI AssistView control integrates with [LLM via Ollama](https://ollama.com) to enable advanced conversational AI features in your ASP.NET Core application. The control 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. -## Getting Started With the AI AssistView control - -Before integrating LLM Model, ensure that the Syncfusion AI AssistView control is correctly rendered in your Core application: - -[ CORE Getting Started Guide](../getting-started) - ## Prerequisites -* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create Core application - -## Install Packages - -Install the Syncfusion ASP.NET Core package in the application using Package Manager Console. - -```bash - -NuGet\Install-Package Syncfusion.EJ2.AspNet.Core +Before starting, ensure you have the following: + +* [Ollama](https://ollama.com) installed to run and manage LLM models locally. + +* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses. + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control 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 the LLM Model package in the application using Package Manager Console. @@ -42,7 +42,9 @@ NuGet\Install-Package Microsoft.Extensions.AI.Ollama ``` -## Configure LLM Model with AI AssistView +## Configure AI AssistView with Ollama in ASP.NET Core + +Modify the `index.cshtml` file to integrate the Ollama with the AI AssistView control. Add services in `Program.cs` file @@ -72,11 +74,3 @@ builder.Services.AddChatClient(new OllamaChatClient(new Uri("http://localhost:11 {% endtabs %} ![LLM Model](../images/llm-model.png) - -## Run and Test - -Run the application in the browser using the following command. - -Build and run the app (Ctrl + F5). - -Open the hosted link to interact with your AI model where you can enter prompts and receive responses from the Ollama model. \ No newline at end of file diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md index 542a1d9551..a2ea863006 100644 --- a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md @@ -1,65 +1,76 @@ --- layout: post -title: Azure Open AI in ##Platform_Name## AI AssistView Control | Syncfusion -description: Checkout and learn about Integration of Azure Open AI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +title: Azure OpenAI in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Integration of Azure OpenAI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc -control: Azure Open AI +control: Azure OpenAI publishingplatform: ##Platform_Name## documentation: ug --- -# Azure Open AI With AI AssistView control - -The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your Core applications. - -## Getting Started With the AI AssistView control - -Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your Core app: - -[ CORE Getting Started Guide](../getting-started) +# Integrate Azure OpenAI with ASP.NET Core AI AssistView control +The AI AssistView control integrates with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) to enable advanced conversational AI features in your applications. The control 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 - -* An Azure account with access to [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) services and a generated API key. -* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create Core application - -## Install Packages - -Install the Syncfusion ASP.NET Core package in the application using Package Manager Console. - -```bash - -NuGet\Install-Package Syncfusion.EJ2.AspNet.Core -``` - -Install the Open AI and Azure Open AI package in the application using Package Manager Console. - +Before starting, ensure you have the following: + +* **An Azure account**: with access to [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) services and a generated API key. + +* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core) 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 AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control 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 Open AI +## Configure Azure OpenAI -1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource. +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. +2. Under resource Management, select keys and endpoint to retrieve your API key and endpoint URL. -3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version matches your resource configuration. +3. Note the following values: + - API key + - Endpoint (for example, https://.openai.azure.com/) + - 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`: Never 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 Azure Open AI with AI AssistView +> `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. + +## Azure OpenAI with AI AssistView -You can add the below respective files in your application: +Modify the `index.cshtml` file to integrate the Azure OpenAI with the AI AssistView control. -* Update the following configuration values with your Azure Open AI details: +* Update the following configuration values with your Azure OpenAI details: ```bash @@ -78,12 +89,4 @@ string deploymentName = "Your_Deployment_Name"; {% endhighlight %} {% endtabs %} -![Azure Open AI](../images/open-ai.png) - -## Run and Test - -Run the application in the browser using the following command. - -Build and run the app (Ctrl + F5). - -Open the hosted link to interact with your Azure Open AI for dynamic response. \ No newline at end of file +![Azure OpenAI](../images/open-ai.png) diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/speech/speech-to-text.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/speech/speech-to-text.md new file mode 100644 index 0000000000..5401f41fc3 --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/speech/speech-to-text.md @@ -0,0 +1,42 @@ +--- +layout: post +title: Speech-to-Text With ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about configuration of Speech-to-Text with Azure OpenAI in ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Azure Open AI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Speech-to-Text in ASP.NET Core AI AssistView + +The Syncfusion ASP.NET Core AI AssistView control integrates `Speech-to-Text` functionality through the browser's [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API). This enables the conversion of spoken words into text using the device's microphone, allowing users to interact with the AI AssistView through voice input. + +## Prerequisites + +Before integrating `Speech-to-Text`, ensure the following: + +1. The Syncfusion AI AssistView control is properly set up in your ASP.NET Core application. + - [ASP.NET Core Getting Started Guide](../getting-started) + +2. The AI AssistView control is integrated with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai). + - [Integration of Azure OpenAI With ASP.NET Core AI AssistView control](../ai-integrations/openai-integration) + +## Configure Speech-to-Text + +To enable Speech-to-Text functionality, modify the `Index.cshtml` file to incorporate the Web Speech API. The [SpeechToText](https://ej2.syncfusion.com/aspnetcore/documentation/speech-to-text/getting-started) control listens for microphone input, transcribes spoken words, and updates the AI AssistView's editable footer with the transcribed text. The transcribed text is then sent as a prompt to the Azure OpenAI service via the AI AssistView control. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/speech/stt/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Gemini.cs" %} +{% include code-snippet/ai-assistview/speech/stt/speechtotextcore.cs %} +{% endhighlight %} +{% endtabs %} + +![Integrating Speech-to-Text with AI AssistView](images/aiassist-stt.png) + +## See Also + +* [Text-to-Speech](./text-to-speech) diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/speech/text-to-speech.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/speech/text-to-speech.md new file mode 100644 index 0000000000..5a1cff60c5 --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/speech/text-to-speech.md @@ -0,0 +1,42 @@ +--- +layout: post +title: Text-to-Speech With ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about configuration of Text-to-Speech with Azure OpenAI in ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Azure Open AI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Text-to-Speech in ASP.NET Core AI AssistView + +The Syncfusion TypeScript AI AssistView control integrates `Text-to-Speech` (TTS) functionality using the browser's Web Speech API, specifically the [SpeechSynthesisUtterance](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance) interface. This allows AI-generated responses to be converted into spoken audio, enhancing accessibility and user interaction. + +## Prerequisites + +Before integrating `Text-to-Speech`, ensure the following: + +1. The Syncfusion AI AssistView control is properly set up in your ASP.NET Core application. + - [ASP.NET Core Getting Started Guide](../getting-started) + +2. The AI AssistView control is integrated with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai). + - [Integration of Azure OpenAI With ASP.NET Core AI AssistView control](../ai-integrations/openai-integration) + +## Configure Text-to-Speech + +To enable Text-to-Speech functionality, modify the `Index.cshtml` file to incorporate the Web Speech API. A custom `Read Aloud` button is added to the response toolbar using the `e-aiassistview-responsetoolbarsettings` tag helper. When clicked, the [itemClicked](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.InteractiveChat.AIAssistViewResponseToolbarSettings.html#Syncfusion_EJ2_InteractiveChat_AIAssistViewResponseToolbarSettings_ItemClicked) event extracts plain text from the generated AI response and use the browser SpeechSynthesis API to read it aloud. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/speech/tts/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Gemini.cs" %} +{% include code-snippet/ai-assistview/speech/tts/texttospeechcore.cs %} +{% endhighlight %} +{% endtabs %} + +![Integrating Text-to-Speech with AI AssistView](images/aiassist-tts.png) + +## See Also + +* [Speech-to-Text](./speech-to-text) diff --git a/ej2-asp-core-mvc/ai-assistview/images/aiassist-stt.png b/ej2-asp-core-mvc/ai-assistview/images/aiassist-stt.png new file mode 100644 index 0000000000..6bc4fef311 Binary files /dev/null and b/ej2-asp-core-mvc/ai-assistview/images/aiassist-stt.png differ diff --git a/ej2-asp-core-mvc/ai-assistview/images/aiassist-tts.png b/ej2-asp-core-mvc/ai-assistview/images/aiassist-tts.png new file mode 100644 index 0000000000..77061962fb Binary files /dev/null and b/ej2-asp-core-mvc/ai-assistview/images/aiassist-tts.png differ diff --git a/ej2-asp-core-mvc/ai-assistview/images/open-ai.png b/ej2-asp-core-mvc/ai-assistview/images/open-ai.png index 7b29ce3d57..2e2a91dd08 100644 Binary files a/ej2-asp-core-mvc/ai-assistview/images/open-ai.png and b/ej2-asp-core-mvc/ai-assistview/images/open-ai.png differ diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-bot-framework.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-bot-framework.md index b173d641b7..ee6a137f1f 100644 --- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-bot-framework.md +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-bot-framework.md @@ -8,22 +8,25 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Microsoft Bot Framework With ASP.NET MVC Chat UI component +# Integrate Microsoft Bot Framework with ASP.NET MVC Chat UI control -The Syncfusion ASP.NET MVC Chat UI supports integration with a [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0) bot hosted on Azure, enabling a custom chat interface for seamless user interaction. The process involves setting up a secure backend token server, configuring the bot in Azure, and integrating the Syncfusion Chat UI in an ASP.NET MVC application. +The Chat UI control integrates seamlessly with a [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0) bot hosted on Azure, enabling a custom chat interface for seamless user interaction. The process involves setting up a secure backend token server, configuring Direct Line in Azure, and integrating the Chat UI in the application. -## Getting Started With the Chat UI Component +## Prerequisites -Before integrating Microsoft Bot Framework, ensure that the Syncfusion Chat UI component is correctly rendered in your ASP.NET MVC app: +Before starting, ensure you have the following: -[ASP.NET MVC Getting Started Guide](../getting-started) +* **Node.js**: Version 16 or higher with npm. -## Prerequisites +* [Microsoft Azure Account](https://portal.azure.com/#home) : Required to create and host the bot. + +* **Syncfusion Chat UI**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) installed. -* [Microsoft Azure Account](https://portal.azure.com/#home): Required to create and host the bot. -* `Visual Studio`: With ASP.NET MVC development tools. -* `Syncfusion EJ2 ASP.NET MVC`: Install Syncfusion.EJ2.MVC5 in your project. -* `Deployed Azure Bot`: A bot should be created and published using the Bot Framework, accessible via an Azure App Service. Refer to [Microsoft's Bot Creation Guide](https://learn.microsoft.com/en-us/azure/bot-service/). +* **Deployed Azure Bot**: A bot should be created and published using the [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0), which is accessible via an Azure App Service. Refer to Microsoft's Bot Creation Guide. + +## Set Up the Chat UI control + +Follow the Syncfusion Chat UI [Getting Started](../getting-started) guide to configure and render the Chat UI control in the application and that prerequisites are met. ## Install Dependencies @@ -36,14 +39,6 @@ Install-Package Newtonsoft.Json ``` -* Install the Syncfusion EJ2 ASP.NET MVC package: - -```bash - -Install-Package Syncfusion.EJ2.MVC5 - -``` - ## Configure the Azure Bot 1. In the [Azure Portal](https://portal.azure.com/#home), navigate to your bot resource. @@ -123,7 +118,7 @@ Add the Direct Line secret to `Web.config`: Use the Chat UI `messageSend` event to handle message exchanges. This event is triggered before a message is sent, allowing you to forward it to the bot via the direct line API. Use the `addMessage` method to programmatically add the bot's reply to the Chat UI. -Create `Views/Home/Index.cshtml` to integrate the Syncfusion Chat UI with the direct line API: +Modify the `Views/Home/Index.cshtml` file to integrate the Syncfusion Chat UI with the direct line API: {% tabs %} {% highlight Html tabtitle="Index.cshtml" %} diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-dialogflow.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-dialogflow.md index 17620f1f8f..46f3a99844 100644 --- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-dialogflow.md +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-dialogflow.md @@ -8,23 +8,26 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Google Dialogflow With ASP.NET MVC Chat UI component +# Integrate Google Dialogflow with ASP.NET MVC Chat UI control -The Syncfusion Chat UI supports integration with [Google Dialogflow](https://cloud.google.com/dialogflow/docs), enabling advanced conversational AI features in your ASP.NET MVC applications. +The Chat UI control integrates with [Google Dialogflow](https://cloud.google.com/dialogflow/docs) to enable advanced conversational AI features in your ASP.NET MVC applications. The control acts as a user interface for a support bot, where user prompts are sent to the Dialogflow service via API calls, providing natural language understanding and context-aware responses. -## Getting Started With the ChatUI Component +## Prerequisites -Before integrating Dialogflow, ensure that the Syncfusion Chat UI component is correctly rendered in your ASP.NET MVC app: +Before starting, ensure you have the following: -[ASP.NET MVC Getting Started Guide](../getting-started) +* **Node.js**: Version 16 or higher with npm. -## Prerequisites +* **Google Account**: To access [Google Dialogflow](https://cloud.google.com/dialogflow/docs) and [Google Cloud Console](https://console.cloud.google.com/). + +* **Syncfusion Chat UI**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) installed. -* Google account to access [Google Dialogflow](https://cloud.google.com/dialogflow/docs) and [Google Cloud Console](https://console.cloud.google.com/). -* Visual Studio with ASP.NET MVC development tools. -* Syncfusion EJ2 ASP.NET MVC installed in your project. * Dialogflow Service Account with the `Dialogflow API Client` role and its JSON key file. +## Set Up the Chat UI control + +Follow the Syncfusion Chat UI [Getting Started](../getting-started) guide to configure and render the Chat UI control in the application and that prerequisites are met. + ## Install Dependencies * Install backend dependencies for Dialogflow and server setup using NuGet: @@ -34,13 +37,6 @@ Before integrating Dialogflow, ensure that the Syncfusion Chat UI component is c Install-Package Google.Cloud.Dialogflow.V2 Install-Package Newtonsoft.Json -``` -* Install the Syncfusion EJ2 ASP.NET MVC package in your project: - -```bash - -Install-Package Syncfusion.EJ2.MVC5 - ``` ## Set Up the Dialogflow Agent @@ -49,13 +45,13 @@ Install-Package Syncfusion.EJ2.MVC5 2. Add intents with training phrases and responses (e.g., greetings, FAQs). Test using the dialogflow simulator. -3. In the Google Cloud Console, go to `APIs & Services` > `Credentials`, create a Service Account with the dialogflow API client role, and download the JSON key file. +3. In the Google Cloud Console, go to `APIs & Services` > `Credentials`, create a service account with the dialogflow API client role, and download the JSON key file. > `Security Note`: Never commit the JSON key file to version control. Use environment variables or a secret manager (e.g., Google Cloud Secret Manager) for production. -## Configure ASP.NET MVC Backend +## Configure Node.js Backend -Create `service-acct.json` with your Dialogflow service account credentials in your project root: +Create `backend/service-acct.json` with your Dialogflow service account credentials: {% tabs %} {% highlight js tabtitle="service-acct.json" %} @@ -136,7 +132,7 @@ namespace YourNamespace.Controllers ## Configure message send -Use the Chat UI `messageSend` event to exchange messages. This event is triggered before a message is sent, allowing you to forward it to the backend. +Use the Chat UI `messageSend` event to exchanges message. Each time a user sends a message, this event will be invoked with details of the sent message. ### Forward Message to backend: @@ -146,7 +142,7 @@ In the `messageSend` event handler, send a POST request to your backend API endp Use the `addMessage` method to programmatically add the bot's reply to the Chat UI. -Create `Views/Home/Index.cshtml` to integrate the Syncfusion Chat UI with the dialogflow backend: +Modify the `Views/Home/Index.cshtml` file to integrate the Syncfusion Chat UI with the dialogflow backend: {% tabs %} {% highlight Html tabtitle="Index.cshtml" %} diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-bot-framework.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-bot-framework.md index c1ab5e4e15..16bea1608c 100644 --- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-bot-framework.md +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-bot-framework.md @@ -8,37 +8,34 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Microsoft Bot Framework With ASP.NET Core Chat UI component +# Integrate Microsoft Bot Framework with ASP.NET Core Chat UI control -The Syncfusion ASP.NET MVC Chat UI supports integration with a [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0) bot hosted on Azure, enabling a custom chat interface for seamless user interaction. The process involves setting up a secure backend token server, configuring the bot in Azure, and integrating the Syncfusion Chat UI in an ASP.NET Core application. +The Chat UI control integrates seamlessly with a [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0) bot hosted on Azure, enabling a custom chat interface for seamless user interaction. The process involves setting up a secure backend token server, configuring Direct Line in Azure, and integrating the Chat UI in the application. -## Getting Started With the ChatUI Component +## Prerequisites -Before integrating Microsoft Bot Framework, ensure that the Syncfusion Chat UI component is correctly rendered in your ASP.NET Core app: -[ASP.NET Core Getting Started Guide](../getting-started) +Before starting, ensure you have the following: -## Prerequisites +* **Node.js**: Version 16 or higher with npm. -* [Microsoft Azure Account](https://portal.azure.com/#home): Required to create and host the bot. -* `.NET SDK`: Version 6.0 or higher for ASP.NET Core. -* `Syncfusion EJ2 ASP.NET Core`: Install Syncfusion.EJ2.AspNet.Core in your project. -* `Deployed Azure Bot`: A bot should be created and published using the Bot Framework, accessible via an Azure App Service. Refer to [Microsoft's Bot Creation Guide](https://learn.microsoft.com/en-us/azure/bot-service/). +* [Microsoft Azure Account](https://portal.azure.com/#home) : Required to create and host the bot. -## Install Dependencies -* Install backend dependencies for bot communication using NuGet: +* **Syncfusion Chat UI**: Package [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core) installed. -```bash +* **Deployed Azure Bot**: A bot should be created and published using the [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0), which is accessible via an Azure App Service. Refer to Microsoft's Bot Creation Guide. -dotnet add package Microsoft.Bot.Connector.DirectLine -dotnet add package Microsoft.AspNetCore.Mvc.NewtonsoftJson +## Set Up the Chat UI control -``` +Follow the Syncfusion Chat UI [Getting Started](../getting-started) guide to configure and render the Chat UI control in the application and that prerequisites are met. + +## Install Dependencies -* Install the Syncfusion EJ2 ASP.NET Core package: +* Install backend dependencies for bot communication using NuGet: ```bash -dotnet add package Syncfusion.EJ2.AspNet.Core +dotnet add package Microsoft.Bot.Connector.DirectLine +dotnet add package Microsoft.AspNetCore.Mvc.NewtonsoftJson ``` diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md index fdc51ba056..43eed110cc 100644 --- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md @@ -8,23 +8,28 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Google Dialogflow With ASP.NET Core Chat UI component +# Integrate Google Dialogflow with ASP.NET Core Chat UI control -The Syncfusion Chat UI supports integration with [Google Dialogflow](https://cloud.google.com/dialogflow/docs), enabling advanced conversational AI features in your ASP.NET Core applications. +The Chat UI control integrates with [Google Dialogflow](https://cloud.google.com/dialogflow/docs) to enable advanced conversational AI features in your ASP.NET Core applications. The control acts as a user interface for a support bot, where user prompts are sent to the Dialogflow service via API calls, providing natural language understanding and context-aware responses. -## Getting Started With the ChatUI Component +## Prerequisites -Before integrating Dialogflow, ensure that the Syncfusion Chat UI component is correctly rendered in your ASP.NET Core app: -[ASP.NET Core Getting Started Guide](../getting-started) +Before starting, ensure you have the following: -## Prerequisites +* **Node.js**: Version 16 or higher with npm. + +* **Google Account**: To access [Google Dialogflow](https://cloud.google.com/dialogflow/docs) and [Google Cloud Console](https://console.cloud.google.com/). + +* **Syncfusion Chat UI**: Package [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core) installed. + +* Dialogflow Service Account with the `Dialogflow API Client` role and its JSON key file. + +## Set Up the Chat UI control -* Google account to access [Google Dialogflow](https://cloud.google.com/dialogflow/docs) and [Google Cloud Console](https://console.cloud.google.com/). -* .NET SDK (version 6.0 or higher) for ASP.NET Core. -* Syncfusion EJ2 ASP.NET Core installed in your project. -* Dialogflow Service Account with the Dialogflow API Client role and its JSON key file. +Follow the Syncfusion Chat UI [Getting Started](../getting-started) guide to configure and render the Chat UI control in the application and that prerequisites are met. ## Install Dependencies + * Install backend dependencies for Dialogflow and server setup using NuGet: ```bash @@ -33,37 +38,30 @@ dotnet add package Google.Cloud.Dialogflow.V2 dotnet add package Microsoft.AspNetCore.Mvc.NewtonsoftJson ``` -* Install the Syncfusion EJ2 ASP.NET Core package in your project: - -```bash -dotnet add package Syncfusion.EJ2.AspNet.Core - -``` ## Set Up the Dialogflow Agent 1. In the dialogflow console, create an [agent](https://cloud.google.com/agent-assist/docs), set a name (e.g., `MyChatBot`), and configure the default language (e.g., English - `en`). 2. Add intents with training phrases and responses (e.g., greetings, FAQs). Test using the dialogflow simulator. -3. In the Google Cloud Console, go to `APIs & Services` > `Credentials`, create a Service Account with the dialogflow API client role, and download the JSON key file. +3. In the Google Cloud Console, go to `APIs & Services` > `Credentials`, create a service account with the dialogflow API client role, and download the JSON key file. > `Security Note`: Never commit the JSON key file to version control. Use environment variables or a secret manager (e.g., Google Cloud Secret Manager) for production. ## Configure Node.js Backend -Create `service-acct.json` with your Dialogflow service account credentials in your project root (or use User Secrets for development): +Create `backend/service-acct.json` with your Dialogflow service account credentials: {% tabs %} {% highlight js tabtitle="service-acct.json" %} - { -"type": "service_account", -"project_id": "your-dialogflow-project-id", -"private_key_id": "abc123xyz...", -"private_key": "-----BEGIN PRIVATE KEY-----\nMIIEv...", -"client_email": "dialogflow-agent@your-dialogflow-project-id.iam.gserviceaccount.com", -... + "type": "service_account", + "project_id": "your-dialogflow-project-id", + "private_key_id": "abc123xyz...", + "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEv...", + "client_email": "dialogflow-agent@your-dialogflow-project-id.iam.gserviceaccount.com", + ... } {% endhighlight %} {% endtabs %} @@ -131,7 +129,7 @@ namespace YourNamespace.Controllers ## Configure message send -Use the Chat UI `messageSend` event to exchange messages. This event is triggered before a message is sent, allowing you to forward it to the backend. +Use the Chat UI `messageSend` event to exchanges message. Each time a user sends a message, this event will be invoked with details of the sent message. ### Forward Message to backend: diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs index 5bc65aba86..843b0dd7b6 100644 --- a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs @@ -1,6 +1,8 @@ -using OpenAI; using Azure; using Azure.AI.OpenAI; +using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.Mvc.RazorPages; +using OpenAI.Chat; namespace WebApplication4.Pages { public class IndexModel : PageModel @@ -68,22 +70,22 @@ public async Task OnPostGetAIResponse([FromBody] PromptRequest re return BadRequest($"Error generating response: {ex.Message}"); } } - } + } - public class IndexViewModel - { - public List Items { get; set; } = new List(); - public string[] PromptSuggestionData { get; set; } - } + public class IndexViewModel + { + public List Items { get; set; } = new List(); + public string[] PromptSuggestionData { get; set; } + } - public class PromptRequest - { - public string Prompt { get; set; } - } + public class PromptRequest + { + public string Prompt { get; set; } + } - public class ToolbarItemModel - { - public string align { get; set; } - public string iconCss { get; set; } - } + public class ToolbarItemModel + { + public string align { get; set; } + public string iconCss { get; set; } } +} diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/tagHelper index 103c1b2da7..a7872fe9c6 100644 --- a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/tagHelper @@ -1,3 +1,4 @@ +@model IndexModel @using Syncfusion.EJ2.InteractiveChat @{ ViewData["Title"] = "AI Assistance with Gemini"; diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/stt/razor b/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/stt/razor new file mode 100644 index 0000000000..55d99d58ea --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/stt/razor @@ -0,0 +1,252 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().AIAssistView("aiAssistView").BannerTemplate("#bannerContent").FooterTemplate("#footerContent").StopRespondingClick("stopRespondingClick").PromptRequest("onPromptRequest").Created("onCreated").ToolbarSettings(new AIAssistViewToolbarSettings() + { + Items = ViewBag.Items, + ItemClicked = "toolbarItemClicked" + }).PromptToolbarSettings(new AIAssistViewPromptToolbarSettings() + { + ItemClicked = "promptToolbarItemClicked" + }).Render() +
+ + +@Html.AntiForgeryToken() + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/stt/speechtotextcore.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/stt/speechtotextcore.cs new file mode 100644 index 0000000000..59d9422bbd --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/stt/speechtotextcore.cs @@ -0,0 +1,84 @@ +using Azure; +using Azure.AI.OpenAI; +using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.Mvc.RazorPages; +using OpenAI.Chat; + +namespace WebApplication.Pages +{ + public class IndexModel : PageModel + { + + public IndexViewModel ViewModel { get; set; } = new IndexViewModel(); + public void OnGet() + { + // Initialize toolbar items + ViewModel.Items = new List + { + new ToolbarItemModel + { + iconCss = "e-icons e-refresh", + align = "Right", + } + }; + } + + public async Task OnPostGetAIResponse([FromBody] PromptRequest request) + { + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + string endpoint = "Your_Azure_OpenAI_Endpoint"; // Replace with your Azure OpenAI endpoint + string apiKey = "YOUR_AZURE_OPENAI_API_KEY"; // Replace with your Azure OpenAI API key + string deploymentName = "YOUR_DEPLOYMENT_NAME"; // Replace with your Azure OpenAI deployment name (e.g., gpt-4o-mini) + + var credential = new AzureKeyCredential(apiKey); + var client = new AzureOpenAIClient(new Uri(endpoint), credential); + var chatClient = client.GetChatClient(deploymentName); + + var chatCompletionOptions = new ChatCompletionOptions(); + var completion = await chatClient.CompleteChatAsync( + new[] { new UserChatMessage(request.Prompt) }, + chatCompletionOptions + ); + string responseText = completion.Value.Content[0].Text; + if (string.IsNullOrEmpty(responseText)) + { + _logger.LogError("Azure OpenAI API returned no text."); + return BadRequest("No response from Azure OpenAI."); + } + + _logger.LogInformation("Azure OpenAI response received: {Response}", responseText); + return new JsonResult(responseText); + } + catch (Exception ex) + { + _logger.LogError("Exception in Azure OpenAI call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } + } + } + + public class IndexViewModel + { + public List Items { get; set; } = new List(); + } + + public class PromptRequest + { + public string Prompt { get; set; } + } + + public class ToolbarItemModel + { + public string align { get; set; } + public string iconCss { get; set; } + } +} diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/stt/speechtotextmvc.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/stt/speechtotextmvc.cs new file mode 100644 index 0000000000..d7372ee5ad --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/stt/speechtotextmvc.cs @@ -0,0 +1,69 @@ +using OpenAI; +using OpenAI.Chat; +using Azure; +using Azure.AI.OpenAI; + +namespace AssistViewDemo.Controllers +{ + public class HomeController : Controller + { + + public List Items { get; set; } = new List(); + + public IActionResult Index() + { + Items.Add(new ToolbarItemModel { iconCss = "e-icons e-refresh", align = "Right" }); + ViewBag.Items = Items; + return View(); + } + public class ToolbarItemModel + { + public string iconCss { get; set; } + public string align { get; set; } + } + [HttpPost] + public async Task GetAIResponse([FromBody] PromptRequest request) + { + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + // Azure OpenAI configuration + string endpoint = "Your_Azure_OpenAI_Endpoint"; // Replace with your Azure OpenAI endpoint + string apiKey = "YOUR_AZURE_OPENAI_API_KEY"; // Replace with your Azure OpenAI API key + string deploymentName = "YOUR_DEPLOYMENT_NAME"; // Replace with your Azure OpenAI deployment name (e.g., gpt-4o-mini) + + var credential = new AzureKeyCredential(apiKey); + var client = new AzureOpenAIClient(new Uri(endpoint), credential); + var chatClient = client.GetChatClient(deploymentName); + + var chatCompletionOptions = new ChatCompletionOptions(); + var completion = await chatClient.CompleteChatAsync( + new[] { new UserChatMessage(request.Prompt) }, + chatCompletionOptions + ); + + string responseText = completion.Value.Content[0].Text; + if (string.IsNullOrEmpty(responseText)) + { + _logger.LogError("Azure OpenAI API returned no text."); + return BadRequest("No response from Azure OpenAI."); + } + + _logger.LogInformation("Azure OpenAI response received: {Response}", responseText); + return Json(responseText); + } + catch (Exception ex) + { + _logger.LogError("Exception in Azure OpenAI call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/stt/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/stt/tagHelper new file mode 100644 index 0000000000..4640eb84bf --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/stt/tagHelper @@ -0,0 +1,249 @@ +@model IndexModel +@using Syncfusion.EJ2.InteractiveChat + +
+ + + + +
+ + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/tts/razor b/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/tts/razor new file mode 100644 index 0000000000..e802edd179 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/tts/razor @@ -0,0 +1,160 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().AIAssistView("aiAssistView").BannerTemplate("#bannerContent").StopRespondingClick("stopRespondingClick").PromptRequest("onPromptRequest").Created("onCreated").ToolbarSettings(new AIAssistViewToolbarSettings() + { + Items = ViewBag.Items, + ItemClicked = "toolbarItemClicked" + }).ResponseToolbarSettings(new AIAssistViewResponseToolbarSettings() + { + Items = ViewBag.ResponseItems, + ItemClicked = "onResponseToolbarItemClicked" + }).Render() +
+ + +@Html.AntiForgeryToken() + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/tts/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/tts/tagHelper new file mode 100644 index 0000000000..dd8f2ad3f9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/tts/tagHelper @@ -0,0 +1,155 @@ +@model IndexModel +@using Syncfusion.EJ2.InteractiveChat + +
+ + + + +
+ + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/tts/texttospeechcore.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/tts/texttospeechcore.cs new file mode 100644 index 0000000000..2c1d75f7d9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/tts/texttospeechcore.cs @@ -0,0 +1,89 @@ +using Azure; +using Azure.AI.OpenAI; +using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.Mvc.RazorPages; +using OpenAI.Chat; + +namespace WebApplication.Pages +{ + public class IndexModel : PageModel + { + + public IndexViewModel ViewModel { get; set; } = new IndexViewModel(); + public void OnGet() + { + ViewModel.Items = new List + { + new ToolbarItemModel { iconCss = "e-icons e-refresh", align = "Right" } + }; + + ViewModel.ResponseItems = new List + { + new ToolbarItemModel { iconCss = "e-icons e-assist-copy", tooltip = "Copy" }, + new ToolbarItemModel { iconCss = "e-icons e-audio", tooltip = "Read Aloud" }, + new ToolbarItemModel { iconCss = "e-icons e-assist-like", tooltip = "Like" }, + new ToolbarItemModel { iconCss = "e-icons e-assist-dislike", tooltip = "Need Improvement" } + }; + } + + public async Task OnPostGetAIResponse([FromBody] PromptRequest request) + { + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + string endpoint = "Your_Azure_OpenAI_Endpoint"; // Replace with your Azure OpenAI endpoint + string apiKey = "YOUR_AZURE_OPENAI_API_KEY"; // Replace with your Azure OpenAI API key + string deploymentName = "YOUR_DEPLOYMENT_NAME"; // Replace with your Azure OpenAI deployment name (e.g., gpt-4o-mini) + + var credential = new AzureKeyCredential(apiKey); + var client = new AzureOpenAIClient(new Uri(endpoint), credential); + var chatClient = client.GetChatClient(deploymentName); + + var chatCompletionOptions = new ChatCompletionOptions(); + var completion = await chatClient.CompleteChatAsync( + new[] { new UserChatMessage(request.Prompt) }, + chatCompletionOptions + ); + string responseText = completion.Value.Content[0].Text; + if (string.IsNullOrEmpty(responseText)) + { + _logger.LogError("Azure OpenAI API returned no text."); + return BadRequest("No response from Azure OpenAI."); + } + + _logger.LogInformation("Azure OpenAI response received: {Response}", responseText); + return new JsonResult(responseText); + } + catch (Exception ex) + { + _logger.LogError("Exception in Azure OpenAI call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } + } + } + + public class IndexViewModel + { + public List Items { get; set; } = new List(); + public List ResponseItems { get; set; } = new List(); + } + + public class PromptRequest + { + public string Prompt { get; set; } + } + + public class ToolbarItemModel + { + public string align { get; set; } + public string iconCss { get; set; } + public string tooltip { get; set; } + } +} diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/tts/texttospeechmvc.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/tts/texttospeechmvc.cs new file mode 100644 index 0000000000..fda7540088 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/speech/tts/texttospeechmvc.cs @@ -0,0 +1,79 @@ +using OpenAI; +using OpenAI.Chat; +using Azure; +using Azure.AI.OpenAI; + +namespace AssistViewDemo.Controllers +{ + public class HomeController : Controller + { + + public List Items { get; set; } = new List(); + public List ResponseItems { get; set; } = new List(); + + public IActionResult Index() + { + Items.Add(new ToolbarItemModel { iconCss = "e-icons e-refresh", align = "Right" }); + ResponseItems = new List + { + new ToolbarItemModel { iconCss = "e-icons e-assist-copy", tooltip = "Copy" }, + new ToolbarItemModel { iconCss = "e-icons e-audio", tooltip = "Read Aloud" }, + new ToolbarItemModel { iconCss = "e-icons e-assist-like", tooltip = "Like" }, + new ToolbarItemModel { iconCss = "e-icons e-assist-dislike", tooltip = "Need Improvement" } + }; + ViewBag.Items = Items; + ViewBag.ResponseItems = ResponseItems; + return View(); + } + public class ToolbarItemModel + { + public string iconCss { get; set; } + public string align { get; set; } + public string tooltip { get; set; } + } + [HttpPost] + public async Task GetAIResponse([FromBody] PromptRequest request) + { + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + // Azure OpenAI configuration + string endpoint = "Your_Azure_OpenAI_Endpoint"; // Replace with your Azure OpenAI endpoint + string apiKey = "YOUR_AZURE_OPENAI_API_KEY"; // Replace with your Azure OpenAI API key + string deploymentName = "YOUR_DEPLOYMENT_NAME"; // Replace with your Azure OpenAI deployment name (e.g., gpt-4o-mini) + + var credential = new AzureKeyCredential(apiKey); + var client = new AzureOpenAIClient(new Uri(endpoint), credential); + var chatClient = client.GetChatClient(deploymentName); + + var chatCompletionOptions = new ChatCompletionOptions(); + var completion = await chatClient.CompleteChatAsync( + new[] { new UserChatMessage(request.Prompt) }, + chatCompletionOptions + ); + + string responseText = completion.Value.Content[0].Text; + if (string.IsNullOrEmpty(responseText)) + { + _logger.LogError("Azure OpenAI API returned no text."); + return BadRequest("No response from Azure OpenAI."); + } + + _logger.LogInformation("Azure OpenAI response received: {Response}", responseText); + return Json(responseText); + } + catch (Exception ex) + { + _logger.LogError("Exception in Azure OpenAI call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/tagHelper index fa35b8f30f..ba3e7f92f4 100644 --- a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/tagHelper @@ -98,4 +98,4 @@ } }; -} +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/tagHelper index ad95de3f5f..2f1a689619 100644 --- a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/tagHelper @@ -95,4 +95,4 @@ } }; -} +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/datepicker/EJ2_ASP.MVC/timezone-behavior.md b/ej2-asp-core-mvc/datepicker/EJ2_ASP.MVC/timezone-behavior.md index d928250061..f7d910cda1 100644 --- a/ej2-asp-core-mvc/datepicker/EJ2_ASP.MVC/timezone-behavior.md +++ b/ej2-asp-core-mvc/datepicker/EJ2_ASP.MVC/timezone-behavior.md @@ -14,7 +14,7 @@ The DatePicker component displays and maintains the selected date value based on N> if the system time zone is changed dynamically after a value is selected, the DatePicker will **not update or shift** the selected value. The component preserves the original selection, ensuring a stable and reliable user experience. -## `serverTimezoneOffset` +## serverTimezoneOffset The `serverTimezoneOffset` property allows you to specify the server's time zone offset from UTC in **hours** or **fractional hours**. This is useful when binding values from the server to ensure they are interpreted correctly on the client side. @@ -31,12 +31,14 @@ N> The `serverTimezoneOffset` property is applicable **only for pre-bound values {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/datepicker/timezone-cs1/tagHelper %} -{% endhighlight %}{% endtabs %} +{% endhighlight %} +{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/datepicker/timezone-cs1/razor %} -{% endhighlight %}{% endtabs %} -{% endif %} \ No newline at end of file +{% endhighlight %} +{% endtabs %} +{% endif %} diff --git a/ej2-asp-core-mvc/datepicker/EJ2_ASP.NETCORE/timezone-behavior.md b/ej2-asp-core-mvc/datepicker/EJ2_ASP.NETCORE/timezone-behavior.md index 29767f1a02..f7d910cda1 100644 --- a/ej2-asp-core-mvc/datepicker/EJ2_ASP.NETCORE/timezone-behavior.md +++ b/ej2-asp-core-mvc/datepicker/EJ2_ASP.NETCORE/timezone-behavior.md @@ -14,7 +14,7 @@ The DatePicker component displays and maintains the selected date value based on N> if the system time zone is changed dynamically after a value is selected, the DatePicker will **not update or shift** the selected value. The component preserves the original selection, ensuring a stable and reliable user experience. -## `serverTimezoneOffset` +## serverTimezoneOffset The `serverTimezoneOffset` property allows you to specify the server's time zone offset from UTC in **hours** or **fractional hours**. This is useful when binding values from the server to ensure they are interpreted correctly on the client side. @@ -31,12 +31,14 @@ N> The `serverTimezoneOffset` property is applicable **only for pre-bound values {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/datepicker/timezone-cs1/tagHelper %} -{% endhighlight %}{% endtabs %} +{% endhighlight %} +{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/datepicker/timezone-cs1/razor %} -{% endhighlight %}{% endtabs %} +{% endhighlight %} +{% endtabs %} {% endif %} diff --git a/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.MVC/timezone-behavior.md b/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.MVC/timezone-behavior.md index ddee2295a4..d0cd8102e4 100644 --- a/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.MVC/timezone-behavior.md +++ b/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.MVC/timezone-behavior.md @@ -14,7 +14,7 @@ The DateTimePicker component displays and maintains the selected date and time v N> if the system time zone is changed dynamically after a value is selected, the DateTimePicker will **not update or shift** the selected value. The component preserves the original selection, ensuring a stable and reliable user experience. -## `serverTimezoneOffset` +## serverTimezoneOffset The `serverTimezoneOffset` property allows you to specify the server's time zone offset from UTC in **hours** or **fractional hours**. This is useful when binding values from the server to ensure they are interpreted correctly on the client side. @@ -31,12 +31,14 @@ N> The `serverTimezoneOffset` property is applicable **only for pre-bound values {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/datetimepicker/timezone-cs1/tagHelper %} -{% endhighlight %}{% endtabs %} +{% endhighlight %} +{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/datetimepicker/timezone-cs1/razor %} -{% endhighlight %}{% endtabs %} +{% endhighlight %} +{% endtabs %} {% endif %} diff --git a/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.NETCORE/timezone-behavior.md b/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.NETCORE/timezone-behavior.md index 0b5a63413a..d0cd8102e4 100644 --- a/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.NETCORE/timezone-behavior.md +++ b/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.NETCORE/timezone-behavior.md @@ -14,7 +14,7 @@ The DateTimePicker component displays and maintains the selected date and time v N> if the system time zone is changed dynamically after a value is selected, the DateTimePicker will **not update or shift** the selected value. The component preserves the original selection, ensuring a stable and reliable user experience. -## `serverTimezoneOffset` +## serverTimezoneOffset The `serverTimezoneOffset` property allows you to specify the server's time zone offset from UTC in **hours** or **fractional hours**. This is useful when binding values from the server to ensure they are interpreted correctly on the client side. @@ -31,12 +31,14 @@ N> The `serverTimezoneOffset` property is applicable **only for pre-bound values {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/datetimepicker/timezone-cs1/tagHelper %} -{% endhighlight %}{% endtabs %} +{% endhighlight %} +{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/datetimepicker/timezone-cs1/razor %} -{% endhighlight %}{% endtabs %} -{% endif %} \ No newline at end of file +{% endhighlight %} +{% endtabs %} +{% endif %} diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/tool-bar/tool-bar-items.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/tool-bar/tool-bar-items.md index 50802867fc..1abe5790d7 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/tool-bar/tool-bar-items.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/tool-bar/tool-bar-items.md @@ -28,6 +28,7 @@ The following table shows built-in toolbar items and its actions. | Cancel | Cancels the edit state.| | Search | Searches the records by the given key.| | Print | Prints the treegrid.| +| ColumnChooser | Opens a dialog to select column visibility.| | ExcelExport | Exports the treegrid to Excel.| | PdfExport | Exports the treegrid to PDF.| | WordExport | Exports the treegrid to Word.| diff --git a/ej2-asp-core-mvc/tree-grid/tool-bar.md b/ej2-asp-core-mvc/tree-grid/tool-bar.md index 909be27ff5..686fb88ef2 100644 --- a/ej2-asp-core-mvc/tree-grid/tool-bar.md +++ b/ej2-asp-core-mvc/tree-grid/tool-bar.md @@ -1,6 +1,6 @@ --- layout: post -title: Tool Bar in ##Platform_Name## Tree Grid Component +title: Toolbar in ##Platform_Name## Tree Grid Component | Syncfusion description: Learn here all about Tool Bar in Syncfusion ##Platform_Name## Tree Grid component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Tool Bar @@ -9,7 +9,7 @@ documentation: ug --- -# ToolBar +# ToolBar in TreeGrid Component The TreeGrid provides ToolBar support to handle treegrid actions. The [`Toolbar`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGrid~Toolbar.html) property accepts either the collection of built-in toolbar items and [`ItemModel`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Navigations.ToolbarItem_members.html) objects for custom toolbar items or HTML element ID for toolbar template. @@ -32,6 +32,7 @@ The following table shows built-in toolbar items and its actions. | Cancel | Cancels the edit state.| | Search | Searches the records by the given key.| | Print | Prints the treegrid.| +| ColumnChooser | Opens a dialog to select column visibility.| | ExcelExport | Exports the treegrid to Excel.| | PdfExport | Exports the treegrid to PDF.| | WordExport | Exports the treegrid to Word.| diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 9c467effec..bd3e9fc710 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -206,7 +206,7 @@ Google Gemini
  • - Azure Open AI + Azure OpenAI
  • Ollama LLM @@ -217,6 +217,16 @@
  • Custom views
  • File attachments
  • Templates
  • +
  • Speech + +
  • Appearance
  • Accessibility
  • Methods
  • @@ -576,10 +586,10 @@
  • Chat Bot Integrations
  • @@ -2983,7 +2993,19 @@
  • Release Notes -