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
170 lines (166 loc) • 6.55 kB
HTML
<script type="text/javascript">
$.RedBot.registerType('chatbot-slack-blocks', {
category: $.RedBot.config.name,
color: '#FFCC66',
defaults: {
name: {
value: ''
},
blocks: {
value: `{
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "This is a *block*"
}
},
{
"type": "divider"
}
]
}`
},
noerr: {
value: 0,
required: true,
validate: function(v) {
return ((!v) || (v === 0)) ? true : false;
}}
},
inputs: 1,
outputs: 1,
paletteLabel: 'Slack Blocks',
icon: 'chatbot-block.png',
label: function() {
return this.name || 'Slack Blocks';
},
oneditprepare: function() {
var _this = this;
this.editor = RED.editor.createEditor({
id: 'node-input-func-editor',
mode: 'ace/mode/json',
value: $('#node-input-blocks').val(),
globals: {
node: true,
msg:true,
context:true,
RED: true,
util: true,
flow: true,
global: true,
console: true,
Buffer: true,
setTimeout: true,
clearTimeout: true,
setInterval: true,
clearInterval: true
}
});
},
oneditresize: function(size) {
var dialogForm = $('#dialog-form');
var formRowSelect = $('.redbot-form-hint', dialogForm);
var formRowName = $('.form-row-name', dialogForm);
var height = dialogForm.height() - formRowSelect.height() - formRowName.height() - 30;
$('.node-text-editor').css('height', height + 'px');
this.editor.resize();
},
oneditsave: function() {
var annot = this.editor.getSession().getAnnotations();
this.noerr = 0;
$('#node-input-noerr').val(0);
for (var k=0; k < annot.length; k++) {
if (annot[k].type === 'error') {
$('#node-input-noerr').val(annot.length);
this.noerr = annot.length;
}
}
$('#node-input-blocks').val(this.editor.getValue());
this.editor.destroy();
delete this.editor;
}
});
</script>
<script type="text/x-red" data-template-name="chatbot-slack-blocks">
<div class="form-row form-row-name">
<label for="node-input-name"><i class="icon-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row">
<input type="hidden" id="node-input-blocks" autofocus="autofocus">
<div style="height: 250px; min-height:150px;margin-top: 25px;" class="node-text-editor" id="node-input-func-editor" ></div>
</div>
<div class="redbot-form-hint">
Use the <a href="https://api.slack.com/tools/block-kit-builder" target="_blank">Block Kit Builder</a> to design the blocks and copy and paste below.
</div>
</script>
<script type="text/x-red" data-help-name="chatbot-slack-blocks"><p><a href="https://api.slack.com/block-kit">Block Kit</a> is a <strong>Slack</strong> framework to create complex interactions with the chatbot (panels, buttons, UI elements), the <em>“Block”</em> can be visually composed using the <a href="https://api.slack.com/tools/block-kit-builder">Block Kit Builder</a>.</p>
<p>When the <em>Block</em> is ready, just copy and paste the JSON in the <code>Slack Blocks node</code>, for example:</p>
<pre><code class="language-javascript">{
"text": "Fallback text",
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "Hello *{{firstName}}*"
}
},
{
"type": "actions",
"block_id": "my_block_id",
"elements": [
{
"type": "button",
"text": {
"type": "plain_text",
"text": "Say Hello",
"emoji": true
},
"value": "the_value"
}
]
}
]
}
</code></pre>
<p>In any part of the JSON is also possible to use the chat context variables.</p>
<p>For interactive <em>Blocks</em> the result of the user interactions is sent to the chatbot as a <code>response</code> type message (like <a href="https://www.notion.so/e620ae50b7ed44c2a24d6876534b3637">Slack Dialog node</a> ), the payload is an hash object that contains the <em>block_id</em> of the UI element (a button, a dropdown, etc) and related <em>value</em>. If the <em>block_id</em> is not specified in the JSON, it will be auto-generated one.</p>
<p>For example clicking the button in the example above will send the following message to the chatbot</p>
<pre><code class="language-javascript">{
type: 'response',
content: {
my_block_id: 'the_value'
}
}
</code></pre>
<p>A <code>response</code> type message can be chained directly to a [[Context node|Context-node]] to store the results directly in the current user chat context.</p>
<p><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/1056fb7e-c18a-4972-aa30-0e3fca3bf150/slack-blocks.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=20230218T124946Z&X-Amz-Expires=3600&X-Amz-Signature=799e45dd8b1c22fbd8d2a46dfdcad4a99b6e3fe65257f7361a352c052fe4c9d2&X-Amz-SignedHeaders=host&x-id=GetObject" alt="Example Slack Blocks"></p>
<p>The JSON can be passed through the payload by the upstream node:</p>
<pre><code class="language-javascript">msg.payload = {
blocks: '[{ ... }]'
};
</code></pre>
<p>Available parameters for the <code>msg.payload</code></p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td>blocks</td>
<td>string</td>
<td>The JSON string of the Slack Block</td>
</tr>
<tr>
<td>text</td>
<td>string</td>
<td>The fallback string to be used when blocks cannot be displayed (i.e. notifications)</td>
</tr>
</tbody></table>
</script>