node-red-contrib-chatbot
Version:
REDBot a Chat bot for a full featured chat bot for Telegram, Facebook Messenger and Slack. Almost no coding skills required
263 lines (254 loc) • 13.3 kB
HTML
<script type="text/javascript">
$.RedBot.registerType('chatbot-dialogflow-token', {
category: 'config',
defaults: {
name: {
value: '',
required: true
}
},
paletteName: 'Dialogflow Token',
credentials: {
email: {
type: 'text',
validate: function(value) {
return $.RedBot.validate.email(value);
}
},
privateKey: {
type: 'text',
validate: function(value) {
return $.RedBot.validate.privateKey(value);
}
},
projectId: {
type: 'text',
required: true
}
},
label: function () {
return this.name || 'Dialogflow.com';
},
oneditprepare: function() {
$('#node-config-input-privateKey')
.on('blur', function() {
var privateKey = $(this).val();
var json = null;
try {
json = JSON.parse(privateKey);
} catch(e) {
}
if (json != null) {
privateKey = json.private_key;
$(this).val(privateKey);
} else {
privateKey = privateKey.replace(/\\n/g,"\n");
$(this).val(privateKey);
}
});
}
});
</script>
<script type="text/x-red" data-template-name="chatbot-dialogflow-token">
<div class="form-row">
<label for="node-config-input-name"><i class="icon-bookmark"></i>Name</label>
<input type="text" id="node-config-input-name">
</div>
<div class="form-row">
<label for="node-config-input-email">Project ID</label>
<input type="text" id="node-config-input-projectId">
</div>
<div class="form-row">
<label for="node-config-input-email">Account ID</label>
<input type="text" id="node-config-input-email">
</div>
<div class="form-row">
<label for="node-config-input-privateKey">Private Key</label>
<textarea
type="text"
id="node-config-input-privateKey"
style="width:100%;height:400px;font-size:11px;font-family:monospace;"
/>
</div>
</script>
<script type="text/x-red" data-help-name="chatbot-dialogflow-token"><p>Insert here the access token for <strong>Dialogflow.ai</strong>.</p>
<p>To get the token, click on the small cog in the left column and get them in the <em>Api Section</em></p>
<p><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/f7a85ad3-6b30-476b-b1c2-28cacc6e61f0/example-dialogflow-2.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20230218%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20230218T124931Z&X-Amz-Expires=3600&X-Amz-Signature=65c1765c74974a9b299c1bec9df927c5690f9ee1eeae6c105c56b9b4ac96e479&X-Amz-SignedHeaders=host&x-id=GetObject" alt=""></p>
</script>
<script type="text/javascript">
$.RedBot.registerType('chatbot-dialogflow', {
category: $.RedBot.config.name + ' Parsers',
color: '#FFCC66',
defaults: {
dialogflow: {
value: '',
type: 'chatbot-dialogflow-token',
required: true
},
language: {
value: 'en',
required: true
},
debug: {
value: false
},
variable: {
value: 'topic'
}
},
inputs: 1,
outputs: 2,
paletteLabel: 'Dialogflow.com',
icon: 'chatbot-ai.png',
label: function() {
return this.name || 'Dialogflow.com';
}
});
</script>
<script type="text/x-red" data-template-name="chatbot-dialogflow">
<div class="form-row">
<label for="node-input-recast">Token</label>
<input type="text" id="node-input-dialogflow" placeholder="Dialogflow.com access token">
</div>
<div class="form-row">
<label for="node-input-">Language</label>
<select id="node-input-language" placeholder="Choose a Language...">
<option value="af">Afrikanns</option>
<option value="sq">Albanian</option>
<option value="ar">Arabic</option>
<option value="hy">Armenian</option>
<option value="eu">Basque</option>
<option value="bn">Bengali</option>
<option value="bg">Bulgarian</option>
<option value="ca">Catalan</option>
<option value="km">Cambodian</option>
<option value="zh">Chinese (Mandarin)</option>
<option value="hr">Croation</option>
<option value="cs">Czech</option>
<option value="da">Danish</option>
<option value="nl">Dutch</option>
<option value="en">English</option>
<option value="et">Estonian</option>
<option value="fj">Fiji</option>
<option value="fi">Finnish</option>
<option value="fr">French</option>
<option value="ka">Georgian</option>
<option value="de">German</option>
<option value="el">Greek</option>
<option value="gu">Gujarati</option>
<option value="he">Hebrew</option>
<option value="hi">Hindi</option>
<option value="hu">Hungarian</option>
<option value="is">Icelandic</option>
<option value="id">Indonesian</option>
<option value="ga">Irish</option>
<option value="it">Italian</option>
<option value="js">Japanese</option>
<option value="jw">Javanese</option>
<option value="ko">Korean</option>
<option value="la">Latin</option>
<option value="lv">Latvian</option>
<option value="lt">Lithuanian</option>
<option value="mk">Macedonian</option>
<option value="ms">Malay</option>
<option value="ml">Malayalam</option>
<option value="mt">Maltese</option>
<option value="mi">Maori</option>
<option value="mr">Marathi</option>
<option value="mn">Mongolian</option>
<option value="ne">Nepali</option>
<option value="no">Norwegian</option>
<option value="fa">Persian</option>
<option value="pl">Polish</option>
<option value="pt">Portuguese</option>
<option value="pa">Punjabi</option>
<option value="qu">Quechua</option>
<option value="ro">Romanian</option>
<option value="ru">Russian</option>
<option value="sm">Samoan</option>
<option value="sr">Serbian</option>
<option value="sk">Slovak</option>
<option value="sl">Slovenian</option>
<option value="es">Spanish</option>
<option value="sw">Swahili</option>
<option value="sv">Swedish</option>
<option value="ta">Tamil</option>
<option value="tt">Tatar</option>
<option value="te">Telugu</option>
<option value="th">Thai</option>
<option value="bo">Tibetan</option>
<option value="to">Tonga</option>
<option value="tr">Turkish</option>
<option value="uk">Ukranian</option>
<option value="ur">Urdu</option>
<option value="uz">Uzbek</option>
<option value="vi">Vietnamese</option>
<option value="cy">Welsh</option>
<option value="xh">Xhosa</option>
</select>
</div>
<div class="form-row">
<label for="node-input-variable">Store <em>intent</em> in</label>
<input type="text" id="node-input-variable" placeholder="Variable name">
</div>
<div class="form-row">
<label for="node-input-debug">Debug</label>
<input type="checkbox" value="true" id="node-input-debug">
<span class="redbot-form-hint">
Show debug information from Dialogflow.com
</span>
</div>
</script>
<script type="text/x-red" data-help-name="chatbot-dialogflow"><p><a href="http://dialogflow.com/">Dialogflow.com</a> is a chatbot / AI platform that allows to easily train a bot in order to detect the user intent and extract relevant data.</p>
<p>For a complete tutorial about <strong>Dialogflow.com</strong> give a look <a href="https://dialogflow.com/docs/getting-started/building-your-first-agent">here</a>. The <code>Dialogflow.com node</code> sends the text of the incoming message to the <strong>Dialogflow.com</strong> servers, then:</p>
<ul>
<li><p>if no <em>intent</em> is detected, then the incoming message is redirected to the second output</p>
</li>
<li><p>if an <em>intent</em> is detected, then it’s stored in the context variable <code>topic</code> (or a different variable) and a key/value hash of all relevant information extracted is sent to the first output along with other informations.</p>
</li>
</ul>
<p><strong>Dialogflow.com</strong> is able to create a full featured chatbot, nevertheless it can be used just for the NLP capabilities and to detetect/classify user’s sentences.</p>
<p>For example, create a <code>Drinks</code> entity with these values</p>
<pre><code class="language-plain">martini rosso
mojito
moscow mule
old fashion
</code></pre>
<p>Then create an intent <code>want-drink</code> and train with these phrases</p>
<pre><code class="language-plain">I want a martini rosso
May I have a martini
Can I have a moscow mule
May I have a mojito
</code></pre>
<p>and verify that the words <em>“martini rosso”</em>, <em>“martini”</em>, <em>“moscow mule”</em> and <em>“mojito”</em> are already marked with the entity <code>Drinks</code>, if not, it’s possible to mark portions of the sentences with the appropriate entity. Then prepare a flow like this</p>
<p><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/8e43dc8a-5c74-4f7d-a87a-abc9ca583fcb/example-dialogflow.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20230218%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20230218T124926Z&X-Amz-Expires=3600&X-Amz-Signature=945ba31308b0cac4d838a23e9a4077d915aa7b6bb8aa3151793ad6de67ffa4e3&X-Amz-SignedHeaders=host&x-id=GetObject" alt=""></p>
<p>If the user says <em>“I want a martini”</em>, the topic will be switched to <em>“want-drink”</em> and the output will be</p>
<pre><code class="language-javascript">{
payload: {
intent: 'want-drink',
answer: 'I am the answer',
variables: {
Drinks: 'martini rosso'
}
}
</code></pre>
<p>Generally after a <code>Dialogflow.com node</code> it’s useful a <a href="https://www.notion.so/4113636f565d4ff4af08bc61a644206b">Rules node</a> to test the <em>topic</em> variable and redirect the flow based on user’s intent.</p>
<p>If Dialogflow is configured to provide an answer (<code>payload.answer') then is possible to connect a</code>Message node` directly to the first output to send the message back to the user.</p>
<p>With <strong>Dialogflow.com</strong> it’s possible to define some answers for intents, if one of these is available it will be included in the <code>payload</code>.</p>
<p>To configure the connection for <strong>Dialogflow.com</strong> follow this steps:</p>
<ol>
<li><p>Open the agent configuration (the cog in the left column) and switch to <em>“V2 API”</em> and click <em>“Save”</em></p>
<p> <img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/9b539653-0563-4daf-a7d3-83bb58ec6cb0/dialog-flow-1.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20230218%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20230218T124930Z&X-Amz-Expires=3600&X-Amz-Signature=e2ac0e34b0018505ca171e8f30800338c0393fe8ae0fa356eed28ff72958c231&X-Amz-SignedHeaders=host&x-id=GetObject" alt=""></p>
</li>
<li><p>Grab the <strong>Project ID</strong> and add a service account for the <em>Google Cloud Platform</em> (click on the “+”), wait until the <strong>Service Account</strong> appears and grab it</p>
<p> <img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/86788245-5e90-43d1-a88a-385f96afbd14/dialog-flow-2.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20230218%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20230218T124930Z&X-Amz-Expires=3600&X-Amz-Signature=0a3acd061ce2d12a475a0b4a4c4edaf98c3d4a496e8d259831396fefdd923fc8&X-Amz-SignedHeaders=host&x-id=GetObject" alt=""></p>
</li>
<li><p>Click on the <strong>Service Account</strong>, you will be redirected to the <em>Google Cloud Platform</em> service account, click on the three dots of the last <em>Service Account</em> and generate a key</p>
<p> <img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/9705198f-8b21-4e92-a877-d5151fe231aa/dialog-flow-3.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20230218%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20230218T124931Z&X-Amz-Expires=3600&X-Amz-Signature=716ac3492092e5ec0abc9b9445e945d38261537048ea139bfd10122dda3cb487&X-Amz-SignedHeaders=host&x-id=GetObject" alt=""></p>
</li>
<li><p>Copy and paste the downloaded .JSON file in “Private Key” field in the <strong>Dialogflow.com</strong> connection in <strong>Node-RED</strong></p>
<p> <img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/e422fb4c-e834-4450-bbb8-27c1b7a8804b/dialog-flow-4.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20230218%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20230218T124931Z&X-Amz-Expires=3600&X-Amz-Signature=170f25f982da5ce1d8bad73190d693089b7e9b77d27493ef977a188d3b22b817&X-Amz-SignedHeaders=host&x-id=GetObject" alt=""></p>
<p> See also <a href="https://www.notion.so/3663be9a404e4e3a9f3022bb66fe8d1e">Dialogflow token node</a></p>
</li>
</ol>
</script>