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
391 lines (377 loc) • 18.3 kB
HTML
<script type="text/javascript">
$.RedBot.registerType('chatbot-twilio-node', {
category: 'config',
defaults: {
botname: {
value: '',
required: true
},
usernames: {
value: '',
required: false
},
accountSid: {
value: '',
required: false
},
fromNumber: {
value: '',
required: false
},
store: {
value: '',
type: 'chatbot-context-store',
required: false
},
log: {
value: null
},
debug: {
value: false
},
storeMessages: {
value: true
},
enableMissionControl: {
value: false
},
inspectMessages: {
value: true
},
chatbotId: {
value: ''
}
},
oneditprepare: function() {
var node = this;
var nodeRedUrl = $.RedBot.getNodeRedUrl();
// fetch available context providers
$.get(nodeRedUrl + 'redbot/globals')
.done(function(response) {
if (response != null && response.twilio != null && response.twilio[node.botname] != null) {
$('#node-config-input-botname').prop('readonly', true);
$('.form-editable').hide();
$('.form-warning').show();
$('.form-warning .bot-name').html('"' + node.botname + '"');
}
// hide mission control options if not enabled
if (!response.missionControl) {
$('.form-row-not-mission-control').show();
$('.form-row-mission-control').hide();
$('#node-config-input-enableMissionControl')
.prop('disabled', true)
.prop('checked', false);
}
});
// enable or disable mission control
$('#node-config-input-enableMissionControl')
.change(function() {
if ($(this).is(':checked')) {
$('.form-row-not-mission-control').hide();
$('.form-row-mission-control').show();
} else {
$('.form-row-not-mission-control').show();
$('.form-row-mission-control').hide();
}
});
// if enable mission control, set a random chatbot id if empty
$('#node-config-input-enableMissionControl')
.change(function() {
if ($(this).is(':checked')) {
const chatbotId = $('#node-config-input-chatbotId').val();
if (chatbotId == null || chatbotId === '') {
$.ajax({ url: '/mc/chatbotIdGenerator' })
.then(res => {
$('#node-config-input-chatbotId').val(res);
});
}
}
});
},
paletteName: 'Twilio Bot',
credentials: {
authToken: {
type: 'text'
}
},
label: function () {
return this.botname;
}
});
</script>
<script type="text/x-red" data-template-name="chatbot-twilio-node">
<div class="form-row">
<label for="node-config-input-botname"><i class="icon-bookmark"></i> Bot Name</label>
<input type="text" id="node-config-input-botname">
</div>
<div class="form-editable">
<div class="redbot-separator">
<div>Twilio settings</div>
</div>
<div class="form-row">
<label for="node-config-input-accountSid">Account Sid</label>
<input type="text" id="node-config-input-accountSid">
</div>
<div class="form-row">
<label for="node-config-input-authToken">Auth Token</label>
<input type="text" id="node-config-input-authToken">
</div>
<div class="form-row">
<label for="node-config-input-fromNumber">Sender Number</label>
<input type="text" id="node-config-input-fromNumber">
</div>
<div class="redbot-separator">
<div>RedBot settings</div>
</div>
<div class="form-row">
<label for="node-config-input-debug">Debug</label>
<input type="checkbox" value="true" class="redbot-checkbox" id="node-config-input-debug">
<span class="redbot-form-hint">
Show debug information on send/receive
</span>
</div>
<div class="form-row">
<label for="node-config-input-enableMissionControl" class="redbot-label">Use Mission Control</label>
<input type="checkbox" value="true" class="redbot-checkbox" id="node-config-input-enableMissionControl">
<span class="redbot-form-hint">
Enable Mission Control, see <a href="https://github.com/guidone/node-red-contrib-chatbot/wiki/Mission-Control" target="_blank">documentation here</a>
</span>
</div>
<div class="form-row form-row-mission-control">
<div class="redbot-form-hint">
Mission Control uses the built-in <b>SQLite context provider</b>.
</div>
</div>
</div>
<div class="form-row form-row-not-mission-control">
<label for="node-input-bot">Context</label>
<input type="text" id="node-config-input-store" placeholder="Select storage for chat context">
<div style="max-width: 460px;font-size: 12px;color: #999999;line-height: 14px;margin-top:5px;">
Select the chat context provider to use with this bot, if none is selected then non-persistent "memory" will be used.<br>
To extend <strong>RedBot</strong> with a new chat context provider see <a href="https://github.com/guidone/node-red-contrib-chatbot/wiki/Creating-a-Chat-Context-Provider" target="_blank">this tutorial</a>.
</div>
</div>
<div class="form-row form-row-mission-control">
<label for="node-config-input-chatbotId" class="redbot-label">Chatbot ID</label>
<input type="text" id="node-config-input-chatbotId" placeholder="Enter a chatbot ID">
<span class="redbot-form-hint">
Specify a chatbot ID if you're running multiple chatbots on this Node-RED instance (it's just a string of your choice). Leave it blank if you're just running a single chatbot.
</span>
</div>
<div class="form-row form-row-mission-control">
<label class="redbot-label" for="node-config-input-storeMessages">Store messages</label>
<input type="checkbox" value="true" class="redbot-checkbox" id="node-config-input-storeMessages">
<span class="redbot-form-hint">
Store inbound and outbound messages in Mission Control
</span>
</div>
<div class="form-row form-row-mission-control">
<label for="node-config-input-inspectMessages" class="redbot-label">Inspect messages</label>
<input type="checkbox" value="true" class="redbot-checkbox" id="node-config-input-inspectMessages">
<span class="redbot-form-hint">
Inspect messages in real time in Mission Control
</span>
</div>
<div class="redbot-separator">
<div>
Legacy settings
</div>
<span class="redbot-form-hint">
These settings are for retrocompatibility, should only be used in legacy bots. Use <b>Mission Control</b>
to control user access or to log messages
</span>
</div>
<div class="form-row">
<label for="node-config-input-usernames">Users</label>
<input type="text" id="node-config-input-usernames">
<div style="max-width: 460px;font-size: 12px;color: #999999;line-height: 14px;margin-top:5px;">
Comma separated list of userId authorized to use the chatBot
</div>
</div>
<div class="form-row">
<label for="node-config-input-log">Log file</label>
<input type="text" id="node-config-input-log">
<div style="max-width: 460px;font-size: 12px;color: #999999;line-height: 14px;margin-top:5px;">
Store inbound and outbound messages to file
</div>
</div>
</div>
<div class="form-warning" style="display:none;">
This bot configuration is stored in <b>Node-RED</b> <em>settings.js</em> and cannot be modified from the UI, check
the section <code>functionGlobalContext</code> near the key <em class="bot-name">""</em>
</div>
</script>
<script type="text/x-red" data-help-name="chatbot-twilio-node"><p>Create an <a href="https://www.twilio.com/try-twilio">account on Twilio</a> (you’ll need to verify a mobile number to proceed). In order to create a SMS service you have to buy a <strong>Twilio</strong> phone number (any country is fine).</p>
<p><strong>Twilio</strong> sends notification of incoming messages with a callback, use <a href="https://ngrok.com/">ngrok</a> to expose your development instance of <strong>Node-RED</strong> to a public address, open a <strong>Terminal</strong> window and</p>
<pre><code class="language-bash">ngrok http localhost:1880
</code></pre>
<p>You should get something like this</p>
<p><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/b3c40fd9-858e-44ca-9c3c-27d5cf9ea7e4/example-twilio-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=20230218T124917Z&X-Amz-Expires=3600&X-Amz-Signature=f6261e2a28623d42b9e7885bafb8dbde1f4661b5c09b48849b50b338529be46c&X-Amz-SignedHeaders=host&x-id=GetObject" alt=""></p>
<p>The address <em>https://*.nkrok.io</em> is the public URL that points back to your development machine.</p>
<p>First go to the <a href="https://www.twilio.com/console/sms/services">Messaging services</a> section, create a new service and pick up <em>“Chatbot/Interactive 2-way”</em> from the drop down menu. Associate the <strong>Twilio</strong> number to this new service</p>
<p><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/4f7edbc2-1747-4ddc-b56a-729ab747aa2d/example-twilio-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=20230218T124917Z&X-Amz-Expires=3600&X-Amz-Signature=dac66af1c81d8e3c6c0aca1c34aea08d86fa65995f7e1de7ce15102950bed8b2&X-Amz-SignedHeaders=host&x-id=GetObject" alt="Associate number"></p>
<p>Then check the <em>“Process inbound message”</em> and fill it using the <strong>ngrok</strong> address from the <strong>Terminal</strong> window, it should be something like</p>
<p><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/295eeac2-bb79-4cef-b8f0-66a474088c99/example-twilio-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=20230218T124917Z&X-Amz-Expires=3600&X-Amz-Signature=a97cb2305996aa664817d7ab64adbcb0655f4a9636dd621340e5720a3b5791c4&X-Amz-SignedHeaders=host&x-id=GetObject" alt="Associate number"></p>
<p>Now switch to <strong>RedBot</strong> and create a connection for the <code>Twilio Sender node</code>: the <strong>Accound SID</strong> and <strong>Auth Token</strong> will be requested, you’ll find both in the <strong>Twilio</strong>’s <em>Dashboard</em></p>
<p><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/fc820e55-7c56-4f8b-a2bb-1ac01b8a6d5e/example-twilio-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=20230218T124917Z&X-Amz-Expires=3600&X-Amz-Signature=391b08f4a794eb98ee892b3e25814956b8d3f00dc0418af5c1bbd4745644074f&X-Amz-SignedHeaders=host&x-id=GetObject" alt=""></p>
<p>Also don’t forget to fill the <em>Sender Name</em> (the <strong>Twilio</strong> number you bought in the first step). To verify that everything is working fine, try a simple flow to send out an SMS</p>
<p><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/4c80c5c9-734a-40cb-9e0b-3c1602797639/example-twilio-5.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=20230218T124917Z&X-Amz-Expires=3600&X-Amz-Signature=c0e556f1b4e20f2bf135a864c6b57822b5db3579ea42c141c5b6b2e4b721d67b&X-Amz-SignedHeaders=host&x-id=GetObject" alt=""></p>
<p>In the <a href="https://www.notion.so/1d90a6e8dfc448d6865c88358c459de2">Conversation node</a> set the <em>chatId</em> with the recipient’s phone number (complete with the international prefix).</p>
<ul>
<li><p>Be sure that the international prefix of recipient phone number is included in the <a href="https://www.twilio.com/console/sms/settings/geo-permissions">Geographic Permissions</a>.</p>
</li>
<li><p>Two way communications with SMS is possible if the bought number is local to the recipient number (i.e. you need to buy an Italian number to be able to answer chat with an Italian number) otherwise the message will have the recipient <em>“InfoSMS”</em></p>
</li>
<li><p>You will need to upgrade your account to avoid the message <em>“Sent from your Twilio trial account”</em></p>
</li>
</ul>
</script>
<script type="text/javascript">
$.RedBot.registerType('chatbot-twilio-receive', {
category: $.RedBot.config.name + ' Platforms',
color: '#FFCC66',
defaults: {
bot: {
value: '',
type: 'chatbot-twilio-node',
required: true
},
botProduction: {
value: '',
type: 'chatbot-twilio-node',
required: false
}
},
inputs: 0,
outputs: 1,
icon: 'twilio.svg',
paletteLabel: 'Twilio Receiver',
label: function () {
return "Twilio Receiver";
}
});
</script>
<script type="text/x-red" data-template-name="chatbot-twilio-receive">
<div class="form-row">
<label for="node-input-bot" style="display:block;width:100%;">Bot configuration <span class="redbot-environment">(development)</span></label>
<input type="text" id="node-input-bot" placeholder="Bot">
</div>
<div class="form-row" style="margin-top:25px;">
<label for="node-input-botProduction" style="display:block;width:100%;">Bot configuration <span class="redbot-environment">(production)</span></label>
<input type="text" id="node-input-botProduction" placeholder="Bot">
</div>
<div class="redbot-form-hint">
Bot for <strong>production</strong> will be launched only if the global variable <em>"environment"</em> in <em>settings.js</em> is set to <em>"production"</em>, otherwise will be used the configuration for <strong>development</strong>.
</div>
</script>
<script type="text/x-red" data-help-name="chatbot-twilio-receive">
<p>Input node for Twilio.</p>
</script>
<script type="text/javascript">
$.RedBot.registerType('chatbot-twilio-send', {
category: $.RedBot.config.name + ' Platforms',
color: '#FFCC66',
defaults: {
bot: {
value: "",
type: 'chatbot-twilio-node',
required: true
},
botProduction: {
value: "",
type: 'chatbot-twilio-node',
required: false
},
track: {
value: false
},
passThrough: {
value: false
},
errorOutput: {
value: false
},
outputs: {
value: 0
}
},
inputs: 1,
outputs: 1,
icon: 'twilio.svg',
paletteLabel: 'Twilio Sender',
label: function () {
return 'Twilio Sender';
},
inputLabels: 'Chat flow',
outputLabels: function(idx) {
if (idx === 0 && this.track) {
return 'Track';
} else if (idx === 0 && this.passThrough) {
return 'Pass through';
} else if (idx === 1) {
return 'Error';
}
},
oneditprepare: function() {
// cannot be checked at the same time
$('#node-input-passThrough')
.click(function() {
if ($(this).is(':checked')) {
$('#node-input-track').prop('checked', false);
}
});
$('#node-input-track')
.click(function() {
if ($(this).is(':checked')) {
$('#node-input-passThrough').prop('checked', false);
}
});
},
oneditsave: function() {
var count = 0;
var track = $('#node-input-track').is(':checked');
var passThrough = $('#node-input-passThrough').is(':checked');
var errorOutput = $('#node-input-errorOutput').is(':checked');
if (track || passThrough) {
count = 1;
}
if (errorOutput) {
count += 1;
}
this.outputs = count;
}
});
</script>
<script type="text/x-red" data-template-name="chatbot-twilio-send">
<div class="form-row">
<label for="node-input-bot" style="display:block;width:100%;">Bot configuration <span class="redbot-environment">(development)</span></label>
<input type="text" id="node-input-bot" placeholder="Bot">
</div>
<div class="form-row" style="margin-top:25px;">
<label for="node-input-botProduction" style="display:block;width:100%;">Bot configuration <span class="redbot-environment">(production)</span></label>
<input type="text" id="node-input-botProduction" placeholder="Bot">
</div>
<div class="redbot-form-hint">
Bot for <strong>production</strong> will be launched only if the global variable <em>"environment"</em> in <em>settings.js</em> is set to <em>"production"</em>, otherwise will be used the configuration for <strong>development</strong>.
</div>
<div class="form-row" style="margin-top:25px;">
<label for="node-input-track" style="margin-bottom:0px;">Track</label>
<input type="checkbox" value="true" id="node-input-track" style="margin-top:0px;">
<div class="redbot-form-hint">
Track response of the user for this message: any further answer will be redirect to the output pin.
</div>
<label for="node-input-track" style="margin-bottom:0px;margin-top:15px;">Pass Through</label>
<input type="checkbox" value="true" id="node-input-passThrough" style="margin-top:0px;">
<div class="redbot-form-hint">
Forward the message to the output pin after sending (useful to chain messages and keep the right order)
</div>
<label for="node-input-errorOutput" style="margin-bottom:0px;margin-top:15px;">Error Output</label>
<input type="checkbox" value="true" id="node-input-errorOutput" style="margin-top:0px;">
<div class="redbot-form-hint">
Redirect the flow to the error pin in case of platform specific error on sending the message
</div>
</div>
</script>
<script type="text/x-red" data-help-name="chatbot-twilio-send">
<p>Output node for Twilio.</p>
</script>