From fc09636de218866d5bf6acf4134504b4ad2d1853 Mon Sep 17 00:00:00 2001 From: TamilRamGanesan-SF5080 Date: Thu, 28 Aug 2025 10:35:20 +0530 Subject: [PATCH 1/3] 976152: added ChatUI Integration for DialogFlow & Bot Framework --- .../integration-with-bot-framework.md | 233 ++++++++++++++++ .../integration-with-dialogflow.md | 221 +++++++++++++++ .../integration-with-bot-framework.md | 258 ++++++++++++++++++ .../integration-with-dialogflow.md.md | 220 +++++++++++++++ .../chat-ui/images/dialogflow.png | Bin 0 -> 33992 bytes ej2-asp-core-toc.html | 10 + ej2-asp-mvc-toc.html | 10 + 7 files changed, 952 insertions(+) create mode 100644 ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-bot-framework.md create mode 100644 ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-dialogflow.md create mode 100644 ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-bot-framework.md create mode 100644 ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md.md create mode 100644 ej2-asp-core-mvc/chat-ui/images/dialogflow.png 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 new file mode 100644 index 0000000000..aa500880f0 --- /dev/null +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-bot-framework.md @@ -0,0 +1,233 @@ +--- +layout: post +title: Integration of Microsoft Bot in ##Platform_Name## Chat UI Control | Syncfusion +description: Checkout and learn about Integration of Microsoft Bot in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Integration of Microsoft Bot +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Integration of Microsoft Bot Framework With ASP.NET MVC Chat UI component + +The Syncfusion ASP.NET MVC Chat UI supports integration with a Microsoft Bot Framework 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. + +## Getting Started With the Chat UI Component + +Before integrating Microsoft Bot Framework, ensure that the Syncfusion Chat UI component is correctly rendered in your ASP.NET MVC app: + +[ASP.NET MVC Getting Started Guide](../getting-started) + +## Prerequisites + +* `Microsoft Azure Account`: 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/). + +## Install Dependencies + +* Install backend dependencies for bot communication using NuGet: + +```bash + +Install-Package Microsoft.Bot.Connector.DirectLine +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. + +2. Enable the Direct Line channel: + * Go to `Channels` > `Direct Line` > `Default-Site`. + * Copy one of the displayed secret keys. + +3. Verify the Messaging endpoint in the Configuration section (e.g., https://your-bot-service.azurewebsites.net/api/messages). + +> `Security Note`: Never expose the Direct Line secret key in frontend code. Use a backend token server to handle it securely. + +## Set Up Token Server + +Create a Web API controller in your ASP.NET MVC project to handle Direct Line token generation. Add `Controllers/TokenController.cs`: + +```csharp + +using System; +using System.Configuration; +using System.Net; +using System.Net.Http; +using System.Threading.Tasks; +using System.Web.Http; +using Newtonsoft.Json; + +namespace YourNamespace.Controllers +{ + public class TokenController : ApiController + { + private static readonly HttpClient _httpClient = new HttpClient(); + + [HttpPost] + [Route("api/token/directline/token")] + public async Task GenerateToken() + { + var directLineSecret = ConfigurationManager.AppSettings["DirectLineSecret"]; + if (string.IsNullOrEmpty(directLineSecret)) + { + return BadRequest("Direct Line secret is not configured."); + } + + try + { + var request = new HttpRequestMessage(HttpMethod.Post, "https://directline.botframework.com/v3/directline/tokens/generate"); + request.Headers.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", directLineSecret); + + var response = await _httpClient.SendAsync(request); + response.EnsureSuccessStatusCode(); + + var responseContent = await response.Content.ReadAsStringAsync(); + dynamic tokenResponse = JsonConvert.DeserializeObject(responseContent); + return Ok(new { token = tokenResponse.token }); + } + catch (HttpRequestException ex) + { + return InternalServerError(new Exception("Failed to generate Direct Line token.", ex)); + } + } + } +} + +``` + +Add the Direct Line secret to `Web.config`: + +```xml + + + + +``` +>`Security Note`: Store the Direct Line secret in a secure configuration, such as Azure Key Vault, for production environments. + +## Integrate ChatUI in ASP.NET MVC + +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: + +```html + +@using Syncfusion.EJ2.InteractiveChat + +@{ + var currentUserModel = new ChatUIUser { Id = "user1", User = "You" }; + var botUserModel = new ChatUIUser { Id = "bot", User = "Bot" }; +} + +
+ @Html.EJS().ChatUI("chatUI").User(currentUserModel).MessageSend("onMessageSend").Render() +
+ + + + +``` + +>Ensure Syncfusion scripts and styles are included in `_Layout.cshtml` as per the getting started guide. Also, include the Bot Framework Web Chat script for Direct Line functionality. Register the Syncfusion script manager in `_Layout.cshtml`. + +## Configure Web.config for CORS (if needed) + +To enable CORS for API requests, add to `Web.config` under ``: + +```xml + + + + + + + + +``` + +## Run and Test + +### Start the Application: + +Run the project in Visual Studio or use IIS Express. +Open your app in the browser (e.g., `http://localhost:port`) to interact with your Microsoft Bot Framework chatbot. + +## Troubleshooting + +* `Token Server Error (500)`: Ensure the `DirectLineSecret` in `Web.config` is correct and the token endpoint is accessible. +* `CORS Error`: Verify the CORS configuration in `Web.config` allows requests from your frontend URL. +* `Bot is Not Responding`: + - Test the bot in the Azure Portal using the `Test in Web Chat` feature to ensure it’s running correctly. + - Check the bot’s `Messaging endpoint` in the Configuration section and ensure it is correct and accessible. +* `Connection Fails on Load`: Verify the token controller is running and accessible. Check the browser console for network errors. +* `Token Expiration`: Direct Line tokens are short-lived. The Direct Line client typically handles token refresh, but if issues persist, restart the Direct Line connection. \ No newline at end of file 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 new file mode 100644 index 0000000000..689e22f374 --- /dev/null +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-dialogflow.md @@ -0,0 +1,221 @@ +--- +layout: post +title: Integration of Dialogflow in ##Platform_Name## Chat UI Control | Syncfusion +description: Checkout and learn about Integration of Dialogflow in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Integration of Dialogflow +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Integration of Google Dialogflow With ASP.NET MVC Chat UI component + +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. + +## Getting Started With the ChatUI Component + +Before integrating Dialogflow, ensure that the Syncfusion Chat UI component is correctly rendered in your ASP.NET MVC app: + +[ASP.NET MVC Getting Started Guide](../getting-started) + +## Prerequisites + +* Google account to access `Dialogflow` and `Google Cloud Console`. +* 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. + +## Install Dependencies + +* Install backend dependencies for Dialogflow and server setup using NuGet: + +```bash + +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 + +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. + +> `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 + +Create `service-acct.json` with your Dialogflow service account credentials in your project root: + +```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", + ... +} + +``` + +Set up a Web API controller in `Controllers/ChatController.cs` to handle Dialogflow requests: + +```csharp + +using Google.Cloud.Dialogflow.V2; +using Google.Apis.Auth.OAuth2; +using System; +using System.Configuration; +using System.Threading.Tasks; +using System.Web.Http; + +namespace YourNamespace.Controllers +{ + public class ChatController : ApiController + { + private readonly SessionsClient _sessionsClient; + private readonly string _projectId; + + public ChatController() + { + var credential = GoogleCredential.FromFile("service-acct.json"); + _sessionsClient = SessionsClient.Create(credential.ToChannelCredentials()); + _projectId = ConfigurationManager.AppSettings["DialogflowProjectId"]; // Or hardcode from JSON + } + + [HttpPost] + [Route("api/chat/message")] + public async Task SendMessage([FromBody] MessageRequest request) + { + var sessionId = request.SessionId ?? "default-session"; + var session = SessionName.FromProjectSession(_projectId, sessionId); + + var queryInput = new QueryInput + { + Text = new TextInput + { + Text = request.Text, + LanguageCode = "en-US" + } + }; + + try + { + var response = await _sessionsClient.DetectIntentAsync(new DetectIntentRequest { Session = session.ToString(), QueryInput = queryInput }); + var reply = response.QueryResult.FulfillmentText; + return Ok(new { reply }); + } + catch (Exception ex) + { + return InternalServerError(new Exception("Error connecting to Dialogflow.", ex)); + } + } + } + + public class MessageRequest + { + public string Text { get; set; } + public string SessionId { get; set; } + } +} + +``` + +> Use a unique `sessionId` (e.g., Guid) for each user to maintain conversation context. Add the projectId to Web.config if needed: + +## Integrate ChatUI in ASP.NET MVC + +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. + +### Forward Message to backend: + +In the `messageSend` event handler, send a POST request to your backend API endpoint (`/api/chat/message`). The backend forwards the message to Dialogflow and returns the response. + +### Displaying Bot response: + +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: + +```html + +@using Syncfusion.EJ2.InteractiveChat + +@{ + var currentUserModel = new ChatUIUser { Id = "user1", User = "Albert" }; + var botUserModel = new ChatUIUser { Id = "user2", User = "Bot", AvatarUrl = "https://ej2.syncfusion.com/demos/src/chat-ui/images/bot.png" }; +} + +
+ @Html.EJS().ChatUI("chatUI").HeaderText("Bot").HeaderIconCss("e-header-icon").User(currentUserModel).MessageSend("onMessageSend").Render() +
+ + + + +``` + +> Ensure to include Syncfusion scripts and styles in `_Layout.cshtml` as per the getting started guide. Also, register the Syncfusion script manager in `_Layout.cshtml`. + +## Run and Test + +### Start the Application: + +Run the project in Visual Studio or use IIS Express. + +Open your app in the browser and chat with your Dialogflow-powered bot. + +![ChatUI with Dialogflow](../../images/dialogflow.png) + +## Troubleshooting: + +* `Permission Denied`: Ensure the service account has the `Dialogflow API Client` role in the Google Cloud Console. +* `CORS Error`: If using separate origins, configure CORS in Web.config (e.g., add custom headers under ). +* `No Response`: Test intents in the Dialogflow Console simulator to ensure they are configured correctly. +* `Quota Exceeded`: Check Dialogflow API quotas in the Google Cloud Console. +* `Network Issues`: Confirm the application is running and the frontend is pointing to the correct API URL. +* `Invalid Credentials`: Verify the service account JSON or configuration settings are correctly set up. 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 new file mode 100644 index 0000000000..3a50bb59af --- /dev/null +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-bot-framework.md @@ -0,0 +1,258 @@ +--- +layout: post +title: Integration of Microsoft Bot in ##Platform_Name## Chat UI Control | Syncfusion +description: Checkout and learn about Integration of Microsoft Bot in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Integration of Microsoft Bot +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Integration of Microsoft Bot Framework With ASP.NET Core Chat UI component + +The Syncfusion ASP.NET Core Chat UI supports integration with a Microsoft Bot Framework 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. + +## Getting Started With the ChatUI Component + +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) + +## Prerequisites + +* `Microsoft Azure Account`: 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/). + +## Install Dependencies +* Install backend dependencies for bot communication using NuGet: + +```bash + +dotnet add package Microsoft.Bot.Connector.DirectLine +dotnet add package Microsoft.AspNetCore.Mvc.NewtonsoftJson + +``` + +* Install the Syncfusion EJ2 ASP.NET Core package: + +```bash + +dotnet add package Syncfusion.EJ2.AspNet.Core + +``` + +## Configure the Azure Bot + +1. In the [Azure Portal](https://portal.azure.com/#home), navigate to your bot resource. + +2. Enable the Direct Line channel: + * Go to `Channels` > `Direct Line` > `Default-Site`. + * Copy one of the displayed secret keys. + +3. Verify the Messaging endpoint in the Configuration section (e.g., https://your-bot-service.azurewebsites.net/api/messages). + +> `Security Note`: Never expose the Direct Line secret key in frontend code. Use a backend token server to handle it securely. + +## Set Up Token Server + +Create a controller in your ASP.NET Core project to handle Direct Line token generation. Add `Controllers/TokenController.cs`: + +```csharp + +using Microsoft.AspNetCore.Mvc; +using System.Net.Http; +using System.Threading.Tasks; +using Newtonsoft.Json; + +namespace YourNamespace.Controllers +{ + [ApiController] + [Route("api/[controller]")] + public class TokenController : ControllerBase + { + private readonly IConfiguration _configuration; + private readonly HttpClient _httpClient; + + public TokenController(IConfiguration configuration, IHttpClientFactory httpClientFactory) + { + _configuration = configuration; + _httpClient = httpClientFactory.CreateClient(); + } + + [HttpPost("directline/token")] + public async Task GenerateToken() + { + var directLineSecret = _configuration["DirectLine:Secret"]; + if (string.IsNullOrEmpty(directLineSecret)) + { + return BadRequest(new { error = "Direct Line secret is not configured." }); + } + + try + { + var request = new HttpRequestMessage(HttpMethod.Post, "https://directline.botframework.com/v3/directline/tokens/generate"); + request.Headers.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", directLineSecret); + + var response = await _httpClient.SendAsync(request); + response.EnsureSuccessStatusCode(); + + var responseContent = await response.Content.ReadAsStringAsync(); + var tokenResponse = JsonConvert.DeserializeObject(responseContent); + return Ok(new { token = tokenResponse.token }); + } + catch (HttpRequestException ex) + { + return StatusCode(500, new { error = "Failed to generate Direct Line token.", details = ex.Message }); + } + } + } +} + +``` +Add the Direct Line secret to `appsettings.json`: + +```bash + +{ + "DirectLine": { + "Secret": "PASTE_YOUR_DIRECT_LINE_SECRET_HERE" + } +} + +``` + +> `Security Note`: Store the Direct Line secret in a secure configuration, such as Azure Key Vault, for production environments.| + +## Integrate ChatUI in ASP.NET Core + +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` (assuming MVC) to integrate the Syncfusion Chat UI with the Direct Line API: + +```html + +@using Syncfusion.EJ2.InteractiveChat + +@{ + var currentUserModel = new ChatUIUser { Id = "user1", User = "You" }; + var botUserModel = new ChatUIUser { Id = "bot", User = "Bot" }; +} + +
+ +
+ + + + +``` + +> Ensure Syncfusion scripts and styles are included in `_Layout.cshtml` as per the getting started guide. Also, register `` in `_Layout.cshtml`. Include the Bot Framework Web Chat script for Direct Line functionality. + +## Configure Program.cs + +Ensure CORS and HttpClient are configured in `Program.cs`: + +```csharp + +var builder = WebApplication.CreateBuilder(args); + +builder.Services.AddControllers().AddNewtonsoftJson(); +builder.Services.AddHttpClient(); +builder.Services.AddCors(options => +{ + options.AddPolicy("AllowAll", builder => + { + builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader(); + }); +}); + +var app = builder.Build(); + +app.UseCors("AllowAll"); +app.UseRouting(); +app.MapControllers(); + +app.Run(); + +``` + +## Run and Test + +### Start the Application: + +Navigate to your project folder and run: + +```bash + +dotnet run + +``` + +Open your app in the browser (e.g., `http://localhost:5000`) to interact with your Microsoft Bot Framework chatbot. + +## Troubleshooting + +* `Token Server Error (500)`: Ensure the DirectLine:Secret in appsettings.json is correct and the token endpoint is accessible. +* `CORS Error`: Verify the CORS policy in Program.cs allows requests from your frontend URL. +* `Bot is Not Responding`: + - Test the bot in the Azure Portal using the `Test in Web Chat` feature to ensure it's running correctly. + - Check the bot's `Messaging endpoint` in the Configuration section and ensure it is correct and accessible. +* `Connection Fails on Load`: Verify the token controller is running and accessible. Check the browser console for network errors. +* `Token Expiration`: Direct Line tokens are short-lived. The Direct Line client typically handles token refresh, but if issues persist, restart the Direct Line connection. \ No newline at end of file diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md.md new file mode 100644 index 0000000000..feae54f73c --- /dev/null +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md.md @@ -0,0 +1,220 @@ +--- +layout: post +title: Integration of Dialogflow in ##Platform_Name## Chat UI Control | Syncfusion +description: Checkout and learn about Integration of Dialogflow in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Integration of Dialogflow +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Integration of Google Dialogflow With ASP.NET Core Chat UI component + +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. + +## Getting Started With the ChatUI Component + +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) + +## Prerequisites + +* Google account to access `Dialogflow` and `Google Cloud Console`. +* .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. + +## Install Dependencies +* Install backend dependencies for Dialogflow and server setup using NuGet: + +```bash + +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. + +> `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): + +```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", +... +} +``` +Set up an API controller in `Controllers/ChatController.cs` to handle Dialogflow requests: + +```csharp + +using Google.Cloud.Dialogflow.V2; +using Google.Apis.Auth.OAuth2; +using Microsoft.AspNetCore.Mvc; +using System.Threading.Tasks; + +namespace YourNamespace.Controllers +{ + [ApiController] + [Route("api/[controller]")] + public class ChatController : ControllerBase + { + private readonly SessionsClient _sessionsClient; + private readonly string _projectId; + + public ChatController(IConfiguration configuration) + { + var credential = GoogleCredential.FromFile("service-acct.json"); + _sessionsClient = SessionsClient.Create(credential.ToChannelCredentials()); + _projectId = "your-dialogflow-project-id"; // Or from configuration + } + + [HttpPost("message")] + public async Task SendMessage([FromBody] MessageRequest request) + { + var sessionId = request.SessionId ?? "default-session"; + var session = SessionName.FromProjectSession(_projectId, sessionId); + + var queryInput = new QueryInput + { + Text = new TextInput + { + Text = request.Text, + LanguageCode = "en-US" + } + }; + + try + { + var response = await _sessionsClient.DetectIntentAsync(new DetectIntentRequest { Session = session.ToString(), QueryInput = queryInput }); + var reply = response.QueryResult.FulfillmentText; + return Ok(new { reply }); + } + catch (Exception ex) + { + return StatusCode(500, new { reply = "Error connecting to Dialogflow." }); + } + } + } + + public class MessageRequest + { + public string Text { get; set; } + public string SessionId { get; set; } + } +} + +``` +> Use a unique `sessionId` (e.g., Guid) for each user to maintain conversation context. Add the projectId to appsettings.json if needed. + +## Integrate ChatUI in ASP.NET Core + +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. + +### Forward Message to backend: + +In the messageSend event handler, send a POST request to your backend API endpoint (`/api/chat/message`). The backend forwards the message to Dialogflow and returns the response. + +### Displaying Bot response: + +Use the `addMessage` method to programmatically add the bot's reply to the Chat UI. + +Create `Views/Home/Index.cshtml` (assuming MVC) to integrate the Syncfusion Chat UI with the Dialogflow backend: + +```html + +@using Syncfusion.EJ2.InteractiveChat + +@{ + var currentUserModel = new ChatUIUser { Id = "user1", User = "Albert" }; + var botUserModel = new ChatUIUser { Id = "user2", User = "Bot", AvatarUrl = "https://ej2.syncfusion.com/demos/src/chat-ui/images/bot.png" }; +} + +
+ +
+ + + + + +``` +> Ensure to include Syncfusion scripts and styles in _Layout.cshtml as per the getting started guide. Also, register ` in _Layout.cshtml.` + +## Run and Test + +### Start the Application: + +Navigate to your project folder and run: + +```bash + +dotnet run + +``` + + Open your app and chat with your Dialogflow-powered bot. + +![ChatUI with Dialogflow](../../images/dialogflow.png) + +## Troubleshooting: + +* `Permission Denied`: Ensure the service account has the `Dialogflow API Client` role in the Google Cloud Console. +* `CORS Error`: Configure CORS in Program.cs if needed (e.g., app.UseCors()). +* `No Response`: Test intents in the Dialogflow Console simulator to ensure they are configured correctly. +* `Quota Exceeded`: Check Dialogflow API quotas in the Google Cloud Console. +* `Network Issues`: Confirm the application is running and the API URL is correct. +* `Invalid Credentials`: Verify the service account JSON or configuration settings are correctly set up. \ No newline at end of file diff --git a/ej2-asp-core-mvc/chat-ui/images/dialogflow.png b/ej2-asp-core-mvc/chat-ui/images/dialogflow.png new file mode 100644 index 0000000000000000000000000000000000000000..8b96f608e9f47c5a16749fed251df4d9a8a8b621 GIT binary patch literal 33992 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 literal 0 HcmV?d00001 diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 40c21fa2f7..09f28c453e 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -560,6 +560,16 @@
  • Getting Started
  • Messages
    • +
  • Chat Bot Integrations + +
  • Time break
  • Timestamp
  • Typing indicator
    • diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html index 2ca0fc8e33..38822b222a 100644 --- a/ej2-asp-mvc-toc.html +++ b/ej2-asp-mvc-toc.html @@ -563,6 +563,16 @@
    • Getting Started
    • Messages
      • +
    • Chat Bot Integrations + +
    • Time break
    • Timestamp
    • Typing indicator
      • From 93b8f33562b3a49245e650357c4fe41e24a76481 Mon Sep 17 00:00:00 2001 From: TamilRamGanesan-SF5080 Date: Thu, 28 Aug 2025 12:44:59 +0530 Subject: [PATCH 2/3] 976152: updated changes in md file --- .../integration-with-bot-framework.md | 30 ++++++++++------- .../integration-with-dialogflow.md | 23 ++++++------- .../integration-with-bot-framework.md | 25 ++++++++++----- .../integration-with-dialogflow.md.md | 32 +++++++++---------- 4 files changed, 62 insertions(+), 48 deletions(-) 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 aa500880f0..cb785c4a7d 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 @@ -60,7 +60,8 @@ Install-Package Syncfusion.EJ2.MVC5 Create a Web API controller in your ASP.NET MVC project to handle Direct Line token generation. Add `Controllers/TokenController.cs`: -```csharp +{% tabs %} +{% highlight cs tabtitle="TokenController.cs" %} using System; using System.Configuration; @@ -75,7 +76,6 @@ namespace YourNamespace.Controllers public class TokenController : ApiController { private static readonly HttpClient _httpClient = new HttpClient(); - [HttpPost] [Route("api/token/directline/token")] public async Task GenerateToken() @@ -85,15 +85,12 @@ namespace YourNamespace.Controllers { return BadRequest("Direct Line secret is not configured."); } - try { var request = new HttpRequestMessage(HttpMethod.Post, "https://directline.botframework.com/v3/directline/tokens/generate"); request.Headers.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", directLineSecret); - var response = await _httpClient.SendAsync(request); response.EnsureSuccessStatusCode(); - var responseContent = await response.Content.ReadAsStringAsync(); dynamic tokenResponse = JsonConvert.DeserializeObject(responseContent); return Ok(new { token = tokenResponse.token }); @@ -106,16 +103,20 @@ namespace YourNamespace.Controllers } } -``` +{% endhighlight %} +{% endtabs %} Add the Direct Line secret to `Web.config`: -```xml +{% tabs %} +{% highlight js tabtitle=".env" %} -``` +{% endhighlight %} +{% endtabs %} + >`Security Note`: Store the Direct Line secret in a secure configuration, such as Azure Key Vault, for production environments. ## Integrate ChatUI in ASP.NET MVC @@ -124,7 +125,8 @@ Use the Chat UI `messageSend` event to handle message exchanges. This event is t Create `Views/Home/Index.cshtml` to integrate the Syncfusion Chat UI with the Direct Line API: -```html +{% tabs %} +{% highlight Html tabtitle="Index.cshtml" %} @using Syncfusion.EJ2.InteractiveChat @@ -196,7 +198,8 @@ Create `Views/Home/Index.cshtml` to integrate the Syncfusion Chat UI with the Di } -``` +{% endhighlight %} +{% endtabs %} >Ensure Syncfusion scripts and styles are included in `_Layout.cshtml` as per the getting started guide. Also, include the Bot Framework Web Chat script for Direct Line functionality. Register the Syncfusion script manager in `_Layout.cshtml`. @@ -204,7 +207,9 @@ Create `Views/Home/Index.cshtml` to integrate the Syncfusion Chat UI with the Di To enable CORS for API requests, add to `Web.config` under ``: -```xml +{% tabs %} +{% highlight js tabtitle="Web.config.js" %} + @@ -213,7 +218,8 @@ To enable CORS for API requests, add to `Web.config` under ``: -``` +{% endhighlight %} +{% endtabs %} ## Run and Test 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 689e22f374..38935f99c5 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 @@ -57,7 +57,8 @@ Install-Package Syncfusion.EJ2.MVC5 Create `service-acct.json` with your Dialogflow service account credentials in your project root: -```json +{% tabs %} +{% highlight js tabtitle="service-acct.json" %} { "type": "service_account", @@ -68,11 +69,13 @@ Create `service-acct.json` with your Dialogflow service account credentials in y ... } -``` +{% endhighlight %} +{% endtabs %} Set up a Web API controller in `Controllers/ChatController.cs` to handle Dialogflow requests: -```csharp +{% tabs %} +{% highlight cs tabtitle="ChatController.cs" %} using Google.Cloud.Dialogflow.V2; using Google.Apis.Auth.OAuth2; @@ -87,21 +90,18 @@ namespace YourNamespace.Controllers { private readonly SessionsClient _sessionsClient; private readonly string _projectId; - public ChatController() { var credential = GoogleCredential.FromFile("service-acct.json"); _sessionsClient = SessionsClient.Create(credential.ToChannelCredentials()); _projectId = ConfigurationManager.AppSettings["DialogflowProjectId"]; // Or hardcode from JSON } - [HttpPost] [Route("api/chat/message")] public async Task SendMessage([FromBody] MessageRequest request) { var sessionId = request.SessionId ?? "default-session"; var session = SessionName.FromProjectSession(_projectId, sessionId); - var queryInput = new QueryInput { Text = new TextInput @@ -110,7 +110,6 @@ namespace YourNamespace.Controllers LanguageCode = "en-US" } }; - try { var response = await _sessionsClient.DetectIntentAsync(new DetectIntentRequest { Session = session.ToString(), QueryInput = queryInput }); @@ -123,7 +122,6 @@ namespace YourNamespace.Controllers } } } - public class MessageRequest { public string Text { get; set; } @@ -131,7 +129,8 @@ namespace YourNamespace.Controllers } } -``` +{% endhighlight %} +{% endtabs %} > Use a unique `sessionId` (e.g., Guid) for each user to maintain conversation context. Add the projectId to Web.config if needed: @@ -149,7 +148,8 @@ Use the `addMessage` method to programmatically add the bot's reply to the Chat Create `Views/Home/Index.cshtml` to integrate the Syncfusion Chat UI with the Dialogflow backend: -```html +{% tabs %} +{% highlight Html tabtitle="Index.cshtml" %} @using Syncfusion.EJ2.InteractiveChat @@ -197,7 +197,8 @@ Create `Views/Home/Index.cshtml` to integrate the Syncfusion Chat UI with the Di } -``` +{% endhighlight %} +{% endtabs %} > Ensure to include Syncfusion scripts and styles in `_Layout.cshtml` as per the getting started guide. Also, register the Syncfusion script manager in `_Layout.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 3a50bb59af..260a19406d 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 @@ -58,7 +58,8 @@ dotnet add package Syncfusion.EJ2.AspNet.Core Create a controller in your ASP.NET Core project to handle Direct Line token generation. Add `Controllers/TokenController.cs`: -```csharp +{% tabs %} +{% highlight cs tabtitle="TokenController.cs" %} using Microsoft.AspNetCore.Mvc; using System.Net.Http; @@ -109,10 +110,13 @@ namespace YourNamespace.Controllers } } -``` +{% endhighlight %} +{% endtabs %} + Add the Direct Line secret to `appsettings.json`: -```bash +{% tabs %} +{% highlight js tabtitle="appsettings.json" %} { "DirectLine": { @@ -120,7 +124,8 @@ Add the Direct Line secret to `appsettings.json`: } } -``` +{% endhighlight %} +{% endtabs %} > `Security Note`: Store the Direct Line secret in a secure configuration, such as Azure Key Vault, for production environments.| @@ -129,7 +134,8 @@ Add the Direct Line secret to `appsettings.json`: 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` (assuming MVC) to integrate the Syncfusion Chat UI with the Direct Line API: -```html +{% tabs %} +{% highlight Html tabtitle="Index.cshtml" %} @using Syncfusion.EJ2.InteractiveChat @@ -201,7 +207,8 @@ Create `Views/Home/Index.cshtml` (assuming MVC) to integrate the Syncfusion Chat } -``` +{% endhighlight %} +{% endtabs %} > Ensure Syncfusion scripts and styles are included in `_Layout.cshtml` as per the getting started guide. Also, register `` in `_Layout.cshtml`. Include the Bot Framework Web Chat script for Direct Line functionality. @@ -209,7 +216,8 @@ Create `Views/Home/Index.cshtml` (assuming MVC) to integrate the Syncfusion Chat Ensure CORS and HttpClient are configured in `Program.cs`: -```csharp +{% tabs %} +{% highlight cs tabtitle="Program.cs" %} var builder = WebApplication.CreateBuilder(args); @@ -231,7 +239,8 @@ app.MapControllers(); app.Run(); -``` +{% endhighlight %} +{% endtabs %} ## Run and Test diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md.md index feae54f73c..29876af9b8 100644 --- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md.md +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md.md @@ -54,7 +54,8 @@ dotnet add package Syncfusion.EJ2.AspNet.Core Create `service-acct.json` with your Dialogflow service account credentials in your project root (or use User Secrets for development): -```json +{% tabs %} +{% highlight js tabtitle="service-acct.json" %} { "type": "service_account", @@ -64,10 +65,13 @@ Create `service-acct.json` with your Dialogflow service account credentials in y "client_email": "dialogflow-agent@your-dialogflow-project-id.iam.gserviceaccount.com", ... } -``` +{% endhighlight %} +{% endtabs %} + Set up an API controller in `Controllers/ChatController.cs` to handle Dialogflow requests: -```csharp +{% tabs %} +{% highlight cs tabtitle="ChatController.cs" %} using Google.Cloud.Dialogflow.V2; using Google.Apis.Auth.OAuth2; @@ -82,20 +86,17 @@ namespace YourNamespace.Controllers { private readonly SessionsClient _sessionsClient; private readonly string _projectId; - public ChatController(IConfiguration configuration) { var credential = GoogleCredential.FromFile("service-acct.json"); _sessionsClient = SessionsClient.Create(credential.ToChannelCredentials()); _projectId = "your-dialogflow-project-id"; // Or from configuration } - [HttpPost("message")] public async Task SendMessage([FromBody] MessageRequest request) { var sessionId = request.SessionId ?? "default-session"; var session = SessionName.FromProjectSession(_projectId, sessionId); - var queryInput = new QueryInput { Text = new TextInput @@ -104,7 +105,6 @@ namespace YourNamespace.Controllers LanguageCode = "en-US" } }; - try { var response = await _sessionsClient.DetectIntentAsync(new DetectIntentRequest { Session = session.ToString(), QueryInput = queryInput }); @@ -117,7 +117,6 @@ namespace YourNamespace.Controllers } } } - public class MessageRequest { public string Text { get; set; } @@ -125,7 +124,9 @@ namespace YourNamespace.Controllers } } -``` +{% endhighlight %} +{% endtabs %} + > Use a unique `sessionId` (e.g., Guid) for each user to maintain conversation context. Add the projectId to appsettings.json if needed. ## Integrate ChatUI in ASP.NET Core @@ -142,29 +143,25 @@ Use the `addMessage` method to programmatically add the bot's reply to the Chat Create `Views/Home/Index.cshtml` (assuming MVC) to integrate the Syncfusion Chat UI with the Dialogflow backend: -```html +{% tabs %} +{% highlight Html tabtitle="Index.cshtml" %} @using Syncfusion.EJ2.InteractiveChat - @{ var currentUserModel = new ChatUIUser { Id = "user1", User = "Albert" }; var botUserModel = new ChatUIUser { Id = "user2", User = "Bot", AvatarUrl = "https://ej2.syncfusion.com/demos/src/chat-ui/images/bot.png" }; } -
      - - -``` +{% endhighlight %} +{% endtabs %} + > Ensure to include Syncfusion scripts and styles in _Layout.cshtml as per the getting started guide. Also, register ` in _Layout.cshtml.` ## Run and Test From f224c24add2acfc6e99d977366fbda777916c22a Mon Sep 17 00:00:00 2001 From: TamilRamGanesan-SF5080 Date: Thu, 28 Aug 2025 13:15:57 +0530 Subject: [PATCH 3/3] 976152: resolved the CI failure --- .../bot-integrations/integration-with-bot-framework.md | 4 ++-- .../bot-integrations/integration-with-bot-framework.md | 4 ++-- ...n-with-dialogflow.md.md => integration-with-dialogflow.md} | 0 3 files changed, 4 insertions(+), 4 deletions(-) rename ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/{integration-with-dialogflow.md.md => integration-with-dialogflow.md} (100%) 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 cb785c4a7d..24cd5ed668 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 @@ -1,6 +1,6 @@ --- layout: post -title: Integration of Microsoft Bot in ##Platform_Name## Chat UI Control | Syncfusion +title: Microsoft Bot in ##Platform_Name## Chat UI Control | Syncfusion description: Checkout and learn about Integration of Microsoft Bot in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Integration of Microsoft Bot @@ -8,7 +8,7 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Integration of Microsoft Bot Framework With ASP.NET MVC Chat UI component +# Microsoft Bot Framework With ASP.NET MVC Chat UI component The Syncfusion ASP.NET MVC Chat UI supports integration with a Microsoft Bot Framework 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. 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 260a19406d..587b6b9c94 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 @@ -1,6 +1,6 @@ --- layout: post -title: Integration of Microsoft Bot in ##Platform_Name## Chat UI Control | Syncfusion +title: Microsoft Bot in ##Platform_Name## Chat UI Control | Syncfusion description: Checkout and learn about Integration of Microsoft Bot in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Integration of Microsoft Bot @@ -8,7 +8,7 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Integration of Microsoft Bot Framework With ASP.NET Core Chat UI component +# Microsoft Bot Framework With ASP.NET Core Chat UI component The Syncfusion ASP.NET Core Chat UI supports integration with a Microsoft Bot Framework 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. diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md similarity index 100% rename from ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md.md rename to ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md