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
426 lines (415 loc) • 18.6 kB
HTML
<script type="text/javascript">
$.RedBot.registerType('chatbot-telegram-node', {
category: 'config',
defaults: {
botname: {
value: '',
required: true
},
usernames: {
value: '',
required: false
},
polling: {
value: 1000,
required: true,
validate: RED.validators.number()
},
store: {
value: '',
type: 'chatbot-context-store',
required: false
},
log: {
value: null
},
debug: {
value: false
},
skipMediaFiles: {
value: false
},
webHook: {
value: '',
validate: function(value) {
if (this.connectMode === 'webHook') {
return $.RedBot.validate.url(value);
}
return true;
}
},
connectMode: {
value: 'polling'
},
storeMessages: {
value: true
},
enableMissionControl: {
value: false
},
inspectMessages: {
value: true
},
chatbotId: {
value: ''
}
},
oneditprepare: function() {
$("#node-config-input-polling").spinner({ min: 0, step: 100 });
var node = this;
var nodeRedUrl = $.RedBot.getNodeRedUrl();
// change connection mode
$('#node-config-input-connectMode')
.change(function() {
$('.form-row-mode').hide();
$('.form-row-mode-' + $(this).val()).show();
});
$('.form-row-mode').hide();
$('.form-row-mode-' + this.connectMode).show();
if (this.connectMode == null || this.connectMode === '') {
$('#node-config-input-connectMode').val('polling');
$('.form-row-mode-polling').show();
}
// fetch available context providers
$.get(nodeRedUrl + 'redbot/globals')
.done(function(response) {
if (response != null && response.telegram != null && response.telegram[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: 'Telegram Bot',
credentials: {
token: {
type: 'text'
},
providerToken: {
type: 'text'
}
},
label: function () {
return this.botname;
}
});
</script>
<script type="text/x-red" data-template-name="chatbot-telegram-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>Telegram settings</div>
</div>
<div class="form-row">
<label for="node-config-input-token">Token</label>
<input type="text" id="node-config-input-token">
</div>
<div class="form-row">
<label for="node-config-input-providerToken">Provider Token</label>
<input type="text" id="node-config-input-providerToken">
</div>
<div class="form-row form-row-method">
<label for="node-config-input-connectMode">Connect Mode</label>
<select id="node-config-input-connectMode" placeholder="Select connect mode">
<option value="polling">Polling</option>
<option value="webHook">Web Hook</option>
</select>
</div>
<div class="form-row form-row-mode form-row-mode-polling">
<label for="node-config-input-polling">Polling</label>
<input type="text" id="node-config-input-polling" style="text-align:end; width:60px !important"> ms
</div>
<div class="form-row form-row-mode form-row-mode-webHook">
<label for="node-config-input-webHook">Web Hook</label>
<input type="text" id="node-config-input-webHook" style="width: inherit;margin: -3px 0px 0px 5px;">
<div class="redbot-form-hint">
Needs to be a public and secure internet address, accessible outside the local network and must hit your instance at the
address <code>https://your.instance.com/redbot/telegram</code>.
Use <b>ngrok</b> to create a bridge to your local environment while in development mode, for example something
like <code>https://123456.ngrok.io/redbot/telegram</code>
</div>
</div>
<div class="form-row form-row-skipMediaFiles">
<label for="node-config-input-skipMediaFiles">Skip media files</label>
<input type="checkbox" value="true" id="node-config-input-skipMediaFiles">
<div class="redbot-form-hint">
Skip media files (large media files can degrade performance)
</div>
</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-telegram-node"><p>Creating a chatbot in <strong>Telegram</strong> is very easy, since it allows polling in order to to receive messages, it doesn’t required a callback url and a https certificate (like <strong>Facebook Messenger</strong>)</p>
<p><strong>Telegram</strong> is really coherent and you have to use a chat bot to create a chatbot. Connect to <strong>@BotFather</strong> and type <code>/newbot</code>, then in the next two steps give the bot a name and username (this will be the real unique address of your chatbot), you’ll get something like this for <strong>@my_new_chat_bot</strong></p>
<p><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/b7bef9f1-13fc-4759-b168-bb1ef2f9e3ea/telegram-token.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=20230218T124916Z&X-Amz-Expires=3600&X-Amz-Signature=3fb27d2d3350baf7532c57b7211e2e8dbe47fea6185e56e6566c5fe3a10e7a85&X-Amz-SignedHeaders=host&x-id=GetObject" alt="Telegram create chatbot"></p>
<p>Copy and paste the access token. For more information <a href="https://core.telegram.org/bots#6-botfather">read here</a>. Then open your <strong>Node-RED</strong> and add a <code>Telegram Receiver node</code> , in the configuration panel, add a new bot and paste the token</p>
<p><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/a281cc05-db46-4826-9d3b-a1c9cf64c9ad/telegram-token-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=20230218T124916Z&X-Amz-Expires=3600&X-Amz-Signature=2ab21050493611fb8d8966d6f9cf3f25f5eb4e55e24e010345d910b0506c3c35&X-Amz-SignedHeaders=host&x-id=GetObject" alt="Paste Telegram token"></p>
<p><code>Telegram Receiver node</code> also support the connection with web hook, the URL must be secure (https) and should hit the <code>/redbot/telegram</code> endpoint of the <strong>Node-RED</strong> instance, for example</p>
<pre><code class="language-plain">https://a.secure.url.com/redbot/telegram
</code></pre>
<p>Use <strong>ngrok</strong> to test the webhook locally during development.</p>
<p><code>Telegram Receiver node</code> and <code>Telegram Sender node</code> have a double bot configuration for <em>development</em> and <em>production</em>. By default is used the <em>development</em> configuration. To use <em>production</em> configuration, edit <strong>Node-RED</strong> settings file (<em>settings.js</em>) and set the <em>environment</em> global variable to <em>“production”</em>. See <a href="https://www.notion.so/c0c2de46b48a4def837753c7e284b356">Deploying RedBot</a> for more details.</p>
</script>
<script type="text/javascript">
$.RedBot.registerType('chatbot-telegram-receive', {
category: $.RedBot.config.name + ' Platforms',
color: '#FFCC66',
defaults: {
bot: {
value: '',
type: 'chatbot-telegram-node',
required: true
},
botProduction: {
value: '',
type: 'chatbot-telegram-node',
required: false
}
},
inputs: 0,
outputs: 1,
icon: 'telegram.svg',
paletteLabel: 'Telegram Receiver',
label: function () {
return "Telegram Receiver";
}
});
</script>
<script type="text/x-red" data-template-name="chatbot-telegram-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-telegram-receive">
<p>Input node for Telegram.</p>
</script>
<script type="text/javascript">
$.RedBot.registerType('chatbot-telegram-send', {
category: $.RedBot.config.name + ' Platforms',
color: '#FFCC66',
defaults: {
bot: {
value: "",
type: 'chatbot-telegram-node',
required: true
},
botProduction: {
value: "",
type: 'chatbot-telegram-node',
required: false
},
track: {
value: false
},
passThrough: {
value: false
},
errorOutput: {
value: false
},
outputs: {
value: 0
}
},
inputs: 1,
outputs: 1,
icon: 'telegram.svg',
paletteLabel: 'Telegram Sender',
label: function () {
return 'Telegram 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-telegram-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;width:auto;">
<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;width:auto;">
<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;width:auto;">
<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-telegram-send">
<p>Output node for Telegram.</p>
</script>