Integrated latest changes at 08-30-2025 1:30:16 PM

Author: SyncfusionBuild

ej2-javascript-toc.html

@@ -519,6 +519,16 @@
 <ul>
     <li><a href="/ej2-javascript/chat-ui/es5-getting-started">Getting Started</a></li>
     <li><a href="/ej2-javascript/chat-ui/messages">Messages</a></li>
+    <li>Chat Bot Integrations
+        <ul>
+            <li>
+                <a href="/ej2-javascript/chat-ui/bot-integrations/integration-with-bot-dialogflow">Integration with Google Dialogflow</a>
+            </li>
+            <li>
+                <a href="/ej2-javascript/chat-ui/bot-integrations/integration-with-bot-framework">Integration with Microsoft Bot Framework</a>
+            </li>
+        </ul>
+    </li>
     <li><a href="/ej2-javascript/chat-ui/timebreak">Time break</a></li>
     <li><a href="/ej2-javascript/chat-ui/timestamp">Timestamp</a></li>
     <li><a href="/ej2-javascript/chat-ui/typing-indicator">Typing indicator</a></li>
@@ -937,6 +947,7 @@
 <li><a href="/ej2-javascript/dialog/how-to/display-a-dialog-with-custom-position">Display a Dialog with custom position</a></li>
 <li><a href="/ej2-javascript/dialog/how-to/prevent-closing-of-modal-dialog">Prevent closing of modal Dialog</a></li>
 <li><a href="/ej2-javascript/dialog/how-to/prevent-the-focus-on-the-first-element">Prevent the focus on the first element</a></li>
+<li><a href="/ej2-javascript/dialog/how-to/prevent-the-focus-to-the-previous-element">Prevent the focus to the previous element</a></li>
 <li><a href="/ej2-javascript/dialog/how-to/prevent-opening-of-the-dialog">Open a Dialog on condition</a></li>
 <li><a href="/ej2-javascript/dialog/how-to/read-all-the-values-from-dialog-on-button-click">Read All values of Dialog on button click</a></li>
 <li><a href="/ej2-javascript/dialog/how-to/customize-the-dialog-appearance">Customize the Dialog appearance</a></li>

ej2-javascript/chat-ui/bot-integrations/integration-with-bot-dialogflow.md

@@ -0,0 +1,191 @@
+---
+layout: post
+title: Dialogflow With ##Platform_Name## Chat UI control | Syncfusion
+description:  Checkout and learn about Integration of Google Dialogflow With ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Chat UI
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Integration of Google Dialogflow With ##Platform_Name## 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  applications.
+
+## Getting Started With the ChatUI control
+
+Before integrating Dialogflow, ensure that the Syncfusion Chat UI control is correctly rendered in your application:
+[ ##Platform_Name## Getting Started Guide](../getting-started)
+
+## Prerequisites
+
+* Google account to access `Dialogflow` and `Google Cloud Console`.
+* Backend requires `Node.js` (v16 or higher) and `npm`.
+* Syncfusion Chat UI for  ##Platform_Name##  `@syncfusion/ej2-interactive-chat` 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:
+
+```bash
+
+npm install express body-parser dialogflow cors
+
+```
+* Install the Syncfusion Chat UI in your  project:
+
+```bash
+
+npm install @syncfusion/ej2-interactive-chat --save
+
+```
+
+## 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 `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",
+  ...
+}
+{% endhighlight %}
+{% endtabs %}
+
+Set up an Express server in `backend/index.js` to handle Dialogflow requests:
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+
+const express = require('express');
+const { SessionsClient } = require('dialogflow');
+const bodyParser = require('body-parser');
+const cors = require('cors');
+const serviceAccount = require('./service-acct.json');
+
+const app = express();
+app.use(cors());
+app.use(bodyParser.json());
+
+const projectId = serviceAccount.project_id;
+const sessionClient = new SessionsClient({ credentials: serviceAccount });
+
+app.post('/api/message', async (req, res) => {
+  const message = req.body.text;
+  const sessionId = req.body.sessionId || 'default-session';
+
+  const sessionPath = `projects/${projectId}/agent/sessions/${sessionId}`;
+
+  const request = {
+    session: sessionPath,
+    queryInput: {
+      text: {
+        text: message,
+        languageCode: 'en-US',
+      },
+    },
+  };
+
+  try {
+    const responses = await sessionClient.detectIntent(request);
+    const result = responses[0].queryResult;
+    res.json({ reply: result.fulfillmentText });
+  } catch (err) {
+    console.error('Dialogflow error:', err);
+    res.status(500).json({ reply: "Error connecting to Dialogflow." });
+  }
+});
+
+app.listen(5000, () => console.log('Backend running on http://localhost:5000'));
+
+{% endhighlight %}
+{% endtabs %}
+
+> Use a unique `sessionId` (e.g., UUID) for each user to maintain conversation context.
+
+## Integrate ChatUI in ##Platform_Name## 
+
+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:
+
+Upon message submission, a POST request is sent to your backend API endpoint (`/api/message`). This backend service forwards the user’s message to Dialogflow and waits for a response.
+
+### Displaying Bot response:
+
+You can add the below respective files in your application:
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chat-ui/dialogflow/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chat-ui/dialogflow/index.html %}
+{% endhighlight %}
+{% endtabs %}       
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chat-ui/dialogflow/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chat-ui/dialogflow/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+## Run and Test
+
+### Start the Backend server:
+
+Navigate to your backend project folder and run the following command to start the Node.js server:
+
+```bash
+
+node index.js
+
+```
+
+### Start the ##Platform_Name##  frontend:
+
+In a separate terminal window, navigate to your project folder and start the development server:
+
+```bash
+
+npm start
+
+```
+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`: Verify that the CORS origin in backend/index.js matches your frontend URL (e.g., http://localhost:3000).
+* `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 backend server is running and the frontend is pointing to the correct URL (e.g., http://localhost:5000).
+* `Invalid Credentials`: Verify the service account JSON or environment variables are correctly configured.

ej2-javascript/chat-ui/bot-integrations/integration-with-bot-framework.md

@@ -0,0 +1,171 @@
+---
+layout: post
+title: Microsoft Bot With ##Platform_Name## Chat UI component | Syncfusion
+description:  Checkout and learn about Integration of Microsoft Bot Framework With ##Platform_Name## Chat UI component of Syncfusion Essential JS 2 and more details.
+platform: ej2-javascript
+control: Chat UI
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Integration of Microsoft Bot With ##Platform_Name## Chat UI control
+
+The Syncfusion 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 your application.
+
+## Getting Started With the Chat UI control
+
+Before integrating Microsoft Bot Framework, ensure that the Syncfusion Chat UI control is correctly rendered in your application:
+
+[##Platform_Name## Getting Started Guide](../getting-started)
+
+## Prerequisites
+
+* `Microsoft Azure Account`: Required to create and host the bot.
+* `Node.js Environment`: The backend portion requires `Node.js` and `npm`.
+* `Syncfusion Chat UI`: Install @syncfusion/ej2-interactive-chat in your  project.
+* `Deployed Azure Bot`: A bot should be created and published using the Bot Framework, which is accessible via an Azure App Service. Refer to Microsoft's Bot Creation Guide.
+
+## Install Dependencies
+
+* Install `frontend` dependencies for bot communication and the Syncfusion Chat UI:
+
+    * Install `directline-js` package to handle communication with the Bot Framework.
+
+    * Install `axios` for the HTTP requests.
+
+```bash
+
+npm install @syncfusion/ej2-interactive-chat --save
+npm install directline-js axios --save
+
+```
+
+* Install `backend` dependencies for the token server:
+
+```bash
+
+npm install express axios cors dotenv
+
+```
+
+## 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 `token-server` folder with an `index.js` and a `.env` files.
+
+{% tabs %}
+{% highlight js tabtitle=".env" %}
+DIRECT_LINE_SECRET=PASTE_YOUR_DIRECT_LINE_SECRET_HERE
+{% endhighlight %}
+{% endtabs %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.js" %}
+require('dotenv').config();
+const express = require('express');
+const axios = require('axios');
+const cors = require('cors');
+
+const app = express();
+app.use(cors()); // Enable CORS for your frontend
+
+const directLineSecret = process.env.DIRECT_LINE_SECRET;
+if (!directLineSecret) {
+    throw new Error('Direct Line secret is not set in the .env file.');
+}
+
+app.post('/directline/token', async (req, res) => {
+    try {
+        const response = await axios.post(
+            'https://directline.botframework.com/v3/directline/tokens/generate',
+            {}, // Request body can be empty
+            {
+                headers: {
+                    'Authorization': `Bearer ${directLineSecret}`
+                }
+            }
+        );
+        res.json({ token: response.data.token });
+    } catch (err) {
+        console.error('Error generating Direct Line token:', err.response ? err.response.data : err.message);
+        res.status(500).json({ error: 'Failed to generate Direct Line token.' });
+    }
+});
+
+const port = process.env.PORT || 5000;
+app.listen(port, () => console.log(`Token server running on http://localhost:${port}`));
+{% endhighlight %}
+{% endtabs %}
+
+## Integrate ChatUI in ##Platform_Name##
+
+Add the below files in their respective files to connect the Syncfusion Chat UI to the bot via the Direct Line API:
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chat-ui/bot-framework/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chat-ui/bot-framework/index.html %}
+{% endhighlight %}
+{% endtabs %}       
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chat-ui/bot-framework/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chat-ui/bot-framework/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+## Run and Test
+
+### Start the Token Server
+
+Navigate to the `token-server` folder and run the following command to start the server:
+
+```bash
+
+node index.js
+
+```
+
+### Start the frontend
+
+In a separate terminal window, navigate to your project folder and start the development server:
+
+```bash
+
+npm start
+
+```
+Open `http://localhost:3000` to interact with your Microsoft Bot Framework chatbot.
+
+## Troubleshooting
+
+* `Token Server Error (500)`: Ensure the `DIRECT_LINE_SECRET` in the `.env` file is correct and that you have restarted the token server after changes.
+* `CORS Error`: Ensure the CORS configuration in `index.js` allows requests from your frontend URL (e.g., `http://localhost:3000`).
+* `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 server is running and accessible from the browser. Check the console for network errors.
+* `Token Expiration`: Direct Line tokens are short-lived. The `directline-js` library typically handles token refresh automatically, but if issues persist, restart the Direct Line connection.