There's an issue with frontend bundler for dialogflow library

googleapis/nodejs-dialogflow#405

dialogflow-ui/.gitignore

@@ -17,7 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
-variables.env
+.env
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

dialogflow-ui/package.json

@@ -16,7 +16,8 @@
     "react": "^16.9.0",
     "react-chat-window": "^1.2.1",
     "react-dom": "^16.9.0",
-    "react-scripts": "3.1.1"
+    "react-scripts": "3.1.1",
+    "uuid": "^3.3.3"
   },
   "scripts": {
     "start": "react-scripts start",

dialogflow-ui/src/App.js

@@ -1,32 +1,74 @@
 import React from 'react';
 import {Launcher} from 'react-chat-window';
+import dialogflow from 'dialogflow';
+import uuid from 'uuid';
+require('dotenv').config({path :'.env'});
 
-const keyFilename = process.env.DF_SERVICE_ACCOUNT_PATH;
-const { SessionsClient } = require('dialogflow');
+export default function App() {
+  const [conversation, newMessage] = React.useState([]);
+  /**
+   * @desc: Send a query to the dialogflow agent, and return query result.
+   * @param {string} projectId The project to be used
+   * @param {object} queryObject coming from chatbox.
+   */
+  async function handleSubmit(queryObject) {
+    newMessage([...conversation, queryObject]);
 
-const dialogflowClient = new SessionsClient({
-  credentials: {
-    private_key: process.env.DF_PRIV_KEY,
-    client_email: process.env.DF_CLIENT_EMAIL
-  },
-  projectId: process.env.DF_PROJECT_ID
-});
-const projectId = process.env.DF_PROJECT_ID;
+    const private_key = process.env.DF_PRIV_KEY;
+    const client_email = process.env.DF_CLIENT_EMAIL;
+    const projectId = process.env.DF_PROJECT_ID;
 
+    const queryText = queryObject.data.text;
+    console.log(projectId, ' : ',queryText);
+
+    if (!projectId) return console.error('Dialogflow projectId not found in .env file!');
+
+    // Create a unique identifier for the session
+    const sessionId = uuid.v4();
+    // Create a new session
+    const sessionsClient = new dialogflow.SessionsClient(
+        {
+          credentials: {
+            private_key
+            client_email
+          },
+        }
+    );
+    const sessionPath = sessionsClient.sessionPath(projectId, sessionId);
+
+    // The text query request.
+    const request = {
+      session: sessionPath,
+      queryInput: {
+        text: {
+          // The query to send to the dialogflow agent
+          text: queryText,
+          // The language used by the client
+          languageCode: 'en-US',
+        },
+      },
+    };
+
+    // Send request and log result
+    const responses = await sessionPath.detectIntent(request);
+    console.log("Detected intent. Here's response:", responses);
+    // Get query result
+    const result = responses[0].queryResult;
+    console.log(`  Query: ${result.queryText}`);
+    console.log(`  Response: ${result.fulfillmentText}`);
+    if (result.intent) {
+      console.log(`  Intent: ${result.intent.displayName}`);
+    } else {
+      console.log(`  No intent matched.`);
+    }
+  }
 
-export default function App() {
-  const handleSubmit = messageObject => {
-    messageObject.author = 'User';
-    this.setState({
-      conversation: [...this.state.conversation, messageObject],
-    });
-  };
   return (
         <Launcher
             isOpen={true}
-            agentProfile={{teamName: "Fosteman's DialogFlow Chatbot"}}
-            onMessageWasSent={this.handleSubmit}
-            messageList={this.state.conversation}
+            agentProfile={{teamName: "Fosteman's Dialog Flow Bot"}}
+            onMessageWasSent={handleSubmit}
+            messageList={conversation}
         />
   );
 }

dialogflow-ui/src/utils/environment.js

@@ -0,0 +1,19 @@
+const webpack = require('webpack');
+const dotenv = require('dotenv');
+
+module.exports = () => {
+    // call dotenv and it will return an Object with a parsed key
+    const env = dotenv.config().parsed;
+
+    // reduce it to a nice object, the same as before
+    const envKeys = Object.keys(env).reduce((prev, next) => {
+        prev[`process.env.${next}`] = JSON.stringify(env[next]);
+        return prev;
+    }, {});
+
+    return {
+        plugins: [
+            new webpack.DefinePlugin(envKeys)
+        ]
+    };
+};

dialogflow-ui/src/utils/logQueryResult.js

@@ -0,0 +1,29 @@
+export function logQueryResult(sessionClient, result) {
+    // Imports the Dialogflow library
+    const dialogflow = require('dialogflow');
+
+    // Instantiates a context client
+    const contextClient = new dialogflow.ContextsClient();
+
+    console.log(`  Query: ${result.queryText}`);
+    console.log(`  Response: ${result.fulfillmentText}`);
+    if (result.intent) {
+        console.log(`  Intent: ${result.intent.displayName}`);
+    } else {
+        console.log(`  No intent matched.`);
+    }
+    const parameters = JSON.stringify(struct.decode(result.parameters));
+    console.log(`  Parameters: ${parameters}`);
+    if (result.outputContexts && result.outputContexts.length) {
+        console.log(`  Output contexts:`);
+        result.outputContexts.forEach(context => {
+            const contextId = contextClient.matchContextFromContextName(context.name);
+            const contextParameters = JSON.stringify(
+                struct.decode(context.parameters)
+            );
+            console.log(`    ${contextId}`);
+            console.log(`      lifespan: ${context.lifespanCount}`);
+            console.log(`      parameters: ${contextParameters}`);
+        });
+    }
+}