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
247 lines (237 loc) • 13.1 kB
HTML
<script type="text/javascript">
$.RedBot.registerType('chatbot-msteams-node', {
category: 'config',
defaults: {
botname: {
value: '',
required: true
},
usernames: {
value: '',
required: false
},
appId: {
value: '',
required: false
},
appPassword: {
value: '',
required: false
},
store: {
value: '',
type: 'chatbot-context-store',
required: false
},
log: {
value: null
},
debug: {
value: false
}
},
oneditprepare: function() {
var node = this;
var nodeRedUrl = $.RedBot.getNodeRedUrl();
// fetch available context providers
$.get(nodeRedUrl + 'redbot/globals')
.done(function(response) {
if (response != null && response.msteams != null && response.msteams[node.botname] != null) {
$('#node-config-input-botname').prop('readonly', true);
$('.form-editable').hide();
$('.form-warning').show();
$('.form-warning .bot-name').html('"' + node.botname + '"');
}
});
},
paletteName: 'MS Teams Bot',
credentials: {
appId: {
type: 'text'
},
appPassword: {
type: 'text'
}
},
label: function () {
return this.botname;
}
});
</script>
<script type="text/x-red" data-template-name="chatbot-msteams-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="form-row">
<label for="node-config-input-appId">Application Id</label>
<input type="text" id="node-config-input-appId">
</div>
<div class="form-row">
<label for="node-config-input-appPassword">Application Password</label>
<input type="text" id="node-config-input-appPassword">
</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 class="form-row">
<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">
<label for="node-config-input-debug">Debug</label>
<input type="checkbox" value="true" id="node-config-input-debug">
<span class="redbot-form-hint">
Show debug information on send/receive
</span>
</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-msteams-node"><p>To create a <strong>Microsoft Teams</strong> chatbot first install the <strong>App Studio</strong> application in the application store, then open the app and switch to the tab <em>“Manifest editor”</em> then <em>“Create a new app”</em>.</p>
<p>You will need to fill all required fiels to create the application manifest, but before doing that, create your inbound link. <strong>Microsoft Teams</strong> requires a public link to send the incoming messages to, we’ll use <a href="https://ngrok.com/"><strong>ngrok</strong></a> to create a https tunnel for our local <strong>Node-RED</strong> instance. Install it, then open a shell window and run</p>
<pre><code class="language-bash">ngrok http 127.0.0.1:1880
</code></pre>
<p>You should get something like</p>
<p><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/1bb58f7f-8315-4777-9d93-e4a21bafff47/facebook-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=adc625ad2e07f26f74abbf39155376fd424b75206693f2508a079165766bb3a0&X-Amz-SignedHeaders=host&x-id=GetObject" alt="ngrok"></p>
<p>Grab the https address you get, something like <a href="https://123123.ngrok.io">https://123123.ngrok.io</a>, this is the base url that points back to your <strong>Node-RED</strong> instance.</p>
<p>The callback is</p>
<pre><code class="language-plain">http://youraddress.ngrok.io/redbot/msteams
</code></pre>
<p>Now let’s get back to the manifest page and fill in all the required fields in the section <em>“App details”</em>, click on the <em>“Generate”</em> button to create an <em>appId</em> (it will be used in the bot configuration in <strong>RedBot</strong>). Then switch to the tab <em>“Bots”</em> and click on <em>“Set up”</em> (this will add the chatbot functionality to the application): select “My Bot supports uploading and downloading file” and all scopes (<em>“Personal”</em>, <em>“Team”</em>, <em>“Group Chat”</em>), then click on <em>“Create Bot”</em>.</p>
<p><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/752e02fb-fa55-46d1-9689-83c9c464439c/msteams-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=5f3860b51d34429043a3fe1f715a920cba49cc17958b7642c0939351d6b235b0&X-Amz-SignedHeaders=host&x-id=GetObject" alt="Create Bot"></p>
<p>Now grab the bot <em>appId</em> just below the name of the chatbot (note that is not the same <em>appId</em> of the manifest file). In the messaging point set the <strong>ngrok</strong> callback you have create before (be sure to hit <em>“Enter”</em> and that a small green validation mark appears)</p>
<p><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/b2655042-f65e-4aa6-8a59-de6f458dc38e/msteams-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=b8e7da1fd873c3817a14f88b15e446b52676ddc1f95e1c2d0816f6482e104c50&X-Amz-SignedHeaders=host&x-id=GetObject" alt="Application Id"></p>
<p>Click on <em>“Generate new password”</em> to create an <em>Application password</em>, store this password somewhere, it will displayed just once.</p>
<p>Now switch to <em>“Test and distribute”</em> section and click <em>“Download”</em> to get the manifest package. Now go back to the application store and click on <em>“Upload a custom app”</em> and select the previously downloaded manifest file.</p>
<p><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/711fc01f-10fa-4af0-a2e6-970ca2c2b8e0/msteams-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=fdf4bdbc032a0d429a940e1f3483361a3ff5986fb23250b4b6a5d111877b316b&X-Amz-SignedHeaders=host&x-id=GetObject" alt="Upload Manifest"></p>
<p>Pay attention here: when the callback url will change (for example you’ve restarted <strong>ngrok</strong>), you will need to edit the manifest file in the <strong>App studio</strong> then update the <em>“Messaging endpoint”</em> and bumping the app version, then download again the manifest file and upload it again in the <em>“Built for …”</em> link in the application store.</p>
<p>Now create open the <code>MSTeam receiver node</code> and create a configuration and fill in the <em>appId</em> and <em>Application password</em> you got before.</p>
</script>
<script type="text/javascript">
$.RedBot.registerType('chatbot-msteams-receive', {
category: $.RedBot.config.name + ' Platforms',
color: '#FFCC66',
defaults: {
bot: {
value: '',
type: 'chatbot-msteams-node',
required: true
},
botProduction: {
value: '',
type: 'chatbot-msteams-node',
required: false
}
},
inputs: 0,
outputs: 1,
icon: 'teams.svg',
paletteLabel: 'Microsoft Teams Receiver',
label: function () {
return "Microsoft Teams Receiver";
}
});
</script>
<script type="text/x-red" data-template-name="chatbot-msteams-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-msteams-receive">
<p>Input node for Microsoft Teams.</p>
</script>
<script type="text/javascript">
$.RedBot.registerType('chatbot-msteams-send', {
category: $.RedBot.config.name + ' Platforms',
color: '#FFCC66',
defaults: {
bot: {
value: "",
type: 'chatbot-msteams-node',
required: true
},
botProduction: {
value: "",
type: 'chatbot-msteams-node',
required: false
},
track: {
value: false
},
passThrough: {
value: false
},
outputs: {
value: 0
}
},
inputs: 1,
outputs: 1,
icon: 'teams.svg',
paletteLabel: 'Microsoft Teams Sender',
label: function () {
return 'Microsoft Teams Sender';
},
oneditsave: function() {
var track = $('#node-input-track').is(':checked');
var passThrough = $('#node-input-passThrough').is(':checked');
this.outputs = track || passThrough ? 1 : 0;
}
});
</script>
<script type="text/x-red" data-template-name="chatbot-msteams-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>
</div>
</script>
<script type="text/x-red" data-help-name="chatbot-msteams-send">
<p>Output node for Microsoft Teams.</p>
</script>